/* Park Tegelwerken & Badkamers — bak3 · L4-08 · c
   Every colour below comes from palette.json. The page's own idea: everything is laid like tiles —
   sharp rectangles set with one joint (the voeg, 6px) between the things that belong together. */

:root {
  /* nacht — primary */
  --nacht: #14242C;
  --nacht-900: #0F1C22;
  --nacht-800: #1C313C;
  --nacht-700: #29434F;
  --nacht-500: #4A5F69;
  /* grijsblauw — secondary */
  --grijsblauw: #728FA0;
  --grijsblauw-700: #4C6878;
  --grijsblauw-300: #B4C3CC;
  /* lichtblauw — accent */
  --lichtblauw: #AFCEDC;
  --lichtblauw-400: #8FB9CB;
  --lichtblauw-200: #D3E5ED;
  --lichtblauw-100: #E8F1F5;
  /* kalk — neutral */
  --kalk: #F4F2ED;
  --wit: #FCFCFB;
  --cement-200: #E5E1D9;
  --cement-400: #C9C3B8;
  /* fixed */
  --wa: #25D366;
  --wa-diep: #1EB858;

  --voeg: 6px;
  --gutter: clamp(16px, 4.45vw, 64px);
  --wrap: 1312px;
  --nav-h: 72px;
  --f-display: "Archivo", "Arial Narrow", Arial, sans-serif;
  --f-body: "Encode Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --star: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1.9l3.09 6.26 6.91 1-5 4.87 1.18 6.88L12 17.66l-6.18 3.25L7 14.03 2 9.16l6.91-1z'/%3E%3C/svg%3E");
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + 16px); -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--kalk);
  color: var(--nacht);
  font-family: var(--f-body);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
p { margin: 0 0 1em; }
h1, h2, h3 { margin: 0; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.i { width: 20px; height: 20px; flex: none; }
.wrap { width: min(100% - 2 * var(--gutter), var(--wrap)); margin-inline: auto; }
.skip { position: absolute; left: -9999px; top: 0; }
.skip:focus { left: 16px; top: 16px; z-index: 100; background: var(--lichtblauw); color: var(--nacht); padding: 10px 14px; font-weight: 600; }
:focus-visible { outline: 3px solid var(--lichtblauw-400); outline-offset: 2px; }

/* ---------------------------------------------------------------- lockup */
/* The logo's words as text: Park (Archivo 800), the name (Encode Sans 600), the rule (merk.svg,
   the name's width), the slogan (Encode Sans 500, lichtblauw). --lk is the size of "Park". */
.lockup {
  --lk: 40px;
  display: inline-flex;
  flex-direction: column;
  align-items: stretch;
  width: max-content;
  color: var(--wit);
  text-decoration: none;
}
.lockup__park {
  font-family: var(--f-display);
  font-weight: 800;
  font-stretch: 100%;
  font-size: var(--lk);
  line-height: .74;
  letter-spacing: -.03em;
  margin-left: -.045em;
  padding-top: .04em;
}
.lockup__name {
  font-family: var(--f-body);
  font-weight: 600;
  font-size: calc(var(--lk) * .231);
  line-height: 1.05;
  letter-spacing: -.012em;
  margin-top: calc(var(--lk) * .17);
  white-space: nowrap;
}
.lockup__rule {
  display: block;
  width: 0;
  min-width: 100%;
  height: auto;
  aspect-ratio: 208 / 2.25;
  margin: calc(var(--lk) * .09) 0 calc(var(--lk) * .075);
}
.lockup__slogan {
  font-family: var(--f-body);
  font-weight: 500;
  font-stretch: 100%;
  font-size: calc(var(--lk) * .177);
  line-height: 1.1;
  letter-spacing: -.018em;
  color: var(--lichtblauw);
  white-space: nowrap;
}

/* ---------------------------------------------------------------- buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 56px;
  padding: 0 24px;
  border: 2px solid transparent;
  border-radius: 0;
  font: 600 17px/1.1 var(--f-body);
  text-decoration: none;
  cursor: pointer;
  transition: background-color .15s, color .15s, border-color .15s;
}
.btn .i { width: 20px; height: 20px; }
.btn--sm { min-height: 46px; padding: 0 16px; font-size: 15.5px; }
.btn--accent { background: var(--lichtblauw); color: var(--nacht); }
.btn--accent:hover { background: var(--lichtblauw-400); }
.btn--dark { background: var(--nacht); color: var(--wit); }
.btn--dark:hover { background: var(--nacht-700); }
.btn--quiet { background: transparent; color: var(--grijsblauw-700); border-color: var(--cement-400); }
.btn--quiet:hover { color: var(--nacht); border-color: var(--nacht); }
.btn--quiet-dark { background: transparent; color: var(--wit); border-color: var(--nacht-700); }
.btn--quiet-dark:hover { border-color: var(--lichtblauw); color: var(--lichtblauw); }
/* WhatsApp keeps its green: filled with white, or the ground with the green as border, glyph, label. */
.btn--wa { background: var(--wa); color: var(--wit); font-weight: 700; }
.btn--wa:hover { background: var(--wa-diep); }
.btn--wa-line { background: transparent; color: var(--wa); border-color: var(--wa); font-weight: 700; }
.btn--wa-line:hover { background: var(--wa); color: var(--wit); }

/* the pair: two tiles laid with one joint */
.pair { display: flex; flex-wrap: wrap; gap: var(--voeg); }

/* ---------------------------------------------------------------- stars */
.stars {
  --r: 5;
  --s: 17px;
  --fill: var(--nacht);
  --empty: var(--cement-200);
  display: inline-block;
  flex: none;
  width: calc(var(--s) * 5);
  height: var(--s);
  background: linear-gradient(90deg, var(--fill) calc(var(--r) / 5 * 100%), var(--empty) 0);
  -webkit-mask: var(--star) 0 0 / var(--s) var(--s) repeat-x;
  mask: var(--star) 0 0 / var(--s) var(--s) repeat-x;
}

/* the G of Google, set in the page's own ink */
.gmark {
  display: inline-grid;
  place-items: center;
  width: 1.4em;
  height: 1.4em;
  margin-right: .4em;
  border: 2px solid currentColor;
  border-radius: 50%;
  font-family: var(--f-display);
  font-weight: 800;
  font-size: .82em;
  line-height: 1;
  vertical-align: -.2em;
}

/* ---------------------------------------------------------------- section furniture */
.sec { padding-block: clamp(64px, 8.5vw, 120px); }
/* the lat: every section starts on a level line — the logo's thin rule, extended */
.lat {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 clamp(20px, 2.4vw, 32px);
  font: 600 12.5px/1 var(--f-body);
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--grijsblauw-700);
}
.lat::before { content: ""; flex: none; width: 10px; height: 10px; background: var(--lichtblauw); box-shadow: inset 0 0 0 1.5px var(--nacht); }
.lat::after { content: ""; flex: 1; height: 1px; background: var(--grijsblauw); }
.lat--dark { color: var(--lichtblauw); }
.lat--dark::before { box-shadow: none; }
.lat--dark::after { background: var(--nacht-700); }

.h2 {
  font-family: var(--f-display);
  font-weight: 800;
  font-stretch: 86%;
  font-size: clamp(32px, 3.5vw, 50px);
  line-height: 1.02;
  letter-spacing: -.015em;
  margin-bottom: 20px;
  text-wrap: balance;
}
.h2--big { font-size: clamp(38px, 4.6vw, 66px); }
.h2 a {
  text-decoration: underline;
  text-decoration-color: var(--lichtblauw);
  text-decoration-thickness: .09em;
  text-underline-offset: .13em;
  transition: color .15s, text-decoration-color .15s;
}
.h2 a:hover { color: var(--grijsblauw-700); text-decoration-color: var(--grijsblauw-700); }

.price { display: flex; align-items: baseline; gap: 12px; margin: 22px 0 20px; font-weight: 600; }
.price span { font: 600 12px/1 var(--f-body); letter-spacing: .17em; text-transform: uppercase; color: var(--grijsblauw-700); }
.price--dark { color: var(--wit); }
.price--dark span { color: var(--lichtblauw); }

.scope { list-style: none; margin: 22px 0 0; padding: 0; border-bottom: 1px solid var(--cement-200); }
.scope li { position: relative; padding: 10px 0 10px 26px; border-top: 1px solid var(--cement-200); font-size: 15.5px; line-height: 1.45; color: var(--nacht-500); }
.scope li::before { content: ""; position: absolute; left: 0; top: 16px; width: 10px; height: 10px; background: var(--lichtblauw); box-shadow: inset 0 0 0 1.5px var(--nacht); }
.scope b { color: var(--nacht); font-weight: 600; }
.scope--dark { border-color: var(--nacht-700); }
.scope--dark li { border-color: var(--nacht-700); color: var(--grijsblauw-300); }
.scope--dark li::before { box-shadow: none; }
.scope--dark b { color: var(--wit); }

.tag {
  position: absolute;
  left: 12px;
  bottom: 12px;
  margin: 0;
  padding: 6px 9px;
  background: var(--nacht);
  color: var(--wit);
  font: 500 12px/1.2 var(--f-body);
  letter-spacing: .02em;
}
.tag--plain { position: static; padding: 0; background: none; color: var(--nacht-500); font-weight: 500; }

.sec-cta { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px 32px; margin-top: clamp(32px, 4vw, 48px); padding-top: 24px; border-top: 1px solid var(--cement-400); }
.sec-cta p { margin: 0; font-family: var(--f-display); font-weight: 700; font-stretch: 90%; font-size: clamp(20px, 2vw, 26px); line-height: 1.15; }

/* ---------------------------------------------------------------- navbar */
.nav { position: sticky; top: 0; z-index: 40; background: var(--nacht); color: var(--wit); border-bottom: 1px solid var(--nacht-700); }
.nav__in { display: flex; align-items: center; gap: clamp(12px, 2vw, 32px); height: var(--nav-h); width: min(100% - 2 * var(--gutter), var(--wrap)); margin-inline: auto; }
.lockup--nav { --lk: 35px; flex: none; }
.lockup--nav .lockup__name { font-size: 10.5px; margin-top: 6px; letter-spacing: 0; }
.lockup--nav .lockup__rule { margin: 4px 0 0; }
.nav__menu { margin-left: auto; }
.nav__list { display: flex; align-items: center; gap: 2px; list-style: none; margin: 0; padding: 0; }
.nav__list > li > a,
.dd__btn {
  display: inline-flex; align-items: center; gap: 7px;
  min-height: 44px; padding: 0 13px;
  background: none; border: 0; color: var(--wit);
  font: 500 15.5px/1 var(--f-body); text-decoration: none; cursor: pointer;
}
.nav__list > li > a:hover, .dd__btn:hover { color: var(--lichtblauw); }
.i--down { width: 14px; height: 14px; transition: transform .15s; }
.dd { position: relative; }
.dd.is-open .i--down { transform: rotate(180deg); }
.dd__list {
  position: absolute; top: 100%; left: 0; z-index: 5;
  width: 340px; margin: 0; padding: var(--voeg); list-style: none;
  display: none; gap: var(--voeg);
  background: var(--nacht-800);
  border-top: 3px solid var(--lichtblauw);
  box-shadow: 0 28px 40px -24px rgb(15 28 34 / .7);
}
.dd__list a { display: block; padding: 12px 14px; color: var(--wit); text-decoration: none; background: var(--nacht); }
.dd__list a b { display: block; font-family: var(--f-display); font-weight: 800; font-stretch: 92%; font-size: 18px; line-height: 1.15; }
.dd__list a span { display: block; margin-top: 3px; font-size: 13.5px; line-height: 1.35; color: var(--grijsblauw-300); }
.dd__list a:hover { background: var(--nacht-700); }
.dd__list a:hover b { color: var(--lichtblauw); }
@media (hover: hover) and (min-width: 1024px) { .dd:hover .dd__list { display: grid; } }
.dd.is-open .dd__list { display: grid; }

.nav__call { display: flex; align-items: center; gap: var(--voeg); flex: none; }
.nav__tel {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; padding: 0 14px;
  background: var(--lichtblauw); color: var(--nacht);
  font: 700 15.5px/1 var(--f-body); text-decoration: none; white-space: nowrap;
}
.nav__tel .i { width: 17px; height: 17px; }
.nav__tel:hover { background: var(--lichtblauw-400); }
.nav__wa { display: inline-grid; place-items: center; width: 44px; height: 44px; background: var(--wa); color: var(--wit); }
.nav__wa:hover { background: var(--wa-diep); }
.nav__wa .i { width: 22px; height: 22px; }
.nav__toggle { display: none; }

/* ---------------------------------------------------------------- fold */
/* The slate's idea: the headline is set on the dark ground and runs on across the seam into his
   hands at the tiles. Grown: the services are the bottom row of tiles, laid along the photo's foot. */
