/* R.A. Vastgoed Onderhoud — bak7 · FV-11 · a
   Every colour below comes from palette.json (leisteen, koper, gesmoord, kalk, whatsapp). */

:root {
  --ls-950: #0C1117;
  --ls-900: #141B23;
  --ls-800: #1D2732;
  --ls-700: #2D3A47;
  --kp-200: #F6D3B6;
  --kp-500: #E79759;
  --kp-600: #D27D3E;
  --kp-800: #A2541F;
  --gs-300: #C3C9CF;
  --gs-500: #8A949D;
  --gs-600: #5C6670;
  --kl-50: #FBF9F5;
  --kl-100: #F4EFE6;
  --kl-200: #E6DED0;
  --kl-300: #CFC3B0;
  --bk: #9E4630;            /* reserve: baksteen, invalid states */
  --wa: #25D366;
  --wa-ink: #FFFFFF;

  --scrim: 20, 27, 35;      /* leisteen 900 as rgb, for alpha */
  --scrim-d: 12, 17, 23;    /* leisteen 950 as rgb */
  --paper: 251, 249, 245;   /* kalk 50 as rgb */

  --f-serif: "Playfair Display", Georgia, "Times New Roman", serif;
  --f-sans: "Cabin", "Segoe UI", system-ui, sans-serif;
  --f-caps: "Quicksand", "Cabin", system-ui, sans-serif;
  --f-hand: "Caveat", "Segoe Print", cursive;

  --gut: clamp(18px, 5vw, 64px);
  --wrap: 1240px;
  --wrap-wide: 1440px;
  --H: clamp(32px, 8.8vw, 46px);   /* the headline's size — and the name's */
  --sec: clamp(64px, 8vw, 120px);
}
@media (min-width: 1000px) {
  :root { --H: clamp(42px, 4.05vw, 64px); }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: clip; }
body {
  margin: 0;
  font-family: var(--f-sans);
  font-size: 17px;
  line-height: 1.6;
  color: var(--ls-900);
  background: var(--kl-50);
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; height: auto; }
a { color: var(--kp-800); }
p { margin: 0 0 1em; }
h1, h2, h3 { margin: 0; font-weight: 500; }
figure { margin: 0; }
ul, ol { margin: 0; padding: 0; }
button, input, textarea { font: inherit; color: inherit; }

.wrap { width: min(100% - 2 * var(--gut), var(--wrap)); margin-inline: auto; }
.wrap-wide { width: min(100% - 2 * var(--gut), var(--wrap-wide)); margin-inline: auto; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--kp-500); color: var(--ls-900); padding: 10px 14px; font-weight: 600; }
.skip:focus { top: 12px; }
.ico { width: 1.15em; height: 1.15em; fill: currentColor; flex: none; }
.hand { font-family: var(--f-hand); }
.nr { white-space: nowrap; }
:focus-visible { outline: 2px solid var(--kp-500); outline-offset: 3px; }

/* ---------- small type devices ---------- */
.kicker {
  display: flex; align-items: center; gap: 12px;
  font: 700 12.5px/1.2 var(--f-caps);
  letter-spacing: .26em; text-transform: uppercase;
  color: var(--kp-800);
  margin: 0 0 16px;
}
.kicker::before { content: ""; width: 26px; height: 2px; background: var(--kp-500); flex: none; }
.dark .kicker { color: var(--kp-200); }

.photo-label {
  font: 500 12.5px/1.3 var(--f-sans);
  color: var(--gs-600);
  margin: 10px 0 0;
  letter-spacing: .01em;
}
.photo-label::before { content: ""; display: inline-block; width: 14px; height: 1px; background: var(--kp-500); vertical-align: middle; margin-right: 8px; }
.photo-label--dark, .dark .photo-label { color: var(--gs-500); }
.pframe > .photo-label {
  position: absolute; left: 12px; bottom: 12px; z-index: 3; margin: 0;
  background: rgba(var(--scrim-d), .66); color: var(--kl-50);
  padding: 5px 10px; border-radius: 2px;
}

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 0 22px;
  border: 2px solid transparent; border-radius: 3px;
  font: 600 16.5px/1.1 var(--f-sans);
  text-decoration: none; cursor: pointer; text-align: center;
  transition: background-color .15s, border-color .15s, color .15s;
}
.btn .ico { width: 20px; height: 20px; }
.btn--call { background: var(--kp-500); color: var(--ls-900); }
.btn--call:hover { background: var(--kp-600); }
.btn--dark { background: var(--ls-900); color: var(--kl-50); }
.btn--dark .ico { color: var(--kp-500); }
.btn--dark:hover { background: var(--ls-800); }
.btn--wa { background: var(--wa); color: var(--wa-ink); }
.btn--wa:hover { border-color: var(--ls-900); }
.btn--wa-inv { background: var(--ls-900); color: var(--wa); border-color: var(--wa); }
.btn--wa-inv:hover { background: var(--ls-800); border-color: var(--wa); }
.btn--quiet { background: transparent; color: var(--ls-900); border-color: var(--kl-300); }
.btn--quiet:hover { border-color: var(--ls-900); }
.btn--quiet-dark { color: var(--kl-50); border-color: var(--ls-700); }
.btn--quiet-dark:hover { border-color: var(--kl-50); }
.pair, .actions { display: flex; flex-wrap: wrap; gap: 10px; }
.actions { margin-top: 28px; }

.stars { display: inline-flex; gap: 2px; color: var(--kp-500); vertical-align: -3px; }
.stars svg { width: 18px; height: 18px; fill: currentColor; }

/* =========================================================
   HEADER
   ========================================================= */
.site-head { position: relative; z-index: 50; background: var(--ls-900); color: var(--kl-50); }
.site-head__bar { display: flex; align-items: center; gap: 12px; height: 64px; }
.brand { display: flex; align-items: center; gap: 9px; color: inherit; text-decoration: none; flex: none; }
.brand__mark { width: 36px; height: auto; }
.brand__name { display: grid; line-height: 1; }
.brand__ra { font: 500 21px/1 var(--f-serif); }
.brand__vo { font: 500 12.5px/1.2 var(--f-sans); color: var(--gs-300); margin-top: 2px; }

