/* Park Tegelwerken & Badkamers — bak1 · L3-04 · c
   One idea: the wall as raster. The page is a tiled wall, centred the way a tiler centres one:
   whole tiles in the middle, the cut tiles equally wide left and right. Every colour comes from
   palette.json. Tile width --tw and course height --th are set by script.js from the real
   viewport (fallbacks below); --cols is 2 / 4 / 5. */

:root {
  /* palette.json — primary: Voeg */
  --voeg: #1F1B18;
  --voeg-800: #2A2521;
  --voeg-700: #3B3530;
  --voeg-500: #5E5650;
  /* secondary: Zandsteen */
  --zand-100: #EFEAE4;
  --zand: #DCD4CC;
  --zand-500: #C8BDB1;
  --zand-700: #A99C8F;
  /* accent: Klei */
  --klei-700: #6A5544;
  --klei: #816A57;
  --klei-300: #B39C87;
  --klei-100: #D9CABB;
  /* neutral: Kalk */
  --papier: #FCFBF9;
  --kalk: #F6F3EF;
  --voeg-licht: #E7E0D8;
  --voeg-fold: #D8CEC3;
  /* platform */
  --wa: #25D366;
  --wit: #FFFFFF;

  --f-head: "Onest", system-ui, sans-serif;
  --f-body: "Noto Sans", system-ui, sans-serif;

  --cols: 2;
  --gutter: 16px;
  --tw: min(240px, calc((100vw - 2 * var(--gutter)) / var(--cols)));
  --th: calc(var(--tw) / 2);
  --cut: calc((100vw - var(--cols) * var(--tw)) / 2);
  --j: 1px;
  --pad: 12px;            /* text inset from a joint */
  --seam: var(--th);      /* how much of the strip hangs below the fold's ground */
}
@media (min-width: 640px) {
  :root { --cols: 4; --gutter: 24px; --pad: calc(var(--tw) * 0.1); --seam: calc(var(--th) / 2); }
}
@media (min-width: 1024px) {
  :root { --cols: 5; }
}

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--kalk); color: var(--voeg); -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; font: 400 16px/1.55 var(--f-body); overflow-x: clip; }
@media (min-width: 640px) { body { font-size: 17px; } }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
button { font: inherit; color: inherit; }
p { margin: 0 0 1em; }
h1, h2, h3 { margin: 0; font-weight: 500; }
ul, ol { margin: 0; padding: 0; list-style: none; }
figure { margin: 0; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -999px; top: 8px; z-index: 100; background: var(--voeg); color: var(--papier); padding: 10px 14px; }
.skip:focus { left: 8px; }
:focus-visible { outline: 2px solid var(--klei); outline-offset: 2px; }

/* ---------- the raster ---------- */
.grid {
  display: grid;
  grid-template-columns: repeat(var(--cols), var(--tw));
  width: calc(var(--cols) * var(--tw));
  margin-inline: auto;
}
.wall {
  --g: var(--kalk);
  --jc: var(--voeg-licht);
  position: relative;
  background-color: var(--g);
  background-image:
    linear-gradient(90deg, var(--jc) var(--j), transparent var(--j)),
    linear-gradient(180deg, var(--jc) var(--j), transparent var(--j));
  background-size: var(--tw) var(--th);
  background-position: var(--cut) 0;
}
.wall-zand { --g: var(--zand-100); --jc: var(--zand); }
.wall-papier { --g: var(--papier); --jc: var(--voeg-licht); }
.wall-ink { --g: var(--voeg); --jc: var(--voeg-800); color: var(--papier); }

/* a tile sits inside its joints: the joint shows on its top and left */
.t { margin: var(--j) 0 0 var(--j); min-width: 0; min-height: 0; }

/* the mark: merk.svg as is, its ink from the palette */
.merk {
  display: inline-block;
  aspect-ratio: 201.75 / 26.5;
  background: currentColor;
  -webkit-mask: url("merk.svg") center / contain no-repeat;
  mask: url("merk.svg") center / contain no-repeat;
  flex: none;
}

/* letterspaced caps: the mark's own spacing as the page's small voice */
.kicker, .cap, .menu-cap, .werk-cap, .form-cap, .foot-cap {
  font: 600 11px/1.3 var(--f-head);
  letter-spacing: .38em;
  text-transform: uppercase;
  color: var(--klei-700);
}
.kicker { display: flex; align-items: center; gap: 12px; margin: 0 0 16px; }
.kicker::before { content: ""; width: 9px; height: 9px; background: var(--klei); flex: none; }
.wall-ink .kicker { color: var(--klei-300); }
.wall-ink .kicker::before { background: var(--klei-300); }

h2 {
  font: 500 clamp(27px, calc(var(--tw) * 0.155), 38px)/1.12 var(--f-head);
  letter-spacing: -0.02em;
  margin-bottom: 18px;
  text-wrap: balance;
}
h2 a {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .2em;
  text-decoration-color: var(--zand-500);
  transition: color .15s, text-decoration-color .15s;
}
h2 a:hover { color: var(--klei-700); text-decoration-color: var(--klei); }

.stars { display: inline-flex; gap: 2px; color: var(--klei); }
.stars svg { width: 14px; height: 14px; fill: currentColor; }
svg.g { width: 16px; height: 16px; flex: none; }

/* ---------- buttons are tiles ---------- */
.btn-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: var(--voeg);
  color: var(--papier);
  text-decoration: none;
  font: 600 16px/1.2 var(--f-head);
  padding: calc(var(--th) * .2) calc(var(--tw) * .09);
  border: 0;
  cursor: pointer;
  transition: background .15s;
}
.btn-tile .arr { width: 22px; height: 22px; align-self: flex-end; transition: transform .2s; }
.btn-tile:hover { background: var(--voeg-700); }
.btn-tile:hover .arr { transform: translateX(4px); }
.btn-tile.btn-sm {
  width: calc(var(--tw) - var(--j));
  min-height: calc(var(--th) / 2);
  flex-direction: row-reverse;
  align-items: center;
  gap: 8px;
  padding: 0 min(var(--pad), 14px);
  font-size: min(15px, calc(var(--tw) * .078));
  white-space: nowrap;
}
@media (max-width: 1023px) {
  .actions .btn-tile.btn-sm:only-child { width: calc(var(--tw) * 2 - var(--j)); }
}
.btn-tile.btn-sm .arr { align-self: center; width: 18px; height: 18px; flex: none; }
.btn-light { background: var(--papier); color: var(--voeg); }
.btn-light:hover { background: var(--zand); }
.btn-more {
  display: flex;
  align-items: center;
  width: calc(var(--tw) - var(--j));
  min-height: calc(var(--th) / 2);
  padding: 0 var(--pad);
  margin-left: var(--j);
  font: 500 15px/1.2 var(--f-head);
  color: var(--voeg);
  text-decoration: underline;
  text-decoration-color: var(--zand-700);
  text-underline-offset: .22em;
  box-shadow: inset 0 0 0 1px var(--zand-700);
  background: transparent;
  transition: background .15s;
}
.btn-more:hover { background: var(--papier); text-decoration-color: var(--voeg); }
.actions { display: flex; flex-wrap: wrap; margin-inline: calc(var(--pad) * -1); }

/* the call / WhatsApp pair as half tiles */
.half {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-width: 0;
  padding: calc(var(--th) * .14) calc(var(--tw) * .05);
  text-decoration: none;
  transition: filter .15s, background .15s;
}
.half .ic { width: 22px; height: 22px; fill: currentColor; }
.half-l { font: 600 min(15px, calc(var(--tw) * .078))/1.15 var(--f-head); white-space: nowrap; }
.half-num { white-space: nowrap; font: 500 12.5px/1.2 var(--f-head); font-variant-numeric: tabular-nums; letter-spacing: .01em; }
.half-call { background: var(--zand); color: var(--voeg); }
.half-call:hover { background: var(--zand-500); }
.half-call-dark { background: var(--voeg-800); color: var(--papier); }
.half-call-dark:hover { background: var(--voeg-700); }
.half-wa { background: var(--wa); color: var(--wit); }
.half-wa:hover { box-shadow: inset 0 0 0 3px var(--wit); }
.half-wa .half-num { opacity: .95; }

/* ============ THE FOLD ============ */
.fold {
  --g: var(--kalk);
  --jc: var(--voeg-fold);
  --j: 1px;
  position: relative;
  isolation: isolate;
  padding-top: calc(var(--th) / 4);
  background-color: var(--g);
  background-image:
    linear-gradient(90deg, var(--jc) var(--j), transparent var(--j)),
    linear-gradient(180deg, var(--jc) var(--j), transparent var(--j));
  background-size: var(--tw) var(--th);
  background-position: var(--cut) calc(var(--th) / 4);
}
@media (min-width: 640px) { .fold { --j: 2px; } }
/* the seam: the fold's ground stops halfway through the strip's course */
.fold::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: var(--seam);
  z-index: -1;
  background-color: var(--zand-100);
  background-image: linear-gradient(90deg, var(--zand) 1px, transparent 1px);
  background-size: var(--tw) 100%;
  background-position: var(--cut) 0;
}

/* nav: a course of tiles */
.nav { grid-template-rows: var(--th); position: relative; z-index: 30; }
.nav > * { grid-row: 1; }
.nav-home {
  grid-column: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 6px;
  padding-left: var(--pad);
  color: var(--voeg);
  text-decoration: none;
}
.nav-home .merk { width: min(150px, calc(var(--tw) * .7)); }
.nav-name { font: 500 11px/1 var(--f-body); letter-spacing: .01em; color: var(--voeg); }
.nav-link {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 100%;
  width: 100%;
  padding: 0 var(--pad);
  font: 500 15px/1.2 var(--f-head);
  color: var(--voeg);
  text-decoration: none;
  background: transparent;
  border: 0;
  cursor: pointer;
  text-align: left;
  transition: background .15s;
}
.nav-link:hover, .nav-dd-btn[aria-expanded="true"] { background: var(--papier); }
.ic-down { width: 14px; height: 14px; transition: transform .2s; }
.nav-dd-btn[aria-expanded="true"] .ic-down { transform: rotate(180deg); }
.nav-dd, .nav-over, .nav-halves, .nav-tel { display: none; }
.nav-dd { position: relative; }
.dd {
  position: absolute;
  top: 100%;
  left: 0;
  width: calc(var(--tw) * 1.5);
  display: grid;
  gap: var(--j);
  padding-top: var(--j);
  visibility: hidden;
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity .16s, transform .16s, visibility 0s .16s;
}
.dd a {
  display: block;
  background: var(--papier);
  padding: 13px var(--pad) 12px;
  font: 600 15px/1.25 var(--f-head);
  color: var(--voeg);
  text-decoration: none;
  box-shadow: 0 1px 0 var(--voeg-fold);
}
.dd small { display: block; font: 400 12.5px/1.3 var(--f-body); color: var(--voeg-500); margin-top: 2px; }
.dd a:hover { background: var(--zand); }
.nav-dd-btn[aria-expanded="true"] + .dd,
.nav-dd:has(:focus-visible) .dd { visibility: visible; opacity: 1; transform: none; transition-delay: 0s; }
@media (hover: hover) {
  .nav-dd:hover .dd { visibility: visible; opacity: 1; transform: none; transition-delay: 0s; }
  .nav-dd:hover .nav-dd-btn { background: var(--papier); }
}
.nav-halves { grid-template-columns: 1fr 1fr; }
.nav-halves .nav-link + .nav-link { box-shadow: inset var(--j) 0 0 var(--voeg-fold); }
.nav-tel { align-items: center; justify-content: space-between; gap: 8px; padding: 0 var(--pad); }
.nav-num { display: flex; flex-direction: column; gap: 3px; white-space: nowrap; font: 600 clamp(13px, calc(var(--tw) * .067), 16px)/1.1 var(--f-head); text-decoration: none; font-variant-numeric: tabular-nums; }
.nav-num .cap { font-size: 9.5px; letter-spacing: .3em; }
.nav-num:hover { color: var(--klei-700); }
.nav-wa { display: grid; place-items: center; width: 34px; height: 34px; background: var(--wa); color: var(--wit); flex: none; }
.nav-wa svg { width: 19px; height: 19px; fill: currentColor; }
.nav-menu {
  grid-column: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--pad);
  background: transparent;
  border: 0;
  font: 600 15px/1 var(--f-head);
  cursor: pointer;
}
.burger { position: relative; width: 22px; height: 12px; border-top: 2px solid currentColor; border-bottom: 2px solid currentColor; }
.nav-menu[aria-expanded="true"] { background: var(--voeg); color: var(--papier); }

@media (min-width: 640px) {
  .nav-menu { display: none; }
  .nav-dd { display: block; grid-column: 2; }
  .nav-over { display: flex; grid-column: 3; }
  .nav-tel { display: flex; grid-column: 4; }
}
@media (min-width: 1024px) {
  .nav-halves { display: grid; grid-column: 4; }
  .nav-tel { grid-column: 5; }
}

/* the phone menu: tiles dropped from the nav */
.menu-panel {
  position: absolute;
  left: 0; right: 0;
  top: calc(var(--th) * 1.25);
  z-index: 40;
  padding-bottom: var(--th);
  background-color: var(--kalk);
  background-image:
    linear-gradient(90deg, var(--voeg-fold) 1px, transparent 1px),
    linear-gradient(180deg, var(--voeg-fold) 1px, transparent 1px);
  background-size: var(--tw) var(--th);
  background-position: var(--cut) 0;
  box-shadow: 0 18px 30px -18px rgba(31, 27, 24, .35);
}
.menu-panel[hidden] { display: none; }
.menu-panel .grid { grid-auto-rows: calc(var(--th) / 2); }
.menu-cap { grid-column: 1 / -1; margin: 0; display: flex; align-items: flex-end; padding: 0 var(--pad) 6px; }
.menu-t {
  margin: 1px 0 0 1px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 var(--pad);
  background: var(--papier);
  font: 600 15px/1.2 var(--f-head);
  text-decoration: none;
  grid-column: 1 / -1;
}
.menu-t:nth-of-type(n+4) { grid-column: auto; grid-row: span 2; }
.menu-t svg { width: 20px; height: 20px; fill: currentColor; }
.menu-call { background: var(--zand); }
.menu-wa { background: var(--wa); color: var(--wit); }

