/* R.A. Vastgoed Onderhoud — every colour below comes from palette.json */

:root {
  /* nacht — primary */
  --nacht-900: #0E1319;
  --nacht-800: #141B23;
  --nacht-700: #1E2833;
  --nacht-600: #2E3B4A;
  /* dakpan — accent */
  --dakpan-200: #F6DCC6;
  --dakpan-400: #E79759;
  --dakpan-500: #DB7E3D;
  --dakpan-700: #A9531F;
  /* lood — secondary */
  --lood-200: #D3D8DD;
  --lood-300: #B9C0C7;
  --lood-400: #9AA3AD;
  --lood-600: #5D6773;
  /* kalk — neutral */
  --kalk-50: #FCFAF6;
  --kalk-100: #F5F1EA;
  --kalk-200: #EAE3D7;
  /* fixed */
  --wa: #25D366;
  --wa-hover: #1EBE5A;
  --wit: #FFFFFF;
  /* reserve */
  --steen: #B4432C;
  --shadow: #0E131938;

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

  --gutter: clamp(16px, 5.6vw, 80px);
  --max: 1280px;
  --sec-y: clamp(64px, 8vw, 116px);
  --radius: 3px;
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 84px; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--kalk-100);
  color: var(--nacht-800);
  font: 400 17px/1.62 var(--f-sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
p { margin: 0 0 1em; }
h1, h2, h3 { margin: 0; font-weight: 500; }
ul, ol { margin: 0; padding: 0; }
figure { margin: 0; }
button { font: inherit; color: inherit; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--dakpan-400); color: var(--nacht-800); padding: 10px 16px; font-weight: 600; }
.skip:focus { top: 12px; }
:focus-visible { outline: 2px solid var(--dakpan-400); outline-offset: 3px; }

.wrap { width: 100%; max-width: calc(var(--max) + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter); }
.ic { width: 20px; height: 20px; flex: none; }
.dark { background: var(--nacht-800); color: var(--lood-300); }
.dark h2 { color: var(--kalk-100); }

/* the mark, worn in any ink: the file itself as a mask */
.mk {
  display: inline-block;
  width: 1.85em; height: 1em;
  background: currentColor;
  -webkit-mask: url(merk.svg) no-repeat center / contain;
          mask: url(merk.svg) no-repeat center / contain;
}

/* letterspaced small caps — the tagline's face */
.caps {
  font: 700 12px/1.3 var(--f-caps);
  letter-spacing: .26em;
  text-transform: uppercase;
  margin: 0 0 14px;
  display: flex; align-items: center; gap: 12px;
}
.caps .mk { width: 30px; height: 16px; }
.caps.caps--orange { color: var(--dakpan-700); }
.dark .caps.caps--orange { color: var(--dakpan-400); }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 54px; padding: 0 24px;
  font: 600 16px/1 var(--f-sans);
  letter-spacing: .01em;
  text-decoration: none; white-space: nowrap;
  border: 1.5px solid transparent; border-radius: var(--radius);
  cursor: pointer;
  transition: background-color .15s, border-color .15s, color .15s, transform .15s;
}
.btn:active { transform: translateY(1px); }
.btn .ic { width: 19px; height: 19px; }
.btn-call, .btn-primary { background: var(--dakpan-400); color: var(--nacht-800); }
.btn-call:hover, .btn-primary:hover { background: var(--dakpan-500); }
.btn-ink { background: var(--nacht-800); color: var(--kalk-100); }
.btn-ink:hover { background: var(--nacht-700); }
.btn-quiet { background: transparent; color: var(--nacht-800); border-color: var(--lood-400); }
.btn-quiet:hover { border-color: var(--nacht-800); }
.btn-quiet--dark { color: var(--kalk-100); border-color: var(--nacht-600); }
.btn-quiet--dark:hover { border-color: var(--lood-300); }
.btn-wa { background: var(--wa); color: var(--wit); }
.btn-wa:hover { background: var(--wa-hover); }
.btn-wa--line { background: transparent; color: var(--wa); border-color: var(--wa); }
.btn-wa--line:hover { background: var(--nacht-700); }
.btn-block { width: 100%; }
.pair { display: flex; flex-wrap: wrap; gap: 10px; }
.actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }

/* stars */
.stars { display: inline-flex; gap: 2px; color: var(--dakpan-400); vertical-align: middle; }
.stars svg { width: 18px; height: 18px; }
.stars--sm svg { width: 15px; height: 15px; }

/* the photo label: a small dark tab on the photo's foot */
.tag {
  position: absolute; left: 0; bottom: 0;
  background: var(--nacht-900);
  color: var(--lood-300);
  font: 600 11px/1 var(--f-caps);
  letter-spacing: .14em; text-transform: uppercase;
  padding: 8px 12px 8px 12px;
}
.tag--below { position: static; display: inline-block; margin-top: 0; }

/* ============ HEADER ============ */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: var(--nacht-800);
  border-bottom: 1px solid transparent;
  transition: border-color .2s, background-color .2s;
}
.site-header.is-scrolled { border-bottom-color: var(--nacht-600); background: var(--nacht-900); }
.nav { display: flex; align-items: center; gap: 28px; height: 76px; }
.nav-brand { display: flex; align-items: baseline; gap: 8px; text-decoration: none; color: var(--kalk-100); flex: none; }
.nav-mark { width: 34px; height: auto; align-self: center; transform: translateY(-3px); }
.nb-ra { font: 500 22px/1 var(--f-serif); }
.nb-vo { font: 500 15px/1 var(--f-sans); color: var(--lood-300); }

.nav-menu { list-style: none; display: flex; align-items: center; gap: 4px; margin-left: auto; }
.nav-menu > li > a, .drop-btn {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 10px 12px; border: 0; background: none; cursor: pointer;
  font: 500 15px/1 var(--f-sans); color: var(--lood-300); text-decoration: none;
  border-radius: var(--radius);
}
.nav-menu > li > a:hover, .drop-btn:hover { color: var(--kalk-100); }
.ic-chev { width: 15px; height: 15px; transition: transform .2s; }
.has-drop { position: relative; }
.drop {
  list-style: none;
  position: absolute; top: calc(100% + 8px); left: 0;
  min-width: 250px; padding: 8px;
  background: var(--kalk-50); border: 1px solid var(--lood-300);
  border-top: 3px solid var(--dakpan-400);
  box-shadow: 0 24px 48px -24px var(--shadow);
  opacity: 0; visibility: hidden; transform: translateY(-4px);
  transition: opacity .15s, transform .15s, visibility 0s .15s;
}
.drop::before { content: ""; position: absolute; left: 0; right: 0; top: -14px; height: 14px; }
.drop a { display: block; padding: 11px 14px; color: var(--nacht-800); text-decoration: none; font-weight: 500; border-radius: 2px; }
.drop a:hover { background: var(--kalk-200); color: var(--dakpan-700); }
.has-drop.open .drop { opacity: 1; visibility: visible; transform: none; transition: opacity .15s, transform .15s; }
.has-drop.open .ic-chev { transform: rotate(180deg); }
@media (hover: hover) and (min-width: 1061px) {
  .has-drop:hover .drop { opacity: 1; visibility: visible; transform: none; transition: opacity .15s, transform .15s; }
  .has-drop:hover .ic-chev { transform: rotate(180deg); }
}

.nav-call { display: flex; align-items: center; gap: 8px; flex: none; }
.nav-tel {
  display: inline-flex; align-items: center; gap: 10px;
  height: 46px; padding: 0 18px;
  border: 1px solid var(--nacht-600); border-radius: 999px;
  color: var(--kalk-100); text-decoration: none; font: 600 16px/1 var(--f-sans);
  font-variant-numeric: tabular-nums;
}
.nav-tel .ic { width: 17px; height: 17px; color: var(--dakpan-400); }
.nav-tel:hover { border-color: var(--dakpan-400); }
.nav-wa {
  display: inline-grid; place-items: center; width: 46px; height: 46px;
  border: 1px solid var(--wa); border-radius: 999px; color: var(--wa);
}
.nav-wa:hover { background: var(--nacht-700); }
.nav-toggle { display: none; }

/* ============ FOLD ============ */
.fold {
  background: var(--nacht-800);
  color: var(--lood-300);
  padding: clamp(24px, 3.4vh, 40px) 0 clamp(28px, 4vh, 44px);
}
.fold-top {
  --pair: clamp(46px, 5.6vw, 82px);
  display: grid;
  grid-template-columns: auto auto 1fr;
  align-items: end;
  gap: clamp(28px, 3.6vw, 56px);
  padding-bottom: clamp(20px, 3vh, 30px);
  border-bottom: 1px solid var(--nacht-600);
}

/* the lockup — mark + words, words as real text */
.lockup { display: inline-flex; flex-direction: column; align-items: flex-start; margin: 0; color: var(--kalk-100); }
.lk-row { position: relative; display: block; padding-right: 1.78em; line-height: 1; }
.lk-ra { font: 500 1em/1 var(--f-serif); letter-spacing: -.005em; display: block; }
.lk-mark { position: absolute; right: 0; bottom: .07em; width: 1.82em; height: auto; }
.lk-vo { font: 500 .49em/1.05 var(--f-sans); color: var(--lood-200); margin-top: .12em; letter-spacing: -.003em; }
.lk-tag {
  font: 700 max(11px, .135em)/1 var(--f-caps); text-transform: uppercase;
  letter-spacing: .36em; color: var(--lood-300);
  margin-top: .36em; white-space: nowrap;
}
.lockup--xl { font-size: var(--pair); }
.lockup--md { font-size: 46px; }

.kop {
  font: 500 var(--pair)/.98 var(--f-serif);
  color: var(--kalk-100);
  letter-spacing: -.012em;
  padding-bottom: calc(var(--pair) * .17);
}
.kop-l { display: block; white-space: nowrap; }
.kop-l + .kop-l { font-style: italic; }
.onderkop {
  margin: 0; max-width: 34ch;
  font-size: 17px; line-height: 1.55; color: var(--lood-300);
  padding-bottom: calc(var(--pair) * .2);
  justify-self: end;
}