.nav { display: none; }
.site-head__call { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.headcall {
  display: inline-flex; align-items: center; gap: 7px;
  color: var(--kl-50); text-decoration: none;
  font: 600 15px/1 var(--f-sans); padding: 10px 2px;
}
.headcall .ico { color: var(--kp-500); width: 17px; height: 17px; }
.headwa { display: none; }
.menu-btn {
  width: 44px; height: 44px; border: 1px solid var(--ls-700); border-radius: 3px;
  background: transparent; display: grid; place-items: center; cursor: pointer; flex: none;
}
.menu-btn__lines, .menu-btn__lines::before, .menu-btn__lines::after {
  display: block; width: 18px; height: 2px; background: var(--kl-50); position: relative; content: "";
  transition: transform .2s, background-color .2s;
}
.menu-btn__lines::before { position: absolute; top: -6px; }
.menu-btn__lines::after { position: absolute; top: 6px; }
.site-head.is-open .menu-btn__lines { background: transparent; }
.site-head.is-open .menu-btn__lines::before { transform: translateY(6px) rotate(45deg); }
.site-head.is-open .menu-btn__lines::after { transform: translateY(-6px) rotate(-45deg); }

/* mobile menu panel */
.site-head.is-open .nav {
  display: block; position: absolute; left: 0; right: 0; top: 64px;
  background: var(--ls-900); border-top: 1px solid var(--ls-700);
  padding: 8px var(--gut) 20px; box-shadow: 0 18px 30px rgba(var(--scrim-d), .5);
}
.nav__list { list-style: none; }
.nav__item > a, .nav__drop-btn {
  display: flex; align-items: center; gap: 6px; width: 100%;
  padding: 14px 0; border: 0; background: none; cursor: pointer;
  color: var(--kl-50); text-decoration: none; font: 500 17px/1.2 var(--f-sans);
  border-bottom: 1px solid var(--ls-700); text-align: left;
}
.ico--chev { width: 16px; height: 16px; transition: transform .2s; }
.nav__item--drop.is-open .ico--chev { transform: rotate(180deg); }
.nav__dd { list-style: none; display: none; padding: 6px 0 10px 14px; }
.nav__item--drop.is-open .nav__dd { display: block; }
.nav__dd a { display: block; padding: 10px 0; color: var(--gs-300); text-decoration: none; font-size: 16px; }
.nav__dd a:hover { color: var(--kp-200); }

@media (min-width: 1000px) {
  .site-head {
    position: absolute; inset: 0 0 auto 0; background: none;
  }
  .site-head::before {
    content: ""; position: absolute; inset: 0 0 -40px 0; z-index: -1; pointer-events: none;
    background: linear-gradient(180deg, rgba(var(--scrim-d), .78), rgba(var(--scrim-d), 0));
  }
  .site-head__bar { height: 84px; gap: 24px; }
  .brand__mark { width: 44px; }
  .brand__name { display: flex; align-items: baseline; gap: 7px; }
  .brand__ra { font-size: 23px; }
  .brand__vo { font-size: 17px; color: var(--kl-50); margin: 0; }
  .menu-btn { display: none; }
  .nav { display: block; margin-left: auto; }
  .nav__list { display: flex; align-items: center; gap: 2px; }
  .nav__item > a, .nav__drop-btn {
    width: auto; padding: 10px 11px; border: 0; font-size: 16px; font-weight: 500; white-space: nowrap;
  }
  .nav__item > a:hover, .nav__drop-btn:hover { color: var(--kp-200); }
  .nav__item--drop { position: relative; }
  .nav__dd {
    display: block; position: absolute; top: 100%; left: 0; min-width: 260px;
    margin-top: 8px; padding: 8px 0;
    background: var(--kl-50); border-top: 3px solid var(--kp-500);
    box-shadow: 0 18px 40px rgba(var(--scrim-d), .35);
    opacity: 0; visibility: hidden; transform: translateY(6px);
    transition: opacity .16s, transform .16s, visibility 0s .16s;
  }
  .nav__dd::before { content: ""; position: absolute; left: 0; right: 0; top: -14px; height: 14px; }
  .nav__dd a { color: var(--ls-900); padding: 10px 20px; font-weight: 500; }
  .nav__dd a:hover { background: var(--kl-100); color: var(--kp-800); }
  .nav__item--drop.is-open .nav__dd,
  .nav__item--drop:focus-within .nav__dd {
    opacity: 1; visibility: visible; transform: none; transition: opacity .16s, transform .16s;
  }
  .site-head__call { margin-left: 8px; gap: 10px; }
  .headcall {
    padding: 0 14px; height: 44px; border: 1px solid rgba(var(--paper), .45); border-radius: 3px;
    font-size: 16px;
  }
  .headcall:hover { border-color: var(--kp-500); }
  .headwa {
    display: inline-flex; align-items: center; gap: 7px; height: 44px; padding: 0 14px;
    background: var(--wa); color: var(--wa-ink); border-radius: 3px; text-decoration: none;
    font: 600 15px/1 var(--f-sans);
  }
  .headwa .ico { width: 18px; height: 18px; }
}
@media (hover: hover) and (min-width: 1000px) {
  .nav__item--drop:hover .nav__dd { opacity: 1; visibility: visible; transform: none; transition: opacity .16s, transform .16s; }
}
@media (min-width: 1000px) and (max-width: 1279px) {
  .nav__item--wide { display: none; }
}
@media (min-width: 1000px) and (max-width: 1199px) {
  .nav__item--mid { display: none; }
}
@media (max-width: 380px) {
  .brand__mark { width: 30px; }
  .headcall { font-size: 14px; }
}

/* =========================================================
   PHOTO FRAMES — a frame the photo's own shape, cover-fitted to its box,
   so pencil notes in the photo's own coordinates stay on their spot
   ========================================================= */
.pframe { position: relative; overflow: hidden; container-type: size; }
.pframe__in {
  --w: max(100cqw, 100cqh * var(--ar));
  position: absolute;
  width: var(--w);
  aspect-ratio: var(--ar);
  left: calc((100cqw - var(--w)) * var(--fx, .5));
  top: calc((100cqh - var(--w) / var(--ar)) * var(--fy, .5));
}
.pframe__in > img { width: 100%; height: 100%; object-fit: cover; max-width: none; }

.pencil { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 1; }
.pencil path { fill: none; stroke: var(--kp-500); stroke-width: 2.2; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.pencil circle { fill: rgba(var(--paper), .25); stroke: var(--kp-500); stroke-width: 2.4; vector-effect: non-scaling-stroke; }

.note {
  position: absolute; left: var(--x); top: var(--y); z-index: 2;
  display: block; white-space: nowrap;
  background: var(--kl-50); color: var(--ls-900);
  padding: 5px 11px 7px; border-radius: 1px;
  font-family: var(--f-hand); line-height: 1;
  transform: rotate(-2.2deg);
  box-shadow: 0 3px 10px rgba(var(--scrim-d), .35);
}
.note--l { transform: translateX(-100%) rotate(1.8deg); }
.note b { display: block; font-weight: 700; font-size: 25px; }
.note i { display: block; font-style: normal; font-weight: 500; font-size: 19px; color: var(--gs-600); margin-top: 3px; }

/* =========================================================
   FOLD
   ========================================================= */
.fold { position: relative; isolation: isolate; background: var(--ls-900); color: var(--kl-50); overflow: hidden; }
.fold__photo {
  position: absolute; left: 0; right: 0; top: 0; z-index: -1;
  height: clamp(430px, 128vw, 620px);
  overflow: hidden; container-type: size;
}
.fold__photo::after {
  content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background: linear-gradient(180deg,
    rgba(var(--scrim), .05) 0%,
    rgba(var(--scrim), .08) 34%,
    rgba(var(--scrim), .62) 58%,
    rgba(var(--scrim), .94) 84%,
    var(--ls-900) 100%);
}
.fold__photo .note, .fold__photo .pencil { z-index: 4; }
.pencil__d, .note--d { display: none; }

.fold__inner { position: relative; padding: clamp(214px, 58vw, 330px) 0 28px; }
.fold__diptych { display: grid; gap: 26px; }
.fold__left { display: contents; }
.fold__left .lockup { order: 1; }
.fold__right { order: 2; }
.fold__meta { order: 3; margin-top: 4px; }

/* the lockup — the name at the headline's size, R.A. above it as in the logo */
.lockup { margin: 0; display: flex; flex-direction: column; align-items: flex-start; }
.lockup__row { display: flex; align-items: flex-end; gap: calc(var(--H) * .2); }
.lockup__ra {
  font: 500 calc(var(--H) * 1.5)/.8 var(--f-serif);
  color: var(--kl-50); letter-spacing: .01em;
  padding-top: .08em;
}
.lockup__mark { width: auto; height: calc(var(--H) * 1.32); margin-bottom: calc(var(--H) * -.04); }
.lockup__vo {
  font: 500 var(--H)/1.08 var(--f-sans);
  color: var(--gs-300); letter-spacing: -.005em; white-space: nowrap;
  margin-top: calc(var(--H) * .2);
}
.lockup__tag {
  font: 700 max(11px, calc(var(--H) * .235))/1.2 var(--f-caps);
  letter-spacing: .34em; text-transform: uppercase;
  color: var(--gs-300); margin-top: calc(var(--H) * .42);
}

.fold__kop {
  font: 500 var(--H)/1.07 var(--f-serif);
  letter-spacing: -.012em; color: var(--kl-50);
  text-wrap: balance;
}
.fold__kop em { font-style: italic; color: var(--kp-500); }
.fold__sub { margin: 18px 0 24px; font-size: 17px; line-height: 1.55; color: var(--gs-300); max-width: 34em; }
.pair--fold .btn { width: 100%; }

.fold__meta { display: grid; gap: 18px; }
.owner-chip { display: flex; align-items: center; gap: 14px; }
.owner-chip__face {
  position: relative; width: 66px; height: 66px; border-radius: 50%; overflow: hidden; flex: none;
  box-shadow: 0 0 0 2px var(--kp-500), 0 0 0 6px rgba(var(--scrim), .55);
}
.owner-chip__face img { position: absolute; max-width: none; width: 431.5%; height: auto; left: -103%; top: -59.6%; }
.owner-chip__text { display: grid; gap: 4px; }
.owner-chip__name { font: 700 36px/.85 var(--f-hand); color: var(--kl-50); }
.owner-chip__link { font: 500 15px/1.3 var(--f-sans); color: var(--kp-200); text-underline-offset: 3px; text-decoration-color: rgba(var(--paper), .35); }
.owner-chip__link:hover { color: var(--kl-50); text-decoration-color: var(--kp-500); }

.rating { display: flex; align-items: center; gap: 6px 12px; flex-wrap: wrap; }
.rating__text { font-size: 15px; color: var(--gs-300); }
.rating__score { color: var(--kl-50); font-weight: 700; }
.rating__platform { color: var(--kl-50); font-weight: 600; }

.fold__label { color: var(--gs-500); margin: 26px 0 10px; text-align: right; font-size: 12px; }

/* the quick form */
.quick {
  background: var(--kl-100); color: var(--ls-900);
  border-radius: 4px; padding: 20px 18px;
  display: grid; gap: 14px;
  box-shadow: 0 24px 60px rgba(var(--scrim-d), .5);
  border-top: 3px solid var(--kp-500);
}
.quick__head p { margin: 0; }
.quick__kop { font: 500 22px/1.15 var(--f-serif); }
.quick__hint { font-size: 14.5px; color: var(--gs-600); margin-top: 4px !important; line-height: 1.4; }
.quick__chips { border: 0; margin: 0; padding: 0; min-width: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.chip { position: relative; }
.chip input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.chip span {
  display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px;
  border: 1.5px solid var(--kl-300); border-radius: 999px; background: var(--kl-50);
  font: 600 14.5px/1 var(--f-sans); cursor: pointer; transition: background-color .12s, border-color .12s;
}
.chip span:hover { border-color: var(--ls-900); }
.chip input:checked + span { background: var(--ls-900); border-color: var(--ls-900); color: var(--kl-50); }
.chip input:checked + span::before { content: "✓"; color: var(--kp-500); margin-right: 7px; font-weight: 700; }
.chip input:focus-visible + span { outline: 2px solid var(--kp-800); outline-offset: 2px; }
.quick__box textarea {
  display: block; width: 100%; min-height: 84px; resize: vertical;
  border: 1.5px solid var(--kl-300); border-radius: 3px; background: var(--kl-50);
  padding: 10px 12px; font-size: 15.5px; line-height: 1.45;
}
.quick__box textarea::placeholder, .cform ::placeholder { color: var(--gs-600); }
.quick__box textarea:focus { outline: none; border-color: var(--ls-900); }
.quick__send { width: 100%; }

@media (min-width: 640px) {
  .pair--fold .btn { width: auto; }
}

@media (min-width: 1000px) {
  .fold { min-height: max(100svh, 800px); display: flex; flex-direction: column; justify-content: flex-end; }
  .fold__photo { inset: 0; height: auto; }
  .fold__photo::after {
    background:
      linear-gradient(90deg, rgba(var(--scrim-d), .5) 0%, rgba(var(--scrim-d), .12) 48%, rgba(var(--scrim-d), 0) 70%),
      linear-gradient(180deg,
        rgba(var(--scrim-d), 0) 0%,
        rgba(var(--scrim-d), 0) 24%,
        rgba(var(--scrim), .5) 44%,
        rgba(var(--scrim), .84) 66%,
        rgba(var(--scrim-d), .95) 100%);
  }
  .pencil__m, .note--m { display: none; }
  .pencil__d { display: inline; }
  .note--d { display: block; }
  .fold__inner { padding: 120px 0 34px; width: min(100% - 2 * var(--gut), var(--wrap-wide)); }
  .fold__diptych {
    grid-template-columns: minmax(0, 12fr) minmax(0, 13fr);
    gap: 0; align-items: stretch;
  }
  .fold__left { display: grid; align-content: space-between; padding-right: clamp(28px, 3.4vw, 60px); gap: 30px; }
  .fold__left .lockup, .fold__right, .fold__meta { order: 0; margin: 0; }
  .fold__right {
    border-left: 1px solid rgba(var(--paper), .28);
    padding-left: clamp(28px, 3.4vw, 60px);
    display: flex; flex-direction: column;
  }
  .fold__kop { max-width: 13.5em; }
  .fold__sub { font-size: 18px; margin: 20px 0 26px; }
  .fold__label { margin: 22px 0 8px; }
  .quick {
    grid-template-columns: minmax(200px, 250px) minmax(0, 470px) minmax(0, 1fr) auto;
    align-items: center; gap: 22px; padding: 18px 22px 18px 26px;
  }
  .quick__box textarea { min-height: 92px; }
  .quick__send { width: auto; align-self: stretch; min-height: 0; padding: 0 26px; }
}
@media (min-width: 1000px) and (max-width: 1359px) {
  .quick { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr) auto; }
  .quick__head { grid-column: 1 / -1; display: flex; align-items: baseline; gap: 16px; }
  .quick__hint { margin: 0 !important; }
}
@media (max-width: 1299px) { .note--far, .pencil__d .far { display: none; } }

/* =========================================================
   TRUST STRIP
   ========================================================= */
.trust { background: var(--kl-50); border-bottom: 1px solid var(--kl-200); }
.trust__inner {
  display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center; gap: 14px; padding: 22px 0;
}
.trust__half { margin: 0; display: grid; gap: 6px; }
.trust__half:first-child { text-align: right; justify-items: end; }
.trust__big { font: italic 500 clamp(21px, 2.5vw, 34px)/1.05 var(--f-serif); color: var(--ls-900); white-space: nowrap; }
.trust__small { font-size: 13.5px; line-height: 1.4; color: var(--gs-600); max-width: 30ch; }
.trust__joint { display: grid; place-items: center; align-self: stretch; position: relative; }
.trust__joint::before { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 1px; background: var(--kl-200); }
.trust__joint img { position: relative; width: 34px; height: auto; background: var(--kl-50); padding: 6px 0; }
@media (max-width: 419px) {
  .trust__inner { gap: 9px; }
  .trust__big { font-size: 18px; }
  .trust__small { font-size: 13px; }
  .trust__joint img { width: 24px; }
}
@media (min-width: 760px) {
  .trust__inner { gap: clamp(20px, 3vw, 44px); padding: 26px 0; }
  .trust__half { display: flex; align-items: baseline; gap: 16px; }
  .trust__half:first-child { justify-content: flex-end; text-align: left; }
  .trust__small { font-size: 15px; }
  .trust__joint img { width: 58px; padding: 8px 0; }
}


/* ============ INDELING — picked 1 of ronde/indeling.py (swapped: left the lockup with the buttons under it; right the headline, the text, Ramazan and the rating). Written in by ronde-varianten.py --vast; %V% -> :root:root. ============ */
/* 1 · swapped: left the lockup and, at the foot of the column, the buttons; right under the text Ramazan and the
   rating, as a has them on the left */
@media (min-width: 1000px) {
  :root:root .fold__diptych {
    --dp: clamp(28px, 3.4vw, 60px);
    grid-template-columns: minmax(0, 12fr) minmax(0, 13fr); grid-template-rows: repeat(4, auto);
  }
  :root:root .fold__left, :root:root .fold__right { display: contents; }
  /* the headline must start under the notes' dots on the photo (hoekkeper at 22.8 % of the photo's height, from 1300
     px also dakkapel at 28.7 %): where a's fold height leaves no room for the taller column, the fold grows instead of
     the headline climbing into them. The room above the content is a constant, since the dots go down with the fold:
     P >= (0.228 C + 18) / 0.772 up to 1299 px and (0.287 C + 17) / 0.713 from 1300, C the content under it (up to
     820 and 740 px, the light card of Cijfer 2 the tallest); wherever the fold is tall enough anyway, nothing changes */
  :root:root .fold__inner { padding-top: 272px; }
  :root:root .fold__diptych::before {
    content: ""; grid-column: 2; grid-row: 1 / -1; pointer-events: none;
    border-left: 1px solid rgba(var(--paper), .28);
  }
  :root:root .fold__left .lockup { grid-column: 1; grid-row: 1 / 3; align-self: start; padding-right: var(--dp); }
  :root:root .fold__kop { grid-column: 2; grid-row: 1; padding-left: var(--dp); max-width: calc(13.5em + var(--dp)); }
  :root:root .fold__sub { grid-column: 2; grid-row: 2; padding-left: var(--dp); max-width: calc(34em + var(--dp)); }
  /* the column under the text is taller than a's, so the headline stands higher on the photo: the dark of the photo
     comes up by as much (--lift, per answer), so the headline stays on a's dark */
}
@media (min-width: 1300px) {
  :root:root .fold__inner { padding-top: 324px; }
}
@media (min-width: 1000px) {
  :root:root .fold__photo::after {
    background:
      linear-gradient(90deg, rgba(var(--scrim-d), .5) 0%, rgba(var(--scrim-d), .12) 48%, rgba(var(--scrim-d), 0) 70%),
      linear-gradient(180deg,
        rgba(var(--scrim-d), 0) 0%,
        rgba(var(--scrim-d), 0) calc(24% - var(--lift)),
        rgba(var(--scrim), .5) calc(44% - var(--lift)),
        rgba(var(--scrim), .84) calc(66% - var(--lift)),
        rgba(var(--scrim-d), .95) 100%);
  }
}

@media (min-width: 1000px) {
  :root:root .fold { --lift: 56px; }   /* the headline 56 px higher than in a, measured */
  :root:root .pair--fold { grid-column: 1; grid-row: 3; align-self: end; padding-right: var(--dp); }
  :root:root .fold__meta { grid-column: 2; grid-row: 3; padding-left: var(--dp); }
}


/* ============ BY HAND, 2026-10-14. Sem: "Verder wil ik dat je de verticale ruimte tussen het logo, en de telefoon /
   whatsapp button group verkort, het logo moet dus meer naar beneden gaan. En verwijder ook het label van de foto".
   The lockup stands at the foot of its column, 32 px above the buttons (52 px high), no longer level with the
   headline's top. The photo label is out of the fold (index.html); the form keeps a distance of its own to the text.
   With the label gone and Cijfer, Label and Plek not picked, the room above the content is what this column needs
   (P as above, for the content as it is now), not what the tallest combination of the switch needed.
   a's files from before: index.before-logo-label.html, style.before-logo-label.css ============ */
.fold .quick { margin-top: 32px; }
@media (min-width: 1000px) {
  .fold .quick { margin-top: 30px; }
  :root:root .fold__left .lockup { grid-row: 1 / 4; align-self: end; margin-bottom: calc(52px + 32px); }
  :root:root .fold__inner { padding-top: 224px; }
  :root:root .fold { --lift: 40px; }   /* the headline now 37-40 px higher than in a as baked (1440, 1920), measured */
}
@media (min-width: 1300px) {
  :root:root .fold__inner { padding-top: 280px; }
}


/* ============ BY HAND, 2026-10-14 (2). Sem: "Ik wil dat het logo in de banner weer op gelijke hoogte wordt gebracht
   met "Een dak lekt meestal waar het iets anders raakt."" The lockup's top is the headline's top again, as Indeling 1
   had it; the buttons come up with it and stay 32 px under it (his ask before this one: less room between the logo and
   the buttons). Each column now stacks from the top, on its own: the headline spans rows 1-2 and row 2 is 1fr, so row
   1 is what the lockup claims and row 2 the rest of the headline. The lockup claims 60 px less than it is (a negative
   margin) and the buttons start 60 px further down, so they stand 32 px under the lockup, and a lockup taller than
   the headline (a larger logo) never pushes the text under the headline down.
   a's style from before: style.before-logo-kop.css ============ */
@media (min-width: 1000px) {
  :root:root .fold__diptych { grid-template-rows: auto 1fr auto auto; }
  :root:root .fold__left .lockup { grid-row: 1; align-self: start; margin-bottom: -60px; }
  :root:root .fold__kop { grid-row: 1 / 3; }
  :root:root .fold__sub { grid-row: 3; }
  :root:root .fold__meta { grid-row: 4; }
  :root:root .pair--fold { grid-row: 2 / -1; align-self: start; margin-top: calc(60px + 32px); }
}


/* ============ BY HAND, 2026-10-14 (3). The notes' dots (hoekkeper, dakkapel) touched the headline in windows that are
   wide and low, where the fold is as tall as its content (measured at 700 px high, every 10 px from 1000 to 2560):
   from 1300 to 1359 (the form in two rows makes the content taller) and from 1450 to 2250 (the photo fills the width, so
   its dots go down as the window gets wider). The room above the content now keeps them 4 px clear there; where the
   window is taller than the fold the content stands at the bottom anyway, so at 1920 x 1080 nothing moves. --room is
   what a row on the switch adds when it makes the content taller.
   a's style from before: style.before-ruimte.css ============ */
@media (min-width: 1000px) {
  :root:root .fold__inner { padding-top: calc(224px + var(--room, 0px)); }
}
@media (min-width: 1300px) {
  :root:root .fold__inner { padding-top: calc(max(280px, 3.5vw + 232px) + var(--room, 0px)); }
}
@media (min-width: 1300px) and (max-width: 1359px) {
  :root:root .fold__inner { padding-top: calc(294px + var(--room, 0px)); }
}


/* ============ OORDEEL — picked 2 of ronde/oordeel.py (larger: stars 25 px, the words 19 px). Written in by ronde-varianten.py --vast; %V% -> :root:root. ============ */
/* 2 · larger: stars 25 px, the words 19 px */
:root:root .rating--fold { gap: 7px 15px; }
:root:root .rating--fold .stars { gap: 3px; vertical-align: -4px; }
:root:root .rating--fold .stars svg { width: 25px; height: 25px; }
:root:root .rating--fold .rating__text { font-size: 19px; }
@media (min-width: 1000px) { :root:root .fold { --room: 4px; } }   /* the dots stay clear of the headline (a's --room) */
@media (min-width: 1000px) and (max-width: 1199px) { :root:root .fold { --room: 14px; } }   /* words under the stars */


/* ============ DIENSTEN — picked 3 of ronde/diensten.py (raised: white pills with a grey edge and a shadow, a copper plus before the word; the tapped one dark with a copper tick). Written in by ronde-varianten.py --vast; %V% -> :root:root. ============ */
/* 3 · raised: white pills with a grey edge, a shadow under them as under a key, a copper plus before each word (a tick
   on the tapped one) */
:root:root .quick .chip span {
  background: #fff; border-color: var(--gs-500); color: var(--ls-900);
  padding: 0 10px 0 8px;   /* with the plus as wide as a's padding: the five wrap as a's do */
  box-shadow: 0 2px 0 var(--kl-300), 0 5px 12px rgba(var(--scrim-d), .14);
}
:root:root .quick .chip span::before { content: "+"; color: var(--kp-800); margin-right: 3px; font-weight: 700; font-size: 1em; line-height: 0; }
:root:root .quick .chip span:hover { border-color: var(--ls-900); }
:root:root .quick .chip input:checked + span { background: var(--ls-900); border-color: var(--ls-900); color: var(--kl-50); box-shadow: none; }
:root:root .quick .chip input:checked + span::before { content: "✓"; color: var(--kp-500); font-size: 1em; margin-right: 7px; }
:root:root .quick .chip input:checked + span { padding: 0 12px; }


/* ============ KNOPPEN — picked 1 of ronde/knopkaart.py (as the picture: rounded cards side by side, the icon in a round badge; copper "Bel ons", light "WhatsApp", the number under each). Written in by ronde-varianten.py --vast; %V% -> :root:root. ============ */
/* 1 · as the picture: two rounded cards side by side, the icon in a round badge, the word bold over the number; call
   copper with a slate badge, WhatsApp the form's light with a green badge */
:root:root .pair--fold .btn {
  justify-content: flex-start; text-align: left; gap: 14px;
  min-height: 66px; padding: 10px 24px 10px 11px; border-radius: 12px;
}
:root:root .pair--fold .btn .ico { width: 44px; height: 44px; padding: 11.5px; border-radius: 50%; flex: none; }
:root:root .pair--fold .btn--call .ico { background: var(--ls-900); color: var(--kp-500); }
:root:root .pair--fold .btn--wa-inv { background: var(--kl-100); border-color: var(--kl-100); color: var(--ls-900); }
:root:root .pair--fold .btn--wa-inv:hover { background: #fff; border-color: #fff; }
:root:root .pair--fold .btn--wa-inv .ico { background: var(--wa); color: #fff; }
:root:root .pair--fold .btn__one { display: none; }
:root:root .pair--fold .btn__two { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
:root:root .pair--fold .btn__two b { font: 700 19px/1 var(--f-sans); }
:root:root .pair--fold .btn__two small { font: 600 14px/1 var(--f-sans); opacity: .78; letter-spacing: .02em; }

:root:root .pair--fold { gap: 12px; }
@media (min-width: 360px) {
  :root:root .pair--fold { flex-wrap: nowrap; }
  :root:root .pair--fold .btn { width: auto; flex: 1 1 0; min-width: 0; }
}
@media (min-width: 640px) and (max-width: 999px) {
  :root:root .pair--fold .btn { flex: 0 1 auto; }
}
@media (max-width: 639px) {
  :root:root .pair--fold .btn { gap: 10px; min-height: 60px; padding: 8px 12px 8px 8px; }
  :root:root .pair--fold .btn .ico { width: 38px; height: 38px; padding: 9.5px; }
  :root:root .pair--fold .btn__two b { font-size: 17px; }
  :root:root .pair--fold .btn__two small { font-size: 13px; }
}


/* ============ BY HAND, 2026-10-14 (4). Sem, picking Knoppen 1: "maar dan wel een fractie kleiner". The cards about
   10 % smaller in every part: 62 px high instead of 68 (badge 40 instead of 44, the word 17 px instead of 19, the
   number 13 instead of 14); on a phone 54 instead of 60. From 1000 px the pair no longer fills its column: it is as wide
   as "Vastgoed Onderhoud" above it (9 x --H), so its right end lines up with the name's and each card is about 10 %
   narrower. The rest of Knoppen 1 as it was locked in above.
   a's style from before: style.before-kleiner.css ============ */
@media (min-width: 1000px) {
  :root:root .pair--fold { max-width: calc(var(--H) * 9 + var(--dp)); }   /* its padding (--dp, Indeling 1) inside it */
}
:root:root .pair--fold .btn { gap: 12px; padding: 9px 22px 9px 10px; border-radius: 11px; min-height: 60px; }
:root:root .pair--fold .btn .ico { width: 40px; height: 40px; padding: 10.5px; }
:root:root .pair--fold .btn__two { gap: 4px; }
:root:root .pair--fold .btn__two b { font-size: 17px; }
:root:root .pair--fold .btn__two small { font-size: 13px; }
@media (max-width: 639px) {
  :root:root .pair--fold .btn { gap: 9px; min-height: 54px; padding: 7px 11px 7px 7px; border-radius: 10px; }
  :root:root .pair--fold .btn .ico { width: 36px; height: 36px; padding: 9px; }
  :root:root .pair--fold .btn__two b { font-size: 15.5px; }
  :root:root .pair--fold .btn__two small { font-size: 12px; }
}


/* ============ PLEK — picked 3 of ronde/formplek.py (out of the page: the strip gone, the form flat on the fold's foot, the light page below reaching up into the photo). Written in by ronde-varianten.py --vast; %V% -> :root:root. ============ */
/* 3 · out of the page: the fold's foot is the card's foot, square at the bottom, the card the page's light */
:root:root .trust { display: none; }

:root:root .fold__inner { padding-bottom: 0; }
:root:root .fold .quick.quick {
  background: var(--kl-100); border-radius: 10px 10px 0 0; border-bottom: 0;
  padding-bottom: 26px; box-shadow: 0 -16px 44px rgba(var(--scrim-d), .38);
}


/* ============ RUIMTE — picked 2 of ronde/formruimte.py (two halves: the question and the pills on the left, the box with a wide send button under it on the right). Written in by ronde-varianten.py --vast; %V% -> :root:root. ============ */
/* 2 · two halves: left the question and the pills, right the box with a wide send button under it; on a phone the
   pills as equal tiles */
:root:root .quick { padding: 24px 20px; gap: 18px; }
:root:root .quick__kop { font-size: 25px; }
:root:root .quick__hint { font-size: 15.5px; }
:root:root .quick__chips { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
:root:root .quick .chip span {
  width: 100%; height: 100%; min-height: 54px; justify-content: flex-start; text-align: left; border-radius: 12px;
  font-size: 16px; line-height: 1.15; padding: 8px 12px 8px 10px;
}
:root:root .quick .chip input:checked + span { padding: 8px 12px 8px 10px; }
:root:root .quick__box textarea { min-height: 120px; font-size: 16.5px; padding: 12px 14px; }
:root:root .quick__send { min-height: 58px; font-size: 18px; }
@media (min-width: 1000px) {
  :root:root .quick {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto 1fr auto;
    grid-template-areas: "head box" "chips box" "chips send";
    align-items: stretch; gap: 16px 40px; padding: 28px 30px 28px 34px;
  }
  :root:root .quick__head { grid-area: head; display: block; }
  :root:root .quick__hint { margin-top: 6px !important; }
  :root:root .quick__kop { font-size: 28px; }
  :root:root .quick__chips { grid-area: chips; display: flex; align-content: flex-start; }
  :root:root .quick .chip span { width: auto; height: auto; min-height: 48px; border-radius: 999px; padding: 0 13px 0 10px; }
  :root:root .quick .chip input:checked + span { padding: 0 14px; }
  :root:root .quick__box { grid-area: box; display: flex; flex-direction: column; }
  :root:root .quick__box textarea { flex: 1; min-height: 110px; }
  :root:root .quick__send { grid-area: send; width: 100%; padding: 0 26px; }
}

@media (min-width: 1000px) {
  :root:root .fold__inner { --room: calc(4px + var(--rp, 0px) + var(--rm, 0px) + var(--ro, 0px)); }
}
@media (min-width: 1000px) and (max-width: 1199px) {
  :root:root .fold__inner { --room: calc(14px + var(--rp, 0px) + var(--rm, 0px) + var(--ro, 0px)); }
}

@media (min-width: 1000px) {
  :root:root .fold__inner { --rm: 40px; }
}


/* ============ OPVALLEN — picked 1 of ronde/formopvallen.py (copper button: "Verstuur" copper and bold with an arrow, the copper edge on top thicker). Written in by ronde-varianten.py --vast; %V% -> :root:root. ============ */
/* 1 · copper button: the send button in the call button's copper, bold, an arrow after the word; the top edge thicker */
:root:root .quick { border-top-width: 6px; }
:root:root .quick__send { background: var(--kp-500); color: var(--ls-900); font-weight: 700; font-size: 18px; }
:root:root .quick__send:hover { background: var(--kp-600); }
:root:root .quick__send::after { content: "→"; font: 600 1.15em/1 var(--f-sans); }

@media (min-width: 1000px) {
  :root:root .fold__inner { --room: calc(4px + var(--rp, 0px) + var(--rm, 0px) + var(--ro, 0px)); }
}
@media (min-width: 1000px) and (max-width: 1199px) {
  :root:root .fold__inner { --room: calc(14px + var(--rp, 0px) + var(--rm, 0px) + var(--ro, 0px)); }
}


/* ============ LAGER — picked 1 of ronde/formlager.py (a third lower: the card's lower third under the photo's end, on the light page). Written in by ronde-varianten.py --vast; %V% -> :root:root. ============ */
/* 1 · a third lower: the photo ends two thirds down the card */
:root:root .fold .quick { position: relative; }
:root:root .fold .quick.quick { box-shadow: none; }
:root:root .fold .quick::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; border-radius: inherit;
  box-shadow: 0 -16px 44px rgba(var(--scrim-d), .38);
}
:root:root .fold .quick::after {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  top: 67%; bottom: -400px; left: -100vw; right: -100vw; background: var(--kl-100);
}
@media (min-width: 1000px) {
  :root:root .fold { min-height: calc(max(100svh, 800px) + 80px); }
  :root:root .fold__photo { bottom: 80px; }
  :root:root .fold .quick { margin-top: calc(30px + 80px); }
}


/* ============ VOET — picked 3 of ronde/formvoet.py (line under the form: a thin line along the card's foot, as wide as the card). Written in by ronde-varianten.py --vast; %V% -> :root:root. ============ */
/* 3 · line under the form: a thin line along the card's foot, as wide as the card (Sem's pick: first edge to edge, then
   "alleen over de breedte van het formulier"); an inset shadow, so no size changes */
:root:root .fold .quick.quick { box-shadow: inset 0 -2px 0 var(--kl-300); }


/* ============ RAND — picked 3 of ronde/formrand.py (round foot: the same, with a 24 px corner). Written in by ronde-varianten.py --vast; %V% -> :root:root. ============ */
/* 3 · round foot: 24 px */
:root:root .fold .quick.quick {
  box-shadow: none; border-radius: 10px 10px 24px 24px;
  background: linear-gradient(var(--kl-100) 67%, transparent 0) no-repeat;
}
:root:root .fold .quick::after {
  left: 0; right: 0; bottom: 0; border: 2px solid var(--kl-300); border-top: 0; border-radius: 0 0 24px 24px;
  box-shadow: 0 0 0 100vmax var(--kl-100); clip-path: inset(0 -100vmax -100vmax);
}


/* ============ ONDER ELKAAR — picked 1 of ronde/stapel.py (under each other: below 1000 px the call card on top, WhatsApp under it (phone full width, tablet as wide as the wider)). Written in by ronde-varianten.py --vast; %V% -> :root:root. ============ */
/* 1 · under each other: one column below 1000 px */
@media (max-width: 999px) {
  :root:root .pair--fold { display: grid; grid-template-columns: minmax(0, 1fr); }
  :root:root .pair--fold .btn { width: auto; }
}
@media (min-width: 640px) and (max-width: 999px) {
  :root:root .pair--fold { grid-template-columns: max-content; }
}


/* ============ VOLGORDE — picked 2 of ronde/volgorde.py (swapped: the words, the rating, the owner, the buttons). Written in by ronde-varianten.py --vast; %V% -> :root:root. ============ */
/* 2 · swapped: the words, the rating, the owner, the buttons */
@media (max-width: 999px) {
  :root:root .fold__diptych { row-gap: 0; }
  :root:root .fold__right, :root:root .fold__meta { display: contents; }
  :root:root .fold__left .lockup { margin-bottom: 26px; }
  :root:root .fold__kop { order: 2; }
  :root:root .fold__sub { order: 3; }
  :root:root .rating--fold { order: 4; }
  :root:root .pair--fold { order: 6; margin-top: 18px; }
  :root:root .owner-chip { order: 5; margin-top: 30px; }
}


/* ============ DIENSTEN — picked 1 of ronde/dienstlijst.py (under each other: below 1000 px one service a row, the form's full width). Written in by ronde-varianten.py --vast; %V% -> :root:root. ============ */
/* 1 · under each other: one column below 1000 px */
@media (max-width: 999px) {
  :root:root .quick__chips { grid-template-columns: minmax(0, 1fr); }
}


/* ============ QUOTE — picked 1 of ronde/aanhaal.py (gone: below 1000 px no quote mark, the words move up into its place). Written in by ronde-varianten.py --vast; %V% -> :root:root. ============ */
/* 1 · gone: no quote mark below 1000 px */
@media (max-width: 999px) {
  :root:root .rv__q::before { content: none; }
}


/* ============ SCHOORSTEEN — picked 1 of ronde/schoorfoto.py (a third lower: below 900 px the frame 6:5, the photo cut (houses mostly out), notes and label clear). Written in by ronde-varianten.py --vast; %V% -> :root:root. ============ */
/* 1 · a third lower: 6:5 below 900 px, cut lower in the photo */
@media (max-width: 899px) {
  :root:root .schoorsteen__photo.pframe { aspect-ratio: 6 / 5; }
  :root:root .schoorsteen__photo .pframe__in { --fy: .78 !important; }
}
@media (max-width: 419px) {
  :root:root .schoorsteen__photo .pframe__in { --fy: .9 !important; }   /* the label is bigger against a small photo */
}


/* ============ KNOPPEN VOL — picked 1 of ronde/knoppenvol.py (as the fold: below 1000 px every pair stacked, phone full width, tablet as wide as the wider). Written in by ronde-varianten.py --vast; %V% -> :root:root. ============ */
/* 1 · as the fold: every pair of buttons one under the other below 1000 px (the fold's has its own rules) */
@media (max-width: 999px) {
  :root:root .pair:not(.pair--fold), :root:root .actions:has(> .btn + .btn) { display: grid; grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 639px) {
  :root:root .pair:not(.pair--fold), :root:root .actions:has(> .btn + .btn) { width: 100%; }   /* also where the group is a flex item */
}
@media (min-width: 640px) and (max-width: 999px) {
  :root:root .pair:not(.pair--fold), :root:root .actions:has(> .btn + .btn) { grid-template-columns: max-content; }
}


/* ============ BALKEN — picked 1 of ronde/balken.py (after the fold: up to 767 px the navbar (fixed, top) and the call bar (foot) only once the fold is out of view). Written in by ronde-varianten.py --vast; %V% -> :root:root. ============ */
/* 1 · after the fold: up to 767 px the navbar and the call/WhatsApp bar only once the fold is out of view */
@media (max-width: 767px) {
  :root:root.na-fold .site-head {
    position: fixed; top: 0; left: 0; right: 0;
    box-shadow: 0 1px 0 var(--ls-700), 0 10px 24px -14px rgba(var(--scrim-d), .7);
    transform: translateY(calc(-100% - 24px)); transition: transform .2s;   /* past its shadow */
  }
  :root:root.na-fold .sticky { transform: translateY(calc(100% + 24px)); transition: transform .2s; }
  :root:root.na-fold .site-head.is-on, :root:root.na-fold .sticky.is-on { transform: none; }
  :root:root.na-fold .site-head:has(:focus-visible) { transform: none; }   /* also when tabbed into (a rule of its own: a browser without :has drops only this) */
  :root:root.na-fold [id] { scroll-margin-top: 84px; }   /* an anchor clear of the navbar */
  :root:root.na-fold .site-head.is-open .nav { max-height: calc(100svh - 64px); overflow-y: auto; }   /* the menu within the screen */
}


/* ============ ZIN WEG — picked 1 of ronde/zinweg.py (gone: up to 767 px no sentence under the headline, the headline 24 px above what follows). Written in by ronde-varianten.py --vast; %V% -> :root:root. ============ */
/* 1 · gone: up to 767 px the fold's sentence not shown */
@media (max-width: 767px) {
  :root:root .fold__sub { display: none; }
  :root:root .fold__kop { margin-bottom: 24px; }   /* the gap the sentence had under it */
}


/* ============ RATING BOVEN TITEL — picked 1 of ronde/ratingkop.py (na: up to 767 px the rating under the logo, above the headline). Written in by ronde-varianten.py --vast; %V% -> :root:root. ============ */
/* 1 · na: the rating above the headline, up to 767 px */
@media (max-width: 767px) {
  :root:root .rating--fold { order: 1; margin-bottom: 24px; }   /* after the logo (order 1, earlier in the page), before the headline (2) */
  :root:root .owner-chip { margin-top: 6px; }   /* the headline's 24 + 6: the 30 he had under the rating */
}


/* ============ BY HAND, 2026-10-23. Sem (via FC08), on the phone: "op mobiel wil ik dat de "floating cards met
   aanwijzers" in de banner op display: none gaan; verder mag de content in de banner wat hoger, en moet de banner tekst
   boven de rating." Up to 767 px (the phone, the width Rating boven titel held), written straight in:
   - the notes on the fold's photo (schoorsteen, hoekkeper) and their pencil lines gone;
   - the fold's column 60 px higher, the photo's darkening up with it, so the logo stays on the dark;
   - the headline back above the rating (Rating boven titel undone): the logo, the headline, the rating, Ramazan, the
     buttons, as a's Volgorde 2 had them.
   From 768 px nothing changes. a's style from before: style.before-mobielbanner.css ============ */
@media (max-width: 767px) {
  :root:root .fold__photo .note, :root:root .fold__photo .pencil { display: none; }
  :root:root .fold__inner { padding-top: clamp(154px, calc(58vw - 60px), 270px); }   /* a's clamp(214px, 58vw, 330px), less 60 */
  :root:root .fold__photo::after {
    background: linear-gradient(180deg,
      rgba(var(--scrim), .05) 0%,
      rgba(var(--scrim), .08) calc(34% - 60px),
      rgba(var(--scrim), .62) calc(58% - 60px),
      rgba(var(--scrim), .94) 84%,
      var(--ls-900) 100%);
  }
  :root:root .rating--fold { order: 4; margin-bottom: 0; }   /* under the headline (its 24 px under it) */
  :root:root .owner-chip { margin-top: 30px; }   /* the 30 he had under the rating */
}


/* =====================================================================================================================
   BASIS2 · 2026-10-24 — the rest of the page, everything below the feitenblok. Built on the whole-page prompt
   (bak7-fv11-a-basis2-prompt.md). Every colour from palette.json; the fonts are the fold's.
   The rules the removed sections had are gone (style.before-basis2.css in _scratch keeps them).
   ===================================================================================================================== */

.dark { background: var(--ls-900); color: var(--kl-50); }        /* also bedankt/ */
.lockup--foot { --H: 30px; }
.lockup--foot .lockup__ra { color: var(--kl-50); }

/* on a phone a telling section keeps its heading, first sentence, photo and buttons: the rest is hidden, not deleted */
@media (max-width: 767px) { .niet-tel { display: none !important; } }

.sec__h { font: 500 clamp(32px, 3.6vw, 52px)/1.06 var(--f-serif); letter-spacing: -.012em; text-wrap: balance; }
.actions { margin-top: 28px; }

/* ---------- the stamp: the mark and the name, laid over a photo ---------- */
.stamp {
  position: absolute; top: 12px; right: 12px; z-index: 3; pointer-events: none;
  display: flex; align-items: center; gap: 7px; color: var(--kl-50); opacity: .92;
  filter: drop-shadow(0 1px 2px rgba(var(--scrim-d), .8)) drop-shadow(0 0 8px rgba(var(--scrim-d), .35));
}
.stamp img { width: 36px; height: auto; max-width: none; }
.stamp__naam { display: grid; line-height: 1; }
.stamp__ra { font: 500 18px/1 var(--f-serif); letter-spacing: .01em; }
.stamp__vo { font: 500 12px/1.15 var(--f-sans); margin-top: 2px; }

/* ---------- the label: a note tag in the fold's hand, pinned to the photo ---------- */
.tag--groot {
  position: absolute; left: 12px; bottom: 12px; z-index: 3; margin: 0;
  display: grid; justify-items: start; gap: 3px; max-width: calc(100% - 24px);
  background: var(--kl-50); color: var(--ls-900);
  padding: 6px 12px 8px 10px; border-radius: 1px;
  transform: rotate(-1.4deg); transform-origin: 0 100%;
  box-shadow: 0 3px 12px rgba(var(--scrim-d), .38);
}
.tag__waar { display: flex; align-items: flex-start; gap: 6px; font: 700 clamp(20px, 1.9vw, 26px)/1.05 var(--f-hand); }
.tag__waar .ico { width: .82em; height: .82em; margin-top: .08em; color: var(--kp-800); }
.tag__link { font: 600 13px/1.3 var(--f-sans); color: var(--kp-800); text-underline-offset: 3px; text-decoration-color: var(--kl-300); }
.tag__link:hover { text-decoration-color: var(--kp-800); }

/* ---------- a section's principal photo ---------- */
.shot { position: relative; margin: 0; overflow: hidden; background: var(--ls-800); box-shadow: 8px 8px 0 var(--kl-200); }
.dark .shot { box-shadow: 8px 8px 0 var(--ls-800); }
.shot__open { display: block; width: 100%; height: 100%; margin: 0; padding: 0; border: 0; background: none; cursor: zoom-in; }
.shot__open img, .shot > img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.shot__open:hover img { transform: scale(1.025); }
.shot--breed { aspect-ratio: 3 / 2; }
.shot--vier { aspect-ratio: 4 / 3; }
.shot--kapel { aspect-ratio: 16 / 10; }
.shot--hoog { aspect-ratio: 4 / 5; }
@media (max-width: 767px) {
  .shot { box-shadow: none; }
  .shot--hoog { aspect-ratio: 1 / 1; }
  .shot--kapel, .shot--breed { aspect-ratio: 4 / 3; }
}

/* ---------- the row of thumbnails under it, and the line that counts the series ---------- */
.thumbs { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; margin-top: 12px; }
.shot + .thumbs { margin-top: 16px; }
.thumb { position: relative; aspect-ratio: 4 / 3; padding: 0; border: 0; overflow: hidden; cursor: zoom-in; background: var(--kl-200); }
.dark .thumb { background: var(--ls-800); }
.thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s; }
.thumb:hover img { transform: scale(1.06); }
.thumb--meer span {
  position: absolute; inset: 0; display: grid; place-items: center;
  background: rgba(var(--scrim), .64); color: var(--kl-50); font: 600 clamp(16px, 1.5vw, 20px)/1 var(--f-sans);
}
.telling {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 10px; padding: 6px 0; border: 0; background: none;
  font: 600 14.5px/1.3 var(--f-sans); color: var(--kp-800); cursor: pointer;
  text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--kl-300);
}
.telling .ico { width: 18px; height: 18px; }
.telling:hover { text-decoration-color: currentColor; }
.dark .telling { color: var(--kp-200); text-decoration-color: var(--ls-700); }

/* =========================================================
   EVEN VOORSTELLEN
   ========================================================= */
.intro { background: var(--kl-100); padding: clamp(44px, 6vw, 96px) 0 clamp(36px, 4.4vw, 64px); }
.intro__grid { display: grid; gap: 20px; }
.intro__kicker { margin: 0; }
.intro__portret { position: relative; margin: 0; aspect-ratio: 4 / 5; overflow: hidden; background: var(--ls-800); }
.intro__portret img { width: 100%; height: 100%; object-fit: cover; object-position: 30% 20%; }
.intro__portret::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(var(--scrim-d), 0) 46%, rgba(var(--scrim-d), .5) 66%, rgba(var(--scrim-d), .9) 100%);
}
.intro__zelf {
  position: absolute; z-index: 1; left: clamp(18px, 3vw, 34px); right: 18px; bottom: clamp(18px, 2.6vw, 30px);
  display: grid; justify-items: start; color: var(--kl-50);
}
.intro__l1 { font: 600 clamp(17px, 1.5vw, 20px)/1.2 var(--f-sans); }
.intro__naam { font: 700 clamp(68px, 7.4vw, 108px)/.8 var(--f-hand); margin: 6px 0 12px -.03em; }
.intro__l3 { font: 500 clamp(13.5px, 1.1vw, 15.5px)/1.3 var(--f-sans); color: var(--gs-300); letter-spacing: .015em; }

.feiten { list-style: none; border-top: 1px solid var(--kl-300); }
.feit { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 16px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--kl-300); }
.feit__foto { display: block; padding: 0; border: 0; aspect-ratio: 4 / 3; overflow: hidden; cursor: zoom-in; background: var(--kl-200); }
.feit__foto img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s; }
.feit__foto:hover img { transform: scale(1.06); }
.feit__h { font: italic 500 clamp(22px, 2.3vw, 33px)/1.1 var(--f-serif); color: var(--ls-900); }
.feit__r { margin: 6px 0 0; font-size: 16.5px; line-height: 1.45; color: var(--gs-600); max-width: 30em; }
@media (min-width: 700px) {
  .intro__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-rows: auto 1fr; column-gap: clamp(32px, 5vw, 88px); row-gap: 0; }
  .intro__portret { grid-column: 1; grid-row: 1 / 3; max-height: 660px; }
  .intro__kicker { grid-column: 2; grid-row: 1; margin-bottom: 18px; }
  .feiten { grid-column: 2; grid-row: 2; align-self: center; }
  .feit { grid-template-columns: clamp(120px, 13vw, 176px) minmax(0, 1fr); gap: clamp(18px, 2.4vw, 34px); padding: clamp(14px, 1.8vw, 24px) 0; }
}
@media (min-width: 700px) and (max-width: 999px) { .feit__r { font-size: 15px; } }

