/* Hendriks Kozijnen — the layout of template 2, dressed in the look of Hendriks' fold L4-04.
   Every colour below is one of L4-04's (#16120F ground, #EFE6D6 ink, #C8904A copper, #D9A869 light
   copper) or a mix of them; WhatsApp keeps #25D366; the logo keeps its own inks (#E5E6E3, #55574F). */
:root {
  --nacht: #16120F;          /* the ground */
  --nacht-2: #1F1B17;        /* the ground, 4% ink: a lifted section */
  --nacht-3: #27231F;        /* 8% ink: cards and menus on the ground */
  --nacht-4: #34302B;        /* 14% ink: the phone's caption */
  --koper-nacht: #281F15;    /* the ground, 10% copper */
  --room: #EFE6D6;           /* the ink, and the lighter ground */
  --room-75: #B9B1A4;        /* body copy on the ground: three quarters of the ink */
  --midden: #827C72;         /* half ink, half ground */
  --room-2: #E2D9CA;         /* the lighter ground, 6% ground */
  --room-3: #D3CABC;         /* rules on the lighter ground */
  --inkt-75: #4C4741;        /* body copy on the lighter ground */
  --koper: #C8904A;
  --koper-licht: #D9A869;
  --koper-was: #E5D0B3;      /* the ink, 25% copper: the customer's bubble */
  --lijn: rgba(239, 230, 214, .14);
  --lijn-2: rgba(239, 230, 214, .26);
  --lijn-d: rgba(22, 18, 15, .16);
  --merk: #E5E6E3;           /* the logo's light ink (merk.svg) */
  --merk-donker: #55574F;    /* the logo on a light ground (merk-donker.svg) */
  --wa: #25D366;

  --shadow-1: 0 1px 2px rgba(22, 18, 15, .3), 0 8px 24px rgba(22, 18, 15, .3);
  --shadow-2: 0 2px 4px rgba(22, 18, 15, .35), 0 24px 60px rgba(22, 18, 15, .55);

  --f-sans: 'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --f-kop: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;

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

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--f-sans);
  font-weight: 400;
  font-size: 17px;
  line-height: 1.6;
  color: var(--room-75);
  background: var(--nacht);
  -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: 2px solid var(--koper); outline-offset: 3px; }

/* ---------- the logo: the corner frame as a file (merk.svg), the words as text, set in the logo's own
   faces. Sized by --ls, the size of "Hendriks"; every offset below was fitted to logo-2.png. ---------- */
.logo {
  position: relative; display: inline-flex; flex-direction: column; align-items: flex-start;
  font-size: var(--ls, 30px); line-height: 1; padding-top: .12em; color: var(--merk); text-decoration: none;
}
.logo--donker { color: var(--merk-donker); }
.logo__naam { display: block; width: 4.93em; }
.logo__h { display: block; font-family: 'Ubuntu', var(--f-sans); font-weight: 500; font-size: 1em; line-height: 1; }
.logo__k { display: block; font-family: 'Catamaran', var(--f-sans); font-weight: 500; font-size: .8509em; line-height: 1; margin: -.032em 0 0 .0564em; }
.logo__frame { position: absolute; left: 3.3524em; top: .0023em; width: auto; height: 1.72em; max-width: none; }
.logo__tag { display: block; font-family: 'Encode Sans', var(--f-sans); font-weight: 600; font-size: .3518em; line-height: 1; margin: .651em 0 0 .2537em; white-space: nowrap; }

/* ---------- small capitals: Hanken Grotesk, letterspaced wide, in copper ---------- */
.caps {
  font-family: var(--f-sans);
  font-weight: 600;
  font-size: 12.5px;
  letter-spacing: .26em;
  text-transform: uppercase;
  line-height: 1.3;
  margin: 0 0 16px;
}
.caps--dark, .caps--light { color: var(--koper); }

/* ---------- headlines: Cormorant Garamond 500, large and tight, one phrase in its italic ---------- */
.band__score { font-variant-numeric: lining-nums; }
.sec-h {
  font-family: var(--f-kop);
  font-weight: 500;
  font-size: clamp(40px, 4.4vw, 62px);
  line-height: 1.02;
  letter-spacing: -.01em;
  margin-bottom: 22px;
  text-wrap: balance;
  color: var(--room);
}
.sec-h em, .fold__h1 em, .nietbij__h em { font-style: italic; color: var(--koper-licht); }
.sec-h--light { color: var(--room); }

