/* Round v (2026-10-15): the questions as a section of their own, straight under the service page's fold.
   Three answers behind the switch (vouw/v-switch.js): data-svv="1|2|3" on <html>, v3b on "4" (prompts/v3b.md) and
   v3c's three on "5|6|7" (prompts/v3c.md);
   no data-svv is state 0, the page with no section. data-svv-vul on <html> picks the fill (loodgieter, or cv-ketel-vervangen's own questions). Every
   rule of an answer is scoped under its state; what the three share is scoped under :root[data-svv]. Markup:
   vouw/v.html, written by vouw/v-bouw.py from vouw/v-vul.json. What each answer is and why: vouw/v-recept.md. */

/* ==================================================== which section shows */
.svv { display: none; }
:root[data-svv="1"][data-svv-vul="loodgieter"] .svv--1[data-svv-vul="loodgieter"],
:root[data-svv="1"][data-svv-vul="cv-ketel-vervangen"] .svv--1[data-svv-vul="cv-ketel-vervangen"],
:root[data-svv="2"][data-svv-vul="loodgieter"] .svv--2[data-svv-vul="loodgieter"],
:root[data-svv="2"][data-svv-vul="cv-ketel-vervangen"] .svv--2[data-svv-vul="cv-ketel-vervangen"],
:root[data-svv="3"][data-svv-vul="loodgieter"] .svv--3[data-svv-vul="loodgieter"],
:root[data-svv="3"][data-svv-vul="cv-ketel-vervangen"] .svv--3[data-svv-vul="cv-ketel-vervangen"],
:root[data-svv="4"][data-svv-vul="loodgieter"] .svv--4[data-svv-vul="loodgieter"],
:root[data-svv="4"][data-svv-vul="cv-ketel-vervangen"] .svv--4[data-svv-vul="cv-ketel-vervangen"] { display: block; }

/* ==================================================== what the three share */
:root[data-svv] .svv { position: relative; padding: clamp(4px, 1vw, 14px) 0 clamp(64px, 8vw, 112px); }
:root[data-svv] .svv-kop {
  margin: 0 0 clamp(18px, 2.4vw, 32px); max-width: 18em;
  font-weight: 800; font-size: clamp(30px, 3.3vw, 46px); line-height: 1.04; letter-spacing: -.03em; color: var(--lood);
  text-wrap: balance;
}

/* his photo in a frame: cover-cropped on its focus (focus.js), the place label and his stamp from fotomerk.css */
:root[data-svv] .svv-foto {
  position: relative; display: block; overflow: hidden; aspect-ratio: var(--svv-r, 3 / 4);
  background: var(--kalk-diep);
}
:root[data-svv] .svv-foto img {
  position: absolute; inset: 0; display: block; width: 100%; height: 100%; max-width: none; object-fit: cover;
}

/* the way out: for whoever recognises none of it, his own way in, and the two buttons */
:root[data-svv] .svv-uitweg {
  container-type: inline-size;
  padding: clamp(18px, 1.8vw, 26px); border-radius: 10px;
  background: var(--lood); color: var(--kalk-wit);
}
:root[data-svv] .svv-uitweg__in { display: flex; flex-direction: column; gap: 14px; height: 100%; }
:root[data-svv] .svv-uitweg__vraag {
  margin: 0; font-weight: 800; font-size: clamp(17px, 1.35vw, 20px); line-height: 1.22; letter-spacing: -.012em;
  text-wrap: balance;
}
:root[data-svv] .svv-uitweg__stappen { display: grid; gap: 9px; margin: 0; padding: 0; list-style: none; font-size: 14.5px; line-height: 1.38; color: var(--gips-licht); }
:root[data-svv] .svv-uitweg__stappen li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 9px; align-items: start; }
:root[data-svv] .svv-uitweg__n {
  display: grid; place-items: center; width: 22px; height: 22px; margin-top: -1px; border-radius: 50%;
  background: var(--dakpan); color: var(--kalk-wit); font: 700 12px/1 var(--f-tech);
}
:root[data-svv] .svv-uitweg__acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; padding-top: 4px; }
:root[data-svv] .svv-uitweg__acts .btn { flex: 1 1 auto; min-height: 48px; padding: 0 16px; gap: 8px; font-size: 15.5px; white-space: nowrap; }
:root[data-svv] .svv-uitweg__acts .btn .ico { width: 18px; height: 18px; }
:root[data-svv] .svv-uitweg__bel { background: transparent; color: var(--kalk-wit); box-shadow: inset 0 0 0 2px rgba(255, 252, 247, .42); }
:root[data-svv] .svv-uitweg__bel:hover { box-shadow: inset 0 0 0 2px var(--kalk-wit); }
:root[data-svv] .svv-uitweg__bel:focus-visible,
:root[data-svv] .svv-uitweg__wa:focus-visible { outline-color: var(--dakpan-licht); }
/* narrow (a tile of the photo wall on a phone): the number goes, "Bel" stays */
@container (max-width: 200px) {
  :root[data-svv] .svv-uitweg__stappen { font-size: 13px; gap: 7px; }
  :root[data-svv] .svv-uitweg__stappen li { grid-template-columns: 19px minmax(0, 1fr); gap: 7px; }
  :root[data-svv] .svv-uitweg__n { width: 19px; height: 19px; font-size: 11px; }
  :root[data-svv] .svv-uitweg__acts .btn { min-height: 44px; padding: 0 10px; gap: 7px; font-size: 14px; }
  :root[data-svv] .svv-uitweg__nr { display: none; }
}
/* wide (a band across the section): the question, the steps and the buttons side by side */
@container (min-width: 620px) {
  :root[data-svv] .svv-uitweg .svv-uitweg__vraag { grid-area: vraag; font-size: clamp(19px, 1.6vw, 23px); }
  :root[data-svv] .svv-uitweg__stappen { grid-area: stap; }
  :root[data-svv] .svv-uitweg__acts { grid-area: acts; flex-direction: column; margin: 0; padding: 0; }
}
@container (min-width: 620px) {
  :root[data-svv] .svv-uitweg__in {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr) auto; grid-template-areas: "vraag stap acts";
    align-items: center; column-gap: clamp(24px, 3vw, 44px);
  }
}

/* ==================================================== 1 · the photo wall
   Every question is one of his photos, with the question under it in the reader's words; the whole tile is the way
   to its job, one tap. Recognising comes first by picture, then by the words. The way out is the wall's last tile. */
:root[data-svv="1"] .svv1-muur {
  --g: clamp(10px, 1.4vw, 20px); --n: 5;
  display: flex; flex-wrap: wrap; gap: var(--g); margin: 0; padding: 0; list-style: none;
}
:root[data-svv="1"] .svv1-tegel { display: flex; flex: 0 0 calc((100% - (var(--n) - 1) * var(--g)) / var(--n)); min-width: 0; }
:root[data-svv="1"] .svv1-tegel--uitweg { flex-grow: 1; }
:root[data-svv="1"] .svv1-tegel--uitweg .svv-uitweg { width: 100%; }
:root[data-svv="1"] .svv1-deur {
  display: flex; flex-direction: column; width: 100%; overflow: hidden;
  border-radius: 10px; background: var(--kalk-wit); color: var(--lood); text-decoration: none;
  box-shadow: 0 1px 2px rgba(38, 51, 58, .07), 0 8px 22px rgba(38, 51, 58, .07);
  transition: transform .22s cubic-bezier(.2, .7, .2, 1), box-shadow .22s;
}
:root[data-svv="1"] .svv1-deur img { transition: transform .5s cubic-bezier(.2, .7, .2, 1); }
:root[data-svv="1"] .svv1-vraag {
  display: block; padding: 12px 14px 15px;
  font-weight: 700; font-size: clamp(15px, 1.12vw, 17px); line-height: 1.28; letter-spacing: -.006em; text-wrap: pretty;
}
:root[data-svv="1"] .svv1-vraag .ico {
  display: inline-block; width: .95em; height: .95em; margin-left: .35em; vertical-align: -.14em; color: var(--dakpan);
  transition: transform .22s;
}
@media (hover: hover) {
  :root[data-svv="1"] .svv1-deur:hover { transform: translateY(-3px); box-shadow: 0 2px 4px rgba(38, 51, 58, .08), 0 18px 40px rgba(38, 51, 58, .14); }
  :root[data-svv="1"] .svv1-deur:hover img { transform: scale(1.035); }
  :root[data-svv="1"] .svv1-deur:hover .svv1-vraag { color: var(--dakpan); }
  :root[data-svv="1"] .svv1-deur:hover .svv1-vraag .ico { transform: translateX(3px); }
}
:root[data-svv="1"] .svv1-deur:focus-visible { outline-offset: 3px; }
@media (max-width: 1099px) { :root[data-svv="1"] .svv1-muur { --n: 4; } }
@media (max-width: 899px)  { :root[data-svv="1"] .svv1-muur { --n: 3; } }
@media (max-width: 560px) {
  :root[data-svv="1"] .svv1-muur { --n: 2; --g: 10px; }
  :root[data-svv="1"] .svv1-vraag { padding: 10px 11px 13px; font-size: 15px; line-height: 1.26; }
  :root[data-svv="1"] .svv1-tegel--uitweg .svv-uitweg { padding: 14px 13px; }
  :root[data-svv="1"] .svv1-tegel--uitweg .svv-uitweg__in { gap: 12px; }
  :root[data-svv="1"] .svv1-tegel--uitweg .svv-uitweg__vraag { font-size: 16px; }
}

/* ==================================================== 2 · situation first
   Three doors, each one of his photos with a header that names a situation (new words); nothing else until a tap.
   A tap opens that door's questions under the row (on a phone: under the door), the next tap the job. The way out is
   the fourth card on a computer, a band under the doors on a tablet, the last block on a phone. */
:root[data-svv="2"] .svv2-raster {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, .92fr); gap: clamp(12px, 1.4vw, 20px);
  align-items: stretch;
}
:root[data-svv="2"] .svv2-deur {
  grid-column: var(--k); grid-row: 1; position: relative;
  display: flex; flex-direction: column; margin: 0; padding: 0; overflow: hidden;
  appearance: none; border: 0; border-radius: 10px; background: var(--kalk-wit); color: var(--lood);
  font: inherit; text-align: left; cursor: pointer;
  box-shadow: 0 1px 2px rgba(38, 51, 58, .07), 0 8px 22px rgba(38, 51, 58, .07);
  transition: box-shadow .22s, opacity .22s, transform .22s cubic-bezier(.2, .7, .2, 1);
}
:root[data-svv="2"] .svv2-deur .svv-foto { --svv-r: 4 / 5; }
:root[data-svv="2"] .svv2-deur img { transition: transform .5s cubic-bezier(.2, .7, .2, 1); }
:root[data-svv="2"] .svv2-deur__kop {
  display: block; padding: 15px 60px 17px 18px;
  font-weight: 800; font-size: clamp(19px, 1.65vw, 24px); line-height: 1.12; letter-spacing: -.022em; text-wrap: balance;
}
:root[data-svv="2"] .svv2-deur__teken {
  position: absolute; right: 14px; bottom: 15px; display: grid; place-items: center; width: 34px; height: 34px;
  border-radius: 50%; background: var(--kalk-diep); color: var(--lood); transition: background-color .2s, color .2s, transform .25s;
}
:root[data-svv="2"] .svv2-deur__teken .ico { width: 18px; height: 18px; }
@media (hover: hover) {
  :root[data-svv="2"] .svv2-deur:hover { transform: translateY(-3px); box-shadow: 0 2px 4px rgba(38, 51, 58, .08), 0 18px 40px rgba(38, 51, 58, .14); }
  :root[data-svv="2"] .svv2-deur:hover img { transform: scale(1.035); }
  :root[data-svv="2"] .svv2-deur:hover .svv2-deur__teken { background: var(--dakpan); color: var(--kalk-wit); }
}
:root[data-svv="2"] .svv2-deur[aria-expanded="true"] { box-shadow: 0 0 0 3px var(--dakpan), 0 18px 40px rgba(38, 51, 58, .14); transform: none; }
:root[data-svv="2"] .svv2-deur[aria-expanded="true"] .svv2-deur__teken { background: var(--dakpan); color: var(--kalk-wit); transform: rotate(180deg); }
:root[data-svv="2"] .svv2-deur[aria-expanded="true"] .svv2-deur__kop { color: var(--dakpan); }
:root[data-svv="2"] .svv2--open .svv2-deur[aria-expanded="false"] { opacity: .62; }
:root[data-svv="2"] .svv2--open .svv2-deur[aria-expanded="false"]:hover { opacity: 1; }

