/* 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; }
/* The logo (template2-logo variant 2, picked 2026-09-29): SAL's own round mark, cut from his logo and
   flattened to dakpan, then "Bouwbedrijf" over a big SAL, as his logo stands, in the page's letters.
   --d is the mark's diameter; the words are sized from it. */
.brand { --d: 44px; display: flex; align-items: center; gap: calc(var(--d) * .2); text-decoration: none; flex: none; }
.brand__mark, .lockup__mark { width: var(--d); height: var(--d); max-width: none; flex: none; }
.naam { display: flex; flex-direction: column; align-items: flex-start; line-height: 1; color: var(--dakpan); }
.naam__b { font-weight: 700; font-size: calc(var(--d) * .22); letter-spacing: .02em; }
.naam__s { font-weight: 800; font-size: calc(var(--d) * .86); letter-spacing: -.015em; line-height: .74; margin-top: calc(var(--d) * .07); }

.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; align-items: center; gap: calc(var(--d) * .2); }
.lockup__tag { font-family: var(--f-tech); font-weight: 600; color: var(--dakpan); line-height: 1.2; text-align: left; }

.lockup--xl { --lw: clamp(210px, 20vw, 290px); --d: calc(var(--lw) * .36); width: max-content; margin-bottom: clamp(26px, 3vw, 40px); }

.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%; display: grid; place-items: center; flex: none; }
.chat__avatar img { width: 44px; height: 44px; }
.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; }
/* the heading with its text under it; WhatsApp and the appointment beside them, the appointment outlined
   (under them from 1060px down). The band shows its WhatsApp at every width (operator, 2026-10-02). */
.breath__row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; grid-template-areas: "big wa afspraak" "small wa afspraak"; gap: 12px; align-items: center; }
.breath__big { grid-area: big; align-self: end; margin: 0; font-weight: 800; font-size: clamp(24px, 2.4vw, 32px); letter-spacing: -.02em; line-height: 1.1; }
.breath__small { grid-area: small; align-self: start; margin: 0; font-size: 15.5px; color: var(--gips-licht); max-width: 40em; }
.breath--offerte .btn--tel { display: inline-flex; grid-area: wa; margin-left: clamp(24px, 3.4vw, 48px); }
.breath--offerte .btn--light { grid-area: afspraak; background: transparent; color: var(--kalk-wit); box-shadow: inset 0 0 0 2px var(--gips-licht); }
.breath--offerte .btn--light:hover { background: rgba(255, 252, 247, .1); }

/* ==================================================== 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: 44px clamp(24px, 3vw, 40px) 26px; }
.roof__mark { width: 84px; height: 84px; margin: 0 auto 22px; }
.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(--kalk-wit); border-radius: 50%; box-shadow: 0 0 0 4px var(--kalk-wit), var(--shadow-1); }
.map-home img { width: 50px; height: 50px; }
.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 { --d: 66px; flex-wrap: wrap; }
.lockup--foot .naam { color: var(--kalk); }
.lockup--foot .lockup__tag { flex-basis: 100%; color: var(--gips); font-size: 12px; margin-top: 12px; }
.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: auto auto minmax(0, 1fr); grid-template-areas: "big big big" "small small small" "wa afspraak ."; justify-items: start; }
  .breath--offerte .btn--tel { margin-left: 0; }
  .breath--offerte .btn { margin-top: 10px; }
  .foot__grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 960px) {
  .head__bar { min-height: 68px; }
  .brand { --d: 40px; }
  .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 { --d: 34px; }

  .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; }
  .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%; display: grid; place-items: center; flex: none; }
  .mini__av img { width: 32px; height: 32px; }
  .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: max-content; 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, except the
   offerte band, which keeps its WhatsApp at every width (see .breath__row). */
.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__row { grid-template-columns: minmax(0, 1fr); grid-template-areas: "big" "small" "wa" "afspraak"; gap: 16px; }
  .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); }
}

/* ==================================================== HERBOUW 2026-10-01 — only what is new after the interview.
   Everything above is template2-hardpas as he picked it. */

