/* Joost van Mourik Schilderwerken · bak1 · L1-10 · a
   Every colour below comes from palette.json. */

:root {
  /* primary — Mourikblauw */
  --blue-deep: #1A3443;
  --blue: #274B5E;
  --blue-mid: #426577;
  --blue-slogan: #33576D;
  --blue-rim: #9FADB3;
  --blue-wash: #DCE4E8;
  /* neutral — gebroken wit en inkt */
  --white: #FFFFFF;
  --paper: #FBF9F5;
  --ground: #F3EFE7;
  --ground-deep: #E7E0D2;
  --line: #D3CBBC;
  --ink-mute: #5D6D76;
  --ink-soft: #3D4F59;
  --ink: #15232C;
  /* secondary — afplaktape */
  --tape: #9CBEDA;
  --tape-edge: #7FA6C6;
  /* accent — oker */
  --oker: #D69A2D;
  --oker-deep: #A8731A;
  /* WhatsApp */
  --wa: #25D366;
  --wa-press: #1DA851;

  --f-name: "Saira Condensed", "Arial Narrow", sans-serif;
  --f-body: "Mukta", system-ui, sans-serif;
  --f-voice: "Signika", system-ui, sans-serif;
  --f-hand: "Caveat Brush", "Segoe Print", cursive;

  --gut: clamp(16px, 5.6vw, 80px);
  --header-h: 76px;
  --sec: clamp(64px, 8vw, 116px);
  --gloss: linear-gradient(180deg, rgb(255 255 255 / .17), rgb(255 255 255 / 0) 52%);
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 92px; -webkit-text-size-adjust: 100%; }
html.v-open { overflow: hidden; }
body { margin: 0; background: var(--ground); color: var(--ink-soft); font: 400 17px/1.6 var(--f-body); -webkit-font-smoothing: antialiased; overflow-x: clip; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
h1, h2, h3, p, ul, ol, figure, dl, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
.wrap { max-width: 1440px; margin: 0 auto; padding-inline: var(--gut); }
.ico { width: 1em; height: 1em; flex: none; }
:focus-visible { outline: 2px solid var(--tape-edge); outline-offset: 3px; }
.skip { position: absolute; left: -9999px; top: 0; }
.skip:focus { left: 16px; top: 16px; z-index: 200; background: var(--paper); padding: 8px 14px; border-radius: 6px; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 54px; padding: 0 24px; border-radius: 10px; border: 1.5px solid transparent;
  font: 600 17px/1 var(--f-body); text-decoration: none; white-space: nowrap;
  transition: background-color .2s, border-color .2s, color .2s, transform .2s;
}
.btn .ico { width: 20px; height: 20px; }
.btn:active { transform: translateY(1px); }
.btn-call { background-color: var(--blue); background-image: var(--gloss); color: var(--paper); box-shadow: inset 0 1px 0 rgb(255 255 255 / .16); }
.btn-call:hover { background-color: var(--blue-deep); }
.btn-wa { background-color: var(--wa); background-image: var(--gloss); color: var(--white); box-shadow: inset 0 1px 0 rgb(255 255 255 / .22); }
.btn-wa:hover { background-color: var(--wa-press); }
.btn-quiet { background: transparent; border-color: var(--ink); color: var(--ink); }
.btn-quiet:hover { background: var(--ground-deep); }
.btn-quiet-dark { border-color: var(--blue-rim); color: var(--paper); }
.btn-quiet-dark:hover { background: var(--blue); }
.btn-paper { background-color: var(--paper); color: var(--ink); }
.btn-paper:hover { background-color: var(--ground); }
.btn-sm { min-height: 42px; padding: 0 16px; font-size: 15px; border-radius: 8px; }
.btn-sm .ico { width: 18px; height: 18px; }
.btn-block { width: 100%; }
.pair { display: flex; flex-wrap: wrap; gap: 12px; }
.acts { display: flex; flex-wrap: wrap; gap: 12px; }

/* ---------- the tape: the page's own labels ---------- */
.tape {
  --tilt: -1.6deg;
  display: inline-flex; align-items: center; gap: .35em;
  font: 400 26px/1 var(--f-hand); color: var(--blue-deep);
  background-color: rgb(156 190 218 / .94);
  background-image:
    linear-gradient(180deg, rgb(255 255 255 / .24), rgb(255 255 255 / 0) 45%, rgb(21 35 44 / .05)),
    repeating-linear-gradient(90deg, rgb(255 255 255 / .11) 0 1px, transparent 1px 4px);
  padding: .34em .95em .3em;
  transform: rotate(var(--tilt));
  clip-path: polygon(0 0, calc(100% - 4px) 0, 100% 14%, calc(100% - 3px) 28%, 100% 42%, calc(100% - 4px) 57%, calc(100% - 1px) 71%, calc(100% - 4px) 86%, 100% 100%, 3px 100%, 0 86%, 4px 72%, 1px 58%, 4px 43%, 0 29%, 3px 14%);
}
.tape .ico { width: .74em; height: .74em; color: var(--blue-deep); }
.tape-kicker { font-size: 27px; margin-bottom: 18px; }
.tape-place { font-size: 27px; padding: .32em .85em .28em .62em; }
.tape-vn { position: absolute; top: 14px; left: 12px; font-size: 24px; --tilt: -3deg; z-index: 2; }

/* ---------- stamp + labels on principal photos ---------- */
.stamp {
  position: absolute; z-index: 2; top: 18px; right: 18px;
  display: flex; align-items: center; gap: 8px; color: var(--paper);
  pointer-events: none; opacity: .93;
  filter: drop-shadow(0 1px 5px rgb(21 35 44 / .55));
}
.stamp img { height: 36px; width: auto; }
.stamp b { display: block; font: 800 17px/.92 var(--f-name); }
.stamp i { display: block; font: 500 8.5px/1 var(--f-body); font-style: normal; letter-spacing: .2em; margin-top: 3px; }
.plabel { position: absolute; z-index: 2; left: 18px; bottom: 20px; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; pointer-events: none; }
.plabel > * { pointer-events: auto; }
.plabel-link { font: 600 14px/1 var(--f-body); color: var(--ink); background: var(--paper); padding: 9px 12px; border-radius: 6px; text-decoration: none; box-shadow: 0 6px 16px -8px rgb(21 35 44 / .6); }
.plabel-link:hover { background: var(--ground); }
.small-label { position: absolute; left: 12px; bottom: 14px; font-size: 19px; padding: .3em .7em .26em .5em; }
.pic { position: relative; }
.pic-open { display: block; width: 100%; height: 100%; cursor: zoom-in; }
.pic-open img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- header ---------- */
.site-header { position: sticky; top: 0; z-index: 50; background: rgb(243 239 231 / .95); backdrop-filter: blur(8px); border-bottom: 1px solid transparent; transition: border-color .2s, transform .35s ease; }
.site-header.scrolled { border-bottom-color: var(--line); }
.header-in { display: flex; align-items: center; gap: 28px; height: var(--header-h); }
.brand { display: flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; margin-right: auto; }
.brand-mark { height: 42px; width: auto; }
.brand-words { display: flex; flex-direction: column; }
.brand-name { font: 800 21px/.92 var(--f-name); }
.brand-sub { font: 500 10.5px/1 var(--f-body); letter-spacing: .17em; margin-top: 4px; }
.nav-list { display: flex; align-items: center; gap: 2px; }
.nav-list > li > a, .drop-toggle { display: inline-flex; align-items: center; gap: 6px; padding: 10px 14px; border-radius: 8px; font: 500 16px/1 var(--f-body); color: var(--ink); text-decoration: none; }
.nav-list > li > a:hover, .drop-toggle:hover, .has-drop.open .drop-toggle { background: var(--ground-deep); }
.chev { width: 14px; height: 14px; transition: transform .2s; }
.has-drop { position: relative; }
.has-drop::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 10px; }
.drop {
  position: absolute; top: calc(100% + 8px); left: -8px; min-width: 260px; z-index: 5;
  background: var(--paper); border: 1px solid var(--line); border-radius: 12px; padding: 8px;
  box-shadow: 0 22px 44px -22px rgb(21 35 44 / .4);
  opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .18s, transform .18s, visibility .18s;
}
.drop a { display: block; padding: 11px 14px; border-radius: 8px; text-decoration: none; color: var(--ink); font: 700 21px/1.05 var(--f-name); }
.drop a:hover { background: var(--ground); }
@media (hover: hover) {
  .has-drop:hover .drop { opacity: 1; visibility: visible; transform: none; }
  .has-drop:hover .chev { transform: rotate(180deg); }
}
.has-drop.open .drop { opacity: 1; visibility: visible; transform: none; }
.has-drop.open .chev { transform: rotate(180deg); }
.header-acts { display: flex; align-items: center; gap: 8px; }
.menu-btn { display: none; }

/* ---------- fold ---------- */
.fold { padding: clamp(24px, 3.6vh, 40px) 0 clamp(36px, 5vh, 52px); }
.fold-in { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(40px, 6vw, 96px); }
.fold-left { display: flex; flex-direction: column; align-items: flex-start; }
.lockup { display: flex; align-items: center; gap: 20px; }
.lockup-mark { height: 134px; width: auto; flex: none; }
.lockup-words { display: flex; flex-direction: column; align-items: flex-start; }
.lk-name { font: 800 66px/.88 var(--f-name); color: var(--ink); }
.lk-sub { font: 500 32px/1 var(--f-body); letter-spacing: .17em; color: var(--ink); margin-top: 12px; }
.lk-slogan { font: 300 25px/1 var(--f-voice); color: var(--blue-slogan); margin-top: 12px; }
.fold-h1 { font: 600 72px/1 var(--f-voice); color: var(--ink); letter-spacing: -.012em; margin-top: 40px; text-wrap: balance; max-width: 12ch; }
.fold-sub { font-size: 19px; line-height: 1.55; margin-top: 20px; max-width: 30em; }
.fold-left > .pair { margin-top: 28px; }
.invite { display: flex; align-items: center; gap: 16px; margin-top: 30px; text-decoration: none; color: var(--ink); }
.invite-face { position: relative; width: 80px; height: 80px; flex: none; border-radius: 50%; overflow: hidden; box-shadow: 0 0 0 4px var(--paper), 0 0 0 5px var(--line); }
.invite-face img { position: absolute; max-width: none; width: 431.5%; height: auto; left: -128.8%; top: -71.2%; }
.invite-name { display: block; font: 400 42px/.85 var(--f-hand); color: var(--blue); }
.invite-link { display: inline-block; font: 600 16px/1.2 var(--f-body); margin-top: 6px; padding-bottom: 2px; border-bottom: 2px solid var(--tape); transition: border-color .2s, color .2s; }
.invite:hover .invite-link { color: var(--blue); border-color: var(--blue); }
.fold-rating { margin-top: auto; padding-top: 26px; display: inline-flex; align-items: center; gap: 10px; font-size: 15px; color: var(--ink-mute); text-decoration: none; }
.fold-rating b { font-weight: 600; color: var(--ink-soft); }
.fold-rating:hover span:last-child { text-decoration: underline; text-underline-offset: 3px; }
.stars { display: inline-flex; gap: 2px; color: var(--oker); }
.stars svg { width: 16px; height: 16px; }

.fold-right { display: flex; flex-direction: column; justify-content: center; }
.answers { border-top: 1px solid var(--line); }
.answers li { border-bottom: 1px solid var(--line); }
.answer {
  display: grid; grid-template-columns: 80px minmax(0, 1fr) 28px; align-items: center; gap: 28px;
  padding: 13px 14px 13px 0; color: var(--ink); text-decoration: none;
  background: var(--ground-deep);
}
.patch { display: block; width: 80px; height: 106px; -webkit-mask: url(merk.svg) center / 100% 100% no-repeat; mask: url(merk.svg) center / 100% 100% no-repeat; transition: transform .35s; }
.patch img { width: 100%; height: 100%; object-fit: cover; }
.answer:hover .patch { transform: rotate(-2.5deg) scale(1.04); }
.answer-name { display: block; font: 700 40px/1 var(--f-name); }
.answer-line { display: block; font-size: 16px; line-height: 1.35; color: var(--ink-mute); margin-top: 5px; }
.answer-arrow { width: 28px; height: 28px; color: var(--blue); transition: transform .25s; }
.answer:hover .answer-arrow { transform: translateX(6px); }
.fold-inst { margin-top: 18px; font-size: 15px; color: var(--ink-mute); }
/* two columns: the block from the headline to Joost stands on the same bottom line as the list (Sem, 2026-11-02) */
@media (min-width: 961px) {
  .fold-left .lockup { margin-bottom: 40px; }
  .fold-left .fold-h1 { margin-top: auto; }
  .fold-left .invite { margin-bottom: 5px; }
  .fold-right { justify-content: flex-end; }
}