/* ---------- buttons: Hanken 600, square; the primary filled copper with dark letters ---------- */
.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: 600; font-size: 16px; line-height: 1.1;
  text-decoration: none; border: 0; border-radius: 0; cursor: pointer;
  transition: background-color .15s, color .15s, box-shadow .15s, transform .15s;
}
.btn .ico { width: 18px; height: 18px; }
.btn--main { background: var(--koper); color: var(--nacht); }
.btn--main:hover { background: var(--koper-licht); }
.btn--light { background: var(--nacht); color: var(--room); }
.btn--light:hover { background: var(--nacht-3); }
.btn--more {
  background: transparent; color: var(--room); padding: 0 6px; min-height: 52px;
  font-weight: 500; text-decoration: underline; text-decoration-color: var(--lijn-2);
  text-underline-offset: 6px; text-decoration-thickness: 1px;
}
.btn--more:hover { text-decoration-color: var(--koper-licht); color: var(--koper-licht); }
.btn--more .ico { width: 15px; height: 15px; }
.btn--block { width: 100%; }

.btn--call { background: var(--koper); color: var(--nacht); }
.btn--call:hover { background: var(--koper-licht); }
.btn--wa { background: var(--wa); color: var(--nacht); }
.btn--wa:hover { box-shadow: inset 0 0 0 100px rgba(22, 18, 15, .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: 0; padding-right: 30px; }
.pair .btn--wa { border-radius: 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(--nacht); color: var(--room);
  font-family: var(--f-sans); font-weight: 600; font-size: 13px; letter-spacing: .04em;
  box-shadow: 0 0 0 3px var(--nacht);
  pointer-events: none;
}
.pair__note { margin: 10px 0 0; font-size: 14px; color: var(--room-75); }

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

/* ---------- labels on photos: small and quiet, where + when, letterspaced wide ---------- */
.label {
  position: absolute; left: 14px; bottom: 14px;
  font-family: var(--f-sans); font-weight: 600; font-size: 11px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--room); background: rgba(22, 18, 15, .62);
  padding: 5px 10px 5px 11px; line-height: 1.4;
}
.label--plain { position: static; background: none; color: var(--room-75); padding: 0; }

/* ---------- appje: the customer's question opens each service under its heading, in quotes; the person
   who asks it beside it, a different one per section (klant-1 … klant-6.svg), with a small app badge ---------- */
.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(--koper) 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='%2316120F'/%3E%3C/svg%3E") 50% 55% / 13px no-repeat;
  box-shadow: 0 0 0 2.5px var(--nacht);
}
.svc-bath .vraag::after { box-shadow: 0 0 0 2.5px var(--nacht); }
.door .vraag::after { box-shadow: 0 0 0 2.5px var(--room); }
.appje {
  margin: 0; max-width: 24em; quotes: "\201C" "\201D";
  font-size: clamp(18px, 1.6vw, 21px); font-weight: 500; line-height: 1.4; letter-spacing: -.005em;
  color: var(--room); text-indent: -.4em; text-wrap: pretty;
}
.appje::before { content: open-quote; color: var(--koper); }
.appje::after { content: close-quote; color: var(--koper); }
.door .appje { color: var(--nacht); }

.svc-h { font-family: var(--f-kop); font-weight: 500; font-size: clamp(44px, 5vw, 70px); line-height: .98; letter-spacing: -.01em; margin-bottom: 20px; color: var(--room); }
.svc-h a { text-decoration: none; display: inline-flex; align-items: center; gap: .22em; }
.svc-h a .ico { width: .4em; height: .4em; color: var(--koper); transition: transform .15s; }
.svc-h a:hover { color: var(--koper-licht); }
.svc-h a:hover .ico { transform: translateX(4px); }
.svc-h--door { font-size: clamp(38px, 3.7vw, 52px); }

.laatst, .prijs { font-size: 14.5px; color: var(--room-75); line-height: 1.5; }
.prijs { margin-bottom: .7em; }
.laatst__tag {
  font-family: var(--f-sans); font-weight: 600; font-size: 10.5px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--koper); border: 1px solid currentColor; padding: 1px 6px 1px 7px; margin-right: 6px;
  vertical-align: 1px;
}

/* ==================================================== HEADER */
.head { position: relative; z-index: 50; background: var(--nacht); }
.head__bar { display: flex; align-items: center; gap: 28px; min-height: 80px; }
/* The logo in the bar: the frame and the two words, the small line left behind (L2-05) */
.brand { --ls: 30px; display: flex; align-items: center; text-decoration: none; flex: none; }

.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(--room);
  background: none; border: 0; cursor: pointer; border-radius: 0;
}
.nav__link:hover { color: var(--koper-licht); }
.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(--nacht-3); border-radius: 0; padding: 10px;
  box-shadow: var(--shadow-2); border-top: 2px solid var(--koper);
}
.drop a {
  display: block; padding: 10px 14px; text-decoration: none; font-weight: 500; font-size: 15.5px; color: var(--room);
}
.drop a:hover { background: var(--nacht-2); color: var(--koper-licht); }
.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: 0; min-height: 44px;
  font-weight: 600; font-size: 16px; text-decoration: none; color: var(--nacht); background: var(--koper);
}
.head__tel:hover { background: var(--koper-licht); }
.head__wa {
  display: grid; place-items: center; width: 44px; height: 44px; border-radius: 0;
  background: var(--wa); color: var(--nacht);
}
.head__wa .ico { width: 22px; height: 22px; }

