/* Schildersbedrijf Hartem — every colour below comes from palette.json */
:root {
  --roest: #954832;
  --roest-diep: #763624;
  --roest-licht: #D99A7C;
  --roest-bleek: #F0DDD2;
  --proefvlak: #C9BEAB;
  --proefvlak-licht: #E3DACB;
  --proefvlak-diep: #9C907B;
  --werkbank: #191512;
  --werkbank-2: #26201B;
  --werkbank-3: #3A322B;
  --grondverf: #F5F1EA;
  --grondverf-2: #ECE5DA;
  --grondverf-wit: #FBF8F3;
  --potlood: #57534C;
  --potlood-licht: #8F8A80;
  --wa: #25D366;

  --werkbank-rgb: 25, 21, 18;

  --serif: "Newsreader", Georgia, "Times New Roman", serif;
  --sans: "Alegreya Sans", "Segoe UI", system-ui, sans-serif;

  --hero: clamp(2.6rem, 1.1rem + 3.9vw, 4.1rem);
  --gutter: clamp(20px, 5vw, 72px);
  --navh: 76px;
  --lift: 88px;

  --star: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 24'%3E%3Cpath d='M12 1.6l3.1 6.5 7.1.9-5.2 4.9 1.3 7.1L12 17.5 5.7 21l1.3-7.1L1.8 9l7.1-.9z'/%3E%3C/svg%3E");
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--navh) + 12px); -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--sans);
  font-size: 1.125rem;
  line-height: 1.55;
  color: var(--werkbank);
  background: var(--grondverf);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
p { margin: 0 0 1em; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.wrap { width: min(100% - 2 * var(--gutter), 1296px); margin-inline: auto; }

.skip {
  position: absolute; left: 12px; top: -60px; z-index: 100;
  background: var(--grondverf); color: var(--werkbank); padding: 10px 16px; font-weight: 700;
}
.skip:focus { top: 12px; }

:focus-visible { outline: 3px solid var(--roest-licht); outline-offset: 3px; }

/* ---------- pencil crosses: every proefvlak and panel is marked out ---------- */
.marks { position: relative; --mc: var(--potlood); --mo: 10px; --ml: 21px; padding: var(--mo); }
.marks::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 3;
  background:
    linear-gradient(var(--mc), var(--mc)) left 0 top var(--mo) / var(--ml) 1px,
    linear-gradient(var(--mc), var(--mc)) left var(--mo) top 0 / 1px var(--ml),
    linear-gradient(var(--mc), var(--mc)) right 0 top var(--mo) / var(--ml) 1px,
    linear-gradient(var(--mc), var(--mc)) right var(--mo) top 0 / 1px var(--ml),
    linear-gradient(var(--mc), var(--mc)) left 0 bottom var(--mo) / var(--ml) 1px,
    linear-gradient(var(--mc), var(--mc)) left var(--mo) bottom 0 / 1px var(--ml),
    linear-gradient(var(--mc), var(--mc)) right 0 bottom var(--mo) / var(--ml) 1px,
    linear-gradient(var(--mc), var(--mc)) right var(--mo) bottom 0 / 1px var(--ml);
  background-repeat: no-repeat;
}

/* ---------- type bits ---------- */
.kicker {
  margin: 0 0 14px;
  font: 800 .78rem/1.2 var(--sans);
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--roest);
}
.kicker--light { color: var(--roest-licht); }
.section-h {
  font: 400 clamp(2.1rem, 1.4rem + 2.3vw, 3.4rem)/1.05 var(--serif);
  letter-spacing: -.015em; margin: 0 0 22px; text-wrap: balance;
}
.section-h--light { color: var(--grondverf); }
.lead-line {
  margin: 0;
  font: 300 clamp(1.65rem, 1.1rem + 1.8vw, 2.7rem)/1.16 var(--serif);
  letter-spacing: -.01em; text-wrap: balance;
}
.lead-line--light { color: var(--proefvlak-licht); }
.label {
  display: block; margin-top: 10px;
  font: 500 .8rem/1.3 var(--sans); letter-spacing: .04em;
  color: var(--potlood);
}
.label--light { color: var(--proefvlak-diep); }

/* ---------- stars ---------- */
.stars {
  --r: 5; --s: 1rem; --on: var(--roest); --off: var(--proefvlak);
  display: inline-block; flex: none;
  width: calc(var(--s) * 5 * 26 / 24); height: var(--s);
  background: linear-gradient(90deg, var(--on) calc(var(--r) / 5 * 100%), var(--off) 0);
  -webkit-mask: var(--star) left center / calc(var(--s) * 26 / 24) var(--s) repeat-x;
  mask: var(--star) left center / calc(var(--s) * 26 / 24) var(--s) repeat-x;
}
.stars--sm { --s: .9rem; }
.stars--card { --s: 1.25rem; }
.g { width: 18px; height: 18px; flex: none; }

.avatar {
  display: inline-grid; place-items: center; flex: none;
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--roest-bleek); color: var(--roest-diep);
  font: 800 1rem/1 var(--sans);
}

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 54px; padding: 0 24px;
  font: 700 1.06rem/1 var(--sans); letter-spacing: .01em;
  text-decoration: none; border-radius: 3px; border: 2px solid transparent; cursor: pointer;
  transition: background-color .15s, color .15s, border-color .15s;
}
.btn svg { width: 20px; height: 20px; flex: none; }
.btn--call, .btn--primary { background: var(--roest); color: var(--grondverf-wit); border-color: var(--roest); }
.btn--call:hover, .btn--primary:hover { background: var(--roest-diep); border-color: var(--roest-diep); }
.btn--wa { background: transparent; color: var(--wa); border-color: var(--wa); }
.btn--wa:hover { background: rgba(37, 211, 102, .1); }
.btn--ground { background: var(--grondverf); color: var(--werkbank); }
.btn--ground:hover { background: var(--grondverf-wit); }
.btn--wide { width: 100%; }
.pair { display: flex; flex-wrap: wrap; gap: 12px; }

.more {
  font-weight: 700; color: var(--werkbank);
  text-decoration: underline; text-decoration-color: var(--roest);
  text-decoration-thickness: 2px; text-underline-offset: 6px;
}
.more:hover { color: var(--roest-diep); }
.more--light { color: var(--grondverf); text-decoration-color: var(--roest-licht); }
.more--light:hover { color: var(--roest-licht); }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; margin-top: 30px; }
.actions--center { justify-content: center; margin-top: 48px; }

/* ================= NAV ================= */
.nav {
  position: fixed; inset: 0 0 auto; z-index: 50;
  color: var(--grondverf);
  transition: background-color .25s, box-shadow .25s;
}
.nav.is-solid, .nav.menu-open { background: var(--werkbank); box-shadow: 0 1px 0 var(--werkbank-3); }
.nav__in {
  height: var(--navh); display: flex; align-items: center; gap: 28px;
  width: min(100% - 2 * var(--gutter), 1296px); margin-inline: auto;
}
.nav__brand { display: flex; align-items: center; gap: 10px; text-decoration: none; font-size: 1.08rem; white-space: nowrap; }
.nav__name b { font-weight: 900; }
.nav__mark { height: 38px; width: auto; display: none; }
.nav.show-mark .nav__mark { display: block; }
.nav__menu { margin-left: auto; }
.nav__list { display: flex; align-items: center; gap: 2px; list-style: none; margin: 0; padding: 0; }
.nav__link {
  display: inline-flex; align-items: center; gap: 6px; padding: 10px 13px;
  font: 500 1.02rem/1 var(--sans); color: inherit; text-decoration: none;
  background: none; border: 0; cursor: pointer;
}
.nav__link:hover { color: var(--roest-licht); }
.chev { width: 12px; height: 12px; transition: transform .2s; }
.drop-wrap { position: relative; }
.drop {
  display: none; position: absolute; top: 100%; left: 0; min-width: 250px;
  list-style: none; margin: 0; padding: 8px 0;
  background: var(--grondverf-wit); color: var(--werkbank);
  border-top: 3px solid var(--roest);
  box-shadow: 0 22px 44px rgba(var(--werkbank-rgb), .3);
}
.drop a { display: block; padding: 11px 22px; text-decoration: none; font-weight: 500; }
.drop a:hover { background: var(--grondverf-2); color: var(--roest-diep); }
@media (hover: hover) {
  .drop-wrap:hover .drop { display: block; }
  .drop-wrap:hover .chev { transform: rotate(180deg); }
}
.drop-wrap.is-open .drop { display: block; }
.drop-wrap.is-open .chev { transform: rotate(180deg); }