/* ---------- trust strip: one lacquered panel ---------- */
.trust { padding-top: 4px; }
.lak {
  position: relative; display: grid; grid-template-columns: 1fr 1fr; min-height: 116px; overflow: hidden;
  border-radius: 12px; color: var(--paper);
  background-color: var(--blue-deep);
  background-image:
    linear-gradient(172deg, rgb(255 255 255 / .11) 0%, rgb(255 255 255 / .03) 34%, rgb(255 255 255 / 0) 36%, rgb(255 255 255 / 0) 70%, rgb(255 255 255 / .05) 100%),
    linear-gradient(180deg, rgb(255 255 255 / .07), rgb(255 255 255 / 0) 26%);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .14), 0 24px 44px -32px rgb(21 35 44 / .7);
}
.lak-cell { display: flex; align-items: center; gap: 26px; padding: 20px 44px; }
.lak-cell + .lak-cell { border-left: 1px solid rgb(159 173 179 / .28); }
.lak-mark { height: 78px; width: auto; }
.lak-fact { display: flex; align-items: baseline; gap: 12px; }
.lak-small { font: 500 15px/1 var(--f-body); letter-spacing: .2em; text-transform: uppercase; color: var(--blue-rim); }
.lak-big { font: 800 64px/.9 var(--f-name); color: var(--paper); white-space: nowrap; }   /* "5 / 5" broke over two lines at 761–900 px */
.lak-expl { font-size: 15px; line-height: 1.4; color: var(--blue-rim); margin-top: 6px; }
.stars-lak svg { width: 20px; height: 20px; }
.lak-plat { font-size: 16px; line-height: 1.3; margin-top: 4px; }
.lak-plat b { font-weight: 600; }
.lak-count { color: var(--blue-wash); }
.lak-link { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; font-size: 14px; color: var(--blue-rim); text-underline-offset: 3px; text-decoration-color: rgb(156 190 218 / .55); }
.lak-link:hover { color: var(--paper); }
.lak-link .ico { width: 13px; height: 13px; }

/* ---------- even voorstellen ---------- */
.intro { padding: clamp(64px, 8vw, 112px) 0 64px; }
h2.tape-kicker.tape { font-size: 40px; margin-bottom: 30px; }
.intro-in { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(40px, 6vw, 96px); align-items: center; }
.intro-portrait { position: relative; aspect-ratio: 4 / 5; max-height: 700px; border-radius: 6px; overflow: hidden; }
.intro-portrait img { width: 100%; height: 100%; object-fit: cover; object-position: 44% 18%; }
.intro-say { position: absolute; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; align-items: flex-start; padding: 140px 36px 30px; color: var(--paper); background: linear-gradient(180deg, rgb(21 35 44 / 0), rgb(21 35 44 / .55) 45%, rgb(21 35 44 / .82)); }
.say-1 { font: 300 24px/1.1 var(--f-voice); }
.say-2 { font: 400 108px/.82 var(--f-hand); margin: 6px 0 12px -4px; }
.say-3 { font: 500 15px/1.3 var(--f-body); letter-spacing: .05em; color: var(--blue-wash); }
.intro-facts { border-top: 1px solid var(--line); }
.ifact { display: grid; grid-template-columns: 136px minmax(0, 1fr); gap: 28px; align-items: center; padding: 24px 0; border-bottom: 1px solid var(--line); }
.ifact-pic { display: block; width: 136px; height: 104px; border-radius: 4px; overflow: hidden; }
.ifact-pic img { width: 100%; height: 100%; object-fit: cover; }
.ifact h3 { font: 700 31px/1.02 var(--f-name); color: var(--ink); }
.ifact p { margin-top: 7px; font-size: 17px; line-height: 1.5; }

.svc-card {
  position: relative; z-index: 3; display: flex; align-items: center; gap: 28px;
  margin: 64px 0 0; padding: 0 10px 0 32px;   /* no longer hangs over the next section (Sem, 2026-11-03): it sits in the intro, the section below starts under it */
  background: var(--paper); border: 1px solid var(--line); border-radius: 12px;
  box-shadow: 0 26px 50px -32px rgb(21 35 44 / .45);
}
.svc-card .tape { flex: none; font-size: 26px; background: none; clip-path: none; transform: none; padding: 0; }
.svc-card ul { display: flex; flex: 1; }
.svc-card li { flex: 1 1 auto; }
.svc-card li + li { border-left: 1px solid var(--line); }
.svc-card a { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 28px 22px; color: var(--ink); text-decoration: none; font: 700 25px/1 var(--f-name); transition: background-color .2s; }
.svc-card a .ico { width: 20px; height: 20px; color: var(--blue); transition: transform .2s; }
.svc-card a:hover { background: var(--ground); }
.svc-card a:hover .ico { transform: translateX(4px); }

/* ---------- services, shared ---------- */
.svc { padding: var(--sec) 0; }
.svc-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(40px, 6vw, 96px); align-items: center; }
.l-1 { font: 700 clamp(44px, 4.4vw, 64px)/.95 var(--f-name); color: var(--ink); }
.l-1 a, .mc-h a { text-decoration: none; }
.l-2 { font: 400 clamp(22px, 2vw, 28px)/1.25 var(--f-voice); color: var(--ink-soft); margin-top: 18px; max-width: 19em; }
.l-3 { margin-top: 24px; }
.l-3 li, .mc-list li { position: relative; padding: 11px 0 11px 34px; border-bottom: 1px solid var(--line); font: 300 20px/1.3 var(--f-voice); color: var(--ink); }
.l-3 li:first-child, .mc-list li:first-child { border-top: 1px solid var(--line); }
.l-3 li::before, .mc-list li::before { content: ""; position: absolute; left: 0; top: 50%; width: 18px; height: 9px; background: var(--tape); transform: translateY(-50%) rotate(-5deg); clip-path: polygon(0 0, 100% 8%, 92% 50%, 100% 100%, 0 92%, 8% 50%); }
.ladder .acts { margin-top: 34px; }

.series { margin-top: 16px; }
.thumbs { display: flex; gap: 8px; }
.thumbs li { flex: 0 1 86px; min-width: 0; }   /* shrinks where the column is narrower than five (961–1100 px stuck out sideways) */
.th { position: relative; display: block; width: 100%; height: 64px; border-radius: 4px; overflow: hidden; cursor: zoom-in; background: var(--ground-deep); }
.th img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s; }
.th:hover img { transform: scale(1.07); }
.th-more { position: absolute; inset: 0; display: grid; place-items: center; background: rgb(21 35 44 / .6); color: var(--paper); font: 700 23px/1 var(--f-name); }
.series-count { margin-top: 10px; font: 500 15px/1.2 var(--f-body); color: var(--ink-mute); text-decoration: underline; text-decoration-color: var(--tape); text-decoration-thickness: 2px; text-underline-offset: 5px; }
.series-count:hover { color: var(--ink); }

/* ---------- 1 · buitenschilderwerk: the card that carries the business ---------- */
.svc-main { background: var(--ground-deep); }
.main-card {
  --ph: clamp(340px, 43vw, 620px);
  --over: 230px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) min(860px, 64%);
  grid-template-rows: calc(var(--ph) - var(--over)) var(--over) auto;
}
.mc-photo { grid-column: 1 / -1; grid-row: 1 / 3; border-radius: 8px; overflow: hidden; }
.mc-photo .stamp { top: 22px; right: 24px; }
.mc-photo .plabel { left: 24px; bottom: 26px; }
.main-card > .series { grid-column: 1; grid-row: 3; margin-top: 20px; padding-right: 32px; }
.main-card .thumbs { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); }
.main-card .thumbs li { width: auto; min-width: 0; }
.main-card .th { height: 66px; }
.mc-frame {
  grid-column: 2; grid-row: 2 / 4; position: relative; z-index: 3; margin-right: 36px;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 40px;
  grid-template-areas: "h h" "sub list" "foot foot";
  background: var(--paper); border: 1px solid var(--line); border-radius: 8px;
  padding: 36px 40px 0;
  box-shadow: 0 44px 80px -46px rgb(21 35 44 / .6);
}
.mc-head { display: contents; }
.mc-h { grid-area: h; font: 700 72px/.92 var(--f-name); color: var(--ink); }
.mc-sub { grid-area: sub; margin-top: 16px; font: 400 23px/1.3 var(--f-voice); color: var(--ink-soft); }
.mc-list { grid-area: list; margin-top: 18px; }
.mc-list li { font-size: 18px; padding-top: 10px; padding-bottom: 10px; }
.mc-foot { grid-area: foot; display: flex; align-items: center; justify-content: space-between; gap: 18px 24px; flex-wrap: wrap; margin-top: 30px; padding: 22px 0 26px; border-top: 1px solid var(--line); }
.voor-u { display: flex; align-items: center; gap: 10px 14px; color: var(--ink); text-decoration: none; min-width: 0; }
.faces { display: flex; }
.faces span { width: 42px; height: 42px; margin-left: -11px; display: grid; place-items: center; border-radius: 50%; border: 3px solid var(--paper); font: 700 18px/1 var(--f-name); color: var(--paper); background: var(--blue); }
.faces span:first-child { margin-left: 0; }
.faces span:nth-child(2) { background: var(--blue-mid); }
.faces span:nth-child(3) { background: var(--blue-slogan); }
.faces span:nth-child(4) { background: var(--blue-deep); }
.voor-u-score { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: 16px; line-height: 1.2; }
.voor-u-score b { font-weight: 700; }
.voor-u-line { display: block; font-size: 14px; color: var(--ink-mute); margin-top: 3px; }
.voor-u:hover .voor-u-score { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- 2 · binnenschilderwerk ---------- */
.svc-binnen { background: var(--paper); }
.svc-binnen .svc-grid, .svc-glas .svc-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.svc-binnen .svc-pic, .svc-glas .svc-pic { order: -1; }
.pairpic .pic-open { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; height: auto; }
.half { position: relative; display: block; overflow: hidden; border-radius: 6px; }
.pairpic-tall .half { aspect-ratio: 4 / 5; }
.pairpic-wide .half { aspect-ratio: 3 / 2; }
.half img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s; }
.pairpic .pic-open:hover .half img, .single-pic .pic-open:hover img { transform: scale(1.025); }
.single-pic .pic-open { overflow: hidden; border-radius: 6px; }
.single-pic .pic-open img { transition: transform .6s; }

/* ---------- bands ---------- */
.band { padding: 34px 0; }
.band-in { display: flex; align-items: center; justify-content: space-between; gap: 18px 48px; flex-wrap: wrap; }
.band-h { font: 700 clamp(30px, 3vw, 44px)/1 var(--f-name); color: var(--ink); }
.band-line { font: 400 19px/1.4 var(--f-voice); margin-top: 6px; color: var(--ink-soft); }
.band-app {
  background-color: var(--tape);
  background-image:
    linear-gradient(180deg, rgb(255 255 255 / .22), rgb(255 255 255 / 0) 40%, rgb(21 35 44 / .05)),
    repeating-linear-gradient(90deg, rgb(255 255 255 / .1) 0 1px, transparent 1px 5px);
}
.band-app .band-h, .band-app .band-line { color: var(--blue-deep); }
.band-lint { background: var(--ground); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 26px 0; }
.band-lint .band-in { flex-wrap: nowrap; }
.band-lint .band-h { flex: none; font-size: 30px; }
.lint-places { flex: 1; margin: 0; font: 500 16px/1.5 var(--f-body); letter-spacing: .02em; color: var(--ink-soft); }
.band-link { flex: none; font: 600 17px/1 var(--f-body);   /* as big as the buttons (Sem, 2026-11-03); 16 px on the phone, as they are */ color: var(--blue); text-decoration: none; border-bottom: 2px solid var(--tape); padding-bottom: 3px; }
.band-link:hover { border-color: var(--blue); }

/* ---------- 3 · behangen ---------- */
.svc-behang { background: var(--ground); }
.ladder-wide { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 0 clamp(40px, 6vw, 96px); align-items: start; margin-bottom: 40px; }
.ladder-wide .l-2 { margin-top: 14px; }
.ladder-right .l-3 { display: grid; grid-template-columns: 1fr 1fr; column-gap: 32px; }
.ladder-right .l-3 li:nth-child(2) { border-top: 1px solid var(--line); }
.series-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.series-row .acts { margin-top: 16px; }