.menu-btn { display: none; }

/* ==================================================== FOLD */
.fold { position: relative; background: var(--nacht); 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; }

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

.fold__h1 {
  font-family: var(--f-kop); font-weight: 500; font-size: clamp(50px, 5.6vw, 84px); line-height: .96; letter-spacing: -.012em;
  color: var(--room); max-width: 9.6em; margin-bottom: 24px;
}
.fold__h1 em { white-space: nowrap; }   /* "meer dan een raam" stays one line, at every width */
.fold__onder { margin: 0 0 26px; max-width: 31em; font-size: clamp(17px, 1.35vw, 19px); line-height: 1.55; color: var(--room-75); }


/* the chat stands on a copper panel, the fold's one large block of colour */
.fold__house { position: relative; padding-top: 88px; align-self: stretch; }
.fold__house::before {
  content: ""; position: absolute; top: 36px; right: 0; bottom: -120px; left: 40px;
  background: var(--koper);
}

.chat {
  position: relative; z-index: 1; width: 100%; max-width: 420px;
  background: var(--room); border-radius: 6px; overflow: hidden;
  box-shadow: var(--shadow-2);
}
.chat__head { display: flex; align-items: center; gap: 12px; padding: 14px 18px; background: var(--room); border-bottom: 1px solid var(--room-3); }
.chat__avatar { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; flex: none; background: var(--nacht); }
.chat__avatar img { width: 21px; height: auto; margin: 0 0 0 1px; }
.chat__who { display: flex; flex-direction: column; line-height: 1.25; }
.chat__who b { font-size: 15.5px; font-weight: 600; color: var(--nacht); }
.chat__who small { font-size: 12.5px; color: var(--inkt-75); }

.chat__thread { display: flex; flex-direction: column; gap: 8px; padding: 14px 14px 16px; background: var(--room-2); }
.msg { position: relative; max-width: 84%; padding: 8px 12px 20px; border-radius: 10px; font-size: 14px; line-height: 1.42; color: var(--nacht); box-shadow: 0 1px 1px rgba(22, 18, 15, .08); }
.msg p { margin: 0; }
.msg--in { align-self: flex-end; background: var(--koper-was); border-bottom-right-radius: 3px; }
.msg--out { align-self: flex-start; background: var(--room); 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% 45%; border-radius: 7px; }
.msg__time { position: absolute; right: 10px; bottom: 4px; font-size: 10.5px; color: var(--inkt-75); display: inline-flex; align-items: center; gap: 3px; }
.ticks { width: 16px; height: 10px; color: var(--inkt-75); }

.chat__bar { display: flex; align-items: center; gap: 10px; padding: 10px 12px 12px; background: var(--room-2); border-top: 1px solid var(--room-3); }
.chat__field { flex: 1; background: var(--room); border-radius: 22px; padding: 10px 16px; font-size: 14px; color: var(--midden); }
.chat__cam { width: 42px; height: 42px; border-radius: 50%; background: var(--koper); color: var(--nacht); display: grid; place-items: center; }
.chat__cam .ico { width: 18px; height: 18px; }

/* ==================================================== KUNSTSTOF KOZIJNEN (the main card) */
.svc-lead { background: var(--nacht-2); padding: clamp(56px, 7vw, 96px) 0 var(--sec); }
.lead-card { background: var(--nacht); border: 1px solid var(--lijn-2); padding: 12px; }
.lead-card__photo { position: relative; height: clamp(300px, 36vw, 470px); overflow: hidden; }
.lead-card__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 44%; }
.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(--nacht); border-top: 3px solid var(--koper);
  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(48px, 5.5vw, 78px); }
.lead-card__copy > p:not(.appje):not(.laatst):not(.prijs) { font-size: 17.5px; }

.lead-card__side { background: var(--nacht-2); 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 30px; border-bottom: 1px solid var(--lijn);
  font-weight: 500; font-size: 17px; line-height: 1.35; color: var(--room);
}
.scope li:last-child { border-bottom: 0; }
.scope li::before {
  content: ""; position: absolute; left: 2px; top: 23px; width: 16px; height: 1.5px; background: var(--koper);
}
.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 24px; border-bottom: 1px solid var(--lijn); }
.scope--two li:last-child { border-bottom: 1px solid var(--lijn); }
.scope--two li::before { width: 12px; top: 20px; }