.nav__call { display: flex; align-items: center; gap: 10px; }
.nav__tel {
  display: inline-flex; align-items: center; gap: 8px; text-decoration: none;
  font-weight: 700; font-size: 1.06rem; font-variant-numeric: tabular-nums;
}
.nav__tel svg { width: 18px; height: 18px; color: var(--roest-licht); }
.nav__tel:hover { color: var(--roest-licht); }
.nav__wa {
  display: inline-grid; place-items: center; width: 40px; height: 40px;
  border: 1.5px solid var(--wa); color: var(--wa); border-radius: 50%;
}
.nav__wa svg { width: 20px; height: 20px; }
.nav__wa:hover { background: rgba(37, 211, 102, .1); }
.nav__toggle { display: none; }

/* ================= FOLD ================= */
.fold {
  position: relative; overflow: hidden;
  background: var(--werkbank); color: var(--grondverf);
  padding-top: var(--navh);
}
.fold__pic { position: absolute; top: 0; right: 0; bottom: 0; width: 61%; }
.fold__pic img {
  width: 100%; height: 100%; object-fit: cover; object-position: 20% 45%;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 36%);
  mask-image: linear-gradient(90deg, transparent 0, #000 36%);
}
.fold__pic::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(0deg, rgba(var(--werkbank-rgb), .94) 0, rgba(var(--werkbank-rgb), .62) 24%, rgba(var(--werkbank-rgb), 0) 52%),
    linear-gradient(180deg, rgba(var(--werkbank-rgb), .55) 0, rgba(var(--werkbank-rgb), 0) 18%),
    rgba(var(--werkbank-rgb), .16);
}
.fold__in {
  position: relative; z-index: 1;
  width: min(100% - 2 * var(--gutter), 1296px); margin-inline: auto;
  min-height: min(calc(100svh - var(--navh)), 860px);
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 420px); grid-template-rows: 1fr auto;
  column-gap: 48px;
  padding-top: clamp(20px, 4.5vh, 52px);
  padding-bottom: calc(var(--lift) + 30px);
}
.fold__copy { grid-column: 1; grid-row: 1; max-width: 780px; }

.lockup {
  display: flex; align-items: flex-start; gap: .2em;
  margin: 0 0 clamp(18px, 3vh, 30px);
  font-size: var(--hero); line-height: 1;
}
.lockup__words { display: flex; flex-direction: column; }
.lockup__small { font: 400 .41em/1.1 var(--sans); letter-spacing: .012em; color: var(--grondverf); margin-bottom: .04em; }
.lockup__big { font: 900 1em/.9 var(--sans); letter-spacing: -.01em; color: var(--grondverf); }
.lockup__mark { height: 1.62em; width: auto; margin-top: -.06em; }

.fold__h {
  margin: 0 0 clamp(14px, 2.4vh, 24px); max-width: 11em;
  font: 300 var(--hero)/1.02 var(--serif);
  letter-spacing: -.018em; text-wrap: balance;
}
.fold__h em { font-style: italic; color: var(--roest-licht); }
.fold__sub {
  max-width: 31em; margin: 0 0 clamp(22px, 3.4vh, 32px);
  font-size: clamp(1.08rem, .98rem + .35vw, 1.25rem); line-height: 1.5;
  color: var(--proefvlak-licht);
}
.fold__act { display: flex; flex-wrap: wrap; align-items: center; gap: 22px 36px; }

.owner-note { display: flex; align-items: center; gap: 14px; max-width: 330px; }
.owner-note__pic {
  position: relative; flex: none; width: 64px; height: 64px; border-radius: 50%; overflow: hidden;
  box-shadow: 0 0 0 2px var(--werkbank), 0 0 0 3.5px var(--roest-licht);
}
.owner-note__pic img { position: absolute; max-width: none; width: 350%; height: auto; left: -73%; top: -40%; }
.owner-note__label {
  display: block; margin-bottom: 5px;
  font: 800 .7rem/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--roest-licht);
}
.owner-note__line { display: block; font: italic 400 1.08rem/1.35 var(--serif); color: var(--grondverf); }

.fold__ledge { display: contents; }
.ratings {
  grid-column: 1; grid-row: 2; justify-self: start;
  display: flex; list-style: none; margin: clamp(24px, 4vh, 44px) 0 0; padding: 18px 0 0;
  border-top: 1px solid var(--werkbank-3);
}
.rating { display: grid; gap: 5px; align-content: start; padding: 0 28px; border-left: 1px solid var(--werkbank-3); }
.rating:first-child { padding-left: 0; border-left: 0; }
.rating .stars { --on: var(--roest-licht); --off: var(--werkbank-3); }
.rating__src { display: flex; align-items: center; gap: 7px; font: 700 .95rem/1.2 var(--sans); color: var(--grondverf); }
.rating__row { display: flex; align-items: center; gap: 10px; }
.rating__score { font: 400 2rem/1 var(--serif); color: var(--grondverf); font-variant-numeric: lining-nums; }
.rating--google .rating__score { font-size: 2.3rem; }
.rating--google .g { width: 20px; height: 20px; }
.rating__count { font-size: .92rem; color: var(--proefvlak-diep); }

.fold-review { grid-column: 2; grid-row: 1 / span 2; align-self: end; margin: 0; text-shadow: 0 1px 12px rgba(var(--werkbank-rgb), .7); }
.fold-review__src {
  display: flex; align-items: center; gap: 9px; margin: 0 0 12px;
  font: 800 .74rem/1 var(--sans); letter-spacing: .15em; text-transform: uppercase; color: var(--grondverf);
}
.fold-review__src .g { width: 20px; height: 20px; }
.fold-review .stars { --on: var(--roest-licht); --off: var(--werkbank-3); }
.fold-review__q { margin: 0; }
.fold-review__q p { margin: 0; font: italic 400 1.24rem/1.42 var(--serif); color: var(--grondverf); text-wrap: pretty; }
.fold-review__q p::before { content: "“"; }
.fold-review__q p::after { content: "”"; }
.fold-review__who { display: flex; align-items: center; gap: 10px; margin-top: 14px; font-weight: 500; color: var(--proefvlak-licht); }

