/* Bottom-form agent Z (2026-10-13): the form at the bottom of the page, z1–z3. Every rule is scoped to section.svz;
   every colour is a site token (style.css). The card is g3's (vouw/g.css, "door"), copied under the svz- prefix and a
   step larger: the fold's form shares one screen with everything above it, this one has a section of its own.
   The site's pieces (.fld, .hp, .avg1, .btn, .pair, .caps, .sec-h, .nap) are used as they are and only resized here.

   The card lays itself out by its own width (a container, "svz"), not the screen's, so one set of rules serves the
   three: z1's card beside a column of words, z2's card at the page's full width, z3's band across the screen.
     narrow  (< 520 px): the question on top, the answers as bars, the steps' words under the head
     middle  (520–859): the question on top, the answers a 2×2 of fields of colour
     wide    (860 up):  the question in a column on the left, the answers fill the right side edge to edge
   One cell: steps 1–3 all sit in it at once (only the one shown is visible), so the card is as tall as the tallest and
   never jumps between them. Without script only the form shows, one plain form that posts. */

.svz [hidden] { display: none !important; }

/* ==================================================== the card (the three share it) */
.svz-blok {
  container: svz / inline-size;
  --pad: 16px;        /* the card's inner side margin */
  --in: var(--pad);   /* where the words start, from the card's left edge (z3: the page's own margin) */
  --kop: 54px;        /* the room the head (step, Terug) takes above a step's question */
  --links: 40cqi;     /* the question's column on a wide card */
  position: relative; background: var(--kalk-wit); border-radius: 12px; box-shadow: var(--shadow-1);
  overflow: hidden; overflow: clip; scroll-margin-top: 92px; color: var(--lood);
}

/* the head: where you are, and the way back. It rides over the steps, so a step can colour the card under it */
.svz-kop {
  position: absolute; z-index: 5; top: 0; left: 0; right: 0; display: flex; align-items: center; gap: 12px;
  height: var(--kop); padding: 0 var(--pad) 0 var(--in); pointer-events: none;
}
.svz-kop > * { pointer-events: auto; }
.svz-tel {
  margin: 0; font-family: var(--f-tech); font-weight: 700; font-size: 12.5px; line-height: 1.3; letter-spacing: .15em;
  text-transform: uppercase; white-space: nowrap; color: var(--dakpan); transition: color .2s .15s;
}
.svz-tel b { font-weight: inherit; }
.svz-seg { display: inline-flex; gap: 4px; margin-left: 0; }
.svz-seg i { width: 20px; height: 4px; border-radius: 2px; background: var(--kalk-rand); transition: background-color .3s .15s; }
.svz-seg i.is-af, .svz-seg i.is-nu { background: var(--dakpan); }
.svz-terug {
  display: inline-flex; align-items: center; gap: 8px; height: 40px; margin-left: auto; padding: 0 15px 0 12px;
  border: 0; border-radius: 99px; background: var(--kalk); box-shadow: inset 0 0 0 1.5px var(--kalk-rand); cursor: pointer;
  font-family: var(--f-sans); font-weight: 600; font-size: 14.5px; line-height: 1; color: var(--lood); white-space: nowrap;
  transition: background-color .2s .15s, box-shadow .2s .15s, color .2s .15s;
}
.svz-terug .ico { width: 16px; height: 16px; transform: rotate(180deg); color: var(--dakpan); }
.svz-terug:hover { box-shadow: inset 0 0 0 1.5px var(--dakpan); color: var(--dakpan); }
.svz-terug:focus-visible { outline: 3px solid var(--dakpan); outline-offset: 2px; }
.svz-blok[data-stap="nu"] .svz-terug { background: var(--kalk-wit); }
.svz-blok[data-stap="snel"] .svz-tel { color: var(--kalk-wit); }
.svz-blok[data-stap="snel"] .svz-seg i { background: rgba(255, 252, 247, .32); }
.svz-blok[data-stap="snel"] .svz-seg i.is-af, .svz-blok[data-stap="snel"] .svz-seg i.is-nu { background: var(--kalk-wit); }
.svz-blok[data-stap="snel"] .svz-terug { background: rgba(255, 252, 247, .12); color: var(--kalk-wit); box-shadow: inset 0 0 0 1.5px rgba(255, 252, 247, .4); }
.svz-blok[data-stap="snel"] .svz-terug .ico { color: var(--kalk-wit); }
.svz-blok[data-stap="snel"] .svz-terug:focus-visible { outline-color: var(--kalk-wit); }

