/* Onderdelen die alleen op de service-, verhaal- en hulppagina's staan.

   Tot oktober 2026 stond dit in components.css en laadde het op elke pagina:
   op de homepage, een categorie en een product raakte ruim negen tiende van
   dat blad geen enkel element (Lighthouse, 2 oktober 2026). inc/assets.php
   laadt dit blad overal behalve daar. De volgorde binnen het bestand is die
   van components.css; verplaats je een blok terug, zet het dan op zijn oude
   plek tussen de andere. */

/* ---------------------------------------------------------------------------
   Losse tekstpagina's van het thema, zoals de huisregels voor beoordelingen.
   Geen sierwerk: leesbare regellengte en rustige tussenkoppen.
--------------------------------------------------------------------------- */

.static-page {
  max-width: 68ch;
  margin: 0 auto var(--bsv-space-6);
  font-size: var(--bsv-fs-copy);
  line-height: var(--bsv-lh-copy);
}

.static-page__intro {
  font-size: var(--bsv-fs-copy);
  color: var(--bsv-muted);
  line-height: var(--bsv-lh-copy);
}

.static-page h2 {
  margin-top: var(--bsv-space-5);
  margin-bottom: var(--bsv-space-2);
}



/* ---------------------------------------------------------------------------
   Wettelijke garantie. Het beeld is de officiële EU-kennisgeving en mag niet
   bijgesneden, verkleurd of voorzien van effecten worden: dus geen schaduw,
   geen afgeronde hoeken, geen filter. Alleen schalen, in verhouding. Zie
   inc/wettelijke-garantie.php.
--------------------------------------------------------------------------- */

.guarantee-notice {
  max-width: 560px;
  margin: var(--bsv-space-4) 0;
}

.guarantee-notice__image {
  display: block;
}

.guarantee-notice__image img {
  display: block;
  width: 100%;
  height: auto;
}

.guarantee-notice figcaption {
  margin-top: var(--bsv-space-2);
  color: var(--bsv-muted);
  font-size: var(--bsv-fs-sm);
}

.guarantee-notice__text {
  margin-bottom: var(--bsv-space-4);
  border-top: 1px solid var(--bsv-line);
  border-bottom: 1px solid var(--bsv-line);
}

.guarantee-notice__text summary {
  min-height: 44px;
  padding: 12px 0;
  font-weight: 600;
  cursor: pointer;
}

.guarantee-notice__text[open] summary {
  margin-bottom: var(--bsv-space-2);
}

/* ---------------------------------------------------------------------------
   Verlanglijst. De pagina komt leeg van de server (de lijst zit in de browser
   van de bezoeker) en wordt gevuld met dezelfde kaarten als het overzicht.
--------------------------------------------------------------------------- */

.wishlist-page { margin-bottom: var(--bsv-space-6); }
.wishlist-page .page-title { margin-bottom: var(--bsv-space-2); }

.wishlist-page__intro {
  max-width: 68ch;
  margin-bottom: var(--bsv-space-4);
  color: var(--bsv-muted);
}

.wishlist-page__status {
  min-height: 1.55em;
  margin-bottom: var(--bsv-space-3);
  color: var(--bsv-muted);
  font-size: var(--bsv-fs-sm);
}

/* Zonder melding hoort er ook geen gat te staan. */
.wishlist-page__status:empty { min-height: 0; margin-bottom: 0; }

.wishlist-empty {
  display: grid;
  justify-items: start;
  gap: 10px;
  padding: var(--bsv-space-5);
  border: 1px solid var(--bsv-line);
  border-radius: var(--bsv-radius-lg);
  background: var(--bsv-surface);
}

.wishlist-empty b { color: var(--bsv-ink); font-size: var(--bsv-fs-md); }
.wishlist-empty p { max-width: 60ch; margin: 0; color: var(--bsv-muted); }

/* ---------------------------------------------------------------------------
   Verzendtarieven. Hoekig, zoals elke tabel in deze winkel.
--------------------------------------------------------------------------- */

/* Hetzelfde anker als bij `.lane` hierboven, en om dezelfde reden. De tabel
   hierin heeft een `<caption class="screen-reader-text">`, en dat is
   `position: absolute` zonder links of boven; zonder anker hier is het lichaam
   van de pagina zijn houvast en ontsnapt hij aan deze overflow.

   Die caption alleen doet vandaag geen kwaad: hij staat aan het begin van de
   tabel, dus op x=0, en daar puilt niets uit. Het gaat om wat er dieper in de
   cellen komt te staan. In design/merkpagina-mockup.html gebeurde precies dat
   -- een verborgen "niet bekend" in een cel rechts in een tabel van 915 pixels
   -- en dat duwde elke pagina tot 779 pixels breed opzij. Het anker hoort bij
   het schuifgebied, niet bij wat er toevallig in staat. */
.rate-scroll {
  position: relative;
  margin-bottom: var(--bsv-space-5);
  overflow-x: auto;
}

.rate-table {
  width: 100%;
  min-width: 32rem;
  border: 1px solid var(--bsv-line);
  border-collapse: collapse;
  background: var(--bsv-surface);
}

.rate-table th,
.rate-table td {
  padding: 10px 14px;
  border-bottom: 1px solid var(--bsv-line-soft);
  text-align: left;
  vertical-align: top;
}

.rate-table thead th { background: var(--bsv-bg); font-size: var(--bsv-fs-sm); }
.rate-table tbody th { border-right: 1px solid var(--bsv-line-soft); }
.rate-table tbody th small { display: block; color: var(--bsv-muted); font-weight: 400; }

@media (width <= 760px) {
  .rate-scroll { overflow: visible; }
  .rate-table { display: block; min-width: 0; border: 0; background: transparent; }

  .rate-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  .rate-table :is(tbody, tr, th, td) { display: block; width: 100%; }

  .rate-table tr {
    margin-bottom: var(--bsv-space-3);
    border: 1px solid var(--bsv-line);
    background: var(--bsv-surface);
  }

  .rate-table tbody th {
    padding: 10px var(--bsv-space-3);
    border-right: 0;
    border-bottom: 1px solid var(--bsv-line);
    background: var(--bsv-bg);
  }

  .rate-table tbody td {
    padding: 9px var(--bsv-space-3);
    overflow-wrap: anywhere;
  }

  .rate-table tbody td[data-label] {
    display: grid;
    grid-template-columns: minmax(6.5rem, 38%) minmax(0, 1fr);
    gap: var(--bsv-space-3);
  }

  .rate-table tbody td[data-label]::before {
    content: attr(data-label);
    color: var(--bsv-muted);
    font-size: var(--bsv-fs-xs);
    font-weight: 700;
  }
}

/* ---------------------------------------------------------------------------
   Klantenservice: contactblok en onderwerpen.
--------------------------------------------------------------------------- */