:root[data-svv="2"] .svv2-vragen {
  grid-column: 1 / -1; grid-row: 2; position: relative;
  padding: clamp(6px, .8vw, 12px) clamp(18px, 2.2vw, 32px); border-radius: 10px; background: var(--kalk-wit);
  box-shadow: 0 1px 2px rgba(38, 51, 58, .07), 0 8px 22px rgba(38, 51, 58, .07);
}
:root.js[data-svv="2"] .svv2-vragen:not(.is-open) { display: none; }
:root.js[data-svv="2"] .svv2-vragen.is-open { animation: svv2-in .3s cubic-bezier(.2, .7, .2, 1); }
@keyframes svv2-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
:root[data-svv="2"] .svv2-vragen ul {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(24px, 3vw, 48px); margin: 0; padding: 0; list-style: none;
}
:root[data-svv="2"] .svv2-vragen li { border-bottom: 1px solid var(--kalk-diep); }
:root[data-svv="2"] .svv2-vragen li:nth-last-child(-n + 2):nth-child(odd),
:root[data-svv="2"] .svv2-vragen li:last-child { border-bottom: 0; }
:root[data-svv="2"] .svv2-vragen a {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 64px; padding: 14px 0;
  color: var(--lood); text-decoration: none;
  font-weight: 700; font-size: clamp(18px, 1.45vw, 21px); line-height: 1.25; letter-spacing: -.01em;
}
:root[data-svv="2"] .svv2-vragen a .ico { width: 20px; height: 20px; color: var(--dakpan); transition: transform .2s; }
:root[data-svv="2"] .svv2-vragen a:hover { color: var(--dakpan); }
:root[data-svv="2"] .svv2-vragen a:hover .ico { transform: translateX(3px); }
:root[data-svv="2"] .svv2-raster > .svv-uitweg { grid-column: 4; grid-row: 1; }

/* a tablet: the three doors across, the way out a band under them */
@media (max-width: 960px) {
  :root[data-svv="2"] .svv2-raster { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  :root[data-svv="2"] .svv2-raster > .svv-uitweg { grid-column: 1 / -1; grid-row: 3; }
  :root[data-svv="2"] .svv2-deur__kop { padding: 13px 52px 15px 15px; font-size: 19px; }
  :root[data-svv="2"] .svv2-deur__teken { right: 12px; bottom: 13px; width: 30px; height: 30px; }
}
/* a phone: the doors one under the other, his photo beside the header; a door's questions open right under it */
@media (max-width: 560px) {
  :root[data-svv="2"] .svv2-raster { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  :root[data-svv="2"] .svv2-deur,
  :root[data-svv="2"] .svv2-vragen,
  :root[data-svv="2"] .svv2-raster > .svv-uitweg { grid-column: 1; grid-row: auto; }
  :root[data-svv="2"] .svv2-deur { flex-direction: row; align-items: center; }
  :root[data-svv="2"] .svv2-deur .svv-foto { flex: 0 0 38%; }
  :root[data-svv="2"] .svv2-deur__kop { flex: 1 1 auto; padding: 12px 52px 12px 16px; font-size: clamp(18px, 5.2vw, 21px); }
  :root[data-svv="2"] .svv2-deur__teken { top: 50%; bottom: auto; right: 12px; margin-top: -16px; width: 32px; height: 32px; }
  :root[data-svv="2"] .svv2-deur[aria-expanded="true"] .svv2-deur__teken { transform: rotate(180deg); }
  :root[data-svv="2"] .svv2-vragen { margin-top: -2px; padding: 2px 16px; }
  :root[data-svv="2"] .svv2-vragen ul { grid-template-columns: minmax(0, 1fr); }
  :root[data-svv="2"] .svv2-vragen li,
  :root[data-svv="2"] .svv2-vragen li:nth-last-child(-n + 2):nth-child(odd) { border-bottom: 1px solid var(--kalk-diep); }
  :root[data-svv="2"] .svv2-vragen li:last-child { border-bottom: 0; }
  :root[data-svv="2"] .svv2-vragen a { min-height: 58px; padding: 12px 0; font-size: 17px; }
  :root[data-svv="2"] .svv2-raster > .svv-uitweg { margin-top: 8px; }
}

/* ==================================================== 3 · questions as headers, one photo follows
   The questions are set as a list of large headers, the whole list in view; beside it one frame shows his photo of
   the job of the question you are on (the one under the pointer, or the one level with the frame as you scroll), and
   names that job under it. A tap on a question opens its job; a tap on the photo opens it whole in the viewer. */
:root[data-svv="3"] .svv3-rooster {
  display: grid; grid-template-columns: minmax(0, 1.32fr) minmax(0, 1fr); column-gap: clamp(28px, 4.4vw, 72px);
  align-items: start;
}
:root[data-svv="3"] .svv3-lijst { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--kalk-rand); }
:root[data-svv="3"] .svv3-vraag {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 18px;
  padding: clamp(14px, 1.35vw, 20px) 0; border-bottom: 1px solid var(--kalk-rand);
  color: var(--lood); text-decoration: none;
  font-weight: 800; font-size: clamp(22px, 2.15vw, 31px); line-height: 1.12; letter-spacing: -.026em; text-wrap: balance;
  transition: color .2s;
}
:root[data-svv="3"] .svv3-vraag .ico {
  width: .82em; height: .82em; color: var(--dakpan); opacity: 0; transform: translateX(-8px);
  transition: opacity .2s, transform .25s cubic-bezier(.2, .7, .2, 1);
}
:root[data-svv="3"] .svv3-vraag.is-nu { color: var(--dakpan); }
:root[data-svv="3"] .svv3-vraag.is-nu .ico { opacity: 1; transform: none; }
:root[data-svv="3"] .svv3-kader { position: sticky; top: 24px; }
:root[data-svv="3"] .svv3-fotos {
  position: relative; width: min(100%, calc((100vh - 150px) * .75)); aspect-ratio: 3 / 4; overflow: hidden;
  border-radius: 10px; background: var(--kalk-diep); box-shadow: var(--shadow-1);
}
:root[data-svv="3"] .svv3-foto {
  position: absolute; inset: 0; aspect-ratio: auto; cursor: zoom-in;
  opacity: 0; visibility: hidden; transition: opacity .4s ease, visibility 0s .4s;
}
:root[data-svv="3"] .svv3-foto.is-nu { opacity: 1; visibility: visible; transition: opacity .4s ease; }
:root[data-svv="3"] .svv3-bijschrift { margin: 12px 0 0; }
:root[data-svv="3"] .svv3-klus {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--lood); font-weight: 700; font-size: 17px; line-height: 1.3;
  text-decoration: underline; text-decoration-color: var(--kalk-rand); text-decoration-thickness: 2px; text-underline-offset: 4px;
}
:root[data-svv="3"] .svv3-klus .ico { width: 16px; height: 16px; color: var(--dakpan); }
:root[data-svv="3"] .svv3-klus:hover { color: var(--dakpan); text-decoration-color: var(--dakpan); }
:root[data-svv="3"] .svv3-klus:not(.is-nu) { display: none; }
:root[data-svv="3"] .svv--3 .wrap > .svv-uitweg { margin-top: clamp(32px, 4vw, 52px); }

@media (max-width: 960px) {
  :root[data-svv="3"] .svv3-rooster { grid-template-columns: minmax(0, 1fr) 38%; column-gap: 22px; }
  :root[data-svv="3"] .svv3-vraag { font-size: clamp(19px, 2.7vw, 24px); gap: 10px; }
}
/* a phone: the same two columns, the list wide and the frame narrow, held under the bar as the list goes by */
@media (max-width: 560px) {
  :root[data-svv="3"] .svv3-rooster { grid-template-columns: minmax(0, 1fr) 40%; column-gap: 14px; }
  :root[data-svv="3"] .svv3-vraag { padding: 13px 0; font-size: clamp(17px, 4.9vw, 19px); line-height: 1.18; letter-spacing: -.018em; text-wrap: pretty; }
  :root[data-svv="3"] .svv3-vraag .ico { display: none; }
  :root[data-svv="3"] .svv3-kader { top: calc(60px + var(--svj-boven, 0px) + 12px); }
  :root[data-svv="3"] .svv3-fotos { width: 100%; border-radius: 8px; }
  :root[data-svv="3"] .svv3-bijschrift { margin-top: 8px; }
  :root[data-svv="3"] .svv3-klus { gap: 5px; font-size: 13.5px; line-height: 1.25; text-underline-offset: 3px; }
  :root[data-svv="3"] .svv3-klus .ico { width: 12px; height: 12px; }
}

/* ==================================================== 4 · v3b: the questions as headers, the width theirs
   v3 one step on (prompts/v3b.md). The photo beside the list is gone, so the questions take the section's whole width,
   larger, each on one line on a computer. Under each one short sentence in a quieter voice. Each question is a row of
   its own: a pale card with a gap around it, and at its head a mini picture of his work, small enough to stay a marker.
   The whole row is the link to the job. The way out stays the dark band under the list. */
:root[data-svv="4"] .svv4-lijst {
  display: grid; gap: clamp(8px, .8vw, 10px); margin: 0; padding: 0; list-style: none;
}
:root[data-svv="4"] .svv4-vraag {
  --m: clamp(56px, 5vw, 72px);                   /* the mini picture */
  display: grid; grid-template-columns: var(--m) minmax(0, 1fr) auto; align-items: center;
  column-gap: clamp(18px, 2vw, 28px);
  padding: clamp(12px, 1.1vw, 15px) clamp(20px, 2.2vw, 30px) clamp(12px, 1.1vw, 15px) clamp(12px, 1.1vw, 15px);
  border-radius: 10px; background: var(--kalk-wit); color: var(--lood); text-decoration: none;
  box-shadow: 0 1px 0 rgba(38, 51, 58, .05);
  transition: box-shadow .22s, background-color .22s;
  -webkit-tap-highlight-color: transparent;
}
:root[data-svv="4"] .svv4-beeld {
  position: relative; display: block; width: var(--m); aspect-ratio: 1; overflow: hidden;
  border-radius: 7px; background: var(--kalk-diep);
}
:root[data-svv="4"] .svv4-beeld img {
  position: absolute; inset: 0; display: block; width: 100%; height: 100%; max-width: none; object-fit: cover;
  transition: transform .5s cubic-bezier(.2, .7, .2, 1);
}
:root[data-svv="4"] .svv4-tekst { display: block; min-width: 0; }
:root[data-svv="4"] .svv4-kop {
  display: block;
  font-weight: 800; font-size: clamp(22px, 2.65vw, 38px); line-height: 1.08; letter-spacing: -.028em; text-wrap: balance;
  transition: color .2s;
}
:root[data-svv="4"] .svv4-zin {
  display: block; margin-top: clamp(4px, .45vw, 7px); max-width: 48em;
  font-size: clamp(15.5px, 1.2vw, 17.5px); line-height: 1.42; color: var(--lood-zacht); text-wrap: pretty;
}
:root[data-svv="4"] .svv4-vraag > .ico {
  width: 22px; height: 22px; color: var(--dakpan); transition: transform .25s cubic-bezier(.2, .7, .2, 1);
}
@media (hover: hover) {
  :root[data-svv="4"] .svv4-vraag:hover { box-shadow: var(--shadow-1); }
  :root[data-svv="4"] .svv4-vraag:hover .svv4-kop { color: var(--dakpan); }
  :root[data-svv="4"] .svv4-vraag:hover > .ico { transform: translateX(4px); }
  :root[data-svv="4"] .svv4-vraag:hover .svv4-beeld img { transform: scale(1.06); }
}
:root[data-svv="4"] .svv4-vraag:active { background: var(--gips-licht); }
:root[data-svv="4"] .svv--4 .wrap > .svv-uitweg { margin-top: clamp(28px, 3.4vw, 44px); }

/* a phone: the same rows, the picture smaller and at the top of the row, the arrow gone (the whole row is the tap) */
@media (max-width: 560px) {
  :root[data-svv="4"] .svv4-lijst { gap: 8px; }
  :root[data-svv="4"] .svv4-vraag {
    --m: 48px; grid-template-columns: var(--m) minmax(0, 1fr); align-items: start; column-gap: 13px;
    padding: 13px 14px 14px 11px;
  }
  :root[data-svv="4"] .svv4-beeld { margin-top: 2px; border-radius: 6px; }
  :root[data-svv="4"] .svv4-vraag > .ico { display: none; }
  :root[data-svv="4"] .svv4-kop { font-size: clamp(17.5px, 4.9vw, 19.5px); line-height: 1.17; letter-spacing: -.018em; text-wrap: pretty; }
  :root[data-svv="4"] .svv4-zin { margin-top: 4px; font-size: 14.5px; line-height: 1.4; }
}