/* ---------- 4 · spuitwerk, on the lacquer ---------- */
.svc-spuit { background: var(--blue-deep); color: var(--blue-wash); }
.svc-spuit .svc-grid { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); }
.svc-spuit .svc-pic { order: 2; }
.svc-spuit .l-1 { color: var(--paper); }
.svc-spuit .l-2 { color: var(--blue-wash); }
.svc-spuit .l-3 li { color: var(--paper); border-color: rgb(159 173 179 / .3); }
.single-pic .pic-open { aspect-ratio: 4 / 5; max-height: 680px; }
.svc-spuit .series-count { color: var(--blue-rim); }
.svc-spuit .series-count:hover { color: var(--paper); }

/* ---------- 5 · glaszetten ---------- */
.svc-glas { background: var(--blue-wash); }
.svc-glas .l-3 li { border-color: var(--blue-rim); }

/* ---------- projects ---------- */
.projects { padding: var(--sec) 0; background: var(--ground); }
.proj-head { display: flex; flex-direction: column; align-items: flex-start; margin-bottom: 36px; }
.sec-h { font: 700 clamp(40px, 4.4vw, 64px)/.96 var(--f-name); color: var(--ink); }
.sec-lead { font: 400 20px/1.4 var(--f-voice); margin-top: 14px; max-width: 32em; }
.proj-viewport { overflow: hidden; padding: 10px 0 26px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent); mask-image: linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent); }
.proj-track { display: flex; gap: 24px; width: max-content; animation: drift 70s linear infinite; }
.proj-viewport:hover .proj-track, .proj-viewport:focus-within .proj-track { animation-play-state: paused; }
@keyframes drift { to { transform: translateX(calc(-50% - 12px)); } }
.proj { width: min(430px, 80vw); flex: none; }
.proj-btn { display: block; width: 100%; height: 100%; text-align: left; background: var(--paper); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; cursor: zoom-in; transition: transform .25s, box-shadow .25s; }
.proj-btn:hover { transform: translateY(-4px); box-shadow: 0 26px 40px -30px rgb(21 35 44 / .55); }
.proj-pic { position: relative; display: block; aspect-ratio: 4 / 3; }
.proj-pic > img { width: 100%; height: 100%; object-fit: cover; }
.proj-pic .tape-place { position: absolute; left: 14px; bottom: 16px; font-size: 26px; }
.proj-pic .stamp { top: 14px; right: 14px; }
.proj-body { display: block; padding: 18px 22px 22px; }
.proj-svc { display: block; font: 700 25px/1 var(--f-name); color: var(--ink); }
.proj-words { display: block; margin-top: 7px; font-size: 16px; line-height: 1.45; color: var(--ink-soft); }
@media (prefers-reduced-motion: reduce) {
  .proj-track { animation: none; }
  .proj-viewport { overflow-x: auto; }
}
.klus {
  margin-top: 40px; display: flex; align-items: center; justify-content: space-between; gap: 24px 40px; flex-wrap: wrap;
  padding: 38px 44px; border-radius: 12px; color: var(--paper);
  background-color: var(--blue); background-image: linear-gradient(172deg, rgb(255 255 255 / .1), rgb(255 255 255 / 0) 40%);
}
.klus-h { font: 700 clamp(34px, 3.6vw, 52px)/1 var(--f-name); color: var(--paper); }
.klus-line { font: 400 19px/1.4 var(--f-voice); color: var(--blue-wash); margin-top: 8px; max-width: 34em; }
.klus .btn-call { background-color: var(--paper); background-image: none; color: var(--ink); }
.klus .btn-call:hover { background-color: var(--ground); }

/* ---------- the owner ---------- */
.owner { padding: var(--sec) 0; background: var(--paper); }
.owner-in { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(40px, 6vw, 96px); align-items: center; }
.owner-pic { position: relative; aspect-ratio: 5 / 4; border-radius: 8px; overflow: hidden; }
.owner-pic img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 24%; }
.owner-sign { position: absolute; right: 30px; bottom: 18px; font: 400 76px/1 var(--f-hand); color: var(--paper); transform: rotate(-5deg); text-shadow: 0 2px 14px rgb(21 35 44 / .55); }
.owner-p { margin-top: 20px; font: 400 21px/1.55 var(--f-voice); color: var(--ink-soft); }
.owner .pair { margin-top: 32px; }

/* ---------- over ons + werkgebied: one ground ---------- */
.pairsec { background: var(--ground-deep); }
.about { padding: var(--sec) 0 52px; }
.about-in { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(40px, 6vw, 96px); align-items: center; }
.about-text > p:not(.tape) { margin-top: 18px; font: 400 21px/1.55 var(--f-voice); }
.about-ways { margin: 26px 0 32px; border-bottom: 1px solid var(--line); }
.about-ways li { padding: 14px 0; border-top: 1px solid var(--line); font-size: 17px; }
.about-ways b { display: block; font: 700 24px/1.05 var(--f-name); color: var(--ink); margin-bottom: 2px; }
.about-pic { position: relative; aspect-ratio: 4 / 5; max-height: 600px; border-radius: 8px; overflow: hidden; }
.about-pic img { width: 100%; height: 100%; object-fit: cover; }
.area { padding: 0 0 var(--sec); }
.area-in { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: 40px clamp(32px, 4vw, 64px); padding-top: 52px; border-top: 1px solid var(--line); }
.area-map { min-height: 560px; }
.map { height: 100%; min-height: 560px; border-radius: 8px; border: 1px solid var(--line); background: var(--blue-wash); z-index: 1; }
.area-lead { font: 400 20px/1.45 var(--f-voice); margin-top: 14px; }
.places { display: flex; flex-wrap: wrap; margin: 18px 0 26px; font: 600 15px/1.9 var(--f-body); color: var(--ink); }
.places li + li::before { content: "·"; margin: 0 8px; color: var(--ink-mute); }
.area-pic { position: relative; aspect-ratio: 16 / 11; border-radius: 8px; overflow: hidden; margin-bottom: 26px; }
.area-pic img { width: 100%; height: 100%; object-fit: cover; }

.map .leaflet-tile-pane { filter: grayscale(1) sepia(.22) hue-rotate(168deg) saturate(.75) brightness(1.04) contrast(.9); }
.map .leaflet-control-attribution { font: 400 11px/1.4 var(--f-body); background: rgb(251 249 245 / .85); }
.map .leaflet-bar a { color: var(--ink); background: var(--paper); }
.pin { position: relative; }
.pin i { position: absolute; inset: 0; border-radius: 50%; background: var(--blue); border: 2px solid var(--paper); box-shadow: 0 1px 4px rgb(21 35 44 / .4); }
.pin span { position: absolute; top: 50%; left: calc(100% + 5px); transform: translateY(-50%); white-space: nowrap; font: 600 13px/1 var(--f-body); color: var(--ink); background: rgb(251 249 245 / .9); padding: 4px 6px 3px; border-radius: 3px; }
.pin-left span { left: auto; right: calc(100% + 5px); }
.pin-home img { width: 100%; height: 100%; filter: drop-shadow(0 2px 4px rgb(21 35 44 / .35)); }
.pin-home span { font: 800 19px/1 var(--f-name); background: var(--paper); padding: 5px 8px 4px; left: calc(100% + 6px); }

/* ---------- reviews ---------- */
.reviews { padding: var(--sec) 0; background: var(--ground); }
.rev-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px 40px; flex-wrap: wrap; margin-bottom: 40px; }
.platform { display: grid; gap: 5px; padding: 16px 22px; border: 1px solid var(--line); border-radius: 10px; color: var(--ink); text-decoration: none; transition: background-color .2s; }
.platform:hover { background: var(--ground-deep); }
.platform-name { font: 700 26px/1 var(--f-name); }
.platform-score { display: flex; align-items: center; gap: 8px; font-size: 16px; }
.platform-score b { font-weight: 700; }
.platform-count { display: flex; align-items: center; gap: 6px; font-size: 14px; color: var(--ink-mute); }
.platform-count .ico { width: 13px; height: 13px; }
.stars-sm svg { width: 15px; height: 15px; }
.rev-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.rev { display: flex; flex-direction: column; height: 100%; padding: 30px 32px; background: var(--paper); border: 1px solid var(--line); border-radius: 12px; color: var(--ink-soft); text-decoration: none; box-shadow: 0 22px 40px -34px rgb(21 35 44 / .55); transition: transform .25s; }
.rev:hover { transform: translateY(-3px); }
.rev-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.rev .stars svg { width: 21px; height: 21px; }
.rev-plat { font: 600 13px/1 var(--f-body); color: var(--blue); background: var(--blue-wash); padding: 6px 9px 5px; border-radius: 4px; }
.rev-title { display: block; margin-top: 18px; font: 600 22px/1.25 var(--f-voice); color: var(--ink); }
.rev-text { display: block; flex: 1; margin-top: 10px; font-size: 17px; line-height: 1.6; }
.rev-who { display: flex; align-items: center; gap: 12px; margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); }
.avatar { width: 44px; height: 44px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--blue-wash); color: var(--blue); font: 800 21px/1 var(--f-name); }
.rev-who b { display: block; color: var(--ink); font-weight: 600; line-height: 1.3; }
.rev-who time { display: block; font-size: 14px; color: var(--ink-mute); }
.sec-act { display: flex; justify-content: center; margin-top: 40px; }

/* ---------- faq ---------- */
.faq { padding: var(--sec) 0; background: var(--paper); }
.faq-in { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(40px, 6vw, 96px); align-items: start; }
.faq-side { position: sticky; top: 110px; }
.faq-ask { margin: 16px 0 24px; font: 400 20px/1.4 var(--f-voice); }
.faq-list details { border-bottom: 1px solid var(--line); }
.faq-list details:first-child { border-top: 1px solid var(--line); }
.faq-list summary { position: relative; padding: 22px 52px 22px 0; list-style: none; cursor: pointer; font: 600 21px/1.3 var(--f-voice); color: var(--ink); }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after { content: "+"; position: absolute; right: 8px; top: 50%; transform: translateY(-50%); font: 400 32px/1 var(--f-body); color: var(--blue); }
.faq-list details[open] summary::after { content: "–"; }
.faq-list summary:hover { color: var(--blue); }
.faq-list details p { padding: 0 52px 24px 0; font-size: 17px; }

/* ---------- contact ---------- */
.contact { padding: var(--sec) 0; background: var(--blue-deep); color: var(--blue-wash); }
.contact .sec-h { color: var(--paper); }
.contact-in { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(40px, 6vw, 96px); align-items: start; }
.contact-lead { margin: 16px 0 28px; font: 400 21px/1.45 var(--f-voice); }
.nap { margin-top: 40px; }
.nap div { padding: 14px 0; border-top: 1px solid rgb(159 173 179 / .28); }
.nap dt { font: 500 12.5px/1 var(--f-body); letter-spacing: .16em; text-transform: uppercase; color: var(--blue-rim); }
.nap dd { margin-top: 7px; font-size: 18px; color: var(--paper); }
.nap a { text-decoration: none; }
.nap a:hover { text-decoration: underline; text-underline-offset: 3px; }
.form { display: grid; gap: 16px; padding: 36px; background: var(--paper); border-radius: 12px; color: var(--ink-soft); box-shadow: 0 30px 60px -36px rgb(21 35 44 / .8); }
.form-h { font: 700 32px/1 var(--f-name); color: var(--ink); }
.field > span { display: block; margin-bottom: 6px; font: 600 15px/1.2 var(--f-body); color: var(--ink); }
.field em { font-style: normal; font-weight: 400; color: var(--ink-mute); }
.field input, .field textarea { width: 100%; padding: 13px 14px; font: 400 17px/1.4 var(--f-body); color: var(--ink); background: var(--ground); border: 1.5px solid var(--line); border-radius: 8px; }
.field textarea { resize: vertical; min-height: 120px; }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgb(156 190 218 / .6); }
.field textarea::placeholder { color: var(--ink-mute); }
.hp { display: none !important; }
.form-note { font-size: 14px; color: var(--ink-mute); text-align: center; }

/* ---------- footer ---------- */
.footer { padding: 72px 0 0; background: var(--ground-deep); color: var(--ink-soft); }
.footer-in { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 48px; }
.lockup-foot { gap: 16px; }
.lockup-foot .lockup-mark { height: 90px; }
.lockup-foot .lk-name { font-size: 44px; }
.lockup-foot .lk-sub { font-size: 18px; margin-top: 8px; }
.lockup-foot .lk-slogan { font-size: 14px; margin-top: 8px; }
.footer-nap { margin-top: 26px; font-size: 16px; line-height: 1.75; }
.footer-nap a { color: var(--ink); text-decoration: none; }
.footer-nap a:hover { text-decoration: underline; }
.footer-h { margin-bottom: 14px; font: 500 12.5px/1 var(--f-body); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-mute); }
.footer-col a { display: inline-block; padding: 5px 0; font-size: 16px; color: var(--ink); text-decoration: none; }
.footer-col a:hover { color: var(--blue); }
.footer-foot { display: flex; justify-content: space-between; gap: 8px 24px; flex-wrap: wrap; margin-top: 56px; padding-top: 24px; padding-bottom: 28px; border-top: 1px solid var(--line); font-size: 14px; color: var(--ink-mute); }

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