.proof { display: flex; align-items: center; gap: 16px; margin-top: 18px; padding-top: 18px; border-top: 1px dashed var(--lijn-2); }
.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: 600; font-size: 15px;
  background: var(--nacht-3); color: var(--koper-licht); border: 2.5px solid var(--nacht-2);
}
.proof__faces span:first-child { margin-left: 0; }
.proof__faces span:nth-child(2) { background: var(--koper-nacht); }
.proof__faces span:nth-child(4) { background: var(--koper-nacht); }
.proof__faces span:last-child { background: var(--koper); color: var(--nacht); }
.proof__lead { margin: 0 0 2px; font-weight: 600; font-size: 15.5px; color: var(--room); }
.proof__score { margin: 0; font-size: 13.5px; color: var(--room-75); line-height: 1.45; }
.proof__score b { color: var(--room); font-weight: 600; }
.proof__plat { white-space: nowrap; }
.proof .stars svg { width: 14px; height: 14px; }

/* ==================================================== ONE-BREATH BAND */
.breath--offerte { background: var(--koper); color: var(--nacht); 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-family: var(--f-kop); font-weight: 500; font-size: clamp(28px, 2.9vw, 40px); letter-spacing: -.005em; line-height: 1.05; color: var(--nacht); }
.breath__small { margin: 0; font-size: 15.5px; color: rgba(22, 18, 15, .82); max-width: 36em; }

/* ==================================================== DOORS (the pair, on the lighter ground) */
.doors { background: var(--room); color: var(--inkt-75); 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 var(--lijn-d); }
.door > p:not(.appje):not(.prijs) { color: var(--inkt-75); max-width: 30em; }
.door .svc-h { color: var(--nacht); }
.door .svc-h a:hover { color: var(--inkt-75); }
.door .svc-h a .ico { color: var(--koper); }
.door .prijs { color: var(--inkt-75); }
.door .laatst__tag { color: var(--nacht); border-color: var(--koper); }
.door .acts { margin-top: auto; padding-top: 18px; }
.door .btn--more { color: var(--nacht); text-decoration-color: rgba(22, 18, 15, .3); }
.door .btn--more:hover { color: var(--nacht); text-decoration-color: var(--koper); }
/* each door headed by a picture of the finished work, place + date on it; --fp frames each photo */
.door__photo { position: relative; height: clamp(172px, 15.5vw, 206px); margin: 0 0 28px; overflow: hidden; }
.door__photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: var(--fp, 50% 50%); }

/* ==================================================== SCHUIFPUIEN (the larger section, with the slider) */
.svc-bath { background: var(--nacht); 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; overflow: hidden; box-shadow: var(--shadow-2); background: var(--nacht-2); border: 1px solid var(--lijn-2); }
.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-sans); font-weight: 600; font-size: 11px; letter-spacing: .24em; text-transform: uppercase;
  padding: 5px 10px 5px 12px; pointer-events: none;
}
.ba__tag--voor { left: 14px; background: var(--room); color: var(--nacht); }
.ba__tag--na { right: 14px; background: var(--koper); color: var(--nacht); }
.ba__line { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 2px; margin-left: -1px; background: var(--room); 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(--room); color: var(--nacht);
  box-shadow: 0 0 0 4px rgba(22, 18, 15, .35), 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: 2px solid var(--koper); outline-offset: 3px; }
.ba__cap { display: flex; justify-content: space-between; gap: 12px; margin-top: 12px; font-size: 13px; color: var(--room-75); }
.ba__hint { font-size: 13px; }

/* ==================================================== TWIJFEL JE (after the last service) */
.nietbij { background: var(--koper-nacht); padding: clamp(56px, 6vw, 88px) 0; border-bottom: 2px solid var(--koper); }
.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-family: var(--f-kop); font-weight: 500; font-size: clamp(42px, 5vw, 70px); line-height: 1; letter-spacing: -.01em; color: var(--room); text-wrap: balance; }
.nietbij__copy p { font-size: 18px; margin-bottom: 22px; color: var(--room-75); }

/* ==================================================== REVIEWS */
.reviews { background: var(--nacht-2); 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: 1px solid var(--lijn-2); }
.plat__name { margin: 0 0 4px; font-weight: 600; font-size: 17px; color: var(--room); }
.plat__score { margin: 0; font-size: 14.5px; font-weight: 600; color: var(--room); 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(--room-75); }

.rv-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(16px, 2vw, 24px); }
.rv {
  background: var(--nacht); padding: clamp(22px, 2.6vw, 32px);
  border: 1px solid var(--lijn); border-top: 3px solid var(--koper);
  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: 600; font-size: 18px;
  background: var(--nacht-3); color: var(--koper-licht);
}
.rv__who { display: flex; flex-direction: column; line-height: 1.25; }
.rv__who b { font-size: 16.5px; font-weight: 600; color: var(--room); }
.rv__who small { font-size: 13.5px; color: var(--room-75); }
.rv__via {
  margin-left: auto; align-self: flex-start;
  font-family: var(--f-sans); font-weight: 600; font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--room-75); border: 1px solid var(--lijn-2); padding: 3px 8px 3px 9px; white-space: nowrap;
}
.rv__stars { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; font-size: 13.5px; color: var(--room-75); }
.rv__stars .stars svg { width: 18px; height: 18px; }
.rv__txt p { margin: 0; font-size: 16.5px; line-height: 1.6; color: var(--room-75); }