/* the hero, tile by tile */
.hero {
  position: relative;
  z-index: 1;
  grid-template-rows: repeat(10, var(--th));
  grid-template-areas:
    "lock lock"
    "lock lock"
    "head head"
    "head head"
    "cta  pair"
    "main nis"
    "main gang"
    "rate rate"
    "strip strip"
    "strip strip";
}
@media (min-width: 640px) {
  .hero {
    grid-template-rows: repeat(7, var(--th));
    grid-template-areas:
      "lock lock main main"
      "lock lock main main"
      "head head main main"
      "head head main main"
      "cta  pair nis  gang"
      "rate rate nis  gang"
      "strip strip strip strip";
  }
}
@media (min-width: 1024px) {
  .hero {
    grid-template-rows: repeat(6, var(--th));
    grid-template-areas:
      "lock lock main main nis"
      "lock lock main main nis"
      "head head main main gang"
      "head head main main gang"
      "cta  pair main main gang"
      "rate strip strip strip strip";
  }
}

/* lockup: the logo's own card laid into the wall as four tiles */
.lockup {
  grid-area: lock;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding: 0 calc(var(--tw) * .1);
  background: var(--zand);
  color: var(--voeg);
}
.merk-xl { width: 100%; }
.lock-name {
  display: block;
  width: max-content;
  margin-top: calc(var(--tw) * .065);
  font: 500 calc(var(--tw) * .13)/1.08 var(--f-body);
  white-space: nowrap;
}
.lock-slogan {
  display: block;
  width: max-content;
  margin-top: calc(var(--tw) * .045);
  font: 600 calc(var(--tw) * .098)/1.15 var(--f-head);
  color: var(--klei);
  white-space: nowrap;
}

.headline {
  grid-area: head;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 calc(var(--tw) * .1);
  background: var(--kalk);
}
h1 {
  font: 500 calc(var(--tw) * .205)/1.03 var(--f-head);
  letter-spacing: -0.03em;
}
.sub {
  margin: calc(var(--th) * .16) 0 0;
  font-size: max(14px, calc(var(--tw) * .07));
  line-height: 1.45;
  color: var(--voeg-500);
  max-width: 34em;
}

.hero-cta { grid-area: cta; }
.hero-cta span { font-size: max(15px, calc(var(--tw) * .07)); }
.hero-pair {
  grid-area: pair;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--j);
  margin: var(--j) 0 0 var(--j);
}
@media (max-width: 1199px) {
  .hero-pair .half-num { display: none; }
}
@media (max-width: 639px) {
  .hero-pair .half { justify-content: space-between; padding: 10px; }
  .hero-pair .half-l { font-size: 14px; }
}

/* photos are laid into tiles; the joints run on over them, faintly */
.ph { position: relative; overflow: hidden; }
.ph img { width: 100%; height: 100%; object-fit: cover; }
.ph::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(90deg, rgba(252, 251, 249, .42) var(--j), transparent var(--j)),
    linear-gradient(180deg, rgba(252, 251, 249, .42) var(--j), transparent var(--j));
  background-size: var(--tw) var(--th);
  background-position: calc(var(--j) * -1) calc(var(--j) * -1);
}
.ph-main { grid-area: main; }
.ph-main img { object-position: 50% 55%; }
.ph-nis { grid-area: nis; }
.ph-nis img { object-position: 50% 45%; }
.ph-gang { grid-area: gang; }
.ph-gang img { object-position: 50% 70%; }

/* the small label on a photo of the work: place and date */
.tag {
  position: absolute;
  z-index: 2;
  left: 10px;
  bottom: 10px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  max-width: calc(100% - 20px);
  padding: 5px 9px 5px 8px;
  background: rgba(252, 251, 249, .92);
  color: var(--voeg);
  font: 500 11.5px/1.25 var(--f-head);
}
@media (max-width: 639px) { .tag-what { display: none; } }
.tag i { width: 7px; height: 7px; background: var(--klei); flex: none; }
@media (min-width: 640px) { .tag { left: 14px; bottom: 14px; font-size: 12px; } }

/* the two ratings: one tile, split lengthwise like the call/WhatsApp tile beside it */
.rate {
  grid-area: rate;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--j);
}
.rate-row {
  display: grid;
  grid-template-columns: auto 1fr;
  align-content: center;
  align-items: center;
  column-gap: 8px;
  row-gap: 3px;
  padding: 0 var(--pad);
  background: var(--papier);
}
.rate-score { display: inline-flex; align-items: center; gap: 6px; font: 600 17px/1 var(--f-head); }
.rate-score .g { width: 15px; height: 15px; }
.rate .stars svg { width: 12px; height: 12px; }
.rate-src { grid-column: 1 / -1; font: 400 11.5px/1.3 var(--f-body); color: var(--voeg-500); }
.rate-src b { font-weight: 600; color: var(--voeg); }
@media (min-width: 1024px) {
  .rate { grid-template-columns: 1fr; grid-template-rows: 1fr 1fr; }
}

/* the trust strip: one course of tiles on the seam */
.strip {
  grid-area: strip;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--j);
  margin: var(--j) 0 0 var(--j);
}
.fact {
  position: relative;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr 1fr;
}
/* the joint inside each fact: two tiles, one object */
.fact::before {
  content: "";
  position: absolute;
  left: 0; right: 0;
  top: calc(var(--th) - var(--j));
  height: var(--j);
  background: var(--kalk);
  opacity: .9;
}
.fact-jaar { background: var(--voeg); color: var(--papier); }
.fact-jaar .fa { display: flex; align-items: baseline; gap: 8px; padding: 0 var(--pad); align-self: center; }
.fact-jaar .ruim { font: 500 13px/1 var(--f-head); color: var(--klei-100); }
.fact-jaar .big { font: 600 calc(var(--tw) * .36)/.9 var(--f-head); letter-spacing: -0.045em; }
.fact-jaar .fb { align-self: center; padding: 0 var(--pad); font: 500 max(14px, calc(var(--tw) * .078))/1.25 var(--f-head); }
.fact-hand { background: var(--zand); color: var(--voeg); }
.fact-hand .cap { position: absolute; top: 12px; left: var(--pad); right: var(--pad); font-size: 9.5px; letter-spacing: .26em; }
.fact-hand .fa, .fact-hand .fb { display: flex; align-items: center; padding: 0 var(--pad); }
.fact-hand .fa { align-self: end; padding-bottom: 12px; }
.fact-hand .fb { align-self: start; padding-top: 12px; }
.fact-hand .w { font: 500 max(15px, calc(var(--tw) * .085))/1.15 var(--f-head); letter-spacing: -0.01em; }
.fact-hand .run { display: none; }
/* Sem, 2026-10-28: no joint between "Van sloopwerk" and "tot afmonteren" — one tile, one line through */
.fact-hand::before { content: none; }
@media (min-width: 640px) {
  .fact { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr; }
  .fact::before { left: calc(var(--tw) - var(--j)); right: auto; top: 0; bottom: 0; width: var(--j); height: auto; }
  .fact-hand .cap { top: calc(var(--th) * .17); right: auto; font-size: 10.5px; letter-spacing: .3em; }
  .fact-hand .fa, .fact-hand .fb { align-self: end; padding-top: 0; padding-bottom: calc(var(--th) * .2); }
  /* the line from the first word to the last, straight through the joint */
  .fact-hand .fa::after { content: ""; flex: 1; height: 1.5px; margin-left: 14px; background: currentColor; }
  .fact-hand .fa { padding-right: 0; }
  .fact-hand .fb { padding-left: 0; }
  .fact-hand .fb::before { content: ""; width: calc(var(--tw) * .07); height: 1.5px; margin-right: 14px; background: currentColor; flex: none; }
}

/* ============ SECTIONS ============ */
.sec { padding-top: var(--th); padding-bottom: calc(var(--th) / 4); }
.tx { padding: calc(var(--th) * .25) var(--pad) 0; }
.lede { max-width: 36em; }