/* ---------- viewer ---------- */
.viewer { position: fixed; inset: 0; z-index: 100; display: grid; grid-template-rows: auto minmax(0, 1fr) auto auto auto; height: 100vh; height: 100dvh; background: var(--ink); color: var(--paper); }
.viewer[hidden] { display: none; }
.v-top { display: flex; align-items: center; gap: 16px; padding: 12px 20px; }
.v-title { flex: 1; font: 700 24px/1 var(--f-name); }
.v-count { font: 500 15px/1 var(--f-body); color: var(--blue-rim); }
.v-close { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 50%; background: rgb(251 249 245 / .1); }
.v-close:hover { background: rgb(251 249 245 / .2); }
.v-close .ico { width: 22px; height: 22px; }
.v-stage { position: relative; display: flex; align-items: center; justify-content: center; min-height: 0; padding: 0 84px; }
.v-fig { height: 100%; width: 100%; display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 0; }
.v-one { position: relative; height: 100%; display: flex; align-items: center; justify-content: center; min-width: 0; }
.v-fig.is-pair .v-one { max-width: calc(50% - 4px); }
.v-one img { max-width: 100%; max-height: 100%; width: auto; height: auto; border-radius: 4px; }
.v-one .tape-vn { top: auto; bottom: 14px; }
.v-nav { position: absolute; z-index: 3; top: 50%; transform: translateY(-50%); width: 54px; height: 54px; display: grid; place-items: center; border-radius: 50%; background: rgb(251 249 245 / .12); color: var(--paper); }
.v-nav:hover { background: rgb(251 249 245 / .24); }
.v-nav .ico { width: 24px; height: 24px; }
.v-prev { left: 16px; }
.v-next { right: 16px; }
.v-label { display: flex; justify-content: center; padding: 12px 16px 2px; }
.v-label .tape-place { font-size: 30px; }
.v-strip { display: flex; gap: 6px; overflow-x: auto; padding: 10px 20px; justify-content: safe center; scrollbar-width: thin; }
.v-strip button { position: relative; flex: none; display: flex; gap: 2px; width: 74px; height: 54px; border-radius: 4px; overflow: hidden; opacity: .5; outline: 2px solid transparent; outline-offset: 1px; transition: opacity .2s; }
.v-strip button.is-pair { width: 96px; }
.v-strip button:hover { opacity: .85; }
.v-strip button.is-active { opacity: 1; outline-color: var(--tape); }
.v-strip img { width: 100%; height: 100%; min-width: 0; flex: 1; object-fit: cover; }
.v-cta { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 12px 16px calc(14px + env(safe-area-inset-bottom)); background: var(--blue-deep); border-top: 1px solid rgb(159 173 179 / .2); }
.v-cta-q { margin-right: 6px; font: 400 28px/1 var(--f-hand); color: var(--paper); }

/* =========================================================
   tablet
   ========================================================= */
@media (max-width: 1180px) {
  .nav-list > li > a, .drop-toggle { padding: 10px 10px; font-size: 15px; }
  .header-acts .hide-sm { display: none; }
  .lk-name { font-size: 56px; }
  .fold-h1 { font-size: 61px; }
  .lk-sub { font-size: 23px; }
  .lk-slogan { font-size: 17.5px; }
  .lockup-mark { height: 114px; }
  .answer-name { font-size: 34px; }
  .answer { gap: 20px; }
  .svc-card { flex-wrap: wrap; padding: 24px 24px 8px; gap: 8px; }
  .svc-card ul { flex-wrap: wrap; flex-basis: 100%; }
  .svc-card a { padding: 18px 16px; font-size: 23px; }
  .mc-frame { grid-template-columns: minmax(0, 1fr); grid-template-areas: "h" "sub" "list" "foot"; }
  .main-card { grid-template-columns: minmax(0, 1fr) min(620px, 62%); }
  .mc-h { font-size: 60px; }
  .lak-cell { padding: 20px 28px; gap: 18px; }
}