.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: 600; font-size: 18px; color: var(--room); }
.sec-end--left { justify-content: flex-start; }

/* ==================================================== OWNER */
.owner { background: var(--nacht); 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; }
.owner__photo img { width: 100%; height: auto; aspect-ratio: 1122 / 1402; object-fit: cover; }
.owner__photo::after {   /* a copper frame, offset behind the picture */
  content: ""; position: absolute; left: -14px; right: 14px; top: 14px; bottom: -14px;
  border: 1px solid var(--koper); 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: 400; color: var(--room); }
.owner__copy > p:not(.caps):not(.owner__lead) { color: var(--room-75); }
.owner__copy .btn { margin-top: 8px; }

/* ==================================================== OVER ONS + WERKGEBIED (one ground) */
.pairsec { background: var(--koper-nacht); }
.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; }

/* the card of what they make, on the lighter ground, the logo on it in its dark ink */
.lijst { position: relative; background: var(--room); border-top: 3px solid var(--koper); max-width: 460px; justify-self: center; width: 100%; }
.lijst__in { padding: 40px clamp(24px, 3vw, 40px) 26px; }
.lijst__merk { width: max-content; margin: 0 auto 28px; }
.lijst__merk .logo { --ls: 34px; }
.lijst__items li { border-top: 1px solid var(--lijn-d); }
.lijst__items a {
  display: flex; justify-content: space-between; align-items: center; padding: 12px 2px;
  font-weight: 500; font-size: 18px; text-decoration: none; color: var(--nacht);
}
.lijst__items a::after { content: "→"; color: var(--koper); font-weight: 600; transition: transform .15s; }
.lijst__items a:hover { color: var(--inkt-75); }
.lijst__items a:hover::after { transform: translateX(3px); }

.area { padding: 0 0 var(--sec); }
.area__head { border-top: 1px solid var(--koper); 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; color: var(--room-75); }
.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: 1px solid var(--lijn-2); overflow: hidden; background: var(--nacht-2); }
.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: 500; padding: 5px 12px; color: var(--room);
  background: transparent; border: 1px solid var(--lijn-2);
}
.places li:nth-child(-n+6) { background: var(--koper); border-color: var(--koper); color: var(--nacht); }
.area__photo { position: relative; flex: 1; min-height: 260px; }
.area__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 56% 50%; }

/* Leaflet, dressed in the palette */
.leaflet-container { font-family: var(--f-sans); background: var(--nacht-2); }
.leaflet-tile-pane { filter: sepia(.4) saturate(.7) brightness(.92); }
.leaflet-control-zoom a { background: var(--nacht-3); color: var(--room); border-color: var(--lijn-2); }
.leaflet-control-zoom a:hover { background: var(--nacht-2); color: var(--koper-licht); }
.leaflet-bar { border-radius: 0; }
.leaflet-bar a, .leaflet-bar a:first-child, .leaflet-bar a:last-child { border-radius: 0; }
.leaflet-control-attribution { background: rgba(22, 18, 15, .8); color: var(--room-75); font-size: 10px; }
.leaflet-container .leaflet-control-attribution a { color: var(--room-75); }
.map-home { display: grid; place-items: center; width: 46px; height: 46px; background: var(--nacht); border-radius: 50%; box-shadow: 0 0 0 2px var(--koper), var(--shadow-1); }
.leaflet-container .map-home img { width: auto; height: 22px; margin-left: 1px; }   /* leaflet sets width:auto on marker images; size by height */
.leaflet-tooltip.map-lbl {
  background: var(--nacht); color: var(--room); border: 1px solid var(--lijn-2); border-radius: 0; box-shadow: none;
  font-family: var(--f-sans); font-weight: 600; font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; padding: 2px 7px 2px 8px;
}
.leaflet-tooltip.map-lbl::before { display: none; }
.leaflet-tooltip.map-lbl--home { background: var(--koper); color: var(--nacht); border-color: var(--koper); font-size: 11.5px; }

/* ==================================================== FAQ */
.faq { background: var(--nacht); 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(--room-75); }
.qa { border-top: 1px solid var(--lijn-2); }
.qa:last-child { border-bottom: 1px solid var(--lijn-2); }
.qa summary {
  list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding: 20px 2px; font-weight: 500; font-size: clamp(18px, 1.5vw, 20px); line-height: 1.3; color: var(--room);
}
.qa summary::-webkit-details-marker { display: none; }
.qa summary::after {
  content: ""; flex: none; width: 9px; height: 9px; margin-right: 4px;
  border-right: 1.5px solid var(--koper); border-bottom: 1.5px solid var(--koper);
  transform: translateY(-3px) rotate(45deg); transition: transform .2s;
}
.qa[open] summary::after { transform: translateY(2px) rotate(-135deg); }
.qa summary:hover { color: var(--koper-licht); }
.qa p { margin: -6px 0 22px; padding-right: 40px; color: var(--room-75); font-size: 16.5px; }

