/* Fold agent G · f1 made livelier (g1 g2 g3). Loaded after the site's CSS and a.css–f.css; every colour is a site token.
   The head of the fold (breadcrumb, H1, the opening line, the ratings) is C3's markup and is styled by c.css as it
   stands. Own classes and ids are svg-…; the site's pieces (.fld, .hp, .avg1, .btn, .pair) are used as they are and only
   resized inside the block.

   One card, 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; every step stretches its answers into that room, so a short step gets bigger
   targets instead of empty card. The form joins the cell only while it is shown.
   Without script only the form shows, one plain form that posts. */

/* ==================================================== shared by the three */

/* the bar keeps its own logo from the first screen, as in the c and f states (f.css's first rule, for the g states) */
:root.js[data-v^="g"] .head .brand { visibility: visible; opacity: 1; transform: none; }

.svg-vouw [hidden] { display: none !important; }

.svg-blok {
  --pad: clamp(18px, 2.4vw, 34px);   /* the card's inner side margin */
  --kop: 56px;                       /* the room the head (step, Terug) takes above a step's question */
  position: relative; margin-top: clamp(22px, 2.6vw, 34px); background: var(--kalk-wit); border-radius: 12px;
  box-shadow: var(--shadow-1); overflow: hidden; scroll-margin-top: 92px;
}

/* the head: where you are, and the way back. It rides over the steps, so a step can colour the card under it */
.svg-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); pointer-events: none;
}
.svg-kop > * { pointer-events: auto; }
.svg-tel {
  margin: 0; font-family: var(--f-tech); font-weight: 700; font-size: 13px; line-height: 1.3; letter-spacing: .2em;
  text-transform: uppercase; color: var(--dakpan); transition: color .2s .15s;
}
.svg-tel b { font-weight: inherit; }
.svg-seg { display: none; }
.svg-balk { display: none; }
.svg-terug {
  display: inline-flex; align-items: center; gap: 8px; height: 42px; margin-left: auto; padding: 0 18px 0 14px;
  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: 15px; line-height: 1; color: var(--lood);
  transition: background-color .15s, box-shadow .15s, color .15s;
}
.svg-terug .ico { width: 16px; height: 16px; transform: rotate(180deg); color: var(--dakpan); }
.svg-terug:hover { box-shadow: inset 0 0 0 1.5px var(--dakpan); color: var(--dakpan); }
.svg-terug:focus-visible { outline: 3px solid var(--dakpan); outline-offset: 2px; }

/* the cell */
.svg-stage { position: relative; display: grid; }
.svg-stage > .svg-stap { grid-area: 1 / 1; min-width: 0; display: flex; flex-direction: column; }
html.js .svg-stage > .svg-form:not(.is-nu), .svg-blok.is-meet .svg-stage > .svg-form { position: absolute; left: 0; right: 0; top: 0; }
html.js .svg-stap { visibility: hidden; }
html.js .svg-stap.is-nu, html.js .svg-stap.is-was, html.js .svg-stap.is-weg { visibility: visible; }
html.js .svg-stap.is-was { z-index: 1; }
html.js .svg-stap.is-nu { z-index: 2; }
html.js .svg-stap.is-weg { z-index: 3; }
.svg-nu > .svg-nu__een { flex: 1 1 auto; display: flex; flex-direction: column; }
.svg-q { padding: var(--kop) var(--pad) 0; }
.svg-a { flex: 1 1 auto; display: flex; flex-direction: column; min-width: 0; }
.svg-opties { flex: 1 1 auto; display: grid; margin: 0; }

/* the question of a step: where focus lands when the step opens */
.svg-vraag {
  margin: 0; font-weight: 800; font-size: clamp(24px, 2.5vw, 34px); line-height: 1.12; letter-spacing: -.026em;
  color: var(--lood); text-wrap: balance;
}
.svg-vraag:focus { outline: none; }
.svg-snel__zin { font-size: clamp(21px, 1.9vw, 27px); line-height: 1.22; letter-spacing: -.02em; text-wrap: pretty; }
.svg-sub { margin: 6px 0 0; font-size: 15px; line-height: 1.45; color: var(--lood-zacht); }
.svg-mee { margin: 14px 0 0; font-size: 14px; line-height: 1.45; color: var(--lood-zacht); }
.svg-mee b { display: block; margin-top: 2px; font-weight: 600; color: var(--lood); }

