/* Bouwbedrijf SAL — every colour below comes from palette.json */
:root {
  --dakpan: #9A492E;
  --dakpan-diep: #7A3721;
  --dakpan-licht: #D08A6C;
  --dakpan-wash: #F4E1D6;
  --lood: #26333A;
  --lood-diep: #1A2429;
  --lood-zacht: #4F5E66;
  --lood-grijs: #8A969B;
  --gips: #E7CDBD;
  --gips-licht: #F4E6DC;
  --gips-diep: #D9B7A3;
  --kalk: #F4EFE7;
  --kalk-wit: #FFFCF7;
  --kalk-diep: #EAE2D5;
  --kalk-rand: #D8CCBC;
  --wa: #25D366;

  --shadow-1: 0 1px 2px rgba(38, 51, 58, .08), 0 8px 24px rgba(38, 51, 58, .08);
  --shadow-2: 0 2px 4px rgba(38, 51, 58, .08), 0 24px 60px rgba(38, 51, 58, .16);

  --f-sans: 'Onest', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --f-tech: 'Titillium Web', 'Onest', system-ui, sans-serif;

  --wrap: 1200px;
  --gut: clamp(20px, 4vw, 56px);
  --sec: clamp(72px, 9vw, 128px);
  --r: 6px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--f-sans);
  font-size: 17px;
  line-height: 1.6;
  color: var(--lood);
  background: var(--kalk);
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
p { margin: 0 0 1em; }
h1, h2, h3 { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
figure { margin: 0; }
blockquote { margin: 0; }
button { font: inherit; color: inherit; }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ico { width: 1em; height: 1em; fill: currentColor; flex: none; }

.wrap { width: 100%; max-width: calc(var(--wrap) + 2 * var(--gut)); margin: 0 auto; padding: 0 var(--gut); }

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

/* ---------- small caps: Titillium, the logo's second voice ---------- */
.caps {
  font-family: var(--f-tech);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: .22em;
  text-transform: uppercase;
  line-height: 1.3;
  margin: 0 0 14px;
}
.caps--dark { color: var(--dakpan); }
.caps--light { color: var(--dakpan-licht); }

.sec-h {
  font-weight: 800;
  font-size: clamp(32px, 3.6vw, 50px);
  line-height: 1.04;
  letter-spacing: -.03em;
  margin-bottom: 22px;
  text-wrap: balance;
}
.sec-h--light { color: var(--kalk-wit); }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 0 24px;
  font-family: var(--f-sans); font-weight: 700; font-size: 16px; line-height: 1.1;
  text-decoration: none; border: 0; border-radius: var(--r); cursor: pointer;
  transition: background-color .15s, color .15s, box-shadow .15s, transform .15s;
}
.btn .ico { width: 18px; height: 18px; }
.btn--main { background: var(--dakpan); color: var(--kalk-wit); }
.btn--main:hover { background: var(--dakpan-diep); }
.btn--light { background: var(--kalk-wit); color: var(--dakpan); }
.btn--light:hover { background: var(--gips-licht); }
.btn--more {
  background: transparent; color: var(--lood); padding: 0 6px; min-height: 52px;
  font-weight: 600; text-decoration: underline; text-decoration-color: var(--kalk-rand);
  text-underline-offset: 6px; text-decoration-thickness: 2px;
}
.btn--more:hover { text-decoration-color: var(--dakpan); color: var(--dakpan); }
.btn--more .ico { width: 15px; height: 15px; }
.btn--block { width: 100%; }

.btn--call { background: var(--dakpan); color: var(--kalk-wit); }
.btn--call:hover { background: var(--dakpan-diep); }
.btn--wa { background: var(--wa); color: var(--kalk-wit); }
.btn--wa:hover { box-shadow: inset 0 0 0 100px rgba(38, 51, 58, .10); }
.btn--wa .ico { width: 21px; height: 21px; }

.acts { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin-top: 26px; }

/* The pair: call and WhatsApp welded into one bar, an "of" riding the seam */
.pair { position: relative; display: flex; width: 100%; max-width: 520px; }
.pair .btn { flex: 1 1 0; min-height: 58px; font-size: 17px; }
.pair .btn--call { border-radius: var(--r) 0 0 var(--r); padding-right: 30px; }
.pair .btn--wa { border-radius: 0 var(--r) var(--r) 0; padding-left: 30px; }
.pair::after {
  content: "of";
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 32px; height: 32px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--kalk-wit); color: var(--lood);
  font-family: var(--f-tech); font-weight: 700; font-size: 13px; letter-spacing: .04em;
  box-shadow: 0 0 0 3px var(--kalk);
  pointer-events: none;
}
.pair__note { margin: 10px 0 0; font-size: 14px; color: var(--lood-zacht); }

/* ---------- stars ---------- */
.stars { display: inline-flex; gap: 2px; color: var(--dakpan); vertical-align: -2px; }
.stars svg { width: 16px; height: 16px; fill: currentColor; }

/* ---------- labels on photos: small and quiet, where + when ---------- */
.label {
  position: absolute; left: 14px; bottom: 14px;
  font-family: var(--f-tech); font-weight: 600; font-size: 12px; letter-spacing: .08em;
  color: var(--kalk-wit); background: rgba(38, 51, 58, .62);
  padding: 4px 10px; border-radius: 3px; line-height: 1.4;
}
.label--plain { position: static; background: none; color: var(--lood-zacht); padding: 0; }

/* ---------- appje: how each service announces itself — the customer's question opens the section under
   its heading, in quotes, at a size between the two; the person who asks it beside it, a different one
   per section (klant-1 … klant-6.svg), with a small app badge (template2-appje 3) ---------- */
.vraag { position: relative; display: flex; align-items: center; gap: 18px; margin: 0 0 22px; }
.vraag__wie { display: block; flex: none; width: 56px; height: 56px; border-radius: 50%; }
.vraag::after {
  content: ""; position: absolute; left: 38px; top: 50%; margin-top: 12px; width: 22px; height: 22px; border-radius: 50%;
  background: var(--dakpan) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 5.5h14a1.5 1.5 0 011.5 1.5v8.5a1.5 1.5 0 01-1.5 1.5h-8l-4.5 3.5V17H5a1.5 1.5 0 01-1.5-1.5V7A1.5 1.5 0 015 5.5z' fill='%23FFFCF7'/%3E%3C/svg%3E") 50% 55% / 13px no-repeat;
  box-shadow: 0 0 0 2.5px var(--kalk-wit);
}
.svc-bath .vraag::after { box-shadow: 0 0 0 2.5px var(--kalk); }
.door .vraag::after { box-shadow: 0 0 0 2.5px var(--lood); }
.appje {
  margin: 0; max-width: 24em; quotes: "\201C" "\201D";
  font-size: clamp(18px, 1.6vw, 21px); font-weight: 600; line-height: 1.36; letter-spacing: -.012em;
  text-indent: -.4em; text-wrap: pretty;
}
.appje::before { content: open-quote; color: var(--dakpan); }
.appje::after { content: close-quote; color: var(--dakpan); }
.door .appje::before, .door .appje::after { color: var(--dakpan-licht); }

.svc-h { font-weight: 800; font-size: clamp(38px, 4.4vw, 60px); line-height: 1; letter-spacing: -.035em; margin-bottom: 20px; }
.svc-h a { text-decoration: none; display: inline-flex; align-items: center; gap: .22em; }
.svc-h a .ico { width: .5em; height: .5em; color: var(--dakpan); transition: transform .15s; }
.svc-h a:hover { color: var(--dakpan); }
.svc-h a:hover .ico { transform: translateX(4px); }
.svc-h--door { font-size: clamp(32px, 3.2vw, 44px); }