@media (max-width: 960px) {
  .nav { display: none; }
  .menu-btn { display: inline-flex; }
  .fold-in, .intro-in, .owner-in, .about-in, .contact-in, .faq-in { grid-template-columns: 1fr; }
  .fold-h1 { max-width: none; }
  .svc-grid, .svc-binnen .svc-grid, .svc-glas .svc-grid, .svc-spuit .svc-grid { grid-template-columns: 1fr; }
  .svc-binnen .svc-pic, .svc-glas .svc-pic, .svc-spuit .svc-pic { order: 2; }
  .main-card { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto auto; }
  .mc-photo { grid-row: 1; height: clamp(300px, 56vw, 520px); }
  .mc-frame { grid-column: 1; grid-row: 2; margin: -90px 24px 0; }
  .main-card > .series { grid-row: 3; padding: 0 24px; }
  .area-in { grid-template-columns: 1fr; }
  .faq-side { position: static; }
  .footer-in { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
  .ladder-wide { grid-template-columns: 1fr; }
  .band-lint .band-in { flex-wrap: wrap; }
}

/* the menu button and the open menu, phone and small tablet */
.menu-btn { align-items: center; gap: 8px; height: 42px; padding: 0 12px; border-radius: 8px; border: 1.5px solid var(--line); font: 600 15px/1 var(--f-body); color: var(--ink); }
.menu-lines { position: relative; width: 18px; height: 2px; background: var(--ink); }
.menu-lines::before, .menu-lines::after { content: ""; position: absolute; left: 0; width: 18px; height: 2px; background: var(--ink); }
.menu-lines::before { top: -6px; }
.menu-lines::after { top: 6px; }
@media (max-width: 960px) {
  body.menu-open .nav { display: block; position: fixed; top: var(--header-h); left: 0; right: 0; max-height: calc(100dvh - var(--header-h)); overflow: auto; padding: 8px var(--gut) 24px; background: var(--paper); border-bottom: 1px solid var(--line); box-shadow: 0 20px 30px -20px rgb(21 35 44 / .4); }
  body.menu-open .nav-list { flex-direction: column; align-items: stretch; }
  body.menu-open .nav-list > li > a, body.menu-open .drop-toggle { width: 100%; justify-content: space-between; padding: 15px 4px; font-size: 19px; border-radius: 0; border-bottom: 1px solid var(--line); }
  body.menu-open .drop { position: static; display: none; min-width: 0; opacity: 1; visibility: visible; transform: none; padding: 4px 0 10px 12px; border: 0; box-shadow: none; background: transparent; }
  body.menu-open .has-drop.open .drop { display: block; }
  body.menu-open .has-drop::after { display: none; }
}

/* =========================================================
   phone
   ========================================================= */
@media (max-width: 760px) {
  :root { --header-h: 62px; }
  html { scroll-padding-top: 72px; }
  body { font-size: 16px; }
  .m-hide { display: none !important; }

  /* header lies over the page, hidden until the trust strip */
  .site-header { position: fixed; left: 0; right: 0; top: 0; background: var(--paper); border-bottom-color: var(--line); transform: translateY(-110%); }
  body.bars-on .site-header, body.menu-open .site-header { transform: none; box-shadow: 0 8px 22px -16px rgb(21 35 44 / .5); }
  .header-in { gap: 10px; }
  .brand-mark { height: 36px; }
  .brand-name { font-size: 19px; }
  .brand-sub { font-size: 9.5px; }
  .header-acts .btn-call span { display: none; }
  .header-acts .btn-sm { min-height: 42px; width: 42px; padding: 0; }
  .menu-word { display: none; }
  .menu-btn { width: 42px; justify-content: center; padding: 0; }

  .sticky-bar { 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: rgb(251 249 245 / .97); border-top: 1px solid var(--line); box-shadow: 0 -10px 24px -16px rgb(21 35 44 / .45); transform: translateY(110%); transition: transform .35s ease; }
  body.bars-on .sticky-bar { transform: none; }
  .sticky-bar .btn { min-height: 50px; }

  /* fold */
  .fold { padding: 22px 0 30px; }
  .fold-in { gap: 26px; }
  .lockup { gap: 12px; }
  .lockup-mark { height: 86px; }
  .lk-name { font-size: 40px; }
  .lk-sub { font-size: 16.5px; margin-top: 7px; }
  .lk-slogan { font-size: 13.5px; margin-top: 7px; }
  .fold-h1 { font-size: 44px; margin-top: 24px; }
  .fold-sub { font-size: 16.5px; margin-top: 12px; }
  .fold-left > .pair { margin-top: 20px; width: 100%; }
  .pair .btn { flex: 1 1 0; padding: 0 12px; }
  .invite { margin-top: 22px; gap: 14px; }
  .invite-face { width: 64px; height: 64px; }
  .invite-name { font-size: 34px; }
  .invite-link { font-size: 15px; }
  .fold-rating { padding-top: 18px; font-size: 14px; flex-wrap: wrap; gap: 6px 10px; }
  .answer { grid-template-columns: 52px minmax(0, 1fr) 22px; gap: 16px; padding: 10px 4px 10px 0; }
  .patch { width: 52px; height: 69px; }
  .answer-name { font-size: 27px; }
  .answer-line { font-size: 14px; margin-top: 3px; }
  .answer-arrow { width: 22px; height: 22px; }
  .fold-inst { font-size: 14px; margin-top: 14px; }

  /* trust strip: each fact in its fewest words */
  .lak { min-height: 0; border-radius: 10px; }
  .lak-cell { flex-direction: column; align-items: flex-start; justify-content: center; gap: 6px; padding: 16px 16px; }
  .lak-mark, .lak-expl, .lak-link { display: none; }
  .lak-fact { gap: 8px; }
  .lak-big { font-size: 42px; }
  .lak-small { font-size: 12px; letter-spacing: .16em; }
  .stars-lak svg { width: 15px; height: 15px; }
  .lak-plat { font-size: 13.5px; margin-top: 2px; }
  .lak-count { display: block; }

  /* intro */
  .intro { padding-top: 52px; padding-bottom: 36px; }
  h2.tape-kicker.tape { font-size: 32px; margin-bottom: 20px; }
  .intro-in { gap: 22px; }
  .intro-portrait { aspect-ratio: 4 / 5; }
  .intro-say { padding: 110px 22px 22px; }
  .say-1 { font-size: 19px; }
  .say-2 { font-size: 80px; }
  .say-3 { font-size: 13px; }
  .ifact { grid-template-columns: 84px minmax(0, 1fr); gap: 16px; padding: 16px 0; }
  .ifact-pic { width: 84px; height: 70px; }
  .ifact h3 { font-size: 23px; }
  .ifact p { font-size: 15px; margin-top: 4px; }
  .svc-card { flex-direction: column; align-items: stretch; margin: 36px 0 0; padding: 18px 16px 8px; gap: 8px; }
  .svc-card .tape { align-self: flex-start; font-size: 22px; margin-bottom: 4px; }
  .svc-card ul { flex-direction: column; }
  .svc-card li + li { border-left: 0; border-top: 1px solid var(--line); }
  .svc-card a { min-height: 44px; padding: 0 4px; font-size: 22px; }

  /* services: heading, picture + thumbnails, two actions */
  .svc { padding: 56px 0; }
  .svc-grid { display: flex; flex-direction: column; align-items: stretch; gap: 0; }
  .svc-grid .ladder { display: contents; }
  .svc-grid .l-1 { order: 1; margin-bottom: 18px; }
  .svc-grid .svc-pic { order: 2; }
  .svc-grid .ladder .acts { order: 3; margin-top: 18px; }
  .l-1 { font-size: 44px; }
  .ladder-wide { margin-bottom: 18px; }
  .acts .btn { flex: 1 1 auto; padding: 0 16px; font-size: 16px; }
  .mc-photo { height: 300px; }
  .mc-photo .plabel { left: 14px; bottom: 54px; }
  .mc-photo .stamp { top: 14px; right: 14px; }
  .mc-frame { margin: -40px 10px 0; padding: 24px 20px 0; }
  .mc-h { font-size: 40px; }
  .voor-u { flex-direction: column; align-items: flex-start; gap: 10px; }
  .faces span { width: 36px; height: 36px; font-size: 16px; margin-left: -9px; }
  .mc-foot { margin-top: 16px; padding: 16px 0 20px; }
  .mc-foot .acts { width: 100%; }
  .main-card > .series { padding: 0 10px; }
  .tape-place { font-size: 22px; }
  .plabel { left: 12px; bottom: 14px; gap: 8px; }
  .plabel-link { font-size: 13px; padding: 8px 10px; }
  .stamp { top: 12px; right: 12px; }
  .stamp img { height: 26px; }
  .stamp b { font-size: 13.5px; }
  .stamp i { font-size: 7px; }
  .tape-vn { font-size: 20px; top: 10px; left: 8px; }
  .pairpic .stamp { top: auto; bottom: 14px; }
  .pairpic .plabel .tape-place { font-size: 19px; }
  .pairpic-wide .half { aspect-ratio: 4 / 5; }
  .single-pic .pic-open { aspect-ratio: 4 / 4.4; }
  .series { margin-top: 10px; }
  .thumbs { gap: 6px; }
  .thumbs li { flex: 1 1 0; width: auto; min-width: 0; }
  .th { height: 56px; }
  .series-count { display: none; }
  .series-row { display: block; }
  .series-row .acts { margin-top: 18px; }

  .band { padding: 24px 0; }
  .band-h { font-size: 28px; }
  .band-in { gap: 14px; }
  .pair-band { width: 100%; }
  .band-lint .band-in { display: block; }
  .band-lint .band-h { font-size: 26px; }
  .lint-places { margin: 8px 0 12px; }
  .band-link { display: inline-block; font-size: 16px; }
  .lint-places { font-size: 14px; }

  .projects, .owner, .reviews, .faq, .contact { padding: 60px 0; }
  .about { padding: 60px 0 36px; }
  .area { padding-bottom: 60px; }
  .sec-h { font-size: 38px; }
  .proj { width: 78vw; }
  .proj-pic .tape-place { font-size: 21px; }
  .proj-track { animation-duration: 50s; }
  .klus { padding: 26px 22px; }
  .klus-line { font-size: 16.5px; }

  .owner-in { gap: 24px; }
  .owner-sign { font-size: 54px; }
  .owner-p { font-size: 18px; }

  .about-in { gap: 24px; }
  .about-text > p:not(.tape) { font-size: 18px; }
  .about-text .btn { margin-top: 22px; width: 100%; }
  .about-pic { aspect-ratio: 4 / 3; }

  .area-in { display: flex; flex-direction: column; gap: 0; padding-top: 36px; }
  .area-side { display: contents; }
  .area-side .tape-kicker { order: 1; align-self: flex-start; }
  .area-side .sec-h { order: 2; }
  .area-lead { order: 3; font-size: 17px; }
  .places { order: 4; font-size: 14px; }
  .area-map { order: 5; min-height: 0; }
  .map { min-height: 340px; height: 340px; }
  .pin:not(.pin-home) span { display: none; }
  .area-pic { order: 6; margin: 16px 0 18px; }
  .area-side > .btn { order: 7; white-space: normal; text-align: center; padding: 12px 16px; }

  .rev-head { margin-bottom: 26px; }
  .rev-grid { grid-template-columns: 1fr; gap: 16px; }
  .rev { padding: 22px 20px; }
  .rev-title { font-size: 19px; margin-top: 14px; }
  .rev-text { font-size: 16px; }

  .faq-in { display: flex; flex-direction: column; gap: 0; }
  .faq-side { display: contents; }
  .faq-side .tape-kicker { order: 1; align-self: flex-start; }
  .faq-side .sec-h { order: 2; margin-bottom: 20px; }
  .faq-list { order: 3; }
  .faq-ask { order: 4; margin: 24px 0 14px; font-size: 18px; }
  .faq-side .pair { order: 5; }
  .faq-list summary { font-size: 18px; padding: 18px 44px 18px 0; }
  .faq-list details p { padding-right: 0; font-size: 16px; }

  .contact-lead { font-size: 18px; }
  .contact .pair { width: 100%; }
  .form { padding: 24px 18px; }
  .nap dd { font-size: 16px; word-break: break-word; }

  .footer { padding: 52px 0 84px; }
  .footer-in { grid-template-columns: 1fr 1fr; gap: 32px 20px; }
  .lockup-foot .lockup-mark { height: 70px; }
  .lockup-foot .lk-name { font-size: 34px; }
  .lockup-foot .lk-sub { font-size: 14px; }
  .lockup-foot .lk-slogan { font-size: 12px; }
  .footer-foot { margin-top: 36px; }

  .v-top { padding: 10px 12px; }
  .v-title { font-size: 20px; }
  .v-stage { padding: 0 6px; }
  .v-nav { width: 42px; height: 42px; background: rgb(21 35 44 / .45); }
  .v-prev { left: 8px; }
  .v-next { right: 8px; }
  .v-label .tape-place { font-size: 24px; }
  .v-strip { padding: 8px 12px; justify-content: flex-start; }
  .v-strip button { width: 58px; height: 44px; }
  .v-strip button.is-pair { width: 76px; }
  .v-cta-q { font-size: 23px; }
}

@media (max-width: 380px) {
  .l-1 { font-size: 40px; }   /* Binnenschilderwerk and Buitenschilderwerk stuck out at 320 px */
  .mc-h { font-size: 36px; }
  .lk-name { font-size: 35px; }
  .fold-h1 { font-size: 38px; }
  .lk-sub { font-size: 14.5px; }
  .lockup-mark { height: 76px; }
  .brand-sub { display: none; }
  .lak-big { font-size: 36px; }
}


/* ============ LIJST — picked 1 of ronde/lijst.py (papier: de hele lijst op één papieren kaart met een zachte schaduw). Written in by ronde-varianten.py --vast; %V% -> :root:root. ============ */
:root:root .answers { border: 0; border-radius: 12px; background: var(--paper); overflow: hidden; box-shadow: 0 26px 50px -32px rgb(21 35 44 / .45); }
:root:root .answers li:last-child { border-bottom: 0; }
:root:root .answer { padding-left: 16px; padding-right: 24px; }
@media (max-width: 760px) {
  :root:root .answer { padding-left: 10px; padding-right: 14px; }
}


/* ============ JAARTAL — picked 1 of ronde/jaartal.py (naast elkaar: de regel naast het jaartal, SINDS 2010 op één lijn met 5 / 5). Written in by ronde-varianten.py --vast; %V% -> :root:root. ============ */
@media (min-width: 1181px) {
  :root:root .lak-year > div { display: flex; align-items: center; column-gap: inherit; }
  :root:root .lak-year .lak-fact { flex: none; }
  :root:root .lak-year .lak-expl { margin-top: 0; max-width: 17em; }
}
@media (min-width: 761px) and (max-width: 1180px) {
  :root:root .lak-year .lak-expl { display: none; }
}


/* ============ KNOP — the arrow buttons of Lijst 3 on the paper card of Lijst 1, by hand (Sem, 2026-11-02: "Deze mag je
   doorvoeren: [lijst=1 jaartal=1] met een kanttekening, ik wil deze button styles terugzien van lijst optie 3"). Only the
   round blue button, not Lijst 3's blue-grey lines or darker line text. Same weight as on the switch page. ============ */
:root:root .answer { grid-template-columns: 80px minmax(0, 1fr) 50px; }
:root:root .answer-arrow { box-sizing: content-box; width: 22px; height: 22px; padding: 14px; border-radius: 50%; color: var(--paper); background-color: var(--blue); background-image: var(--gloss); box-shadow: inset 0 1px 0 rgb(255 255 255 / .16); transition: transform .25s, background-color .2s; }
:root:root .answer:hover .answer-arrow { background-color: var(--blue-deep); }
@media (max-width: 760px) {
  :root:root .answer { grid-template-columns: 52px minmax(0, 1fr) 38px; }
  :root:root .answer-arrow { width: 18px; height: 18px; padding: 10px; }
}


/* ============ STRIP — by hand (Sem, 2026-11-02: "Ik wil dat je links: "sinds" aan de bovenkant uitlijnt met "2010", en in de
   rechterkolom wil ik zien dat "Lees ze op ..." naar de rechter bovenkant wordt verplaats."). SINDS hangs from the top of
   the figures of 2010, at every width; the link sits in the top right corner of the score half, from 761 px (the phone
   has no link). ============ */
.lak-year .lak-fact { align-items: center; }   /* SINDS in the vertical middle of 2010 (Sem, 2026-11-02, later: ""sinds" mag toch verticaal in het midden worden uitgelijnt") */
@media (min-width: 761px) {
  .lak-score { position: relative; }
  .lak-score .lak-link { position: absolute; top: 20px; right: 44px; margin-top: 0; }
}
@media (min-width: 761px) and (max-width: 1180px) {
  .lak-score .lak-link { right: 28px; }
  .lak-cell { padding-top: 46px; }   /* both halves, so 2010 and 5 / 5 stay on one line: the stars clear the link */
}

/* the tab bar ("Onze diensten" and its five links) was wider than the page at 1181–1279 px: the links a little tighter there;
   up to 1359 px since 2026-11-03, where the links still stuck out of the card on the right */
@media (min-width: 1181px) and (max-width: 1359px) {
  .svc-card { gap: 20px; }
  .svc-card a { padding-inline: 12px; font-size: 23px; }
}
/* at 961–1099 px "Glaszetten" fell alone onto a second line under the other four (2026-11-03): the five a little smaller there */
@media (min-width: 961px) and (max-width: 1099px) {
  .svc-card a { padding-inline: 12px; gap: 10px; font-size: 21px; }
  .svc-card a .ico { width: 18px; height: 18px; }
}


/* ============ KNOPPEN — picked 2 of ronde/knoppen.py (groot: 66 px hoog, vette tekst, een schaduw in de kleur van de knop). Written in by ronde-varianten.py --vast; %V% -> :root:root. ============ */
:root:root .fold-left > .pair { gap: 14px; }
:root:root .fold-left > .pair .btn { min-height: 66px; padding: 0 32px; border-radius: 12px; font-size: 19px; font-weight: 700; gap: 12px; }
:root:root .fold-left > .pair .ico { width: 24px; height: 24px; }
:root:root .fold-left > .pair .btn-call { box-shadow: inset 0 1px 0 rgb(255 255 255 / .18), 0 16px 28px -14px rgb(39 75 94 / .75); }
:root:root .fold-left > .pair .btn-wa { box-shadow: inset 0 1px 0 rgb(255 255 255 / .24), 0 16px 28px -14px rgb(29 168 81 / .7); }
@media (min-width: 961px) and (max-width: 1180px) {
  :root:root .fold-left > .pair { gap: 10px; }
  :root:root .fold-left > .pair .btn { padding: 0 16px; font-size: 18px; gap: 10px; }
}
@media (max-width: 760px) {
  :root:root .fold-left > .pair { gap: 10px; }
  :root:root .fold-left > .pair .btn { min-height: 62px; padding: 0 10px; font-size: 17px; gap: 9px; }
  :root:root .fold-left > .pair .ico { width: 21px; height: 21px; }
}


/* ============ ACHTERGROND — picked 1 of ronde/achtergrond.py (zand: het zand van de lijst en van Buitenschilderwerk, warm en iets donkerder). Written in by ronde-varianten.py --vast; %V% -> :root:root. ============ */
:root:root { --band: var(--ground-deep); }
:root:root .fold { background-image: linear-gradient(to bottom, transparent calc(100% - clamp(36px, 5vh, 52px) - var(--band-op, 52px)), var(--band) 0); }
:root:root .trust, :root:root .intro { background-color: var(--band); }
@media (max-width: 760px) {
  :root:root .fold { background-image: linear-gradient(to bottom, transparent calc(100% - 30px - var(--band-op, 36px)), var(--band) 0); }
}


/* ============ VOOR/NA — picked 2 of ronde/voorna.py (schakelaar: één foto, een witte schuifknop VOOR | NA linksboven, de foto schuift opzij). Written in by ronde-varianten.py --vast; %V% -> :root:root. ============ */
:root:root .vn-knoppen[hidden] { display: flex; }
:root:root .pairpic .pic-open { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); aspect-ratio: 8 / 5; overflow: hidden; border-radius: 6px; }
:root:root .pairpic-wide .pic-open { aspect-ratio: 3 / 1; }
:root:root .pairpic .half { grid-area: 1 / 1; aspect-ratio: auto; height: 100%; }
:root:root .pairpic .half .tape-vn { display: none; }
:root:root .vn-knop { cursor: pointer; }
@media (max-width: 760px) {
  :root:root .pairpic-wide .pic-open { aspect-ratio: 8 / 5; }
}