/* ==================================================== CONTACT */
.contact { background: var(--nacht-2); color: var(--room); 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(--room-75); max-width: 30em; margin-bottom: 28px; }
.pair--contact::after { box-shadow: 0 0 0 3px var(--nacht-2); }
.pair--foot::after { box-shadow: 0 0 0 3px var(--nacht); }
.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 var(--lijn); }
.nap dt { font-family: var(--f-sans); font-weight: 600; font-size: 11.5px; letter-spacing: .22em; text-transform: uppercase; color: var(--koper); padding-top: 4px; }
.nap dd { margin: 0; font-size: 16.5px; color: var(--room); }
.nap a { color: var(--room); text-decoration-color: var(--koper); text-underline-offset: 4px; }

.form { background: var(--room); color: var(--nacht); padding: clamp(24px, 3.4vw, 40px); box-shadow: var(--shadow-2); border-top: 3px solid var(--koper); }
.form__title { font-family: var(--f-kop); font-weight: 500; font-size: 34px; letter-spacing: -.005em; margin-bottom: 4px; line-height: 1.1; }
.form__sub { color: var(--inkt-75); font-size: 15px; margin-bottom: 22px; }
.fld { display: block; margin-bottom: 16px; }
.fld > span { display: block; font-weight: 500; font-size: 14.5px; margin-bottom: 6px; }
.fld em { font-style: normal; font-weight: 400; color: var(--inkt-75); }
.fld input, .fld textarea {
  width: 100%; font: inherit; font-size: 16px; color: var(--nacht);
  background: var(--room-2); border: 1px solid var(--room-3); border-radius: 0; padding: 12px 14px;
}
.fld textarea { resize: vertical; min-height: 120px; }
.fld input:focus, .fld textarea:focus { outline: none; border-color: var(--koper); background: var(--room); box-shadow: 0 0 0 3px rgba(200, 144, 74, .28); }
.fld input:user-invalid, .fld textarea:user-invalid { border-color: var(--koper); }
.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(--inkt-75); text-align: center; }

/* ==================================================== FOOTER */
.foot { background: var(--nacht); color: var(--room-75); padding: clamp(56px, 6vw, 80px) 0 0; border-top: 1px solid var(--lijn); }
.foot__grid { display: grid; grid-template-columns: 1.1fr 1fr 1fr 1.2fr; gap: 40px; }
.lockup--foot { flex-wrap: wrap; }
.lockup--foot .logo { --ls: 36px; }
.foot__h { font-family: var(--f-sans); font-weight: 600; font-size: 11.5px; letter-spacing: .24em; text-transform: uppercase; color: var(--koper); margin-bottom: 14px; }
.foot ul li { margin-bottom: 6px; }
.foot a { color: var(--room-75); text-decoration: none; }
.foot a:hover { color: var(--room); text-decoration: underline; text-decoration-color: var(--koper); }
.foot address { font-style: normal; line-height: 1.75; }
.foot .pair .btn { color: var(--nacht); 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 var(--lijn); font-size: 13.5px; color: var(--midden); }

