/**
 * Verzijden Clinics — aanvulling op de aangeleverde handoff.
 *
 * De vormgeving staat in public/assets/vc/ en komt ongewijzigd uit het
 * ontwerp. Hier staat alleen wat het ontwerp niet kent, omdat dat alleen de
 * homepage besloeg:
 *
 *   - de hero van een subpagina
 *   - het kruimelpad
 *   - de accordeon met veelgestelde vragen
 *   - de feitenlijst met open vragen
 *   - de keuzehulp
 *   - het uitlegblok met schema
 *   - het formulier
 *
 * Alles hieronder gebruikt de tokens uit vc/tokens.css. Er staat bewust bijna
 * geen losse hexwaarde of maat in: komt er een nieuwe versie van het ontwerp,
 * dan schuift dit vanzelf mee.
 */

/* ===========================================================================
   1. De hero van een subpagina
   ---------------------------------------------------------------------------
   De homepage heeft de schermvullende hero uit het ontwerp. Elke andere pagina
   krijgt deze: een donker vlak met de tekst links en het beeld rechts.

   Twee redenen. Het maakt de pagina's onderling herkenbaar, en de kopbalk is
   op elke pagina doorzichtig met witte tekst, dus er moet altijd iets donkers
   onder liggen. In de vorige versie stond het kruimelpad tussen de balk en de
   hero; dat leverde witte letters op een lichte balk op.
   ======================================================================== */

.vc-subhero {
  position: relative;
  background: var(--surface-inverse);
  color: var(--text-inverse);
  isolation: isolate;
  overflow: hidden;
}

.vc-subhero__inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: calc(var(--header-h) + 56px) var(--container-pad) 72px;
}

.vc-subhero__body {
  max-width: var(--measure-body);
}

.vc-subhero__title {
  font-size: var(--size-h1);
  letter-spacing: var(--tracking-h1);
  color: var(--text-inverse);
  margin: 20px 0 0;
  max-width: 18ch;
}

.vc-subhero__intro {
  margin-top: 24px;
  font-size: var(--size-lead);
  line-height: var(--leading-body);
  color: var(--text-inverse-body);
}

.vc-subhero__intro p + p {
  margin-top: 16px;
}

.vc-subhero__actions {
  margin-top: 36px;
  flex-wrap: wrap;
}

/* Het beeld loopt over de volle breedte, ook achter de tekst langs. In de
   eerste versie stond het op 46% en was de linkerhelft een vlak bruin vlak;
   dat gaf te veel kleur en te weinig foto. */
.vc-subhero__media {
  position: absolute;
  inset: 0;
  z-index: -1;
}

.vc-subhero__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Het verloop van links naar rechts komt uit het ontwerp zelf: --scrim-band,
   het verloop dat de statement-band gebruikt om witte tekst op een foto te
   zetten. Zwart en niet bruin, want daar blijft witte tekst het scherpst op,
   en het loopt naar 0.12 uit zodat de rechterkant van de foto open blijft.

   Daarnaast hetzelfde bovenverloop als de hero, want de kopbalk ligt hier ook
   doorzichtig overheen en moet leesbaar blijven op een licht deel van de foto. */
.vc-subhero__scrim {
  position: absolute;
  inset: 0;
  background: var(--scrim-band);
}

.vc-subhero__scrim::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 280px;
  background: var(--scrim-hero-top);
}

@media (max-width: 1023px) {
  .vc-subhero__inner {
    padding-top: calc(var(--header-h) + 32px);
    padding-bottom: 56px;
  }

  /* Onder laptopbreedte staat de tekst over de volle breedte, dus daar hoort
     een verloop van boven naar beneden in plaats van van links naar rechts. */
  .vc-subhero__scrim {
    background: linear-gradient(
      180deg,
      rgb(0 0 0 / 0.72) 0%,
      rgb(0 0 0 / 0.6) 48%,
      rgb(0 0 0 / 0.52) 100%
    );
  }

  .vc-subhero__scrim::before {
    content: none;
  }

  .vc-subhero__title {
    max-width: none;
  }
}

/* ===========================================================================
   2. Kruimelpad
   ---------------------------------------------------------------------------
   Staat in de subhero, boven het label. Bewust geen eigen balk meer: dat was
   het losse menuutje onder de navigatie.
   ======================================================================== */

.vc-crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 28px;
  font-size: var(--size-meta);
  color: var(--text-inverse-label);
}

.vc-crumbs a {
  color: var(--text-inverse-muted);
  border-bottom-color: transparent;
}

.vc-crumbs a:hover {
  color: var(--text-inverse);
}

/* Het scheidingsteken staat in CSS, zodat het niet meeleest in een schermlezer. */
.vc-crumbs > * + *::before {
  content: "/";
  margin-right: 8px;
  color: var(--text-inverse-label);
}

/* ===========================================================================
   3. Lopende tekst
   ======================================================================== */

.vc-prose {
  max-width: var(--measure-default);
  color: var(--text-secondary);
}

.vc-prose p + p,
.vc-prose ul,
.vc-prose ol {
  margin-top: 20px;
}

.vc-prose ul,
.vc-prose ol {
  padding-left: 22px;
}

.vc-prose li + li {
  margin-top: 8px;
}

.vc-prose strong {
  font-weight: var(--weight-medium);
  color: var(--text-primary);
}

.vc-section--inverse .vc-prose {
  color: var(--text-inverse-body);
}

/* ===========================================================================
   3b. Opsommingen: een vinkje in plaats van een bolletje
   ---------------------------------------------------------------------------
   Overal hetzelfde, zodat een opsomming in een tekstblok er niet anders uitziet
   dan een in een antwoord of op een behandelkaart. Het vinkje is een gedraaide
   hoek van 1,5px, dezelfde lijndikte als de iconen uit de merkinstructie.

   Bij de stappen is dit ook de reden dat de nummering weer klopt: de punten
   binnen stap 2 zijn zichtbaar geen stap meer.
   ======================================================================== */

.vc-prose ul,
.vc-lead ul,
.vc-step__body ul,
.vc-faq__antwoord ul,
.vc-treatment__body ul,
.vc-row__body ul,
.vc-person__body ul,
.vc-facts__value ul,
.vc-contact__intro ul,
.vc-subhero__intro ul,
.vc-hero__intro ul,
.vc-indications__intro ul,
.vc-process__intro ul,
.vc-slider__empty ul {
  list-style: none;
  padding-left: 0;
  margin-top: 16px;
}

.vc-prose li,
.vc-lead li,
.vc-step__body li,
.vc-faq__antwoord li,
.vc-treatment__body li,
.vc-row__body li,
.vc-person__body li,
.vc-facts__value li,
.vc-contact__intro li,
.vc-subhero__intro li,
.vc-hero__intro li,
.vc-indications__intro li,
.vc-process__intro li,
.vc-slider__empty li {
  position: relative;
  padding-left: 30px;
}

