/* Joost van Mourik Schilderwerken · bak3 · L4-04 · b
   Every colour below comes from palette.json.
   The page's own idea: naad op naad. Things that belong together are butted at a seam,
   a 3px line of the ground with a brass plumb tick at its head: the call and WhatsApp pair,
   the two paint chips of the trust strip, the before and after halves, the map and its picture,
   the review cards. */

:root {
  /* kalk — neutral */
  --papier: #FBF9F5;
  --kalk: #F2EEE7;
  --kalk-diep: #E6E0D6;
  --naad: #D3CABB;
  /* lak — primary */
  --lak: #1B1B1B;
  --lak-glans: #2B2926;
  --lak-zacht: #4D4842;
  --lak-stil: #6B645B;
  /* grijsblauw — secondary */
  --gb-diep: #3E4955;
  --gb: #56626F;
  --gb-licht: #E2E5E7;
  /* messing — accent */
  --messing: #A27C42;
  --messing-licht: #C9A76B;
  /* fixed */
  --wa: #25D366;
  --wit: #FFFFFF;
  /* alpha forms of palette colours */
  --scrim: rgba(27, 27, 27, 0.74);
  --scrim-zacht: rgba(27, 27, 27, 0.55);
  --kalk-glas: rgba(242, 238, 231, 0.96);

  --f-tekst: 'Overpass', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --f-label: 'Catamaran', 'Overpass', system-ui, sans-serif;
  --f-slogan: 'Signika', 'Overpass', system-ui, sans-serif;
  --f-hand: 'Herr Von Muellerhoff', 'Segoe Script', cursive;

  --kop: clamp(32px, 3.95vw, 57px);
  --h2: clamp(30px, 3.1vw, 46px);
  --h3: clamp(20px, 1.75vw, 26px);
  --lijst: 19px;
  --gutter: clamp(16px, 5.5vw, 80px);
  --wrap: 1280px;
  --naad-breed: 3px;
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 84px; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--kalk);
  color: var(--lak);
  font: 400 17px/1.6 var(--f-tekst);
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3, p, ul, ol, figure, dl, dd, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--messing); outline-offset: 3px; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.ico { width: 20px; height: 20px; flex: none; }
.ico-klein { width: 16px; height: 16px; flex: none; vertical-align: -3px; }
.ico-pin { display: inline-block; width: 0.95em; height: 0.95em; margin-right: 0.35em; vertical-align: -0.12em; flex: none; color: var(--messing-licht); }
.sterren { display: inline-flex; gap: 2px; color: var(--messing); flex: none; }
.sterren svg { width: 16px; height: 16px; }
.hand { font-family: var(--f-hand); font-weight: 400; }
.stip { display: inline-block; padding-right: 0.22em; }
.wrap { max-width: calc(var(--wrap) + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter); }
.naar-inhoud { position: absolute; left: 16px; top: -60px; z-index: 200; background: var(--lak); color: var(--papier); padding: 10px 16px; }
.naar-inhoud:focus { top: 16px; }

/* ---------- the section announcement: a letterspaced label on the logo's rule ---------- */
.kop-label {
  display: flex; align-items: center; gap: 18px;
  font: 600 13px/1 var(--f-label); letter-spacing: 0.17em; text-transform: uppercase;
  color: var(--lak-zacht);
  margin-bottom: 18px;
}
.kop-label::after { content: ''; flex: 1; height: 1px; background: var(--naad); }
.kop-label::before { content: ''; width: 3px; height: 13px; background: var(--messing); flex: none; }

/* ---------- buttons ---------- */
.knop {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 0 26px;
  background: var(--lak); color: var(--papier);
  font: 600 16px/1 var(--f-tekst); letter-spacing: 0.01em; text-decoration: none;
  border: 0; cursor: pointer;
  transition: background-color .2s;
}
.knop:hover { background: var(--lak-glans); }
.knop--papier { background: var(--papier); color: var(--lak); }
.knop--papier:hover { background: var(--kalk); }
.knop-stil {
  display: inline-flex; align-items: center; gap: 8px; min-height: 52px;
  color: var(--lak); font: 600 16px/1 var(--f-tekst);
  text-decoration: underline; text-decoration-color: var(--naad); text-decoration-thickness: 2px; text-underline-offset: 7px;
  transition: text-decoration-color .2s;
}
.knop-stil:hover { text-decoration-color: var(--messing); }
.acties { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; margin-top: 32px; }

/* the pair: call and WhatsApp butted naad op naad, a brass plumb tick on the seam */
.paar { display: inline-flex; gap: var(--naad-breed); position: relative; }
.paar > a {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 54px; padding: 0 26px;
  font: 600 16px/1 var(--f-tekst); letter-spacing: 0.01em; text-decoration: none; white-space: nowrap;
  transition: background-color .2s, box-shadow .2s;
}
.paar-bel { background: var(--lak); color: var(--papier); position: relative; }
.paar-bel:hover { background: var(--lak-glans); }
.paar-wa { background: var(--wa); color: var(--wit); }
.paar-wa:hover { box-shadow: inset 0 -3px 0 var(--scrim-zacht); }
.paar-bel::before, .paar-bel::after {
  content: ''; position: absolute; right: calc(-1 * var(--naad-breed)); width: var(--naad-breed); height: 8px; background: var(--messing);
}
.paar-bel::before { top: -8px; }
.paar-bel::after { bottom: -8px; }
.paar--licht .paar-bel { background: var(--papier); color: var(--lak); }
.paar--licht .paar-bel:hover { background: var(--kalk); }
.paar--licht .paar-bel::before, .paar--licht .paar-bel::after { background: var(--messing-licht); }

/* ---------- header ---------- */
.kop {
  position: fixed; top: 0; left: 0; right: 0; z-index: 60;
  transition: background-color .3s, box-shadow .3s, transform .4s cubic-bezier(.2, .7, .2, 1);
}
.kop-nav {
  max-width: calc(var(--wrap) + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter);
  height: 104px;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px;
  transition: height .3s;
}
.kop.is-vast { background: var(--kalk-glas); box-shadow: 0 1px 0 var(--naad); }
.kop.is-vast .kop-nav { height: 68px; }
.kop-zijde {
  display: flex; align-items: center; gap: 30px;
  font: 600 13px/1 var(--f-label); letter-spacing: 0.15em; text-transform: uppercase;
}
.kop-zijde > a, .diensten-knop { color: var(--lak); text-decoration: none; padding: 10px 0; position: relative; }
.kop-zijde > a::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 2px; height: 1px; background: var(--messing);
  transform: scaleX(0); transform-origin: left; transition: transform .25s;
}
.kop-zijde > a:hover::after { transform: scaleX(1); }
.kop-rechts { justify-content: flex-end; }
.kop-naad { width: 1px; height: 22px; background: var(--naad); flex: none; }
.kop-tel { display: inline-flex; align-items: center; gap: 8px; letter-spacing: 0.06em; }
.kop-tel .ico { width: 17px; height: 17px; }

.kop-merk {
  display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--lak);
  opacity: 0; visibility: hidden; transition: opacity .3s, visibility .3s;
}
.kop.is-klein .kop-merk { opacity: 1; visibility: visible; }
.kop-merk img { width: 38px; }
.kop-merk-naam { display: flex; flex-direction: column; text-align: left; }
.kop-merk-naam > span:first-child { font: 500 17px/1.1 var(--f-tekst); }
.kop-merk-sub { font: 600 10.5px/1.3 var(--f-label); letter-spacing: 0.17em; color: var(--lak-zacht); }

.diensten-menu { position: relative; }
.diensten-knop {
  display: inline-flex; align-items: center; gap: 6px;
  background: none; border: 0; cursor: pointer;
  font: inherit; letter-spacing: inherit; text-transform: inherit;
}
.diensten-knop .ico-klein { width: 14px; height: 14px; vertical-align: 0; transition: transform .2s; }
.diensten-lijst {
  position: absolute; top: 100%; left: -22px; min-width: 260px; padding: 10px 0;
  background: var(--papier); border: 1px solid var(--naad); box-shadow: 0 18px 40px -18px var(--scrim-zacht);
  font: 400 16px/1.3 var(--f-tekst); letter-spacing: 0; text-transform: none;
  display: none;
}
.diensten-lijst::before { content: ''; position: absolute; left: 22px; top: -1px; width: 40px; height: 2px; background: var(--messing); }
.diensten-lijst a { display: block; padding: 11px 22px; text-decoration: none; color: var(--lak); }
.diensten-lijst a:hover { background: var(--kalk); }
.diensten-menu:hover .diensten-lijst,
.diensten-menu:focus-within .diensten-lijst,
.diensten-menu.open .diensten-lijst { display: block; }
.diensten-menu.open .diensten-knop .ico-klein,
.diensten-menu:hover .diensten-knop .ico-klein { transform: rotate(180deg); }

.kop-mobiel { display: none; }
.menu-paneel { display: none; }

/* ---------- fold ---------- */
.vouw { background: var(--kalk); }
.vouw-binnen {
  position: relative;
  max-width: calc(var(--wrap) + 2 * var(--gutter)); margin: 0 auto;
  padding: 16px var(--gutter) 34px;
  display: flex; flex-direction: column; align-items: center; text-align: center;
}
.lockup { display: inline-flex; flex-direction: column; align-items: center; }
.lockup-merk { width: calc(var(--kop) * 1.32); }
.lockup-naam { display: flex; flex-direction: column; align-items: center; margin-top: calc(var(--kop) * 0.22); }
.ln-1 { font: 500 var(--kop)/1 var(--f-tekst); letter-spacing: -0.005em; }
.ln-2 { font: 600 calc(var(--kop) * 0.5)/1 var(--f-label); letter-spacing: 0.17em; margin-right: -0.17em; margin-top: calc(var(--kop) * 0.16); }
.lockup-regel { display: block; align-self: stretch; height: 1px; background: var(--lak-stil); margin: calc(var(--kop) * 0.26) 0 calc(var(--kop) * 0.2); }
.lockup-slogan { font: 500 calc(var(--kop) * 0.43)/1.1 var(--f-slogan); color: var(--lak-zacht); }

.vouw-kop {
  margin-top: calc(var(--kop) * 0.62);
  font: 300 var(--kop)/1.06 var(--f-tekst); letter-spacing: -0.018em;
}
.vouw-kop span { display: block; }
.vouw-sub { max-width: 650px; margin-top: 18px; font-size: 18px; line-height: 1.55; color: var(--lak-zacht); }
.paar--vouw { margin-top: 26px; }
.vouw-cijfer {
  margin-top: 16px; display: inline-flex; align-items: center; gap: 10px;
  font-size: 14px; color: var(--lak-zacht); text-decoration: none;
}
.vouw-cijfer strong { font-weight: 600; color: var(--lak); }
.vouw-cijfer:hover > span:last-child { text-decoration: underline; text-underline-offset: 3px; }
.vouw-cijfer .sterren svg { width: 14px; height: 14px; }

.kennismaken {
  position: absolute; right: var(--gutter); bottom: 30px;
  display: flex; align-items: center; gap: 22px; text-align: left; text-decoration: none; color: var(--lak);
}
.kennismaken-foto {
  position: relative; width: 66px; height: 66px; border-radius: 50%; overflow: hidden; flex: none;
  background: var(--kalk-diep);
  box-shadow: 0 0 0 3px var(--kalk), 0 0 0 4px var(--messing);
}
.kennismaken-foto img { position: absolute; max-width: none; width: 431%; height: auto; left: -128.8%; top: -71.2%; }
.kennismaken-tekst { display: flex; flex-direction: column; }
.kennismaken-naam { font-size: 50px; line-height: 0.85; padding-left: 14px; }
.kennismaken-link {
  margin-top: 6px; font: 500 14px/1.2 var(--f-tekst);
  text-decoration: underline; text-decoration-color: var(--naad); text-decoration-thickness: 1px; text-underline-offset: 4px;
}
.kennismaken:hover .kennismaken-link { text-decoration-color: var(--messing); }

.vouw-band-wrap { max-width: calc(var(--wrap) + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter); }
.vouw-band {
  display: block; width: 100%; height: clamp(320px, 38vw, 560px);
  padding: 0; border: 0; overflow: hidden; cursor: zoom-in; background: var(--kalk-diep);
}
.vouw-band img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }

