/* Bouwbedrijf Heethuis. Every colour comes from palette.json.
   The page's own idea: everything has the thickness of the H. A block's lit face
   falls on its top and left, up-left at the H's own slant (about 3 down for every 5 across),
   in the H's light wood. Buttons press into it. */

:root {
  --groen: #213129;
  --groen-diep: #18241E;
  --groen-licht: #2D4238;
  --groen-lijn: #4A5F54;
  --hout: #9C6935;
  --hout-licht: #CD9961;
  --hout-diep: #85582A;
  --hout-inkt: #6F4820;
  --steen: #A9462A;
  --steen-diep: #8A3820;
  --kalk: #F3EEE8;
  --kalk-wit: #FBF8F4;
  --pleister: #E7DFD3;
  --kalk-lijn: #CBC0AF;
  --kalk-zacht: #C8C8BA;
  --inkt: #121A16;
  --inkt-zacht: #4A524C;
  --wa: #25D366;

  --sans: "Instrument Sans", system-ui, sans-serif;
  --bar: "Barlow", "Instrument Sans", sans-serif;
  --muk: "Mukta", "Instrument Sans", sans-serif;
  --hand: "Nothing You Could Do", "Segoe Script", cursive;

  --gut: clamp(16px, 4vw, 64px);
  --head: 68px;

  /* the ladder: one set of steps for every service */
  --l1: clamp(44px, 6vw, 92px);
  --l2: clamp(24px, 2.5vw, 36px);
  --l3: clamp(19px, 1.5vw, 22px);

  /* the fold's type follows the screen in both directions */
  --idx: clamp(44px, min(6.05vw, 10vh), 132px);
  --pair: clamp(32px, min(3.85vw, 6.3vh), 86px);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--head) + 16px); -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--kalk);
  color: var(--inkt);
  font: 400 clamp(17px, 1.2vw, 18px)/1.55 var(--sans);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3, p, ul, dl, dd, figure, blockquote { margin: 0; padding: 0; }
ul { list-style: none; }
a { color: inherit; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
:focus-visible { outline: 3px solid var(--hout-licht); outline-offset: 3px; }
.vw :focus-visible, .contact :focus-visible, .foot :focus-visible { outline-color: var(--kalk); }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.i { width: 1.15em; height: 1.15em; flex: none; }
.stars { width: 6em; height: 1.2em; flex: none; color: var(--hout-licht); }
.hand { font-family: var(--hand); font-weight: 400; }
.wrap { width: min(1360px, 100% - 2 * var(--gut)); margin-inline: auto; }

/* ─── the thickness of the H ─── */
.btn, .tag--l, .invite, .strip__block, .svc-card, .rcard, .form, .round, .pcard__pic, .thumb {
  --face: var(--hout-licht);
  box-shadow: -1px -1px 0 var(--face), -2px -1px 0 var(--face), -3px -2px 0 var(--face), -4px -3px 0 var(--face), -5px -3px 0 var(--face);
}
.invite, .svc-card, .rcard, .form, .strip__block, .fact__pic {
  --face: var(--hout-licht);
  box-shadow: -1px -1px 0 var(--face), -2px -1px 0 var(--face), -3px -2px 0 var(--face), -4px -3px 0 var(--face), -5px -3px 0 var(--face), -6px -4px 0 var(--face), -7px -5px 0 var(--face), -8px -5px 0 var(--face), -9px -6px 0 var(--face);
}
.portrait, .ucard, .shot, .owner__pic, .where__map {
  --face: var(--hout-licht);
  box-shadow: -1px -1px 0 var(--face), -2px -1px 0 var(--face), -3px -2px 0 var(--face), -4px -3px 0 var(--face), -5px -3px 0 var(--face), -6px -4px 0 var(--face), -7px -5px 0 var(--face), -8px -5px 0 var(--face), -9px -6px 0 var(--face), -10px -6px 0 var(--face), -11px -7px 0 var(--face), -12px -8px 0 var(--face), -13px -8px 0 var(--face), -14px -9px 0 var(--face), -15px -10px 0 var(--face);
}

/* a rule is a plank seen on edge: the H's two faces, one pixel each */
.index a, .ladder__3 li, .ucard__list li, .facts .fact, .faq details, .foot__index a, .about__table tr, .contact__dl > div {
  background-image: linear-gradient(var(--hout-licht) 0 1px, var(--hout) 1px 2px);
  background-size: 100% 2px;
  background-repeat: no-repeat;
  background-position: 0 0;
}

/* ─── the lockup ─── */
.lockup { display: inline-flex; align-items: center; text-decoration: none; color: var(--kalk); --m: 40px; gap: calc(var(--m) * .17); }
.lockup__mark { height: var(--m); width: calc(var(--m) * .6856); flex: none; }
.lockup__words { display: block; }
.lockup__b { display: block; font: 500 calc(var(--m) * .335)/1.08 var(--sans); letter-spacing: -.012em; }
.lockup__h { display: block; font: 600 calc(var(--m) * .535)/1 var(--bar); }
.lockup__s { display: block; font: 400 calc(var(--m) * .25)/1.3 var(--muk); margin-top: .35em; }
.lockup--nav { --m: 46px; }
.lockup--xl { --m: calc(var(--pair) * 2.16); }
.lockup--foot { --m: clamp(96px, 9vw, 136px); }

/* ─── header ─── */
.kop { position: sticky; top: 0; z-index: 50; background: var(--groen-diep); color: var(--kalk); }
.nav { height: var(--head); display: flex; align-items: center; gap: clamp(16px, 2.4vw, 40px); padding-inline: clamp(16px, 2.4vw, 36px); }
.nav__links { display: flex; align-items: center; gap: clamp(14px, 2.2vw, 34px); margin-left: auto; font-weight: 500; font-size: 16px; }
.nav__links > li > a, .nav__btn { display: inline-flex; align-items: center; gap: 6px; height: var(--head); text-decoration: none; }
.nav__links > li > a:hover, .nav__btn:hover { color: var(--hout-licht); }
.i--chev { width: .8em; height: .8em; transition: transform .15s; }
.has-drop { position: relative; }
.drop {
  position: absolute; top: 100%; left: -18px; min-width: 216px; padding: 6px 0;
  background: var(--groen-diep); border-top: 2px solid var(--hout-licht);
  opacity: 0; visibility: hidden; transform: translateY(-4px); transition: opacity .14s, transform .14s, visibility .14s;
}
.drop a { display: block; padding: 11px 18px; text-decoration: none; font-size: 17px; }
.drop a:hover, .drop a:focus-visible { background: var(--groen-licht); color: var(--hout-licht); }
.has-drop.open .drop { opacity: 1; visibility: visible; transform: none; }
.has-drop.open .i--chev { transform: rotate(180deg); }
@media (hover: hover) {
  .has-drop:hover .drop { opacity: 1; visibility: visible; transform: none; }
  .has-drop:hover .i--chev { transform: rotate(180deg); }
}
.nav__call { display: flex; align-items: center; gap: 12px; }
.nav__tel { display: inline-flex; align-items: center; gap: 7px; font-weight: 600; text-decoration: none; font-size: 17px; white-space: nowrap; }
.nav__tel:hover { color: var(--hout-licht); }
.nav__wa { display: grid; place-items: center; width: 40px; height: 40px; color: var(--wa); border: 2px solid var(--wa); }
.nav__wa .i { width: 20px; height: 20px; }

/* ─── buttons ─── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55em;
  min-height: 54px; padding: 0 26px;
  background: var(--hout-diep); color: var(--kalk);
  font: 600 17px/1.15 var(--sans); text-decoration: none; text-align: center; white-space: nowrap;
  cursor: pointer; border: 0;
  transition: transform .11s ease-out, box-shadow .11s ease-out, background-color .11s;
}
.btn:hover { background: var(--hout); transform: translate(2px, 1px); box-shadow: -1px -1px 0 var(--face), -2px -1px 0 var(--face), -3px -2px 0 var(--face), -4px -3px 0 var(--face), -5px -3px 0 var(--face), -6px -4px 0 var(--face), -7px -4px 0 var(--face); }
.btn:active { transform: translate(-5px, -3px); box-shadow: none; }
.btn--wa { --face: var(--wa); background: var(--groen-diep); color: var(--wa); border: 2px solid var(--wa); }
.btn--wa:hover { background: var(--groen-diep); }
.btn--on-steen { --face: var(--steen-diep); background: var(--kalk); color: var(--inkt); }
.btn--on-steen:hover { background: var(--kalk-wit); }
.more {
  display: inline-flex; align-items: center; min-height: 48px; font-weight: 600; text-underline-offset: 5px;
  text-decoration: underline; text-decoration-thickness: 2px; text-decoration-color: var(--hout-licht);
}
.more:hover { text-decoration-color: currentColor; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; }
.pair { display: flex; flex-wrap: wrap; gap: 14px; }
.round { display: grid; place-items: center; width: 52px; height: 52px; background: var(--groen); color: var(--kalk); transition: transform .11s, box-shadow .11s, background-color .11s; }
.round:hover { background: var(--groen-licht); }
.round:active { transform: translate(-5px, -3px); box-shadow: none; }

/* ─── labels ─── */
.tag { display: inline-flex; align-items: center; color: var(--kalk); }
.tag--s { gap: 5px; padding: 5px 10px; font-size: 13px; line-height: 1.2; background: rgba(24, 36, 30, .82); }
.tag--xs { position: absolute; left: 0; bottom: 0; gap: 3px; padding: 2px 6px; font-size: 11px; line-height: 1.25; background: rgba(24, 36, 30, .82); pointer-events: none; white-space: nowrap; }
.tag--xs .i { width: 11px; height: 11px; }
.tag .i { color: var(--hout-licht); }
.tag--l { position: absolute; left: 24px; bottom: 22px; flex-direction: column; align-items: flex-start; gap: 2px; padding: 11px 18px 10px; background: var(--groen-diep); }
.tag__where { display: flex; align-items: center; flex-wrap: wrap; gap: 0 .4em; font-size: clamp(18px, 1.6vw, 23px); line-height: 1.25; }
.tag__where b { font-weight: 600; }
.tag__link { font-size: 15px; font-weight: 500; color: var(--hout-licht); text-underline-offset: 3px; }
.tag__link:hover { color: var(--kalk); }

/* the stamp: mark and name, laid over the picture */
.stamp { position: absolute; top: 16px; right: 16px; display: flex; align-items: center; gap: 7px; padding: 6px 11px 6px 8px; pointer-events: none; color: var(--kalk); background: rgba(24, 36, 30, .55); }
.stamp img { width: 22px; height: 32px; }
.stamp__name { display: block; font: 500 12px/1.05 var(--sans); }
.stamp__name span { display: block; }
.stamp__name b { display: block; font: 600 16px/1 var(--bar); }

/* ─── the fold ─── */
.fold { display: grid; grid-template-columns: minmax(0, 36fr) minmax(0, 64fr); min-height: max(620px, calc(100vh - var(--head))); background: var(--groen); color: var(--kalk); }
.fold__photo { position: relative; overflow: hidden; background: var(--groen-diep); }
.fold__open { position: absolute; inset: 0; width: 100%; height: 100%; display: block; cursor: zoom-in; }
.fold__open img { width: 100%; height: 100%; object-fit: cover; object-position: 28% 45%; }
.fold__tag { position: absolute; top: 18px; left: 18px; margin: 0; pointer-events: none; }
.invite {
  position: absolute; left: clamp(20px, 2.4vw, 36px); bottom: clamp(20px, 2.6vw, 36px);
  display: flex; align-items: center; gap: 14px; padding: 12px 22px 12px 12px;
  background: var(--groen-diep); color: var(--kalk); text-decoration: none;
  transition: background-color .12s;
}
.invite:hover { background: var(--groen-licht); }
.face { position: relative; display: block; width: 72px; height: 72px; flex: none; border-radius: 50%; overflow: hidden; background: var(--groen); box-shadow: 0 0 0 2px var(--hout-licht); }
.face img { position: absolute; max-width: none; width: 853%; height: 569%; left: -208%; top: -39%; }
.invite__words { display: block; }
.invite__name { display: block; font-size: 36px; line-height: 1.12; color: var(--hout-licht); }
.invite__line { display: block; font-size: 15px; font-weight: 500; line-height: 1.25; white-space: nowrap; }

.fold__pane {
  display: flex; flex-direction: column; min-width: 0; position: relative; z-index: 1;
  padding: clamp(14px, 2.2vh, 26px) clamp(24px, 3.4vw, 64px) clamp(14px, 2.2vh, 24px);
  box-shadow: -12px 0 0 var(--hout-licht);
}
.fold__pair { display: flex; align-items: center; justify-content: space-between; gap: clamp(20px, 3vw, 56px); padding-bottom: clamp(10px, 1.6vh, 18px); }
.fold__h1 { font: 500 calc(var(--pair) * 1.08)/1.06 var(--sans); letter-spacing: -.024em; max-width: 6.4em; text-wrap: balance; }

.index { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; }
.index a {
  flex: 1 1 0; display: flex; align-items: center; gap: 16px; min-height: 0;
  padding-block: 2px 0; text-decoration: none; color: var(--kalk);
  transition: background-color .14s;
}
.index a:last-child { box-shadow: 0 2px 0 0 var(--hout); }
.index__name { font: 500 var(--idx)/1 var(--sans); letter-spacing: -.032em; margin-right: auto; transition: transform .18s ease-out, color .14s; padding-bottom: .06em; }
.index__label { font-size: clamp(14px, 1.04vw, 18px); line-height: 1.25; text-align: right; color: var(--kalk-zacht); max-width: 22em; text-wrap: balance; }
.index__arrow { width: 26px; height: 26px; color: var(--hout-licht); transition: transform .18s ease-out; }
.index a:hover { background-color: var(--groen-licht); }
.index a:hover .index__name { transform: translateX(14px); color: var(--hout-licht); }
.index a:hover .index__arrow { transform: translateX(-8px); }

.fold__foot {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, auto); column-gap: clamp(20px, 3vw, 56px); row-gap: 8px;
  padding-top: clamp(12px, 1.9vh, 22px); align-items: start;
}
.fold__sub { grid-column: 1; font-size: clamp(16px, 1.25vw, 20px); line-height: 1.38; max-width: 31em; }
.fold__rate { grid-column: 1; display: flex; align-items: center; flex-wrap: wrap; gap: 0 8px; font-size: 14px; color: var(--kalk-zacht); text-decoration: none; }
.fold__rate .stars { width: 72px; height: 14px; }
.fold__rate-p { font-weight: 600; color: var(--kalk); }
.fold__rate:hover { color: var(--kalk); }
.fold__btns { grid-column: 2; grid-row: 1 / span 2; display: flex; flex-direction: column; gap: 12px; min-width: 244px; }
.fold__btns .btn { white-space: nowrap; min-height: clamp(46px, 5.9vh, 54px); }

