/* Fold agent F · C3's "Wat zie je?" block as a multi-step form (f1 f2 f3). Loaded after the site's CSS and a.css–c.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 svf-…; the site's form pieces (.fld, .hp, .avg1, .btn, .pair)
   are used as they are and only tightened inside the block.

   States: html.js shows the steps (f.js moves between them); without script only the form shows, one plain form. */

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

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

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

.svf-blok {
  position: relative; margin-top: clamp(22px, 2.6vw, 34px); background: var(--kalk-wit); border-radius: 10px;
  border-top: 5px solid var(--dakpan); box-shadow: var(--shadow-1);
}

/* the question of a step: where focus lands when the step opens */
.svf-vraag {
  margin: 0 0 14px; font-weight: 800; font-size: clamp(23px, 2vw, 29px); line-height: 1.14; letter-spacing: -.022em;
  color: var(--lood); text-wrap: balance; scroll-margin-top: 92px;
}
.svf-vraag:focus { outline: none; }
.svf-sub { margin: -8px 0 14px; font-size: 15px; line-height: 1.45; color: var(--lood-zacht); }

/* the step count, in the voice of C3's "Wat zie je?" kicker */
.svf-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);
}
.svf-terug {
  display: inline-flex; align-items: center; gap: 7px; min-height: 36px; padding: 0 4px; border: 0; background: none; cursor: pointer;
  font-weight: 600; font-size: 15px; color: var(--lood); text-decoration: underline; text-decoration-color: var(--kalk-rand);
  text-decoration-thickness: 2px; text-underline-offset: 4px;
}
.svf-terug .ico { width: 15px; height: 15px; transform: rotate(180deg); color: var(--dakpan); }
.svf-terug:hover { color: var(--dakpan); text-decoration-color: var(--dakpan); }

