/* Corstiaans Glazeniers — bak1 · L2-07 · a
   The page is a leaded window: every rule, frame and border is a lead came (the lood ladder),
   the cames run without joints (no knobs at their ends: Sem, 2026-11-02), and the coloured glass (amber, olive) is the light coming through.
   Every colour comes from palette.json. */

:root {
  /* lood — primary */
  --lood: #0F1F29;
  --lood-diep: #0A141B;
  --lood-verh: #1B2E3A;
  --came: #3B4A53;
  --stil: #4A5A63;
  /* olijfglas — secondary */
  --olijf: #6E8748;
  --olijf-d: #4F6334;
  --olijf-l: #B5C69A;
  --olijf-t: #E4E9D8;
  /* amberglas — accent */
  --amber: #E0A84E;
  --amber-h: #D29640;
  --amber-d: #B57D22;
  --amber-l: #F2D49A;
  --amber-t: #F8EBD0;
  /* wrijfsel — neutral */
  --paper: #F4EFE6;
  --paper2: #EAE2D3;
  --rand: #D8CDBA;
  --wit: #FFFDF8;
  /* fixed, outside the palette */
  --wa: #25D366;

  --serif: "Spectral", Georgia, "Times New Roman", serif;
  --sans: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
  --hand: "Comforter Brush", "Segoe Script", cursive;

  --came-h: linear-gradient(180deg, var(--lood) 0%, var(--came) 28%, var(--stil) 50%, var(--came) 72%, var(--lood) 100%);
  --came-v: linear-gradient(90deg, var(--lood) 0%, var(--came) 28%, var(--stil) 50%, var(--came) 72%, var(--lood) 100%);
  --joint: radial-gradient(ellipse at 38% 32%, var(--stil) 0%, var(--came) 52%, var(--lood) 100%);
  --sheen: linear-gradient(128deg, rgba(255, 253, 248, .55) 0%, rgba(255, 253, 248, 0) 42%);
  --scrim: rgba(10, 20, 27, .76);
  --hdr: 76px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--hdr) + 8px); }