.vc-prose li + li,
.vc-lead li + li,
.vc-step__body li + li,
.vc-faq__antwoord li + li,
.vc-treatment__body li + li,
.vc-row__body li + li,
.vc-person__body li + li,
.vc-facts__value li + li,
.vc-contact__intro li + li,
.vc-subhero__intro li + li,
.vc-hero__intro li + li,
.vc-indications__intro li + li,
.vc-process__intro li + li,
.vc-slider__empty li + li {
  margin-top: 10px;
}

.vc-prose li::before,
.vc-lead li::before,
.vc-step__body li::before,
.vc-faq__antwoord li::before,
.vc-treatment__body li::before,
.vc-row__body li::before,
.vc-person__body li::before,
.vc-facts__value li::before,
.vc-contact__intro li::before,
.vc-subhero__intro li::before,
.vc-hero__intro li::before,
.vc-indications__intro li::before,
.vc-process__intro li::before,
.vc-slider__empty li::before {
  content: "";
  position: absolute;
  left: 1px;
  top: 0.58em;
  width: 12px;
  height: 7px;
  border-left: 1.5px solid var(--text-muted);
  border-bottom: 1.5px solid var(--text-muted);
  border-bottom-left-radius: 1px;
  transform: rotate(-45deg);
}

/* Op een donker vlak keert het vinkje mee om. */
.vc-section--inverse li::before,
.vc-subhero__intro li::before,
.vc-hero__intro li::before {
  border-color: var(--text-inverse-label);
}

/* Een genummerde opsomming houdt zijn nummers: daar is de volgorde de inhoud. */
.vc-prose ol,
.vc-lead ol,
.vc-faq__antwoord ol {
  list-style: decimal;
  padding-left: 22px;
}

.vc-prose ol li,
.vc-lead ol li,
.vc-faq__antwoord ol li {
  padding-left: 0;
}

.vc-prose ol li::before,
.vc-lead ol li::before,
.vc-faq__antwoord ol li::before {
  content: none;
}

/* ===========================================================================
   4. Veelgestelde vragen
   ---------------------------------------------------------------------------
   Toetsenbordtoegankelijk zonder eigen JavaScript: details en summary doen dat
   zelf. De vraag blijft dichtgeklapt goed leesbaar, dus geen kleiner of
   grijzer lettertype in gesloten toestand.
   ======================================================================== */

.vc-faq {
  max-width: var(--measure-row);
  border-top: 1px solid var(--border-subtle);
}

.vc-faq__item {
  border-bottom: 1px solid var(--border-hairline);
}

.vc-faq__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 48px;
  padding: 22px 0;
  cursor: pointer;
  list-style: none;
}

.vc-faq__summary::-webkit-details-marker {
  display: none;
}

.vc-faq__vraag {
  font-family: var(--font-display);
  font-size: var(--size-h4);
  line-height: var(--leading-display);
  margin: 0;
}

.vc-faq__summary .vc-icon {
  transition: transform var(--duration-hover) var(--ease-out);
  color: var(--text-secondary);
}

.vc-faq__item[open] .vc-faq__summary .vc-icon {
  transform: rotate(180deg);
}

.vc-faq__antwoord {
  padding-bottom: 28px;
  max-width: var(--measure-body);
  color: var(--text-secondary);
}

.vc-faq__antwoord p + p,
.vc-faq__antwoord ul {
  margin-top: 16px;
}

.vc-faq__antwoord ul {
  padding-left: 22px;
}

.vc-faq__antwoord li + li {
  margin-top: 8px;
}

/* ===========================================================================
   5. Feitenlijst
   ---------------------------------------------------------------------------
   De praktische kant, scanbaar. Een regel kan gemarkeerd staan als open vraag:
   die valt dan zichtbaar op in plaats van dat er een verzonnen waarde staat.
   Bij een zorgpagina is een zichtbaar gat beter dan een gok.
   ======================================================================== */

.vc-feiten {
  margin: 0;
  border-top: 1px solid var(--border-subtle);
  max-width: var(--measure-row);
}

.vc-feit {
  display: grid;
  gap: 4px;
  padding: 20px 0;
  border-bottom: 1px solid var(--border-hairline);
}

.vc-feit dt {
  margin: 0;
}

.vc-feit dd {
  margin: 0;
  font-size: var(--size-body);
  color: var(--text-primary);
}

.vc-feit.is-open dd {
  color: #a8834f;
}

.vc-feit__open::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 10px;
  border-radius: var(--radius-pill);
  background: currentColor;
  vertical-align: middle;
}

@media (min-width: 768px) {
  .vc-feit {
    grid-template-columns: 260px 1fr;
    gap: 32px;
    align-items: baseline;
  }
}

/* ===========================================================================
   6. Uitlegblok met schema
   ======================================================================== */

.vc-split--uitleg {
  display: grid;
  gap: var(--gap-columns);
  align-items: center;
}

.vc-uitleg__img {
  width: 100%;
  height: auto;
}

@media (min-width: 1024px) {
  .vc-split--uitleg {
    grid-template-columns: 1fr 1fr;
  }
}

/* ===========================================================================
   7. Keuzehulp
   ---------------------------------------------------------------------------
   Onder laptopbreedte is een tabel van vijf kolommen niet te lezen.
   Horizontaal scrollen zou juist de kolom verbergen die de bezoeker zoekt,
   dus daaronder staat per klacht een kaartje.
   ======================================================================== */

.vc-keuze {
  display: none;
}

.vc-keuze__lijst {
  display: grid;
  gap: var(--gap-cards);
  margin: 0;
  padding: 0;
  list-style: none;
}

.vc-keuze__lijst > li {
  padding: var(--pad-card-tight);
  background: var(--surface-card);
  border: 1px solid var(--border-hairline);
}

.vc-keuze__lijst h3 {
  margin-bottom: 14px;
}

@media (min-width: 768px) {
  .vc-keuze__lijst {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .vc-keuze__lijst {
    display: none;
  }

  .vc-keuze {
    display: block;
    background: var(--surface-card);
    border: 1px solid var(--border-hairline);
  }

  .vc-keuze table {
    width: 100%;
    border-collapse: collapse;
  }

  .vc-keuze th,
  .vc-keuze td {
    padding: 16px 20px;
    border-bottom: 1px solid var(--border-hairline);
    text-align: left;
    font-size: var(--size-body-s);
    font-weight: var(--weight-regular);
  }

  .vc-keuze thead th {
    font-family: var(--font-body);
    font-size: var(--size-label);
    font-weight: var(--weight-medium);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--text-secondary);
    vertical-align: bottom;
  }

  .vc-keuze thead th:not(:first-child),
  .vc-keuze td {
    text-align: center;
    width: 14%;
  }

  .vc-keuze tbody th {
    font-family: var(--font-display);
    font-size: var(--size-body);
  }

  .vc-keuze td {
    color: var(--stone-300);
  }

  .vc-keuze td.is-raak {
    color: var(--brand-dark);
  }

  .vc-keuze tbody tr:last-child th,
  .vc-keuze tbody tr:last-child td {
    border-bottom: 0;
  }

  .vc-keuze tbody tr:hover {
    background: var(--surface-wash);
  }

  .vc-keuze a {
    display: inline-flex;
    align-items: center;
    min-height: var(--tikdoel);
  }
}