.laatst { font-size: 14.5px; color: var(--lood-zacht); line-height: 1.5; }
.laatst__tag {
  font-family: var(--f-tech); font-weight: 700; font-size: 11px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--dakpan); border: 1.5px solid currentColor; border-radius: 3px; padding: 1px 6px; margin-right: 6px;
  vertical-align: 1px;
}

/* ==================================================== HEADER */
.head { position: relative; z-index: 50; background: var(--kalk); }
.head__bar { display: flex; align-items: center; gap: 28px; min-height: 80px; }
.brand { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 4px; text-decoration: none; flex: none; }
.brand__mark { width: 92px; height: auto; }
.brand__word {
  font-weight: 700; font-size: 10.5px; letter-spacing: .42em; color: var(--dakpan); line-height: 1;
  width: 92px; text-align: center; padding-left: .42em;
}

.nav { margin-left: auto; }
.nav__list { display: flex; align-items: center; gap: 4px; }
.nav__item { position: relative; }
.nav__link {
  display: inline-flex; align-items: center; gap: 6px; padding: 10px 12px;
  font-size: 15.5px; font-weight: 500; text-decoration: none; color: var(--lood);
  background: none; border: 0; cursor: pointer; border-radius: 4px;
}
.nav__link:hover { color: var(--dakpan); }
.nav__link .ico--chev { width: 14px; height: 14px; transition: transform .15s; }
.has-drop.open .ico--chev { transform: rotate(180deg); }

.drop {
  display: none; position: absolute; top: 100%; left: -8px; min-width: 250px;
  background: var(--kalk-wit); border-radius: var(--r); padding: 10px;
  box-shadow: var(--shadow-2); border-top: 4px solid var(--dakpan);
}
.drop a {
  display: block; padding: 10px 14px; border-radius: 4px; text-decoration: none; font-weight: 600; font-size: 15.5px;
}
.drop a:hover { background: var(--kalk); color: var(--dakpan); }
.has-drop.open .drop { display: block; }
@media (hover: hover) and (min-width: 961px) {
  .has-drop:hover .drop { display: block; }
  .has-drop:hover .ico--chev { transform: rotate(180deg); }
}

.head__call { display: flex; align-items: center; gap: 8px; flex: none; }
.head__tel {
  display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: var(--r);
  font-weight: 700; font-size: 16px; text-decoration: none; color: var(--kalk-wit); background: var(--dakpan);
}
.head__tel:hover { background: var(--dakpan-diep); }
.head__wa {
  display: grid; place-items: center; width: 44px; height: 44px; border-radius: var(--r);
  background: var(--wa); color: var(--kalk-wit);
}
.head__wa .ico { width: 22px; height: 22px; }

.menu-btn { display: none; }

/* ==================================================== FOLD */
.fold { position: relative; background: var(--kalk); padding: clamp(12px, 2vw, 24px) 0 120px; overflow: hidden; }
.fold__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 540px); gap: clamp(32px, 5vw, 72px); align-items: start; }

.lockup { margin: 0; display: flex; flex-direction: column; align-items: stretch; }
.lockup__word { font-weight: 700; color: var(--dakpan); line-height: 1; text-align: center; }
.lockup__tag { font-family: var(--f-tech); font-weight: 600; color: var(--dakpan); line-height: 1.2; text-align: center; }

.lockup--xl { --lw: clamp(210px, 20vw, 290px); width: var(--lw); margin-bottom: clamp(26px, 3vw, 40px); }
.lockup--xl .lockup__mark { width: 100%; height: auto; }
.lockup--xl .lockup__word { font-size: calc(var(--lw) * .088); letter-spacing: .36em; padding-left: .36em; margin-top: calc(var(--lw) * .05); }
.lockup--xl .lockup__tag { font-size: calc(var(--lw) * .062); margin-top: calc(var(--lw) * .03); letter-spacing: .01em; }

.fold__h1 {
  font-weight: 800; font-size: clamp(44px, 5vw, 74px); line-height: .98; letter-spacing: -.04em;
  color: var(--lood); max-width: 9.6em; margin-bottom: 22px;
}
.fold__h1 em { font-style: normal; color: var(--dakpan); }


/* the house: the chat lives under a roof */
.fold__house { position: relative; padding-top: 88px; align-self: stretch; }
.fold__house::before {
  content: ""; position: absolute; top: 0; right: 0; bottom: -120px; left: 40px;
  background: var(--dakpan);
  clip-path: polygon(50% 0, 100% 150px, 100% 100%, 0 100%, 0 150px);
}

.chat {
  position: relative; z-index: 1; width: 100%; max-width: 420px;
  background: var(--kalk-wit); border-radius: 22px; overflow: hidden;
  box-shadow: var(--shadow-2);
}
.chat__head { display: flex; align-items: center; gap: 12px; padding: 14px 18px; background: var(--kalk-wit); border-bottom: 1px solid var(--kalk-diep); }
.chat__avatar { width: 44px; height: 44px; border-radius: 50%; background: var(--dakpan); display: grid; place-items: center; flex: none; }
.chat__avatar img { width: 32px; height: auto; }
.chat__who { display: flex; flex-direction: column; line-height: 1.25; }
.chat__who b { font-size: 15.5px; }
.chat__who small { font-size: 12.5px; color: var(--lood-zacht); }

.chat__thread { display: flex; flex-direction: column; gap: 8px; padding: 14px 14px 16px; background: var(--kalk); }
.msg { position: relative; max-width: 84%; padding: 8px 12px 20px; border-radius: 12px; font-size: 14px; line-height: 1.42; box-shadow: 0 1px 1px rgba(38, 51, 58, .06); }
.msg p { margin: 0; }
.msg--in { align-self: flex-end; background: var(--gips); border-bottom-right-radius: 3px; }
.msg--out { align-self: flex-start; background: var(--kalk-wit); border-bottom-left-radius: 3px; }
.msg--photo { padding: 5px 5px 20px; max-width: 76%; }
.msg--photo p { padding: 6px 7px 0; }
.msg__img { width: 100%; height: 150px; object-fit: cover; object-position: 50% 22%; border-radius: 8px; }
.msg__time { position: absolute; right: 10px; bottom: 4px; font-size: 10.5px; color: var(--lood-zacht); display: inline-flex; align-items: center; gap: 3px; }
.ticks { width: 16px; height: 10px; color: var(--dakpan); }

.chat__bar { display: flex; align-items: center; gap: 10px; padding: 10px 12px 12px; background: var(--kalk); border-top: 1px solid var(--kalk-diep); }
.chat__field { flex: 1; background: var(--kalk-wit); border-radius: 22px; padding: 10px 16px; font-size: 14px; color: var(--lood-grijs); }
.chat__cam { width: 42px; height: 42px; border-radius: 50%; background: var(--dakpan); color: var(--kalk-wit); display: grid; place-items: center; }
.chat__cam .ico { width: 18px; height: 18px; }

/* ==================================================== LOODGIETER */
.svc-lead { background: var(--kalk-diep); padding: clamp(56px, 7vw, 96px) 0 var(--sec); }
.lead-card { background: var(--kalk-wit); border: 2px solid var(--lood); border-radius: 10px; padding: 12px; box-shadow: var(--shadow-1); }
.lead-card__photo { position: relative; height: clamp(300px, 36vw, 470px); border-radius: 5px; overflow: hidden; }
.lead-card__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 38%; }
.lead-card__photo .label { left: auto; right: 16px; top: 16px; bottom: auto; }