/* ================= TRUST STRIP (on the seam) ================= */
.trust {
  position: relative; z-index: 5;
  margin-top: calc(-1 * var(--lift));
  background: linear-gradient(180deg, transparent var(--lift), var(--grondverf) var(--lift));
}
.trust__in {
  width: min(100% - 2 * var(--gutter), 1296px); margin-inline: auto;
  display: grid; grid-template-columns: minmax(0, 330px) minmax(0, 560px); gap: 16px;
}
.patch { --mc: var(--potlood-licht); }
.patch__body { position: relative; isolation: isolate; height: 100%; padding: 24px 30px 26px; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; }
.patch__body::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--paint); filter: url(#brush); }
.patch--roest { --paint: var(--roest); color: var(--grondverf-wit); }
.patch--greige { --paint: var(--proefvlak); color: var(--werkbank); }
.patch__kick { margin: 0; font: 800 .76rem/1.2 var(--sans); letter-spacing: .17em; text-transform: uppercase; }
.patch--greige .patch__kick { color: var(--roest-diep); }
.patch__fig {
  margin: .12em 0 0;
  font: 300 clamp(3.6rem, 2.2rem + 4vw, 6rem)/.9 var(--serif);
  letter-spacing: -.025em; font-variant-numeric: lining-nums;
}
.patch__word { margin: .14em 0 .18em; font: italic 300 clamp(2.5rem, 1.7rem + 2.4vw, 3.8rem)/1 var(--serif); letter-spacing: -.015em; }
.patch__word span { font: 700 .34em/1 var(--sans); font-style: normal; letter-spacing: .02em; margin-left: .35em; vertical-align: .45em; }
.patch__line { margin: 0; font-size: 1.02rem; }
.patch__act {
  display: inline-block; margin-top: 8px;
  font-weight: 800; color: var(--werkbank);
  text-decoration: underline; text-decoration-color: var(--roest); text-decoration-thickness: 2px; text-underline-offset: 5px;
}
.patch__act:hover { color: var(--roest-diep); }

/* ================= SERVICES ================= */
.svc__h {
  font: 400 clamp(2.3rem, 1.5rem + 2.6vw, 3.8rem)/1.02 var(--serif);
  letter-spacing: -.018em; margin: 0 0 20px;
}
.svc__h a, .svc-card__h a, .door__h a { text-decoration: none; }
.svc__h a:hover, .svc-card__h a:hover, .door__h a:hover {
  text-decoration: underline; text-decoration-color: var(--roest); text-decoration-thickness: 2px; text-underline-offset: 8px;
}

/* the brushed dash that marks a scope item */
.scope, .steps { list-style: none; margin: 0; padding: 0; }
.scope li, .steps li { position: relative; }
.scope li::before, .steps li::before {
  content: ""; position: absolute; left: 0; top: 50%;
  width: 26px; height: 9px; transform: translateY(-50%);
  background: var(--roest); filter: url(#dab);
}

/* --- buitenschilderwerk --- */
.svc--buiten { background: var(--grondverf); padding: clamp(56px, 7vw, 100px) 0 clamp(72px, 9vw, 128px); }
.svc-buiten__lead { max-width: 900px; margin-bottom: clamp(26px, 3vw, 40px); }
.svc-buiten__photo { position: relative; margin: 0; }
.svc-buiten__photo img { width: 100%; height: clamp(300px, 40vw, 560px); object-fit: cover; object-position: 60% 38%; }
.svc-buiten__photo .label {
  position: absolute; top: 14px; left: 14px; margin: 0; padding: 5px 10px;
  background: rgba(var(--werkbank-rgb), .6); color: var(--grondverf);
}
.svc-card {
  position: relative; z-index: 2;
  width: calc(100% - 2 * clamp(0px, 4.5vw, 72px));
  margin: calc(-1 * clamp(70px, 10vw, 170px)) auto 0;
}
.svc-card__in {
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 0 clamp(32px, 4.5vw, 64px);
  padding: clamp(26px, 4vw, 56px);
  background: var(--grondverf-wit);
  border-top: 4px solid var(--roest);
  box-shadow: 0 34px 60px -34px rgba(var(--werkbank-rgb), .45);
}
.svc-card__h { font: 400 clamp(2.2rem, 1.4rem + 2.4vw, 3.6rem)/1.02 var(--serif); letter-spacing: -.018em; margin: 0 0 18px; }
.svc-card__copy > p { max-width: 34em; }
.prices { margin-top: 26px; }
.prices__h, .scope__h {
  margin: 0 0 8px; font: 800 .76rem/1.2 var(--sans);
  letter-spacing: .18em; text-transform: uppercase; color: var(--potlood);
}
.offerte { margin: 0; display: grid; }
.offerte__row { display: flex; align-items: baseline; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--proefvlak); }
.offerte__row dt { display: flex; flex: 1; align-items: baseline; gap: 12px; margin: 0; }
.offerte__row dt::after { content: ""; flex: 1; min-width: 16px; border-bottom: 2px dotted var(--proefvlak-diep); transform: translateY(-5px); }
.offerte__row dd {
  margin: 0; white-space: nowrap;
  font: 500 1.22rem/1.2 var(--serif); font-variant-numeric: lining-nums tabular-nums; color: var(--roest-diep);
}
.offerte__note { margin: 12px 0 0; font-size: .96rem; color: var(--potlood); }
.svc-card__list { padding-left: clamp(0px, 4vw, 56px); border-left: 1px solid var(--proefvlak); align-self: start; }
.svc-card__list .scope li {
  padding: 15px 0 15px 44px; border-bottom: 1px solid var(--proefvlak);
  font: 400 1.32rem/1.3 var(--serif);
}
.svc-card__list .scope li:last-child { border-bottom: 0; }
.svc-card__foot {
  grid-column: 1 / -1;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 22px 32px;
  margin-top: 36px; padding-top: 26px; border-top: 1px solid var(--proefvlak);
}
.svc-card__foot .actions { margin-top: 0; }
.weld { display: flex; align-items: center; gap: 16px; }
.weld__faces { display: flex; }
.weld__faces .avatar { width: 42px; height: 42px; margin-left: -11px; box-shadow: 0 0 0 3px var(--grondverf-wit); }
.weld__faces .avatar:first-child { margin-left: 0; }
.weld__faces .avatar:nth-child(2) { background: var(--proefvlak-licht); color: var(--potlood); }
.weld__faces .avatar:nth-child(3) { background: var(--roest); color: var(--grondverf-wit); }
.weld__faces .avatar:nth-child(4) { background: var(--proefvlak); color: var(--werkbank); }
.weld__say { display: block; font: italic 400 1.16rem/1.2 var(--serif); margin-bottom: 4px; }
.weld__score { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: .95rem; color: var(--potlood); }
.weld__score b { font: 600 1.15rem/1 var(--serif); color: var(--werkbank); }

/* --- bands --- */
.band { padding: clamp(40px, 5vw, 66px) 0; }
.band__in { display: flex; flex-wrap: wrap; align-items: baseline; gap: 12px 40px; }
.band__line { margin: 0; font: 300 clamp(1.8rem, 1.2rem + 2vw, 2.9rem)/1.1 var(--serif); letter-spacing: -.01em; }
.band__line em { color: var(--roest-licht); }
.band__line--sm { font-size: clamp(1.35rem, 1.05rem + 1vw, 1.95rem); max-width: 28em; flex: 1 1 420px; }
.band__sub { margin: 0; flex: 1 1 320px; max-width: 32em; }
.band__act { font-weight: 800; text-decoration: none; border-bottom: 2px solid currentColor; padding-bottom: 2px; white-space: nowrap; }
.band--offerte { background: var(--werkbank-2); color: var(--grondverf); }
.band--offerte .band__sub { color: var(--proefvlak-licht); }
.band--offerte .band__act { color: var(--roest-licht); }
.band--zakelijk { background: var(--roest-bleek); color: var(--werkbank); }
.band__act--dark { color: var(--roest-diep); }

/* staat uw klus er niet bij: the owner's picture rises out of the band, over the section above.
   Beside the text it hangs from the band's top edge (--nb-rise above it) and takes no height of its own,
   so it sits near the band's middle instead of on the row's top. */
.nietbij { position: relative; background: var(--roest); color: var(--grondverf-wit); --nb-d: clamp(150px, 16vw, 220px); --nb-rise: clamp(28px, 2.5vw, 36px); }
.nietbij-in { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px 40px; align-items: center; }
.nb-photo {
  position: relative; z-index: 2; width: var(--nb-d); aspect-ratio: 1; align-self: start;
  margin: calc(-1 * (clamp(40px, 5vw, 66px) + var(--nb-rise))) 0 calc(-1 * var(--nb-d));
  border-radius: 50%; overflow: hidden; border: 6px solid var(--roest);
}
.nb-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; }
.nb-h { margin: 0 0 8px; text-wrap: balance; }
.nb-txt p { margin: 0; }