/* the cell */
.svz-stage { position: relative; display: grid; }
.svz-stage > .svz-stap { grid-area: 1 / 1; min-width: 0; display: flex; flex-direction: column; }
html.js .svz-stage > .svz-form:not(.is-nu), .svz-blok.is-meet .svz-stage > .svz-form { position: absolute; left: 0; right: 0; top: 0; }
html.js .svz-stap { visibility: hidden; }
html.js .svz-stap.is-nu, html.js .svz-stap.is-was, html.js .svz-stap.is-weg { visibility: visible; }
html.js .svz-stap.is-was { z-index: 1; }
html.js .svz-stap.is-nu { z-index: 2; }
html.js .svz-stap.is-weg { z-index: 3; }
/* every step has its own ground: the first white, the follow-up the answers' wash, the urgent step all dakpan */
.svz-stap { background: var(--kalk-wit); }
.svz-nu { background: var(--dakpan-wash); }
.svz-snel { background: var(--dakpan); }
.svz-nu > .svz-nu__een { flex: 1 1 auto; display: flex; flex-direction: column; }
.svz-q { padding: var(--kop) var(--pad) 16px var(--in); }
.svz-a { flex: 1 1 auto; display: flex; flex-direction: column; min-width: 0; }
.svz-opties { flex: 1 1 auto; display: grid; gap: 3px; margin: 0; }

/* the question of a step: where focus lands when the step opens */
.svz-vraag {
  margin: 0; font-weight: 800; font-size: 25px; line-height: 1.12; letter-spacing: -.026em;
  color: var(--lood); text-wrap: balance;
}
.svz-vraag:focus { outline: none; }
.svz-snel__zin { font-size: 20px; line-height: 1.24; letter-spacing: -.02em; text-wrap: pretty; color: var(--kalk-wit); }
.svz-sub { margin: 4px 0 0; font-size: 15px; line-height: 1.45; color: var(--lood-zacht); }
.svz-mee { margin: 14px 0 0; font-size: 14.5px; line-height: 1.45; color: var(--lood-zacht); }
.svz-mee b { display: block; margin-top: 2px; font-weight: 600; color: var(--lood); }