.fold {
  /* the headline's size follows the width and the height, so the fold's text fits the first screen */
  --P: clamp(3.4rem, min(9.4vw, calc(28.3svh - 116px)), 8.25rem);
  /* the text column narrows with the headline, so the headline always runs on across the seam */
  --text-col: clamp(25rem, calc(var(--P) * 4.2), 31rem);
  position: relative;
  display: grid;
  grid-template-columns:
    [full-start] minmax(var(--gutter), 1fr)
    [text-start] minmax(0, var(--text-col))
    [seam] minmax(0, calc(var(--wrap) - var(--text-col)))
    [text-end] minmax(var(--gutter), 1fr) [full-end];
  grid-template-rows: 1fr;
  min-height: clamp(600px, calc(100svh - var(--nav-h)), 900px);
  background: var(--nacht);
  color: var(--wit);
  overflow: hidden;
}
.fold__photo { grid-column: seam / full-end; grid-row: 1; position: relative; margin: 0; }
.fold__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 24% 36%; }
.fold__photo::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, rgb(20 36 44 / .8) 0%, rgb(20 36 44 / .42) 15%, rgb(20 36 44 / 0) 34%);
}
.fold__text {
  grid-column: text-start / seam; grid-row: 1;
  position: relative; z-index: 2;
  align-self: center;
  padding-block: 32px;
}
.lockup--fold { --lk: var(--P); }
.fold__kop {
  margin-top: calc(var(--P) * .22);
  width: max-content;
  font-family: var(--f-display);
  font-weight: 800;
  font-stretch: 74%;
  font-size: var(--P);
  line-height: .86;
  letter-spacing: -.004em;
  text-transform: uppercase;
  color: var(--wit);
}
.fold__l1, .fold__l2 { display: block; }
.zelf { font-style: normal; color: var(--lichtblauw); }
.fold__sub {
  max-width: 28em;
  margin: 22px 0 0;
  font-size: clamp(16px, 1.25vw, 18.5px);
  line-height: 1.55;
  color: var(--grijsblauw-300);
}
.pair--fold { margin-top: 22px; }
.ik { display: flex; align-items: center; gap: 14px; margin: 18px 0 0; max-width: 29rem; }
@media (max-width: 1399.98px) and (min-width: 768px) { .lang { display: none; } }
.ik__face { position: relative; flex: none; width: 60px; height: 60px; overflow: hidden; background: var(--nacht-800); box-shadow: 0 0 0 2px var(--nacht), 0 0 0 4px var(--lichtblauw); margin: 4px; }
.ik__face img { position: absolute; max-width: none; width: 400.7%; height: auto; left: -119.6%; top: -19.6%; }
.ik__words { margin: 0; font-size: 15px; line-height: 1.45; color: var(--grijsblauw-300); }
.ik__words b { color: var(--wit); font-weight: 600; }
/* Sem, 2026-10-28: "Ik ben Gregory Park." out; his name in a much smaller cut of the headline's face. */
.ik__words .ik__naam { display: block; margin-bottom: 5px; font-family: var(--f-display); font-weight: 800; font-stretch: 74%; font-size: 21px; line-height: 1; letter-spacing: .01em; text-transform: uppercase; color: var(--wit); }

/* Sem, 2026-10-28: "De diensten moet gewoon rechts uitlijnen met de container, dus niet full bleed." The row ends at
   the container's right edge (text-end), the white tiles' edge on it: the dark joint around them steps out by one voeg. */
.fold__diensten { grid-column: seam / text-end; grid-row: 1; align-self: end; position: relative; z-index: 3; margin-right: calc(var(--voeg) * -1); }
.fold__diensten-kop {
  display: inline-block; margin: 0;
  padding: 11px 16px 5px calc(var(--voeg) + 12px);
  background: var(--nacht); color: var(--lichtblauw);
  font: 600 12px/1 var(--f-body); letter-spacing: .17em; text-transform: uppercase;
}
.fold__diensten ul {
  list-style: none; margin: 0; padding: var(--voeg);
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--voeg);
  background: var(--nacht);
}
.fold__diensten li { position: relative; }
/* the egalisatieclip: a small square straddling each joint, as on his wall */
.fold__diensten li + li::before {
  content: ""; position: absolute; z-index: 1;
  left: calc(var(--voeg) / -2 - 5px); top: 14px;
  width: 10px; height: 10px; background: var(--lichtblauw);
}
.fold__diensten a {
  position: relative;
  display: flex; flex-direction: column; justify-content: flex-end;
  height: clamp(104px, 9.4vw, 138px);
  padding: 16px 18px;
  background: var(--wit); color: var(--nacht); text-decoration: none;
  transition: background-color .15s;
}
.fold__diensten b { font-family: var(--f-display); font-weight: 800; font-stretch: 90%; font-size: clamp(21px, 1.85vw, 27px); line-height: 1; letter-spacing: -.012em; }
.fold__diensten span { margin-top: 6px; font-size: 14px; line-height: 1.3; color: var(--nacht-500); }
.fold__diensten .i { position: absolute; top: 16px; right: 16px; width: 22px; height: 22px; color: var(--grijsblauw-700); transition: transform .15s; }
.fold__diensten a:hover { background: var(--lichtblauw-200); }
.fold__diensten a:hover .i { transform: translateX(4px); color: var(--nacht); }
.fold__diensten a:focus-visible { outline: 3px solid var(--lichtblauw); outline-offset: -3px; }

/* Sem, 2026-10-28: "De CTA in de banner mogen worden uitgelijnd met de onderkant van de diensten blokken, en het
   ontmoet de eigenaar element mag meer rechtsboven komen te staan, in de banner." Then: "Lijn de knoppen toch uit, met
   de bovenkant van de cards". From 1024 px up: the text column runs the fold's full height, the buttons at its foot,
   their top level with the white tiles' top (the row's dark joint, one voeg, plus a tile's height, less a button's
   56 px), the spare height shared above the lockup and above the buttons; the owner line stands top right on the
   photo, on a dark tile, its right edge on the container's. Below 1024 px nothing changes. */
@media (min-width: 1024px) {
  .fold__text { align-self: stretch; display: flex; flex-direction: column; padding-bottom: calc(var(--voeg) + clamp(104px, 9.4vw, 138px) - 56px); }
  .lockup--fold { margin-top: auto; }
  .fold__sub { margin-bottom: 22px; }
  .pair--fold { margin-top: auto; }
  .fold > .ik {
    grid-column: seam / text-end; grid-row: 1; align-self: start; justify-self: end;
    position: relative; z-index: 3;
    max-width: 24rem; margin: clamp(24px, 3.4svh, 40px) 0 0; padding: 12px 20px 12px 12px;
    background: var(--nacht);
  }
}

/* ---------------------------------------------------------------- trust strip */
.strip { background: var(--lichtblauw-100); padding: 14px 0; border-bottom: 1px solid var(--lichtblauw-200); }
.strip__in { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 9fr); gap: var(--voeg); }
.strip__tile { display: flex; flex-wrap: wrap; row-gap: 10px; align-items: center; gap: clamp(16px, 2.4vw, 36px); min-height: 86px; padding: 12px clamp(16px, 2vw, 28px); background: var(--wit); }
.strip__fig { font-family: var(--f-display); font-weight: 800; font-stretch: 64%; font-size: clamp(46px, 4.4vw, 62px); line-height: .78; letter-spacing: -.01em; color: var(--nacht); }
.strip__jaren { display: flex; align-items: center; gap: 12px; margin: 0; }
.strip__ruim { writing-mode: vertical-rl; transform: rotate(180deg); font: 600 11.5px/1 var(--f-body); letter-spacing: .2em; text-transform: uppercase; color: var(--grijsblauw-700); }
.strip__jaren .strip__fig { color: var(--nacht); }
.strip__words { font-weight: 700; font-size: 17px; line-height: 1.2; }
.strip__words span { display: block; font-weight: 400; color: var(--nacht-500); }
.score { display: flex; flex: none; align-items: center; gap: 12px; }
.score__src { white-space: nowrap; }
.score__meta { display: flex; flex-direction: column; gap: 7px; font-size: 14px; line-height: 1.2; color: var(--nacht-500); }
.score__src b { color: var(--nacht); font-weight: 700; }
.score__src .gmark { font-size: 13px; width: 20px; height: 20px; vertical-align: -5px; margin-right: 5px; }
.score + .score { padding-left: clamp(16px, 2.4vw, 36px); border-left: 1px solid var(--cement-200); }
.gword { white-space: nowrap; }
.strip__link { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font: 600 14px/1 var(--f-body); color: var(--grijsblauw-700); text-decoration: none; white-space: nowrap; }
.strip__link .i { width: 14px; height: 14px; }
.strip__link:hover { color: var(--nacht); text-decoration: underline; }

/* ---------------------------------------------------------------- badkamers: the card */
.svc-bad { background: var(--kalk); }
.card { background: var(--wit); border: 1px solid var(--cement-200); box-shadow: 0 30px 60px -44px rgb(20 36 44 / .45); }
.card__photo { position: relative; margin: 0; height: clamp(220px, 27vw, 390px); overflow: hidden; background: var(--cement-200); }
.card__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 58%; }
.card__body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); gap: clamp(28px, 4.6vw, 72px); padding: clamp(24px, 4vw, 56px); }
.card__copy p:not(.price) { color: var(--nacht-500); }
.card__copy .price { color: var(--nacht); }
.card__list-kop { margin: 4px 0 12px; font: 600 12px/1 var(--f-body); letter-spacing: .17em; text-transform: uppercase; color: var(--grijsblauw-700); }
.five { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--nacht); }
.five li { position: relative; padding: 15px 0 15px 42px; border-bottom: 1px solid var(--cement-200); font-size: 15.5px; line-height: 1.45; color: var(--nacht-500); }
.five li::before { content: ""; position: absolute; left: 0; top: 19px; width: 22px; height: 22px; background: var(--lichtblauw); box-shadow: inset 0 0 0 2px var(--nacht); }
.five li::after { content: ""; position: absolute; left: 10px; top: 19px; width: 2px; height: 22px; background: var(--nacht); }
.five b { display: block; margin-bottom: 2px; font-family: var(--f-display); font-weight: 700; font-stretch: 94%; font-size: 19px; line-height: 1.2; color: var(--nacht); }
.card__head { padding: 16px clamp(24px, 4vw, 56px); background: var(--kalk); border-bottom: 1px solid var(--cement-200); }
.gvoor { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; }
.avatars { display: flex; padding-left: 10px; }
.avatars i {
  display: grid; place-items: center;
  width: 38px; height: 38px; margin-left: -10px;
  border-radius: 50%;
  background: var(--nacht-700); color: var(--wit);
  box-shadow: 0 0 0 3px var(--kalk);
  font: 700 15px/1 var(--f-body); font-style: normal;
}
.avatars i:nth-child(2) { background: var(--grijsblauw); }
.avatars i:nth-child(3) { background: var(--lichtblauw-400); color: var(--nacht); }
.avatars i:nth-child(4) { background: var(--grijsblauw-700); }
.avatars i:nth-child(5) { background: var(--nacht-500); }
.gvoor__score { display: flex; align-items: center; gap: 10px; font-size: 20px; }
.gmark--lg { margin-right: 0; font-size: 18px; }
.gvoor__fig { font-family: var(--f-display); font-weight: 800; font-stretch: 66%; font-size: 36px; line-height: 1; }
.gvoor__text { font-size: 15.5px; color: var(--nacht-500); }
.gvoor__text b { color: var(--nacht); }

/* ---------------------------------------------------------------- band: four steps */
.band--stappen { background: var(--nacht); color: var(--wit); padding: 26px 0; }
.stappen { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: clamp(20px, 3vw, 48px); }
.stappen__kop { margin: 0; max-width: 8.5em; font-family: var(--f-display); font-weight: 800; font-stretch: 80%; font-size: 22px; line-height: 1.08; }
.stappen__rij { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--voeg); counter-reset: none; }
.stappen__rij li { display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 12px 16px; background: var(--nacht-800); font-weight: 600; font-size: 15.5px; line-height: 1.25; }
.stappen__rij span { font-family: var(--f-display); font-weight: 800; font-stretch: 64%; font-size: 34px; line-height: 1; color: var(--lichtblauw); }

/* ---------------------------------------------------------------- tegelwerk */
.svc-tegel { background: var(--wit); }
.svc-tegel__grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
.svc-tegel__copy > p:not(.lat):not(.price) { color: var(--nacht-500); }
.mats { list-style: none; margin: 20px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--voeg); }
.mats li { padding: 9px 14px; background: var(--kalk); border: 1px solid var(--cement-200); font: 600 14px/1 var(--f-body); }