:root:root .vn-knoppen { position: absolute; z-index: 3; top: 16px; left: 16px; padding: 4px; background: rgb(251 249 245 / .95); border-radius: 999px; box-shadow: 0 8px 20px -10px rgb(21 35 44 / .65); }
:root:root .vn-knoppen::before { content: ""; position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc(50% - 4px); border-radius: 999px; background-color: var(--blue); background-image: var(--gloss); transition: transform .35s cubic-bezier(.5, 0, .2, 1); }
:root:root .pairpic[data-vn="na"] .vn-knoppen::before { transform: translateX(100%); }
:root:root .vn-knop { position: relative; z-index: 1; width: 78px; padding: 10px 0; border-radius: 999px; font: 700 14px/1 var(--f-body); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); transition: color .3s; }
:root:root .vn-knop[aria-pressed="true"] { color: var(--paper); }
:root:root .pairpic .half { transition: transform .55s cubic-bezier(.6, 0, .2, 1); }
:root:root .pairpic[data-vn="na"] .half:first-child { transform: translateX(-100%); }
:root:root .pairpic[data-vn="voor"] .half:last-child { transform: translateX(100%); }
@media (max-width: 760px) {
  :root:root .vn-knoppen { top: 10px; left: 10px; padding: 3px; }
  :root:root .vn-knoppen::before { top: 3px; bottom: 3px; left: 3px; width: calc(50% - 3px); }
  :root:root .vn-knop { width: 64px; padding: 9px 0; font-size: 12.5px; }
}


/* ============ SECTIES — picked 2 of ronde/secties.py (papier, dan blauwgrijs: Even voorstellen op papierwit, Buitenschilderwerk lichtblauwgrijs). Written in by ronde-varianten.py --vast; %V% -> :root:root. ============ */
:root:root .intro { background-color: var(--paper); background-image: linear-gradient(to bottom, var(--band) calc(clamp(64px, 8vw, 112px) * .6), transparent 0); }
:root:root .svc-main { background-color: var(--blue-wash); }
@media (max-width: 760px) {
  :root:root .intro { background-image: linear-gradient(to bottom, var(--band) 31px, transparent 0); }
}


/* ============ SECTIENAMEN — picked 3 of ronde/sectienaam.py (handschrift: de naam in het handschrift, blauw, zonder tape, iets groter). Written in by ronde-varianten.py --vast; %V% -> :root:root. ============ */
:root:root .tape-kicker { background: none; clip-path: none; padding: 0; }

:root:root .tape-kicker { --tilt: -2deg; font: 400 34px/1 var(--f-hand); color: var(--blue); margin-bottom: 12px; }
:root:root h2.tape-kicker { font-size: 50px; margin-bottom: 24px; }
:root:root .contact .tape-kicker { color: var(--tape); }
@media (max-width: 760px) {
  :root:root .tape-kicker { font-size: 30px; margin-bottom: 10px; }
  :root:root h2.tape-kicker { font-size: 40px; margin-bottom: 18px; }
}


/* ============ PLAATSENBALK — picked 3 of ronde/lint.py (lopende band: de plaatsen groot, langzaam van rechts naar links, het kwastmerk ertussen). Written in by ronde-varianten.py --vast; %V% -> :root:root. ============ */