/* ===========================================================================
   8. Losse onderdelen
   ======================================================================== */

/* Meerdere citaten onder elkaar, buiten de slider om. */
.vc-quotes {
  display: grid;
  gap: var(--gap-cards);
}

.vc-quotes--los {
  max-width: var(--measure-row);
  margin-top: 20px;
}

.vc-figure {
  margin: 0;
}

.vc-figure img {
  width: 100%;
  height: auto;
}

.vc-figure__caption {
  margin-top: 12px;
  font-size: var(--size-meta);
  color: var(--text-secondary);
}

.vc-logos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 40px;
}

.vc-logos__item img {
  width: auto;
  max-height: 48px;
}

/* Het formulier. Vierkante velden, één knophoogte, zoals de rest. */
.formulier {
  display: grid;
  gap: 24px;
  max-width: 620px;
}

.formulier label {
  display: block;
  margin-bottom: 8px;
  font-family: var(--font-body);
  font-size: var(--size-label);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-secondary);
}

.formulier input,
.formulier textarea,
.formulier select {
  width: 100%;
  min-height: 48px;
  padding: 12px 16px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-none);
  background: var(--surface-card);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: var(--size-body-s);
  line-height: 1.45;
}

.formulier textarea {
  min-height: 160px;
  resize: vertical;
}

.formulier button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 48px;
  padding: 0 28px;
  border: 1px solid var(--brand-dark);
  border-radius: var(--radius-pill);
  background: var(--brand-dark);
  /* Zelfde vulling als .vc-btn--primary, dus ook hetzelfde zandkleurige label. */
  color: var(--brand-sand);
  font-family: var(--font-body);
  font-size: var(--size-button);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-button);
  text-transform: uppercase;
  cursor: pointer;
}

/* Zolang de lade openstaat scrollt de pagina eronder niet mee. */
html.menu-open {
  overflow: hidden;
}

/* Overslaan naar de inhoud: de gedeelde laag zet de positie, hier de vorm. */
.overslaan:focus {
  border-radius: var(--radius-pill);
  border: 1px solid var(--brand-dark);
  font-family: var(--font-body);
  font-size: var(--size-label);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-button);
  text-transform: uppercase;
}

/* ===========================================================================
   9. Uitlegschema
   ---------------------------------------------------------------------------
   Getekend als inline SVG in plaats van als afbeelding: de merkinstructie
   staat geen tekst in afbeeldingen toe, en zo blijven de bijschriften echte
   tekst die meeschaalt en voorleesbaar is.
   ======================================================================== */

.vc-schema {
  margin: 0;
}

.vc-schema__vlak {
  background: var(--surface-card);
  border: 1px solid var(--border-hairline);
  padding: 32px;
}

.vc-schema__tekening {
  display: block;
  width: 100%;
  height: auto;
  color: var(--text-primary);
}

.vc-schema__stappen {
  display: grid;
  gap: 12px;
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
  font-size: var(--size-body-s);
  color: var(--text-secondary);
  line-height: 1.55;
}

.vc-schema__stappen li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  align-items: start;
}

.vc-schema__pijl {
  display: inline-flex;
  align-items: center;
  height: 1.55em;
  color: var(--text-muted);
}

.vc-schema__stappen strong {
  font-weight: var(--weight-medium);
  color: var(--text-primary);
}

.vc-section--sand .vc-schema__vlak {
  background: var(--surface-card);
}

/* Het honingpotje tegen spam blijft onzichtbaar, ook voor een schermlezer. */
.honing {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.veld + .veld {
  margin-top: 0;
}

.verplicht {
  color: var(--text-muted);
}

/* ===========================================================================
   10. De kentallenkaart onder een subhero
   ---------------------------------------------------------------------------
   Onder de volledige hero wordt de kaart 96px omhoog getrokken, zodat hij over
   de onderrand van het beeld valt. Onder de subhero kan dat niet: die is lager
   en heeft de knoppen onderin staan, en die zouden dan worden afgedekt.
   ======================================================================== */

.vc-subhero + .vc-trust {
  margin-top: 48px;
}

.vc-subhero + .vc-trust .vc-trust__card {
  box-shadow: none;
  border: 1px solid var(--border-hairline);
}

@media (max-width: 1023px) {
  /* Ook onder de volledige hero blijft de kaart eronder staan: daarboven zou
     hij de hero-tekst afdekken. */
  .vc-trust {
    margin-top: 40px;
  }
}

/* ===========================================================================
   11. Tussenruimte tussen alinea's
   ---------------------------------------------------------------------------
   De handoff zet elke alinea als een eigen element in de markup en regelt de
   ruimte per sectie. Onze tekst komt uit één rich-text-veld, dus meerdere
   alinea's staan in dezelfde wikkel. Zonder deze regel lopen ze in elkaar over.
   ======================================================================== */

.vc-lead p + p,
.vc-clinic__body p + p,
.vc-treatment__body p + p,
.vc-step__body p + p,
.vc-row__body p + p,
.vc-contact__intro p + p,
.vc-process__intro p + p,
.vc-indications__intro p + p,
.vc-person__body p + p,
.vc-facts__value p + p,
.vc-slider__empty p + p {
  margin-top: 20px;
}

/* Een opsomming in een blok krijgt dezelfde ruimte en inspringing. */
.vc-lead ul,
.vc-lead ol,
.vc-treatment__body ul,
.vc-row__body ul {
  margin-top: 16px;
  padding-left: 22px;
}

.vc-lead li + li {
  margin-top: 8px;
}

/* ===========================================================================
   12. Tikdoelen
   ---------------------------------------------------------------------------
   De handoff zet knoppen en navigatie op 48px, maar de losse links in de voet
   en in het contactblok blijven daaronder. De gedeelde laag van Klubb schrijft
   44px voor op elk aanraakbaar element. Gemeten met de responsiveness-check,
   niet geschat: het logo zat op 34, de contactlinks op 27 en de voetlinks op 21.
   ======================================================================== */

.vc-header__logo {
  min-height: var(--tikdoel);
}

.vc-contact__links a,
.vc-footer__contact a,
.vc-footer__links a,
.vc-footer__legal a,
.vc-crumbs a {
  display: inline-flex;
  align-items: center;
  min-height: var(--tikdoel);
}

/* Het adres is geen link en hoeft dus geen tikdoel te halen. */
.vc-contact__address,
.vc-footer__address {
  min-height: 0;
}

/* ===========================================================================
   13. Letters
   ---------------------------------------------------------------------------
   De handoff zet --font-display op `var(--font-marcellus), "Marcellus", ...`.
   Die eerste variabele wordt in hun opzet door next/font gevuld. Bij ons komen
   de letters self-hosted uit fonts.css, dus die variabele bestaat niet.

   Een var() zonder terugval maakt de hele regel ongeldig, en dan valt de kop
   terug op de standaardletter van de browser. Daarom worden ze hier alsnog
   gezet. Ga je ooit over op next/font, dan haal je deze twee regels weg.
   ======================================================================== */

:root {
  --font-marcellus: "Marcellus";
  --font-figtree: "Figtree";

  /* Voor de zekerheid ook de twee doelvariabelen zelf, met de merkletters als
     terugval erachter: komen Optima en Seitu ooit beschikbaar, dan is dit de
     enige plek die je aanpast. */
  --font-display: "Marcellus", "Optima", "Palatino Linotype", Palatino, Georgia, serif;
  --font-body: "Figtree", "Seitu", Arial, sans-serif;
}

/* ===========================================================================
   14. Het uitklapmenu begint onder de balk
   ---------------------------------------------------------------------------
   Het paneel staat op `top: 100%` van het menu-item. Dat item is 48px hoog en
   staat gecentreerd in een balk van 152px, dus het paneel begon op 70px en
   viel 82px over de navigatie heen.

   Door het item de volle hoogte van de balk te geven landt `top: 100%` precies
   op de onderrand. De link blijft daarbinnen gecentreerd, dus visueel verandert
   er niets aan de navigatie zelf. Als bijvangst wordt het gebied waarmee je het
   menu openhoudt groter, en dat maakt het met de muis rustiger.
   ======================================================================== */

/* Allebei, en in deze volgorde. De navigatie is zelf ook een flex-item van de
   balk en staat daar gecentreerd, dus die is net zo hoog als de links: 48px.
   Rekt alleen het item mee, dan verandert er niets. */
.vc-nav {
  align-self: stretch;
}

.vc-nav__item {
  align-self: stretch;
}

/* De chevron draait mee als het menu openstaat. */
.vc-nav__link .vc-icon {
  transition: transform var(--duration-hover) var(--ease-out);
}

.vc-nav__item[data-open="true"] .vc-nav__link .vc-icon {
  transform: rotate(180deg);
}

/* De wikkel .vc-dropdown heeft een transform voor de openanimatie, en een
   transform maakt van een element het referentiepunt voor alles wat er absoluut
   in staat. Het paneel rekende dus niet vanaf het menu-item maar vanaf die
   wikkel, die direct onder de link begint.

   Door de wikkel zelf aan de onderrand van het item te hangen en hem geen
   afmeting te geven, valt het paneel precies op de onderrand van de balk. De
   animatie blijft gewoon werken. */
.vc-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  width: 0;
  height: 0;
}