/* ---------------------------------------------------------------- before / after */
.ba { margin: 0; }
.ba__frame {
  --pos: 50%;
  position: relative; overflow: hidden;
  aspect-ratio: 4 / 5;
  background: var(--nacht-800);
  touch-action: pan-y;
  cursor: ew-resize;
  user-select: none;
  -webkit-user-select: none;
}
.ba--wide .ba__frame { aspect-ratio: 3 / 2; }
.ba__frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.ba__voor { clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
.ba__line { position: absolute; top: 0; bottom: 0; left: var(--pos); width: var(--voeg); transform: translateX(-50%); background: var(--wit); pointer-events: none; }
.ba__knob {
  position: absolute; top: 50%; left: var(--pos);
  display: grid; place-items: center;
  width: 46px; height: 46px;
  transform: translate(-50%, -50%);
  background: var(--lichtblauw); color: var(--nacht);
  box-shadow: 0 0 0 3px var(--wit);
  pointer-events: none;
}
.ba__knob .i { width: 22px; height: 22px; }
.ba__range { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 1px; margin: 0; opacity: 0; pointer-events: none; }
.ba__range:focus-visible ~ .ba__knob { outline: 3px solid var(--nacht); outline-offset: 4px; }
.ba__tag { position: absolute; top: 12px; padding: 6px 9px; background: var(--nacht); color: var(--wit); font: 600 11px/1 var(--f-body); letter-spacing: .17em; text-transform: uppercase; pointer-events: none; }
.ba__tag--voor { left: 12px; }
.ba__tag--na { right: 12px; background: var(--lichtblauw); color: var(--nacht); }
.ba__cap { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 16px; padding-top: 11px; font-size: 15px; font-weight: 600; line-height: 1.3; }
.ba__cap .tag--plain { font-size: 12.5px; }

/* ---------------------------------------------------------------- band: one sentence */
.band--zin { background: var(--kalk); padding: clamp(52px, 7vw, 96px) 0; border-top: 1px solid var(--cement-200); }
.zin { margin-block: 0; }
.zin__q { margin: 0; max-width: 17em; font-family: var(--f-display); font-weight: 800; font-stretch: 70%; font-size: clamp(36px, 5vw, 72px); line-height: .96; letter-spacing: -.01em; }
.zin__q p { margin: 0; text-wrap: balance; }
.zin__q p::before { content: "“"; color: var(--lichtblauw-400); margin-left: -.42em; padding-right: .04em; }
.zin__q p::after { content: "”"; color: var(--lichtblauw-400); }
.zin__who { margin-top: 20px; display: flex; align-items: center; gap: 10px; font-size: 15px; color: var(--nacht-500); }
.zin__who::before { content: ""; width: 28px; height: 1px; background: var(--grijsblauw); }
.zin__who span { color: var(--nacht); font-weight: 600; }

/* ---------------------------------------------------------------- stucwerk */
.svc-stuc { background: var(--nacht); color: var(--wit); }
.svc-stuc .h2 a { color: var(--wit); }
.svc-stuc .h2 a:hover { color: var(--lichtblauw); text-decoration-color: var(--lichtblauw); }
.svc-stuc__head p { color: var(--grijsblauw-300); }
.svc-stuc__head { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 80px); align-items: start; }
.svc-stuc__head .scope { margin-top: 0; }
.svc-stuc__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 32px; margin-top: clamp(32px, 4vw, 48px); padding-top: 24px; border-top: 1px solid var(--nacht-700); }
.svc-stuc__foot .price { margin: 0; }
.ba-rij { display: grid; grid-template-columns: minmax(0, 1.875fr) minmax(0, 1fr); gap: clamp(20px, 2.4vw, 32px); align-items: start; }
/* Sem, 2026-10-28: "Ik wil hier twee aparte secties van maken: [the stucwerk head above, the tabs and the before/after
   below] waarbij de onderste van de twee deze wittint moet gebruiken: [--wit]". The before/after is a section of its
   own on --wit; its caption takes the page's dark type, the tabs' frame goes from nacht-700 to nacht. */
.stuc-ba { background: var(--wit); color: var(--nacht); }

/* ---------------------------------------------------------------- staat uw klus er niet bij */
.klus { background: var(--lichtblauw); color: var(--nacht); padding: clamp(44px, 6vw, 76px) 0; }
.klus__in { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px 56px; }
.klus__kop { margin: 0 0 12px; font-family: var(--f-display); font-weight: 800; font-stretch: 66%; font-size: clamp(40px, 5vw, 72px); line-height: .9; text-transform: uppercase; letter-spacing: -.004em; }
.klus__text p { margin: 0; max-width: 34em; font-size: 18px; }
.pair--klus .btn { min-height: 60px; }

/* ---------------------------------------------------------------- de eigenaar */
.gregory { background: var(--nacht); color: var(--wit); }
.gregory__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(36px, 6.5vw, 104px); align-items: center; }
.gregory__photo { position: relative; margin: 0 0 18px; isolation: isolate; }
.gregory__photo::before { content: ""; position: absolute; z-index: -1; right: -18px; bottom: -18px; width: 58%; height: 36%; background: var(--lichtblauw); }
.gregory__photo img { width: 100%; height: auto; aspect-ratio: 1122 / 1402; object-fit: cover; }
.gregory__text p:not(.lat) { color: var(--grijsblauw-300); max-width: 36em; }
.gregory__text .gregory__lead { color: var(--wit); font-size: 19px; line-height: 1.55; }
.sig { display: flex; flex-direction: column; gap: 7px; margin: 30px 0 30px; padding-top: 20px; border-top: 1px solid var(--nacht-700); }
.sig__name { font-family: var(--f-display); font-weight: 800; font-size: 32px; line-height: .9; letter-spacing: -.025em; color: var(--wit); }
.sig__role { font-size: 14px; color: var(--grijsblauw-300); }

/* ---------------------------------------------------------------- reviews */
.reviews { background: var(--lichtblauw-100); }
.reviews .lat::after { background: var(--lichtblauw-400); }
.reviews__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 20px 48px; margin-bottom: clamp(28px, 3.6vw, 44px); }
.reviews__head .h2 { margin: 0; max-width: 13em; }
.reviews__scores { display: flex; gap: var(--voeg); }
.rscore { display: flex; flex-direction: column; gap: 6px; min-width: 190px; padding: 13px 18px; border: 1px solid var(--lichtblauw-400); }
.rscore__name { display: flex; align-items: center; font: 700 15px/1.1 var(--f-body); }
.rscore__row { display: flex; align-items: center; gap: 10px; }
.rscore__fig { font-family: var(--f-display); font-weight: 800; font-stretch: 66%; font-size: 34px; line-height: 1; }
.rscore__count { font-size: 14px; color: var(--nacht-500); }
.rscore .stars { --empty: var(--lichtblauw-200); }
.reviews__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(12px, 1.6vw, 20px); }
.review {
  display: flex; flex-direction: column; gap: 14px;
  padding: clamp(22px, 2.6vw, 36px);
  background: var(--wit);
  border: 1px solid var(--lichtblauw-200);
  border-top: 4px solid var(--nacht);
  box-shadow: 0 24px 44px -34px rgb(20 36 44 / .5);
}
.review__head { display: flex; align-items: center; gap: 14px; }
.avatar { display: grid; place-items: center; flex: none; width: 46px; height: 46px; border-radius: 50%; background: var(--lichtblauw); color: var(--nacht); font: 800 19px/1 var(--f-display); }
.review__who { display: flex; flex-direction: column; gap: 3px; font-size: 14px; color: var(--nacht-500); }
.review__who b { font-size: 16.5px; color: var(--nacht); }
.review__src { margin-left: auto; text-align: right; font: 600 10.5px/1.35 var(--f-body); letter-spacing: .12em; text-transform: uppercase; color: var(--grijsblauw-700); }
.stars--card { --s: 21px; }
.review__title { font-family: var(--f-display); font-weight: 700; font-stretch: 94%; font-size: clamp(19px, 1.6vw, 22px); line-height: 1.22; }
.review__text { margin: 0; font-size: 16px; line-height: 1.6; color: var(--nacht); }
.reviews .sec-cta { border-color: var(--lichtblauw-400); }

/* ---------------------------------------------------------------- over ons + werkgebied */
.duo { background: var(--wit); }
.over { padding-bottom: clamp(48px, 5.5vw, 76px); }
.over__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "text photo" "cta photo"; align-content: center; column-gap: clamp(32px, 6vw, 96px); row-gap: 8px; }
.over__text { grid-area: text; }
.over__cta { grid-area: cta; }
.over__photo { grid-area: photo; align-self: center; }
.over__text > p:not(.lat) { color: var(--nacht-500); }
.over__slogan { margin: 6px 0 22px; padding: 22px 26px 24px; background: var(--nacht); color: var(--wit); }
.over__slogan-kop { margin: 0 0 10px; font: 500 clamp(21px, 2vw, 27px)/1.15 var(--f-body); letter-spacing: -.015em; color: var(--lichtblauw); }
.over__slogan-onder { margin: 0; font-size: 17px; line-height: 1.55; color: var(--wit); }
.over__photo { margin: 0; }
.over__img { overflow: hidden; }
.over__img img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }
.mats--tiles { margin-top: var(--voeg); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--voeg); }
.mats--tiles li { display: grid; place-items: center; min-height: 58px; padding: 10px 8px; text-align: center; background: var(--nacht); border: 0; color: var(--wit); font-family: var(--f-display); font-weight: 700; font-stretch: 90%; font-size: 15.5px; line-height: 1.1; }

.gebied { border-top: var(--voeg) solid var(--kalk); padding-top: clamp(48px, 5.5vw, 76px); }
.gebied__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-areas: "text beeld" "cta beeld"; grid-template-rows: auto 1fr; column-gap: clamp(32px, 5vw, 80px); row-gap: 0; }
.gebied__text { grid-area: text; }
.gebied__cta { grid-area: cta; }
.gebied__beeld { grid-area: beeld; }
.gebied__text > p:not(.lat) { color: var(--nacht-500); }
.plaatsen { list-style: none; margin: 18px 0 30px; padding: 0; display: flex; flex-wrap: wrap; gap: var(--voeg); }
.plaatsen li { padding: 8px 12px; background: var(--kalk); border: 1px solid var(--cement-200); font-size: 14.5px; font-weight: 500; line-height: 1.2; }
.plaatsen .is-thuis { background: var(--nacht); border-color: var(--nacht); color: var(--wit); font-weight: 700; }
.gebied__beeld { display: grid; grid-template-columns: minmax(0, 1.85fr) minmax(0, 1fr); gap: var(--voeg); height: clamp(400px, 37vw, 540px); }
.kaart { height: 100%; background: var(--lichtblauw-200); z-index: 0; }
.kaart .leaflet-tile-pane { filter: grayscale(1) sepia(.28) hue-rotate(168deg) saturate(.75) brightness(1.03) contrast(.94); }
.kaart .leaflet-control-attribution { background: rgb(252 252 251 / .85); color: var(--nacht-500); font: 400 10.5px/1.4 var(--f-body); }
.kaart .leaflet-control-attribution a { color: var(--grijsblauw-700); }
.kaart .leaflet-bar { border: 0; border-radius: 0; box-shadow: none; }
.kaart .leaflet-bar a { border-radius: 0 !important; background: var(--nacht); color: var(--wit); border-bottom: 1px solid var(--nacht-700); width: 34px; height: 34px; line-height: 34px; }
.kaart .leaflet-bar a:hover { background: var(--nacht-700); color: var(--lichtblauw); }
.pin { background: var(--nacht); box-shadow: 0 0 0 2px var(--wit); }
.pin--thuis { background: var(--lichtblauw); box-shadow: 0 0 0 3px var(--nacht), 0 0 0 5px var(--wit); }
.leaflet-tooltip.plaats { padding: 4px 7px; background: var(--wit); color: var(--nacht); border: 1px solid var(--cement-400); border-radius: 0; box-shadow: none; font: 600 12px/1.1 var(--f-body); }
.leaflet-tooltip.plaats::before { display: none; }
.leaflet-tooltip.plaats--thuis { background: var(--nacht); color: var(--wit); border-color: var(--nacht); font-size: 13px; padding: 6px 9px; }
.gebied__bus { position: relative; margin: 0; overflow: hidden; }
.gebied__bus img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 72% 50%; }
/* Sem, 2026-10-28: the werkgebied on a dark blue ground, its buttons light blue against it. */
.gebied { background: var(--nacht); color: var(--wit); border-top-color: var(--wit); }
.gebied .lat { color: var(--lichtblauw); }
.gebied .lat::before { box-shadow: none; }
.gebied .lat::after { background: var(--nacht-700); }
.gebied__text > p:not(.lat) { color: var(--grijsblauw-300); }
.gebied .plaatsen li { background: var(--nacht-800); border-color: var(--nacht-700); color: var(--wit); }
.gebied .plaatsen .is-thuis { background: var(--lichtblauw); border-color: var(--lichtblauw); color: var(--nacht); }

/* ---------------------------------------------------------------- faq */
.faq { background: var(--kalk); }
.faq__grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); column-gap: clamp(28px, 5vw, 80px); }
.faq__head { align-self: start; position: sticky; top: calc(var(--nav-h) + 28px); }
.faq__list { border-bottom: 1px solid var(--cement-400); }
.faq__list details { border-top: 1px solid var(--cement-400); }
.faq__list summary {
  position: relative; list-style: none; cursor: pointer;
  padding: 20px 52px 20px 0;
  font-family: var(--f-display); font-weight: 700; font-stretch: 94%;
  font-size: clamp(18px, 1.55vw, 21px); line-height: 1.25;
}
.faq__list summary::-webkit-details-marker { display: none; }
.faq__list summary::after {
  content: ""; position: absolute; right: 0; top: 50%;
  width: 32px; height: 32px; transform: translateY(-50%);
  background:
    linear-gradient(var(--nacht), var(--nacht)) center / 13px 2px no-repeat,
    linear-gradient(var(--nacht), var(--nacht)) center / 2px 13px no-repeat,
    var(--wit);
  border: 1px solid var(--cement-400);
}
.faq__list details[open] summary::after { background: linear-gradient(var(--nacht), var(--nacht)) center / 13px 2px no-repeat, var(--lichtblauw-200); border-color: var(--lichtblauw-400); }
.faq__list summary:hover { color: var(--grijsblauw-700); }
.faq__list details p { max-width: 40em; margin: -4px 52px 18px 0; color: var(--nacht-500); }
.faq__cta { grid-column: 2; border-top: 0; }