:root:root .band-lint .band-in { gap: 0 40px; }
:root:root .lint-places { flex: 1; min-width: 0; overflow: hidden; margin: 0; -webkit-mask: linear-gradient(90deg, transparent, #000 48px, #000 calc(100% - 48px), transparent); mask: linear-gradient(90deg, transparent, #000 48px, #000 calc(100% - 48px), transparent); font: 600 28px/1.2 var(--f-name); letter-spacing: .01em; color: var(--ink-soft); white-space: nowrap; }
:root:root .lint-track { display: inline-flex; align-items: center; width: max-content; animation: lint-run 70s linear infinite; }
:root:root .lint-track .lint-copy[hidden] { display: contents; }
:root:root .lint-track .lsep { display: inline-flex; justify-content: center; width: 46px; font-size: 0; }
:root:root .lint-track .lsep::before { content: ""; width: 15px; height: 20px; background: var(--blue); -webkit-mask: url(merk.svg) center / 100% 100% no-repeat; mask: url(merk.svg) center / 100% 100% no-repeat; }
@keyframes lint-run { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  :root:root .lint-track { animation: none; }
}
@media (max-width: 960px) {
  :root:root .band-lint .lint-places { flex: 1 1 100%; order: 3; margin-top: 14px; }
}
@media (max-width: 760px) {
  :root:root .band-lint .lint-places { margin: 12px 0 14px; font-size: 24px; }
  :root:root .lint-track .lsep { width: 36px; }
}


/* ============ ONZE DIENSTEN — picked 3 of ronde/dienstenlabel.py (op blauw: het label op een donkerblauw vlak aan het begin van de balk). Written in by ronde-varianten.py --vast; %V% -> :root:root. ============ */
:root:root .svc-card { padding-left: 0; overflow: hidden; }
:root:root .svc-card .tape { align-self: stretch; display: flex; align-items: center; padding: 0 30px 2px; font-size: 36px; color: var(--paper); background: var(--blue-deep); }
@media (min-width: 1360px) {
  :root:root .svc-card a { padding-inline: 14px; }
}
@media (min-width: 1181px) and (max-width: 1359px) {
  :root:root .svc-card { gap: 10px; }
  :root:root .svc-card .tape { padding-inline: 22px; font-size: 32px; }
  :root:root .svc-card a { padding-inline: 10px; font-size: 22px; }
}
@media (max-width: 1180px) {
  :root:root .svc-card { padding: 0 24px 8px; }
  :root:root .svc-card .tape { flex: 1 1 100%; margin: 0 -24px 6px; padding: 14px 24px 15px; }
}
@media (max-width: 760px) {
  :root:root .svc-card { padding: 0 16px 8px; }
  :root:root .svc-card .tape { align-self: stretch; margin: 0 -16px 6px; padding: 12px 16px 13px; font-size: 30px; }
}


/* ============ BEHANGEN-RUIMTE — picked 1 of ronde/behangruimte.py (tekst ernaast: de zin en de lijst direct naast de kop, de lijst breder). Written in by ronde-varianten.py --vast; %V% -> :root:root. ============ */
@media (min-width: 961px) {
  :root:root .svc-behang .ladder-wide { grid-template-columns: auto minmax(0, 1fr); column-gap: clamp(48px, 6vw, 96px); }
  :root:root .svc-behang .ladder-right .l-2 { max-width: 26em; }
  :root:root .svc-behang .ladder-right .l-3 { column-gap: 40px; }
}


/* ============ KLANTENOORDELEN-KAART — picked 2 of ronde/oordeelkaart.py (donkerblauw: het donkerblauw van Spuitwerk, lichte tekst). Written in by ronde-varianten.py --vast; %V% -> :root:root. ============ */
:root:root .platform { background: var(--blue-deep); border-color: var(--blue-deep); color: var(--paper); box-shadow: 0 22px 40px -30px rgb(21 35 44 / .7); }
:root:root .platform:hover { background: var(--blue); border-color: var(--blue); }
:root:root .platform .platform-count { color: var(--blue-rim); }


/* ============ VEEG EN JOOST — by hand (Sem, 2026-11-03: "Deze kwastveeg hier moet wit: [Image #36]" and "Het ontmoet de
   eigenaar element moet naar boven toe, dus zonder de negatieve margin: [Image #37]"). The brush mark in the trust strip is
   merk-wit.svg, the same drawing in paper white (from 761 px; the phone has no mark there). Joost and "Maak kennis met de
   eigenaar" no longer sit half on the sand band at the foot of the fold but wholly above it, from 961 px (below that he
   already stands above the list, clear of the band). ============ */
@media (min-width: 961px) {
  .fold-left .invite { margin-bottom: calc(var(--band-op, 52px) + 26px); }
}


/* ============ RATING IN DE BALK — picked 2 of ronde/ratinggroter.py (groter: sterren 28 px, de regel 20 px). Written in by ronde-varianten.py --vast; %V% -> :root:root. ============ */
:root:root .stars-lak { gap: 3px; }
:root:root .stars-lak svg { width: 28px; height: 28px; }
:root:root .lak-plat { font-size: 20px; margin-top: 6px; }
@media (max-width: 760px) {
  :root:root .stars-lak { gap: 2px; }
  :root:root .stars-lak svg { width: 19px; height: 19px; }
  :root:root .lak-plat { font-size: 15.5px; margin-top: 3px; }
}


/* ============ ONZE DIENSTEN: FONT — picked 1 of ronde/dienstfont.py (smalle kop: Saira Condensed, het font van de naam en de vijf diensten). Written in by ronde-varianten.py --vast; %V% -> :root:root. ============ */
:root:root .svc-card .tape { --lbl-f: .84; font-family: var(--f-name); font-weight: 800; line-height: 1; letter-spacing: .005em; }

:root:root .svc-card .tape { font-size: max(13px, calc(36px * var(--lbl-f, 1) * var(--lbl-k, 1))); }
@media (min-width: 1181px) and (max-width: 1359px) {
  :root:root .svc-card .tape { font-size: max(13px, calc(32px * var(--lbl-f, 1) * var(--lbl-k, 1))); }
}
@media (max-width: 760px) {
  :root:root .svc-card .tape { font-size: max(13px, calc(30px * var(--lbl-f, 1) * var(--lbl-k, 1))); }
}


/* ============ ONZE DIENSTEN: GROOTTE — picked 1 of ronde/dienstmaat.py (iets kleiner: 85 %, 31 px). Written in by ronde-varianten.py --vast; %V% -> :root:root. ============ */
:root:root .svc-card .tape { --lbl-k: .85; }

:root:root .svc-card .tape { font-size: max(13px, calc(36px * var(--lbl-f, 1) * var(--lbl-k, 1))); }
@media (min-width: 1181px) and (max-width: 1359px) {
  :root:root .svc-card .tape { font-size: max(13px, calc(32px * var(--lbl-f, 1) * var(--lbl-k, 1))); }
}
@media (max-width: 760px) {
  :root:root .svc-card .tape { font-size: max(13px, calc(30px * var(--lbl-f, 1) * var(--lbl-k, 1))); }
}


/* ============ APP-BALK EFFEN — by hand (Sem, 2026-11-03: "verwijder het patroon achter de sectie, het moet gewoon
   lichtblauw zijn"). "Stuur een foto van de klus" on plain light blue: the tape's fine stripes and its sheen off, at every
   width. ============ */
.band-app { background-image: none; }


/* ============ KAART: PUNT TIEL — picked 3 of ronde/kaartpunt.py (halo: een kleine blauwe stip in een zachte lichtblauwe gloed). Written in by ronde-varianten.py --vast; %V% -> :root:root. ============ */
:root:root .pin-home img { display: none; }
:root:root .pin-home::before, :root:root .pin-home::after { content: ""; position: absolute; left: 50%; top: 50%; border-radius: 50%; transform: translate(-50%, -50%); }

:root:root .pin-home::before { width: 60px; height: 60px; background: rgb(156 190 218 / .45); border: 1.5px solid rgb(39 75 94 / .55); }
:root:root .pin-home::after { width: 16px; height: 16px; background: var(--blue-deep); border: 3px solid var(--paper); box-shadow: 0 1px 5px rgb(21 35 44 / .45); }
:root:root .pin-home span { left: calc(50% + 36px); }


/* ============ SPUITWERK: REVIEW — picked 2 of ronde/spuitstem.py (reviewkaart: de hele review van Brandweer Maurik op een papieren kaart). Written in by ronde-varianten.py --vast; %V% -> :root:root. ============ */
@media (min-width: 961px) {
  :root:root .svc-spuit .svc-grid { align-items: stretch; }
  :root:root .svc-spuit .ladder { display: flex; flex-direction: column; align-items: flex-start; }
  :root:root .svc-spuit .l-1 { margin-top: -.12em; }
  :root:root .svc-spuit .ss { margin-top: auto; }
  :root:root .svc-spuit .ladder .acts { margin-bottom: 40px; }
}

@media (min-width: 961px) {
  :root:root .svc-spuit .ss-2[hidden] { display: block; }
  :root:root .ss-2 { width: 100%; max-width: 600px; }
  :root:root .ss-2 .rev { height: auto; box-shadow: 0 26px 44px -30px rgb(0 0 0 / .6); border-color: var(--paper); }
  :root:root .ss-2 .rev-text { flex: none; }
}
@media (min-width: 961px) and (max-width: 1180px) {
  :root:root .ss-2 .rev { padding: 22px 24px; }
  :root:root .ss-2 .rev-title { margin-top: 12px; font-size: 19px; }
  :root:root .ss-2 .rev-text { font-size: 15.5px; line-height: 1.5; }
  :root:root .ss-2 .rev-who { margin-top: 14px; padding-top: 12px; }
}


/* ============ FEITENBLOK — by hand (Sem, 2026-11-03, on a crop of the phone fold and one of the strip: "Ik wil dat het
   feitenblok [Image #47] in de fold naar boven wordt gebracht onder "ontmoet de eigenaar" [Image #46]"). Phone only
   (≤760 px): the strip's copy in the fold stands under Joost, the strip below the fold is hidden, and the sand band it
   sat on goes with it (fold ground straight into the paper of Even voorstellen). From 761 px nothing changes. ============ */
.fold .lak-fold { display: none; }
@media (max-width: 760px) {
  .fold .lak-fold { display: grid; align-self: stretch; margin-top: 24px; }
  .trust { display: none; }
  :root:root .fold, :root:root .intro { background-image: none; }
}


/* ============ ONDER ELKAAR — by hand (Sem, 2026-11-03, op mobiel: "Dit element moet onder elkaar, met de kolom met de
   rating aan de bovenkant: [Image #48]" and "Deze buttons mogen beide onder elkaar: [Image #50]"). Phone only (≤760 px):
   the fact block in the fold one column, 5 / 5 on top and SINDS 2010 under a thin line; the two buttons of "Stuur een foto
   van de klus" full width, one under the other. ============ */
@media (max-width: 760px) {
  .fold .lak-fold { grid-template-columns: minmax(0, 1fr); }
  .lak-fold .lak-score { order: -1; border-left: 0; }
  .lak-fold .lak-year { border-top: 1px solid rgb(159 173 179 / .28); }
  .lak-fold .lak-count { display: inline; }   /* the full width holds "op Klantenoordelen · 18 beoordelingen" on one line */
  .pair-band { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
}


/* ============ PLAATSENBALK: ALLE PLAATSEN (TELEFOON) — picked 1 of ronde/plaatsgrid.py (lijst: twee kolommen, het kwastmerk voor elke plaats). Written in by ronde-varianten.py --vast; %V% -> :root:root. ============ */
@media (max-width: 760px) {
  :root:root .band-lint .lint-places { -webkit-mask: none; mask: none; overflow: visible; white-space: normal; margin: 14px 0 18px; }
  :root:root .band-lint .lint-track { width: auto; animation: none; transform: none; }
  :root:root .band-lint .lint-track .lint-copy[hidden] { display: none; }
  :root:root .band-lint .lint-track .lsep { display: none; }
}

@media (max-width: 760px) {
  :root:root .band-lint .lint-track { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 18px; }
  :root:root .band-lint .lp { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 9px 0; border-top: 1px solid var(--line); font-size: 20px; line-height: 1.15; color: var(--ink); }
  :root:root .band-lint .lp::before { content: ""; flex: none; width: 11px; height: 15px; background: var(--blue); -webkit-mask: url(merk.svg) center / 100% 100% no-repeat; mask: url(merk.svg) center / 100% 100% no-repeat; }
}
@media (max-width: 380px) {
  :root:root .band-lint .lint-track { column-gap: 14px; }
  :root:root .band-lint .lp { font-size: 16.5px; gap: 7px; }
  :root:root .band-lint .lp::before { width: 10px; height: 13px; }
}


/* ============ WERKGEBIED: PLAATSEN — picked 2 of ronde/plaatsen.py (labels: elke plaats een papieren label, Tiel donkerblauw). Written in by ronde-varianten.py --vast; %V% -> :root:root. ============ */
:root:root .places { gap: 8px; margin: 20px 0 28px; font: 600 16px/1.2 var(--f-body); color: var(--blue-deep); }
:root:root .places li { padding: 7px 14px 8px; border-radius: 999px; background: var(--paper); border: 1px solid var(--line); box-shadow: 0 6px 14px -12px rgb(21 35 44 / .5); }
:root:root .places li:first-child { background: var(--blue-deep); border-color: var(--blue-deep); color: var(--paper); }
:root:root .places li + li::before { content: none; }
@media (max-width: 760px) {
  :root:root .places { gap: 7px; margin: 16px 0 22px; font-size: 15px; }
  :root:root .places li { padding: 6px 12px 7px; }
}


/* ============ FOLD-SUB — by hand (Sem, 2026-11-03: "En verberg fold-sub op mobiel"). Phone only (≤760 px): the sentence
   under "Waar kan ik u mee helpen?" is hidden; the buttons come up under the heading. From 761 px it stays. ============ */
@media (max-width: 760px) {
  .fold-sub { display: none; }
  .fold-left > .pair { margin-top: 24px; }
}


/* ============ FEITENBLOK: HELE BREEDTE (TELEFOON) — picked 2 of ronde/feitbreed.py (naast elkaar: het getal links, de woorden ernaast rechts). Written in by ronde-varianten.py --vast; %V% -> :root:root. ============ */
@media (max-width: 760px) {
  :root:root .lak-fold .lak-cell { display: grid; grid-template-columns: 5.4rem minmax(0, 1fr); align-items: center; column-gap: 18px; }
  :root:root .lak-fold .lak-cell > :last-child { padding-left: 18px; border-left: 1px solid rgb(159 173 179 / .28); }
  :root:root .lak-fold .lak-year .lak-fact { flex-direction: column; align-items: flex-start; gap: 5px; }
  :root:root .lak-fold .lak-year .lak-expl { display: block; margin-top: 0; font-size: 14px; line-height: 1.4; }
  :root:root .lak-fold .lak-dot { display: none; }
  :root:root .lak-fold .lak-count { display: block; }
}
@media (max-width: 380px) {
  :root:root .lak-fold .lak-cell { grid-template-columns: 4.6rem minmax(0, 1fr); column-gap: 14px; }
  :root:root .lak-fold .lak-cell > :last-child { padding-left: 14px; }
  :root:root .lak-fold .lak-year .lak-expl { font-size: 13.5px; }
}


/* ============ FEITENBLOK: BEOORDELING GROTER (TELEFOON) — picked 3 of ronde/beoordeling.py (flink groter: sterren 28 px, de regels 20 px). Written in by ronde-varianten.py --vast; %V% -> :root:root. ============ */
@media (max-width: 760px) {
  :root:root .lak-fold .stars-lak { gap: 4px; }
  :root:root .lak-fold .stars-lak svg { width: 28px; height: 28px; }
  :root:root .lak-fold .lak-plat { font-size: 20px; line-height: 1.3; margin-top: 7px; }
}
@media (max-width: 380px) {
  :root:root .lak-fold .stars-lak svg { width: 25px; height: 25px; }
  :root:root .lak-fold .lak-plat { font-size: 17.5px; }
}


/* ============ FEITENBLOK: ZIN GROTER (TELEFOON) — picked 2 of ronde/feitzin.py (groter: 17 px). Written in by ronde-varianten.py --vast; %V% -> :root:root. ============ */
@media (max-width: 760px) {
  :root:root .lak-fold .lak-year .lak-expl { font-size: 17px; line-height: 1.4; }
}
@media (max-width: 380px) {
  :root:root .lak-fold .lak-year .lak-expl { font-size: 15.5px; }
}


/* ============ FOLD: NIEUWE OPBOUW (TELEFOON) — picked 1 of ronde/foldtel.py (tegels klein: Buitenschilderwerk laag en breed, de andere vier in twee kolommen). Written in by ronde-varianten.py --vast; %V% -> :root:root. ============ */
@media (max-width: 760px) {
  :root:root .fold-in { display: flex; flex-direction: column; align-items: flex-start; gap: 0; }
  :root:root .fold-left, :root:root .fold-right { display: contents; }
  :root:root .answers { order: 1; align-self: stretch; margin-top: 22px; }
  :root:root .fold-left > .invite { order: 2; }
  :root:root .fold .lak-fold { order: 3; }
  :root:root .answers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; border-radius: 0; background: none; box-shadow: none; overflow: visible; }
  :root:root .answers li { min-width: 0; border: 0; }
  :root:root .answer:hover .patch { transform: none; }
  :root:root .answer-line { display: none; }
}

@media (max-width: 760px) {
  :root:root .answer { position: relative; display: flex; flex-direction: column; align-items: stretch; gap: 0; height: 100%; padding: 0; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: var(--paper); box-shadow: 0 10px 20px -16px rgb(21 35 44 / .5); }
  :root:root .patch { position: relative; width: 100%; height: auto; overflow: hidden; -webkit-mask: none; mask: none; }
  :root:root .patch img { position: absolute; inset: 0; }
  :root:root .answer-arrow { position: absolute; top: 6px; right: 6px; width: 14px; height: 14px; padding: 7px; box-shadow: 0 4px 10px -4px rgb(21 35 44 / .6); }
}

@media (max-width: 760px) {
  :root:root .answers li:first-child { grid-column: 1 / -1; }
  :root:root .patch { aspect-ratio: 2 / 1; }
  :root:root .answers li:first-child .patch { aspect-ratio: 4 / 1; }
  :root:root .answer-text { padding: 8px 10px 9px; }
  :root:root .answer-name { font-size: min(21px, 5vw); }
  :root:root .answers li:first-child .answer-name { font-size: 23px; }
}


/* ============ OMDRAAIEN — by hand (Sem, 2026-11-03, with the pick of foldtel 1: "En vervolgens wil ik dat je het diensten
   element, omdraaid met het "ontmoet de eigenaar" en het klantenoordelen element."). Phone only (≤760 px): Joost and the
   fact block back under the two buttons, the service tiles under them. ============ */
@media (max-width: 760px) {
  :root:root .fold-left > .invite { order: 1; }
  :root:root .fold .lak-fold { order: 2; }
  :root:root .answers { order: 3; margin-top: 24px; }
}

/* ============ FEIT ONDER DIENSTEN — by hand (Sem, 2026-11-03, on the switch at feitcompact=1: "Dit zijn de volgende
   wijzingen voor mobiel: - Ik wil dat het feitenblok en de diensten worden omgedraaid: [Image #67]"). Phone only (≤760 px):
   the service tiles straight under Joost, the fact block under the tiles. ============ */
@media (max-width: 760px) {
  :root:root .answers { order: 2; }
  :root:root .fold .lak-fold { order: 3; }
}


/* ============ FOLD: RUSTIG EN KLASSIEK (TELEFOON) — picked 2 of ronde/foldklassiek.py (foto achter: één scherm op een foto, donkerblauw waas, witte letters). Written in by ronde-varianten.py --vast; %V% -> :root:root. ============ */
@media (max-width: 760px) {
  :root:root .fold { display: flex; flex-direction: column; min-height: 100svh; padding: 20px 0 24px; }
  :root:root .fold-in { flex: 1 1 auto; width: 100%; }
  :root:root .fold .answers, :root:root .fold .lak-fold, :root:root .fold-left > .invite { display: none; }
  :root:root .fold-h1 { order: 2; margin-top: 30px; }
  :root:root .fold-kort[hidden] { display: block; }
  :root:root .fold-kort { order: 3; margin-top: 12px; max-width: 22em; font-size: 17px; line-height: 1.5; color: var(--ink-soft); }
  :root:root .fold-left > .pair { order: 4; margin-top: 24px; }
  :root:root .fold-proof[hidden] { display: flex; }
  :root:root .fold-proof { order: 5; align-items: center; gap: 12px; margin-top: 18px; font-size: 15px; line-height: 1.35; color: var(--ink-mute); }
  :root:root .fold-proof .stars { gap: 2px; }
  :root:root .fold-proof .stars svg { width: 18px; height: 18px; }
  :root:root .fold-proof .fp-text { display: flex; flex-direction: column; }
  :root:root .fold-proof b { font-weight: 700; color: var(--ink); }
  :root:root .fold-tag { position: absolute; left: 12px; bottom: 12px; padding: 4px 9px 5px; border-radius: 6px; font: 600 12.5px/1 var(--f-body); color: var(--ink-soft); background: rgb(251 249 245 / .88); }
}
@media (max-width: 380px) {
  :root:root .fold-h1 { margin-top: 24px; }
  :root:root .fold-kort { font-size: 16px; }
  :root:root .fold-proof { font-size: 14px; gap: 10px; }
  :root:root .fold-proof .stars svg { width: 16px; height: 16px; }
}

@media (max-width: 760px) {
  :root:root .fold { position: relative; isolation: isolate; overflow: hidden; background-color: var(--blue-deep); }
  :root:root .fold::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgb(21 35 44 / .82) 0%, rgb(21 35 44 / .45) 24%, rgb(21 35 44 / .38) 36%, rgb(21 35 44 / .8) 56%, rgb(21 35 44 / .94) 100%); }
  :root:root .fold-bg[hidden] { display: block; }
  :root:root .fold-bg { position: absolute; inset: 0; z-index: -2; }
  :root:root .fold-bg img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
  :root:root .fold-bg .fold-tag { left: auto; right: var(--gut); top: 150px; bottom: auto; color: var(--paper); background: rgb(21 35 44 / .55); }
  :root:root .fold .lockup-mark { display: none; }
  :root:root .fold .lockup::before { content: ""; flex: none; height: 86px; aspect-ratio: 75.25 / 99.5; background: url(merk-wit.svg) center / 100% 100% no-repeat; }
  :root:root .fold .lk-name, :root:root .fold .lk-sub { color: var(--paper); }
  :root:root .fold .lk-slogan { color: var(--blue-wash); }
  :root:root .fold-h1 { margin-top: auto; padding-top: 40px; color: var(--paper); }
  :root:root .fold-kort { color: rgb(251 249 245 / .88); }
  :root:root .fold-left > .pair { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
  :root:root .fold-left > .pair .btn-call { background-color: var(--paper); background-image: none; color: var(--ink); box-shadow: 0 16px 28px -14px rgb(0 0 0 / .7); }
  :root:root .fold-left > .pair .btn-call .ico { color: var(--blue); }
  :root:root .fold-left > .pair .btn-wa { box-shadow: 0 16px 28px -14px rgb(0 0 0 / .7); }
  :root:root .fold-proof { color: rgb(251 249 245 / .8); }
  :root:root .fold-proof b { color: var(--paper); }
}
@media (max-width: 380px) {
  :root:root .fold .lockup::before { height: 76px; }
  :root:root .fold-bg .fold-tag { top: 130px; }
}

/* ============ FOLD: STERREN BREED — by hand (2026-11-03, with the pick of foldklassiek 2: "met de volgende aanpassingen: -
   het label moet weg. - en het ratingselement mag meer de hele breedte innemen, met met iets grotere sterren en font-size
   voor de tekst."). Phone only (≤760 px): the photo tag "Tiel · september 2025" is out of index.html (with answer 1's
   unused photo); the star line spans the full width, the stars up to 24 px, the two lines up to 17 px (both scale with
   the width below about 400 px, so each line stays one line), the words against the right edge. ============ */
@media (max-width: 760px) {
  :root:root .fold-proof { align-self: stretch; justify-content: space-between; gap: 14px; font-size: min(17px, 4.3vw); line-height: 1.35; }
  :root:root .fold-proof .stars { gap: 3px; }
  :root:root .fold-proof .stars svg { width: min(24px, 5.6vw); height: min(24px, 5.6vw); }
}
@media (max-width: 420px) {
  :root:root .fold-proof { gap: 12px; }
  :root:root .fold-proof .stars { gap: 2px; }
}
@media (max-width: 340px) {
  :root:root .fold-proof { gap: 9px; font-size: 14.5px; }
  :root:root .fold-proof .stars svg { width: 17px; height: 17px; }
}


/* ============ FOLD: JOOST TERUG (TELEFOON) — picked 3 of ronde/eigenaar.py (onder de sterren: Joost aan de voet van de fold, achter een dunne lijn). Written in by ronde-varianten.py --vast; %V% -> :root:root. ============ */
@media (max-width: 760px) {
  :root:root .fold .fold-left > .invite { display: flex; align-items: center; gap: 12px; color: var(--paper); }
  :root:root .fold .invite-face { width: 52px; height: 52px; box-shadow: 0 0 0 2px var(--paper), 0 8px 18px -8px rgb(0 0 0 / .7); }
  :root:root .fold .invite-name { font-size: 31px; color: var(--paper); text-shadow: 0 1px 12px rgb(0 0 0 / .35); }
  :root:root .fold .invite-link { margin-top: 3px; font-size: 15px; color: var(--paper); border-bottom-color: var(--tape); text-shadow: 0 1px 12px rgb(0 0 0 / .35); }
}
@media (max-width: 380px) {
  :root:root .fold .invite-face { width: 46px; height: 46px; }
  :root:root .fold .invite-name { font-size: 28px; }
  :root:root .fold .invite-link { font-size: 14px; }
}

@media (max-width: 760px) {
  :root:root .fold .fold-left > .invite { order: 6; align-self: stretch; margin-top: 20px; padding-top: 16px; border-top: 1px solid rgb(251 249 245 / .22); }
}


/* ============ FOLD: DE DIENSTEN TERUG, COMPACT (TELEFOON) — picked 3 of ronde/dienstfold.py (onder het scherm: het eerste scherm zoals nu, de lage kaart er direct onder). Written in by ronde-varianten.py --vast; %V% -> :root:root. ============ */
@media (max-width: 760px) {
  :root:root .fold .answers { display: block; order: 7; align-self: stretch; margin-top: 26px; border-radius: 12px; background: var(--paper); overflow: hidden; box-shadow: 0 22px 44px -26px rgb(0 0 0 / .75); }
  :root:root .answers li, :root:root .answers li:first-child { grid-column: auto; border-bottom: 1px solid var(--line); }
  :root:root .answers li:last-child { border-bottom: 0; }
  :root:root .answer { display: grid; grid-template-columns: 30px minmax(0, 1fr) 30px; align-items: center; gap: 14px; height: 54px; padding: 0 12px; border: 0; border-radius: 0; background: var(--ground-deep); box-shadow: none; }
  :root:root .patch, :root:root .answers li:first-child .patch { width: 30px; height: 40px; aspect-ratio: auto; -webkit-mask: url(merk.svg) center / 100% 100% no-repeat; mask: url(merk.svg) center / 100% 100% no-repeat; }
  :root:root .answer-text { padding: 0; }
  :root:root .answer-name, :root:root .answers li:first-child .answer-name { font-size: min(22px, 6vw); line-height: 1; }
  :root:root .answer-arrow, :root:root .answers li:first-child .answer-arrow { position: static; width: 14px; height: 14px; padding: 8px; box-shadow: inset 0 1px 0 rgb(255 255 255 / .16); }
}

@media (max-width: 760px) {
  :root:root .fold { min-height: calc(100svh + 300px); background-color: rgb(21 35 44); }   /* 300 = the card's 26 px of margin and 274 px of rows */
  :root:root .fold::before, :root:root .fold-bg { bottom: auto; height: 100svh; }
}

/* ============ FOLD: JOOST BOVEN DE STERREN — by hand (Sem, 2026-11-03, with the picks eigenaar 3 and dienstfold 3: "- Het
   ratings element en het ontmoet de eigenaar element moeten worden omgedraaid. - De algehele content in de fold, moet iets
   naar boven worden opschoven, zodat de bovenste dienst in de diensten lijst, net de zien is, onder de fold. Deze
   aanpassingen gelden wederom weer voor de mobiel"). Phone only (≤760 px): Joost straight under the two buttons, the thin
   line and the star line under him; the fold is a screen plus the card less 62 px, so everything stands higher and
   Buitenschilderwerk shows whole at the foot of the first screen. On a short screen (a phone browser with its bars is
   about 640–760 px high) the air between the parts shrinks so it still fits. ============ */
@media (max-width: 760px) {
  :root:root .fold { --kaart-mt: 26px; min-height: calc(100svh + 274px + 24px - 62px); }   /* 274 = the card's five rows, 24 = the fold's foot; 62 = the card's first row, the line under it and a strip of the second, on the first screen */
  :root:root .fold .answers { margin-top: var(--kaart-mt); }
  :root:root .fold .fold-left > .invite { order: 5; margin-top: 20px; padding-top: 0; border-top: 0; }
  :root:root .fold-proof { order: 6; margin-top: 18px; padding-top: 16px; border-top: 1px solid rgb(251 249 245 / .22); }
}
@media (max-width: 760px) and (max-height: 760px) {
  :root:root .fold { --kaart-mt: 20px; }
  :root:root .fold-h1 { padding-top: 20px; }
  :root:root .fold .fold-left > .invite { margin-top: 16px; }
  :root:root .fold-proof { margin-top: 14px; padding-top: 12px; }
}
@media (max-width: 760px) and (max-height: 670px) {
  :root:root .fold { padding-top: 14px; }
  :root:root .fold-h1 { padding-top: 12px; }
  :root:root .fold-left > .pair { margin-top: 18px; gap: 8px; }
  :root:root .fold .invite-face { width: 44px; height: 44px; }
}


/* ============ APP-BALK: KLEUREN — picked 1 of ronde/appkleur.py (donkerblauw: de balk donkerblauw, witte kop, groene en witte knop). Written in by ronde-varianten.py --vast; %V% -> :root:root. ============ */
:root:root .band-app { background-color: var(--blue-deep); }
:root:root .band-app .band-h { color: var(--paper); }
:root:root .band-app .band-line { color: var(--blue-wash); }
:root:root .band-app .btn-call { background-color: var(--paper); background-image: none; color: var(--ink); box-shadow: none; }
:root:root .band-app .btn-call .ico { color: var(--blue); }
:root:root .band-app .btn-call:hover { background-color: var(--ground); }


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

:root[data-logo="1"] .logo26 { display: contents; }
:root[data-logo="1"] .brand .brand-mark, :root[data-logo="1"] .brand .brand-words { display: none; }
:root[data-logo="1"] .brand .logo26-d { display: block; height: 56px; width: auto; }
:root[data-logo="1"] .lockup .lockup-mark, :root[data-logo="1"] .lockup .lk-name, :root[data-logo="1"] .lockup .lk-sub { display: none; }
:root[data-logo="1"] .lockup .logo26-w { display: none; }
:root[data-logo="1"] .lockup { flex-direction: column; align-items: flex-start; gap: 14px; }
:root[data-logo="1"] .lockup .logo26-d { display: block; width: 460px; max-width: 100%; height: auto; }
:root[data-logo="1"] .lockup .lk-slogan { margin-top: 0; }
:root[data-logo="1"] .lockup-foot .logo26-d { width: 300px; }
@media (max-width: 1180px) {
  :root[data-logo="1"] .fold .lockup .logo26-d { width: 400px; }
}
@media (max-width: 760px) {
  :root[data-logo="1"] .brand .logo26-d { height: 46px; }
  :root[data-logo="1"] .lockup { gap: 8px; }
  :root[data-logo="1"] .fold .lockup::before { content: none; }
  :root[data-logo="1"] .fold .lockup .logo26-d { display: none; }
  :root[data-logo="1"] .fold .lockup .logo26-w { display: block; width: 250px; max-width: 100%; height: auto; }
  :root[data-logo="1"] .lockup-foot .logo26-d { width: 250px; }
}
@media (max-width: 380px) {
  :root[data-logo="1"] .brand .logo26-d { height: 42px; }
  :root[data-logo="1"] .fold .lockup .logo26-w { width: 225px; }
}

:root[data-logo="2"] .logo26b { display: contents; }
:root[data-logo="2"] .brand .brand-mark, :root[data-logo="2"] .brand .brand-words { display: none; }
:root[data-logo="2"] .brand .logo26b-d { display: block; height: 56px; width: auto; }
:root[data-logo="2"] .lockup .lockup-mark, :root[data-logo="2"] .lockup .lk-name, :root[data-logo="2"] .lockup .lk-sub { display: none; }
:root[data-logo="2"] .lockup .logo26b-w { display: none; }
:root[data-logo="2"] .lockup { flex-direction: column; align-items: flex-start; gap: 14px; }
:root[data-logo="2"] .lockup .logo26b-d { display: block; width: 460px; max-width: 100%; height: auto; }
:root[data-logo="2"] .lockup .lk-slogan { margin-top: 0; }
:root[data-logo="2"] .lockup-foot .logo26b-d { width: 300px; }
@media (max-width: 1180px) {
  :root[data-logo="2"] .fold .lockup .logo26b-d { width: 400px; }
}
@media (max-width: 760px) {
  :root[data-logo="2"] .brand .logo26b-d { height: 46px; }
  :root[data-logo="2"] .lockup { gap: 8px; }
  :root[data-logo="2"] .fold .lockup::before { content: none; }
  :root[data-logo="2"] .fold .lockup .logo26b-d { display: none; }
  :root[data-logo="2"] .fold .lockup .logo26b-w { display: block; width: 250px; max-width: 100%; height: auto; }
  :root[data-logo="2"] .lockup-foot .logo26b-d { width: 250px; }
}
@media (max-width: 380px) {
  :root[data-logo="2"] .brand .logo26b-d { height: 42px; }
  :root[data-logo="2"] .fold .lockup .logo26b-w { width: 225px; }
}


/* ── 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}