.lead-card__body {
  position: relative; margin: -132px clamp(16px, 3.5vw, 44px) 0;
  background: var(--kalk-wit); border-top: 6px solid var(--dakpan); border-radius: 4px 4px 0 0;
  display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); gap: clamp(28px, 4vw, 56px);
  padding: clamp(28px, 3.6vw, 48px) clamp(20px, 3.4vw, 44px) clamp(24px, 3vw, 36px);
}
.lead-card__copy .svc-h { font-size: clamp(44px, 5vw, 68px); }
.lead-card__copy > p:not(.appje):not(.laatst) { font-size: 17.5px; }

.lead-card__side { background: var(--kalk); border-radius: var(--r); padding: clamp(22px, 2.6vw, 32px); display: flex; flex-direction: column; align-self: start; }
.scope { counter-reset: s; }
.scope li {
  position: relative; padding: 12px 0 12px 32px; border-bottom: 1px solid var(--kalk-rand);
  font-weight: 600; font-size: 17px; line-height: 1.35;
}
.scope li:last-child { border-bottom: 0; }
.scope li::before {
  content: ""; position: absolute; left: 2px; top: 15px; width: 16px; height: 16px; background: var(--dakpan);
  clip-path: polygon(50% 0, 100% 42%, 100% 100%, 0 100%, 0 42%);
}
.scope--two { display: grid; grid-template-columns: 1fr 1fr; column-gap: 28px; margin: 4px 0 18px; }
.scope--two li { font-size: 15.5px; padding: 9px 0 9px 26px; border-bottom: 1px solid var(--kalk-rand); }
.scope--two li:last-child { border-bottom: 1px solid var(--kalk-rand); }
.scope--two li::before { width: 13px; height: 13px; top: 13px; }

.proof { display: flex; align-items: center; gap: 16px; margin-top: 18px; padding-top: 18px; border-top: 2px dashed var(--kalk-rand); }
.proof__faces { display: flex; flex: none; }
.proof__faces span {
  width: 38px; height: 38px; margin-left: -10px; border-radius: 50%;
  display: grid; place-items: center; font-weight: 700; font-size: 15px;
  background: var(--dakpan-wash); color: var(--dakpan); border: 2.5px solid var(--kalk);
}
.proof__faces span:first-child { margin-left: 0; }
.proof__faces span:nth-child(2) { background: var(--gips); }
.proof__faces span:nth-child(4) { background: var(--gips); }
.proof__faces span:last-child { background: var(--dakpan); color: var(--kalk-wit); }
.proof__lead { margin: 0 0 2px; font-weight: 700; font-size: 15.5px; }
.proof__score { margin: 0; font-size: 13.5px; color: var(--lood-zacht); line-height: 1.45; }
.proof__score b { color: var(--lood); }
.proof__plat { white-space: nowrap; }
.proof .stars svg { width: 14px; height: 14px; }

/* ==================================================== ONE-BREATH BAND */
.breath--offerte { background: var(--dakpan); color: var(--kalk-wit); padding: clamp(28px, 3.4vw, 40px) 0; }
.breath__row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 16px clamp(24px, 3.4vw, 48px); align-items: center; }
.breath__big { margin: 0; font-weight: 800; font-size: clamp(24px, 2.4vw, 32px); letter-spacing: -.02em; line-height: 1.1; }
.breath__small { margin: 0; font-size: 15.5px; color: var(--gips-licht); max-width: 36em; }

/* ==================================================== DOORS (the two pairs) */
.doors { background: var(--lood); color: var(--kalk-wit); padding: clamp(64px, 7vw, 104px) 0; }
.doors__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0; }
.door { padding: 8px clamp(24px, 4vw, 64px) 8px 0; display: flex; flex-direction: column; }
.door + .door { padding: 8px 0 8px clamp(24px, 4vw, 64px); border-left: 1px solid rgba(231, 205, 189, .22); }
.door > p:not(.appje) { color: var(--gips-licht); max-width: 30em; }
.door .svc-h a:hover { color: var(--dakpan-licht); }
.door .svc-h a .ico { color: var(--dakpan-licht); }
.door .acts { margin-top: auto; padding-top: 18px; }
.door .btn--more { color: var(--kalk-wit); text-decoration-color: rgba(231, 205, 189, .4); }
.door .btn--more:hover { color: var(--gips); text-decoration-color: var(--dakpan-licht); }
/* each door headed by a picture of the finished work that answers its appje, place + date on it
   as on the loodgieter card (template2-deurfoto 1); --fp on the figure frames each photo */
.door__photo { position: relative; height: clamp(172px, 15.5vw, 206px); margin: 0 0 28px; border-radius: var(--r); overflow: hidden; }
.door__photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: var(--fp, 50% 50%); }

/* ==================================================== BADKAMER */
.svc-bath { background: var(--kalk); padding: var(--sec) 0; }
.svc-bath__grid {
  display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); column-gap: clamp(32px, 5vw, 72px);
  grid-template-areas: "copy ba" "acts ba"; grid-template-rows: auto 1fr; align-items: center;
}
.svc-bath__copy { grid-area: copy; align-self: end; }
.svc-bath__grid .ba { grid-area: ba; }
.svc-bath__acts { grid-area: acts; align-self: start; margin-top: 8px; }

.ba { margin: 0; }
.ba__stage { position: relative; aspect-ratio: 3 / 2; border-radius: var(--r); overflow: hidden; box-shadow: var(--shadow-2); background: var(--kalk-diep); border: 2px solid var(--lood); }
.ba__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ba__img--na { clip-path: inset(0 0 0 var(--pos)); }
.ba__tag {
  position: absolute; top: 14px; z-index: 2;
  font-family: var(--f-tech); font-weight: 700; font-size: 12px; letter-spacing: .2em; text-transform: uppercase;
  padding: 5px 10px; border-radius: 3px; pointer-events: none;
}
.ba__tag--voor { left: 14px; background: var(--kalk-wit); color: var(--lood); }
.ba__tag--na { right: 14px; background: var(--dakpan); color: var(--kalk-wit); }
.ba__line { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 3px; margin-left: -1.5px; background: var(--kalk-wit); z-index: 2; pointer-events: none; }
.ba__knob {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 48px; height: 48px; border-radius: 50%; background: var(--kalk-wit); color: var(--dakpan);
  box-shadow: 0 0 0 4px var(--gips-diep), var(--shadow-1);
  display: flex; align-items: center; justify-content: center; gap: 0;
}
.ba__knob .ico { width: 16px; height: 16px; }
.ba__knob .ico:first-child { transform: rotate(90deg); }
.ba__knob .ico:last-child { transform: rotate(-90deg); }
.ba__range { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; z-index: 3; }
.ba__stage:focus-within { outline: 3px solid var(--dakpan); outline-offset: 3px; }
.ba__cap { display: flex; justify-content: space-between; gap: 12px; margin-top: 12px; font-size: 13px; color: var(--lood-zacht); }
.ba__hint { font-size: 13px; }

/* ==================================================== NIET BIJ */
.nietbij { background: var(--gips-licht); padding: clamp(56px, 6vw, 88px) 0; border-bottom: 6px solid var(--dakpan); }
.nietbij__row { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(24px, 4vw, 64px); align-items: center; }
.nietbij__h { font-weight: 800; font-size: clamp(38px, 4.6vw, 64px); line-height: 1; letter-spacing: -.035em; color: var(--dakpan); text-wrap: balance; }
.nietbij__copy p { font-size: 18px; margin-bottom: 22px; }