.vc-dropdown__panel {
  top: 0;
  margin-top: -1px;
}

/* ===========================================================================
   15. Kopbalk op een telefoon: alleen het logo en de hamburger
   ---------------------------------------------------------------------------
   De handoff laat de twee knoppen ook onder laptopbreedte in de balk staan.
   Op 375px vult dat de hele balk en blijft er niets over voor het logo. De
   knoppen staan al onderin de uitklaplade, dus hier gaan ze weg.
   ======================================================================== */

@media (max-width: 1023px) {
  .vc-header__actions {
    display: none;
  }

  /* Met de navigatie en de knoppen weg moet de hamburger zelf naar rechts. */
  .vc-header__burger {
    margin-left: auto;
  }
}

/* ===========================================================================
   16. De feitenrij op een smal scherm
   ---------------------------------------------------------------------------
   De handoff zet onder laptopbreedte een lijn ONDER elke cel, met daarboven
   ook nog de lijn van de rij zelf. Op één kolom levert dat een streep boven de
   eerste, tussen elke twee, en nog een losse streep onder de laatste.

   Eén lijn boven elke cel en geen lijn op de rij lost dat op: geen dubbele
   streep bovenaan en geen zwevende streep onderaan. Op twee kolommen leest een
   rij daardoor als een rij.
   ======================================================================== */

@media (max-width: 1023px) {
  .vc-facts {
    border-top: 0;
    margin-top: 56px;
  }

  .vc-facts__cell,
  .vc-facts__cell:first-child,
  .vc-facts__cell:last-child,
  /* Deze laatste moet erbij: de handoff zet de scheidingslijn met
     `.vc-facts__cell + .vc-facts__cell`, en die weegt zwaarder dan een enkele
     klasse. Zonder deze regel houden de middelste cellen een verticale lijn
     die op één kolom nergens heen gaat. */
  .vc-facts__cell + .vc-facts__cell {
    padding: 24px 0;
    border-left: 0;
    border-bottom: 0;
    border-top: 1px solid var(--border-subtle);
  }
}

/* Op twee kolommen wat lucht tussen de kolommen, anders raken de teksten
   elkaar bijna. */
@media (min-width: 768px) and (max-width: 1023px) {
  .vc-facts {
    column-gap: 0;
  }

  /* Op twee kolommen komt de verticale lijn terug, maar alleen tussen de twee
     kolommen en niet aan het begin van een nieuwe rij. */
  .vc-facts__cell:nth-child(even) {
    border-left: 1px solid var(--border-subtle);
    padding-left: 32px;
  }

  .vc-facts__cell:nth-child(odd) {
    padding-right: 32px;
  }
}

/* Een logo-link heeft geen eigen rand, dus die moet de onderstreping van een
   gewone link wel kwijt. */
.vc-logos__item {
  border-bottom: none;
}

/* ===========================================================================
   17. Ruimte tussen en binnen secties
   ---------------------------------------------------------------------------
   De handoff is gemaakt voor één lange homepage waar elke sectie een eigen
   vlak is. Zodra twee secties met dezelfde achtergrond op elkaar volgen, staat
   er 128px onder de een en 128px boven de ander: samen 256px, en dan lijkt de
   pagina uit elkaar te vallen. Render.tsx zet daarom .is-aansluitend op een
   sectie die dezelfde achtergrond heeft als de vorige.
   ======================================================================== */

.vc-section.is-aansluitend {
  padding-top: 0;
}

/* De twee oprichterskaarten en de feitenrij stonden 88px onder de tekst
   erboven. Dat is veel als de knop erboven al zijn eigen ruimte heeft. */
.vc-people {
  margin-top: 56px;
}

.vc-facts {
  margin-top: 56px;
}

/* Het beeld in de werkwijzekolom stond strak tegen de kop erboven. */
.vc-process__img {
  margin-top: 40px;
}

/* De tekstkolom naast een schema mag de volle kolombreedte gebruiken. Hem
   smaller maken zou hem juist hoger maken, en te hoog was nu net het probleem;
   de tekst zelf is daarom ingekort. Wel uitlijnen op het midden, zodat een
   korte tekst niet bovenaan blijft hangen naast een hoge tekening. */
.vc-split--uitleg .vc-lead {
  max-width: none;
}