/* ---------------------------------------------------------------- contact */
.contact { background: var(--nacht); color: var(--wit); }
.contact__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.contact__info > p:not(.lat) { color: var(--grijsblauw-300); max-width: 32em; }
.pair--contact { margin-top: 26px; }
.nap { margin: 36px 0 0; }
.nap > div { display: grid; grid-template-columns: 11.5rem minmax(0, 1fr); gap: 16px; padding: 14px 0; border-top: 1px solid var(--nacht-700); }
.nap dt { padding-top: 4px; font: 600 11.5px/1.4 var(--f-body); letter-spacing: .15em; text-transform: uppercase; color: var(--lichtblauw); }
.nap dd { margin: 0; color: var(--wit); }
.nap a { color: var(--wit); text-decoration-color: var(--nacht-700); text-underline-offset: 3px; }
.nap a:hover { text-decoration-color: var(--lichtblauw); }
.form { position: relative; display: grid; gap: 16px; padding: clamp(22px, 3vw, 40px); background: var(--wit); color: var(--nacht); border-top: 4px solid var(--lichtblauw); }
.form__kop { margin: 0 0 2px; font-family: var(--f-display); font-weight: 800; font-stretch: 88%; font-size: 26px; line-height: 1.1; }
.form label { display: block; margin-bottom: 6px; font-weight: 600; font-size: 15px; }
.form label span { font-weight: 400; color: var(--nacht-500); }
.form input, .form textarea {
  width: 100%; padding: 12px 14px;
  font: 400 16px/1.4 var(--f-body); color: var(--nacht);
  background: var(--wit); border: 1px solid var(--cement-400); border-radius: 0;
}
.form textarea { resize: vertical; min-height: 120px; }
.form input:focus, .form textarea:focus { outline: 2px solid var(--nacht); outline-offset: 0; border-color: var(--nacht); }
.form ::placeholder { color: var(--nacht-500); opacity: .75; }
.hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.form__send { justify-self: start; margin-top: 4px; background: var(--nacht); color: var(--wit); }
.form__send:hover { background: var(--nacht-700); }

/* ---------------------------------------------------------------- footer */
.foot { background: var(--nacht-900); color: var(--grijsblauw-300); padding-top: clamp(52px, 6vw, 84px); font-size: 15.5px; }
.foot__grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, .8fr) minmax(0, 1.2fr); gap: 40px; align-items: start; }
.lockup--foot { --lk: 76px; }
.foot__kop { margin: 0 0 14px; font: 600 12px/1 var(--f-body); letter-spacing: .17em; text-transform: uppercase; color: var(--lichtblauw); }
.foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.foot a { color: var(--wit); text-decoration: none; }
.foot a:hover { text-decoration: underline; text-decoration-color: var(--lichtblauw); }
.foot address { font-style: normal; line-height: 1.6; margin-bottom: 18px; }
.foot .btn { text-decoration: none; }
.foot .btn--accent { color: var(--nacht); }
.foot .btn--wa-line { color: var(--wa); }
.foot .btn--wa-line:hover { color: var(--wit); }
.foot__base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; margin-top: clamp(40px, 5vw, 64px); padding: 20px 0 24px; border-top: 1px solid var(--nacht-700); font-size: 14px; }
.foot__base p { margin: 0; }

/* ---------------------------------------------------------------- sticky bar (phone) */
.sticky { display: none; }

/* ================================================================ widths */
@media (max-width: 1180px) {
  .nav__list > li > a, .dd__btn { padding: 0 9px; font-size: 15px; }
  .review__head { flex-wrap: wrap; }
  .review__src { margin-left: 60px; text-align: left; width: 100%; }
  .review__src br { display: none; }
}

@media (max-width: 1023.98px) {
  :root { --nav-h: 64px; }
  /* navbar: menu behind a toggle */
  .lockup--nav { --lk: 31px; }
  .nav__menu {
    position: absolute; left: 0; right: 0; top: 100%;
    display: none;
    max-height: calc(100svh - var(--nav-h)); overflow: auto;
    padding: 4px var(--gutter) 22px;
    background: var(--nacht); border-bottom: 1px solid var(--nacht-700);
  }
  .nav.menu-open .nav__menu { display: block; }
  .nav__list { flex-direction: column; align-items: stretch; gap: 0; }
  .nav__list > li > a, .dd__btn { width: 100%; justify-content: space-between; min-height: 54px; padding: 0; font-size: 18px; border-bottom: 1px solid var(--nacht-700); }
  .dd__list { position: static; width: auto; padding: var(--voeg) 0; background: transparent; border-top: 0; box-shadow: none; }
  .nav__call { margin-left: auto; }
  .nav__toggle {
    position: relative; display: inline-grid; place-items: center;
    width: 44px; height: 44px; padding: 0;
    background: transparent; border: 1px solid var(--nacht-700); cursor: pointer;
  }
  .nav__toggle span, .nav__toggle span::before, .nav__toggle span::after { display: block; width: 18px; height: 2px; background: var(--wit); transition: transform .15s, opacity .15s; }
  .nav__toggle span { position: relative; }
  .nav__toggle span::before, .nav__toggle span::after { content: ""; position: absolute; left: 0; }
  .nav__toggle span::before { top: -6px; }
  .nav__toggle span::after { top: 6px; }
  .nav.menu-open .nav__toggle span { background: transparent; }
  .nav.menu-open .nav__toggle span::before { transform: translateY(6px) rotate(45deg); }
  .nav.menu-open .nav__toggle span::after { transform: translateY(-6px) rotate(-45deg); }

  /* fold: the crossing turns vertical — the headline's second line sets down over the photo's top */
  .fold { display: flex; flex-direction: column; min-height: 0; padding-top: clamp(28px, 5vw, 48px); --P: clamp(3.3rem, 15.5vw, 7rem); }
  .fold__text { display: contents; }
  .lockup--fold { order: 1; align-self: flex-start; margin-inline: var(--gutter); }
  .fold__kop { order: 2; position: relative; z-index: 2; margin-inline: var(--gutter); max-width: calc(100% - 2 * var(--gutter)); }
  .fold__photo { order: 3; height: clamp(250px, 64vw, 520px); margin-top: calc(var(--P) * -.5); }
  .fold__photo img { object-position: 30% 40%; }
  .fold__photo::after { background: linear-gradient(180deg, rgb(20 36 44 / .82) 0%, rgb(20 36 44 / .35) 22%, rgb(20 36 44 / 0) 42%); }
  .fold__sub { order: 4; margin: 26px var(--gutter) 0; max-width: 34em; }
  .pair--fold { order: 5; margin: 22px var(--gutter) 0; }
  .ik { order: 6; margin: 22px var(--gutter) 0; }
  .fold__diensten { order: 7; margin-top: 30px; margin-right: 0; align-self: stretch; }

  .strip__in { grid-template-columns: 1fr; }
  .card__body { grid-template-columns: 1fr; }
  .stappen { grid-template-columns: 1fr; gap: 14px; }
  .stappen__kop { max-width: none; }
  .svc-tegel__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 36px; align-items: start; }
  .svc-stuc__head { grid-template-columns: 1fr; gap: 8px; }
  .gregory__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 40px; }
  .contact__grid { grid-template-columns: 1fr; }
  .over__grid { grid-template-columns: 1fr; grid-template-areas: "text" "photo" "cta"; row-gap: 28px; }
  .gebied__grid { grid-template-columns: 1fr; grid-template-areas: "text" "beeld" "cta"; row-gap: 28px; }
  .faq__grid { grid-template-columns: 1fr; }
  .faq__head { position: static; }
  .faq__cta { grid-column: 1; }
  .foot__grid { grid-template-columns: 1fr 1fr; }
  .lockup--foot { grid-column: 1 / -1; }
}

@media (max-width: 767.98px) {
  body { font-size: 16px; padding-bottom: calc(68px + env(safe-area-inset-bottom)); }
  .sticky {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
    display: grid; grid-template-columns: 1fr 1fr; gap: var(--voeg);
    padding: var(--voeg) var(--voeg) calc(var(--voeg) + env(safe-area-inset-bottom));
    background: var(--nacht); border-top: 1px solid var(--nacht-700);
  }
  .sticky a { display: flex; align-items: center; justify-content: center; gap: 9px; min-height: 52px; font: 700 16.5px/1 var(--f-body); text-decoration: none; }
  .sticky__bel { background: var(--lichtblauw); color: var(--nacht); }
  .sticky__wa { background: var(--wa); color: var(--wit); }

  .pair { display: grid; grid-template-columns: 1fr; }
  .pair .btn { width: 100%; }
  .klus__in > * { width: 100%; }
  .over__cta .btn, .gebied__cta .btn, .gregory__text > .btn, .sec-cta .btn { width: 100%; }
  .pair--foot { grid-template-columns: 1fr 1fr; }
  .gregory__grid { grid-template-columns: 1fr; }
  /* tegelwerk on a phone: the pair right after the words, so the section still ends on its action */
  .svc-tegel__grid { grid-template-columns: 1fr; row-gap: 0; }
  .svc-tegel__copy { display: contents; }
  .svc-tegel__copy > .lat { order: 1; } .svc-tegel__copy > .h2 { order: 2; } .svc-tegel__copy > p:not(.lat):not(.price) { order: 3; }
  .svc-tegel__grid > .ba { order: 4; margin: 10px 0 8px; }
  .svc-tegel__copy > .mats { order: 5; } .svc-tegel__copy > .scope { order: 6; } .svc-tegel__copy > .price { order: 7; } .svc-tegel__copy > .pair { order: 8; }
  .ba-rij { grid-template-columns: 1fr; gap: 28px; }
  .gregory__photo { max-width: 420px; margin-right: 18px; }
  .reviews__grid { grid-template-columns: 1fr; }
  .reviews__scores { width: 100%; }
  .rscore { flex: 1; min-width: 0; }
  .stappen__rij { grid-template-columns: 1fr 1fr; }
  .gebied__beeld { grid-template-columns: 1fr; height: auto; }
  .kaart { height: 340px; }
  .gebied__bus { height: 210px; }
  .nap > div { grid-template-columns: 1fr; gap: 4px; }
  .foot__grid { grid-template-columns: 1fr; }
  .lockup--foot { --lk: 64px; }
  .sec-cta { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 639.98px) {
  .lockup--nav { --lk: 27px; }
  .lockup--nav .lockup__name { font-size: 9.5px; margin-top: 5px; }
  .nav__in { gap: 10px; }
  .nav__tel { padding: 0 10px; font-size: 14px; gap: 6px; }
  .nav__tel .i { width: 15px; height: 15px; }
  .nav__wa, .nav__toggle { width: 40px; height: 40px; }
  .fold__diensten-kop { padding-left: calc(var(--gutter)); }
  .fold__diensten ul { grid-template-columns: 1fr; }
  .fold__diensten li + li::before { left: 14px; top: calc(var(--voeg) / -2 - 5px); }
  .fold__diensten a { height: auto; min-height: 70px; justify-content: center; padding: 13px 54px 13px var(--gutter); }
  .fold__diensten .i { top: 50%; right: var(--gutter); transform: translateY(-50%); }
  .fold__diensten a:hover .i { transform: translate(4px, -50%); }
  .strip__tile--oordeel { flex-direction: column; align-items: flex-start; gap: 14px; }
  .score + .score { padding-left: 0; padding-top: 14px; border-left: 0; border-top: 1px solid var(--cement-200); width: 100%; }
  .strip__link { margin-left: 0; }
  .card__photo { height: 230px; }
  .review__head { flex-wrap: wrap; }
  .review__src { margin-left: 60px; text-align: left; width: 100%; }
  .reviews__scores { flex-direction: column; }
  .mats--tiles { grid-template-columns: 1fr 1fr; }
  .stappen__rij li { min-height: 58px; padding: 10px 12px; font-size: 14.5px; }
}

@media (max-width: 379.98px) {
  .nav__tel span { display: none; }
  .nav__tel { width: 40px; padding: 0; justify-content: center; }
}

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


/* ============ ACHTER TEGELS — picked 1 of ronde/achter.py (hoek: één blok achter het rechtereind van de rij, steekt boven en rechts uit). Written in by ronde-varianten.py --vast; %V% -> :root:root. ============ */
/* 1 · corner */
@media (min-width: 1024px) {
  :root:root .fold__diensten::before { content: ""; position: absolute; z-index: -1; right: -18px; bottom: 0; width: 46%; height: calc(calc(clamp(104px, 9.4vw, 138px) + 2 * var(--voeg)) + 18px); background: var(--lichtblauw); }
}


/* ============ STAPPEN — picked 2 of ronde/stappen.py (foto's: elke stap een tegel met een foto van die stap erboven). Written in by ronde-varianten.py --vast; %V% -> :root:root. ============ */
/* 2 · photos */
:root:root .band--stappen { padding: 36px 0; }
:root:root .stappen { align-items: start; }
:root:root .stappen__kop { padding-top: 4px; }
:root:root .stappen__rij li { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 12px; min-height: 0; padding: 0 16px 14px 0; }
:root:root .stappen__rij .stap__foto { display: block; grid-column: 1 / -1; margin: 0 -16px 14px 0; }
:root:root .stappen__rij .stap__foto img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }
:root:root .stappen__rij span { margin-left: 16px; }
@media (max-width: 767.98px) {
  :root:root .stappen__rij li { padding: 0 10px 12px 0; column-gap: 10px; }
  :root:root .stappen__rij .stap__foto { margin: 0 -10px 10px 0; }
  :root:root .stappen__rij span { margin-left: 10px; font-size: 30px; }
}