.service-page { margin-bottom: var(--bsv-space-6); }
.service-page .page-title { margin-bottom: var(--bsv-space-2); }

.service-page__intro {
  max-width: 68ch;
  margin-bottom: var(--bsv-space-5);
  color: var(--bsv-muted);
  font-size: var(--bsv-fs-md);
}

.service-page h2 { margin-top: var(--bsv-space-6); margin-bottom: var(--bsv-space-3); }
.service-page h3 { margin-top: var(--bsv-space-4); margin-bottom: var(--bsv-space-1); font-size: var(--bsv-fs-base); }
.service-page p { max-width: 68ch; }

.service-contact__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--bsv-space-3);
  margin-bottom: var(--bsv-space-5);
}

/* `min-width: 0` om dezelfde reden als bij .cat-tile: een rastercel krijgt
   vanzelf een ondergrens ter breedte van zijn inhoud, en hier staat een
   e-mailadres in — één woord dat niet afbreekt. Tussen ongeveer 561 en 620 px
   duwde die cel het hele raster, en daarmee de pagina, opzij. */
.service-contact__item {
  display: grid;
  align-content: start;
  min-width: 0;
  gap: 6px;
  padding: var(--bsv-space-4);
  border: 1px solid var(--bsv-line);
  border-radius: var(--bsv-radius-lg);
  background: var(--bsv-surface);
}

/* Hetzelfde ronde amberen vlak als de servicevlakken op de homepage. Eén
   vormtaal voor alle iconen in de winkel. */
.service-contact__icon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  margin-bottom: 2px;
  border-radius: 50%;
  background: var(--bsv-highlight);
  color: var(--bsv-highlight-ink);
}

.service-contact__item small { color: var(--bsv-muted); font-size: var(--bsv-fs-sm); }
.service-contact__item b { color: var(--bsv-ink); }
.service-contact__value { overflow-wrap: anywhere; font-size: var(--bsv-fs-md); font-weight: 700; color: var(--bsv-ink); }
.service-contact__hours { margin: 0; padding: 0; list-style: none; color: var(--bsv-muted); font-size: var(--bsv-fs-sm); }
.service-contact__item .btn { justify-self: start; margin-top: var(--bsv-space-1); }

.service-topics {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--bsv-space-3);
  margin: 0 0 var(--bsv-space-5);
  padding: 0;
  list-style: none;
}

.service-topic {
  display: flex;
  gap: var(--bsv-space-3);
  align-items: center;
  height: 100%;
  min-height: var(--bsv-touch);
  padding: 14px var(--bsv-space-4);
  border: 1px solid var(--bsv-line);
  border-radius: var(--bsv-radius-lg);
  background: var(--bsv-surface);
  color: var(--bsv-ink);
  text-decoration: none;
}

.service-topic__icon {
  display: grid;
  flex: none;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid var(--bsv-line);
  border-radius: var(--bsv-radius);
  color: var(--bsv-ink);
}

.service-topic__text { display: grid; gap: 2px; }
.service-topic__chevron { flex: none; margin-left: auto; color: var(--bsv-muted); }

.service-topic:hover { border-color: var(--bsv-line-hover); text-decoration: none; }
.service-topic:hover .service-topic__icon { border-color: var(--bsv-ink); background: var(--bsv-highlight); }
.service-topic:hover .service-topic__chevron { color: var(--bsv-ink); }
.service-topic small { color: var(--bsv-muted); font-size: var(--bsv-fs-sm); }

/* De veelgestelde vragen. Genummerd, met een streep ernaast, zodat het geen
   muur van tekst wordt maar een lijst waar je doorheen kunt springen. */
.service-faq {
  display: grid;
  gap: var(--bsv-space-3);
  margin-bottom: var(--bsv-space-5);
}

.service-faq__item {
  display: flex;
  gap: var(--bsv-space-3);
  padding: var(--bsv-space-4);
  border: 1px solid var(--bsv-line);
  border-left: 3px solid var(--bsv-yellow);
  border-radius: var(--bsv-radius);
  background: var(--bsv-surface);
}

.service-faq__mark {
  display: grid;
  flex: none;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--bsv-ink);
  color: #fff;
  font-size: var(--bsv-fs-sm);
  font-weight: 700;
}

.service-faq h3 { margin: 2px 0 4px; font-size: var(--bsv-fs-copy); }

.service-faq p {
  margin: 0;
  color: var(--bsv-body);
  font-size: var(--bsv-fs-copy);
  line-height: var(--bsv-lh-copy);
}

/* ---------------------------------------------------------------------------
   Merkenoverzicht op alfabet.
--------------------------------------------------------------------------- */

.brand-page { margin-bottom: var(--bsv-space-6); }
.brand-page .page-title { margin-bottom: var(--bsv-space-2); }

.brand-page__intro {
  max-width: 68ch;
  margin-bottom: var(--bsv-space-5);
  color: var(--bsv-muted);
  font-size: var(--bsv-fs-copy);
  line-height: var(--bsv-lh-copy);
}
.brand-page__kop { margin: 0 0 var(--bsv-space-3); font-size: var(--bsv-fs-lg); }

/* De uitgelichte rij hergebruikt .brand-tile van de startpagina, maar met acht
   in plaats van tien en met het aantal producten eronder. */
.brand-row--page { grid-template-columns: repeat(2, 1fr); margin-bottom: var(--bsv-space-6); }

/* Het aantal stond bij elk merk op een andere hoogte. De tegel centreerde logo
   en telling samen, en het ene logo is 16 px hoog en het andere 52; de telling
   zakte dus mee. Nu krijgt het logo een eigen vak en staat de telling altijd
   onderaan.

   Alles behalve de telling deelt datzelfde bovenvak. Dat is niet alleen voor
   het logo: een merk zonder logo krijgt van placeholder-art.js een plaat, en
   die stond anders als derde rij onder de telling. */
.brand-row--page .brand-tile {
  min-width: 0;
  overflow-wrap: anywhere;
  grid-template-rows: minmax(52px, auto) auto;
  gap: 6px;

  /* Een regel meer dan de tegel op de startpagina, dus ook hoger. Bij 74 px
     liep een staand logo over de rand en duwde het de telling naar buiten. */
  min-height: 96px;
  height: auto;
  padding: 12px 10px 10px;
}

.brand-row--page .brand-tile > * {
  grid-area: 1 / 1;
  place-self: center;
  min-height: 0;
  max-height: 100%;
}

.brand-row--page .brand-tile__count {
  max-width: 100%;
  grid-area: 2 / 1;
  align-self: end;
  max-height: none;
}

.brand-tile__count { color: var(--bsv-muted); font-size: var(--bsv-fs-xs); }