/* ─── the trust strip ─── */
.strip { background: var(--kalk); padding: clamp(26px, 3vw, 40px) var(--gut) 0; }
.strip__block {
  width: min(1360px, 100%); margin-inline: auto; min-height: 92px;
  display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: clamp(16px, 3vw, 48px);
  padding: 12px clamp(18px, 3vw, 44px); background: var(--kalk-wit); color: var(--inkt);
}
.strip__years, .strip__rate { display: flex; flex-direction: column; gap: 1px; }
.strip__rate { align-items: flex-end; text-align: right; text-decoration: none; }
.strip__say { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 .32em; font: 600 clamp(21px, 2.1vw, 30px)/1.1 var(--bar); color: var(--groen); }
.strip__say b { font-weight: 600; font-size: 1.65em; line-height: .9; color: var(--hout); }
.strip__rate .strip__say { align-items: center; justify-content: flex-end; gap: 0 .5em; }
.strip__rate .stars { width: 5.4em; height: 1.08em; color: var(--hout); font-size: .8em; }
.strip__why { font-size: 15px; color: var(--inkt-zacht); }
.strip__why--keep { font-weight: 600; color: var(--inkt); }
.strip__rate:hover .strip__why--keep { color: var(--steen); }
.strip__mark { width: 39px; height: 57px; }

/* ─── even voorstellen ─── */
.intro { background: var(--kalk); padding-top: clamp(48px, 6vw, 96px); }
.intro__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(32px, 5vw, 88px); align-items: stretch; }
.portrait { position: relative; min-height: 680px; background: var(--groen); margin: 10px 0 0 15px; }
.portrait img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 20% 40%; }
.portrait__words {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 120px clamp(18px, 2.6vw, 36px) clamp(18px, 2.2vw, 30px);
  color: var(--kalk);
  background: linear-gradient(to bottom, rgba(24, 36, 30, 0), rgba(24, 36, 30, .55) 42%, rgba(24, 36, 30, .82));
}
.portrait__words span { display: block; }
.portrait__l1 { font-size: clamp(20px, 1.8vw, 26px); font-weight: 500; line-height: 1.2; }
.portrait__l2 { font-size: clamp(60px, 6.8vw, 100px); line-height: 1.25; color: var(--kalk); margin-block: -.04em -.02em; }
.portrait__l3 { font-size: clamp(16px, 1.3vw, 19px); line-height: 1.3; color: var(--kalk); }
.intro__side { display: flex; flex-direction: column; justify-content: space-between; gap: 26px; }
.intro__h { font: 500 var(--l1)/1 var(--sans); letter-spacing: -.03em; color: var(--groen); }
.facts { display: flex; flex-direction: column; flex: 1; }
.fact { flex: 1; display: grid; grid-template-columns: clamp(150px, 15vw, 214px) minmax(0, 1fr); align-items: center; gap: clamp(20px, 2.4vw, 36px); padding-block: 20px; }
.fact:last-child { padding-bottom: 0; }
.fact__pic { position: relative; aspect-ratio: 4 / 3; margin: 6px 0 0 9px; background: var(--groen); }
.fact__pic img { width: 100%; height: 100%; object-fit: cover; }
.fact__pic button { display: block; width: 100%; height: 100%; cursor: zoom-in; }
.fact h3 { font: 500 clamp(24px, 2.4vw, 34px)/1.1 var(--sans); letter-spacing: -.02em; color: var(--groen); margin-bottom: 6px; }
.fact p { font-size: clamp(17px, 1.3vw, 19px); line-height: 1.4; color: var(--inkt-zacht); }

/* the services card: one plank across the seam */
.svc-card-wrap { position: relative; z-index: 2; margin-top: clamp(40px, 5vw, 72px); margin-bottom: -46px; }
.svc-card { display: flex; align-items: stretch; background: var(--groen); color: var(--kalk); margin-left: 9px; }
.svc-card__label { display: flex; align-items: center; flex: none; padding: 0 clamp(18px, 2.4vw, 36px); font: 600 15px/1.1 var(--bar); letter-spacing: .1em; text-transform: uppercase; color: var(--hout-licht); }
.svc-card ul { flex: 1; display: grid; grid-template-columns: repeat(5, 1fr); }
.svc-card li + li, .svc-card ul { border-left: 1px solid var(--groen-lijn); }
.svc-card a { display: flex; align-items: center; justify-content: space-between; gap: 8px; height: 92px; padding: 0 clamp(12px, 1.6vw, 24px); font: 500 clamp(17px, 1.6vw, 23px)/1 var(--sans); letter-spacing: -.012em; text-decoration: none; transition: background-color .12s, color .12s; }
.svc-card a .i { color: var(--hout-licht); transition: transform .15s; }
.svc-card a:hover { background: var(--groen-licht); color: var(--hout-licht); }
.svc-card a:hover .i { transform: translateY(4px); }

/* ─── services: the shared ladder ─── */
.svc { padding-block: clamp(56px, 7vw, 112px); }
.ladder__1 { font: 500 var(--l1)/1 var(--sans); letter-spacing: -.032em; }
.ladder__1 a { text-decoration: none; }
.ladder__1 a:hover { text-decoration: underline; text-decoration-thickness: .05em; text-underline-offset: .1em; text-decoration-color: var(--hout-licht); }
.ladder__2 { font: 500 var(--l2)/1.18 var(--sans); letter-spacing: -.015em; margin-top: .55em; }
.ladder__3 { margin-top: clamp(20px, 2.2vw, 32px); font-size: var(--l3); line-height: 1.3; font-weight: 500; }
.ladder__3 li { padding: .62em 0 .58em; }
.ladder__3 li:last-child { box-shadow: 0 2px 0 0 var(--hout); }
.ladder .actions { margin-top: clamp(24px, 2.6vw, 38px); }
.svc__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 5vw, 88px); align-items: center; }

.shot { position: relative; background: var(--groen); }
.shot__open { position: relative; display: block; width: 100%; height: 100%; cursor: zoom-in; }
.shot__open img { width: 100%; height: 100%; object-fit: cover; }
.svc__pic { margin-left: 15px; }
.svc__pic .shot { margin-top: 10px; }

.thumbs { display: grid; grid-template-columns: repeat(5, minmax(0, 88px)) minmax(0, auto); align-items: center; gap: 12px; margin-top: 18px; }
.thumb { position: relative; display: block; aspect-ratio: 1; width: 100%; cursor: zoom-in; --face: var(--hout-licht); box-shadow: -1px -1px 0 var(--face), -2px -1px 0 var(--face), -3px -2px 0 var(--face); background: var(--groen); transition: transform .11s; }
.thumb:hover { transform: translate(-3px, -2px); box-shadow: none; }
.thumb img { width: 100%; height: 100%; object-fit: cover; }
.thumb--more::after { content: ""; position: absolute; inset: 0; background: rgba(24, 36, 30, .55); }
.thumb--more span { position: absolute; inset: 0; z-index: 1; display: grid; place-items: center; font: 600 20px/1 var(--bar); color: var(--kalk); }
.thumbs__count { font-weight: 500; font-size: 15px; line-height: 1.25; text-align: left; padding-left: 6px; text-decoration: underline; text-decoration-color: var(--hout-licht); text-underline-offset: 4px; text-decoration-thickness: 2px; }

/* uitbouw: one framed unit, the photo capping it */
.svc--uitbouw { background: var(--pleister); padding-top: calc(46px + clamp(60px, 6.5vw, 104px)); padding-bottom: clamp(30px, 3.4vw, 52px); }
.ucard { background: var(--groen); color: var(--kalk); margin-left: 15px; }
.ucard__cap { box-shadow: none; aspect-ratio: 2.05 / 1; }
.ucard__cap img { object-position: 50% 42%; }
.ucard__thumbs { margin: 0; padding: 16px clamp(18px, 3vw, 48px); grid-template-columns: repeat(5, minmax(0, 84px)) minmax(0, auto); background: var(--groen-licht); }
.ucard__body { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); column-gap: clamp(28px, 5vw, 80px); padding: clamp(26px, 3.4vw, 52px) clamp(18px, 3vw, 48px); }
.ucard__sub { font: 500 var(--l2)/1.18 var(--sans); letter-spacing: -.015em; margin-top: .55em; max-width: 21em; }
.ucard__list { font-size: var(--l3); line-height: 1.3; font-weight: 500; align-self: end; }
.ucard__list li { padding: .6em 0 .56em; }
.ucard__list li:last-child { box-shadow: 0 2px 0 0 var(--hout); }
.ucard__foot { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 22px 40px; margin-top: clamp(26px, 3vw, 44px); }