/* =========================================================
   THE SERVICES CARD — on the seam between Even voorstellen and Dakrenovatie
   ========================================================= */
.dkaart { background: linear-gradient(180deg, var(--kl-100) 50%, var(--kl-50) 50%); }
.dkaart__in {
  background: var(--ls-900); color: var(--kl-50);
  border-top: 6px solid var(--kp-500); border-radius: 10px;
  padding: 16px 20px 8px; box-shadow: 0 22px 44px rgba(var(--scrim-d), .2);
}
.dkaart__label {
  display: flex; align-items: center; gap: 12px; margin: 0 0 4px;
  font: 700 12.5px/1.2 var(--f-caps); letter-spacing: .26em; text-transform: uppercase; color: var(--kp-200);
}
.dkaart__label::before { content: ""; width: 26px; height: 2px; background: var(--kp-500); flex: none; }
.dkaart__lijst { list-style: none; }
.dkaart__lijst a {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px;
  color: var(--kl-50); text-decoration: none; font: 600 17px/1.2 var(--f-sans);
  border-bottom: 1px solid var(--ls-700); transition: color .15s;
}
.dkaart__lijst li:last-child a { border-bottom: 0; }
.dkaart__lijst .ico { width: 18px; height: 18px; color: var(--kp-500); transition: transform .2s; }
.dkaart__lijst a:hover { color: var(--kp-200); }
.dkaart__lijst a:hover .ico { transform: translateY(3px); }
@media (min-width: 640px) and (max-width: 1199px) {
  .dkaart__in { padding: 18px 24px 12px; }
  .dkaart__lijst { display: grid; grid-template-columns: 1fr 1fr; column-gap: 32px; }
  .dkaart__lijst li:nth-last-child(2) a { border-bottom: 0; }
}
@media (min-width: 1200px) {
  .dkaart__in { display: flex; align-items: center; gap: 30px; padding: 16px 30px; }
  .dkaart__label { margin: 0; flex: none; }
  .dkaart__lijst { flex: 1; display: flex; justify-content: space-between; }
  .dkaart__lijst li { flex: 1 1 auto; }
  .dkaart__lijst a {
    border-bottom: 0; border-left: 1px solid var(--ls-700); justify-content: center; gap: 10px;
    min-height: 54px; padding: 0 clamp(12px, 1.5vw, 24px); font-size: clamp(16px, 1.25vw, 18px); white-space: nowrap;
  }
}