/* zakelijk: a street of painted houses, fanned out in four strips */
.biz { overflow: hidden; }
.biz-in { display: grid; grid-template-columns: minmax(0, 400px) minmax(0, 1fr) auto; gap: 12px 40px; align-items: center; }
.biz-fan { display: flex; gap: 7px; height: 176px; padding: 0 10px; }
.biz-fan span {
  flex: 1; border-radius: 2px; background: url("friese-straat-met-geschilderd-houtwerk.jpg") no-repeat;
  background-size: calc(400% + 21px) auto; background-position: calc(var(--i) / 3 * 100%) 58%;
  transform-origin: 50% 130%; box-shadow: 0 14px 24px -16px rgba(var(--werkbank-rgb), .45);
  transition: transform .35s ease;
}
.biz-fan span:nth-child(1) { transform: rotate(-4deg) translateY(6px); }
.biz-fan span:nth-child(2) { transform: rotate(-1.4deg) translateY(-4px); }
.biz-fan span:nth-child(3) { transform: rotate(1.4deg) translateY(2px); }
.biz-fan span:nth-child(4) { transform: rotate(4deg) translateY(-6px); }
.biz-fan:hover span { transform: none; }
.biz-line { margin: 0 0 8px; text-wrap: balance; }
.biz-txt p:not(.biz-line) { margin: 0; color: var(--potlood); }

/* --- binnenschilderwerk --- */
.svc--binnen { background: var(--grondverf-2); padding: clamp(72px, 9vw, 128px) 0; }
.svc-binnen__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .8fr); gap: clamp(36px, 6vw, 96px); align-items: center; }
.svc-binnen__copy > p { max-width: 34em; }
.scope--inline { margin-top: 8px; }
.scope--inline li { padding: 9px 0 9px 38px; font-size: 1.1rem; border-bottom: 1px solid var(--proefvlak); }
.scope--inline li::before { width: 22px; height: 8px; }
.offerte--boxed { margin-top: 26px; padding: 4px 22px; background: var(--grondverf-wit); border: 1px solid var(--proefvlak); }
.offerte--boxed .offerte__row:last-child { border-bottom: 0; }

.slider { margin: 0; }
.slider__stage { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: var(--proefvlak); }
.slider__stage:focus-within { outline: 3px solid var(--roest); outline-offset: 4px; }
.slider__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.slider__img--na { clip-path: inset(0 0 0 var(--pos)); }
.slider__line { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 3px; margin-left: -1.5px; background: var(--grondverf-wit); pointer-events: none; }
.slider__knob {
  position: absolute; top: 50%; left: 50%; width: 48px; height: 48px; border-radius: 50%;
  transform: translate(-50%, -50%); background: var(--grondverf-wit);
  box-shadow: 0 4px 16px rgba(var(--werkbank-rgb), .35);
}
.slider__knob::before {
  content: "‹ ›"; position: absolute; inset: 0; display: grid; place-items: center;
  font: 700 1.3rem/1 var(--sans); color: var(--roest); letter-spacing: .12em;
}
.slider__range { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; touch-action: pan-y; }
.slider__tag, .pair-shot__tag {
  position: absolute; top: 14px; padding: 6px 10px;
  font: 800 .72rem/1 var(--sans); letter-spacing: .14em; text-transform: uppercase;
  background: rgba(var(--werkbank-rgb), .72); color: var(--grondverf);
  pointer-events: none;
}
.slider__tag--voor { left: 14px; }
.slider__tag--na { right: 14px; }

/* --- houtrotreparatie --- */
.svc--houtrot { background: var(--werkbank); color: var(--grondverf); padding: clamp(80px, 10vw, 140px) 0; }
.svc-houtrot__head { max-width: 900px; margin-bottom: clamp(32px, 4vw, 52px); }
.svc--houtrot .svc__h { font-size: clamp(2.8rem, 1.5rem + 4.4vw, 5.6rem); line-height: .98; }
.pair-shot { margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.pair-shot__half { position: relative; }
.pair-shot__half img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }
.pair-shot__tag { left: 14px; }
.pair-shot .label { grid-column: 1 / -1; }
.svc-houtrot__body {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-areas: "text steps" "price steps" "act steps";
  gap: 26px clamp(36px, 6vw, 96px); margin-top: clamp(36px, 5vw, 60px); align-items: start;
}
.svc-houtrot__text { grid-area: text; margin: 0; font: 300 clamp(1.25rem, 1.05rem + .6vw, 1.5rem)/1.45 var(--serif); }
.steps { grid-area: steps; }
.steps li { padding: 14px 0 14px 42px; border-bottom: 1px solid var(--werkbank-3); font-size: 1.12rem; }
.steps li:first-child { border-top: 1px solid var(--werkbank-3); }
.steps li::before { background: var(--roest-licht); }
.quote-price { grid-area: price; padding: 20px 24px; border: 1px solid var(--werkbank-3); border-left: 4px solid var(--roest-licht); }
.quote-price__big { margin: 0 0 6px; font: italic 400 1.75rem/1.1 var(--serif); color: var(--roest-licht); }
.quote-price__why { margin: 0; font-size: 1rem; color: var(--proefvlak-licht); }
.svc-houtrot__body .actions { grid-area: act; margin-top: 4px; }

/* --- een tweede mening: picture and roest half by half, under houtrot --- */
.second { position: relative; display: grid; grid-template-columns: 1fr 1fr; min-height: 380px; background: var(--roest); color: var(--grondverf-wit); }
.second-photo { position: relative; margin: 0; min-height: 260px; }
.second-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 40% 60%; }
.second-photo .label {
  position: absolute; left: 14px; bottom: 14px; margin: 0; padding: 5px 10px;
  background: rgba(var(--werkbank-rgb), .6); color: var(--grondverf);
}
.second-txt { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; padding: clamp(40px, 5vw, 66px) var(--gutter); }
.second-k { color: inherit; }
.second-line { margin: 0 0 14px; text-wrap: balance; }
.second-txt > p:not([class]) { max-width: 28em; margin: 0 0 24px; }

/* --- kozijnen schilderen + kleuradvies: two doors --- */
.doors { background: var(--grondverf); padding: clamp(72px, 9vw, 120px) 0; }
.doors__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(18px, 3vw, 40px); }
.door__body { position: relative; isolation: isolate; height: 100%; padding: clamp(28px, 3.4vw, 48px); display: flex; flex-direction: column; }
.door__body::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--paint); filter: url(#brush); }
.door--kozijn { --paint: var(--proefvlak-licht); }
.door--kleur { --paint: var(--roest-bleek); }
.door__h { font: 400 clamp(1.9rem, 1.3rem + 1.7vw, 2.8rem)/1.05 var(--serif); letter-spacing: -.012em; margin: 0 0 14px; }
.door__h a::after { content: " →"; color: var(--roest); }
.door__body > p:not(.door__price) { max-width: 30em; }
.door__price {
  margin: auto 0 0; padding-top: 14px; border-top: 1px solid var(--proefvlak-diep);
  font: 500 1.18rem/1.3 var(--serif); color: var(--roest-diep);
}
.door .actions { margin-top: 22px; }

/* ================= OWNER ================= */
.owner { background: var(--grondverf-2); padding: clamp(72px, 9vw, 128px) 0; }
.owner__grid { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1fr); gap: clamp(36px, 6vw, 96px); align-items: center; }
.owner__pic img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; object-position: 30% 22%; }
.owner__copy p { max-width: 34em; }