.brand-index ul {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: 0 0 var(--bsv-space-5);
  padding: 0;
  list-style: none;
}

.brand-index a {
  display: grid;
  place-items: center;
  min-width: var(--bsv-touch);
  min-height: var(--bsv-touch);
  border-bottom: 2px solid transparent;
  color: var(--bsv-ink);
  font-weight: 700;
  text-decoration: none;
}

.brand-index a:hover,
.brand-index a:focus-visible { border-bottom-color: var(--bsv-yellow); text-decoration: none; }

/* Eén doorlopende lijst over vier kolommen, zoals een register hoort te zijn.
   break-inside houdt een letter met zijn merken bij elkaar. */
.brand-columns {
  columns: 1;
  column-gap: var(--bsv-space-6);
}

.brand-group {
  break-inside: avoid;
  margin: 0 0 var(--bsv-space-4);
}

.brand-group__letter {
  margin: 0 0 6px;
  font-size: var(--bsv-fs-md);
  line-height: 1.2;
}

.brand-group__letter::after {
  display: block;
  width: 18px;
  height: 2px;
  margin-top: 4px;
  background: var(--bsv-yellow);
  content: "";
}

.brand-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.brand-list a {
  display: block;

  /* Op een telefoon is een register van zeventig namen een lange lijst. Wat
     ruimer tikken zodat elke naam een echte kliktarget is. */
  padding: 9px 0;
  color: var(--bsv-body);
  text-decoration: none;
}

.brand-list a:hover,
.brand-list a:focus-visible { color: var(--bsv-ink); text-decoration: underline; text-underline-offset: 3px; }
.brand-list__count { margin-left: 5px; color: var(--bsv-muted); font-size: var(--bsv-fs-xs); }

@media (width >= 561px) {
  .service-contact__grid,
  .service-topics { grid-template-columns: repeat(2, 1fr); }

  .brand-row--page { grid-template-columns: repeat(4, 1fr); }
  .brand-columns { columns: 2; }
  .bsv-form__grid { grid-template-columns: repeat(2, 1fr); }
  .brand-list a { padding: 5px 0; }
}

@media (width >= 901px) {
  .service-topics { grid-template-columns: repeat(3, 1fr); }
  .brand-row--page { grid-template-columns: repeat(8, 1fr); }
  .brand-columns { columns: 4; }
  .bsv-form__grid { grid-template-columns: repeat(3, 1fr); }
}

@media (width >= 1101px) {
  .service-contact__grid { grid-template-columns: repeat(4, 1fr); }
}

/* Het schuifvenster is met tabindex bereikbaar; dan hoort er ook een zichtbare
   omranding bij. Zie template-parts/pages/verzending.php. */
.rate-scroll:focus-visible {
  outline: 3px solid var(--bsv-focus);
  outline-offset: 2px;
}

/* ---------------------------------------------------------------------------
   Calorierekenhulp. Invullen links, uitkomst rechts, en die uitkomst blijft
   in beeld terwijl je aan de velden draait. Zie template-parts/pages/kcal.php.
--------------------------------------------------------------------------- */

.kcal-head {
  max-width: 68ch;
  margin-bottom: var(--bsv-space-5);
}

.kcal-head .page-title { margin-bottom: var(--bsv-space-2); }

.kcal-head__intro {
  margin: 0;
  color: var(--bsv-muted);
  font-size: var(--bsv-fs-md);
}

.kcal-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--bsv-space-5);
  align-items: start;
  margin-bottom: var(--bsv-space-6);
}

.kcal-form { max-width: none; margin-bottom: 0; }

.kcal-form__group {
  margin-bottom: var(--bsv-space-5);
  padding-bottom: var(--bsv-space-4);
  border-bottom: 1px solid var(--bsv-line-soft);
}

.kcal-form__group legend {
  margin-bottom: var(--bsv-space-3);
  color: var(--bsv-ink);
  font-size: var(--bsv-fs-md);
}

.kcal-form__pair { grid-template-columns: 1fr; }

/* In één kolom staat de uitkomst onder het formulier. Plakken heeft dan geen
   zin en zou de knop op een telefoon vastzetten. */
.kcal-result {
  position: static;

  /* Onder de kop, die zelf ook bovenaan plakt. */
  top: calc(var(--wp-admin--admin-bar--height, 0px) + var(--bsv-header-h) + var(--bsv-space-4));
  padding: var(--bsv-space-4);
  border: 1px solid var(--bsv-line);
  border-radius: var(--bsv-radius-lg);
  background: var(--bsv-surface);
}

.kcal-result h2 {
  margin: 0 0 var(--bsv-space-3);
  font-size: var(--bsv-fs-md);
}

.kcal-result__note {
  margin: 0 0 var(--bsv-space-3);
  padding-left: var(--bsv-space-3);
  border-left: 3px solid var(--bsv-line);
  color: var(--bsv-muted);
  font-size: var(--bsv-fs-sm);
}

/* Amber is in dit thema de kleur van voedingswaarden; hier hoort hij dus. */
.kcal-figure {
  display: flex;
  flex-wrap: wrap;
  gap: var(--bsv-space-2);
  align-items: baseline;
  margin: 0 0 var(--bsv-space-3);
  padding: var(--bsv-space-3);
  border-radius: var(--bsv-radius);
  background: var(--bsv-highlight);
  color: var(--bsv-highlight-ink);
  font-size: var(--bsv-fs-sm);
}