/* ==================================================== REVIEWS */
.reviews { background: var(--kalk-diep); padding: var(--sec) 0; }
.reviews__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px 48px; flex-wrap: wrap; margin-bottom: clamp(28px, 3.4vw, 44px); }
.reviews__head .sec-h { margin-bottom: 0; }
.plats { display: flex; gap: 0; }
.plat { padding: 4px 22px; border-left: 2px solid var(--kalk-rand); }
.plat__name { margin: 0 0 4px; font-weight: 800; font-size: 17px; letter-spacing: -.01em; }
.plat__score { margin: 0; font-size: 14.5px; font-weight: 700; display: flex; align-items: center; gap: 8px; }
.plat__score .stars svg { width: 14px; height: 14px; }
.plat__count { margin: 2px 0 0; font-size: 13px; color: var(--lood-zacht); }

.rv-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(16px, 2vw, 24px); }
.rv {
  background: var(--kalk-wit); border-radius: var(--r); padding: clamp(22px, 2.6vw, 32px);
  box-shadow: var(--shadow-1); border-top: 5px solid var(--dakpan);
  display: flex; flex-direction: column;
}
.rv__head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.rv__av {
  width: 46px; height: 46px; border-radius: 50%; flex: none;
  display: grid; place-items: center; font-weight: 800; font-size: 18px;
  background: var(--dakpan-wash); color: var(--dakpan);
}
.rv__who { display: flex; flex-direction: column; line-height: 1.25; }
.rv__who b { font-size: 16.5px; }
.rv__who small { font-size: 13.5px; color: var(--lood-zacht); }
.rv__via {
  margin-left: auto; align-self: flex-start;
  font-family: var(--f-tech); font-weight: 600; font-size: 11.5px; letter-spacing: .06em;
  color: var(--lood-zacht); border: 1px solid var(--kalk-rand); border-radius: 3px; padding: 2px 8px; white-space: nowrap;
}
.rv__stars { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; font-size: 13.5px; color: var(--lood-zacht); }
.rv__stars .stars svg { width: 20px; height: 20px; }
.rv__txt p { margin: 0; font-size: 16.5px; line-height: 1.55; }

.sec-end { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 14px 24px; margin-top: clamp(32px, 4vw, 52px); }
.sec-end p { margin: 0; font-weight: 700; font-size: 18px; }
.sec-end--left { justify-content: flex-start; }

/* ==================================================== OWNER */
.owner { background: var(--kalk); padding: var(--sec) 0; }
.owner__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
.gable { position: relative; }
.gable img { clip-path: polygon(50% 0, 100% 17%, 100% 100%, 0 100%, 0 17%); }
.owner__photo img { width: 100%; height: auto; aspect-ratio: 1122 / 1402; object-fit: cover; border-radius: var(--r); }   /* no gable on the owner: overdone */
.owner__photo::after {
  content: ""; position: absolute; left: -14px; right: 14px; bottom: -14px; height: 40%;
  background: var(--dakpan); z-index: -1;
}
.owner__photo { position: relative; z-index: 0; }
.owner__lead { font-size: clamp(19px, 1.6vw, 22px); line-height: 1.5; font-weight: 500; }
.owner__copy > p:not(.caps):not(.owner__lead) { color: var(--lood-zacht); }
.owner__copy .btn { margin-top: 8px; }

/* ==================================================== OVER ONS + WERKGEBIED (one ground) */
.pairsec { background: var(--gips-licht); }
.about { padding: var(--sec) 0 clamp(56px, 6vw, 80px); }
.about__grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
.about__copy > p:not(.caps) { font-size: 17.5px; }

.roof { position: relative; background: var(--dakpan); padding: 3px; clip-path: polygon(50% 0, 100% 96px, 100% 100%, 0 100%, 0 96px); max-width: 460px; justify-self: center; width: 100%; }
.roof__in { background: var(--kalk-wit); clip-path: polygon(50% 0, 100% 94px, 100% 100%, 0 100%, 0 94px); padding: 104px clamp(24px, 3vw, 40px) 26px; }
.roof__mark { width: 120px; height: auto; margin: 0 auto 18px; }
.roof__list li { border-top: 1px solid var(--kalk-rand); }
.roof__list a {
  display: flex; justify-content: space-between; align-items: center; padding: 11px 2px;
  font-weight: 700; font-size: 18px; text-decoration: none; letter-spacing: -.01em;
}
.roof__list a::after { content: "→"; color: var(--dakpan); font-weight: 700; transition: transform .15s; }
.roof__list a:hover { color: var(--dakpan); }
.roof__list a:hover::after { transform: translateX(3px); }

.area { padding: 0 0 var(--sec); }
.area__head { border-top: 3px solid var(--dakpan); padding-top: clamp(48px, 5vw, 72px); display: flex; justify-content: space-between; align-items: flex-end; gap: 16px 48px; flex-wrap: wrap; margin-bottom: 28px; }
.area__head .sec-h { margin-bottom: 0; }
.area__intro { max-width: 30em; margin: 0; font-size: 17px; }
.area__grid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: clamp(20px, 3vw, 36px); align-items: stretch; }
.area__mapwrap { border: 2px solid var(--lood); border-radius: var(--r); overflow: hidden; background: var(--kalk-diep); }
.area__map { width: 100%; height: 100%; min-height: 460px; }
.area__side { display: flex; flex-direction: column; gap: 22px; }
.places { counter-reset: p; display: flex; flex-wrap: wrap; gap: 8px; }
.places li {
  font-size: 14.5px; font-weight: 600; padding: 5px 12px; border-radius: 20px;
  background: var(--kalk-wit); border: 1px solid var(--kalk-rand);
}
.places li:nth-child(-n+7) { background: var(--dakpan); border-color: var(--dakpan); color: var(--kalk-wit); }
.area__photo { flex: 1; min-height: 260px; }
.area__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 46% 30%; clip-path: polygon(50% 0, 100% 26%, 100% 100%, 0 100%, 0 26%); }

/* Leaflet, dressed in the palette */
.leaflet-container { font-family: var(--f-sans); background: var(--kalk-diep); }
.leaflet-tile-pane { filter: sepia(.28) saturate(.75) brightness(1.02); }
.leaflet-control-zoom a { background: var(--kalk-wit); color: var(--lood); border-color: var(--kalk-rand); }
.leaflet-control-zoom a:hover { background: var(--kalk); color: var(--dakpan); }
.leaflet-control-attribution { background: rgba(255, 252, 247, .85); color: var(--lood-zacht); font-size: 10px; }
.leaflet-control-attribution a { color: var(--lood-zacht); }
.map-home { display: grid; place-items: center; width: 50px; height: 50px; background: var(--dakpan); border-radius: 50%; box-shadow: 0 0 0 4px var(--kalk-wit), var(--shadow-1); }
.map-home img { width: 34px; height: auto; }
.leaflet-tooltip.map-lbl {
  background: var(--kalk-wit); color: var(--lood); border: 0; border-radius: 3px; box-shadow: var(--shadow-1);
  font-family: var(--f-tech); font-weight: 700; font-size: 12px; letter-spacing: .06em; padding: 2px 8px;
}
.leaflet-tooltip.map-lbl::before { display: none; }
.leaflet-tooltip.map-lbl--home { background: var(--lood); color: var(--kalk-wit); font-size: 13px; }