/* ==================================================== 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 { --ls: 27px; }
  .menu-btn {
    display: inline-flex; align-items: center; gap: 8px; order: 3;
    background: transparent; color: var(--room); border: 0; border-radius: 0; box-shadow: inset 0 0 0 1px rgba(239, 230, 214, .55);
    height: 44px; padding: 0 14px; font-weight: 600; font-size: 14px; cursor: pointer;
  }
  .menu-btn__bars, .menu-btn__bars::before, .menu-btn__bars::after { display: block; width: 16px; height: 1.5px; 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(--nacht); border-top: 2px solid var(--koper); 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(--lijn); }
  .nav__link { width: 100%; justify-content: space-between; padding: 14px 4px; font-size: 17px; font-weight: 500; }
  .drop { position: static; box-shadow: none; border-top: 0; padding: 0 0 10px 10px; background: none; min-width: 0; }
  .drop a { padding: 9px 10px; color: var(--room-75); }

  .fold { padding-bottom: 130px; }
  .fold__grid { grid-template-columns: 1fr; gap: 40px; }
  .fold__house { padding-top: 64px; padding-left: 0; display: flex; justify-content: center; }
  .fold__house::before { top: 0; left: 0; right: 0; bottom: -24px; }
  .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 var(--lijn-d); }
  .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(--nacht); padding: 8px 10px calc(8px + env(safe-area-inset-bottom));
    border-top: 1px solid var(--lijn); box-shadow: 0 -6px 24px rgba(22, 18, 15, .5);
  }
  .pair--sticky { max-width: none; }
  .pair--sticky .btn { min-height: 54px; }
  .pair--sticky::after { box-shadow: 0 0 0 3px var(--nacht); }

  .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 { --ls: 24px; }

  .lockup--xl { --lw: min(240px, 66vw); }
  .fold__h1 { font-size: clamp(44px, 12.6vw, 56px); }
  .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)
   The fold leads with the firm: the big logo centred, the slogan, the onderkop, the four services in one
   line, all on one centred axis. Each service is underlined with a small square picture (crops of
   Hendriks' own photos, duim/) and links to its section. Under it "Stuur maar een foto van je raam."
   stands in a dark tag that points down into a small WhatsApp window: the customer's photo, then the
   firm's answer with a button under it, "App een foto"; the green mark in the window's head opens
   WhatsApp too. 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 customer: copper-washed ink, right · the firm: the ink, left) ---- */
  .mb {
    position: relative; max-width: 86%; padding: 6px 9px 7px 10px; border-radius: 9px;
    font-size: 14px; line-height: 1.4; color: var(--nacht);
    box-shadow: 0 1px 1.5px rgba(22, 18, 15, .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(--koper-was); --tw: 60px; }
  .mb--wij { align-self: flex-start; max-width: 98%; background: var(--room); --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--wij { 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--wij::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(--inkt-75); 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% 50%; border-radius: 7px; }
  .mb--photo p { padding: 5px 6px 0 7px; }

  /* ---- the window: a head with the frame, the name and the number, then the two messages ---- */
  .mini--win {
    display: block; border-radius: 6px; overflow: hidden;
    background: var(--room); border: 1px solid var(--room-3); box-shadow: var(--shadow-1);
  }
  .mini__head { display: flex; align-items: center; gap: 10px; padding: 8px 12px 8px 10px; border-bottom: 1px solid var(--room-3); }
  .mini__av { position: relative; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; flex: none; background: var(--nacht); }
  .mini__av img { width: 15px; height: auto; margin-left: 1px; }
  .mini__who { display: flex; flex-direction: column; line-height: 1.22; }
  .mini__who b { font-size: 14.5px; font-weight: 600; color: var(--nacht); }
  .mini__who small { font-size: 12px; color: var(--inkt-75); }
  .mini__wa { margin-left: auto; width: 30px; height: 30px; border-radius: 50%; background: var(--wa); color: var(--nacht); 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(22, 18, 15, .10); }
  .mini__thread { display: flex; flex-direction: column; padding: 12px 14px 14px; background: var(--room-2); }

  /* ---- the button under the firm'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--wij p { position: relative; }
  .mb--wij .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(--room-3);
    color: var(--nacht); font-weight: 600; 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(--room-2); }

  /* ---- 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(--lijn), 0 8px 20px rgba(22, 18, 15, .45); }
  .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 onderkop, the services
     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(200px, 55vw, 24svh); width: max-content; margin: 4px auto clamp(14px, 2.4svh, 20px); }
  .fold__h1 { margin: 0 auto 14px; }
  .fold__onder { margin: 0 auto 12px; max-width: 22em; font-size: 16px; line-height: 1.6; text-wrap: balance; }
  .fold__lede { display: block; margin: 0 auto; max-width: 21em; text-wrap: balance; font-size: 16px; line-height: 1.85; color: var(--room-75); }
  .vak { white-space: nowrap; text-decoration: none; }
  .vak__naam {
    font-weight: 600; color: var(--room);
    text-decoration: underline; text-decoration-color: var(--koper);
    text-decoration-thickness: 1.5px; text-underline-offset: 4px;
  }
  .vak__duim {
    display: inline-block; width: 1.5em; height: 1.5em; object-fit: cover;
    vertical-align: -.44em; margin-right: .3em;
    box-shadow: 0 0 0 1px var(--lijn-2);
  }
  .fold__app { margin-top: clamp(32px, 5svh, 44px); }
  .mini__cap { display: block; margin: 0 0 14px; text-align: center; font-weight: 600; font-size: 15px; line-height: 1.3; color: var(--room); }
  .cap__txt {
    position: relative; display: inline-block; padding: 9px 17px 10px;
    background: var(--nacht-4); color: var(--room);
    font-size: clamp(15px, 4.35vw, 17.5px); line-height: 1.2; white-space: nowrap;
  }
  .cap__txt em { font-style: normal; color: var(--koper-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)
   On the left the lockup, the slogan with the onderkop under it, the four services as an index of two
   columns, each with its picture and an arrow, each a link to its section; then the Bel / App een foto
   pair with its note. On the right the chat on its copper panel; stacked below 961px. "Stuur maar een
   foto van je raam." 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). */
.vakken, .chat__notice { display: none; }

@media (min-width: 561px) {
    html.js .head:not(.is-past) .brand { visibility: hidden; }

  .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(--lijn); }
  .vakken li:nth-last-child(-n+2) { border-bottom: 1px solid var(--lijn); }
  .vakken__a {
    display: flex; align-items: center; gap: 14px; min-height: 58px; padding: 9px 2px 9px 0;
    font-weight: 600; font-size: clamp(15.5px, 1.2vw, 17px); line-height: 1.2;
    text-decoration: none; color: var(--room); transition: color .15s;
  }
  .vakken__duim { width: 40px; height: 40px; object-fit: cover; flex: none; }
  .vakken__pijl { margin-left: auto; width: 15px; height: 15px; flex: none; color: var(--koper); transition: transform .15s; }
  .vakken__a:hover { color: var(--koper-licht); }
  .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: 4px;
    background: var(--nacht); color: var(--room);
    font-weight: 600; font-size: 15px; line-height: 1.3; text-align: left;
  }
  .chat__notice .ico { width: 19px; height: 19px; fill: var(--koper); }
  .chat__notice em { font-style: normal; color: var(--koper-licht); }
}