/* a choice: a real radio laid over the whole tile, the round mark drawn beside the words (C3's mark) */
.svf-opties { display: grid; gap: 8px; margin: 0; }
.svf-optie {
  position: relative; display: flex; align-items: center; gap: 13px; min-height: 52px; padding: 10px 16px 10px 14px;
  border-radius: 8px; background: var(--kalk); box-shadow: inset 0 0 0 1px var(--kalk-rand); cursor: pointer;
  font-weight: 700; font-size: clamp(16px, 1.25vw, 18.5px); line-height: 1.22; letter-spacing: -.012em; color: var(--lood);
  transition: background-color .15s, box-shadow .15s, color .15s;
}
.svf-optie input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.svf-optie::before {
  content: ""; flex: none; width: 20px; height: 20px; border-radius: 50%; background: var(--kalk-wit);
  box-shadow: inset 0 0 0 2px var(--kalk-rand); transition: box-shadow .15s, background-color .15s;
}
.svf-optie:hover { box-shadow: inset 0 0 0 1.5px var(--dakpan); color: var(--dakpan); }
.svf-optie:has(input:checked) { background: var(--dakpan-wash); box-shadow: inset 0 0 0 1.5px var(--dakpan); color: var(--dakpan); }
.svf-optie:has(input:checked)::before { background: var(--dakpan); box-shadow: inset 0 0 0 5px var(--kalk-wit), 0 0 0 2px var(--dakpan); }
.svf-optie:has(input:focus-visible) { outline: 3px solid var(--dakpan); outline-offset: 2px; }
/* yes / no: the word, and under it what it means */
.svf-opties--jn { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.svf-opties--jn .svf-optie { align-items: flex-start; min-height: 68px; padding-top: 13px; }
.svf-opties--jn .svf-optie::before { margin-top: 2px; }
.svf-opties--jn .svf-optie b { display: block; font-weight: 800; font-size: clamp(18px, 1.45vw, 21px); }
.svf-opties--jn .svf-optie > span > span { display: block; margin-top: 2px; font-weight: 500; font-size: 14.5px; line-height: 1.35; letter-spacing: 0; color: var(--lood-zacht); }

/* "rather call or app right away?": the fold's two ways in, quiet, on the first step */
.svf-direct { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; margin: 0; font-size: 15px; line-height: 1.4; color: var(--lood-zacht); }
.svf-direct a {
  display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--lood); white-space: nowrap;
  text-decoration: underline; text-decoration-color: var(--kalk-rand); text-decoration-thickness: 2px; text-underline-offset: 4px;
}
.svf-direct a:hover { color: var(--dakpan); text-decoration-color: var(--dakpan); }
.svf-direct .ico { width: 16px; height: 16px; color: var(--dakpan); }
.svf-direct__wa .ico { width: 18px; height: 18px; color: #1fae55; }

/* the urgent step: the operator's line, the pair (call leads), the photo C3 asked for */
.svf-snel__zin { max-width: 31em; font-size: clamp(21px, 1.75vw, 26px); line-height: 1.22; margin-bottom: 18px; }
.svf-pair { max-width: 520px; }
.svf-foto { display: flex; align-items: flex-start; gap: 9px; margin: 14px 0 0; font-size: 15px; line-height: 1.45; color: var(--lood-zacht); }
.svf-foto .ico { flex: none; width: 18px; height: 18px; margin-top: 2px; color: var(--dakpan); }

/* the form: the homepage's fields, tightened to sit in a fold */
.svf-blok .fld { margin: 0; }
.svf-blok .fld > span { font-size: 14px; margin-bottom: 5px; line-height: 1.3; }
.svf-blok .fld input { padding: 10px 13px; }
.svf-blok .fld textarea { display: block; min-height: 0; height: 74px; padding: 10px 13px; line-height: 1.45; }
@supports (field-sizing: content) {
  .svf-blok .fld textarea { field-sizing: content; height: auto; min-height: 74px; max-height: 180px; }
}
.svf-blok .avg1 { margin: 12px 0 14px; }
.svf-verstuur { min-height: 52px; }
.svf-mee { margin: 0; font-size: 14px; line-height: 1.45; color: var(--lood-zacht); }
.svf-mee b { display: block; margin-top: 2px; font-weight: 600; color: var(--lood); }

/* without script: the block is the form, nothing else */
html:not(.js) .svf-zie, html:not(.js) .svf-nu, html:not(.js) .svf-snel { display: none; }
html:not(.js) .svf-kop, html:not(.js) .svf-balk, html:not(.js) .svf-rij__n, html:not(.js) .svf-rij__kop,
html:not(.js) .svf-blad__kop, html:not(.js) .svf-gekozen { display: none; }

@keyframes svf-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

@media (max-width: 560px) {
  .svf-blok { margin-top: 2px; border-top-width: 4px; }
  .svf-vraag { font-size: 22px; margin-bottom: 11px; }
  .svf-form .svf-vraag { font-size: 21px; margin-bottom: 9px; }
  .svf-sub { margin: -5px 0 10px; font-size: 14px; }
  .svf-tel { font-size: 12px; letter-spacing: .14em; }
  .svf-terug { font-size: 14px; min-height: 32px; }
  .svf-optie { min-height: 48px; padding: 8px 12px 8px 12px; gap: 10px; font-size: 16px; }
  .svf-optie::before { width: 17px; height: 17px; }
  .svf-opties { gap: 6px; }
  .svf-opties--jn .svf-optie { min-height: 64px; padding-top: 11px; }
  .svf-opties--jn .svf-optie b { font-size: 18px; }
  .svf-opties--jn .svf-optie > span > span { font-size: 13.5px; }
  .svf-direct { font-size: 14px; gap: 2px 14px; }
  .svf-snel__zin { font-size: 19px; line-height: 1.25; margin-bottom: 14px; }
  .svf-foto { font-size: 14px; margin-top: 10px; }
  .svf-blok .fld > span { font-size: 13.5px; margin-bottom: 4px; }
  .svf-blok .fld input { padding: 9px 11px; }
  .svf-blok .fld textarea { height: 52px; min-height: 52px; padding: 9px 11px; }
  .svf-blok .avg1 { margin: 10px 0 10px; }
  .svf-blok .avg-regel { font-size: 13px; line-height: 1.45; }
  .svf-verstuur { width: 100%; min-height: 50px; }
}

/* ==================================================== f1 · one question at a time: the card keeps its size and turns */
html.js .svf-kaart { border-top: 0; }
.svf-balk { height: 5px; background: var(--gips); border-radius: 10px 10px 0 0; overflow: hidden; }
.svf-balk span { display: block; height: 100%; width: calc(var(--svf-p, .3333) * 100%); background: var(--dakpan); transition: width .4s cubic-bezier(.2, .7, .2, 1); }
.svf-kop { display: flex; align-items: center; justify-content: space-between; gap: 12px; height: 48px; padding: 14px clamp(18px, 2.2vw, 30px) 0; }
.svf-kop .svf-terug { height: 34px; min-height: 0; margin-right: -4px; }

/* every step in one cell. The first step always holds its place (hidden when it is not the one shown), so the card
   never gets smaller than it opened; a step that is not shown is lifted out of the flow. Only the form, the tallest,
   makes the card grow, and f.js eases it there. */
.svf-kaart .svf-stage { position: relative; display: grid; overflow: clip; }
html.js .svf-kaart .svf-stap:not(.is-nu):not(.svf-zie) { position: absolute; left: 0; right: 0; top: 0; }
.svf-kaart .svf-stage > .svf-stap { grid-area: 1 / 1; min-width: 0; padding: 6px clamp(18px, 2.2vw, 30px) clamp(20px, 2.2vw, 28px); }
html.js .svf-kaart .svf-stap {
  visibility: hidden; opacity: 0; transform: translateX(28px);
  transition: opacity .2s, transform .3s cubic-bezier(.2, .7, .2, 1), visibility 0s .3s;
}
html.js .svf-kaart .svf-stap.is-af { transform: translateX(-28px); }
html.js .svf-kaart .svf-stap.is-nu {
  visibility: visible; opacity: 1; transform: none;
  transition: opacity .25s .08s, transform .34s cubic-bezier(.2, .7, .2, 1), visibility 0s;
}
.svf-kaart .svf-zie { display: flex; flex-direction: column; }
.svf-kaart .svf-zie > .svf-direct { margin-top: auto; padding-top: 16px; }
.svf-kaart .svf-mee { margin-top: 14px; }

@media (width > 960px) {
  /* the question on the left, the answers on the right: C3's two panes, one step at a time */
  .svf-kaart .svf-zie, .svf-kaart .svf-nu__een, .svf-kaart .svf-form {
    display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); column-gap: clamp(32px, 4vw, 64px); align-items: start;
  }
  .svf-kaart .svf-zie { grid-template-rows: auto 1fr; grid-template-areas: "q a" "d a"; }
  .svf-kaart .svf-zie > .svf-q { grid-area: q; }
  .svf-kaart .svf-zie > .svf-a { grid-area: a; }
  .svf-kaart .svf-zie > .svf-direct { grid-area: d; align-self: end; margin-top: 0; padding-top: 16px; }
  .svf-kaart .svf-zie > .svf-direct > span, .svf-vraagblok .svf-zie > .svf-direct > span { flex-basis: 100%; }
  .svf-kaart .svf-vraag { font-size: clamp(26px, 2.3vw, 32px); }
  .svf-kaart .svf-snel__zin { font-size: clamp(22px, 1.9vw, 27px); }
  .svf-kaart .svf-velden { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 14px; }
  .svf-kaart .svf-fld--bericht { grid-column: 1 / -1; }
}
@media (max-width: 960px) {
  .svf-kaart .svf-velden { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px 12px; }
  .svf-kaart .svf-fld--mail, .svf-kaart .svf-fld--bericht { grid-column: 1 / -1; }
  .svf-kaart .svf-form .svf-q { margin-bottom: 4px; }
  .svf-kaart .svf-mee { display: none; }   /* the step count says where you are; the answers go along all the same */
}
@media (max-width: 560px) {
  .svf-kop { height: 40px; padding: 10px 14px 0; }
  .svf-kop .svf-terug { height: 30px; }
  .svf-kaart .svf-stage > .svf-stap { padding: 4px 14px 14px; }
  .svf-kaart .svf-zie > .svf-direct { padding-top: 12px; }
  .svf-kaart .svf-opties--jn, .svf-route .svf-opties--jn { grid-template-columns: minmax(0, 1fr); }   /* yes over no: rows, like the choices */
  .svf-kaart .svf-opties--jn .svf-optie, .svf-route .svf-opties--jn .svf-optie { min-height: 58px; }
}