/* ---------- trust strip: two paint chips butted at a seam ---------- */
.vertrouwen { padding: 44px 0 0; }
.stalen { display: grid; grid-template-columns: 1fr 1fr; gap: var(--naad-breed); position: relative; }
.stalen::before, .stalen::after {
  content: ''; position: absolute; left: calc(50% - var(--naad-breed) / 2); width: var(--naad-breed); height: 9px; background: var(--messing);
}
.stalen::before { top: -9px; }
.stalen::after { bottom: -9px; }
.staal {
  display: flex; align-items: center; gap: 24px;
  min-height: 112px; padding: 18px 34px;
  text-decoration: none;
}
.staal--lak { background: var(--lak); color: var(--papier); }
.staal--papier { background: var(--papier); color: var(--lak); box-shadow: inset 0 0 0 1px var(--naad); }
.staal-merk { width: 42px; flex: none; }
.staal-feit { display: flex; align-items: baseline; gap: 12px; white-space: nowrap; }
.staal-woord { font: 600 14px/1 var(--f-label); letter-spacing: 0.17em; text-transform: uppercase; color: var(--messing-licht); }
.staal-cijfer { font: 300 56px/1 var(--f-tekst); letter-spacing: -0.02em; }
.staal-bron { display: flex; flex-direction: column; gap: 5px; }
.staal-bron .sterren svg { width: 17px; height: 17px; }
.staal-platform { font-size: 15px; line-height: 1.3; }
.staal-platform strong { font-weight: 600; }
.staal-aantal { color: var(--lak-stil); margin-left: 6px; }
.staal-uitleg { margin-left: auto; font-size: 15px; line-height: 1.4; text-align: right; }
.staal--lak .staal-uitleg { color: var(--naad); }
.staal-actie { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; text-decoration: underline; text-decoration-color: var(--naad); text-underline-offset: 5px; }
.staal--papier:hover .staal-actie { text-decoration-color: var(--messing); }

/* ---------- even voorstellen ---------- */
.voorstellen { padding: 96px 0 0; position: relative; z-index: 2; }
.voorstellen-raster { display: grid; grid-template-columns: 5fr 7fr; gap: 64px; align-items: center; }
.portret { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: var(--kalk-diep); }
.portret img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.32); transform-origin: 41% 24%; }
.portret::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to bottom, transparent 46%, var(--scrim) 100%); }
.portret-tekst {
  position: absolute; left: 34px; right: 34px; bottom: 30px; z-index: 1;
  display: flex; flex-direction: column; color: var(--papier);
}
.pt-1 { font: 400 21px/1.2 var(--f-tekst); }
.pt-2 { font-size: clamp(88px, 9vw, 132px); line-height: 0.78; margin: 10px 0 8px -8px; }
.pt-3 { font: 500 15px/1.35 var(--f-tekst); color: var(--kalk-diep); }

.feiten { border-top: 1px solid var(--naad); }
.feit { display: grid; grid-template-columns: 188px 1fr; gap: 30px; align-items: center; padding: 26px 0; border-bottom: 1px solid var(--naad); }
.feit-foto { display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--kalk-diep); }
.feit-foto img { width: 100%; height: 100%; object-fit: cover; }
.feit h3 { font: 400 26px/1.2 var(--f-tekst); letter-spacing: -0.005em; }
.feit p { margin-top: 8px; color: var(--lak-zacht); font-size: 17px; }

.dienstenkaart {
  position: relative; z-index: 3;
  margin: 72px 0 -46px;
  display: grid; grid-template-columns: auto 1fr;
  background: var(--papier); border: 1px solid var(--lak);
}
.dk-label {
  display: flex; align-items: center; padding: 0 30px;
  background: var(--lak); color: var(--papier);
  font: 600 13px/1 var(--f-label); letter-spacing: 0.17em; text-transform: uppercase;
}
.dk-lijst { display: grid; grid-template-columns: repeat(5, 1fr); }
.dk-lijst li + li { border-left: 1px solid var(--naad); }
.dk-lijst a {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  height: 90px; padding: 0 22px;
  font: 500 18px/1.2 var(--f-tekst); text-decoration: none; color: var(--lak);
  transition: background-color .2s;
}
.dk-lijst a .ico-klein { color: var(--messing); }
.dk-lijst a:hover { background: var(--kalk); }

/* ---------- services ---------- */
.dienst { padding: 104px 0; }
.dienst--hoofd { background: var(--kalk-diep); padding-top: 150px; }
.dienst--binnen { background: var(--kalk); }
.dienst--behang { background: var(--papier); }
.dienst--spuit { background: var(--kalk); padding: 88px 0; }
.dienst--glas { background: var(--kalk-diep); }

.dienst-kop { font: 400 var(--h2)/1.06 var(--f-tekst); letter-spacing: -0.012em; }
.dienst-kop a { text-decoration: none; }
.dienst-kop a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 8px; text-decoration-color: var(--messing); }
.dienst-sub { margin-top: 16px; font: 300 var(--h3)/1.3 var(--f-tekst); color: var(--lak); }
.dienst-lijst { margin-top: 26px; border-top: 1px solid var(--naad); }
.dienst-lijst li, .hoofdkaart-lijst li {
  position: relative; padding: 13px 0 13px 30px; border-bottom: 1px solid var(--naad);
  font: 400 var(--lijst)/1.35 var(--f-tekst); color: var(--lak-zacht);
}
.dienst-lijst li::before, .hoofdkaart-lijst li::before {
  content: ''; position: absolute; left: 0; top: 50%; width: 14px; height: 1px; background: var(--messing);
}

.dienst-raster { display: grid; grid-template-columns: 7fr 5fr; gap: 72px; align-items: center; }
.dienst-raster--om { grid-template-columns: 5fr 7fr; }
.dienst-raster--smal { grid-template-columns: 4fr 6fr; gap: 88px; }
.dienst-raster--smal .dienst-beeld { max-width: 440px; }

/* main card */
.hoofdkaart {
  margin-top: 34px; background: var(--papier);
  border: 1px solid var(--lak);
  box-shadow: 0 0 0 7px var(--kalk-diep), 0 0 0 8px var(--naad);
}
.foto--hoofd { aspect-ratio: 5 / 2; }
.hoofdkaart .duimen { margin: 0; padding: 16px 32px; border-bottom: 1px solid var(--naad); }
.hoofdkaart-body { display: grid; grid-template-columns: 1fr 1fr; }
.hoofdkaart-kopij { padding: 38px 40px; display: flex; flex-direction: column; justify-content: space-between; gap: 30px; }
.hoofdkaart .dienst-sub { margin: 0; font-size: var(--h3); }
.hoofdkaart-lijst { padding: 26px 40px 30px; border-left: 1px solid var(--naad); }
.hoofdkaart-lijst li:last-child { border-bottom: 0; }
.acties--kaart { margin: 0; padding: 22px 40px; border-top: 1px solid var(--naad); background: var(--kalk); }

.voorgangers { display: flex; align-items: center; gap: 18px; text-decoration: none; color: var(--lak); }
.avatars { display: flex; flex: none; }
.avatar {
  width: 44px; height: 44px; border-radius: 50%; margin-left: -12px;
  display: grid; place-items: center;
  border: 2px solid var(--papier);
  font: 500 17px/1 var(--f-tekst);
}
.avatar:first-child { margin-left: 0; }
.avatar:nth-child(1) { background: var(--lak); color: var(--papier); }
.avatar:nth-child(2) { background: var(--gb); color: var(--papier); }
.avatar:nth-child(3) { background: var(--messing-licht); color: var(--lak); }
.avatar:nth-child(4) { background: var(--kalk-diep); color: var(--lak); }
.avatar:nth-child(5) { background: var(--gb-licht); color: var(--lak); }
.voorgangers-tekst { display: flex; flex-direction: column; gap: 3px; }
.voorgangers-regel { display: flex; align-items: center; gap: 8px; font-size: 19px; }
.voorgangers-regel strong { font-weight: 600; }
.voorgangers-regel .sterren svg { width: 18px; height: 18px; }
.voorgangers-bron { font-size: 14px; color: var(--lak-zacht); line-height: 1.35; }
.voorgangers-bron strong { color: var(--lak); font-weight: 600; }
.voorgangers:hover .voorgangers-bron { text-decoration: underline; text-underline-offset: 3px; }

/* photos: label, stamp, pairs */
.foto { position: relative; overflow: hidden; background: var(--kalk-diep); }
.beeld-vol { display: block; width: 100%; height: 100%; padding: 0; border: 0; cursor: zoom-in; background: none; }
.beeld-vol img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.2, .7, .2, 1); }
.beeld-vol:hover img { transform: scale(1.02); }
.foto--staand { aspect-ratio: 4 / 5; }
.foto--staand .foto-label { padding-right: 24px; }
.foto--staand .stempel { top: 20px; bottom: auto; }

.foto-label {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  padding: 80px 220px 22px 26px;
  background: linear-gradient(to bottom, transparent, var(--scrim));
  color: var(--papier);
  display: flex; flex-direction: column; align-items: flex-start; gap: 6px;
  pointer-events: none;
}
.fl-plek { display: block; font: 500 23px/1.2 var(--f-tekst); letter-spacing: -0.005em; }
.fl-link {
  pointer-events: auto; display: inline-flex; align-items: center; gap: 6px;
  font: 600 14px/1.3 var(--f-tekst); color: var(--papier);
  text-decoration: underline; text-decoration-color: var(--messing-licht); text-underline-offset: 4px;
}
.stempel {
  position: absolute; right: 22px; bottom: 22px; z-index: 3;
  display: flex; align-items: center; gap: 9px;
  color: var(--papier); opacity: 0.88; pointer-events: none;
}
.stempel img { width: 36px; }
.stempel-naam { display: flex; flex-direction: column; font: 500 14px/1.15 var(--f-tekst); text-align: left; }
.stempel-naam span { font: 600 10px/1.4 var(--f-label); letter-spacing: 0.17em; }

.foto--paar { background: none; overflow: visible; }
.helften { display: grid; grid-template-columns: 1fr 1fr; gap: var(--naad-breed); position: relative; }
.helften::before, .helften::after {
  content: ''; position: absolute; left: calc(50% - var(--naad-breed) / 2); width: var(--naad-breed); height: 9px; background: var(--messing); z-index: 3;
}
.helften::before { top: -9px; }
.helften::after { bottom: -9px; }
.helft { position: relative; display: block; padding: 0; border: 0; overflow: hidden; cursor: zoom-in; background: var(--kalk-diep); }
.helften--staand .helft { aspect-ratio: 4 / 5; }
.helften--vierkant .helft { aspect-ratio: 1 / 1; }
.helft img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.2, .7, .2, 1); }
.helft:hover img { transform: scale(1.03); }
.helft-tag {
  position: absolute; top: 14px; left: 14px; z-index: 2;
  padding: 6px 10px 5px; background: var(--papier); color: var(--lak);
  font: 600 12px/1 var(--f-label); letter-spacing: 0.17em; text-transform: uppercase;
}
.helft + .helft .helft-tag { background: var(--lak); color: var(--papier); }

.klein-label {
  position: absolute; left: 12px; bottom: 12px; z-index: 2;
  display: inline-block;
  padding: 5px 9px 4px; background: var(--scrim); color: var(--papier);
  font: 500 12px/1.2 var(--f-tekst);
}

/* thumbnails and the count line */
.duimen { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 18px; margin-top: 14px; }
.duim-rij { display: flex; gap: var(--naad-breed); }
.duim { position: relative; width: 66px; height: 66px; padding: 0; border: 0; overflow: hidden; cursor: zoom-in; background: var(--kalk-diep); flex: none; }
.duim img { width: 100%; height: 100%; object-fit: cover; transition: opacity .2s; }
.duim:hover img { opacity: .82; }
.duim-meer { position: absolute; inset: 0; display: grid; place-items: center; background: var(--scrim); color: var(--papier); font: 600 16px/1 var(--f-tekst); }
.duim-tel {
  background: none; border: 0; padding: 8px 0; cursor: pointer;
  display: inline-flex; align-items: center; gap: 8px;
  font: 600 14px/1.2 var(--f-tekst); color: var(--lak-zacht);
  text-decoration: underline; text-decoration-color: var(--naad); text-underline-offset: 5px;
}
.duim-tel:hover { color: var(--lak); text-decoration-color: var(--messing); }