body {
  margin: 0;
  background: var(--paper);
  color: var(--lood);
  font: 400 17px/1.6 var(--sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
button { font: inherit; color: inherit; }
p { margin: 0 0 1em; }
h1, h2, h3 { margin: 0; font-weight: 500; }
:focus-visible { outline: 3px solid var(--amber); outline-offset: 3px; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.i { width: 1.15em; height: 1.15em; flex: none; }
.skip { position: absolute; left: -9999px; top: 0; }
.skip:focus { left: 12px; top: 12px; z-index: 200; background: var(--wit); padding: 10px 14px; border-radius: 6px; }
.sm-only { display: none; }
.nw { white-space: nowrap; }

.wrap { width: min(1200px, calc(100% - 48px)); margin-inline: auto; }

/* ---------------------------------------------------------------- lockup */
.lockup { position: relative; display: block; container-type: inline-size; margin: 0; line-height: 1; color: var(--paper); }
.lockup__mark { width: 100%; height: auto; display: block; }
.lockup__word {
  position: absolute; left: 33.6cqw; top: 32cqw;
  font: 500 6.9cqw/1 var(--sans); letter-spacing: .3em; text-transform: uppercase;
  white-space: nowrap; color: var(--paper);
}
.lockup__slogan {
  display: block; margin: 3cqw 0 0 14.6cqw;
  font: 500 5.6cqw/1.1 var(--serif); white-space: nowrap;
  color: rgba(244, 239, 230, .74);
}

/* ---------------------------------------------------------------- buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55em;
  min-height: 48px; padding: .7em 1.25em;
  border: 2px solid transparent; border-radius: 6px;
  font: 600 16.5px/1.15 var(--sans); text-decoration: none; text-align: center;
  cursor: pointer; transition: background-color .18s, color .18s, border-color .18s, transform .18s;
}
.btn:active { transform: translateY(1px); }
.btn--lg { min-height: 56px; font-size: 18px; padding: .8em 1.5em; }
.btn--sm { min-height: 42px; font-size: 15px; padding: .5em 1em; }
/* the amber pane: glass set in lead */
.btn--amber {
  background: var(--sheen), var(--amber);
  color: var(--lood); border-color: var(--lood);
  box-shadow: inset 0 0 0 1px rgba(255, 253, 248, .35);
}
.btn--amber:hover { background: var(--sheen), var(--amber-h); }
.btn--dark { background: var(--lood); color: var(--paper); border-color: var(--lood); }
.btn--dark:hover { background: var(--lood-verh); border-color: var(--lood-verh); }
.btn--wa { background: var(--wa); color: var(--wit); border-color: var(--wa); font-weight: 700; }
.btn--wa:hover { filter: brightness(.95); }
.btn--wa-line { background: transparent; color: var(--wa); border-color: var(--wa); font-weight: 700; }
.btn--wa-line:hover { background: rgba(37, 211, 102, .1); }
.btn--ghost-light { background: transparent; color: var(--paper); border-color: rgba(244, 239, 230, .5); }
.btn--ghost-light:hover { border-color: var(--paper); background: rgba(244, 239, 230, .06); }
.btn--quiet {
  background: transparent; color: var(--lood); padding-inline: .5em;
  text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px;
  text-decoration-color: var(--olijf);
}
.btn--quiet:hover { text-decoration-color: var(--lood); }
.btn--quiet-light { background: transparent; color: var(--paper); padding-inline: .5em; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px; text-decoration-color: var(--amber); }
.acts { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 14px; }

/* ---------------------------------------------------------------- announce: a came, then small caps */
.announce {
  display: flex; align-items: center; gap: 14px; margin: 0 0 22px;
  font: 600 13px/1 var(--sans); letter-spacing: .3em; text-transform: uppercase; color: var(--olijf-d);
}
.announce::before {
  content: ""; flex: none; width: 52px; height: 6px; border-radius: 3px;
  background: var(--came-h);
}
.announce--light { color: var(--olijf-l); }

/* ---------------------------------------------------------------- shapes */
.arch { --arch: 140px; border-radius: 50% 50% 6px 6px / var(--arch) var(--arch) 6px 6px; overflow: hidden; }
.ph { display: block; width: 100%; height: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; }
.ph img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.ph:hover img { transform: scale(1.025); }

/* place-and-date label */
.label { position: absolute; z-index: 3; color: var(--wit); }
.label--lg {
  left: 16px; bottom: 16px; max-width: calc(100% - 32px);
  display: flex; flex-direction: column; align-items: flex-start; gap: 6px;
  padding: 11px 16px 12px 14px; background: var(--scrim);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  border-left: 4px solid var(--amber); border-radius: 4px;
}
.label__where { display: flex; align-items: center; gap: 8px; font: 600 clamp(18px, 1.6vw, 22px)/1.1 var(--sans); }
.label__where .i { color: var(--amber); width: 1.05em; height: 1.05em; }
.label__link { display: inline-flex; align-items: center; gap: 6px; color: var(--amber-l); font: 600 14px/1.2 var(--sans); text-underline-offset: 3px; }
.label__link .i { width: 15px; height: 15px; }
.label--sm {
  left: 12px; bottom: 12px; display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 10px; background: var(--scrim); border-radius: 4px; font: 600 12.5px/1.2 var(--sans);
}
.label--sm .i { width: 13px; height: 13px; color: var(--amber); }

/* his stamp: the mark with GLAZENIERS, laid over the picture */
.stamp {
  position: absolute; right: 16px; bottom: 18px; z-index: 3; width: clamp(88px, 8.4vw, 118px);
  container-type: inline-size; pointer-events: none; opacity: .9;
  filter: drop-shadow(0 1px 2px rgba(10, 20, 27, .75));
}
.stamp img { width: 100%; height: auto; }
.stamp span {
  position: absolute; left: 33.6cqw; top: 32cqw; font: 600 7.2cqw/1 var(--sans);
  letter-spacing: .3em; text-transform: uppercase; color: var(--wit); white-space: nowrap;
}

/* stars and the platform mark */
.stars { display: inline-flex; gap: 2px; color: var(--amber-d); }
.stars svg { width: 18px; height: 18px; }
.ko-name { display: inline-flex; align-items: center; gap: 5px; font-weight: 700; color: var(--lood); white-space: nowrap; }
.ko-ico { width: 16px; height: 16px; color: var(--olijf-d); flex: none; }

/* ---------------------------------------------------------------- header */
.hdr {
  position: fixed; inset: 0 0 auto 0; z-index: 50; color: var(--paper);
  background: rgba(10, 20, 27, .93);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  transition: transform .35s ease;
}
.hdr::after { content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 4px; background: var(--came-h); }
.hdr__in { display: flex; align-items: center; gap: 28px; height: var(--hdr); width: min(1344px, calc(100% - 48px)); margin-inline: auto; }
.hdr__brand { flex: none; text-decoration: none; }
.lockup--nav { width: 150px; }
.hdr__nav { margin-left: auto; }
.hdr__list { display: flex; align-items: center; gap: 24px; list-style: none; margin: 0; padding: 0; }
.hdr__list > li > a, .dd__btn {
  display: inline-flex; align-items: center; gap: 4px; padding: 8px 0; border: 0; background: none; cursor: pointer;
  font: 500 15.5px/1 var(--sans); color: var(--paper); text-decoration: none;
}
.hdr__list > li > a:hover, .dd__btn:hover { color: var(--amber-l); }
.dd { position: relative; }
.dd__btn .i { width: 16px; height: 16px; transition: transform .2s; }
.dd.is-open .dd__btn .i { transform: rotate(180deg); }
.dd__menu {
  display: none; position: absolute; top: calc(100% + 14px); left: -18px; min-width: 240px;
  list-style: none; margin: 0; padding: 8px; background: var(--wit); color: var(--lood);
  border: 4px solid var(--came); border-radius: 6px; box-shadow: 0 22px 40px -20px rgba(10, 20, 27, .6);
}
.dd__menu::before { content: ""; position: absolute; left: 0; right: 0; top: -22px; height: 22px; }
.dd__menu a { display: block; padding: 11px 14px; border-radius: 4px; font: 500 17px/1.2 var(--serif); color: var(--lood); text-decoration: none; }
.dd__menu a:hover { background: var(--amber-t); }
.dd.is-open .dd__menu { display: block; }
@media (hover: hover) { .dd:hover .dd__menu { display: block; } }
.hdr__acts { display: flex; align-items: center; gap: 10px; flex: none; }
.hdr__tel { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border: 2px solid rgba(244, 239, 230, .4); border-radius: 6px; font: 600 15.5px/1 var(--sans); color: var(--paper); text-decoration: none; }
.hdr__tel:hover { border-color: var(--paper); }
.hdr__wa { display: inline-flex; align-items: center; gap: 7px; padding: 9px 14px; border: 2px solid var(--wa); border-radius: 6px; font: 700 15px/1 var(--sans); color: var(--wa); text-decoration: none; }
.hdr__wa:hover { background: rgba(37, 211, 102, .1); }
.hdr__burger { display: none; width: 46px; height: 46px; padding: 0; border: 2px solid rgba(244, 239, 230, .4); border-radius: 6px; background: none; color: var(--paper); cursor: pointer; align-items: center; justify-content: center; }
.hdr__burger .i { width: 22px; height: 22px; }

/* ---------------------------------------------------------------- fold */
.fold {
  position: relative; display: flex; flex-direction: column; min-height: 100vh; min-height: 100svh;
  padding-top: var(--hdr); overflow: hidden; color: var(--paper);
  background:
    radial-gradient(70% 55% at 50% 100%, rgba(242, 212, 154, .10) 0%, rgba(242, 212, 154, 0) 70%),
    radial-gradient(120% 80% at 50% 110%, var(--lood-verh) 0%, var(--lood-diep) 64%);
}
.fold__inner { width: min(1240px, calc(100% - 48px)); margin: 0 auto; padding-top: clamp(26px, 5vh, 52px); text-align: center; }
.duo { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: clamp(28px, 3.4vw, 54px); }
.duo__name { justify-self: end; }
.lockup--xl { width: clamp(270px, 29vw, 430px); }
.duo__came { position: relative; width: 6px; align-self: stretch; min-height: 150px; border-radius: 3px; background: var(--came-v); }
.duo__head {
  justify-self: start; max-width: 11.6em; text-align: left;
  font: 500 clamp(34px, 3.95vw, 58px)/1.06 var(--serif); letter-spacing: -.012em; color: var(--paper);
  text-wrap: balance;
}
.duo__head em { font-style: italic; font-weight: 500; color: var(--amber); }
.fold__sub { max-width: 620px; margin: clamp(22px, 3.4vh, 34px) auto 0; font-size: 18px; line-height: 1.55; color: rgba(244, 239, 230, .8); }
.fold__acts { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 12px; margin-top: clamp(18px, 3vh, 26px); }
.fold__pair { display: flex; gap: 12px; }

/* the triptych: three lit windows, the middle one raised, running off the bottom edge */
.trip {
  --gap: clamp(14px, 1.8vw, 24px);
  --shoulder: clamp(64px, 9.5vh, 96px);
  position: relative; flex: 1 0 clamp(230px, 32vh, 380px);
  width: min(1344px, calc(100% - 48px)); margin: clamp(28px, 4.4vh, 46px) auto -90px;
  display: grid; grid-template-columns: 1fr 1.16fr 1fr; gap: var(--gap);
}
.trip__pane {
  position: relative; display: block; min-height: 0; padding: 0; overflow: hidden; cursor: zoom-in;
  background: var(--lood-verh); border: 6px solid var(--came); border-bottom: 0;
  border-radius: 50% 50% 0 0 / 120px 120px 0 0;
  box-shadow: 0 0 60px -10px rgba(242, 212, 154, .16);
}
.trip__pane img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s ease; }
.trip__pane:hover img { transform: scale(1.03); }
.trip__pane--l, .trip__pane--r { margin-top: var(--shoulder); grid-row: 1; }
.trip__pane--c { grid-row: 1; }
.trip__pane--l img { object-position: 50% 35%; }
.trip__pane--r img { object-position: 50% 30%; }
.invite {
  position: absolute; z-index: 2; left: 0; top: 0; height: var(--shoulder);
  width: calc((100% - 2 * var(--gap)) / 3.16);
  display: flex; align-items: center; gap: 14px; padding-bottom: 8px;
  color: var(--paper); text-decoration: none;
}
.invite__face { position: relative; flex: none; width: 58px; height: 58px; border-radius: 50%; overflow: hidden; border: 2px solid var(--amber); background: var(--lood-verh); }
.invite__face img { position: absolute; max-width: none; width: 903%; height: auto; left: -372%; top: -14.6%; }
.invite__txt { display: flex; flex-direction: column; align-items: flex-start; text-align: left; }
.invite__name { font: 400 38px/.85 var(--hand); color: var(--amber-l); }
.invite__cta { font: 600 14.5px/1.3 var(--sans); color: var(--paper); text-decoration: underline; text-decoration-color: rgba(244, 239, 230, .35); text-underline-offset: 4px; }
.invite:hover .invite__cta { text-decoration-color: var(--amber); }

/* ---------------------------------------------------------------- trust strip: a two-pane transom */
.strip-wrap { padding: 34px 0 0; background: var(--paper); }
.strip {
  width: min(1060px, calc(100% - 48px)); margin: 0 auto;
  display: grid; grid-template-columns: 1fr 6px 1fr;
  border: 6px solid var(--came); border-radius: 8px; background: var(--came);
  box-shadow: 0 14px 28px -22px rgba(15, 31, 41, .55);
}
.strip__pane { display: flex; align-items: center; gap: 18px; min-height: 92px; padding: 16px 26px; color: var(--lood); text-decoration: none; }
.strip__pane--rijk { background: var(--sheen), var(--olijf-t); border-radius: 2px 0 0 2px; }
.strip__pane--ko { background: var(--sheen), var(--amber-t); border-radius: 0 2px 2px 0; transition: background-color .2s; }
.strip__pane--ko:hover .ko-name { text-decoration: underline; }
.strip__came { position: relative; background: var(--came-v); }
.strip__fan { width: 54px; height: 36px; flex: none; color: var(--olijf-d); }
.strip__txt { margin: 0; display: flex; flex-direction: column; gap: 3px; }
.strip__big { display: block; font: 500 21px/1.2 var(--serif); }
.strip__small { display: block; font-size: 15px; line-height: 1.35; color: var(--stil); }
.strip__fig { font: 500 50px/1 var(--serif); letter-spacing: -.02em; }
.strip__ext { margin-left: auto; width: 18px; height: 18px; color: var(--stil); }

/* ---------------------------------------------------------------- even voorstellen */
.intro { padding: clamp(60px, 8vw, 104px) 0 0; background: var(--paper); position: relative; }
.intro__grid { display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 76px); align-items: center; }
.intro__portrait { position: relative; margin: 0; aspect-ratio: 4 / 5; border: 6px solid var(--came); --arch: 150px; background: var(--lood-verh); }
.intro__portrait img { width: 100%; height: 100%; object-fit: cover; object-position: 41% 20%; }
.intro__hello {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 120px 34px 30px; color: var(--paper);
  background: linear-gradient(to top, rgba(10, 20, 27, .9) 0%, rgba(10, 20, 27, .62) 52%, rgba(10, 20, 27, 0) 100%);
}
.intro__l1 { display: block; font: 500 21px/1.2 var(--serif); }
.intro__l2 { display: block; margin: 2px 0 6px; font: 400 clamp(76px, 8vw, 116px)/.9 var(--hand); color: var(--amber-l); }
.intro__l3 { display: block; font: 600 13.5px/1.3 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: rgba(244, 239, 230, .88); }
.facts { list-style: none; margin: 0; padding: 0; }
.fact { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 24px; align-items: center; padding: 24px 0; position: relative; }
.fact + .fact { background: var(--came-h) top left / 100% 4px no-repeat; }
.fact__pic {
  display: block; width: 150px; aspect-ratio: 4 / 3; padding: 0; overflow: hidden; cursor: zoom-in;
  border: 4px solid var(--came); border-radius: 50% 50% 4px 4px / 36px 36px 4px 4px; background: var(--lood-verh);
}
.fact__pic img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.fact__pic:hover img { transform: scale(1.05); }
.fact h3 { font: 500 clamp(22px, 2vw, 27px)/1.18 var(--serif); margin: 0 0 6px; }
.fact p { margin: 0; font-size: 16.5px; line-height: 1.5; color: var(--stil); }

/* the services card: a four-pane leaded light, standing on the introduction's lower edge */
.window { position: relative; z-index: 4; margin-top: clamp(56px, 7vw, 88px); margin-bottom: -58px; }
.window__label {
  position: absolute; z-index: 5; top: -15px; left: 50%; transform: translateX(-50%); margin: 0;
  padding: 7px 18px; border-radius: 4px; background: var(--lood); color: var(--paper);
  font: 600 12.5px/1 var(--sans); letter-spacing: .3em; text-transform: uppercase; white-space: nowrap;
}
.window__panes {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px;
  border: 6px solid var(--came); border-radius: 8px; background: var(--came-h), var(--came);
  background: var(--came);
  box-shadow: 0 26px 50px -30px rgba(15, 31, 41, .65);
}
.pane { position: relative; }
.pane a {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  height: 100%; min-height: 112px; padding: 30px 24px 24px 26px;
  font: 500 clamp(20px, 1.9vw, 26px)/1.15 var(--serif); color: var(--lood); text-decoration: none;
  transition: filter .2s;
}
.pane a .i { width: 22px; height: 22px; transition: transform .25s; }
.pane a:hover { filter: brightness(1.05) saturate(1.05); }
.pane a:hover .i { transform: translateY(4px); }
.pane--helder a { background: var(--sheen), var(--wit); border-radius: 2px 0 0 2px; }
.pane--olijf a { background: var(--sheen), var(--olijf-l); }
.pane--lood a { background: linear-gradient(128deg, rgba(255, 253, 248, .14) 0%, rgba(255, 253, 248, 0) 42%), var(--lood-verh); color: var(--paper); }
.pane--amber a { background: var(--sheen), var(--amber-l); border-radius: 0 2px 2px 0; }

/* ---------------------------------------------------------------- services */
.svc { position: relative; }
.svc--ruit { background: var(--paper2); padding: calc(58px + clamp(56px, 7vw, 96px)) 0 clamp(72px, 9vw, 120px); }

/* the main service card: one arched window */
.rcard {
  background: var(--wit); border: 6px solid var(--came);
  border-radius: 50% 50% 10px 10px / 120px 120px 10px 10px; overflow: hidden;
  box-shadow: 0 34px 70px -46px rgba(15, 31, 41, .7);
}
.rcard__photo { position: relative; aspect-ratio: 1188 / 450; background: var(--lood-verh); }
.rcard__photo .ph img { object-position: 50% 42%; }
.rcard__series {
  display: flex; align-items: center; justify-content: space-between; gap: 14px 24px; flex-wrap: wrap;
  padding: 14px clamp(18px, 3vw, 40px); background: var(--paper);
  border-top: 6px solid var(--came); border-bottom: 1px solid var(--rand);
}
.rcard__body {
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 24px clamp(32px, 5vw, 64px);
  padding: clamp(30px, 4vw, 54px) clamp(22px, 4vw, 54px) clamp(28px, 3.4vw, 44px);
}
.rcard__h { font: 500 clamp(44px, 5vw, 70px)/1 var(--serif); letter-spacing: -.015em; margin: 0 0 14px; }
.rcard__h a, .ladder__h a { text-decoration: none; }
.rcard__h a:hover, .ladder__h a:hover { text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 8px; text-decoration-color: var(--amber); }
.rcard__sub { font: italic 400 clamp(20px, 1.8vw, 24px)/1.38 var(--serif); color: var(--stil); margin: 0 0 26px; max-width: 24em; }
.rcard__list { list-style: none; margin: 0; padding: 0; align-self: center; }
.rcard__list li, .ladder__list li { position: relative; padding: 13px 0 13px 38px; font: 500 clamp(18px, 1.6vw, 21px)/1.32 var(--sans); }
.rcard__list li { border-bottom: 1px solid var(--rand); }
.rcard__list li:first-child { border-top: 1px solid var(--rand); }
/* a ruit is a pane and a diamond: the list marker is a small leaded diamond */
.rcard__list li::before, .ladder__list li::before {
  content: ""; position: absolute; left: 4px; top: 50%; width: 15px; height: 15px;
  transform: translateY(-50%) rotate(45deg); background: var(--sheen), var(--amber-l);
  border: 3px solid var(--came); border-radius: 2px;
}
.rcard__acts { grid-column: 1 / -1; padding-top: 24px; border-top: 1px solid var(--rand); }

/* "zoveel mensen gingen u voor" */
.proof {
  display: inline-flex; align-items: center; gap: 14px; padding: 10px 20px 10px 12px;
  background: var(--paper); border: 2px solid var(--rand); border-radius: 999px; text-decoration: none; color: var(--lood);
}
.proof:hover { border-color: var(--olijf); }
.avatars { display: inline-flex; padding-left: 10px; }
.avatars span {
  display: inline-grid; place-items: center; width: 40px; height: 40px; margin-left: -10px;
  border-radius: 50%; border: 2px solid var(--paper); color: var(--paper); font: 600 15px/1 var(--sans);
}
.avatars span:nth-child(1) { background: var(--lood-verh); }
.avatars span:nth-child(2) { background: var(--olijf-d); }
.avatars span:nth-child(3) { background: var(--amber-d); }
.avatars span:nth-child(4) { background: var(--came); }
.avatars span:nth-child(5) { background: var(--olijf); }
.proof__txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.proof__top { display: flex; align-items: center; gap: 8px; font-size: 15px; }
.proof__top b { font: 600 21px/1 var(--serif); }
.proof__line { font-size: 14.5px; color: var(--stil); }
.proof__line .ko-name { color: var(--lood); }

/* thumbnails and the count line */
.thumbs { display: flex; gap: 8px; }
.thumb {
  position: relative; display: block; width: 86px; height: 62px; padding: 0; overflow: hidden; cursor: zoom-in;
  border: 3px solid var(--came); border-radius: 4px; background: var(--lood-verh);
}
.thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.thumb:hover img { transform: scale(1.08); }
.thumb--more span { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(15, 31, 41, .66); color: var(--wit); font: 700 17px/1 var(--sans); }
.countline {
  display: inline-flex; align-items: center; gap: 8px; padding: 6px 0; border: 0; background: none; cursor: pointer;
  font: 600 15px/1.3 var(--sans); color: var(--stil); text-decoration: underline; text-decoration-color: var(--rand); text-underline-offset: 4px;
}
.countline:hover { color: var(--lood); text-decoration-color: var(--amber); }
.countline .i { width: 18px; height: 18px; }

/* the ladder services */
.svc--ladder { padding: clamp(76px, 9.5vw, 132px) 0; }
.svc--dg { background: var(--olijf-t); --ladder-2: var(--olijf-d); }
.svc--mon { background: var(--lood-diep); color: var(--paper); --ladder-2: var(--amber); padding: clamp(84px, 11vw, 156px) 0; }
.svc--gil { background: var(--amber-t); --ladder-2: var(--olijf-d); }
.ladder { display: grid; grid-template-columns: minmax(0, .86fr) minmax(0, 1.14fr); gap: clamp(36px, 6vw, 92px); align-items: center; }
.ladder--flip { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.ladder--flip .ladder__type { order: 2; }
.ladder__h { font: 500 clamp(44px, 4.9vw, 70px)/.98 var(--serif); letter-spacing: -.018em; margin: 0 0 18px; }
.ladder__h2 { font: italic 400 clamp(24px, 2.4vw, 34px)/1.22 var(--serif); color: var(--ladder-2); margin: 0 0 26px; max-width: 16em; }
.ladder__list { list-style: none; margin: 0 0 34px; padding: 0; }
.ladder__list li { padding: 9px 0 9px 38px; }
.svc--mon .ladder__list li::before { background: linear-gradient(128deg, rgba(255, 253, 248, .3), rgba(255, 253, 248, 0) 50%), var(--amber); border-color: var(--stil); }
.svc--dg .ladder__list li::before { background: var(--sheen), var(--olijf-l); }
.svc--mon .countline { color: var(--olijf-l); text-decoration-color: var(--came); }
.svc--mon .countline:hover { color: var(--paper); }
.ladder__pic { min-width: 0; }
.ladder__pic .thumbs { margin-top: 16px; }
.ladder__pic .countline { margin-top: 6px; }

/* the monument photo: a full round arch, like the fanlight in it */
.mon__photo { position: relative; max-width: 470px; margin-inline: auto; aspect-ratio: 4 / 5; border: 6px solid var(--came); border-radius: 50% 50% 6px 6px / 40% 40% 6px 6px; background: var(--lood-verh); }
.mon__photo .ph img { object-position: 50% 18%; }
.svc--mon .ladder__pic .thumbs, .svc--mon .ladder__pic .countline { max-width: 470px; margin-inline: auto; }
.svc--mon .ladder__pic .thumbs { justify-content: flex-start; }
.svc--mon .ladder__pic { display: flex; flex-direction: column; align-items: center; }
.svc--mon .ladder__pic > * { width: 100%; max-width: 470px; }

/* before and after: two days in one leaded frame, the came is the handle */
.ba {
  position: relative; margin: 0; aspect-ratio: 3 / 2; overflow: hidden; cursor: zoom-in;
  border: 6px solid var(--came); border-radius: 8px; background: var(--lood-verh);
  touch-action: pan-y; -webkit-user-select: none; user-select: none;
}
.ba > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.ba__na { clip-path: inset(0 0 0 var(--pos)); }
.ba__tag {
  position: absolute; z-index: 3; top: 14px; padding: 6px 11px; border-radius: 3px;
  background: var(--scrim); color: var(--wit); font: 700 12px/1 var(--sans); letter-spacing: .22em; text-transform: uppercase;
}
.ba__tag--voor { left: 14px; }
.ba__tag--na { right: 14px; }
.ba__handle {
  position: absolute; z-index: 2; top: 0; bottom: 0; left: var(--pos); width: 8px; margin-left: -4px;
  background: var(--came-v); cursor: ew-resize; touch-action: none;
}
.ba__knob {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  display: flex; align-items: center; justify-content: center; width: 54px; height: 40px; border-radius: 50%;
  background: var(--joint); border: 2px solid var(--lood); color: var(--paper); box-shadow: 0 4px 14px rgba(10, 20, 27, .45);
}
.ba__knob .i { width: 15px; height: 15px; }
.ba__handle:focus-visible { outline: 3px solid var(--amber); outline-offset: 0; }

/* ---------------------------------------------------------------- bands */
.band { padding: 30px 0; }
.band__in { display: flex; align-items: center; justify-content: space-between; gap: 16px 36px; flex-wrap: wrap; }
.band__h { margin: 0; font: 500 clamp(22px, 2.3vw, 30px)/1.2 var(--serif); }
.band__line { margin: 4px 0 0; font-size: 17px; }
.band__acts { display: flex; gap: 12px; flex-wrap: wrap; }
.band--foto { background: var(--lood); color: var(--paper); border-block: 6px solid var(--came); }
.band--foto .band__line { color: rgba(244, 239, 230, .78); }
.band--lint { background: var(--paper); padding: 28px 0 30px; }
.band__in--lint { flex-direction: column; align-items: flex-start; gap: 10px; }
.band--lint .band__h { font: 600 13px/1 var(--sans); letter-spacing: .3em; text-transform: uppercase; color: var(--olijf-d); }
.lint { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 0; margin: 0; font: italic 400 clamp(19px, 1.8vw, 25px)/1.3 var(--serif); color: var(--lood); }
.lint span:not(:last-child)::after {
  content: ""; display: inline-block; vertical-align: middle; width: 26px; height: 6px; margin: 0 12px 3px;
  border-radius: 3px; background: var(--came-h);
}
.band--actie { background: var(--sheen), var(--amber); border-block: 6px solid var(--came); padding: 30px 0; }
.band__h--slogan { font: 500 clamp(28px, 3.3vw, 44px)/1.1 var(--serif); letter-spacing: -.01em; }
.band--zakelijk { background: var(--paper2); padding: 34px 0; border-bottom: 1px solid var(--rand); }
.band--zakelijk .band__line { color: var(--stil); }

/* ---------------------------------------------------------------- projects */
.projects { background: var(--paper); padding: clamp(76px, 9.5vw, 124px) 0 clamp(64px, 8vw, 104px); }
.projects__head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 0 32px; }
.projects__head .announce { grid-column: 1 / -1; }
.projects__intro { margin: 0; max-width: 32em; font: italic 400 clamp(21px, 2vw, 27px)/1.35 var(--serif); }
.carousel__ctrl { display: flex; gap: 10px; }
.cbtn { display: inline-grid; place-items: center; width: 50px; height: 50px; padding: 0; border: 2px solid var(--lood); border-radius: 50%; background: transparent; color: var(--lood); cursor: pointer; }
.cbtn:hover { background: var(--lood); color: var(--paper); }
.cbtn .i { width: 22px; height: 22px; }
.carousel { margin-top: 36px; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; padding: 6px 0 26px; }
.carousel::-webkit-scrollbar { display: none; }
.carousel__track { display: flex; gap: 24px; width: max-content; padding-inline: 24px; }
.pcard {
  flex: none; display: flex; flex-direction: column; width: clamp(280px, 29vw, 380px); padding: 0; overflow: hidden; cursor: zoom-in;
  text-align: left; background: var(--wit); border: 6px solid var(--came);
  border-radius: 50% 50% 8px 8px / 70px 70px 8px 8px;
  box-shadow: 0 24px 40px -32px rgba(15, 31, 41, .6); transition: transform .25s;
}
.pcard:hover { transform: translateY(-3px); }
.pcard__photo { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--lood-verh); }
.pcard__photo > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pcard__photo .stamp { width: 92px; right: 12px; bottom: 12px; }
.pcard__body { display: block; padding: 18px 22px 24px; border-top: 6px solid var(--came); }
.pcard__where { display: flex; align-items: center; gap: 8px; font: 500 28px/1.1 var(--serif); }
.pcard__where .i { color: var(--amber-d); width: 24px; height: 24px; }
.pcard__when { display: block; margin: 2px 0 14px 32px; font: 600 17px/1.2 var(--sans); color: var(--stil); }
.pcard__svc { display: block; margin-bottom: 4px; font: 600 12px/1.2 var(--sans); letter-spacing: .22em; text-transform: uppercase; color: var(--olijf-d); }
.pcard__what { display: block; font-size: 16px; line-height: 1.45; }
.notlisted {
  display: flex; align-items: center; justify-content: space-between; gap: 22px 40px; flex-wrap: wrap;
  margin-top: 26px; padding: clamp(24px, 3vw, 36px) clamp(22px, 3.4vw, 44px);
  background: var(--sheen), var(--amber-l); border: 6px solid var(--came); border-radius: 8px;
}
.notlisted__h { font: 500 clamp(28px, 3.1vw, 42px)/1.1 var(--serif); margin: 0 0 6px; }
.notlisted__txt p { margin: 0; font-size: 18px; max-width: 34em; }
.notlisted__acts { display: flex; gap: 12px; flex-wrap: wrap; }