/* ---- badkamers: the service card ---- */
.sec-badk { padding-top: var(--th); }
.sec-badk .grid { position: relative; }
.card {
  grid-column: 1 / -1;
  position: relative;
  display: grid;
  grid-template-columns: repeat(var(--cols), var(--tw));
  background: var(--papier);
}
.card::after { content: ""; position: absolute; inset: 0; border: 1px solid var(--voeg); pointer-events: none; }
.card-photo {
  grid-column: 1 / -1;
  position: relative;
  height: calc(var(--th) * 2);
  overflow: hidden;
}
.card-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 58%; }
.card-copy { grid-column: 1 / -1; padding: calc(var(--th) * .35) var(--pad) calc(var(--th) * .2); }
.card-copy h2 { font-size: clamp(27px, calc(var(--tw) * .16), 40px); }
.price { display: flex; align-items: baseline; gap: 12px; margin: 4px 0 0; font: 500 15px/1.3 var(--f-head); }
.price span, .st-price span, .sr-price span {
  font: 600 10.5px/1 var(--f-head);
  letter-spacing: .32em;
  text-transform: uppercase;
  color: var(--klei-700);
}
.card-list { grid-column: 1 / -1; padding: calc(var(--th) * .3) 0 calc(var(--th) * .3); }
.card-list .kicker { padding-left: var(--pad); }
.scope-table li {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2px;
  min-height: calc(var(--th) / 2);
  padding: 10px var(--pad);
  border-top: 1px solid var(--voeg-licht);
  align-content: center;
}
.scope-table li:last-child { border-bottom: 1px solid var(--voeg-licht); }
.scope-table b { display: flex; align-items: center; gap: 10px; font: 600 15.5px/1.25 var(--f-head); }
.scope-table b::before { content: ""; width: 8px; height: 8px; background: var(--voeg); flex: none; }
.scope-table span { font-size: 15px; line-height: 1.45; color: var(--voeg-500); padding-left: 18px; }
.card-foot {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(var(--cols), var(--tw));
  border-top: 1px solid var(--voeg);
}
.card-foot .actions { grid-column: 1 / -1; margin: 0; order: 2; }
.card-foot .btn-tile {
  width: var(--tw);
  min-height: var(--th);
  flex-direction: column;
  align-items: stretch;
  padding: calc(var(--th) * .18) var(--pad);
  margin: 0;
}
.card-foot .btn-tile .arr { align-self: flex-end; }
.card-foot .btn-more { width: var(--tw); min-height: var(--th); margin: 0; box-shadow: inset -1px 0 0 var(--voeg-licht); }
.g-proof {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px var(--pad);
  border-bottom: 1px solid var(--voeg-licht);
}
.avatars { display: flex; flex: none; }
.avatars i {
  display: grid;
  place-items: center;
  width: 34px; height: 34px;
  margin-left: -9px;
  border-radius: 50%;
  border: 2px solid var(--papier);
  font: 600 14px/1 var(--f-head);
  font-style: normal;
  color: var(--papier);
  background: var(--klei);
}
.avatars i:first-child { margin-left: 0; }
.avatars i:nth-child(2) { background: var(--voeg-700); }
.avatars i:nth-child(3) { background: var(--zand-700); }
.avatars i:nth-child(4) { background: var(--klei-700); }
.avatars i:nth-child(5) { background: var(--voeg-500); }
.g-proof-txt { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.g-proof-cap { font: 600 15px/1.2 var(--f-head); }
.g-proof-line { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; font-size: 13.5px; color: var(--voeg-500); }
.g-proof-line b { color: var(--voeg); font-weight: 600; }
.g-proof-line .num { font-family: var(--f-head); }
.g-proof-line .stars svg { width: 13px; height: 13px; }

@media (min-width: 640px) {
  .card-photo { height: calc(var(--th) * 3); }
  .card-copy { grid-column: 1 / span 2; padding: calc(var(--th) * .35) var(--pad) calc(var(--th) * .3); }
  .card-list { grid-column: 3 / -1; box-shadow: inset 1px 0 0 var(--voeg-licht); }
  .card-foot .actions { grid-column: 1 / span 2; order: 0; }
  .g-proof { grid-column: 3 / -1; border-bottom: 0; box-shadow: inset 1px 0 0 var(--voeg-licht); padding: 0 var(--pad); }
}
@media (min-width: 1024px) {
  .scope-table li { grid-template-columns: var(--tw) 1fr; gap: 0; padding: 0; align-items: center; }
  .scope-table b { padding-left: var(--pad); }
  .scope-table span { padding: 8px var(--pad) 8px 0; }
  .avatars i { width: 40px; height: 40px; font-size: 15px; margin-left: -11px; }
  .g-proof { gap: 18px; }
  .g-proof-cap { font-size: 17px; }
}

/* ---- the one-breath bands ---- */
.band { margin: 0; }
.band-mat { padding-block: 0; }
.mat { grid-auto-rows: calc(var(--th) / 2); }
.mat li {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 1px 0 0 1px;
  font: 500 15px/1 var(--f-head);
  color: var(--papier);
  letter-spacing: .02em;
}
.mat li:not(.mat-cap)::before { content: ""; width: 7px; height: 7px; margin-right: 10px; border: 1px solid var(--klei-300); }
.mat .mat-cap { grid-column: 1 / -1; justify-content: flex-start; padding-left: var(--pad); font: 600 10.5px/1 var(--f-head); letter-spacing: .38em; text-transform: uppercase; color: var(--klei-300); }
@media (min-width: 640px) {
  .mat { grid-auto-rows: var(--th); }
  .mat .mat-cap { grid-column: 1 / -1; }
}
@media (min-width: 1024px) {
  .mat .mat-cap { grid-column: auto; }
  .mat li { font-size: 17px; }
}

.band-quote { padding-block: 0; }
/* Sem, 2026-10-28: the quote in the middle of its courses, not at their top */
.band-quote { display: flex; flex-direction: column; justify-content: center; }
.band-quote blockquote { grid-column: 1 / -1; margin: 0; padding: calc(var(--th) * .3) var(--pad) 0; }
.band-quote blockquote p {
  margin: 0;
  font: 500 clamp(24px, calc(var(--tw) * .15), 38px)/1.18 var(--f-head);
  letter-spacing: -0.02em;
  text-wrap: balance;
}
.band-quote figcaption {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  padding: 14px var(--pad) calc(var(--th) * .3);
  font-size: 14px;
  color: var(--voeg-500);
}
.band-quote figcaption b { color: var(--voeg); font-weight: 600; }
.band-quote .stars svg { width: 15px; height: 15px; }
@media (min-width: 1024px) {
  .band-quote blockquote { grid-column: 2 / -1; }
  .band-quote figcaption { grid-column: 2 / -1; }
}
/* Sem, 2026-10-28: the quote a little wider — the first line runs to "tegelzetter" (17.9em), not halfway (balanced) */
@media (min-width: 640px) {
  .band-quote blockquote p { text-wrap: wrap; max-width: 19em; }
}

/* ---- tegelwerk ---- */
.tegel-text, .stuc-text, .owner-text, .over-text, .over-table, .faq-head, .contact-info { display: flex; flex-direction: column; }
.tegel-text { grid-column: 1 / -1; }
.scope-tiles {
  display: grid;
  grid-template-columns: repeat(2, var(--tw));
  grid-auto-rows: var(--th);
  margin: 0 0 calc(var(--th) / 2);
}
.scope-tiles li {
  display: flex;
  align-items: flex-end;
  margin: 1px 0 0 1px;
  padding: 10px var(--pad) 12px;
  background: var(--papier);
  font: 500 14.5px/1.3 var(--f-head);
  position: relative;
}
.scope-tiles li::before { content: ""; position: absolute; top: 12px; left: var(--pad); width: 8px; height: 8px; background: var(--voeg); }
.scope-tiles .st-price { background: var(--zand); flex-direction: column; align-items: flex-start; justify-content: flex-end; gap: 6px; }
.scope-tiles .st-price::before { display: none; }
.tegel-text .actions { margin: 0; }
.tegel-ba { grid-column: 1 / -1; margin-top: var(--th); }
.tegel-ba .ba { height: calc(var(--th) * 5); }
@media (min-width: 640px) {
  .tegel-text { grid-column: 1 / span 2; }
  .tegel-ba { grid-column: 3 / span 2; margin-top: 0; }
  .scope-tiles li { font-size: 15px; }
}
@media (min-width: 1024px) {
  .tegel-text { grid-column: 1 / span 3; }
  .scope-tiles { grid-template-columns: repeat(3, var(--tw)); }
  .tegel-ba { grid-column: 4 / span 2; }
}
.tegel-text .tx, .stuc-text .tx { padding-bottom: calc(var(--th) * .2); }

/* the before/after slider */
.ba-wrap { position: relative; align-self: start; }
.ba {
  position: relative;
  overflow: hidden;
  margin: 0 0 0 var(--j);
  --pos: 50%;
  user-select: none;
  background: var(--voeg);
}
.ba img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ba .ba-voor { clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
.ba-line { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 2px; margin-left: -1px; background: var(--papier); pointer-events: none; }
.ba-line span {
  position: absolute; top: 50%; left: 50%;
  width: 40px; height: 40px;
  transform: translate(-50%, -50%);
  background: var(--papier);
  box-shadow: 0 2px 10px rgba(31, 27, 24, .25);
}
.ba-line span::before, .ba-line span::after {
  content: ""; position: absolute; top: 50%; width: 0; height: 0;
  border-block: 6px solid transparent; transform: translateY(-50%);
}
.ba-line span::before { left: 9px; border-right: 7px solid var(--voeg); }
.ba-line span::after { right: 9px; border-left: 7px solid var(--voeg); }
.ba input[type="range"] {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  margin: 0;
  opacity: 0;
  cursor: ew-resize;
  -webkit-appearance: none;
  appearance: none;
  z-index: 3;
}
.ba:has(input:focus-visible) { outline: 2px solid var(--klei); outline-offset: 3px; }
.ba-lab {
  position: absolute; top: 10px; z-index: 2;
  padding: 5px 9px;
  font: 600 10px/1 var(--f-head);
  letter-spacing: .3em;
  text-transform: uppercase;
  background: var(--voeg);
  color: var(--papier);
  pointer-events: none;
}
.ba-lab-voor { left: 10px; }
.ba-lab-na { right: 10px; background: var(--papier); color: var(--voeg); }
.tag-under { position: absolute; }
.tegel-ba .tag { bottom: 14px; }

/* ---- stucwerk ---- */
.stuc-ba { grid-column: 1 / -1; order: 2; margin-top: var(--th); }
.ba-tabs { display: grid; grid-template-columns: repeat(2, var(--tw)); }
.ba-tabs button {
  margin: 1px 0 0 1px;
  min-height: calc(var(--th) / 2);
  padding: 0 var(--pad);
  border: 0;
  background: var(--voeg-licht);
  font: 600 14.5px/1 var(--f-head);
  text-align: left;
  cursor: pointer;
  display: flex; align-items: center; gap: 10px;
}
.ba-tabs button::before { content: ""; width: 8px; height: 8px; border: 1.5px solid currentColor; flex: none; }
.ba-tabs button[aria-selected="true"] { background: var(--voeg); color: var(--papier); }
.ba-tabs button[aria-selected="true"]::before { background: currentColor; }
.stuc-ba .ba { height: calc(var(--th) * 4); }
.js .ba-alt { display: none; }
.js .ba-alt.is-on { display: block; }
.js .ba.is-off { display: none; }
html:not(.js) .ba-tabs { display: none; }
html:not(.js) .stuc-ba .ba + .ba { margin-top: var(--th); }
.stuc-text { grid-column: 1 / -1; order: 1; }
.scope-rows { margin: 0 0 calc(var(--th) / 2); }
.scope-rows li {
  display: flex; align-items: center; gap: 12px;
  min-height: calc(var(--th) / 2);
  padding: 6px var(--pad);
  border-top: 1px solid var(--voeg-licht);
  font: 500 15px/1.3 var(--f-head);
}
.scope-rows li::before { content: ""; width: 8px; height: 8px; background: var(--voeg); flex: none; }
.scope-rows li:last-child { border-bottom: 1px solid var(--voeg-licht); }
.scope-rows .sr-price { background: var(--zand-100); }
.scope-rows .sr-price::before { display: none; }
.stuc-text .actions { margin: 0; }
@media (min-width: 640px) {
  .stuc-ba { grid-column: 1 / span 2; order: 0; margin-top: 0; }
  .stuc-ba .ba { height: calc(var(--th) * 5); }
  .stuc-text { grid-column: 3 / span 2; order: 0; }
}
@media (min-width: 1024px) {
  .stuc-ba { grid-column: 1 / span 3; }
  .stuc-ba .ba { height: calc(var(--th) * 4.5); }
  .stuc-text { grid-column: 4 / span 2; }
}

/* ---- staat uw klus er niet bij ---- */
.band-klus { padding-block: calc(var(--th) / 2); }
.klus-text { grid-column: 1 / -1; padding: calc(var(--th) * .35) var(--pad) calc(var(--th) * .3); }
.klus-text h2 { font-size: clamp(30px, calc(var(--tw) * .2), 48px); margin-bottom: 14px; }
.klus-text p { color: var(--klei-100); max-width: 36em; margin: 0; }
.klus-pair { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: calc(var(--th) - var(--j)); gap: var(--j); margin: var(--j) 0 0 var(--j); }
.klus-pair .half { padding: calc(var(--th) * .16) var(--pad); }
.klus-pair .half-l { font-size: 16px; }
.klus-pair .half-num { font-size: 13px; }
@media (min-width: 640px) {
  .klus-text { grid-column: 1 / span 2; }
  .klus-pair { grid-column: 3 / span 2; align-self: center; }
}
@media (min-width: 1024px) {
  .klus-text { grid-column: 1 / span 3; }
  .klus-pair { grid-column: 4 / span 2; }
}

/* ---- de vakman ---- */
.owner-photo { grid-column: 1 / -1; height: calc(var(--th) * 5); overflow: hidden; margin: 0 0 0 var(--j); position: relative; }
.owner-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.owner-text { grid-column: 1 / -1; padding: calc(var(--th) * .45) var(--pad) 0; }
.owner-text h2 { font-size: clamp(28px, calc(var(--tw) * .17), 42px); }
.sign { display: flex; align-items: center; gap: 16px; margin: 6px 0 calc(var(--th) * .4); font: 600 16px/1.2 var(--f-head); }
.sign .merk { width: 92px; color: var(--voeg); }
.sign > span:last-child { padding-left: 16px; box-shadow: inset 1px 0 0 var(--zand-700); }
.sign small { display: block; font: 400 12.5px/1.3 var(--f-body); color: var(--voeg-500); margin-top: 3px; }
.owner-text .actions { margin-left: calc(var(--pad) * -1); }
@media (min-width: 640px) {
  .owner-photo { grid-column: 1 / span 2; }
  .owner-text { grid-column: 3 / span 2; }
}
@media (min-width: 1024px) {
  .owner-text { grid-column: 3 / span 3; padding-left: calc(var(--tw) * .2); padding-right: calc(var(--tw) * .3); }
  .owner-text .actions { margin-left: calc(var(--tw) * -.2); }
  /* Sem, 2026-10-28: the button's foot on the photo's foot. The photo is as tall as the text column (five courses,
     more where the text runs longer, from 1024 to about 1100 px), the button at the column's foot */
  .owner-photo { height: auto; min-height: calc(var(--th) * 5); }
  .owner-text .actions { margin-top: auto; }
}

/* ---- over ons + werkgebied: one ground, one wall ---- */
.sec-over { padding-bottom: 0; }
.over-text { grid-column: 1 / -1; }
.over-text > p { padding: 0 var(--pad); }
.over-text .tx p { padding: 0; }
.over-photo { height: calc(var(--th) * 2); overflow: hidden; margin: 0 0 0 var(--j); position: relative; }
.over-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
.over-table { grid-column: 1 / -1; }
.spec { margin: 0 0 calc(var(--th) / 2); }
.spec div {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2px;
  min-height: calc(var(--th) / 2);
  align-content: center;
  padding: 8px var(--pad);
  border-top: 1px solid var(--zand-500);
}
.spec div:last-child { border-bottom: 1px solid var(--zand-500); }
.spec dt { font: 600 10.5px/1.3 var(--f-head); letter-spacing: .32em; text-transform: uppercase; color: var(--klei-700); }
.spec dd { margin: 0; font: 500 15.5px/1.35 var(--f-head); }
.over-table .actions { margin: 0; }
@media (min-width: 640px) {
  .over-text { grid-column: 1 / span 2; }
  .over-table { grid-column: 3 / span 2; padding-top: calc(var(--th) * 1); }
  .spec div { grid-template-columns: var(--tw) 1fr; padding: 0; gap: 0; align-items: center; }
  .spec dt { padding-left: var(--pad); }
  .spec dd { padding: 8px var(--pad) 8px 0; }
}
@media (min-width: 1024px) {
  .over-table { grid-column: 3 / span 3; }
}

.sec-werk { padding-top: 0; }
.sec-werk .grid { box-shadow: inset 0 1px 0 var(--voeg); }
.nowrap { white-space: nowrap; }
.werk-head { grid-column: 1 / -1; }
.werk-head .tx { padding-top: calc(var(--th) * .3); }
.werk-head h2 { max-width: 22em; }
.map-wrap { grid-column: 1 / -1; margin: 0 0 0 var(--j); min-height: calc(var(--th) * 4); position: relative; }
.map { position: absolute; inset: 0; background: var(--zand); }
.werk-photo { grid-column: 1 / -1; height: calc(var(--th) * 2); overflow: hidden; margin: 0 0 0 var(--j); position: relative; }
.werk-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 55%; }
.werk-list { grid-column: 1 / -1; padding: calc(var(--th) * .3) var(--pad) 0; }
.werk-cap { margin: 0 0 10px; }
.places { columns: 2; column-gap: 24px; margin: 0 0 14px; counter-reset: p; }
.places li { display: flex; align-items: center; gap: 10px; padding: 5px 0; border-bottom: 1px solid var(--zand-500); font: 500 15px/1.3 var(--f-head); break-inside: avoid; }
.places li::before { content: ""; width: 7px; height: 7px; background: var(--voeg); flex: none; }
.places li:first-child::before { background: var(--klei); width: 9px; height: 9px; }
.werk-more { font-size: 15px; color: var(--voeg-500); margin-bottom: 18px; }
.werk-list .actions { margin-left: calc(var(--pad) * -1); }
@media (min-width: 640px) {
  .map-wrap { grid-column: 1 / -1; min-height: calc(var(--th) * 4); }
  .werk-photo { grid-column: 1 / span 2; }
  .werk-list { grid-column: 3 / span 2; }
}
@media (min-width: 1024px) {
  .map-wrap { grid-column: 1 / span 3; grid-row: 2 / span 2; min-height: calc(var(--th) * 5); }
  .werk-photo { grid-column: 4 / span 2; grid-row: 2; }
  .werk-list { grid-column: 4 / span 2; grid-row: 3; padding-top: calc(var(--th) * .25); }
}

/* leaflet, dressed in the palette */
.leaflet-container { font: 500 12px/1.2 var(--f-head); background: var(--zand); }
.leaflet-tile-pane { filter: grayscale(1) sepia(.22) contrast(.9) brightness(1.06); }
.leaflet-control-attribution { background: rgba(252, 251, 249, .85) !important; color: var(--voeg-500) !important; font-size: 10px; }
.leaflet-control-attribution a { color: var(--voeg-500) !important; }
.leaflet-bar a { color: var(--voeg) !important; background: var(--papier) !important; border-radius: 0 !important; }
.leaflet-bar { border-radius: 0 !important; border: 1px solid var(--voeg) !important; box-shadow: none !important; }
.pin { display: block; width: 11px; height: 11px; background: var(--voeg); border: 2px solid var(--papier); box-shadow: 0 0 0 1px var(--voeg); }
.pin-home { width: 16px; height: 16px; background: var(--klei); }
.leaflet-tooltip.place {
  background: var(--papier);
  color: var(--voeg);
  border: 0;
  border-radius: 0;
  box-shadow: 0 0 0 1px var(--zand-700);
  padding: 3px 6px;
  font: 600 11px/1.1 var(--f-head);
}
.leaflet-tooltip.place::before { display: none; }
.leaflet-tooltip.place-home { background: var(--voeg); color: var(--papier); box-shadow: none; }

/* ---- vragen ---- */
.faq-head { grid-column: 1 / -1; }
.faq-head > p { padding: 0 var(--pad); }
.faq-end { grid-column: 1 / -1; margin: calc(var(--th) / 2) 0 0; }
.faq { grid-column: 1 / -1; }
.faq details { border-top: 1px solid var(--voeg-licht); background: var(--kalk); }
.faq details:last-child { border-bottom: 1px solid var(--voeg-licht); }
.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: calc(var(--th) / 2);
  padding: 10px var(--pad);
  cursor: pointer;
  list-style: none;
  font: 500 16px/1.35 var(--f-head);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "";
  width: 22px; height: 22px; flex: none;
  background:
    linear-gradient(var(--voeg), var(--voeg)) center / 10px 1.5px no-repeat,
    linear-gradient(var(--voeg), var(--voeg)) center / 1.5px 10px no-repeat;
  box-shadow: inset 0 0 0 1px var(--zand-700);
  transition: transform .2s;
}
.faq details[open] summary::after { transform: rotate(45deg); background-color: var(--zand); }
.faq summary:hover { background: var(--papier); }
.faq details p { padding: 0 var(--pad) 16px; margin: 0; color: var(--voeg-500); max-width: 40em; }
@media (min-width: 640px) {
  .faq-head { grid-column: 1 / span 2; grid-row: 1; }
  .faq { grid-column: 3 / span 2; grid-row: 1 / span 2; }
  .faq-end { grid-column: 1 / span 2; grid-row: 2; align-self: start; margin: 0; }
  .sec-faq .grid { grid-template-rows: auto 1fr; }
  .faq summary { font-size: 17px; }
}
@media (min-width: 1024px) {
  .faq { grid-column: 3 / span 3; }
}