/* the rows — the slate's three questions */
.vragen { list-style: none; }
.vragen li { border-bottom: 1px solid var(--nacht-600); }
.vraag {
  display: grid;
  grid-template-columns: 190px 1fr auto 44px;
  align-items: center; gap: 0 28px;
  padding: clamp(10px, 1.6vh, 16px) 0;
  text-decoration: none; color: inherit;
  position: relative;
}
.vraag::before {
  content: ""; position: absolute; inset: 0 calc(var(--gutter) * -0.4);
  background: var(--nacht-700); opacity: 0; transition: opacity .2s; z-index: 0;
}
.vraag > * { position: relative; z-index: 1; }
.vraag:hover::before, .vraag:focus-visible::before { opacity: 1; }
.vr-tag {
  font: 700 11.5px/1.35 var(--f-caps); letter-spacing: .2em; text-transform: uppercase;
  color: var(--dakpan-400);
  align-self: start; padding-top: .9em;
}
.vr-body { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.vr-q {
  font: 600 clamp(30px, 3.45vw, 50px)/1 var(--f-cond);
  color: var(--kalk-100); letter-spacing: -.012em;
}
.vr-line { font-size: 16px; line-height: 1.45; color: var(--lood-300); max-width: 60ch; }
.vr-pic {
  display: block; position: relative;
  width: clamp(150px, 15.5vw, 224px); aspect-ratio: 2.05 / 1;
  overflow: hidden; background: var(--nacht-700);
}
.vr-pic img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.vragen li:nth-child(1) .vr-pic img { object-position: 50% 45%; }
.vragen li:nth-child(2) .vr-pic img { object-position: 50% 28%; }
.vragen li:nth-child(3) .vr-pic img { object-position: 50% 30%; }
.vraag:hover .vr-pic img { transform: scale(1.05); }
.vr-go { color: var(--lood-400); justify-self: end; transition: color .2s, transform .2s; }
.vr-go .ic { width: 24px; height: 24px; }
.vraag:hover .vr-go { color: var(--dakpan-400); transform: translateX(4px); }

.fold-foot {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center; gap: 24px 40px;
  padding-top: clamp(18px, 3vh, 30px);
}
.owner-chip { display: flex; align-items: center; gap: 16px; justify-self: center; }
.portrait {
  position: relative; display: block; flex: none;
  width: 66px; height: 66px; border-radius: 50%; overflow: hidden;
  background: var(--nacht-700);
  box-shadow: 0 0 0 2px var(--nacht-800), 0 0 0 3.5px var(--dakpan-400);
}
.portrait img {
  position: absolute; max-width: none;
  width: 330%; height: auto;
  left: -67%; top: -38%;
}
.oc-text { display: flex; flex-direction: column; gap: 0; }
.oc-name { font: 600 34px/1 var(--f-hand); color: var(--kalk-100); transform: rotate(-2deg); transform-origin: left; display: inline-block; }
.oc-link { font-size: 14.5px; color: var(--dakpan-200); text-decoration: none; margin-top: 4px; }
.oc-link:hover { color: var(--dakpan-400); text-decoration: underline; text-underline-offset: 3px; }

.rating { display: flex; align-items: center; gap: 14px; }
.rt-score { font: 500 44px/1 var(--f-serif); color: var(--kalk-100); letter-spacing: -.02em; }
.rt-side { display: flex; flex-direction: column; gap: 5px; }
.rt-src { font-size: 14px; color: var(--lood-300); }
.rt-src b { color: var(--kalk-100); font-weight: 600; }

/* ============ TRUST STRIP — the lead flashing ============ */
.lood {
  position: relative;
  background: linear-gradient(180deg, var(--lood-200) 0%, var(--lood-300) 100%);
  color: var(--nacht-800);
  padding: 20px 0 30px;
  /* lead beaten over the pans: the bottom edge drops into each trough */
  -webkit-mask:
    linear-gradient(#000 0 0) top / 100% calc(100% - 12px) no-repeat,
    radial-gradient(28px 12px at 50% 0, #000 98%, transparent 100%) 0 100% / 56px 12px repeat-x;
          mask:
    linear-gradient(#000 0 0) top / 100% calc(100% - 12px) no-repeat,
    radial-gradient(28px 12px at 50% 0, #000 98%, transparent 100%) 0 100% / 56px 12px repeat-x;
}
.lood::before {
  /* the line where the lead is tucked into the joint */
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px;
  background: var(--lood-400);
}
.lood-in { display: grid; grid-template-columns: 1fr auto 1fr auto; align-items: center; gap: 32px; }
.lood-fact { margin: 0; display: flex; flex-direction: column; gap: 3px; }
.lood-fact strong { font: 500 italic 22px/1.2 var(--f-serif); }
.lood-fact span { font-size: 15px; line-height: 1.45; color: var(--nacht-700); }
.lood-mark { width: 54px; height: 29px; color: var(--dakpan-700); }
.lood-act {
  display: inline-flex; align-items: center; gap: 8px;
  font: 700 12px/1 var(--f-caps); letter-spacing: .18em; text-transform: uppercase;
  color: var(--nacht-800); text-decoration: none;
  padding: 14px 0 14px 28px; border-left: 1px solid var(--lood-400);
}
.lood-act .ic { width: 18px; height: 18px; color: var(--dakpan-700); transition: transform .2s; }
.lood-act:hover .ic { transform: translateX(4px); }

/* ============ STICKY (mobile) ============ */
.sticky { display: none; }

/* ============ RESPONSIVE ============ */
@media (max-width: 1200px) {
  .fold-top { grid-template-columns: auto 1fr; }
  .onderkop { grid-column: 1 / -1; justify-self: start; max-width: 64ch; padding-bottom: 0; }
  .lood-in { grid-template-columns: 1fr auto 1fr; }
  .lood-act { grid-column: 1 / -1; justify-self: start; border-left: 0; padding: 4px 0 0; }
  .fold-foot { grid-template-columns: auto auto; }
  .rating--fold { grid-column: 1 / -1; justify-self: start; }
  .owner-chip { justify-self: end; }
}

@media (max-width: 1060px) {
  .nav { gap: 12px; }
  .nav-toggle {
    display: inline-flex; align-items: center; gap: 10px; margin-left: auto;
    height: 44px; padding: 0 14px; background: none; cursor: pointer;
    border: 1px solid var(--nacht-600); border-radius: var(--radius); color: var(--kalk-100);
    font: 600 14px/1 var(--f-sans);
  }
  .nt-bars, .nt-bars::before, .nt-bars::after { display: block; width: 18px; height: 1.5px; background: currentColor; position: relative; }
  .nt-bars::before, .nt-bars::after { content: ""; position: absolute; left: 0; }
  .nt-bars::before { top: -6px; } .nt-bars::after { top: 6px; }
  .nav-menu {
    position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--nacht-900); border-bottom: 1px solid var(--nacht-600);
    padding: 8px var(--gutter) 20px;
    display: none;
  }
  .nav.menu-open .nav-menu { display: flex; }
  .nav-menu > li { border-bottom: 1px solid var(--nacht-700); }
  .nav-menu > li > a, .drop-btn { width: 100%; justify-content: space-between; padding: 16px 0; font-size: 17px; color: var(--kalk-100); }
  .drop {
    position: static; display: none; opacity: 1; visibility: visible; transform: none;
    background: transparent; border: 0; box-shadow: none; padding: 0 0 12px 14px; min-width: 0;
  }
  .drop::before { display: none; }
  .has-drop.open .drop { display: block; }
  .drop a { color: var(--lood-300); padding: 10px 0; }
  .drop a:hover { background: none; color: var(--dakpan-400); }
  .nav-call { order: 2; }
  .nav-toggle { order: 3; margin-left: 0; }
  .nav-call { margin-left: auto; }

}

@media (max-width: 760px) {
  body { font-size: 16.5px; padding-bottom: 76px; }
  .nav { height: 64px; }
  .nav-brand { display: grid; grid-template-columns: auto auto; column-gap: 8px; align-items: center; }
  .nav-mark { grid-row: 1 / span 2; width: 30px; transform: none; }
  .nb-ra { font-size: 18px; line-height: 1; }
  .nb-vo { font-size: 12.5px; line-height: 1.1; }
  .nav-tel span { display: none; }
  .nav-tel { width: 44px; height: 44px; padding: 0; justify-content: center; }
  .nav-wa { width: 44px; height: 44px; }
  html { scroll-padding-top: 70px; }

  .fold-top { grid-template-columns: 1fr; gap: 18px; --pair: clamp(40px, 12.4vw, 56px); }
  .kop { padding-bottom: 0; }
  .onderkop { font-size: 16px; }
  .vraag { grid-template-columns: 1fr 92px; gap: 6px 16px; padding: 16px 0; }
  .vr-tag { grid-column: 1 / -1; padding-top: 0; font-size: 10.5px; }
  .vr-body { grid-column: 1; }
  .vr-q { font-size: clamp(26px, 7.4vw, 34px); }
  .vr-line { font-size: 14.5px; }
  .vr-pic { grid-column: 2; grid-row: 2; width: 92px; aspect-ratio: 1; align-self: start; }
  .vr-go { display: none; }
  .vraag::before { inset: 0 calc(var(--gutter) * -1); }
  .fold-foot { grid-template-columns: 1fr; gap: 22px; }
  .pair--fold .btn { flex: 1 1 0; padding: 0 12px; }
  .owner-chip, .rating--fold { justify-self: start; }

  .lood { padding: 18px 0 30px; }
  .lood-in { grid-template-columns: 1fr; gap: 14px; }
  .lood-mark { display: none; }
  .lood-fact + .lood-mark + .lood-fact { padding-top: 14px; border-top: 1px solid var(--lood-400); }
  .lood-fact strong { font-size: 19px; }
  .lood-act { grid-column: auto; }

  .actions .btn { flex: 1 1 auto; }
  .lockup--md { font-size: 40px; }

  .sticky {
    display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
    background: var(--nacht-900); border-top: 1px solid var(--nacht-600);
  }
  .sticky { grid-template-columns: 1.35fr 1fr; }
  .sticky .btn { min-height: 50px; padding: 0 10px; font-size: 15.5px; }
}

@media (max-width: 420px) {
  .nav-toggle { width: 44px; padding: 0; justify-content: center; }
  .nt-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .nav-call { gap: 6px; }
}

@media (max-width: 380px) {
  .vraag { grid-template-columns: 1fr 76px; }
  .vr-pic { width: 76px; }
  .lk-tag { letter-spacing: .26em; }
}

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


/* ============ ROUND 1 2026-10-13 (ronde-varianten.py), written in: Eigenaar 2 (ronde/eigenaar.py) and Feiten 2 (ronde/feiten.py), Sem: "voor eigenaar en feiten, kies ik voor 2 en 2". The chip itself moved in the HTML, from the fold's foot to div.oc-kop before p.onderkop; the files before are index.before-ronde1.html / style.before-ronde1.css. ============ */

/* 2 · up top: the chip in the foot hides; its copy (div.oc-kop, before p.onderkop) shows in the fold's top. From 1201:
   under the subheading in the third column, its foot level with the headline's. 761-1200: right of the subheading.
   Phones: under the subheading, above the rows. The rating keeps the foot's right end. */
:root:root .oc-kop { display: flex; align-items: center; gap: 16px; }
@media (min-width: 1201px) {
  :root:root .fold-top { grid-template-rows: auto auto; row-gap: 0; }
  :root:root .fold-top > .lockup, :root:root .fold-top > .kop { grid-row: 1 / span 2; }
  :root:root .fold-top > .onderkop { grid-column: 3; grid-row: 1; }
  :root:root .fold-top > .oc-kop { grid-column: 3; grid-row: 2; justify-self: end; width: min(34ch, 100%); align-self: end; }
  :root:root .rating--fold { grid-column: 3; }
}
@media (min-width: 761px) and (max-width: 1200px) {
  :root:root .fold-top { grid-template-columns: auto 1fr auto; }
  :root:root .fold-top > .kop { grid-column: 2 / -1; }
  :root:root .fold-top > .onderkop { grid-column: 1 / 3; grid-row: 2; }
  :root:root .fold-top > .oc-kop { grid-column: 3; grid-row: 2; align-self: center; }
}
@media (max-width: 760px) {
  :root:root .fold-top > .oc-kop { order: 1; }
}

:root:root .lood-act {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 54px; padding: 0 22px 0 24px;
  font: 600 16px/1 var(--f-sans); letter-spacing: .01em; text-transform: none;
  text-decoration: none; white-space: nowrap;
  border: 1.5px solid transparent; border-radius: var(--radius);
  background: var(--dakpan-400); color: var(--nacht-800);
  cursor: pointer;
  transition: background-color .15s, border-color .15s, color .15s, transform .15s;
}
:root:root .lood-act:hover { background: var(--dakpan-500); }
:root:root .lood-act:active { transform: translateY(1px); }
:root:root .lood-act .ic { width: 19px; height: 19px; color: currentColor; }

/* 2 · over the edge: one lead plate, as wide as the page's content, laid over the fold's bottom edge, the way lead is
   laid over the seam between roof and wall; the fold's own room under its foot is where it laps (all but 12 px of
   it). The plate is drawn on .lood-in::before, so its shadow follows the scallops. */
:root:root .lood {
  margin-top: calc(12px - clamp(28px, 4vh, 44px));
  padding: 0; background: none; -webkit-mask: none; mask: none;
  filter: drop-shadow(0 14px 18px var(--shadow));
}
:root:root .lood::before { display: none; }
:root:root .lood-in {
  position: relative; isolation: isolate;
  width: calc(100% - 2 * var(--gutter)); max-width: var(--max);
  padding: 15px clamp(22px, 2.4vw, 34px) 32px;
  align-items: start;
}
:root:root .lood-in::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(var(--lood-400) 0 0) top / 100% 3px no-repeat,
    linear-gradient(180deg, var(--lood-200) 0%, var(--lood-300) 100%);
  -webkit-mask:
    linear-gradient(#000 0 0) top / 100% calc(100% - 12px) no-repeat,
    radial-gradient(28px 12px at 50% 0, #000 98%, transparent 100%) 50% 100% / 56px 12px repeat-x;
          mask:
    linear-gradient(#000 0 0) top / 100% calc(100% - 12px) no-repeat,
    radial-gradient(28px 12px at 50% 0, #000 98%, transparent 100%) 50% 100% / 56px 12px repeat-x;
}
:root:root .lood-fact { padding-top: 10px; }
:root:root .lood-fact strong { font-size: 24px; text-wrap: balance; }
:root:root .lood-mark { margin-top: 18px; }
@media (max-width: 1200px) {
  :root:root .lood-in { row-gap: 18px; }
  :root:root .lood-act { grid-column: 1 / -1; justify-self: start; }
}
@media (max-width: 760px) {
  :root:root .lood-in { padding: 14px 18px 30px; }
  :root:root .lood-fact { padding-top: 6px; }
  :root:root .lood-fact + .lood-mark + .lood-fact { padding-top: 14px; }
  :root:root .lood-act { justify-self: stretch; margin-top: 2px; }
}


/* ============ ROUND 2 2026-10-13 (ronde2-varianten.py), written in: Regels 1 (ronde2/regels.py), Sem: "Regels 1". The service tags are out of the HTML; the files before are index.before-ronde2.html / style.before-ronde2.css. ============ */

/* 1 · closed up: the tag goes and its column with it. The question and its line start at the row's left edge, in line
   with the lockup and the rules; the photo and the arrow keep the right end. */
:root:root .vraag { grid-template-columns: 1fr auto 44px; }
:root:root .vr-body { grid-column: 1; grid-row: 1; }
:root:root .vr-pic { grid-column: 2; grid-row: 1; }
:root:root .vr-go { grid-column: 3; grid-row: 1; }
:root:root .vr-line { text-wrap: pretty; }
@media (max-width: 760px) {
  :root:root .vraag { grid-template-columns: 1fr 92px; }
}
@media (max-width: 380px) {
  :root:root .vraag { grid-template-columns: 1fr 76px; }
}

/* ============ ROUND 2 2026-10-13 (ronde2-varianten.py), written in: Kennis 1 (ronde2/kennis.py), Sem: "voor kennis kies ik voor "1"". The owner chip is in the HTML as div.oc-voet in the fold's foot; the files before are index.before-kennis.html / style.before-kennis.css. ============ */

/* 1 · one line: the chip under the photos, the rating to the middle of the foot (where the slate first had the chip).
   761-1200: no room for three on a line; the rating centred on a line of its own. Phones: the buttons, the rating,
   then the chip last, at the right under the photos. */
:root:root .fold-foot > .oc-voet { display: flex; align-items: center; gap: 16px; }
:root:root .oc-voet .oc-link { text-wrap: balance; }
@media (min-width: 761px) {
  :root:root .fold-foot { --hoek: calc(clamp(150px, 15.5vw, 224px) + 72px); grid-template-columns: auto minmax(0, 1fr) var(--hoek); }
  :root:root .fold-foot > .pair--fold { grid-column: 1; grid-row: 1; }
  :root:root .fold-foot > .oc-voet { grid-column: 3; grid-row: 1; justify-self: start; margin-left: 3.5px; }
}
@media (min-width: 1201px) {
  :root:root .fold-foot { grid-template-columns: auto minmax(0, 1fr) max(var(--hoek), 278px); }
}
@media (min-width: 761px) and (max-width: 1200px) {
  :root:root .fold-foot { column-gap: 24px; }
}
@media (max-width: 760px) {
  :root:root .fold-foot > .oc-voet { justify-self: end; flex-direction: row-reverse; text-align: right; margin-right: 3.5px; }
  :root:root .oc-voet .oc-text { align-items: flex-end; }
  :root:root .oc-voet .oc-name { transform-origin: right; }
}

@media (min-width: 1201px) {
  :root:root .fold-foot > .rating--fold { grid-column: 2; grid-row: 1; justify-self: center; }
}
@media (min-width: 761px) and (max-width: 1200px) {
  :root:root .fold-foot > .rating--fold { grid-column: 1 / -1; grid-row: 2; justify-self: center; }
}
@media (max-width: 760px) {
  :root:root .fold-foot > .oc-voet { order: 1; }
}

/* ============ ROUND 2 2026-10-13 (ronde2-varianten.py), written in: Voet 3 (ronde2/voet.py), Sem: "Voor de voet kies ik 3" ("Yes, voer dit uit"). CSS only, the HTML unchanged; the file before is style.before-voet.css. ============ */
/* 3 · a card on the seam: the plate becomes the page's card (the light card ground, a hairline edge, the orange top
   line of the form and the owner's photo, the card's soft shadow), still laid over the fold's bottom edge, but with
   room: the foot gets air above, and the card starts well under the foot. */
:root:root .fold-foot { padding-top: clamp(34px, 5.4vh, 54px); }

:root:root .lood { margin-top: 0; filter: none; -webkit-mask: none; mask: none; }
:root:root .lood-fact { padding-top: 0; }
:root:root .lood-mark { margin-top: 0; }

:root:root .fold { padding-bottom: calc(clamp(28px, 4.4vh, 44px) + clamp(24px, 3.6vh, 36px)); }
:root:root .lood { margin-top: calc(-1 * clamp(24px, 3.6vh, 36px)); }
:root:root .lood-in {
  padding: clamp(24px, 2.8vw, 36px) clamp(24px, 3vw, 40px);
  background: var(--kalk-50);
  border: 1px solid var(--lood-300); border-top: 4px solid var(--dakpan-400);
  box-shadow: 0 40px 80px -56px var(--shadow);
  align-items: center;
}
:root:root .lood-in::before { display: none; }
:root:root .lood-fact span { color: var(--lood-600); }
:root:root .lood-mark { color: var(--dakpan-700); }

/* ============ ROUND 2 2026-10-13 (ronde2-varianten.py), written in: Koppen 1 (ronde2/koppen.py), Sem: "Voor de koppen, kies ik voor 1". CSS only, the HTML unchanged; the file before is style.before-koppen.css. ============ */
/* 1 · the headline's serif: Playfair Display 500, as "Waar loopt u tegenaan?"; a's sizes */
:root:root .vr-q { font-family: var(--f-serif); font-weight: 500; line-height: 1.05; letter-spacing: -.01em; }


/* ============ ROUND 2 2026-10-20 (ronde2-varianten.py), written in: Feitenblok 1 (ronde2/feitenblok.py), Sem: "Ik vind feitenblok 1 wel wat, maar niet als de finale vorm. Kun je feitenblok als nu als de 'voor' versie neerzetten". In the HTML the facts card div.lood-in is replaced by div.fb.fb--1; the files before are index.before-feitenblok.html / style.before-feitenblok.css. ============ */
/* 1 · a photo with each fact: the bold lines only, each beside a small photo; the card on the seam, as Voet 3 has it */
:root:root .fb--1 {
  width: calc(100% - 2 * var(--gutter)); max-width: var(--max);
  background: var(--kalk-50);
  border: 1px solid var(--lood-300); border-top: 4px solid var(--dakpan-400);
  box-shadow: 0 40px 80px -56px var(--shadow);
}
:root:root .fb--1 .lood-act { grid-column: auto; justify-self: auto; margin: 0; }

/* 1 · a photo with each fact: the bold lines only, each beside a small photo; the button at the right end */
:root:root .fb--1 {
  display: grid; grid-template-columns: 1fr 1fr auto; align-items: center; column-gap: clamp(24px, 3vw, 44px);
  padding: clamp(20px, 2.2vw, 28px) clamp(24px, 3vw, 40px);
}
:root:root .fb1-item { margin: 0; display: flex; align-items: center; gap: clamp(16px, 1.6vw, 22px); }
:root:root .fb1-pic { flex: none; width: clamp(104px, 9.4vw, 136px); aspect-ratio: 3 / 2; overflow: hidden; border-radius: var(--radius); }
:root:root .fb1-pic img { width: 100%; height: 100%; object-fit: cover; }
:root:root .fb1-item:nth-child(1) .fb1-pic img { object-position: 50% 60%; }
:root:root .fb1-item:nth-child(2) .fb1-pic img { object-position: 62% 55%; }
:root:root .fb1-item strong { font: 500 italic 24px/1.2 var(--f-serif); text-wrap: balance; }
@media (max-width: 1200px) {
  :root:root .fb--1 { grid-template-columns: 1fr 1fr; row-gap: 20px; }
  :root:root .fb--1 .lood-act { grid-column: 1 / -1; justify-self: start; }
  :root:root .fb1-item strong { font-size: 22px; }
}
@media (max-width: 760px) {
  :root:root .fb--1 { grid-template-columns: 1fr; row-gap: 0; padding: 16px 18px 20px; }
  :root:root .fb1-item { padding: 12px 0; }
  :root:root .fb1-item + .fb1-item { border-top: 1px solid var(--lood-300); }
  :root:root .fb1-pic { width: 96px; }
  :root:root .fb1-item strong { font-size: 20px; }
  :root:root .fb--1 .lood-act { justify-self: stretch; margin-top: 8px; }
}
@media (max-width: 380px) {
  :root:root .fb1-item { gap: 14px; }
  :root:root .fb1-pic { width: 78px; }
  :root:root .fb1-item strong { font-size: 19px; }
}


/* ============ ROUND 2 2026-10-21 (ronde2-varianten.py), written in: Mobiel 1 (ronde2/mobiel.py), Sem: "Kun je 1 naar voor zetten". Phones up to 599 px: the fixed bar after the fold (its script now in script.js), the fold's foot rating → owner → buttons, every pair stacked full width. The files before are index.before-mobiel.html / style.before-mobiel.css / script.before-mobiel.js (the HTML unchanged). ============ */
/* 1 · phone: the bar after the fold, the fold's foot reordered, every pair stacked full width (up to 599 px) */
@media (max-width: 599px) {
  /* the fixed bar: under the screen's foot until the fold is out of view (script.js sets the classes), as bak8 a */
  :root:root.sticky-ready .sticky { transform: translateY(110%); transition: transform .2s; }
  :root:root.sticky-ready .sticky.is-on { transform: none; }

  /* the fold's foot: the rating, the owner, then the two buttons */
  :root:root .fold-foot > .rating--fold { order: 1; }
  :root:root .fold-foot > .oc-voet { order: 2; }
  :root:root .fold-foot > .pair--fold { order: 3; }

  /* every pair one under the other, each button the column's full width */
  :root:root .pair, :root:root .actions:has(> .btn + .btn) { display: grid; grid-template-columns: minmax(0, 1fr); width: 100%; }

  /* the single buttons that still stood at their own width */
  :root:root .sec-act .btn, :root:root .faq-more .btn { width: 100%; }
}


/* ============ ROUND 2 2026-10-21, straight in (no switch): Kopbalk en regels, Sem: "De navbar aan de bovenkant moeten
   pas tevoorschijn komen, na de fold, net als de fixed footer" and "De tekst onder de titels hier, moet weg, om meer
   ruimte te maken". Phones up to 599 px only. The files before are style.before-kopbalk.css / script.before-kopbalk.js
   (the HTML unchanged). The Eigenaar row (ronde2/eigenaar.py) went off the switch unpicked. ============ */
@media (max-width: 599px) {
  /* the header: out of the flow and above the screen until the fold is out of view (script.js sets the classes), then
     it slides down, as the bar at the foot slides up */
  :root:root.sticky-ready .site-header {
    position: fixed; left: 0; right: 0; top: 0;
    transform: translateY(-100%); transition: transform .2s, border-color .2s, background-color .2s;
  }
  :root:root.sticky-ready .site-header.is-on { transform: none; }

  /* the fold's three questions without the line under them: the question beside its photo */
  :root:root .vr-line { display: none; }
}


/* ============ BASIS2 2026-10-24: the rest of the page, below the feitenblok (bak3-fc16-a-basis2-prompt.md). Everything
   above this line is the header, the fold and the feitenblok as Sem finished them; the rules of the sections that were
   removed are gone. The one idea of the rest: what matters is laid over the seam between two grounds, the way lead is
   laid over the joint between roof and wall, its top edged with the orange flashing line — the feitenblok first, then
   the services card, the dakrenovatie card and the contact form. ============ */

:root {
  --veil: #0E1319B3;   /* nacht-900 at 70%: the +N tiles, the viewer's arrows, the stamp's shadow */
  --scrim: #0E1319F7;  /* nacht-900 at 97%: the viewer's ground */
  --lap: clamp(64px, 8vw, 128px); /* how far an object laid over a seam reaches into the next ground */
}

.dark .caps--orange, .projects .caps--orange, .contact .caps--orange { color: var(--dakpan-400); }

/* ---------- a picture that opens the viewer ---------- */
.ph { display: block; width: 100%; height: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; position: relative; color: inherit; }
.ph img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- the principal photo: its label (place and date, large, with a pin) and his stamp ---------- */
.pp { position: relative; overflow: hidden; background: var(--nacht-700); margin: 0; }
.pp .ph img { transition: transform .6s; }
.pp:hover .ph img { transform: scale(1.025); }
.pp--tall { aspect-ratio: 4 / 5; }
.pp--wide { aspect-ratio: 3 / 2; }

.plabel {
  position: absolute; left: 0; bottom: 0; z-index: 2;
  display: flex; flex-direction: column; gap: 7px;
  max-width: calc(100% - 20px);
  padding: 13px 20px 14px 15px;
  background: var(--nacht-900); color: var(--kalk-100);
  border-top: 3px solid var(--dakpan-400);
}
.pl-where { display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 10px; }
.pl-where .ic { width: 20px; height: 20px; color: var(--dakpan-400); align-self: center; }
.pl-place { font: 500 clamp(21px, 1.9vw, 26px)/1.1 var(--f-serif); letter-spacing: -.005em; }
.pl-date { font: 700 11.5px/1 var(--f-caps); letter-spacing: .2em; text-transform: uppercase; color: var(--lood-300); }
.pl-link {
  display: inline-flex; align-items: center; gap: 6px; align-self: flex-start;
  font: 600 14.5px/1.2 var(--f-sans); color: var(--dakpan-200); text-decoration: none;
  padding-left: 30px;
}
.pl-link .ic { width: 16px; height: 16px; transition: transform .2s; }
.pl-link:hover { color: var(--dakpan-400); text-decoration: underline; text-underline-offset: 3px; }
.pl-link:hover .ic { transform: translateX(3px); }

/* the stamp: the lockup in small — R.A. with the mark, Vastgoed Onderhoud under it — laid over the photo in kalk */
.stamp {
  position: absolute; top: 14px; right: 16px; z-index: 2;
  display: grid; grid-template-columns: auto auto; align-items: end; column-gap: .06em;
  font-size: 24px; color: var(--kalk-50); opacity: .94; pointer-events: none;
  filter: drop-shadow(0 1px 1px var(--nacht-900)) drop-shadow(0 0 7px var(--veil));
}
.st-name { display: contents; }
.st-ra { grid-area: 1 / 1; font: 500 1em/1 var(--f-serif); }
.stamp .mk { grid-area: 1 / 2; width: 1.82em; height: .99em; margin-bottom: .07em; }
.st-vo { grid-area: 2 / 1 / 3 / 3; font: 500 .49em/1.05 var(--f-sans); margin-top: .1em; white-space: nowrap; }

/* ---------- the row of thumbnails under a principal photo, and the line that counts the series ---------- */
.thumbs { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px 20px; margin-top: 10px; }
.th-row { display: grid; grid-auto-flow: column; grid-auto-columns: 64px; gap: 6px; }
.th {
  position: relative; display: block; aspect-ratio: 1; padding: 0; border: 0; overflow: hidden;
  background: var(--nacht-700); cursor: zoom-in; border-radius: 2px;
}
.th img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s; }
.th:hover img { transform: scale(1.08); }
.th--more span {
  position: absolute; inset: 0; display: grid; place-items: center;
  background: var(--veil); color: var(--kalk-100); font: 600 19px/1 var(--f-sans);
}
.th-count {
  display: inline-flex; align-items: center; gap: 8px; padding: 10px 0; border: 0; background: none; cursor: pointer;
  font: 700 11.5px/1 var(--f-caps); letter-spacing: .18em; text-transform: uppercase; color: var(--dakpan-700);
}
.th-count .ic { width: 16px; height: 16px; transition: transform .2s; }
.th-count:hover .ic { transform: translateX(3px); }
.dark .th-count { color: var(--dakpan-400); }

/* ============ EVEN VOORSTELLEN ============ */
.intro { background: var(--kalk-100); padding: clamp(56px, 7vw, 104px) 0 clamp(48px, 6vw, 88px); }
.intro-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
.intro-portrait { position: relative; aspect-ratio: 4 / 5; overflow: hidden; border-top: 4px solid var(--dakpan-400); background: var(--nacht-700); }
.intro-portrait img { width: 100%; height: 100%; object-fit: cover; object-position: 40% 30%; }
.intro-portrait::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, transparent 46%, var(--veil) 76%, var(--nacht-900) 100%);
}
.intro-hi {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 1;
  display: flex; flex-direction: column; align-items: flex-start;
  padding: 0 clamp(20px, 3vw, 40px) clamp(22px, 3vw, 38px);
  color: var(--kalk-100);
}
.hi-1 { font: 500 clamp(17px, 1.5vw, 21px)/1.2 var(--f-sans); color: var(--lood-200); }
.hi-2 {
  font: 600 clamp(76px, 8.6vw, 124px)/.86 var(--f-hand); color: var(--kalk-50);
  transform: rotate(-3deg); transform-origin: left bottom; margin: .1em 0 .2em -.04em;
}
.hi-3 { font: 700 clamp(10.5px, .9vw, 12.5px)/1.35 var(--f-caps); letter-spacing: .22em; text-transform: uppercase; color: var(--lood-300); }

.intro-side .caps { font-size: 13px; margin-bottom: 22px; }
.facts { list-style: none; border-top: 1.5px solid var(--nacht-800); }
.fact {
  display: grid; grid-template-columns: clamp(120px, 12vw, 176px) minmax(0, 1fr); align-items: center;
  gap: clamp(18px, 2.2vw, 30px); padding: clamp(18px, 2.2vw, 28px) 0;
  border-bottom: 1px solid var(--lood-300);
}
.fact-pic { aspect-ratio: 3 / 2; height: auto; overflow: hidden; border-radius: var(--radius); background: var(--nacht-700); }
.fact-pic img { transition: transform .4s; }
.fact-pic:hover img { transform: scale(1.05); }
.fact:nth-child(1) .fact-pic img { object-position: 40% 50%; }
.fact:nth-child(3) .fact-pic img { object-position: 50% 30%; }
.fact-h { font: 500 clamp(24px, 2.3vw, 32px)/1.12 var(--f-serif); letter-spacing: -.008em; color: var(--nacht-800); margin-bottom: 7px; }
.fact-l { margin: 0; color: var(--lood-600); max-width: 44ch; }

/* ---------- the services card, laid over the seam between Even voorstellen and dakrenovatie ---------- */
.seam--diensten { position: relative; z-index: 2; background: linear-gradient(var(--kalk-100) 50%, var(--nacht-800) 50%); }
.dk.wrap {
  width: calc(100% - 2 * var(--gutter)); max-width: var(--max); padding: 18px 0 0;
  background: var(--kalk-50);
  border: 1px solid var(--lood-300); border-top: 4px solid var(--dakpan-400);
  box-shadow: 0 40px 80px -56px var(--shadow);
}
.dk-label { margin: 0 0 14px; padding: 0 22px; color: var(--dakpan-700); }
.dk-list { list-style: none; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border-top: 1px solid var(--lood-300); }
.dk-list li + li { border-left: 1px solid var(--lood-300); }
.dk-list a {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  min-height: 74px; padding: 14px 18px 14px 22px;
  font: 500 clamp(17px, 1.45vw, 20px)/1.15 var(--f-serif); color: var(--nacht-800); text-decoration: none;
  transition: background-color .15s, color .15s;
}
.dk-list a .ic { width: 20px; height: 20px; color: var(--dakpan-700); transform: rotate(90deg); transition: transform .2s; }
.dk-list a:hover { background: var(--kalk-200); color: var(--dakpan-700); }
.dk-list a:hover .ic { transform: rotate(90deg) translateX(3px); }

/* ============ DAKRENOVATIE — the service card, its foot over the seam into schoorsteen renovatie ============ */
.reno {
  --reach: clamp(90px, 11vw, 150px);
  background: linear-gradient(var(--nacht-800) calc(100% - var(--reach)), var(--kalk-50) 0);
  padding: clamp(56px, 7vw, 100px) 0 0;
}
.rc {
  background: var(--kalk-50); color: var(--nacht-800);
  border-top: 4px solid var(--dakpan-400);
  box-shadow: 0 50px 90px -60px var(--shadow);
  outline: 1px solid var(--lood-300); outline-offset: 0;
}
.rc-photo { height: clamp(250px, 33vw, 480px); }
.rc-photo .ph img { object-position: 50% 44%; }
.rc-thumbs { margin: 0; padding: 12px clamp(20px, 4vw, 56px); background: var(--kalk-200); border-bottom: 1px solid var(--lood-300); }
.rc-body {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(28px, 5vw, 80px); align-items: start;
  padding: clamp(32px, 4.4vw, 60px) clamp(24px, 4vw, 56px);
}
.rc-sub { margin: 20px 0 0; font: 500 italic clamp(24px, 2.3vw, 32px)/1.25 var(--f-serif); color: var(--nacht-700); max-width: 22ch; text-wrap: balance; }
.rc-list { list-style: none; border-top: 1.5px solid var(--nacht-800); margin-top: 8px; }
.rc-list li {
  position: relative; padding: 17px 0 17px 34px; border-bottom: 1px solid var(--lood-300);
  font: 600 clamp(20px, 1.75vw, 24px)/1.25 var(--f-cond); color: var(--nacht-800);
}
.rc-list li::before { content: ""; position: absolute; left: 2px; top: calc(17px + .36em); width: 12px; height: 12px; background: var(--dakpan-400); }
.rc-foot {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 20px 32px;
  padding: 20px clamp(24px, 4vw, 56px);
  background: var(--kalk-200); border-top: 1px solid var(--lood-300);
}
.rc-foot .actions { margin-top: 0; }
.weld { display: flex; align-items: center; gap: 18px; text-decoration: none; color: inherit; }
.faces { display: flex; }
.faces span {
  width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--nacht-800); color: var(--dakpan-400);
  font: 500 19px/1 var(--f-serif);
  box-shadow: 0 0 0 3px var(--kalk-200);
}
.faces span + span { margin-left: -9px; }
.faces span:nth-child(2) { background: var(--nacht-700); }
.faces span:nth-child(3) { background: var(--nacht-600); color: var(--dakpan-200); }
.faces span:nth-child(4) { background: var(--lood-600); color: var(--kalk-100); }
.faces span:nth-child(5) { background: var(--dakpan-700); color: var(--kalk-100); }
.weld-txt { display: flex; flex-direction: column; gap: 4px; }
.weld-say { font: 500 italic 21px/1.2 var(--f-serif); color: var(--nacht-800); }
.weld-score { font-size: 15px; color: var(--lood-600); }
.weld-score b { color: var(--nacht-800); font-weight: 600; }
.weld-score .stars { color: var(--dakpan-500); margin-right: 4px; transform: translateY(-1px); }
.weld:hover .ko-mark { color: var(--dakpan-700); text-decoration: underline; text-underline-offset: 3px; }

/* ============ THE OTHER FOUR SERVICES — one ladder of type each, the same steps in all four ============ */
.svc { padding: var(--sec-y) 0; }
.svc--schoorsteen { background: var(--kalk-50); padding-top: clamp(64px, 7vw, 100px); }
.svc--onderhoud { background: var(--kalk-100); }
.svc--dakkapel { background: var(--nacht-800); color: var(--lood-300); }
.svc--voeg { background: var(--kalk-200); }

.svc-grid { display: grid; column-gap: clamp(36px, 6vw, 96px); align-items: start; }
.ladder { grid-area: ladder; }
.svc-media { grid-area: media; }
.svc .duo { grid-area: pair; }
.svc-act { grid-area: act; margin-top: 34px; }

.svc--schoorsteen .svc-grid {
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  grid-template-areas: "media ." "media ladder" "media act" "media .";
  grid-template-rows: 1fr auto auto 1fr;
}
.svc--onderhoud .svc-grid {
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  grid-template-areas: ". media" "ladder media" "act media" ". media";
  grid-template-rows: 1fr auto auto 1fr;
}
.svc--dakkapel .svc-grid {
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  grid-template-areas: "media ." "media ladder" "media ." "pair pair" "act act";
  grid-template-rows: 1fr auto 1fr auto auto;
}
.svc--voeg .svc-grid {
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  grid-template-areas: "ladder media" "pair media" "act media";
  grid-template-rows: auto auto 1fr;
}

/* the ladder: the heading the largest, the second heading a step down, the list a step down again */
.lad-h { font: 500 clamp(40px, 4.6vw, 66px)/1.02 var(--f-serif); letter-spacing: -.016em; color: var(--nacht-800); }
.lad-h a {
  color: inherit;
  text-decoration: underline; text-decoration-color: var(--dakpan-400);
  text-decoration-thickness: 2px; text-underline-offset: .15em;
  transition: color .15s;
}
.lad-h a:hover { color: var(--dakpan-700); }
.dark .lad-h { color: var(--kalk-100); }
.dark .lad-h a:hover { color: var(--dakpan-200); }
.lad-s { margin: 18px 0 0; font: 500 italic clamp(26px, 2.8vw, 40px)/1.15 var(--f-serif); color: var(--nacht-700); max-width: 19ch; text-wrap: balance; }
.dark .lad-s { color: var(--lood-200); }
.lad-l { list-style: none; margin-top: clamp(26px, 2.8vw, 36px); border-top: 1.5px solid var(--nacht-800); }
.lad-l li {
  position: relative; padding: 13px 0 13px 28px; border-bottom: 1px solid var(--lood-300);
  font: 600 clamp(19px, 1.6vw, 22px)/1.3 var(--f-cond); color: var(--nacht-800);
}
.lad-l li::before { content: ""; position: absolute; left: 2px; top: calc(13px + .42em); width: 10px; height: 10px; background: var(--dakpan-400); }
.dark .lad-l { border-top-color: var(--lood-300); }
.dark .lad-l li { border-bottom-color: var(--nacht-600); color: var(--kalk-100); }
.svc--voeg .lad-l li { border-bottom-color: var(--lood-400); }

.svc--schoorsteen .pp .ph img { object-position: 50% 42%; }
.svc--onderhoud .pp .ph img { object-position: 50% 50%; }
.svc--dakkapel .pp .ph img { object-position: 50% 38%; }
.svc--voeg .pp .ph img { object-position: 50% 45%; }
.svc--dakkapel .pp { outline: 1px solid var(--nacht-600); }

/* ---------- the before-and-after pair ---------- */
.duo { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin: 0; }
.svc--dakkapel .duo { margin-top: clamp(48px, 6vw, 80px); }
.svc--voeg .duo { margin-top: 34px; }
.duo-half { position: relative; aspect-ratio: 3 / 2; overflow: hidden; background: var(--nacht-700); }
.duo-half img { transition: transform .5s; }
.duo-half:hover img { transform: scale(1.03); }
.svc--dakkapel .duo-half img { object-position: 50% 30%; }
.duo-lbl {
  position: absolute; top: 12px; left: 12px;
  font: 700 11px/1 var(--f-caps); letter-spacing: .2em; text-transform: uppercase;
  padding: 8px 11px; background: var(--nacht-900); color: var(--kalk-100);
}
.duo-lbl--na { background: var(--dakpan-400); color: var(--nacht-800); }
.duo-cap {
  grid-column: 1 / -1; display: inline-flex; align-items: center; gap: 6px; margin-top: 6px;
  font: 700 11px/1 var(--f-caps); letter-spacing: .14em; text-transform: uppercase; color: var(--lood-600);
}
.duo-cap .ic { width: 15px; height: 15px; color: var(--dakpan-700); }
.dark .duo-cap { color: var(--lood-300); }
.dark .duo-cap .ic { color: var(--dakpan-400); }

/* ============ THE ONE-BREATH BANDS ============ */
.band { padding: clamp(26px, 3vw, 38px) 0; }
.band-in { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 18px 40px; }
.band-h { font: 500 italic clamp(24px, 2.4vw, 32px)/1.2 var(--f-serif); margin: 0; }
.band-l { margin: 6px 0 0; font-size: 17px; }
.band--foto { background: var(--nacht-800); color: var(--lood-300); }
.band--foto .band-h { color: var(--kalk-100); }
/* a strip of lead, tucked into the joint along its top */
.band--lood { background: linear-gradient(180deg, var(--lood-200) 0%, var(--lood-300) 100%); color: var(--nacht-800); box-shadow: inset 0 3px 0 var(--lood-400); }
.band--lood .band-l { color: var(--nacht-700); }
.band--actie { background: var(--dakpan-200); color: var(--nacht-800); }
.band--actie .btn .ic { transition: transform .2s; }
.band--actie .btn:hover .ic { transform: translateX(3px); }
.band--lint { background: var(--nacht-900); color: var(--lood-300); padding: 22px 0; border-top: 1px solid var(--nacht-700); }
.lint-in { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 32px; }
.lint-h { margin: 0; font: 700 12px/1 var(--f-caps); letter-spacing: .24em; text-transform: uppercase; color: var(--dakpan-400); white-space: nowrap; }
.lint-h a { color: inherit; text-decoration: none; }
.lint-h a:hover { text-decoration: underline; text-underline-offset: 4px; }
.lint-l { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; font: 500 italic clamp(17px, 1.5vw, 20px)/1.3 var(--f-serif); color: var(--kalk-100); }
.lint-l .mk { width: 18px; height: 10px; color: var(--dakpan-400); }

/* ============ PROJECTEN — the endless carousel ============ */
.projects { background: var(--nacht-900); color: var(--lood-300); padding: var(--sec-y) 0; overflow: hidden; }
.proj-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: clamp(28px, 3.4vw, 44px); }
.projects h2 { font: 500 clamp(32px, 3.6vw, 50px)/1.1 var(--f-serif); letter-spacing: -.012em; color: var(--kalk-100); }
.proj-intro { margin: 14px 0 0; max-width: 46ch; }
.car-nav { display: flex; gap: 8px; flex: none; }
.car-btn {
  width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; cursor: pointer;
  border: 1px solid var(--nacht-600); background: none; color: var(--kalk-100); transition: border-color .15s, color .15s;
}
.car-btn:hover { border-color: var(--dakpan-400); color: var(--dakpan-400); }
.car-btn[data-dir="-1"] .ic { transform: rotate(180deg); }
.car { overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.car::-webkit-scrollbar { display: none; }
.car-track { list-style: none; display: flex; gap: clamp(14px, 1.6vw, 22px); width: max-content; padding: 0 clamp(14px, 1.6vw, 22px) 0 0; }
.pcard { flex: none; width: clamp(264px, 25vw, 372px); }
.pc-btn {
  display: flex; flex-direction: column; width: 100%; height: 100%; padding: 0; text-align: left; cursor: zoom-in;
  background: var(--nacht-800); color: inherit; border: 0; border-top: 3px solid var(--dakpan-400);
}
.pc-photo { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--nacht-700); }
.pc-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.pc-btn:hover .pc-photo img { transform: scale(1.04); }
.pc-photo .stamp { font-size: 18px; top: 12px; right: 13px; }
.pc-label {
  position: absolute; left: 0; bottom: 0; display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 9px;
  max-width: calc(100% - 16px); padding: 11px 16px 12px 13px;
  background: var(--nacht-900); color: var(--kalk-100);
}
.pc-label .ic { width: 18px; height: 18px; color: var(--dakpan-400); align-self: center; }
.pc-label .pl-place { font-size: 21px; }
.pc-body { display: flex; flex-direction: column; gap: 8px; padding: 18px 20px 22px; }
.pc-svc { font: 700 11px/1 var(--f-caps); letter-spacing: .2em; text-transform: uppercase; color: var(--dakpan-400); }
.pc-txt { font-size: 16.5px; line-height: 1.45; color: var(--lood-200); }
.proj-act { margin-top: clamp(32px, 4vw, 48px); }

/* ============ STAAT UW KLUS ER NIET BIJ? ============ */
.klus { background: var(--dakpan-400); color: var(--nacht-800); padding: clamp(52px, 6.4vw, 92px) 0; }
.klus-in { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 20px 56px; }
.klus-q { grid-column: 1; font: 500 clamp(38px, 5vw, 72px)/1.02 var(--f-serif); letter-spacing: -.016em; }
.klus-say { grid-column: 1; margin: 0; font-size: 19px; line-height: 1.5; max-width: 44ch; text-wrap: pretty; }
.klus .pair { grid-column: 2; grid-row: 1 / span 2; }

/* ============ DE EIGENAAR ============ */
.owner { background: var(--kalk-100); padding: var(--sec-y) 0; }
.owner-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
.owner-photo { position: relative; aspect-ratio: 4 / 5; overflow: hidden; border-top: 4px solid var(--dakpan-400); background: var(--nacht-700); }
.owner-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 38% 22%; transform: scale(1.45); transform-origin: 38% 14%; }
.owner-text h2 { font: 500 clamp(34px, 3.8vw, 54px)/1.08 var(--f-serif); letter-spacing: -.012em; margin-bottom: 28px; max-width: 16ch; }
.owner-voice { border-left: 2px solid var(--dakpan-400); padding-left: 26px; }
.owner-voice p { color: var(--lood-600); max-width: 50ch; font-size: 18px; }
.owner-voice p:first-child { font: 500 italic 25px/1.35 var(--f-serif); color: var(--nacht-800); }
.owner-voice .owner-sign { font: 600 50px/1 var(--f-hand); color: var(--nacht-800); transform: rotate(-3deg); transform-origin: left; margin: 6px 0 0; }

/* ============ OVER ONS + WERKGEBIED — one dark chapter ============ */
.chapter { padding: var(--sec-y) 0; }
.about-grid {
  display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); column-gap: clamp(32px, 6vw, 96px); align-items: center;
  grid-template-areas: "text photo" "act photo"; grid-template-rows: auto auto;
}
.about-text { grid-area: text; }
.about-photo { grid-area: photo; }
.about-act { grid-area: act; align-self: start; }
.about-text h2 { font: 500 clamp(32px, 3.6vw, 50px)/1.1 var(--f-serif); letter-spacing: -.012em; margin-bottom: 22px; max-width: 18ch; }
.about-lede { font: 500 21px/1.45 var(--f-sans); color: var(--kalk-100); }
.werkwijze { margin: 26px 0 0; border-top: 1.5px solid var(--lood-300); }
.werkwijze > div { display: grid; grid-template-columns: 128px minmax(0, 1fr); gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--nacht-600); }
.werkwijze dt { font: 700 11.5px/1.5 var(--f-caps); letter-spacing: .18em; text-transform: uppercase; color: var(--dakpan-400); padding-top: 3px; }
.werkwijze dd { margin: 0; color: var(--kalk-100); }
.about-act.actions { margin-top: 30px; }
.about-photo { position: relative; aspect-ratio: 4 / 3; overflow: hidden; border-top: 4px solid var(--dakpan-400); }
.about-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 60% 50%; }

