/* Houtvast Timmerwerk — voorbeeld A (aannemer). Thema: de vakman aan huis, verteld in hoofdstukken.
   Skelet: transparante kop over een foto over de volle breedte, tekst linksonder, daarna genummerde hoofdstukken.
   Ruben als gezicht (potloodnotities in Caveat), hoofdstuknummers met jaarringen, de zwaluwstaart als merkteken en naad,
   knoppen met afgeschuinde hoeken; bosgroen en gebrand oranje op koel wit en saliegroen. */

body.s-aannemer-a {
  --hv-wit: #fbfbf8; --hv-papier: #edf0e8; --hv-lijn: #dbe0d4; --hv-lijn2: #c2c9ba;
  --hv-inkt: #1c211d; --hv-tekst: #3f4640; --hv-zacht: #5d635d;
  --hv-groen: #2c4636; --hv-groen-d: #1f3328; --hv-nacht: #17241c;
  --hv-oranje: #c2662d; --hv-knop: #b0521b; --hv-knop-d: #8f4214; --hv-oranje-t: #9a4716; --hv-oranje-l: #eaa874;
  --hv-licht: #e9e2d4; --hv-licht2: #c9c3b5;
  --hv-merk-vlak: #2c4636;
  --a: #c2662d; --a2: #2c4636; --bg2: #dfe4d8;
  margin: 0; background: var(--hv-wit); color: var(--hv-inkt);
  font: 400 17px/1.65 "Instrument Sans", system-ui, sans-serif; -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
body.s-aannemer-a *, body.s-aannemer-a *::before, body.s-aannemer-a *::after { box-sizing: border-box; }
body.s-aannemer-a img, body.s-aannemer-a svg { max-width: 100%; }
body.s-aannemer-a a { color: inherit; }
body.s-aannemer-a h1, body.s-aannemer-a h2, body.s-aannemer-a h3 { font-family: "Bricolage Grotesque", sans-serif; font-weight: 800; letter-spacing: -.02em; margin: 0; }
body.s-aannemer-a p { margin: 0 0 1em; }
body.s-aannemer-a main { display: block; }
body.s-aannemer-a .hv-w { width: 100%; max-width: 1280px; margin: 0 auto; padding: 0 40px; }
body.s-aannemer-a .hv-groot { font-size: 21px; line-height: 1.55; color: var(--hv-inkt); max-width: 760px; }
body.s-aannemer-a .hv-klein { font-size: 14px; color: var(--hv-zacht); margin: 14px 0 0; }
body.s-aannemer-a .hv-vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
body.s-aannemer-a .hv-foto { display: block; width: 100%; height: 100%; object-fit: cover; }
body.s-aannemer-a .ph.hv-foto { min-height: 100%; }
body.s-aannemer-a .hv-zw { width: 15px; height: 15px; flex: none; color: var(--hv-oranje); }
body.s-aannemer-a .hv-pijl { width: 18px; height: 18px; flex: none; transition: transform .15s; }
body.s-aannemer-a a:hover .hv-pijl, body.s-aannemer-a button:hover .hv-pijl { transform: translateX(4px); }

/* Knoppen: afgeschuinde hoeken, zoals een geschaafde plankrand */
body.s-aannemer-a .hv-knop { display: inline-flex; align-items: center; gap: 14px; padding: 17px 26px; border: 0; background: var(--hv-knop); color: #fff; text-decoration: none; cursor: pointer;
  font: 600 16.5px/1.1 "Instrument Sans", sans-serif; clip-path: polygon(11px 0, 100% 0, 100% calc(100% - 11px), calc(100% - 11px) 100%, 0 100%, 0 11px); transition: background .15s; }
body.s-aannemer-a .hv-knop:hover { background: var(--hv-knop-d); }
body.s-aannemer-a .hv-knop-licht { background: var(--hv-papier); color: var(--hv-inkt); }
body.s-aannemer-a .hv-knop-licht:hover { background: #fff; }
body.s-aannemer-a .hv-lees { display: inline-flex; align-items: center; gap: 10px; margin-top: 30px; padding-bottom: 5px; border-bottom: 2px solid var(--hv-oranje); font-weight: 600; text-decoration: none; color: var(--hv-oranje-t); }
body.s-aannemer-a .hv-lees:hover { color: var(--hv-inkt); }

/* Potloodnotitie van Ruben */
body.s-aannemer-a .hv-notitie { display: block; margin: 28px 0 0; max-width: 560px; font: 600 27px/1.2 "Caveat", cursive; color: var(--hv-groen); }
body.s-aannemer-a .hv-notitie span { -webkit-box-decoration-break: clone; box-decoration-break: clone; background: linear-gradient(transparent 76%, #c2662d4d 76%, #c2662d4d 90%, transparent 90%); padding: 0 2px; }
body.s-aannemer-a .hv-notitie b { font: 600 12px/1 "Instrument Sans", sans-serif; text-transform: uppercase; letter-spacing: .14em; color: var(--hv-oranje-t); }
body.s-aannemer-a .hv-notitie b { display: inline-block; margin-left: 10px; vertical-align: 3px; white-space: nowrap; }
body.s-aannemer-a .hv-notitie b::before { content: "— "; }
body.s-aannemer-a .hv-notitie-licht { color: #fff; }
body.s-aannemer-a .hv-notitie-licht span { background: linear-gradient(transparent 76%, #c2662d99 76%, #c2662d99 90%, transparent 90%); }
body.s-aannemer-a .hv-notitie-licht b { color: var(--hv-oranje-l); }

/* ── Kop: transparant over de foto ─────────────────── */
body.s-aannemer-a .hv-kop { position: absolute; left: 0; right: 0; z-index: 30; color: #fff; }
body.s-aannemer-a .hv-kop-in { display: flex; align-items: center; gap: 36px; max-width: 1440px; margin: 0 auto; padding: 0 40px; min-height: 96px; border-bottom: 1px solid #ffffff38; }
body.s-aannemer-a .hv-logo { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; color: inherit; flex: none; }
body.s-aannemer-a .hv-merk { width: 40px; height: 40px; color: var(--hv-oranje); }
body.s-aannemer-a .hv-logo span { display: grid; line-height: 1; }
body.s-aannemer-a .hv-logo b { font: 800 26px/1 "Bricolage Grotesque", sans-serif; letter-spacing: -.02em; }
body.s-aannemer-a .hv-logo small { margin-top: 4px; font: 600 11px/1 "Instrument Sans", sans-serif; letter-spacing: .26em; text-transform: uppercase; opacity: .8; }
body.s-aannemer-a .hv-nav { flex: 1; display: flex; align-items: center; justify-content: space-between; gap: 28px; }
body.s-aannemer-a .hv-nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 24px; }
body.s-aannemer-a .hv-nav > ul > li { position: relative; }
body.s-aannemer-a .hv-nav > ul > li > a { display: block; white-space: nowrap; padding: 36px 0 34px; font-weight: 600; font-size: 16px; text-decoration: none; text-shadow: 0 1px 8px #0006; }
body.s-aannemer-a .hv-nav > ul > li > a:hover { color: var(--hv-oranje-l); }
body.s-aannemer-a .hv-nav > ul > li > a[aria-current] { box-shadow: inset 0 -3px 0 var(--hv-oranje); }
body.s-aannemer-a .hv-sub { position: absolute; top: 100%; left: -24px; display: none !important; flex-direction: column; gap: 0 !important; width: 320px; padding: 10px 0 !important;
  background: var(--hv-nacht); border-top: 3px solid var(--hv-oranje); box-shadow: 0 24px 40px #0006; }
body.s-aannemer-a .hv-heeft-sub:hover .hv-sub, body.s-aannemer-a .hv-heeft-sub:focus-within .hv-sub { display: flex !important; }
body.s-aannemer-a .hv-sub a { display: grid; padding: 11px 24px; text-decoration: none; font-weight: 600; }
body.s-aannemer-a .hv-sub a:hover { background: var(--hv-groen); }
body.s-aannemer-a .hv-sub small { font-size: 13px; font-weight: 400; color: var(--hv-licht2); }
body.s-aannemer-a .hv-nav-rechts { display: flex; align-items: center; gap: 22px; }
body.s-aannemer-a .hv-nav-tel { white-space: nowrap; display: flex; align-items: center; gap: 10px; text-decoration: none; font: 800 19px/1.1 "Bricolage Grotesque", sans-serif; text-shadow: 0 1px 8px #0006; }
body.s-aannemer-a .hv-nav-tel svg { width: 20px; height: 20px; color: var(--hv-oranje-l); }
body.s-aannemer-a .hv-nav-tel span { display: grid; }
body.s-aannemer-a .hv-nav-tel small { font: 400 12px/1.3 "Instrument Sans", sans-serif; color: var(--hv-licht); }
body.s-aannemer-a .hv-nav-site { padding: 7px 12px; border: 1px solid #ffffff73; font-size: 14px; font-weight: 600; text-decoration: none; white-space: nowrap; }
body.s-aannemer-a .hv-nav-site:hover, body.s-aannemer-a .hv-nav-site[aria-current] { border-color: var(--hv-oranje-l); color: var(--hv-oranje-l); }
body.s-aannemer-a .hv-nav-cta { display: inline-flex; align-items: center; gap: 8px; padding: 12px 0 8px; border-bottom: 2px solid var(--hv-oranje); font-weight: 600; text-decoration: none; white-space: nowrap; }
body.s-aannemer-a .hv-nav-cta:hover { color: var(--hv-oranje-l); }
body.s-aannemer-a .hv-kop-vast { position: relative; background: var(--hv-nacht); }
body.s-aannemer-a .hv-kop-vast .hv-kop-in { border-bottom: 0; }
body.s-aannemer-a .hv-menu-knop { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
body.s-aannemer-a .hv-menu-label { display: none; }

/* ── Paginakop: foto over de volle breedte, tekst linksonder ── */
body.s-aannemer-a .hv-pk { position: relative; display: flex; align-items: flex-end; min-height: max(560px, 74vh); color: #fff; background: var(--hv-nacht); overflow: hidden; }
body.s-aannemer-a .hv-pk-thuis { min-height: max(700px, 100vh); min-height: max(700px, 100svh); }
body.s-aannemer-a .hv-pk-foto { position: absolute; inset: 0; }
body.s-aannemer-a .hv-pk-foto::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, #17241ccc 0%, #17241c33 22%, #17241c1a 45%, #17241cb3 78%, #17241cf2 100%), linear-gradient(90deg, #17241c99 0%, transparent 60%); }
body.s-aannemer-a .hv-pk-foto .ph-cap { top: 120px; bottom: auto; left: auto; right: 40px; z-index: 1; }
body.s-aannemer-a .hv-pk-in { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 40px; padding-top: 170px; padding-bottom: 64px; }
body.s-aannemer-a .hv-pk-thuis .hv-pk-in { padding-bottom: 56px; }
body.s-aannemer-a .hv-kruimel { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 22px; font-size: 13px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--hv-licht); }
body.s-aannemer-a .hv-kruimel a { text-decoration: none; border-bottom: 1px solid #ffffff59; }
body.s-aannemer-a .hv-kruimel a:hover { color: var(--hv-oranje-l); }
body.s-aannemer-a .hv-pk h1 { font-size: clamp(40px, 5.6vw, 82px); line-height: .98; letter-spacing: -.035em; max-width: 920px; text-shadow: 0 2px 24px #0005; }
body.s-aannemer-a .hv-pk-thuis h1 { font-size: clamp(46px, 7.4vw, 112px); line-height: .94; }
body.s-aannemer-a .hv-pk h1 em { font-style: normal; color: var(--hv-oranje-l); }
body.s-aannemer-a .hv-pk-thuis h1 em { display: block; }
body.s-aannemer-a .hv-pk-lead { margin: 22px 0 0; max-width: 600px; font-size: 19px; color: var(--hv-licht); }
body.s-aannemer-a .hv-pk-acties { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 30px; margin-top: 32px; }
body.s-aannemer-a .hv-pk-tel { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--hv-licht); }
body.s-aannemer-a .hv-pk-tel svg { width: 20px; height: 20px; color: var(--hv-oranje-l); }
body.s-aannemer-a .hv-pk-tel b { font: 800 21px/1 "Bricolage Grotesque", sans-serif; color: #fff; margin-left: 4px; }
body.s-aannemer-a .hv-pk-index { list-style: none; display: flex; flex-wrap: wrap; gap: 0; margin: 44px 0 0; padding: 0; border-top: 1px solid #ffffff40; max-width: 820px; }
body.s-aannemer-a .hv-pk-index li { flex: 1 1 auto; }
body.s-aannemer-a .hv-pk-index a { display: block; padding: 16px 22px 0 0; font-weight: 600; font-size: 15px; text-decoration: none; color: var(--hv-licht); }
body.s-aannemer-a .hv-pk-index a:hover { color: var(--hv-oranje-l); }
body.s-aannemer-a .hv-pk-index li + li a::before { content: ""; display: inline-block; width: 7px; height: 7px; margin: 0 14px 2px 0; background: var(--hv-oranje); transform: rotate(45deg); }
body.s-aannemer-a .hv-pk .hv-notitie { margin: 0 0 6px; max-width: 320px; font-size: 30px; transform: rotate(-2deg); text-shadow: 0 1px 10px #0007; }
body.s-aannemer-a .hv-pk-prijs { margin: 24px 0 0; font-size: 16px; color: var(--hv-licht); }
body.s-aannemer-a .hv-pk-prijs b { font: 800 26px/1 "Bricolage Grotesque", sans-serif; color: var(--hv-oranje-l); margin-right: 4px; }
body.s-aannemer-a .hv-opdeze { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-top: 30px; }
body.s-aannemer-a .hv-opdeze p { margin: 0; font-size: 13px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--hv-licht2); }
body.s-aannemer-a .hv-opdeze ul { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 0; padding: 0; }
body.s-aannemer-a .hv-opdeze a { font-weight: 600; font-size: 15px; text-decoration: none; border-bottom: 1px dashed #ffffff80; }
body.s-aannemer-a .hv-opdeze a::before { content: "↓ "; color: var(--hv-oranje-l); }
body.s-aannemer-a .hv-opdeze a:hover { color: var(--hv-oranje-l); }

/* ── Hoofdstukken ───────────────────────────────────── */
body.s-aannemer-a .hv-hfd { position: relative; padding: 120px 0; background: var(--hv-wit); scroll-margin-top: 20px; }
body.s-aannemer-a .hv-hfd-salie { background: var(--hv-papier); }
body.s-aannemer-a .hv-hfd-groen { background: var(--hv-groen); color: var(--hv-licht); }
body.s-aannemer-a .hv-hfd-groen::before { content: ""; position: absolute; left: 0; right: 0; top: -20px; height: 20px;
  background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2256%22%20height%3D%2220%22%3E%3Cpath%20d%3D%22M13%200h30l-6%2020H19z%22%20fill%3D%22%232c4636%22/%3E%3C/svg%3E") 0 0 / 56px 20px repeat-x; }
body.s-aannemer-a .hv-hfd-in { display: grid; grid-template-columns: 290px minmax(0, 1fr); gap: 72px; align-items: start; }
body.s-aannemer-a .hv-hfd-kop { position: sticky; top: 36px; }
body.s-aannemer-a .hv-hfd-nr { display: block; font: 800 136px/.8 "Bricolage Grotesque", sans-serif; letter-spacing: -.05em; color: transparent; padding-bottom: 6px;
  background: repeating-radial-gradient(ellipse 130% 90% at 18% 115%, #8f4214 0 2px, #c2662d 2px 6px, #d98a4e 6px 9px, #b0521b 9px 11px, #e3a46b 11px 15px);
  -webkit-background-clip: text; background-clip: text; }
body.s-aannemer-a .hv-hfd-groen .hv-hfd-nr { background: repeating-radial-gradient(ellipse 130% 90% at 18% 115%, #c2662d 0 2px, #eaa874 2px 6px, #f3c79e 6px 9px, #d98a4e 9px 11px, #f6d6b5 11px 15px);
  -webkit-background-clip: text; background-clip: text; }
body.s-aannemer-a .hv-hfd-kop h2 { margin-top: 20px; padding-top: 20px; border-top: 3px solid var(--hv-oranje); font-size: clamp(28px, 2.7vw, 38px); line-height: 1.05; color: var(--hv-inkt); }
body.s-aannemer-a .hv-hfd-groen .hv-hfd-kop h2, body.s-aannemer-a .hv-hfd-groen h3 { color: #fff; }
body.s-aannemer-a .hv-hfd-sub { margin: 12px 0 0; font-size: 15px; color: var(--hv-zacht); }
body.s-aannemer-a .hv-hfd-groen .hv-hfd-sub, body.s-aannemer-a .hv-hfd-groen p { color: var(--hv-licht); }
body.s-aannemer-a .hv-hfd-groen .hv-groot { color: #fff; }
body.s-aannemer-a .hv-hfd-groen .hv-lees { color: var(--hv-oranje-l); }
body.s-aannemer-a .hv-hfd-groen .hv-lees:hover { color: #fff; }
body.s-aannemer-a .hv-hfd-groen .hv-notitie { color: #fff; }
body.s-aannemer-a .hv-hfd-groen .hv-notitie b { color: var(--hv-oranje-l); }
body.s-aannemer-a .hv-hfd-body { min-width: 0; padding-top: 10px; }
body.s-aannemer-a .hv-hfd-body > p:not([class]) { color: var(--hv-tekst); max-width: 760px; }
body.s-aannemer-a .hv-hfd-groen .hv-hfd-body > p:not([class]) { color: var(--hv-licht); }

/* 01 Wie */
body.s-aannemer-a .hv-wie { display: grid; grid-template-columns: 5fr 6fr; gap: 56px; align-items: start; }
body.s-aannemer-a .hv-wie-foto { margin: 0; }
body.s-aannemer-a .hv-wie-foto > :first-child { aspect-ratio: 4 / 5; }
body.s-aannemer-a figcaption { margin-top: 12px; font-size: 14px; color: var(--hv-zacht); }
body.s-aannemer-a .hv-wie-tekst > p:not([class]) { color: var(--hv-tekst); }
body.s-aannemer-a .hv-feiten { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 0 28px; margin: 34px 0 0; padding: 0; border-top: 1px solid var(--hv-lijn2); }
body.s-aannemer-a .hv-feiten li { display: flex; align-items: center; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--hv-lijn2); font-weight: 600; font-size: 16px; }

/* 02 Rijen diensten */
body.s-aannemer-a .hv-rijen { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--hv-inkt); }
body.s-aannemer-a .hv-rij { display: grid; grid-template-columns: 150px minmax(0, 1fr) auto 24px; gap: 30px; align-items: center; padding: 22px 0; border-bottom: 1px solid var(--hv-lijn2); text-decoration: none; }
body.s-aannemer-a .hv-rij-foto { display: block; aspect-ratio: 4 / 3; overflow: hidden; }
body.s-aannemer-a .hv-rij-foto .ph-cap { display: none; }
body.s-aannemer-a .hv-rij-foto .hv-foto { transition: transform .5s; }
body.s-aannemer-a .hv-rij:hover .hv-rij-foto .hv-foto { transform: scale(1.05); }
body.s-aannemer-a .hv-rij-tekst { display: grid; gap: 6px; }
body.s-aannemer-a .hv-rij-tekst b { font: 800 clamp(22px, 2.2vw, 30px)/1.05 "Bricolage Grotesque", sans-serif; letter-spacing: -.02em; }
body.s-aannemer-a .hv-rij-tekst span { color: var(--hv-zacht); font-size: 16px; }
body.s-aannemer-a .hv-rij:hover .hv-rij-tekst b { color: var(--hv-oranje-t); }
body.s-aannemer-a .hv-rij-prijs { display: grid; text-align: right; }
body.s-aannemer-a .hv-rij-prijs b { font: 800 22px/1.1 "Bricolage Grotesque", sans-serif; }
body.s-aannemer-a .hv-rij-prijs small { font-size: 13px; color: var(--hv-zacht); }
body.s-aannemer-a .hv-rij .hv-pijl { color: var(--hv-oranje); }

/* 03 Voor en na */
body.s-aannemer-a .hv-ww { display: grid; grid-template-columns: 1fr; gap: 36px; }
body.s-aannemer-a .hv-ww-foto { margin: 0; aspect-ratio: 16 / 8; overflow: hidden; }
body.s-aannemer-a .hv-ww-titel { font-size: 28px; line-height: 1.1; margin-bottom: 22px !important; color: var(--hv-inkt); }
body.s-aannemer-a .hv-ww-tabel { width: 100%; border-collapse: collapse; font-size: 16px; }
body.s-aannemer-a .hv-ww-tabel th, body.s-aannemer-a .hv-ww-tabel td { text-align: left; padding: 14px 12px 14px 0; border-bottom: 1px solid var(--hv-lijn2); vertical-align: top; }
body.s-aannemer-a .hv-ww-tabel thead th { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .12em; color: var(--hv-zacht); border-bottom: 2px solid var(--hv-inkt); }
body.s-aannemer-a .hv-ww-tabel tbody th { font-size: 12.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .1em; color: var(--hv-oranje-t); width: 22%; }
body.s-aannemer-a .hv-ww-tabel td:nth-child(2) { color: var(--hv-zacht); }
body.s-aannemer-a .hv-ww-tabel td:nth-child(3), body.s-aannemer-a .hv-ww-tabel td[colspan] { font-weight: 600; }

/* 04 Projecten */
body.s-aannemer-a .hv-pgroot { position: relative; display: block; text-decoration: none; color: var(--hv-inkt); padding-bottom: 60px; }
body.s-aannemer-a .hv-pgroot-foto { display: block; aspect-ratio: 16 / 9; overflow: hidden; }
body.s-aannemer-a .hv-pgroot-foto .ph-cap { top: 12px; bottom: auto; }
body.s-aannemer-a .hv-pgroot-foto .hv-foto { transition: transform .6s; }
body.s-aannemer-a .hv-pgroot:hover .hv-pgroot-foto .hv-foto { transform: scale(1.03); }
body.s-aannemer-a .hv-pgroot-tekst { position: absolute; left: 0; bottom: 0; display: grid; gap: 8px; width: min(520px, 88%); padding: 28px 30px; background: var(--hv-wit); box-shadow: 0 30px 50px -30px #0008; }
body.s-aannemer-a .hv-pgroot-tekst small { font-size: 12.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--hv-oranje-t); }
body.s-aannemer-a .hv-pgroot-tekst b { font: 800 30px/1.05 "Bricolage Grotesque", sans-serif; letter-spacing: -.02em; }
body.s-aannemer-a .hv-pgroot-tekst > span { color: var(--hv-tekst); font-size: 16px; }
body.s-aannemer-a .hv-pgroot:hover .hv-pgroot-tekst b { color: var(--hv-oranje-t); }
body.s-aannemer-a .hv-pgroot-klein .hv-pgroot-foto { aspect-ratio: 3 / 2; }
body.s-aannemer-a .hv-pklein-rij { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; margin-top: 40px; }
body.s-aannemer-a .hv-pklein { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 22px; align-items: center; text-decoration: none; }
body.s-aannemer-a .hv-pklein-foto { display: block; aspect-ratio: 1; overflow: hidden; }
body.s-aannemer-a .hv-pklein-foto .ph-cap { display: none; }
body.s-aannemer-a .hv-pklein > span:last-child { display: grid; gap: 6px; }
body.s-aannemer-a .hv-pklein small { font-size: 12.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--hv-oranje-l); }
body.s-aannemer-a .hv-pklein b { font: 800 23px/1.1 "Bricolage Grotesque", sans-serif; color: #fff; }
body.s-aannemer-a .hv-pklein > span:last-child > span { font-size: 15.5px; color: var(--hv-licht); }
body.s-aannemer-a .hv-pklein:hover b { color: var(--hv-oranje-l); }

/* 05 Stappen */
body.s-aannemer-a .hv-stappen { list-style: none; counter-reset: stap; display: grid; grid-template-columns: 1fr 1fr; gap: 0 48px; margin: 0; padding: 0; }
body.s-aannemer-a .hv-stappen li { counter-increment: stap; position: relative; display: grid; gap: 6px; padding: 22px 0 22px 64px; border-top: 1px solid var(--hv-lijn2); }
body.s-aannemer-a .hv-stappen li::before { content: counter(stap); position: absolute; left: 0; top: 16px; font: 800 40px/1 "Bricolage Grotesque", sans-serif; color: var(--hv-oranje); }
body.s-aannemer-a .hv-stappen b { font: 800 20px/1.2 "Bricolage Grotesque", sans-serif; }
body.s-aannemer-a .hv-stappen span { color: var(--hv-tekst); font-size: 16px; }

/* 06 Prijzen */
body.s-aannemer-a .hv-kost { display: grid; grid-template-columns: 1fr; gap: 56px; align-items: start; }
body.s-aannemer-a .hv-kost-vragen { max-width: 760px; }
body.s-aannemer-a .hv-kost h3, body.s-aannemer-a .hv-huisregels h3, body.s-aannemer-a .hv-andere h3, body.s-aannemer-a .hv-materiaal h3, body.s-aannemer-a .hv-contactzij h3 {
  font-size: 13px; font-family: "Instrument Sans", sans-serif; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--hv-oranje-t); margin-bottom: 14px; }
body.s-aannemer-a .hv-hfd-groen .hv-huisregels h3, body.s-aannemer-a .hv-hfd-groen .hv-andere h3 { color: var(--hv-oranje-l); }
body.s-aannemer-a .hv-prijstabel { width: 100%; border-collapse: collapse; border-top: 2px solid var(--hv-inkt); }
body.s-aannemer-a .hv-prijstabel th, body.s-aannemer-a .hv-prijstabel td { padding: 15px 0; border-bottom: 1px solid var(--hv-lijn2); vertical-align: baseline; }
body.s-aannemer-a .hv-prijstabel th { text-align: left; font-weight: 400; padding-right: 20px; }
body.s-aannemer-a .hv-prijstabel th a { text-decoration: none; }
body.s-aannemer-a .hv-prijstabel th a:hover { color: var(--hv-oranje-t); text-decoration: underline; }
body.s-aannemer-a .hv-prijstabel td { text-align: right; font: 800 18px/1.2 "Bricolage Grotesque", sans-serif; white-space: nowrap; }
body.s-aannemer-a details { border-top: 1px solid var(--hv-lijn2); }
body.s-aannemer-a details:last-of-type { border-bottom: 1px solid var(--hv-lijn2); }
body.s-aannemer-a summary { position: relative; list-style: none; cursor: pointer; padding: 19px 44px 19px 0; font-weight: 600; font-size: 17.5px; }
body.s-aannemer-a summary::-webkit-details-marker { display: none; }
body.s-aannemer-a summary::after { content: ""; position: absolute; right: 6px; top: 24px; width: 10px; height: 10px; border-right: 2px solid var(--hv-oranje); border-bottom: 2px solid var(--hv-oranje); transform: rotate(45deg); transition: transform .2s; }
body.s-aannemer-a details[open] summary::after { transform: rotate(-135deg); top: 29px; }
body.s-aannemer-a details p { margin: 0 0 22px; color: var(--hv-tekst); max-width: 680px; }

/* 07 Werkgebied */
body.s-aannemer-a .hv-gebied { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
body.s-aannemer-a .hv-gebied p:not([class]) { color: var(--hv-tekst); }
body.s-aannemer-a .hv-gebied-lijst { list-style: none; padding: 0; margin: 24px 0 0; display: flex; flex-wrap: wrap; gap: 8px; }
body.s-aannemer-a .hv-gebied-lijst li { padding: 7px 13px; border: 1px solid var(--hv-lijn2); font-size: 15px; background: var(--hv-wit); }
body.s-aannemer-a .hv-kaart { margin: 0; color: var(--hv-groen); }
body.s-aannemer-a .hv-kaart svg { display: block; width: 100%; height: auto; }
body.s-aannemer-a .hv-kaart text { font: 600 11px "Instrument Sans", sans-serif; fill: var(--hv-inkt); letter-spacing: .1em; }
body.s-aannemer-a .hv-kaart .hv-kaart-km { fill: var(--hv-oranje-t); }
body.s-aannemer-a .hv-kaart-grond { fill: var(--hv-papier); }
body.s-aannemer-a .hv-hfd-salie .hv-kaart-grond { fill: var(--hv-wit); }
body.s-aannemer-a .hv-kaart-bord { fill: var(--hv-wit); }
body.s-aannemer-a .hv-kaart-stad { fill: #c2662d24; stroke: var(--hv-oranje); stroke-width: 1.5; }
body.s-aannemer-a .hv-kaart-pin { fill: var(--hv-oranje); stroke: #fff; stroke-width: 3; }

/* Diensten */
body.s-aannemer-a .hv-dblok { display: grid; grid-template-columns: 1fr 1.25fr; gap: 48px; align-items: start; }
body.s-aannemer-a .hv-dblok-foto { margin: 0; aspect-ratio: 4 / 5; overflow: hidden; }
body.s-aannemer-a .hv-dblok .hv-groot { font-size: 19px; }
body.s-aannemer-a .hv-dblok .hv-prijstabel { margin-top: 26px; font-size: 15.5px; }
body.s-aannemer-a .hv-dblok .hv-prijstabel td { font-size: 16px; }
body.s-aannemer-a .hv-dblok-onder { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; margin: 30px 0 0; }
body.s-aannemer-a .hv-dblok-onder > span { font-size: 14px; color: var(--hv-zacht); }
body.s-aannemer-a .hv-vinklijst { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 9px; }
body.s-aannemer-a .hv-vinklijst li { display: flex; gap: 10px; align-items: flex-start; }
body.s-aannemer-a .hv-vink { width: 20px; height: 20px; flex: none; margin-top: 3px; color: var(--hv-oranje); }
body.s-aannemer-a .hv-twee { grid-template-columns: 1fr 1fr; column-gap: 28px; }
body.s-aannemer-a .hv-werkblok { margin: 30px 0; padding: 26px 28px; background: var(--hv-papier); border-left: 4px solid var(--hv-oranje); }
body.s-aannemer-a .hv-tags { list-style: none; margin: 26px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
body.s-aannemer-a .hv-tags li { padding: 10px 15px; background: var(--hv-papier); border-left: 3px solid var(--hv-oranje); font-size: 15.5px; }
body.s-aannemer-a .hv-figuur { margin: 30px 0 0; }
body.s-aannemer-a .hv-figuur > :first-child { aspect-ratio: 16 / 10; }
body.s-aannemer-a .hv-andere { margin-top: 20px; }
body.s-aannemer-a .hv-andere ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 24px; }
body.s-aannemer-a .hv-andere a { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 14px 0; border-top: 1px solid #ffffff38; text-decoration: none; font-weight: 600; color: #fff; }
body.s-aannemer-a .hv-andere a:hover { color: var(--hv-oranje-l); }
body.s-aannemer-a .hv-hfd-groen .hv-pgroot-tekst > span { color: var(--hv-tekst); }

/* Projecten */
body.s-aannemer-a .hv-pfoto { display: block; aspect-ratio: 16 / 9; overflow: hidden; margin-bottom: 34px; }
body.s-aannemer-a .hv-pfoto .hv-foto { transition: transform .6s; }
body.s-aannemer-a .hv-pfoto:hover .hv-foto { transform: scale(1.03); }
body.s-aannemer-a .hv-mini { display: flex; flex-wrap: wrap; gap: 14px 44px; margin: 22px 0 0; padding: 16px 0; border-top: 1px solid var(--hv-lijn2); border-bottom: 1px solid var(--hv-lijn2); }
body.s-aannemer-a .hv-mini dt, body.s-aannemer-a .hv-projmeta dt { font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--hv-zacht); }
body.s-aannemer-a .hv-mini dd { margin: 2px 0 0; font: 800 19px/1.2 "Bricolage Grotesque", sans-serif; }
body.s-aannemer-a .hv-logboek { width: 100%; border-collapse: collapse; }
body.s-aannemer-a .hv-logboek th { text-align: left; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .12em; color: var(--hv-oranje-l); padding: 0 16px 14px 0; border-bottom: 2px solid #ffffff59; }
body.s-aannemer-a .hv-logboek td { padding: 16px 16px 16px 0; border-bottom: 1px solid #ffffff2e; vertical-align: top; color: #fff; }
body.s-aannemer-a .hv-logboek td:first-child { font: 800 16px/1.6 "Bricolage Grotesque", sans-serif; color: var(--hv-oranje-l); width: 80px; }
body.s-aannemer-a .hv-logboek td:nth-child(2) { width: 220px; color: var(--hv-licht2); }

/* Project */
body.s-aannemer-a .hv-metabalk { background: var(--hv-nacht); color: var(--hv-licht); }
body.s-aannemer-a .hv-projmeta { display: grid; grid-template-columns: repeat(5, 1fr); margin: 0; }
body.s-aannemer-a .hv-projmeta div { padding: 24px 18px 26px 0; }
body.s-aannemer-a .hv-projmeta div + div { padding-left: 22px; border-left: 1px solid #ffffff26; }
body.s-aannemer-a .hv-projmeta dt { color: var(--hv-oranje-l); }
body.s-aannemer-a .hv-projmeta dd { margin: 6px 0 0; font: 800 19px/1.2 "Bricolage Grotesque", sans-serif; color: #fff; }
body.s-aannemer-a .hv-resultaat { display: grid; grid-template-columns: 1.4fr 1fr; gap: 48px; align-items: start; }
body.s-aannemer-a .hv-materiaal { padding: 28px; background: var(--hv-papier); border-top: 4px solid var(--hv-oranje); }
body.s-aannemer-a .hv-materiaal ul { margin: 0; padding: 0; list-style: none; }
body.s-aannemer-a .hv-materiaal li { padding: 10px 0; border-bottom: 1px solid var(--hv-lijn2); font-size: 15.5px; }
body.s-aannemer-a .hv-vorvol { background: var(--hv-papier); }
body.s-aannemer-a .hv-vorvol-in { display: grid; grid-template-columns: 1fr auto 1fr; gap: 20px; align-items: center; padding-top: 40px; padding-bottom: 60px; }
body.s-aannemer-a .hv-vorvol a { display: grid; text-decoration: none; font: 800 22px/1.15 "Bricolage Grotesque", sans-serif; }
body.s-aannemer-a .hv-vorvol a:hover { color: var(--hv-oranje-t); }
body.s-aannemer-a .hv-vorvol a:last-child { text-align: right; }
body.s-aannemer-a .hv-vorvol small { font: 600 12px/1.8 "Instrument Sans", sans-serif; text-transform: uppercase; letter-spacing: .12em; color: var(--hv-zacht); }
body.s-aannemer-a .hv-vorvol .hv-vorvol-alle { padding: 12px 18px; border: 2px solid var(--hv-inkt); text-align: center; font: 600 15px/1 "Instrument Sans", sans-serif; }

/* Werkwijze */
body.s-aannemer-a .hv-tip { display: flex; gap: 12px; align-items: flex-start; max-width: 680px; margin: 22px 0 0; padding: 18px 22px; background: var(--hv-wit); border-left: 4px solid var(--hv-oranje); color: var(--hv-tekst); }
body.s-aannemer-a .hv-hfd-salie .hv-tip { background: var(--hv-wit); }
body.s-aannemer-a .hv-hfd:not(.hv-hfd-salie) .hv-tip { background: var(--hv-papier); }
body.s-aannemer-a .hv-tip .hv-zw { margin-top: 5px; }
body.s-aannemer-a .hv-dagen { list-style: none; margin: 0; padding: 0; border-top: 2px solid #ffffff59; }
body.s-aannemer-a .hv-dagen li { display: grid; grid-template-columns: 120px 1fr; gap: 20px; padding: 18px 0; border-bottom: 1px solid #ffffff2e; }
body.s-aannemer-a .hv-dagen b { font: 800 18px/1.4 "Bricolage Grotesque", sans-serif; color: var(--hv-oranje-l); }
body.s-aannemer-a .hv-dagen span { color: #fff; }
body.s-aannemer-a .hv-hfd-groen .hv-vinklijst li { color: #fff; }
body.s-aannemer-a .hv-hfd-groen .hv-vink { color: var(--hv-oranje-l); }
body.s-aannemer-a .hv-huisregels .hv-vinklijst { margin-top: 0; }

/* Over */
body.s-aannemer-a .hv-team { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--hv-inkt); }
body.s-aannemer-a .hv-team li { display: grid; grid-template-columns: 76px 1fr; gap: 24px; align-items: start; padding: 24px 0; border-bottom: 1px solid var(--hv-lijn2); }
body.s-aannemer-a .hv-initiaal { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: var(--hv-groen); color: #fff; font: 800 28px/1 "Bricolage Grotesque", sans-serif;
  box-shadow: inset 0 0 0 3px var(--hv-groen), inset 0 0 0 5px var(--hv-oranje-l); }
body.s-aannemer-a .hv-team h3 { font-size: 24px; color: var(--hv-inkt); }
body.s-aannemer-a .hv-team h3 small { margin-left: 10px; font: 600 12.5px/1 "Instrument Sans", sans-serif; letter-spacing: .1em; text-transform: uppercase; color: var(--hv-oranje-t); }
body.s-aannemer-a .hv-team p { margin: 8px 0 0; color: var(--hv-tekst); max-width: 640px; }
body.s-aannemer-a .hv-waarden { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0 40px; }
body.s-aannemer-a .hv-waarden li { display: grid; gap: 8px; padding: 24px 0; border-top: 2px solid var(--hv-oranje); }
body.s-aannemer-a .hv-waarden b { font: 800 23px/1.15 "Bricolage Grotesque", sans-serif; }
body.s-aannemer-a .hv-waarden span { color: var(--hv-tekst); }
body.s-aannemer-a .hv-keur { list-style: none; margin: 30px 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: #ffffff2e; border: 1px solid #ffffff2e; }
body.s-aannemer-a .hv-keur li { display: grid; gap: 6px; padding: 26px; background: var(--hv-groen); }
body.s-aannemer-a .hv-keur b { font: 800 22px/1.1 "Bricolage Grotesque", sans-serif; color: #fff; }
body.s-aannemer-a .hv-keur span { font-size: 15px; color: var(--hv-licht); }

/* Contact */
body.s-aannemer-a .hv-contact { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 48px; align-items: start; }
body.s-aannemer-a .hv-form { scroll-margin-top: 30px; padding: 40px; background: var(--hv-papier); }
body.s-aannemer-a .hv-form fieldset { border: 0; margin: 0 0 30px; padding: 0 0 30px; border-bottom: 1px solid var(--hv-lijn2); min-width: 0; }
body.s-aannemer-a .hv-form legend { display: flex; align-items: center; gap: 12px; padding: 0; margin-bottom: 20px; font: 800 22px/1.2 "Bricolage Grotesque", sans-serif; }
body.s-aannemer-a .hv-stapje { display: grid; place-items: center; width: 34px; height: 34px; flex: none; background: var(--hv-groen); color: #fff; font: 800 17px/1 "Bricolage Grotesque", sans-serif;
  clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px); }
body.s-aannemer-a .hv-velden { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 20px; }
body.s-aannemer-a .hv-velden-3 { grid-template-columns: 1fr 1fr 1fr; }
body.s-aannemer-a .hv-veld { display: grid; gap: 7px; min-width: 0; }
body.s-aannemer-a .hv-veld-breed { grid-column: 1 / -1; }
body.s-aannemer-a .hv-veld > span { font-weight: 600; font-size: 15px; }
body.s-aannemer-a .hv-veld small { font-weight: 400; color: var(--hv-zacht); }
body.s-aannemer-a .hv-veld input, body.s-aannemer-a .hv-veld select, body.s-aannemer-a .hv-veld textarea { width: 100%; min-width: 0; padding: 13px 14px; font: 400 16px/1.4 "Instrument Sans", sans-serif; color: var(--hv-inkt);
  background: #fff; border: 1.5px solid var(--hv-lijn2); border-radius: 0; }
body.s-aannemer-a .hv-veld input[type=file] { padding: 10px; border-style: dashed; font-size: 14px; }
body.s-aannemer-a .hv-veld input:focus, body.s-aannemer-a .hv-veld select:focus, body.s-aannemer-a .hv-veld textarea:focus { outline: 2px solid var(--hv-oranje); outline-offset: 1px; border-color: var(--hv-oranje); }
body.s-aannemer-a .hv-check { display: flex; gap: 10px; align-items: center; font-size: 15.5px; }
body.s-aannemer-a .hv-check input { width: 18px; height: 18px; accent-color: var(--hv-knop); }
body.s-aannemer-a .hv-form-onder { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; }
body.s-aannemer-a .hv-form-onder .hv-klein { margin: 0; }
body.s-aannemer-a .hv-contactzij { display: grid; gap: 0; border-top: 2px solid var(--hv-inkt); }
body.s-aannemer-a .hv-contactzij > div { padding: 22px 0; border-bottom: 1px solid var(--hv-lijn2); }
body.s-aannemer-a .hv-contactzij p { font-size: 15.5px; color: var(--hv-tekst); margin-bottom: 6px; }
body.s-aannemer-a .hv-zij-tel, body.s-aannemer-a .hv-zij-mail { display: flex; align-items: center; gap: 10px; text-decoration: none; }
body.s-aannemer-a .hv-zij-tel { font: 800 26px/1.2 "Bricolage Grotesque", sans-serif; margin-bottom: 6px; }
body.s-aannemer-a .hv-zij-mail { margin-bottom: 12px; }
body.s-aannemer-a .hv-zij-tel svg, body.s-aannemer-a .hv-zij-mail svg { width: 20px; height: 20px; color: var(--hv-oranje); flex: none; }
body.s-aannemer-a .hv-tijden { list-style: none; margin: 0; padding: 0; }
body.s-aannemer-a .hv-tijden li { display: flex; justify-content: space-between; gap: 12px; padding: 5px 0; font-size: 15.5px; }
body.s-aannemer-a .hv-tijden li span:last-child { font-weight: 600; white-space: nowrap; }
body.s-aannemer-a .hv-na { margin: 0; padding: 0 0 0 20px; font-size: 15.5px; color: var(--hv-tekst); display: grid; gap: 6px; }
body.s-aannemer-a .hv-na li::marker { font-weight: 800; color: var(--hv-oranje-t); }

/* ── Voet ───────────────────────────────────────────── */
body.s-aannemer-a .hv-voet { position: relative; background: var(--hv-nacht); color: var(--hv-licht2); font-size: 15.5px; --hv-merk-vlak: #2c4636; }
body.s-aannemer-a .hv-voet::before { content: ""; position: absolute; left: 0; right: 0; top: -20px; height: 20px;
  background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2256%22%20height%3D%2220%22%3E%3Cpath%20d%3D%22M13%200h30l-6%2020H19z%22%20fill%3D%22%2317241c%22/%3E%3C/svg%3E") 0 0 / 56px 20px repeat-x; }
body.s-aannemer-a .hv-voet-bel { padding: 100px 0 64px; }
body.s-aannemer-a .hv-voet-vraag { margin: 0 0 6px; font: 800 clamp(22px, 2.4vw, 30px)/1.2 "Bricolage Grotesque", sans-serif; color: var(--hv-licht); }
body.s-aannemer-a .hv-voet-nr { display: inline-block; font: 800 clamp(54px, 11vw, 168px)/.9 "Bricolage Grotesque", sans-serif; letter-spacing: -.05em; color: #fff; text-decoration: none; }
body.s-aannemer-a .hv-voet-nr:hover { color: var(--hv-oranje-l); }
body.s-aannemer-a .hv-voet-bel-onder { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 24px; margin-top: 28px; }
body.s-aannemer-a .hv-voet-bel-onder .hv-notitie { margin: 0; }
body.s-aannemer-a .hv-voet-kolommen { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 44px; padding: 56px 0; border-top: 1px solid #ffffff26; }
body.s-aannemer-a .hv-voet .hv-logo { color: #fff; margin-bottom: 20px; }
body.s-aannemer-a .hv-voet-merk p { max-width: 360px; }
body.s-aannemer-a .hv-voet-merken { font-size: 13.5px; color: var(--hv-licht); }
body.s-aannemer-a .hv-voet-kop { margin: 0 0 14px; font-size: 12.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .14em; color: var(--hv-oranje-l); }
body.s-aannemer-a .hv-voet ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
body.s-aannemer-a .hv-voet a { text-decoration: none; }
body.s-aannemer-a .hv-voet ul a { color: var(--hv-licht); }
body.s-aannemer-a .hv-voet ul a:hover { color: #fff; text-decoration: underline; }
body.s-aannemer-a .hv-voet-tijden { margin-top: 18px !important; padding-top: 14px !important; border-top: 1px solid #ffffff22; gap: 4px !important; font-size: 14.5px; }
body.s-aannemer-a .hv-voet-tijden li { display: flex; justify-content: space-between; gap: 12px; }
body.s-aannemer-a .hv-voet-onder { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 24px; padding: 22px 0 30px; border-top: 1px solid #ffffff22; font-size: 14px; }
body.s-aannemer-a .hv-voet-onder a { color: var(--hv-licht); text-decoration: underline; }

/* ── Responsief ─────────────────────────────────────── */
@media (max-width: 1440px) {
  body.s-aannemer-a .hv-nav-tel { display: none; }
}
@media (max-width: 1180px) {
  body.s-aannemer-a .hv-nav-tel { display: flex; }
  body.s-aannemer-a .hv-kop-in { justify-content: space-between; min-height: 80px; }
  body.s-aannemer-a .hv-menu-label { position: relative; z-index: 32; display: inline-flex; align-items: center; gap: 12px; padding: 10px 0; cursor: pointer; font: 600 16px/1 "Instrument Sans", sans-serif; }
  body.s-aannemer-a .hv-menu-label em { font-style: normal; }
  body.s-aannemer-a .hv-menu-streep { display: grid; gap: 6px; width: 28px; }
  body.s-aannemer-a .hv-menu-streep i { display: block; height: 2px; background: currentColor; transition: transform .2s; }
  body.s-aannemer-a .hv-menu-knop:checked + .hv-menu-label .hv-menu-streep i:first-child { transform: translateY(4px) rotate(45deg); }
  body.s-aannemer-a .hv-menu-knop:checked + .hv-menu-label .hv-menu-streep i:last-child { transform: translateY(-4px) rotate(-45deg); }
  body.s-aannemer-a .hv-menu-knop:focus-visible + .hv-menu-label { outline: 2px solid var(--hv-oranje-l); outline-offset: 4px; }
  body.s-aannemer-a .hv-logo { position: relative; z-index: 32; }
  body.s-aannemer-a .hv-nav { display: none; position: fixed; inset: 0; z-index: 31; flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 0;
    padding: 110px 40px 40px; background: var(--hv-nacht); overflow-y: auto; }
  body.s-aannemer-a .hv-menu-knop:checked ~ .hv-nav { display: flex; }
  body.s-aannemer-a .hv-nav ul { flex-direction: column; gap: 0; }
  body.s-aannemer-a .hv-nav > ul > li > a { padding: 14px 0; border-bottom: 1px solid #ffffff22; font: 800 30px/1.1 "Bricolage Grotesque", sans-serif; text-shadow: none; }
  body.s-aannemer-a .hv-nav > ul > li > a[aria-current] { box-shadow: none; color: var(--hv-oranje-l); }
  body.s-aannemer-a .hv-sub { position: static; display: flex !important; width: auto; background: transparent; border: 0; box-shadow: none; padding: 6px 0 10px 16px !important; }
  body.s-aannemer-a .hv-sub a { padding: 6px 0; font-weight: 500; color: var(--hv-licht); }
  body.s-aannemer-a .hv-sub small { display: none; }
  body.s-aannemer-a .hv-nav-rechts { flex-direction: column; align-items: flex-start; gap: 18px; margin-top: 28px; }
  body.s-aannemer-a .hv-nav-tel { font-size: 26px; }
}
@media (max-width: 1000px) {
  body.s-aannemer-a .hv-hfd { padding: 84px 0; }
  body.s-aannemer-a .hv-hfd-in { grid-template-columns: 1fr; gap: 34px; }
  body.s-aannemer-a .hv-hfd-kop { position: static; display: grid; grid-template-columns: auto 1fr; column-gap: 22px; align-items: center; }
  body.s-aannemer-a .hv-hfd-nr { font-size: 96px; grid-row: span 2; }
  body.s-aannemer-a .hv-hfd-kop h2 { margin-top: 0; }
  body.s-aannemer-a .hv-hfd-sub { grid-column: 2; }
  body.s-aannemer-a .hv-wie, body.s-aannemer-a .hv-ww, body.s-aannemer-a .hv-kost, body.s-aannemer-a .hv-gebied, body.s-aannemer-a .hv-dblok,
  body.s-aannemer-a .hv-resultaat, body.s-aannemer-a .hv-contact { grid-template-columns: 1fr; gap: 36px; }
  body.s-aannemer-a .hv-wie-foto > :first-child, body.s-aannemer-a .hv-ww-foto, body.s-aannemer-a .hv-dblok-foto { aspect-ratio: 16 / 10; }
  body.s-aannemer-a .hv-pk-in { grid-template-columns: 1fr; }
  body.s-aannemer-a .hv-projmeta { grid-template-columns: repeat(3, 1fr); }
  body.s-aannemer-a .hv-projmeta div:nth-child(4) { padding-left: 0; border-left: 0; }
  body.s-aannemer-a .hv-projmeta div:nth-child(n+4) { border-top: 1px solid #ffffff26; }
  body.s-aannemer-a .hv-voet-kolommen { grid-template-columns: 1fr 1fr; }
  body.s-aannemer-a .hv-andere ul { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  body.s-aannemer-a { font-size: 16px; }
  body.s-aannemer-a .hv-w, body.s-aannemer-a .hv-kop-in { padding-left: 18px; padding-right: 18px; }
  body.s-aannemer-a .hv-kop-in { min-height: 70px; }
  body.s-aannemer-a .hv-logo b { font-size: 22px; }
  body.s-aannemer-a .hv-merk { width: 34px; height: 34px; }
  body.s-aannemer-a .hv-nav { padding: 96px 18px 32px; }
  body.s-aannemer-a .hv-nav > ul > li > a { font-size: 26px; }
  body.s-aannemer-a .hv-groot { font-size: 18.5px; }
  body.s-aannemer-a .hv-pk { min-height: 520px; }
  body.s-aannemer-a .hv-pk-thuis { min-height: max(640px, 100svh); }
  body.s-aannemer-a .hv-pk-in { padding-top: 120px; padding-bottom: 40px; gap: 24px; }
  body.s-aannemer-a .hv-pk-foto .ph-cap { display: none; }
  body.s-aannemer-a .hv-pk-lead { font-size: 17px; }
  body.s-aannemer-a .hv-pk .hv-notitie { font-size: 26px; }
  body.s-aannemer-a .hv-pk-index { margin-top: 32px; }
  body.s-aannemer-a .hv-pk-index li { flex: 1 1 50%; }
  body.s-aannemer-a .hv-pk-index li + li a::before { display: none; }
  body.s-aannemer-a .hv-pk-index a { padding: 12px 10px 0 0; }
  body.s-aannemer-a .hv-hfd { padding: 64px 0; }
  body.s-aannemer-a .hv-hfd-nr { font-size: 72px; }
  body.s-aannemer-a .hv-hfd-kop h2 { font-size: 26px; padding-top: 14px; }
  body.s-aannemer-a .hv-feiten, body.s-aannemer-a .hv-twee, body.s-aannemer-a .hv-stappen, body.s-aannemer-a .hv-pklein-rij, body.s-aannemer-a .hv-waarden,
  body.s-aannemer-a .hv-keur, body.s-aannemer-a .hv-voet-kolommen, body.s-aannemer-a .hv-andere ul { grid-template-columns: 1fr; }
  body.s-aannemer-a .hv-rij { grid-template-columns: 96px minmax(0, 1fr) 20px; gap: 16px; }
  body.s-aannemer-a .hv-rij-prijs { grid-column: 2; grid-row: 2; text-align: left; }
  body.s-aannemer-a .hv-rij .hv-pijl { grid-column: 3; grid-row: 1; }
  body.s-aannemer-a .hv-rij-tekst span { display: none; }
  body.s-aannemer-a .hv-pgroot { padding-bottom: 0; }
  body.s-aannemer-a .hv-pgroot-tekst { position: static; width: auto; padding: 22px 20px; }
  body.s-aannemer-a .hv-pgroot-tekst b { font-size: 25px; }
  body.s-aannemer-a .hv-pklein { grid-template-columns: 110px minmax(0, 1fr); }
  body.s-aannemer-a .hv-pfoto { aspect-ratio: 4 / 3; }
  body.s-aannemer-a .hv-ww-tabel { font-size: 15px; }
  body.s-aannemer-a .hv-ww-tabel tbody th { width: auto; }
  body.s-aannemer-a .hv-prijstabel th, body.s-aannemer-a .hv-prijstabel td { display: block; text-align: left; padding: 0; border: 0; }
  body.s-aannemer-a .hv-prijstabel tr { display: block; padding: 12px 0; border-bottom: 1px solid var(--hv-lijn2); }
  body.s-aannemer-a .hv-prijstabel td { margin-top: 3px; color: var(--hv-oranje-t); }
  body.s-aannemer-a .hv-logboek thead { display: none; }
  body.s-aannemer-a .hv-logboek tr { display: block; padding: 14px 0; border-bottom: 1px solid #ffffff2e; }
  body.s-aannemer-a .hv-logboek td { display: inline; padding: 0; border: 0; }
  body.s-aannemer-a .hv-logboek td:nth-child(2)::after { content: ""; display: block; }
  body.s-aannemer-a .hv-logboek td:first-child::after { content: " · "; }
  body.s-aannemer-a .hv-projmeta { grid-template-columns: 1fr 1fr; }
  body.s-aannemer-a .hv-projmeta div { padding: 14px 10px 14px 0 !important; border-left: 0 !important; border-top: 1px solid #ffffff26; }
  body.s-aannemer-a .hv-projmeta div:nth-child(-n+2) { border-top: 0; }
  body.s-aannemer-a .hv-vorvol-in { grid-template-columns: 1fr 1fr; }
  body.s-aannemer-a .hv-vorvol .hv-vorvol-alle { grid-column: 1 / -1; grid-row: 2; }
  body.s-aannemer-a .hv-vorvol a { font-size: 18px; }
  body.s-aannemer-a .hv-dagen li { grid-template-columns: 1fr; gap: 4px; }
  body.s-aannemer-a .hv-team li { grid-template-columns: 56px 1fr; gap: 16px; }
  body.s-aannemer-a .hv-initiaal { width: 52px; height: 52px; font-size: 22px; }
  body.s-aannemer-a .hv-team h3 small { display: block; margin: 6px 0 0; }
  body.s-aannemer-a .hv-form { padding: 24px 18px; margin: 0 -18px; }
  body.s-aannemer-a .hv-velden, body.s-aannemer-a .hv-velden-3 { grid-template-columns: 1fr; }
  body.s-aannemer-a .hv-voet-bel { padding: 72px 0 48px; }
  body.s-aannemer-a .hv-voet-onder { flex-direction: column; }
  body.s-aannemer-a .hv-werkblok { padding: 22px 20px; }
}