/* a choice: a real radio laid over the whole tile; what it looks like is each variant's */
.svg-optie { position: relative; display: flex; min-width: 0; cursor: pointer; color: var(--lood); -webkit-tap-highlight-color: transparent; }
.svg-optie input { position: absolute; z-index: 1; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.svg-optie__w { position: relative; min-width: 0; font-weight: 700; line-height: 1.2; letter-spacing: -.014em; }
.svg-optie__w b { display: block; font-weight: 800; letter-spacing: -.03em; line-height: 1; }
.svg-optie__w b + span { display: block; font-weight: 500; letter-spacing: 0; line-height: 1.35; }
.svg-optie__pijl { flex: none; display: grid; place-items: center; border-radius: 50%; transition: background-color .15s, color .15s, transform .18s; }
.svg-optie__pijl .ico { width: 18px; height: 18px; }
.svg-optie:has(input:focus-visible) { outline: 3px solid var(--dakpan); outline-offset: 2px; }

/* "rather call or app right away?": the fold's two ways in on the first step, as real buttons */
.svg-direct { display: flex; flex-wrap: wrap; align-items: center; align-content: flex-end; gap: 8px 10px; }
.svg-direct__zin { flex-basis: 100%; margin: 0 0 2px; font-size: 15px; line-height: 1.35; color: var(--lood-zacht); }
.svg-knop {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 46px; padding: 0 18px 0 15px;
  border-radius: 99px; background: var(--kalk); box-shadow: inset 0 0 0 1.5px var(--kalk-rand);
  font-weight: 700; font-size: 15.5px; line-height: 1; color: var(--lood); text-decoration: none; white-space: nowrap;
  transition: background-color .15s, box-shadow .15s, color .15s;
}
.svg-knop .ico { width: 18px; height: 18px; color: var(--dakpan); }
.svg-knop--wa .ico { width: 21px; height: 21px; color: #1fae55; }
.svg-knop:hover { box-shadow: inset 0 0 0 1.5px var(--dakpan); color: var(--dakpan); }
.svg-knop:focus-visible { outline: 3px solid var(--dakpan); outline-offset: 2px; }

/* the urgent step: the operator's line, the pair (call leads), the photo to send */
.svg-pair { max-width: none; }
.svg-pair .btn { min-height: 64px; font-size: 18px; }
.svg-foto { display: flex; align-items: flex-start; gap: 9px; margin: 12px 0 0; font-size: 15px; line-height: 1.45; color: var(--lood-zacht); }
.svg-foto .ico { flex: none; width: 18px; height: 18px; margin-top: 2px; color: var(--dakpan); }

/* the form: the homepage's fields, at a size you can hit */
.svg-blok .fld { margin: 0; }
.svg-blok .fld > span { font-size: 14px; margin-bottom: 5px; line-height: 1.3; }
.svg-blok .fld input { min-height: 48px; padding: 11px 13px; }
.svg-blok .fld textarea { display: block; min-height: 0; height: 74px; padding: 11px 13px; line-height: 1.45; }
@supports (field-sizing: content) {
  .svg-blok .fld textarea { field-sizing: content; height: auto; min-height: 74px; max-height: 180px; }
}
.svg-velden { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px 14px; }
.svg-fld--mail, .svg-fld--bericht { grid-column: 1 / -1; }
.svg-blok .avg1 { margin: 12px 0 12px; }
.svg-verstuur { width: 100%; min-height: 56px; font-size: 17px; }
.svg-form .svg-a { padding: 16px var(--pad) var(--pad); }

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

@media (min-width: 700px) {
  /* the form on a wide card: name, phone, e-mail in a row; under them the text, and beside it the privacy line over
     the button. The same in all three. */
  .svg-form .svg-a {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 16px; align-content: start;
    grid-template-areas: "naam tel mail" "bericht bericht verzend";
  }
  .svg-velden { display: contents; }
  .svg-fld--naam { grid-area: naam; }
  .svg-fld--tel { grid-area: tel; }
  .svg-fld--mail { grid-area: mail; }
  .svg-fld--bericht { grid-area: bericht; }
  .svg-verzend { grid-area: verzend; display: flex; flex-direction: column; justify-content: flex-end; }
  .svg-blok .svg-verzend .avg1 { margin: 0 0 10px; }
  .svg-blok .svg-verzend .avg-regel { font-size: 13px; line-height: 1.45; }
  .svg-blok .fld textarea { height: 84px; min-height: 84px; }
  @supports (field-sizing: content) { .svg-blok .fld textarea { min-height: 84px; } }
}

@media (min-width: 561px) and (max-width: 899px) {
  .svg-direct__zin { flex-basis: auto; margin: 0 6px 0 0; }
}
@media (max-width: 560px) {
  .svg-blok { --pad: 14px; --kop: 50px; margin-top: 2px; border-radius: 10px; scroll-margin-top: 68px; }
  .svg-tel { font-size: 12px; letter-spacing: .15em; }
  .svg-terug { height: 38px; padding: 0 15px 0 12px; font-size: 14.5px; }
  .svg-vraag { font-size: 23px; }
  .svg-snel__zin { font-size: 19px; line-height: 1.25; }
  .svg-sub { margin-top: 3px; font-size: 14px; }
  /* the two ways in: the line, and beside it the phone and the app as round buttons (the bar below says them in words) */
  .svg-direct { flex-wrap: nowrap; gap: 8px; }
  .svg-direct__zin { flex: 1 1 auto; flex-basis: auto; margin: 0; font-size: 14px; }
  .svg-knop { flex: none; width: 46px; padding: 0; }
  .svg-knop__w { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .svg-foto { font-size: 14px; margin-top: 10px; }
  .svg-velden { gap: 10px; }
  .svg-blok .fld > span { font-size: 13.5px; margin-bottom: 4px; }
  .svg-blok .fld input { min-height: 46px; padding: 10px 11px; }
  .svg-blok .fld textarea { height: 52px; min-height: 52px; padding: 9px 11px; }
  @supports (field-sizing: content) { .svg-blok .fld textarea { min-height: 52px; } }
  .svg-blok .avg1 { margin: 10px 0 10px; }
  .svg-blok .avg-regel { font-size: 13px; line-height: 1.45; }
  .svg-verstuur { min-height: 52px; }
  .svg-form .svg-a { padding-top: 12px; }
  .svg-mee { display: none; }
}

@keyframes svg-rol { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

/* ==================================================== g1 · the tile board: the answers are the card */
.svg-tegels { --kop: 62px; }
.svg-tegels .svg-balk { display: block; position: absolute; z-index: 6; top: 0; left: 0; right: 0; height: 6px; background: var(--gips-licht); }
.svg-tegels .svg-balk span { display: block; height: 100%; width: calc(var(--svg-p, .3333) * 100%); background: var(--dakpan); transition: width .45s cubic-bezier(.2, .7, .2, 1); }
.svg-tegels .svg-kop { padding-top: 6px; }
.svg-tegels .svg-a { padding: 20px var(--pad) var(--pad); }

/* a tile: the words at the top, a round arrow at the foot; it fills its share of the card */
.svg-tegels .svg-opties { gap: 12px; }
.svg-tegels .svg-optie {
  flex-direction: column; justify-content: space-between; gap: 12px; min-height: 96px; padding: 16px 14px 14px 18px;
  border-radius: 10px; background: var(--kalk); box-shadow: inset 0 0 0 1.5px var(--kalk-rand);
  transition: background-color .15s, box-shadow .15s, color .15s, transform .12s;
}
.svg-tegels .svg-optie__w { font-size: clamp(17px, 1.5vw, 21px); }
.svg-tegels .svg-optie__pijl { align-self: flex-end; width: 42px; height: 42px; background: var(--kalk-wit); color: var(--dakpan); box-shadow: inset 0 0 0 1.5px var(--kalk-rand); }
.svg-tegels .svg-optie:hover { background: var(--dakpan-wash); box-shadow: inset 0 0 0 1.5px var(--dakpan); }
.svg-tegels .svg-optie:hover .svg-optie__pijl { background: var(--dakpan); color: var(--kalk-wit); box-shadow: none; transform: translateX(3px); }
.svg-tegels .svg-optie:active { transform: scale(.985); }
.svg-tegels .svg-optie:has(input:checked) { background: var(--dakpan); box-shadow: none; color: var(--kalk-wit); }
.svg-tegels .svg-optie:has(input:checked) .svg-optie__pijl { background: var(--kalk-wit); color: var(--dakpan); box-shadow: none; }
/* yes / no: two tiles, the word large */
.svg-tegels .svg-opties--jn { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.svg-tegels .svg-opties--jn .svg-optie__w b { font-size: clamp(34px, 3.3vw, 46px); }
.svg-tegels .svg-opties--jn .svg-optie__w b + span { margin-top: 8px; font-size: clamp(15px, 1.15vw, 16.5px); color: var(--lood-zacht); }
.svg-tegels .svg-opties--jn .svg-optie:has(input:checked) b + span { color: var(--gips-licht); }
/* the urgent step: the pair as two tall tiles, the icon over the words */
.svg-tegels .svg-pair { flex: 1 1 auto; min-height: 96px; }
.svg-tegels .svg-pair .btn { flex-direction: column; gap: 10px; min-height: 0; font-size: clamp(17px, 1.5vw, 21px); }
.svg-tegels .svg-pair .btn .ico { width: 30px; height: 30px; }
.svg-tegels .svg-pair .btn--wa .ico { width: 34px; height: 34px; }
.svg-tegels .svg-pair .btn--call { border-radius: 10px 0 0 10px; }
.svg-tegels .svg-pair .btn--wa { border-radius: 0 10px 10px 0; }
.svg-tegels .svg-pair::after { width: 38px; height: 38px; font-size: 14px; box-shadow: 0 0 0 4px var(--kalk-wit); }
.svg-tegels .svg-form .svg-a { padding-top: 18px; }

@media (min-width: 700px) {
  /* step 1: the question, and on its right the two ways in; the four tiles in one row under them */
  .svg-tegels .svg-zie { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto 1fr; grid-template-areas: "q d" "a a"; }
  .svg-tegels .svg-zie > .svg-q { grid-area: q; }
  .svg-tegels .svg-zie > .svg-a { grid-area: a; }
  .svg-tegels .svg-zie > .svg-direct { grid-area: d; flex-wrap: nowrap; padding: 0 var(--pad) 0 0; align-self: end; }
  .svg-tegels .svg-zie > .svg-direct .svg-direct__zin { flex-basis: auto; margin: 0 4px 0 0; }
  .svg-tegels .svg-zie .svg-opties { grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }   /* one row, however many */
  .svg-tegels .svg-optie { min-height: 160px; padding: 20px 16px 16px 20px; }
  .svg-tegels .svg-zie .svg-optie__w { font-size: clamp(18px, 1.7vw, 23px); }
  .svg-tegels .svg-opties--jn .svg-optie { padding: 22px 18px 16px 24px; }
  /* the form: its title and promise on one line */
  .svg-tegels .svg-form .svg-q { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 18px; }
  .svg-tegels .svg-form .svg-sub { margin: 0; }
  .svg-tegels .svg-form .svg-mee { margin: 0 0 0 auto; }
  .svg-tegels .svg-form .svg-mee b { display: inline; margin: 0 0 0 4px; }
}
@media (min-width: 700px) and (max-width: 1080px) {
  .svg-tegels .svg-zie > .svg-direct .svg-direct__zin { display: none; }
  .svg-tegels .svg-optie { min-height: 136px; }
}
@media (max-width: 560px) {
  .svg-tegels { --kop: 54px; }
  .svg-tegels .svg-a { padding: 12px var(--pad) var(--pad); }
  .svg-tegels .svg-zie > .svg-a { padding-bottom: 0; }
  .svg-tegels .svg-zie > .svg-direct { padding: 12px var(--pad) var(--pad); }
  .svg-tegels .svg-zie .svg-opties { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-auto-rows: 1fr; }
  .svg-tegels .svg-zie .svg-optie:last-child:nth-child(odd) { grid-column: 1 / -1; min-height: 64px; }   /* an odd count: the last one runs across */
  .svg-tegels .svg-opties { gap: 8px; }
  .svg-tegels .svg-optie { min-height: 98px; gap: 8px; padding: 12px 10px 10px 13px; }
  .svg-tegels .svg-optie__w { font-size: 16.5px; }
  .svg-tegels .svg-optie__pijl { width: 34px; height: 34px; }
  .svg-tegels .svg-optie__pijl .ico { width: 16px; height: 16px; }
  .svg-tegels .svg-opties--jn .svg-optie { padding: 16px 12px 12px 16px; }
  .svg-tegels .svg-opties--jn .svg-optie__w b { font-size: 34px; }
  .svg-tegels .svg-opties--jn .svg-optie__w b + span { font-size: 14.5px; }
  .svg-tegels .svg-pair .btn { font-size: 17px; gap: 8px; }
  .svg-tegels .svg-pair .btn .ico { width: 26px; height: 26px; }
  .svg-tegels .svg-pair .btn--wa .ico { width: 30px; height: 30px; }
  .svg-tegels .svg-form .svg-a { padding-top: 12px; }
}

/* g1 moves: the step slides in from the side it comes from, its tiles rise one after the other */
html.js .svg-tegels.is-kom .svg-stap.is-nu { animation: svg-in-v .34s cubic-bezier(.2, .7, .2, 1) both; }
html.js .svg-tegels.is-kom[data-richting="terug"] .svg-stap.is-nu { animation-name: svg-in-t; }
html.js .svg-tegels.is-kom .svg-stap.is-was { animation: svg-uit-v .22s ease-in both; }
html.js .svg-tegels.is-kom[data-richting="terug"] .svg-stap.is-was { animation-name: svg-uit-t; }
html.js .svg-tegels.is-kom .svg-stap.is-nu .svg-optie,
html.js .svg-tegels.is-kom .svg-stap.is-nu .svg-pair { animation: svg-tegel .42s cubic-bezier(.2, .7, .2, 1) both; }
html.js .svg-tegels.is-kom .svg-stap.is-nu .svg-optie:nth-child(2) { animation-delay: .05s; }
html.js .svg-tegels.is-kom .svg-stap.is-nu .svg-optie:nth-child(3) { animation-delay: .1s; }
html.js .svg-tegels.is-kom .svg-stap.is-nu .svg-optie:nth-child(4) { animation-delay: .15s; }
@keyframes svg-in-v { from { opacity: 0; transform: translateX(28px); } to { opacity: 1; transform: none; } }
@keyframes svg-in-t { from { opacity: 0; transform: translateX(-28px); } to { opacity: 1; transform: none; } }
@keyframes svg-uit-v { to { opacity: 0; transform: translateX(-28px); } }
@keyframes svg-uit-t { to { opacity: 0; transform: translateX(28px); } }
@keyframes svg-tegel { from { opacity: 0; transform: translateY(12px) scale(.97); } to { opacity: 1; transform: none; } }

/* ==================================================== g2 · the question pane: dark pane, the answers as tall rows */
.svg-paneel { border-top: 5px solid var(--dakpan); }   /* the site's form card has the same top rule */
.svg-paneel .svg-stap { background: var(--kalk-wit); }
.svg-paneel .svg-q { background: var(--lood-diep); color: var(--kalk-wit); padding-bottom: 18px; }
.svg-paneel .svg-vraag { color: var(--kalk-wit); }
.svg-paneel .svg-sub, .svg-paneel .svg-mee { color: var(--gips); }
.svg-paneel .svg-mee b { color: var(--kalk-wit); }
.svg-paneel .svg-tel { color: var(--gips); }
.svg-paneel .svg-tel__stap { color: var(--dakpan-licht); }
.svg-paneel .svg-terug { background: transparent; color: var(--kalk-wit); box-shadow: inset 0 0 0 1.5px rgba(255, 252, 247, .34); }
.svg-paneel .svg-terug .ico { color: var(--dakpan-licht); }
.svg-paneel .svg-terug:hover { background: rgba(255, 252, 247, .08); box-shadow: inset 0 0 0 1.5px var(--dakpan-licht); color: var(--kalk-wit); }
.svg-paneel .svg-terug:focus-visible { outline-color: var(--dakpan-licht); }
.svg-paneel .svg-a { padding: 14px var(--pad) var(--pad); }

/* a row: the words, and a round dark arrow at the end; the rows share the side's height */
.svg-paneel .svg-opties { display: flex; flex-direction: column; gap: 10px; }
.svg-paneel .svg-optie {
  flex: 1 1 0; align-items: center; gap: 16px; min-height: 52px; padding: 8px 10px 8px 20px; border-radius: 10px;
  background: var(--kalk); box-shadow: inset 0 0 0 1.5px var(--kalk-rand); transition: background-color .15s, box-shadow .15s, color .15s;
}
.svg-paneel .svg-optie__w { flex: 1 1 auto; font-size: clamp(17px, 1.45vw, 21px); }
.svg-paneel .svg-optie__pijl { width: 42px; height: 42px; background: var(--lood); color: var(--kalk-wit); }
.svg-paneel .svg-optie:hover { background: var(--dakpan-wash); box-shadow: inset 0 0 0 1.5px var(--dakpan); }
.svg-paneel .svg-optie:hover .svg-optie__pijl { background: var(--dakpan); transform: translateX(3px); }
.svg-paneel .svg-optie:has(input:checked) { background: var(--lood-diep); box-shadow: none; color: var(--kalk-wit); }
.svg-paneel .svg-optie:has(input:checked) .svg-optie__pijl { background: var(--dakpan); }
.svg-paneel .svg-opties--jn .svg-optie { padding-left: 24px; }
.svg-paneel .svg-opties--jn .svg-optie__w { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 16px; }
.svg-paneel .svg-opties--jn .svg-optie__w b { font-size: clamp(32px, 3vw, 42px); }
.svg-paneel .svg-opties--jn .svg-optie__w b + span { font-size: clamp(15px, 1.2vw, 17px); color: var(--lood-zacht); }
.svg-paneel .svg-opties--jn .svg-optie:has(input:checked) b + span { color: var(--gips); }
.svg-paneel .svg-pair { flex: 1 1 auto; flex-direction: column; gap: 10px; }
.svg-paneel .svg-pair .btn { flex: 1 1 0; min-height: 58px; padding: 0 20px; border-radius: 10px; font-size: clamp(17px, 1.5vw, 21px); }
.svg-paneel .svg-pair .btn .ico { width: 24px; height: 24px; }
.svg-paneel .svg-pair .btn--wa .ico { width: 27px; height: 27px; }
.svg-paneel .svg-pair::after { width: 36px; height: 36px; font-size: 13.5px; box-shadow: 0 0 0 5px var(--kalk-wit); }
.svg-paneel .svg-direct { padding: 2px var(--pad) var(--pad); }

@media (min-width: 900px) {
  /* the pane on the left, the height of the card; the answers on the right */
  .svg-paneel { --pane: 40%; }
  .svg-paneel .svg-zie, .svg-paneel .svg-nu__een, .svg-paneel .svg-snel, .svg-paneel .svg-form {
    display: grid; grid-template-columns: var(--pane) minmax(0, 1fr); grid-template-rows: auto 1fr; grid-template-areas: "q a" "d a";
  }
  .svg-paneel .svg-q { grid-area: q; padding: 128px 34px 0; }
  .svg-paneel .svg-nu__een > .svg-q, .svg-paneel .svg-snel > .svg-q, .svg-paneel .svg-form > .svg-q { grid-row: 1 / -1; padding-bottom: 30px; }
  .svg-paneel .svg-a, .svg-paneel .svg-form .svg-a { grid-area: a; grid-row: 1 / -1; padding: 28px 30px 30px 30px; }
  .svg-paneel .svg-zie > .svg-direct { grid-area: d; padding: 18px 34px 30px; background: var(--lood-diep); }
  .svg-paneel .svg-direct__zin { color: var(--gips); }
  .svg-paneel .svg-direct .svg-knop { background: transparent; color: var(--kalk-wit); box-shadow: inset 0 0 0 1.5px rgba(255, 252, 247, .34); }
  .svg-paneel .svg-direct .svg-knop .ico { color: var(--dakpan-licht); }
  .svg-paneel .svg-direct .svg-knop--wa .ico { color: var(--wa); }
  .svg-paneel .svg-direct .svg-knop:hover { background: rgba(255, 252, 247, .08); box-shadow: inset 0 0 0 1.5px var(--dakpan-licht); }
  .svg-paneel .svg-direct .svg-knop:focus-visible { outline-color: var(--dakpan-licht); }
  /* the head in the pane: the step as a large number, Terug beside it */
  .svg-paneel .svg-kop { right: auto; width: var(--pane); height: auto; padding: 26px 34px 0; align-items: flex-start; }
  .svg-paneel .svg-tel { display: grid; grid-template-columns: auto auto; align-items: baseline; justify-content: start; column-gap: 10px; }
  .svg-paneel .svg-tel__stap { grid-column: 1 / -1; margin-bottom: 4px; font-size: 12.5px; }
  .svg-paneel .svg-tel b { font-size: 76px; line-height: .86; letter-spacing: -.02em; color: var(--kalk-wit); }
  .svg-paneel .svg-tel__van { font-size: 16px; letter-spacing: .14em; }
  .svg-paneel .svg-terug { margin-top: 14px; }
  .svg-paneel .svg-vraag { font-size: clamp(28px, 2.5vw, 36px); }
  .svg-paneel .svg-snel__zin { font-size: clamp(20px, 1.75vw, 25px); line-height: 1.24; }
  .svg-paneel .svg-opties { gap: 10px; }
  .svg-paneel .svg-optie { min-height: 58px; padding-left: 24px; }
  .svg-paneel .svg-form .svg-a { align-content: center; }
}
@media (max-width: 899px) {
  /* a dark band on top of the card holds the step and the question; the answers under it */
  .svg-paneel .svg-kop .svg-tel { color: var(--gips); }
  .svg-paneel .svg-q { padding-bottom: 16px; }
}
@media (max-width: 560px) {
  .svg-paneel { --kop: 46px; }
  .svg-paneel .svg-q { padding-bottom: 13px; }
  .svg-paneel .svg-a { padding: 12px var(--pad) var(--pad); }
  .svg-paneel .svg-zie > .svg-a { padding-bottom: 10px; }
  .svg-paneel .svg-opties { gap: 6px; }
  .svg-paneel .svg-optie { min-height: 48px; padding: 4px 5px 4px 15px; gap: 12px; }
  .svg-paneel .svg-optie__w { font-size: 16.5px; }
  .svg-paneel .svg-optie__pijl { width: 38px; height: 38px; }
  .svg-paneel .svg-optie__pijl .ico { width: 16px; height: 16px; }
  .svg-paneel .svg-opties--jn .svg-optie { padding-left: 18px; }
  .svg-paneel .svg-opties--jn .svg-optie__w { display: block; }
  .svg-paneel .svg-opties--jn .svg-optie__w b { font-size: 32px; }
  .svg-paneel .svg-opties--jn .svg-optie__w b + span { margin-top: 4px; font-size: 14.5px; }
  .svg-paneel .svg-pair .btn { font-size: 17px; }
  .svg-paneel .svg-direct { padding: 0 var(--pad) var(--pad); }
}

/* g2 moves: the pane stays; its words roll up into place, the answers slide in from the right one after the other */
html.js .svg-paneel.is-kom .svg-stap.is-nu .svg-q > *,
html.js .svg-paneel.is-kom .svg-stap.is-nu > .svg-direct > * { animation: svg-rol .42s cubic-bezier(.2, .7, .2, 1) both; }
html.js .svg-paneel.is-kom .svg-stap.is-nu .svg-q > :nth-child(2) { animation-delay: .05s; }
html.js .svg-paneel.is-kom .svg-stap.is-nu .svg-q > :nth-child(3) { animation-delay: .1s; }
html.js .svg-paneel.is-kom .svg-stap.is-nu .svg-optie,
html.js .svg-paneel.is-kom .svg-stap.is-nu .svg-a > * { animation: svg-schuif .38s cubic-bezier(.2, .7, .2, 1) both; }
html.js .svg-paneel.is-kom .svg-stap.is-nu .svg-optie:nth-child(2) { animation-delay: .05s; }
html.js .svg-paneel.is-kom .svg-stap.is-nu .svg-optie:nth-child(3) { animation-delay: .1s; }
html.js .svg-paneel.is-kom .svg-stap.is-nu .svg-optie:nth-child(4) { animation-delay: .15s; }
html.js .svg-paneel.is-kom .svg-kop.is-tel b { animation: svg-rol .42s cubic-bezier(.2, .7, .2, 1) both; }
@keyframes svg-schuif { from { opacity: 0; transform: translateX(22px); } to { opacity: 1; transform: none; } }

/* ==================================================== g3 · your answer opens the next step */
/* every step has its own ground: the first white, the follow-up the tile's own wash, the urgent step all dakpan */
.svg-door .svg-stap { background: var(--kalk-wit); }
.svg-door .svg-nu { background: var(--dakpan-wash); }
.svg-door .svg-snel { background: var(--dakpan); }
.svg-door .svg-seg { display: inline-flex; gap: 5px; margin-left: 2px; }
.svg-door .svg-seg i { width: 22px; height: 4px; border-radius: 2px; background: var(--kalk-rand); transition: background-color .3s .15s; }
.svg-door .svg-seg i.is-af, .svg-door .svg-seg i.is-nu { background: var(--dakpan); }
.svg-door .svg-terug { transition: background-color .2s .15s, box-shadow .2s .15s, color .2s .15s; }
.svg-door[data-stap="nu"] .svg-terug { background: var(--kalk-wit); }
.svg-door[data-stap="snel"] .svg-tel { color: var(--kalk-wit); }
.svg-door[data-stap="snel"] .svg-seg i { background: rgba(255, 252, 247, .32); }
.svg-door[data-stap="snel"] .svg-seg i.is-af, .svg-door[data-stap="snel"] .svg-seg i.is-nu { background: var(--kalk-wit); }
.svg-door[data-stap="snel"] .svg-terug { background: rgba(255, 252, 247, .12); color: var(--kalk-wit); box-shadow: inset 0 0 0 1.5px rgba(255, 252, 247, .4); }
.svg-door[data-stap="snel"] .svg-terug .ico { color: var(--kalk-wit); }
.svg-door[data-stap="snel"] .svg-terug:focus-visible { outline-color: var(--kalk-wit); }
.svg-door .svg-snel .svg-vraag { color: var(--kalk-wit); }
.svg-door .svg-snel .svg-foto { color: var(--gips-licht); }
.svg-door .svg-snel .svg-foto .ico { color: var(--kalk-wit); }
.svg-door .svg-q { padding-bottom: 16px; }
.svg-door .svg-a { padding: 0; }

/* a tile: a field of colour that runs to the card's edges; three pixels of the step's ground between them */
.svg-door .svg-opties { gap: 3px; }
.svg-door .svg-optie {
  flex-direction: column; justify-content: space-between; gap: 10px; min-height: 56px; padding: 18px 18px 16px 22px;
  background: var(--dakpan-wash); transition: background-color .15s;
}
.svg-door .svg-optie__w { font-size: clamp(17px, 1.55vw, 22px); }
.svg-door .svg-optie__pijl { align-self: flex-end; width: 44px; height: 44px; background: var(--kalk-wit); color: var(--dakpan); }
.svg-door .svg-optie:hover { background: var(--gips); }
.svg-door .svg-optie:hover .svg-optie__pijl { background: var(--dakpan); color: var(--kalk-wit); transform: translateX(3px); }
.svg-door .svg-optie:has(input:checked) { background: var(--gips); }
.svg-door .svg-optie:has(input:focus-visible) { outline-offset: -6px; }
.svg-door .svg-opties--jn { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.svg-door .svg-optie--ja { background: var(--dakpan); color: var(--kalk-wit); }
.svg-door .svg-optie--ja:hover, .svg-door .svg-optie--ja:has(input:checked) { background: var(--dakpan-diep); }
.svg-door .svg-optie--ja:has(input:focus-visible) { outline-color: var(--kalk-wit); }
.svg-door .svg-optie--nee { background: var(--kalk-wit); }
.svg-door .svg-optie--nee:hover, .svg-door .svg-optie--nee:has(input:checked) { background: var(--kalk); }
.svg-door .svg-opties--jn .svg-optie__w b { font-size: clamp(36px, 3.6vw, 50px); }
.svg-door .svg-opties--jn .svg-optie__w b + span { margin-top: 8px; font-size: clamp(15px, 1.2vw, 17px); }
.svg-door .svg-optie--ja .svg-optie__w b + span { color: var(--gips-licht); }
.svg-door .svg-optie--nee .svg-optie__w b + span { color: var(--lood-zacht); }
.svg-door .svg-optie--ja .svg-optie__pijl { background: var(--kalk-wit); color: var(--dakpan); }
.svg-door .svg-optie--nee .svg-optie__pijl { background: var(--dakpan-wash); }
/* the urgent step: the call a white field, WhatsApp a green one, edge to edge */
.svg-door .svg-pair { flex: 1 1 auto; gap: 3px; }
.svg-door .svg-pair .btn { border-radius: 0; min-height: 84px; font-size: clamp(18px, 1.6vw, 22px); gap: 12px; padding: 0 18px; }
.svg-door .svg-pair .btn--call { background: var(--kalk-wit); color: var(--dakpan); }
.svg-door .svg-pair .btn--call:hover { background: var(--gips-licht); }
.svg-door .svg-pair .btn .ico { width: 24px; height: 24px; }
.svg-door .svg-pair .btn--wa .ico { width: 28px; height: 28px; }
.svg-door .svg-pair::after { width: 38px; height: 38px; font-size: 14px; box-shadow: 0 0 0 3px var(--dakpan); }
.svg-door .svg-pair .btn:focus-visible { outline: 3px solid var(--lood); outline-offset: -6px; }
.svg-door .svg-snel .svg-foto { margin: 0; padding: 14px var(--pad) var(--pad); }
.svg-door .svg-direct { padding: 14px var(--pad) var(--pad); }
.svg-door .svg-form .svg-a { padding: 16px var(--pad) var(--pad); }

@media (min-width: 900px) {
  /* the question on the left; the tiles fill the card's right side, edge to edge */
  .svg-door { --kop: 66px; --links: 38%; }
  .svg-door .svg-kop { right: auto; width: var(--links); }
  .svg-door .svg-zie, .svg-door .svg-nu__een, .svg-door .svg-snel, .svg-door .svg-form {
    display: grid; grid-template-columns: var(--links) minmax(0, 1fr); grid-template-rows: auto 1fr; grid-template-areas: "q a" "d a";
  }
  .svg-door .svg-q { grid-area: q; padding: var(--kop) 34px 18px; }
  .svg-door .svg-a { grid-area: a; grid-row: 1 / -1; }
  .svg-door .svg-zie > .svg-direct { grid-area: d; padding: 0 34px 30px; }
  .svg-door .svg-nu__een > .svg-q, .svg-door .svg-form > .svg-q { grid-row: 1 / -1; }
  .svg-door .svg-zie .svg-opties { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-auto-rows: 1fr; min-height: 300px; }
  .svg-door .svg-zie .svg-optie:last-child:nth-child(odd) { grid-column: 1 / -1; }   /* an odd count: the last one runs across */
  .svg-door .svg-optie { padding: 22px 22px 20px 26px; }
  .svg-door .svg-opties--jn .svg-optie { padding: 28px 24px 22px 30px; }
  .svg-door .svg-vraag { font-size: clamp(28px, 2.5vw, 36px); }
  /* the urgent step: the line and the photo to send on the left, the call over the app on the right */
  .svg-door .svg-snel > .svg-a { display: contents; }
  .svg-door .svg-snel .svg-pair { grid-area: a; grid-row: 1 / -1; flex-direction: column; }
  .svg-door .svg-snel .svg-pair .btn { flex: 1 1 0; }
  .svg-door .svg-snel .svg-foto { grid-area: d; align-self: end; padding: 0 34px 30px; }
  .svg-door .svg-snel__zin { font-size: clamp(21px, 1.8vw, 26px); }
  .svg-door .svg-form .svg-a { padding: 30px 32px 30px 8px; align-content: center; }
}
@media (min-width: 561px) and (max-width: 899px) {
  .svg-door .svg-zie .svg-opties { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-auto-rows: 1fr; }
  .svg-door .svg-zie .svg-optie:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .svg-door .svg-optie { min-height: 104px; }
  .svg-door .svg-opties--jn .svg-optie { min-height: 150px; }
}
@media (max-width: 560px) {
  .svg-door .svg-q { padding-bottom: 14px; }
  .svg-door .svg-optie { flex-direction: row; align-items: center; justify-content: space-between; min-height: 54px; padding: 6px 8px 6px 16px; }
  .svg-door .svg-optie__w { font-size: 16.5px; }
  .svg-door .svg-optie__pijl { align-self: center; width: 38px; height: 38px; }
  .svg-door .svg-optie__pijl .ico { width: 16px; height: 16px; }
  .svg-door .svg-opties--jn .svg-optie { flex-direction: column; align-items: stretch; padding: 16px 12px 12px 16px; }
  .svg-door .svg-opties--jn .svg-optie__pijl { align-self: flex-end; }
  .svg-door .svg-opties--jn .svg-optie__w b { font-size: 36px; }
  .svg-door .svg-opties--jn .svg-optie__w b + span { font-size: 14.5px; }
  .svg-door .svg-pair { flex: 1 1 auto; flex-direction: column; }
  .svg-door .svg-pair .btn { flex: 1 1 0; min-height: 62px; font-size: 17.5px; padding: 0 10px; gap: 10px; }
  .svg-door .svg-direct { padding: 12px var(--pad) var(--pad); }
  .svg-door .svg-snel .svg-foto { padding: 12px var(--pad) var(--pad); }
  .svg-door .svg-form .svg-q { padding-bottom: 0; }
}

/* g3 moves (g.js): the step grows out of the tile with clip-path; the step's words come in just behind the edge */
html.js .svg-door.is-kom .svg-stap.is-nu .svg-q > *,
html.js .svg-door.is-kom .svg-stap.is-nu .svg-optie__w { animation: svg-rol .44s .1s cubic-bezier(.2, .7, .2, 1) both; }

@media (min-width: 900px) {
  .svg-paneel .svg-form .svg-a, .svg-door .svg-form .svg-a { grid-template-areas: "naam tel mail" "bericht bericht bericht" "verzend verzend verzend"; }
  .svg-paneel .svg-verzend, .svg-door .svg-verzend { flex-direction: row; align-items: center; gap: 12px 24px; }
  .svg-paneel .svg-verzend .avg1, .svg-door .svg-verzend .avg1 { flex: 1 1 auto; margin: 0; }
  .svg-paneel .svg-verstuur, .svg-door .svg-verstuur { flex: none; width: auto; padding: 0 30px; }
  /* the privacy text unfolded: it takes the row, the button goes under it */
  .svg-paneel .svg-verzend:has(.avg1[open]), .svg-door .svg-verzend:has(.avg1[open]) { flex-direction: column; align-items: stretch; }
  .svg-paneel .svg-verzend:has(.avg1[open]) .svg-verstuur, .svg-door .svg-verzend:has(.avg1[open]) .svg-verstuur { align-self: flex-end; }
  .svg-paneel .fld textarea, .svg-door .fld textarea { height: 74px; min-height: 74px; }
  @supports (field-sizing: content) { .svg-paneel .fld textarea, .svg-door .fld textarea { min-height: 74px; } }
}

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

/* 10-13, by hand, on a crop of "STAP 1 VAN 3": "hide this on mobile as well". On a phone g3's head shows no step
   count and no dashes; a screen reader still hears "Stap 1 van 3". With nothing left in the head on the first step
   (Terug comes from the second on), the first question moves up into the head's room; later steps keep it for Terug. */
@media (max-width: 560px) {
  .svg-door .svg-tel { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .svg-door .svg-seg { display: none; }
  .svg-door .svg-zie > .svg-q { padding-top: 18px; }
}