.area { padding-top: clamp(56px, 7vw, 96px); }
.area-rule { display: flex; align-items: center; gap: 18px; margin-bottom: clamp(48px, 6vw, 80px); }
.area-rule::before, .area-rule::after { content: ""; height: 1px; background: var(--nacht-600); flex: 1; }
.area-rule .mk { width: 46px; height: 25px; color: var(--dakpan-400); }
.area-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(28px, 5vw, 72px); align-items: stretch; }
.area-map { min-height: 540px; position: relative; }
.map { position: absolute; inset: 0; background: var(--nacht-700); outline: 1px solid var(--nacht-600); }
.area-side h2 { font: 500 clamp(30px, 3.2vw, 44px)/1.1 var(--f-serif); margin-bottom: 14px; }
.area-lede { color: var(--kalk-100); font-size: 18px; margin-bottom: 18px; }
.places { list-style: none; columns: 2; column-gap: 28px; border-top: 1px solid var(--nacht-600); margin-bottom: 24px; }
.places li { break-inside: avoid; padding: 8px 0; border-bottom: 1px solid var(--nacht-600); font-size: 15.5px; color: var(--lood-300); }
.places b { font-weight: 600; color: var(--dakpan-400); }
.area-photo { aspect-ratio: 16 / 7; overflow: hidden; position: relative; margin-bottom: 24px; }
.area-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 60%; }