/* ---------- bands ---------- */
.band { padding: 46px 0; }
.band-binnen { display: flex; align-items: center; justify-content: space-between; gap: 24px 40px; flex-wrap: wrap; }
.band h2 { font: 400 clamp(26px, 2.4vw, 34px)/1.15 var(--f-tekst); letter-spacing: -0.01em; }
.band p { margin-top: 8px; font-size: 17px; }
.band--app { background: var(--gb-diep); color: var(--papier); }
.band--app p { color: var(--gb-licht); }
.band--app .paar-bel { background: var(--papier); color: var(--lak); }
.band--klus { background: var(--papier); padding: 64px 0; border-bottom: 1px solid var(--naad); }
.band--klus h2 { font-size: clamp(32px, 3.6vw, 52px); }
.band--klus p { font-size: 20px; color: var(--lak-zacht); }
.band--klus .knop--papier { background: var(--lak); color: var(--papier); min-height: 58px; padding: 0 32px; font-size: 17px; }
.band--klus .knop--papier:hover { background: var(--lak-glans); }

/* ---------- projects ---------- */
.projecten { background: var(--lak); color: var(--papier); padding: 100px 0 84px; overflow: hidden; }
.projecten .kop-label, .contact .kop-label { color: var(--naad); }
.projecten .kop-label::after, .contact .kop-label::after { background: var(--lak-zacht); }
.projecten .kop-label::before, .contact .kop-label::before { background: var(--messing-licht); }
.projecten-kop { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px 48px; flex-wrap: wrap; }
.projecten-kop h2 { font: 400 var(--h2)/1.06 var(--f-tekst); letter-spacing: -0.012em; }
.projecten-intro { max-width: 400px; color: var(--naad); font-size: 17px; }
.carrousel { margin-top: 46px; overflow: hidden; }
.carrousel-spoor { display: flex; gap: 28px; width: max-content; padding: 0 var(--gutter); animation: rol 80s linear infinite; }
.carrousel:hover .carrousel-spoor, .carrousel:focus-within .carrousel-spoor { animation-play-state: paused; }
@keyframes rol { to { transform: translateX(calc(-50% - 14px)); } }
.project {
  width: 410px; flex: none; padding: 0; border: 0; cursor: zoom-in; text-align: left;
  background: var(--lak-glans); color: var(--papier);
  display: flex; flex-direction: column;
  transition: background-color .25s;
}
.project:hover { background: var(--lak-zacht); }
.project-foto { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--lak-zacht); }
.project-foto > img { width: 100%; height: 100%; object-fit: cover; }
.project .stempel { right: 16px; bottom: 16px; }
.project-plek { display: block; padding: 22px 24px 0; font: 500 23px/1.2 var(--f-tekst); }
.project-dienst { padding: 8px 24px 0; font: 600 12px/1.2 var(--f-label); letter-spacing: 0.17em; text-transform: uppercase; color: var(--messing-licht); }
.project-wat { padding: 10px 24px 26px; font-size: 16px; line-height: 1.5; color: var(--naad); }

/* ---------- owner ---------- */
.joost { padding: 112px 0; background: var(--kalk); }
.joost-raster { display: grid; grid-template-columns: 5fr 6fr; gap: 88px; align-items: center; }
.joost-foto { position: relative; aspect-ratio: 5 / 6; overflow: hidden; background: var(--kalk-diep); box-shadow: 0 0 0 7px var(--kalk), 0 0 0 8px var(--naad); }
.joost-foto img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.8); transform-origin: 41% 19%; }
.joost-tekst h2 { font: 400 var(--h2)/1.06 var(--f-tekst); letter-spacing: -0.012em; }
.joost-alinea { margin-top: 22px; max-width: 560px; font-size: 19px; line-height: 1.65; color: var(--lak-zacht); }
.joost-hand { margin-top: 10px; font-size: 92px; line-height: 1; }
.joost .acties { margin-top: 14px; }

/* ---------- over ons + werkgebied: one ground, one seam ---------- */
.samen { background: var(--papier); }
.over { padding: 104px 0 64px; }
.over-raster { display: grid; grid-template-columns: 6fr 5fr; gap: 80px; align-items: center; }
.over-tekst h2, .wg-tekst h2 { font: 400 var(--h2)/1.06 var(--f-tekst); letter-spacing: -0.012em; }
.over-alinea, .wg-alinea { margin-top: 20px; font-size: 18px; line-height: 1.65; color: var(--lak-zacht); max-width: 600px; }
.werkwijze { margin-top: 30px; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--naad-breed); }
.werkwijze li { background: var(--kalk); padding: 18px 18px 20px; display: flex; flex-direction: column; gap: 6px; }
.werkwijze strong { font: 600 12.5px/1.3 var(--f-label); letter-spacing: 0.14em; text-transform: uppercase; color: var(--lak); }
.werkwijze span { font-size: 15px; line-height: 1.45; color: var(--lak-zacht); }
.over-foto { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--kalk-diep); }
.over-foto img { width: 100%; height: 100%; object-fit: cover; }

.werkgebied { padding: 0 0 104px; }
.werkgebied > .wrap { position: relative; }
.werkgebied > .wrap::before {
  content: ''; position: absolute; left: var(--gutter); right: var(--gutter); top: 0; height: 1px; background: var(--naad);
}
.werkgebied > .wrap::after {
  content: ''; position: absolute; left: calc(50% - var(--naad-breed) / 2); top: -9px; width: var(--naad-breed); height: 19px; background: var(--messing);
}
.wg-raster { display: grid; grid-template-columns: 340px 1fr; gap: 48px; align-items: start; padding-top: 64px; }
.plaatsen { margin-top: 24px; columns: 2; column-gap: 24px; border-top: 1px solid var(--naad); padding-top: 12px; }
.plaatsen li { display: flex; align-items: center; gap: 10px; padding: 5px 0; font-size: 16px; color: var(--lak); break-inside: avoid; }
.plaatsen li::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--messing); flex: none; }
.plaatsen li:first-child::before { border-radius: 0; background: var(--lak); }
.wg-kaart-wrap { display: grid; grid-template-columns: 1fr 180px; gap: var(--naad-breed); }
.kaart { height: 480px; background: var(--kalk-diep); z-index: 1; }
.wg-foto { position: relative; padding: 0; border: 0; overflow: hidden; cursor: zoom-in; background: var(--kalk-diep); }
.wg-foto img { width: 100%; height: 100%; object-fit: cover; }

.leaflet-container { font-family: var(--f-tekst); background: var(--kalk-diep); }
.leaflet-tile-pane { filter: grayscale(1) sepia(0.12) brightness(1.05) contrast(0.9); }
.kaart-punt { display: block; width: 12px; height: 12px; border-radius: 50%; background: var(--messing); box-shadow: 0 0 0 2px var(--papier); }
.kaart-tiel { display: grid; place-items: center; width: 40px; height: 40px; background: var(--lak); box-shadow: 0 0 0 2px var(--papier); }
.kaart-tiel img { width: 28px; }
.leaflet-tooltip.kaart-naam {
  background: transparent; border: 0; box-shadow: none; padding: 0 0 0 4px;
  font: 600 10.5px/1 var(--f-label); letter-spacing: 0.1em; text-transform: uppercase; color: var(--lak);
  text-shadow: 0 0 3px var(--papier), 0 0 3px var(--papier), 0 0 3px var(--papier);
}
.leaflet-tooltip.kaart-naam::before { display: none; }
.leaflet-tooltip.kaart-naam--top, .leaflet-tooltip.kaart-naam--bottom { padding: 0; }
.leaflet-tooltip.kaart-naam--left { padding: 0 4px 0 0; }
.leaflet-tooltip.kaart-naam--tiel { font-size: 13px; }
.leaflet-container .leaflet-control-attribution { font-size: 10px; background: var(--kalk-glas); color: var(--lak-zacht); }
.leaflet-container .leaflet-control-attribution a { color: var(--lak-zacht); }
.leaflet-bar { border: 1px solid var(--naad) !important; border-radius: 0 !important; box-shadow: none !important; }
.leaflet-bar a, .leaflet-bar a:hover { background: var(--papier); color: var(--lak); border-bottom-color: var(--naad); border-radius: 0 !important; }
.leaflet-bar a:hover { background: var(--kalk); }

/* ---------- reviews ---------- */
.reviews { background: var(--gb-licht); padding: 104px 0; }
.reviews .kop-label::after { background: var(--naad); }
.reviews-kop { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px 48px; flex-wrap: wrap; }
.reviews-kop h2 { font: 400 var(--h2)/1.06 var(--f-tekst); letter-spacing: -0.012em; }
.platform {
  display: flex; flex-direction: column; align-items: flex-end; gap: 4px;
  padding: 12px 0 12px 22px; border-left: 1px solid var(--gb);
  text-decoration: none; color: var(--lak);
}
.platform-naam { display: inline-flex; align-items: center; gap: 6px; font: 600 22px/1.1 var(--f-tekst); }
.platform-naam .ico-klein { color: var(--gb); }
.platform-score { display: inline-flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 600; }
.platform-aantal { font-size: 14px; color: var(--lak-zacht); }
.platform:hover .platform-naam { text-decoration: underline; text-underline-offset: 4px; }

.reviews-raster { margin-top: 44px; display: grid; grid-template-columns: 1fr 1fr; gap: var(--naad-breed); position: relative; }
.reviews-raster::before, .reviews-raster::after {
  content: ''; position: absolute; left: calc(50% - var(--naad-breed) / 2); width: var(--naad-breed); height: 9px; background: var(--messing);
}
.reviews-raster::before { top: -9px; }
.reviews-raster::after { bottom: -9px; }
.review {
  display: flex; flex-direction: column; gap: 14px;
  padding: 38px 42px 30px;
  background: var(--papier); color: var(--lak); text-decoration: none;
  box-shadow: inset 0 0 0 8px var(--papier), inset 0 0 0 9px var(--naad);
  transition: box-shadow .25s;
}
.review:hover { box-shadow: inset 0 0 0 8px var(--papier), inset 0 0 0 9px var(--messing); }
.review-top { display: flex; align-items: center; gap: 14px; }
.review-avatar { width: 46px; height: 46px; border-radius: 50%; flex: none; display: grid; place-items: center; background: var(--gb); color: var(--papier); font: 500 19px/1 var(--f-tekst); }
.review-wie { display: flex; flex-direction: column; }
.review-naam { font-weight: 600; font-size: 17px; line-height: 1.3; }
.review-datum { font-size: 14px; color: var(--lak-stil); }
.sterren--review { margin-left: auto; }
.sterren--review svg { width: 21px; height: 21px; }
.review-titel { font: 500 21px/1.3 var(--f-tekst); }
.review-tekst { font-size: 16.5px; line-height: 1.62; color: var(--lak-zacht); }
.review-bron {
  margin-top: auto; padding-top: 14px; border-top: 1px solid var(--naad);
  font: 600 12px/1 var(--f-label); letter-spacing: 0.17em; text-transform: uppercase; color: var(--gb);
}
.acties--midden { justify-content: center; margin-top: 46px; }

/* ---------- questions ---------- */
.vragen { padding: 104px 0; background: var(--kalk); }
.vragen-raster { display: grid; grid-template-columns: 4fr 7fr; gap: 24px 72px; }
.vragen-kop h2 { font: 400 var(--h2)/1.06 var(--f-tekst); letter-spacing: -0.012em; }
.vragen-lijst { border-top: 1px solid var(--naad); }
.vragen-lijst details { border-bottom: 1px solid var(--naad); }
.vragen-lijst summary {
  list-style: none; cursor: pointer; position: relative;
  padding: 22px 48px 22px 0; font: 400 21px/1.35 var(--f-tekst);
}
.vragen-lijst summary::-webkit-details-marker { display: none; }
.vragen-lijst summary::after {
  content: '+'; position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  font: 300 28px/1 var(--f-tekst); color: var(--messing);
}
.vragen-lijst details[open] summary::after { content: '–'; }
.vragen-lijst details p { padding: 0 48px 24px 0; color: var(--lak-zacht); max-width: 680px; }
.vragen-cta { grid-column: 2; margin-top: 18px; display: flex; align-items: center; flex-wrap: wrap; gap: 18px 28px; }
.vragen-cta p { font-size: 18px; }