/* the rating welded in: zij gingen u voor */
.went { display: flex; align-items: center; gap: 16px; text-decoration: none; }
.went__faces { display: flex; flex: none; }
.went__faces span {
  display: grid; place-items: center; width: 48px; height: 48px; margin-left: -12px; border-radius: 50%;
  background: var(--hout-licht); color: var(--groen-diep); box-shadow: 0 0 0 3px var(--groen);
  font: 600 19px/1 var(--bar);
}
.went__faces span:first-child { margin-left: 0; }
.went__faces span:nth-child(even) { background: var(--pleister); }
.went__words { display: block; line-height: 1.25; }
.went__words > span { display: block; }
.went__line { font-weight: 600; font-size: 18px; }
.went__score { display: flex !important; align-items: center; flex-wrap: wrap; gap: 0 8px; font-size: 15px; color: var(--kalk-zacht); }
.went__score .stars { width: 72px; height: 14px; }
.went__platform { font: 600 15px/1.25 var(--bar); color: var(--hout-licht); }
.went:hover .went__line { color: var(--hout-licht); }

/* the bands */
.band { padding-block: clamp(26px, 3vw, 44px); }
.band__h { font: 500 clamp(24px, 2.8vw, 40px)/1.1 var(--sans); letter-spacing: -.02em; }
.band__line { font-size: clamp(16px, 1.25vw, 18px); line-height: 1.4; margin-top: .4em; }
.band__row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 18px 40px; }
.band--lint { background: var(--pleister); color: var(--groen); padding-top: 0; }
.band--lint .wrap { padding-left: 15px; }
.band--lint .band__line { color: var(--inkt-zacht); font-size: 14px; }
.band--offerte { background: var(--hout-licht); color: var(--groen-diep); }
.band--offerte .btn { --face: var(--hout); background: var(--groen); }
.band--offerte .btn:hover { background: var(--groen-licht); }
.band--bel { background: var(--groen); color: var(--kalk); }

/* kozijnen: the pair as a two-light window */
.svc--kozijnen { background: var(--kalk); }
.svc--kozijnen .ladder__1, .svc--kozijnen .ladder__2 { color: var(--groen); }
.shot--pair { background: var(--hout-licht); }
.shot--pair .shot__open { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.half { position: relative; display: block; aspect-ratio: 3 / 3.4; overflow: hidden; }
.half img { width: 100%; height: 100%; object-fit: cover; }
.half__tag { position: absolute; left: 0; top: 0; padding: 5px 12px; background: var(--kalk); color: var(--inkt); font: 600 15px/1.2 var(--bar); letter-spacing: .08em; text-transform: uppercase; }

/* dakkapel */
.svc--dakkapel { background: var(--groen-diep); color: var(--kalk); }
.svc--dakkapel .svc__grid { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); }
.svc--dakkapel .shot { aspect-ratio: 5 / 5.2; }
.svc--dakkapel .shot img { object-position: 50% 30%; }
.svc--dakkapel .thumbs__count { color: var(--kalk); }

/* dakdekker: the picture across, the ladder laid out under it */
.svc--dakdekker { background: var(--pleister); }
.svc--dakdekker .ladder__1, .svc--dakdekker .ladder__2 { color: var(--groen); }
.svc--dakdekker .shot { aspect-ratio: 2.35 / 1; }
.svc--dakdekker .shot img { object-position: 50% 48%; }
.svc__stack { display: flex; flex-direction: column; gap: clamp(28px, 3.4vw, 48px); }
.ladder--wide { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); column-gap: clamp(28px, 5vw, 80px); align-items: end; margin-left: 15px; }
.ladder--wide .ladder__1 { grid-column: 1; }
.ladder--wide .ladder__2 { grid-column: 1; align-self: start; }
.ladder--wide .ladder__3 { grid-column: 2; grid-row: 1 / span 2; margin-top: 0; }
.ladder--wide .actions { grid-column: 1 / -1; }

/* timmerman: where the firm began, on wood */
.svc--timmerman { background: var(--hout-licht); color: var(--groen-diep); }
.svc--timmerman .svc__grid { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); }
.svc--timmerman .ladder__3 li { background-image: linear-gradient(var(--hout) 0 1px, var(--hout-diep) 1px 2px); }
.svc--timmerman .ladder__3 li:last-child { box-shadow: 0 2px 0 0 var(--hout-diep); }
.svc--timmerman .btn { --face: var(--hout); background: var(--groen); }
.svc--timmerman .btn:hover { background: var(--groen-licht); }
.svc--timmerman .more { text-decoration-color: var(--groen); }
.svc--timmerman .shot { --face: var(--hout); aspect-ratio: 3 / 2.1; }
.svc--timmerman .thumb { --face: var(--hout); }
.svc--timmerman .thumbs__count { text-decoration-color: var(--groen); }

/* ─── section heads ─── */
.h-big { font: 500 var(--l1)/1 var(--sans); letter-spacing: -.032em; }
.h-mid { font: 500 clamp(36px, 4.2vw, 62px)/1.04 var(--sans); letter-spacing: -.028em; }

/* ─── projects ─── */
.projects { background: var(--groen-diep); color: var(--kalk); padding-block: clamp(56px, 7vw, 112px); overflow: hidden; }
.projects__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: clamp(30px, 3.6vw, 52px); }
.projects__intro { font-size: var(--l3); line-height: 1.35; margin-top: .6em; color: var(--kalk-zacht); max-width: 34em; }
.carousel__nav { display: flex; gap: 16px; flex: none; padding-left: 6px; }
.carousel__nav .round { background: var(--groen); }
.carousel { overflow-x: auto; padding: 10px 0 8px 15px; scrollbar-width: none; }
.carousel.is-live { overflow: hidden; touch-action: pan-y; cursor: grab; user-select: none; }
.carousel.is-dragging { cursor: grabbing; }
.carousel__track { display: flex; align-items: flex-start; gap: 34px; width: max-content; will-change: transform; }
.pcard { display: block; width: clamp(290px, 31vw, 450px); text-align: left; flex: none; cursor: zoom-in; }
.pcard__pic { position: relative; display: block; aspect-ratio: 4 / 3; background: var(--groen); box-shadow: -1px -1px 0 var(--hout-licht), -2px -1px 0 var(--hout-licht), -3px -2px 0 var(--hout-licht), -4px -3px 0 var(--hout-licht), -5px -3px 0 var(--hout-licht), -6px -4px 0 var(--hout-licht), -7px -5px 0 var(--hout-licht), -8px -5px 0 var(--hout-licht), -9px -6px 0 var(--hout-licht); }
.pcard__pic > img { width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.pcard__pic--door > img { object-position: 0 92%; }
.pcard__where { display: flex; align-items: center; flex-wrap: wrap; gap: 0 .4em; margin-top: 18px; font-size: clamp(20px, 1.8vw, 26px); line-height: 1.2; }
.pcard__where b { font-weight: 600; }
.pcard__where .i { color: var(--hout-licht); }
.pcard__what { display: block; margin-top: 6px; color: var(--kalk-zacht); font-size: 17px; line-height: 1.35; max-width: 26em; }
.projects__foot { margin-top: clamp(30px, 3.6vw, 52px); padding-left: 6px; }

/* ─── staat uw klus er niet bij ─── */
.klus { background: var(--steen); color: var(--kalk); padding-block: clamp(46px, 5.6vw, 88px); }
.klus__row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 28px 56px; }
.klus__h { font: 500 clamp(40px, 6vw, 92px)/1 var(--sans); letter-spacing: -.032em; }
.klus__line { font-size: var(--l3); font-weight: 500; line-height: 1.3; margin-top: .7em; max-width: 34em; }

/* ─── the owner ─── */
.owner { background: var(--kalk); padding-block: clamp(56px, 7vw, 112px); }
.owner__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(32px, 5vw, 88px); align-items: center; }
.owner__pic { aspect-ratio: 3 / 2.2; margin: 10px 0 0 15px; background: var(--groen); }
.owner__pic img { width: 100%; height: 100%; object-fit: cover; object-position: 30% 40%; }
.owner .h-big { color: var(--groen); }
.owner__text { font-size: var(--l3); line-height: 1.5; margin-top: .9em; }
.owner__sign { font-size: clamp(38px, 3.6vw, 52px); line-height: 1.3; color: var(--hout-inkt); margin-top: .25em; }
.owner .actions { margin-top: 22px; }

/* ─── over ons + waar wij werken: one ground, a shared plank ─── */
.together { background: var(--pleister); }
.about { padding-block: clamp(56px, 7vw, 112px) clamp(40px, 4.6vw, 72px); }
.about__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(32px, 5vw, 88px); align-items: center; }
.about .h-big, .where .h-mid { color: var(--groen); }
.about__lead { font-size: var(--l3); line-height: 1.5; margin-top: .9em; }
.about__table { width: 100%; border-collapse: collapse; margin-top: 24px; font-size: 16px; }
.about__table th { text-align: left; font: 600 14px/1.3 var(--bar); letter-spacing: .07em; text-transform: uppercase; color: var(--hout-inkt); padding: 10px 16px 9px 0; white-space: nowrap; vertical-align: top; }
.about__table td { padding: 8px 0; font-weight: 500; }
.about__table tr:last-child { box-shadow: 0 2px 0 0 var(--hout); }
.about .actions { margin-top: 26px; }
.about__pic { aspect-ratio: 3 / 2.3; margin: 10px 0 0 15px; }
.about__pic img { object-position: 50% 62%; }

.where { padding-block: 0 clamp(56px, 7vw, 112px); }
.where__grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 5fr) minmax(0, 3fr); gap: clamp(24px, 3.4vw, 56px); align-items: stretch; background-image: linear-gradient(var(--hout-licht) 0 1px, var(--hout) 1px 2px); background-size: 100% 2px; background-repeat: no-repeat; padding-top: clamp(32px, 4vw, 60px); }
.where__lead { font-size: var(--l3); line-height: 1.4; margin-top: .7em; font-weight: 500; }
.where__places { display: grid; grid-template-columns: 1fr 1fr; gap: 3px 16px; margin-top: 18px; font-size: 16px; color: var(--inkt-zacht); }
.where .actions { margin-top: 24px; }
.where__map { position: relative; min-height: 640px; margin: 10px 0 0 15px; background: var(--groen); z-index: 0; }
.where__pic { margin: 10px 0 0 15px; min-height: 300px; }
.where__pic img { object-position: 42% 50%; }
.where__pic .shot__open { position: absolute; inset: 0; }
.where__pic .tag--l { left: 12px; bottom: 12px; padding: 8px 12px; }
.where__pic .tag__where { font-size: 18px; }
.where__pic .tag__link { font-size: 14px; }
.leaflet-container { font-family: var(--sans); background: var(--groen); }
.leaflet-tile-pane { filter: invert(1) contrast(.62) sepia(1) hue-rotate(95deg) saturate(.5) brightness(.72); }
.leaflet-control-attribution.leaflet-control { background: rgba(24, 36, 30, .72); color: var(--kalk-zacht); font-size: 10px; }
.leaflet-control-attribution a { color: var(--kalk-zacht); }
.leaflet-control-zoom.leaflet-bar { border: 0; box-shadow: none; }
.leaflet-control-zoom.leaflet-bar a, .leaflet-control-zoom.leaflet-bar a:hover { background: var(--groen-diep); color: var(--kalk); border-color: var(--groen-lijn); }
.leaflet-control-zoom.leaflet-bar a:hover { background: var(--groen-licht); }
.kaart-dot { width: 11px; height: 11px; border-radius: 50%; background: var(--hout-licht); }
.kaart-home img { width: 28px; height: 41px; }
.leaflet-tooltip.kaart-pl { background: none; border: 0; box-shadow: none; padding: 0 3px; color: var(--kalk); font: 500 13px/1.1 var(--sans); }
.leaflet-tooltip.kaart-pl::before { display: none; }
.kaart--klein .kaart-minor { display: none; }
.leaflet-tooltip.kaart-pl--home { font: 600 19px/1 var(--bar); }