/* ===========================================================================
   18. Geen hover-effecten op vlakken
   ---------------------------------------------------------------------------
   Kaarten, rijen, chips en knoppen kwamen bij hover omhoog, kregen een schaduw
   of een wash. Dat gaf per blok een net iets ander gedrag. Alles staat nu stil.

   De kleurwissel op een link en een knop blijft wel: dat is geen effect maar
   de aanwijzing dat iets aanklikbaar is, en zonder die aanwijzing wordt de
   site slechter bruikbaar.
   ======================================================================== */

.vc-lift,
.vc-lift:hover,
.vc-card,
.vc-card:hover,
.vc-card--interactive:hover,
.vc-btn:hover,
.vc-btn:active,
.vc-row:hover,
.vc-chip:hover,
.vc-marquee__item:hover {
  transform: none;
  box-shadow: none;
}

/* Ook geen wash of kleurwissel op een vlak: een kaart, rij of chip verandert
   niet meer als de muis erover gaat. */
.vc-card--interactive:hover,
.vc-row:hover {
  background: var(--surface-card);
}

.vc-section--sand .vc-card--interactive:hover {
  background: var(--surface-card);
}

.vc-chip:hover {
  background: transparent;
  border-color: var(--border-default);
  color: var(--text-secondary);
}

/* De pijl in een knop schoof mee bij hover. Ook dat staat nu stil. */
.vc-btn:hover .vc-icon,
.vc-row:hover .vc-icon {
  transform: none;
}

/* ===========================================================================
   19. Veelgestelde vragen gecentreerd
   ======================================================================== */

.vc-faq {
  margin-inline: auto;
}

/* De sectiekop boven de vragen wordt gecentreerd. Render.tsx zet daarvoor
   .is-gecentreerd op het blok Vragen; :has() zou hier ook kunnen, maar een
   klasse is duidelijker terug te vinden. */
.vc-section.is-gecentreerd .vc-section__head {
  display: block;
  text-align: center;
  max-width: var(--measure-row);
  margin-inline: auto;
}

.vc-section.is-gecentreerd .vc-section__head .vc-lead {
  margin-inline: auto;
}

/* ===========================================================================
   20. Uitklaplade: ruimte tussen de twee knoppen
   ======================================================================== */

.vc-drawer__cta {
  display: grid;
  gap: 12px;
}

/* ===========================================================================
   21. Ervaringen als doorlopende band
   ---------------------------------------------------------------------------
   De rij staat twee of drie keer in de HTML. De animatie schuift precies één
   reeks op en springt dan terug; omdat de volgende reeks daar al staat, is de
   overgang niet te zien. Zie componenten/Ervaringen.tsx.
   ======================================================================== */

.vc-marquee {
  position: relative;
  overflow: hidden;
  /* Zonder deze drie duwt de band de pagina open. Een kolom in een grid of
     flex krimpt namelijk niet onder de breedte van zijn inhoud, en de inhoud
     is hier een rij van drie keer alle kaarten naast elkaar. */
  width: 100%;
  max-width: 100%;
  min-width: 0;
  /* De randen vervagen, zodat een kaart niet halverwege wordt afgekapt. */
  -webkit-mask-image: linear-gradient(
    90deg,
    transparent 0,
    #000 6%,
    #000 94%,
    transparent 100%
  );
  mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
}

.vc-marquee__spoor {
  display: flex;
  gap: var(--gap-cards);
  margin: 0;
  padding: 0;
  list-style: none;

  /* De band is nu een echte scrollbare rij in plaats van een transform. Dat
     maakt vegen op een telefoon en slepen met de muis mogelijk; het doorlopen
     zelf regelt componenten/Ervaringen.tsx door de scrollpositie op te hogen.

     Geen width max-content meer: die zou de rij buiten de wikkel duwen in
     plaats van hem te laten scrollen. */
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  /* De rij loopt altijd door, dus een eindpunt aanwijzen heeft geen zin. */
  overscroll-behavior-x: contain;
  /* Zonder dit selecteert slepen de tekst van de citaten. */
  user-select: none;
  -webkit-user-select: none;
  cursor: grab;
}

.vc-marquee__spoor::-webkit-scrollbar {
  display: none;
}

.vc-marquee__spoor:active {
  cursor: grabbing;
}

/* Een link binnen een kaart moet nog wel gewoon aanwijsbaar zijn. */
.vc-marquee__spoor a {
  cursor: pointer;
}

.vc-marquee__item {
  flex: 0 0 auto;
  width: 420px;
  max-width: 78vw;
}

.vc-marquee__item .vc-slider__card {
  height: 100%;
  margin: 0;
}

/* Stilzetten bij hover en focus doet Ervaringen.tsx: het schuiven zit nu in
   de scrollpositie en niet meer in een animatie, dus er valt hier niets te
   pauzeren. Het keyframe vc-marquee is om dezelfde reden weg.

   Zonder beweging blijft de rij precies wat hij is: te verschuiven met de
   muis, met een veeg of met de pijltjestoetsen. Alleen het vanzelf doorlopen
   valt weg, en dat regelt de component. */

/* ===========================================================================
   22. Elke hero even hoog
   ---------------------------------------------------------------------------
   De subhero groeide mee met de tekst, dus elke pagina had een andere hoogte.
   Nu staat hij op dezelfde maat als de hero van de homepage: negen tiende van
   het scherm. Ook op een telefoon, waar hij eerst meegroeide met de tekst en
   dus per pagina verschilde.

   min-height en geen height: past de tekst er op een smal scherm niet in, dan
   mag hij groeien in plaats van eroverheen te lopen.
   ======================================================================== */

.vc-subhero {
  min-height: var(--hero-h);
  display: flex;
  align-items: center;
}

.vc-subhero__inner {
  width: 100%;
}

@media (min-width: 1024px) {
  .vc-subhero {
    height: var(--hero-h);
  }

  .vc-subhero__inner {
    width: 100%;
    padding-top: var(--header-h);
    padding-bottom: 0;
  }
}

@media (max-width: 1023px) {
  .vc-subhero {
    /* Stond op een vaste 520px, waardoor de hero onder laptopbreedte niet
       meeschaalde met het scherm. Nu dezelfde negen tiende als daarboven. */
    min-height: var(--hero-h);
    display: flex;
    align-items: center;
  }

  .vc-subhero__inner {
    width: 100%;
  }
}

/* De niet-gevonden-pagina heeft geen beeld, dus alleen het donkere vlak. */
.vc-subhero--leeg .vc-subhero__media {
  display: none;
}


/* ===========================================================================
   23. Kolommen mogen krimpen
   ---------------------------------------------------------------------------
   Dezelfde oorzaak als bij de band: een grid- of flexkolom staat standaard op
   min-width auto en weigert dan smaller te worden dan zijn inhoud. Eén brede
   tabel, band of afbeelding trekt daarmee de hele pagina open, en dan krijg je
   horizontaal scrollen op een telefoon.
   ======================================================================== */