/* ==================================================== THE BAND (561px and up)
   One quiet card on the seam, on the lighter ground: the Google rating and the years on the left, their
   figures in the headline face; the advice and the measuring at home on the right, a hairline between.
   Below 561 the same card, stacked: the two figures side by side, under a hairline the advice without
   its line. */
@media (min-width: 561px) {
  .band { position: relative; z-index: 3; margin-top: -104px; background: linear-gradient(transparent 104px, var(--nacht-2) 104px); }
  .band__obj { display: grid; grid-template-columns: 1fr 1fr; background: var(--room); box-shadow: var(--shadow-2); }
  .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(--room-3); }
  .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-family: var(--f-kop); font-weight: 500; font-size: clamp(44px, 3.9vw, 58px); line-height: .9; letter-spacing: -.01em; color: var(--nacht); }
  .band__who { display: flex; flex-direction: column; gap: 2px; font-size: 14px; line-height: 1.3; color: var(--inkt-75); }
  .band__who .stars { margin-bottom: 2px; }
  .band .stars svg { width: 14px; height: 14px; }
  .band__plat b { color: var(--nacht); font-weight: 600; }
  .band__count { font-size: 13px; }
  .band__cap { margin: 0 0 4px; font-family: var(--f-kop); font-weight: 500; font-size: clamp(26px, 2.3vw, 32px); line-height: 1.08; color: var(--nacht); }
  .band__line { margin: 0; font-size: 15px; line-height: 1.5; color: var(--inkt-75); 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(--nacht-2) 84px); }
  .band__obj { grid-template-columns: 1fr; }
  .band__half--one { border-left: 0; border-top: 1px solid var(--room-3); }
}

/* 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(--nacht-2) 62px); }
  .band__obj { background: var(--room); box-shadow: var(--shadow-2); }
  .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(--room-3); }
  .band__score { font-family: var(--f-kop); font-weight: 500; font-size: 38px; line-height: .9; letter-spacing: -.01em; color: var(--nacht); }
  .band__who { display: flex; flex-direction: column; align-items: center; font-size: 13px; line-height: 1.3; color: var(--inkt-75); }
  .band__who .stars { margin: 1px 0 4px; }
  .band .stars svg { width: 12px; height: 12px; }
  .band__plat b { color: var(--nacht); font-weight: 600; }
  .band__count { font-size: 12px; }
  .band__half--one { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 12px 18px 13px; border-top: 1px solid var(--room-3); text-align: center; }
  .band__cap { margin: 0; font-family: var(--f-kop); font-weight: 500; font-size: 22px; line-height: 1.15; color: var(--nacht); 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 its partner, outlined in the ink. "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(--room); box-shadow: inset 0 0 0 1px var(--room); text-align: center; }
  .door .btn--tel + .btn, .breath--offerte .btn--tel + .btn { color: var(--nacht); box-shadow: inset 0 0 0 1px var(--nacht); }
}

/* ==================================================== THE PHONE FOLD, HIGHER
   Below 561px the fold starts under the bar instead of below it, so the whole fold sits higher on the
   first screen. At the top the bar is see-through, so the big logo shows beside the menu button; once the
   page moves under it (.is-scrolled) or the menu is open it is solid again. */
@media (max-width: 560px) {
  .head { background: transparent; transition: box-shadow .25s, background-color .25s; }
  .head.is-scrolled, .head:has(.nav.open) { background: var(--nacht); }
  .fold { margin-top: -60px; padding-top: 18px; }
}


/* ── 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(--koper);
  background:var(--nacht-3);color:var(--room);
  font:400 15px/1.5 var(--f-sans);
}
.form-demo a{color:var(--koper)}