/* ─── faq ─── */
.faq { background: var(--kalk); padding-block: clamp(56px, 7vw, 112px); }
.faq__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 5vw, 88px); align-items: start; }
.faq .h-mid { color: var(--groen); }
.faq__head { display: contents; }
.faq .h-mid { grid-column: 1; }
.faq__list { grid-column: 2; grid-row: 1; }
.faq__action { grid-column: 2; padding-left: 5px; }
.faq details:last-child { box-shadow: 0 2px 0 0 var(--hout); }
.faq summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 18px 0 16px; font: 500 clamp(20px, 1.8vw, 25px)/1.2 var(--sans); letter-spacing: -.012em; cursor: pointer; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; flex: none; width: 14px; height: 14px; margin-right: 4px; border-right: 2px solid var(--hout); border-bottom: 2px solid var(--hout); transform: rotate(45deg) translate(-3px, -3px); transition: transform .15s; }
.faq details[open] summary::after { transform: rotate(225deg) translate(-3px, -3px); }
.faq summary:hover { color: var(--hout-inkt); }
.faq details p { padding-bottom: 20px; color: var(--inkt-zacht); max-width: 40em; font-size: 18px; }

/* ─── reviews ─── */
.reviews { background: var(--groen); color: var(--kalk); padding-block: clamp(56px, 7vw, 112px); }
.reviews__head { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 20px 40px; margin-bottom: clamp(34px, 4vw, 60px); }
.platform { display: grid; grid-template-columns: auto; gap: 1px; text-decoration: none; text-align: right; justify-items: end; }
.platform__name { font: 600 22px/1.15 var(--bar); }
.platform__score { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; color: var(--kalk-zacht); }
.platform__score .stars { width: 80px; height: 16px; }
.platform__count { font-size: 14px; color: var(--kalk-zacht); }
.platform:hover .platform__name { color: var(--hout-licht); }
.reviews__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(26px, 3vw, 44px); padding-left: 9px; }
.rcard { display: flex; flex-direction: column; gap: 16px; padding: clamp(22px, 2.4vw, 36px); background: var(--kalk-wit); color: var(--inkt); text-decoration: none; transition: background-color .12s; }
.rcard:hover { background: var(--kalk); }
.rcard__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.rcard .stars { width: 110px; height: 22px; color: var(--hout); }
.ko { font: 600 16px/1.1 var(--bar); color: var(--groen); }
.rcard blockquote { flex: 1; font-size: clamp(17px, 1.3vw, 19px); line-height: 1.5; }
.rcard__who { display: flex; align-items: center; gap: 12px; font-size: 15px; line-height: 1.3; color: var(--inkt-zacht); }
.rcard__who b { font-weight: 600; color: var(--inkt); font-size: 17px; }
.rcard__av { display: grid; place-items: center; width: 46px; height: 46px; flex: none; border-radius: 50%; background: var(--groen); color: var(--kalk); font: 600 19px/1 var(--bar); }
.reviews__action { margin-top: clamp(34px, 4vw, 60px); padding-left: 6px; }

/* ─── contact ─── */
.contact { background: var(--groen-diep); color: var(--kalk); padding-block: clamp(56px, 7vw, 112px); }
.contact__grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(32px, 5vw, 88px); align-items: start; }
.contact__lead { font-size: var(--l3); line-height: 1.4; margin-block: .8em 1.3em; max-width: 30em; }
.contact__dl { margin-top: clamp(28px, 3vw, 44px); }
.contact__dl > div { display: grid; grid-template-columns: 124px minmax(0, 1fr); gap: 12px; padding: 12px 0 10px; }
.contact__dl > div:last-child { box-shadow: 0 2px 0 0 var(--hout); }
.contact__dl dt { font: 600 14px/1.6 var(--bar); letter-spacing: .07em; text-transform: uppercase; color: var(--hout-licht); }
.contact__dl a { text-underline-offset: 3px; text-decoration-color: var(--hout-licht); overflow-wrap: anywhere; }
.form { display: flex; flex-direction: column; gap: 16px; padding: clamp(20px, 2.6vw, 38px); background: var(--kalk-wit); color: var(--inkt); margin: 6px 0 0 9px; }
.form label { display: block; font-weight: 600; font-size: 16px; }
.form__opt { font-weight: 400; color: var(--inkt-zacht); }
.form input, .form textarea { display: block; width: 100%; margin-top: 5px; padding: 12px 13px; background: var(--kalk); border: 1px solid var(--kalk-lijn); border-radius: 0; font: 400 17px/1.35 var(--sans); color: var(--inkt); }
.form input:focus, .form textarea:focus { outline: 2px solid var(--hout); outline-offset: 0; border-color: var(--hout); }
.form__trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form__send { align-self: flex-start; min-width: 190px; margin: 6px 0 0 5px; }

/* ─── footer ─── */
.foot { background: var(--groen-diep); color: var(--kalk); padding-bottom: clamp(30px, 3vw, 44px); }
.foot__index a { display: flex; align-items: center; justify-content: space-between; padding: 14px 0 12px; font: 500 clamp(26px, 3vw, 44px)/1.05 var(--sans); letter-spacing: -.024em; text-decoration: none; transition: color .12s; }
.foot__index a:last-child { box-shadow: 0 2px 0 0 var(--hout); }
.foot__index .i { width: 26px; height: 26px; color: var(--hout-licht); transition: transform .18s; }
.foot__index a:hover { color: var(--hout-licht); }
.foot__index a:hover .i { transform: translateX(-8px); }
.foot__grid { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 28px clamp(32px, 5vw, 80px); padding-block: clamp(32px, 3.6vw, 52px); }
.foot__addr { font-style: normal; font-size: 17px; line-height: 1.5; }
.foot__addr a, .foot__small a { text-underline-offset: 3px; text-decoration-color: var(--hout-licht); }
.foot__small { font-size: 14px; color: var(--kalk-zacht); }

/* ─── sticky bar ─── */
.sticky { display: none; }

/* ─── viewer ─── */
.vw { position: fixed; inset: 0; width: 100vw; height: 100vh; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: var(--groen-diep); color: var(--kalk); overflow: hidden; }
.vw[open] { display: grid; grid-template-rows: auto minmax(0, 1fr) auto auto auto; }
.vw::backdrop { background: var(--groen-diep); }
.vw__bar { display: flex; align-items: center; justify-content: space-between; padding: 6px clamp(10px, 1.6vw, 24px) 6px clamp(16px, 2vw, 28px); }
.vw__pos { font: 600 16px/1.2 var(--bar); letter-spacing: .06em; color: var(--kalk-zacht); }
.vw__close { display: grid; place-items: center; width: 48px; height: 48px; color: var(--kalk); }
.vw__close .i { width: 28px; height: 28px; }
.vw__close:hover { color: var(--hout-licht); }
.vw__stage { position: relative; min-height: 0; touch-action: pan-y; }
.vw__pic { position: absolute; inset: 0 clamp(0px, 6.6vw, 100px); pointer-events: none; }
.vw__pic > img { position: absolute; inset: 0; margin: auto; width: auto; height: auto; max-width: 100%; max-height: 100%; pointer-events: auto; user-select: none; -webkit-user-drag: none; }
.vw__twin { position: absolute; inset: 0; margin: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; background: var(--hout-licht); pointer-events: auto; }
.vw__twin figure { position: relative; min-width: 0; min-height: 0; }
.vw__twin img { width: 100%; height: 100%; object-fit: cover; -webkit-user-drag: none; user-select: none; }
.vw__twin figcaption { position: absolute; left: 0; top: 0; padding: 5px 12px; background: var(--kalk); color: var(--inkt); font: 600 15px/1.2 var(--bar); letter-spacing: .08em; text-transform: uppercase; }
.vw__twin.is-stacked { grid-template-columns: 1fr; grid-template-rows: 1fr 1fr; }
.vw__nav { position: absolute; top: 50%; margin-top: -26px; z-index: 2; }
.vw__nav--prev { left: clamp(12px, 1.6vw, 26px); }
.vw__nav--next { right: clamp(10px, 1.4vw, 22px); }
.vw__label { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 0 .45em; padding: 8px 16px 2px; font-size: clamp(20px, 2vw, 28px); line-height: 1.2; }
.vw__label b { font-weight: 600; }
.vw__label .i { color: var(--hout-licht); }
.vw__strip { display: flex; gap: 8px; overflow-x: auto; padding: 8px 16px; scrollbar-width: none; justify-content: safe center; }
.vw__strip button { position: relative; flex: none; width: 66px; height: 50px; opacity: .55; transition: opacity .12s; }
.vw__strip button:hover { opacity: .85; }
.vw__strip button[aria-current="true"] { opacity: 1; box-shadow: 0 0 0 2px var(--hout-licht); }
.vw__strip img { width: 100%; height: 100%; object-fit: cover; }
.vw__strip .twin { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; width: 100%; height: 100%; background: var(--hout-licht); }
.vw__strip .twin img { min-width: 0; }
.vw__cta { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 6px 24px; padding: 8px 16px 14px 20px; background: var(--groen); }
.vw__ask { font: 500 clamp(19px, 1.8vw, 24px)/1.2 var(--sans); letter-spacing: -.01em; }
.vw__cta .btn { min-height: 46px; padding: 0 20px; font-size: 16px; }
html.vw-open { overflow: hidden; }

/* ─── up to the stacked fold ─── */
@media (max-width: 1240px) {
  .foot__grid { grid-template-columns: auto minmax(0, 1fr); }
  .foot__pair { grid-column: 1 / -1; }
}

@media (max-width: 1000px) {
  :root { --idx: clamp(44px, 9.4vw, 92px); --pair: clamp(34px, 6.6vw, 60px); }
  .fold { display: block; min-height: 0; }
  .fold__photo { height: clamp(300px, 48vw, 460px); }
  .fold__open img { object-position: 40% 62%; }
  .fold__pane { box-shadow: 0 -10px 0 var(--hout-licht); padding-top: 26px; padding-bottom: 28px; }
  .index a { flex: none; min-height: calc(var(--idx) * 1.26); }
  .fold__btns { flex-direction: row; }
  .intro__grid, .svc__grid, .svc--dakkapel .svc__grid, .svc--timmerman .svc__grid, .owner__grid, .about__grid, .contact__grid, .faq__grid { grid-template-columns: minmax(0, 1fr); }
  .faq .h-mid, .faq__list, .faq__action { grid-column: 1; grid-row: auto; }
  .portrait { min-height: 0; aspect-ratio: 4 / 4.2; }
  .where__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .where__words, .where__map { grid-column: 1 / -1; }
  .where__pic { grid-column: 1 / -1; aspect-ratio: 2 / 1; min-height: 0; }
  .where__pic .shot__open { position: relative; }
  .svc-card { flex-direction: column; }
  .svc-card__label { padding-block: 16px 10px; }
  .svc-card ul { grid-template-columns: repeat(5, 1fr); border-left: 0; border-top: 1px solid var(--groen-lijn); }
  .svc-card a { height: 64px; }
  .svc-card a .i { display: none; }
  .svc-card-wrap { margin-bottom: -60px; }
  .svc--uitbouw { padding-top: calc(60px + 56px); }
  .svc--dakkapel .svc__grid { display: flex; flex-direction: column; align-items: stretch; }
  .svc--dakkapel .ladder { order: -1; }
  .ucard__body, .ladder--wide { grid-template-columns: minmax(0, 1fr); }
  .ucard__list { margin-top: 22px; }
  .ladder--wide .ladder__3 { grid-column: 1; grid-row: auto; margin-top: 20px; }
}