/* leaflet, in the house colours */
.leaflet-container { font-family: var(--f-sans); background: var(--nacht-700); }
.leaflet-tile-pane { filter: sepia(.6) hue-rotate(180deg) saturate(1.9) brightness(.78) contrast(1.05); }
.leaflet-control-attribution { background: var(--nacht-900) !important; color: var(--lood-400) !important; font-size: 10px; }
.leaflet-control-attribution a { color: var(--lood-300) !important; }
.leaflet-bar a { background: var(--nacht-800); color: var(--kalk-100); border-bottom-color: var(--nacht-600); }
.leaflet-bar a:hover { background: var(--nacht-700); color: var(--dakpan-400); }
.leaflet-bar { border: 1px solid var(--nacht-600) !important; box-shadow: none !important; }
.leaflet-tooltip.place-tip {
  background: transparent; border: 0; box-shadow: none; padding: 0 0 0 4px;
  color: var(--kalk-100); font: 600 12.5px/1 var(--f-sans);
  text-shadow: 0 0 3px var(--nacht-900), 0 0 6px var(--nacht-900), 0 0 2px var(--nacht-900);
}
.leaflet-tooltip.place-tip::before { display: none; }
.leaflet-tooltip.place-tip--home { font: 500 17px/1 var(--f-serif); color: var(--dakpan-400); }