/* ============ TABBLADEN — picked 1 of ronde/tabs.py (schakelaar: twee knoppen in een donker kader boven de foto, zoals je voorbeeld). Written in by ronde-varianten.py --vast; %V% -> :root:root. ============ */
/* 1 · switch */
:root:root .stuc-ba .ba-rij { grid-template-columns: minmax(0, 1fr); gap: 0; }   /* full width (Sem, 2026-10-28), was minmax(0, 980px) */
:root:root .stuc-ba .ba-tabs { grid-row: 1; }
:root:root .stuc-ba .ba-rij > .ba { grid-area: 2 / 1; }
:root:root .stuc-ba .ba-rij:not([data-toon="2"]) > .ba:nth-of-type(2),
:root:root .stuc-ba .ba-rij[data-toon="2"] > .ba:nth-of-type(1) { visibility: hidden; }
:root:root .stuc-ba .ba-rij .ba__frame { aspect-ratio: 3 / 2; }
:root:root .stuc-ba .ba-rij .ba--tall .ba__frame img { object-position: 50% 50%; }
:root:root .ba-tabs__knop { margin: 0; border: 0; font: inherit; text-align: left; cursor: pointer; }
:root:root .ba-tabs__knop:focus-visible { outline: 3px solid var(--lichtblauw); outline-offset: 2px; }

:root:root .stuc-ba .ba-tabs { display: flex; justify-self: start; gap: 4px; margin-bottom: 18px; padding: 4px; background: var(--nacht); }   /* was nacht-700, on the dark ground */
:root:root .ba-tabs__knop { padding: 12px 18px; background: transparent; color: var(--grijsblauw-300); transition: background-color .15s, color .15s; }
:root:root .ba-tabs__knop:hover { color: var(--wit); }
:root:root .ba-tabs__knop.is-aan { background: var(--lichtblauw); color: var(--nacht); }
:root:root .ba-tabs__knop b { font: 600 12.5px/1 var(--f-body); letter-spacing: .17em; text-transform: uppercase; }
:root:root .ba-tabs__knop span { display: none; }


/* ============ PRIJS EN KNOPPEN — picked 1 of ronde/voet.py (omhoog: prijs en knoppen in de kop, onder het lijstje, zoals bij badkamers en tegelwerk). Written in by ronde-varianten.py --vast; %V% -> :root:root. ============ */
/* 1 · up */
:root:root .svc-stuc__foot { display: none; }
:root:root .svc-stuc .aanbod--kop { display: block; }

/* ================================================================ carried over from the basis2 draw (Sem, 2026-10-28):
   even voorstellen, the stamp, the thumbnail row, the projects run, the viewer */
:root { --f-hand: "Caveat", "Segoe Script", "Bradley Hand", cursive; }

/* ---------------------------------------------------------------- shared: the photo, its label, his stamp */
.foto { position: relative; margin: 0; overflow: hidden; background: var(--nacht-800); }
.foto > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.foto:hover > img { transform: scale(1.02); }
.foto__open { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; margin: 0; padding: 0; border: 0; background: transparent; cursor: zoom-in; }
.foto__open:focus-visible { outline: 3px solid var(--lichtblauw); outline-offset: -3px; }

/* the small label */
.klein { display: inline-flex; align-items: center; gap: 5px; margin: 0; font: 500 12.5px/1.25 var(--f-body); color: var(--nacht-500); white-space: nowrap; }
.klein .i { width: 14px; height: 14px; color: var(--grijsblauw-700); }
.klein--op { position: absolute; left: 0; bottom: 0; z-index: 2; padding: 6px 10px 6px 8px; background: var(--nacht); color: var(--wit); pointer-events: none; }
.klein--op .i { color: var(--lichtblauw); }

/* his stamp: the name set as the lockup sets it, the rule (merk.svg, the same file) under it, laid over the photo */
.stempel {
  --lk: clamp(30px, 2.4vw, 38px);
  position: absolute; z-index: 2; top: clamp(12px, 1.3vw, 18px); right: clamp(12px, 1.3vw, 18px);
  display: inline-flex; flex-direction: column; width: max-content;
  color: var(--wit); opacity: .9; pointer-events: none;
  filter: drop-shadow(0 1px 1px rgb(15 28 34 / .45)) drop-shadow(0 2px 10px rgb(15 28 34 / .35));
}
.stempel__park { font-family: var(--f-display); font-weight: 800; font-stretch: 100%; font-size: var(--lk); line-height: .74; letter-spacing: -.03em; margin-left: -.045em; padding-top: .04em; }
.stempel__name { font-family: var(--f-body); font-weight: 600; font-size: calc(var(--lk) * .231); line-height: 1.05; letter-spacing: -.012em; margin-top: calc(var(--lk) * .17); white-space: nowrap; }
.stempel__rule {
  display: block; width: 100%; aspect-ratio: 208 / 2.25; margin-top: calc(var(--lk) * .09);
  background: var(--wit);
  -webkit-mask: url("merk.svg") 0 0 / 100% 100% no-repeat; mask: url("merk.svg") 0 0 / 100% 100% no-repeat;
}

/* the row of thumbnails under a principal photo, and the line that counts the series */
.reeks { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; margin-top: var(--voeg); }
.reeks__rij { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, var(--t, 76px)); gap: var(--voeg); }
.thumb { position: relative; display: block; width: 100%; aspect-ratio: 1; margin: 0; padding: 0; border: 0; overflow: hidden; background: var(--nacht-800); cursor: zoom-in; }
.thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; }
.thumb:hover img { transform: scale(1.07); }
.thumb:focus-visible { outline: 3px solid var(--lichtblauw-400); outline-offset: 2px; }
.thumb--meer span { position: absolute; inset: 0; display: grid; place-items: center; background: rgb(20 36 44 / .72); color: var(--wit); font-family: var(--f-display); font-weight: 800; font-stretch: 70%; font-size: clamp(22px, 2vw, 28px); line-height: 1; }
.reeks__tel { display: inline-flex; align-items: center; gap: 8px; margin: 0; padding: 0; border: 0; background: none; font: 500 15px/1.35 var(--f-body); color: var(--nacht-500); text-align: left; cursor: pointer; }
.reeks__tel b { color: var(--nacht); font-weight: 700; }
.reeks__tel .i { width: 18px; height: 18px; color: var(--grijsblauw-700); transition: transform .15s; }
.reeks__tel:hover { color: var(--nacht); }
.reeks__tel:hover .i { transform: translateX(3px); }

/* ---------------------------------------------------------------- even voorstellen */
.intro { background: var(--wit); }
.intro__grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 6fr); gap: clamp(28px, 5vw, 80px); }
.intro__portret { position: relative; margin: 0; aspect-ratio: 4 / 5; overflow: hidden; background: var(--nacht-800); }
.intro__portret img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 38% 20%; }
.intro__portret::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgb(20 36 44 / 0) 44%, rgb(20 36 44 / .55) 66%, rgb(20 36 44 / .94) 100%); }
.intro__kop { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; margin: 0; padding: 0 clamp(20px, 2.6vw, 36px) clamp(22px, 2.6vw, 34px); color: var(--wit); }
.intro__hoi { display: block; font: 600 clamp(19px, 1.6vw, 23px)/1.2 var(--f-body); letter-spacing: -.01em; }
.intro__naam { display: block; width: max-content; margin: .04em 0 .12em -.03em; font-family: var(--f-hand); font-weight: 700; font-size: clamp(96px, 9.8vw, 150px); line-height: .8; color: var(--lichtblauw); transform: rotate(-4deg); transform-origin: 0 100%; }
.intro__rol { display: block; font: 500 clamp(14px, 1.1vw, 16px)/1.35 var(--f-body); color: var(--grijsblauw-300); }
.intro__zij { display: flex; flex-direction: column; justify-content: space-between; gap: 32px; }
.intro__zij .lat { margin-bottom: 0; }
/* three facts, each a row: kin to the strip's tiles, laid with one joint and a clip on it */
.feiten { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--voeg); }
.feit { --fs: clamp(104px, 11.5vw, 168px); position: relative; display: grid; grid-template-columns: var(--fs) minmax(0, 1fr); align-items: center; column-gap: clamp(18px, 2.2vw, 32px); min-height: var(--fs); padding-right: clamp(16px, 2.2vw, 32px); background: var(--kalk); }
.feit__foto { position: relative; align-self: stretch; overflow: hidden; background: var(--cement-200); }
.feit__foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.feit__tekst { padding-block: 14px; }
.feit__kop { font-family: var(--f-display); font-weight: 800; font-stretch: 84%; font-size: clamp(23px, 2.2vw, 31px); line-height: 1.02; letter-spacing: -.012em; }
.feit__regel { margin: 8px 0 0; max-width: 30em; font-size: 16px; line-height: 1.5; color: var(--nacht-500); }
.feit + .feit::before { content: ""; position: absolute; z-index: 1; left: calc(var(--fs) + 14px); top: calc(var(--voeg) / -2 - 5px); width: 10px; height: 10px; background: var(--lichtblauw); box-shadow: inset 0 0 0 1.5px var(--nacht); }

/* ---------------------------------------------------------------- projects: the run, edge to edge */
.proj { background: var(--kalk); padding-bottom: 0; overflow: hidden; }
.proj__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px 40px; }
.proj__head > div { flex: 1 1 520px; }
.proj__head .h2 { margin-bottom: 12px; }
.proj__intro { max-width: 34em; margin: 0; color: var(--nacht-500); }
.run__knop { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 16px; border: 1px solid var(--cement-400); background: var(--wit); color: var(--nacht); font: 600 14.5px/1 var(--f-body); cursor: pointer; }
.run__knop::before { content: ""; width: 10px; height: 12px; border-left: 3px solid currentColor; border-right: 3px solid currentColor; box-sizing: border-box; }
.run__knop[aria-pressed="true"]::before { width: 0; height: 0; border-left: 10px solid currentColor; border-right: 0; border-top: 6px solid transparent; border-bottom: 6px solid transparent; }
.run__knop:hover { border-color: var(--nacht); }
.run { margin-top: clamp(28px, 3.6vw, 44px); overflow: hidden; }
.run:not(.is-klaar) { overflow-x: auto; }
.run__track { display: flex; width: max-content; }
.run.is-klaar .run__track { animation: run-loop 56s linear infinite; }
.run:hover .run__track, .run:focus-within .run__track, .run.is-stil .run__track { animation-play-state: paused; }
@keyframes run-loop { from { transform: translateX(0); } to { transform: translateX(calc(-100% / 3)); } }
.run__set { display: flex; gap: var(--voeg); padding-right: var(--voeg); }
.pkaart { position: relative; flex: none; width: clamp(280px, 34vw, 540px); background: var(--wit); }
.pkaart__foto { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--nacht-800); }
.pkaart__foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.pkaart__foto img[src^="hangtoilet"] { object-position: 50% 58%; }
.pkaart:hover .pkaart__foto img { transform: scale(1.03); }
.pkaart__tekst { padding: 16px 20px 22px; }
.pkaart__dienst { display: flex; align-items: center; gap: 10px; margin: 0 0 9px; font: 600 12px/1 var(--f-body); letter-spacing: .17em; text-transform: uppercase; color: var(--grijsblauw-700); }
.pkaart__dienst::before { content: ""; width: 10px; height: 10px; background: var(--lichtblauw); box-shadow: inset 0 0 0 1.5px var(--nacht); }
.pkaart__wat { margin: 0; font-family: var(--f-display); font-weight: 700; font-stretch: 92%; font-size: clamp(18px, 1.5vw, 21px); line-height: 1.22; }
.pkaart__open { position: absolute; inset: 0; z-index: 3; width: 100%; height: 100%; padding: 0; border: 0; background: transparent; cursor: zoom-in; }
.pkaart__open:focus-visible { outline: 3px solid var(--nacht); outline-offset: -3px; }