/* ==================================================== 5-7 · v3c: three ways for the headers to stand apart
   prompts/v3c.md. The same in all three, and as in v3b: no photo beside the list, the questions across the section's
   width and large, under each v3b's sentence, the way out under the list. No cards (v3b's answer): what differs is only
   how one question stands apart from the next. 5 = the key word (type and colour), 6 = in groups (grouping and
   rhythm), 7 = mini icons (a marker). */
:root[data-svv="5"][data-svv-vul="loodgieter"] .svv--5[data-svv-vul="loodgieter"],
:root[data-svv="5"][data-svv-vul="cv-ketel-vervangen"] .svv--5[data-svv-vul="cv-ketel-vervangen"],
:root[data-svv="6"][data-svv-vul="loodgieter"] .svv--6[data-svv-vul="loodgieter"],
:root[data-svv="6"][data-svv-vul="cv-ketel-vervangen"] .svv--6[data-svv-vul="cv-ketel-vervangen"],
:root[data-svv="7"][data-svv-vul="loodgieter"] .svv--7[data-svv-vul="loodgieter"],
:root[data-svv="7"][data-svv-vul="cv-ketel-vervangen"] .svv--7[data-svv-vul="cv-ketel-vervangen"] { display: block; }

:root:is([data-svv="5"], [data-svv="6"], [data-svv="7"], [data-svv="8"], [data-svv="9"], [data-svv="10"], [data-svv="11"], [data-svv="12"], [data-svv="13"], [data-svv="14"], [data-svv="15"], [data-svv="16"], [data-svv="17"], [data-svv="18"], [data-svv="19"], [data-svv="20"], [data-svv="21"], [data-svv="22"], [data-svv="23"], [data-svv="24"]) .svv { --f: clamp(26px, 2.8vw, 40px); }
:root:is([data-svv="5"], [data-svv="6"], [data-svv="7"], [data-svv="8"], [data-svv="9"], [data-svv="10"], [data-svv="11"], [data-svv="12"], [data-svv="13"], [data-svv="14"], [data-svv="15"], [data-svv="16"], [data-svv="17"], [data-svv="18"], [data-svv="19"], [data-svv="20"], [data-svv="21"], [data-svv="22"], [data-svv="23"], [data-svv="24"]) .svv .wrap > .svv-uitweg { margin-top: clamp(32px, 3.6vw, 48px); }
/* the header and its sentence: what all three set the same way */
:root:is([data-svv="5"], [data-svv="6"], [data-svv="7"], [data-svv="8"], [data-svv="9"], [data-svv="10"], [data-svv="11"], [data-svv="12"], [data-svv="13"], [data-svv="14"], [data-svv="15"], [data-svv="16"], [data-svv="17"], [data-svv="18"], [data-svv="19"], [data-svv="20"], [data-svv="21"], [data-svv="22"], [data-svv="23"], [data-svv="24"]) :is(.svv5-vraag, .svv6-vraag, .svv7-vraag) {
  color: var(--lood); text-decoration: none; -webkit-tap-highlight-color: transparent;
}
:root:is([data-svv="5"], [data-svv="6"], [data-svv="7"], [data-svv="8"], [data-svv="9"], [data-svv="10"], [data-svv="11"], [data-svv="12"], [data-svv="13"], [data-svv="14"], [data-svv="15"], [data-svv="16"], [data-svv="17"], [data-svv="18"], [data-svv="19"], [data-svv="20"], [data-svv="21"], [data-svv="22"], [data-svv="23"], [data-svv="24"]) :is(.svv5-tekst, .svv6-tekst, .svv7-tekst) { display: block; min-width: 0; }
:root:is([data-svv="5"], [data-svv="6"], [data-svv="7"], [data-svv="8"], [data-svv="9"], [data-svv="10"], [data-svv="11"], [data-svv="12"], [data-svv="13"], [data-svv="14"], [data-svv="15"], [data-svv="16"], [data-svv="17"], [data-svv="18"], [data-svv="19"], [data-svv="20"], [data-svv="21"], [data-svv="22"], [data-svv="23"], [data-svv="24"]) :is(.svv5-kop, .svv6-kop, .svv7-kop) {
  display: block;
  font-weight: 800; font-size: var(--f); line-height: 1.08; letter-spacing: -.028em; text-wrap: balance;
  transition: color .2s;
}
:root:is([data-svv="5"], [data-svv="6"], [data-svv="7"], [data-svv="8"], [data-svv="9"], [data-svv="10"], [data-svv="11"], [data-svv="12"], [data-svv="13"], [data-svv="14"], [data-svv="15"], [data-svv="16"], [data-svv="17"], [data-svv="18"], [data-svv="19"], [data-svv="20"], [data-svv="21"], [data-svv="22"], [data-svv="23"], [data-svv="24"]) :is(.svv5-zin, .svv6-zin, .svv7-zin) {
  display: block; margin-top: clamp(5px, .5vw, 8px); max-width: 48em;
  font-size: clamp(15.5px, 1.2vw, 17.5px); line-height: 1.42; color: var(--lood-zacht); text-wrap: pretty;
}
:root:is([data-svv="5"], [data-svv="6"], [data-svv="7"], [data-svv="8"], [data-svv="9"], [data-svv="10"], [data-svv="11"], [data-svv="12"], [data-svv="13"], [data-svv="14"], [data-svv="15"], [data-svv="16"], [data-svv="17"], [data-svv="18"], [data-svv="19"], [data-svv="20"], [data-svv="21"], [data-svv="22"], [data-svv="23"], [data-svv="24"]) :is(.svv5-vraag, .svv6-vraag, .svv7-vraag) > .ico {
  width: 22px; height: 22px; color: var(--dakpan); transition: transform .25s cubic-bezier(.2, .7, .2, 1);
}
@media (hover: hover) {
  :root:is([data-svv="5"], [data-svv="6"], [data-svv="7"], [data-svv="8"], [data-svv="9"], [data-svv="10"], [data-svv="11"], [data-svv="12"], [data-svv="13"], [data-svv="14"], [data-svv="15"], [data-svv="16"], [data-svv="17"], [data-svv="18"], [data-svv="19"], [data-svv="20"], [data-svv="21"], [data-svv="22"], [data-svv="23"], [data-svv="24"]) :is(.svv5-vraag, .svv6-vraag, .svv7-vraag):hover > .ico { transform: translateX(4px); }
}
@media (max-width: 560px) {
  :root:is([data-svv="5"], [data-svv="6"], [data-svv="7"], [data-svv="8"], [data-svv="9"], [data-svv="10"], [data-svv="11"], [data-svv="12"], [data-svv="13"], [data-svv="14"], [data-svv="15"], [data-svv="16"], [data-svv="17"], [data-svv="18"], [data-svv="19"], [data-svv="20"], [data-svv="21"], [data-svv="22"], [data-svv="23"], [data-svv="24"]) .svv { --f: clamp(19px, 5.4vw, 22px); }
  :root:is([data-svv="5"], [data-svv="6"], [data-svv="7"], [data-svv="8"], [data-svv="9"], [data-svv="10"], [data-svv="11"], [data-svv="12"], [data-svv="13"], [data-svv="14"], [data-svv="15"], [data-svv="16"], [data-svv="17"], [data-svv="18"], [data-svv="19"], [data-svv="20"], [data-svv="21"], [data-svv="22"], [data-svv="23"], [data-svv="24"]) :is(.svv5-kop, .svv6-kop, .svv7-kop) { line-height: 1.16; letter-spacing: -.02em; text-wrap: pretty; }
  :root:is([data-svv="5"], [data-svv="6"], [data-svv="7"], [data-svv="8"], [data-svv="9"], [data-svv="10"], [data-svv="11"], [data-svv="12"], [data-svv="13"], [data-svv="14"], [data-svv="15"], [data-svv="16"], [data-svv="17"], [data-svv="18"], [data-svv="19"], [data-svv="20"], [data-svv="21"], [data-svv="22"], [data-svv="23"], [data-svv="24"]) :is(.svv5-zin, .svv6-zin, .svv7-zin) { margin-top: 5px; font-size: 15px; line-height: 1.4; }
  :root:is([data-svv="5"], [data-svv="6"], [data-svv="7"], [data-svv="8"], [data-svv="9"], [data-svv="10"], [data-svv="11"], [data-svv="12"], [data-svv="13"], [data-svv="14"], [data-svv="15"], [data-svv="16"], [data-svv="17"], [data-svv="18"], [data-svv="19"], [data-svv="20"], [data-svv="21"], [data-svv="22"], [data-svv="23"], [data-svv="24"]) :is(.svv5-vraag, .svv6-vraag, .svv7-vraag) > .ico { width: 18px; height: 18px; }
}

/* ---------------------------------------------------- 5 · 3c·1, the key word
   Open rows on the page's ground with a rule between them. In each question the words that name the situation stand
   in the accent colour, so the eye runs down a column of distinct words and stops at its own. The marker is part of
   the question, so it cannot become noise of its own. */
:root[data-svv="5"] .svv5-lijst { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--kalk-rand); }
:root[data-svv="5"] .svv5-lijst > li { border-bottom: 1px solid var(--kalk-rand); }
:root[data-svv="5"] .svv5-vraag {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: clamp(18px, 2.4vw, 32px);
  padding: clamp(16px, 1.6vw, 23px) clamp(2px, 1vw, 16px);
  transition: background-color .22s;
}
:root[data-svv="5"] .svv5-kern { color: var(--dakpan); }
@media (hover: hover) {
  :root[data-svv="5"] .svv5-vraag:hover { background: var(--kalk-wit); }
  :root[data-svv="5"] .svv5-vraag:hover .svv5-kern {
    text-decoration: underline; text-decoration-thickness: .07em; text-underline-offset: .12em;
  }
}
:root[data-svv="5"] .svv5-vraag:active { background: var(--kalk-wit); }
:root[data-svv="5"] .svv5-vraag:focus-visible { outline-offset: -3px; }
@media (max-width: 560px) {
  :root[data-svv="5"] .svv5-vraag { align-items: start; column-gap: 14px; padding: 16px 2px 17px; }
  :root[data-svv="5"] .svv5-vraag > .ico { margin-top: calc((var(--f) * 1.16 - 18px) / 2); }
}

/* ---------------------------------------------------- 6 · 3c·2, in groups
   The questions in three situations (v2's group headings), each group under a small heading set as the homepage
   sets "Onze diensten" (home.css .naar__label: the logo's second voice in capitals, light on a dark tab standing on a
   heavy rule), with air between the groups. Three short lists of two to four instead of one of nine; inside a group
   the heavy header and the light sentence take turns, with a faint rule between. */