/* ---------- contact ---------- */
.contact { background: var(--lak); color: var(--papier); padding: 104px 0; }
.contact-raster { display: grid; grid-template-columns: 5fr 6fr; gap: 80px; align-items: start; }
.contact h2 { font: 400 var(--h2)/1.06 var(--f-tekst); letter-spacing: -0.012em; }
.contact-intro { margin-top: 18px; max-width: 470px; font-size: 18px; color: var(--naad); }
.contact .paar { margin-top: 30px; }
.gegevens { margin-top: 40px; border-top: 1px solid var(--lak-zacht); }
.gegevens > div { display: grid; grid-template-columns: 180px 1fr; gap: 16px; padding: 15px 0; border-bottom: 1px solid var(--lak-zacht); }
.gegevens dt { padding-top: 4px; font: 600 12px/1.3 var(--f-label); letter-spacing: 0.17em; text-transform: uppercase; color: var(--messing-licht); }
.gegevens dd { font-size: 17px; }
.gegevens a { color: var(--papier); text-decoration-color: var(--lak-stil); text-underline-offset: 4px; }

.formulier {
  position: relative; padding: 44px 44px 40px;
  background: var(--papier); color: var(--lak);
  box-shadow: inset 0 0 0 8px var(--papier), inset 0 0 0 9px var(--naad);
}
.formulier-kop { font: 400 26px/1.2 var(--f-tekst); }
.veld { display: flex; flex-direction: column; gap: 7px; margin-top: 18px; }
.veld > span { font: 600 12px/1.2 var(--f-label); letter-spacing: 0.14em; text-transform: uppercase; color: var(--lak-zacht); }
.veld em { font-style: normal; font-family: var(--f-tekst); font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--lak-stil); }
.veld input, .veld textarea {
  width: 100%; padding: 13px 14px; border: 1px solid var(--naad); border-radius: 0;
  background: var(--kalk); color: var(--lak); font: 400 17px/1.4 var(--f-tekst);
  transition: border-color .2s, background-color .2s;
}
.veld textarea { resize: vertical; min-height: 130px; }
.veld input:focus, .veld textarea:focus { outline: 2px solid var(--messing); outline-offset: 0; background: var(--papier); border-color: var(--messing); }
.veld textarea::placeholder { color: var(--lak-stil); }
.hp { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.knop--vol { width: 100%; margin-top: 26px; min-height: 56px; font-size: 17px; }

/* ---------- footer ---------- */
.voet { background: var(--lak); color: var(--naad); padding: 76px 0 34px; border-top: 1px solid var(--lak-glans); }
.voet-raster { display: grid; grid-template-columns: 1.3fr 1fr 1.4fr 1fr; gap: 48px; }
.voet-lockup { display: inline-flex; flex-direction: column; align-items: center; justify-self: start; text-align: center; }
.voet-lockup img { width: 58px; }
.voet-naam { display: flex; flex-direction: column; align-items: center; margin-top: 12px; color: var(--papier); }
.voet-naam > span:first-child { font: 500 26px/1 var(--f-tekst); }
.voet-naam-sub { margin-top: 6px; font: 600 13px/1 var(--f-label); letter-spacing: 0.17em; margin-right: -0.17em; }
.voet-regel { align-self: stretch; height: 1px; background: var(--lak-zacht); margin: 12px 0 9px; }
.voet-slogan { font: 500 12px/1.2 var(--f-slogan); color: var(--naad); }
.voet-kop { margin-bottom: 14px; font: 600 12px/1 var(--f-label); letter-spacing: 0.17em; text-transform: uppercase; color: var(--messing-licht); }
.voet-kolom ul li { margin: 7px 0; font-size: 15px; }
.voet-kolom p { font-size: 15px; }
.voet a { color: var(--papier); text-decoration: none; }
.voet a:hover { text-decoration: underline; text-underline-offset: 3px; }
.voet-wa { display: inline-flex; align-items: center; gap: 8px; }
.voet-wa .ico { width: 17px; height: 17px; color: var(--wa); }
.voet-onder { margin-top: 52px; }
.voet-onder p { padding-top: 20px; border-top: 1px solid var(--lak-glans); font-size: 13px; color: var(--naad); }

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

/* ---------- viewer ---------- */
.kijker {
  position: fixed; inset: 0; z-index: 100;
  height: 100vh; height: 100dvh;
  display: flex; flex-direction: column;
  background: var(--lak); color: var(--papier);
}
.kijker[hidden] { display: none; }
.kijker-top { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 20px; }
.kijker-titel { font: 600 13px/1.2 var(--f-label); letter-spacing: 0.15em; text-transform: uppercase; color: var(--naad); }
.kijker-nr { margin-left: 10px; color: var(--messing-licht); }
.kijker-sluit {
  width: 46px; height: 46px; display: grid; place-items: center;
  background: none; border: 1px solid var(--lak-zacht); color: var(--papier); cursor: pointer;
  font: 300 30px/1 var(--f-tekst);
}
.kijker-sluit:hover { border-color: var(--papier); }
.kijker-podium { position: relative; flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; gap: 18px; padding: 0 20px; }
.kijker-figuur { height: 100%; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
#kijker-img { max-width: 100%; max-height: calc(100% - 56px); width: auto; height: auto; object-fit: contain; touch-action: pan-y; user-select: none; -webkit-user-drag: none; }
.kijker-label { flex: none; margin-top: 14px; display: block; text-align: center; font: 500 22px/1.2 var(--f-tekst); }
.kijker-tag { margin-left: 6px; padding: 5px 8px 4px; background: var(--papier); color: var(--lak); font: 600 11px/1 var(--f-label); letter-spacing: 0.17em; text-transform: uppercase; }
.kijker-tag:empty { display: none; }
.kijker-pijl {
  flex: none; width: 54px; height: 54px; display: grid; place-items: center;
  background: none; border: 1px solid var(--lak-zacht); color: var(--papier); cursor: pointer;
}
.kijker-pijl:hover { border-color: var(--papier); }
.kijker-pijl svg { width: 22px; height: 22px; }
.kijker-vorige svg { transform: rotate(180deg); }
.kijker-strip { flex: none; display: flex; gap: var(--naad-breed); justify-content: safe center; padding: 14px 20px 12px; overflow-x: auto; scrollbar-width: none; }
.kijker-strip button { flex: none; width: 68px; height: 50px; padding: 0; border: 0; overflow: hidden; cursor: pointer; opacity: 0.45; background: var(--lak-zacht); transition: opacity .2s; }
.kijker-strip button:hover { opacity: 0.8; }
.kijker-strip button[aria-current="true"] { opacity: 1; box-shadow: inset 0 0 0 2px var(--messing-licht); }
.kijker-strip img { width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.kijker-cta {
  flex: none; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 12px 24px;
  padding: 14px 20px calc(14px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--lak-zacht);
}
.kijker-cta p { font: 400 21px/1.2 var(--f-tekst); }
.kijker-cta .paar > a { min-height: 48px; }
body.kijker-open { overflow: hidden; }

/* =========================================================
   Tablet and narrow desktop
   ========================================================= */
@media (max-width: 1099px) {
  .kop-zijde { display: none; }
  .kop-nav { grid-template-columns: 1fr auto; height: 68px; }
  .kop.is-vast .kop-nav { height: 64px; }
  .kop-merk { justify-self: start; }
  .kop-mobiel { display: flex; align-items: center; gap: 8px; justify-self: end; }
  .kop-mobiel-tel {
    display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px;
    color: var(--lak); text-decoration: none; font: 600 15px/1 var(--f-tekst);
  }
  .kop-menuknop {
    display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 16px;
    background: var(--lak); color: var(--papier); border: 0; cursor: pointer;
    font: 600 13px/1 var(--f-label); letter-spacing: 0.15em; text-transform: uppercase;
  }
  .hamburger { position: relative; width: 16px; height: 10px; border-top: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; }
  .hamburger::after { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 1.5px; margin-top: -0.75px; background: currentColor; }
  .menu-paneel:not([hidden]) {
    display: flex; flex-direction: column;
    position: absolute; top: 100%; left: 0; right: 0;
    padding: 8px var(--gutter) 18px;
    background: var(--papier); border-bottom: 1px solid var(--naad); box-shadow: 0 20px 30px -20px var(--scrim-zacht);
    max-height: calc(100vh - 64px); overflow-y: auto;
  }
  .menu-paneel > a, .menu-diensten summary {
    display: flex; align-items: center; min-height: 50px; border-bottom: 1px solid var(--naad);
    font: 500 18px/1.2 var(--f-tekst); color: var(--lak); text-decoration: none; cursor: pointer;
  }
  .menu-diensten summary { list-style: none; justify-content: space-between; }
  .menu-diensten summary::-webkit-details-marker { display: none; }
  .menu-diensten summary::after { content: '+'; color: var(--messing); font-size: 24px; font-weight: 300; }
  .menu-diensten[open] summary::after { content: '–'; }
  .menu-diensten ul { padding: 4px 0 8px 16px; border-bottom: 1px solid var(--naad); }
  .menu-diensten a { display: flex; align-items: center; min-height: 44px; color: var(--lak-zacht); text-decoration: none; font-size: 17px; }

  .kennismaken { position: static; margin-top: 26px; }
  .dienst-raster, .dienst-raster--om { gap: 48px; }
  .hoofdkaart-kopij, .hoofdkaart-lijst { padding-left: 30px; padding-right: 30px; }
  .dk-lijst a { font-size: 16px; padding: 0 16px; }
  .voet-raster { grid-template-columns: 1fr 1fr; }
  .wg-raster { grid-template-columns: 1fr; }
  .contact-raster { gap: 48px; }
}

@media (max-width: 899px) {
  .voorstellen-raster, .over-raster, .joost-raster, .contact-raster, .vragen-raster { grid-template-columns: 1fr; gap: 40px; }
  .vragen-cta { grid-column: auto; }
  .dienst-raster, .dienst-raster--om, .dienst-raster--smal { grid-template-columns: 1fr; }
  .dienst-raster--smal .dienst-beeld { max-width: none; }
  .dienstenkaart { grid-template-columns: 1fr; }
  .dk-label { padding: 14px 20px; }
  .dk-lijst { grid-template-columns: 1fr 1fr; }
  .dk-lijst li + li { border-left: 0; }
  .dk-lijst li { border-top: 1px solid var(--naad); }
  .dk-lijst li:nth-child(even) { border-left: 1px solid var(--naad); }
  .dk-lijst a { height: 64px; }
  .hoofdkaart-body { grid-template-columns: 1fr; }
  .hoofdkaart-lijst { border-left: 0; border-top: 1px solid var(--naad); }
  .portret { max-width: 520px; }
  .joost-foto { max-width: 520px; }
}

/* =========================================================
   Phone
   ========================================================= */
@media (max-width: 767px) {
  :root { --kop: clamp(29px, 8.4vw, 40px); --h2: clamp(28px, 7.6vw, 34px); --naad-breed: 2px; }
  html { scroll-padding-top: 70px; }
  body { font-size: 16.5px; }

  /* phone tells less: heading, first sentence, photo, buttons */
  .rest, .tel-weg { display: none !important; }

  /* header and sticky bar wait for the trust strip */
  .kop { transform: translateY(-105%); background: var(--kalk-glas); box-shadow: 0 1px 0 var(--naad); pointer-events: none; }
  .kop.toon { transform: none; pointer-events: auto; }
  .kop .kop-merk { opacity: 1; visibility: visible; }
  .kop-nav, .kop.is-vast .kop-nav { height: 60px; gap: 10px; }
  .kop-merk img { width: 32px; }
  .kop-merk-naam > span:first-child { font-size: 15.5px; }
  .kop-merk-sub { font-size: 9.5px; }
  .kop-mobiel-tel { padding: 0 10px; }
  .kop-mobiel-tel span { display: none; }
  .kop-mobiel-tel .ico { width: 22px; height: 22px; }
  .kop-menuknop { padding: 0 14px; }

  .plakbalk {
    display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 55;
    padding: 0 0 env(safe-area-inset-bottom); background: var(--lak);
    transform: translateY(110%); transition: transform .4s cubic-bezier(.2, .7, .2, 1);
  }
  .plakbalk.toon { transform: none; }
  .paar--vol { display: flex; width: 100%; }
  .paar--vol > a { flex: 1; min-height: 58px; padding: 0 12px; font-size: 16.5px; }
  .paar--vol .paar-bel { background: var(--lak); }
  .paar--vol .paar-bel::before, .paar--vol .paar-bel::after { display: none; }

  /* fold */
  .vouw-binnen { padding: 26px 16px 30px; }
  .lockup-merk { width: 60px; }
  .lockup-slogan { font-size: calc(var(--kop) * 0.45); }
  .vouw-kop { margin-top: 26px; }
  .vouw-sub { font-size: 16.5px; margin-top: 14px; }
  .paar--vouw { display: flex; width: 100%; margin-top: 24px; }
  .paar--vouw > a { flex: 1; padding: 0 10px; font-size: 15.5px; }
  .vouw-cijfer { flex-wrap: wrap; justify-content: center; gap: 4px 8px; font-size: 13.5px; }
  .kennismaken { margin-top: 22px; }
  .kennismaken-foto { width: 58px; height: 58px; }
  .kennismaken-naam { font-size: 44px; }
  .vouw-band-wrap { padding: 0; }
  .vouw-band { height: 300px; }

  /* trust strip: two chips, fewest words, under 160px */
  .vertrouwen { padding-top: 24px; }
  .vertrouwen .wrap { padding: 0 16px; }
  .staal { flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 5px; min-height: 0; padding: 13px 14px 12px; }
  .staal-merk, .staal-uitleg { display: none; }
  .staal-feit { flex-direction: column; gap: 4px; }
  .staal-woord { font-size: 12px; }
  .staal-cijfer { font-size: 36px; }
  .staal-platform { font-size: 13px; }
  .staal-aantal { display: block; margin-left: 0; }
  .staal-bron .sterren svg { width: 14px; height: 14px; }

  /* sections */
  .kop-label { font-size: 12px; margin-bottom: 14px; gap: 12px; }
  .voorstellen { padding-top: 64px; }
  .portret-tekst { left: 20px; right: 20px; bottom: 20px; }
  .pt-1 { font-size: 18px; }
  .pt-2 { font-size: 92px; }
  .pt-3 { font-size: 14px; }
  .feit { grid-template-columns: 96px 1fr; gap: 16px; padding: 16px 0; }
  .feit-foto { aspect-ratio: 1 / 1; }
  .feit h3 { font-size: 20px; }
  .feit p { font-size: 15.5px; margin-top: 4px; }
  .dienstenkaart { margin: 40px 0 -36px; }
  .dk-label { padding: 12px 16px; }
  .dk-lijst { grid-template-columns: 1fr; }
  .dk-lijst li:nth-child(even) { border-left: 0; }
  .dk-lijst a { height: 44px; padding: 0 16px; font-size: 16px; }

  .dienst { padding: 64px 0; }
  .dienst--hoofd { padding-top: 92px; }
  .dienst--spuit { padding: 64px 0; }
  .dienst-raster { display: flex; flex-direction: column; align-items: stretch; gap: 0; }
  .dienst-tekst { display: contents; }
  .dienst-raster > .dienst-beeld { order: 3; margin-top: 22px; }
  .dienst-tekst > .kop-label { order: 1; }
  .dienst-tekst > .dienst-kop { order: 2; }
  .dienst-tekst > .acties { order: 4; margin-top: 22px; }
  .acties { gap: 6px 22px; margin-top: 24px; }
  .knop { min-height: 50px; padding: 0 16px; font-size: 15.5px; }
  .knop-stil { font-size: 15.5px; gap: 6px; }
  .acties { gap: 6px 18px; }

  .hoofdkaart { margin-top: 22px; box-shadow: 0 0 0 5px var(--kalk-diep), 0 0 0 6px var(--naad); }
  .foto--hoofd { aspect-ratio: 4 / 3; }
  .hoofdkaart .duimen { padding: 12px 14px; }
  .hoofdkaart-kopij { padding: 18px 16px; }
  .acties--kaart { padding: 14px 12px; }
  .voorgangers { gap: 12px; }
  .avatar { width: 36px; height: 36px; margin-left: -10px; font-size: 14px; }
  .voorgangers-regel { font-size: 17px; }
  .voorgangers-bron { font-size: 13px; }

  .foto-label { padding: 56px 14px 14px 14px; gap: 4px; }
  .foto .stempel { top: 10px; right: 10px; bottom: auto; }
  .project .stempel { top: auto; bottom: 10px; right: 10px; }
  .fl-plek { font-size: 17px; gap: 6px; }
  .fl-link { font-size: 13px; }
  .stempel { right: 12px; bottom: 14px; gap: 6px; }
  .stempel img { width: 22px; }
  .stempel-naam { font-size: 10px; }
  .stempel-naam span { font-size: 7.5px; }
  .helft-tag { top: 10px; left: 10px; font-size: 10.5px; padding: 5px 8px 4px; }
  .duimen { margin-top: 10px; }
  .duim { width: 54px; height: 54px; }
  .duim-tel { display: none; }

  .band { padding: 36px 0; }
  .band-binnen { flex-direction: column; align-items: stretch; }
  .band .paar { display: flex; width: 100%; }
  .band .paar > a { flex: 1; padding: 0 10px; }
  .band--klus { padding: 48px 0; }
  .band--klus .knop { align-self: flex-start; }

  .projecten { padding: 64px 0 56px; }
  .carrousel { margin-top: 30px; }
  .carrousel-spoor { gap: 16px; padding: 0 16px; animation-duration: 60s; }
  @keyframes rol { to { transform: translateX(calc(-50% - 8px)); } }
  .project { width: 78vw; max-width: 330px; }
  .project-plek { font-size: 19px; padding: 16px 18px 0; }
  .project-dienst { padding: 6px 18px 0; }
  .project-wat { padding: 8px 18px 20px; font-size: 15px; }

  .joost { padding: 64px 0; }
  .joost-raster { gap: 28px; }
  .joost-foto { box-shadow: 0 0 0 5px var(--kalk), 0 0 0 6px var(--naad); }
  .joost-alinea { font-size: 17px; margin-top: 14px; }
  .joost-hand { font-size: 70px; padding-left: 14px; }

  .over { padding: 64px 0 44px; }
  .over-raster { display: flex; flex-direction: column; gap: 0; }
  .over-tekst, .wg-tekst { display: contents; }
  .over-tekst > .kop-label, .wg-tekst > .kop-label { order: 1; }
  .over-tekst > h2, .wg-tekst > h2 { order: 2; }
  .over-alinea, .wg-alinea { order: 3; }
  .over-foto, .wg-kaart-wrap { order: 4; margin-top: 22px; }
  .over-tekst > .acties, .wg-tekst > .acties { order: 5; }
  .over-alinea, .wg-alinea { font-size: 16.5px; margin-top: 14px; }
  .werkgebied { padding-bottom: 64px; }
  .wg-raster { display: flex; flex-direction: column; padding-top: 44px; gap: 0; }
  .wg-kaart-wrap { grid-template-columns: 1fr; }
  .kaart { height: 320px; }
  .wg-foto { height: 170px; }
  .wg-foto img { object-position: 50% 30%; }
  .leaflet-tooltip.kaart-naam { font-size: 9.5px; letter-spacing: 0.06em; }

  .reviews { padding: 64px 0; }
  .platform { align-items: flex-start; border-left: 0; border-top: 1px solid var(--gb); padding: 12px 0 0; }
  .reviews-raster { grid-template-columns: 1fr; margin-top: 30px; }
  .reviews-raster::before, .reviews-raster::after { display: none; }
  .review { padding: 26px 22px 22px; }
  .review-titel { font-size: 19px; }
  .review-tekst { font-size: 16px; }
  .sterren--review svg { width: 18px; height: 18px; }
  .review-naam { font-size: 16px; }
  .review-top { flex-wrap: wrap; row-gap: 8px; }
  .sterren--review { order: 3; flex-basis: calc(100% - 60px); margin-left: 60px; }

  .vragen { padding: 64px 0; }
  .vragen-lijst summary { font-size: 18px; padding: 18px 40px 18px 0; }
  .vragen-lijst details p { padding-right: 0; }
  .vragen-cta .paar { display: flex; width: 100%; }
  .vragen-cta .paar > a { flex: 1; padding: 0 10px; }

  .contact { padding: 64px 0; }
  .contact .paar { display: flex; width: 100%; }
  .contact .paar > a { flex: 1; padding: 0 10px; }
  .gegevens > div { grid-template-columns: 1fr; gap: 4px; }
  .formulier { padding: 28px 22px 26px; }

  .voet { padding: 56px 0 calc(96px + env(safe-area-inset-bottom)); }
  .voet-raster { grid-template-columns: 1fr; gap: 32px; }

  .kijker-top { padding: 8px 12px; }
  .kijker-podium { padding: 0; gap: 0; }
  .kijker-pijl { position: absolute; top: calc(50% - 50px); z-index: 2; width: 44px; height: 44px; background: var(--scrim-zacht); border-color: transparent; }
  .kijker-vorige { left: 8px; }
  .kijker-volgende { right: 8px; }
  #kijker-img { max-height: calc(100% - 48px); }
  .kijker-label { font-size: 18px; margin-top: 10px; padding: 0 12px; }
  .kijker-strip { padding: 10px 12px 8px; justify-content: flex-start; }
  .kijker-strip button { width: 52px; height: 40px; }
  .kijker-cta { padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); gap: 8px; }
  .kijker-cta p { font-size: 17px; width: 100%; text-align: center; }
  .kijker-cta .paar { display: flex; width: 100%; }
  .kijker-cta .paar > a { flex: 1; min-height: 46px; padding: 0 10px; }
  .kijker-cta .paar-bel::before, .kijker-cta .paar-bel::after { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .carrousel { overflow-x: auto; }
  .carrousel-spoor { animation: none; }
  .carrousel-spoor > [aria-hidden="true"] { display: none; }
  *, *::before, *::after { transition-duration: 0.01ms !important; }
}


/* ============ NO BRASS TICK ON THE SEAMS — Sem, 2026-11-02: "Ik vind het middelste "bruine verticale bar" tussen de
   buttons niet mooi: [Image #2], ik wil dit overal verwijderd zien, ik zie het ook tussen andere elementen." The seam itself (the
   thin gap) stays; only the brass ticks above and below it go, at every width: the call pair (fold, bands, viewer), the
   trust strip, the before/after halves, the area line, the reviews grid. Before: style.before-naad.css. ============ */
.paar-bel::before, .paar-bel::after,
.stalen::before, .stalen::after,
.helften::before, .helften::after,
.werkgebied > .wrap::after,
.reviews-raster::before, .reviews-raster::after { display: none; }


/* ============ EIGENAAR — picked 1 of ronde/eigenaar.py (onder de knoppen: in het midden, onder de knoppen en de beoordeling). Written in by ronde-varianten.py --vast; %V% -> :root:root. ============ */
@media (min-width: 768px) {
  :root:root .kennismaken { position: static; margin-top: 26px; }
}


/* ============ BEOORDELING — picked 2 of ronde/cijfer.py (plaatje: direct onder de knoppen, even breed, sterren boven de woorden (zonder achtergrond en rand, Sem 11-02)). Written in by ronde-varianten.py --vast; %V% -> :root:root. ============ */
.vouw-actie { display: contents; }

:root:root .vouw-actie { display: inline-grid; gap: var(--naad-breed); margin-top: 26px; }
:root:root .vouw-actie > .paar--vouw { margin-top: 0; }
:root:root .vouw-cijfer {
  margin-top: 0; flex-direction: column; gap: 6px; padding: 13px 16px 12px; font-size: 15px;
}
:root:root .vouw-cijfer .sterren { gap: 3px; }
:root:root .vouw-cijfer .sterren svg { width: 18px; height: 18px; }
:root:root .vouw-cijfer > span:last-child > strong:first-child { font-size: 1.2em; }
@media (max-width: 767px) {
  :root:root .vouw-actie { display: grid; width: 100%; margin-top: 24px; }
  :root:root .vouw-cijfer { font-size: 14px; padding: 11px 12px 10px; }
  :root:root .vouw-cijfer .sterren svg { width: 16px; height: 16px; }
}


/* ============ NADRUK — picked 1 of ronde/nadruk.py (grote sterren: de sterren veel groter, de woorden zoals nu). Written in by ronde-varianten.py --vast; %V% -> :root:root. ============ */
:root:root .vouw-cijfer { gap: 8px; }
:root:root .vouw-cijfer .sterren { gap: 5px; }
:root:root .vouw-cijfer .sterren svg { width: 28px; height: 28px; }
@media (max-width: 767px) {
  :root:root .vouw-cijfer { gap: 7px; }
  :root:root .vouw-cijfer .sterren { gap: 4px; }
  :root:root .vouw-cijfer .sterren svg { width: 24px; height: 24px; }
}


/* ============ JOOST ON THE PHOTO, THE RATING IN THE MIDDLE — by hand, Sem, 2026-11-02, the moment Naast elkaar 2 went
   in: "Voer dit uit: [Image #8] maar dan heb ik gelijk weer een nieuwe aanpassing: - Ik wil dat de rating wordt
   gecentreerd en dat "ontmoet de eigenaar" element boven op de afbeelding wordt geplaats, ook in het midden."
   Naast elkaar 2 (locked by ronde-varianten.py --vast, before: index/style.before-nadruk-naast) is taken out again: this
   block replaces its block. The rating stands in the middle under the call pair again, as wide as the pair (Beoordeling
   2 + Nadruk 1); Joost goes onto the big photo, on a light card, in the middle, 24 px under the photo's top (16 on the
   phone). All widths, 320 to 1920. The wrapper <div class="vouw-onder"> stays in the HTML, display: contents (no effect).
   Before: style.before-opfoto.css. ============ */
.vouw-onder { display: contents; }

:root:root .kennismaken {
  position: absolute; z-index: 3; top: calc(100% + 24px); right: 0; bottom: auto; left: 0;
  width: max-content; max-width: calc(100% - 2 * var(--gutter)); margin: 0 auto;
  gap: 16px; padding: 12px 26px 12px 12px;
  background: var(--papier); box-shadow: 0 16px 34px -16px var(--scrim);
}
@media (max-width: 767px) {
  :root:root .kennismaken { top: calc(100% + 16px); gap: 14px; padding: 10px 20px 10px 10px; }
}
/* below 360 the card smaller, so the link stays on one line */
@media (max-width: 359px) {
  :root:root .kennismaken { gap: 10px; padding: 8px 14px 8px 8px; }
  :root:root .kennismaken-foto { width: 50px; height: 50px; }
  :root:root .kennismaken-naam { font-size: 40px; }
  :root:root .kennismaken-link { font-size: 13px; }
}

/* ============ JOOST CLEAR OF THE LINK — repair, Sem, 2026-11-02, on bak3-l404-b, a crop of the owner card: "Ik vind dat
   het op dit moment de cursief geschreven "joost" de link daaronder overlapt, dit moet gefixed worden. [Image #13]"
   The tail of the hand-written J ran 5 to 8 px into "Maak kennis met de eigenaar". The link now stands 18 px under the
   name instead of 6, at all widths (320–1920). Before: style.before-joost.css. ============ */
.kennismaken-link { margin-top: 18px; }


/* ============ TELEFOON — picked 2 of ronde/telefoon.py (17 px: twee stappen groter). Written in by ronde-varianten.py --vast; %V% -> :root:root. ============ */
:root:root .kop-tel { white-space: nowrap; }
@media (max-width: 1199px) {
  :root:root .kop-zijde { gap: 20px; }
}

:root:root .kop-tel { font-size: 17px; gap: 10px; }
:root:root .kop-tel .ico { width: 20px; height: 20px; }


/* ============ STROOK OP DE FOTO — picked 1 of ronde/overlap.py (half op de foto: met een negatieve marge omhoog, half over de onderrand van de foto). Written in by ronde-varianten.py --vast; %V% -> :root:root. ============ */
:root:root .vertrouwen { position: relative; z-index: 4; padding-top: 0; }
:root:root .stalen { box-shadow: 0 12px 30px -16px var(--scrim); }
@media (min-width: 768px) {
  :root:root .stalen { margin-left: clamp(20px, 2.8vw, 40px); margin-right: clamp(20px, 2.8vw, 40px); }
  :root:root .staal { gap: 20px; padding-left: 26px; padding-right: 26px; }
}

:root:root .stalen { margin-top: -56px; }


/* ============ EIGENAAR OMHOOG — picked 1 of ronde/kaart.py (half over de rand: een negatieve marge omhoog, half boven en half op de foto; de foto zakt mee). Written in by ronde-varianten.py --vast; %V% -> :root:root. ============ */
:root:root .kennismaken { top: 100%; transform: translateY(-50%); }
:root:root .vouw-binnen { padding-bottom: calc(34px + 52px); }
@media (max-width: 767px) {
  :root:root .vouw-binnen { padding-bottom: calc(30px + 46px); }
}
@media (max-width: 359px) {
  :root:root .vouw-binnen { padding-bottom: calc(30px + 42px); }
}


/* ============ LEGE KOLOM — picked 1 of ronde/kolom.py (klantoordeel: een licht vlak met sterren en een echte review, onder de knoppen). Written in by ronde-varianten.py --vast; %V% -> :root:root. ============ */
.kolom { display: none; }

@media (min-width: 900px) {
  :root:root .kolom--oordeel {
    display: flex; flex-direction: column; align-items: flex-start; gap: 8px;
    margin-top: 44px; padding: 24px 28px 22px;
    background: var(--papier); box-shadow: inset 0 0 0 1px var(--naad);
    color: var(--lak); text-decoration: none;
  }
  :root:root .kolom--oordeel .sterren { gap: 3px; margin-bottom: 4px; }
  :root:root .kolom--oordeel .sterren svg { width: 18px; height: 18px; }
  :root:root .kolom-titel { font: 600 18px/1.3 var(--f-tekst); }
  :root:root .kolom-citaat { font: 300 var(--h3)/1.4 var(--f-tekst); }
  :root:root .kolom-wie { margin-top: 6px; font-size: 14px; color: var(--lak-stil); }
  :root:root .kolom-wie strong { font-weight: 600; color: var(--lak); margin-right: 4px; }
  :root:root .kolom--oordeel:hover .kolom-wie { text-decoration: underline; text-decoration-color: var(--messing); text-underline-offset: 4px; }
}

/* ============ STREEPJE IN ELKE LIJST — repair, Sem, 2026-11-03: "het streepje mist hier, en ook bij de andere soortelijke
   lijst." The brass dash before each item in the service lists was a 1px fill halfway down the item; with the browser
   zoomed out (90%) it fell between two screen pixels and some dashes vanished. Drawn as a 1px top border it always keeps
   at least one screen pixel. Same place and colour at 100%. All widths where the lists show (768 px and up; the
   Binnenschilderwerk card's list on every width). Before: style.before-streepje.css. ============ */
.dienst-lijst li::before, .hoofdkaart-lijst li::before { height: 0; background: none; border-top: 1px solid var(--messing); }


/* ============ WERKWIJZE — picked 3 of ronde/werkwijze.py (genummerd: geen blokjes, drie regels onder elkaar met een groot messing cijfer). Written in by ronde-varianten.py --vast; %V% -> :root:root. ============ */
:root:root .werkwijze { display: block; counter-reset: werkwijze; border-top: 1px solid var(--naad); }
:root:root .werkwijze li {
  counter-increment: werkwijze;
  display: grid; grid-template-columns: 56px 1fr; row-gap: 4px; align-items: baseline;
  padding: 18px 0 19px; background: none; border-bottom: 1px solid var(--naad);
}
:root:root .werkwijze li::before {
  content: counter(werkwijze); grid-row: 1 / 3; align-self: start;
  font: 300 44px/1 var(--f-tekst); color: var(--messing);
}
:root:root .werkwijze strong { font: 600 19px/1.3 var(--f-tekst); letter-spacing: 0; text-transform: none; color: var(--lak); }
:root:root .werkwijze span { font-size: 16.5px; line-height: 1.5; color: var(--lak-zacht); }


/* ============ KLANTENOORDELEN-KAART — picked 3 of ronde/platform.py (groot cijfer: een papieren kaart als het witte vlak in de strook, 5 / 5 groot). Written in by ronde-varianten.py --vast; %V% -> :root:root. ============ */
:root:root .platform {
  display: grid; grid-template-columns: auto auto; column-gap: 22px; row-gap: 4px; align-items: center;
  grid-template-areas: "cijfer sterren" "cijfer naam" "cijfer aantal";
  padding: 20px 30px 20px 28px; border: 0;
  background: var(--papier); box-shadow: inset 0 0 0 1px var(--naad);
}
:root:root .platform-score { display: contents; }
:root:root .platform-cijfer { grid-area: cijfer; font: 300 56px/1 var(--f-tekst); letter-spacing: -0.02em; white-space: nowrap; }
:root:root .platform .sterren { grid-area: sterren; }
:root:root .platform .sterren svg { width: 17px; height: 17px; }
:root:root .platform-naam { grid-area: naam; font-size: 18px; }
:root:root .platform-aantal { grid-area: aantal; }
@media (max-width: 767px) {
  :root:root .platform { padding: 16px 24px 16px 22px; column-gap: 18px; }
  :root:root .platform-cijfer { font-size: 46px; }
}
@media (max-width: 359px) {
  :root:root .platform { padding: 14px 18px; column-gap: 14px; }
  :root:root .platform-cijfer { font-size: 38px; }
  :root:root .platform-naam { font-size: 16px; }
}


/* ============ RATING-TEKST — picked 1 of ronde/rating.py (17 px: een stap groter, het witte vlak even groot mee). Written in by ronde-varianten.py --vast; %V% -> :root:root. ============ */
:root:root .vouw-cijfer > span:last-child { text-align: center; line-height: 1.4; }
:root:root .vouw-cijfer .stip { display: none; }
:root:root .vouw-cijfer .ko::after { content: '\A'; white-space: pre; }

:root:root .staal--papier .staal-bron { gap: 8px; }
:root:root .staal--papier .staal-bron .sterren { gap: 5px; }
:root:root .staal--papier .staal-bron .sterren svg { width: 28px; height: 28px; }
:root:root .staal-platform { line-height: 1.35; }
:root:root .staal-aantal { display: block; margin-left: 0; }
@media (max-width: 1279px) {
  :root:root .staal--papier .staal-actie { display: none; }
}
@media (min-width: 768px) and (max-width: 899px) {
  :root:root .staal--papier { flex-direction: column; align-items: flex-start; justify-content: center; gap: 10px; }
}
@media (max-width: 767px) {
  :root:root .staal--papier .staal-bron { gap: 6px; }
  :root:root .staal--papier .staal-bron .sterren { gap: 3px; }
  :root:root .staal--papier .staal-bron .sterren svg { width: 24px; height: 24px; }
}

:root:root .vouw-cijfer, :root:root .staal-platform { font-size: 17px; }
:root:root .stalen { margin-top: -59px; }
@media (min-width: 768px) and (max-width: 899px) {
  :root:root .stalen { margin-top: -92px; }
}
@media (max-width: 767px) {
  :root:root .vouw-cijfer, :root:root .staal-platform { font-size: 15px; }
  :root:root .stalen { margin-top: -68px; }
}
@media (max-width: 359px) {
  :root:root .stalen { margin-top: -67px; }
}

@media (max-width: 359px) {
  :root:root .staal--papier { padding-left: 12px; padding-right: 12px; }
  :root:root .staal--papier .staal-bron .sterren { gap: 2px; }
  :root:root .staal--papier .staal-bron .sterren svg { width: 20px; height: 20px; }
  :root:root .staal-platform { font-size: 15px; }
}


/* ============ PHONE: NO SUB LINE, LOWER PHOTO — responsive, Sem, 2026-11-03, on bak3-l404-b: "Oke, dit zijn de
   aanpassingen voor mobiel: - Ik wil dat de .vouw-sub tekst wordt verborgen - De .vouw-band beeld mag verandert worden
   naar een height van 200px". Below 768 px only (320–767); from 768 up nothing changes. Before:
   style.before-mobiel-sub-band.css. Then 175 px (Sem, 2026-11-03: "Ik wil dat de .vouw-band naar 175px wordt gezet op
   mobiel"; before: style.before-band-175.css). The sub line back (Sem, 2026-11-03: "ik wil dat display: none op vouw-sub
   weggaat"; before: style.before-sub-omgedraaid.css), and hidden again (Sem, 2026-11-03: "vouw-sub mag weer op display:
   none"; before: style.before-sub-naam.css). ============ */
@media (max-width: 767px) {
  .vouw-sub { display: none; }
  .vouw-band { height: 175px; }
}


/* ============ PHONE: THE RATING IN THE MIDDLE, LARGER — responsive, Sem, 2026-11-03, on bak3-l404-b, a crop of the
   rating under the call pair: "Op mobiel: - dit review element moet verticaal beter worden gecentreerd tussen het
   bovenste en onderste andere element: [Image #28] en de text moet groter worden gemaakt". Below 768 px only (320–767).
   The words 15 → 17 px (5 / 5 at 20), as on the desktop. The rating's ink stood 16 px under the call pair and 44 px
   above the owner card; 15 px more room above it and 15 px less under the fold's text make both about 31, so the card,
   the photo and everything under them move only by the larger words. Before: style.before-review-midden.css.
   ============ */
@media (max-width: 767px) {
  :root:root .vouw-cijfer { font-size: 17px; padding-top: calc(11px + 15px); }
  :root:root .vouw-binnen { padding-bottom: calc(30px + 46px - 15px); }
}
@media (max-width: 359px) {
  :root:root .vouw-binnen { padding-bottom: calc(30px + 42px - 15px); }
}


/* ============ PHONE: THE TWO CHIPS UNDER EACH OTHER — responsive, Sem, 2026-11-03, on bak3-l404-b, a crop of the
   trust strip on the phone: "Deze moeten op mobiel onder elkaar komen: [Image #31]". Below 768 px only (320–767).
   The black "Sinds 2010" chip on top, the white 5 / 5 chip under it, each the full width, butted at the 3 px seam.
   Now that each has the width, its words stand in a row: SINDS beside 2010; 5 / 5 left, the stars with Klantenoordelen
   and 18 beoordelingen beside it. The strip stays half on the photo (Strook op de foto 1): its negative margin is half
   its new height. Before: style.before-stalen-onder.css. ============ */
@media (max-width: 767px) {
  :root:root .stalen { grid-template-columns: 1fr; }
  :root:root .staal { flex-direction: row; align-items: center; gap: 18px; padding: 14px 18px; }
  :root:root .staal--lak .staal-feit { flex-direction: row; align-items: baseline; gap: 12px; }
  :root:root .staal--papier .staal-cijfer { font-size: 40px; }
  :root:root .stalen { margin-top: -83px; }
}
@media (max-width: 359px) {
  :root:root .staal { gap: 14px; padding: 12px 14px; }
  :root:root .stalen { margin-top: -77px; }
}


/* ============ PHONE: THE PHOTO UP BEHIND THE RATING — responsive, Sem, 2026-11-03, on bak3-l404-b, the phone's fold with
   arrows from the rating's words: "Deze aanpassingen zijn voor op de mobiel: - Ik wil dat de foto een hogere hoogte
   krijgt, en eerder op de pagina begint, gedeeltelijk achter de ratings." Below 768 px only (320–767).
   The photo's top goes 120 px up, to the top of the rating's words (the stars stay on the ground); its foot stays where
   it was, so it is 175 + 120 = 295 px tall and everything under it (Joost's card, the strip, the page) does not move.
   The fold's text and the card stand in front of the photo. Before: style.before-foto-omhoog.css. ============ */
@media (max-width: 767px) {
  :root:root .vouw-binnen { z-index: 1; }
  :root:root .vouw-band-wrap { position: relative; margin-top: -120px; }
  :root:root .vouw-band { height: calc(175px + 120px); }
}


/* ============ VERLOOP — picked 2 of ronde/verloop.py (midden: het verloop loopt door de woorden heen, de foto vol bij Joost). Written in by ronde-varianten.py --vast; %V% -> :root:root. ============ */
@media (max-width: 767px) {
  :root:root .vouw-band { -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,0.000) 0px, rgba(0,0,0,0.024) 14px, rgba(0,0,0,0.095) 28px, rgba(0,0,0,0.206) 42px, rgba(0,0,0,0.345) 56px, rgba(0,0,0,0.500) 70px, rgba(0,0,0,0.655) 84px, rgba(0,0,0,0.794) 98px, rgba(0,0,0,0.905) 112px, rgba(0,0,0,0.976) 126px, rgba(0,0,0,1.000) 140px); mask-image: linear-gradient(to bottom, rgba(0,0,0,0.000) 0px, rgba(0,0,0,0.024) 14px, rgba(0,0,0,0.095) 28px, rgba(0,0,0,0.206) 42px, rgba(0,0,0,0.345) 56px, rgba(0,0,0,0.500) 70px, rgba(0,0,0,0.655) 84px, rgba(0,0,0,0.794) 98px, rgba(0,0,0,0.905) 112px, rgba(0,0,0,0.976) 126px, rgba(0,0,0,1.000) 140px); }
}


/* ============ GELEIDELIJKHEID — picked 3 of ronde/geleidelijk.py (heel geleidelijk: de foto vol na 260 px, pas achter de strook). Written in by ronde-varianten.py --vast; %V% -> :root:root. ============ */
@media (max-width: 767px) {
  :root:root .vouw-band { -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,0.000) 0px, rgba(0,0,0,0.024) 26px, rgba(0,0,0,0.095) 52px, rgba(0,0,0,0.206) 78px, rgba(0,0,0,0.345) 104px, rgba(0,0,0,0.500) 130px, rgba(0,0,0,0.655) 156px, rgba(0,0,0,0.794) 182px, rgba(0,0,0,0.905) 208px, rgba(0,0,0,0.976) 234px, rgba(0,0,0,1.000) 260px); mask-image: linear-gradient(to bottom, rgba(0,0,0,0.000) 0px, rgba(0,0,0,0.024) 26px, rgba(0,0,0,0.095) 52px, rgba(0,0,0,0.206) 78px, rgba(0,0,0,0.345) 104px, rgba(0,0,0,0.500) 130px, rgba(0,0,0,0.655) 156px, rgba(0,0,0,0.794) 182px, rgba(0,0,0,0.905) 208px, rgba(0,0,0,0.976) 234px, rgba(0,0,0,1.000) 260px); }
}