/* ---------------------------------------------------------------- the viewer: one for the whole page */
html.viewer-open { overflow: hidden; }
.viewer { position: fixed; inset: 0; z-index: 100; display: grid; grid-template-rows: auto minmax(0, 1fr) auto auto auto; background: var(--nacht-900); color: var(--wit); }
.viewer[hidden] { display: none; }
.viewer__top { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 10px var(--gutter); }
.viewer__reeks { display: flex; align-items: baseline; gap: 14px; margin: 0; }
.viewer__naam { font: 600 12.5px/1 var(--f-body); letter-spacing: .17em; text-transform: uppercase; color: var(--lichtblauw); }
.viewer__pos { font-family: var(--f-display); font-weight: 800; font-stretch: 70%; font-size: 22px; line-height: 1; }
.viewer__dicht { position: relative; flex: none; width: 48px; height: 48px; padding: 0; border: 1px solid var(--nacht-700); background: var(--nacht); cursor: pointer; }
.viewer__dicht span::before, .viewer__dicht span::after { content: ""; position: absolute; left: 50%; top: 50%; width: 22px; height: 2px; margin: -1px 0 0 -11px; background: var(--wit); }
.viewer__dicht span::before { transform: rotate(45deg); }
.viewer__dicht span::after { transform: rotate(-45deg); }
.viewer__dicht:hover { border-color: var(--lichtblauw); }
.viewer__podium { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: stretch; gap: 14px; min-height: 0; padding: 0 var(--gutter); touch-action: pan-y; }
.viewer__fig { position: relative; margin: 0; min-height: 0; }
.viewer__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; user-select: none; -webkit-user-drag: none; }
.viewer__pijl { align-self: center; display: grid; place-items: center; width: 52px; height: 52px; padding: 0; border: 0; background: var(--lichtblauw); color: var(--nacht); cursor: pointer; }
.viewer__pijl:hover { background: var(--lichtblauw-400); }
.viewer__pijl .i { width: 24px; height: 24px; }
.viewer__pijl--terug .i { transform: rotate(180deg); }
.viewer__label { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: 2px 12px; margin: 0; padding: 14px var(--gutter) 2px; text-align: center; }
.viewer__label .i { align-self: center; width: 24px; height: 24px; color: var(--lichtblauw); }
.viewer__plek { font-family: var(--f-display); font-weight: 800; font-stretch: 76%; font-size: clamp(24px, 2.4vw, 34px); line-height: 1; text-transform: uppercase; }
.viewer__maand { font-size: clamp(16px, 1.4vw, 20px); color: var(--lichtblauw-200); }
.viewer__wat { flex-basis: 100%; font-size: 14.5px; color: var(--grijsblauw-300); }
.viewer__strook { display: flex; justify-content: safe center; gap: var(--voeg); overflow-x: auto; padding: 10px var(--gutter); scrollbar-width: thin; scrollbar-color: var(--nacht-700) transparent; }
.viewer__strook button { position: relative; flex: none; width: 60px; height: 60px; padding: 0; border: 0; background: var(--nacht-800); opacity: .5; cursor: pointer; transition: opacity .15s; }
.viewer__strook button:hover { opacity: .85; }
.viewer__strook button[aria-current="true"] { opacity: 1; outline: 3px solid var(--lichtblauw); outline-offset: -3px; }
.viewer__strook img { width: 100%; height: 100%; object-fit: cover; }
.viewer__cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 20px; padding: 12px var(--gutter) calc(14px + env(safe-area-inset-bottom)); border-top: 1px solid var(--nacht-700); }
.viewer__cta p { margin: 0; font-family: var(--f-display); font-weight: 800; font-stretch: 80%; font-size: 22px; line-height: 1; }
.viewer__paar { display: grid; grid-template-columns: auto auto; gap: var(--voeg); }

/* the thumbnail row in the badkamers card, in the place of the rating bar (Sem, 2026-10-28) */
.card__head .reeks { --t: clamp(56px, 5.4vw, 76px); margin: 0; }

@media (max-width: 1023.98px) {
  .intro__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
  .feit { --fs: clamp(92px, 12vw, 120px); }
  .viewer__podium { gap: 8px; }
  .viewer__pijl { width: 44px; height: 44px; }
}

@media (max-width: 767.98px) {
  .feit__regel { display: none; }
  .intro__grid { grid-template-columns: 1fr; gap: 22px; }
  .intro__portret { aspect-ratio: 5 / 6; order: 2; }
  .intro__zij { display: contents; }
  .intro__zij .lat { order: 1; }
  .feiten { order: 3; }
  .feit { --fs: 76px; min-height: 76px; }
  .feit__tekst { padding-block: 10px; }
  .feit__kop { font-size: 21px; }
  .feit + .feit::before { left: calc(var(--fs) + 10px); }
  .card__head:has(.reeks) { padding: var(--voeg); }
  .card__head .reeks__rij { width: 100%; grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .reeks__tel { display: none; }
  .proj__head > div { flex-basis: 100%; }
  .pkaart { width: min(82vw, 330px); }
  .viewer__top { padding-block: 6px; }
  .viewer__podium { grid-template-columns: minmax(0, 1fr); padding: 0; }
  .viewer__fig { grid-column: 1; grid-row: 1; }
  .viewer__pijl { position: absolute; top: 50%; z-index: 2; width: 42px; height: 42px; margin-top: -21px; background: rgb(175 206 220 / .9); }
  .viewer__pijl--terug { left: 8px; }
  .viewer__pijl--verder { right: 8px; }
  .viewer__label { padding-top: 10px; }
  .viewer__strook { padding-block: 8px; }
  .viewer__strook button { width: 50px; height: 50px; }
  .viewer__cta { flex-wrap: nowrap; justify-content: space-between; gap: 12px; }
  .viewer__cta p { font-size: 18px; }
  .viewer__lang { display: none; }
}

@media (max-width: 379.98px) {
  .feit__kop { font-size: 19px; }
  .viewer__cta p { font-size: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .run { overflow-x: auto; scroll-snap-type: x mandatory; }
  .run.is-klaar .run__track { animation: none; }
  .pkaart { scroll-snap-align: start; }
  .run__knop { display: none; }
}


/* ================================================================ Sem, 2026-10-28, straight in (before: *.before-prijs-zin-slogan.*):
   "Prijs op offerte" gone everywhere, the review band's quote centred, and the over-ons slogan block in reversed colours */
/* the buttons take the price line's room */
.card__copy > .pair, .svc-tegel__copy > .pair, .svc-stuc .aanbod--kop > .pair { margin-top: 24px; }

/* the quote, its marks no longer hanging, and the line under it, centred */
.zin { text-align: center; }
.zin__q { margin-inline: auto; }
.zin__q p::before { margin-left: 0; }
.zin__who { justify-content: center; }
.zin__who::before { display: none; }

/* the slogan block: light blue ground, dark type (was dark ground, light type) */
.over__slogan { background: var(--lichtblauw); color: var(--nacht); }
.over__slogan-kop, .over__slogan-onder { color: var(--nacht); }


/* ================================================================ Sem, 2026-10-29, straight in, phone only (below 768px)
   (before: *.before-mobiel.*): the navbar and the call bar wait for "Mijn diensten" (script.js sets .kop-aan), the line
   under the headline goes, Gregory stands above the buttons, the before/after tabs and the kinds of tile run full width */
@media (max-width: 767.98px) {
  /* the navbar leaves the flow (the fold's own logo opens the page) and slides in from the top; the call bar from the bottom */
  .nav { position: fixed; left: 0; right: 0; top: 0; transform: translateY(-100%); visibility: hidden; transition: transform .22s ease, visibility 0s .22s; }
  .sticky { transform: translateY(100%); visibility: hidden; transition: transform .22s ease, visibility 0s .22s; }
  .kop-aan .nav, .kop-aan .sticky { transform: none; visibility: visible; transition: transform .22s ease; }

  .fold__sub { display: none; }
  .ik { order: 4; }

  :root:root .stuc-ba .ba-tabs { justify-self: stretch; }
  :root:root .ba-tabs__knop { flex: 1; text-align: center; }
  .svc-tegel .mats { display: grid; grid-template-columns: 1fr 1fr; }
  .svc-tegel .mats li { text-align: center; }
}
@media (max-width: 767.98px) and (prefers-reduced-motion: reduce) {
  .nav, .sticky, .kop-aan .nav, .kop-aan .sticky { transition: none; }
}


/* ============ HANDSCHRIFT — picked 1 of ronde/hand.py (handtekening: Mr Dafoe, een vlotte handtekening met de kwast). Written in by ronde-varianten.py --vast; %V% -> :root:root. ============ */
/* 1 · handtekening */
:root:root .intro__naam { font-family: "Mr Dafoe", var(--f-hand); font-weight: 400; font-size: clamp(84px, 10.6vw, 164px); line-height: .78; margin: .02em 0 .36em .05em; }
@media (max-width: 767.98px) {
  :root:root .intro__naam { font-size: min(112px, 25vw); }
}


/* ============ VIER STAPPEN — picked 1 of ronde/vier.py (groot: grote kop erboven, staande foto's, enorme cijfers half over de foto). Written in by ronde-varianten.py --vast; %V% -> :root:root. ============ */
/* 1 · groot */
:root:root .band--stappen { padding: clamp(56px, 7vw, 104px) 0; }
:root:root .stappen { grid-template-columns: minmax(0, 1fr); align-items: start; gap: clamp(26px, 3.2vw, 44px); }
:root:root .stappen__kop { max-width: none; padding-top: 0; font-stretch: 66%; font-size: clamp(40px, 5.2vw, 76px); line-height: .9; text-transform: uppercase; letter-spacing: -.004em; text-wrap: balance; }
:root:root .stappen__rij li { grid-template-columns: auto minmax(0, 1fr); align-items: end; column-gap: 14px; padding: 0 20px 20px 0; font-size: clamp(16px, 1.35vw, 19px); }
:root:root .stappen__rij .stap__foto { position: relative; margin: 0 -20px 0 0; }
:root:root .stappen__rij .stap__foto::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgb(28 49 60 / 0) 55%, rgb(28 49 60 / .9) 100%); }
:root:root .stappen__rij .stap__foto img { aspect-ratio: 4 / 5; }
:root:root .stappen__rij span { position: relative; z-index: 1; margin: -.46em 0 0 20px; font-stretch: 62%; font-size: clamp(76px, 8.4vw, 132px); line-height: .8; }
@media (max-width: 767.98px) {
  :root:root .stappen__rij li { column-gap: 10px; padding: 0 12px 14px 0; font-size: 15px; }
  :root:root .stappen__rij .stap__foto { margin: 0 -12px 0 0; }
  :root:root .stappen__rij span { margin: -.44em 0 0 12px; font-size: clamp(56px, 17vw, 76px); }
}


/* ============ KLANTOORDEEL — picked 1 of ronde/zin.py (eronder, groot: sterren en "Gegeven op Klantenoordelen" groot, naam en datum klein eronder). Written in by ronde-varianten.py --vast; %V% -> :root:root. ============ */
/* 1 · eronder, groot */
:root:root .zin__who { display: none; }
:root:root .zin__bron { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px 14px; margin: clamp(24px, 2.6vw, 32px) 0 0; font-size: clamp(19px, 1.8vw, 24px); line-height: 1.3; color: var(--nacht); }
:root:root .zin__bron .stars { --s: clamp(20px, 1.8vw, 25px); }
:root:root .zin__bron b { font-weight: 700; text-decoration: underline; text-decoration-color: var(--lichtblauw-400); text-decoration-thickness: .16em; text-underline-offset: .18em; }
:root:root .zin__wie { display: block; margin: 10px 0 0; font-size: 15px; color: var(--nacht-500); }


/* ============ STUCWERK ÉÉN — picked 1 of ronde/samen.py (naast elkaar: één donkere sectie, tekst links, schuiffoto rechts met de tabbladen op de foto). Written in by ronde-varianten.py --vast; %V% -> :root:root. ============ */
/* 1 · naast elkaar */
:root:root section.stuc-ba { display: none; }
:root:root .stuc-samen { display: block; background: none; color: inherit; }
:root:root .stuc-samen .ba__cap .tag--plain { color: inherit; opacity: .72; }
:root:root .stuc-samen .ba-tabs { grid-area: 2 / 1; position: relative; z-index: 2; align-self: start; margin: 12px 0 0 12px; }
:root:root .stuc-samen .ba__tag { top: auto; bottom: 12px; }
@media (max-width: 767.98px) {
  :root:root .stuc-samen .ba-tabs { margin: 8px 0 0 8px; padding: 3px; gap: 3px; }
  :root:root .stuc-samen .ba-tabs__knop { padding: 9px 12px; }
  :root:root .stuc-samen .ba-tabs__knop b { font-size: 11.5px; letter-spacing: .14em; }
}
@media (min-width: 1024px) {
  :root:root .svc-stuc > .wrap { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-rows: auto auto auto 1fr; column-gap: clamp(40px, 4.6vw, 72px); }
  :root:root .svc-stuc__head { display: contents; }
  :root:root .svc-stuc > .wrap > .lat { grid-area: 1 / 1; }
  :root:root .svc-stuc__head > div:first-child { grid-area: 2 / 1; }
  :root:root .svc-stuc__head > div:nth-child(2) { grid-area: 3 / 1; margin-top: 26px; }
  :root:root .stuc-samen { grid-area: 1 / 2 / -1 / 3; align-self: start; }
}
@media (max-width: 1023.98px) {
  :root:root .svc-stuc__head > div:first-child { order: 1; }
  :root:root .stuc-samen { order: 2; margin: 22px 0 18px; }
  :root:root .svc-stuc__head > div:nth-child(2) { order: 3; }
}