/* ---- his own pictures, framed as picked (whatsapp/kader.json): --pd is the desktop crop, --pp the phone crop,
   each set on the picture itself; a frame switches where its own shape changes ---- */
.lead-card__photo img, .door__photo img, .owner__photo img, .area__photo img { object-position: var(--pd); }
@media (max-width: 960px) {
  .door__photo img, .owner__photo img, .area__photo img { object-position: var(--pp, var(--pd)); }
}
@media (max-width: 560px) {
  .lead-card__photo img { object-position: var(--pp, var(--pd)); }
}

/* ---- the fold's onderkop, at every width directly under the headline; it carries the place ---- */
.fold__plek { display: block; }
@media (min-width: 561px) {
  .fold__plek { margin: -6px 0 22px; max-width: 25em; font-size: clamp(18px, 1.5vw, 21px); line-height: 1.45; font-weight: 500; color: var(--lood); text-wrap: balance; }
}
@media (max-width: 560px) {
  .fold__plek { margin: 0 auto 10px; max-width: 20em; font-size: 17px; line-height: 1.42; font-weight: 500; color: var(--lood); text-wrap: balance; }
}

/* ---- the band's second half: two years, the figure answering the two 5/5s ---- */
.band__fig--jaar { display: inline-flex; flex-direction: column; align-items: center; }
.band__fig--jaar small {
  margin-top: .2em; padding-left: .2em; font-family: var(--f-tech); font-weight: 700; font-size: 13px;
  letter-spacing: .2em; text-transform: uppercase; line-height: 1; color: var(--dakpan);
}
@media (max-width: 560px) {
  .band__fig--jaar small { font-size: 10px; margin-top: .26em; }
}

/* ---- the brand strip under the card: the label on its own line, the marks in one quiet centred row.
   The three SVGs are one flat shape each (fill currentColor), drawn here as masks in the page's grey;
   Intergas stays its orange square. ---- */
.merken { margin: clamp(26px, 3vw, 36px) 0 0; text-align: center; }
.merken__h {
  margin: 0 0 14px; font-family: var(--f-tech); font-weight: 600; font-size: 12px; letter-spacing: .2em;
  text-transform: uppercase; line-height: 1.3; color: var(--lood-zacht);
}
.merken__rij {
  display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 14px clamp(26px, 4vw, 52px);
  margin: 0; padding: 0; list-style: none; color: var(--lood-zacht);
}
.merken__rij li { display: flex; align-items: center; }
.merk { display: block; flex: none; }
span.merk {
  background: currentColor; opacity: .85;
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-size: contain; mask-size: contain;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
}
.merk--geberit { height: 18px; aspect-ratio: 9284 / 1600; -webkit-mask-image: url(merken/geberit.svg); mask-image: url(merken/geberit.svg); }
.merk--bosch { height: 23px; aspect-ratio: 7144 / 1600; -webkit-mask-image: url(merken/bosch.svg); mask-image: url(merken/bosch.svg); }
.merk--grohe { height: 30px; aspect-ratio: 2084 / 1600; -webkit-mask-image: url(merken/grohe.svg); mask-image: url(merken/grohe.svg); }
.merk--intergas { width: 34px; height: 34px; border-radius: 3px; }
@media (max-width: 560px) {
  .merken { margin-top: 22px; }
  .merken__h { font-size: 11px; margin-bottom: 12px; }
  .merken__rij { gap: 12px 24px; }
  .merk--geberit { height: 14px; }
  .merk--bosch { height: 18px; }
  .merk--grohe { height: 25px; }
  .merk--intergas { width: 28px; height: 28px; }
}