.vc-split > *,
.vc-section > .vc-container > *,
.vc-trust__grid > *,
.vc-cards > *,
.vc-people > *,
.vc-facts > *,
.vc-footer__grid > * {
  min-width: 0;
}

/* Het beeldmerk achter de kentallenkaart mag niet buiten de kaart vallen. */
.vc-trust__card {
  overflow: hidden;
}

/* ===========================================================================
   24. Chips die niet passen
   ---------------------------------------------------------------------------
   De handoff zet een chip op een vaste hoogte van 46px met white-space nowrap.
   Dat werkt voor korte labels als "Artrose", maar niet voor "Artrose van knie,
   heup, schouder, hand, voet of enkel". Zo'n label werd breder dan het scherm
   en trok de pagina open.

   Onder laptopbreedte mag een chip daarom over twee regels. De capsulevorm
   blijft, de hoogte groeit mee.
   ======================================================================== */

@media (max-width: 1023px) {
  .vc-chip {
    height: auto;
    min-height: 44px;
    padding: 10px 20px;
    white-space: normal;
    line-height: 1.35;
    max-width: 100%;
  }
}

/* Ook op een breed scherm mag een chip die echt te lang is afbreken in plaats
   van uit zijn rij te lopen. */
.vc-chip {
  max-width: 100%;
}

/* ===========================================================================
   25. Beeld over de volle breedte
   ---------------------------------------------------------------------------
   Het beeldblok heeft een vinkje "over de volle breedte". Dat trekt de foto
   uit de tekstkolom tot rand aan rand. Het onderschrift blijft wel binnen de
   kolom staan, want dat is gewoon tekst en hoort op de leesbreedte.
   ======================================================================== */

.vc-figure--wide {
  width: 100vw;
  max-width: 100vw;
  /* Uit de container stappen zonder de opmaak eromheen te veranderen. */
  margin-inline: calc(50% - 50vw);
}

.vc-figure--wide img {
  width: 100%;
}

.vc-figure--wide .vc-figure__caption {
  max-width: var(--inhoud-max, 1200px);
  margin-inline: auto;
  padding-inline: var(--gutter, 24px);
}

/* ===========================================================================
   26. De hero is negen tiende van het scherm
   ---------------------------------------------------------------------------
   De handoff zet vaste hoogtes: 860px op desktop, 720 op laptop, 620 op een
   telefoon. Dat betekent op een klein laptopscherm dat de hero doorloopt tot
   voorbij de onderkant, en op een grote monitor dat er te veel leegte onder
   staat. Negen tiende van het scherm schaalt mee en laat altijd een randje van
   de volgende sectie zien, zodat duidelijk is dat er verder te scrollen valt.

   Gewoon vh en niet svh of dvh. dvh verandert mee terwijl de adresbalk van een
   telefoon in- en uitschuift, en dan verspringt de hero onder je vinger tijdens
   het scrollen. svh rekent met de kleinste stand, wat op papier netter is, maar
   niet elke browser meet die stand hetzelfde. vh is voorspelbaar en overal
   hetzelfde, en dat weegt hier zwaarder dan die laatste procenten.
   ======================================================================== */

:root {
  --hero-h: 90vh;
}

/* De handoff zet op deze twee grenzen een vaste hoogte; die moeten hier ook
   overschreven worden, anders wint de smalste regel alsnog. */
@media (max-width: 1023px) {
  :root {
    --hero-h: 90vh;
  }
}

@media (max-width: 767px) {
  :root {
    --hero-h: 90vh;
  }
}

/* ===========================================================================
   27. Lucht onder de knoppen in het uitklapmenu
   ---------------------------------------------------------------------------
   De onderste knop plakte tegen de onderrand van het paneel aan.
   ======================================================================== */

.vc-drawer__cta {
  padding-bottom: 24px;
}

/* ===========================================================================
   28. Het uitklapmenu klapt per hoofdpagina open
   ---------------------------------------------------------------------------
   De subpagina's stonden allemaal tegelijk uitgeklapt. Met twaalf indicaties
   erbij werd de lade zo lang dat je moest scrollen om bij de knoppen onderaan
   te komen. Nu staat er één open, en een tweede openen klapt de eerste dicht.

   Een hoofdpagina met subpagina's is daarom een knop geworden en geen link
   meer. De pagina zelf staat als eerste regel in het uitgeklapte rijtje, dus
   hij blijft gewoon bereikbaar.
   ======================================================================== */

.vc-drawer__vouw {
  /* Alleen wat een knop anders maakt dan een link. Letter, kleur, hoogte en
     de onderrand komen uit .vc-drawer__link, die staat er ook op: zou je die
     hier overschrijven met font en color op inherit, dan kreeg Behandelingen
     een andere letter dan De kliniek. Dat was precies wat er misging. */
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  background: none;
  border-top: 0;
  border-left: 0;
  border-right: 0;
  padding: 0;
  text-align: left;
  cursor: pointer;
}

.vc-drawer__vouw svg {
  flex: 0 0 auto;
  transition: transform var(--motion-snel, 160ms) ease;
}

[data-open='true'] > .vc-drawer__vouw svg {
  transform: rotate(180deg);
}

/* Een element met hidden mag niet alsnog als flex of grid getekend worden. */
.vc-drawer__sub[hidden] {
  display: none;
}


/* ===========================================================================
   29. Eén ritme tussen badge, kop en tekst
   ---------------------------------------------------------------------------
   Elk blok bouwde zijn eigen sectiekop, en elk blok koos daarbij zijn eigen
   marges. Gemeten stond de badge er 29 of 9 pixels boven, en de tekst 0, 24,
   28 of 40 pixels eronder. Op sommige plekken plakte de alinea dus tegen de
   kop aan en op andere niet.

   Hier staat het één keer, los van in welk blok de kop zit: overal dezelfde
   afstand boven de kop en overal dezelfde eronder.

   Let op de :has-regels onderaan. De koppen hebben zelf een ondermarge van 28
   of 40 pixels, en die wint van de bovenmarge van de alinea eronder: bij twee
   marges tegen elkaar telt de grootste, niet de som. Daarom zetten we de
   ondermarge van de kop op nul zodra er lopende tekst op volgt.
   ======================================================================== */

.vc-eyebrow {
  margin-bottom: 0;
}

.vc-eyebrow + .vc-h2,
.vc-eyebrow + .vc-h3,
.vc-eyebrow + h2,
.vc-eyebrow + h3,
.vc-eyebrow + .vc-subhero__title {
  margin-top: 20px;
}

.vc-h2 + p,
.vc-h2 + .vc-lead,
.vc-h2 + .vc-prose,
.vc-h2 + [class$='__intro'],
.vc-h3 + p,
.vc-h3 + .vc-prose,
.vc-h3 + [class$='__intro'] {
  margin-top: 24px;
}