/* ============ REVIEWS: PLEK — picked 3 of ronde/rplek.py (onder de foto: tussen de foto en Gregory, naast elkaar). Written in by ronde-varianten.py --vast; %V% -> :root:root. ============ */
/* 3 · onder de foto */
@media (max-width: 767.98px) {
  :root:root .fold__oordeel { display: block; }
  :root:root .strip__tile--oordeel { display: none; }

  :where(:root:root) .fold__oordeel .oo { display: flex; width: fit-content; max-width: 100%; color: var(--wit); text-decoration: none; }
  :where(:root:root) .fold__oordeel .oo__score { display: grid; grid-template-columns: auto auto; grid-template-areas: "fig stars" "fig src"; justify-content: start; align-items: center; column-gap: 8px; row-gap: 5px; }
  :where(:root:root) .fold__oordeel .oo__fig { grid-area: fig; font-family: var(--f-display); font-weight: 800; font-stretch: 80%; line-height: .9; letter-spacing: -.01em; }
  :where(:root:root) .fold__oordeel .oo__stars { grid-area: stars; }
  :where(:root:root) .fold__oordeel .oo__src { grid-area: src; display: inline-flex; align-items: center; white-space: nowrap; }
  :where(:root:root) .fold__oordeel .oo__src .gmark { width: 15px; height: 15px; margin-right: 4px; border-width: 1.5px; font-size: 9.5px; }
  :where(:root:root) .fold__oordeel .oo__n { display: none; }

  :where(:root:root) .fold__oordeel .oo { gap: 0; background: rgb(20 36 44 / .55); -webkit-backdrop-filter: blur(9px); backdrop-filter: blur(9px); border: 1px solid rgb(255 255 255 / .18); }
  :where(:root:root) .fold__oordeel .oo__score { padding: calc(8px * var(--oo-k, 1)) calc(12px * var(--oo-k, 1)); background: none; }
  :where(:root:root) .fold__oordeel .oo__score + .oo__score { border: solid rgb(255 255 255 / .18); border-width: var(--oo-dt, 0px) 0 0 var(--oo-dl, 1px); }
  :where(:root:root) .fold__oordeel .oo__fig { font-size: calc(24px * var(--oo-k, 1)); color: var(--wit); text-shadow: none; }
  :where(:root:root) .fold__oordeel .oo__stars { --s: 11px; --fill: var(--lichtblauw); --empty: rgb(255 255 255 / .28); }
  :where(:root:root) .fold__oordeel .oo__src { font: 600 11.5px/1 var(--f-body); color: var(--wit); text-shadow: none; }

  :root:root .fold__oordeel { order: 3; position: static; height: auto; margin: 18px var(--gutter) 0; }
  :root:root .fold__oordeel .oo { position: static; flex-direction: row; align-items: stretch; --oo-dl: 1px; --oo-dt: 0px; }
}


/* ================================================================ Sem, 2026-10-29, straight in, phone only (below 768px)
   (before: style.before-kop.css): the headline a little lower, "niet veel, maar iets": a fifth of its own size (about
   12px on a 390 phone), further onto the photo's top; nothing under it moves */
@media (max-width: 767.98px) {
  .fold__kop { top: calc(var(--P) * .2); }
}


/* ================================================================ Sem, 2026-10-29, straight in (before: *.before-google-ik.*):
   the Google mark in Google's own colours wherever it stands (all widths); the two review scores under the fold photo
   share the full width (phone); the owner line is a link to "Even voorstellen" (all widths, no visible change: its look
   as a button is a row on the switch) */
:root:root .gmark {
  border: 0; border-radius: 0; color: transparent; text-shadow: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath fill='%23EA4335' d='M24 9.5c3.54 0 6.71 1.22 9.21 3.6l6.85-6.85C35.9 2.38 30.47 0 24 0 14.62 0 6.51 5.38 2.56 13.22l7.98 6.19C12.43 13.72 17.74 9.5 24 9.5z'/%3E%3Cpath fill='%234285F4' d='M46.98 24.55c0-1.57-.15-3.09-.38-4.55H24v9.02h12.94c-.58 2.96-2.26 5.48-4.78 7.18l7.73 6c4.51-4.18 7.09-10.36 7.09-17.65z'/%3E%3Cpath fill='%23FBBC05' d='M10.53 28.59c-.48-1.45-.76-2.99-.76-4.59s.27-3.14.76-4.59l-7.98-6.19C.92 16.46 0 20.12 0 24c0 3.88.92 7.54 2.56 10.78l7.97-6.19z'/%3E%3Cpath fill='%2334A853' d='M24 48c6.48 0 11.93-2.13 15.89-5.81l-7.73-6c-2.15 1.45-4.92 2.3-8.16 2.3-6.26 0-11.57-4.22-13.47-9.91l-7.98 6.19C6.51 42.62 14.62 48 24 48z'/%3E%3C/svg%3E") center / 88% no-repeat;
}
.ik { text-decoration: none; }
@media (max-width: 767.98px) {
  :root:root .fold__oordeel .oo { width: 100%; }
  :root:root .fold__oordeel .oo__score { flex: 1 1 0; justify-content: center; }
}


/* ============ GREGORY-KNOP — picked 1 of ronde/ik.py (omlijnd: een lichtblauwe rand om het geheel en een pijl rechts, zoals de WhatsApp-knop eronder). Written in by ronde-varianten.py --vast; %V% -> :root:root. ============ */
/* 1 · omlijnd */
@media (max-width: 767.98px) {
  :root:root .fold .ik { max-width: none; padding: 12px 14px 12px 12px; transition: background-color .15s, border-color .15s; }
  :root:root .fold .ik__words { flex: 1 1 0; min-width: 0; }
  :root:root .fold .ik__pijl { display: grid; place-items: center; flex: none; width: 36px; height: 36px; transition: transform .15s; }
  :root:root .fold .ik__pijl .i { width: 20px; height: 20px; }
  :root:root .fold .ik:active .ik__pijl { transform: translateX(3px); }
  @media (max-width: 379.98px) { :root:root .fold .ik { gap: 12px; padding: 10px 8px 10px 10px; } :root:root .fold .ik__pijl { width: 26px; } }
  :root:root .fold .ik { border: 2px solid var(--lichtblauw); }
  :root:root .fold .ik:active { background: var(--nacht-800); }
  :root:root .fold .ik__pijl { color: var(--lichtblauw); }
}


/* ============ PROJECTKAARTEN — picked 3 of ronde/pkaart.py (lichtblauw: de sectie heel lichtblauw, de voet lichtblauw, de dienst en het blokje donker). Written in by ronde-varianten.py --vast; %V% -> :root:root. ============ */
/* 3 · lichtblauw */
  :root:root .proj { background: var(--lichtblauw-100); }
  :root:root .run__knop { border-color: var(--lichtblauw-400); }
  :root:root .run__knop:hover { border-color: var(--nacht); }
  :root:root .pkaart { background: var(--lichtblauw-200); }
  :root:root .pkaart__dienst { color: var(--nacht-700); }
  :root:root .pkaart__dienst::before { background: var(--nacht); box-shadow: none; }
  :root:root .pkaart__wat { color: var(--nacht); }


/* ================================================================ Sem, 2026-10-29, straight in (before: *.before-eigenaar.*):
   the fold's owner line a classic "meet the owner": his name, "Eigenaar en tegelzetter" and "Maak kennis met mij"; the
   sentence "Wie belt, krijgt mij aan de lijn …" out ("De zin mag weg"). All widths; the phone keeps its outlined button
   and its arrow on the right, so the small arrow after "Maak kennis met mij" shows only from 768px up. */
.ik__rol { display: block; }
.ik__kennis { display: flex; align-items: center; gap: 6px; width: fit-content; margin-top: 7px; font-weight: 600; color: var(--lichtblauw); }
.ik__kennis .i { width: 16px; height: 16px; transition: transform .15s; }
.ik:hover .ik__kennis .i { transform: translateX(3px); }
@media (max-width: 767.98px) { .ik__kennis .i { display: none; } }


