/* Dakwerken Hoog & Droog (aannemer d) — "van nok tot goot".
   Banden in de materialen van een dak: gebakken klei, bitumen met leislag, zink met felsnaden. N4 / H6 / R1. */

@font-face { font-family: "Anybody"; font-style: normal; font-weight: 100 900; font-stretch: 50% 150%; font-display: swap;
             src: url("../../fonts/Anybody-Variable.woff2") format("woff2"); }

body.s-aannemer-d {
  --lucht: #edf0f1; --lucht2: #e3e8ea; --kalk: #f4f0e9; --ink: #1a1f23; --grijs: #4e5a61;
  --leisteen: #171b1e; --bitumen: #1c2023; --klei: #a64a29; --klei-band: #963f1f; --klei-d: #84381c; --klei-l: #e08a62; --room: #fbf2e8;
  --zink: #8d9ba4; --zink-l: #c3cdd2; --zink-d: #56636b; --zinkband: #aebac0;
  --a: #a64a29; --a2: #8d9ba4; --bg2: #dfe5e8;
  --kop: "Anybody", "Archivo", "Arial Narrow", sans-serif; --tekst: "DM Sans", system-ui, sans-serif;
  margin: 0; background: var(--lucht); color: var(--ink); font: 400 17px/1.65 var(--tekst);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
body.s-aannemer-d:has(.hd-check:checked) { overflow: hidden; }
.s-aannemer-d a:not(.ods-wrap *) { color: inherit; }
.s-aannemer-d .w { max-width: 1240px; margin: 0 auto; padding: 0 40px; }
.s-aannemer-d :is(h1, h2, h3):not(.ods-wrap *) { font-family: var(--kop); font-stretch: 135%; font-weight: 760; line-height: 1; letter-spacing: -.015em; margin: 0; }
.s-aannemer-d p:not(.ods-wrap *) { margin: 0 0 1em; }
.s-aannemer-d .pijl { width: 1.1em; height: 1.1em; flex: none; }
.s-aannemer-d .ic { width: 20px; height: 20px; flex: none; }
.s-aannemer-d .ph { --img-r: 0; }
.s-aannemer-d img, .s-aannemer-d video { object-fit: cover; }

/* Knoppen: rechthoekig, met een donkere onderrand als een boeiboord */
.s-aannemer-d .knoppen { display: flex; flex-wrap: wrap; gap: 12px; }
.s-aannemer-d .knop { white-space: nowrap; display: inline-flex; align-items: center; gap: 10px; padding: 15px 22px 13px; font: 600 16px/1.2 var(--tekst);
  text-decoration: none; border: 0; border-bottom: 4px solid transparent; cursor: pointer; transition: transform .15s, background .15s; }
.s-aannemer-d .knop:hover { transform: translateY(-2px); }
.s-aannemer-d .knop-klei { background: var(--klei); color: #fff; border-bottom-color: var(--klei-d); }
.s-aannemer-d .knop-klei:hover { background: #b45330; }
.s-aannemer-d .knop-rand { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 2px var(--ink); border-bottom-color: var(--ink); }
.s-aannemer-d .knop-licht { background: var(--room); color: var(--ink); border-bottom-color: var(--zink); }
.s-aannemer-d .knop-spoed .ic { color: var(--klei); }
.s-aannemer-d .tekstlink { justify-self: start; display: inline-flex; gap: 8px; align-items: center; font-weight: 600; text-decoration: none; border-bottom: 2px solid currentColor; padding-bottom: 2px; }
.s-aannemer-d :focus-visible { outline: 3px solid var(--klei-l); outline-offset: 3px; }

/* ── Kop (N4): logo, spoednummer en een Menu-knop; het menu opent schermvullend ─────────── */
.s-aannemer-d .hd { position: relative; background: var(--lucht); }
.s-aannemer-d .hd-check { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.s-aannemer-d .hd-bar { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 92px; }
.s-aannemer-d .hd-logo { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; color: var(--ink); }
.s-aannemer-d .hd-merk { width: 50px; height: 40px; flex: none; }
.s-aannemer-d .hd-naam { display: flex; flex-direction: column; font: 800 22px/1 var(--kop); font-stretch: 140%; letter-spacing: -.02em; white-space: nowrap; }
.s-aannemer-d .hd-woord { white-space: nowrap; }
.s-aannemer-d .hd-naam i { font-style: normal; color: var(--klei); }
.s-aannemer-d .hd-naam small { font: 500 11.5px/1 var(--tekst); letter-spacing: .14em; text-transform: uppercase; color: var(--grijs); margin-top: 7px; }
.s-aannemer-d .hd-rechts { display: flex; align-items: center; gap: 22px; }
.s-aannemer-d .hd-site { font-size: 14px; font-weight: 600; color: var(--grijs); text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--zink); }
.s-aannemer-d .hd-site:hover, .s-aannemer-d .hd-site[aria-current] { color: var(--ink); text-decoration-color: var(--klei); }
.s-aannemer-d .hd-tel { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font: 700 18px/1.05 var(--kop); font-stretch: 115%; }
.s-aannemer-d .hd-tel .ic { width: 30px; height: 30px; color: var(--klei); }
.s-aannemer-d .hd-tel span { display: flex; flex-direction: column; }
.s-aannemer-d .hd-tel small { font: 500 12px/1.2 var(--tekst); color: var(--grijs); }
.s-aannemer-d .hd-cta { padding: 12px 18px 10px; background: var(--klei); color: #fff; font-weight: 600; font-size: 15px; text-decoration: none; border-bottom: 3px solid var(--klei-d); }
.s-aannemer-d .hd-cta:hover { background: #b45330; }
.s-aannemer-d .hd-knop { display: inline-flex; align-items: center; gap: 12px; height: 50px; padding: 0 18px 0 16px; background: var(--ink); color: #fff;
  font: 700 15px/1 var(--kop); font-stretch: 130%; letter-spacing: .02em; cursor: pointer; user-select: none; }
.s-aannemer-d .hd-streep { position: relative; width: 22px; height: 14px; }
.s-aannemer-d .hd-streep::before, .s-aannemer-d .hd-streep::after { content: ""; position: absolute; left: 0; right: 0; height: 2.5px; background: currentColor; transition: transform .25s, top .25s; }
.s-aannemer-d .hd-streep::before { top: 2px; } .s-aannemer-d .hd-streep::after { top: 10px; }
.s-aannemer-d .hd-check:focus-visible ~ .hd-bar .hd-knop { outline: 3px solid var(--klei-l); outline-offset: 3px; }

.s-aannemer-d .hd-ov { position: fixed; inset: 0; z-index: 70; background: var(--leisteen); color: #e8ecee; overflow-y: auto;
  padding: 120px 0 60px; visibility: hidden; opacity: 0; transition: opacity .25s, visibility .25s;
  background-image: linear-gradient(150deg, transparent 0 62%, rgba(141,155,164,.08) 62% 62.4%, transparent 62.4%),
                    linear-gradient(30deg, transparent 0 70%, rgba(141,155,164,.08) 70% 70.4%, transparent 70.4%); }
.s-aannemer-d .hd-check:checked ~ .hd-ov { visibility: visible; opacity: 1; }
.s-aannemer-d .hd-check:checked ~ .hd-bar { position: fixed; top: 0; left: 0; right: 0; max-width: none; z-index: 80; background: var(--leisteen); padding: 0 max(40px, calc((100vw - 1160px) / 2)); }
.s-aannemer-d .hd-check:checked ~ .hd-bar .hd-logo, .s-aannemer-d .hd-check:checked ~ .hd-bar .hd-tel { color: #fff; }
.s-aannemer-d .hd-check:checked ~ .hd-bar .hd-naam small, .s-aannemer-d .hd-check:checked ~ .hd-bar .hd-tel small { color: var(--zink-l); }
.s-aannemer-d .hd-check:checked ~ .hd-bar .hd-site, .s-aannemer-d .hd-check:checked ~ .hd-bar .hd-cta { display: none; }
.s-aannemer-d .hd-check:checked ~ .hd-bar .hd-knop { background: var(--klei); }
.s-aannemer-d .hd-check:checked ~ .hd-bar .hd-knop-t { font-size: 0; }
.s-aannemer-d .hd-check:checked ~ .hd-bar .hd-knop-t::after { content: "Sluiten"; font-size: 15px; }
.s-aannemer-d .hd-check:checked ~ .hd-bar .hd-streep::before { top: 6px; transform: rotate(45deg); }
.s-aannemer-d .hd-check:checked ~ .hd-bar .hd-streep::after { top: 6px; transform: rotate(-45deg); }
.s-aannemer-d .hd-ov-in { display: grid; grid-template-columns: 1.5fr 1fr; gap: 60px; align-items: start; }
.s-aannemer-d .hd-nav { display: flex; flex-direction: column; border-top: 1px solid rgba(195,205,210,.2); }
.s-aannemer-d .hd-nav a { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; padding: 18px 0 16px; text-decoration: none;
  border-bottom: 1px solid rgba(195,205,210,.2); transition: color .15s, padding .2s; }
.s-aannemer-d .hd-nav a span { font: 780 clamp(34px, 5vw, 66px)/1 var(--kop); font-stretch: 145%; letter-spacing: -.02em; }
.s-aannemer-d .hd-nav a small { font-size: 14px; color: var(--zink-l); text-align: right; }
.s-aannemer-d .hd-nav a:hover { color: var(--klei-l); padding-left: 10px; }
.s-aannemer-d .hd-nav a.nu { color: var(--klei-l); }
.s-aannemer-d .hd-nav a.nu small::before { content: "je bent hier · "; color: var(--klei-l); }
.s-aannemer-d .hd-ov-info { padding: 26px 0 0; }
.s-aannemer-d .hd-ov-kop { font: 700 15px/1 var(--tekst); letter-spacing: .12em; text-transform: uppercase; color: var(--zink-l); margin-bottom: 10px; }
.s-aannemer-d .hd-ov-tel { display: block; font: 800 clamp(34px, 3.6vw, 48px)/1 var(--kop); font-stretch: 130%; color: var(--klei-l); text-decoration: none; margin-bottom: 14px; }
.s-aannemer-d .hd-ov-info p { color: #c6ced2; }
.s-aannemer-d .hd-ov-tijden { list-style: none; padding: 0; margin: 0 0 26px; font-size: 15px; }
.s-aannemer-d .hd-ov-tijden li { display: flex; justify-content: space-between; gap: 16px; padding: 9px 0; border-bottom: 1px dashed rgba(195,205,210,.25); }
.s-aannemer-d .hd-ov-tijden li span:last-child { color: #fff; }
.s-aannemer-d .hd-ov-site { display: inline-flex; align-items: center; gap: 8px; margin-top: 22px; color: #fff; font-weight: 600; font-size: 16px; }

/* ── Opening (H6): grote kop, dan de daklijn ────────────────────────────── */
.s-aannemer-d .hero { background: linear-gradient(180deg, var(--lucht) 0%, #e6ebed 100%); padding-top: 40px; }
.s-aannemer-d .hero-tekst { display: grid; grid-template-columns: 1.55fr 1fr; gap: 50px; align-items: end; padding-bottom: 64px; }
.s-aannemer-d .hero-kop { font-size: clamp(58px, 8.3vw, 136px); font-weight: 820; font-stretch: 150%; line-height: .86; letter-spacing: -.035em; }
.s-aannemer-d .hero-kop span { display: block; white-space: nowrap; }
.s-aannemer-d .hero-kop span + span { color: var(--klei); }
.s-aannemer-d .hero-zij p { font-size: 18.5px; color: #2d353a; max-width: 440px; margin-bottom: 24px; }

.s-aannemer-d .daklijn { --stoep: 70px; display: flex; align-items: flex-end; gap: 16px; padding: 30px 40px 0; overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x proximity; scrollbar-width: thin; scrollbar-color: var(--zink) transparent; max-width: 1400px; margin: 0 auto;
  background: linear-gradient(var(--ink), var(--ink)) left bottom var(--stoep) / 100% 3px no-repeat local; }
.s-aannemer-d .huis { --h: 420px; --gy: .4; position: relative; margin: 0; flex: var(--grow, 1) 1 0; min-width: 0; scroll-snap-align: start; }
.s-aannemer-d .huis-gevel { height: var(--h); overflow: hidden; background: var(--zink-l); }
.s-aannemer-d .huis-foto { width: 100%; height: 100%; min-height: 0; }
.s-aannemer-d .huis-zadel  { --h: 470px; --gy: .40; --grow: 1.2; }
.s-aannemer-d .huis-plat   { --h: 300px; --gy: 0;   --grow: 1.05; }
.s-aannemer-d .huis-kapel  { --h: 410px; --gy: .40; --grow: 1.2; }
.s-aannemer-d .huis-mansard { --h: 380px; --gy: .34; --grow: 1; }
.s-aannemer-d .huis-lijst  { --h: 340px; --gy: 0;   --grow: .95; }
.s-aannemer-d .huis-zadel .huis-gevel { clip-path: polygon(0 40%, 50% 0, 70% 16%, 70% 3%, 79% 3%, 79% 23.2%, 100% 40%, 100% 100%, 0 100%); }
.s-aannemer-d .huis-kapel .huis-gevel { clip-path: polygon(0 40%, 50% 0, 62% 9.6%, 88% 9.6%, 88% 30.4%, 100% 40%, 100% 100%, 0 100%); }
.s-aannemer-d .huis-mansard .huis-gevel { clip-path: polygon(0 34%, 13% 5%, 87% 5%, 100% 34%, 100% 100%, 0 100%); }
.s-aannemer-d .huis-lijst .huis-gevel { clip-path: polygon(0 4%, 100% 4%, 100% 100%, 0 100%); }
/* zinken goot op de dakvoet, en een regenpijp bij de zadeldaken */
.s-aannemer-d .huis::before { content: ""; position: absolute; z-index: 2; left: -7px; right: -7px; top: calc(var(--h) * var(--gy) - 2px); height: 10px;
  background: linear-gradient(180deg, #e9eff2 0 2px, #b9c5cb 3px, #8d9ba4 70%, #6d7b84); border-radius: 0 0 6px 6px; box-shadow: 0 2px 0 rgba(0,0,0,.08); }
.s-aannemer-d .huis-zadel::after, .s-aannemer-d .huis-kapel::after { content: ""; position: absolute; z-index: 2; right: 14px; width: 7px;
  top: calc(var(--h) * var(--gy) + 6px); height: calc(var(--h) * (1 - var(--gy)) - 6px);
  background: linear-gradient(90deg, #6d7b84, #c9d3d8 45%, #8d9ba4); border-radius: 2px; }
.s-aannemer-d .huis-lijst::before { top: calc(var(--h) * .04 - 4px); height: 12px; border-radius: 1px; }
.s-aannemer-d .huis-plat::before { height: 9px; border-radius: 1px; }
.s-aannemer-d .huis figcaption { height: var(--stoep, 70px); display: flex; flex-direction: column; justify-content: center; gap: 3px; padding-top: 4px; }
.s-aannemer-d .huis figcaption b { font: 720 15px/1.1 var(--kop); font-stretch: 125%; }
.s-aannemer-d .huis figcaption span { font-size: 13.5px; color: var(--grijs); }
.s-aannemer-d .stoep { background: var(--lucht2); border-top: 1px solid #d3dadd; }
.s-aannemer-d .stoep-in { display: flex; justify-content: space-between; align-items: center; gap: 20px; min-height: 64px; }
.s-aannemer-d .stoep ul { list-style: none; display: flex; flex-wrap: wrap; gap: 6px 34px; padding: 12px 0; margin: 0; font-weight: 600; font-size: 15px; }
.s-aannemer-d .stoep li { display: flex; align-items: center; gap: 10px; }
.s-aannemer-d .stoep li::before { content: ""; width: 12px; height: 7px; border: 2.5px solid var(--klei); border-bottom: 0; border-right: 0; transform: rotate(45deg) translate(2px, 2px); }
.s-aannemer-d .stoep-swipe { display: none; align-items: center; gap: 6px; font-size: 13px; color: var(--grijs); white-space: nowrap; }

/* ── Banden (R1) ────────────────────────────────────────────────────────── */
.s-aannemer-d .band { position: relative; padding: 120px 0; }
.s-aannemer-d .kk { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: end; margin-bottom: 56px; }
.s-aannemer-d .kk h2 { font-size: clamp(36px, 4.6vw, 64px); }
.s-aannemer-d .kk p { margin: 0; max-width: 460px; font-size: 18px; }
.s-aannemer-d .kk-midden { grid-template-columns: 1fr; text-align: center; justify-items: center; gap: 18px; }
.s-aannemer-d .kk-rij { grid-template-columns: auto auto; justify-content: space-between; }
.s-aannemer-d .band-verder { margin: 40px 0 0; }
.s-aannemer-d .band-verder a { display: inline-flex; gap: 10px; align-items: center; font-weight: 600; text-decoration: none; border-bottom: 2px solid currentColor; padding-bottom: 3px; }

/* klei: pannen in gebakken klei, met de ronde neuzen van de onderste rij over de volgende band */
.s-aannemer-d .band-klei { z-index: 3; background-color: var(--klei-band); color: var(--room);
  background-image: repeating-linear-gradient(180deg, transparent 0 70px, rgba(60,20,8,.10) 70px 74px, rgba(255,220,190,.05) 74px 76px),
                    radial-gradient(130% 80% at 20% 0%, rgba(255,190,150,.12), transparent 60%); }
.s-aannemer-d .band-klei::after { content: ""; position: absolute; left: 0; right: 0; bottom: -20px; height: 20px; pointer-events: none;
  background: radial-gradient(circle at 50% 0, var(--klei-band) 0 19px, transparent 20px) 0 0 / 46px 20px repeat-x; filter: drop-shadow(0 3px 2px rgba(0,0,0,.18)); }
.s-aannemer-d .band-klei .kk p { color: #f6dfcd; }
.s-aannemer-d .band-klei a:focus-visible { outline-color: var(--room); }

/* bitumen: bijna zwart met fijne leislag-korrel en de overlap van de banen */
.s-aannemer-d .band-bitumen { background-color: var(--bitumen); color: #e6eaec;
  background-image: radial-gradient(rgba(255,255,255,.07) .8px, transparent 1.3px), radial-gradient(rgba(200,210,215,.05) 1px, transparent 1.6px),
                    repeating-linear-gradient(180deg, transparent 0 236px, rgba(0,0,0,.45) 236px 238px, rgba(255,255,255,.05) 238px 240px);
  background-size: 6px 6px, 11px 11px, auto; background-position: 0 0, 3px 5px, 0 0; }
.s-aannemer-d .band-bitumen p { color: #c7cfd3; }

/* zink: blauwgrijs met staande felsnaden */
.s-aannemer-d .band-zink { background-color: var(--zinkband); color: var(--ink);
  background-image: linear-gradient(100deg, rgba(255,255,255,.16), transparent 35%, rgba(255,255,255,.1) 65%, transparent),
                    repeating-linear-gradient(90deg, transparent 0 137px, rgba(60,72,80,.22) 137px 139px, rgba(255,255,255,.55) 139px 141px, rgba(60,72,80,.1) 141px 143px); }
.s-aannemer-d .band-zink .kk p { color: #26303a; }
.s-aannemer-d .band-lucht { background: var(--lucht); }
.s-aannemer-d .band-slot { background: var(--kalk); }

/* fotoband: volle breedte */
.s-aannemer-d .fotoband { position: relative; height: clamp(380px, 74vh, 780px); overflow: hidden; background: var(--zink-l); }
.s-aannemer-d .fotoband-img { position: absolute; inset: 0; width: 100%; height: 100%; min-height: 0; }
.s-aannemer-d .fotoband-hoog { height: clamp(360px, 80vh, 820px); }
.s-aannemer-d .fotoband-label { position: absolute; left: max(40px, calc((100vw - 1160px) / 2)); bottom: 48px; z-index: 2; display: flex; flex-direction: column; gap: 6px;
  width: 340px; padding: 54px 28px 24px; background: var(--lucht); color: var(--ink); text-decoration: none;
  clip-path: polygon(0 32px, 50% 0, 100% 32px, 100% 100%, 0 100%); }
.s-aannemer-d .fotoband-label small { font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--grijs); }
.s-aannemer-d .fotoband-label strong { font: 740 22px/1.15 var(--kop); font-stretch: 125%; }
.s-aannemer-d .fotoband-label span { display: inline-flex; gap: 8px; align-items: center; font-weight: 600; color: var(--klei); margin-top: 6px; }
.s-aannemer-d .fotoband-over::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(14,17,19,.82) 0%, rgba(14,17,19,.45) 45%, transparent 75%); }
.s-aannemer-d .over-citaat { position: relative; z-index: 2; height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; color: #fff; }
.s-aannemer-d .over-citaat blockquote { margin: 0 0 18px; max-width: 620px; font: 650 clamp(26px, 3vw, 40px)/1.15 var(--kop); font-stretch: 112%; letter-spacing: -.01em; }
.s-aannemer-d .over-citaat p { color: #d6dde0; margin-bottom: 26px; }

/* vakken op de homepage: indexrijen op klei */
.s-aannemer-d .vakken { list-style: none; margin: 0; padding: 0; border-top: 1px solid rgba(251,242,232,.35); }
.s-aannemer-d .vakken a { display: grid; grid-template-columns: 170px 1fr 230px 30px; gap: 30px; align-items: center; padding: 30px 12px; text-decoration: none;
  border-bottom: 1px solid rgba(251,242,232,.35); transition: background .2s; }
.s-aannemer-d .vakken a:hover { background: rgba(60,20,8,.18); }
.s-aannemer-d .vak-maat { display: grid; grid-template-columns: 54px 1fr; column-gap: 12px; align-items: center; }
.s-aannemer-d .vak-maat .helling { grid-row: span 2; width: 54px; height: 34px; color: var(--room); }
.s-aannemer-d .vak-maat b { font: 760 20px/1 var(--kop); font-stretch: 120%; }
.s-aannemer-d .vak-maat small { font-size: 12px; line-height: 1.25; color: #f2d4c0; }
.s-aannemer-d .vak-t { display: flex; flex-direction: column; gap: 6px; }
.s-aannemer-d .vak-t strong { font: 780 clamp(26px, 2.8vw, 38px)/1 var(--kop); font-stretch: 140%; letter-spacing: -.02em; }
.s-aannemer-d .vak-t span { color: #f6dfcd; }
.s-aannemer-d .vak-p { display: flex; flex-direction: column; font: 700 18px/1.2 var(--kop); font-stretch: 110%; font-variant-numeric: tabular-nums; }
.s-aannemer-d .vak-p small { font: 400 13px/1.3 var(--tekst); color: #f2d4c0; margin-top: 4px; }
.s-aannemer-d .vakken .pijl { width: 26px; height: 26px; }

/* spoed */
.s-aannemer-d .sp { display: grid; grid-template-columns: 1fr 1.3fr; gap: 70px; align-items: start; }
.s-aannemer-d .sp-kop h2 { font-size: clamp(44px, 6vw, 86px); font-stretch: 145%; margin-bottom: 18px; }
.s-aannemer-d .sp-tel { display: inline-block; font: 820 clamp(36px, 4.6vw, 64px)/1 var(--kop); font-stretch: 140%; color: var(--klei-l); text-decoration: none; margin-bottom: 22px;
  border-bottom: 4px solid rgba(224,138,98,.35); padding-bottom: 6px; }
.s-aannemer-d .sp-kop p { max-width: 420px; }
.s-aannemer-d .sp-stappen { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0; border-top: 1px solid rgba(255,255,255,.14); border-left: 1px solid rgba(255,255,255,.14); }
.s-aannemer-d .sp-stappen li { padding: 30px 28px 26px; border-right: 1px solid rgba(255,255,255,.14); border-bottom: 1px solid rgba(255,255,255,.14); }
.s-aannemer-d .sp-ic { width: 38px; height: 38px; color: var(--klei-l); margin-bottom: 18px; }
.s-aannemer-d .sp-stappen b { display: block; font: 720 19px/1.2 var(--kop); font-stretch: 120%; margin-bottom: 8px; color: #fff; }
.s-aannemer-d .sp-stappen p { margin: 0; font-size: 15.5px; }

/* werkwijze als dakgoot met goothaken */
.s-aannemer-d .goot { position: relative; padding-top: 12px; }
.s-aannemer-d .goot-buis { position: relative; height: 34px; margin: 0 -10px; border-radius: 0 0 20px 20px;
  background: linear-gradient(180deg, #f1f5f7 0 4px, #c9d3d8 5px, #8d9ba4 45%, #5f6d75 100%); box-shadow: 0 8px 14px rgba(30,40,46,.18); }
.s-aannemer-d .goot-buis::before { content: ""; position: absolute; left: -6px; right: -6px; top: -5px; height: 10px; border-radius: 6px; background: linear-gradient(180deg, #f6f9fa, #aab6bd); }
.s-aannemer-d .goot-buis::after { content: ""; position: absolute; right: 26px; top: 30px; width: 22px; height: 90px; border-radius: 0 0 4px 4px;
  background: linear-gradient(90deg, #5f6d75, #d5dde1 45%, #8d9ba4); }
.s-aannemer-d .goot ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 30px; position: relative; }
.s-aannemer-d .goot li { position: relative; padding-top: 52px; }
.s-aannemer-d .goot .haak { position: absolute; z-index: 2; top: -54px; left: 8px; width: 9px; height: 58px; background: linear-gradient(90deg, #0d1012, #3a4247 50%, #15191c); border-radius: 2px 2px 7px 7px; }
.s-aannemer-d .goot .haak::before { content: ""; position: absolute; left: -7px; top: 0; width: 23px; height: 7px; border-radius: 2px; background: var(--leisteen); }
.s-aannemer-d .goot b { display: block; font: 740 20px/1.15 var(--kop); font-stretch: 125%; margin-bottom: 10px; }
.s-aannemer-d .goot p { margin: 0; font-size: 15.5px; color: #1f272c; }

/* projecten op de homepage */
.s-aannemer-d .pr-rijen { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--ink); }
.s-aannemer-d .pr-rijen a { display: grid; grid-template-columns: 210px 1fr 200px; gap: 40px; align-items: end; padding: 34px 0; text-decoration: none; border-bottom: 1px solid #c8d0d4; }
.s-aannemer-d .pr-foto { display: block; height: 170px; clip-path: polygon(0 26%, 50% 0, 100% 26%, 100% 100%, 0 100%); background: var(--zink-l); transition: transform .3s; }
.s-aannemer-d .pr-rijen a:hover .pr-foto { transform: translateY(-4px); }
.s-aannemer-d .pr-img { width: 100%; height: 100%; min-height: 0; }
.s-aannemer-d .pr-t { display: flex; flex-direction: column; gap: 8px; }
.s-aannemer-d .pr-t small { font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--klei); font-weight: 600; }
.s-aannemer-d .pr-t strong { font: 760 clamp(24px, 2.4vw, 32px)/1.05 var(--kop); font-stretch: 135%; letter-spacing: -.015em; }
.s-aannemer-d .pr-t span { color: var(--grijs); max-width: 520px; }
.s-aannemer-d .pr-feit { display: flex; flex-direction: column; gap: 6px; text-align: right; font-variant-numeric: tabular-nums; }
.s-aannemer-d .pr-feit b { font: 650 16px/1.2 var(--kop); font-stretch: 110%; }
.s-aannemer-d .pr-feit b:last-child { color: var(--klei); }

/* slotband */
.s-aannemer-d .slot-in { display: grid; grid-template-columns: 1.3fr 1fr; gap: 24px 70px; align-items: end; }
.s-aannemer-d .slot-in h2 { grid-row: span 2; font-size: clamp(36px, 4.4vw, 64px); font-stretch: 140%; line-height: .98; }
.s-aannemer-d .slot-in > p { margin: 0; font-size: 18px; color: #3b4449; }
.s-aannemer-d .slot-usp { grid-column: 1 / -1; list-style: none; padding: 30px 0 0; margin: 20px 0 0; display: flex; flex-wrap: wrap; gap: 8px 40px;
  border-top: 1px solid #d9d1c5; font-weight: 600; color: #3b4449; }
.s-aannemer-d .slot-usp li::before { content: "—"; color: var(--klei); margin-right: 10px; }

/* ── Paginakop met een straat aan daken ────────────────────────────────── */
.s-aannemer-d .pk { background: linear-gradient(180deg, var(--lucht), #e6ebed); padding-top: 54px; }
.s-aannemer-d .pk-in { padding-bottom: 56px; }
.s-aannemer-d .pk-crumb { font-size: 14px; color: var(--grijs); margin-bottom: 26px; }
.s-aannemer-d .pk-crumb a { color: var(--ink); font-weight: 600; }
.s-aannemer-d .pk-crumb span { color: var(--zink); margin: 0 6px; }
.s-aannemer-d .pk h1 { font-size: clamp(46px, 6.6vw, 96px); font-stretch: 150%; font-weight: 820; line-height: .9; letter-spacing: -.035em; margin-bottom: 30px; }
.s-aannemer-d .pk-lead { font-size: 19px; max-width: 640px; color: #2d353a; margin: 0; }
.s-aannemer-d .straat { display: flex; align-items: flex-end; gap: 8px; height: 130px; padding: 0 40px; max-width: 1400px; margin: 0 auto; }
.s-aannemer-d .sh { flex: 1 1 0; height: calc(var(--s) * 110px); background: #c9d2d6; }
.s-aannemer-d .sh.licht { background: var(--klei); }
.s-aannemer-d .sh-zadel { clip-path: polygon(0 45%, 50% 0, 100% 45%, 100% 100%, 0 100%); }
.s-aannemer-d .sh-kapel { clip-path: polygon(0 45%, 50% 0, 62% 10.8%, 86% 10.8%, 86% 32.4%, 100% 45%, 100% 100%, 0 100%); }
.s-aannemer-d .sh-mansard { clip-path: polygon(0 36%, 14% 6%, 86% 6%, 100% 36%, 100% 100%, 0 100%); }
.s-aannemer-d .sh-plat { clip-path: polygon(0 8%, 100% 8%, 100% 100%, 0 100%); }
.s-aannemer-d .sprong { list-style: none; margin: 34px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.s-aannemer-d .sprong::before { content: "Op deze pagina"; width: 100%; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--grijs); }
.s-aannemer-d .sprong a { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border: 1.5px dashed var(--zink-d); text-decoration: none; font-weight: 600; font-size: 15px; }
.s-aannemer-d .sprong a:hover { border-style: solid; border-color: var(--klei); color: var(--klei); }
.s-aannemer-d .sprong .pijl { width: 16px; height: 16px; }

/* ── Diensten ──────────────────────────────────────────────────────────── */
.s-aannemer-d .dn { padding: 0 0 120px; scroll-margin-top: 20px; }
.s-aannemer-d .dn-foto { height: clamp(280px, 44vw, 580px); overflow: hidden; background: var(--zink-l); }
.s-aannemer-d .dn-img { width: 100%; height: 100%; min-height: 0; }
.s-aannemer-d .dn-in { display: grid; grid-template-columns: 1.15fr .85fr; gap: 80px; padding-top: 80px; }
.s-aannemer-d .dn-maat { display: flex; align-items: center; gap: 12px; margin-bottom: 22px; }
.s-aannemer-d .dn-maat .helling { width: 58px; height: 36px; }
.s-aannemer-d .dn-maat b { font: 760 22px/1 var(--kop); font-stretch: 120%; }
.s-aannemer-d .dn-maat span { font-size: 14px; }
.s-aannemer-d .dn h2 { font-size: clamp(40px, 5vw, 72px); font-stretch: 145%; margin-bottom: 18px; }
.s-aannemer-d .dn-kort { font: 600 20px/1.4 var(--tekst); }
.s-aannemer-d .dn-punten { list-style: none; margin: 26px 0 0; padding: 0; }
.s-aannemer-d .dn-punten li { padding: 12px 0 12px 32px; border-top: 1px solid color-mix(in srgb, currentColor 22%, transparent); position: relative; }
.s-aannemer-d .dn-punten li::before { content: ""; position: absolute; left: 2px; top: 21px; width: 12px; height: 7px; border: 2.5px solid currentColor; border-bottom: 0; border-right: 0; transform: rotate(45deg); }
.s-aannemer-d .dn-prijs table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.s-aannemer-d .dn-prijs caption { text-align: left; font: 760 26px/1 var(--kop); font-stretch: 130%; padding-bottom: 18px; }
.s-aannemer-d .dn-prijs th, .s-aannemer-d .dn-prijs td { padding: 14px 0; border-top: 1px solid color-mix(in srgb, currentColor 25%, transparent); vertical-align: top; }
.s-aannemer-d .dn-prijs tr:last-child th, .s-aannemer-d .dn-prijs tr:last-child td { border-bottom: 1px solid color-mix(in srgb, currentColor 25%, transparent); }
.s-aannemer-d .dn-prijs th { text-align: left; font-weight: 400; padding-right: 16px; }
.s-aannemer-d .dn-prijs td { text-align: right; font-weight: 700; white-space: nowrap; }
.s-aannemer-d .dn-tip { margin: 26px 0 12px; padding: 20px 22px; background: color-mix(in srgb, currentColor 8%, transparent); }
.s-aannemer-d .dn-btw { font-size: 14px; }
.s-aannemer-d .dn-spoed { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 28px; font-size: 15px; color: var(--grijs); }
.s-aannemer-d .dn-spoed .knop { background: var(--klei); color: #fff; border-bottom-color: var(--klei-d); }
.s-aannemer-d .dn-spoed .knop .ic { color: #fff; }
.s-aannemer-d .band-klei.dn { padding-bottom: 130px; }
.s-aannemer-d .band-klei .dn-tip { background: rgba(60,20,8,.2); }
.s-aannemer-d .band-bitumen .dn-tip { background: rgba(255,255,255,.06); }
.s-aannemer-d .band-bitumen .dn-maat, .s-aannemer-d .band-bitumen .dn-kort { color: #fff; }

/* ── Projecten ─────────────────────────────────────────────────────────── */
.s-aannemer-d .pj { scroll-margin-top: 20px; }
.s-aannemer-d .pj-foto { position: relative; height: clamp(340px, 66vh, 720px); overflow: hidden; background: var(--zink-l); }
.s-aannemer-d .pj-img { position: absolute; inset: 0; width: 100%; height: 100%; min-height: 0; }
.s-aannemer-d .pj-nr { position: absolute; z-index: 2; top: 0; left: max(40px, calc((100vw - 1160px) / 2)); padding: 34px 18px 14px; background: var(--ink); color: #fff;
  font: 700 15px/1 var(--kop); font-stretch: 125%; clip-path: polygon(0 0, 100% 0, 100% 100%, 50% calc(100% - 0px), 0 100%); }
.s-aannemer-d .pj-band { padding: 90px 0 110px; }
.s-aannemer-d .pj-in { display: grid; grid-template-columns: 1.2fr .8fr; gap: 80px; align-items: start; }
.s-aannemer-d .pj h2 { font-size: clamp(34px, 4.2vw, 58px); font-stretch: 140%; margin-bottom: 18px; }
.s-aannemer-d .pj-kort { font: 600 20px/1.4 var(--tekst); }
.s-aannemer-d .pj-feiten { margin: 0; display: grid; grid-template-columns: 1fr 1fr; border-top: 2px solid currentColor; }
.s-aannemer-d .pj-feiten div { padding: 16px 12px 16px 0; border-bottom: 1px solid color-mix(in srgb, currentColor 25%, transparent); }
.s-aannemer-d .pj-feiten dt { font-size: 12.5px; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 4px; }
.s-aannemer-d .pj-feiten dd { margin: 0; font: 680 17px/1.3 var(--kop); font-stretch: 112%; }
.s-aannemer-d .band-bitumen .pj-feiten dd, .s-aannemer-d .band-bitumen h2 { color: #fff; }
.s-aannemer-d .werkboek { list-style: none; margin: 0; padding: 0; border-top: 1px solid rgba(251,242,232,.4); }
.s-aannemer-d .werkboek li { display: grid; grid-template-columns: 220px 1fr 110px; gap: 24px; padding: 18px 0; border-bottom: 1px solid rgba(251,242,232,.4); align-items: baseline; }
.s-aannemer-d .wb-straat { font: 720 18px/1.2 var(--kop); font-stretch: 125%; }
.s-aannemer-d .wb-wat { color: #f6dfcd; }
.s-aannemer-d .wb-duur { text-align: right; font-weight: 700; }

/* ── Over ons ──────────────────────────────────────────────────────────── */
.s-aannemer-d .ov-verhaal { display: grid; grid-template-columns: .8fr 1.2fr; gap: 80px; }
.s-aannemer-d .ov-verhaal h2 { font-size: clamp(36px, 4.6vw, 64px); font-stretch: 145%; }
.s-aannemer-d .ov-lead { font-size: 22px; line-height: 1.5; color: var(--ink); }
.s-aannemer-d .ov-kolom p:not(.ov-lead) { color: #333c41; }
.s-aannemer-d .team { list-style: none; margin: 0; padding: 0; border-top: 1px solid rgba(251,242,232,.4); }
.s-aannemer-d .team li { display: grid; grid-template-columns: 1.1fr 1fr 1.2fr; gap: 24px; padding: 22px 0; border-bottom: 1px solid rgba(251,242,232,.4); align-items: baseline; }
.s-aannemer-d .team b { font: 760 clamp(22px, 2.2vw, 30px)/1.05 var(--kop); font-stretch: 135%; letter-spacing: -.01em; }
.s-aannemer-d .team span { font-weight: 600; }
.s-aannemer-d .team small { font-size: 15px; color: #f6dfcd; }
.s-aannemer-d .ov-veilig { display: grid; grid-template-columns: 1.1fr .9fr; gap: 80px; align-items: center; }
.s-aannemer-d .ov-veilig h2 { font-size: clamp(36px, 4.6vw, 62px); font-stretch: 145%; margin-bottom: 24px; color: #fff; }
.s-aannemer-d .cijfers { display: grid; gap: 0; border-top: 1px solid rgba(255,255,255,.18); }
.s-aannemer-d .cijfers div { display: grid; grid-template-columns: 170px 1fr; gap: 20px; align-items: baseline; padding: 20px 0; border-bottom: 1px solid rgba(255,255,255,.18); }
.s-aannemer-d .cijfers b { font: 820 44px/1 var(--kop); font-stretch: 140%; color: var(--klei-l); }
.s-aannemer-d .cijfers span { color: #c7cfd3; }
.s-aannemer-d .mat { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--ink); }
.s-aannemer-d .mat li { --j: 50; display: grid; grid-template-columns: 220px 1fr 1.1fr; gap: 24px; align-items: center; padding: 20px 0; border-bottom: 1px solid #c8d0d4; }
.s-aannemer-d .mat li:nth-child(1) { --j: 64; } .s-aannemer-d .mat li:nth-child(2) { --j: 50; } .s-aannemer-d .mat li:nth-child(3) { --j: 30; }
.s-aannemer-d .mat li:nth-child(4) { --j: 40; } .s-aannemer-d .mat li:nth-child(5) { --j: 45; } .s-aannemer-d .mat li:nth-child(6) { --j: 80; }
.s-aannemer-d .mat b { font: 740 20px/1.15 var(--kop); font-stretch: 125%; }
.s-aannemer-d .mat span { color: var(--grijs); }
.s-aannemer-d .mat em { position: relative; font-style: normal; font-weight: 700; font-size: 14px; padding-left: calc(var(--j) / 80 * (100% - 90px) + 12px); }
.s-aannemer-d .mat em::before { content: ""; position: absolute; left: 0; top: 50%; height: 8px; margin-top: -4px; width: calc(var(--j) / 80 * (100% - 90px));
  background: linear-gradient(90deg, var(--zink), var(--klei)); }

/* ── Contact ───────────────────────────────────────────────────────────── */
.s-aannemer-d .ct-spoed { padding: 70px 0; }
.s-aannemer-d .ct-spoed-in { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 24px 60px; }
.s-aannemer-d .ct-spoed h2 { font-size: clamp(34px, 4vw, 56px); font-stretch: 145%; color: #fff; margin-bottom: 10px; }
.s-aannemer-d .ct-spoed p { margin: 0; }
.s-aannemer-d .ct-spoed .sp-tel { margin: 0; }
.s-aannemer-d .ct { display: grid; grid-template-columns: 1.35fr .8fr; gap: 90px; align-items: start; }
.s-aannemer-d .form h2 { font-size: clamp(32px, 3.6vw, 48px); font-stretch: 140%; margin-bottom: 14px; }
.s-aannemer-d .form > p { color: #333c41; max-width: 560px; }
.s-aannemer-d .form fieldset { border: 0; padding: 0; margin: 30px 0 22px; }
.s-aannemer-d .form legend { font-weight: 700; margin-bottom: 12px; padding: 0; }
.s-aannemer-d .kiezen { display: flex; flex-wrap: wrap; gap: 8px; }
.s-aannemer-d .kies input { position: absolute; opacity: 0; }
.s-aannemer-d .kies span { display: inline-block; padding: 10px 16px; border: 1.5px solid #9eaab1; background: #fff; cursor: pointer; font-size: 15px; font-weight: 600; }
.s-aannemer-d .kies input:checked + span { background: var(--ink); color: #fff; border-color: var(--ink); }
.s-aannemer-d .kies input:focus-visible + span { outline: 3px solid var(--klei-l); outline-offset: 2px; }
.s-aannemer-d .velden { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-bottom: 26px; }
.s-aannemer-d .velden label { display: flex; flex-direction: column; gap: 7px; font-weight: 600; font-size: 15px; }
.s-aannemer-d .velden .breed { grid-column: 1 / -1; }
.s-aannemer-d .velden input, .s-aannemer-d .velden textarea { font: 400 16px/1.4 var(--tekst); padding: 13px 14px; border: 1.5px solid #9eaab1; background: #fff; color: var(--ink); border-radius: 0; width: 100%; }
.s-aannemer-d .velden input[type=file] { padding: 10px; background: var(--lucht2); }
.s-aannemer-d .velden input:focus, .s-aannemer-d .velden textarea:focus { outline: none; border-color: var(--klei); box-shadow: 0 0 0 3px rgba(166,74,41,.2); }
.s-aannemer-d .form-noot { margin-top: 14px; font-size: 14px; color: var(--grijs); }
.s-aannemer-d .ct-info { padding: 36px 34px; background: #fff; border-top: 6px solid var(--klei); }
.s-aannemer-d .ct-info h3 { font: 740 18px/1.2 var(--kop); font-stretch: 125%; margin: 26px 0 10px; }
.s-aannemer-d .ct-info h3:first-child { margin-top: 0; }
.s-aannemer-d .ct-info address { font-style: normal; }
.s-aannemer-d .ct-lijn { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
.s-aannemer-d .ct-lijn a { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; text-decoration: none; }
.s-aannemer-d .ct-lijn .ic { color: var(--klei); }
.s-aannemer-d .ct-tijden { list-style: none; padding: 0; margin: 0; font-size: 15px; }
.s-aannemer-d .ct-tijden li { display: flex; justify-content: space-between; gap: 16px; padding: 8px 0; border-bottom: 1px dashed #c8d0d4; }
.s-aannemer-d .ct-tijden li span:last-child { font-weight: 600; text-align: right; }
.s-aannemer-d .vr { display: grid; grid-template-columns: .8fr 1.2fr; gap: 70px; align-items: start; scroll-margin-top: 20px; }
.s-aannemer-d .vr .kk { grid-template-columns: 1fr; gap: 18px; margin: 0; }
.s-aannemer-d .vr-lijst { border-top: 2px solid var(--ink); }
.s-aannemer-d .vr-lijst details { border-bottom: 1px solid rgba(26,31,35,.3); }
.s-aannemer-d .vr-lijst summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 20px; padding: 22px 0; font: 700 19px/1.25 var(--kop); font-stretch: 115%; }
.s-aannemer-d .vr-lijst summary::-webkit-details-marker { display: none; }
.s-aannemer-d .vr-lijst summary::after { content: "+"; font: 400 28px/0.8 var(--tekst); color: var(--klei-d); }
.s-aannemer-d .vr-lijst details[open] summary::after { content: "–"; }
.s-aannemer-d .vr-lijst details p { margin: 0 0 22px; max-width: 640px; color: #1f272c; }

/* ── Voet: onder de goot ───────────────────────────────────────────────── */
.s-aannemer-d .vt { position: relative; background: var(--leisteen); color: #c9d1d5; padding: 0 0 30px; font-size: 15.5px; }
.s-aannemer-d .vt-goot { position: relative; height: 30px; background: linear-gradient(180deg, #f1f5f7 0 4px, #c9d3d8 5px, #8d9ba4 45%, #5f6d75 100%); border-radius: 0 0 18px 18px; }
.s-aannemer-d .vt-goot span { position: absolute; right: 3%; top: 26px; width: 20px; height: 64px; background: linear-gradient(90deg, #4f5c63, #b8c4ca 45%, #6f7d86); border-radius: 0 0 3px 3px; }
.s-aannemer-d .vt-goot span::after { content: ""; position: absolute; left: -6px; right: -6px; top: 30px; height: 8px; background: #2a3135; }
.s-aannemer-d .vt-in { display: grid; grid-template-columns: 1.4fr .8fr 1fr 1.2fr; gap: 48px; padding-top: 90px; padding-bottom: 60px; }
.s-aannemer-d .vt-logo { color: #fff; margin-bottom: 20px; }
.s-aannemer-d .vt-logo .hd-naam small { color: var(--zink-l); }
.s-aannemer-d .vt-merk p { max-width: 340px; }
.s-aannemer-d .vt-spoed { display: inline-flex; align-items: center; gap: 12px; margin-top: 8px; text-decoration: none; color: #fff; }
.s-aannemer-d .vt-spoed .ic { width: 28px; height: 28px; color: var(--klei-l); }
.s-aannemer-d .vt-spoed b { display: block; font: 800 24px/1.1 var(--kop); font-stretch: 130%; color: var(--klei-l); }
.s-aannemer-d .vt-kop { font: 700 13px/1 var(--tekst); letter-spacing: .14em; text-transform: uppercase; color: #fff; margin-bottom: 18px; }
.s-aannemer-d .vt-lijst { list-style: none; padding: 0; margin: 0; }
.s-aannemer-d .vt-lijst li { padding: 5px 0; }
.s-aannemer-d .vt-lijst a { text-decoration: none; }
.s-aannemer-d .vt-lijst a:hover, .s-aannemer-d .vt address a:hover { color: var(--klei-l); }
.s-aannemer-d .vt address { font-style: normal; margin-bottom: 18px; line-height: 1.7; }
.s-aannemer-d .vt address a { text-decoration: none; color: #fff; }
.s-aannemer-d .vt-tijden { list-style: none; padding: 0; margin: 0; font-size: 14.5px; }
.s-aannemer-d .vt-tijden li { display: flex; justify-content: space-between; gap: 14px; padding: 7px 0; border-top: 1px solid rgba(255,255,255,.1); }
.s-aannemer-d .vt-tijden li span:last-child { color: #fff; text-align: right; }
.s-aannemer-d .vt-onder { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 30px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,.12); font-size: 14px; color: #9fabb2; }
.s-aannemer-d .vt-onder p { margin: 0; }
.s-aannemer-d .vt-onder a { color: #fff; }

/* ── Kleiner scherm ────────────────────────────────────────────────────── */
@media (max-width: 1100px) {
  .s-aannemer-d .hd-site { display: none; }
  .s-aannemer-d .vakken a { grid-template-columns: 150px 1fr 190px 26px; gap: 22px; }
}
@media (max-width: 980px) {
  .s-aannemer-d .w { padding: 0 28px; }
  .s-aannemer-d .band { padding: 90px 0; }
  .s-aannemer-d .hero-tekst, .s-aannemer-d .sp, .s-aannemer-d .dn-in, .s-aannemer-d .pj-in, .s-aannemer-d .ov-verhaal, .s-aannemer-d .ov-veilig,
  .s-aannemer-d .ct, .s-aannemer-d .vr, .s-aannemer-d .slot-in, .s-aannemer-d .hd-ov-in { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .s-aannemer-d .slot-in h2 { grid-row: auto; }
  .s-aannemer-d .kk { grid-template-columns: 1fr; gap: 16px; }
  .s-aannemer-d .kk-rij { grid-template-columns: 1fr; }
  .s-aannemer-d .hd-cta { display: none; }
  .s-aannemer-d .daklijn { padding: 24px 28px 0; scroll-padding-left: 28px; }
  .s-aannemer-d .huis { flex: 0 0 auto; width: calc(var(--grow) * 230px); }
  .s-aannemer-d .huis-zadel { --h: 380px; } .s-aannemer-d .huis-plat { --h: 250px; } .s-aannemer-d .huis-kapel { --h: 340px; }
  .s-aannemer-d .huis-mansard { --h: 310px; } .s-aannemer-d .huis-lijst { --h: 280px; }
  .s-aannemer-d .stoep-swipe { display: inline-flex; }
  .s-aannemer-d .goot ol { grid-template-columns: 1fr 1fr; row-gap: 50px; }
  .s-aannemer-d .vt-in { grid-template-columns: 1fr 1fr; }
  .s-aannemer-d .pr-rijen a { grid-template-columns: 170px 1fr; }
  .s-aannemer-d .pr-feit { grid-column: 2; flex-direction: row; flex-wrap: wrap; gap: 6px 18px; text-align: left; }
  .s-aannemer-d .dn-in { padding-top: 60px; }
}
@media (max-width: 720px) {
  body.s-aannemer-d { font-size: 16.5px; }
  .s-aannemer-d .w { padding: 0 20px; }
  .s-aannemer-d .band { padding: 72px 0; }
  .s-aannemer-d .hd-bar { min-height: 74px; gap: 10px; }
  .s-aannemer-d .hd-check:checked ~ .hd-bar { padding: 0 20px; }
  .s-aannemer-d .hd-merk { width: 40px; height: 32px; }
  .s-aannemer-d .hd-logo { gap: 9px; }
  .s-aannemer-d .hd-naam { font-size: 15.5px; font-stretch: 115%; }
  .s-aannemer-d .hd-naam small { font-size: 9.5px; letter-spacing: .05em; margin-top: 5px; }
  .s-aannemer-d .hd-rechts { gap: 8px; }
  .s-aannemer-d .hd-tel span { display: none; }
  .s-aannemer-d .hd-tel { width: 46px; height: 46px; justify-content: center; border: 2px solid var(--ink); }
  .s-aannemer-d .hd-check:checked ~ .hd-bar .hd-tel { display: none; }
  .s-aannemer-d .hd-tel .ic { width: 24px; height: 24px; }
  .s-aannemer-d .hd-knop { height: 46px; padding: 0 12px; gap: 8px; font-size: 14px; }
  .s-aannemer-d .hd-streep { width: 18px; }
  .s-aannemer-d .hd-ov { padding-top: 100px; }
  .s-aannemer-d .hd-nav a { flex-direction: column; align-items: flex-start; gap: 6px; padding: 16px 0 14px; }
  .s-aannemer-d .hd-nav a small { text-align: left; }
  .s-aannemer-d .hero { padding-top: 26px; }
  .s-aannemer-d .hero-tekst { padding-bottom: 40px; gap: 26px; }
  .s-aannemer-d .hero-tekst { grid-template-columns: minmax(0, 1fr); }
  .s-aannemer-d .hero-kop { font-size: clamp(40px, 12.6vw, 64px); font-stretch: 128%; }
  .s-aannemer-d .hero-zij p { font-size: 17px; }
  .s-aannemer-d .knoppen .knop { width: 100%; justify-content: center; white-space: normal; }
  .s-aannemer-d h2:not(.ods-wrap *) { font-stretch: 118% !important; overflow-wrap: break-word; }
  .s-aannemer-d .slot-in h2 { font-size: 34px; }
  .s-aannemer-d .daklijn { padding: 20px 20px 0; gap: 12px; --stoep: 62px; scroll-padding-left: 20px; }
  .s-aannemer-d .huis { width: calc(var(--grow) * 190px); }
  .s-aannemer-d .huis-zadel { --h: 330px; } .s-aannemer-d .huis-plat { --h: 220px; } .s-aannemer-d .huis-kapel { --h: 300px; }
  .s-aannemer-d .huis-mansard { --h: 270px; } .s-aannemer-d .huis-lijst { --h: 245px; }
  .s-aannemer-d .stoep-in { flex-direction: column; align-items: flex-start; gap: 0; padding-bottom: 12px; }
  .s-aannemer-d .stoep ul { flex-direction: column; gap: 8px; }
  .s-aannemer-d .vakken a { grid-template-columns: 1fr 24px; gap: 14px; padding: 26px 0; }
  .s-aannemer-d .vak-maat, .s-aannemer-d .vak-t, .s-aannemer-d .vak-p { grid-column: 1; }
  .s-aannemer-d .vakken .pijl { grid-column: 2; grid-row: 1 / span 3; align-self: center; }
  .s-aannemer-d .fotoband { height: 62vh; min-height: 340px; }
  .s-aannemer-d .fotoband-label { left: 20px; right: 20px; width: auto; bottom: 20px; }
  .s-aannemer-d .sp-stappen { grid-template-columns: 1fr; }
  .s-aannemer-d .sp-stappen li { padding: 24px 22px; }
  /* de goot wordt een regenpijp met beugels */
  .s-aannemer-d .goot { padding: 0 0 0 4px; }
  .s-aannemer-d .goot-buis { position: absolute; left: 0; top: 0; bottom: 0; width: 22px; height: auto; margin: 0; border-radius: 3px;
    background: linear-gradient(90deg, #5f6d75, #d5dde1 45%, #8d9ba4); box-shadow: none; }
  .s-aannemer-d .goot-buis::before { left: -6px; right: -6px; top: -10px; height: 14px; border-radius: 4px 4px 0 0; }
  .s-aannemer-d .goot-buis::after { display: none; }
  .s-aannemer-d .goot ol { grid-template-columns: 1fr; gap: 36px; padding: 10px 0 10px 54px; }
  .s-aannemer-d .goot li { padding-top: 0; }
  .s-aannemer-d .goot .haak { top: 6px; left: -61px; width: 36px; height: 10px; border-radius: 2px; background: var(--leisteen); }
  .s-aannemer-d .goot .haak::before { left: auto; right: -10px; top: 2px; width: 10px; height: 6px; }
  .s-aannemer-d .pr-rijen a { grid-template-columns: 1fr; gap: 16px; }
  .s-aannemer-d .pr-foto { height: 200px; }
  .s-aannemer-d .pr-feit { grid-column: 1; }
  .s-aannemer-d .straat { height: 84px; padding: 0 20px; gap: 5px; }
  .s-aannemer-d .sh { height: calc(var(--s) * 70px); }
  .s-aannemer-d .sh:nth-child(n+6) { display: none; }
  .s-aannemer-d .pk { padding-top: 34px; }
  .s-aannemer-d .pk h1 { font-size: clamp(34px, 10vw, 52px); font-stretch: 118%; margin-bottom: 22px; overflow-wrap: break-word; }
  .s-aannemer-d .pk-lead { font-size: 17px; }
  .s-aannemer-d .dn { padding-bottom: 80px; }
  .s-aannemer-d .dn-in { padding-top: 46px; }
  .s-aannemer-d .dn-prijs td { white-space: normal; }
  .s-aannemer-d .pj-band { padding: 60px 0 80px; }
  .s-aannemer-d .pj-feiten { grid-template-columns: 1fr; }
  .s-aannemer-d .werkboek li { grid-template-columns: 1fr auto; gap: 4px 16px; }
  .s-aannemer-d .wb-straat { grid-column: 1; }
  .s-aannemer-d .wb-wat { grid-column: 1; grid-row: 2; }
  .s-aannemer-d .wb-duur { grid-row: 1 / span 2; align-self: center; }
  .s-aannemer-d .team li { grid-template-columns: 1fr; gap: 4px; }
  .s-aannemer-d .cijfers div { grid-template-columns: 110px 1fr; }
  .s-aannemer-d .cijfers b { font-size: 34px; }
  .s-aannemer-d .mat li { grid-template-columns: 1fr; gap: 6px; }
  .s-aannemer-d .velden { grid-template-columns: 1fr; }
  .s-aannemer-d .ct-info { padding: 28px 22px; }
  .s-aannemer-d .vt-in { grid-template-columns: 1fr; gap: 36px; padding-top: 70px; }
  .s-aannemer-d .vt-goot span { right: 20px; }
  .s-aannemer-d .vt-onder { flex-direction: column; }
}