/* ==================================================== f2 · the route stays in view: answered steps fold into a line */
.svf-route { padding: clamp(12px, 1.6vw, 22px) clamp(14px, 2.2vw, 30px) clamp(14px, 1.8vw, 24px); }
.svf-rijen { margin: 0; padding: 0; list-style: none; }
.svf-rij { position: relative; display: grid; grid-template-columns: 30px minmax(0, 1fr); column-gap: 14px; padding: 5px 0; }
.svf-rij:not(:last-child)::after {   /* the line that ties the numbers */
  content: ""; position: absolute; left: 14px; top: 37px; bottom: -6px; width: 2px; background: var(--kalk-diep);
}
.svf-rij__n { grid-column: 1; grid-row: 1 / span 3; align-self: start; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%;
  font-family: var(--f-tech); font-weight: 700; font-size: 15px; line-height: 1; background: var(--kalk-wit); color: var(--lood-grijs); box-shadow: inset 0 0 0 2px var(--kalk-rand); }
.svf-rij[data-staat="nu"] .svf-rij__n { background: var(--dakpan); color: var(--kalk-wit); box-shadow: none; }
.svf-rij[data-staat="af"] .svf-rij__n { box-shadow: inset 0 0 0 2px var(--dakpan); color: transparent; }
.svf-rij[data-staat="af"] .svf-rij__n span { position: relative; }
.svf-rij[data-staat="af"] .svf-rij__n span::after {   /* a tick where the number was */
  content: ""; position: absolute; left: 50%; top: 50%; width: 6px; height: 11px; margin: -7px 0 0 -3px;
  border: solid var(--dakpan); border-width: 0 2.5px 2.5px 0; transform: rotate(42deg);
}
.svf-rij[data-staat="weg"] { display: none; }