/* ---- reviews ---- */
.sec-rev h2 { color: var(--papier); }
.rev-head { grid-column: 1 / -1; }
.rev-cards { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr; order: 3; }
.rc {
  margin: var(--j) 0 0 var(--j);
  padding: calc(var(--th) * .3) var(--pad) calc(var(--th) * .25);
  background: var(--papier);
  color: var(--voeg);
  display: flex;
  flex-direction: column;
}
.rc-top { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 4px 12px; margin-bottom: 14px; }
.av {
  grid-row: span 2;
  display: grid; place-items: center;
  width: 42px; height: 42px;
  border-radius: 50%;
  background: var(--zand);
  color: var(--voeg);
  font: 600 17px/1 var(--f-head);
}
.rc-who { display: flex; flex-direction: column; gap: 2px; }
.rc-who b { font: 600 15.5px/1.2 var(--f-head); }
.rc-who time { font-size: 13px; color: var(--voeg-500); }
.rc-top .stars { grid-column: 2; }
.rc-top .stars svg { width: 17px; height: 17px; }
.rc h3 { font: 600 17px/1.3 var(--f-head); margin: 0 0 10px; letter-spacing: -0.005em; }
.rc p { font-size: 15.5px; line-height: 1.55; margin-bottom: .7em; }
.rc .rc-src {
  margin: auto 0 0;
  padding-top: 12px;
  display: flex; align-items: center; gap: 8px;
  font: 600 10px/1.2 var(--f-head);
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--klei-700);
}
.rc .rc-src::before { content: ""; width: 14px; height: 1.5px; background: var(--klei); }
.rev-side { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; order: 2; margin-bottom: calc(var(--th) / 2); }
.score {
  margin: var(--j) 0 0 var(--j);
  min-height: calc(var(--th) - var(--j));
  display: grid;
  grid-template-columns: auto 1fr;
  align-content: center;
  gap: 4px 10px;
  padding: 10px var(--pad);
  box-shadow: inset 0 0 0 1px var(--voeg-700);
  color: var(--papier);
}
.score-name { grid-column: 1 / -1; display: flex; align-items: center; gap: 7px; font: 600 13px/1.2 var(--f-head); }
.score-g .score-name { font-size: 15px; }
.score-num { font: 600 22px/1 var(--f-head); }
.score .stars { color: var(--klei-300); align-self: center; }
.score .stars svg { width: 13px; height: 13px; }
.score-cnt { grid-column: 1 / -1; font-size: 12.5px; color: var(--klei-100); }
.rev-end { grid-column: 1 / -1; order: 4; display: grid; grid-template-columns: repeat(var(--cols), var(--tw)); margin-top: calc(var(--th) / 2); }
.rev-end .btn-tile { grid-column: 1 / -1; min-height: calc(var(--th) - var(--j)); margin: var(--j) 0 0 var(--j); }
@media (min-width: 640px) {
  .rev-cards { grid-template-columns: repeat(2, 1fr); }
  .rev-side { grid-template-columns: repeat(2, var(--tw)); }
  .rev-end .btn-tile { grid-column: 3 / span 2; }
}
/* Sem, 2026-10-28: the two ratings up beside the heading, side by side at its top, so the reviews get the full width;
   the offerte tile under them at the right, as on a tablet (before: style.before-reviewsboven.css) */
@media (min-width: 1024px) {
  .rev-head { grid-column: 1 / span 3; grid-row: 1; }
  .rev-side { grid-column: 4 / span 2; grid-row: 1; order: 0; grid-template-columns: 1fr 1fr; align-self: start; margin: 0; }
  .rev-cards { grid-column: 1 / -1; grid-row: 2; order: 0; }
  .rev-end { grid-row: 3; order: 0; }
  .rev-end .btn-tile { grid-column: -2 / -1; }
}

/* ---- contact ---- */
.contact-info { grid-column: 1 / -1; }
.contact-info > p { padding: 0 var(--pad); max-width: 30em; }
.contact-pair {
  display: grid;
  grid-template-columns: repeat(2, var(--tw));
  grid-template-rows: var(--th);
  margin: 0;
}
.contact-pair .half { margin: var(--j) 0 0 var(--j); padding: calc(var(--th) * .16) var(--pad); }
.contact-pair .half-l { font-size: 16px; }
.contact-pair .half-num { font-size: 14px; }
.nap { margin: calc(var(--th) * .35) 0 var(--th); }
.nap div { padding: 9px var(--pad); border-top: 1px solid var(--zand-500); }
.nap div:last-child { border-bottom: 1px solid var(--zand-500); }
.nap dt { font: 600 10.5px/1.3 var(--f-head); letter-spacing: .32em; text-transform: uppercase; color: var(--klei-700); margin-bottom: 3px; }
.nap dd { margin: 0; font: 500 15.5px/1.35 var(--f-head); }
.nap a { text-decoration-color: var(--zand-700); text-underline-offset: .2em; }
.form {
  grid-column: 1 / -1;
  margin: var(--j) 0 0 var(--j);
  padding: calc(var(--th) * .3) var(--pad) calc(var(--th) * .3);
  background: var(--papier);
  position: relative;
}
.form::after { content: ""; position: absolute; inset: 0; border: 1px solid var(--voeg); pointer-events: none; }
.form-cap { margin: 0 0 16px; }
.f-row { display: grid; grid-template-columns: 1fr; gap: 0 18px; }
.f { display: block; margin-bottom: 16px; }
.f > span { display: block; font: 600 13.5px/1.3 var(--f-head); margin-bottom: 6px; }
.f em { font-style: normal; font-weight: 400; color: var(--voeg-500); }
.f input, .f textarea {
  width: 100%;
  padding: 12px 14px;
  font: 400 16px/1.4 var(--f-body);
  color: var(--voeg);
  background: var(--kalk);
  border: 1px solid var(--zand-700);
  border-radius: 0;
  appearance: none;
}
.f textarea { resize: vertical; min-height: 140px; }
.f input:focus, .f textarea:focus { outline: 2px solid var(--klei); outline-offset: 0; border-color: var(--klei); background: var(--papier); }
.hp { display: none; }
.form-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin-top: 6px; }
.form-foot .btn-tile { margin: 0; }
.form-note { margin: 0; font-size: 13.5px; color: var(--voeg-500); }
@media (min-width: 640px) {
  .contact-info { grid-column: 1 / span 2; }
  .form { grid-column: 3 / span 2; }
}
@media (min-width: 1024px) {
  .form { grid-column: 3 / span 3; padding: calc(var(--th) * .3) calc(var(--tw) * .12); }
  .f-row { grid-template-columns: 1fr 1fr; }
}

/* ---- footer ---- */
.foot { --jc: var(--voeg-800); padding: var(--th) 0 0; }
.foot-lock { grid-column: 1 / -1; display: flex; flex-direction: column; align-items: flex-start; padding: calc(var(--th) * .25) var(--pad) calc(var(--th) * .4); }
.merk-foot { width: min(240px, calc(var(--tw) * 1.5)); color: var(--papier); }
.foot-name { width: max-content; margin-top: 12px; font: 500 18px/1.1 var(--f-body); color: var(--papier); white-space: nowrap; }
.foot-slogan { width: max-content; margin-top: 7px; font: 600 14px/1.2 var(--f-head); color: var(--klei-300); white-space: nowrap; }
.foot-col { padding: calc(var(--th) * .25) var(--pad) calc(var(--th) * .3); font-size: 14.5px; color: var(--klei-100); }
.foot-cap { color: var(--klei-300); margin: 0 0 12px; }
.foot-col li { margin-bottom: 6px; }
.foot-col a { color: var(--papier); text-decoration-color: var(--voeg-700); text-underline-offset: .2em; }
.foot-col a:hover { text-decoration-color: var(--klei-300); }
.foot-pair { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: calc(var(--th) - var(--j)); gap: var(--j); margin: var(--j) 0 0 var(--j); }
.foot-base { grid-column: 1 / -1; margin: calc(var(--th) / 2) 0 0; padding: 14px var(--pad) 0; font-size: 12.5px; color: var(--klei-300); box-shadow: inset 0 1px 0 var(--voeg-700); }
@media (max-width: 639px) {
  .foot-col { grid-column: span 1; }
}
@media (min-width: 640px) {
  .foot-lock { grid-column: 1 / span 2; }
  .foot-pair { grid-column: 3 / span 2; grid-row: 1; align-self: start; }
  .foot-col { grid-row: 2; grid-column: span 2; }
}
@media (min-width: 1024px) {
  .foot-lock { grid-column: 1 / span 2; grid-row: 1; }
  .foot-col { grid-row: 1; grid-column: 3; }
  .foot-col + .foot-col { grid-column: 4; }
  .foot-pair { grid-column: 5; grid-row: 1; grid-template-columns: 1fr 1fr; }
}

/* ---- phones: a service reads text, proof, scope, actions ---- */
@media (max-width: 639px) {
  .tegel-text, .stuc-text { display: contents; }
  .tegel-text > .tx, .stuc-text > .tx { grid-column: 1 / -1; order: 1; }
  .tegel-ba, .stuc-ba { order: 2; margin-top: 0; }
  .scope-tiles { grid-column: 1 / -1; order: 3; margin: var(--th) 0 calc(var(--th) / 2); }
  .scope-rows { grid-column: 1 / -1; order: 3; margin: calc(var(--th) / 2) 0; }
  .tegel-text > .actions, .stuc-text > .actions { grid-column: 1 / -1; order: 4; }
  .actions .btn-tile.btn-sm:only-child { width: calc(var(--tw) * 2 - var(--j)); }
}

/* ---- the sticky pair, phones only ---- */
.sticky { display: none; }
@media (max-width: 639px) {
  body { padding-bottom: calc(58px + env(safe-area-inset-bottom)); }
  .sticky {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 60;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1px;
    padding-bottom: env(safe-area-inset-bottom);
    background: var(--voeg);
  }
  .sticky a {
    display: flex; align-items: center; justify-content: center; gap: 9px;
    min-height: 58px;
    font: 600 15px/1 var(--f-head);
    text-decoration: none;
  }
  .sticky svg { width: 20px; height: 20px; fill: currentColor; }
  .st-call { background: var(--voeg); color: var(--papier); }
  .st-wa { background: var(--wa); color: var(--wit); }
}

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


/* ============ KNOPPEN — picked 1 of ronde/knoppen.py (each its own tile: WhatsApp beside Offerte, Bellen under it, the two ratings side by side across two tiles). Written in by ronde-varianten.py --vast; %V% -> :root:root. ============ */
:root:root .fact-jaar { display: none; }
:root:root .strip { grid-template-columns: 1fr; }