/* ================= REVIEWS ================= */
.reviews { background: var(--proefvlak-licht); padding: clamp(72px, 9vw, 128px) 0; }
.reviews__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 24px 48px; margin-bottom: clamp(28px, 3.5vw, 44px); }
.reviews__head .section-h { margin: 0; max-width: 16em; }
.g-badge { display: grid; justify-items: start; gap: 5px; padding-left: 22px; border-left: 1px solid var(--proefvlak-diep); }
.g-badge__name { display: flex; align-items: center; gap: 10px; font: 800 1.55rem/1 var(--sans); }
.g-badge__name .g { width: 28px; height: 28px; }
.g-badge__row { display: flex; align-items: center; gap: 10px; }
.g-badge__row b { font: 500 1.35rem/1 var(--serif); }
.g-badge__count { font-size: .92rem; color: var(--potlood); }
.cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(14px, 2.2vw, 30px); }
.card__in {
  height: 100%; display: flex; flex-direction: column;
  padding: clamp(24px, 3vw, 38px);
  background: var(--grondverf-wit);
  box-shadow: 0 22px 44px -30px rgba(var(--werkbank-rgb), .45);
}
.card__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.card .g--card { width: 22px; height: 22px; }
.card__q { margin: 0 0 24px; flex: 1; }
.card__q p { margin: 0; font: 400 1.22rem/1.45 var(--serif); }
.card__q p::before { content: "“"; }
.card__q p::after { content: "”"; }
.card__who { display: flex; align-items: center; gap: 12px; margin: 0; font-size: .98rem; line-height: 1.3; color: var(--potlood); }
.card__who b { color: var(--werkbank); }
.card .avatar { width: 42px; height: 42px; font-size: 1.1rem; }

/* ================= FAQ ================= */
.faq { background: var(--grondverf); padding: clamp(72px, 9vw, 128px) 0; }
.faq__grid { display: grid; grid-template-columns: minmax(0, .75fr) minmax(0, 1.25fr); gap: clamp(28px, 6vw, 96px); align-items: start; }
.faq details { border-bottom: 1px solid var(--proefvlak); }
.faq details:first-child { border-top: 1px solid var(--proefvlak); }
.faq summary {
  position: relative; list-style: none; cursor: pointer;
  padding: 20px 44px 20px 0; font: 500 1.24rem/1.3 var(--serif);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; position: absolute; right: 6px; top: 50%; transform: translateY(-52%);
  font: 300 2rem/1 var(--serif); color: var(--roest);
}
.faq details[open] summary::after { content: "–"; }
.faq summary:hover { color: var(--roest-diep); }
.faq details p { margin: 0 0 22px; max-width: 40em; }
.faq__list p a { text-decoration: none; } /* the number in the answer is a tel: link; it reads as tappable on the phone only */

/* ================= OVER ONS + WERKGEBIED ================= */
.pairground { background: var(--grondverf-2); }
.about { padding: clamp(72px, 9vw, 128px) 0 clamp(56px, 6vw, 84px); }
.about__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(36px, 6vw, 96px); align-items: center; }
.about__copy > p { max-width: 34em; }
.about__pic { margin: 0; }
.about__pic img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }
.crew { list-style: none; margin: 22px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.crew li { display: inline-flex; align-items: center; gap: 9px; padding: 9px 15px; background: var(--grondverf-wit); border: 1px solid var(--proefvlak); font-size: 1rem; }
.crew__dot { width: 10px; height: 10px; border-radius: 50%; background: var(--roest); }

.area { padding-bottom: clamp(72px, 9vw, 128px); }
.area > .wrap { border-top: 1px solid var(--proefvlak-diep); padding-top: clamp(56px, 6vw, 84px); }
.area__head { max-width: 760px; }
.area__head p { margin: 0; }
.lint { list-style: none; margin: 22px 0 32px; padding: 0; display: flex; flex-wrap: wrap; row-gap: 6px; font: 500 1.14rem/1.4 var(--serif); }
.lint li:not(:last-child)::after { content: "·"; margin: 0 12px; color: var(--roest); }
.lint li:first-child { color: var(--roest-diep); font-weight: 600; }
.area__grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: clamp(18px, 3vw, 40px); align-items: start; }
.map__canvas { height: clamp(320px, 34vw, 470px); background: var(--proefvlak-licht); }
.area__pic { margin: 10px 0 0; }
.area__pic img { width: 100%; height: clamp(260px, 30vw, 420px); object-fit: cover; object-position: 30% 50%; }

.leaflet-container { font-family: var(--sans); background: var(--proefvlak-licht); }
.map__canvas .leaflet-tile-pane { filter: grayscale(1) sepia(.3) contrast(.9) brightness(1.04); }
.leaflet-control-attribution { font-size: 11px; }
.pin { border-radius: 50%; background: var(--roest); box-shadow: 0 0 0 3px var(--grondverf-wit); }
.pin--home { background: var(--werkbank); box-shadow: 0 0 0 4px var(--roest); }
.leaflet-tooltip.place {
  padding: 0; background: transparent; border: 0; box-shadow: none;
  font: 700 .84rem/1 var(--sans); color: var(--werkbank);
  text-shadow: 0 0 3px var(--grondverf-wit), 0 0 3px var(--grondverf-wit), 0 0 3px var(--grondverf-wit);
}
.leaflet-tooltip.place::before { display: none; }

/* ================= CONTACT ================= */
.contact { background: var(--werkbank); color: var(--grondverf); padding: clamp(72px, 9vw, 128px) 0; }
.contact__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(36px, 6vw, 96px); align-items: start; }
.contact__copy > p { max-width: 32em; color: var(--proefvlak-licht); }
.contact .pair { margin: 28px 0 38px; }
.nap { margin: 0; }
.nap > div { display: grid; grid-template-columns: 190px 1fr; gap: 16px; padding: 14px 0; border-top: 1px solid var(--werkbank-3); }
.nap dt { font: 800 .74rem/1.9 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--proefvlak-diep); }
.nap dd { margin: 0; }
.nap a { font-weight: 700; text-decoration: none; }
.nap a:hover { color: var(--roest-licht); }
.form-wrap { --mc: var(--potlood-licht); }
.form { display: grid; gap: 16px; padding: clamp(24px, 3.5vw, 44px); background: var(--grondverf); color: var(--werkbank); }
.form__h { margin: 0 0 4px; font: 400 1.85rem/1.1 var(--serif); }
.field { display: grid; gap: 6px; font-weight: 700; font-size: .96rem; }
.field i { font-style: normal; font-weight: 400; color: var(--potlood); }
.field input, .field textarea {
  width: 100%; padding: 13px 14px; border: 1px solid var(--proefvlak-diep); border-radius: 2px;
  font: 400 1.05rem/1.4 var(--sans); color: var(--werkbank); background: var(--grondverf-wit);
}
.field textarea { resize: vertical; min-height: 124px; }
.field input:focus, .field textarea:focus { outline: 2px solid var(--roest); outline-offset: 0; border-color: var(--roest); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form__note { margin: 0; text-align: center; font-size: .92rem; color: var(--potlood); }

/* ================= FOOTER ================= */
.foot { background: var(--werkbank-2); color: var(--proefvlak-licht); padding: 64px 0 28px; }
.foot__grid { display: grid; grid-template-columns: 1.35fr 1fr 1fr 1fr; gap: 40px; }
.foot__lockup { display: flex; align-items: flex-start; gap: .2em; margin: 0 0 18px; font-size: 2.5rem; line-height: 1; }
.foot__mark { height: 1.62em; width: auto; margin-top: -.06em; }
.foot__since { max-width: 20em; }
.foot__h { margin: 0 0 12px; font: 800 .74rem/1.2 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--roest-licht); }
.foot p { margin: 0 0 10px; }
.foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.foot a { color: var(--grondverf); text-decoration: none; }
.foot a:hover { text-decoration: underline; text-decoration-color: var(--roest-licht); text-underline-offset: 4px; }
.foot .foot__wa { display: inline-flex; align-items: center; gap: 8px; color: var(--wa); font-weight: 700; }
.foot__wa svg { width: 18px; height: 18px; }
.foot__base { margin-top: 48px; padding-top: 20px; border-top: 1px solid var(--werkbank-3); font-size: .9rem; color: var(--proefvlak-diep); }