/* ---------------------------------------------------------------- the owner */
.owner { background: var(--paper2); padding: clamp(76px, 9.5vw, 124px) 0; }
.owner__grid { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1fr); gap: clamp(36px, 6vw, 92px); align-items: center; }
.owner__photo { margin: 0; aspect-ratio: 4 / 5; border: 6px solid var(--came); background: var(--lood-verh); --arch: 150px; }
.owner__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 42% 20%; }
.owner__h { font: 500 clamp(38px, 4.2vw, 58px)/1.04 var(--serif); margin: 0 0 18px; }
.owner__lead { font: 400 clamp(21px, 1.9vw, 25px)/1.45 var(--serif); margin: 0 0 14px; max-width: 26em; }
.owner__txt .more { font-size: 18px; color: var(--stil); max-width: 34em; }
.owner__sign { margin: 6px 0 22px; font: 400 70px/1 var(--hand); color: var(--lood); transform: rotate(-5deg); transform-origin: left center; }

/* ---------------------------------------------------------------- over ons + werkgebied: one lead ground, one came between */
.firm { background: var(--lood); color: var(--paper); }
.about { padding: clamp(76px, 9.5vw, 124px) 0 clamp(60px, 7vw, 92px); }
.about__grid { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); gap: clamp(36px, 6vw, 92px); align-items: center; }
.about__h { font: 500 clamp(36px, 4vw, 56px)/1.05 var(--serif); margin: 0 0 16px; }
.about__lead { font: 400 clamp(20px, 1.85vw, 24px)/1.45 var(--serif); margin: 0 0 14px; max-width: 28em; }
.firm .more { color: rgba(244, 239, 230, .8); font-size: 17.5px; max-width: 36em; }
.steps {
  list-style: none; margin: 28px 0 32px; padding: 0; max-width: none !important;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px;
  border: 6px solid var(--came); border-radius: 6px; background: var(--came);
}
.steps li { padding: 16px 18px 18px; background: linear-gradient(128deg, rgba(255, 253, 248, .08), rgba(255, 253, 248, 0) 45%), var(--lood-verh); }
.steps b { display: block; margin-bottom: 4px; font: 500 22px/1.2 var(--serif); color: var(--amber-l); }
.steps span { display: block; font-size: 15px; line-height: 1.45; color: rgba(244, 239, 230, .8); }
.about__pic { position: relative; aspect-ratio: 4 / 5; border: 6px solid var(--came); background: var(--lood-verh); --arch: 130px; }
.about__pic .ph img { object-position: 45% 50%; }
.area { position: relative; padding: clamp(60px, 7vw, 92px) 0 clamp(76px, 9.5vw, 124px); background: var(--came-h) top left / 100% 6px no-repeat; }
.area__grid { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); grid-template-rows: auto 1fr; gap: 28px clamp(36px, 5vw, 76px); }
.area__txt { grid-column: 1; grid-row: 1; }
.area__map { grid-column: 2; grid-row: 1 / span 2; }
.area__pic { grid-column: 1; grid-row: 2; position: relative; margin: 0; aspect-ratio: 16 / 10; align-self: end; border: 6px solid var(--came); --arch: 70px; background: var(--lood-verh); }
.area__pic img { width: 100%; height: 100%; object-fit: cover; }
.places { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 20px 0 28px; padding: 0; }
.places li { padding: 6px 12px; border: 2px solid var(--came); border-radius: 999px; font-size: 15px; color: var(--paper); }
.places li:first-child { border-color: var(--amber); color: var(--amber-l); }
.map { height: 100%; min-height: 520px; border: 6px solid var(--came); border-radius: 8px; background: var(--paper2); }
.map .leaflet-tile-pane { filter: sepia(.38) saturate(.75) hue-rotate(-6deg) brightness(1.02) contrast(.96); }
.map .leaflet-control-attribution { font: 11px/1.3 var(--sans); background: rgba(244, 239, 230, .85); }
.map .leaflet-bar a { color: var(--lood); }
.pin span { display: block; width: 100%; height: 100%; border-radius: 50%; background: var(--amber); border: 3px solid var(--lood); box-shadow: 0 1px 4px rgba(10, 20, 27, .5); }
.pin--home span { background: var(--lood); border-color: var(--amber); }
.leaflet-tooltip.pin-tip { padding: 2px 7px; border: 0; border-radius: 3px; background: rgba(255, 253, 248, .92); color: var(--lood); font: 600 12.5px/1.3 var(--sans); box-shadow: 0 1px 3px rgba(10, 20, 27, .3); }
.leaflet-tooltip.pin-tip::before { display: none; }
.leaflet-tooltip.pin-tip--home { background: var(--lood); color: var(--paper); font-size: 14px; padding: 3px 9px; }