/* =========================================================
   SERVICES — the ladder of type, the same steps in all four
   ========================================================= */
.svc { padding: var(--sec) 0; }
.lad__h { font: 500 clamp(40px, 5vw, 72px)/1.02 var(--f-serif); letter-spacing: -.015em; text-wrap: balance; }
.lad__h a {
  color: inherit; text-decoration: none;
  background: linear-gradient(var(--kp-500), var(--kp-500)) 0 100% / 0 2px no-repeat; transition: background-size .25s;
}
.lad__h a:hover { background-size: 100% 2px; }
.lad__h a::after { content: "\00a0→"; font: 500 .4em/1 var(--f-sans); vertical-align: .62em; color: var(--kp-500); }
.lad__h2 { font: italic 500 clamp(23px, 2.4vw, 33px)/1.22 var(--f-serif); color: var(--kp-800); margin-top: 14px; max-width: 17em; text-wrap: balance; }
.dark .lad__h2 { color: var(--kp-200); }
.lad__lijst { list-style: none; margin-top: 26px; border-top: 1px solid var(--kl-300); }
.lad__lijst li { position: relative; padding: 12px 0 12px 30px; border-bottom: 1px solid var(--kl-300); font: 500 clamp(18px, 1.5vw, 20px)/1.35 var(--f-sans); }
.lad__lijst li::before { content: ""; position: absolute; left: 0; top: calc(12px + .66em); width: 16px; height: 2px; background: var(--kp-500); }
.dark .lad__lijst, .dark .lad__lijst li { border-color: var(--ls-700); }
.lad__act { margin: 0; }