@media (min-width: 1024px) {
  :root:root .strip { grid-area: hand; }
  :root:root .hero-pair { display: contents; }
  :root:root .hero-pair .half {
    margin: var(--j) 0 0 var(--j);
    justify-content: flex-start;
    padding: calc(var(--th) * .2) calc(var(--tw) * .09);
  }
  :root:root .hero-pair .half-l { margin-top: auto; font-size: max(15px, calc(var(--tw) * .07)); }
  :root:root .hero-pair .half-num { display: block; margin-top: 5px; font-size: 13px; }
  :root:root .hero-pair .half-wa .half-num { display: none; }
  /* Sem, 2026-10-28: only the fold's pair — unscoped, these two took the klus, contact and footer pairs off their grids
     from 1024 px, the call tile over the WhatsApp tile */
  :root:root .hero-pair .half-call { grid-area: call; }
  :root:root .hero-pair .half-wa { grid-area: wa; }
}

@media (min-width: 1024px) {
  :root:root .rate { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr; }
  :root:root .rate-row { row-gap: 6px; column-gap: 10px; padding: 0 calc(var(--tw) * .09); }
  :root:root .rate-score { font-size: 22px; gap: 8px; }
  :root:root .rate-score .g { width: 18px; height: 18px; }
  :root:root .rate .stars svg { width: 14px; height: 14px; }
  :root:root .rate-src { font-size: 12.5px; }
}

@media (min-width: 1024px) {
  :root:root .hero {
    grid-template-areas:
      "lock lock main main nis"
      "lock lock main main nis"
      "head head main main gang"
      "head head main main gang"
      "cta  wa   main main gang"
      "call rate rate hand hand";
  }
}


/* ============ FOTORANDEN — picked 1 of ronde/fotorand.py (thin white, clean photos: a white joint of 4 px between the photos, the faint lines over them gone). Written in by ronde-varianten.py --vast; %V% -> :root:root. ============ */
:root:root .hero { --fw: 3px; }
:root:root .hero::before, :root:root .hero::after {
  content: "";
  position: relative;
  z-index: 1;
  pointer-events: none;
  background: var(--papier);
}
:root:root .hero::before {
  grid-column: 2; grid-row: 6 / 8;
  justify-self: start; width: var(--fw);
  margin: var(--j) 0 0 calc((var(--j) - var(--fw)) / 2);
}
:root:root .hero::after {
  grid-column: 2; grid-row: 7;
  align-self: start; height: var(--fw);
  margin-top: calc((var(--j) - var(--fw)) / 2);
}
@media (min-width: 640px) {
  :root:root .hero { --fw: 4px; }
  :root:root .hero::before { grid-column: 4; grid-row: 5 / 7; margin-top: 0; }
  :root:root .hero::after { grid-column: 3 / 5; grid-row: 5; margin-left: var(--j); }
}
@media (min-width: 1024px) {
  :root:root .hero { --fw: 4px; }
  :root:root .hero::before { grid-column: 5; grid-row: 1 / 6; margin-top: var(--j); }
  :root:root .hero::after { grid-column: 5; grid-row: 3; margin-left: 0; }
}

:root:root .ph::after { content: none; }


/* ============ SLOOPWERK — picked 1 of ronde/sloop.py (quieter than the tagline: one sentence in the tagline's brown, at the size the words have now). Written in by ronde-varianten.py --vast; %V% -> :root:root. ============ */
:root:root .fact-hand {
  display: flex;
  flex-wrap: wrap;
  align-content: center;
  column-gap: .27em;
  padding: calc(var(--th) * .2) var(--pad) 0;
  font: 600 max(15px, calc(var(--tw) * .085))/1.15 var(--f-head);
  color: var(--klei);
}
:root:root .fact-hand .fa, :root:root .fact-hand .fb { display: block; padding: 0; white-space: nowrap; }
:root:root .fact-hand .w { font: inherit; letter-spacing: normal; }
:root:root .fact-hand .fa::after, :root:root .fact-hand .fb::before { content: none; }
@media (min-width: 640px) {
  :root:root .fact-hand { align-content: flex-end; padding: 0 var(--pad) calc(var(--th) * .2); }
}


/* ============ TEGELS IN — picked 3 of ronde/tegels.py (to the joint: the picture fills the tile's left part from joint to joint, the word beside it). Written in by ronde-varianten.py --vast; %V% -> :root:root. ============ */
:root:root .mat li:not(.mat-cap)::before { content: none; }
:root:root .mat-pic { display: block; flex: none; background: var(--pic) center / cover no-repeat; }

:root:root .mat li:not(.mat-cap) { justify-content: flex-start; }
:root:root .mat-pic { align-self: stretch; width: min(calc(var(--th) / 2 - 1px), calc(var(--tw) - 1px - var(--pad) - 6.6em)); margin-right: var(--pad); }
@media (min-width: 640px) {
  :root:root .mat-pic { width: min(calc(var(--tw) * .35), calc(var(--tw) - 1px - var(--pad) - 6.6em)); }
}
@media (min-width: 1024px) {
  :root:root .mat-pic { width: min(calc(var(--tw) * .36), calc(var(--tw) - 1px - var(--pad) - 6.6em)); }
}
/* Sem, 2026-10-28: the pictures smaller, about 3/5 of the band's height, in its middle; the left edge stays on the joint.
   Below 640 px the row is half a course and the picture already a small square, so it stays */
@media (min-width: 640px) {
  :root:root .mat-pic { align-self: center; height: calc(var(--th) * .6); }
}


/* ================================================================
   Taken from the basis2 agent's page (bak1-l304-c-basis2-agent/, basis2-oogst.py), 2026-10-28:
   Even voorstellen, the Badkamers card, the projects and the viewer, as Sem picked them.
   ================================================================ */

/* ================================================================
   BASIS2 — the rest of the page, laid on the same wall (2026-10-28).
   Every section starts and ends on a joint (data-snap rounds it to whole courses).
   A tile is tw × th, a half tile th × th; photos, buttons, labels and the services
   card are laid as tiles, quieter than in the fold. Colours: palette.json only.
   ================================================================ */

.hand { font-family: "Caveat", "Segoe Script", "Bradley Hand", cursive; font-weight: 700; letter-spacing: 0; }

/* on a phone a section that tells keeps its heading, subheading, first sentence, photo and buttons;
   the rest of its text is hidden here, never deleted */
@media (max-width: 639px) { .more, .more-tabel { display: none !important; } }
.more > p:last-child { margin-bottom: 0; }

.sv-sub {
  margin: -6px 0 16px;
  max-width: 30em;
  font: 500 clamp(17px, calc(var(--tw) * .085), 20px)/1.35 var(--f-head);
  color: var(--voeg-700);
  text-wrap: pretty;
}
.prijs { display: flex; align-items: baseline; gap: 12px; margin: 6px 0 0; font: 500 15px/1.3 var(--f-head); }
.prijs span { font: 600 10.5px/1 var(--f-head); letter-spacing: .32em; text-transform: uppercase; color: var(--klei-700); }

/* ---- buttons below the cut: whole tiles, as the fold's Offerte tile ---- */
.knoppen { display: flex; flex-wrap: wrap; }
.knoppen .btn-tile, .knop-meer {
  width: calc(var(--tw) - var(--j));
  min-height: calc(var(--th) - var(--j));
  margin: var(--j) 0 0 var(--j);
}
.knoppen .btn-tile span, .pj-eind .btn-tile span { font-size: max(15px, calc(var(--tw) * .07)); }
.knop-meer {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: calc(var(--th) * .2) calc(var(--tw) * .09);
  font: 500 max(15px, calc(var(--tw) * .066))/1.2 var(--f-head);
  color: var(--voeg);
  text-decoration: none;
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--zand-700);
  transition: background .15s;
}
.knop-meer .arr { width: 20px; height: 20px; align-self: flex-end; color: var(--voeg-500); transition: transform .2s; }
.knop-meer > span { text-decoration: underline; text-decoration-thickness: 1px; text-decoration-color: var(--zand-700); text-underline-offset: .22em; }
.knop-meer:hover { background: var(--papier); }
.knop-meer:hover .arr { transform: translateX(4px); }
.knop-meer:hover > span { text-decoration-color: var(--voeg); }

/* ---- photos: laid in as tiles; a stretched button opens the viewer ---- */
.foto { position: relative; overflow: hidden; margin: 0; background: var(--zand); }
.foto > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.2, .7, .2, 1); }
.foto .tag { pointer-events: none; }
.open {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: zoom-in;
}
.open:focus-visible { outline: 3px solid var(--klei); outline-offset: -3px; }

/* the label on a principal photo and a project card: one tile laid into the photo's corner */
.plek {
  position: absolute;
  z-index: 2;
  left: 0;
  bottom: 0;
  width: calc(var(--tw) - var(--j));
  min-height: calc(var(--th) - var(--j));
  display: grid;
  grid-template-columns: auto 1fr;
  align-content: center;
  column-gap: 7px;
  row-gap: 1px;
  padding: 8px var(--pad);
  background: var(--papier);
  color: var(--voeg);
  pointer-events: none;
}
.plek-pin { grid-row: 1; width: clamp(13px, calc(var(--tw) * .07), 17px); height: clamp(13px, calc(var(--tw) * .07), 17px); fill: var(--klei); align-self: center; }
.plek-waar { grid-row: 1; font: 600 clamp(15px, calc(var(--tw) * .094), 23px)/1.1 var(--f-head); letter-spacing: -.015em; }
.plek-wanneer { grid-column: 2; font: 500 clamp(12.5px, calc(var(--tw) * .062), 15px)/1.25 var(--f-head); color: var(--voeg-500); }
.plek-link {
  grid-column: 1 / -1;
  justify-self: start;
  margin-top: 7px;
  font: 600 12.5px/1.2 var(--f-head);
  color: var(--voeg);
  text-decoration: underline;
  text-decoration-color: var(--zand-700);
  text-underline-offset: .2em;
  pointer-events: auto;
}
.plek-link::after { content: " →"; }
.plek-link:hover { color: var(--klei-700); text-decoration-color: var(--klei); }
@media (max-width: 380px) { .plek-link { font-size: 11.5px; } .plek { padding-block: 6px; } }

/* his stamp: the mark (merk.svg, as the lockup places it) with the name under it, as a watermark */
.foto-stempel::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 70%;
  height: 60%;
  z-index: 1;
  pointer-events: none;
  background: radial-gradient(ellipse at 100% 0, rgba(31, 27, 24, .44), rgba(31, 27, 24, .14) 45%, transparent 70%);
}
.stempel {
  --sw: clamp(78px, calc(var(--tw) * .5), 118px);
  position: absolute;
  z-index: 2;
  top: calc(var(--th) * .2);
  right: var(--pad);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: calc(var(--sw) * .06);
  color: var(--papier);
  opacity: .93;
  pointer-events: none;
  filter: drop-shadow(0 1px 1.5px rgba(31, 27, 24, .5));
}
.stempel .merk { width: var(--sw); }
.stempel-naam { font: 500 calc(var(--sw) / 11.75)/1 var(--f-body); white-space: nowrap; letter-spacing: .005em; }

/* ---- the row of thumbnails under a principal photo: half tiles ---- */
.reeks { display: flex; align-items: stretch; min-height: var(--th); }
.reeks-t {
  position: relative;
  flex: none;
  width: calc(var(--th) - var(--j));
  height: calc(var(--th) - var(--j));
  margin: var(--j) 0 0 var(--j);
  padding: 0;
  border: 0;
  overflow: hidden;
  background: var(--zand);
  cursor: zoom-in;
}
.reeks-t img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.reeks-t.is-paar img { width: 50%; }
.reeks-t.is-paar img + img { left: 50%; }
.reeks-t.is-paar::after { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; margin-left: -1px; background: var(--papier); }
.reeks-t:hover img { transform: scale(1.06); }
.reeks-t:focus-visible { outline: 2px solid var(--klei); outline-offset: -2px; }
.reeks-plus img { opacity: .3; }
.reeks-plus { background: var(--voeg); }
.reeks-plus b {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font: 600 clamp(17px, calc(var(--th) * .25), 26px)/1 var(--f-head);
  color: var(--papier);
  letter-spacing: -.01em;
}
.reeks-tel {
  flex: 1;
  min-width: 0;
  margin: var(--j) 0 0 var(--j);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 3px;
  padding: 0 var(--pad);
  border: 0;
  background: transparent;
  font: 500 13.5px/1.35 var(--f-head);
  color: var(--voeg-500);
  text-align: left;
  cursor: zoom-in;
}
.reeks-tel b { font-size: clamp(14px, calc(var(--th) * .14), 16px); font-weight: 600; color: var(--voeg); white-space: nowrap; }
@media (max-width: 1023px) { .reeks-tel { padding: 0 10px; font-size: 12.5px; } }
.reeks-tel span { text-decoration: underline; text-decoration-color: var(--zand-700); text-underline-offset: .2em; }
.reeks-tel:hover span { color: var(--voeg); text-decoration-color: var(--voeg); }
@media (max-width: 639px) { .reeks-tel { display: none; } }

/* ============ EVEN VOORSTELLEN ============ */
.intro { padding-bottom: 0; isolation: isolate; }
/* the seam: the intro's ground stops halfway through the services card, as the fold's stops in the strip */
.intro::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: var(--seam);
  z-index: -1;
  background-color: var(--kalk);
  background-image: linear-gradient(90deg, var(--voeg-licht) 1px, transparent 1px);
  background-size: var(--tw) 100%;
  background-position: var(--cut) 0;
}
.intro-grid {
  grid-template-areas: "kop kop" "por por" "f1 f1" "f2 f2" "f3 f3" "dk dk";
  grid-template-rows: var(--th) calc(var(--th) * 5) var(--th) var(--th) var(--th) auto;
}
.intro-kop { grid-area: kop; display: flex; align-items: center; padding: 0 var(--pad); }
.intro-kop h2 { margin: 0; }
.intro-portret { grid-area: por; margin: var(--j) 0 0 var(--j); }
.intro-portret > img { object-position: 50% 30%; }
.intro-portret::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 62%;
  pointer-events: none;
  background: linear-gradient(to top, rgba(31, 27, 24, .82), rgba(31, 27, 24, .5) 42%, rgba(31, 27, 24, 0));
}
.ik {
  position: absolute;
  z-index: 2;
  left: 0; right: 0; bottom: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 0 calc(var(--tw) * .1) calc(var(--th) * .32);
  color: var(--papier);
}
.ik-1 { font: 500 clamp(16px, calc(var(--tw) * .082), 21px)/1.2 var(--f-head); letter-spacing: -.005em; }
.ik-2 { margin: 0 0 4px -3px; font-size: clamp(70px, calc(var(--tw) * .44), 112px); line-height: .9; }
.ik-3 { font: 500 clamp(12.5px, calc(var(--tw) * .058), 14.5px)/1.3 var(--f-body); color: var(--zand); }