/* ---------------------------------------------------------------- vragen */
.faq { background: var(--paper); padding: clamp(76px, 9.5vw, 124px) 0; }
.faq__grid { display: grid; grid-template-columns: minmax(0, .72fr) minmax(0, 1.28fr); gap: 20px clamp(36px, 6vw, 92px); }
.faq__head { grid-row: 1 / span 2; }
.faq__h { font: 500 clamp(34px, 3.6vw, 50px)/1.08 var(--serif); margin: 0; }
.faq__list { background: var(--came-h) top left / 100% 6px no-repeat; padding-top: 6px; }
.faq details { border-bottom: 1px solid var(--rand); }
.faq summary {
  position: relative; list-style: none; cursor: pointer; padding: 20px 48px 20px 0;
  font: 500 clamp(19px, 1.65vw, 22px)/1.3 var(--serif);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; position: absolute; right: 8px; top: 50%; width: 15px; height: 15px; border-radius: 2px;
  transform: translateY(-50%) rotate(45deg); border: 3px solid var(--came); background: var(--sheen), var(--paper2); transition: background-color .2s;
}
.faq details[open] summary::after { background: var(--sheen), var(--amber); }
.faq summary:hover { color: var(--olijf-d); }
.faq details p { margin: 0 0 22px; max-width: 40em; font-size: 17px; color: var(--stil); }
.faq__foot { grid-column: 2; display: flex; align-items: center; justify-content: space-between; gap: 16px 24px; flex-wrap: wrap; padding-top: 14px; }
.faq__foot p { margin: 0; font: 500 19px/1.35 var(--serif); }