.vc-h2:has(+ p),
.vc-h2:has(+ .vc-lead),
.vc-h2:has(+ .vc-prose),
.vc-h2:has(+ [class$='__intro']),
.vc-h3:has(+ p),
.vc-h3:has(+ .vc-prose),
.vc-h3:has(+ [class$='__intro']) {
  margin-bottom: 0;
}

/* ===========================================================================
   30. De sectiekop stapelt onder laptopbreedte
   ---------------------------------------------------------------------------
   De kop staat links en de inleiding rechts. Op een breed scherm werkt dat,
   maar onder laptopbreedte werd die inleiding een strook van 97 pixels naast
   de kop: twee woorden per regel. Nu staat de tekst er gewoon onder.
   ======================================================================== */

@media (max-width: 1023px) {
  .vc-section__head {
    display: block;
  }

  .vc-section__head > div {
    margin-bottom: 24px;
  }

  .vc-section__head .vc-lead,
  .vc-section__head p {
    max-width: none;
  }

  /* Dezelfde tweedeling zit in de splitsingen met een kop links en tekst
     rechts. Die stapelen al, maar de tussenruimte ontbrak. */
  .vc-split--indications > div + div,
  .vc-split--process > div + div {
    margin-top: 24px;
  }
}

/* ===========================================================================
   31. De hero van de homepage vult het scherm
   ---------------------------------------------------------------------------
   Elke pagina staat op negen tiende, zodat je ziet dat er verder te scrollen
   valt. De homepage is de uitzondering: die mag helemaal vol.
   ======================================================================== */

.vc-hero {
  height: 100vh;
}

/* ===========================================================================
   32. De ervaringenband ademt op een telefoon
   ---------------------------------------------------------------------------
   De badge stond tegen de kaarten aan, en de citaten waren op een klein
   scherm net zo groot als een kop. Kleiner en rustiger: het is een citaat en
   geen betoog.
   ======================================================================== */

.vc-slider__quote {
  /* Stond op --size-quote, 20px, net zo groot als een tussenkop. Een citaat
     mag rustiger: iets kleiner en in de secundaire kleur. */
  font-size: var(--size-body);
  line-height: 1.65;
  color: var(--text-secondary);
}

.vc-slider__meta {
  /* Duidelijk kleiner dan het citaat, anders lezen naam en citaat als één
     blok. Op --size-body-s scheelde het maar één pixel. */
  font-size: var(--size-label);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted, var(--text-secondary));
}

/* De badge stond op een breed scherm negen pixels boven de kaarten en plakte
   daarmee tegen de band aan. In het blok Ervaringen is die badge de kop van de
   sectie, dus hij hoort er net zo ver vanaf te staan als elders. */
.vc-eyebrow + .vc-marquee,
.vc-ervaringen__kop + .vc-marquee {
  margin-top: 40px;
}

@media (max-width: 1023px) {
  .vc-eyebrow + .vc-marquee,
  .vc-ervaringen__kop + .vc-marquee {
    margin-top: 32px;
  }

  .vc-slider__quote {
    font-size: var(--size-body-s);
    line-height: 1.6;
  }

  .vc-slider__card {
    padding: 28px;
  }
}

/* ===========================================================================
   33. Uitgelichte sectie: beeld met de tekst eroverheen
   ---------------------------------------------------------------------------
   Een tekstblok met een foto erbij. Geen tekst links en beeld rechts, want dat
   staat al twee keer op de site en het maakt van een verhaal twee losse
   kolommen die je naast elkaar moet lezen.

   In plaats daarvan een liggende compositie: het beeld over de volle breedte
   van de kolom, en de tekst in een kaart die er met zijn bovenrand overheen
   valt. Je leest van boven naar beneden, het beeld zet de toon en de kaart
   pakt hem op. De kaart staat naar rechts uitgelijnd met een marge, zodat er
   links een strook beeld zichtbaar blijft en de compositie niet symmetrisch
   wordt.
   ======================================================================== */

.vc-uitgelicht {
  margin: 0;
  /* De kaart valt met een negatieve marge omhoog. Zonder deze stapel zou hij
     onder het beeld door schuiven in plaats van eroverheen. */
  isolation: isolate;
}

.vc-uitgelicht__beeld {
  display: block;
  width: 100%;
  height: 440px;
  object-fit: cover;
  /* Iets boven het midden uitsnijden. In een liggend kader van 440 hoog valt
     het onderste deel van een foto weg, en daar staat meestal de vloer. Wat
     je wilt zien, de handeling en de gezichten, zit hoger. */
  object-position: center 38%;
  /* Het beeld is de achtergrond van de compositie, dus hij mag onder de kaart
     door lopen. */
  position: relative;
  z-index: 0;
}

.vc-uitgelicht__kaart {
  position: relative;
  z-index: 1;
  width: min(62%, 720px);
  margin-left: auto;
  margin-right: 40px;
  /* Zo ver omhoog dat de kaart het beeld duidelijk overlapt, maar er onder de
     kaart nog een strook beeld zichtbaar blijft. */
  margin-top: -140px;
  padding: 48px;
  background: var(--surface-card);
  border: 1px solid var(--border-hairline);
}

.vc-uitgelicht__kaart .vc-h2 {
  max-width: 22ch;
}

.vc-uitgelicht__kaart .vc-prose {
  max-width: var(--measure-body);
}

/* Op een donkere sectie keert de kaart mee. */
.vc-section--dark .vc-uitgelicht__kaart {
  background: var(--surface-inverse-soft, var(--surface-inverse));
  border-color: rgba(255, 255, 255, 0.14);
}

@media (max-width: 1023px) {
  .vc-uitgelicht__beeld {
    height: 300px;
  }

  .vc-uitgelicht__kaart {
    /* Op een smal scherm past een kaart naast het beeld niet meer. Hij wordt
       bijna zo breed als de kolom en schuift nog maar een klein stukje over
       het beeld heen, net genoeg om te zien dat de twee bij elkaar horen. */
    width: auto;
    margin-inline: 20px 0;
    margin-top: -56px;
    padding: 32px 28px;
  }
}

@media (max-width: 767px) {
  .vc-uitgelicht__beeld {
    height: 240px;
  }

  .vc-uitgelicht__kaart {
    margin-inline: 16px 0;
    margin-top: -40px;
    padding: 28px 24px;
  }
}

/* ===========================================================================
   34. De blokjesrij over meerdere rijen
   ---------------------------------------------------------------------------
   De handoff gaat uit van vier blokjes op één rij: een lijn boven de rij en
   een verticale lijn tussen elk tweetal, gezet met
   `.vc-facts__cell + .vc-facts__cell`.

   Zodra er meer dan vier blokjes zijn, en op osteoporose staan er acht en op
   bekkenklachten negen, klopt dat niet meer. Elke cel na de eerste krijgt dan
   een linkerlijn, dus ook de eerste cel van rij twee, en die lijn staat daar
   tegen de rand aan zonder ergens heen te gaan. Tussen de rijen zit dan weer
   geen lijn. Vandaar dat het lijkt te verspringen, en dat valt het meest op
   als een blokje over twee regels loopt en de rijen ongelijk hoog worden.

   Hieronder staat het als raster: een lijn boven elke cel, en een verticale
   lijn alleen tussen de kolommen. Dat klopt bij vier blokjes en bij twaalf.
   ======================================================================== */