/* ==================================================== FAQ */
.faq { background: var(--kalk); padding: var(--sec) 0; }
.faq__grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.faq__side { position: sticky; top: 32px; }
.faq__side > p:not(.caps) { color: var(--lood-zacht); }
.qa { border-top: 2px solid var(--lood); }
.qa:last-child { border-bottom: 2px solid var(--lood); }
.qa summary {
  list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding: 20px 2px; font-weight: 700; font-size: clamp(18px, 1.5vw, 20px); line-height: 1.3;
}
.qa summary::-webkit-details-marker { display: none; }
.qa summary::after {
  content: ""; flex: none; width: 14px; height: 14px; background: var(--dakpan);
  clip-path: polygon(50% 0, 100% 42%, 100% 100%, 0 100%, 0 42%); transition: transform .2s;
}
.qa[open] summary::after { transform: rotate(180deg); }
.qa summary:hover { color: var(--dakpan); }
.qa p { margin: -6px 0 22px; padding-right: 40px; color: var(--lood-zacht); font-size: 16.5px; }

/* ==================================================== CONTACT */
.contact { background: var(--lood); color: var(--kalk-wit); padding: var(--sec) 0; }
.contact__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.contact__lead { font-size: 18px; color: var(--gips-licht); max-width: 30em; margin-bottom: 28px; }
.pair--contact::after, .pair--foot::after { box-shadow: 0 0 0 3px var(--lood); }
.pair--foot::after { box-shadow: 0 0 0 3px var(--lood-diep); }
.nap { margin: 36px 0 0; display: grid; gap: 0; }
.nap > div { display: grid; grid-template-columns: 170px 1fr; gap: 16px; padding: 13px 0; border-top: 1px solid rgba(231, 205, 189, .2); }
.nap dt { font-family: var(--f-tech); font-weight: 600; font-size: 12.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--dakpan-licht); padding-top: 3px; }
.nap dd { margin: 0; font-size: 16.5px; }
.nap a { color: var(--kalk-wit); text-decoration-color: var(--dakpan-licht); text-underline-offset: 4px; }

.form { background: var(--kalk-wit); color: var(--lood); border-radius: 10px; padding: clamp(24px, 3.4vw, 40px); box-shadow: var(--shadow-2); border-top: 6px solid var(--dakpan); }
.form__title { font-weight: 800; font-size: 26px; letter-spacing: -.02em; margin-bottom: 4px; line-height: 1.15; }
.form__sub { color: var(--lood-zacht); font-size: 15px; margin-bottom: 22px; }
.fld { display: block; margin-bottom: 16px; }
.fld > span { display: block; font-weight: 600; font-size: 14.5px; margin-bottom: 6px; }
.fld em { font-style: normal; font-weight: 400; color: var(--lood-zacht); }
.fld input, .fld textarea {
  width: 100%; font: inherit; font-size: 16px; color: var(--lood);
  background: var(--kalk); border: 1.5px solid var(--kalk-rand); border-radius: var(--r); padding: 12px 14px;
}
.fld textarea { resize: vertical; min-height: 120px; }
.fld input:focus, .fld textarea:focus { outline: none; border-color: var(--dakpan); background: var(--kalk-wit); box-shadow: 0 0 0 3px var(--dakpan-wash); }
.fld input:user-invalid, .fld textarea:user-invalid { border-color: var(--dakpan-diep); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form .btn { margin-top: 6px; min-height: 56px; font-size: 17px; }
.form__note { margin: 14px 0 0; font-size: 13.5px; color: var(--lood-zacht); text-align: center; }

/* ==================================================== FOOTER */
.foot { background: var(--lood-diep); color: var(--gips-licht); padding: clamp(56px, 6vw, 80px) 0 0; }
.foot__grid { display: grid; grid-template-columns: 1.1fr 1fr 1fr 1.2fr; gap: 40px; }
.lockup--foot { width: 190px; }
.lockup--foot .lockup__mark { width: 100%; height: auto; }
.lockup--foot .lockup__word { color: var(--kalk); font-size: 16.5px; letter-spacing: .38em; padding-left: .38em; margin-top: 9px; }
.lockup--foot .lockup__tag { color: var(--gips); font-size: 12px; margin-top: 6px; }
.foot__h { font-family: var(--f-tech); font-weight: 600; font-size: 12.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--dakpan-licht); margin-bottom: 14px; }
.foot ul li { margin-bottom: 6px; }
.foot a { color: var(--gips-licht); text-decoration: none; }
.foot a:hover { color: var(--kalk-wit); text-decoration: underline; text-decoration-color: var(--dakpan-licht); }
.foot address { font-style: normal; line-height: 1.75; }
.foot .pair .btn { color: var(--kalk-wit); text-decoration: none; min-height: 52px; font-size: 15.5px; }
.foot__base { margin-top: 48px; padding-top: 20px; padding-bottom: 28px; border-top: 1px solid rgba(231, 205, 189, .14); font-size: 13.5px; color: var(--lood-grijs); }

/* ==================================================== STICKY (mobile) */
.sticky { display: none; }

/* ==================================================== RESPONSIVE */
@media (max-width: 1180px) {
  .head__bar { gap: 16px; }
  .nav__link { padding: 10px 8px; font-size: 15px; }
}

@media (max-width: 1060px) {
  .fold__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 440px); }
  .chat { max-width: 380px; }
  .lead-card__body { grid-template-columns: 1fr; }
  .lead-card__side { align-self: stretch; }
  .breath__row { grid-template-columns: 1fr; justify-items: start; }
  .foot__grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 960px) {
  .head__bar { min-height: 68px; }
  .brand__mark { width: 78px; }
  .brand__word { width: 78px; font-size: 9px; }
  .menu-btn {
    display: inline-flex; align-items: center; gap: 8px; order: 3;
    background: var(--lood); color: var(--kalk-wit); border: 0; border-radius: var(--r);
    height: 44px; padding: 0 14px; font-weight: 700; font-size: 14px; cursor: pointer;
  }
  .menu-btn__bars, .menu-btn__bars::before, .menu-btn__bars::after { display: block; width: 16px; height: 2px; background: currentColor; position: relative; }
  .menu-btn__bars::before, .menu-btn__bars::after { content: ""; position: absolute; left: 0; }
  .menu-btn__bars::before { top: -5px; }
  .menu-btn__bars::after { top: 5px; }
  .head__call { margin-left: auto; order: 2; }
  .nav {
    display: none; order: 4; position: absolute; left: 0; right: 0; top: 100%;
    background: var(--kalk-wit); border-top: 4px solid var(--dakpan); box-shadow: var(--shadow-2);
    margin: 0; padding: 8px var(--gut) 20px;
  }
  .nav.open { display: block; }
  .nav__list { flex-direction: column; align-items: stretch; gap: 0; }
  .nav__item { border-bottom: 1px solid var(--kalk-diep); }
  .nav__link { width: 100%; justify-content: space-between; padding: 14px 4px; font-size: 17px; font-weight: 600; }
  .drop { position: static; box-shadow: none; border-top: 0; padding: 0 0 10px 10px; background: none; min-width: 0; }
  .drop a { padding: 9px 10px; }

  .fold { padding-bottom: 130px; }
  .fold__grid { grid-template-columns: 1fr; gap: 40px; }
  .fold__house { padding-top: 80px; padding-left: 0; display: flex; justify-content: center; }
  .fold__house::before { left: 0; right: 0; bottom: -24px; clip-path: polygon(50% 0, 100% 90px, 100% 100%, 0 100%, 0 90px); }
  .chat { margin: 0 18px; }

  .doors__grid { grid-template-columns: 1fr; }
  .door { padding: 0 0 40px; }
  .door + .door { padding: 40px 0 0; border-left: 0; border-top: 1px solid rgba(231, 205, 189, .22); }
  .door__photo { width: min(100%, 440px); height: auto; aspect-ratio: 16 / 9; }   /* the doors stack: no banner across the whole width */

  .svc-bath__grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "copy" "ba" "acts"; grid-template-rows: auto; }
  .svc-bath__grid .ba { margin-top: 12px; }
  .svc-bath__acts { margin-top: 22px; }
  .nietbij__row { grid-template-columns: 1fr; }
  .owner__grid { grid-template-columns: minmax(0, 1fr); }
  .owner__photo { max-width: 420px; }
  .about__grid { grid-template-columns: 1fr; }
  .area__grid { grid-template-columns: 1fr; }
  .area__map { min-height: 380px; }
  .area__photo { min-height: 0; aspect-ratio: 4 / 3; }
  .faq__grid { grid-template-columns: 1fr; }
  .faq__side { position: static; }
  .contact__grid { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
  body { padding-bottom: 76px; }
  .sticky {
    display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    background: var(--kalk-wit); padding: 8px 10px calc(8px + env(safe-area-inset-bottom));
    box-shadow: 0 -6px 24px rgba(38, 51, 58, .14);
  }
  .pair--sticky { max-width: none; }
  .pair--sticky .btn { min-height: 54px; }
  .pair--sticky::after { box-shadow: 0 0 0 3px var(--kalk-wit); }

  .scope--two { grid-template-columns: 1fr; }
  .rv-grid { grid-template-columns: 1fr; }
  .plats { width: 100%; }
  .plat:first-child { padding-left: 0; border-left: 0; }
  .nap > div { grid-template-columns: 1fr; gap: 2px; }
  .foot__grid { grid-template-columns: 1fr; gap: 32px; }
  .lead-card__photo .label { top: 12px; right: 12px; }
}