/* ============ REVIEWS ============ */
.reviews { background: var(--kalk-200); padding: var(--sec-y) 0; }
.rev-head { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 24px 48px; margin-bottom: clamp(28px, 4vw, 48px); }
.rev-head h2 { font: 500 clamp(32px, 3.6vw, 50px)/1.1 var(--f-serif); letter-spacing: -.012em; }
/* the rating element: quieter than the cards; the platform first, its stars second, the count under */
.ko { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; padding-left: 28px; border-left: 1px solid var(--lood-400); text-decoration: none; color: var(--nacht-800); }
.ko-name { display: inline-flex; align-items: center; gap: 7px; font: 600 22px/1.2 var(--f-sans); }
.ko-name .ic { width: 19px; height: 19px; color: var(--dakpan-700); }
.ko-score { display: flex; align-items: center; gap: 8px; font-size: 17px; }
.ko-score .stars { color: var(--dakpan-500); }
.ko-score .stars svg { width: 16px; height: 16px; }
.ko-score b { font-weight: 600; }
.ko-count { font-size: 14px; color: var(--lood-600); }
.ko:hover .ko-name { color: var(--dakpan-700); }
.rev-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(16px, 2vw, 24px); }
.rev {
  position: relative;
  background: var(--kalk-50); border: 1px solid var(--lood-300); border-top: 3px solid var(--nacht-800);
  padding: clamp(22px, 2.6vw, 34px);
  display: flex; flex-direction: column;
  box-shadow: 0 30px 50px -44px var(--shadow);
  transition: border-color .15s;
}
.rev:hover { border-color: var(--lood-400); border-top-color: var(--dakpan-400); }
.rev-top { display: flex; align-items: center; gap: 14px; }
.av {
  width: 48px; height: 48px; border-radius: 50%; flex: none; display: grid; place-items: center;
  background: var(--nacht-800); color: var(--dakpan-400); font: 500 21px/1 var(--f-serif);
}
.rev-name { display: block; font-weight: 600; font-size: 17px; color: var(--nacht-800); }
.rev-meta { display: block; font-size: 14px; color: var(--lood-600); }
.rev-stars { margin: 16px 0 10px; }
.rev-stars .stars { color: var(--dakpan-500); }
.rev-stars .stars svg { width: 22px; height: 22px; }
.rev-title { font: 600 18px/1.35 var(--f-sans); color: var(--nacht-800); margin: 0 0 8px; }
.rev blockquote { margin: 0 0 20px; font-size: 17px; line-height: 1.6; color: var(--nacht-700); flex: 1; }
.rev-via {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding-top: 14px; border-top: 1px solid var(--kalk-200); text-decoration: none;
}
.rev-via::after { content: ""; position: absolute; inset: 0; }
.ko-badge { display: inline-flex; align-items: center; gap: 6px; font: 700 11.5px/1 var(--f-caps); letter-spacing: .14em; text-transform: uppercase; color: var(--nacht-800); }
.ko-badge .ic { width: 15px; height: 15px; color: var(--dakpan-700); }
.rev-go { font-size: 14px; color: var(--dakpan-700); }
.rev:hover .rev-go { text-decoration: underline; text-underline-offset: 3px; }
.sec-act { margin-top: clamp(28px, 4vw, 44px); display: flex; }