:root:is([data-svv="6"], [data-svv="8"], [data-svv="9"], [data-svv="10"], [data-svv="11"], [data-svv="12"], [data-svv="13"], [data-svv="14"], [data-svv="15"], [data-svv="16"], [data-svv="17"], [data-svv="18"], [data-svv="19"], [data-svv="20"], [data-svv="21"], [data-svv="22"], [data-svv="23"], [data-svv="24"]) .svv6-groepen { display: grid; gap: clamp(34px, 4vw, 56px); }
:root:is([data-svv="6"], [data-svv="8"], [data-svv="9"], [data-svv="10"], [data-svv="11"], [data-svv="12"], [data-svv="13"], [data-svv="14"], [data-svv="15"], [data-svv="16"], [data-svv="17"], [data-svv="18"], [data-svv="19"], [data-svv="20"], [data-svv="21"], [data-svv="22"], [data-svv="23"], [data-svv="24"]) .svv6-label {
  width: fit-content; margin: 0; padding: 10px calc(20px - .22em) 8px 20px; border-radius: 8px 8px 0 0;
  background: var(--lood); color: var(--kalk-wit);
  font-family: var(--f-tech); font-weight: 600; font-size: clamp(13px, 1.05vw, 14.5px); line-height: 1.3;
  letter-spacing: .22em; text-transform: uppercase;
}
:root:is([data-svv="6"], [data-svv="8"], [data-svv="9"], [data-svv="10"], [data-svv="11"], [data-svv="12"], [data-svv="13"], [data-svv="14"], [data-svv="15"], [data-svv="16"], [data-svv="17"], [data-svv="18"], [data-svv="19"], [data-svv="20"], [data-svv="21"], [data-svv="22"], [data-svv="23"], [data-svv="24"]) .svv6-lijst { margin: 0; padding: 0; list-style: none; border-top: 3px solid var(--lood); }
:root:is([data-svv="6"], [data-svv="8"], [data-svv="9"], [data-svv="10"], [data-svv="11"], [data-svv="12"], [data-svv="13"], [data-svv="14"], [data-svv="15"], [data-svv="16"], [data-svv="17"], [data-svv="18"], [data-svv="19"], [data-svv="20"], [data-svv="21"], [data-svv="22"], [data-svv="23"], [data-svv="24"]) .svv6-lijst > li + li { border-top: 1px solid var(--kalk-diep); }
:root:is([data-svv="6"], [data-svv="8"], [data-svv="9"], [data-svv="10"], [data-svv="11"], [data-svv="12"], [data-svv="13"], [data-svv="14"], [data-svv="15"], [data-svv="16"], [data-svv="17"], [data-svv="18"], [data-svv="19"], [data-svv="20"], [data-svv="21"], [data-svv="22"], [data-svv="23"], [data-svv="24"]) .svv6-vraag {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: clamp(18px, 2.4vw, 32px);
  padding: clamp(13px, 1.3vw, 18px) 0;
}
@media (hover: hover) {
  :root:is([data-svv="6"], [data-svv="8"], [data-svv="9"], [data-svv="10"], [data-svv="11"], [data-svv="12"], [data-svv="13"], [data-svv="14"], [data-svv="15"], [data-svv="16"], [data-svv="17"], [data-svv="18"], [data-svv="19"], [data-svv="20"], [data-svv="21"], [data-svv="22"], [data-svv="23"], [data-svv="24"]) .svv6-vraag:hover .svv6-kop { color: var(--dakpan); }
}
:root:is([data-svv="6"], [data-svv="8"], [data-svv="9"], [data-svv="10"], [data-svv="11"], [data-svv="12"], [data-svv="13"], [data-svv="14"], [data-svv="15"], [data-svv="16"], [data-svv="17"], [data-svv="18"], [data-svv="19"], [data-svv="20"], [data-svv="21"], [data-svv="22"], [data-svv="23"], [data-svv="24"]) .svv6-vraag:active .svv6-kop { color: var(--dakpan); }
@media (max-width: 560px) {
  :root:is([data-svv="6"], [data-svv="8"], [data-svv="9"], [data-svv="10"], [data-svv="11"], [data-svv="12"], [data-svv="13"], [data-svv="14"], [data-svv="15"], [data-svv="16"], [data-svv="17"], [data-svv="18"], [data-svv="19"], [data-svv="20"], [data-svv="21"], [data-svv="22"], [data-svv="23"], [data-svv="24"]) .svv6-groepen { gap: 30px; }
  :root:is([data-svv="6"], [data-svv="8"], [data-svv="9"], [data-svv="10"], [data-svv="11"], [data-svv="12"], [data-svv="13"], [data-svv="14"], [data-svv="15"], [data-svv="16"], [data-svv="17"], [data-svv="18"], [data-svv="19"], [data-svv="20"], [data-svv="21"], [data-svv="22"], [data-svv="23"], [data-svv="24"]) .svv6-label { padding: 8px calc(14px - .18em) 6px 14px; border-radius: 6px 6px 0 0; font-size: 12px; letter-spacing: .18em; }
  :root:is([data-svv="6"], [data-svv="8"], [data-svv="9"], [data-svv="10"], [data-svv="11"], [data-svv="12"], [data-svv="13"], [data-svv="14"], [data-svv="15"], [data-svv="16"], [data-svv="17"], [data-svv="18"], [data-svv="19"], [data-svv="20"], [data-svv="21"], [data-svv="22"], [data-svv="23"], [data-svv="24"]) .svv6-vraag { align-items: start; column-gap: 14px; padding: 14px 0 15px; }
  :root:is([data-svv="6"], [data-svv="8"], [data-svv="9"], [data-svv="10"], [data-svv="11"], [data-svv="12"], [data-svv="13"], [data-svv="14"], [data-svv="15"], [data-svv="16"], [data-svv="17"], [data-svv="18"], [data-svv="19"], [data-svv="20"], [data-svv="21"], [data-svv="22"], [data-svv="23"], [data-svv="24"]) .svv6-vraag > .ico { margin-top: calc((var(--f) * 1.16 - 18px) / 2); }
}

/* ---------------------------------------------------- 7 · 3c·3, mini icons
   At the head of each question a small line icon in the site's line style (the sprite's arrow and chevron: one thin
   stroke, square ends), in the accent colour, no frame, level with the header's first line. Whitespace between the
   rows, no rules: the icons are the starts the eye counts down. */
:root[data-svv="7"] .svv7-lijst { display: grid; gap: clamp(2px, .4vw, 6px); margin: 0; padding: 0; list-style: none; }
:root[data-svv="7"] .svv7-vraag {
  --i: clamp(28px, 2.6vw, 38px);
  display: grid; grid-template-columns: var(--i) minmax(0, 1fr) auto; align-items: start;
  column-gap: clamp(16px, 1.8vw, 26px);
  padding: clamp(14px, 1.5vw, 21px) clamp(2px, 1vw, 16px);
  border-radius: 10px; transition: background-color .22s;
}
:root[data-svv="7"] .svv7-ico {
  width: var(--i); height: var(--i); margin-top: calc((var(--f) * 1.08 - var(--i)) / 2);
  fill: none; color: var(--dakpan); transition: transform .3s cubic-bezier(.2, .7, .2, 1);
}
:root[data-svv="7"] .svv7-vraag > .ico { align-self: center; }
@media (hover: hover) {
  :root[data-svv="7"] .svv7-vraag:hover { background: var(--kalk-wit); }
  :root[data-svv="7"] .svv7-vraag:hover .svv7-kop { color: var(--dakpan); }
  :root[data-svv="7"] .svv7-vraag:hover .svv7-ico { transform: scale(1.08); }
}
:root[data-svv="7"] .svv7-vraag:active { background: var(--kalk-wit); }
@media (max-width: 560px) {
  :root[data-svv="7"] .svv7-lijst { gap: 0; }
  :root[data-svv="7"] .svv7-vraag { --i: 26px; grid-template-columns: var(--i) minmax(0, 1fr); column-gap: 13px; padding: 15px 2px 16px; }
  :root[data-svv="7"] .svv7-ico { margin-top: calc((var(--f) * 1.16 - var(--i)) / 2); }
  :root[data-svv="7"] .svv7-vraag > .ico { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  :root[data-svv] .svv3-foto, :root[data-svv] .svv2-vragen.is-open { transition: none; animation: none; }
  :root[data-svv="4"] .svv4-vraag, :root[data-svv="4"] .svv4-beeld img, :root[data-svv="4"] .svv4-vraag > .ico { transition: none; }
  :root:is([data-svv="5"], [data-svv="6"], [data-svv="7"], [data-svv="8"], [data-svv="9"], [data-svv="10"], [data-svv="11"], [data-svv="12"], [data-svv="13"], [data-svv="14"], [data-svv="15"], [data-svv="16"], [data-svv="17"], [data-svv="18"], [data-svv="19"], [data-svv="20"], [data-svv="21"], [data-svv="22"], [data-svv="23"], [data-svv="24"]) :is(.svv5-vraag, .svv6-vraag, .svv7-vraag, .svv7-ico, .ico) { transition: none; }
}


/* ==================================================== 3c·1+2 (state 8): the operator's combination, by hand (10-15)
   "the categories of 2, but with the text keyword highlight of 1": every state-6 rule also holds for 8 (above), plus
   v5's key word in the accent colour. */
:root[data-svv="8"][data-svv-vul="loodgieter"] .svv--8[data-svv-vul="loodgieter"],
:root[data-svv="8"][data-svv-vul="cv-ketel-vervangen"] .svv--8[data-svv-vul="cv-ketel-vervangen"] { display: block; }
:root:is([data-svv="8"], [data-svv="9"], [data-svv="10"], [data-svv="11"], [data-svv="12"], [data-svv="13"], [data-svv="14"], [data-svv="15"], [data-svv="16"], [data-svv="17"], [data-svv="18"], [data-svv="19"], [data-svv="20"], [data-svv="21"], [data-svv="22"], [data-svv="23"], [data-svv="24"]) .svv6-kern { color: var(--dakpan); }


/* ==================================================== 1+2 with pictures (states 9-11), by hand (10-15)
   The operator: "a soft filtered background picture for a category, or one soft background picture per line item, or
   lastly, a banner picture per category, where it's just a horizontal slice, so not full height." State 8 as it is
   (every rule above that holds for 8 holds for these), plus one of the three. */
:root[data-svv="9"][data-svv-vul="loodgieter"] .svv--9[data-svv-vul="loodgieter"],
:root[data-svv="9"][data-svv-vul="cv-ketel-vervangen"] .svv--9[data-svv-vul="cv-ketel-vervangen"],
:root[data-svv="10"][data-svv-vul="loodgieter"] .svv--10[data-svv-vul="loodgieter"],
:root[data-svv="10"][data-svv-vul="cv-ketel-vervangen"] .svv--10[data-svv-vul="cv-ketel-vervangen"],
:root[data-svv="11"][data-svv-vul="loodgieter"] .svv--11[data-svv-vul="loodgieter"],
:root[data-svv="11"][data-svv-vul="cv-ketel-vervangen"] .svv--11[data-svv-vul="cv-ketel-vervangen"] { display: block; }

/* the photo laid behind (9, 10): cover-cropped on its focus (focus.js), washed toward the page's ground */
:root:is([data-svv="9"], [data-svv="10"]) :is(.svv9-achter, .svv10-achter) {
  position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; background: var(--kalk);
}
:root:is([data-svv="9"], [data-svv="10"]) :is(.svv9-achter, .svv10-achter) img {
  position: absolute; inset: 0; display: block; width: 100%; height: 100%; max-width: none; object-fit: cover;
}

/* 9 · a soft picture behind each group: under the heavy rule, the group's photo blurred a little and washed, more on
   the side the questions start; its place and date small in the corner */
:root[data-svv="9"] .svv9-vlak { position: relative; isolation: isolate; padding-bottom: 30px; }
:root[data-svv="9"] .svv9-achter { border-radius: 0 0 10px 10px; }
:root[data-svv="9"] .svv9-achter img { filter: blur(2.5px) saturate(.75) contrast(1.1); transform: scale(1.05); opacity: .55; }
:root[data-svv="9"] .svv9-achter::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(244, 239, 231, .55) 0%, rgba(244, 239, 231, .25) 55%, rgba(244, 239, 231, 0) 100%);
}
:root[data-svv="9"] .svv9-vlak .svv6-lijst > li + li { border-top-color: rgba(38, 51, 58, .13); }
:root[data-svv="9"] .svv9-vlak .svv6-vraag { padding-left: clamp(16px, 2vw, 28px); padding-right: clamp(16px, 2vw, 28px); }
:root[data-svv="9"] .svv9-plek {
  position: absolute; right: clamp(12px, 1.6vw, 22px); bottom: 9px;
  display: flex; align-items: center; gap: 5px;
  font: 600 12px/1 var(--f-tech); letter-spacing: .02em; color: var(--lood-zacht);
}
:root[data-svv="9"] .svv9-plek::before {
  content: ''; width: 11px; height: 11px; background: var(--dakpan);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a7 7 0 00-7 7c0 5.2 7 13 7 13s7-7.8 7-13a7 7 0 00-7-7zm0 9.6a2.6 2.6 0 110-5.2 2.6 2.6 0 010 5.2z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a7 7 0 00-7 7c0 5.2 7 13 7 13s7-7.8 7-13a7 7 0 00-7-7zm0 9.6a2.6 2.6 0 110-5.2 2.6 2.6 0 010 5.2z'/%3E%3C/svg%3E") center / contain no-repeat;
}
@media (max-width: 560px) {
  :root[data-svv="9"] .svv9-vlak .svv6-vraag { padding-left: 14px; padding-right: 14px; }
  :root[data-svv="9"] .svv9-achter::after { background: rgba(244, 239, 231, .42); }
}

/* 10 · a soft picture behind each question: the question's own photo in its row, fading in from the right, a little
   clearer under the pointer */