/* ─── the phone ─── */
@media (max-width: 760px) {
  :root { --head: 58px; --idx: clamp(32px, 9.4vw, 54px); --pair: clamp(28px, 8.6vw, 42px); }
  .m-hide { display: none !important; }

  /* the header and the bar lie over the page, hidden until the strip comes */
  .kop {
    position: fixed; left: 0; right: 0; top: 0; z-index: 60;
    transition: transform .22s ease-out, visibility .22s;
  }
  html.js:not(.past-strip) .kop { transform: translateY(-105%); visibility: hidden; }
  .nav { gap: 10px; padding-inline: 12px; }
  .nav__wide { display: none; }
  .nav__links { margin-left: auto; font-size: 15px; }
  .lockup--nav { --m: 38px; }
  .lockup--nav .lockup__b { font-size: 12px; }
  .lockup--nav .lockup__h { font-size: 17px; }
  .nav__tel { font-size: 14px; }
  .nav__tel .i { display: none; }
  .nav__call { gap: 8px; }
  .nav__wa { width: 34px; height: 34px; }
  .nav__wa .i { width: 18px; height: 18px; }
  .drop { position: fixed; left: 0; right: 0; top: var(--head); width: 100%; }
  .drop a { padding-block: 13px; }

  .sticky {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
    padding: 12px 12px calc(10px + env(safe-area-inset-bottom)) 16px;
    background: var(--groen-diep);
    box-shadow: 0 -2px 0 var(--hout-licht);
    transition: transform .22s ease-out, visibility .22s;
  }
  html.js:not(.past-strip) .sticky { transform: translateY(105%); visibility: hidden; }
  .sticky .btn { min-height: 48px; padding: 0 10px; }
  .foot { padding-bottom: 96px; }

  /* the fold, in the order a phone reads it */
  .fold { display: flex; flex-direction: column; }
  .fold__pane, .fold__foot { display: contents; }
  .fold__pair { order: 1; padding: 20px 16px 12px; flex-direction: column; align-items: flex-start; gap: 10px; }
  .fold__h1 { max-width: none; font-size: calc(var(--pair) * 1.14); }
  .lockup--xl { --m: calc(var(--pair) * 2.2); }
  .fold__sub { order: 2; padding: 0 16px; font-size: 17px; }
  .fold__btns { order: 3; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 16px 16px 12px 21px; }
  .fold__btns .btn { padding: 0 8px; font-size: 15px; min-height: 52px; }
  .fold__rate { order: 4; padding: 0 16px 16px; }
  .fold__photo { order: 5; height: 236px; }
  .fold__open img { object-position: 40% 60%; }
  .invite { left: 21px; bottom: 16px; padding: 8px 16px 8px 8px; gap: 12px; }
  .face { width: 60px; height: 60px; }
  .invite__name { font-size: 27px; }
  .invite__line { font-size: 14px; }
  .fold__tag { top: 12px; left: 12px; }
  .index { order: 6; padding: 0 16px 6px; }
  .index a { flex-wrap: wrap; align-content: center; gap: 0 10px; min-height: 64px; padding-block: 8px 6px; position: relative; padding-right: 30px; }
  .index__name { width: 100%; line-height: 1.05; margin: 0; }
  .index__label { font-size: 14px; max-width: none; text-align: left; }
  .index__arrow { position: absolute; right: 2px; top: 50%; margin-top: -11px; width: 22px; height: 22px; }
  .index a:last-child { box-shadow: 0 2px 0 0 var(--hout); }

  /* the strip: each fact in its fewest words, no taller than 160 */
  .strip { padding: 24px 16px 0 25px; }
  .strip__block { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; min-height: 0; padding: 14px; max-height: 150px; }
  .strip__mark { display: none; }
  .strip__why:not(.strip__why--keep) { display: none; }
  .strip__say { font-size: 19px; line-height: 1.15; }
  .strip__say b { font-size: 1.35em; }
  .strip__rate { align-items: flex-start; text-align: left; }
  .strip__rate .strip__say { justify-content: flex-start; flex-direction: column; align-items: flex-start; font-size: 16px; }
  .strip__rate .stars { font-size: 15px; }
  .strip__why--keep { font-size: 13px; }

  /* even voorstellen */
  .intro { padding-top: 40px; }
  .intro__grid { display: flex; flex-direction: column; gap: 24px; }
  .intro__side { display: contents; }
  .intro__h { order: -1; font-size: 40px; }
  .portrait { aspect-ratio: 1 / 1.14; margin-left: 9px; box-shadow: -1px -1px 0 var(--face), -2px -1px 0 var(--face), -3px -2px 0 var(--face), -4px -3px 0 var(--face), -5px -3px 0 var(--face), -6px -4px 0 var(--face), -7px -5px 0 var(--face), -8px -5px 0 var(--face), -9px -6px 0 var(--face); }
  .portrait__l2 { font-size: 64px; }
  .fact { grid-template-columns: 104px minmax(0, 1fr); gap: 16px; padding-block: 14px; align-items: start; }
  .fact__pic { aspect-ratio: 1; margin: 3px 0 0 5px; box-shadow: -1px -1px 0 var(--face), -2px -1px 0 var(--face), -3px -2px 0 var(--face), -4px -3px 0 var(--face), -5px -3px 0 var(--face); }
  .tag--xs { font-size: 9.5px; padding: 1px 4px; gap: 2px; white-space: normal; }
  .tag--xs .i { width: 9px; height: 9px; }
  .fact h3 { font-size: 22px; margin-bottom: 3px; }
  .fact p { font-size: 16px; line-height: 1.35; }

  /* the card: stacked, each line just tall enough to tap */
  .svc-card-wrap { margin-top: 32px; margin-bottom: -40px; }
  .svc-card__label { padding: 12px 16px 8px; font-size: 14px; }
  .svc-card ul { display: block; border: 0; }
  .svc-card li, .svc-card li + li { border-left: 0; border-top: 1px solid var(--groen-lijn); }
  .svc-card a { height: 44px; padding: 0 16px; font-size: 18px; }
  .svc-card a .i { display: block; width: 18px; height: 18px; }

  /* services: heading, second heading, the picture, the thumbnails, the actions */
  .svc { padding-block: 44px; }
  .svc--uitbouw { padding: calc(40px + 44px) 0 32px; }
  .svc__grid, .svc--dakkapel .svc__grid, .svc--timmerman .svc__grid, .svc__stack { display: flex; flex-direction: column; align-items: stretch; gap: 0; }
  .ladder, .ladder--wide, .svc__pic { display: contents; }
  .ladder__1 { order: 1; }
  .ladder__2 { order: 2; margin-block: .4em 18px; }
  .ladder--wide .ladder__1, .ladder--wide .ladder__2 { grid-column: auto; }
  .svc__pic .shot { order: 3; margin: 10px 0 0 9px; aspect-ratio: 4 / 3.1 !important; box-shadow: -1px -1px 0 var(--face), -2px -1px 0 var(--face), -3px -2px 0 var(--face), -4px -3px 0 var(--face), -5px -3px 0 var(--face), -6px -4px 0 var(--face), -7px -5px 0 var(--face), -8px -5px 0 var(--face), -9px -6px 0 var(--face); }
  .svc__pic .thumbs { order: 4; margin-left: 9px; }
  .ladder .actions { order: 5; margin: 22px 0 0 5px; }
  .ladder__3, .ucard__list { display: none; }
  .thumbs, .ucard__thumbs { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 9px; }
  .thumbs__count { display: none; }
  .actions { flex-wrap: nowrap; gap: 8px 16px; }
  .actions .btn { padding: 0 15px; font-size: 16px; flex: none; }
  .more { font-size: 16px; white-space: nowrap; }

  .ucard { margin-left: 9px; box-shadow: -1px -1px 0 var(--face), -2px -1px 0 var(--face), -3px -2px 0 var(--face), -4px -3px 0 var(--face), -5px -3px 0 var(--face), -6px -4px 0 var(--face), -7px -5px 0 var(--face), -8px -5px 0 var(--face), -9px -6px 0 var(--face); }
  .ucard__cap { aspect-ratio: 4 / 3.1; }
  .ucard__thumbs { padding: 12px; }
  .ucard__body { padding: 20px 16px 22px; }
  .ucard__foot { margin-top: 20px; gap: 18px; flex-direction: column; align-items: stretch; }
  .ucard__foot .actions { padding-left: 5px; }
  .went { flex-direction: column; align-items: flex-start; gap: 10px; }
  .went__faces span { width: 42px; height: 42px; margin-left: -11px; font-size: 17px; }

  /* the pair: one light over the other */
  .shot--pair .shot__open { grid-template-columns: 1fr; }
  .svc__pic .shot.shot--pair { aspect-ratio: auto !important; }
  .half { aspect-ratio: 16 / 9.4; }

  .tag--l { left: 12px; bottom: 12px; padding: 8px 12px 8px; }
  .tag__where { font-size: 18px; }
  .tag__link { font-size: 14px; }
  .stamp { top: 12px; right: 12px; }
  .stamp img { width: 18px; height: 26px; }
  .stamp__name { font-size: 10.5px; }
  .stamp__name b { font-size: 13.500px; }

  .band { padding-block: 22px; }
  .band--lint { padding-block: 0 30px; }
  .band--lint .wrap { padding-left: 9px; }
  .band__h { font-size: 24px; }
  .band .pair { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; width: 100%; padding-left: 5px; }
  .band .pair .btn { padding: 0 8px; font-size: 15px; }

  .projects { padding-block: 44px; }
  .carousel__nav { display: none; }
  .carousel { padding-left: 25px; }
  .carousel__track { gap: 24px; }
  .pcard { width: 78vw; }
  .projects__foot { padding-left: 5px; }

  .klus { padding-block: 40px; }
  .klus__h { font-size: 40px; }

  .owner { padding-block: 44px; }
  .owner__grid { display: flex; flex-direction: column; align-items: stretch; gap: 22px; }
  .owner__words { display: contents; }
  .owner .h-big { order: -2; }
  .owner__pic { order: -1; margin: 6px 0 0 9px; box-shadow: -1px -1px 0 var(--face), -2px -1px 0 var(--face), -3px -2px 0 var(--face), -4px -3px 0 var(--face), -5px -3px 0 var(--face), -6px -4px 0 var(--face), -7px -5px 0 var(--face), -8px -5px 0 var(--face), -9px -6px 0 var(--face); }
  .owner__text { margin: 0; }
  .owner .actions { margin: 0 0 0 5px; }
  .h-big { font-size: 40px; }
  .h-mid { font-size: 34px; }

  .about { padding-block: 44px 32px; }
  .about__grid { gap: 22px; }
  .about__pic { margin: 6px 0 0 9px; aspect-ratio: 4 / 3.1; box-shadow: -1px -1px 0 var(--face), -2px -1px 0 var(--face), -3px -2px 0 var(--face), -4px -3px 0 var(--face), -5px -3px 0 var(--face), -6px -4px 0 var(--face), -7px -5px 0 var(--face), -8px -5px 0 var(--face), -9px -6px 0 var(--face); }
  .where { padding-bottom: 44px; }
  .where__grid { display: flex; flex-direction: column; gap: 22px; padding-top: 28px; }
  .where__map { min-height: 420px; margin: 6px 0 0 9px; box-shadow: -1px -1px 0 var(--face), -2px -1px 0 var(--face), -3px -2px 0 var(--face), -4px -3px 0 var(--face), -5px -3px 0 var(--face), -6px -4px 0 var(--face), -7px -5px 0 var(--face), -8px -5px 0 var(--face), -9px -6px 0 var(--face); }
  .where__pic { margin: 6px 0 0 9px; min-height: 0; aspect-ratio: 4 / 3; grid-column: auto; box-shadow: -1px -1px 0 var(--face), -2px -1px 0 var(--face), -3px -2px 0 var(--face), -4px -3px 0 var(--face), -5px -3px 0 var(--face), -6px -4px 0 var(--face), -7px -5px 0 var(--face), -8px -5px 0 var(--face), -9px -6px 0 var(--face); }
  .where .actions { margin-left: 5px; }

  .faq { padding-block: 44px; }
  .faq__grid { gap: 18px; }
  .faq details p { font-size: 17px; }

  .reviews { padding-block: 44px; }
  .reviews__head { flex-direction: column; align-items: flex-start; }
  .platform { text-align: left; justify-items: start; }
  .reviews__grid { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .contact { padding-block: 44px; }
  .contact .pair { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding-left: 5px; }
  .contact .pair .btn { padding: 0 8px; font-size: 15px; }
  .contact__dl > div { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .foot__index a { font-size: 26px; padding: 9px 0 7px; }
  .foot__grid { grid-template-columns: minmax(0, 1fr); padding-block: 26px; }
  .foot__pair { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding-left: 5px; }
  .foot__pair .btn { padding: 0 8px; font-size: 15px; }

  .vw__nav { display: none; }
  .vw__pic { inset: 0 8px; }
  .vw__bar { padding: 2px 4px 2px 16px; }
  .vw__label { padding-top: 6px; }
  .vw__strip { padding: 6px 12px; justify-content: flex-start; }
  .vw__strip button { width: 56px; height: 42px; }
  .vw__cta { flex-direction: column; padding: 8px 12px 12px 17px; gap: 6px; }
  .vw__cta .pair { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: 100%; }
  .vw__cta .btn { padding: 0 6px; font-size: 15px; }
}

@media (max-width: 370px) {
  .lockup--nav .lockup__b { font-size: 10.5px; }
  .lockup--nav .lockup__h { font-size: 15px; }
  .nav { gap: 6px; padding-inline: 8px; }
  .nav__links { font-size: 14px; }
  .nav__tel { font-size: 13px; }
  .nav__wa { width: 30px; height: 30px; }
  .invite { left: 16px; bottom: 12px; gap: 10px; padding-right: 12px; }
  .invite__line { font-size: 13px; }
  .actions { gap: 8px 12px; }
  .actions .btn { padding: 0 11px; font-size: 15px; }
  .more { font-size: 15px; }
  .fold__btns .btn, .band .pair .btn, .contact .pair .btn, .foot__pair .btn, .vw__cta .btn { font-size: 14px; }
  .fold__btns .btn .i, .band .pair .btn .i, .contact .pair .btn .i, .foot__pair .btn .i, .vw__cta .btn .i { display: none; }
}

@media (max-width: 340px) {
  .ucard__body { padding-inline: 12px; }
  .ucard__foot .actions { flex-wrap: wrap; padding-left: 4px; gap: 6px 8px; }
  .ucard__foot .actions .btn { padding: 0 8px; font-size: 14px; }
  .ucard__foot .more { font-size: 14px; }
}

@media (min-width: 1800px) {
  :root { --head: 78px; }
  .nav__links { font-size: 18px; }
  .nav__tel { font-size: 19px; }
  .lockup--nav { --m: 54px; }
  .btn { font-size: 19px; min-height: 62px; padding: 0 32px; }
  .fold__btns { min-width: 300px; }
  .fold__btns .btn { min-height: 62px; }
  .fold__rate { font-size: 16px; }
  .fold__rate .stars { width: 84px; height: 16px; }
  .fold__tag { font-size: 15px; }
  .invite { gap: 18px; padding: 14px 28px 14px 14px; }
  .face { width: 92px; height: 92px; }
  .invite__name { font-size: 46px; }
  .invite__line { font-size: 18px; }
  .index__arrow { width: 32px; height: 32px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; }
}


/* ============ KNOPPEN — picked 2 of ronde/knoppen.py (twee platte knoppen: allebei zonder dikte en zonder rand, even groot). Written in by ronde-varianten.py --vast; %V% -> :root:root. ============ */
:root:root .fold__btns .btn, :root:root .pair .btn, :root:root .sticky .btn { box-shadow: none; }
:root:root .fold__btns .btn:hover, :root:root .pair .btn:hover, :root:root .sticky .btn:hover,
:root:root .fold__btns .btn:active, :root:root .pair .btn:active, :root:root .sticky .btn:active { box-shadow: none; transform: none; }
:root:root .btn--wa { background: var(--groen-licht); color: var(--kalk); border: 0; }
:root:root .btn--wa .i { color: var(--wa); }
:root:root .btn--wa:hover { background: var(--groen-lijn); }


/* ============ VASTE BREEDTE — picked 1 of ronde/breed.py (na: de banner en de menubalk staan vast op 1360 breed, midden op het scherm (onder 1360 geen verschil)). Written in by ronde-varianten.py --vast; %V% -> :root:root. ============ */
@media (min-width: 1360px) {
  :root:root {
    --idx: clamp(44px, min(82.3px, 10vh), 132px);
    --pair: clamp(32px, min(52.4px, 6.3vh), 86px);
    --head: 68px;
  }
  :root:root .nav { max-width: 1360px; margin-inline: auto; gap: 32.6px; padding-inline: 32.6px 46.2px; }
  :root:root .nav__links { gap: 29.9px; font-size: 16px; }
  :root:root .nav__tel { font-size: 17px; }
  :root:root .lockup--nav { --m: 46px; }
  :root:root .fold {
    grid-template-columns: minmax(0, 1fr) 489.6px 870.4px minmax(0, 1fr);
    min-height: clamp(620px, calc(100vh - var(--head)), 900px);
  }
  :root:root .fold__photo { grid-column: 2; grid-row: 1; }
  :root:root .fold__pane { grid-column: 3; grid-row: 1; padding-inline: 46.2px; }
  :root:root .fold__pair, :root:root .fold__foot { column-gap: 40.8px; }
  :root:root .index__label { font-size: 14.1px; }
  :root:root .index__arrow { width: 26px; height: 26px; }
  :root:root .fold__sub { font-size: 17px; }
  :root:root .fold__rate { font-size: 14px; }
  :root:root .fold__rate .stars { width: 72px; height: 14px; }
  :root:root .fold__tag { font-size: 13px; }
  :root:root .fold__btns { min-width: 244px; }
  :root:root .fold__btns .btn { font-size: 17px; min-height: clamp(46px, 5.9vh, 54px); padding: 0 26px; }
  :root:root .invite { left: 32.6px; bottom: 35.4px; gap: 14px; padding: 12px 22px 12px 12px; }
  :root:root .face { width: 72px; height: 72px; }
  :root:root .invite__name { font-size: 36px; }
  :root:root .invite__line { font-size: 15px; }
}


/* ============ LIJNEN — picked 2 of ronde/lijnen.py (zacht lichtgroen: net lichter dan het vlak, het rustigst). Written in by ronde-varianten.py --vast; %V% -> :root:root. ============ */
:root:root .index a { background-image: linear-gradient(#3A5044 0 2px); }
:root:root .index a:last-child { box-shadow: 0 2px 0 0 #3A5044; }


/* ============ FEITENBLOK — picked 3 of ronde/feiten.py (groot: geen blok meer, maar twee grote cijfers op de lichte ondergrond). Written in by ronde-varianten.py --vast; %V% -> :root:root. ============ */
:root:root .strip__block { background: none; box-shadow: none; padding-inline: 0; }
:root:root .strip__say b { color: var(--hout-diep); letter-spacing: -.02em; }
:root:root .strip__rate .stars { color: var(--hout-diep); }
@media (min-width: 761px) {
  :root:root .strip__say { font-size: clamp(24px, 2.6vw, 36px); }
  :root:root .strip__say b { font-size: 2.5em; line-height: .86; }
  :root:root .strip__rate .stars { font-size: 1em; }
  :root:root .strip__why { font-size: 16px; }
  :root:root .strip__mark { width: 52px; height: 76px; }
}
@media (max-width: 760px) {
  :root:root .strip__say b { font-size: 2.1em; line-height: .9; }
  :root:root .strip__rate .stars { font-size: 17px; }
  :root:root .strip__rate .strip__say { font-size: 18px; }
}


/* ============ FOTO — picked 1 of ronde/foto.py (tekstvlak dicht: de foto loopt over de hele breedte, het groene tekstvlak ligt er massief op). Written in by ronde-varianten.py --vast; %V% -> :root:root. ============ */
@media (min-width: 1001px) {
  :root:root .fold__photo {
    grid-column: 1 / -1; grid-row: 1;
    --x: max(36%, calc(50% - 190.4px));
    --y: min(100%, calc(50% + 680px));
  }
  :root:root .fold__open { z-index: 0; }
  :root:root .fold__open img { object-position: 28% 70%; }
  :root:root .fold__tag { z-index: 2; left: calc(max(0px, 50% - 680px) + 18px); }
  :root:root .invite { z-index: 2; left: calc(max(0px, 50% - 680px) + clamp(20px, 2.4vw, 32.6px)); }
}
@media (min-width: 1001px) and (max-width: 1359px) {
  :root:root .fold__pane { grid-column: 2; grid-row: 1; }
}
@media (min-width: 1360px) {
  :root:root .fold__pane { grid-column: 3; grid-row: 1; }
}

@media (min-width: 1001px) {
  :root:root .fold__pane { background: var(--groen-diep); }
}

/* Sem, 2026-11-05: het tekstvlak krijgt dezelfde donkergroene achtergrond als de menubalk. Op alle breedtes; met de hand. */
:root:root .fold { background: var(--groen-diep); }


/* ============ OP DE FOTO — picked 3 of ronde/woorden.py (kop en zin los op de foto, zonder blok, en de hele foto donkerder; de beoordeling blijft bij de knoppen). Written in by ronde-varianten.py --vast; %V% -> :root:root. ============ */
@media (min-width: 1001px) {
  :root:root .fold__pane {
    --kol: 36vw; --marge: clamp(20px, 2.4vw, 32.6px); --richard: calc(clamp(20px, 2.6vw, 36px) + 96px);
    --buiten: calc(var(--kol) - var(--marge) * 2);
    --pad: calc(var(--buiten) * 0);
    --binnen: calc(var(--buiten) - var(--pad) * 2);
    --f1: calc(var(--binnen) / 6.5);
    --f2: max(15px, calc(var(--binnen) / 19.5));
    --kop: calc(var(--f1) * 2.12);
    --zin: calc(var(--f2) * 1.38 * 3);
    --gat: calc(var(--binnen) * .045);
    --t: calc((100% + 58px - var(--richard) - var(--h)) / 2);
    --r: calc(100% + var(--marge) + var(--pad));
  }
}
@media (min-width: 1360px) {
  :root:root .fold__pane { --kol: 489.6px; --marge: 32.6px; --richard: 131.4px; }
}
@media (min-width: 1001px) {
  :root:root .fold__pane { --h: calc(var(--kop) + var(--gat) + var(--zin)); }
  :root:root .fold__h1 { position: absolute; right: var(--r); top: calc(var(--t) + var(--pad)); width: var(--binnen); max-width: none; font-size: var(--f1); }

  :root:root .fold__sub { position: absolute; right: var(--r); top: calc(var(--t) + var(--pad) + var(--kop) + var(--gat)); width: var(--binnen); max-width: none; font-size: var(--f2); }

  :root:root .fold__open::after { content: ""; position: absolute; inset: 0; background: rgba(24, 36, 30, .62); }
  :root:root .fold__foot { row-gap: 0; align-items: center; }
  :root:root .fold__rate { grid-row: 1 / span 2; }
}


/* ============ PIJLEN — picked 1 of ronde/pijlen.py (ring: de pijl in een dunne houtkleurige ring; met de muis erop vult de ring zich). Written in by ronde-varianten.py --vast; %V% -> :root:root. ============ */
:root:root .index__arrow { box-sizing: border-box; width: 34px; height: 34px; padding: 7px; margin-left: -8px; border: 1.5px solid var(--hout-licht); border-radius: 50%; transition: background-color .14s, color .14s; }
:root:root .index a:hover .index__arrow { transform: none; background: var(--hout-licht); color: var(--groen-diep); }
@media (max-width: 760px) { :root:root .index__arrow { width: 30px; height: 30px; padding: 6px; margin: -15px 0 0; right: 0; } }


/* ============ BEOORDELING EN RICHARD — Sem, 2026-11-05: "Ik wil dat de rating onder de banner tekst komt: [schermfoto] en dat het ontmoet de eigenaar daarvoor in de plaats komt (dus naast de CTA buttons)". Met de hand; alleen waar de foto naast de tekst staat. De 9px is de houten rand links van het kaartje: die valt zo gelijk met het begin van de lijst. ============ */
@media (min-width: 1001px) {
  :root:root .fold__rate {
    position: absolute; right: var(--r); top: calc(var(--t) + var(--pad) + var(--kop) + var(--gat) * 2.2 + var(--zin));
    width: var(--binnen); color: var(--kalk);
  }
  :root:root .invite {
    --rand: clamp(24px, 3.4vw, 64px);
    left: calc(var(--x) + var(--rand) + 9px);
    bottom: calc(clamp(14px, 2.2vh, 24px) + (clamp(46px, 5.9vh, 54px) * 2 + 12px - 96px) / 2);
  }
}
@media (min-width: 1001px) and (max-width: 1099px) {
  :root:root .invite { gap: 10px; padding: 8px 14px 8px 8px; bottom: calc(clamp(14px, 2.2vh, 24px) + (clamp(46px, 5.9vh, 54px) * 2 + 12px - 72px) / 2); }
  :root:root .face { width: 56px; height: 56px; }
  :root:root .invite__name { font-size: 28px; }
  :root:root .invite__line { font-size: 14px; }
}
@media (min-width: 1360px) {
  :root:root .invite { --rand: 46.2px; }
}


/* ============ BEOORDELING — picked 3 of ronde/beoordeling.py (groot: tekst 23, sterren 27). Written in by ronde-varianten.py --vast; %V% -> :root:root. ============ */
@media (min-width: 1001px) {
  :root:root .fold__rate { display: block; font-size: 23px; line-height: 1.25; white-space: nowrap; }
  :root:root .fold__rate span { display: block; }
  :root:root .fold__rate .stars { display: block; width: 135px; height: 27px; margin-bottom: 8px; }
}


/* ============ KNOPPEN — picked 1 of ronde/naast.py (na: naast elkaar). Written in by ronde-varianten.py --vast; %V% -> :root:root. ============ */
@media (min-width: 1140px) {
  :root:root .fold__foot { min-height: calc(96px + clamp(12px, 1.9vh, 22px)); align-items: center; }
  :root:root .fold__btns { flex-direction: row; min-width: 0; }
  :root:root .invite { bottom: clamp(14px, 2.2vh, 24px); }
}
@media (min-width: 1140px) and (max-width: 1359px) {
  :root:root .fold__foot { min-height: calc(72px + clamp(12px, 1.9vh, 22px)); }
  :root:root .fold__btns { gap: 10px; }
  :root:root .fold__btns .btn { padding: 0 14px; font-size: 16px; }
  :root:root .invite { gap: 10px; padding: 8px 14px 8px 8px; }
  :root:root .face { width: 56px; height: 56px; }
  :root:root .invite__name { font-size: 28px; }
  :root:root .invite__line { font-size: 14px; }
}


/* ============ ONDERTEKST — Sem, 2026-11-05: "Ik wil dat deze teksten: [schermfoto] onder de hoofdtekst van het list item worden gezet." Met de hand. Op de telefoon stond de tekst daar al. De banner blijft even hoog: vanaf 1001 breed meet het grote woord de rij (20cqh is een rij van de vijf) en wordt het alleen kleiner als woord en ondertekst anders niet passen. ============ */
:root:root .index { --lab: clamp(14px, 1.04vw, 18px); }
@media (min-width: 1360px) {
  :root:root .index { --lab: 14.1px; }
}
@media (min-width: 761px) {
  :root:root .index a { flex-wrap: wrap; align-content: center; gap: 0; position: relative; padding-right: 48px; }
  :root:root .index__name { width: 100%; margin: 0; line-height: 1; padding-bottom: 0; }
  :root:root .index__label { width: 100%; max-width: none; margin-top: 4px; text-align: left; font-size: var(--lab); line-height: 1.2; transition: transform .18s ease-out; }
  :root:root .index a:hover .index__label { transform: translateX(14px); }
  :root:root .index__arrow { position: absolute; right: 0; top: 50%; margin: -17px 0 0; }
}
@media (min-width: 1001px) {
  :root:root .index { container-type: size; }
  :root:root .index a { --woord: min(var(--idx), calc(20cqh - 8px - var(--lab) * 1.2)); }
  :root:root .index__name { font-size: var(--woord); }
  :root:root .index__label { margin-top: clamp(2px, calc((20cqh - 6px - var(--lab) * 1.2 - var(--woord)) / 2), 8px); }
}


/* ============ RICHARD — Sem, 2026-11-05: "Ik wil standaard dat dit element de hover achtergrond kleur heeft" (schermfoto van Richards kaartje). Met de hand, op alle breedtes. Met de muis erop gaat het kaartje een stap lichter, zoals de WhatsApp-knop ernaast: daar heeft hij niets over gezegd, en zonder dat reageert het kaartje niet meer. ============ */
:root:root .invite { background: var(--groen-licht); }
:root:root .invite:hover { background: var(--groen-lijn); }


/* ============ ONDERTEKST — picked 2 of ronde/ondertekst.py (groter: 18). Written in by ronde-varianten.py --vast; %V% -> :root:root. ============ */
:root:root .index { --lab: 18px; }
@media (max-width: 760px) { :root:root .index__label { font-size: 16px; } }


/* ============ BEOORDELING — picked 1 of ronde/rating.py (cijfer voorop: een grote 5/5 links, sterren en de rest van de tekst ernaast). Written in by ronde-varianten.py --vast; %V% -> :root:root. ============ */
@media (min-width: 1001px) {
  :root:root .fold__rate { --cijfer: 72px; padding-left: calc(var(--cijfer) * 1.56 + 18px); font-size: clamp(16px, calc((var(--binnen) - var(--cijfer) * 1.56 - 18px) / 10.8), 19px); }
  :root:root .fold__rate .stars { margin-bottom: 7px; }
  :root:root .fold__rate data { position: absolute; left: 0; top: 50%; transform: translateY(-50%); font-size: var(--cijfer); font-weight: 500; line-height: 1; letter-spacing: -.03em; }
  :root:root .fold__rate span:first-of-type { display: block; }
}


/* LABELLINK — Sem, 2026-11-06: de onderstreping van "Bekijk onze projecten" in de labels krijgt de maten van die onder "Meer informatie"
   (2 pixels dik, 5 pixels onder de tekst); de kleur blijft. Op alle breedtes; met de hand. Vorige versie: style.before-labellink.css. */
:root:root .tag__link { text-decoration-thickness: 2px; text-underline-offset: 5px; text-decoration-skip-ink: none; }


/* ============ ONDERLIJN — picked 2 of ronde/onderlijn.py (kolombreed: dezelfde lijn, zo breed als de banner en de feiten). Written in by ronde-varianten.py --vast; %V% -> :root:root. ============ */
:root:root .strip { --onder: clamp(26px, 3vw, 40px); }
@media (max-width: 760px) { :root:root .strip { --onder: 24px; } }
:root:root .strip::after { content: ""; display: block; width: min(1360px, 100%); height: 1px; margin: var(--onder) auto 0; background: var(--kalk-lijn); }
@media (max-width: 760px) { :root:root .strip::after { width: calc(100% + 9px); margin-left: -9px; } }


/* ============ GROENE BALK — picked 1 of ronde/groenrand.py (strepen: drie strepen naast elkaar, van donker bij de lijst naar licht bij de foto). Written in by ronde-varianten.py --vast; %V% -> :root:root. ============ */
@media (min-width: 1001px) {
  :root:root .fold__pane { box-shadow: -4px 0 0 var(--groen-licht), -8px 0 0 var(--groen-lijn), -12px 0 0 #8CA193; }
}
@media (min-width: 761px) and (max-width: 1000px) {
  :root:root .fold__pane { box-shadow: 0 -3px 0 var(--groen-licht), 0 -6px 0 var(--groen-lijn), 0 -10px 0 #8CA193; }
}


/* ============ RODE SECTIE — picked 3 of ronde/klus.py (groen: het lichtste groen van de pagina, met lichte tekst en een lichte knop). Written in by ronde-varianten.py --vast; %V% -> :root:root. ============ */
:root:root .klus { background: var(--groen-lijn); }
:root:root .klus .btn { --face: var(--groen-diep); }
:root:root .strip__rate:hover .strip__why--keep { color: var(--hout-inkt); }


/* ============ OVERLOOP GROEN — picked 2 of ronde/overloop.py (minder ver: drie strepen in gelijke stappen, even breed als nu, en de lichtste is een middengroen in plaats van lichtgroen). Written in by ronde-varianten.py --vast; %V% -> :root:root. ============ */
@media (min-width: 1001px) {
  :root:root .fold__pane { box-shadow: -4px 0 0 #273B30, -8px 0 0 #3D5146, -12px 0 0 #54695D; }
}
@media (min-width: 761px) and (max-width: 1000px) {
  :root:root .fold__pane { box-shadow: 0 -3px 0 #273B30, 0 -6px 0 #3D5146, 0 -10px 0 #54695D; }
}


/* ============ NAAR VOREN — picked 2 of ronde/naarvoren.py (uitsteken: de foto stopt eerder, en het blok steekt onderaan uit over de lichte achtergrond). Written in by ronde-varianten.py --vast; %V% -> :root:root. ============ */
@media (min-width: 761px) {
  :root:root .fold__pane { box-shadow: none; }
}

@media (min-width: 1001px) {
  :root:root .fold { --u: clamp(22px, 4.4vh, 48px); background: var(--kalk); }
  :root:root .fold__photo { margin-bottom: var(--u); overflow: visible; }
  :root:root .fold__pane { --t: calc((100% - var(--u) + 58px - var(--richard) - var(--h)) / 2); }
  :root:root .invite { translate: 0 var(--u); }
}


/* ============ LAATSTE LIJN — Sem, 2026-11-06: "De onderste border bottom mag weg" (kruisje op de lijn onder Timmerman). Met de hand, op alle breedtes; er verschuift niets. ============ */
:root:root .index a:last-child { box-shadow: none; }


/* ============ WOORDEN KLEINER — picked 1 of ronde/woordmaat.py (een fractie: 6% kleiner, 77 pixels op een groot scherm). Written in by ronde-varianten.py --vast; %V% -> :root:root. ============ */
@media (max-width: 1000px) { :root:root .index__name { font-size: calc(var(--idx) * 0.94); } }
@media (min-width: 1001px) { :root:root .index a { --woord: calc(min(var(--idx), calc(20cqh - 8px - var(--lab) * 1.2)) * 0.94); } }


/* ============ LIJNEN LICHTER — picked 3 of ronde/lijntint.py (het lichtst van de drie). Written in by ronde-varianten.py --vast; %V% -> :root:root. ============ */
:root:root .index a { background-image: linear-gradient(#637B6E 0 2px); }


/* ============ FEITENBLOK — picked 1 of ronde/feitenvorm.py (in de foto: het blok onder de banner verdwijnt, de twee feiten staan naast elkaar onder de zin op de foto). Written in by ronde-varianten.py --vast; %V% -> :root:root. ============ */
:root:root .strip { height: 0; margin: 0; padding: 0; overflow: hidden; visibility: hidden; }
:root:root .strip::after { display: none; }

:root:root .fold__jaar { display: block; margin: 0; color: var(--kalk); }
:root:root .fold__jaar span, :root:root .fold__rate span { display: block; }
:root:root .fold__jaar b, :root:root .fold__rate data { display: block; position: static; transform: none; font-weight: 500; letter-spacing: -.03em; line-height: 1.06; }
:root:root .fold__rate { display: block; color: var(--kalk); white-space: normal; }
:root:root .fold__rate:hover .fold__rate-p { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
:root:root .fold__rate-p { font-weight: 600; }
:root:root .fold__jaar, :root:root .fold__rate { background-image: linear-gradient(var(--hout-licht) 0 1px, var(--hout) 1px 2px); background-repeat: no-repeat; }
@media (min-width: 1001px) {
  :root:root .fold__pane {
    --kloof: clamp(18px, 2.2vw, 32px);
    --cel: calc((var(--binnen) - var(--kloof)) / 2);
    --cf: calc(var(--cel) / 3.02);
    --kl: clamp(13.5px, calc(var(--cel) / 11.8), 16px);
    --feit: calc(16px + 21px + var(--cf) * 1.06 + 4px + var(--kl) * 2.6);
    --t: calc((100% - var(--u) - var(--h) - var(--gat) * 2.2 - var(--feit)) / 2);
  }
  :root:root .fold__rate, :root:root .fold__jaar {
    position: absolute; top: calc(var(--t) + var(--pad) + var(--kop) + var(--gat) * 2.2 + var(--zin));
    font-size: var(--kl); line-height: 1.3; background-size: 100% 2px;
  }
  :root:root .fold__rate { right: calc(var(--r) + var(--cel)); width: calc(var(--cel) + var(--kloof)); padding: 16px var(--kloof) 0 0; }
  :root:root .fold__jaar { right: var(--r); width: var(--cel); padding: 16px 0 0; }
  :root:root .fold__rate .stars { display: block; width: 105px; height: 21px; margin: 0; }
  :root:root .fold__jaar span:first-child { height: 21px; line-height: 21px; font-weight: 500; }
  :root:root .fold__jaar b, :root:root .fold__rate data { font-size: var(--cf); margin-bottom: 4px; }
}
@media (min-width: 761px) and (max-width: 1000px) {
  :root:root .fold__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 0; }
  :root:root .fold__sub { order: 1; flex: 1 1 240px; margin-right: 24px; }
  :root:root .fold__btns { order: 2; flex: none; min-width: 0; }
  :root:root .fold__rate, :root:root .fold__jaar { flex: 0 0 50%; align-self: stretch; padding-top: 14px; font-size: 15px; line-height: 1.3; background-size: 100% 2px; }
  :root:root .fold__rate { order: 3; }
  :root:root .fold__jaar { order: 4; }
  :root:root .fold__rate .stars { display: block; width: 100px; height: 20px; margin: 0; }
  :root:root .fold__jaar span:first-child { height: 20px; line-height: 20px; font-weight: 500; }
  :root:root .fold__jaar b, :root:root .fold__rate data { font-size: clamp(50px, 7vw, 64px); margin-bottom: 2px; }
}
@media (max-width: 760px) {
  :root:root .fold { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  :root:root .fold__photo, :root:root .fold__pair, :root:root .fold__sub, :root:root .fold__btns, :root:root .index { grid-column: 1 / -1; grid-row: auto; }
  :root:root .fold__rate { grid-column: 1; grid-row: auto; }
  :root:root .fold__jaar { grid-column: 2; grid-row: auto; }
  :root:root .fold__rate, :root:root .fold__jaar { order: 4; font-size: 14px; line-height: 1.3; background-size: calc(100% - 16px) 2px; }
  :root:root .fold__rate { padding: 12px 8px 18px 16px; background-position: 16px 0; }
  :root:root .fold__jaar { padding: 12px 16px 18px 8px; background-position: 0 0; }
  :root:root .fold__rate .stars { display: block; width: 90px; height: 18px; margin: 0; }
  :root:root .fold__jaar span:first-child { height: 18px; line-height: 18px; font-weight: 500; }
  :root:root .fold__jaar b, :root:root .fold__rate data { font-size: 40px; margin-bottom: 2px; }
}


/* ============ LIJST — picked 1 of ronde/lijstvorm.py (houten paneel: de lijst op hout met donkere letters, zoals de sectie Timmerman; het blok eromheen blijft donkergroen). Written in by ronde-varianten.py --vast; %V% -> :root:root. ============ */
:root:root .index { margin-left: 9px; background: var(--hout-licht); box-shadow: -1px -1px 0 var(--hout), -2px -1px 0 var(--hout), -3px -2px 0 var(--hout), -4px -3px 0 var(--hout), -5px -3px 0 var(--hout), -6px -4px 0 var(--hout), -7px -5px 0 var(--hout), -8px -5px 0 var(--hout), -9px -6px 0 var(--hout); --in: clamp(16px, 1.5vw, 22px); }
:root:root .index a { color: var(--groen-diep); background-image: linear-gradient(var(--hout) 0 1px, var(--hout-diep) 1px 2px); background-size: calc(100% - 2 * var(--in)) 2px; background-position: var(--in) 0; }
:root:root .index a:first-child { background-image: none; }
:root:root .index a:hover { background-color: var(--kalk); }
:root:root .index a:focus-visible { outline-color: var(--groen-diep); outline-offset: -3px; }
:root:root .index__label { color: var(--groen-diep); font-weight: 500; }
:root:root .index a:hover .index__name { color: var(--groen-diep); }
:root:root .index__arrow { border: 0; background: var(--groen-diep); color: var(--kalk-wit); }
:root:root .index a:hover .index__arrow { background: var(--hout-diep); color: var(--kalk-wit); }
@media (min-width: 761px) {
  :root:root .index { padding-bottom: 8px; }
  :root:root .index a { padding: 2px 66px 0 var(--in); }
  :root:root .index__arrow { right: var(--in); }
}
@media (max-width: 760px) {
  :root:root .index { --in: 12px; margin: 6px 16px 14px 25px; padding: 0; }
  :root:root .index a { padding: 8px 40px 8px var(--in); }
  :root:root .index__label { font-size: 15px; }
  :root:root .index__arrow { right: 8px; }
}


/* ============ LIJSTKLEUR — picked 1 of ronde/lijstkleur.py (donkergroen: de kleur van Richards kaartje, witte letters en houten pijlen). Written in by ronde-varianten.py --vast; %V% -> :root:root. ============ */
:root:root .index { background: var(--groen-licht); box-shadow: -1px -1px 0 var(--hout-licht), -2px -1px 0 var(--hout-licht), -3px -2px 0 var(--hout-licht), -4px -3px 0 var(--hout-licht), -5px -3px 0 var(--hout-licht), -6px -4px 0 var(--hout-licht), -7px -5px 0 var(--hout-licht), -8px -5px 0 var(--hout-licht), -9px -6px 0 var(--hout-licht); }
:root:root .index a { color: var(--kalk-wit); background-image: linear-gradient(#637B6E 0 2px); }
:root:root .index a:first-child { background-image: none; }
:root:root .index a:hover { background-color: var(--groen-lijn); }
:root:root .index a:focus-visible { outline-color: var(--kalk-wit); }
:root:root .index__label { color: var(--kalk); }
:root:root .index a:hover .index__name { color: var(--kalk-wit); }
:root:root .index__arrow { background: var(--hout-licht); color: var(--groen-diep); }
:root:root .index a:hover .index__arrow { background: var(--kalk-wit); color: var(--groen-diep); }


/* ============ LIJST UITGELIJND — Sem, 2026-11-06, op de gekozen donkergroene lijst: "de box-shadow moet weg, en het blok moet aligned worden met de CTA buttons eronder". Met de hand, op alle breedtes. Geen houten zijkant meer. Vanaf 761 staat het blok op de hele kolom: links gelijk met het logo en de buitenkant van Richards kaartje, rechts gelijk met de WhatsApp-knop. Op de telefoon staat het precies zo breed als de twee knoppen. Tussen 761 en 1000 bleven de knoppen rechts soms tot 13 px korter: nu altijd tegen de rand. ============ */
:root:root .index { margin-left: 0; box-shadow: none; }
@media (max-width: 760px) { :root:root .index { margin-left: 21px; } }
@media (min-width: 761px) and (max-width: 1000px) { :root:root .fold__btns { margin-left: auto; } }


/* ============ TELEFOON — picked 3 of ronde/telefoon.py (profiel: heldere foto bovenaan, Richard groot op de naad, daaronder kop, feiten en knoppen). Written in by ronde-varianten.py --vast; %V% -> :root:root. ============ */
@media (max-width: 760px) {
  :root:root .fold { position: relative; }
  :root:root .fold__photo { order: 0; height: clamp(170px, 31svh, 340px); overflow: visible; }
  :root:root .fold__open img { object-position: 50% 68%; }
  :root:root .invite { left: 16px; right: 16px; bottom: -66px; z-index: 2; align-items: flex-end; gap: 14px; padding: 0; background: none; box-shadow: none; }
  :root:root .invite:hover { background: none; }
  :root:root .face { width: clamp(92px, 29.7vw, 132px); height: clamp(92px, 29.7vw, 132px); box-shadow: 0 0 0 3px var(--hout-licht), 0 0 0 7px var(--groen-diep); }
  :root:root .invite__words { padding-bottom: 4px; }
  :root:root .invite__name { font-size: 36px; }
  :root:root .invite__line { font-size: min(14.5px, 3.72vw); }
  :root:root .fold__pair { padding: 80px 16px 8px; }
  :root:root .lockup--xl { position: absolute; top: 0; left: 0; z-index: 2; --m: 50px; padding: 11px 18px 11px 16px; background: var(--groen-diep); }
  :root:root .fold__h1 { font-size: clamp(36px, 10.6vw, 58px); }
  :root:root .fold__sub { padding-bottom: 16px; }
  :root:root .fold__rate { padding-bottom: 14px; }
  :root:root .fold__jaar { padding-bottom: 14px; }
  :root:root .fold__btns { order: 5; padding: 0 16px 16px; }
  :root:root .index { margin: 0 16px 16px; }
  :root:root .strip { position: relative; top: 50vh; top: 50svh; }
}
@media (max-width: 760px) and (max-height: 660px) {
  :root:root .fold__photo { height: clamp(150px, 29svh, 340px); }
}

/* ─── TELEFOON, DE DIENSTEN (Sem, 2026-11-06), alleen tot en met 760 breed: de foto's van de vijf diensten zonder
   label, geen knoppen onder de dienst, en het voor en na als een foto met twee knoppen naast elkaar. Zonder script
   blijven de twee foto's onder elkaar staan. ─── */
@media (max-width: 760px) {
  .svc .tag--l { display: none; }
  .svc .actions { display: none; }

  html.js .shot--pair { background: var(--groen); }
  html.js .shot--pair .shot__open { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; }
  html.js .shot--pair .half { grid-area: 1 / 1; aspect-ratio: 4 / 3.1; }
  html.js .shot--pair .half__tag { display: none; }
  html.js .shot--pair[data-toon="na"] .half:first-child,
  html.js .shot--pair[data-toon="voor"] .half:last-child { visibility: hidden; }
  html.js .vn { position: absolute; left: 12px; top: 12px; display: flex; gap: 6px; }
  .vn__b { min-width: 64px; height: 40px; padding: 0 12px; background: var(--groen-diep); color: var(--kalk); font: 600 15px/1 var(--bar); letter-spacing: .08em; text-transform: uppercase; cursor: pointer; }
  .vn__b[aria-pressed="true"] { background: var(--kalk); color: var(--inkt); }
}


/* ── sample view: the form sends nothing ──────────────────────────────
   This demo is disconnected from the server: no /contact, no /wa, no /bel. The
   notice below appears as soon as someone presses send, so the button does not
   feel dead. It goes the day this page is the real site. */
.form-demo{
  margin:14px 0 0;padding:12px 14px;border-left:3px solid currentColor;
  background:rgba(127,127,127,.14);color:inherit;
  font-size:15px;line-height:1.5;
}
.form-demo[hidden]{display:none !important}
.form-demo a{color:inherit;text-decoration:underline}