@media (max-width: 560px) {
  body { font-size: 16.5px; }
  .head__tel { padding: 9px 10px; font-size: 14.5px; gap: 6px; }
  .head__tel .ico { width: 14px; height: 14px; }
  .head__wa { width: 40px; height: 40px; }
  .menu-btn { padding: 0 11px; }
  .menu-btn__txt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .brand__mark { width: 66px; }
  .brand__word { width: 66px; font-size: 7.6px; letter-spacing: .36em; padding-left: .36em; }

  .lockup--xl { --lw: min(240px, 66vw); }
  .fold__h1 { font-size: clamp(40px, 11.4vw, 50px); }
  .pair .btn { font-size: 15px; padding-left: 12px; padding-right: 12px; gap: 7px; }
  .pair .btn--call { padding-right: 22px; }
  .pair .btn--wa { padding-left: 22px; }
  .pair .hide-s { display: none; }
  .chat { margin: 0 12px; }
  .msg { font-size: 13.5px; }
  .msg__img { height: 150px; }

  .lead-card { padding: 8px; }
  .lead-card__photo { height: 280px; }
  .lead-card__body { margin: -56px 8px 0; padding: 26px 18px 20px; }
  .lead-card__side { padding: 18px 16px; }
  .proof { flex-direction: column; align-items: flex-start; }
  .vraag { gap: 14px; }
  .vraag__wie { width: 48px; height: 48px; }
  .vraag::after { left: 32px; margin-top: 9px; width: 20px; height: 20px; background-size: 12px; }
  .appje { font-size: 17px; }
  .door__photo { width: auto; margin-bottom: 24px; }
  .ba__cap { flex-direction: column; gap: 2px; }
  .roof__in { padding-top: 92px; }
  .qa p { padding-right: 0; }
}

@media (max-width: 400px) {
  .pair .btn { font-size: 14px; gap: 6px; }
  .pair .btn--call { padding-left: 8px; padding-right: 20px; }
  .pair .btn--wa { padding-left: 20px; padding-right: 8px; }
  .pair .btn .ico { width: 16px; height: 16px; }
  .head__bar { gap: 10px; }
}

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

/* ==================================================== PHONE FOLD (below 561px; mobiel 3 variant 2, picked 2026-09-28)
   The fold leads with the firm: the big logo centred, "Eén bedrijf voor het hele huis.", the six trades
   in one sentence, all on one centred axis. Each trade is bold and underlined with a small round picture
   (crops of SAL's own photos, duim/) and links to its section. Under it "Een appje met een foto is
   genoeg." stands in a dark tag that points down into a small WhatsApp window: the client's photo, then
   SAL's answer with a button under it, "App een foto"; the green mark in the window's head opens
   WhatsApp too. (Trades and tag picked the same day from template2-vakken/: trades 1, caption 3; the
   button from template2-knop/: 2.) The bar at the top stays put as you scroll and
   carries its own logo only once the fold is past, so the first screen shows the logo once. The sticky
   Bellen / WhatsApp bar is the one place to call or app. 561 and wider: the desktop fold at the end. */
.mini, .fold__lede, .mini__cap { display: none; }