:root[data-svv="10"] .svv6-vraag { position: relative; isolation: isolate; padding-left: clamp(2px, .6vw, 10px); padding-right: clamp(12px, 1.4vw, 20px); }
:root[data-svv="10"] .svv10-achter {
  left: 34%; background: none;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 72%); mask-image: linear-gradient(90deg, transparent 0%, #000 72%);
}
:root[data-svv="10"] .svv10-achter img { opacity: .4; filter: saturate(.8); transition: opacity .3s; }
@media (hover: hover) {
  :root[data-svv="10"] .svv6-vraag:hover .svv10-achter img { opacity: .6; }
}
@media (max-width: 560px) {
  :root[data-svv="10"] .svv6-vraag { padding-left: 2px; padding-right: 12px; }
  :root[data-svv="10"] .svv10-achter {
    left: 0; -webkit-mask-image: linear-gradient(90deg, transparent 10%, #000 100%); mask-image: linear-gradient(90deg, transparent 10%, #000 100%);
  }
  :root[data-svv="10"] .svv10-achter img { opacity: .34; }
}

/* 11 · a banner per group: the group's photo as a low slice above its questions, the dark tab standing on its foot,
   the place small at the other corner and his stamp, as on his other photos */
:root:is([data-svv="11"], [data-svv="12"], [data-svv="13"], [data-svv="14"], [data-svv="15"], [data-svv="16"], [data-svv="17"], [data-svv="18"], [data-svv="19"], [data-svv="20"], [data-svv="21"], [data-svv="22"], [data-svv="23"], [data-svv="24"]) .svv11-kop { position: relative; }
:root:is([data-svv="11"], [data-svv="12"], [data-svv="13"], [data-svv="14"], [data-svv="15"], [data-svv="16"], [data-svv="17"], [data-svv="18"], [data-svv="19"], [data-svv="20"], [data-svv="21"], [data-svv="22"], [data-svv="23"], [data-svv="24"]) .svv11-band { aspect-ratio: auto; height: clamp(120px, 12.5vw, 184px); border-radius: 10px 10px 0 0; }
:root:is([data-svv="11"], [data-svv="12"], [data-svv="13"], [data-svv="14"], [data-svv="15"], [data-svv="16"], [data-svv="17"], [data-svv="18"], [data-svv="19"], [data-svv="20"], [data-svv="21"], [data-svv="22"], [data-svv="23"], [data-svv="24"]) .svv11-kop > .svv6-label { position: absolute; left: 0; bottom: 0; z-index: 3; }
:root:is([data-svv="11"], [data-svv="12"], [data-svv="13"], [data-svv="14"], [data-svv="15"], [data-svv="16"], [data-svv="17"], [data-svv="18"], [data-svv="19"], [data-svv="20"], [data-svv="21"], [data-svv="22"], [data-svv="23"], [data-svv="24"]) .svv11-band .label:not(.label--plain) {
  left: auto; right: clamp(8px, 1vw, 14px); bottom: clamp(8px, 1vw, 12px); padding: 5px 10px 5px 8px; border-radius: 999px;
  background: rgba(26, 36, 41, .58);
}
:root:is([data-svv="11"], [data-svv="12"], [data-svv="13"], [data-svv="14"], [data-svv="15"], [data-svv="16"], [data-svv="17"], [data-svv="18"], [data-svv="19"], [data-svv="20"], [data-svv="21"], [data-svv="22"], [data-svv="23"], [data-svv="24"]) .svv11-band .label__waar { gap: 5px; font-size: 12.5px; }
:root:is([data-svv="11"], [data-svv="12"], [data-svv="13"], [data-svv="14"], [data-svv="15"], [data-svv="16"], [data-svv="17"], [data-svv="18"], [data-svv="19"], [data-svv="20"], [data-svv="21"], [data-svv="22"], [data-svv="23"], [data-svv="24"]) .svv11-band .label__waar::before { width: 12px; height: 12px; }
:root:is([data-svv="11"], [data-svv="12"], [data-svv="13"], [data-svv="14"], [data-svv="15"], [data-svv="16"], [data-svv="17"], [data-svv="18"], [data-svv="19"], [data-svv="20"], [data-svv="21"], [data-svv="22"], [data-svv="23"], [data-svv="24"]) .svv11-band .zegel { width: 54px; height: 54px; right: 12px; top: 10px; }
@media (max-width: 560px) {
  :root:is([data-svv="11"], [data-svv="12"], [data-svv="13"], [data-svv="14"], [data-svv="15"], [data-svv="16"], [data-svv="17"], [data-svv="18"], [data-svv="19"], [data-svv="20"], [data-svv="21"], [data-svv="22"], [data-svv="23"], [data-svv="24"]) .svv11-band { height: 112px; border-radius: 8px 8px 0 0; }
  :root:is([data-svv="11"], [data-svv="12"], [data-svv="13"], [data-svv="14"], [data-svv="15"], [data-svv="16"], [data-svv="17"], [data-svv="18"], [data-svv="19"], [data-svv="20"], [data-svv="21"], [data-svv="22"], [data-svv="23"], [data-svv="24"]) .svv11-band .label:not(.label--plain) { left: 8px; right: auto; bottom: auto; top: 8px; padding: 4px 8px 4px 7px; }
  :root:is([data-svv="11"], [data-svv="12"], [data-svv="13"], [data-svv="14"], [data-svv="15"], [data-svv="16"], [data-svv="17"], [data-svv="18"], [data-svv="19"], [data-svv="20"], [data-svv="21"], [data-svv="22"], [data-svv="23"], [data-svv="24"]) .svv11-band .label__waar { font-size: 11.5px; }
  :root:is([data-svv="11"], [data-svv="12"], [data-svv="13"], [data-svv="14"], [data-svv="15"], [data-svv="16"], [data-svv="17"], [data-svv="18"], [data-svv="19"], [data-svv="20"], [data-svv="21"], [data-svv="22"], [data-svv="23"], [data-svv="24"]) .svv11-band .zegel { width: 40px; height: 40px; right: 8px; top: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  :root[data-svv="10"] .svv10-achter img { transition: none; }
}


/* ==================================================== the banner with the group's name promoted (states 12-14), by hand (10-15)
   The operator: "The banner is the best one. I just think the category name is too small and demoted. Promote category
   name. 3 version i pick winner". Every rule of 11 holds for these (above); each sets the name its own way. */
:root[data-svv="12"][data-svv-vul="loodgieter"] .svv--12[data-svv-vul="loodgieter"],
:root[data-svv="12"][data-svv-vul="cv-ketel-vervangen"] .svv--12[data-svv-vul="cv-ketel-vervangen"],
:root[data-svv="13"][data-svv-vul="loodgieter"] .svv--13[data-svv-vul="loodgieter"],
:root[data-svv="13"][data-svv-vul="cv-ketel-vervangen"] .svv--13[data-svv-vul="cv-ketel-vervangen"],
:root[data-svv="14"][data-svv-vul="loodgieter"] .svv--14[data-svv-vul="loodgieter"],
:root[data-svv="14"][data-svv-vul="cv-ketel-vervangen"] .svv--14[data-svv-vul="cv-ketel-vervangen"] { display: block; }

/* 12 · the tab grown: the same dark tab on the photo's foot, in the same capitals, at about twice the size */
:root[data-svv="12"] .svv11-band { height: clamp(140px, 14vw, 204px); }
:root[data-svv="12"] .svv11-kop > .svv6-label {
  padding: clamp(14px, 1.3vw, 19px) calc(clamp(22px, 2.2vw, 32px) - .15em) clamp(12px, 1.1vw, 16px) clamp(22px, 2.2vw, 32px);
  border-radius: 10px 10px 0 0;
  font-size: clamp(17px, 1.75vw, 25px); line-height: 1.2; letter-spacing: .15em;
}
@media (max-width: 560px) {
  :root[data-svv="12"] .svv11-band { height: 132px; }
  :root[data-svv="12"] .svv11-kop > .svv6-label {
    max-width: 100%; padding: 11px calc(16px - .12em) 9px 16px; border-radius: 8px 8px 0 0;
    font-size: 15px; line-height: 1.25; letter-spacing: .12em;
  }
}

/* 13 · the name in the photo: large and white in the page's heading type, on a shade rising from the photo's foot;
   no tab. The place moves to the top corner, his stamp stays top right. */
:root[data-svv="13"] .svv11-band { height: clamp(160px, 16vw, 236px); }
:root[data-svv="13"] .svv11-kop > .svv6-label {
  right: 0; width: auto; max-width: none;
  padding: clamp(48px, 6vw, 92px) clamp(18px, 2.2vw, 32px) clamp(14px, 1.5vw, 22px);
  border-radius: 0;
  background: linear-gradient(to top, rgba(26, 36, 41, .84) 0%, rgba(26, 36, 41, .52) 45%, rgba(26, 36, 41, 0) 100%);
  font-family: inherit; font-weight: 800; font-size: clamp(28px, 3.3vw, 48px); line-height: 1.02;
  letter-spacing: -.03em; text-transform: none; text-wrap: balance; color: #fff; text-shadow: 0 1px 14px rgba(0, 0, 0, .25);
}
:root[data-svv="13"] .svv11-band .label:not(.label--plain) { left: clamp(8px, 1.1vw, 16px); right: auto; top: clamp(8px, 1vw, 14px); bottom: auto; }
@media (max-width: 560px) {
  :root[data-svv="13"] .svv11-band { height: 150px; border-radius: 8px 8px 0 0; }
  :root[data-svv="13"] .svv11-kop > .svv6-label { padding: 42px 14px 12px; font-size: clamp(22px, 6.4vw, 26px); line-height: 1.06; }
}

/* 14 · split: a dark panel beside the photo carries the name large, a short bar of the accent above it; name and photo
   share the banner as equals, the panel running into the heavy rule under them */
:root:is([data-svv="14"], [data-svv="15"], [data-svv="16"], [data-svv="17"], [data-svv="18"], [data-svv="19"], [data-svv="20"], [data-svv="21"], [data-svv="22"], [data-svv="23"], [data-svv="24"]) .svv11-kop {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); height: clamp(150px, 14.5vw, 212px);
}
:root:is([data-svv="14"], [data-svv="15"], [data-svv="16"], [data-svv="17"], [data-svv="18"], [data-svv="19"], [data-svv="20"], [data-svv="21"], [data-svv="22"], [data-svv="23"], [data-svv="24"]) .svv11-band { height: auto; border-radius: 0 10px 0 0; }
:root:is([data-svv="14"], [data-svv="15"], [data-svv="16"], [data-svv="17"], [data-svv="18"], [data-svv="19"], [data-svv="20"], [data-svv="21"], [data-svv="22"], [data-svv="23"], [data-svv="24"]) .svv11-kop > .svv6-label {
  position: static; order: -1; width: auto; max-width: none;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: clamp(18px, 2.2vw, 32px); border-radius: 10px 0 0 0;
  font-family: inherit; font-weight: 800; font-size: clamp(24px, 2.9vw, 42px); line-height: 1.04;
  letter-spacing: -.028em; text-transform: none; text-wrap: balance;
}
:root:is([data-svv="14"], [data-svv="15"], [data-svv="16"], [data-svv="17"], [data-svv="18"], [data-svv="19"], [data-svv="20"], [data-svv="21"], [data-svv="22"], [data-svv="23"], [data-svv="24"]) .svv11-kop > .svv6-label::before {
  content: ''; flex: none; width: 34px; height: 4px; margin-bottom: auto; border-radius: 2px; background: var(--dakpan-licht);
}
@media (max-width: 560px) {
  :root:is([data-svv="14"], [data-svv="15"], [data-svv="16"], [data-svv="17"], [data-svv="18"], [data-svv="19"], [data-svv="20"], [data-svv="21"], [data-svv="22"], [data-svv="23"], [data-svv="24"]) .svv11-kop { grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr); height: 140px; }
  :root:is([data-svv="14"], [data-svv="15"], [data-svv="16"], [data-svv="17"], [data-svv="18"], [data-svv="19"], [data-svv="20"], [data-svv="21"], [data-svv="22"], [data-svv="23"], [data-svv="24"]) .svv11-band { border-radius: 0 8px 0 0; }
  :root:is([data-svv="14"], [data-svv="15"], [data-svv="16"], [data-svv="17"], [data-svv="18"], [data-svv="19"], [data-svv="20"], [data-svv="21"], [data-svv="22"], [data-svv="23"], [data-svv="24"]) .svv11-kop > .svv6-label { padding: 14px; border-radius: 8px 0 0 0; font-size: 20px; line-height: 1.1; letter-spacing: -.015em; }
  :root:is([data-svv="14"], [data-svv="15"], [data-svv="16"], [data-svv="17"], [data-svv="18"], [data-svv="19"], [data-svv="20"], [data-svv="21"], [data-svv="22"], [data-svv="23"], [data-svv="24"]) .svv11-kop > .svv6-label::before { width: 26px; height: 3px; }
  :root:is([data-svv="14"], [data-svv="15"], [data-svv="16"], [data-svv="17"], [data-svv="18"], [data-svv="19"], [data-svv="20"], [data-svv="21"], [data-svv="22"], [data-svv="23"], [data-svv="24"]) .svv11-band .label:not(.label--plain) { top: auto; bottom: 8px; }
}


/* ==================================================== split with "iets anders" in every group (state 15), by hand (10-15)
   The operator: "every category needs a 'iets anders' wording that fits for that category. If you press that, it
   scrolls you down to the contact section at the bottom of the page. This can just be a copy of the one we have at the
   home." Every rule of 14 holds (above). The group's own "something else" is its last row, a step quieter than the
   questions, its arrow pointing down; the homepage's contact section (style.css styles it) closes the page. */