/* ---------------------------------------------------------------- reviews */
.reviews { background: var(--olijf-t); padding: clamp(76px, 9.5vw, 124px) 0; }
.reviews__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; margin-bottom: 36px; }
.reviews__h { font: 500 clamp(34px, 3.6vw, 50px)/1.08 var(--serif); margin: 0; }
.rating { display: grid; gap: 3px; padding: 12px 20px 14px; border: 2px solid var(--olijf); border-radius: 8px; color: var(--lood); text-decoration: none; }
.rating:hover { background: rgba(255, 253, 248, .5); }
.rating__name { display: flex; align-items: center; gap: 8px; font: 700 19px/1.2 var(--sans); }
.rating__name .ko-ico { width: 20px; height: 20px; }
.rating__score { display: flex; align-items: center; gap: 8px; font-size: 15px; }
.rating__score b { font: 600 18px/1 var(--serif); }
.rating__score .stars svg { width: 16px; height: 16px; }
.rating__count { font-size: 14px; color: var(--stil); }
.rgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.rv {
  display: flex; flex-direction: column; gap: 12px; padding: clamp(22px, 2.6vw, 32px);
  background: var(--wit); border: 6px solid var(--came); border-radius: 8px; color: var(--lood); text-decoration: none;
  box-shadow: 0 22px 40px -32px rgba(15, 31, 41, .55); transition: transform .2s;
}
.rv:hover { transform: translateY(-2px); }
.rv__top { display: flex; align-items: center; gap: 12px; }
.rv__av { display: grid; place-items: center; flex: none; width: 48px; height: 48px; border-radius: 50%; background: var(--lood-verh); color: var(--paper); font: 500 21px/1 var(--serif); }
.rv__who b { display: block; font-size: 17.5px; line-height: 1.2; }
.rv__who span { font-size: 14px; color: var(--stil); }
.rv__ko { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font: 700 13px/1 var(--sans); color: var(--olijf-d); }
.rv .stars svg { width: 23px; height: 23px; }
.rv__title { font: 500 22px/1.25 var(--serif); }
.rv__txt { font-size: 16.5px; line-height: 1.62; }
.reviews__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin-top: 34px; }

/* ---------------------------------------------------------------- contact */
.contact { background: var(--lood); color: var(--paper); padding: clamp(76px, 9.5vw, 124px) 0; }
.contact__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(36px, 6vw, 92px); align-items: start; }
.contact__h { font: 500 clamp(38px, 4.2vw, 58px)/1.04 var(--serif); margin: 0 0 14px; }
.contact__lead { font-size: 18px; color: rgba(244, 239, 230, .8); max-width: 30em; }
.contact__pair { display: flex; flex-wrap: wrap; gap: 12px; margin: 26px 0 34px; }
.nap { margin: 0; }
.nap div { padding: 14px 0; border-top: 1px solid var(--came); }
.nap dt { font: 600 12px/1 var(--sans); letter-spacing: .22em; text-transform: uppercase; color: var(--olijf-l); }
.nap dd { margin: 6px 0 0; font-size: 17.5px; }
.nap a { color: var(--paper); text-underline-offset: 3px; }
.form {
  position: relative; padding: 70px clamp(22px, 3.2vw, 44px) 32px; background: var(--wit); color: var(--lood);
  border: 6px solid var(--came); border-radius: 50% 50% 8px 8px / 76px 76px 8px 8px;
}
.form__h { margin: 0 0 20px; text-align: center; font: 500 26px/1.2 var(--serif); }
.field { display: block; margin-bottom: 16px; }
.field > span { display: block; margin-bottom: 6px; font: 600 14.5px/1.2 var(--sans); }
.field em { font-style: normal; font-weight: 400; color: var(--stil); }
.field input, .field textarea {
  display: block; width: 100%; padding: 13px 14px; border: 2px solid var(--rand); border-radius: 6px;
  background: var(--paper); color: var(--lood); font: 400 17px/1.4 var(--sans);
}
.field textarea { resize: vertical; min-height: 110px; }
.field input:focus, .field textarea:focus { outline: 3px solid var(--olijf); outline-offset: 1px; border-color: var(--olijf); }
.hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form__send { width: 100%; margin-top: 6px; }
.form__note { margin: 12px 0 0; text-align: center; font-size: 14px; color: var(--stil); }