.svf-rij__kop { grid-column: 2; display: flex; align-items: baseline; gap: 0 12px; min-height: 30px; padding-top: 4px; }
.svf-rij__titel, .svf-wijzig { flex: none; }
.svf-rij__titel { font-weight: 700; font-size: 16.5px; line-height: 1.3; color: var(--lood-grijs); }
.svf-rij__antw { display: none; min-width: 0; font-weight: 700; font-size: 16.5px; line-height: 1.3; color: var(--lood); }
.svf-wijzig {
  display: none; margin-left: auto; padding: 2px 2px; border: 0; background: none; cursor: pointer; font-size: 14.5px; font-weight: 600; color: var(--lood);
  text-decoration: underline; text-decoration-color: var(--kalk-rand); text-decoration-thickness: 2px; text-underline-offset: 4px;
}
.svf-wijzig:hover { color: var(--dakpan); text-decoration-color: var(--dakpan); }
.svf-rij[data-staat="af"] .svf-rij__titel { font-weight: 500; font-size: 14.5px; color: var(--lood-zacht); }
.svf-rij[data-staat="af"] .svf-rij__antw, .svf-rij[data-staat="af"] .svf-wijzig { display: inline; }
.svf-rij[data-staat="nu"] > .svf-rij__kop { display: none; }

.svf-route .svf-stap { grid-column: 2; min-width: 0; padding: 2px 0 6px; }
html.js .svf-route .svf-stap:not(.is-nu) { display: none; }
html.js .svf-route .svf-stap.is-nu { animation: svf-in .26s ease-out; }
.svf-route .svf-zie > .svf-direct { margin-top: 14px; }
.svf-route .svf-vraag { margin-top: 1px; }