/* ============ BEGIN VERLOOP — picked 3 of ronde/begin.py (60 px hoger: het begin vlak onder de belknoppen). Written in by ronde-varianten.py --vast; %V% -> :root:root. ============ */
@media (max-width: 767px) {
  :root:root .vouw-band-wrap { margin-top: calc(-120px - 60px); }
  :root:root .vouw-band { height: calc(175px + 120px + 60px); }
}


/* ============ JOOST IN DE FOLD — picked 1 of ronde/joost.py (boven de knoppen: Joost als regel tussen de kop en de belknoppen). Written in by ronde-varianten.py --vast; %V% -> :root:root. ============ */
@media (max-width: 767px) {
  :root:root .kennismaken { position: static; transform: none; z-index: auto; max-width: none; box-shadow: none; }

  :root:root .vouw-actie { order: 1; }
  :root:root .kennismaken { width: auto; margin: 22px auto 0; gap: 14px; padding: 0; background: none; }
  :root:root .kennismaken-foto { width: 52px; height: 52px; }
  :root:root .kennismaken-naam { font-size: 38px; }
  :root:root .kennismaken-link { margin-top: 12px; font-size: 14px; }
}


/* ============ PHONE: THE RATING ABOVE THE CALL PAIR — responsive, Sem, 2026-11-03, on bak3-l404-b, the phone's fold with
   arrows between the call pair and the rating: "Daarnaast wil ik de CTA's en de ratings omgedraaid zien. [Image #37]
   Deze aanpassingen zijn allen natuurlijk enkel voor mobiel". Below 768 px only (320–767).
   Under Joost's row the rating (stars, 5 / 5 op Klantenoordelen, 18 beoordelingen) now comes first, the call pair under
   it. The rating's room moves from above it to under it (padding 26/10 becomes 11/25), so it stands about as far
   from Joost's row as from the buttons. The photo keeps its start as picked (Begin verloop 3: 60 px above the rating's
   words, now just under Joost's row): 74 px more up, 74 px taller, its foot where it was.
   Before: style.before-sub-omgedraaid.css. ============ */