:root[data-svv="15"][data-svv-vul="loodgieter"] .svv--15[data-svv-vul="loodgieter"],
:root[data-svv="15"][data-svv-vul="cv-ketel-vervangen"] .svv--15[data-svv-vul="cv-ketel-vervangen"] { display: block; }
.svv-contact { display: none; }
:root:is([data-svv="15"], [data-svv="16"], [data-svv="17"], [data-svv="18"], [data-svv="19"], [data-svv="20"], [data-svv="21"], [data-svv="22"], [data-svv="23"], [data-svv="24"]) .svv-contact { display: block; }

:root:is([data-svv="15"], [data-svv="16"], [data-svv="17"], [data-svv="18"], [data-svv="19"], [data-svv="20"], [data-svv="21"], [data-svv="22"], [data-svv="23"], [data-svv="24"]) .svv6-naar { padding-top: clamp(12px, 1.1vw, 15px); padding-bottom: clamp(12px, 1.1vw, 15px); }
:root:is([data-svv="15"], [data-svv="16"], [data-svv="17"], [data-svv="18"], [data-svv="19"], [data-svv="20"], [data-svv="21"], [data-svv="22"], [data-svv="23"], [data-svv="24"]) .svv6-naar .svv6-kop {
  font-weight: 700; font-size: calc(var(--f) * .66); letter-spacing: -.015em; color: var(--lood-zacht);
}
:root:is([data-svv="15"], [data-svv="16"], [data-svv="17"], [data-svv="18"], [data-svv="19"], [data-svv="20"], [data-svv="21"], [data-svv="22"], [data-svv="23"], [data-svv="24"]) .svv6-naar > .ico { transform: rotate(90deg); }
@media (hover: hover) {
  :root:is([data-svv="15"], [data-svv="16"], [data-svv="17"], [data-svv="18"], [data-svv="19"], [data-svv="20"], [data-svv="21"], [data-svv="22"], [data-svv="23"], [data-svv="24"]) .svv6-naar:hover > .ico { transform: rotate(90deg) translateX(4px); }
}
@media (max-width: 560px) {
  :root:is([data-svv="15"], [data-svv="16"], [data-svv="17"], [data-svv="18"], [data-svv="19"], [data-svv="20"], [data-svv="21"], [data-svv="22"], [data-svv="23"], [data-svv="24"]) .svv6-naar .svv6-kop { font-size: 17px; line-height: 1.25; }
  :root:is([data-svv="15"], [data-svv="16"], [data-svv="17"], [data-svv="18"], [data-svv="19"], [data-svv="20"], [data-svv="21"], [data-svv="22"], [data-svv="23"], [data-svv="24"]) .svv6-naar > .ico { margin-top: calc((17px * 1.25 - 18px) / 2); }
}


/* ==================================================== split + iets anders + a fourth group (states 16-18), by hand (10-15)
   The operator: "And now a new category at the end "Help! Mijn klus staat hier niet bij!" An that leads to diensten as
   category and subsections as pages thing, that we also have on the subdienst paginas. Design 3 versions of how this
   could look." Every rule of 15 holds for these (above). The fourth group has 15's split head on one photo of his;
   what stands under it is each state's own: 16 the services as rows of the group that fold open to their jobs, 17 one
   row that leads down to 3A as the subpages have it, 18 the services as tiles of his photos, the jobs opening below. */
:root[data-svv="16"][data-svv-vul="loodgieter"] .svv--16[data-svv-vul="loodgieter"],
:root[data-svv="16"][data-svv-vul="cv-ketel-vervangen"] .svv--16[data-svv-vul="cv-ketel-vervangen"],
:root[data-svv="17"][data-svv-vul="loodgieter"] .svv--17[data-svv-vul="loodgieter"],
:root[data-svv="17"][data-svv-vul="cv-ketel-vervangen"] .svv--17[data-svv-vul="cv-ketel-vervangen"],
:root[data-svv="18"][data-svv-vul="loodgieter"] .svv--18[data-svv-vul="loodgieter"],
:root[data-svv="18"][data-svv-vul="cv-ketel-vervangen"] .svv--18[data-svv-vul="cv-ketel-vervangen"] { display: block; }
.svv-d3 { display: none; }
:root[data-svv="17"][data-svv-vul="loodgieter"] .svv-d3[data-svv-vul="loodgieter"],
:root[data-svv="17"][data-svv-vul="cv-ketel-vervangen"] .svv-d3[data-svv-vul="cv-ketel-vervangen"] { display: block; }

/* the jobs' "Alles over …" (16, 18): the service's own page, in the accent, after its jobs */
:root:is([data-svv="16"], [data-svv="18"], [data-svv="19"], [data-svv="20"], [data-svv="21"], [data-svv="22"], [data-svv="23"], [data-svv="24"]) :is(.svv16-alles, .svv18-alles) {
  display: inline-flex; align-items: center; gap: 8px; margin-top: clamp(12px, 1.2vw, 16px);
  font-weight: 700; font-size: clamp(15.5px, 1.15vw, 17px); color: var(--dakpan); text-decoration: none;
}
:root:is([data-svv="16"], [data-svv="18"], [data-svv="19"], [data-svv="20"], [data-svv="21"], [data-svv="22"], [data-svv="23"], [data-svv="24"]) :is(.svv16-alles, .svv18-alles) > .ico { width: 16px; height: 16px; transition: transform .25s cubic-bezier(.2, .7, .2, 1); }
@media (hover: hover) {
  :root:is([data-svv="16"], [data-svv="18"], [data-svv="19"], [data-svv="20"], [data-svv="21"], [data-svv="22"], [data-svv="23"], [data-svv="24"]) :is(.svv16-alles, .svv18-alles):hover { text-decoration: underline; text-underline-offset: .18em; }
  :root:is([data-svv="16"], [data-svv="18"], [data-svv="19"], [data-svv="20"], [data-svv="21"], [data-svv="22"], [data-svv="23"], [data-svv="24"]) :is(.svv16-alles, .svv18-alles):hover > .ico { transform: translateX(4px); }
}

/* 16 · in the list: a service is a row of the group, its name set as the questions are, how many jobs it holds beside
   it and a chevron; open, its jobs stand under it on a thin accent line, two columns wide on a computer */