.lg { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "lad" "beeld" "paar" "act"; gap: 30px; }
.lg > .lad { grid-area: lad; }
.lg > .beeld { grid-area: beeld; }
.lg > .paar { grid-area: paar; }
.lg > .lad__act { grid-area: act; }
@media (max-width: 767px) { .lg { gap: 20px; } }
@media (min-width: 1000px) {
  .lg { column-gap: clamp(44px, 5.4vw, 96px); row-gap: 34px; }
  .lg--links { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); grid-template-areas: "beeld lad" "beeld act"; grid-template-rows: auto auto; }
  .lg--rechts { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-areas: "lad beeld" "act beeld"; grid-template-rows: auto auto; }
  .lg > .beeld { align-self: start; }
  .lg--links > .lad, .lg--rechts > .lad { align-self: end; }
  .lg--links > .lad__act, .lg--rechts > .lad__act { align-self: start; }
  .lg--kapel { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); grid-template-areas: "lad act" "beeld paar"; row-gap: 44px; }
  .lg--kapel > .lad__act { align-self: end; justify-self: end; }
  .lg--kapel > .paar { align-self: start; }
  .lg--voeg { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-areas: "beeld lad" "beeld paar" "beeld act"; grid-template-rows: auto auto 1fr; }
  .lg--voeg > .beeld { align-self: start; }
}

/* the grounds */
.svc--onderhoud, .svc--voegwerk { background: var(--kl-50); }
.svc--dakkapel { background: var(--kl-100); }
.svc--dakkapel .shot { box-shadow: 8px 8px 0 var(--kl-300); }

/* ---------- DAKRENOVATIE: one framed card ---------- */
.svc--hoofd { background: var(--kl-50); padding-top: clamp(44px, 5.6vw, 84px); }
.hk { background: var(--kl-50); border: 1px solid var(--ls-900); box-shadow: 10px 10px 0 var(--kl-200); }
.hk .shot { box-shadow: none; }
.hk__foto { height: clamp(230px, 34vw, 480px); border-bottom: 1px solid var(--ls-900); }
.hk__strook { padding: 12px clamp(14px, 2.4vw, 30px); background: var(--kl-100); border-bottom: 1px solid var(--kl-300); }
.hk__strook .thumbs { margin: 0; }
.hk__strook .telling { margin: 6px 0 0; }
.hk__body { display: grid; gap: 24px; padding: clamp(22px, 4vw, 54px) clamp(18px, 4vw, 54px); }
.hk__sub { margin: 14px 0 0; }
.hk__lijst { list-style: none; border-top: 2px solid var(--ls-900); }
.hk__lijst li { position: relative; padding: 15px 0 15px 34px; border-bottom: 1px solid var(--kl-300); font: 600 clamp(19px, 1.65vw, 23px)/1.3 var(--f-sans); }
.hk__lijst li::before { content: ""; position: absolute; left: 0; top: calc(15px + .64em); width: 18px; height: 2px; background: var(--kp-500); }
.hk__voet {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 28px;
  padding: 18px clamp(18px, 4vw, 54px); border-top: 1px solid var(--ls-900); background: var(--kl-100);
}
.voorgang { display: flex; align-items: center; gap: 14px; color: var(--ls-900); text-decoration: none; }
.voorgang__faces { display: flex; padding-left: 10px; flex: none; }
.voorgang__faces span {
  width: 42px; height: 42px; margin-left: -11px; border-radius: 50%; border: 2px solid var(--kl-100);
  display: grid; place-items: center; font: 500 17px/1 var(--f-serif); color: var(--kl-50); background: var(--ls-900);
}
.voorgang__faces span:nth-child(2) { background: var(--gs-600); }
.voorgang__faces span:nth-child(3) { background: var(--kp-800); }
.voorgang__faces span:nth-child(4) { background: var(--ls-700); }
.voorgang__faces span:nth-child(5) { background: var(--ls-800); }
.voorgang__tekst { display: grid; gap: 3px; }
.voorgang__regel { font: italic 500 21px/1.2 var(--f-serif); }
.voorgang__score { font-size: 14.5px; line-height: 1.4; color: var(--gs-600); }
.voorgang__score .stars svg { width: 16px; height: 16px; }
.voorgang__score strong, .voorgang__platform { color: var(--ls-900); font-weight: 700; }
.voorgang:hover .voorgang__platform { text-decoration: underline; text-decoration-color: var(--kp-500); text-underline-offset: 3px; }
@media (min-width: 900px) {
  .hk__strook { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
  .hk__strook .thumbs { width: min(560px, 62%); }
  .hk__strook .telling { margin: 0; }
  .hk__body { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(32px, 4vw, 64px); align-items: start; }
}
@media (max-width: 767px) {
  .hk { box-shadow: 6px 6px 0 var(--kl-200); }
  .voorgang { gap: 12px; }
  .voorgang__faces span { width: 34px; height: 34px; margin-left: -10px; font-size: 14px; }
  .voorgang__regel { font-size: 18.5px; }
  .voorgang__score { font-size: 13.5px; }
  .hk__body { padding-bottom: 6px; }
  .hk__voet { background: var(--kl-50); border-top: 0; padding-top: 14px; padding-bottom: 22px; }
  .hk__voet .actions { width: 100%; }
}

/* ---------- the before/after pairs ---------- */
.paar { margin: 0; }
.paar__halves { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.paar__half { position: relative; display: block; aspect-ratio: 4 / 5; padding: 0; border: 0; overflow: hidden; cursor: zoom-in; background: var(--kl-200); }
.paar__half img { width: 100%; height: 100%; object-fit: cover; }
.paar--kapel .paar__half img { object-position: 52% 26%; }
.paar--gevel .paar__half { aspect-ratio: 1 / 1; }
.paar--gevel .paar__half:first-child img { object-position: 64% 50%; }
.paar--gevel .paar__half:last-child img { object-position: 36% 50%; }
.paar__tag {
  position: absolute; left: 10px; top: 10px; z-index: 1;
  background: var(--kl-50); color: var(--ls-900); font: 700 25px/1 var(--f-hand); padding: 3px 12px 6px;
  transform: rotate(-3deg); box-shadow: 0 3px 10px rgba(var(--scrim-d), .3);
}
.paar__tag--na { background: var(--kp-500); transform: rotate(2deg); }
.paar__label { margin-top: 10px; }
.lg--voeg > .paar { max-width: 620px; }

/* =========================================================
   THE ONE-BREATH BANDS
   ========================================================= */
.band__in { display: grid; gap: 16px; padding: clamp(28px, 3.4vw, 42px) 0; align-items: center; }
.band__h { font: 500 clamp(25px, 2.5vw, 34px)/1.15 var(--f-serif); letter-spacing: -.005em; }
.band__r { margin: 6px 0 0; font-size: 17px; line-height: 1.5; color: var(--gs-600); }
.dark .band__r { color: var(--gs-300); }
.band__pair { margin: 0; }
@media (min-width: 900px) { .band__in { grid-template-columns: minmax(0, 1fr) auto; gap: 44px; } }

.band--foto, .band--zakelijk { background: var(--kl-100); border-top: 1px solid var(--kl-200); border-bottom: 1px solid var(--kl-200); }
.band--foto .band__h { font: 700 clamp(34px, 3.2vw, 42px)/1 var(--f-hand); color: var(--kp-800); }
.band--mening .band__h { font-style: italic; }
.band--mening { border-top: 1px solid var(--ls-800); }
.band--lint { background: var(--ls-950); }
.band__in--lint { padding: 24px 0 26px; gap: 10px; grid-template-columns: minmax(0, 1fr); }
.band__h--klein { font: 700 12.5px/1.2 var(--f-caps); letter-spacing: .26em; text-transform: uppercase; color: var(--kp-200); display: flex; align-items: center; gap: 12px; }
.band__h--klein::before { content: ""; width: 26px; height: 2px; background: var(--kp-500); flex: none; }
.lint { list-style: none; margin: 0; display: flex; flex-wrap: wrap; align-items: center; row-gap: 2px; font: italic 500 clamp(17px, 1.6vw, 22px)/1.45 var(--f-serif); color: var(--gs-300); }
.lint li { display: inline-flex; align-items: center; white-space: nowrap; }
.lint li:first-child { color: var(--kl-50); }
.lint li:not(:last-child)::after { content: ""; width: 5px; height: 5px; margin: 0 clamp(8px, .9vw, 12px); border-radius: 50%; background: var(--kp-500); }
.band--actie { position: relative; }
.band--actie::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--kp-500); }
.band--actie .band__in { padding: clamp(34px, 4.4vw, 56px) 0; }
.band__regel { margin: 0; font: italic 500 clamp(25px, 3vw, 40px)/1.15 var(--f-serif); text-wrap: balance; }