/* ============ VRAGEN ============ */
.faq { background: var(--kalk-100); padding: var(--sec-y) 0; }
.faq-grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.faq-intro { position: sticky; top: 108px; }
.faq-intro h2 { font: 500 clamp(32px, 3.6vw, 50px)/1.1 var(--f-serif); letter-spacing: -.012em; margin-bottom: 18px; }
.faq-intro p { color: var(--lood-600); }
.faq-list { border-top: 1.5px solid var(--nacht-800); }
.faq details { border-bottom: 1px solid var(--lood-300); }
.faq summary {
  list-style: none; cursor: pointer;
  display: flex; justify-content: space-between; align-items: center; gap: 20px;
  padding: 21px 0;
  font: 600 clamp(20px, 1.9vw, 24px)/1.2 var(--f-cond); color: var(--nacht-800);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; flex: none; width: 13px; height: 13px;
  border-right: 2px solid var(--dakpan-700); border-bottom: 2px solid var(--dakpan-700);
  transform: rotate(45deg) translate(-3px, -3px); transition: transform .2s;
}
.faq details[open] summary::after { transform: rotate(225deg) translate(-3px, -3px); }
.faq summary:hover { color: var(--dakpan-700); }
.faq details p { color: var(--lood-600); margin: -6px 0 22px; max-width: 62ch; }
.faq-more { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px 32px; margin-top: 32px; }
.faq-more p { margin: 0; color: var(--lood-600); }