.feiten { display: contents; }
.feit { display: flex; min-width: 0; margin: var(--j) 0 0 var(--j); }
.feit-1 { grid-area: f1; }
.feit-2 { grid-area: f2; }
.feit-3 { grid-area: f3; }
.feit-pic { position: relative; flex: none; width: calc(var(--th) - var(--j)); overflow: hidden; background: var(--zand); }
.feit-pic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.feit-tx {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  margin-left: var(--j);
  padding: 8px var(--pad);
  background: var(--papier);
}
.feit-tx b { font: 600 clamp(15.5px, calc(var(--tw) * .086), 19px)/1.2 var(--f-head); letter-spacing: -.005em; }
.feit-regel { font: 400 13.5px/1.4 var(--f-body); color: var(--voeg-500); text-wrap: pretty; }
@media (max-width: 639px) { .feit-regel { display: none; } }

/* the services card, on the intro's lower edge */
.dienstkaart {
  grid-area: dk;
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr;
  grid-auto-rows: max(44px, calc(var(--th) / 2));
}
.dk-cap {
  margin: var(--j) 0 0 var(--j);
  display: flex;
  align-items: center;
  padding: 0 var(--pad);
  background: var(--zand);
  font: 600 10.5px/1.2 var(--f-head);
  letter-spacing: .34em;
  text-transform: uppercase;
  color: var(--klei-700);
}
.dk {
  margin: var(--j) 0 0 var(--j);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 0 var(--pad);
  background: var(--voeg);
  color: var(--papier);
  text-decoration: none;
  font: 600 16px/1.1 var(--f-head);
  transition: background .15s;
}
.dk svg { width: 18px; height: 18px; flex: none; transition: transform .2s; }
.dk:hover { background: var(--voeg-700); }
.dk:hover svg { transform: translateY(3px); }
@media (max-width: 383px) {
  .dienstkaart { grid-template-rows: var(--th) repeat(3, calc(var(--th) * 2 / 3)); }
}
@media (min-width: 640px) {
  .intro-grid {
    grid-template-areas:
      "por por kop kop"
      "por por f1  f1"
      "por por f2  f2"
      "por por f3  f3"
      "por por .   ."
      "dk  dk  dk  dk";
    grid-template-rows: repeat(5, minmax(var(--th), auto)) var(--th);
  }
  .intro-kop { align-items: center; }
  .feit-regel { font-size: 13px; line-height: 1.35; }
  .dienstkaart { grid-template-columns: repeat(4, 1fr); grid-auto-rows: var(--th); }
  .dk-cap { align-items: flex-start; padding-top: calc(var(--th) * .2); }
  .dk {
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
    padding: calc(var(--th) * .2) calc(var(--tw) * .09);
    font-size: max(16px, calc(var(--tw) * .085));
  }
  .dk svg { order: -1; align-self: flex-end; width: 22px; height: 22px; }
}
@media (min-width: 1024px) {
  .intro-grid {
    grid-template-areas:
      "por por kop kop kop"
      "por por f1  f1  f1"
      "por por f2  f2  f2"
      "por por f3  f3  f3"
      "por por .   .   ."
      ".   dk  dk  dk  dk";
  }
  .feit-pic { width: calc(var(--tw) - var(--j)); }
  .feit-tx { padding-inline: calc(var(--tw) * .1); }
  .feit-regel { font-size: 14.5px; line-height: 1.4; }
}