/* =========================================================
   PROJECTEN — the endless carousel
   ========================================================= */
.proj { padding: var(--sec) 0; overflow: hidden; }
.proj__kop { display: grid; gap: 14px 40px; margin-bottom: 34px; }
.proj__intro { margin: 0; color: var(--gs-300); font-size: 17.5px; max-width: 30em; }
.proj__knoppen { display: flex; gap: 10px; }
.rond {
  width: 50px; height: 50px; border-radius: 50%; border: 1px solid var(--ls-700); background: transparent;
  color: var(--kl-50); display: grid; place-items: center; cursor: pointer; transition: border-color .15s, color .15s;
}
.rond:hover { border-color: var(--kp-500); color: var(--kp-200); }
.rond .ico { width: 20px; height: 20px; }
.rond--r .ico { transform: scaleX(-1); }
@media (min-width: 900px) { .proj__kop { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) auto; align-items: end; } }
@media (max-width: 767px) { .proj__knoppen { display: none; } }

.carrousel { overflow: hidden; touch-action: pan-y; cursor: grab; user-select: none; -webkit-user-select: none; }
.carrousel.is-sleep { cursor: grabbing; }
.carrousel__baan { display: flex; gap: 18px; width: max-content; padding: 4px 0 14px; will-change: transform; }
.pk {
  position: relative; flex: none; width: clamp(262px, 27vw, 380px); margin: 0;
  background: var(--kl-50); color: var(--ls-900); overflow: hidden;
  border-top: 6px solid var(--kp-500); border-radius: 10px 10px 4px 4px;
}
.pk__foto { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--ls-800); }
.pk__foto > img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; -webkit-user-drag: none; }
.pk:hover .pk__foto > img { transform: scale(1.03); }
.pk__tag .tag__waar { font-size: clamp(19px, 1.6vw, 23px); }
.pk__body { display: grid; gap: 6px; padding: 16px 18px 20px; }
.pk__dienst { margin: 0; font: 700 11.5px/1.3 var(--f-caps); letter-spacing: .2em; text-transform: uppercase; color: var(--kp-800); }
.pk__wat { margin: 0; font: italic 500 19px/1.3 var(--f-serif); }
.pk__open { position: absolute; inset: 0; z-index: 4; padding: 0; border: 0; background: transparent; cursor: zoom-in; }
.pk__open:focus-visible { outline-offset: -5px; }
.proj__voet { margin-top: 34px; display: flex; }

/* =========================================================
   STAAT UW KLUS ER NIET BIJ?
   ========================================================= */
.klus { background: var(--kl-100); padding: clamp(56px, 7vw, 110px) 0; }
.klus__in {
  display: grid; gap: 18px; justify-items: start;
  background: var(--kl-50); border: 1px solid var(--ls-900); border-top: 6px solid var(--kp-500);
  box-shadow: 10px 10px 0 var(--kl-300); padding: clamp(26px, 5vw, 72px);
}
.klus__h { font: 500 clamp(40px, 6.4vw, 94px)/1.0 var(--f-serif); letter-spacing: -.02em; text-wrap: balance; }
.klus__h em { font-style: italic; color: var(--kp-800); }
.klus__r { margin: 0; font-size: clamp(18px, 1.6vw, 21px); color: var(--gs-600); max-width: 32em; }
.klus__pair { margin-top: 8px; }
@media (max-width: 767px) { .klus__in { box-shadow: 6px 6px 0 var(--kl-300); } }

/* =========================================================
   DE EIGENAAR
   ========================================================= */
.eig { background: var(--kl-50); padding: var(--sec) 0; }
.eig__grid { display: grid; gap: 44px; align-items: center; }
.eig__foto { position: relative; margin: 0 18px 18px 0; max-width: 470px; }
.eig__foto::before { content: ""; position: absolute; inset: 18px -18px -18px 18px; border: 1px solid var(--kp-500); }
.eig__crop { position: relative; display: block; aspect-ratio: 1 / 1; overflow: hidden; background: var(--ls-800); }
.eig__crop img { width: 100%; height: 100%; object-fit: cover; object-position: 0 4%; transform: scale(1.6); transform-origin: 0 0; }
.eig__p { margin: 18px 0 0; font-size: clamp(18px, 1.5vw, 20px); line-height: 1.6; max-width: 31em; }
.eig__naam { margin: 18px 0 0; font: 700 40px/1 var(--f-hand); color: var(--kp-800); }
.eig__act { margin-top: 28px; }
@media (min-width: 900px) { .eig__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(48px, 7vw, 110px); } }

/* =========================================================
   OVER ONS + WERKGEBIED — one ground, the mark in the seam
   ========================================================= */
.duo { padding: var(--sec) 0; }
.about__grid, .area__grid { display: grid; gap: 34px; }
.about__p, .area__p { margin: 18px 0 0; font-size: 18px; color: var(--gs-300); max-width: 34em; }
.werkwijze { margin: 26px 0 0; border-top: 1px solid var(--ls-700); }
.werkwijze div { display: grid; gap: 2px; padding: 14px 0; border-bottom: 1px solid var(--ls-700); }
.werkwijze dt { font: italic 500 21px/1.25 var(--f-serif); color: var(--kl-50); }
.werkwijze dd { margin: 0; font-size: 16px; color: var(--gs-300); }
@media (min-width: 640px) { .werkwijze div { grid-template-columns: minmax(0, 13.5em) minmax(0, 1fr); gap: 24px; align-items: baseline; } }
.about__foto { aspect-ratio: 3 / 2; }
.about__foto img { object-position: 50% 60%; }
@media (min-width: 900px) {
  .about__grid { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: clamp(40px, 6vw, 96px); align-items: center; }
}

.naad { display: flex; align-items: center; gap: 18px; margin-block: clamp(56px, 7vw, 104px); }
.naad::before, .naad::after { content: ""; flex: 1; height: 1px; background: var(--ls-700); }
.naad img { width: 54px; height: auto; }

.plaatsen { list-style: none; margin: 20px 0 0; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: repeat(5, auto); grid-auto-flow: column; column-gap: 28px; max-width: 26em; }
.plaatsen li { position: relative; padding: 8px 0 8px 20px; border-bottom: 1px solid var(--ls-800); color: var(--gs-300); font-size: 16px; }
.plaatsen li::before { content: ""; position: absolute; left: 0; top: 50%; width: 9px; height: 9px; border-radius: 50%; border: 2px solid var(--kp-500); transform: translateY(-50%); box-sizing: border-box; }
.plaatsen li:first-child { color: var(--kl-50); font-weight: 600; }
.plaatsen li:first-child::before { background: var(--kp-500); }
.area__kaart { display: grid; gap: 10px; }
.map { position: relative; z-index: 0; height: clamp(320px, 38vw, 520px); border: 1px solid var(--ls-700); background: var(--ls-800); }
.area__foto { margin: 0; }
.area__foto img { width: 100%; height: auto; aspect-ratio: 16 / 7; object-fit: cover; object-position: 50% 62%; }
@media (min-width: 900px) {
  .area__grid { grid-template-columns: minmax(0, 4.4fr) minmax(0, 7.6fr); gap: clamp(40px, 5vw, 80px); align-items: start; }
  .area__foto img { aspect-ratio: 32 / 9; }
}

/* leaflet, dressed in the palette */
.leaflet-container { font-family: var(--f-sans); background: var(--ls-800); }
.map .leaflet-tile-pane::after { content: ""; position: absolute; left: -6000px; top: -6000px; width: 12000px; height: 12000px; z-index: 10; pointer-events: none; background: var(--ls-700); mix-blend-mode: color; }
.leaflet-container a { color: var(--kp-200); }
.leaflet-bar { border: 1px solid var(--ls-700) !important; box-shadow: none !important; }
.leaflet-bar a, .leaflet-bar a:hover { background: var(--ls-900); color: var(--kl-50); border-bottom-color: var(--ls-700); }
.leaflet-bar a:hover { background: var(--ls-800); }
.leaflet-control-attribution.leaflet-control { background: rgba(var(--scrim-d), .72); color: var(--gs-500); font-size: 10.5px; }
.leaflet-tooltip.pl {
  background: var(--ls-900); color: var(--kl-50); border: 1px solid var(--ls-700); border-radius: 2px;
  box-shadow: none; font: 600 12.5px/1.2 var(--f-sans); padding: 3px 7px;
}
.leaflet-tooltip.pl::before { display: none; }
.leaflet-tooltip.pl--home { border-color: var(--kp-500); font-size: 14px; }
.home-pin { display: grid; place-items: center; }
.home-pin img { width: 40px; height: auto; filter: drop-shadow(0 2px 3px rgba(var(--scrim-d), .7)); }

/* =========================================================
   BEOORDELINGEN
   ========================================================= */
.reviews { background: var(--kl-100); padding: var(--sec) 0; }
.reviews__kop { display: grid; gap: 26px; margin-bottom: 40px; }
@media (min-width: 760px) { .reviews__kop { grid-template-columns: minmax(0, 1fr) auto; align-items: end; } }
.ko { display: grid; justify-items: start; gap: 5px; padding: 4px 0 4px 20px; border-left: 1px solid var(--kl-300); color: var(--ls-900); text-decoration: none; }
.ko__naam { display: flex; align-items: center; gap: 8px; font: 700 22px/1.1 var(--f-sans); }
.ko__naam .ico { width: 22px; height: 22px; }
.ko__score { display: flex; align-items: center; gap: 8px; font-size: 16px; }
.ko__score strong { font-weight: 700; }
.ko__aantal { font-size: 14px; color: var(--gs-600); }
.ko:hover .ko__naam { text-decoration: underline; text-decoration-color: var(--kp-500); text-underline-offset: 4px; }
.rgrid { display: grid; gap: 18px; }
@media (min-width: 760px) { .rgrid { grid-template-columns: 1fr 1fr; gap: 22px; } }
.rv {
  display: flex; flex-direction: column; gap: 14px; padding: 24px 24px 18px;
  background: var(--kl-50); color: var(--ls-900); text-decoration: none;
  border: 1px solid var(--kl-300); border-top: 6px solid var(--kp-500); border-radius: 10px 10px 4px 4px;
  box-shadow: 0 10px 26px rgba(var(--scrim), .08); transition: box-shadow .2s, transform .2s;
}
.rv:hover { box-shadow: 0 16px 32px rgba(var(--scrim), .14); transform: translateY(-2px); }
.rv__head { display: flex; align-items: center; gap: 12px; }
.rv__av {
  width: 46px; height: 46px; border-radius: 50%; flex: none; display: grid; place-items: center;
  background: var(--ls-900); color: var(--kl-50); font: 500 20px/1 var(--f-serif);
  box-shadow: 0 0 0 2px var(--kl-50), 0 0 0 3px var(--kp-500);
}
.rv__who { display: grid; line-height: 1.25; }
.rv__who b { font-weight: 600; font-size: 16.5px; }
.rv__who time { font-size: 14px; color: var(--gs-600); }
.rv__stars { margin-left: auto; line-height: 0; }
.rv__stars svg { width: 21px; height: 21px; }
.rv__titel { display: block; font: italic 500 21px/1.3 var(--f-serif); }
.rv__q { display: block; flex: 1; font: 400 17px/1.6 var(--f-sans); }
.rv__q::before { content: "\201C"; display: block; height: 20px; font: 500 60px/1 var(--f-serif); color: var(--kp-500); margin: -2px 0 4px; }
.rv__foot { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 6px 16px; padding-top: 12px; border-top: 1px solid var(--kl-200); font-size: 13.5px; }
.ko-merk { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; color: var(--ls-900); }
.ko-merk .ico { width: 16px; height: 16px; }
.rv__lees { color: var(--kp-800); font-weight: 600; }
.reviews__act { justify-content: center; margin-top: 40px; }
@media (max-width: 520px) {
  .rv { padding: 20px 18px 16px; }
  .rv__head { flex-wrap: wrap; row-gap: 10px; }
  .rv__stars { order: 3; flex-basis: 100%; margin-left: 58px; }
}