/* ============ CONTACT — the form laid over the seam ============ */
.contact { background: var(--nacht-800); color: var(--lood-300); padding: var(--sec-y) 0; }
.contact-grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.contact-info h2 { font: 500 clamp(36px, 4.2vw, 60px)/1.05 var(--f-serif); letter-spacing: -.014em; color: var(--kalk-100); margin-bottom: 20px; }
.contact-info > p { max-width: 50ch; }
.pair--contact { margin: 28px 0 36px; }
.nap { margin: 0; border-top: 1px solid var(--nacht-600); }
.nap > div { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--nacht-600); }
.nap dt { display: flex; align-items: center; gap: 10px; font: 700 11.5px/1.2 var(--f-caps); letter-spacing: .18em; text-transform: uppercase; color: var(--lood-400); }
.nap dt .ic { width: 17px; height: 17px; color: var(--dakpan-400); }
.nap dd { margin: 0; color: var(--kalk-100); }
.nap a { color: var(--kalk-100); text-decoration-color: var(--dakpan-400); text-underline-offset: 4px; overflow-wrap: anywhere; }

.form {
  background: var(--kalk-50); color: var(--nacht-800);
  padding: clamp(24px, 3vw, 40px);
  border: 1px solid var(--lood-300); border-top: 4px solid var(--dakpan-400);
  box-shadow: 0 40px 80px -56px var(--shadow);
}
.form-title { font: 500 26px/1.2 var(--f-serif); margin-bottom: 20px; }
.fld { display: block; margin-bottom: 16px; }
.fld > span { display: block; font-weight: 600; font-size: 15px; margin-bottom: 6px; }
.fld em { font-style: normal; font-weight: 400; color: var(--lood-600); }
.fld input, .fld textarea {
  width: 100%; display: block;
  font: 400 17px/1.4 var(--f-sans); color: var(--nacht-800);
  background: var(--wit); border: 1px solid var(--lood-300); border-radius: var(--radius);
  padding: 13px 14px;
}
.fld textarea { resize: vertical; min-height: 120px; }
.fld input:focus, .fld textarea:focus { outline: 2px solid var(--dakpan-400); outline-offset: 0; border-color: var(--dakpan-400); }
.fld input:user-invalid, .fld textarea:user-invalid { border-color: var(--steen); }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.form .btn-block { margin-top: 6px; }
.form-note { font-size: 14px; color: var(--lood-600); margin: 14px 0 0; }
@media (min-width: 1061px) {
  .faq { padding-bottom: calc(var(--sec-y) * .7); }
  .contact { background: linear-gradient(var(--kalk-100) var(--lap), var(--nacht-800) var(--lap)); padding-top: 0; }
  .contact-info { padding-top: calc(var(--lap) + var(--sec-y) * .7); }
}

/* ============ FOOTER ============ */
.footer { background: var(--nacht-900); color: var(--lood-400); padding: clamp(56px, 6vw, 84px) 0 0; font-size: 15px; }
.foot-grid { display: grid; grid-template-columns: 1.4fr 1fr 1.2fr 1fr; gap: 40px; padding-bottom: 48px; }
.foot-line { margin: 18px 0 0; color: var(--lood-300); }
.foot-col .caps { color: var(--kalk-100); }
.foot-col ul { list-style: none; display: grid; gap: 10px; }
.foot-col a { color: var(--lood-300); text-decoration: none; overflow-wrap: anywhere; }
.foot-col a:hover { color: var(--dakpan-400); }
.foot-wa { display: inline-flex; align-items: center; gap: 8px; }
.foot-wa .ic { width: 17px; height: 17px; color: var(--wa); }
.foot-places { color: var(--lood-300); margin: 0; }
.foot-base { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px 16px; padding-top: 22px; padding-bottom: 26px; border-top: 1px solid var(--nacht-700); font-size: 14px; }
.foot-base a { color: var(--lood-300); text-decoration: none; }
.foot-base a:hover { color: var(--dakpan-400); }

/* ============ THE VIEWER ============ */
.viewer {
  position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none;
  margin: 0; padding: 0; border: 0; overflow: hidden;
  background: var(--scrim); color: var(--lood-300);
}
.viewer::backdrop { background: var(--scrim); }
html.vw-open { overflow: hidden; }
.vw { display: grid; grid-template-rows: auto minmax(0, 1fr) auto auto; height: 100%; }
.vw-top { display: flex; align-items: center; gap: 16px; padding: 10px clamp(14px, 3vw, 32px); border-bottom: 1px solid var(--nacht-700); }
.vw-title { margin: 0; display: flex; align-items: center; gap: 10px; min-width: 0; font: 500 clamp(18px, 1.7vw, 22px)/1.1 var(--f-serif); color: var(--kalk-100); }
.vw-title .mk { width: 30px; height: 16px; color: var(--dakpan-400); flex: none; }
.vw-pos { margin: 0 0 0 auto; font: 700 12px/1 var(--f-caps); letter-spacing: .18em; color: var(--lood-300); font-variant-numeric: tabular-nums; white-space: nowrap; }
.vw-close {
  position: relative; flex: none; width: 46px; height: 46px; border-radius: 50%; cursor: pointer;
  border: 1px solid var(--nacht-600); background: none; color: var(--kalk-100);
}
.vw-close:hover { border-color: var(--dakpan-400); color: var(--dakpan-400); }
.vw-close span::before, .vw-close span::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 18px; height: 1.8px; background: currentColor;
  transform: translate(-50%, -50%) rotate(45deg);
}
.vw-close span::after { transform: translate(-50%, -50%) rotate(-45deg); }
.vw-stage { position: relative; min-height: 0; display: flex; align-items: center; justify-content: center; padding: 14px clamp(12px, 7vw, 104px); touch-action: pan-y; }
.vw-fig { margin: 0; height: 100%; max-width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 0; }
.vw-img { display: block; max-width: 100%; max-height: calc(100% - 52px); width: auto; height: auto; min-height: 0; object-fit: contain; user-select: none; -webkit-user-drag: none; }
.vw-label { display: flex; align-items: baseline; flex-wrap: wrap; justify-content: center; gap: 2px 10px; margin-top: 12px; color: var(--kalk-100); }
.vw-label .ic { width: 22px; height: 22px; color: var(--dakpan-400); align-self: center; }
.vw-place { font: 500 clamp(22px, 2.3vw, 30px)/1.1 var(--f-serif); }
.vw-date { font: 700 12px/1 var(--f-caps); letter-spacing: .2em; text-transform: uppercase; color: var(--lood-300); }
.vw-nav {
  position: absolute; top: 50%; z-index: 2; width: 54px; height: 54px; margin-top: -40px; border-radius: 50%;
  display: grid; place-items: center; cursor: pointer;
  border: 1px solid var(--nacht-600); background: var(--veil); color: var(--kalk-100);
}
.vw-nav:hover { border-color: var(--dakpan-400); color: var(--dakpan-400); }
.vw-prev { left: clamp(10px, 2vw, 32px); }
.vw-prev .ic { transform: rotate(180deg); }
.vw-next { right: clamp(10px, 2vw, 32px); }
.vw-strip {
  display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none;
  padding: 10px clamp(14px, 3vw, 32px); justify-content: safe center;
}
.vw-strip::-webkit-scrollbar { display: none; }
.vw-th { flex: none; width: 64px; height: 48px; padding: 0; border: 0; cursor: pointer; background: var(--nacht-700); opacity: .5; transition: opacity .15s; }
.vw-th img { width: 100%; height: 100%; object-fit: cover; }
.vw-th:hover { opacity: .85; }
.vw-th[aria-current="true"] { opacity: 1; outline: 2px solid var(--dakpan-400); outline-offset: 2px; }
.vw-cta {
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 10px 24px;
  padding: 12px clamp(14px, 3vw, 32px) calc(12px + env(safe-area-inset-bottom));
  background: var(--nacht-900); border-top: 1px solid var(--nacht-700);
}
.vw-ask { margin: 0; font: 500 italic clamp(19px, 1.8vw, 24px)/1.2 var(--f-serif); color: var(--kalk-100); }
.vw-pair { display: flex; gap: 8px; }
.vw-pair .btn { min-height: 48px; }