.sticky { display: none; }

/* ================= RESPONSIVE ================= */
@media (max-width: 1180px) {
  .nav__in { gap: 18px; }
  .nav__link { padding: 10px 9px; }
  .fold__pic { width: 58%; }
  .fold__in { grid-template-columns: minmax(0, 1fr); grid-template-rows: 1fr auto auto; }
  .fold-review { grid-column: 1; grid-row: 3; max-width: 520px; margin-top: 30px; }
}

@media (max-width: 980px) {
  :root { --navh: 64px; }
  .nav__toggle {
    display: inline-flex; align-items: center; gap: 8px; order: 3;
    min-height: 42px; padding: 0 12px; border: 1px solid var(--werkbank-3); border-radius: 3px;
    background: transparent; color: var(--grondverf); font: 700 .95rem/1 var(--sans); cursor: pointer;
  }
  .nav__burger, .nav__burger::before, .nav__burger::after { display: block; width: 18px; height: 2px; background: currentColor; position: relative; }
  .nav__burger::before, .nav__burger::after { content: ""; position: absolute; left: 0; }
  .nav__burger::before { top: -6px; }
  .nav__burger::after { top: 6px; }
  .nav__call { margin-left: auto; }
  .nav__menu {
    display: none; position: fixed; left: 0; right: 0; top: var(--navh);
    max-height: calc(100svh - var(--navh)); overflow: auto;
    padding: 8px var(--gutter) 28px; background: var(--werkbank); box-shadow: 0 1px 0 var(--werkbank-3);
  }
  .nav.menu-open .nav__menu { display: block; }
  .nav__menu { max-height: calc(100svh - var(--navh)); max-height: calc(100dvh - var(--navh)); }
  .nav__list { flex-direction: column; align-items: stretch; }
  .nav__link { width: 100%; padding: 14px 0; font-size: 1.15rem; border-bottom: 1px solid var(--werkbank-3); }
  .drop { position: static; min-width: 0; padding: 4px 0 10px 16px; background: transparent; color: var(--grondverf); border: 0; box-shadow: none; }
  .drop a { padding: 10px 0; }
  .drop a:hover { background: transparent; color: var(--roest-licht); }

  .svc-card__in { grid-template-columns: 1fr; }
  .svc-card__list { padding-left: 0; border-left: 0; margin-top: 30px; }
  .svc-binnen__grid, .owner__grid, .about__grid, .contact__grid, .faq__grid { grid-template-columns: 1fr; }
  .slider { max-width: 560px; }
  .owner__pic { max-width: 520px; }
  .svc-houtrot__body { grid-template-columns: 1fr; grid-template-areas: "text" "steps" "price" "act"; }
  .area__grid { grid-template-columns: 1fr; }
  .foot__grid { grid-template-columns: 1fr 1fr; }

  .second { grid-template-columns: 1fr; }
  .nietbij-in { grid-template-columns: auto minmax(0, 1fr); }
  .nietbij-in .btn { grid-column: 1 / -1; justify-self: start; }
  .nb-photo { margin-bottom: 0; }
  .biz-in { grid-template-columns: 1fr; row-gap: clamp(36px, 6vw, 96px); }
  .biz-in > .band__act { justify-self: start; }
  .biz-fan { max-width: 440px; }
}