/* ============ DIENSTEN IN DE BANNER — picked 2 of ronde/fdienst.py (smalle balk: één lage doorkijkbalk op de foto, de drie namen met een pijl op één regel). Written in by ronde-varianten.py --vast; %V% -> :root:root. ============ */
/* 2 · smalle balk */
@media (min-width: 1024px) {
  :root:root .fold__diensten { margin: 0 0 26px; }
  :root:root .fold__diensten::before { display: none; }
  :root:root .fold__diensten-kop { padding: 10px 16px 8px 20px; background: rgb(20 36 44 / .72); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
  :root:root .fold__diensten ul { padding: 0; gap: 0; background: rgb(20 36 44 / .72); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
  :root:root .fold__diensten li + li { border-left: 1px solid rgb(255 255 255 / .16); }
  :root:root .fold__diensten li + li::before { display: none; }
  :root:root .fold__diensten a { height: 62px; flex-direction: row; align-items: center; justify-content: space-between; gap: 12px; padding: 0 20px; background: none; color: var(--wit); }
  :root:root .fold__diensten a::after { content: ""; flex: none; width: 18px; height: 18px; background: var(--lichtblauw); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='2' stroke-linecap='square' d='M4 12h15M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='2' stroke-linecap='square' d='M4 12h15M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat; transition: transform .15s; }
  :root:root .fold__diensten a:hover { background: rgb(255 255 255 / .07); }
  :root:root .fold__diensten a:hover::after { transform: translateX(4px); }
  :root:root .fold__diensten b { font-size: clamp(18px, 1.5vw, 21px); }
  :root:root .fold__diensten span { display: none; }
  :root:root .fold__text { padding-bottom: calc(26px + 62px - 56px); }
}


/* ============ GREGORY-LETTER — picked 2 of ronde/naam.py (kwast: Kaushan Script, nog aaneengeschreven, maar met een brede kwast, zwaarder en ruwer). Written in by ronde-varianten.py --vast; %V% -> :root:root. ============ */
/* 2 · kwast */
:root:root .intro__portret { container-type: inline-size; }
:root:root .intro__naam { font-family: "Kaushan Script", var(--f-hand); font-weight: 400; font-size: 25.5cqw; line-height: .9; margin: .08em 0 .26em -.01em; }


/* ============ EVEN VOORSTELLEN — picked 3 of ronde/voorst.py (één blok met de foto: de grote foto en de feiten één donker blok, zonder kleine foto's, dunne lijnen ertussen). Written in by ronde-varianten.py --vast; %V% -> :root:root. ============ */
/* 3 · één blok met de foto */
  :root:root .intro__grid { column-gap: 0; }
  :root:root .intro__zij { justify-content: center; gap: 28px; padding: clamp(26px, 3.4vw, 52px); background: var(--nacht-800); }
  :root:root .intro__zij .lat { color: var(--lichtblauw); }
  :root:root .intro__zij .lat::before { box-shadow: none; }
  :root:root .intro__zij .lat::after { background: var(--nacht-700); }
  :root:root .feiten { gap: 0; }
  :root:root .feit { display: block; min-height: 0; padding: clamp(16px, 1.8vw, 24px) 0; background: none; }
  :root:root .feit:last-child { padding-bottom: 0; }
  :root:root .feit + .feit { border-top: 1px solid var(--nacht-700); }
  :root:root .feit + .feit::before { display: none; }
  :root:root .feit__foto { display: none; }
  :root:root .feit__tekst { padding: 0; }
  :root:root .feit__kop { display: flex; align-items: center; gap: 14px; color: var(--wit); }
  :root:root .feit__kop::before { content: ""; flex: none; width: 10px; height: 10px; background: var(--lichtblauw); }
  :root:root .feit__regel { padding-left: 24px; color: var(--grijsblauw-300); }
  @media (max-width: 767.98px) {
    :root:root .intro__grid { row-gap: 0; }
    :root:root .intro__zij .lat { margin-bottom: 22px; color: inherit; }
    :root:root .intro__zij .lat::before { box-shadow: inset 0 0 0 1.5px var(--nacht); }
    :root:root .intro__zij .lat::after { background: var(--grijsblauw); }
    :root:root .feiten { padding: 4px 20px 24px; background: var(--nacht-800); }
    :root:root .feit { padding: 16px 0; }
    :root:root .feit:last-child { padding-bottom: 0; }
    :root:root .feit__regel { display: block; margin-top: 6px; font-size: 15px; }
  }

/* Sem, 2026-10-29, straight in (before: style.before-intro-kennis.css): "Maak kennis met mij" without its underline (the
   arrow still moves on hover), and Even voorstellen with less room above and below ("onder en boven mag deze sectie minder
   padding bevatten"): about 60% of a section's usual padding, at every width (72px wide, 40px on a phone). */
.sec.intro { padding-block: clamp(40px, 5vw, 72px); }


/* ============ FEITENBLOK: VORM — picked 1 of ronde/svorm.py (over de rand: één balk met de drie feiten, half over de onderkant van de banner (vanaf 1024 px; kleiner één balk eronder)). Written in by ronde-varianten.py --vast; %V% -> :root:root. ============ */
/* 1 · over de rand */
  :root:root .strip__in { gap: 0; background: var(--wit); }
  :root:root .strip__tile { background: none; }
  :root:root .strip__tile + .strip__tile { border-left: 1px solid var(--cement-200); }
  @media (max-width: 1023.98px) {
    :root:root .strip__tile + .strip__tile { border-left: 0; border-top: 1px solid var(--cement-200); }
  }
  @media (min-width: 1024px) {
    :root:root .strip { padding: 0 0 clamp(18px, 2vw, 28px); }
    :root:root .strip__in { position: relative; z-index: 4; margin-top: -32px; box-shadow: 0 24px 40px -30px rgb(20 36 44 / .6); }
    :root:root .fold__diensten { margin-bottom: calc(26px + 32px); }
    :root:root .fold__text { padding-bottom: calc(26px + 32px + 62px - 56px); }
  }

/* Sem, 2026-10-29, straight in, phone only (before: style.before-ik-oordeel.css): "De rating en ontmoet de eigenaar
   element, moeten worden omgedraaid, maar wel op een manier dat ze beide nog binnen de fold in beeld staan." Gregory now
   right under the photo, the two scores under him; the same gaps (18px, then 22px), so the pair ends where it ended and
   both stay on the first screen from 360x640 up. */
@media (max-width: 767.98px) {
  :root:root .fold .ik { order: 3; margin-top: 18px; }
  :root:root .fold__oordeel { order: 4; margin-top: 22px; }
}


/* ============ DIENSTEN OP DE TELEFOON — picked 3 of ronde/mdienst.py (open lijst: geen blok, grote witte namen op de donkere banner, pijl rechts, dunne lijnen). Written in by ronde-varianten.py --vast; %V% -> :root:root. ============ */
/* 3 · open lijst */
@media (max-width: 767.98px) {
  :root:root .fold__diensten li + li::before { display: none; }
  :root:root .fold__diensten span { display: none; }
  :root:root .fold__diensten a { height: auto; background: none; color: var(--wit); }
  :root:root .fold__diensten a::after { content: ""; flex: none; width: 18px; height: 18px; background: var(--lichtblauw); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='2' stroke-linecap='square' d='M4 12h15M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='2' stroke-linecap='square' d='M4 12h15M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat; transition: transform .15s; }
  :root:root .fold__diensten a:active::after { transform: translateX(4px); }
  :root:root .fold__diensten { margin: 32px var(--gutter) 22px; }
  :root:root .fold__diensten-kop { padding: 0 0 12px; background: none; }
  :root:root .fold__diensten ul { grid-template-columns: 1fr; padding: 0; gap: 0; background: none; border-top: 1px solid rgb(255 255 255 / .18); }
  :root:root .fold__diensten li { border-bottom: 1px solid rgb(255 255 255 / .18); }
  :root:root .fold__diensten a { min-height: 62px; flex-direction: row; align-items: center; justify-content: space-between; gap: 12px; padding: 0 2px 0 0; }
  :root:root .fold__diensten a::after { width: 20px; height: 20px; }
  :root:root .fold__diensten b { font-size: 24px; }
}

/* Sem, 2026-10-29, straight in (before: style.before-naam-klein.css): "Gregory" on the portrait "een fractie kleiner",
   25.5cqw -> 23.5cqw (about 8% smaller), at every width. */
:root:root .intro__naam { font-size: 23.5cqw; }


/* ============ STERREN IN HET FEITENBLOK — picked 3 of ronde/ster.py (blauwgrijs: het middenblauw van de pagina, rustiger dan nu). Written in by ronde-varianten.py --vast; %V% -> :root:root. ============ */
/* 3 · blauwgrijs */
  :root:root .strip .stars { --fill: var(--grijsblauw); }


/* ============ FOTO'S BIJ DE FEITEN — picked 1 of ronde/fthumb.py (vierkant: een klein vierkant fotootje rechts, in het midden van de regel). Written in by ronde-varianten.py --vast; %V% -> :root:root. ============ */
/* 1 · vierkant */
  :root:root .feit { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: clamp(16px, 2vw, 32px); }
  :root:root .feit__tekst { grid-area: 1 / 1; }
  :root:root .feit__foto { display: block; grid-area: 1 / 2; }
  :root:root .feit__foto { align-self: center; width: clamp(60px, 5.4vw, 84px); aspect-ratio: 1; }
  @media (max-width: 767.98px) {
    :root:root .feit__foto { width: 58px; }
  }


/* ============ BADKAMER — picked 2 of ronde-nu/badkamer.py (naast: ingekort, de foto links over de hele hoogte, de woorden en de lijst rechts). Written in by hand (the two paragraphs and the lines under the headings deleted from the HTML, the subheading shown); %V% -> :root:root. ============ */
/* 2 · naast */
  :root:root .card__sub { margin: 0; font: 500 clamp(18px, 1.45vw, 21px)/1.35 var(--f-body); color: var(--nacht); text-wrap: balance; }
  :root:root .five li { padding-block: 16px; }
  :root:root .five li::before, :root:root .five li::after { top: 50%; margin-top: -11px; }
  :root:root .five b { margin-bottom: 0; }

@media (min-width: 1024px) {
  :root:root .svc-bad .card { display: grid; grid-template-columns: minmax(0, 1.22fr) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; }
  :root:root .card__photo { grid-column: 1; grid-row: 1; height: auto; min-height: 380px; }
  :root:root .card__photo img { object-position: 46% 58%; }
  :root:root .card__head { grid-column: 1; grid-row: 2; border-bottom: 0; border-top: 1px solid var(--cement-200); }
  :root:root .card__body {
    grid-column: 2; grid-row: 1 / span 2; grid-template-columns: minmax(0, 1fr); align-content: center; gap: clamp(30px, 2.6vw, 40px);
    padding: clamp(34px, 3.6vw, 56px) clamp(30px, 3.4vw, 56px); border-left: 1px solid var(--cement-200);
  }
  :root:root .card__copy .h2 { font-size: clamp(34px, 3vw, 46px); margin-bottom: 16px; }
  :root:root .card__copy > .pair { margin-top: 26px; }
  :root:root .card__list-kop { margin-top: 0; }
  :root:root .five b { font-size: clamp(18px, 1.4vw, 20px); }
}


/* ============ TEGELWERK — picked 3 of ronde-nu/tegelwerk.py (soorten: ingekort, elke soort tegel een foto, vier op een rij; de onderdelen in twee kolommen). Written in by hand (the paragraph and the lines under the headings deleted from the HTML, the subheading and the four photos shown); %V% -> :root:root. ============ */
/* 3 · soorten */
  :root:root .svc-tegel__copy > .svc-tegel__sub { margin: 0; font: 500 clamp(18px, 1.45vw, 21px)/1.35 var(--f-body); color: var(--nacht); text-wrap: balance; }
  :root:root .mats__foto { display: block; overflow: hidden; aspect-ratio: 1; margin-bottom: 9px; background: var(--cement-200); }
  :root:root .mats__foto img { display: block; width: 100%; height: 100%; object-fit: cover; }
  :root:root .mats li:last-child .mats__foto img { object-position: 70% 100%; scale: 1.5; transform-origin: 72% 88%; }
  :root:root .svc-tegel .mats li { padding: 0 0 10px; text-align: center; }
@media (max-width: 767.98px) {
  :root:root .svc-tegel .mats { gap: var(--voeg); }
}
@media (min-width: 768px) and (max-width: 1023.98px) {
  :root:root .svc-tegel .mats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--voeg); margin-top: 22px; }
}
@media (min-width: 1024px) {
  :root:root .svc-tegel .mats { margin-top: 26px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--voeg); }
  :root:root .svc-tegel .mats li { padding: 0 0 12px; font-size: 15px; }
  :root:root .mats__foto { aspect-ratio: 4 / 5; margin-bottom: 11px; }
  :root:root .svc-tegel .scope { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 28px; margin-top: 26px; }
  :root:root .svc-tegel .scope li { padding-block: 11px; }
  :root:root .svc-tegel .scope li::before { top: 17px; }
}


/* ============ DE DIENSTEN GELIJK — the operator, 2026-10-30: "make all renovated sections normalized for font sizes etc".
   One scale for the service blocks that were cut (Badkamer, Tegelwerk; Stucwerk once its pick is in): the page's own heading,
   the same gap under it, one subheading, one list item, one row, one tile mark, one gap before the buttons. Written in by hand.
   Badkamer's heading was 34–46 px, now the page's 32–50; so it stays on two lines its card goes from 1.22 : 1 to 1 : 1
   (the photo 9% narrower). ============ */
:root {
  --svc-sub: 500 clamp(18px, 1.45vw, 21px)/1.35 var(--f-body);
  --svc-li: 700 clamp(18px, 1.4vw, 20px)/1.2 var(--f-display);
  --svc-li-pad: 14px;
  --svc-mark: 18px;
  --svc-gap: 24px;
}
@media (min-width: 1024px) { :root { --svc-gap: 26px; } }

:root:root .svc-bad .h2, :root:root .svc-tegel .h2 { font-size: clamp(32px, 3.5vw, 50px); margin-bottom: 16px; }
:root:root .card__sub, :root:root .svc-tegel__copy > .svc-tegel__sub { font: var(--svc-sub); }
:root:root .card__copy > .pair, :root:root .svc-tegel__copy > .pair { margin-top: var(--svc-gap); }

:root:root .five li, :root:root .svc-tegel .scope li {
  padding: var(--svc-li-pad) 0 var(--svc-li-pad) calc(var(--svc-mark) + 16px);
  font: var(--svc-li); font-stretch: 94%; color: var(--nacht);
}
:root:root .five b, :root:root .svc-tegel .scope b { display: block; margin: 0; font: inherit; color: inherit; }
:root:root .five li::before, :root:root .svc-tegel .scope li::before {
  top: calc(var(--svc-li-pad) + (1.2em - var(--svc-mark)) / 2); left: 0; margin: 0; width: var(--svc-mark); height: var(--svc-mark);
  box-shadow: inset 0 0 0 2px var(--nacht);
}
:root:root .five li::after, :root:root .svc-tegel .scope li::after {
  content: ""; position: absolute; top: calc(var(--svc-li-pad) + (1.2em - var(--svc-mark)) / 2); left: calc(var(--svc-mark) / 2 - 1px); margin: 0;
  width: 2px; height: var(--svc-mark); background: var(--nacht);
}
@media (min-width: 768px) {
  :root:root .svc-tegel .mats { margin-top: var(--svc-gap); }
}
@media (min-width: 1024px) {
  :root:root .svc-bad .card { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  :root:root .card__body { padding-inline: clamp(30px, 3.4vw, 46px); }
  :root:root .svc-tegel .scope { margin-top: var(--svc-gap); }
  :root:root .svc-tegel .scope li { padding-block: var(--svc-li-pad); }
}
/* the six items two to a column only where they fit on a line at this size */
@media (min-width: 1024px) and (max-width: 1239.98px) {
  :root:root .svc-tegel .scope { grid-template-columns: minmax(0, 1fr); }
}


/* ============ STUCWERK — picked 1 of ronde-nu/stucwerk.py (rijen: ingekort, de drie onderdelen als de lijst van Badkamer en Tegelwerk). Written in by hand (the paragraph deleted from the HTML, the subheading shown, each item one heading); %V% -> :root:root; on the scale of DE DIENSTEN GELIJK. ============ */
/* 1 · rijen */
  :root:root .svc-stuc .h2 { margin-bottom: 16px; }
  :root:root .svc-stuc__head .svc-stuc__sub { margin: 0; font: var(--svc-sub); color: var(--wit); text-wrap: balance; }
  :root:root .svc-stuc .aanbod--kop > .pair { margin-top: var(--svc-gap); }
  :root:root .svc-stuc .scope li { font: var(--svc-li); font-stretch: 94%; color: var(--wit); }
  :root:root .svc-stuc .scope b { font: inherit; color: inherit; }
@media (min-width: 1024px) {
  :root:root .svc-stuc__head > div:nth-child(2) { margin-top: var(--svc-gap); }
}
  :root:root .svc-stuc .scope li { padding: var(--svc-li-pad) 0 var(--svc-li-pad) calc(var(--svc-mark) + 16px); }
  :root:root .svc-stuc .scope li::before {
    top: calc(var(--svc-li-pad) + (1.2em - var(--svc-mark)) / 2); left: 0; width: var(--svc-mark); height: var(--svc-mark);
  }


/* ============ DE LIJSTEN WEG OP DE TELEFOON — the operator, 2026-10-30, on a crop of Badkamer's list on the phone: "delete
   this on mobile from the main service. same for the service after that. and the one after that." Below 768 px the lists
   of Badkamer ("Dit hoort er allemaal bij" with its five), Tegelwerk (the six) and Stucwerk (the three) are hidden; they
   stay in the HTML for the computer and the tablet. Tegelwerk's four kinds of tile stay. Written in by hand. ============ */
@media (max-width: 767.98px) {
  :root:root .svc-bad .card__list, :root:root .svc-tegel .scope, :root:root .svc-stuc .scope { display: none; }
  /* Stucwerk's buttons follow its before/after: the caption's 18 px and the column's 8 px gap are the space above them */
  :root:root .svc-stuc .aanbod--kop > .pair { margin-top: 0; }
}


/* ============ OVER ONS, DE BUS EN DE FEITREGELS WEG OP DE TELEFOON — the operator, 2026-10-30: "de over ons sectie mag
   vervallen op mobiel, werkgebied mag de foto van de bus weg op mobiel, description of the 3 facts at the meet the owner
   section also hide on mobile." Below 768 px: Over ons gone, Werkgebied without the bus (the map stays), and in Even
   voorstellen the three facts their headings only. Written in by hand. ============ */
@media (max-width: 767.98px) {
  :root:root .over, :root:root .gebied__bus, :root:root .feit__regel { display: none; }
}


/* ── 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(--lichtblauw);
  background:var(--kalk);color:var(--nacht);
  font-size:15px;line-height:1.5;
}
.form-demo a{color:inherit;text-decoration:underline}