/* =========================================================
   VRAGEN
   ========================================================= */
.faq { background: var(--kl-50); padding: var(--sec) 0; }
.faq__grid { display: grid; gap: 30px; grid-template-areas: "side" "list" "act"; }
.faq__side { grid-area: side; }
.faq__list { grid-area: list; }
.faq__act { grid-area: act; margin: 0; }
.qa { border-top: 1px solid var(--kl-300); }
.qa:last-child { border-bottom: 1px solid var(--kl-300); }
.qa summary {
  list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 20px;
  padding: 19px 0; font: 600 18px/1.35 var(--f-sans);
}
.qa summary::-webkit-details-marker { display: none; }
.qa summary::after { content: "+"; flex: none; font: 400 30px/.7 var(--f-sans); color: var(--kp-800); transition: transform .2s; }
.qa[open] summary::after { transform: rotate(45deg); }
.qa summary:hover { color: var(--kp-800); }
.qa p { margin: -4px 0 22px; color: var(--gs-600); max-width: 40em; }
@media (min-width: 900px) {
  .faq__grid { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); grid-template-areas: "side list" "act list"; grid-template-rows: auto 1fr; column-gap: clamp(40px, 6vw, 96px); row-gap: 28px; align-items: start; }
}

/* =========================================================
   CONTACT
   ========================================================= */
.contact { padding: var(--sec) 0; }
.contact__grid { display: grid; gap: 40px; }
.contact__h { font-size: clamp(36px, 4.4vw, 62px); }
.contact__lead { margin: 16px 0 0; font-size: 18px; color: var(--gs-300); max-width: 30em; }
.pair--contact { margin: 26px 0 12px; }
.contact__terug .ico { width: 18px; height: 18px; }
.contact__paneel { background: var(--ls-800); border-top: 6px solid var(--kp-500); border-radius: 10px 10px 4px 4px; padding: clamp(22px, 3vw, 38px); }
.gegevens { margin: 0; display: grid; }
.gegevens div { display: grid; gap: 4px; padding: 15px 0; border-bottom: 1px solid var(--ls-700); }
.gegevens div:first-child { padding-top: 0; }
.gegevens div:last-child { padding-bottom: 0; border-bottom: 0; }
.gegevens dt { font: 700 11px/1.5 var(--f-caps); letter-spacing: .18em; text-transform: uppercase; color: var(--gs-500); }
.gegevens dd { margin: 0; font-size: 17.5px; line-height: 1.45; color: var(--kl-50); overflow-wrap: anywhere; }
.gegevens div:first-child dd { font: 500 clamp(28px, 2.8vw, 36px)/1.1 var(--f-serif); }
.gegevens a { color: var(--kl-50); text-decoration-color: var(--kp-500); text-underline-offset: 4px; }
@media (min-width: 960px) {
  .contact__grid { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(44px, 6vw, 96px); align-items: center; }
}

/* =========================================================
   FOOTER
   ========================================================= */
.foot { background: var(--ls-950); color: var(--gs-300); padding: 64px 0 0; font-size: 15.5px; }
.foot__grid { display: grid; gap: 36px; padding-bottom: 44px; }
.foot__line { margin: 18px 0 0; color: var(--gs-500); }
.foot__h { margin: 0 0 14px; font: 700 11.5px/1.4 var(--f-caps); letter-spacing: .22em; text-transform: uppercase; color: var(--kp-200); }
.foot__col ul { list-style: none; display: grid; gap: 9px; }
.foot__col a { display: inline-flex; align-items: center; gap: 8px; color: var(--gs-300); text-decoration: none; overflow-wrap: anywhere; }
.foot__col a .ico { width: 16px; height: 16px; color: var(--kp-500); }
.foot__col a:hover { color: var(--kl-50); text-decoration: underline; text-decoration-color: var(--kp-500); }
.foot__col .foot__wa, .foot__col .foot__wa .ico { color: var(--wa); }
.foot__adres { color: var(--gs-500); }
.foot__base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; padding: 20px 0 26px; border-top: 1px solid var(--ls-800); font-size: 13.5px; color: var(--gs-500); }
.foot__base p { margin: 0; }
@media (min-width: 640px) { .foot__grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1200px) { .foot__grid { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.25fr); } }

/* =========================================================
   STICKY BAR (phone) — shown once the fold is out of view (Balken, above)
   ========================================================= */
.sticky { display: none; }
@media (max-width: 767px) {
  body { padding-bottom: 76px; }
  .sticky {
    display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 80;
    padding: 9px 12px calc(9px + env(safe-area-inset-bottom));
    background: rgba(var(--scrim-d), .96); border-top: 1px solid var(--ls-700);
  }
  .sticky .btn { min-height: 50px; padding: 0 10px; }
}

/* =========================================================
   THE VIEWER — one for the whole page
   ========================================================= */
html.vw-open, html.vw-open body { overflow: hidden; }
.vw {
  position: fixed; inset: 0; z-index: 200; display: flex; flex-direction: column; height: 100vh; height: 100dvh;
  background: var(--ls-950); color: var(--kl-50);
}
.vw[hidden] { display: none; }
.vw__top { display: flex; align-items: center; gap: 6px 16px; min-height: 60px; padding: 8px clamp(12px, 3vw, 28px); }
.vw__titel { margin: 0; font: 500 21px/1.2 var(--f-serif); }
.vw__teller { margin: 0; font-size: 14px; color: var(--gs-500); }
.vw__sluit {
  margin-left: auto; flex: none; width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--ls-700);
  background: transparent; color: var(--kl-50); display: grid; place-items: center; cursor: pointer;
}
.vw__sluit:hover { border-color: var(--kp-500); }
.vw__sluit svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.vw__podium {
  position: relative; flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center;
  padding: 0 clamp(10px, 7vw, 104px); touch-action: pan-y; user-select: none; -webkit-user-select: none;
}
.vw__fig { margin: 0; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; pointer-events: none; }
.vw__fig img { display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; pointer-events: auto; box-shadow: 0 24px 60px rgba(var(--scrim-d), .6); -webkit-user-drag: none; }
.vw__fig.is-paar { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; align-items: center; }
.vw__half { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; min-width: 0; height: 100%; }
.vw__half img { max-height: calc(100% - 42px); }
.vw__half .paar__tag { position: static; }
.vw__pijl {
  position: absolute; top: 50%; z-index: 2; width: 54px; height: 54px; margin-top: -27px; border-radius: 50%;
  border: 1px solid var(--ls-700); background: rgba(var(--scrim-d), .6); color: var(--kl-50);
  display: grid; place-items: center; cursor: pointer;
}
.vw__pijl:hover { border-color: var(--kp-500); color: var(--kp-200); }
.vw__pijl .ico { width: 22px; height: 22px; }
.vw__pijl--l { left: clamp(8px, 2vw, 30px); }
.vw__pijl--r { right: clamp(8px, 2vw, 30px); }
.vw__pijl--r .ico { transform: scaleX(-1); }
.vw__onder { display: grid; justify-items: center; gap: 12px; padding: 14px clamp(12px, 3vw, 28px) 0; }
.vw__label {
  margin: 0; display: inline-flex; align-items: center; gap: 8px; max-width: 100%;
  background: var(--kl-50); color: var(--ls-900); padding: 6px 14px 9px 12px;
  font: 700 clamp(22px, 2.3vw, 30px)/1.05 var(--f-hand); transform: rotate(-1.2deg);
  box-shadow: 0 4px 14px rgba(var(--scrim-d), .5);
}
.vw__label .ico { width: .82em; height: .82em; color: var(--kp-800); }
.vw__strook { display: flex; gap: 6px; max-width: 100%; overflow-x: auto; padding: 3px 2px 6px; scrollbar-width: thin; scrollbar-color: var(--ls-700) transparent; }
.vw__strook button {
  flex: none; display: flex; gap: 2px; width: 66px; height: 50px; padding: 0; overflow: hidden; cursor: pointer;
  border: 2px solid transparent; background: var(--ls-800); opacity: .55; transition: opacity .15s;
}
.vw__strook button img { flex: 1; min-width: 0; width: 100%; height: 100%; object-fit: cover; }
.vw__strook button:hover { opacity: .9; }
.vw__strook button[aria-current="true"] { opacity: 1; border-color: var(--kp-500); }
.vw__cta {
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 10px 18px;
  margin-top: 10px; padding: 12px clamp(12px, 3vw, 28px) calc(12px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--ls-800);
}
.vw__vraag { margin: 0; font: italic 500 22px/1.2 var(--f-serif); }
.vw__pair { display: flex; gap: 8px; }
.vw__pair .btn { min-height: 48px; }
@media (max-width: 767px) {
  .vw__top { min-height: 52px; }
  .vw__titel { font-size: 18px; }
  .vw__pijl { display: none; }
  .vw__onder { gap: 10px; padding-top: 10px; }
  .vw__label { font-size: 21px; }
  .vw__strook button { width: 56px; height: 42px; }
  .vw__cta { flex-wrap: nowrap; justify-content: space-between; gap: 10px; margin-top: 8px; padding-top: 10px; }
  .vw__vraag { font-size: 18px; }
  .vw__pair .btn { min-height: 46px; padding: 0 14px; font-size: 15.5px; }
}
@media (max-width: 419px) {
  .vw__cta { flex-wrap: wrap; justify-content: center; }
  .vw__pair { width: 100%; display: grid; grid-template-columns: 1fr 1fr; }
}

/* a tablet: one column, the principal photos kept low enough to see what follows */
@media (min-width: 768px) and (max-width: 999px) {
  .shot--vier, .shot--hoog { aspect-ratio: 3 / 2; }
  .shot--hoog img { object-position: 50% 30%; }
  .paar--kapel .paar__half { aspect-ratio: 1 / 1; }
}


/* ============ FORMULIER — picked 3 of ronde-basis2/kaartvoet.py (harde stap: een vlakke beige stap rechtsonder, zoals de kaart "Staat uw klus er niet bij?"). Written in by basis2-varianten.py --vast; %V% -> :root:root. ============ */
:root:root .fold { overflow: visible; clip-path: inset(0 0 -32px 0); }

/* 3 · harde stap: a flat kalk-300 step down-right, under the line */
:root:root .fold .quick::after { box-shadow: 10px 10px 0 var(--kl-300), 0 0 0 100vmax var(--kl-100); }
@media (max-width: 767px) {
  :root:root .fold .quick::after { box-shadow: 6px 6px 0 var(--kl-300), 0 0 0 100vmax var(--kl-100); }
}


/* ============ LABEL — picked 3 of ronde-basis2/label.py (aangehecht: label en koperen knop als één strook, de knop aan het eind). Written in by basis2-varianten.py --vast; %V% -> :root:root. ============ */
/* 3 · aangehecht: one strip, the copper button at the label's right end; where it wraps, it hangs under the label.
   The shadow is the strip's outline (drop-shadow), so a wrapped strip keeps no empty paper beside the button */
:root:root .tag--groot {
  display: flex; flex-wrap: wrap; align-items: stretch; gap: 0; padding: 0; background: none; box-shadow: none;
  filter: drop-shadow(0 3px 7px rgba(var(--scrim-d), .34));
}
:root:root .tag--groot .tag__waar { background: var(--kl-50); padding: 6px 12px 8px 10px; }
:root:root .tag--groot .tag__link {
  display: inline-flex; align-items: center; gap: 7px; min-height: 40px; padding: 0 15px; white-space: nowrap;
  background: var(--kp-500); color: var(--ls-900); font: 700 14.5px/1 var(--f-sans); text-decoration: none;
}
:root:root .tag--groot .tag__link:hover { background: var(--kp-600); }


/* ============ KLEUREN — picked 3 of ronde-basis2/grond.py (koper: de klus-band koper · Ramazan en de strook op één licht · donker). Written in by basis2-varianten.py --vast; %V% -> :root:root. ============ */
/* 3 · koper: the klus band copper, the card on it paper; then one light ground */
:root:root .klus { background: var(--kp-500); }
:root:root .klus__in { border-top-color: var(--ls-900); box-shadow: 10px 10px 0 var(--kp-800); }
@media (max-width: 767px) { :root:root .klus__in { box-shadow: 6px 6px 0 var(--kp-800); } }
:root:root .band--zakelijk { background: var(--kl-50); border-bottom: 0; }


/* ============ OVERGANG — picked 2 of ronde-basis2/overgang.py (om en om: de zakelijk-strook donker · Over ons licht · Werkgebied donker). Written in by basis2-varianten.py --vast; %V% -> :root:root. ============ */
/* 2 · om en om: the strip dark, Over ons light, Werkgebied dark */
:root:root .duo { background: none; padding: 0; }
:root:root .about, :root:root .area { padding: var(--sec) 0; }
:root:root .naad { margin-block: 0; height: 0; position: relative; z-index: 2; justify-content: center; }
:root:root .naad::before, :root:root .naad::after { display: none; }

:root:root .band--zakelijk { background: var(--ls-950); color: var(--kl-50); border-top: 0; border-bottom: 0; }
:root:root .band--zakelijk .band__r { color: var(--gs-300); }
:root:root .band--zakelijk .btn--quiet { color: var(--kl-50); border-color: var(--ls-700); }
:root:root .band--zakelijk .btn--quiet:hover { border-color: var(--kl-50); }