@media (max-width: 820px) {
  .fold { padding-top: 0; }
  .fold__pic { position: relative; width: 100%; height: calc(var(--navh) + clamp(190px, 54vw, 340px)); }
  .fold__pic img {
    object-position: 30% 50%;
    -webkit-mask-image: linear-gradient(180deg, #000 50%, transparent 100%);
    mask-image: linear-gradient(180deg, #000 50%, transparent 100%);
  }
  .fold__pic::after { background: linear-gradient(180deg, rgba(var(--werkbank-rgb), .62) 0, rgba(var(--werkbank-rgb), 0) 38%), rgba(var(--werkbank-rgb), .14); }
  .fold__in { min-height: 0; margin-top: -56px; padding-top: 0; }
  .fold__h { max-width: none; }
}

@media (max-width: 760px) {
  /* the phone's air: one ladder, five steps; every distance a phone rule sets is one of these */
  :root { --lift: 64px; --r-1: 8px; --r-2: 16px; --r-3: 24px; --r-4: 40px; --r-5: 56px; }
  /* one inner measure for every card on the phone (the buitenschilderwerk card, the two doors,
     the review cards, the form), so text inside a card always starts on the same line */
  :root { --card-in: 24px; }

  /* the web fonts arrive after the first paint (display=swap). Until then the phone sets the same
     type in a local face scaled to the web font's width, so the lines break where they will break
     and nothing under them moves when Newsreader and Alegreya Sans swap in. Same two families once
     loaded; the scale is the measured width ratio against each platform's usual fallback. */
  @font-face { font-family: "Newsreader fb Georgia"; font-weight: 300 700; src: local("Georgia"); size-adjust: 91.2%; ascent-override: 81.1%; descent-override: 29.6%; line-gap-override: 0%; }
  @font-face { font-family: "Newsreader fb Georgia"; font-weight: 300 700; font-style: italic; src: local("Georgia Italic"), local("Georgia-Italic"); size-adjust: 81.3%; ascent-override: 91.0%; descent-override: 33.2%; line-gap-override: 0%; }
  @font-face { font-family: "Newsreader fb Times"; font-weight: 300 700; src: local("Times New Roman"), local("TimesNewRomanPSMT"), local("Liberation Serif"), local("LiberationSerif"); size-adjust: 100.5%; ascent-override: 73.6%; descent-override: 26.9%; line-gap-override: 0%; }
  @font-face { font-family: "Newsreader fb Times"; font-weight: 300 700; font-style: italic; src: local("Times New Roman Italic"), local("TimesNewRomanPS-ItalicMT"), local("Liberation Serif Italic"), local("LiberationSerif-Italic"); size-adjust: 93%; ascent-override: 79.6%; descent-override: 29.0%; line-gap-override: 0%; }
  @font-face { font-family: "Newsreader fb Noto"; font-weight: 300 700; src: local("Noto Serif"), local("NotoSerif-Regular"), local("NotoSerif"); size-adjust: 84.2%; ascent-override: 87.9%; descent-override: 32.1%; line-gap-override: 0%; }
  @font-face { font-family: "Newsreader fb Noto"; font-weight: 300 700; font-style: italic; src: local("Noto Serif Italic"), local("NotoSerif-Italic"); size-adjust: 79.1%; ascent-override: 93.6%; descent-override: 34.1%; line-gap-override: 0%; }
  @font-face { font-family: "Alegreya Sans fb Arial"; font-weight: 300 500; src: local("Arial"), local("ArialMT"), local("Liberation Sans"), local("LiberationSans"); size-adjust: 87.5%; ascent-override: 91.4%; descent-override: 22.9%; line-gap-override: 0%; }
  @font-face { font-family: "Alegreya Sans fb Arial"; font-weight: 600 900; src: local("Arial Bold"), local("Arial-BoldMT"), local("Liberation Sans Bold"), local("LiberationSans-Bold"); size-adjust: 84%; ascent-override: 95.2%; descent-override: 23.8%; line-gap-override: 0%; }
  @font-face { font-family: "Alegreya Sans fb Roboto"; font-weight: 300 500; src: local("Roboto"), local("Roboto-Regular"); size-adjust: 88.3%; ascent-override: 90.6%; descent-override: 22.7%; line-gap-override: 0%; }
  @font-face { font-family: "Alegreya Sans fb Roboto"; font-weight: 600 900; src: local("Roboto Bold"), local("Roboto-Bold"); size-adjust: 88.3%; ascent-override: 90.6%; descent-override: 22.7%; line-gap-override: 0%; }
  :root {
    --serif: "Newsreader", "Newsreader fb Georgia", "Newsreader fb Times", "Newsreader fb Noto", Georgia, "Times New Roman", serif;
    --sans: "Alegreya Sans", "Alegreya Sans fb Arial", "Alegreya Sans fb Roboto", "Segoe UI", system-ui, sans-serif;
  }

  body { padding-bottom: calc(76px + env(safe-area-inset-bottom)); font-size: 1.08rem; }
  .nav__call { display: none; }
  .nav__toggle { margin-left: auto; }
  .nav__name { font-size: 1rem; }

  .fold__act { gap: var(--r-3); }
  .pair { width: 100%; display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: var(--r-1); }
  .pair .btn { padding: 0 12px; }
  .btn--call span { white-space: nowrap; }
  .sticky .btn { padding: 0 12px; }
  .owner-note { max-width: none; }

  .ratings { flex-direction: column; padding-top: 0; border-top: 0; }
  .rating {
    grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "src row" "src count";
    align-items: center; column-gap: 14px; row-gap: 2px;
    padding: 12px 0; border-left: 0; border-top: 1px solid var(--werkbank-3);
  }
  .rating:first-child { border-top: 1px solid var(--werkbank-3); }
  .rating:last-child { border-bottom: 1px solid var(--werkbank-3); }
  .rating__src { grid-area: src; }
  .rating__row { grid-area: row; justify-self: end; }
  .rating__count { grid-area: count; justify-self: end; font-size: .86rem; }
  .rating__score, .rating--google .rating__score { font-size: 1.6rem; }

  .trust__in { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 6px; }
  .patch { --mo: 8px; --ml: 17px; }
  .patch__body { padding: 16px 14px 18px; }
  .patch__kick { font-size: .64rem; letter-spacing: .1em; }
  .patch__fig { font-size: clamp(2.6rem, 11vw, 3.4rem); }
  .patch__word { font-size: clamp(1.9rem, 8.4vw, 2.4rem); }
  .patch__word span { display: block; margin: .25em 0 0; font-size: .38em; vertical-align: 0; }
  .patch__line { font-size: .9rem; line-height: 1.35; }
  .patch__act { font-size: .92rem; }

  .svc-card { width: 100%; margin-top: -48px; }
  .svc-card__list .scope li { font-size: 1.16rem; padding: 12px 0 12px 40px; }
  .weld { flex-wrap: wrap; }
  .offerte__row dd { font-size: 1.08rem; white-space: normal; text-align: right; }

  .pair-shot { grid-template-columns: 1fr; }
  .doors__grid { grid-template-columns: 1fr; }
  .cards { grid-template-columns: 1fr; }
  .band__in, .nietbij-in { gap: var(--r-2); }
  .nietbij { --nb-d: 150px; --nb-rise: 36px; }
  .nietbij-in { grid-template-columns: 1fr; }
  .nap > div { grid-template-columns: 1fr; gap: var(--r-1); }
  .foot__grid { grid-template-columns: 1fr; gap: var(--r-3); }

  /* the sticky bar: down at landing, up once the fold's own buttons have scrolled out (script.js),
     and away again while a form field has focus */
  .sticky {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    display: grid; grid-template-columns: 1fr 1fr; gap: var(--r-1);
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
    background: var(--werkbank-2); box-shadow: 0 -1px 0 var(--werkbank-3);
    transform: translateY(calc(100% + 2px)); visibility: hidden;
    transition: transform .25s ease, visibility 0s linear .25s;
  }
  .sticky.is-up:not(.is-away) { transform: none; visibility: visible; transition: transform .25s ease; }
  .sticky .btn { min-height: 50px; }

  /* ---------- the first screen ---------- */
  /* the header: the fold carries the mark, so the header is out at landing and slides in once the
     fold's lockup has left the screen (script.js); the menu, or focus inside it, keeps it in */
  .nav {
    padding-top: env(safe-area-inset-top);
    transform: translateY(-101%);
    transition: transform .25s ease, background-color .25s, box-shadow .25s;
  }
  .nav.is-in, .nav.menu-open, .nav:focus-within { transform: none; }
  .nav__menu { top: calc(var(--navh) + env(safe-area-inset-top)); }
  .nav__brand { min-height: 44px; }
  .nav__toggle { min-height: 44px; }

  /* the fold: the photo no longer keeps room for a header that is not there at landing, and the
     headline steps down only where it would otherwise take a third line (below ~390px) */
  :root { --hero: min(clamp(2.6rem, 1.1rem + 3.9vw, 4.1rem), 10.8vw); }
  .fold { --pic-h: calc(env(safe-area-inset-top) + clamp(190px, 54vw, 340px)); }
  .fold__pic { height: var(--pic-h); }
  .fold__in { padding-bottom: calc(var(--lift) + var(--r-4)); }
  .lockup { margin-bottom: var(--r-2); }
  .fold__h { margin-bottom: var(--r-2); }
  .fold__sub { margin-bottom: var(--r-3); }
  .ratings { margin-top: var(--r-3); }
  /* the operator's brief: the review card in the fold is dropped on the phone */
  .fold-review { display: none; }

  /* the operator's brief: both price blocks go on the phone (buitenschilderwerk, binnenschilderwerk) */
  .svc-card .prices, .offerte--boxed { display: none; }

  /* ---------- sections: a section's padding is the fifth step ---------- */
  .svc--buiten { padding-bottom: var(--r-5); }
  .svc--binnen, .svc--houtrot, .doors, .owner, .reviews, .faq, .contact { padding-block: var(--r-5); }
  .about { padding-block: var(--r-5); }
  .area { padding-bottom: var(--r-5); }
  .area > .wrap { padding-top: var(--r-5); }
  .foot { padding-top: var(--r-5); }
  .actions { margin-top: var(--r-3); gap: var(--r-2) var(--r-3); }
  .actions--center { margin-top: var(--r-4); }
  .reviews__head { margin-bottom: var(--r-4); }

  /* image-led sections: the heading, then the photo, then the text and the buttons */
  .svc-binnen__grid, .owner__grid, .about__grid { row-gap: 0; }
  .svc-binnen__copy, .owner__copy, .about__copy { display: contents; }
  .svc-binnen__copy > *, .owner__copy > *, .about__copy > * { order: 4; }
  .svc-binnen__copy > .kicker, .owner__copy > .kicker, .about__copy > .kicker { order: 1; }
  .svc-binnen__copy > h2, .owner__copy > h2, .about__copy > h2 { order: 2; margin-bottom: var(--r-3); }
  .svc--binnen .slider, .owner__pic, .about__pic { order: 3; margin-bottom: var(--r-3); }

  /* een tweede mening: the question on the roest, the photo, then the answer */
  .second { min-height: 0; }
  .second-txt { display: contents; }
  .second-txt > * { order: 4; margin-inline: var(--gutter); }
  .second-k { order: 1; margin-top: var(--r-4); }
  .second-line { order: 2; margin-bottom: var(--r-3); }
  .second-photo { order: 3; }
  .second-txt > p:not([class]) { margin: var(--r-3) var(--gutter); }
  .second-txt > .btn { justify-self: start; margin-bottom: var(--r-4); }

  /* text on one axis: the page's text starts on the gutter, text inside a card on the card's
     inner measure; a label on a full-bleed photo starts its text on the gutter too */
  .svc-card__in, .door__body, .card__in, .form { padding: var(--card-in); }
  .second-photo .label { left: calc(var(--gutter) - 10px); }

  /* a button label that wraps on the phone stays centred in its button */
  .btn { text-align: center; }

  /* every button in the page runs the full width of its column, its label centred (the operator,
     2026-09-28); the call bar, outside <main>, keeps its two halves */
  main .btn { width: 100%; }
  .nietbij-in .btn { justify-self: stretch; }
  /* the second opinion's column is the full screen (its text box is display: contents), so its
     button stretches between the gutters instead of taking 100% of the screen */
  .second-txt > .btn { width: auto; justify-self: stretch; }

  /* ---------- tap targets ---------- */
  .svc-card__h a, .svc__h a, .door__h a { display: inline-block; padding-block: 7px; margin-block: -7px; }
  .more { display: inline-block; padding-block: 9px; }
  .band__act { display: inline-block; padding-top: 13px; margin-top: -13px; }
  .patch__act { padding-block: 11px; margin: -3px 0 -11px; }
  .nap a { display: inline-block; padding-block: 9px; margin-block: -9px; }
  .faq__list p a { display: inline-block; padding-block: 9px; margin-block: -9px; color: var(--roest-diep); font-weight: 700; text-decoration: underline; text-decoration-color: var(--roest); text-decoration-thickness: 2px; text-underline-offset: 5px; }
  .foot ul { gap: var(--r-1); }
  .foot ul a, .foot p > a[href^="tel:"] { display: inline-block; padding-block: 9px; }
  .foot .foot__wa { min-height: 44px; }
  .map__canvas .leaflet-bar { border: 0; box-shadow: none; display: grid; gap: var(--r-1); }
  .map__canvas .leaflet-bar a,
  .map__canvas .leaflet-bar a:first-child,
  .map__canvas .leaflet-bar a:last-child {
    width: 44px; height: 44px; line-height: 42px; font-size: 22px;
    border: 1px solid var(--proefvlak-diep); border-radius: 2px;
    background: var(--grondverf-wit); color: var(--werkbank);
  }
  .map__canvas .leaflet-control-attribution a { display: inline-block; padding: 31px 6px 2px; margin: -31px -6px -2px; }

  /* zakelijk: the fanned strips keep their tilt inside the fan's own box */
  .biz-fan { padding-inline: 16px; }

  /* ---------- body type: 16px and up for what a buyer reads and fills in ---------- */
  .patch__line { font-size: 1rem; }
  .field { font-size: 1rem; }
  .form__note { font-size: 1rem; }
}

@media (max-width: 460px) {
  .fold .pair, .contact .pair { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 380px) {
  .nav__name { font-size: .92rem; }
  .patch__body { padding: 14px 10px 16px; }
  .patch__kick { font-size: .58rem; letter-spacing: .06em; }
  .nav__toggle-label { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
}

/* ── the ratings as the desktop's own strip above the buttons (the switch's k=1) and the year
   as a stamp on the inspection patch (t=3), picked by the operator on 2026-09-28 and baked in
   here; the switch itself is in _wissel/. Keyed on .thuis (the homepage's <html>) so the rules
   keep the weight they had behind the switch classes. ──────────────────────────────────── */
@media (max-width: 760px) {
  .thuis .fold__copy, .thuis .fold__act { display: contents; }
  .thuis .fold__in { grid-template-rows: none; }
  .thuis .ratings { grid-row: auto; order: 1; }
  .thuis .pair, .thuis .owner-note { order: 2; }
  .thuis .owner-note { margin-top: var(--r-3); }
  .thuis .ratings { justify-self: start; flex-direction: row; margin: 0 0 var(--r-3); padding: 0; border: 0; }
  .thuis .rating { display: grid; grid-template-columns: none; grid-template-areas: none; align-content: start; row-gap: 3px; padding: 0 11px; border: 0; border-left: 1px solid var(--werkbank-3); }
  .thuis .rating:first-child { padding-left: 0; border: 0; }
  .thuis .rating:last-child { padding-right: 0; border-bottom: 0; }
  .thuis .rating__src { grid-area: auto; gap: 5px; font-size: .76rem; color: var(--proefvlak-licht); }
  .thuis .rating--google .g { width: 14px; height: 14px; }
  .thuis .rating__row { grid-area: auto; justify-self: start; gap: 6px; }
  .thuis .rating__score, .thuis .rating--google .rating__score { font-size: 1.25rem; }
  .thuis .rating .stars { --s: .62rem; }
  .thuis .rating__count { grid-area: auto; justify-self: start; font-size: .74rem; }
  .thuis .patch__line { display: none; }
  .thuis .trust__in { grid-template-columns: minmax(0, 1fr); position: relative; }
  .thuis .patch--greige { grid-area: 1 / 1; margin-top: 28px; }
  .thuis .patch--greige .patch__body { padding: 16px 142px 16px 18px; justify-content: flex-start; }
  .thuis .patch--roest { grid-area: 1 / 1; justify-self: end; align-self: start; z-index: 4; width: 128px; margin-right: 8px; transform: rotate(-2deg); }
  .thuis .patch--roest .patch__body { padding: 11px 12px 12px; }
  .thuis .patch--roest .patch__kick { font-size: .58rem; letter-spacing: .07em; }
  .thuis .patch__fig { font-size: 2.4rem; }
  .thuis .patch__word { margin: .06em 0 .1em; }
  .thuis .patch__word span { display: inline; margin: 0 0 0 .3em; vertical-align: .35em; font-size: .38em; }
}

/* ── buitenschilderwerk on the phone: the card runs edge to edge and its text starts on the gutter,
   like every other section's (the operator, 2026-09-28: the inset card is a desktop leftover).
   The card still rises over the photo's foot; the pencil marks around it go. ─────────────── */
@media (max-width: 760px) {
  .svc--buiten .svc-card.marks { width: auto; margin-inline: calc(-1 * var(--gutter)); padding: 0; }
  .svc--buiten .svc-card.marks::after { display: none; }
  .svc--buiten .svc-card__in { padding-inline: var(--gutter); box-shadow: none; }
  .svc-buiten__lead { display: none; }   /* the kicker and lead line above the photo (the operator, same day) */
}


/* ── voorbeeldweergave: het formulier verstuurt niets ──────────────────
   Deze demo staat los van de server: geen /contact, geen /wa, geen /bel. De
   melding hieronder komt op zodra iemand op verzenden drukt, zodat de knop
   niet dood aanvoelt. Gaat eruit op de dag dat deze pagina de echte site is. */
.form-demo{
  margin:14px 0 0;padding:12px 14px;border-left:3px solid var(--roest);
  background:var(--grondverf);color:var(--werkbank);
  font:400 1rem/1.5 var(--sans);text-align:left;
}
.form-demo a{color:var(--roest-diep)}