@media (width > 960px) {
  .svf-route .svf-zie .svf-opties { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .svf-route .svf-zie .svf-optie { min-height: 64px; }
  .svf-route .svf-opties--jn { max-width: 720px; }
  .svf-route .svf-form .svf-q { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 16px; margin-bottom: 14px; }
  .svf-route .svf-form .svf-vraag, .svf-route .svf-form .svf-sub { margin: 0; }
  /* name, phone, e-mail in a row; under them the text, and beside it the privacy line over the button */
  .svf-route .svf-form .svf-a {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 14px; align-items: start;
    grid-template-areas: "naam tel mail" "bericht bericht avg" "bericht bericht knop";
  }
  .svf-route .svf-velden { display: contents; }
  .svf-route .svf-fld--naam { grid-area: naam; }
  .svf-route .svf-fld--tel { grid-area: tel; }
  .svf-route .svf-fld--mail { grid-area: mail; }
  .svf-route .svf-fld--bericht { grid-area: bericht; }
  .svf-route .svf-form .avg1 { grid-area: avg; margin: 22px 0 0; }
  .svf-route .svf-form .svf-verstuur { grid-area: knop; justify-self: start; }
}
@media (min-width: 561px) and (max-width: 960px) {
  .svf-route .svf-zie .svf-opties { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
@media (max-width: 960px) {
  .svf-route .svf-velden { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px 12px; }
  .svf-route .svf-fld--mail, .svf-route .svf-fld--bericht { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  .svf-route { padding: 8px 12px 10px; }
  .svf-rij { grid-template-columns: 26px minmax(0, 1fr); column-gap: 10px; padding: 4px 0; }
  .svf-rij__n { width: 26px; height: 26px; font-size: 13.5px; }
  .svf-rij:not(:last-child)::after { left: 12px; top: 35px; }
  .svf-rij__kop { min-height: 26px; padding-top: 2px; gap: 0 10px; }
  .svf-rij__titel, .svf-rij__antw { font-size: 15px; }
  .svf-rij[data-staat="af"] .svf-rij__titel { display: none; }   /* on a phone an answered line is the answer and "Wijzig" */
  .svf-wijzig { font-size: 14px; }
  .svf-route .svf-vraag { margin-top: 0; }
}

/* ==================================================== f3 · the fold asks, a sheet answers */
.svf-vraagblok { padding: clamp(16px, 2vw, 26px) clamp(16px, 2.2vw, 30px); }
.svf-uitleg { margin: -6px 0 0; max-width: 24em; font-size: 15.5px; line-height: 1.5; color: var(--lood-zacht); }
.svf-vraagblok .svf-zie > .svf-direct { margin-top: 16px; }
.svf-optie__pijl { margin-left: auto; width: 17px; height: 17px; color: var(--dakpan); transition: transform .15s; }
.svf-optie:hover .svf-optie__pijl { transform: translateX(3px); }
html.js .svf-vraagblok > .svf-blad { display: none; }   /* until f.js lifts it into its dialog */

@media (width > 960px) {
  .svf-vraagblok .svf-zie {
    display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); grid-template-rows: auto 1fr;
    grid-template-areas: "q a" "d a"; column-gap: clamp(32px, 4vw, 64px); align-items: start;
  }
  .svf-vraagblok .svf-zie > .svf-q { grid-area: q; }
  .svf-vraagblok .svf-zie > .svf-a { grid-area: a; }
  .svf-vraagblok .svf-zie > .svf-direct { grid-area: d; align-self: end; }
  .svf-vraagblok .svf-vraag { font-size: clamp(26px, 2.3vw, 32px); }
  .svf-vraagblok .svf-opties { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
  .svf-vraagblok .svf-zie .svf-optie { min-height: 64px; }
}
@media (max-width: 560px) {
  .svf-vraagblok { padding: 12px 14px 14px; }
  .svf-uitleg { display: none; }
  .svf-vraagblok .svf-zie .svf-opties { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .svf-vraagblok .svf-zie .svf-optie { min-height: 56px; font-size: 15px; padding: 8px 10px; gap: 8px; }
  .svf-vraagblok .svf-zie .svf-optie::before { width: 15px; height: 15px; }
  .svf-optie__pijl { display: none; }
  .svf-vraagblok .svf-zie > .svf-direct { margin-top: 12px; }
}

/* the sheet: a dialog the size of the window, see-through, the sheet itself at its foot (a tap beside it closes) */
.svf-dlg {
  position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0;
  border: 0; background: transparent; color: var(--lood); overflow: hidden;
}
.svf-dlg[open] { display: flex; align-items: flex-end; justify-content: center; }
.svf-dlg::backdrop { background: rgba(26, 36, 41, .5); animation: svf-dim .3s ease-out; }
.svf-dlg .svf-blad {
  width: min(100%, 620px); max-height: calc(100% - 24px); overflow: auto; overscroll-behavior: contain;
  background: var(--kalk-wit); border-radius: 14px 14px 0 0; border-top: 5px solid var(--dakpan); box-shadow: var(--shadow-2);
  padding: 0 clamp(18px, 3vw, 32px) calc(22px + env(safe-area-inset-bottom)); animation: svf-op .36s cubic-bezier(.2, .7, .2, 1);
}
.svf-dlg.is-weg .svf-blad { animation: svf-neer .2s ease-in forwards; }
.svf-dlg.is-weg::backdrop { opacity: 0; transition: opacity .2s; }
html:has(.svf-dlg[open]) { overflow: hidden; }
@keyframes svf-op { from { transform: translateY(100%); } to { transform: none; } }
@keyframes svf-neer { to { transform: translateY(100%); } }
@keyframes svf-dim { from { opacity: 0; } }

.svf-blad__kop {
  position: sticky; top: 0; z-index: 2; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px;
  margin: 0 calc(-1 * clamp(18px, 3vw, 32px)); padding: 10px clamp(12px, 2.4vw, 24px) 8px; background: var(--kalk-wit);
}
.svf-blad__kop .svf-terug { justify-self: start; }
.svf-blad__kop .svf-tel { justify-self: center; }
.svf-dicht { justify-self: end; position: relative; width: 40px; height: 40px; border: 0; border-radius: 50%; background: var(--kalk); cursor: pointer; }
.svf-dicht span::before, .svf-dicht span::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 16px; height: 2.5px; margin: -1.25px 0 0 -8px; background: var(--lood); border-radius: 2px; transform: rotate(45deg);
}
.svf-dicht span::after { transform: rotate(-45deg); }
.svf-dicht:hover { background: var(--kalk-diep); }
.svf-gekozen {
  display: inline-flex; align-items: center; gap: 8px; margin: 2px 0 14px; padding: 5px 12px 5px 10px; border-radius: 99px;
  background: var(--dakpan-wash); color: var(--dakpan); font-weight: 700; font-size: 14px; line-height: 1.3;
}
.svf-gekozen::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--dakpan); box-shadow: 0 0 0 2px var(--kalk-wit), 0 0 0 3.5px var(--dakpan); }
html.js .svf-blad .svf-stap:not(.is-nu) { display: none; }
html.js .svf-blad .svf-stap.is-nu { animation: svf-in .24s ease-out; }
.svf-blad .svf-opties--jn { margin-bottom: 4px; }
.svf-blad .svf-snel__zin { font-size: clamp(21px, 2.6vw, 25px); }
/* in the sheet the form has room: the homepage's own field sizes */
.svf-blad .svf-form .fld { margin-bottom: 14px; }
.svf-blad .svf-form .fld > span { font-size: 14.5px; margin-bottom: 6px; }
.svf-blad .svf-form .fld input { padding: 12px 14px; }
.svf-blad .svf-form .fld textarea { height: 96px; padding: 12px 14px; }
.svf-blad .form__note { margin-top: 12px; }
html:not(.js) .svf-vraagblok .svf-form { max-width: 640px; }
html:not(.js) .svf-kaart .svf-stage > .svf-stap { padding-top: clamp(16px, 2vw, 24px); }

@media (min-width: 721px) {
  .svf-dlg[open] { align-items: center; }
  .svf-dlg .svf-blad { border-radius: 12px; max-height: calc(100% - 64px); padding-bottom: 28px; }
  @keyframes svf-op { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }
  @keyframes svf-neer { to { transform: translateY(40px); opacity: 0; } }
}
@media (max-width: 560px) {
  .svf-blad .svf-form .fld { margin-bottom: 12px; }
  .svf-blad .svf-form .fld input { padding: 11px 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .svf-vouw *, .svf-dlg, .svf-dlg * { animation: none !important; transition: none !important; }
  .svf-dlg::backdrop { animation: none; }
}