:root:is([data-svv="16"], [data-svv="19"], [data-svv="20"], [data-svv="21"], [data-svv="22"], [data-svv="23"], [data-svv="24"]) .svv16-sum { grid-template-columns: minmax(0, 1fr) auto auto; cursor: pointer; list-style: none; -webkit-tap-highlight-color: transparent; }
:root:is([data-svv="16"], [data-svv="19"], [data-svv="20"], [data-svv="21"], [data-svv="22"], [data-svv="23"], [data-svv="24"]) .svv16-sum::-webkit-details-marker { display: none; }
:root:is([data-svv="16"], [data-svv="19"], [data-svv="20"], [data-svv="21"], [data-svv="22"], [data-svv="23"], [data-svv="24"]) .svv16-sum:focus-visible { outline-offset: 2px; }
:root:is([data-svv="16"], [data-svv="19"], [data-svv="20"], [data-svv="21"], [data-svv="22"], [data-svv="23"], [data-svv="24"]) .svv16-tel {
  font-family: var(--f-tech); font-weight: 600; font-size: 13px; line-height: 1.2; letter-spacing: .16em;
  text-transform: uppercase; color: var(--lood-zacht); white-space: nowrap;
}
:root:is([data-svv="16"], [data-svv="19"], [data-svv="20"], [data-svv="21"], [data-svv="22"], [data-svv="23"], [data-svv="24"]) .svv16-chev { width: 22px; height: 22px; color: var(--dakpan); transition: transform .22s; }
:root:is([data-svv="16"], [data-svv="19"], [data-svv="20"], [data-svv="21"], [data-svv="22"], [data-svv="23"], [data-svv="24"]) .svv16-d[open] > .svv16-sum .svv16-chev { transform: rotate(180deg); }
:root:is([data-svv="16"], [data-svv="19"], [data-svv="20"], [data-svv="21"], [data-svv="22"], [data-svv="23"], [data-svv="24"]) .svv16-d[open] > .svv16-sum .svv6-kop { color: var(--dakpan); }
:root:is([data-svv="16"], [data-svv="19"], [data-svv="20"], [data-svv="21"], [data-svv="22"], [data-svv="23"], [data-svv="24"]) .svv16-in {
  margin: 0 0 clamp(16px, 1.6vw, 22px); padding: 2px 0 2px clamp(16px, 1.8vw, 26px); border-left: 2px solid var(--dakpan-licht);
}
:root:is([data-svv="16"], [data-svv="19"], [data-svv="20"], [data-svv="21"], [data-svv="22"], [data-svv="23"], [data-svv="24"]) .svv16-d[open] > .svv16-in { animation: svv16-open .22s ease-out; }
@keyframes svv16-open { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
:root:is([data-svv="16"], [data-svv="19"], [data-svv="20"], [data-svv="21"], [data-svv="22"], [data-svv="23"], [data-svv="24"]) .svv16-klussen {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(22px, 2.6vw, 44px);
  margin: 0; padding: 0; list-style: none;
}
:root:is([data-svv="16"], [data-svv="19"], [data-svv="20"], [data-svv="21"], [data-svv="22"], [data-svv="23"], [data-svv="24"]) .svv16-klus {
  display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center; column-gap: 14px;
  padding: 9px 0; border-bottom: 1px solid var(--kalk-diep);
  color: var(--lood); text-decoration: none; -webkit-tap-highlight-color: transparent;
}
:root:is([data-svv="16"], [data-svv="19"], [data-svv="20"], [data-svv="21"], [data-svv="22"], [data-svv="23"], [data-svv="24"]) .svv16-duim { display: block; width: 44px; height: 44px; border-radius: 6px; overflow: hidden; background: var(--kalk-diep); }
:root:is([data-svv="16"], [data-svv="19"], [data-svv="20"], [data-svv="21"], [data-svv="22"], [data-svv="23"], [data-svv="24"]) .svv16-duim img { display: block; width: 100%; height: 100%; object-fit: cover; }
:root:is([data-svv="16"], [data-svv="19"], [data-svv="20"], [data-svv="21"], [data-svv="22"], [data-svv="23"], [data-svv="24"]) .svv16-duim--leeg { background: var(--lood); }
:root:is([data-svv="16"], [data-svv="19"], [data-svv="20"], [data-svv="21"], [data-svv="22"], [data-svv="23"], [data-svv="24"]) .svv16-duim--leeg img { padding: 9px; object-fit: contain; }
:root:is([data-svv="16"], [data-svv="19"], [data-svv="20"], [data-svv="21"], [data-svv="22"], [data-svv="23"], [data-svv="24"]) .svv16-naam { min-width: 0; font-weight: 700; font-size: clamp(16px, 1.25vw, 18.5px); line-height: 1.25; letter-spacing: -.01em; }
:root:is([data-svv="16"], [data-svv="19"], [data-svv="20"], [data-svv="21"], [data-svv="22"], [data-svv="23"], [data-svv="24"]) .svv16-klus > .ico { width: 18px; height: 18px; color: var(--dakpan); transition: transform .25s cubic-bezier(.2, .7, .2, 1); }
@media (hover: hover) {
  :root:is([data-svv="16"], [data-svv="19"], [data-svv="20"], [data-svv="21"], [data-svv="22"], [data-svv="23"], [data-svv="24"]) .svv16-sum:hover .svv6-kop { color: var(--dakpan); }
  :root:is([data-svv="16"], [data-svv="19"], [data-svv="20"], [data-svv="21"], [data-svv="22"], [data-svv="23"], [data-svv="24"]) .svv16-klus:hover .svv16-naam { color: var(--dakpan); }
  :root:is([data-svv="16"], [data-svv="19"], [data-svv="20"], [data-svv="21"], [data-svv="22"], [data-svv="23"], [data-svv="24"]) .svv16-klus:hover > .ico { transform: translateX(4px); }
}
:root:is([data-svv="16"], [data-svv="19"], [data-svv="20"], [data-svv="21"], [data-svv="22"], [data-svv="23"], [data-svv="24"]) .svv16-klus:active .svv16-naam { color: var(--dakpan); }
@media (max-width: 720px) {
  :root:is([data-svv="16"], [data-svv="19"], [data-svv="20"], [data-svv="21"], [data-svv="22"], [data-svv="23"], [data-svv="24"]) .svv16-klussen { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  :root:is([data-svv="16"], [data-svv="19"], [data-svv="20"], [data-svv="21"], [data-svv="22"], [data-svv="23"], [data-svv="24"]) .svv16-sum { align-items: center; column-gap: 12px; }
  :root:is([data-svv="16"], [data-svv="19"], [data-svv="20"], [data-svv="21"], [data-svv="22"], [data-svv="23"], [data-svv="24"]) .svv16-sum > .svv16-chev { width: 18px; height: 18px; margin-top: 0; }
  :root:is([data-svv="16"], [data-svv="19"], [data-svv="20"], [data-svv="21"], [data-svv="22"], [data-svv="23"], [data-svv="24"]) .svv16-tel { font-size: 11.5px; letter-spacing: .12em; }
  :root:is([data-svv="16"], [data-svv="19"], [data-svv="20"], [data-svv="21"], [data-svv="22"], [data-svv="23"], [data-svv="24"]) .svv16-in { padding-left: 14px; }
  :root:is([data-svv="16"], [data-svv="19"], [data-svv="20"], [data-svv="21"], [data-svv="22"], [data-svv="23"], [data-svv="24"]) .svv16-klus { grid-template-columns: 40px minmax(0, 1fr) auto; column-gap: 12px; padding: 8px 0; }
  :root:is([data-svv="16"], [data-svv="19"], [data-svv="20"], [data-svv="21"], [data-svv="22"], [data-svv="23"], [data-svv="24"]) .svv16-duim { width: 40px; height: 40px; }
  :root:is([data-svv="16"], [data-svv="19"], [data-svv="20"], [data-svv="21"], [data-svv="22"], [data-svv="23"], [data-svv="24"]) .svv16-naam { font-size: 16px; }
}

/* 17 · down to the band: one row, set as the questions are, its arrow pointing down to 3A (vouw/d3.css styles it) */
:root[data-svv="17"] .svv17-naar > .ico { transform: rotate(90deg); }
@media (hover: hover) {
  :root[data-svv="17"] .svv17-naar:hover > .ico { transform: rotate(90deg) translateX(4px); }
}

/* 18 · tiles: the six services as tiles of his photos, the name on a shade at the foot; a tap opens that service's jobs
   under the tiles as rows set like the questions (a step smaller), one service at a time; the others dim while one is
   open. Six across on a computer, three on a tablet, two on a phone. */
:root[data-svv="18"] .svv18-vak { border-top: 3px solid var(--lood); padding-top: clamp(14px, 1.5vw, 20px); }
:root[data-svv="18"] .svv18-tegels {
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: clamp(8px, .9vw, 14px);
  margin: 0; padding: 0; list-style: none;
}
:root[data-svv="18"] .svv18-tegel {
  position: relative; display: block; width: 100%; aspect-ratio: 5 / 6; margin: 0; padding: 0; border: 0;
  border-radius: 10px; overflow: hidden; background: var(--lood); color: var(--kalk-wit);
  font: inherit; text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: opacity .2s, box-shadow .2s;
}
:root[data-svv="18"] .svv18-tegel:focus-visible { outline: 3px solid var(--dakpan); outline-offset: 3px; }
:root[data-svv="18"] .svv18-foto { position: absolute; inset: 0; display: block; }
:root[data-svv="18"] .svv18-foto img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .45s cubic-bezier(.2, .7, .2, 1), filter .2s; }
:root[data-svv="18"] .svv18-foto--leeg img { padding: 26%; object-fit: contain; }
:root[data-svv="18"] .svv18-plek {
  position: absolute; left: 8px; top: 8px; z-index: 1; padding: 4px 8px; border-radius: 999px;
  background: rgba(26, 36, 41, .55); color: #fff; font: 600 11px/1.1 var(--f-tech); letter-spacing: .02em; white-space: nowrap;
}
:root[data-svv="18"] .svv18-onder {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; display: flex; flex-direction: column; gap: 3px;
  padding: clamp(34px, 3.4vw, 48px) clamp(11px, 1vw, 14px) clamp(11px, 1.1vw, 15px);
  background: linear-gradient(to top, rgba(26, 36, 41, .9) 0%, rgba(26, 36, 41, .62) 55%, rgba(26, 36, 41, 0) 100%);
}
:root[data-svv="18"] .svv18-naam { font-weight: 800; font-size: clamp(15.5px, 1.2vw, 17.5px); line-height: 1.1; letter-spacing: -.015em; }
:root[data-svv="18"] .svv18-tel { padding-right: 24px; font: 600 11.5px/1.2 var(--f-tech); letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 252, 247, .78); }
:root[data-svv="18"] .svv18-chev {
  position: absolute; right: clamp(10px, 1vw, 14px); bottom: clamp(10px, 1.05vw, 14px); z-index: 1;
  width: 18px; height: 18px; color: var(--dakpan-licht); transition: transform .22s;
}
:root[data-svv="18"] .svv18-tegel[aria-expanded="true"] { box-shadow: inset 0 -5px 0 var(--dakpan); }
:root[data-svv="18"] .svv18-tegel[aria-expanded="true"] .svv18-chev { transform: rotate(180deg); }
:root[data-svv="18"] .svv18-tegels:has([aria-expanded="true"]) .svv18-tegel[aria-expanded="false"] { opacity: .6; }
@media (hover: hover) {
  :root[data-svv="18"] .svv18-tegel:hover .svv18-foto img { transform: scale(1.05); }
  :root[data-svv="18"] .svv18-tegels:has([aria-expanded="true"]) .svv18-tegel[aria-expanded="false"]:hover { opacity: 1; }
}
:root[data-svv="18"] .svv18-paneel { margin-top: clamp(12px, 1.4vw, 20px); animation: svv16-open .22s ease-out; }
html:not(.js):root[data-svv="18"] .svv18-paneel[hidden] { display: block; }
:root[data-svv="18"] .svv18-klussen {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(22px, 2.6vw, 44px); border-top: 0;
}
:root[data-svv="18"] .svv18-klussen > li + li { border-top: 0; }
:root[data-svv="18"] .svv18-klussen > li { border-bottom: 1px solid var(--kalk-diep); }
:root[data-svv="18"] .svv18-klus .svv6-kop { font-size: calc(var(--f) * .7); letter-spacing: -.02em; }
:root[data-svv="18"] .svv18-klus { padding: clamp(11px, 1.1vw, 15px) 0; }
@media (max-width: 1199px) {
  :root[data-svv="18"] .svv18-tegels { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  :root[data-svv="18"] .svv18-tegel { aspect-ratio: 4 / 3; }
}
@media (max-width: 720px) {
  :root[data-svv="18"] .svv18-klussen { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  :root[data-svv="18"] .svv18-tegels { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  :root[data-svv="18"] .svv18-tegel { aspect-ratio: 5 / 4; border-radius: 8px; }
  :root[data-svv="18"] .svv18-onder { padding: 28px 10px 9px 11px; }
  :root[data-svv="18"] .svv18-naam { font-size: 15.5px; }
  :root[data-svv="18"] .svv18-tel { font-size: 10.5px; letter-spacing: .12em; }
  :root[data-svv="18"] .svv18-chev { width: 16px; height: 16px; right: 9px; bottom: 9px; }
  :root[data-svv="18"] .svv18-plek { left: 6px; top: 6px; font-size: 10.5px; padding: 3px 7px; }
  :root[data-svv="18"] .svv18-klus .svv6-kop { font-size: 17px; line-height: 1.25; }
  :root[data-svv="18"] .svv18-klus > .ico { margin-top: calc((17px * 1.25 - 18px) / 2); }
}

@media (prefers-reduced-motion: reduce) {
  :root:is([data-svv="16"], [data-svv="19"], [data-svv="20"], [data-svv="21"], [data-svv="22"], [data-svv="23"], [data-svv="24"]) .svv16-d[open] > .svv16-in, :root[data-svv="18"] .svv18-paneel { animation: none; }
  :root:is([data-svv="16"], [data-svv="19"], [data-svv="20"], [data-svv="21"], [data-svv="22"], [data-svv="23"], [data-svv="24"]) :is(.svv16-chev, .svv16-klus > .ico), :root[data-svv="18"] :is(.svv18-tegel, .svv18-foto img, .svv18-chev) { transition: none; }
}


/* ==================================================== help in the list, the fourth group set apart (states 19-21), by hand (10-15)
   The operator, on 16: "Help:list is best, but the section category is not distinct enough, you may just read over it.
   3 improvements I pick the best." Every rule of 16 holds for these (above): the same rows, the same jobs folding
   open. Only how the fourth group stands apart from the three groups of questions above it differs. */
:root[data-svv="19"][data-svv-vul="loodgieter"] .svv--19[data-svv-vul="loodgieter"],
:root[data-svv="19"][data-svv-vul="cv-ketel-vervangen"] .svv--19[data-svv-vul="cv-ketel-vervangen"],
:root[data-svv="20"][data-svv-vul="loodgieter"] .svv--20[data-svv-vul="loodgieter"],
:root[data-svv="20"][data-svv-vul="cv-ketel-vervangen"] .svv--20[data-svv-vul="cv-ketel-vervangen"],
:root[data-svv="21"][data-svv-vul="loodgieter"] .svv--21[data-svv-vul="loodgieter"],
:root[data-svv="21"][data-svv-vul="cv-ketel-vervangen"] .svv--21[data-svv-vul="cv-ketel-vervangen"] { display: block; }

/* 19 · a ground of its own: the whole group stands on a warm wash of the accent, the head and rows unchanged; the wash
   reaches past the column by its own padding, so the words stay in line with the groups above (on a phone, edge to edge) */
:root[data-svv="19"] .svv-hulp {
  --p: clamp(16px, 2vw, 28px);
  margin: clamp(4px, .8vw, 12px) calc(-1 * var(--p)) 0;
  padding: var(--p) var(--p) calc(var(--p) * .5);
  border-radius: 16px; background: var(--dakpan-wash);
}
:root[data-svv="19"] .svv-hulp :is(.svv6-lijst > li + li, .svv16-klus) { border-color: rgba(154, 73, 46, .17); }
:root[data-svv="19"] .svv-hulp .svv16-duim { background: rgba(154, 73, 46, .12); }
@media (max-width: 560px) {
  :root[data-svv="19"] .svv-hulp { --p: var(--gut); border-radius: 0; }
}

/* 20 · the head in the accent: the panel beside the photo turns from dark to the accent, "Help!" on a line of its own
   about twice the name's size, the rest of the name small under it; the heavy rule under the head in the accent too */
:root[data-svv="20"] .svv-hulp .svv11-kop > .svv6-label { background: var(--dakpan); }
:root[data-svv="20"] .svv-hulp .svv11-kop > .svv6-label::before { background: var(--kalk-wit); opacity: .75; }
:root[data-svv="20"] .svv-hulp .svv-hulp-uit { display: block; font-size: clamp(40px, 5.4vw, 78px); line-height: .92; letter-spacing: -.04em; }
:root[data-svv="20"] .svv-hulp .svv-hulp-rest { display: block; margin-top: .45em; font-size: clamp(16px, 1.75vw, 25px); line-height: 1.15; letter-spacing: -.012em; }
:root[data-svv="20"] .svv-hulp .svv6-lijst { border-top-color: var(--dakpan); }

/* 21 · a heading of its own: no photo and no panel; after a thin rule and more space, a disc of the accent with a
   question mark, and under it the name centred and large, "Help!" in the accent; the rows as in 16 */
:root:is([data-svv="21"], [data-svv="22"], [data-svv="23"], [data-svv="24"]) .svv-hulp { margin-top: clamp(8px, 1.6vw, 24px); padding-top: clamp(34px, 4vw, 58px); border-top: 1px solid var(--kalk-rand); }
:root:is([data-svv="21"], [data-svv="22"], [data-svv="23"], [data-svv="24"]) .svv21-kop { display: grid; justify-items: center; gap: clamp(12px, 1.2vw, 16px); margin-bottom: clamp(18px, 2vw, 28px); text-align: center; }
:root:is([data-svv="21"], [data-svv="22"], [data-svv="23"], [data-svv="24"]) .svv21-teken {
  display: grid; place-items: center; width: clamp(52px, 4.4vw, 64px); aspect-ratio: 1; border-radius: 50%;
  background: var(--dakpan); color: var(--kalk-wit);
}
:root:is([data-svv="21"], [data-svv="22"], [data-svv="23"], [data-svv="24"]) .svv21-teken svg { width: 60%; height: 60%; }
:root:is([data-svv="21"], [data-svv="22"], [data-svv="23"], [data-svv="24"]) .svv21-kop > .svv6-label {
  width: auto; max-width: 16em; padding: 0; border-radius: 0; background: none; color: var(--lood);
  font-family: inherit; font-weight: 800; font-size: clamp(28px, 3.2vw, 44px); line-height: 1.06;
  letter-spacing: -.03em; text-transform: none; text-wrap: balance;
}
:root:is([data-svv="21"], [data-svv="22"], [data-svv="23"], [data-svv="24"]) .svv21-kop .svv-hulp-uit { color: var(--dakpan); }
@media (max-width: 560px) {
  :root:is([data-svv="21"], [data-svv="22"], [data-svv="23"], [data-svv="24"]) .svv21-kop > .svv6-label { font-size: 26px; }
}


/* ==================================================== under the questions (state 21 on), by hand (10-15)
   The operator: "a rating section, projecten section, FAQ section (with the hidden responsiveness) and also, at the
   bottom, the contact form should be the multi-step form". vouw/v-onder.py writes the block (the homepage's reviews,
   Projecten, the service page's questions, the werkgebied strip, the subpages' bottom form z1), once per fill where it
   differs; their own styles do the rest (reviews, projecten, vragen, z.css). The homepage's contact section, copied
   for 15-20, gives way to the form. The form of the fill not on show is laid out but hidden, so z.js measures its
   card at the right width and a switch of fill finds it the right height. */
.svv-onder { display: none; }
:root:is([data-svv="21"], [data-svv="22"], [data-svv="23"], [data-svv="24"]) .svv-onder { display: block; }
:root:is([data-svv="21"], [data-svv="22"], [data-svv="23"], [data-svv="24"]) .svv-contact { display: none; }
.svv-onder__vul { display: none; }
:root[data-svv-vul="loodgieter"] .svv-onder__vul[data-svv-vul="loodgieter"],
:root[data-svv-vul="cv-ketel-vervangen"] .svv-onder__vul[data-svv-vul="cv-ketel-vervangen"] { display: block; }
.svv-onder__form { position: relative; overflow: clip; }
.svv-onder__form > .svv-onder__vul { display: block; }
:root[data-svv-vul="loodgieter"] .svv-onder__form > .svv-onder__vul:not([data-svv-vul="loodgieter"]),
:root[data-svv-vul="cv-ketel-vervangen"] .svv-onder__form > .svv-onder__vul:not([data-svv-vul="cv-ketel-vervangen"]) {
  position: absolute; inset: 0 0 auto 0; visibility: hidden; pointer-events: none;
}
/* the card shows its current step with visibility: visible, which would show through a hidden parent */
:root[data-svv-vul="loodgieter"] .svv-onder__form > .svv-onder__vul:not([data-svv-vul="loodgieter"]) *,
:root[data-svv-vul="cv-ketel-vervangen"] .svv-onder__form > .svv-onder__vul:not([data-svv-vul="cv-ketel-vervangen"]) * { visibility: hidden !important; }


/* ==================================================== the help list's rows set apart (states 22-24), by hand (10-15)
   The operator, on 21: "I still think now the list items look too similar to the lists/questions above". Every rule
   of 21 holds for these (above): the heading of its own, the jobs that fold open, the form underneath. Only how the
   six services stand apart from the questions differs. */
:root[data-svv="22"][data-svv-vul="loodgieter"] .svv--22[data-svv-vul="loodgieter"],
:root[data-svv="22"][data-svv-vul="cv-ketel-vervangen"] .svv--22[data-svv-vul="cv-ketel-vervangen"],
:root[data-svv="23"][data-svv-vul="loodgieter"] .svv--23[data-svv-vul="loodgieter"],
:root[data-svv="23"][data-svv-vul="cv-ketel-vervangen"] .svv--23[data-svv-vul="cv-ketel-vervangen"],
:root[data-svv="24"][data-svv-vul="loodgieter"] .svv--24[data-svv-vul="loodgieter"],
:root[data-svv="24"][data-svv-vul="cv-ketel-vervangen"] .svv--24[data-svv-vul="cv-ketel-vervangen"] { display: block; }

/* 22 · buttons: light boxes on a thin frame, three across (two on a phone), the name not much larger than body text
   and the count under it; open, the box takes the accent's wash and its jobs stand under the buttons (vouw/v.js, 18's) */
:root[data-svv="22"] .svv22-knoppen {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(10px, 1vw, 14px);
  margin: 0; padding: 0; list-style: none;
}
:root[data-svv="22"] .svv22-knop {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto; align-items: center;
  column-gap: 12px; row-gap: 4px; width: 100%; height: 100%; margin: 0;
  padding: clamp(14px, 1.4vw, 20px) clamp(14px, 1.5vw, 22px);
  border: 1px solid var(--kalk-rand); border-radius: 12px; background: var(--kalk-wit); color: var(--lood);
  font: inherit; text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: border-color .2s, background-color .2s;
}
:root[data-svv="22"] .svv22-knop:focus-visible { outline: 3px solid var(--dakpan); outline-offset: 3px; }
:root[data-svv="22"] .svv22-naam { grid-column: 1; font-weight: 700; font-size: clamp(17px, 1.4vw, 20px); line-height: 1.2; letter-spacing: -.012em; }
:root[data-svv="22"] .svv22-tel {
  grid-column: 1; font-family: var(--f-tech); font-weight: 600; font-size: 12px; line-height: 1.2; letter-spacing: .14em;
  text-transform: uppercase; color: var(--lood-zacht);
}
:root[data-svv="22"] .svv22-chev { grid-column: 2; grid-row: 1 / 3; width: 20px; height: 20px; color: var(--dakpan); transition: transform .22s; }
:root[data-svv="22"] .svv22-knop[aria-expanded="true"] { border-color: var(--dakpan); background: var(--dakpan-wash); }
:root[data-svv="22"] .svv22-knop[aria-expanded="true"] .svv22-naam { color: var(--dakpan-diep); }
:root[data-svv="22"] .svv22-knop[aria-expanded="true"] .svv22-chev { transform: rotate(180deg); }
@media (hover: hover) {
  :root[data-svv="22"] .svv22-knop:hover { border-color: var(--dakpan); }
}
:root[data-svv="22"] .svv22-paneel {
  margin-top: clamp(14px, 1.6vw, 22px); padding: 2px 0 2px clamp(16px, 1.8vw, 26px); border-left: 2px solid var(--dakpan-licht);
  animation: svv16-open .22s ease-out;
}
html:not(.js):root[data-svv="22"] .svv22-paneel[hidden] { display: block; }
@media (max-width: 560px) {
  :root[data-svv="22"] .svv22-knoppen { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  :root[data-svv="22"] .svv22-knop { grid-template-rows: 1fr auto; align-items: start; column-gap: 8px; row-gap: 6px; padding: 12px 12px 11px 13px; border-radius: 10px; }
  :root[data-svv="22"] .svv22-naam { grid-column: 1 / -1; font-size: 15.5px; overflow-wrap: break-word; hyphens: manual; }
  :root[data-svv="22"] .svv22-tel { align-self: end; font-size: 10.5px; letter-spacing: .12em; }
  :root[data-svv="22"] .svv22-chev { grid-row: 2; align-self: end; width: 16px; height: 16px; }
  :root[data-svv="22"] .svv22-paneel { padding-left: 14px; }
}

/* 22 · the group heads lead to a job (10-16): "I want every category header, of every root dienst page, to become
   clickable and go to their most likely candidate." The banner, panel and photo, is one link (vouw/v-bouw.py, kopnaar);
   the panel's name ends on the rows' arrow in the panel's light accent, held to its last word, nudging on hover */
:root[data-svv="22"] a.svv-kopnaar { color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent; }
:root[data-svv="22"] a.svv-kopnaar:focus-visible { outline: 3px solid var(--dakpan); outline-offset: 3px; border-radius: 10px 10px 0 0; }
:root[data-svv="22"] .svv-kopnaar__eind { white-space: nowrap; }
:root[data-svv="22"] .svv-kopnaar__pijl {
  display: inline-block; width: .74em; height: .74em; margin-left: .3em; vertical-align: -.04em;
  color: var(--dakpan-licht); transition: transform .25s cubic-bezier(.2, .7, .2, 1);
}
:root[data-svv="22"] a.svv-kopnaar .svv11-band img { transition: transform .4s cubic-bezier(.2, .7, .2, 1); }
@media (hover: hover) {
  :root[data-svv="22"] a.svv-kopnaar:hover .svv-kopnaar__pijl { transform: translateX(4px); }
  :root[data-svv="22"] a.svv-kopnaar:hover .svv11-band img { transform: scale(1.03); }
}
@media (prefers-reduced-motion: reduce) {
  :root[data-svv="22"] :is(.svv-kopnaar__pijl, a.svv-kopnaar .svv11-band img) { transition: none; }
}

/* 23 · with a photo: each service's row opens on a square of his work for it, the name set smaller than the
   questions' and the count under it; thin rules only, the heavy rule above the list goes */
:root[data-svv="23"] .svv-hulp .svv6-lijst { border-top: 1px solid var(--kalk-rand); }
:root[data-svv="23"] .svv-hulp .svv16-sum { grid-template-columns: clamp(60px, 5vw, 72px) minmax(0, 1fr) auto; column-gap: clamp(14px, 1.6vw, 22px); padding: clamp(10px, 1vw, 14px) 0; }
:root[data-svv="23"] .svv23-foto { display: block; aspect-ratio: 1; border-radius: 8px; overflow: hidden; background: var(--kalk-diep); }
:root[data-svv="23"] .svv23-foto img { display: block; width: 100%; height: 100%; object-fit: cover; }
:root[data-svv="23"] .svv23-foto--leeg { background: var(--lood); }
:root[data-svv="23"] .svv23-foto--leeg img { padding: 14px; object-fit: contain; }
:root[data-svv="23"] .svv-hulp .svv6-kop { font-weight: 700; font-size: clamp(19px, 1.7vw, 24px); line-height: 1.15; letter-spacing: -.016em; }
:root[data-svv="23"] .svv23-tel {
  display: block; margin-top: 5px; font-family: var(--f-tech); font-weight: 600; font-size: 12.5px; line-height: 1.2;
  letter-spacing: .14em; text-transform: uppercase; color: var(--lood-zacht);
}
@media (max-width: 560px) {
  :root[data-svv="23"] .svv-hulp .svv16-sum { grid-template-columns: 56px minmax(0, 1fr) auto; column-gap: 14px; padding: 9px 0; }
  :root[data-svv="23"] .svv-hulp .svv6-kop { font-size: 18px; }
  :root[data-svv="23"] .svv23-tel { margin-top: 4px; font-size: 10.5px; letter-spacing: .12em; }
  :root[data-svv="23"] .svv23-foto--leeg img { padding: 11px; }
}

/* 24 · on the dark ground: the whole fourth group, heading and rows, stands on the dark of the page's bands, the
   names light, "Help!" and the chevrons in the light accent, the rules faint; on a phone edge to edge */
:root[data-svv="24"] .svv-hulp {
  --p: clamp(20px, 2.6vw, 40px);
  margin-top: clamp(8px, 1.6vw, 24px); padding: clamp(32px, 3.6vw, 52px) var(--p) calc(var(--p) * .7);
  border-top: 0; border-radius: 16px; background: var(--lood); color: var(--kalk-wit);
}
:root[data-svv="24"] .svv21-kop > .svv6-label { color: var(--kalk-wit); }
:root[data-svv="24"] .svv21-kop .svv-hulp-uit { color: var(--dakpan-licht); }
:root[data-svv="24"] .svv-hulp .svv6-lijst { border-top-color: rgba(255, 252, 247, .55); }
:root[data-svv="24"] .svv-hulp .svv6-lijst > li + li { border-top-color: rgba(255, 252, 247, .14); }
:root[data-svv="24"] .svv-hulp .svv6-vraag { color: var(--kalk-wit); }
:root[data-svv="24"] .svv-hulp .svv16-tel { color: rgba(255, 252, 247, .62); }
:root[data-svv="24"] .svv-hulp :is(.svv16-chev, .svv16-klus > .ico, .svv16-alles) { color: var(--dakpan-licht); }
:root[data-svv="24"] .svv-hulp .svv16-d[open] > .svv16-sum .svv6-kop { color: var(--dakpan-licht); }
:root[data-svv="24"] .svv-hulp .svv16-klus { color: var(--kalk-wit); border-bottom-color: rgba(255, 252, 247, .12); }
:root[data-svv="24"] .svv-hulp .svv16-duim { background: var(--lood-diep); }
:root[data-svv="24"] .svv-hulp .svv16-duim--leeg { background: var(--lood-diep); }
:root[data-svv="24"] .svv-hulp .svv16-sum:focus-visible { outline-color: var(--dakpan-licht); }
@media (hover: hover) {
  :root[data-svv="24"] .svv-hulp .svv16-sum:hover .svv6-kop, :root[data-svv="24"] .svv-hulp .svv16-klus:hover .svv16-naam { color: var(--dakpan-licht); }
}
:root[data-svv="24"] .svv-hulp .svv16-klus:active .svv16-naam { color: var(--dakpan-licht); }
@media (max-width: 560px) {
  :root[data-svv="24"] .svv-hulp { --p: var(--gut); margin-left: calc(-1 * var(--gut)); margin-right: calc(-1 * var(--gut)); border-radius: 0; }
}