@media (max-width: 767px) {
  :root:root .vouw-actie > .vouw-cijfer { order: -1; padding-top: 11px; padding-bottom: 25px; }
  :root:root .vouw-band-wrap { margin-top: calc(-120px - 60px - 74px); }
  :root:root .vouw-band { height: calc(175px + 120px + 60px + 74px); }
}


/* ============ PHONE: THE FOLD'S CALL PAIR UNDER EACH OTHER — responsive, Sem, 2026-11-03, on bak3-l404-b, the phone's
   fold with the call pair circled: "Deze buttons mogen op mobiel toch onder elkaar staan: [Image #38] en de breedte
   innemen". Below 768 px only (320–767), and only the fold's pair; the other pairs on the page stay as they are.
   Bel on top, WhatsApp under it, each the full width, butted at the 3 px seam: the pair 57 px taller. The photo keeps
   its start just above the stars (Begin verloop 3): 57 px more up, 57 px taller, its foot where it was.
   Before: style.before-knoppen-onder.css. ============ */
@media (max-width: 767px) {
  :root:root .paar--vouw { flex-direction: column; }
  :root:root .paar--vouw > a { flex: none; width: 100%; }
  :root:root .vouw-band-wrap { margin-top: calc(-120px - 60px - 74px - 57px); }
  :root:root .vouw-band { height: calc(175px + 120px + 60px + 74px + 57px); }
}