@media (min-width: 1024px) {
  .vc-facts {
    /* De lijn zit nu op de cellen zelf, anders krijgt de bovenste rij er twee. */
    border-top: 0;
  }

  .vc-facts__cell,
  .vc-facts__cell:first-child,
  .vc-facts__cell:last-child,
  /* Moet erbij om de adjacent-regel van de handoff te overstemmen: die weegt
     zwaarder dan een enkele klasse. */
  .vc-facts__cell + .vc-facts__cell {
    padding: 32px;
    border-top: 1px solid var(--border-subtle);
    border-left: 1px solid var(--border-subtle);
  }

  /* De eerste kolom heeft links niets om van te scheiden. */
  .vc-facts__cell:nth-child(4n + 1) {
    border-left: 0;
    padding-left: 0;
  }

  /* En de laatste kolom rechts ook niet. */
  .vc-facts__cell:nth-child(4n) {
    padding-right: 0;
  }
}

/* ===========================================================================
   35. De aanvraagpagina
   ---------------------------------------------------------------------------
   Contact is de pagina waar iemand daadwerkelijk iets doet, en daar stond
   alleen een formulier onder een kop. Nu staat er naast het formulier wat er
   ná het versturen gebeurt.

   De volgorde verschilt per schermformaat. Op een breed scherm staat de
   uitleg rechts, waar hij meeleest terwijl je invult. Op een telefoon komt
   hij eronder: daar wil je eerst doen waarvoor je kwam.

   Het formulier krijgt de bredere kolom. De uitleg is ondersteunend en mag
   smaller, anders gaat hij concurreren met waar het om draait.
   ======================================================================== */

.vc-aanvraag {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: 64px;
  align-items: start;
}

/* Het formulier zelf hoeft de kolom niet helemaal te vullen: een invulveld
   dat breder is dan ongeveer een halve regel leest niet prettiger. */
.vc-aanvraag__formulier {
  max-width: 620px;
}

.vc-aanvraag__naast {
  padding: 40px;
  background: var(--surface-card);
  border: 1px solid var(--border-hairline);
}

.vc-aanvraag__kop {
  margin: 0 0 28px;
}

.vc-aanvraag__stappen {
  list-style: none;
  margin: 0;
  padding: 0;
  /* Een dunne lijn langs de nummers, zodat het als één route leest en niet
     als vier losse regels. */
  border-left: 1px solid var(--border-subtle);
  padding-left: 0;
}

.vc-aanvraag__stap {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 16px;
  padding: 0 0 24px 24px;
  position: relative;
}

.vc-aanvraag__stap:last-child {
  padding-bottom: 0;
}

.vc-aanvraag__nummer {
  /* Het cijfer hangt over de lijn heen, dat maakt de route af. */
  position: absolute;
  left: -13px;
  top: 0;
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--surface-inverse);
  color: var(--text-inverse);
  font-size: 12px;
  line-height: 1;
}

.vc-aanvraag__stap > span:last-child {
  grid-column: 2;
  display: block;
}

.vc-aanvraag__staptitel {
  display: block;
  font-family: var(--font-display);
  font-size: var(--size-body);
  line-height: 1.35;
  color: var(--text-primary);
}

.vc-aanvraag__staptekst {
  display: block;
  margin-top: 6px;
  font-size: var(--size-body-s);
  line-height: 1.6;
  color: var(--text-secondary);
}

/* Goed om te weten: dezelfde subtiele vinkjes als elders op de site. */
.vc-aanvraag__punten {
  list-style: none;
  margin: 32px 0 0;
  padding: 28px 0 0;
  border-top: 1px solid var(--border-subtle);
}

.vc-aanvraag__punten li {
  position: relative;
  padding-left: 30px;
  font-size: var(--size-body-s);
  line-height: 1.6;
  color: var(--text-secondary);
}

.vc-aanvraag__punten li + li {
  margin-top: 12px;
}

.vc-aanvraag__punten li::before {
  content: '';
  position: absolute;
  left: 2px;
  top: 0.45em;
  width: 14px;
  height: 8px;
  border-left: 1.5px solid var(--text-accent, currentColor);
  border-bottom: 1.5px solid var(--text-accent, currentColor);
  transform: rotate(-45deg);
  opacity: 0.55;
}

.vc-aanvraag__bellen {
  margin-top: 32px;
  padding-top: 28px;
  border-top: 1px solid var(--border-subtle);
}

.vc-aanvraag__bellen .vc-label {
  margin: 0 0 14px;
}

@media (max-width: 1023px) {
  .vc-aanvraag {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .vc-aanvraag__formulier {
    max-width: none;
  }

  .vc-aanvraag__naast {
    padding: 32px 28px;
  }
}

/* Het formulier stond een sectiekop-afstand onder de kop. Op een pagina waar
   het formulier het onderwerp is, mag dat dichterbij. */
.vc-section:has(.vc-aanvraag) .vc-section__head {
  margin-bottom: 36px;
}


/* ===========================================================================
   36. De hero op een telefoon
   ---------------------------------------------------------------------------
   De uitsnede staat op 24 procent van links, gekozen voor een breed scherm.
   Op een telefoon is het kader veel smaller: bij een beeld van 3000 bij 1988
   en een venster van ongeveer 390 bij 844 past er maar een strook van dertig
   procent van de foto in. Op 24 procent begint die strook zo ver links dat de
   man rechts erbuiten valt.

   Het tweetal staat samen ongeveer tussen 33 en 68 procent van de breedte.
   De strook daar middenop leggen is vijftig procent, en dan staan ze allebei
   in beeld.
   ======================================================================== */

@media (max-width: 767px) {
  .vc-hero__img {
    object-position: 50% 40%;
  }
}

/* ===========================================================================
   37. De profielen in de voet
   ---------------------------------------------------------------------------
   Subtiel gehouden: kleine tekstlinks op één regel onder de openingstijden,
   in dezelfde maat als de labels elders. Geen gekleurde merkiconen, want die
   trekken in dit rustige palet meteen alle aandacht naar zich toe en dat is
   niet waar de voet voor is.
   ======================================================================== */

.vc-footer__socials {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px solid var(--border-subtle);
}

.vc-footer__socials a {
  font-size: var(--size-label);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-secondary);
}


/* ===========================================================================
   38. De kop boven de ervaringen
   ---------------------------------------------------------------------------
   Was een badge in kapitalen. Het is een sectie op zich, dus een gewone kop.
   Geen ondermarge: de afstand tot de band staat al in hoofdstuk 32.
   ======================================================================== */

.vc-ervaringen__kop {
  margin: 0;
}