/* an answer: a field of colour, a real radio laid over the whole of it */
.svz-optie {
  position: relative; display: flex; align-items: center; justify-content: space-between; gap: 10px; min-width: 0;
  min-height: 62px; padding: 7px 10px 7px var(--in); cursor: pointer; color: var(--lood);
  background: var(--dakpan-wash); transition: background-color .15s; -webkit-tap-highlight-color: transparent;
}
.svz-optie input { position: absolute; z-index: 1; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.svz-optie__w { position: relative; min-width: 0; font-weight: 700; font-size: 17.5px; line-height: 1.2; letter-spacing: -.014em; }
.svz-optie__w b { display: block; font-weight: 800; letter-spacing: -.03em; line-height: 1; }
.svz-optie__w b + span { display: block; font-weight: 500; letter-spacing: 0; line-height: 1.35; }
.svz-optie__pijl {
  flex: none; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%;
  background: var(--kalk-wit); color: var(--dakpan); transition: background-color .15s, color .15s, transform .18s;
}
.svz-optie__pijl .ico { width: 18px; height: 18px; }
.svz-optie:hover, .svz-optie:has(input:checked) { background: var(--gips); }
.svz-optie:hover .svz-optie__pijl { background: var(--dakpan); color: var(--kalk-wit); transform: translateX(3px); }
.svz-optie:has(input:focus-visible) { outline: 3px solid var(--dakpan); outline-offset: -6px; }
/* yes / no: two tall fields side by side, the word large; yes is dakpan (it opens the dakpan step), no is white */
.svz-opties--jn { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.svz-opties--jn .svz-optie { flex-direction: column; align-items: stretch; padding: 18px 12px 12px 18px; }
.svz-opties--jn .svz-optie__pijl { align-self: flex-end; }
.svz-opties--jn .svz-optie__w b { font-size: 40px; }
.svz-opties--jn .svz-optie__w b + span { margin-top: 8px; font-size: 15px; }
.svz-optie--ja { background: var(--dakpan); color: var(--kalk-wit); }
.svz-optie--ja:hover, .svz-optie--ja:has(input:checked) { background: var(--dakpan-diep); }
.svz-optie--ja:has(input:focus-visible) { outline-color: var(--kalk-wit); }
.svz-optie--ja .svz-optie__w b + span { color: var(--gips-licht); }
.svz-optie--ja .svz-optie__pijl { background: var(--kalk-wit); color: var(--dakpan); }
.svz-optie--nee { background: var(--kalk-wit); }
.svz-optie--nee:hover, .svz-optie--nee:has(input:checked) { background: var(--kalk); }
.svz-optie--nee .svz-optie__w b + span { color: var(--lood-zacht); }
.svz-optie--nee .svz-optie__pijl { background: var(--dakpan-wash); }

/* "rather call or app right away?": the two ways in on the first step. Narrow: the line, and beside it the phone and
   the app as round buttons (on a phone the call bar at the foot of the screen says them in words) */
.svz-direct { display: flex; flex-wrap: nowrap; align-items: center; gap: 8px; padding: 14px var(--pad) var(--pad) var(--in); }
.svz-direct__zin { flex: 1 1 auto; margin: 0; font-size: 15px; line-height: 1.35; color: var(--lood-zacht); }
.svz-knop {
  flex: none; display: inline-flex; align-items: center; justify-content: center; gap: 9px; width: 48px; min-height: 48px; padding: 0;
  border-radius: 99px; background: var(--kalk); box-shadow: inset 0 0 0 1.5px var(--kalk-rand);
  font-weight: 700; font-size: 16px; line-height: 1; color: var(--lood); text-decoration: none; white-space: nowrap;
  transition: background-color .15s, box-shadow .15s, color .15s;
}
.svz-knop .ico { width: 19px; height: 19px; color: var(--dakpan); }
.svz-knop--wa .ico { width: 22px; height: 22px; color: #1fae55; }
.svz-knop:hover { box-shadow: inset 0 0 0 1.5px var(--dakpan); color: var(--dakpan); }
.svz-knop:focus-visible { outline: 3px solid var(--dakpan); outline-offset: 2px; }
.svz-knop__w { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* the urgent step: the operator's line, the pair (the call leading), the photo to send. The call a white field,
   WhatsApp a green one, edge to edge */
.svz-pair { flex: 1 1 auto; flex-direction: column; gap: 3px; max-width: none; }
.svz-pair .btn { flex: 1 1 0; border-radius: 0; min-height: 72px; padding: 0 12px; gap: 10px; font-size: 18px; }
.svz-pair .btn--call { background: var(--kalk-wit); color: var(--dakpan); }
.svz-pair .btn--call:hover { background: var(--gips-licht); }
.svz-pair .btn .ico { width: 24px; height: 24px; }
.svz-pair .btn--wa .ico { width: 28px; height: 28px; }
.svz-pair::after { width: 38px; height: 38px; font-size: 14px; box-shadow: 0 0 0 3px var(--dakpan); }
.svz-pair .btn:focus-visible { outline: 3px solid var(--lood); outline-offset: -6px; }
.svz-foto { display: flex; align-items: flex-start; gap: 9px; margin: 0; padding: 14px var(--pad) var(--pad) var(--in); font-size: 15px; line-height: 1.45; color: var(--gips-licht); }
.svz-foto .ico { flex: none; width: 18px; height: 18px; margin-top: 2px; color: var(--kalk-wit); }

/* the form: the homepage's fields, at a size you can hit */
.svz-blok .fld { margin: 0; }
.svz-blok .fld > span { font-size: 14.5px; margin-bottom: 5px; line-height: 1.3; }
.svz-blok .fld input { min-height: 50px; padding: 11px 13px; }
.svz-blok .fld textarea { display: block; min-height: 0; height: 84px; padding: 11px 13px; line-height: 1.45; }
@supports (field-sizing: content) {
  .svz-blok .fld textarea { field-sizing: content; height: auto; min-height: 84px; max-height: 220px; }
}
.svz-velden { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
.svz-fld--mail, .svz-fld--bericht { grid-column: 1 / -1; }
.svz-blok .avg1 { margin: 12px 0; }
.svz-blok .avg-regel { font-size: 13.5px; line-height: 1.45; }
.svz-verstuur { width: 100%; min-height: 56px; font-size: 17px; }
.svz-form .svz-q { padding-bottom: 0; }
.svz-form .svz-a { padding: 14px var(--pad) var(--pad) var(--in); }
/* a field you move to by keyboard on a phone stays clear of the call bar at the foot of the screen (the card clips
   rather than hides its overflow, so this scrolls the page and never the card's own content) */
.svz-form input, .svz-form textarea, .svz-form button, .svz-form summary, .svz-pair .btn { scroll-margin-bottom: 96px; }

/* without script: the card is the form, nothing else */
html:not(.js) .svz-zie, html:not(.js) .svz-nu, html:not(.js) .svz-snel, html:not(.js) .svz-kop { display: none; }
html:not(.js) .svz-form .svz-q { padding-top: var(--pad); }

/* ---- middle: the answers a 2×2 of fields, everything a step up ---- */
@container svz (min-width: 520px) {
  .svz-kop, .svz-stage { --pad: 26px; --in: var(--pad); --kop: 62px; }
  .svz-tel { font-size: 13.5px; letter-spacing: .2em; }
  .svz-seg { gap: 5px; margin-left: 2px; }
  .svz-seg i { width: 24px; }
  .svz-terug { height: 42px; padding: 0 18px 0 14px; font-size: 15px; }
  .svz-vraag { font-size: 32px; }
  .svz-snel__zin { font-size: 23px; }
  .svz-zie .svz-opties { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-auto-rows: 1fr; }
  .svz-zie .svz-optie:last-child:nth-child(odd) { grid-column: 1 / -1; }   /* an odd count: the last one runs across */
  .svz-optie { flex-direction: column; align-items: stretch; min-height: 128px; padding: 20px 18px 16px var(--in); }
  .svz-optie__w { font-size: 20px; }
  .svz-optie__pijl { align-self: flex-end; width: 46px; height: 46px; }
  .svz-opties--jn .svz-optie { min-height: 190px; padding: 24px 20px 18px 26px; }
  .svz-opties--jn .svz-optie__w b { font-size: 48px; }
  .svz-opties--jn .svz-optie__w b + span { font-size: 16.5px; }
  .svz-direct { flex-wrap: wrap; gap: 8px 10px; padding-top: 18px; }
  .svz-direct__zin { flex: 0 1 auto; margin-right: 6px; font-size: 15.5px; }
  .svz-knop { width: auto; min-height: 48px; padding: 0 20px 0 16px; }
  .svz-knop__w { position: static; width: auto; height: auto; overflow: visible; clip-path: none; }
  .svz-pair { flex-direction: row; }
  .svz-pair .btn { min-height: 110px; font-size: 20px; gap: 12px; }
  .svz-foto { font-size: 15.5px; padding-top: 16px; }
  .svz-velden { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px 16px; }
  .svz-fld--mail { grid-column: auto; }
  .svz-verzend { display: flex; align-items: center; gap: 12px 24px; margin-top: 14px; }
  .svz-verzend .avg1 { flex: 1 1 auto; margin: 0; }
  .svz-verstuur { flex: none; width: auto; padding: 0 30px; }
  .svz-verzend:has(.avg1[open]) { flex-direction: column; align-items: stretch; }
  .svz-verzend:has(.avg1[open]) .svz-verstuur { align-self: flex-end; }
  .svz-form .svz-a { padding-top: 18px; }
}

/* a middle card with room to spare (z1's beside the words on a computer): the question and the fields a step up again,
   so the card is bigger than the fold's in what you read and tap, not only taller */
@container svz (min-width: 640px) {
  .svz-vraag { font-size: clamp(32px, 2.7vw, 38px); }   /* never above the section's own heading (.sec-h) */
  .svz-snel__zin { font-size: 25px; }
  .svz-optie { min-height: 158px; padding-top: 24px; }
  .svz-optie__w { font-size: 22px; }
  .svz-opties--jn .svz-optie { min-height: 220px; }
  .svz-opties--jn .svz-optie__w b { font-size: 54px; }
  .svz-pair .btn { min-height: 128px; font-size: 21px; }
}
@container svz (min-width: 520px) and (max-width: 639px) {
  .svz-direct__zin { flex-basis: 100%; margin: 0 0 2px; }   /* the line over its two buttons, not one button alone */
}

/* ---- wide: the question in a column on the left, the answers fill the right side edge to edge ---- */
@container svz (min-width: 860px) {
  .svz-kop, .svz-stage { --pad: 36px; --in: var(--pad); --kop: 72px; }
  .svz-kop { right: auto; width: var(--links); }
  .svz-stage > .svz-zie, .svz-nu > .svz-nu__een, .svz-stage > .svz-snel, .svz-stage > .svz-form {
    display: grid; grid-template-columns: var(--links) minmax(0, 1fr); grid-template-rows: auto 1fr;
    grid-template-areas: "q a" "d a";
  }
  .svz-q { grid-area: q; padding: var(--kop) 40px 18px var(--in); }
  .svz-a { grid-area: a; grid-row: 1 / -1; }
  .svz-nu__een > .svz-q, .svz-form > .svz-q { grid-row: 1 / -1; }
  .svz-vraag { font-size: clamp(34px, 3vw, 42px); }
  .svz-zie > .svz-direct { grid-area: d; align-self: end; padding: 0 40px 34px var(--in); }
  .svz-zie > .svz-direct .svz-direct__zin { flex-basis: 100%; margin: 0 0 2px; }
  .svz-zie .svz-opties { min-height: 400px; }
  .svz-optie { padding: 26px 26px 22px 30px; }
  .svz-optie__w { font-size: clamp(20px, 1.8vw, 25px); }
  .svz-optie__pijl { width: 50px; height: 50px; }
  .svz-optie__pijl .ico { width: 20px; height: 20px; }
  .svz-opties--jn .svz-optie { padding: 32px 28px 24px 34px; }
  .svz-opties--jn .svz-optie__w b { font-size: clamp(48px, 4.4vw, 62px); }
  .svz-opties--jn .svz-optie__w b + span { font-size: clamp(16px, 1.25vw, 18px); }
  /* the urgent step: the line and the photo to send on the left, the call over the app on the right */
  .svz-snel > .svz-a { display: contents; }
  .svz-snel .svz-pair { grid-area: a; grid-row: 1 / -1; flex-direction: column; }
  .svz-snel .svz-pair .btn { font-size: clamp(20px, 1.8vw, 25px); }
  .svz-snel .svz-foto { grid-area: d; align-self: end; padding: 0 40px 34px var(--in); }
  .svz-snel__zin { font-size: clamp(23px, 2vw, 29px); }
  /* the form: its title on the left, the fields on the right */
  .svz-form .svz-a { padding: 36px var(--pad) 36px 8px; justify-content: center; }
  .svz-form .svz-q { padding-bottom: 36px; }
}

@keyframes svz-rol { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
/* g3's move (z.js): the step grows out of the answer with clip-path; its words come in just behind the edge */
html.js .svz-blok.is-kom .svz-stap.is-nu .svz-q > *,
html.js .svz-blok.is-kom .svz-stap.is-nu .svz-optie__w { animation: svz-rol .44s .1s cubic-bezier(.2, .7, .2, 1) both; }

/* ==================================================== z1 · beside the details (the homepage's contact section) */
.svz1 { background: var(--lood); color: var(--kalk-wit); padding: var(--sec) 0; }
.svz1-rooster { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
.svz1-info { padding-top: 6px; }
.svz1 .svz1-h { margin-bottom: 22px; }
.svz1-lead { margin: 0; max-width: 30em; font-size: 18px; color: var(--gips-licht); }
.svz1-nap { margin: 36px 0 0; }
.svz1 .svz-blok { border-radius: 10px; border-top: 6px solid var(--dakpan); box-shadow: var(--shadow-2); }
@media (max-width: 960px) {
  .svz1-rooster { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .svz1-nap { display: none; }   /* the footer right under it says the same: phone, mail, address */
}
@media (max-width: 560px) {
  .svz1-rooster { gap: 26px; }
  .svz1 .svz1-h { margin-bottom: 14px; }
  .svz1-lead { font-size: 16.5px; }
  .svz1 .svz-blok { border-top-width: 5px; }
}

/* ==================================================== z2 · under a picture of the job (the fold's composition) */
.svz2 { --over: clamp(44px, 10vw, 150px); background: var(--kalk); padding: 0 0 var(--sec); }
.svz2-band { position: relative; height: clamp(250px, 32vw, 470px); }
.svz2-beeld { position: absolute; inset: 0; display: block; overflow: hidden; background: var(--lood); cursor: zoom-in; container-type: inline-size; }
.svz2-foto { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; }
/* the homepage's marks (fotomerk.css): a shade from the foot, the place and date on it beside the pin; his stamp */
.svz2-beeld::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top, rgba(26, 36, 41, .78) 0, rgba(26, 36, 41, .5) var(--over), rgba(26, 36, 41, 0) calc(var(--over) + 140px));
}
.svz2-label {
  position: absolute; z-index: 1; left: max(var(--gut), calc((100% - var(--wrap)) / 2)); bottom: calc(var(--over) + clamp(12px, 1.6vw, 22px));
  display: flex; pointer-events: none;
}
.svz2-waar {
  display: flex; align-items: center; gap: 8px; color: #fff; font: 700 clamp(15px, 1.5vw, 22px)/1.15 var(--f-tech); letter-spacing: .02em;
  text-shadow: 0 1px 10px rgba(0, 0, 0, .3);
}
.svz2-waar::before {
  content: ''; flex: none; width: clamp(14px, 1.3vw, 19px); height: clamp(14px, 1.3vw, 19px); background: var(--dakpan-licht);
  -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;
}
.svz2-zegel {
  position: absolute; z-index: 2; right: max(var(--gut), calc((100% - var(--wrap)) / 2)); top: clamp(12px, 2vw, 26px);
  width: clamp(54px, 6vw, 84px); height: clamp(54px, 6vw, 84px); pointer-events: none;
  transform: rotate(-12deg); filter: drop-shadow(0 2px 5px rgba(26, 36, 41, .38)); font-family: var(--f-tech);
}
.svz2-beeld:focus-visible { outline: 3px solid var(--dakpan); outline-offset: -3px; }
.svz2-wrap { position: relative; z-index: 2; margin-top: calc(-1 * var(--over)); }
@media (max-width: 560px) {
  .svz2 { --over: 40px; }
  .svz2-band { height: 240px; }
}

/* ==================================================== z3 · the section is the card */
/* no card: the band is the form. The dakpan rule on top is the site's form card's (style.css .form); the words keep
   the page's margin (--side), the answers run to the band's edges. */
.svz3 { background: var(--kalk-wit); border-top: 6px solid var(--dakpan); }
.svz3 .svz-blok { border-radius: 0; box-shadow: none; scroll-margin-top: 0; --side: max(var(--gut), (100cqi - var(--wrap)) / 2); }
.svz3 .svz-kop, .svz3 .svz-stage { --in: var(--side); --pad: var(--side); }
@container svz (min-width: 520px) {
  .svz3 .svz-kop, .svz3 .svz-stage { --kop: 76px; }
  .svz3 .svz-zie .svz-opties { min-height: 300px; }
  .svz3 .svz-q { padding-bottom: 22px; }
  .svz3 .svz-vraag { font-size: 36px; }
}
@container svz (min-width: 860px) {
  .svz3 .svz-kop, .svz3 .svz-stage { --kop: 92px; --links: calc(var(--side) + .38 * (100cqi - 2 * var(--side))); }
  .svz3 .svz-vraag { font-size: clamp(36px, 3.5vw, 50px); }
  .svz3 .svz-snel__zin { font-size: clamp(24px, 2.2vw, 31px); }
  .svz3 .svz-zie .svz-opties { min-height: 440px; }
  .svz3 .svz-zie > .svz-direct, .svz3 .svz-snel .svz-foto { padding-bottom: 48px; }
  .svz3 .svz-form .svz-a { padding: 52px var(--side) 52px 8px; }
  .svz3 .svz-form .svz-q { padding-bottom: 52px; }
}

@media (prefers-reduced-motion: reduce) {
  .svz *, .svz *::before, .svz *::after { animation: none !important; transition: none !important; }
}