/* ============ PHONE: "JOOST" CENTRED OVER THE LINK — responsive, Sem, 2026-11-03, on bak3-l404-b: ".hand
   kennismaken-naam mag op text-align: center en padding-left moet weg." Below 768 px only (320–767): the hand-written
   name stands centred over "Maak kennis met de eigenaar", without the 14 px it stood in. Before: style.before-sub-naam.css.
   ============ */
@media (max-width: 767px) {
  .kennismaken-naam { text-align: center; padding-left: 0; }
}


/* ============ BEOORDELING EN KNOPPEN LAGER — picked 1 of ronde/omlaag.py (16 px lager). Written in by ronde-varianten.py --vast; %V% -> :root:root. ============ */
@media (max-width: 767px) {
  :root:root .vouw-actie { margin-top: calc(24px + 16px); }
}


/* ============ TELEFOON-VOUW — picked 3 of ronde/vouw.py (donker: de foto achter de hele vouw onder een donkere sluier, alles wit). Written in by ronde-varianten.py --vast; %V% -> :root:root. ============ */
@media (max-width: 767px) {
  :root:root .vouw { position: relative; background: var(--lak); }
  :root:root .vouw .vouw-band-wrap { position: absolute; inset: 0; z-index: 0; margin: 0; }
  :root:root .vouw .vouw-band { position: relative; height: 100%; background: var(--lak); -webkit-mask-image: none; mask-image: none; }
  :root:root .vouw .vouw-band img { object-position: 47% 50%; }
  :root:root .vouw .vouw-band::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(to bottom, rgba(27,27,27,0.80) 0%, rgba(27,27,27,0.62) 30%, rgba(27,27,27,0.40) 58%,
                rgba(27,27,27,0.55) 78%, rgba(27,27,27,0.88) 100%);
  }
  :root:root .vouw .vouw-binnen { color: var(--papier); padding: 30px 16px calc(83px + 40px); }

  :root:root .vouw .lockup-merk { filter: brightness(0) invert(1); }
  :root:root .vouw .lockup-regel { background: rgba(251,249,245,0.4); }
  :root:root .vouw .lockup-slogan { color: rgba(251,249,245,0.84); }
  :root:root .vouw .vouw-kop { margin-top: 34px; color: var(--papier); font-size: clamp(32px, 9.4vw, 42px); }

  :root:root .vouw .kennismaken {
    margin: 28px auto 0; gap: 12px; padding: 8px 24px 8px 8px; border-radius: 999px; color: var(--papier);
    background: rgba(251,249,245,0.12); box-shadow: inset 0 0 0 1px rgba(251,249,245,0.32);
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  }
  :root:root .vouw .kennismaken-foto { width: 50px; height: 50px; box-shadow: 0 0 0 2px var(--messing-licht); }
  :root:root .vouw .kennismaken-tekst { align-items: flex-start; padding-top: 7px; }
  :root:root .vouw .kennismaken-naam { font-size: 34px; line-height: 0.8; text-align: left; padding: 0 0 0 2px; }
  :root:root .vouw .kennismaken-link { margin-top: 11px; font-size: 13.5px; text-decoration-color: rgba(251,249,245,0.45); }

  :root:root .vouw .vouw-actie { margin-top: clamp(28px, 24svh - 90px, 120px); }
  :root:root .vouw .vouw-actie > .vouw-cijfer { padding: 0 0 18px; color: rgba(251,249,245,0.86); }
  :root:root .vouw .vouw-cijfer strong { color: var(--papier); }
  :root:root .vouw .vouw-cijfer .sterren { color: var(--messing-licht); }
  :root:root .vouw .paar--vouw .paar-bel { background: var(--papier); color: var(--lak); }
  :root:root .vouw .paar--vouw .paar-bel::before, :root:root .vouw .paar--vouw .paar-bel::after { display: none; }
  :root:root .vouw .paar--vouw > a { min-height: 56px; }

  :root:root .vertrouwen .staal--papier { order: -1; }
}
@media (max-width: 359px) {
  :root:root .vouw .kennismaken { gap: 10px; padding-right: 16px; }
  :root:root .vouw .kennismaken-foto { width: 46px; height: 46px; }
  :root:root .vouw .kennismaken-naam { font-size: 32px; }
  :root:root .vouw .kennismaken-link { font-size: 12.5px; white-space: nowrap; }
}