/* ---- thumbnails: small squares of the same job under a main picture; each opens whole in the lightbox ---- */
.duimen { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.duim {
  position: relative; display: block; width: 64px; height: 64px; border-radius: 4px; overflow: hidden; cursor: zoom-in;
  background: var(--kalk-diep); box-shadow: 0 0 0 2px var(--kalk-wit), 0 2px 8px rgba(38, 51, 58, .2);
  transition: box-shadow .15s, transform .15s;
}
.duim img { width: 100%; height: 100%; object-fit: cover; }
.duim:hover { box-shadow: 0 0 0 2px var(--dakpan), 0 4px 12px rgba(38, 51, 58, .24); transform: translateY(-1px); }
.duim:focus-visible { outline-offset: 2px; }
/* the loodgieter card: on the seam where the white card meets the picture, at its right */
@media (min-width: 1061px) {
  .duimen--lead { position: absolute; top: 0; right: clamp(20px, 3.4vw, 44px); z-index: 2; transform: translateY(-50%); }
  .duimen--lead .duim { width: 76px; height: 76px; }
}
@media (min-width: 561px) and (max-width: 1060px) {
  .duimen--lead { position: relative; z-index: 2; justify-content: flex-end; margin: calc(-1 * clamp(28px, 3.6vw, 48px) - 36px) 0 16px; }
}
@media (max-width: 560px) {
  .duimen--lead { position: relative; z-index: 2; justify-content: flex-end; margin: -58px 0 14px; }
  .duimen--lead .duim { width: 56px; height: 56px; }
}
/* the bathroom: under the slider and its caption */
.duimen--ba { margin-top: 14px; }
.duimen--ba .duim { box-shadow: 0 0 0 2px var(--kalk), 0 2px 8px rgba(38, 51, 58, .2); }

/* ---- loodgieter, achter de tegels: three squares of the pipework, small and secondary, under the card ---- */
.tegels {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 18px clamp(24px, 4vw, 56px);
  margin-top: clamp(28px, 3vw, 40px); padding: clamp(18px, 2.2vw, 26px) clamp(20px, 3vw, 36px);
  border: 2px dashed var(--kalk-rand); border-radius: 10px;
}
.tegels__txt .caps { margin-bottom: 8px; }
.tegels__line { margin: 0; font-weight: 700; font-size: clamp(18px, 1.6vw, 22px); line-height: 1.3; letter-spacing: -.01em; max-width: 16em; }
.tegels__rij { display: grid; grid-template-columns: repeat(3, clamp(104px, 11vw, 150px)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.tegels__b {
  display: block; aspect-ratio: 1; border-radius: var(--r); overflow: hidden; cursor: zoom-in;
  background: var(--kalk); box-shadow: var(--shadow-1); transition: transform .15s, box-shadow .15s;
}
.tegels__b img { width: 100%; height: 100%; object-fit: cover; }
.tegels__b:hover { transform: translateY(-2px); box-shadow: 0 0 0 2px var(--dakpan), var(--shadow-1); }
.tegels__cap { display: block; margin-top: 7px; font-family: var(--f-tech); font-weight: 600; font-size: 12px; letter-spacing: .06em; line-height: 1.3; color: var(--lood-zacht); }
@media (max-width: 720px) {
  .tegels { grid-template-columns: minmax(0, 1fr); }
  .tegels__rij { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
}
@media (max-width: 560px) {
  .tegels { padding: 16px 14px 18px; }
  .tegels__cap { font-size: 11px; letter-spacing: .03em; }
}

/* ---- projecten: one job per slide at one height, the frame following the picture (4:5, square, 4:3);
   the row starts on the page's left edge and runs out to the right; swipe, scroll or step with the buttons ---- */
.werk { background: var(--kalk); padding: var(--sec) 0; }
.werk__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px 32px; margin-bottom: clamp(24px, 3vw, 40px); }
.werk__head .sec-h { margin-bottom: 0; }
.werk__nav { display: flex; gap: 10px; flex: none; }
.werk__btn {
  width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; padding: 0; cursor: pointer;
  background: var(--kalk-wit); color: var(--lood); border: 2px solid var(--lood);
  transition: background-color .15s, color .15s, opacity .15s;
}
.werk__btn .ico { width: 20px; height: 20px; }
.werk__btn--prev .ico { transform: rotate(180deg); }
.werk__btn:hover:not(:disabled) { background: var(--lood); color: var(--kalk-wit); }
.werk__btn:disabled { opacity: .28; cursor: default; }
.werk__rij {
  --h: clamp(340px, 34vw, 480px);
  --edge: max(var(--gut), calc((100% - var(--wrap)) / 2));
  position: relative; display: flex; gap: clamp(12px, 1.4vw, 18px); margin: 0; list-style: none;
  padding: 4px var(--edge) 10px; scroll-padding-inline: var(--edge);
  overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none;
}
.werk__rij::-webkit-scrollbar { display: none; }
.werk__slide { flex: none; height: var(--h); aspect-ratio: 4 / 5; max-width: 86vw; scroll-snap-align: start; }
.werk__slide--11 { aspect-ratio: 1; }
.werk__slide--43 { aspect-ratio: 4 / 3; }
.werk__open {
  position: relative; display: block; width: 100%; height: 100%; border-radius: var(--r); overflow: hidden; cursor: zoom-in;
  background: var(--kalk-diep); box-shadow: var(--shadow-1);
}
.werk__open img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s cubic-bezier(.2, .7, .2, 1); }
.werk__open:hover img { transform: scale(1.03); }
.werk__open .label { pointer-events: none; }
.werk__open:focus-visible { outline-offset: -3px; }
.werk__balk { position: relative; height: 3px; margin-top: 22px; border-radius: 2px; background: var(--kalk-rand); overflow: hidden; }
.werk__balk span { position: absolute; top: 0; bottom: 0; left: 0; width: 30%; border-radius: 2px; background: var(--dakpan); transition: left .2s, width .2s; }
@media (max-width: 560px) {
  .werk__rij { --h: min(400px, 104vw); }
  .werk__btn { width: 44px; height: 44px; }
  .werk__btn .ico { width: 18px; height: 18px; }
}

/* ---- over ons: the Bouwmaat cover, whole and small, like a clipping ---- */
.knipsel { display: flex; align-items: center; gap: 22px; margin: 6px 0 30px; max-width: 30em; }
.knipsel__a {
  flex: none; display: block; width: 104px; padding: 5px; background: var(--kalk-wit); cursor: zoom-in;
  box-shadow: 0 1px 2px rgba(38, 51, 58, .12), 0 10px 22px rgba(38, 51, 58, .14);
  transform: rotate(-2.5deg); transition: transform .2s;
}
.knipsel__a:hover { transform: rotate(0deg) scale(1.03); }
.knipsel__a img { width: 100%; height: auto; }
.knipsel__cap { font-size: 15px; line-height: 1.5; color: var(--lood-zacht); }
.knipsel__h {
  display: block; margin-bottom: 5px; font-family: var(--f-tech); font-weight: 600; font-size: 12px;
  letter-spacing: .2em; text-transform: uppercase; color: var(--dakpan);
}
@media (max-width: 560px) {
  .knipsel { gap: 16px; margin-bottom: 4px; }
  .knipsel__a { width: 88px; }
  .knipsel__cap { font-size: 14px; }
}

/* ---- the lightbox: the picture whole on a dark ground; close with ×, Esc or a click beside it ---- */
.lb {
  width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; border: 0;
  padding: 64px clamp(12px, 6vw, 88px); background: rgba(26, 36, 41, .97); color: var(--kalk-wit);
}
.lb[open] { display: flex; align-items: center; justify-content: center; }
.lb::backdrop { background: transparent; }
.lb__fig { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 12px; max-width: 100%; max-height: 100%; }
.lb__img {
  width: auto; height: auto; max-width: 100%; max-height: calc(100vh - 160px); max-height: calc(100svh - 160px);
  border-radius: 4px; box-shadow: var(--shadow-2); background: var(--lood);
}
.lb__cap { font-family: var(--f-tech); font-weight: 600; font-size: 13px; letter-spacing: .08em; color: var(--gips-licht); text-align: center; }
.lb__x, .lb__nav {
  position: fixed; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; cursor: pointer;
  transition: background-color .15s, color .15s;
}
.lb__x { top: 12px; right: 12px; width: 48px; height: 48px; background: var(--kalk-wit); color: var(--lood); font-size: 30px; line-height: 1; }
.lb__x:hover { background: var(--dakpan); color: var(--kalk-wit); }
.lb__nav { top: 50%; width: 52px; height: 52px; margin-top: -26px; background: rgba(255, 252, 247, .14); color: var(--kalk-wit); }
.lb__nav:hover { background: var(--dakpan); }
.lb__nav .ico { width: 22px; height: 22px; }
.lb__nav--prev { left: 12px; }
.lb__nav--prev .ico { transform: rotate(180deg); }
.lb__nav--next { right: 12px; }
.lb--one .lb__nav { display: none; }
html.lb-open { overflow: hidden; }
@media (max-width: 560px) {
  .lb { padding: 64px 10px 84px; }
  .lb__img { max-height: calc(100svh - 190px); }
  .lb__nav { top: auto; bottom: 16px; margin-top: 0; width: 48px; height: 48px; }
  .lb__nav--prev { left: calc(50% - 58px); }
  .lb__nav--next { right: calc(50% - 58px); }
}

/* ---- 2026-10-01, second round: thumbnails under each door's picture, and the bathroom slider upright ---- */
.door__photo + .duimen--door { margin: -14px 0 24px; }
.duimen--door .duim { width: 56px; height: 56px; box-shadow: 0 0 0 2px rgba(231, 205, 189, .55), 0 2px 8px rgba(0, 0, 0, .25); }
.duimen--door .duim:hover { box-shadow: 0 0 0 2px var(--dakpan-licht), 0 4px 12px rgba(0, 0, 0, .3); }
@media (max-width: 560px) {
  .door__photo + .duimen--door { margin: -10px 0 22px; }
  .duimen--door .duim { width: 52px; height: 52px; }
}

/* the pair n=22 → n=37 whole: a 3:4 stage, the same shape as the pictures; on desktop it stays within the
   text column's height (caption and thumbnails included), on narrower screens it keeps to a phone-like width */
.ba__stage { aspect-ratio: 3 / 4; }
@media (min-width: 961px) {
  .svc-bath__grid .ba { width: 100%; max-width: 540px; justify-self: end; }
}
@media (max-width: 960px) {
  .svc-bath__grid .ba { width: 100%; max-width: 460px; }
}

/* ---- A second before/after pair as two thumbnails under a slider (HERBOUW, 2026-10-01) ---- */
.paar { display: flex; align-items: center; gap: 14px; margin-top: 14px; }
.paar__duimen { flex: none; flex-wrap: nowrap; }
.paar__duimen .duim { box-shadow: 0 0 0 2px var(--kalk), 0 2px 8px rgba(38, 51, 58, .2); }
.paar__tag {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 2px 0 3px; text-align: center; pointer-events: none;
  background: rgba(38, 51, 58, .72); color: var(--kalk-wit);
  font-family: var(--f-tech); font-weight: 700; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; line-height: 1.2;
}
.paar__tag--na { background: var(--dakpan); }
.paar__cap { margin: 0; font-size: 14px; line-height: 1.45; color: var(--lood-zacht); }
.paar__cap .label--plain { font-size: 12px; }
@media (max-width: 560px) {
  .paar { align-items: flex-start; }
}

/* HERBOUW: the logo lockup is a link home on every page (the operator, 2026-10-01) */
a.lockup { width: fit-content; color: inherit; text-decoration: none; }
a.lockup:focus-visible { outline: 3px solid var(--dakpan); outline-offset: 4px; border-radius: 4px; }

/* HERBOUW: the "of" rides the seam at 50%, so the two halves must stay equal. In the narrow footer column "WhatsApp"
   would not shrink to half and pushed the seam left, under the badge (the operator, 2026-10-01). */
.pair .btn { min-width: 0; }
.foot .pair .btn { gap: 7px; }
.foot .pair .btn--call { padding-left: 10px; padding-right: 27px; }
.foot .pair .btn--wa { padding-left: 27px; padding-right: 10px; }
@media (min-width: 1101px) { .foot__grid { grid-template-columns: 1.1fr 1fr 1fr minmax(310px, 1.2fr); } }   /* the pair needs 310px */

/* ==================================================== AVG 2026-10-02 — the privacy line in the contact form (the operator
   picked answer 1 of checkpoints/template2-avg): one line above the send button; "Meer over je privacy" unfolds the full
   text right there (a <details>, so it works without script), between the line and the button. What was typed stays. */
.avg1 { margin: 2px 0 18px; interpolate-size: allow-keywords; }
.avg-regel { margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--lood-zacht); }
.avg-knop {
  display: inline-flex; align-items: center; gap: 4px; padding: 1px 0; margin: -1px 0;
  font-weight: 600; color: var(--lood); white-space: nowrap;
  text-decoration: underline; text-decoration-color: var(--dakpan-licht); text-decoration-thickness: 1.5px; text-underline-offset: 3px;
  transition: color .15s, text-decoration-color .15s;
}
summary:hover .avg-knop { color: var(--dakpan); text-decoration-color: var(--dakpan); }
.avg-knop .ico { width: 13px; height: 13px; color: var(--dakpan); transition: transform .2s; }
.avg1 > summary { display: block; list-style: none; cursor: pointer; border-radius: 3px; }
.avg1 > summary::-webkit-details-marker { display: none; }
.avg1[open] > summary .avg-knop .ico { transform: rotate(180deg); }
.avg1__tekst { margin-top: 12px; padding: 16px 18px 6px; background: var(--kalk); border-radius: var(--r); }
.avg-tekst { margin: 0; container-type: inline-size; }
.avg-tekst > div { padding: 9px 0 10px; border-top: 1px solid var(--kalk-diep); }
.avg-tekst > div:first-child { border-top: 0; padding-top: 0; }
.avg-tekst dt {
  font-family: var(--f-tech); font-weight: 600; font-size: 12px; letter-spacing: .14em; text-transform: uppercase;
  line-height: 1.3; color: var(--dakpan); margin-bottom: 3px;
}
.avg-tekst dd { margin: 0; font-size: 14.5px; line-height: 1.5; color: var(--lood); }
.avg-nw { white-space: nowrap; }
.avg-tekst a { color: inherit; white-space: nowrap; text-decoration-color: var(--dakpan-licht); text-underline-offset: 3px; }
.avg-tekst a:hover { color: var(--dakpan); text-decoration-color: var(--dakpan); }
@container (min-width: 480px) {
  .avg-tekst > div { display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: 18px; }
  .avg-tekst dt { margin: 0; padding-top: 3px; }
}
.avg1__dicht {
  display: flex; align-items: center; gap: 5px; margin: 2px 0 0 auto; min-height: 40px; padding: 0 2px;
  border: 0; background: none; font: inherit; font-size: 13.5px; font-weight: 600; color: var(--lood-zacht); cursor: pointer;
}
.avg1__dicht:hover { color: var(--dakpan); }
.avg1__dicht .ico { width: 13px; height: 13px; transform: rotate(180deg); color: var(--dakpan); }
html:not(.js) .avg1__dicht { display: none; }
.avg1::details-content { block-size: 0; overflow: clip; transition: block-size .34s cubic-bezier(.2, .7, .2, 1), content-visibility .34s allow-discrete; }
.avg1[open]::details-content { block-size: auto; }
@media (prefers-reduced-motion: reduce) { .avg1::details-content { transition: none; } }

/* ==================================================== THE "+N" TILE AND THE VIEWER'S COUNTER (template2-fotos, 2026-10-02; from diensten.css, so the homepage has it too)
   A place on a page shows its picks; the photos behind them open only in the viewer. The first of those stands after
   the last thumbnail as a tile, in that thumbnail's own shape (.duim--34, --43, --11, or a .tegel where the place has
   tiles), and says how many there are; the others follow it as hidden links (.meer__rest), so the viewer, which
   steps through every a[data-lb] of one value, opens at the first and steps on through the rest. Markup:
     <li class="meer-plek"><a class="duim duim--34 meer" href="…" data-lb="…" aria-label="Nog 13 foto's bekijken">
       <img …><span class="meer__n" aria-hidden="true"><b>+13</b><span class="meer__w">foto's</span></span></a></li>
   The count is set in the tile's own size (container units), so it holds from "+2" to "+33" on any shape, from a
   48 px thumbnail to a 150 px tile. The operator picked the sluier (2026-10-02): the next photo itself, under a dark
   veil of the page's lood, the count large in white, so you see that there is more, and a little of what. */
.meer { container-type: size; }
.meer__n {
  position: absolute; inset: 0; z-index: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px; pointer-events: none; text-align: center; line-height: 1;
}
.meer__n b { display: block; font-family: var(--f-sans); font-weight: 800; letter-spacing: -.035em; font-variant-numeric: tabular-nums; }
.meer__w { display: block; font-family: var(--f-tech); font-weight: 700; text-transform: uppercase; letter-spacing: .12em; }
.meer img { transition: transform .5s cubic-bezier(.2, .7, .2, 1), filter .2s; }

.meer::after { content: ""; position: absolute; inset: 0; background: rgba(26, 36, 41, .58); transition: background-color .2s; }
.meer:hover::after { background: rgba(26, 36, 41, .36); }
.meer__n { color: var(--kalk-wit); text-shadow: 0 1px 8px rgba(26, 36, 41, .45); }
.meer__n b { font-size: clamp(16px, 36cqmin, 44px); }
.meer__w { display: none; font-size: clamp(10px, 11cqmin, 13px); color: var(--gips-licht); }
@container (min-width: 84px) and (min-height: 84px) { .meer__w { display: block; } }


/* the viewer's counter, top left across from the ×: where you are in this place's photos ("4 / 16") */
.lb__tel {
  position: fixed; top: 12px; left: 12px; margin: 0; height: 48px; padding: 0 18px; display: flex; align-items: center;
  border-radius: 24px; background: rgba(255, 252, 247, .14); color: var(--kalk-wit);
  font-family: var(--f-tech); font-weight: 700; font-size: 15px; letter-spacing: .08em; line-height: 1; font-variant-numeric: tabular-nums;
}
.lb__tel[hidden] { display: none; }

/* every one of the series fits the row: the tile is just its last thumbnail (script.js lays the row out) */
.meer-plek--laatste .meer::after, .meer-plek--laatste .meer__n { display: none; }

/* ==================================================== THE VIEWER: THE WHOLE SERIES AS A STRIP (2026-10-02)
   The operator: the viewer has to show how many photos there are and let you browse them; of three ways he picked
   the strip. script.js puts every photo of the series in it as a thumbnail; one photo alone has none. */
.lb--one .lb__strook { display: none; }
.lb__t { position: relative; flex: none; padding: 0; border: 0; border-radius: 4px; overflow: hidden; cursor: pointer; background: var(--lood); }
.lb__t img { display: block; width: 100%; height: 100%; object-fit: cover; }
.lb__t::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 2px transparent; transition: box-shadow .15s; }
.lb__t.is-nu::after { box-shadow: inset 0 0 0 3px var(--kalk-wit); }
.lb__t:focus-visible { outline: 2px solid var(--dakpan-licht); outline-offset: 2px; }

/* every photo as a thumbnail along the foot; the current one lit, the rest dimmed; it scrolls to keep
   the current one in the middle. The photo gives up the strip's height. */
.lb { padding-bottom: 104px; }
.lb__img { max-height: calc(100vh - 232px); max-height: calc(100svh - 232px); }
.lb__strook {
  display: flex; gap: 6px; position: fixed; left: 50%; bottom: 14px; transform: translateX(-50%); max-width: calc(100% - 24px);
  padding: 6px; overflow-x: auto; scrollbar-width: none; overscroll-behavior: contain; border-radius: 8px; background: rgba(255, 252, 247, .08);
}
.lb__strook::-webkit-scrollbar { display: none; }
.lb__strook .lb__t { width: 56px; height: 56px; opacity: .55; transition: opacity .15s; }
.lb__strook .lb__t:hover, .lb__strook .lb__t.is-nu { opacity: 1; }
@media (max-width: 560px) {
  .lb { padding-bottom: 150px; }
  .lb__img { max-height: calc(100svh - 270px); }
  .lb__strook { bottom: 76px; }
  .lb__strook .lb__t { width: 48px; height: 48px; }
}