.kcal-figure b {
  color: var(--bsv-ink);
  font-size: var(--bsv-fs-xl);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.kcal-figures {
  margin: 0 0 var(--bsv-space-4);
  padding: 0;
  list-style: none;
}

.kcal-figures li {
  padding: 9px 0;
  border-top: 1px solid var(--bsv-line-soft);
  color: var(--bsv-body);
  font-size: var(--bsv-fs-sm);
}

.kcal-figures b {
  color: var(--bsv-ink);
  font-size: var(--bsv-fs-base);
  font-variant-numeric: tabular-nums;
}

/* De tabel van de verzendtarieven, maar dan in een kolom van 380 pixels. */
.kcal-breakdown {
  min-width: 0;
  margin-bottom: var(--bsv-space-4);
}

.kcal-breakdown caption {
  padding-bottom: 6px;
  color: var(--bsv-muted);
  font-size: var(--bsv-fs-sm);
  text-align: left;
}

.kcal-breakdown th,
.kcal-breakdown td { padding: 8px 12px; font-size: var(--bsv-fs-sm); }
.kcal-breakdown th small { font-size: var(--bsv-fs-xs); }

.kcal-breakdown td {
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.kcal-result__cta {
  width: 100%;
  justify-content: center;
}

.kcal-result__cta-hint {
  margin: var(--bsv-space-2) 0 0;
  color: var(--bsv-muted);
  font-size: var(--bsv-fs-xs);
}

/* De uitleg gebruikt de volle breedte, maar in twee kolommen: een regel van
   1264 pixels leest niemand uit. Het langste blok staat links en beslaat beide
   rijen, zodat de twee kolommen ongeveer even lang uitkomen. */
.kcal-uitleg {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--bsv-space-5) var(--bsv-space-6);
  align-items: start;
  margin-bottom: var(--bsv-space-6);
  padding-top: var(--bsv-space-5);
  border-top: 1px solid var(--bsv-line);
}

.kcal-uitleg__block--tall { grid-row: auto; }

.kcal-uitleg h2 {
  margin: 0 0 var(--bsv-space-2);
  font-size: var(--bsv-fs-md);
}

.kcal-uitleg p {
  max-width: 68ch;
  margin: 0 0 var(--bsv-space-3);
}

.kcal-uitleg p:last-child { margin-bottom: 0; }



@media (width >= 561px) {
  .kcal-form__pair { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (width >= 901px) {
  .kcal-layout { grid-template-columns: minmax(0, 1fr) minmax(0, 380px); }
  .kcal-uitleg { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kcal-uitleg__block--tall { grid-row: span 2; }
  .kcal-result { position: sticky; }
}

/* --- Wie het schreef ----------------------------------------------------- */

/* De regel onder de kop van een artikel: naam, functie, datum. Punten ertussen
   in plaats van streepjes, zodat het één zin blijft en geen etikettenrij wordt. */
.single-article__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px var(--bsv-space-3);
  font-size: var(--bsv-fs-sm);
  color: var(--bsv-muted);
}

.single-article__meta a { color: var(--bsv-ink); font-weight: 700; }
.single-article__author { color: var(--bsv-body); }
.single-article__role::before { content: ", "; }

/* Het blok onder het artikel. Dezelfde foto en functie als in de reactie onder
   een beoordeling: één persoon, herkenbaar op beide plekken. */
.author-card {
  display: flex;
  flex-direction: column;
  gap: var(--bsv-space-3);
  margin-top: var(--bsv-space-6);
  padding: var(--bsv-space-4);
  border: 1px solid var(--bsv-line);
  border-radius: var(--bsv-radius);
  background: var(--bsv-surface);
}

.author-card__photo {
  flex: 0 0 auto;
  width: 64px;
  height: 64px;
  border-radius: var(--bsv-radius-pill);
  object-fit: cover;
  background: var(--bsv-bg);
}

.author-card__name {
  font-size: var(--bsv-fs-md);
  line-height: 1.25;
  margin: 0;
}

.author-card__name a { color: var(--bsv-ink); }

.author-card__role {
  margin: 2px 0 0;
  font-size: var(--bsv-fs-sm);
  color: var(--bsv-muted);
}

.author-card__bio {
  margin: var(--bsv-space-2) 0 0;
  max-width: 68ch;
  font-size: var(--bsv-fs-sm);
}

.author-card__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--bsv-space-3);
  margin: var(--bsv-space-2) 0 0;
  padding: 0;
  list-style: none;
  font-size: var(--bsv-fs-sm);
}

.author-card__links a {
  display: inline-block;
  min-height: 24px;
  padding: 4px 0;
  text-decoration: underline;
  text-underline-offset: 2px;
}

@media (width >= 561px) {
  .author-card { flex-direction: row; gap: var(--bsv-space-4); }
}


/* ---------------------------------------------------------------------------
   Zakelijk bestellen. Volle landingspagina met bewijs, uitleg en offerte.
--------------------------------------------------------------------------- */

.business-page {
  margin: var(--bsv-space-3) 0 var(--bsv-space-7);
}

.business-page h2,
.business-page h3 {
  color: var(--bsv-ink);
}

.business-eyebrow {
  margin: 0 0 8px;
  color: var(--bsv-yellow-strong, #b98700);
  font-size: var(--bsv-fs-xs);
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.business-hero {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(32px, 6vw, 80px);
  align-items: center;
  overflow: hidden;
  margin-inline: calc(-1 * var(--bsv-space-3));
  margin-bottom: var(--bsv-space-4);
  padding: clamp(32px, 5vw, 64px);
  border-radius: 0;
  background: var(--bsv-ink);
  color: #fff;
}

.business-hero::after {
  position: absolute;
  right: -90px;
  bottom: -120px;
  width: 320px;
  height: 320px;
  border-radius: 50%;
  background: var(--bsv-yellow);
  opacity: .12;
  content: "";
  pointer-events: none;
}

.business-hero__copy {
  position: relative;
  z-index: 1;
}

.business-hero .business-eyebrow {
  color: var(--bsv-yellow);
}

.business-hero h1 {
  max-width: 16ch;
  margin: 0 0 var(--bsv-space-3);
  color: #fff;
  font-size: clamp(2rem, 4.5vw, 3.75rem);
  line-height: 1.04;
  letter-spacing: -.035em;
}

.business-hero__intro {
  max-width: 62ch;
  margin: 0 0 var(--bsv-space-4);
  color: rgb(255 255 255 / 78%);
  font-size: var(--bsv-fs-copy);
  line-height: var(--bsv-lh-copy);
}

.business-hero__actions {
  display: flex;
  flex-flow: column wrap;
  gap: var(--bsv-space-3);
  align-items: stretch;
  margin-bottom: var(--bsv-space-4);
}

.business-hero__actions .btn { width: 100%; justify-content: center; }

.business-hero__secondary {
  min-height: var(--bsv-touch);
  padding: 12px 2px;
  color: #fff;
  font-weight: 700;
  text-decoration: underline;
  text-decoration-color: var(--bsv-yellow);
  text-underline-offset: 5px;
}

.business-hero__checks {
  display: grid;
  flex-wrap: wrap;
  gap: 8px var(--bsv-space-4);
  margin: 0;
  padding: 0;
  color: rgb(255 255 255 / 78%);
  font-size: var(--bsv-fs-sm);
  list-style: none;
}

.business-hero__checks li::before {
  margin-right: 7px;
  color: var(--bsv-yellow);
  font-weight: 800;
  content: "✓";
}

.business-rating {
  position: relative;
  z-index: 1;
  display: grid;
  max-width: 440px;
  gap: 5px;
  padding: clamp(24px, 3vw, 36px);
  border-radius: var(--bsv-radius-lg);
  background: #fff;
  box-shadow: 0 18px 50px rgb(0 0 0 / 22%);
  color: var(--bsv-body);
  text-decoration: none;
}

.business-rating:hover {
  text-decoration: none;
  transform: translateY(-2px);
}

.business-rating__label {
  color: var(--bsv-muted);
  font-size: var(--bsv-fs-sm);
}

.business-rating strong {
  color: var(--bsv-ink);
  font-size: clamp(2.8rem, 6vw, 4.5rem);
  line-height: .95;
  font-variant-numeric: tabular-nums;
}

.business-rating strong small {
  font-size: .3em;
}

.business-rating__stars {
  color: var(--bsv-yellow-strong, #b98700);
  font-size: 1.25rem;
  letter-spacing: 2px;
}

.business-rating b {
  margin-top: 5px;
  color: var(--bsv-ink);
}

.business-rating > small {
  margin-top: 8px;
  color: var(--bsv-muted);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.business-proof {
  margin-bottom: clamp(48px, 7vw, 88px);
  padding: var(--bsv-space-4);
  border: 1px solid var(--bsv-line);
  border-radius: var(--bsv-radius-lg);
  background: var(--bsv-surface);
}

.business-proof > p {
  margin: 0 0 var(--bsv-space-3);
  color: var(--bsv-muted);
  font-size: var(--bsv-fs-sm);
  font-weight: 700;
  text-align: center;
}

.business-logos {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--bsv-space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.business-logos li {
  display: grid;
  place-items: center;
  min-width: 0;
  min-height: 106px;
  padding: 14px;
  border: 1px solid var(--bsv-line-soft);
  border-radius: var(--bsv-radius);
  background: #fff;
}

.business-logos img {
  display: block;
  width: auto;
  max-width: 100%;
  height: 66px;
  object-fit: contain;
  filter: grayscale(1);
  opacity: .78;
}

.business-logos li:hover img {
  filter: none;
  opacity: 1;
}

.business-section,
.business-process,
.business-faq {
  margin-bottom: clamp(52px, 8vw, 96px);
}

.business-section__head {
  max-width: 720px;
  margin-bottom: var(--bsv-space-4);
}

.business-section__head h2 {
  margin: 0 0 var(--bsv-space-2);
  font-size: clamp(1.6rem, 3vw, 2.35rem);
  line-height: 1.15;
}

.business-section__head > p:last-child {
  margin: 0;
  color: var(--bsv-muted);
  font-size: var(--bsv-fs-copy);
  line-height: var(--bsv-lh-copy);
}

.business-benefits {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--bsv-space-4);
}

.business-card {
  padding: clamp(24px, 3vw, 36px);
  border: 1px solid var(--bsv-line);
  border-radius: var(--bsv-radius-lg);
  background: var(--bsv-surface);
}

.business-card__icon {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  margin-bottom: var(--bsv-space-3);
  border-radius: 50%;
  background: var(--bsv-highlight);
  color: var(--bsv-highlight-ink);
  font-size: 1.25rem;
  font-weight: 800;
}

.business-card h3 {
  margin: 0 0 var(--bsv-space-2);
  font-size: var(--bsv-fs-md);
}

.business-card p {
  margin: 0;
  color: var(--bsv-muted);
  font-size: var(--bsv-fs-copy);
  line-height: var(--bsv-lh-copy);
}

.business-process {
  padding: clamp(28px, 5vw, 56px);
  border-radius: var(--bsv-radius-lg);
  background: var(--bsv-bg);
}

.business-process ol {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--bsv-space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.business-process li {
  display: flex;
  gap: var(--bsv-space-3);
}

.business-process li > span {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--bsv-ink);
  color: #fff;
  font-weight: 800;
}

.business-process h3 {
  margin: 2px 0 6px;
  font-size: var(--bsv-fs-base);
}

.business-process li p {
  margin: 0;
  color: var(--bsv-muted);
  font-size: var(--bsv-fs-copy);
  line-height: var(--bsv-lh-copy);
}

.business-quote {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--bsv-space-5);
  align-items: start;
  margin-bottom: clamp(52px, 8vw, 96px);
  scroll-margin-top: calc(var(--bsv-header-h) + 32px);
}

.business-quote__card {
  padding: clamp(24px, 4vw, 48px);
  border: 1px solid var(--bsv-line);
  border-radius: var(--bsv-radius-lg);
  background: var(--bsv-surface);
  box-shadow: 0 16px 50px rgb(0 0 0 / 6%);
}

.business-quote__card h2,
.business-quote__aside h2 {
  margin: 0 0 var(--bsv-space-2);
  font-size: clamp(1.5rem, 2.5vw, 2rem);
}

.business-quote__intro {
  max-width: 62ch;
  margin: 0 0 var(--bsv-space-4);
  color: var(--bsv-muted);
  font-size: var(--bsv-fs-copy);
  line-height: var(--bsv-lh-copy);
}

.business-form {
  max-width: none;
  margin: 0;
}

.business-form__pair {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--bsv-space-3);
}

.business-form__submit {
  width: 100%;
  justify-content: center;
  margin-top: var(--bsv-space-2);
}

.business-quote__aside {
  position: static;
  top: calc(var(--wp-admin--admin-bar--height, 0px) + var(--bsv-header-h) + var(--bsv-space-4));
  padding: clamp(24px, 3vw, 36px);
  border-radius: var(--bsv-radius-lg);
  background: var(--bsv-ink);
  color: rgb(255 255 255 / 78%);
}

.business-quote__aside .business-eyebrow {
  color: var(--bsv-yellow);
}

.business-quote__aside h2 {
  color: #fff;
}

.business-contact-link {
  display: block;
  width: fit-content;
  max-width: 100%;
  margin-top: var(--bsv-space-3);
  color: #fff;
  font-size: var(--bsv-fs-md);
  font-weight: 800;
  overflow-wrap: anywhere;
  text-decoration-color: var(--bsv-yellow);
  text-underline-offset: 4px;
}

.business-quote__aside ul {
  display: grid;
  gap: 9px;
  margin: var(--bsv-space-4) 0 0;
  padding: var(--bsv-space-4) 0 0;
  border-top: 1px solid rgb(255 255 255 / 16%);
  list-style: none;
}

.business-quote__aside li::before {
  margin-right: 8px;
  color: var(--bsv-yellow);
  font-weight: 800;
  content: "✓";
}

.business-faq__items {
  border-top: 1px solid var(--bsv-line);
}

.business-faq details {
  border-bottom: 1px solid var(--bsv-line);
}

.business-faq summary {
  position: relative;
  padding: 20px 48px 20px 0;
  color: var(--bsv-ink);
  font-size: var(--bsv-fs-md);
  font-weight: 750;
  cursor: pointer;
  list-style: none;
}

.business-faq summary::-webkit-details-marker {
  display: none;
}

.business-faq summary::after {
  position: absolute;
  top: 50%;
  right: 8px;
  color: var(--bsv-yellow-strong, #b98700);
  font-size: 1.5rem;
  font-weight: 400;
  transform: translateY(-50%);
  content: "+";
}

.business-faq details[open] summary::after {
  content: "−";
}

.business-faq details p {
  max-width: 72ch;
  margin: -6px 0 22px;
  color: var(--bsv-muted);
  font-size: var(--bsv-fs-copy);
  line-height: var(--bsv-lh-copy);
}

.business-bottom-cta {
  display: flex;
  flex-direction: column;
  gap: var(--bsv-space-4);
  align-items: stretch;
  justify-content: space-between;
  padding: clamp(28px, 5vw, 52px);
  border-radius: var(--bsv-radius-lg);
  background: var(--bsv-highlight);
}

.business-bottom-cta h2 {
  margin: 0 0 6px;
  font-size: clamp(1.4rem, 2.6vw, 2rem);
}

.business-bottom-cta p {
  max-width: 64ch;
  margin: 0;
  color: var(--bsv-body);
  font-size: var(--bsv-fs-copy);
  line-height: var(--bsv-lh-copy);
}

.business-logos li:last-child { grid-column: 1 / -1; }

.business-bottom-cta .btn {
  flex: 0 0 auto;
  width: 100%;
  justify-content: center;
}

.business-success {
  max-width: 760px;
  margin: var(--bsv-space-6) auto;
  padding: clamp(28px, 5vw, 52px);
}

@media (width >= 641px) {
  .business-page { margin-top: var(--bsv-space-5); }

  .business-hero {
    margin-inline: 0;
    border-radius: var(--bsv-radius-lg);
  }

  .business-hero__actions,
  .business-bottom-cta {
    align-items: center;
    flex-direction: row;
  }

  .business-hero__actions .btn,
  .business-bottom-cta .btn {
    width: auto;
    justify-content: normal;
  }

  .business-hero__checks { display: flex; }
  .business-logos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .business-logos li:last-child { grid-column: auto; }
  .business-form__pair { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (width >= 901px) {
  .business-hero { grid-template-columns: minmax(0, 1.55fr) minmax(280px, .7fr); }
  .business-quote { grid-template-columns: minmax(0, 1.4fr) minmax(280px, .6fr); }
  .business-rating { max-width: none; }
  .business-logos { grid-template-columns: repeat(5, minmax(0, 1fr)); }

  .business-benefits,
  .business-process ol { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  .business-quote__aside { position: sticky; }
}


/* ---------------------------------------------------------------------------
   Vertrouwenspagina's: contact, betalen, FAQ en ons verhaal.
--------------------------------------------------------------------------- */

.page-article:has(.trust-page) {
  max-width: none;
  margin-bottom: var(--bsv-space-7);
}

.page-article:has(.trust-page) > .page-title {
  display: none;
}

.page-article:has(.trust-page) > .entry {
  max-width: none;
}

.trust-page {
  display: grid;
  gap: 52px;
  padding-top: var(--bsv-space-3);
}

.trust-page h1,
.trust-page h2,
.trust-page h3 {
  color: var(--bsv-ink);
}

.trust-eyebrow {
  margin: 0 0 8px;
  color: var(--bsv-yellow-strong, #b98700);
  font-size: var(--bsv-fs-xs);
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.trust-hero {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(32px, 6vw, 76px);
  align-items: center;
  overflow: hidden;
  margin-inline: calc(-1 * var(--bsv-space-3));
  padding: clamp(32px, 5vw, 64px);
  border-radius: 0;
  background: var(--bsv-ink);
  color: #fff;
}

.trust-hero::after {
  position: absolute;
  right: -110px;
  bottom: -150px;
  width: 360px;
  height: 360px;
  border-radius: 50%;
  background: var(--bsv-yellow);
  opacity: .11;
  content: "";
  pointer-events: none;
}

.trust-hero__copy,
.trust-hero__promise,
.trust-hero__nav {
  position: relative;
  z-index: 1;
}

.trust-hero .trust-eyebrow,
.trust-dark-card .trust-eyebrow,
.story-proof .trust-eyebrow {
  color: var(--bsv-yellow);
}

.trust-hero h1 {
  max-width: 18ch;
  margin: 0 0 var(--bsv-space-3);
  color: #fff;
  font-size: clamp(2rem, 4.3vw, 3.7rem);
  line-height: 1.04;
  letter-spacing: -.035em;
}

.trust-hero__copy > p:not(.trust-eyebrow) {
  max-width: 62ch;
  margin: 0 0 var(--bsv-space-4);
  color: rgb(255 255 255 / 78%);
  font-size: var(--bsv-fs-copy);
  line-height: var(--bsv-lh-copy);
}

.trust-hero__actions {
  display: flex;
  flex-flow: column wrap;
  gap: var(--bsv-space-3);
  align-items: stretch;
}

.trust-hero__actions .btn { width: 100%; justify-content: center; }

.trust-hero__link {
  min-height: var(--bsv-touch);
  padding: 12px 2px;
  color: #fff;
  font-weight: 700;
  text-decoration-color: var(--bsv-yellow);
  text-underline-offset: 5px;
}

.trust-hero__promise {
  display: grid;
  gap: 6px;
  padding: clamp(24px, 3vw, 34px);
  border-radius: var(--bsv-radius-lg);
  background: #fff;
  box-shadow: 0 18px 50px rgb(0 0 0 / 22%);
  color: var(--bsv-muted);
}

.trust-hero__promise strong {
  margin-top: var(--bsv-space-2);
  color: var(--bsv-ink);
  font-size: var(--bsv-fs-md);
}

.trust-hero__promise strong:first-child {
  margin-top: 0;
}

.trust-hero__promise span + strong {
  padding-top: var(--bsv-space-3);
  border-top: 1px solid var(--bsv-line-soft);
}

.trust-hero__nav {
  display: grid;
  gap: 8px;
  padding: var(--bsv-space-3);
  border-radius: var(--bsv-radius-lg);
  background: #fff;
}

.trust-hero__nav a {
  padding: 13px 16px;
  border-radius: var(--bsv-radius);
  color: var(--bsv-ink);
  font-weight: 750;
  text-decoration: none;
}

.trust-hero__nav a::after {
  float: right;
  color: var(--bsv-yellow-strong, #b98700);
  content: "↓";
}

.trust-hero__nav a:hover {
  background: var(--bsv-highlight);
  text-decoration: none;
}

.trust-section__head {
  max-width: 760px;
  margin-bottom: var(--bsv-space-4);
}

.trust-section__head h2,
.trust-split h2,
.story-intro h2,
.story-values h2,
.faq-group__head h2 {
  margin: 0 0 var(--bsv-space-2);
  font-size: clamp(1.6rem, 3vw, 2.35rem);
  line-height: 1.15;
}

.trust-section__head > p:last-child {
  margin: 0;
  color: var(--bsv-muted);
  font-size: var(--bsv-fs-copy);
  line-height: var(--bsv-lh-copy);
}

.trust-section--soft {
  margin-inline: calc(-1 * var(--bsv-space-3));
  padding: clamp(28px, 5vw, 56px);
  border-radius: 0;
  background: var(--bsv-bg);
}

.trust-card-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--bsv-space-4);
}

.trust-card-grid--four {
  grid-template-columns: 1fr;
}

.trust-card {
  min-width: 0;
  padding: clamp(22px, 3vw, 32px);
  border: 1px solid var(--bsv-line);
  border-radius: var(--bsv-radius-lg);
  background: var(--bsv-surface);
}

.trust-card__icon {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  margin-bottom: var(--bsv-space-3);
  border-radius: 50%;
  background: var(--bsv-highlight);
  color: var(--bsv-highlight-ink);
  font-weight: 800;
}

.trust-card h3 {
  margin: 0 0 var(--bsv-space-2);
  font-size: var(--bsv-fs-md);
}

.trust-card p {
  margin: 0 0 var(--bsv-space-3);
  color: var(--bsv-muted);
  font-size: var(--bsv-fs-copy);
  line-height: var(--bsv-lh-copy);
}

.trust-card a {
  display: inline-block;
  max-width: 100%;
  color: var(--bsv-ink);
  font-weight: 750;
  overflow-wrap: anywhere;
  text-underline-offset: 3px;
}

.trust-link-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--bsv-space-3);
}

.trust-link-grid a {
  display: grid;
  min-width: 0;
  gap: 4px;
  padding: var(--bsv-space-4);
  border: 1px solid var(--bsv-line);
  border-radius: var(--bsv-radius);
  background: var(--bsv-surface);
  color: var(--bsv-ink);
  text-decoration: none;
}

.trust-link-grid a::after {
  grid-row: 1 / span 2;
  grid-column: 2;
  align-self: center;
  margin-left: var(--bsv-space-2);
  color: var(--bsv-yellow-strong, #b98700);
  font-size: 1.25rem;
  content: "→";
}

.trust-link-grid a:hover {
  border-color: var(--bsv-ink);
  text-decoration: none;
}

.trust-link-grid span {
  color: var(--bsv-muted);
  font-size: var(--bsv-fs-sm);
}

.trust-split,
.story-values {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(32px, 6vw, 72px);
  align-items: start;
}

.trust-split > div,
.story-values__copy {
  padding-block: var(--bsv-space-3);
}

.trust-checklist {
  display: grid;
  gap: 12px;
  margin: var(--bsv-space-4) 0;
  padding: 0;
  list-style: none;
}

.trust-checklist li {
  position: relative;
  padding-left: 30px;
}

.trust-checklist li::before {
  position: absolute;
  top: 1px;
  left: 0;
  display: grid;
  place-items: center;
  width: 21px;
  height: 21px;
  border-radius: 50%;
  background: var(--bsv-highlight);
  color: var(--bsv-highlight-ink);
  font-size: 12px;
  font-weight: 800;
  content: "✓";
}

.trust-dark-card {
  padding: clamp(26px, 4vw, 42px);
  border-radius: var(--bsv-radius-lg);
  background: var(--bsv-ink);
  color: rgb(255 255 255 / 78%);
}

.trust-dark-card h2 {
  color: #fff;
}

.trust-dark-card dl {
  display: grid;
  gap: var(--bsv-space-3);
  margin: var(--bsv-space-4) 0 0;
}

.trust-dark-card dl div {
  padding-top: var(--bsv-space-3);
  border-top: 1px solid rgb(255 255 255 / 14%);
}

.trust-dark-card dt {
  color: rgb(255 255 255 / 56%);
  font-size: var(--bsv-fs-sm);
}

.trust-dark-card dd {
  margin: 3px 0 0;
  color: #fff;
  font-weight: 700;
}

.trust-dark-card a {
  display: inline-block;
  margin-top: var(--bsv-space-3);
  color: #fff;
  font-weight: 750;
  text-decoration-color: var(--bsv-yellow);
  text-underline-offset: 4px;
}

.payment-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--bsv-space-3);
}

.payment-card {
  display: flex;
  min-width: 0;
  gap: var(--bsv-space-3);
  align-items: flex-start;
  padding: var(--bsv-space-4);
  border: 1px solid var(--bsv-line);
  border-radius: var(--bsv-radius-lg);
  background: var(--bsv-surface);
}

.payment-card > img,
.payment-card__logos {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 76px;
  min-height: 54px;
  padding: 8px;
  border-radius: var(--bsv-radius);
  background: #fff;
}

.payment-card > img {
  height: 54px;
  object-fit: contain;
}

.payment-card__logos {
  grid-template-columns: repeat(2, 1fr);
  gap: 5px;
}

.payment-card__logos img {
  width: 100%;
  max-height: 34px;
  object-fit: contain;
}

.payment-card .trust-card__icon {
  flex: 0 0 auto;
  margin: 0;
}

.payment-card h3 {
  margin: 0 0 4px;
  font-size: var(--bsv-fs-base);
}

.payment-card p {
  margin: 0;
  color: var(--bsv-muted);
  font-size: var(--bsv-fs-copy);
  line-height: var(--bsv-lh-copy);
}

.trust-process {
  margin-inline: calc(-1 * var(--bsv-space-3));
  padding: clamp(28px, 5vw, 56px);
  border-radius: 0;
  background: var(--bsv-bg);
}

.trust-process ol {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--bsv-space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.trust-process li {
  display: flex;
  gap: var(--bsv-space-3);
}

.trust-process li > span,
.faq-group__head > span {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--bsv-ink);
  color: #fff;
  font-weight: 800;
}

.trust-process h3 {
  margin: 2px 0 6px;
  font-size: var(--bsv-fs-base);
}

.trust-process li p {
  margin: 0;
  color: var(--bsv-muted);
  font-size: var(--bsv-fs-copy);
  line-height: var(--bsv-lh-copy);
}

.trust-text-link {
  display: inline-block;
  color: var(--bsv-ink);
  font-weight: 750;
  text-decoration-color: var(--bsv-yellow-strong, #b98700);
  text-underline-offset: 4px;
}

.trust-faq {
  border-top: 1px solid var(--bsv-line);
}

.trust-faq details {
  border-bottom: 1px solid var(--bsv-line);
}

.trust-faq summary {
  position: relative;
  padding: 20px 48px 20px 0;
  color: var(--bsv-ink);
  font-size: var(--bsv-fs-md);
  font-weight: 750;
  cursor: pointer;
  list-style: none;
}

.trust-faq summary::-webkit-details-marker {
  display: none;
}

.trust-faq summary::after {
  position: absolute;
  top: 50%;
  right: 8px;
  color: var(--bsv-yellow-strong, #b98700);
  font-size: 1.5rem;
  font-weight: 400;
  transform: translateY(-50%);
  content: "+";
}

.trust-faq details[open] summary::after {
  content: "−";
}

.trust-faq details p {
  max-width: 72ch;
  margin: -6px 0 22px;
  color: var(--bsv-muted);
}

.faq-group {
  scroll-margin-top: calc(var(--bsv-header-h) + 28px);
}

.faq-group__head {
  display: flex;
  gap: var(--bsv-space-3);
  align-items: center;
  margin-bottom: var(--bsv-space-3);
}

.faq-group__head .trust-eyebrow,
.faq-group__head h2 {
  margin-bottom: 0;
}

.trust-inline-cta {
  display: flex;
  flex-direction: column;
  gap: var(--bsv-space-4);
  align-items: stretch;
  justify-content: space-between;
  margin-top: var(--bsv-space-4);
  padding: var(--bsv-space-4);
  border-radius: var(--bsv-radius);
  background: var(--bsv-highlight);
  color: var(--bsv-ink);
  text-decoration: none;
}

.trust-inline-cta:hover {
  text-decoration: none;
}

.trust-inline-cta span {
  color: var(--bsv-body);
}

.trust-inline-cta::after {
  flex: 0 0 auto;
  font-size: 1.25rem;
  content: "→";
}

.trust-bottom-cta {
  display: flex;
  flex-direction: column;
  gap: var(--bsv-space-4);
  align-items: stretch;
  justify-content: space-between;
  padding: clamp(28px, 5vw, 52px);
  border-radius: var(--bsv-radius-lg);
  background: var(--bsv-highlight);
}

.trust-bottom-cta h2 {
  margin: 0 0 6px;
  font-size: clamp(1.4rem, 2.6vw, 2rem);
}

.trust-bottom-cta p {
  max-width: 64ch;
  margin: 0;
}

.trust-bottom-cta .btn {
  flex: 0 0 auto;
  width: 100%;
  justify-content: center;
}

.story-hero {
  display: grid;
  grid-template-columns: 1fr;
  overflow: hidden;
  min-height: 520px;
  margin-inline: calc(-1 * var(--bsv-space-3));
  border-radius: 0;
  background: var(--bsv-ink);
}

.story-hero__copy {
  align-self: center;
  padding: clamp(34px, 6vw, 72px);
  color: #fff;
}

.story-hero .trust-eyebrow {
  color: var(--bsv-yellow);
}

.story-hero h1 {
  max-width: 15ch;
  margin: 0 0 var(--bsv-space-3);
  color: #fff;
  font-size: clamp(2rem, 4.3vw, 3.7rem);
  line-height: 1.04;
  letter-spacing: -.035em;
}

.story-hero__copy > p:not(.trust-eyebrow) {
  max-width: 58ch;
  margin: 0 0 var(--bsv-space-4);
  color: rgb(255 255 255 / 78%);
  font-size: var(--bsv-fs-copy);
  line-height: var(--bsv-lh-copy);
}

.story-hero figure {
  min-height: 100%;
  max-height: 320px;
  margin: 0;
}

.story-hero img {
  width: 100%;
  height: 100%;
  min-height: 280px;
  object-fit: cover;
}

.story-intro {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(32px, 7vw, 96px);
}

.story-intro p:not(.trust-eyebrow) {
  color: var(--bsv-body);
  font-size: var(--bsv-fs-copy);
  line-height: var(--bsv-lh-copy);
}

.story-intro p:first-child {
  margin-top: 0;
}

.story-proof {
  display: grid;
  gap: var(--bsv-space-3);
}

.story-proof a {
  display: grid;
  gap: 5px;
  padding: clamp(24px, 4vw, 38px);
  border: 1px solid var(--bsv-line);
  border-radius: var(--bsv-radius-lg);
  background: var(--bsv-surface);
  color: var(--bsv-body);
  text-decoration: none;
}

.story-proof a:hover {
  border-color: var(--bsv-ink);
  text-decoration: none;
}

.story-proof strong {
  color: var(--bsv-ink);
  font-size: clamp(2.8rem, 6vw, 4.5rem);
  line-height: 1;
}

.story-proof strong small {
  font-size: .3em;
}

.story-proof em {
  color: var(--bsv-muted);
  font-style: normal;
}

.story-proof img {
  width: auto;
  max-width: 190px;
  max-height: 70px;
  object-fit: contain;
}

/* De basis hierboven is de telefoon: alles onder elkaar, de brede vlakken tot
   aan de schermrand. Drie stappen bouwen dat op. */

@media (width >= 641px) {
  .trust-page { gap: clamp(56px, 8vw, 96px); padding-top: var(--bsv-space-5); }

  .trust-hero,
  .story-hero,
  .trust-section--soft,
  .trust-process {
    margin-inline: 0;
    border-radius: var(--bsv-radius-lg);
  }

  .trust-hero__actions,
  .trust-bottom-cta,
  .trust-inline-cta {
    align-items: center;
    flex-direction: row;
  }

  .trust-hero__actions .btn,
  .trust-bottom-cta .btn {
    width: auto;
    justify-content: normal;
  }

  /* Alleen de betaalmethoden. Een vierkaarts raster stond hier op één kolom,
     doordat de regel van .trust-card-grid in het oude 900-blok over zijn eigen
     modifier heen ging. Dat blijft zo; het is hier geen fout maar een keuze die
     al gemaakt was. */
  .payment-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .payment-card { align-items: center; }
  .story-hero figure { max-height: 430px; }
  .story-hero img { min-height: 360px; }
}

@media (width >= 901px) {
  .trust-hero { grid-template-columns: minmax(0, 1.4fr) minmax(280px, .6fr); }

  .trust-split,
  .story-values { grid-template-columns: minmax(0, 1.2fr) minmax(300px, .8fr); }

  .story-hero { grid-template-columns: minmax(0, 1fr) minmax(380px, .9fr); }
  .story-intro { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); }

  .trust-card-grid,
  .trust-link-grid,
  .trust-process ol { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  /* Ná de regel hierboven: de vierkoloms variant blijft hier nog op twee. */
  .trust-card-grid--four { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .story-hero figure { max-height: none; }
  .story-hero img { min-height: auto; }
}

@media (width >= 1051px) {
  .trust-card-grid--four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .payment-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Lopende tekst in service- en verhaalblokken deelt dezelfde leesmaat. */
.trust-faq details p,
.trust-bottom-cta p,
.story-values__copy p,
.business-quote__aside > p:not(.business-eyebrow) {
  font-size: var(--bsv-fs-copy);
  line-height: var(--bsv-lh-copy);
}

.service-page__intro,
.service-page > p,
.kcal-uitleg p,
.trust-checklist {
  font-size: var(--bsv-fs-copy);
  line-height: var(--bsv-lh-copy);
}