/* ============ RATING-BADGE — picked 1 of ronde/badge.py (kader: een dunne rechte witte lijn om de beoordeling, als het kader om het JM-logo). Written in by ronde-varianten.py --vast; %V% -> :root:root. ============ */
@media (max-width: 767px) {
  :root:root .vouw .vouw-actie > .vouw-cijfer {
    justify-self: center; gap: 8px; margin-bottom: 20px; padding: 15px 24px 14px; font-size: 15px;
    box-shadow: inset 0 0 0 1px rgba(251,249,245,0.62);
  }
  :root:root .vouw .vouw-cijfer .sterren { gap: 3px; }
  :root:root .vouw .vouw-cijfer .sterren svg { width: 18px; height: 18px; }
  :root:root .vouw .vouw-actie { margin-top: calc(clamp(28px, 24svh - 90px, 120px) - 20px); }
}
@media (max-width: 359px) {
  :root:root .vouw .vouw-actie > .vouw-cijfer { padding: 13px 18px 12px; font-size: 14px; }
  :root:root .vouw .vouw-actie { margin-top: calc(clamp(28px, 24svh - 90px, 120px) - 12px); }
}


/* ============ KADER-TEKST — picked 3 of ronde/leesbaar.py (donkere sluier: de foto donkerder van Joost tot de knoppen, het kader leeg). Written in by ronde-varianten.py --vast; %V% -> :root:root. ============ */
@media (max-width: 767px) {
  :root:root .vouw .vouw-actie > .vouw-cijfer { color: var(--papier); }

  :root:root .vouw .vouw-band::after {
    background: linear-gradient(to bottom, rgba(27,27,27,0.80) 0%, rgba(27,27,27,0.62) 30%, rgba(27,27,27,0.46) 44%,
                rgba(27,27,27,0.76) 56%, rgba(27,27,27,0.80) 76%, rgba(27,27,27,0.90) 100%);
  }
}


/* ============ JOOST-INHOUD — picked 1 of ronde/inhoud.py (groter: foto, naam en link allemaal een maat groter, de link vet wit). Written in by ronde-varianten.py --vast; %V% -> :root:root. ============ */
@media (max-width: 767px) {
  :root:root .vouw .kennismaken { gap: 14px; padding: 9px 26px 9px 9px; }
  :root:root .vouw .kennismaken-foto { width: 64px; height: 64px; }
  :root:root .vouw .kennismaken-tekst { padding-top: 6px; }
  :root:root .vouw .kennismaken-naam { font-size: 44px; }
  :root:root .vouw .kennismaken-link {
    margin-top: 12px; font-size: 15px; font-weight: 600; text-decoration-color: rgba(251,249,245,0.62);
  }
  :root:root .vouw .vouw-actie { margin-top: calc(clamp(28px, 24svh - 90px, 120px) - 20px - 11.8px); }
}
@media (max-width: 389px) {
  :root:root .vouw .kennismaken { gap: 12px; padding-right: 20px; }
  :root:root .vouw .kennismaken-foto { width: 58px; height: 58px; }
  :root:root .vouw .kennismaken-naam { font-size: 40px; }
  :root:root .vouw .kennismaken-link { font-size: 14px; }
  :root:root .vouw .vouw-actie { margin-top: calc(clamp(28px, 24svh - 90px, 120px) - 20px - 7.4px); }
}
@media (max-width: 359px) {
  :root:root .vouw .kennismaken { gap: 10px; padding: 8px 14px 8px 8px; }
  :root:root .vouw .kennismaken-foto { width: 52px; height: 52px; }
  :root:root .vouw .kennismaken-naam { font-size: 36px; }
  :root:root .vouw .kennismaken-link { margin-top: 10px; font-size: 13px; white-space: nowrap; }
  :root:root .vouw .vouw-actie { margin-top: calc(clamp(28px, 24svh - 90px, 120px) - 12px - 1.8px); }
}


/* ============ "JOOST" CLEAR OF THE EDGE — repairs, Sem, 2026-11-03, on bak3-l404-b: ""Joost" mag iets meer naar rechts,
   zodat het uitlijnt met de tekst eronder." and "En ik wil ook niet dat de naam "Joost" links wegvalt acher de foto:
   [Image #47] deze moet dus meer ruimte krijgen naar rechts." The loop of the hand-written J reaches about 0.3 em left
   of where the word starts.
   - In the fold's owner pill, below 768 px only (320–767): the loop hung about 12 px left of "Maak kennis met de
     eigenaar"; the name moves right by 0.34 em (15, 14 and 12 px at 44, 40 and 36 px), the tip of the loop now where
     the link's M starts. The pill keeps its width (the link is the wider line).
   - In Even voorstellen, at every width (320–1920): the J's loop ran past the photo's left edge and was cut off (16 px
     on the phone, 1 to 14 px from 768 up, the more the wider); the name moves right by 0.31 em instead of 8 px left,
     the loop now starting where "Aangenaam. Ik ben" starts.
   Before: style.before-naam-rechts.css. ============ */
@media (max-width: 767px) {
  :root:root .vouw .kennismaken-naam { padding-left: 0.34em; }
}
:root:root .pt-2 { margin-left: 0.31em; }


/* ============ PHONE: NO TRUST STRIP — directed fix, Sem, 2026-11-03, on bak3-l404-b: "Oke, verberg dit element op mobiel:
   [Image #48]" (the trust strip under the fold: 5 / 5 Klantenoordelen and Sinds 2010). Below 768 px only (320–767):
   the strip is gone, so the rating shows once, in the fold's frame; the fold no longer keeps the 83 px the strip lay
   on, and ends 40 px under WhatsApp, as far as the strip stood from it. From 768 up the strip stays.
   Before: style.before-strook-weg.css. ============ */
@media (max-width: 767px) {
  .vertrouwen { display: none; }
  :root:root .vouw .vouw-binnen { padding-bottom: 40px; }
}


/* ============ LOGO — picked 1 of ronde/logo.py (na: het nieuwe logo (2026, de bogen om de naam)). Written in by ronde-varianten.py --vast; %V% -> :root:root. ============ */
:root:root .logo26 { display: contents; }
:root:root .kop-merk img:not(.logo26-d), :root:root .kop-merk .kop-merk-naam { display: none; }
:root:root .kop-merk .logo26-d { display: block; width: auto; height: 54px; }
:root:root .lockup .lockup-merk, :root:root .lockup .lockup-naam { display: none; }
:root:root .lockup .logo26-w { display: none; }
:root:root .lockup .logo26-d { display: block; width: calc(var(--kop) * 8); max-width: 100%; height: auto; }
:root:root .voet-lockup img:not(.logo26-w), :root:root .voet-lockup .voet-naam { display: none; }
:root:root .voet-lockup .logo26-w { display: block; width: 230px; height: auto; margin-bottom: 4px; }
@media (min-width: 768px) {
  :root:root .vouw .lockup { margin-top: 36px; }
}
@media (min-width: 1100px) {
  :root:root .vouw .lockup { margin-top: 54px; }
}
@media (max-width: 899px) {
  :root:root .kop-merk .logo26-d { height: 46px; }
}
@media (max-width: 767px) {
  :root:root .vouw .lockup .logo26-d { display: none; }
  :root:root .vouw .lockup .logo26-w { display: block; width: calc(var(--kop) * 8); max-width: 100%; height: auto; }
}
@media (max-width: 359px) {
  :root:root .kop-merk .logo26-d { height: 40px; }
}
/* repair: from 768 to 899 the fold's logo (top 52) ran into the header's phone button (12 to 56 high) */
@media (min-width: 768px) and (max-width: 899px) {
  :root:root .vouw .lockup { margin-top: 48px; }
}
/* repair: from 1100 to about 1120 the header's logo, once scrolled, was squeezed into a column of 166 px */
@media (min-width: 1100px) and (max-width: 1199px) {
  :root:root .kop-merk .logo26-d { height: 46px; }
}


/* ============ LOGO-PLEK — picked 3 of ronde/logoplek.py (kleiner in de vouw: het logo blijft in de vouw, op ongeveer 60 %, de rest schuift mee omhoog). Written in by ronde-varianten.py --vast; %V% -> :root:root. ============ */
@media (min-width: 768px) {
  :root:root .vouw .lockup .logo26-d { width: calc(var(--kop) * 5); }
}


/* ============ FOLD LOGO: NO RULE, HIGHER — a directed fix straight into b (before: style.before-streep-weg.css).
   Sem, 2026-11-04, picking Logo-plek 3 on the switch (?logo=1&logoplek=3), a computer screen: "Kies deze: [Image #76]
   maar de streep moet weg [Image #78] en het logo moet iets meer naar boven."
   From 768 px (the light fold, the dark logo): the rule between the logo and the slogan goes, the slogan keeps a
   little room under the logo. From 1100 px (the menu halves) the logo goes up: from 1320 its top level with the top
   of the menu words (28 px higher); from 1100 to 1319 SPUITWERK stands close beside it, so 14 px (it keeps 16 px clear
   of the word). 768 to 1099 keeps the logo where it was; the phone keeps its rule. ============ */
@media (min-width: 768px) {
  :root:root .vouw .lockup-regel { display: none; }
  :root:root .vouw .lockup-slogan { margin-top: calc(var(--kop) * 0.3); }
}
@media (min-width: 1100px) {
  :root:root .vouw .lockup { margin-top: calc(54px - 14px); }
}
@media (min-width: 1320px) {
  :root:root .vouw .lockup { margin-top: calc(54px - 28px); }
}


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

/* voor: the old logo (written once, for every state but 1); 1 is b as it stands */
:root:not([data-logo="1"]) .logo26 { display: none; }
:root:not([data-logo="1"]) .kop-merk img:not(.logo26-d) { display: block; }
:root:not([data-logo="1"]) .kop-merk .kop-merk-naam { display: flex; }
:root:not([data-logo="1"]) .lockup .lockup-merk { display: block; }
:root:not([data-logo="1"]) .lockup .lockup-naam { display: flex; }
:root:not([data-logo="1"]) .voet-lockup img:not(.logo26-w) { display: block; }
:root:not([data-logo="1"]) .voet-lockup .voet-naam { display: flex; }
:root:not([data-logo="1"]) .vouw .lockup { margin-top: 0; }
:root:not([data-logo="1"]) .vouw .lockup-regel { display: block; }
:root:not([data-logo="1"]) .vouw .lockup-slogan { margin-top: 0; }


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