@media (max-width: 560px) {
  /* ---- a WhatsApp bubble in the palette (the client: gips, right · SAL: kalk-wit, left) ---- */
  .mb {
    position: relative; max-width: 86%; padding: 6px 9px 7px 10px; border-radius: 9px;
    font-size: 14px; line-height: 1.4; color: var(--lood);
    box-shadow: 0 1px 1.5px rgba(38, 51, 58, .13);
  }
  .mb p { margin: 0; }
  .mb p::after { content: ""; display: inline-block; width: var(--tw, 36px); height: 1px; }
  .mb--me { align-self: flex-end; background: var(--gips); --tw: 60px; }
  .mb--sal { align-self: flex-start; max-width: 98%; background: var(--kalk-wit); --tw: 28px; }   /* keeps its time on its own line down to 360 */
  .mb + .mb { margin-top: 10px; }
  .mb--tail.mb--me { border-top-right-radius: 0; }
  .mb--tail.mb--sal { border-top-left-radius: 0; }
  .mb--tail::after { content: ""; position: absolute; top: 0; width: 8px; height: 12px; background: inherit; }
  .mb--tail.mb--me::after { right: -7px; clip-path: polygon(0 0, 100% 0, 0 100%); }
  .mb--tail.mb--sal::after { left: -7px; clip-path: polygon(0 0, 100% 0, 100% 100%); }
  .mb__time {
    position: absolute; right: 8px; bottom: 5px; display: inline-flex; align-items: center; gap: 3px;
    font-size: 10.5px; line-height: 1; color: var(--lood-zacht); white-space: nowrap;
  }
  .mb__time .ticks { width: 16px; height: 10px; }
  .mb--photo { padding: 3px 3px 6px; width: 58%; }
  .mb--photo img { width: 100%; height: 92px; object-fit: cover; object-position: 50% 46%; border-radius: 7px; }
  .mb--photo p { padding: 5px 6px 0 7px; }

  /* ---- the window: a head with SAL's avatar, name and number, then the two messages ---- */
  .mini--win {
    display: block; border-radius: 16px; overflow: hidden;
    background: var(--kalk-wit); border: 1px solid var(--kalk-rand); box-shadow: var(--shadow-1);
  }
  .mini__head { display: flex; align-items: center; gap: 10px; padding: 8px 12px 8px 10px; border-bottom: 1px solid var(--kalk-diep); }
  .mini__av { position: relative; width: 32px; height: 32px; border-radius: 50%; background: var(--dakpan); display: grid; place-items: center; flex: none; }
  .mini__av img { width: 22px; height: auto; }
  .mini__who { display: flex; flex-direction: column; line-height: 1.22; }
  .mini__who b { font-size: 14.5px; }
  .mini__who small { font-size: 12px; color: var(--lood-zacht); }
  .mini__wa { margin-left: auto; width: 30px; height: 30px; border-radius: 50%; background: var(--wa); color: var(--kalk-wit); display: grid; place-items: center; flex: none; }
  .mini__wa .ico { width: 18px; height: 18px; }
  .mini__wa { position: relative; }
  .mini__wa::before { content: ""; position: absolute; inset: -7px; }   /* a 44px tap target round the 30px mark */
  .mini__wa:active { box-shadow: inset 0 0 0 100px rgba(38, 51, 58, .10); }
  .mini__thread { display: flex; flex-direction: column; padding: 12px 14px 14px; background: var(--kalk); }

  /* ---- the button under SAL's answer, inside the bubble below a hairline, as WhatsApp Business shows
     one; the time moves with the text so the button sits clear of it ---- */
  .mb--sal p { position: relative; }
  .mb--sal .mb__time { right: -1px; bottom: -2px; }
  .mb__btn {
    display: flex; align-items: center; justify-content: center; gap: 7px;
    margin: 7px -9px -7px -10px; padding: 9px 12px 10px; border-top: 1px solid var(--kalk-diep);
    color: var(--dakpan); font-weight: 700; font-size: 14.5px; line-height: 1.2; text-decoration: none;
  }
  .mb__btn .ico { width: 18px; height: 18px; fill: var(--wa); }
  .mb__btn:active { background: var(--kalk); }

  /* ---- calls to action cut back hard. The header keeps the logo and the menu, the sections keep
     their words and their linked headings, the contact section keeps its form. ---- */
  .head__call { display: none; }
  .menu-btn { margin-left: auto; }
  .pair--fold,
  .pair__note,
  .lead-card .acts,
  .door .acts,
  .svc-bath__acts,
  .breath--offerte .btn,
  .nietbij__copy .btn,
  .reviews .sec-end,
  .owner__copy .btn,
  .about__copy .btn,
  .area .sec-end,
  .faq .sec-end,
  .pair--contact,
  .foot__col--act { display: none; }
  .nietbij__copy p,
  .owner__copy > p:last-of-type,
  .about__copy > p:last-of-type { margin-bottom: 0; }
  .contact__lead { margin-bottom: 0; }

  /* ---- the bar: it stays at the top as you scroll, but its logo only comes in once you are past the
     fold, so the first screen carries the logo once. script.js sets .is-past (and .is-scrolled);
     without script the bar simply keeps its logo. ---- */
  html { scroll-padding-top: 60px; }
  .head { position: sticky; top: 0; z-index: 1010; transition: box-shadow .25s; }
  .head__bar { min-height: 60px; }
  .head.is-scrolled { box-shadow: 0 1px 0 var(--kalk-diep), 0 8px 20px rgba(38, 51, 58, .07); }
  .brand {
    transition: opacity .32s ease-out, transform .42s cubic-bezier(.2, .7, .2, 1), visibility 0s;
  }
  html.js .head:not(.is-past) .brand {
    opacity: 0; transform: translateY(10px); visibility: hidden;
    transition: opacity .18s, transform .18s, visibility 0s .18s;
  }
  .nav { max-height: calc(100svh - 60px - 70px); overflow-y: auto; overscroll-behavior: contain; }

  /* ---- the fold: one centred axis from the logo down through the headline, the trades and the
     caption, the window under it at full width. The wide fold's chat stays out. ---- */
  .fold { padding-bottom: 92px; }
  .fold__house { display: none; }
  .fold__text { min-width: 0; }
  .fold__firm { text-align: center; }
  .fold__text .lockup { --lw: min(212px, 58vw, 25svh); width: var(--lw); margin: 2px auto clamp(14px, 2.4svh, 20px); }
  .fold__h1 { margin: 0 auto 12px; }
  .fold__lede { display: block; margin: 0 auto; max-width: 21em; text-wrap: balance; font-size: 16.5px; line-height: 1.8; color: var(--lood-zacht); }
  .vak { white-space: nowrap; text-decoration: none; }
  .vak__naam {
    font-weight: 700; color: var(--lood);
    text-decoration: underline; text-decoration-color: var(--dakpan);
    text-decoration-thickness: 2px; text-underline-offset: 3px;
  }
  .vak__duim {
    display: inline-block; width: 1.5em; height: 1.5em; border-radius: 50%; object-fit: cover;
    vertical-align: -.44em; margin-right: .28em;
    box-shadow: 0 0 0 1.5px var(--kalk-wit), 0 1px 3px rgba(38, 51, 58, .28);
  }
  .fold__app { margin-top: clamp(18px, 3svh, 26px); }
  .mini__cap { display: block; margin: 0 0 14px; text-align: center; font-weight: 700; font-size: 15px; line-height: 1.3; color: var(--lood); }
  .cap__txt {
    position: relative; display: inline-block; padding: 9px 17px 10px; border-radius: 999px;
    background: var(--lood); color: var(--kalk-wit);
    font-size: clamp(15px, 4.35vw, 17.5px); line-height: 1.2; white-space: nowrap;
  }
  .cap__txt em { font-style: normal; color: var(--dakpan-licht); }
  .cap__txt::after {   /* the point down into the window */
    content: ""; position: absolute; left: 50%; bottom: -7px; width: 16px; height: 8px; margin-left: -8px;
    background: inherit; clip-path: polygon(0 0, 100% 0, 50% 100%);
  }
}

/* ==================================================== DESKTOP FOLD (561px and up; template2-desktop variant 2, picked 2026-09-28)
   The layout stays bak 2 FG-04 c's: on the left the lockup, the headline, the Bel / App een foto pair
   with its note (the two ratings have since moved to the band); on the right the chat on its brick gable; stacked below 961px.
   Into it the phone's ideas: the headline is the firm, "Eén bedrijf voor het hele huis."; the paragraph
   made way for the place on its own line and the six trades as an index of two columns, each with its
   picture and an arrow, each a link to its section; "Een appje met een foto is genoeg." opens the chat
   as WhatsApp's own notice, where the day stood. The logo shows once: the bar leaves its own out while
   the fold is in view (from 561 up the bar does not stay at the top, so it is gone once you scroll). */
.fold__plek, .vakken, .chat__notice { display: none; }

@media (min-width: 561px) {
  .fold__h1 em { white-space: nowrap; }   /* "het hele huis." stays one line */
  html.js .head:not(.is-past) .brand { visibility: hidden; }

  .fold__plek { display: block; margin: 0 0 16px; font-size: clamp(17px, 1.35vw, 19px); line-height: 1.55; color: var(--lood-zacht); }
  .vakken {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(18px, 2.4vw, 34px);
    max-width: 560px; margin: 0 0 30px;
  }
  .vakken li { border-top: 1px solid var(--kalk-rand); }
  .vakken li:nth-last-child(-n+2) { border-bottom: 1px solid var(--kalk-rand); }
  .vakken__a {
    display: flex; align-items: center; gap: 12px; min-height: 54px; padding: 7px 2px 7px 0;
    font-weight: 700; font-size: clamp(15.5px, 1.2vw, 17px); line-height: 1.2; letter-spacing: -.005em;
    text-decoration: none; color: var(--lood); transition: color .15s;
  }
  .vakken__duim { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; flex: none; box-shadow: 0 1px 3px rgba(38, 51, 58, .22); }
  .vakken__pijl { margin-left: auto; width: 15px; height: 15px; flex: none; color: var(--dakpan); transition: transform .15s; }
  .vakken__a:hover { color: var(--dakpan); }
  .vakken__a:hover .vakken__pijl { transform: translateX(3px); }

  .chat__notice {
    display: flex; align-items: center; gap: 9px; align-self: center; max-width: 92%;
    margin: 2px 0 6px; padding: 9px 16px 10px; border-radius: 10px;
    background: var(--dakpan-wash); color: var(--lood); box-shadow: 0 1px 1px rgba(38, 51, 58, .06);
    font-weight: 700; font-size: 15px; line-height: 1.3; text-align: left;
  }
  .chat__notice .ico { width: 19px; height: 19px; fill: var(--dakpan); }
  .chat__notice em { font-style: normal; color: var(--dakpan); }
}