:root:root .about { background: var(--kl-100); }
:root:root .area { background: var(--ls-900); }
:root:root .about { color: var(--ls-900); }
:root:root .about .kicker { color: var(--kp-800); }
:root:root .about__p { color: var(--gs-600); }
:root:root .werkwijze, :root:root .werkwijze div { border-color: var(--kl-300); }
:root:root .werkwijze dt { color: var(--ls-900); }
:root:root .werkwijze dd { color: var(--gs-600); }
:root:root .about .shot { box-shadow: 8px 8px 0 var(--kl-200); }
:root:root .about .btn--call { background: var(--ls-900); color: var(--kl-50); }
:root:root .about .btn--call:hover { background: var(--ls-800); }


/* ============ DAKKAPEL — picked 3 of ronde-basis2/kapel.py (om en om: kop en lijst naast de foto; daaronder voor/na naast "hersteld, niet vervangen" en de knoppen). Written in by basis2-varianten.py --vast; %V% -> :root:root. ============ */
/* 3 · om en om: two rows that swap sides; each pair of word blocks meets in the middle of the picture beside it */
@media (min-width: 1000px) {
  :root:root .lg--kapel {
    grid-template-columns: minmax(0, 5fr) minmax(0, 2fr) minmax(0, 5fr);
    grid-template-areas: "h beeld beeld" "lijst beeld beeld" "paar paar sub" "paar paar act";
    row-gap: 0;
  }
  :root:root .lg--kapel > .lad { display: contents; }
  :root:root .lg--kapel .lad__h { grid-area: h; align-self: end; }
  :root:root .lg--kapel .lad__lijst { grid-area: lijst; align-self: start; }
  :root:root .lg--kapel > .beeld { align-self: center; }
  :root:root .lg--kapel > .paar { align-self: center; margin-top: clamp(56px, 6vw, 88px); }
  :root:root .lg--kapel .lad__h2 { grid-area: sub; align-self: end; margin-top: clamp(56px, 6vw, 88px); }
  :root:root .lg--kapel > .lad__act { grid-area: act; align-self: start; justify-self: start; margin-top: 28px; }
}


/* ============ KNOP — picked 1 of ronde-basis2/knop.py (los ernaast: de knop recht en groter, met een kleine ruimte rechts naast het label). Written in by basis2-varianten.py --vast; %V% -> :root:root. ============ */
/* 1 · los ernaast */
:root:root .tag--groot .tag__link {
  min-height: clamp(46px, 3.5vw, 50px); padding: 0 clamp(17px, 1.5vw, 22px); gap: 8px;
  font-size: clamp(16px, 1.2vw, 17px); transform: rotate(1.4deg);
}

:root:root .tag--groot:has(> .tag__link) { align-items: flex-end; gap: 10px 12px; }
:root:root .tag--groot .tag__link { transform-origin: 0 100%; }


/* ============ VERPLAATSING — picked 1 of ronde-basis2/plek.py (na: de voor/na op de plek van de foto; de zin en de knoppen onder de lijst). Written in by basis2-varianten.py --vast; %V% -> :root:root. ============ */
/* na · the pair in the photo's place, every width */
/* (the photo and the pair below it are out of the markup; the thumbnails keep the photo's distance) */
:root:root .beeld > .paar--plek + .thumbs { margin-top: 16px; }
:root:root .beeld > .paar--plek .paar__halves { box-shadow: 8px 8px 0 var(--kl-200); }
:root:root .svc--dakkapel .beeld > .paar--plek .paar__halves { box-shadow: 8px 8px 0 var(--kl-300); }
@media (max-width: 767px) { :root:root .svc .beeld > .paar--plek .paar__halves { box-shadow: none; } }   /* a phone: no frame shadow, as the photo */
@media (min-width: 1000px) {
  /* Voegwerk: two halves side by side would be small in the photo's column; stacked they keep its 4:5 */
  :root:root .beeld > .paar--gevel .paar__halves { grid-template-columns: minmax(0, 1fr); }
  :root:root .beeld > .paar--gevel .paar__half { aspect-ratio: 8 / 5; }
  :root:root .beeld > .paar--gevel .paar__half img { object-position: 50% 50%; }

  /* the words in one column beside it, centred on it: heading, list, sentence, buttons */
  :root:root .lg--kapel {
    grid-template-areas: ". beeld beeld" "h beeld beeld" "lijst beeld beeld" "sub beeld beeld" "act beeld beeld" ". beeld beeld";
    grid-template-rows: 1fr auto auto auto auto 1fr;
  }
  :root:root .lg--voeg {
    grid-template-areas: "beeld ." "beeld h" "beeld lijst" "beeld sub" "beeld act" "beeld .";
    grid-template-rows: 1fr auto auto auto auto 1fr; row-gap: 0;
  }
  :root:root .lg--voeg > .lad { display: contents; }
  :root:root .lg--voeg .lad__h { grid-area: h; }
  :root:root .lg--voeg .lad__lijst { grid-area: lijst; }
  :root:root .lg--kapel > .beeld, :root:root .lg--voeg > .beeld { align-self: center; }
  :root:root .lg--kapel .lad__h, :root:root .lg--kapel .lad__lijst { align-self: start; }
  :root:root .lg--kapel .lad__h2, :root:root .lg--voeg .lad__h2 { grid-area: sub; align-self: start; margin-top: 30px; }
  :root:root .lg--kapel > .lad__act, :root:root .lg--voeg > .lad__act { grid-area: act; align-self: start; justify-self: start; margin-top: 28px; }
}


/* ============ SCHUIF — picked 2 of ronde-basis2/schuif.py (de labels als greep: de labels voor en na komen samen op de lijn). Written in by basis2-varianten.py --vast; %V% -> :root:root. ============ */
/* 2 · de labels als greep: the tags halfway up, one each side of the line */
:root:root .paar__halves {
  position: relative; grid-template-columns: minmax(0, 1fr); gap: 0;
  cursor: ew-resize; touch-action: pan-y; user-select: none; -webkit-user-select: none;
}
:root:root .paar__half { grid-area: 1 / 1; cursor: inherit; }
:root:root .paar__half img { pointer-events: none; -webkit-user-drag: none; }
:root:root .paar__half + .paar__half { clip-path: inset(0 0 0 var(--pos, 50%)); }
:root:root .paar--kapel .paar__half { aspect-ratio: 16 / 10; }
:root:root .paar--kapel .paar__half img { object-position: 50% 30%; }
:root:root .paar--gevel .paar__half { aspect-ratio: 2 / 1; }
:root:root .paar--gevel .paar__half img { object-position: 50% 50%; }
:root:root .beeld > .paar--gevel .paar__half { aspect-ratio: 4 / 5; }
:root:root .beeld > .paar--gevel .paar__half:first-child img { object-position: 64% 50%; }
:root:root .beeld > .paar--gevel .paar__half:last-child img { object-position: 36% 50%; }
@media (min-width: 768px) and (max-width: 999px) {
  :root:root .paar--kapel .paar__half { aspect-ratio: 2 / 1; }
  :root:root .beeld > .paar--kapel .paar__half { aspect-ratio: 16 / 10; }
  :root:root .beeld > .paar--gevel .paar__half { aspect-ratio: 3 / 2; }
}
@media (max-width: 767px) {
  :root:root .beeld > .paar--kapel .paar__half { aspect-ratio: 4 / 3; }
  :root:root .beeld > .paar--gevel .paar__half { aspect-ratio: 1 / 1; }
}

:root:root .paar__halves::before {
  content: ""; position: absolute; z-index: 2; top: 0; bottom: 0; left: var(--pos, 50%); pointer-events: none;
  width: 3px; margin-left: -1.5px; background: var(--kl-50); box-shadow: 0 0 6px rgba(var(--scrim-d), .45);
}

:root:root .paar__halves::before { width: 4px; margin-left: -2px; background: var(--kp-500); }
:root:root .paar__half .paar__tag { top: 50%; white-space: nowrap; }
:root:root .paar__half:first-child .paar__tag { left: auto; right: calc(100% - var(--pos, 50%) + 4px); transform: translateY(-50%) rotate(-3deg); }
:root:root .paar__half + .paar__half .paar__tag { left: calc(var(--pos, 50%) + 4px); transform: translateY(-50%) rotate(2deg); }
:root:root .paar__half:first-child .paar__tag::before { content: "\2039\00a0"; }
:root:root .paar__half + .paar__half .paar__tag::after { content: "\00a0\203A"; }


/* ============ LOSSE KNOPPEN VOL — Sem, 2026-10-26, on the phone: "Sommige buttons zijn nog niet full- width [..] zoals:
   hier wel het geval is [the pair Offerte aanvragen / Meer informatie]". Written in by hand, no row. Below 640 px a
   button standing alone is as wide as its column, as the pairs are (KNOPPEN VOL, above). ============ */
@media (max-width: 639px) {
  :root:root .actions:not(:has(> .btn + .btn)), :root:root .band__pair:not(.pair) { display: grid; grid-template-columns: minmax(0, 1fr); width: 100%; }
  :root:root .proj__voet { display: grid; grid-template-columns: minmax(0, 1fr); }   /* a .wrap: its own width stays */
  :root:root .contact__terug { width: 100%; }
}


/* ============ PLAATSEN IN DRIE — Sem, 2026-10-27, on the phone, with a crop of the places band ("Waar wij werken"): "Ik
   wil ook hier dat op mobiel de plaatsnamen d.m.v. een grid van 33,33% per item worden gerangschikt; er mag ook wat meer
   spacing tussen zitten." Written in by hand, no row; it replaces the open row Plaatsen (ronde-basis2/lint.py), taken off
   the switch unpicked. Up to 767 px the ten places stand in three equal columns, three to a row (Arnhem alone on the
   fourth), with more room between the rows. No dots: the columns separate the names; Doetinchem stays white. The size
   stays 17 px where Lichtenvoorde, the longest name, fits its third (from about 390 px), below that it shrinks with
   the screen (360 px: 15.6 px; 320 px: 13.5 px). From 768 px up the band is as it was. ============ */
@media (max-width: 767px) {
  :root:root .lint {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 14px; row-gap: 12px;
    line-height: 1.3; font-size: clamp(13.5px, calc((100vw - 64px) / 19), 17px);
  }
  :root:root .lint li:not(:last-child)::after { content: none; }
}


/* ============ LABEL WEG — Sem, 2026-10-27, on the phone, with a crop of the Dakrenovatie photo (the label crossed out)
   and one of the photo viewer (its label under the photo): "Ik wil dat het label wordt verborgen: [the photo] en pas te
   zien is, op dit scherm: [the viewer]. Voer dit uit". Written in by hand, no row; it replaces the open row Fotolabel
   (ronde-basis2/fotolabel.py), taken off the switch unpicked. Up to 767 px the place label is gone from the four
   stamped photos (Dakrenovatie, Schoorsteen renovatie, Dakonderhoud, Over ons): hidden as .sr-only is, so a screen
   reader still has the caption. The copper button stays where it stood, at the foot; the stamp stays as it is. The
   viewer writes its own label from its data (script.js), so it is untouched. From 768 px up the photos are as they
   were. ============ */
@media (max-width: 767px) {
  :root:root .shot:has(> .stamp) > .tag--groot .tag__waar {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap; border: 0;
  }
}

/* ============ LOGO — het nieuwe dak (Sem, 2026-10-27): "vervang het dakje in het logo, maar indien relevant niet
   op de rest van de pagina", in "de primaire huiskleur van de pagina". The roofs traced from his picture
   (logo/svg/dak.svg, logo/trace-dak.py), recoloured: the roofs in this page's orange, the windows in the colour of
   the R.A. beside them. Only in the logo (header, fold, footer, the stamps on photos, bedankt); every other use of
   merk.svg stays. The page as it was: ../bak7-fv11-a-basis2-oudlogo/.
   Later the same day, with a crop of bak 2's fold logo, R.A. crossed out: "Het is nu een combinatie geworden tussen
   het oude en het nieuwe logo. Ik wil bij elke template dit verwijderd zien." So R.A. is out of every logo here; the
   roof and the name stay. R.A. in running text, the title and the footer line is not the logo and stays. ============ */
.brand__mark { width: 48px; max-width: none; }
.lockup__mark { max-width: none; height: calc(var(--H) * .98); margin-bottom: calc(var(--H) * .05); }
.stamp img { width: 44px; }
@media (min-width: 1000px) {
  .brand__mark { width: 58px; }
}
@media (max-width: 380px) {
  .brand__mark { width: 40px; }
}

/* ============ ECHTE FOTO'S — his own WhatsApp photos (Sem, 2026-10-27: "1:A, 2:B, 3: doe dat, 4:ja"): where one
   of his photos shows the same kind of work as a drawn picture, it takes that picture's place (photos/wa-NNN.jpg, cut
   to the drawn picture's exact shape, so no frame moves). The drawn owner's face crops were tuned to a full-length
   figure; his photo is head and shoulders, so the crops below show his face, and the wide roof frames show the roof.
   Scoped to the photo's file name: with the drawn picture back, these rules do nothing. The page as it was:
   ../bak7-fv11-a-basis2-oudfotos/. ============ */
/* The owner: since Sem's pick on the switch (2026-10-27, row "Eigenaar" 2, ronde-basis2/eigenaar.py) the edited
   eigenaar-bus-lach.jpg (he smiles), wa-131's exact crop, so the same framing. */
.owner-chip__face img[src="eigenaar-bus-lach.jpg"] { width: 180%; left: -40%; top: -72%; }
.eig__crop img[src="eigenaar-bus-lach.jpg"] { object-position: 50% 75%; transform: scale(1.15); transform-origin: 50% 58%; }