/* ============ RESPONSIVE (the rest) ============ */
@media (max-width: 1060px) {
  .dk-list { grid-template-columns: 1fr; }
  .dk-list li + li { border-left: 0; border-top: 1px solid var(--lood-300); }
  .dk-list a { min-height: 54px; padding: 10px 20px 10px 22px; }
  .foot-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 900px) {
  .rc-body { grid-template-columns: 1fr; }
  .svc-grid, .svc--schoorsteen .svc-grid, .svc--onderhoud .svc-grid, .svc--dakkapel .svc-grid, .svc--voeg .svc-grid {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "ladder" "media" "pair" "act";
    grid-template-rows: auto;
  }
  .svc-media { margin-top: 32px; }
  .svc .duo, .svc--dakkapel .duo, .svc--voeg .duo { margin-top: 28px; }
  .pp--tall { aspect-ratio: 4 / 3; }
  .klus-in { grid-template-columns: 1fr; }
  .klus .pair { grid-column: 1; grid-row: auto; }
  .intro-grid { grid-template-columns: minmax(0, 1fr); row-gap: 36px; }
  .intro-portrait { aspect-ratio: 4 / 3; }
  .intro-portrait img { object-position: 40% 24%; }
  .facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: clamp(16px, 3vw, 28px); }
  .fact { grid-template-columns: minmax(0, 1fr); align-items: start; align-content: start; gap: 14px; padding: 22px 0 0; border-bottom: 0; }
  .fact-h { font-size: clamp(21px, 2.8vw, 25px); }
  .fact-l { font-size: 16px; }
  .owner-grid, .about-grid, .area-grid, .faq-grid, .contact-grid { grid-template-columns: minmax(0, 1fr); }
  .about-grid { grid-template-areas: "text" "photo" "act"; row-gap: 28px; }
  .about-act.actions { margin-top: 0; }
  .owner-photo { aspect-ratio: 4 / 3; max-width: 640px; }
  .owner-photo img { transform: scale(1.2); object-position: 40% 18%; transform-origin: 40% 18%; }
  .area-map { min-height: 420px; }
  .faq-intro { position: static; }
}
@media (max-width: 760px) {
  .intro-portrait { aspect-ratio: 5 / 6; }
  .intro-portrait img { object-position: 40% 30%; }
  .proj-head { flex-direction: column; align-items: flex-start; }
  .car-nav { display: none; }
  .rev-grid { grid-template-columns: 1fr; }
  .ko { align-items: flex-start; border-left: 0; padding-left: 0; }
  .nap > div { grid-template-columns: 1fr; gap: 4px; }
  .foot-grid { grid-template-columns: 1fr; gap: 32px; }
  .band-in { flex-direction: column; align-items: stretch; }
  .lint-in { flex-direction: column; align-items: flex-start; }
  .rc-foot { flex-direction: column; align-items: stretch; }
  .weld { flex-direction: column; align-items: flex-start; gap: 12px; }
  .places { columns: 1; }
  .werkwijze > div { grid-template-columns: 1fr; gap: 4px; }
  .stamp { font-size: 18px; top: 10px; right: 12px; }
}
@media (max-width: 599px) {
  /* a phone tells less: the heading, the first sentence, the photo and the buttons stay; the rest is hidden, not deleted */
  .fact-l, .rc-sub, .rc-list, .lad-s, .lad-l, .th-count, .svc .duo, .more { display: none; }
  .rc { display: flex; flex-direction: column; }
  .rc-body { order: -1; padding: 24px 18px 6px; }
  .rc-photo { height: auto; aspect-ratio: 4 / 3; }
  .rc-thumbs { background: none; border: 0; padding: 10px 18px 0; }
  .rc-foot { background: none; border: 0; padding: 18px 18px 22px; }
  .svc-media { margin-top: 22px; }
  .svc-act { margin-top: 22px; }
  .th-row { width: 100%; grid-auto-columns: minmax(0, 1fr); }
  .thumbs { margin-top: 6px; }
  .plabel { padding: 10px 14px 11px 12px; gap: 5px; }
  .pl-place { font-size: 20px; }
  .pl-link { padding-left: 28px; font-size: 14px; }
  .facts { display: block; }
  .fact { grid-template-columns: 96px minmax(0, 1fr); align-items: center; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--lood-300); }
  .fact-h { font-size: 21px; margin: 0; }
  .dk-list a { min-height: 44px; padding: 8px 16px 8px 18px; font-size: 17.5px; }
  .dk.wrap { padding-top: 14px; }
  .dk-label { margin-bottom: 10px; padding: 0 18px; }
  .owner-voice p:first-child { font-size: 22px; }
  .pcard { width: 78vw; max-width: 340px; }
  .vw-stage { padding: 10px 10px; }
  .vw-nav { width: 42px; height: 42px; margin-top: -36px; }
  .vw-cta { flex-direction: column; gap: 8px; padding-top: 10px; }
  .vw-pair { width: 100%; }
  .vw-pair .btn { flex: 1 1 0; padding: 0 10px; min-height: 46px; }
  .vw-num { display: none; }
  .vw-th { width: 50px; height: 40px; }
  .vw-strip { justify-content: flex-start; padding-top: 8px; padding-bottom: 8px; }
}
@media (max-width: 380px) {
  .hi-2 { font-size: 64px; }
  .fact { grid-template-columns: 80px minmax(0, 1fr); }
  .fact-h { font-size: 19.5px; }
  .faces span { width: 38px; height: 38px; font-size: 17px; }
}


/* ============ VOOR/NA — picked 3 of ronde-basis2/schuif.py (de wissel: Voor | Na-knop op de foto, schuift één keer zelf naar Na). Written in by basis2-varianten.py --vast; %V% -> :root:root. ============ */
:root:root .svc--dakkapel .pp > .ph, :root:root .svc--dakkapel .pp > .plabel, :root:root .svc--dakkapel .duo { display: none; }
:root:root .svc--dakkapel .svc-media { --ba: 50%; }
:root:root .ba { display: block; position: absolute; inset: 0; overflow: hidden; touch-action: pan-y; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; }
:root:root .ba-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; -webkit-user-drag: none; }
:root:root .ba-na { clip-path: inset(0 0 0 var(--ba)); }
:root:root .ba-line, :root:root .ba-grip, :root:root .ba-sw { display: none; }

:root:root .ba { --ba-mode: wissel; --ba-start: 100; cursor: pointer; }
:root:root .ba-na { transition: clip-path .9s cubic-bezier(.65, 0, .25, 1); }
:root:root .ba-sw { display: flex; position: absolute; top: 12px; left: 12px; z-index: 3; box-shadow: 0 2px 10px var(--veil); }
:root:root .ba-sw button {
  font: 700 11px/1 var(--f-caps); letter-spacing: .2em; text-transform: uppercase;
  padding: 10px 13px; border: 0; background: var(--veil); color: var(--lood-200); cursor: pointer;
  transition: background .3s, color .3s;
}
:root:root .ba-sw button[data-ba="voor"][aria-pressed="true"] { background: var(--nacht-900); color: var(--kalk-100); }
:root:root .ba-sw button[data-ba="na"][aria-pressed="true"] { background: var(--dakpan-400); color: var(--nacht-800); }
:root:root .ba-sw button:focus-visible { outline: 2px solid var(--kalk-50); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { :root:root .ba-na { transition: none; } }

/* ============ 2026-10-27, straight in (no switch): four points of Sem's on this page, forwarded by successor-9f. The
   files before are index.before-1027.html / style.before-1027.css / schuif.before-1027.js. ============ */
/* 1 · "De map overstijgt de navbar en footer, dus moet een lagere z-index krijgen": the map is its own stacking context,
   so leaflet's panes (z-index 400 to 1000) stay inside it, under the header (50) and the phone's bar at the foot (60) */
.map { z-index: 0; }

/* 2 · "Draai deze kleuren om": Werkgebied takes the zakelijk band's lead ground, the band takes the dark. The ground
   changes on the line of the mark between Over ons and Werkgebied; the mark stays on that edge, its hairlines go. The
   heights are as before: the chapter's foot padding moves into Werkgebied. The map stays the dark map. */
.chapter { padding-bottom: 0; }
.chapter .area {
  --cut: calc(clamp(56px, 7vw, 96px) + 12.5px);
  padding-bottom: var(--sec-y); color: var(--nacht-700);
  background: linear-gradient(180deg, transparent 0 var(--cut), var(--lood-200) var(--cut), var(--lood-300) 100%);
}
.chapter .area-rule::before, .chapter .area-rule::after { visibility: hidden; }
.chapter .area h2 { color: var(--nacht-800); }
.chapter .area-lede { color: var(--nacht-800); }
.chapter .places { border-top-color: var(--lood-400); }
.chapter .places li { border-bottom-color: var(--lood-400); color: var(--nacht-700); }
.chapter .places b { color: var(--dakpan-700); }
.chapter .area .btn-wa--line { background: var(--wa); color: var(--wit); }
.chapter .area .btn-wa--line:hover { background: var(--wa-hover); }
.chapter + .band--lood { background: var(--nacht-800); color: var(--lood-300); box-shadow: none; }
.chapter + .band--lood .band-h { color: var(--kalk-100); }
.chapter + .band--lood .band-l { color: var(--lood-300); }

/* 3 · "Dit voor- en na element moet de afbeelding in de rechter kolom vervangen. Zoals al eerder werd gedaan met
   [Dakkapel renoveren]": Voegwerk's pair goes into the tall photo's frame as Dakkapel's wissel (the VOOR/NA block
   above), with the pair's place and date as its label; the photo of Aalten and the pair under the list leave the page.
   The frame stays 4 : 5 (4 : 3 up to 900 px); the cut shows the worn joints beside the window. */
:root:root .svc--voeg .pp > .ph, :root:root .svc--voeg .pp > .plabel, :root:root .svc--voeg .duo { display: none; }
:root:root .svc--voeg .svc-media { --ba: 50%; }
:root:root .svc--voeg .ba-img { object-position: 72% 50%; }

/* 4 · phone only, "Zorg ervoor dat de plaatsnamen met elkaar staan uitgelijnd en dat er iets meer ruimte tussen zit":
   the werkgebied strip's places in two columns of five, each after its own mark (the first one's mark is ::before),
   so every name starts on one of two lines; more room between the rows */
@media (max-width: 599px) {
  .lint-l {
    display: grid; grid-template-columns: 18px minmax(max-content, 1fr) 18px minmax(max-content, 1fr);
    align-items: center; gap: 12px 10px;
  }
  .lint-l::before {
    content: ""; width: 18px; height: 10px; color: var(--dakpan-400); background: currentColor;
    -webkit-mask: url(merk.svg) no-repeat center / contain;
            mask: url(merk.svg) no-repeat center / contain;
  }
}

/* ============ 2026-10-27, straight in (no switch): "Deze button moet op mobiel full width zijn: [the projects'
   Vraag een kijkje aan] en maak de tekst color wit". The text white at every width, full width on the phone (up to
   599 px). CSS only, the HTML unchanged; the file before is style.before-kijkje.css. ============ */
.proj-act .btn-call, .proj-act .btn-call:hover { color: var(--wit); }
@media (max-width: 599px) {
  .proj-act .btn { display: flex; width: 100%; }
}

/* ============ 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: ../bak3-fc16-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. ============ */
.nav-mark { width: 52px; max-width: none; transform: translateY(-2px); }
.lk-row { padding-right: 0; }
.lk-mark { position: static; display: block; width: 2.12em; max-width: none; }
.stamp .st-dak { grid-area: 1 / 1 / 2 / 3; width: auto; max-width: none; height: .72em; }
@media (max-width: 760px) {
  .nav-mark { width: 46px; }
}

/* ============ 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:
   ../bak3-fc16-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. */
.portrait img[src="eigenaar-bus-lach.jpg"] { width: 180%; left: -40%; top: -72%; }
.owner-photo img[src="eigenaar-bus-lach.jpg"] { object-position: 50% 50%; transform: scale(1.12); transform-origin: 50% 56%; }
.rc-photo .ph img[src="wa-018.jpg"] { object-position: 50% 0%; }
@media (max-width: 900px) {
  .owner-photo img[src="eigenaar-bus-lach.jpg"] { object-position: 50% 70%; transform: scale(1.05); transform-origin: 50% 60%; }
}


/* ── sample view: the form sends nothing ──────────────────────────────
   This demo is disconnected from the server: no /contact, no /wa, no /bel. The
   notice below appears as soon as someone presses send, so the button does not
   feel dead. It goes the day this page is the real site. */
.form-demo{
  margin:14px 0 0;padding:12px 14px;border-left:3px solid #E79759;
  background:#F7F3EE;color:#141B23;
  font-size:15px;line-height:1.5;
}
.form-demo a{color:#141B23;text-decoration:underline}