/* ---------------------------------------------------------------- footer */
.foot { position: relative; background: var(--lood-diep); color: rgba(244, 239, 230, .82); padding: 68px 0 30px; }
.foot::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 6px; background: var(--came-h); }
.foot__grid { display: grid; grid-template-columns: 1.25fr 1fr 1.25fr; gap: 36px; }
.lockup--foot { width: 270px; }
.foot__h { margin: 0 0 14px; font: 600 12px/1 var(--sans); letter-spacing: .25em; text-transform: uppercase; color: var(--olijf-l); }
.foot ul { list-style: none; margin: 0; padding: 0; }
.foot li { margin: 7px 0; }
.foot a { color: var(--paper); text-decoration: none; }
.foot a:not(.btn):hover { text-decoration: underline; }
.foot address { font-style: normal; line-height: 1.75; }
.foot__pair { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.foot__base { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px 24px; margin-top: 48px; padding-top: 20px; border-top: 1px solid var(--came); font-size: 14px; color: rgba(244, 239, 230, .6); }

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

/* ---------------------------------------------------------------- the viewer */
.viewer {
  position: fixed; inset: 0; z-index: 100; display: grid; grid-template-rows: auto minmax(0, 1fr) auto;
  background: rgba(10, 20, 27, .97); color: var(--paper);
}
.viewer[hidden] { display: none; }
.viewer-open { overflow: hidden; }
.viewer__top { display: flex; align-items: center; gap: 16px; padding: 10px 12px 10px 24px; }
.viewer__title { margin: 0; font: 500 21px/1.2 var(--serif); }
.viewer__count { margin: 0 0 0 auto; font: 600 15px/1 var(--sans); color: rgba(244, 239, 230, .75); font-variant-numeric: tabular-nums; }
.viewer__close { display: inline-grid; place-items: center; width: 48px; height: 48px; padding: 0; border: 2px solid var(--came); border-radius: 50%; background: none; color: var(--paper); cursor: pointer; }
.viewer__close:hover { border-color: var(--paper); }
.viewer__close .i { width: 22px; height: 22px; }
.viewer__stage { position: relative; display: flex; min-height: 0; padding: 6px 84px 10px; }
.viewer__fig { flex: 1; min-width: 0; min-height: 0; margin: 0; display: grid; grid-template-rows: minmax(0, 1fr) auto; }
.viewer__media { min-height: 0; min-width: 0; height: 100%; display: flex; align-items: center; justify-content: center; }
.viewer__media > img { max-width: 100%; max-height: 100%; width: auto; height: auto; border: 6px solid var(--came); border-radius: 6px; }
.vpair { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: 100%; height: 100%; }
.vhalf { position: relative; display: flex; align-items: center; justify-content: center; min-width: 0; min-height: 0; height: 100%; }
.vhalf img { max-width: 100%; max-height: 100%; width: auto; height: auto; border: 6px solid var(--came); border-radius: 6px; }
.vhalf .ba__tag { top: auto; bottom: 14px; left: 50%; right: auto; transform: translateX(-50%); }
.viewer__label { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; padding: 12px 0 0; text-align: center; }
.viewer__where { display: inline-flex; align-items: center; gap: 8px; font: 600 clamp(19px, 2vw, 25px)/1.2 var(--sans); }
.viewer__where .i { width: 24px; height: 24px; color: var(--amber); }
.viewer__desc { flex-basis: 100%; font-size: 14.5px; color: rgba(244, 239, 230, .65); }
.viewer__nav {
  position: absolute; top: 50%; z-index: 2; display: inline-grid; place-items: center; width: 54px; height: 54px; margin-top: -40px; padding: 0;
  border: 2px solid var(--came); border-radius: 50%; background: rgba(27, 46, 58, .85); color: var(--paper); cursor: pointer;
}
.viewer__nav:hover { border-color: var(--amber); }
.viewer__nav .i { width: 24px; height: 24px; }
.viewer__nav--prev { left: 16px; }
.viewer__nav--next { right: 16px; }
.viewer__foot { display: grid; gap: 10px; padding: 10px 16px calc(12px + env(safe-area-inset-bottom)); background: var(--lood-diep); border-top: 4px solid var(--came); }
.viewer__strip { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 2px; justify-content: safe center; }
.viewer__strip::-webkit-scrollbar { display: none; }
.vthumb { position: relative; flex: none; width: 74px; height: 52px; padding: 0; overflow: hidden; border: 3px solid var(--came); border-radius: 4px; background: var(--lood-verh); cursor: pointer; opacity: .62; }
.vthumb.is-on { opacity: 1; border-color: var(--amber); }
.vthumb img { width: 100%; height: 100%; object-fit: cover; }
.vthumb--pair { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; width: 92px; }
.vthumb--pair img { min-width: 0; }
.viewer__cta { display: flex; align-items: center; justify-content: center; gap: 10px; }
.viewer__cta span { font: italic 500 20px/1.2 var(--serif); margin-right: 4px; }

/* ================================================================= responsive */
@media (max-width: 1180px) {
  .hdr__list { gap: 18px; }
  .hdr__wa span { display: none; }
  .hdr__in { gap: 20px; }
}

@media (max-width: 1020px) {
  .hdr__burger { display: inline-flex; }
  .hdr__nav {
    display: none; position: fixed; left: 0; right: 0; top: calc(var(--hdr) + 4px);
    max-height: calc(100vh - var(--hdr) - 4px); overflow-y: auto;
    background: var(--lood-diep); padding: 10px 24px 24px; border-bottom: 4px solid var(--came);
  }
  .menu-open .hdr__nav { display: block; }
  .hdr__list { flex-direction: column; align-items: stretch; gap: 0; }
  .hdr__list > li { border-bottom: 1px solid var(--came); }
  .hdr__list > li > a, .dd__btn { width: 100%; justify-content: space-between; padding: 15px 0; font-size: 18px; }
  .dd__menu { position: static; min-width: 0; margin: 0 0 12px; border-width: 3px; box-shadow: none; }
  .dd__menu::before { display: none; }
  .hdr__acts { margin-left: auto; }
  .rcard__body { grid-template-columns: minmax(0, 1fr); }
  .rcard__copy { min-width: 0; }
  .rcard__list { align-self: start; }
}

@media (max-width: 880px) {
  .duo { grid-template-columns: 1fr; justify-items: center; gap: 22px; }
  .duo__name { justify-self: center; }
  .duo__came { width: 140px; height: 6px; min-height: 0; align-self: center; background: var(--came-h); }
  .duo__head { justify-self: center; text-align: center; max-width: 14em; }
  .intro__grid, .ladder, .ladder--flip, .owner__grid, .about__grid, .contact__grid, .faq__grid { grid-template-columns: 1fr; }
  .ladder--flip .ladder__type { order: 0; }
  .intro__portrait { max-width: 560px; }
  .owner__photo { max-width: 520px; }
  .about__pic { max-width: 520px; }
  .faq__head { grid-row: auto; }
  .faq__foot { grid-column: auto; }
  .area__grid { grid-template-columns: 1fr; grid-template-rows: none; }
  .area__txt, .area__map, .area__pic { grid-column: auto; grid-row: auto; }
  .map { min-height: 420px; }
  .window__panes { grid-template-columns: 1fr 1fr; }
  .pane--helder a { border-radius: 2px 0 0 0; }
  .pane--amber a { border-radius: 0 0 2px 0; }
  .foot__grid { grid-template-columns: 1fr 1fr; }
  .foot__brand { grid-column: 1 / -1; }
  .rgrid { gap: 18px; }
}

@media (max-width: 760px) {
  :root { --hdr: 62px; }
  .lockup--nav { width: 116px; }
  .hdr__in { width: calc(100% - 24px); gap: 10px; }
  .hdr__tel span, .hdr__wa span { display: none; }
  .hdr__tel, .hdr__wa { padding: 0; width: 46px; height: 46px; justify-content: center; }
  .hdr__tel .i, .hdr__wa .i { width: 21px; height: 21px; }
  /* the header and the call bar lie over the page and wait for the trust strip */
  .js .hdr { transform: translateY(calc(-100% - 6px)); }
  .js.bars-on .hdr, .js.menu-open .hdr { transform: none; }
  .fold { padding-top: 0; }
  .sticky {
    display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
    background: rgba(10, 20, 27, .95); border-top: 4px solid var(--came);
    transition: transform .35s ease;
  }
  .sticky .btn { min-height: 50px; }
  .js .sticky { transform: translateY(calc(100% + 6px)); }
  .js.bars-on .sticky { transform: none; }
  .viewer-open .sticky { display: none; }
  .foot { padding-bottom: 104px; }
}

@media (max-width: 640px) {
  body { font-size: 16.5px; }
  .wrap { width: calc(100% - 32px); }
  .sm-only { display: inline; }
  .lg-only { display: none !important; }
  /* on a phone the page tells much less: the rest stays in the page, hidden */
  .more, .ladder__h2, .ladder__list, .countline, .rcard__sub, .rcard__list, .fact p, .owner__sign { display: none !important; }

  .fold__inner { width: calc(100% - 32px); padding-top: 26px; }
  .lockup--xl { width: min(76vw, 310px); }
  .duo { gap: 18px; }
  .duo__head { font-size: clamp(29px, 8.2vw, 36px); }
  .fold__sub { font-size: 16px; margin-top: 14px; }
  .fold__acts { flex-direction: column; align-items: stretch; gap: 10px; max-width: 420px; margin-inline: auto; margin-top: 18px; }
  .fold__pair { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .fold__acts .btn--lg { min-height: 52px; font-size: 17px; padding-inline: .8em; }
  .trip {
    --gap: 8px; --shoulder: 26px; width: calc(100% - 20px);
    flex-basis: 196px; margin-top: 18px;
    grid-template-columns: 1fr 1.22fr 1fr; grid-template-rows: auto 1fr; row-gap: 14px;
  }
  .invite { position: static; grid-column: 1 / -1; grid-row: 1; width: auto; height: auto; justify-content: center; padding: 0; }
  .invite__face { width: 50px; height: 50px; }
  .invite__name { font-size: 32px; }
  .trip__pane, .trip__pane--l, .trip__pane--r, .trip__pane--c { grid-row: 2; border-width: 4px; border-radius: 50% 50% 0 0 / 46px 46px 0 0; }

  .strip-wrap { padding-top: 20px; }
  .strip { width: calc(100% - 32px); grid-template-columns: 1fr 5px 1fr; border-width: 5px; }
  .strip__pane { flex-direction: column; align-items: flex-start; gap: 6px; min-height: 0; padding: 12px 12px 13px; }
  .strip__fan { width: 34px; height: 23px; }
  .strip__big { font-size: 17px; }
  .strip__small { font-size: 13.5px; }
  .strip__pane--ko { flex-direction: row; align-items: center; gap: 10px; }
  .strip__fig { font-size: 36px; }
  .strip__pane--ko .stars svg { width: 15px; height: 15px; }
  .strip__pane--ko .ko-name { display: flex; margin-top: 1px; }

  .intro { padding-top: 52px; }
  .intro__hello { padding: 90px 22px 22px; }
  .intro__l2 { font-size: 78px; }
  .intro__portrait { --arch: 100px; }
  .fact { grid-template-columns: 104px minmax(0, 1fr); gap: 16px; padding: 14px 0; }
  .fact__pic { width: 104px; border-radius: 50% 50% 4px 4px / 26px 26px 4px 4px; }
  .fact h3 { font-size: 20px; margin: 0; }

  .window { margin-top: 44px; margin-bottom: -40px; }
  .window__panes { grid-template-columns: 1fr; gap: 4px; border-width: 5px; }
  .pane::before, .pane::after { display: none !important; }
  .pane a { min-height: 44px; padding: 10px 16px; font-size: 18px; border-radius: 0 !important; }
  .pane a .i { width: 18px; height: 18px; }
  .window__label { top: -13px; font-size: 11.5px; padding: 6px 14px; }

  .svc--ruit { padding: calc(40px + 44px) 0 64px; }
  .rcard { border-width: 5px; border-radius: 50% 50% 8px 8px / 54px 54px 8px 8px; }
  .rcard__photo { aspect-ratio: 4 / 3; }
  .rcard__series { padding: 12px 14px; border-top-width: 5px; }
  .rcard__body { padding: 22px 18px 24px; gap: 18px; }
  .rcard__h { font-size: 40px; margin-bottom: 0; }
  .proof { display: flex; width: 100%; gap: 10px; padding: 10px 12px; border-radius: 12px; }
  .avatars span { width: 32px; height: 32px; font-size: 12.5px; margin-left: -9px; }
  .proof__top { white-space: nowrap; }
  .avatars span:nth-child(n+4) { display: none; }
  .proof__line { font-size: 13.5px; }
  .rcard__acts { padding-top: 18px; }
  .acts .btn { flex: 1 1 auto; }

  .thumbs { gap: 6px; }
  .thumb { width: calc((100% - 18px) / 4); max-width: 86px; height: auto; aspect-ratio: 4 / 3; }
  .ladder__pic .thumbs { margin-top: 10px; }
  .svc--ladder { padding: 60px 0 64px; }
  .ladder { gap: 22px; }
  .ladder__h { font-size: 44px; margin: 0; }
  .ladder__type { display: contents; }
  .ladder__type .ladder__h { order: 1; }
  .ladder__pic { order: 2; }
  .ladder__type .acts { order: 3; }
  .ladder--flip .ladder__type { order: 0; }
  .mon__photo { max-width: 100%; }
  .label--lg { left: 10px; bottom: 10px; padding: 8px 11px 9px 10px; gap: 4px; max-width: calc(100% - 20px); }
  .label__where { font-size: 16.5px; }
  .label__link { font-size: 13px; }
  .stamp { width: 74px; right: 10px; top: 10px; bottom: auto; }
  .ba .stamp { top: auto; bottom: 12px; }
  .ba .label--lg { bottom: 10px; }
  .ba__tag { top: 10px; font-size: 11px; padding: 5px 8px; }
  .ba__tag--voor { left: 10px; }
  .ba__tag--na { right: 10px; }
  .ba { border-width: 4px; aspect-ratio: 4 / 3.4; }
  .ba__knob { width: 46px; height: 34px; }

  .band { padding: 24px 0; }
  .band__acts { width: 100%; display: grid; grid-template-columns: 1fr 1fr; }
  .band__acts .btn { font-size: 15.5px; padding-inline: .6em; }
  .places { margin: 14px 0 22px; gap: 6px; }
  .places li { padding: 4px 10px; font-size: 14px; }
  .band--actie .btn { width: 100%; }

  .projects__head { grid-template-columns: 1fr; }
  .carousel__ctrl { display: none; }
  .carousel { margin-top: 24px; }
  .carousel__track { gap: 14px; padding-inline: 16px; }
  .pcard { width: 78vw; border-radius: 50% 50% 8px 8px / 44px 44px 8px 8px; }
  .notlisted__acts { width: 100%; display: grid; grid-template-columns: 1fr 1fr; }

  .owner__photo, .about__pic { --arch: 100px; aspect-ratio: 4 / 4.4; }
  .owner__h, .about__h { font-size: 36px; }
  .area__pic { display: none; }
  .map { min-height: 320px; }
  .area { padding-top: 52px; }

  .rgrid { grid-template-columns: 1fr; gap: 16px; }
  .rv__ko { font-size: 12px; }
  .reviews__foot .btn { flex: 1 1 auto; }

  .contact__pair { display: grid; grid-template-columns: 1fr 1fr; }
  .contact__pair .btn--lg { font-size: 16px; padding-inline: .6em; }
  .form { border-radius: 50% 50% 8px 8px / 48px 48px 8px 8px; padding-top: 52px; }
  .foot__grid { grid-template-columns: 1fr; }
  .lockup--foot { width: 230px; }

  .viewer__top { padding: 8px 8px 8px 16px; }
  .viewer__title { font-size: 18px; }
  .viewer__stage { padding: 4px 10px 6px; }
  .viewer__nav { display: none; }
  .vpair { grid-template-columns: 1fr; grid-template-rows: 1fr 1fr; gap: 8px; }
  .viewer__desc { display: none; }
  .viewer__label { padding-top: 8px; }
  .vthumb { width: 60px; height: 44px; }
  .vthumb--pair { width: 76px; }
  .viewer__cta { gap: 8px; }
  .viewer__cta span { font-size: 17px; }
  .viewer__cta .btn { flex: 1 1 0; }
}

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


/* ============ RANDEN — picked 1 of ronde/randen.py (zonder: geen dikke randen en lijnen meer, de foto's en kaarten staan los op de achtergrond). Written in by ronde-varianten.py --vast; %V% -> :root:root. ============ */
:root:root .dd__menu, :root:root .trip__pane, :root:root .intro__portrait, :root:root .fact__pic, :root:root .rcard, :root:root .thumb, :root:root .mon__photo,
:root:root .ba, :root:root .pcard, :root:root .notlisted, :root:root .owner__photo, :root:root .about__pic, :root:root .area__pic, :root:root .map, :root:root .rv,
:root:root .form, :root:root .viewer__media > img, :root:root .vhalf img, :root:root .vthumb { border: 0; }
:root:root .rcard__series { border-top: 0; }
:root:root .pcard__body { border-top: 0; }
:root:root .band--foto, :root:root .band--actie { border-block: 0; }
:root:root .viewer__foot, :root:root .sticky { border-top: 0; }
:root:root .hdr__nav { border-bottom: 0; }
:root:root .hdr::after, :root:root .foot::before { display: none; }
:root:root .fact + .fact, :root:root .area, :root:root .faq__list { background: none; }
/* the trust strip: two panes with the ground between them */
:root:root .strip { border: 0; background: transparent; }
:root:root .strip__came { background: transparent; }
:root:root .strip__pane { border-radius: 8px; }
/* the services card: four panes touching, one card */
:root:root .window__panes { border: 0; background: transparent; gap: 0; border-radius: 8px; overflow: hidden; }
/* the three steps: three blocks with the ground between them */
:root:root .steps { border: 0; background: transparent; }
:root:root .steps li { border-radius: 6px; }


/* ============ KOP — picked 2 of ronde/kop.py (tekst rechts: de naam alleen links, kop, uitleg en knoppen rechts). Written in by ronde-varianten.py --vast; %V% -> :root:root. ============ */
:root:root .duo__came { display: none; }
@media (min-width: 881px) {
  :root:root .fold__inner {
    display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); column-gap: clamp(40px, 5.4vw, 84px);
    align-items: center; text-align: left;
  }
  :root:root .duo { display: contents; }
  :root:root .duo__name { grid-column: 1; grid-row: 1 / span 2; justify-self: end; }
  :root:root .duo__head { grid-column: 2; grid-row: 1; justify-self: start; max-width: 12.5em; }
  :root:root .fold__txt { grid-column: 2; grid-row: 2; }
  :root:root .fold__sub { margin: clamp(16px, 2.4vh, 24px) 0 0; max-width: 34em; }
  :root:root .fold__acts { justify-content: flex-start; }
}


/* ============ STROOK — by hand, 2026-11-02. Sem: "Nu de borders zijn weggevallen: [Image #7] verdwijnt dit element
   helemaal naar de achtergrond. Ik wil sowieso dat deze kolommen de breedte innemen van de volledige fixed container.
   Geef ze een soorgelijke box shadow als: [Image #9]" (the services card). The two panes take the page container's
   width (.wrap) and each the services card's shadow; the strip's own shadow goes. a before: style.before-strook.css ============ */
:root:root .strip { width: min(1200px, calc(100% - 48px)); box-shadow: none; }
:root:root .strip__pane { box-shadow: 0 26px 50px -30px rgba(15, 31, 41, .65); }
@media (max-width: 760px) { :root:root .strip { width: calc(100% - 32px); } }


/* ============ COEN PLEK — picked 1 of ronde/plek.py (onder het logo, in de linkerkolom). Written in by ronde-varianten.py --vast; %V% -> :root:root. ============ */
@media (min-width: 881px) {
  :root:root .trip > .invite { display: none; }
  :root:root .invite-slot .invite { position: static; width: auto; height: auto; padding: 0; }
  :root:root .invite-slot--logo { display: block; margin-top: clamp(22px, 3.2vh, 34px); }
  :root:root .invite-slot--logo .invite { justify-content: center; }
}


/* ============ COEN NADRUK — picked 2 of ronde/nadruk.py (als kaart: een eigen donkere kaart met schaduw, de regel in amber). Written in by ronde-varianten.py --vast; %V% -> :root:root. ============ */
:root:root .trip > .invite { top: auto; bottom: calc(100% - var(--shoulder) + 12px); height: auto; padding-bottom: 0; }   /* where it is now: grows upward, clear of the photo */
:root:root .fold .invite {
  gap: 14px; width: auto; height: auto; padding: 10px 28px 10px 10px; border-radius: 999px; white-space: nowrap;
  background: linear-gradient(128deg, rgba(255, 253, 248, .12) 0%, rgba(255, 253, 248, 0) 46%), var(--lood-verh);
  box-shadow: 0 22px 44px -20px rgba(0, 0, 0, .75);
}
:root:root .fold .invite__face { width: 66px; height: 66px; }
:root:root .fold .invite__name { font-size: 46px; }
:root:root .fold .invite__cta { font-size: 15.5px; color: var(--amber-l); text-decoration: none; }
:root:root .fold .invite:hover .invite__cta { color: var(--amber); }
:root:root .fold .invite:hover { filter: brightness(1.08); }
@media (max-width: 640px) {
  :root:root .fold .invite { justify-self: center; padding: 8px 22px 8px 8px; }
  :root:root .fold .invite__face { width: 56px; height: 56px; }
  :root:root .fold .invite__name { font-size: 38px; }
  :root:root .fold .invite__cta { font-size: 14.5px; }
}


/* ============ COEN UITGELIJND — by hand, 2026-11-02. Sem: "Ik wil dat het "ontmoet de eigenaar" element, wordt
   uitgelijnt met de buttons in de rechter kolom: [Image #11]". From 881 px the fold gets three rows (headline,
   explanation, buttons): the name stays centred beside the first two, Coen's card stands in the third, its middle on
   the buttons' middle. Both carry the buttons' margin on top, so centring the two in that row centres the card on the
   buttons; the card's -15 px top and bottom (86 px card, 56 px buttons) keep the row as tall as the buttons alone, so the
   right column stands where it stood. a before: style.before-uitlijnen.css ============ */
@media (min-width: 881px) {
  :root:root .fold__txt { display: contents; }
  :root:root .fold__sub { grid-column: 2; grid-row: 2; }
  :root:root .fold__acts { grid-column: 2; grid-row: 3; }
  :root:root .duo__name { grid-row: 1 / span 3; align-self: stretch; display: grid; grid-template-rows: subgrid; }
  :root:root .duo__name > .lockup--xl { grid-row: 1 / span 2; align-self: center; }
  :root:root .invite-slot--logo { grid-row: 3; align-self: center; margin: calc(clamp(18px, 3vh, 26px) - 15px) 0 -15px; }
}
/* From 881 to 1023 px the card was wider than the name's column and pushed the name to the screen's left edge (since
   the plek lock-in): there it takes its phone size. */
@media (min-width: 881px) and (max-width: 1023px) {
  :root:root .fold .invite { padding: 8px 22px 8px 8px; }
  :root:root .fold .invite__face { width: 56px; height: 56px; }
  :root:root .fold .invite__name { font-size: 38px; }
  :root:root .fold .invite__cta { font-size: 14.5px; }
}


/* ============ STROOK BREED + GEEN ONDERSTREPING — by hand, 2026-11-02. Sem: "Ik wil dat het fact blok de volledige
   container vult: [Image #12]" (the trust strip, under the photos) and "Ik wil het underlined hover effect op de h2 weg
   laten: [Image #15]" (Monumentenglas). The strip takes the photos' width above it, at every width; the amber underline
   on hovering a section's name goes, on every h2 that had it (the three service sections and Ruit vervangen).
   a before: style.before-breed-hover.css ============ */
:root:root .strip { width: min(1344px, calc(100% - 48px)); }
@media (max-width: 640px) { :root:root .strip { width: calc(100% - 20px); } }
:root:root .rcard__h a:hover, :root:root .ladder__h a:hover { text-decoration: none; }


/* ============ STROOK ACHTERGROND — picked 1 of ronde/grond.py (donker: de donkere kleur van het eerste scherm). Written in by ronde-varianten.py --vast; %V% -> :root:root. ============ */
:root:root .strip-wrap { background: var(--lood); padding-bottom: 34px; }
@media (max-width: 640px) { :root:root .strip-wrap { padding-bottom: 20px; } }


/* ============ STROOK INHOUD — picked 1 of ronde/inhoud.py (groter: alles in de vakken groter, zelfde indeling). Written in by ronde-varianten.py --vast; %V% -> :root:root. ============ */
:root:root .strip { grid-template-columns: minmax(0, 1fr) 6px minmax(0, 1fr); }   /* two equal blocks; the larger words wrap instead of pushing */
:root:root .strip__pane { min-height: 124px; padding: 24px 36px; gap: 24px; }
:root:root .strip__fan { width: 78px; height: 52px; }
:root:root .strip__big { font-size: 27px; }
:root:root .strip__small { font-size: 16.5px; }
:root:root .strip__fig { font-size: 68px; }
:root:root .strip__pane--ko .stars svg { width: 22px; height: 22px; }
:root:root .strip__ext { width: 22px; height: 22px; }
@media (min-width: 641px) and (max-width: 1023px) {   /* a tablet: the icon and the 5,0 on top, so the larger words fit */
  :root:root .strip__pane { flex-direction: column; align-items: flex-start; gap: 10px; padding: 22px 26px; }
  :root:root .strip__ext { position: absolute; top: 18px; right: 18px; margin: 0; }
  :root:root .strip__pane--ko { position: relative; }
}
@media (max-width: 640px) {
  :root:root .strip { grid-template-columns: minmax(0, 1fr) 5px minmax(0, 1fr); }
  :root:root .strip__pane { min-height: 0; padding: 16px 14px 17px; gap: 8px; }
  :root:root .strip__pane--ko { flex-direction: column; align-items: flex-start; gap: 6px; }   /* the 5,0 on top, like the fan beside it */
  :root:root .strip__fan { width: 44px; height: 30px; }
  :root:root .strip__big { font-size: 19.5px; }
  :root:root .strip__small { font-size: 14.5px; }
  :root:root .strip__fig { font-size: 44px; }
  :root:root .strip__pane--ko .stars svg { width: 17px; height: 17px; }
}


/* ============ PLAATSEN — picked 1 of ronde/lint.py (labels: elke plaats een eigen label, Gendt in amber). Written in by ronde-varianten.py --vast; %V% -> :root:root. ============ */
:root:root .band__in--lint { gap: 14px; }
:root:root .lint { gap: 10px; font-size: clamp(17px, 1.5vw, 20px); }
:root:root .lint span { padding: 7px 18px 8px; border-radius: 999px; background: var(--wit); box-shadow: 0 10px 22px -16px rgba(15, 31, 41, .6), 0 1px 2px rgba(15, 31, 41, .06); }
:root:root .lint span::after { content: none; }
:root:root .lint span:first-child { background: var(--sheen), var(--amber); }
@media (max-width: 640px) {
  :root:root .lint { gap: 8px; font-size: 16px; }
  :root:root .lint span { padding: 5px 13px 6px; }
}


/* ============ KAART — by hand, 2026-11-02. Sem: "De map heeft een z-index probleem; los dit op: [Image #17]" (the map
   over the header while scrolling). Leaflet's layers carry z-index 400 to 1000 and stood in the page's own stacking, over
   the header (50), the phone's call bar (60) and the photo viewer (100). The map is its own stacking context now, so
   all of that stays inside it. a before: style.before-kaart.css ============ */
:root:root .map { isolation: isolate; }


/* ============ WERKGEBIED ACHTERGROND — picked 2 of ronde/werk.py (papier: de lichte grond van de pagina, de zandbalk als stap ertussen). Written in by ronde-varianten.py --vast; %V% -> :root:root. ============ */
:root:root .firm .area { background: var(--paper); }

:root:root .firm .area { color: var(--lood); }
:root:root .area .announce--light { color: var(--olijf-d); }
:root:root .area .places li {
  border: 0; padding: 8px 14px; color: var(--lood); background: var(--wit);
  box-shadow: 0 10px 22px -16px rgba(15, 31, 41, .6), 0 1px 2px rgba(15, 31, 41, .06);
}
:root:root .area .places li:first-child { color: var(--lood); background: var(--sheen), var(--amber); }
:root:root .area .map { box-shadow: 0 26px 50px -30px rgba(15, 31, 41, .65); }
@media (max-width: 640px) { :root:root .area .places li { padding: 6px 12px; } }

/* ============ HOEKEN — Sem, 2026-11-03: "Ik wil dat hier de bovenkanten van de foto's rechthoekig worden" (the project
   cards). The arched top goes: the card takes the small corners of its foot all round, at every width. ============ */
:root:root .pcard { border-radius: 8px; }

/* ============ HOEKEN-WERK — Sem, 2026-11-03: "Deze afbeelding mag aan de bovenkant ook rechthoekig worden gemaakt"
   (the van photo under the werkgebied words). The arched top goes: the small corners of its foot all round. The photo is
   hidden on a phone already, so this shows from tablet up. ============ */
:root:root .area__pic { border-radius: 6px; }


/* ============ KLANTENOORDELEN-BLOK — picked 3 of ronde/oordeel.py (donker: lood met lichte letters en amber sterren, het sterkst). Written in by ronde-varianten.py --vast; %V% -> :root:root. ============ */
:root:root .reviews .rating {
  border: 0; padding: 14px 22px 16px; transition: transform .2s, background-color .2s;
  box-shadow: 0 22px 40px -28px rgba(15, 31, 41, .6), 0 1px 2px rgba(15, 31, 41, .06);
}
:root:root .reviews .rating:hover { transform: translateY(-2px); }

:root:root .reviews .rating { background: var(--lood); color: var(--paper); }
:root:root .reviews .rating:hover { background: var(--lood-verh); }
:root:root .reviews .rating .ko-ico { color: var(--olijf); }
:root:root .reviews .rating .stars { color: var(--amber); }
:root:root .reviews .rating__count { color: var(--olijf-l); }


/* ============ STROOK ONDER ELKAAR — Sem, 2026-11-03, on the phone, a crop of the trust strip: "Deze twee cta onder
   elkaar komen". Below 641 the two blocks stack, Voor het Rijk above Klantenoordelen, each the full width; with the room
   each goes back to a row (the fan beside its words, the 5,0 beside its stars). Tablet and computer unchanged.
   a before: style.before-strook-stapel.css ============ */
@media (max-width: 640px) {
  :root:root .strip { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 10px auto; }
  :root:root .strip__pane, :root:root .strip__pane--ko { flex-direction: row; align-items: center; gap: 16px; padding: 16px 18px 17px; }
}


/* ============ FOLD ZONDER ONDERTITEL — Sem, 2026-11-03, for the phone: "fold__sub mag op display: none". Below 641 the
   line under the fold's heading goes; tablet and computer keep it. a before: style.before-fold-sub.css ============ */
@media (max-width: 640px) { :root:root .fold__sub { display: none; } }


/* ============ REVIEWS OP DE TELEFOON — picked 2 of ronde/sterren.py (groter: twee stappen groter). Written in by ronde-varianten.py --vast; %V% -> :root:root. ============ */
@media (max-width: 640px) {
  :root:root .strip__pane--ko { gap: min(24px, 6.15vw); padding-block: 20px; }
  :root:root .strip__pane--ko .strip__fig { font-size: min(68px, 17.44vw); }
  :root:root .strip__pane--ko .strip__txt { gap: 6px; }
  :root:root .strip__pane--ko .stars { gap: 3px; }
  :root:root .strip__pane--ko .stars svg { width: min(27px, 6.92vw); height: min(27px, 6.92vw); }
  :root:root .strip__pane--ko .strip__small { font-size: min(17.5px, 4.49vw); }
  :root:root .strip__pane--ko .ko-ico { width: 20px; height: 20px; }
}


/* ============ VOOR HET RIJK OP DE TELEFOON — picked 2 of ronde/rijk.py (groter: twee stappen groter). Written in by ronde-varianten.py --vast; %V% -> :root:root. ============ */
@media (max-width: 640px) {
  :root:root .strip__pane--rijk { padding-block: 20px; gap: clamp(14px, 5.38vw, 21px); }
  :root:root .strip__pane--rijk .strip__fan { width: clamp(44px, 15.90vw, 62px); height: clamp(30px, 10.51vw, 41px); }
  :root:root .strip__pane--rijk .strip__big { font-size: clamp(19.5px, 6.67vw, 26px); }
  :root:root .strip__pane--rijk .strip__small { font-size: clamp(14.5px, 4.49vw, 17.5px); }
}


/* ============ LOGO — picked 3 of ronde/logo.py (crème: "Corstiaans" in het crème van de pagina, het lichtst). Written in by ronde-varianten.py --vast; %V% -> :root:root. ============ */
:root:root .lockup__mark, :root:root .lockup__word { display: none; }
:root:root .lockup__logo { display: block; }
:root:root .lockup__logo img { width: 100%; height: auto; }
:root:root .lockup__slogan { margin: 3.2cqw 0 0 .6cqw; font-size: 4.5cqw; }
:root:root .lockup--nav { width: 188px; }
:root:root .lockup--xl { width: clamp(304px, 32.4vw, 484px); }
:root:root .lockup--xl .lockup__slogan { font-size: 5cqw; }
:root:root .lockup--foot { width: 338px; }
@media (max-width: 760px) {
  :root:root .lockup--nav { width: clamp(128px, 42vw, 170px); }
}
@media (max-width: 640px) {
  :root:root .lockup--xl { width: min(88vw, 340px); }
  :root:root .lockup--xl .lockup__slogan { font-size: 4.5cqw; }
  :root:root .lockup--foot { width: 288px; }
}
/* the cream word: index.html has logo-v3-creme.svg as the src (on the switch this was content: url()) */


/* ============ LOGO EN COEN UITGELIJND — by hand, 2026-11-04. Sem, on the fold with his logo: "dus ik wil dat het logo
   aan de bovenkant is uitgelijnd met: Glas in lood, gemaakt en hersteld aan onze eigen werkbank" en dat het "ontmoet de
   eigenaar" element aan de onderkant is uitgelijnd met [the three buttons]". From 881 px, where the name stands beside
   the headline: the logo (the slogan under it) at the top of the headline's row instead of centred beside headline and
   explanation, the top of its letters on the top of the headline's; Coen's card at the foot of the buttons' row, its
   bottom on the buttons' bottom (from 1024 to 1279 the buttons take two lines: on the lower line's). The card's -30 px
   on top keeps the row as tall as the buttons alone, so the right column stands where it stood. Below 881 nothing
   changes. a before: style.before-logo-lijn.css ============ */
@media (min-width: 881px) {
  :root:root .duo__name > .lockup--xl { align-self: start; }
  :root:root .invite-slot--logo { align-self: end; margin: calc(clamp(18px, 3vh, 26px) - 30px) 0 0; }
}


/* ============ ROUND ROW "Oud logo" (ronde/oudlogo.py, ?oudlogo=1..1) — each answer a block of its own, behind :root[data-oudlogo="n"]; with no data-oudlogo the page is a. ============ */

:root[data-oudlogo="1"] .lockup__logo { display: none; }
:root[data-oudlogo="1"] .lockup__mark { display: block; }
:root[data-oudlogo="1"] .lockup__word { display: inline; }
:root[data-oudlogo="1"] .lockup__slogan, :root[data-oudlogo="1"] .lockup--xl .lockup__slogan { margin: 3cqw 0 0 14.6cqw; font-size: 5.6cqw; }
:root[data-oudlogo="1"] .lockup--nav { width: 150px; }
:root[data-oudlogo="1"] .lockup--xl { width: clamp(270px, 29vw, 430px); }
:root[data-oudlogo="1"] .lockup--foot { width: 270px; }
@media (max-width: 760px) {
  :root[data-oudlogo="1"] .lockup--nav { width: 116px; }
}
@media (max-width: 640px) {
  :root[data-oudlogo="1"] .lockup--xl { width: min(76vw, 310px); }
  :root[data-oudlogo="1"] .lockup--foot { width: 230px; }
}
@media (min-width: 881px) {
  :root[data-oudlogo="1"] .duo__name > .lockup--xl { align-self: center; }
  :root[data-oudlogo="1"] .invite-slot--logo { align-self: center; margin: calc(clamp(18px, 3vh, 26px) - 15px) 0 -15px; }
}


/* ── 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 currentColor;
  background:rgba(127,127,127,.14);color:inherit;
  font-size:15px;line-height:1.5;
}
.form-demo[hidden]{display:none !important}
.form-demo a{color:inherit;text-decoration:underline}