/* ==================================================== THE BAND (561px and up; template2-strook variant 1, picked 2026-09-28)
   The strip's brick half read as a second call to action and said too much. From 561 up the strip gives
   way to one quiet card on the same seam, all white under a light shadow: the two ratings, out of the
   fold, on the left; the one point of contact on the right, a hairline between; the 5/5s and the 1 as
   figures that answer each other. The small job's half is gone. Below 561 the same card, stacked
   (template2-naad variant 1, picked the same day): the two 5/5s side by side, under a hairline the 1
   without its line; the phone's fold lost its ratings too, and the strip is gone at every width. */
@media (min-width: 561px) {
  .band { position: relative; z-index: 3; margin-top: -104px; background: linear-gradient(transparent 104px, var(--kalk-diep) 104px); }
  .band__obj { display: grid; grid-template-columns: 1fr 1fr; background: var(--kalk-wit); border-radius: var(--r); box-shadow: var(--shadow-1); }
  .band__half { display: flex; align-items: center; padding: clamp(22px, 2.6vw, 32px) clamp(24px, 3.2vw, 44px); }
  .band__half--one { gap: clamp(16px, 2vw, 24px); border-left: 1px solid var(--kalk-diep); }
  .band__rates { display: flex; flex-wrap: wrap; gap: 16px clamp(24px, 3.4vw, 48px); margin: 0; padding: 0; list-style: none; }
  .band__rate { display: flex; align-items: center; gap: 12px; }
  .band__score { font-weight: 800; font-size: clamp(30px, 2.8vw, 40px); line-height: 1; letter-spacing: -.035em; color: var(--lood); }
  .band__who { display: flex; flex-direction: column; gap: 2px; font-size: 14px; line-height: 1.3; color: var(--lood-zacht); }
  .band__who .stars { margin-bottom: 2px; }
  .band .stars svg { width: 14px; height: 14px; }
  .band__plat b { color: var(--lood); font-weight: 700; }
  .band__count { font-size: 13px; }
  .band__fig { flex: none; font-weight: 800; font-size: clamp(62px, 5.6vw, 84px); line-height: .76; letter-spacing: -.06em; color: var(--gips-diep); padding-right: .04em; }
  .band__cap { margin: 0 0 4px; font-weight: 800; font-size: clamp(18px, 1.55vw, 21px); line-height: 1.2; letter-spacing: -.01em; color: var(--lood); }
  .band__line { margin: 0; font-size: 15px; line-height: 1.5; color: var(--lood-zacht); text-wrap: balance; }
}

/* stacked (561–960): the card's halves one above the other */
@media (min-width: 561px) and (max-width: 960px) {
  .band { margin-top: -84px; background: linear-gradient(transparent 84px, var(--kalk-diep) 84px); }
  .band__obj { grid-template-columns: 1fr; }
  .band__half--one { border-left: 0; border-top: 1px solid var(--kalk-diep); }
}

/* the phone (below 561): the card stacked, less deep over the seam */
@media (max-width: 560px) {
  .band { position: relative; z-index: 3; margin-top: -62px; background: linear-gradient(transparent 62px, var(--kalk-diep) 62px); }
  .band__obj { background: var(--kalk-wit); border-radius: var(--r); box-shadow: var(--shadow-1); }
  .band__half--rates { padding: 16px 6px 15px; }
  .band__rates { display: grid; grid-template-columns: 1fr 1fr; margin: 0; padding: 0; list-style: none; }
  .band__rate { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; padding: 0 6px; }
  .band__rate + .band__rate { border-left: 1px solid var(--kalk-diep); }
  .band__score { font-weight: 800; font-size: 28px; line-height: 1; letter-spacing: -.035em; color: var(--lood); }
  .band__who { display: flex; flex-direction: column; align-items: center; font-size: 13px; line-height: 1.3; color: var(--lood-zacht); }
  .band__who .stars { margin: 1px 0 4px; }
  .band .stars svg { width: 12px; height: 12px; }
  .band__plat b { color: var(--lood); font-weight: 700; }
  .band__count { font-size: 12px; }
  .band__half--one { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 13px 18px 14px; border-top: 1px solid var(--kalk-diep); }
  .band__fig { flex: none; font-weight: 800; font-size: 40px; line-height: .76; letter-spacing: -.06em; color: var(--gips-diep); }
  .band__cap { margin: 0; font-weight: 800; font-size: 15.5px; line-height: 1.25; color: var(--lood); text-wrap: balance; }
  .band__line { display: none; }
}

/* ==================================================== THE SECTIONS' CALLS TO ACTION BACK ON THE PHONE
   Below 561px the sections lost their buttons (the cut above). In every section that had one there are now
   two, at full width with the text centred: WhatsApp (.btn--tel, a route per section), and the section's own
   button to the contact form as the alternative, outlined. "Meer over …" stays off; the linked heading does
   that. The fold, the contact section and the footer keep the cut. From 561px up nothing changes. */
.btn--tel { display: none; }
@media (max-width: 560px) {
  .lead-card .acts, .door .acts, .svc-bath__acts, .reviews .sec-end, .area .sec-end, .faq .sec-end {
    display: flex; flex-direction: column; align-items: stretch; gap: 10px; margin-top: 26px; padding-top: 0;
  }
  .lead-card .acts .btn--more, .door .acts .btn--more, .svc-bath__acts .btn--more { display: none; }
  .reviews .sec-end p { text-align: center; }
  .breath--offerte .btn, .nietbij__copy .btn, .owner__copy .btn, .about__copy .btn { display: flex; width: 100%; margin-top: 0; }
  .breath--offerte .btn { justify-self: stretch; }
  .nietbij__copy .btn--tel, .owner__copy .btn--tel, .about__copy .btn--tel { margin-top: 24px; }
  .breath--offerte .btn--tel { margin-top: 6px; }
  .nietbij__copy .btn--tel + .btn, .owner__copy .btn--tel + .btn, .about__copy .btn--tel + .btn { margin-top: 10px; }
  .breath--offerte .btn--tel + .btn { margin-top: -6px; }   /* the band's grid gap is 16px; 10 between the two */
  .btn--tel { display: flex; min-height: 52px; }
  .btn--tel + .btn { min-height: 52px; background: transparent; color: var(--dakpan); box-shadow: inset 0 0 0 2px var(--dakpan); text-align: center; }
  .door .btn--tel + .btn, .breath--offerte .btn--tel + .btn { color: var(--kalk-wit); box-shadow: inset 0 0 0 2px var(--gips-licht); }
}


/* ── 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 var(--dakpan);
  background:var(--kalk);color:var(--lood);
  font:400 15px/1.5 var(--f-sans);
}
.form-demo a{color:var(--dakpan-diep)}