/* ============ BADKAMERS: one framed card ============ */
.bk {
  grid-column: 1 / -1;
  position: relative;
  display: grid;
  grid-template-columns: repeat(var(--cols), var(--tw));
  background: var(--papier);
}
.bk::after { content: ""; position: absolute; inset: 0; z-index: 4; border: 1px solid var(--voeg); pointer-events: none; }
.bk-foto { grid-column: 1 / -1; height: calc(var(--th) * 3); }
.bk-foto > img { object-position: 50% 62%; }
.bk-a, .bk-b { grid-column: 1 / -1; display: flex; flex-direction: column; min-width: 0; }
.bk-copy { padding: calc(var(--th) * .3) var(--pad) calc(var(--th) * .25); }
.bk-copy h2 { font-size: clamp(28px, calc(var(--tw) * .17), 42px); }
.bk-copy .more p { max-width: 34em; }
.bk .knoppen { margin-top: auto; }
.bk .knoppen .btn-tile, .bk .knop-meer { margin: 0; width: var(--tw); min-height: var(--th); }
.bk .knop-meer { box-shadow: inset 0 1px 0 var(--voeg-licht), inset -1px 0 0 var(--voeg-licht); }
.bewijs {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: var(--th);
  padding: 10px var(--pad);
  color: var(--voeg);
  text-decoration: none;
  border-top: 1px solid var(--voeg-licht);
}
.bewijs .avatars i { margin-left: -10px; }
.bewijs .avatars i:first-child { margin-left: 0; }
.bewijs-tx { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.bewijs-cap { font: 600 15.5px/1.2 var(--f-head); }
.bewijs-regel { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: 13.5px; color: var(--voeg-500); }
.bewijs-regel b { font-weight: 600; color: var(--voeg); }
.bewijs-ko { text-decoration: underline; text-decoration-color: var(--zand-700); text-underline-offset: .2em; }
.bewijs:hover .bewijs-ko { text-decoration-color: var(--voeg); }
.bewijs .num { font-family: var(--f-head); }
.bewijs .stars svg { width: 13px; height: 13px; }
.bk-lijst { padding: calc(var(--th) * .3) 0 calc(var(--th) * .3); }
.bk-lijst .kicker { padding-left: var(--pad); }
@media (max-width: 639px) {
  .bk-a, .bk-b { display: contents; }
  .bk > *, .bk-a > *, .bk-b > * { grid-column: 1 / -1; }
  .bk-foto { order: 0; }
  .bk-a > .reeks { order: 1; }
  .bk-copy { order: 2; padding-bottom: 0; }
  .bk-lijst { order: 3; padding-top: calc(var(--th) * .15); }
  .bewijs { order: 4; }
  .bk .knoppen { order: 5; }
  .bk-copy .sv-sub { margin-bottom: 8px; }
}
@media (min-width: 640px) {
  .bk-a { grid-column: 1 / span 2; }
  .bk-b { grid-column: 3 / -1; box-shadow: inset 1px 0 0 var(--voeg-licht); }
  .bewijs { border-top: 0; border-bottom: 1px solid var(--voeg-licht); }
}
@media (min-width: 1024px) {
  .bk-foto { height: calc(var(--th) * 4); }
  .bewijs { gap: 18px; padding-inline: calc(var(--tw) * .1); }
  .bewijs-cap { font-size: 17px; }
  .bk-copy { padding-inline: calc(var(--tw) * .1); }
}

/* ============ PROJECTEN: the cards run round, edge to edge ============ */
.pj { padding-bottom: 0; }
.pj-kop { align-items: end; }
.pj-tx { grid-column: 1 / -1; padding: calc(var(--th) * .25) var(--pad) calc(var(--th) * .2); }
.pj-intro { margin: 0; max-width: 34em; color: var(--klei-100); }
.pj-pijlen { grid-column: 1 / -1; justify-self: end; display: flex; }
.pj-pijl {
  width: calc(var(--th) - var(--j));
  height: calc(var(--th) - var(--j));
  margin: var(--j) 0 0 var(--j);
  display: grid;
  place-items: center;
  border: 0;
  background: var(--voeg-800);
  color: var(--papier);
  cursor: pointer;
  transition: background .15s;
}
.pj-pijl svg { width: 22px; height: 22px; }
.pj-pijl:hover { background: var(--voeg-700); }
.baan { position: relative; overflow: hidden; }
.baan-rij { display: flex; margin: 0; padding: 0; list-style: none; }
html:not(.js) .baan-rij { overflow-x: auto; padding-left: var(--cut); }
.js .baan-rij { will-change: transform; }
.baan-rij.gaat { transition: transform .9s cubic-bezier(.6, 0, .2, 1); }
.pk {
  position: relative;
  flex: none;
  width: calc(var(--tw) * 2 - var(--j));
  margin: var(--j) 0 0 var(--j);
  background: var(--papier);
  color: var(--voeg);
}
.pk-foto { height: calc(var(--th) * 3 - var(--j)); }
.pk:hover .pk-foto > img { transform: scale(1.03); }
.pk-paar > img { width: 50%; }
.pk-paar > img + img { left: 50%; }
.pk-paar::before { content: ""; position: absolute; z-index: 1; top: 0; bottom: 0; left: 50%; width: 2px; margin-left: -1px; background: var(--papier); }
.pk-vn {
  position: absolute;
  z-index: 2;
  top: 10px;
  padding: 5px 9px;
  font: 600 10px/1 var(--f-head);
  letter-spacing: .3em;
  text-transform: uppercase;
  background: var(--voeg);
  color: var(--papier);
  pointer-events: none;
}
.pk-vn-voor { left: 10px; }
.pk-vn-na { left: calc(50% + 10px); background: var(--papier); color: var(--voeg); }
.pk-paar .stempel { --sw: clamp(64px, calc(var(--tw) * .36), 92px); }
.pk-wat {
  min-height: var(--th);
  margin: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  padding: 10px var(--pad);
  font: 500 clamp(14.5px, calc(var(--tw) * .068), 16px)/1.35 var(--f-head);
}
.pk-dienst { font: 600 10px/1.2 var(--f-head); letter-spacing: .32em; text-transform: uppercase; color: var(--klei-700); }
.pk .open { z-index: 1; }
.pk .open:focus-visible { outline-offset: -4px; }
.pj-eind { margin-top: var(--th); grid-template-rows: var(--th); }
.pj-vraag {
  grid-column: 1;
  align-self: center;
  margin: 0;
  padding: 0 var(--pad);
  font: 500 clamp(18px, calc(var(--tw) * .1), 26px)/1.2 var(--f-head);
  letter-spacing: -.01em;
}
.pj-eind .btn-tile { grid-column: -2 / -1; margin: var(--j) 0 0 var(--j); }
@media (min-width: 640px) {
  .pj-tx { grid-column: 1 / span 3; }
  .pj-pijlen { grid-column: -2 / -1; }
  .pj-vraag { grid-column: 1 / -2; justify-self: end; }
}

/* ============ THE VIEWER: one for the whole page ============ */
html.kj-open { overflow: hidden; }
.kijker {
  position: fixed;
  inset: 0;
  z-index: 200;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0 0 env(safe-area-inset-bottom);
  border: 0;
  overflow: hidden;
  color: var(--papier);
  background-color: var(--voeg);
  background-image:
    linear-gradient(90deg, var(--voeg-800) 1px, transparent 1px),
    linear-gradient(180deg, var(--voeg-800) 1px, transparent 1px);
  background-size: var(--tw) var(--th);
  background-position: var(--cut) 0;
}
.kijker:not([open]) { display: none; }
.kijker[open] { display: grid; grid-template-rows: auto minmax(0, 1fr) auto auto auto; }
.kijker::backdrop { background: rgba(31, 27, 24, .9); }
.kj-top { display: flex; align-items: stretch; justify-content: space-between; gap: 12px; min-height: 52px; }
.kj-pos { display: flex; align-items: center; gap: 14px; margin: 0; padding: 0 16px; min-width: 0; }
.kj-titel { font: 600 10.5px/1.2 var(--f-head); letter-spacing: .34em; text-transform: uppercase; color: var(--klei-300); white-space: nowrap; }
.kj-tel { font: 600 15px/1 var(--f-head); font-variant-numeric: tabular-nums; white-space: nowrap; }
.kj-sluit {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 18px;
  border: 0;
  background: var(--papier);
  color: var(--voeg);
  font: 600 14px/1 var(--f-head);
  cursor: pointer;
}
.kj-sluit svg { width: 18px; height: 18px; }
.kj-sluit:hover { background: var(--zand); }
.kj-stage { position: relative; min-height: 0; padding: 10px 64px; touch-action: pan-y; cursor: zoom-out; }
.kj-beeld { position: relative; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }
.kj-beeld img { display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; cursor: default; user-select: none; -webkit-user-drag: none; }
.kj-paar { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; width: 100%; height: 100%; }
.kj-paar.stapel { grid-template-columns: 1fr; grid-template-rows: 1fr 1fr; }
.kj-half { position: relative; display: flex; align-items: center; justify-content: center; min-width: 0; min-height: 0; }
.kj-half em {
  position: absolute;
  top: 8px;
  left: 8px;
  padding: 5px 9px;
  font: 600 10px/1 var(--f-head);
  font-style: normal;
  letter-spacing: .3em;
  text-transform: uppercase;
  background: var(--voeg);
  color: var(--papier);
  box-shadow: 0 0 0 1px var(--voeg-700);
}
.kj-half + .kj-half em { background: var(--papier); color: var(--voeg); }
.kj-nav {
  position: absolute;
  top: 50%;
  z-index: 2;
  width: 52px;
  height: 76px;
  margin-top: -38px;
  display: grid;
  place-items: center;
  border: 0;
  background: var(--voeg-800);
  color: var(--papier);
  cursor: pointer;
}
.kj-nav svg { width: 22px; height: 22px; }
.kj-nav:hover { background: var(--voeg-700); }
.kj-vorige { left: 6px; }
.kj-volgende { right: 6px; }
.kj-plek { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; padding: 10px 16px 8px; min-height: 52px; }
.kj-pin { width: 20px; height: 20px; fill: var(--klei-300); align-self: center; margin-right: -4px; }
.kj-waar { font: 600 clamp(21px, 3vw, 30px)/1.1 var(--f-head); letter-spacing: -.02em; }
.kj-wanneer { font: 500 clamp(15px, 2vw, 19px)/1.2 var(--f-head); color: var(--klei-100); }
.kj-wat { flex-basis: 100%; font-size: 14px; line-height: 1.35; color: var(--klei-100); padding-left: 24px; }
.kj-strip { display: flex; gap: 3px; overflow-x: auto; padding: 0 16px 10px; scrollbar-width: none; }
.kj-strip::-webkit-scrollbar { display: none; }
.kj-st {
  position: relative;
  flex: none;
  width: 58px;
  height: 58px;
  padding: 0;
  border: 0;
  overflow: hidden;
  background: var(--voeg-800);
  opacity: .5;
  cursor: pointer;
  transition: opacity .15s;
}
.kj-st img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.kj-st.is-paar img { width: 50%; }
.kj-st.is-paar img + img { left: 50%; }
.kj-st:hover { opacity: .85; }
.kj-st[aria-current="true"] { opacity: 1; box-shadow: inset 0 0 0 2px var(--klei-300); }
.kj-st[aria-current="true"] img { inset: 3px; width: calc(100% - 6px); height: calc(100% - 6px); }
.kj-st.is-paar[aria-current="true"] img { width: calc(50% - 3px); }
.kj-st.is-paar[aria-current="true"] img + img { left: 50%; }
.kj-klus {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: stretch;
  min-height: 56px;
  background: var(--voeg-800);
  border-top: 1px solid var(--voeg-700);
}
.kj-klus p { margin: 0; display: flex; align-items: center; padding: 0 16px; font: 600 clamp(15px, 2vw, 19px)/1.2 var(--f-head); }
.kj-klus a { display: flex; align-items: center; justify-content: center; gap: 9px; padding: 0 22px; font: 600 15px/1 var(--f-head); text-decoration: none; }
.kj-klus svg { width: 20px; height: 20px; fill: currentColor; }
.kj-bel { background: var(--zand); color: var(--voeg); }
.kj-bel:hover { background: var(--zand-500); }
.kj-wa { background: var(--wa); color: var(--wit); }
.kj-wa:hover { box-shadow: inset 0 0 0 3px var(--wit); }
@media (max-width: 639px) {
  .kj-stage { padding: 6px 0; }
  .kj-nav { width: 40px; height: 56px; margin-top: -28px; background: rgba(42, 37, 33, .78); }
  .kj-vorige { left: 0; }
  .kj-volgende { right: 0; }
  .kj-sluit span { display: none; }
  .kj-sluit { width: 52px; justify-content: center; padding: 0; }
  .kj-titel { letter-spacing: .26em; }
  .kj-wat { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
  .kj-st { width: 50px; height: 50px; }
  .kj-klus { grid-template-columns: auto 1fr 1fr; }
  .kj-klus p { padding: 0 12px; font-size: 14.5px; }
  .kj-klus a { padding: 0 10px; font-size: 14.5px; }
}
@media (max-height: 520px) {
  .kj-strip { display: none; }
  .kj-wat { display: none; }
}

/* the label's link stays on one line; on the narrowest phones it drops "onze" */
.plek-link { white-space: nowrap; }
@media (max-width: 359px), (min-width: 640px) and (max-width: 719px) { .plek-onze { display: none; } }


/* ================================================================
   Sem, 2026-10-29, phone only (below 640 px), straight into the page: "De fixed navbar en footer komen pas
   tevoorschijn wanneer de onderkant van de fold, in het midden van het scherm staat"; the menu "alle items onder
   elkaar, met meer verticale spacing"; the map's z-index; the excess wall between sections; three things that ran
   out of their tiles at 320 to 360 px (before: index/style.before-telefoon, script.before-telefoon.js)
   ================================================================ */

/* the map is a layer of its own: leaflet's panes (z-index 400 to 1000) stay under the fixed bars */
.map { z-index: 0; }

@media (max-width: 639px) {
  /* the nav and the call bar come in once the fold's foot is up to the middle of the screen (script.js sets
     html.na-vouw). The nav is never in the first screen (Sem, 2026-10-29: "ik wil de navbar initieel helemaal niet
     zien"): it stands fixed at the top as a lower course, out of sight until then, and the fold starts with the
     lockup (before: style.before-nav.css). Without script it stays in the fold as on the wider screens */
  :root { --bar: 0px; }
  body:has(> #webc-nav) { --bar: 30px; }   /* the dev domain's own bar, never on the real site */
  html.js .sticky { transform: translateY(100%); transition: transform .25s; }
  html.na-vouw .sticky { transform: none; }
  html.js .fold { z-index: 61; }
  html.js .nav {
    position: fixed;
    top: var(--bar); left: 0; right: 0;
    width: auto;
    padding-inline: var(--cut);
    grid-template-rows: calc(var(--th) * .7);
    background-color: var(--kalk);
    background-image: linear-gradient(90deg, var(--voeg-fold) 1px, transparent 1px);
    background-size: var(--tw) 100%;
    background-position: var(--cut) 0;
    box-shadow: 0 1px 0 var(--voeg-fold), 0 12px 24px -18px rgba(31, 27, 24, .5);
    transform: translateY(-100%);
    visibility: hidden;
    transition: transform .25s, visibility 0s .25s;
  }
  html.na-vouw .nav { transform: none; visibility: visible; transition: transform .25s; }
  html.js .menu-panel {
    position: fixed;
    top: calc(var(--bar) + var(--th) * .7);
    max-height: calc(100vh - var(--bar) - var(--th) * .7);
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  /* the menu: every item on a row of its own, three quarters of a course high; a quarter course of wall between
     the services, the page's own links and the call pair */
  .menu-panel { padding-bottom: calc(var(--th) / 2); }
  .menu-panel .grid { grid-auto-rows: calc(var(--th) / 4); }
  .menu-cap { grid-row: span 2; }
  .menu-t, .menu-t:nth-of-type(n+4) { grid-column: 1 / -1; grid-row: span 3; font-size: 16px; }
  .menu-t:nth-of-type(4), .menu-t.menu-call { grid-row: span 4; margin-top: calc(var(--th) / 4 + 1px); }

  /* half a course of wall above a section's first line, not a whole one; the wall moves up with it, so its joints
     still run along the tiles. script.js rounds the sections to half courses here */
  .sec:not(.sec-werk), .foot { padding-top: calc(var(--th) / 2); background-position: var(--cut) calc(var(--th) / 2); }
}
@media (max-width: 359px) {
  /* the narrowest phones: the line under the headline and the word WhatsApp stay inside their tiles (they ran 5 and
     9 px out at 320). Below 640 the footer's e-mail address may break after the @ (.mail-dom), so the page no longer
     moves sideways at 320 to 370 */
  .sub { margin-top: 6px; font-size: 13px; line-height: 1.4; }
  .hero-pair .half { padding: 8px 6px; }
  .hero-pair .half-l { font-size: 12px; }
}
@media (max-width: 639px) { .mail-dom { display: inline-block; } }
@media (prefers-reduced-motion: reduce) { html.js .nav { transition: none; } }


/* ============ EERSTE SCHERM — picked 1 of ronde-basis2/vouw.py (onder elkaar: drie knoppen als balken, de grote foto over de hele breedte, elk cijfer een eigen regel). Written in by ronde-basis2.py --vast; %V% -> :root:root. ============ */
@media (max-width: 639px) {
  :root:root .hero.hero {
    grid-template-rows: repeat(3, var(--th)) var(--kop4, var(--th)) repeat(3, calc(var(--th) / 2)) calc(var(--th) * 2.5)
      var(--th) repeat(2, calc(var(--th) / 2)) repeat(2, var(--th));
    grid-template-areas:
      "lock lock" "lock lock" "head head" "head head"
      "cta cta" "call call" "wa wa" "main main" "nis gang" "ko ko" "g g"
      "strip strip" "strip strip";
  }
  :root:root .hero-cta { flex-direction: row-reverse; align-items: center; justify-content: space-between; padding: 0 var(--pad); }
  :root:root .hero-cta .arr { align-self: center; }
  :root:root .hero-pair, :root:root .rate { display: contents; }
  :root:root .hero-pair .half {
    margin: var(--j) 0 0 var(--j);
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    padding: 0 var(--pad);
  }
  :root:root .hero-pair .half-l { font-size: 15px; }
  :root:root .hero-pair .half-num { display: block; margin-left: auto; font-size: 13px; }
  :root:root .hero-pair .half-call { grid-area: call; }
  :root:root .hero-pair .half-wa { grid-area: wa; }
  :root:root .rate .rate-ko { grid-area: ko; }
  :root:root .rate .rate-g { grid-area: g; }
  :root:root .rate .rate-row { margin: var(--j) 0 0 var(--j); grid-template-columns: auto auto 1fr; column-gap: 10px; }
  :root:root .rate-src { grid-column: auto; }
  :root:root .rate-dot { display: block; height: 0; overflow: hidden; }
  /* the white joints between the photos (Fotoranden, locked into c), on this answer's rows */
  :root:root .hero::before { grid-column: 2; grid-row: 9 / 10; }
  :root:root .hero::after { grid-column: 1 / 3; grid-row: 9; margin-left: var(--j); }
}


/* ============ TEGELS IN — picked 3 of ronde-basis2/mat.py (strook: onder elkaar, het plaatje is de hele rij, het woord erop). Written in by ronde-basis2.py --vast; %V% -> :root:root. ============ */
@media (max-width: 639px) {
  :root:root .mat { grid-template-rows: calc(var(--th) / 2); grid-auto-rows: calc(var(--th) * .75); }
  :root:root .mat li:not(.mat-cap) { grid-column: 1 / -1; position: relative; isolation: isolate; padding-left: var(--pad); font-size: 17px; }
  :root:root .mat-pic { position: absolute; inset: 0; z-index: -1; width: auto; margin: 0; }
  :root:root .mat-pic::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(31, 27, 24, .88), rgba(31, 27, 24, .55) 50%, rgba(31, 27, 24, .1));
  }
}


/* Sem, 2026-10-29, after the pick (phone only, by hand): "Ik wil dat offerte aanvragen en de reviews van plaats wisselen"
   (the two ratings up under the headline, Offerte aanvragen down under the photos) "en dat dit vak minder verticale
   spacing krijgt" (De hele badkamer in één hand: one course instead of two; the fold's ground stops halfway through it,
   as from 640). Before: style.before-ruil.css */
@media (max-width: 639px) {
  :root:root .hero.hero {
    grid-template-rows: repeat(3, var(--th)) var(--kop4, var(--th)) repeat(4, calc(var(--th) / 2)) calc(var(--th) * 2.5)
      var(--th) calc(var(--th) / 2) var(--th);
    grid-template-areas:
      "lock lock" "lock lock" "head head" "head head"
      "ko ko" "g g" "call call" "wa wa" "main main" "nis gang" "cta cta"
      "strip strip";
  }
  :root:root .hero::before { grid-row: 10 / 11; }
  :root:root .hero::after { grid-row: 10; }
  .fold { --seam: calc(var(--th) / 2); }
}


/* Sem, 2026-10-29 (phone only, by hand), on the two ratings under the headline: the name and the count "mag rechts
   worden uitgelijnd" (before: style.before-rechts.css) */
@media (max-width: 639px) {
  :root:root .rate-src { justify-self: end; text-align: right; }
}


/* ============ CIJFERS — picked 1 of ronde-basis2/cijfers.py (onder het logo: de twee cijfers recht onder het logo, boven de kop). Written in by ronde-basis2.py --vast; %V% -> :root:root. ============ */
@media (max-width: 639px) {
  :root:root .hero.hero {
    grid-template-rows: repeat(2, var(--th)) repeat(2, calc(var(--th) / 2)) var(--th) var(--kop4, var(--th))
      repeat(2, calc(var(--th) / 2)) calc(var(--th) * 2.5) var(--th) calc(var(--th) / 2) var(--th);
    grid-template-areas:
      "lock lock" "lock lock" "ko ko" "g g" "head head" "head head"
      "call call" "wa wa" "main main" "nis gang" "cta cta"
      "strip strip";
  }
}


/* Sem, 2026-10-29 (phone only, by hand), on the switch at Cijfers 1, two blocks circled with arrows between them:
   "Dit is de wissel die je moest doen" — Bellen and WhatsApp change places with Offerte aanvragen and the strip under
   it (De hele badkamer in één hand): Offerte aanvragen and the strip under the headline, the photos, then Bellen and
   WhatsApp at the foot of the fold. Before: style.before-wissel.css */
@media (max-width: 639px) {
  :root:root .hero.hero {
    grid-template-rows: repeat(2, var(--th)) repeat(2, calc(var(--th) / 2)) var(--th) var(--kop4, var(--th))
      calc(var(--th) / 2) var(--th) calc(var(--th) * 2.5) var(--th) repeat(2, calc(var(--th) / 2));
    grid-template-areas:
      "lock lock" "lock lock" "ko ko" "g g" "head head" "head head"
      "cta cta" "strip strip" "main main" "nis gang" "call call" "wa wa";
  }
  :root:root .hero::before { grid-row: 10 / 11; }
  :root:root .hero::after { grid-row: 10; }
}


/* Sem, 2026-10-29 (phone only, by hand): "Ik wil de subtekst op mobiel ook verwijderd zien" and, on an older crop with
   the wall's joints behind the headline, "ik wil weer zien dat er strepen achter lopen" (the words across the whole
   width): the line under the headline goes on the phone (it stays in the page, as .more does). The headline's tile
   was opened too, the joints behind it, and closed again at his next word: "Ik wil toch weer zien, dat de banner
   tekst, een egale achtergrond heeft, net als daarvoor". Before: style.before-sub.css */
@media (max-width: 639px) {
  .headline .sub { display: none; }
}


/* Sem, 2026-10-29 (phone only, by hand), on the open menu: "de dropdown zelf lijkt niet helemaal goed vast ze zitten
   aan de navbar, het is namelijk scrollable" and "er zit ook witruimte tussen stucwerk en over ons, deze moeten aan
   elkaar vastzitten". The quarter course of wall between Stucwerk and Over ons goes; the menu's rows shrink with a
   short screen, so the whole menu fits under the nav and nothing in it scrolls; while it is open the page behind it
   does not scroll either. Before: style.before-menu.css */
@media (max-width: 639px) {
  html.js .menu-panel {
    --mu: max(12px, min(calc(var(--th) / 4), calc((100vh - var(--bar) - var(--th) * .7) / 32)));
    --mu: max(12px, min(calc(var(--th) / 4), calc((100dvh - var(--bar) - var(--th) * .7) / 32)));
    padding-bottom: calc(var(--mu) * 2);
    background-size: var(--tw) calc(var(--mu) * 4);
  }
  html.js .menu-panel .grid { grid-auto-rows: var(--mu); }
  .menu-t:nth-of-type(4) { grid-row: span 3; margin-top: 1px; }
  .menu-t.menu-call { margin-top: calc(var(--mu, calc(var(--th) / 4)) + 1px); }
  html:has(#menu-panel:not([hidden])) { overflow: hidden; }
}


/* Sem, 2026-10-29 (phone only, by hand): "En ik wil boven en onder de banner tekst, minder spacing zien" — the
   headline's tile one and a half courses high instead of two (its second row, --kop4, half a course). Before:
   style.before-kop.css */
@media (max-width: 639px) {
  :root:root .hero { --kop4: calc(var(--th) / 2); }
}


/* Sem, 2026-10-29 (from 640 px, by hand), on a crop of the fold's foot at the computer: "Ik wil dat de lijnen dezelfde
   dikte hebben, als onder de fold" — the fold's joints 1 px from 640 as well, as on the wall under it (they were 2 px;
   the phone had 1 px already). Before: style.before-voeg.css */
@media (min-width: 640px) { .fold { --j: 1px; } }


/* Sem, 2026-10-29 (phone only, by hand): "Oke, ik wil eerst dat de afbeelding van het toilet naar boven wordt
   geschoven, dat dus onder het logo" — the toilet straight under the logo; the ratings, the headline, Offerte
   aanvragen and the strip move down a place, the niche and the hall stay where they were (under the strip, above
   Bellen). The white joint that ran between the toilet and those two goes: they now stand under the strip. Before:
   style.before-foto.css */
@media (max-width: 639px) {
  :root:root .hero.hero {
    grid-template-rows: repeat(2, var(--th)) calc(var(--th) * 2.5) repeat(2, calc(var(--th) / 2)) var(--th)
      var(--kop4, var(--th)) calc(var(--th) / 2) var(--th) var(--th) repeat(2, calc(var(--th) / 2));
    grid-template-areas:
      "lock lock" "lock lock" "main main" "ko ko" "g g" "head head" "head head"
      "cta cta" "strip strip" "nis gang" "call call" "wa wa";
  }
  :root:root .hero::before { grid-row: nis; }
  :root:root .hero::after { content: none; }
}


/* ============ OP DE FOTO — picked 3 of ronde-basis2/opfoto.py (op de foto: de cijfers in lichte letters op de foto zelf, de knoppen eronder, een donkere schaduw erachter). Written in by ronde-basis2.py --vast; %V% -> :root:root. ============ */
@media (max-width: 639px) {
  :root:root .hero.hero {
    grid-template-rows: repeat(2, var(--th)) var(--t-rows,) var(--o-rows, [ft] calc(var(--th) * 2.5) [ov fe])
      var(--o-rate-rows, repeat(2, calc(var(--th) / 2))) var(--t-head-rows, var(--th) var(--kop4, var(--th)))
      var(--o-cta-rows, calc(var(--th) / 2)) var(--th) var(--th) var(--o-pair-rows, repeat(2, calc(var(--th) / 2)));
    grid-template-areas: "lock lock" "lock lock" var(--t-areas,) var(--o-areas, "main main")
      var(--o-rate-areas, "ko ko" "g g") var(--t-head-areas, "head head" "head head") var(--o-cta-areas, "cta cta")
      "strip strip" "nis gang" var(--o-pair-areas, "call call" "wa wa");
  }
}

@media (max-width: 639px) {
  :root:root .hero {
    --f: clamp(calc(var(--th) * 3.5),
      round(down, calc(100svh - var(--bar) - var(--th) * 2.25 - var(--t-h, 0px) - 4px), calc(var(--th) / 2)),
      calc(var(--th) * 6));
    --o-rate-rows: ; --o-rate-areas: ; --o-cta-rows: ; --o-cta-areas: ; --o-pair-rows: ; --o-pair-areas: ;
  }
  :root:root .ph-main img { object-position: 50% 30%; }
  :root:root .ph-main .tag { bottom: calc(var(--o-h) + 10px); }
  :root:root .rate .rate-row, :root:root .hero .hero-cta, :root:root .hero-pair .half { position: relative; z-index: 3; }
  :root:root .hero-pair .half { justify-content: center; }
  :root:root .hero-pair .half-num { display: none; }
  :root:root .hero-pair .ic { flex: none; }
  /* the ratings side by side: score and stars, the name under them */
  :root:root .rate .rate-row { grid-template-columns: auto 1fr; column-gap: 8px; row-gap: 3px; padding: 0 12px; }
  :root:root .rate-src { grid-column: 1 / -1; justify-self: start; text-align: left; font-size: 0; }
  :root:root .rate-src b { font-size: 11.5px; }
}
@media (max-width: 359px) {
  :root:root .rate .rate-row { column-gap: 6px; padding: 0 9px; }
  :root:root .rate .stars svg { width: 10px; height: 10px; }
  :root:root .rate-score { font-size: 15px; gap: 5px; }
}

@media (max-width: 639px) {
  :root:root .hero {
    --o-h: calc(var(--th) * 1.5);
    --o-rows: [ft] calc(var(--f) - var(--o-h)) [ov] calc(var(--th) / 2) [o2] calc(var(--th) / 2) [o3]
      calc(var(--th) / 2) [fe];
    --o-areas: "main main" "main main" "main main" "main main";
  }
  /* the shade: from a course above the ratings down to the photo's foot */
  :root:root .ph-main::after {
    content: "";
    background: linear-gradient(180deg, rgba(31, 27, 24, 0) calc(100% - var(--o-h) - var(--th) * .9),
      rgba(31, 27, 24, .62) calc(100% - var(--o-h)), rgba(31, 27, 24, .8));
  }
  :root:root .rate .rate-ko { grid-area: ov / 1 / o2 / 2; }
  :root:root .rate .rate-g { grid-area: ov / 2 / o2 / 3; }
  :root:root .rate .rate-row { background: none; color: var(--papier); }
  :root:root .rate .stars { color: var(--zand); }
  :root:root .rate-src b { color: var(--papier); font-weight: 500; }
  :root:root .hero .hero-cta { grid-area: o2 / 1 / o3 / 3; background: var(--papier); color: var(--voeg); }
  :root:root .hero-pair .half-call { grid-area: o3 / 1 / fe / 2; }
  :root:root .hero-pair .half-wa { grid-area: o3 / 2 / fe / 3; }
}


/* ============ TITEL — picked 1 of ronde-basis2/titel.py (bovenin de foto: de titel in lichte letters over de bovenkant van de foto). Written in by ronde-basis2.py --vast; %V% -> :root:root. ============ */
@media (max-width: 639px) {
  :root:root .hero.hero {
    grid-template-rows: repeat(2, var(--th)) var(--t-rows,) var(--o-rows, [ft] calc(var(--th) * 2.5) [ov fe])
      var(--o-rate-rows, repeat(2, calc(var(--th) / 2))) var(--t-head-rows, var(--th) var(--kop4, var(--th)))
      var(--o-cta-rows, calc(var(--th) / 2)) var(--th) var(--th) var(--o-pair-rows, repeat(2, calc(var(--th) / 2)));
    grid-template-areas: "lock lock" "lock lock" var(--t-areas,) var(--o-areas, "main main")
      var(--o-rate-areas, "ko ko" "g g") var(--t-head-areas, "head head" "head head") var(--o-cta-areas, "cta cta")
      "strip strip" "nis gang" var(--o-pair-areas, "call call" "wa wa");
  }
}

@media (max-width: 639px) {
  :root:root .hero { --t-head-rows: ; --t-head-areas: ; }
  :root:root .headline {
    grid-area: ft / 1 / ov / -1;
    align-self: start;
    z-index: 2;
    justify-content: flex-start;
    padding: calc(var(--th) * .24) var(--pad) calc(var(--th) * .6);
    background: linear-gradient(180deg, rgba(31, 27, 24, .7), rgba(31, 27, 24, .42) 60%, rgba(31, 27, 24, 0));
    color: var(--papier);
    text-shadow: 0 1px 14px rgba(31, 27, 24, .35);
  }
}


/* Sem, 2026-10-29 (phone only, by hand), on the page with Op de foto 3 and Titel 1: the label on the toilet goes
   (crossed out on his crop), and so do the strip (De hele badkamer in één hand) and the niche and the hall under it
   ("Verwijder deze elementen"). The fold now ends with Bellen and WhatsApp on the photo's foot. Before:
   style.before-weg.css */
@media (max-width: 639px) {
  :root:root .hero.hero {
    grid-template-rows: repeat(2, var(--th)) [ft] calc(var(--f) - var(--o-h)) [ov] calc(var(--th) / 2) [o2]
      calc(var(--th) / 2) [o3] calc(var(--th) / 2) [fe];
    grid-template-areas: "lock lock" "lock lock" "main main" "main main" "main main" "main main";
  }
  :root:root .ph-main .tag, :root:root .hero .strip, :root:root .hero .ph-nis, :root:root .hero .ph-gang { display: none; }
  :root:root .hero::before { content: none; }
}


/* Sem, 2026-10-29 (phone only, by hand), on the two ratings on the toilet's foot: "de ratings kleven wel heel erg aan
   de onderkant ... het moet wel aan de onderkant worden uitgelijnd, maar met iets meer spacing aan de onderkant" —
   the two lines stand on the foot of their row with about a seventh of a course under them; the row reaches up
   into the shade by a tenth of a course for it (it has no tile of its own). Before: style.before-cijferlucht.css */
@media (max-width: 639px) {
  :root:root .rate .rate-row {
    margin-top: calc(var(--th) * -.1);
    align-content: end;
    padding-bottom: calc(var(--th) * .14);
  }
}


/* the operator, 2026-10-30 (by hand), toward the leaner pages of SAL, De Zaanse Schilder and Gevelrenovatie Den Haag:
   - Badkamer renovatie keeps its heading and subheading (the two paragraphs are out of the HTML, the price stays), and
     its list is the item headings only, at every width;
   - Tegelwerk on the phone: the tiles ("this looks horrid. trim.") became one compact list like the badkamer's; later
     the same day hidden, with Stucwerk's list (its price line among it): "these lists under stucwerk and tegelwerk
     have to be deleted on mobile" (they stay in the HTML; before: style.before-lijsten.css);
   - Over ons on the phone: the rows Badkamers, Tegelwerk and Stucwerk, which repeat the three service blocks, are
     hidden (they stay in the HTML); Tegels, Bereikbaar and Vanuit remain.
   Before: style.before-minder.css, index.before-minder.html */
@media (max-width: 639px) {
  :root:root .scope-tiles, :root:root .scope-rows { display: none; }
  :root:root .spec .spec-dienst { display: none; }
  :root:root .spec .spec-dienst + div:not(.spec-dienst) { border-top: 1px solid var(--zand-500); }
}


/* ============ BADKAMER — picked 2 of ronde-basis2/badkamer.py (groot: grote kop, de lijst als vijf genummerde stappen). Written in by ronde-basis2.py --vast; %V% -> :root:root. ============ */
/* the switch had it from 1024 px; written in from 640, so the tablet (640–1023) gets it too (by hand, the same day) */
@media (min-width: 640px) {
  :root:root .bk-copy { padding-top: calc(var(--th) * .3); }
  :root:root .bk-copy h2 { font-size: clamp(44px, calc(var(--tw) * .25), 62px); line-height: 1.02; letter-spacing: -.03em; margin-bottom: 22px; }
  :root:root .bk-copy .sv-sub { font-size: clamp(19px, calc(var(--tw) * .098), 24px); line-height: 1.32; margin-bottom: 18px; }
  :root:root .bk-copy .prijs { font-size: 17px; }
  :root:root .bk-lijst { padding: calc(var(--th) * .3) 0 0; counter-reset: stap; }
  :root:root .bk-lijst .kicker { margin-bottom: calc(var(--th) * .2); }
  :root:root .bk-lijst .scope-table li { counter-increment: stap; grid-template-columns: 1fr; min-height: calc(var(--th) * .65); }
  :root:root .bk-lijst .scope-table li:last-child { border-bottom: 0; }
  :root:root .bk-lijst .scope-table b { gap: 0; padding-left: calc(var(--tw) * .1); font: 500 clamp(19px, calc(var(--tw) * .098), 24px)/1.2 var(--f-head); letter-spacing: -.01em; }
  :root:root .bk-lijst .scope-table b::before {
    content: counter(stap, decimal-leading-zero); width: calc(var(--tw) * .3); height: auto; background: none;
    font: 600 13px/1 var(--f-head); letter-spacing: .14em; color: var(--klei-700); font-variant-numeric: tabular-nums;
  }
}


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