/* ==========================================================================
   Contentpagina's in het huidige ontwerp

   De pagina's die uit de oude statische site komen (over ons, wat & voor
   wie, service, contact, privacy, voorwaarden) gebruiken hun eigen set
   klassen. Die stonden alleen in style.css, een tweede ontwerpsysteem met
   een eigen palet (crème/aarde) en een eigen header die de gedeelde
   header en footer niet kent.

   Dit bestand definieert diezelfde klassen opnieuw, maar volledig op de
   tokens van shop.css, zodat elke pagina één ontwerp deelt. shop.css is
   overal de basis; dit bestand vult alleen aan.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Sectieritme
   -------------------------------------------------------------------------- */

.section {
  padding-block: var(--s-7);
}

.section--flush {
  padding-block: var(--s-6);
}

.section--alt {
  background-color: var(--page-2);
}

.section--soil {
  background-color: var(--brand-900);
  color: #fff;
}

.section--soil h1,
.section--soil h2,
.section--soil h3 {
  color: #fff;
}

.section--soil p,
.section--soil li {
  color: rgba(255, 255, 255, 0.82);
}

.section--soil a:not(.btn) {
  color: var(--accent-bright);
}

/* --------------------------------------------------------------------------
   Paginakop
   -------------------------------------------------------------------------- */

/* Dezelfde lichte kop als de winkel, de categorie en de productpagina.
   De donkere band die hier stond was op desktop voor meer dan de helft
   leeg en gaf de site drie verschillende koppen voor dezelfde taak. */
.page-header {
  padding-block: var(--s-6) 0;
  color: var(--ink);
}

.page-header h1 {
  margin: 0;
  font-family: var(--font-cond);
  font-size: var(--fs-2xl);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--ink);
}

.page-header p {
  max-width: 62ch;
  margin: var(--s-3) 0 0;
  font-size: var(--fs-md);
  line-height: 1.6;
  color: var(--ink-2);
}

/* --------------------------------------------------------------------------
   Kruimelpad
   -------------------------------------------------------------------------- */

/* Zelfde vorm als .crumbs in de winkel. */
.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2);
  margin-bottom: var(--s-4);
  font-size: var(--fs-sm);
  color: var(--ink-3);
}

/* Op de contactpagina staat het kruimelpad als <p> in .page-header; daar
   gaf ".page-header p" het de marge en lettergrootte van de intro, en
   plakte de h1 eronder. */
.page-header p.breadcrumb {
  max-width: none;
  margin: 0 0 var(--s-4);
  font-size: var(--fs-sm);
  line-height: inherit;
  color: var(--ink-3);
}

.breadcrumb a {
  color: var(--ink-2);
  text-decoration: none;
}

.breadcrumb a:hover {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* --------------------------------------------------------------------------
   Lopende tekst
   -------------------------------------------------------------------------- */

/* De inline-stijlen in de pagina-inhoud van de oude site gebruiken nog
   de tokens van style.css (--space-md, --radius-md, ...). Die stylesheet
   laadt niet meer, dus die afstanden vielen stil op 0: twee knoppen zonder
   ruimte ertussen, een kop die tegen de lijst eronder plakte. Hier als
   alias op de tokens van shop.css. */
:root {
  --space-xs: var(--s-2);
  --space-sm: var(--s-3);
  --space-md: var(--s-4);
  --space-lg: var(--s-5);
  --space-xl: var(--s-6);
  --radius-sm: var(--r);
  --radius-md: var(--r-lg);
  --shadow-sm: var(--sh-1);
  --shadow-md: var(--sh-2);
}

/* Een tabel direct onder een inleidende regel. */
p + .table-wrap {
  margin-top: var(--s-4);
}

/* Kaartjes direct onder een tabel (verzending op de servicepagina). */
.table-wrap + .usp-list {
  margin-top: var(--s-5);
}

/* Categorie-omschrijving onder de h1, met dezelfde ruimte als de intro
   van de winkelpagina (archive-product.php). Zonder dit plakte de regel
   tegen de kop en tegen de balk met het aantal producten. */
.term-description {
  margin-block: 0.75rem 1.75rem;
  color: var(--ink-2);
}

/* Sectiekop met de streep, zoals .sect__head in de winkel. Zonder streep
   plakte de kop tegen de eerste alinea en verdween de sectiegrens. */
.section > .wrap > h2 {
  margin-bottom: var(--s-5);
  padding-bottom: var(--s-3);
  border-bottom: 2px solid var(--brand-900);
}

.section--soil > .wrap > h2 {
  border-bottom-color: rgba(255, 255, 255, 0.28);
}

.prose {
  max-width: 68ch;
}

.prose > * + * {
  margin-top: var(--s-4);
}

.prose h2 {
  margin-top: var(--s-6);
  font-family: var(--font-cond);
  font-size: var(--fs-xl);
  font-weight: 700;
  line-height: 1.15;
  text-transform: uppercase;
  color: var(--ink);
}

.prose h3 {
  margin-top: var(--s-5);
  font-family: var(--font-cond);
  font-size: var(--fs-lg);
  font-weight: 600;
  text-transform: uppercase;
  color: var(--ink);
}

.prose p,
.prose li {
  font-size: var(--fs-md);
  line-height: 1.7;
  color: var(--ink-2);
}

.prose a {
  color: var(--accent-dark);
  text-underline-offset: 3px;
}

.prose ul,
.prose ol {
  padding-left: 1.15rem;
}

.prose li + li {
  margin-top: var(--s-2);
}

/* Tabellen komen zowel binnen .prose als los in een .section voor. */
.prose table,
.section table {
  width: 100%;
  margin: 0;
  border-collapse: collapse;
  background-color: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  font-size: var(--fs-md);
}

.prose th,
.prose td,
.section th,
.section td {
  padding: var(--s-3) var(--s-4);
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: middle;
  color: var(--ink-2);
}

.prose tr:last-child td,
.section tr:last-child td {
  border-bottom: 0;
}

.prose th,
.section th {
  background-color: var(--page);
  font-family: var(--font-cond);
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-2);
}

/* --------------------------------------------------------------------------
   Roosters
   -------------------------------------------------------------------------- */

/* shop.css geeft .grid al display + gap mee; hier alleen de kolommaten
   die de contentpagina's gebruiken. */
.grid--2 {
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  /* Deze rijen zijn steeds tekst naast beeld. Zonder centreren plakt een
     korte alinea bovenaan een hoge foto, met een gat eronder. */
  align-items: center;
}

/* De puntenlijsten gebruiken dezelfde grid-klasse; daar hangt elke kaart
   aan de bovenkant van zijn rij en houdt zijn eigen hoogte. Even hoog
   gerekt stond er onder een kaart van drie regels 250px wit. */
.usp-list.grid--2,
.usp-list.grid--3 {
  align-items: start;
}

.grid--3 {
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

/* --------------------------------------------------------------------------
   Afbeeldingen in tekstsecties
   -------------------------------------------------------------------------- */

/* De foto's staan in de content in kale <div>'s zonder afmetingen, dus
   renderden ze op hun eigen pixelformaat en werden ze metershoog naast
   een korte alinea. */
.section img,
.prose img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  border-radius: var(--r-lg);
}

/* Uitzondering: betaal- en vervoerderslogo's en alles in een tabel zijn
   kleine merktekens, geen sfeerbeeld. Zonder deze regel rekte het
   iDEAL-logo op tot de volle kolombreedte. */
.section img.pay-logo,
.section img[class*="logo"],
.section table img,
.prose table img {
  display: inline-block;
  width: auto;
  max-width: 120px;
  height: auto;
  border: 0;
  border-radius: 0;
}

.section .grid > div > img,
.section .grid > img {
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border: 1px solid var(--line);
}

.section--soil .grid > div > img,
.section--soil .grid > img {
  border-color: rgba(255, 255, 255, 0.14);
}

/* --------------------------------------------------------------------------
   Fotogalerij
   -------------------------------------------------------------------------- */

/* Drie per rij, en bij een oneven aantal krijgt de laatste de hele rij:
   met auto-fit stonden er vijf op de eerste rij en één alleen linksonder. */
.gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-4);
}

@media (max-width: 900px) {
  .gallery {
    grid-template-columns: repeat(2, 1fr);
  }

  .gallery img:last-child:nth-child(odd) {
    grid-column: 1 / -1;
    aspect-ratio: 16 / 7;
  }
}

.gallery img {
  width: 100%;
  height: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
}

/* --------------------------------------------------------------------------
   Punten met icoon
   -------------------------------------------------------------------------- */

.usp-list {
  display: grid;
  gap: var(--s-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.usp-list__item {
  display: flex;
  align-items: flex-start;
  gap: var(--s-4);
  padding: var(--s-4);
  background-color: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-1);
}

/* Meestal een cirkel met twee letters. Een langer label als MA-VR had
   61px nodig in een rondje van 44 en puilde er onderuit; met een minimale
   breedte in plaats van een vaste wordt dat vanzelf een pil. */
.usp-list__icon {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  min-width: 44px;
  height: 44px;
  padding-inline: 0.45em;
  border-radius: 999px;
  background-color: var(--ok-soft);
  color: var(--ok);
  font-size: 1.05rem;
  font-family: var(--font-cond);
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
}

.usp-list__icon svg {
  width: 22px;
  height: 22px;
}

.section--soil .usp-list__item {
  background-color: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.16);
  box-shadow: none;
}

.section--soil .usp-list__icon {
  background-color: rgba(255, 255, 255, 0.12);
  color: #fff;
}

/* --------------------------------------------------------------------------
   Scheiding
   -------------------------------------------------------------------------- */

.rope-divider {
  height: 1px;
  margin: 0;
  border: 0;
  background-color: var(--line);
}

/* --------------------------------------------------------------------------
   Contactpagina
   -------------------------------------------------------------------------- */

.contact-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-6);
  align-items: start;
}

/* De kop "Stuur een bericht" en het formulier zijn losse kinderen van
   deze grid, geen wrapper. Zonder expliciete plaatsing belandt de kop in
   een eigen kolom en staat het formulier los van zijn eigen titel. Met
   auto-fit werd de grid al vanaf zo'n 660px tweekolommig terwijl de
   plaatsing pas bij 900px inging: precies bij 200% zoom op een gewoon
   scherm stond de kop dan los van het formulier. Nu gaan beide tegelijk. */
@media (min-width: 700px) {
  .contact-layout {
    grid-template-columns: 1fr 1fr;
    column-gap: var(--s-7);
  }

  .contact-layout > .contact-info {
    grid-column: 1;
    grid-row: 1 / span 2;
  }

  .contact-layout > h2 {
    grid-column: 2;
    grid-row: 1;
    margin: 0;
  }

  .contact-layout > .wpcf7 {
    grid-column: 2;
    grid-row: 2;
    margin-top: var(--s-4);
  }
}

/* Contact Form 7 levert een kaal <form>; geef het dezelfde kaart als de
   rest van de site. */
.wpcf7-form {
  display: grid;
  gap: var(--s-4);
  padding: var(--s-5);
  background-color: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-1);
}

.wpcf7-form p {
  margin: 0;
}

.wpcf7-form label {
  display: block;
  font-family: var(--font-cond);
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-2);
}

.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="tel"],
.wpcf7-form textarea {
  width: 100%;
  margin-top: 0.35rem;
  padding: 0.7rem 0.85rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--r);
  background-color: var(--surface);
  color: var(--ink);
  font-family: var(--font);
  font-size: 1rem;
  line-height: 1.4;
}

.wpcf7-form textarea {
  min-height: 9rem;
  resize: vertical;
}

.wpcf7-form input:focus,
.wpcf7-form textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.wpcf7-form .wpcf7-acceptance .wpcf7-list-item {
  margin: 0;
}

.wpcf7-form .wpcf7-acceptance label {
  display: flex;
  align-items: flex-start;
  gap: var(--s-2);
  font-family: var(--font);
  font-size: var(--fs-sm);
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink-2);
}

.wpcf7-form .wpcf7-not-valid-tip {
  margin-top: 0.35rem;
  font-size: var(--fs-sm);
  color: var(--sale);
}

.wpcf7-form .wpcf7-response-output {
  margin: 0;
  padding: var(--s-3);
  border: 1px solid var(--line);
  border-radius: var(--r);
  background-color: var(--page);
  font-size: var(--fs-sm);
}

.contact-form {
  display: grid;
  gap: var(--s-4);
  padding: var(--s-5);
  background-color: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-1);
}

.contact-form label {
  display: block;
  margin-bottom: 0.35rem;
  font-family: var(--font-cond);
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-2);
}

.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form input[type="tel"],
.contact-form textarea {
  width: 100%;
  padding: 0.7rem 0.85rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--r);
  background-color: var(--surface);
  color: var(--ink);
  font-family: var(--font);
  font-size: 1rem;
  line-height: 1.4;
}

.contact-form input:focus,
.contact-form textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

/* --------------------------------------------------------------------------
   Kolomindeling productlijsten
   -------------------------------------------------------------------------- */

/* De categorietegels staan hier niet meer: een kale .tiles-regel zonder
   media query overrulede de basis uit shop.css op elke breedte, waardoor
   de derde tegel op desktop alleen op een tweede rij belandde. De
   kolommen komen nu uit shop.css (3, onder 900px 1) en woo.css (2 onder
   640px). */

/* Op telefoon twee producten naast elkaar in plaats van één; dat scheelt
   veel scrollen op een lijst van vijf. shop.css schakelt onder 480px
   terug naar één kolom, dat wordt hier ongedaan gemaakt.

   Bewust `1fr` en niet `minmax(0, 1fr)`: bij die laatste is de
   min-content van de kolommen nul, waardoor de hele grid tot 0px
   ineenklapte en de producten onzichtbaar werden. */
@media (max-width: 640px) {
  .grid,
  .sw-grid,
  .grid--shop {
    /* Expliciete breedte. Met `width: auto` viel deze grid-container op
       smalle schermen terug op 0px, waardoor de productkaarten wel in de
       DOM stonden maar onzichtbaar waren (gemeten: als display:block werd
       hij wel 358px, als display:grid 0px). Met een expliciete breedte
       klopt hij op elke schermmaat. */
    width: 100%;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--s-3);
  }

  .card__body {
    padding: var(--s-3);
  }

  .card__title {
    font-size: var(--fs-base);
  }

  .card__act {
    font-size: var(--fs-sm);
    padding-inline: var(--s-2);
  }
}

/* --------------------------------------------------------------------------
   Footer: ontwikkelaarsvermelding
   -------------------------------------------------------------------------- */

.foot__by {
  color: rgba(255, 255, 255, 0.55);
}

.foot__by a {
  color: rgba(255, 255, 255, 0.8);
  text-decoration: none;
}

.foot__by a:hover {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* --------------------------------------------------------------------------
   Contactgegevens
   -------------------------------------------------------------------------- */

/* De blokken Adres, Telefoon en E-mail stonden zonder tussenruimte onder
   elkaar, waardoor elk kopje tegen de regel erboven plakte. */
.contact-details {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  margin: 0 0 var(--s-5);
  padding: 0;
  list-style: none;
}

.contact-details li {
  margin: 0;
}

.contact-details h4,
.contact-details h3 {
  margin: 0 0 0.25rem;
  font-size: var(--fs-base);
}

/* De kopjes in de puntenlijsten en op de contactpagina zijn h3 (de
   pagina's sprongen van h2 naar h4), maar in de maat van een klein kopje. */
.usp-list__item h3 {
  margin-bottom: 0.25rem;
  font-size: var(--fs-base);
}

/* Bij het contactformulier: waarom de knop nog uit staat. */
.wpcf7-form .form-hint {
  font-size: var(--fs-sm);
  color: var(--ink-2);
}

.contact-details p {
  margin: 0;
}

/* De sectiekop plakte tegen het eerste kopje eronder. */
.contact-info > h2,
.contact-info > h3 {
  margin-bottom: var(--s-4);
}

/* De kaart is een schermafbeelding met de knop "Open in Google Maps" erin
   getekend; als losse afbeelding deed die knop niets en werd hij op een
   telefoon half afgesneden. Nu is de hele kaart de link. */
.contact-map__link {
  display: block;
  border-radius: var(--r-lg);
  overflow: hidden;
}

.contact-map__link:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
}

.section .contact-map {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: auto;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
}

/* --------------------------------------------------------------------------
   404
   -------------------------------------------------------------------------- */

form.search--404 {
  display: flex;
  max-width: 460px;
  margin-block: var(--s-4) var(--s-5);
}

.err__acts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  margin-top: var(--s-5);
}

/* --------------------------------------------------------------------------
   Opsomming zonder toelichting
   -------------------------------------------------------------------------- */

/* Op Over ons staan zes doelgroepen (Winkeliers, Hoveniers, ...) als volle
   kaarten met een pijl ervoor, terwijl er geen tekst bij staat en er niets
   te klikken valt. De zin erboven noemt diezelfde zes al. Zonder toelichting
   is een kaart te zwaar en belooft de pijl een link die er niet is: een
   compact label past beter. Items die wel een alinea hebben blijven kaart. */
.usp-list__item:not(:has(p)) {
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-2) var(--s-3);
  border-radius: 999px;
  box-shadow: none;
}

.usp-list__item:not(:has(p)) .usp-list__icon {
  display: none;
}

.usp-list__item:not(:has(p)) h4,
.usp-list__item:not(:has(p)) h3 {
  margin: 0;
}

/* Los van elkaar in plaats van in een strak raster van gelijke kolommen.
   :has() mag niet in :has() genest worden, dus hier de omgekeerde vraag:
   een rij waarvan geen enkel item een alinea heeft. */
.grid--3:not(:has(.usp-list__item p)) {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
}

.grid--3:not(:has(.usp-list__item p)) > .usp-list__item {
  flex: 0 0 auto;
  height: auto;
}

/* ==========================================================================
   Over ons
   ========================================================================== */

/* Opening: kop en inleiding naast de staande foto. De feiten (sinds
   wanneer, waar) staan als lijst onder de tekst, niet als losse grote
   cijfers. */
.about-open {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: var(--s-7);
  align-items: center;
  padding-block: var(--s-5) var(--s-7);
}

.about-open__text h1 {
  margin: 0;
  font-family: var(--font-cond);
  font-size: var(--fs-3xl);
  font-weight: 700;
  line-height: 0.98;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  text-wrap: balance;
}

.about-open__lead {
  max-width: 36ch;
  margin: var(--s-5) 0 0;
  font-size: var(--fs-lg);
  line-height: 1.5;
  color: var(--ink);
  text-wrap: pretty;
}

.about-facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-4) var(--s-5);
  max-width: 36rem;
  margin: var(--s-6) 0 0;
  padding-top: var(--s-4);
  border-top: 2px solid var(--brand-900);
}

.about-facts div {
  min-width: 0;
}

.about-facts dt {
  font-size: var(--fs-sm);
  color: var(--ink-3);
}

.about-facts dd {
  margin: 0.15rem 0 0;
  font-family: var(--font-cond);
  font-size: 1.35rem;
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--ink);
}

.about-open__media img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--r-lg);
  box-shadow: var(--sh-2);
}

/* Het verhaal als drie momenten onder elkaar. De jaartallen zijn de
   inhoud, dus die dragen de kop. */
.about-story {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  gap: var(--s-6) var(--s-8);
  align-items: start;
}

.about-story > h2,
.about-who > h2,
.about-work__text h2 {
  margin: 0;
  padding-bottom: var(--s-3);
  border-bottom: 2px solid var(--brand-900);
}

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

.about-timeline li {
  display: grid;
  grid-template-columns: 5.5rem minmax(0, 1fr);
  gap: var(--s-5);
  padding-block: var(--s-5);
  border-top: 1px solid var(--line-strong);
}

.about-timeline li:first-child {
  padding-top: 0;
  border-top: 0;
}

.about-timeline li:last-child {
  padding-bottom: 0;
}

.about-timeline time {
  font-family: var(--font-cond);
  font-size: var(--fs-2xl);
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.01em;
  color: var(--accent);
}

.about-timeline h3 {
  margin: 0.25rem 0 0.35rem;
  font-family: var(--font-cond);
  font-size: var(--fs-lg);
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.about-timeline p {
  max-width: 58ch;
  margin: 0;
  color: var(--ink-2);
  text-wrap: pretty;
}

/* Werkwijze: staande foto naast de tekst, met de drie beloften als lijst
   met vinkjes, zoals in het bestelblok. */
.about-work {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: var(--s-7);
  align-items: center;
}

.about-work__media img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
}

.about-work__text h2 {
  margin-bottom: var(--s-5);
}

.about-work__text > p {
  max-width: 58ch;
  margin: 0;
  font-size: var(--fs-md);
  color: var(--ink-2);
  text-wrap: pretty;
}

.about-checks {
  display: grid;
  gap: var(--s-3);
  margin: var(--s-5) 0 0;
  padding: 0;
  list-style: none;
}

.about-checks li {
  display: flex;
  gap: var(--s-3);
  align-items: flex-start;
  max-width: 58ch;
  line-height: 1.5;
}

.about-checks svg {
  flex: none;
  width: 1.4rem;
  height: 1.4rem;
  margin-top: 0.1rem;
  color: var(--ok);
}

/* De levenscyclus van de worm: vier stappen achter elkaar op één lijn.
   De volgorde is hier de inhoud, dus elke stap hangt via de streep aan
   de vorige. */
.about-worm__lead {
  max-width: 62ch;
  margin: 0 0 var(--s-7);
  font-size: var(--fs-md);
  color: var(--ink-2);
  text-wrap: pretty;
}

.about-cycle {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--s-5);
  margin: 0;
  padding: 0;
  list-style: none;
}

.about-cycle li {
  position: relative;
  padding-top: var(--s-4);
}

.about-cycle li::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  right: calc(-1 * var(--s-5));
  height: 3px;
  background-color: var(--line-strong);
}

.about-cycle li:last-child::before {
  right: 0;
}

.about-cycle li::after {
  content: "";
  position: absolute;
  top: -6px;
  left: 0;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background-color: var(--accent);
  box-shadow: 0 0 0 3px var(--page);
}

.about-cycle h3 {
  margin: 0 0 var(--s-2);
  font-family: var(--font-cond);
  font-size: var(--fs-lg);
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.about-cycle p {
  margin: 0;
  color: var(--ink-2);
  text-wrap: pretty;
}

.about-fish {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2);
  margin: var(--s-7) 0 0;
  padding: 0;
  list-style: none;
}

.about-fish li:first-child {
  margin-right: var(--s-2);
  font-family: var(--font-cond);
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.about-fish li:not(:first-child) {
  padding: 0.35rem 0.8rem;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background-color: var(--surface);
  font-size: var(--fs-sm);
  color: var(--ink);
}

/* Voor wie: zes groepen op een rij, met de link naar de pagina die het
   per groep uitlegt. */
.about-who {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  gap: var(--s-5) var(--s-8);
  align-items: start;
}

.about-who__text > p {
  max-width: 58ch;
  margin: 0;
  font-size: var(--fs-md);
  color: var(--ink-2);
  text-wrap: pretty;
}

.about-who__list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-3);
  margin: var(--s-5) 0 0;
  padding: 0;
  list-style: none;
}

.about-who__list li {
  padding: var(--s-3) var(--s-4);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background-color: var(--surface);
  font-family: var(--font-cond);
  font-size: 1.1rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

/* Zelfde valkuil als .who-spread__act: ".about-who__text > p" zette de
   marge op 0. */
.about-who__text > .about-who__more {
  margin: var(--s-5) 0 0;
}

.about-who__more a {
  font-family: var(--font-cond);
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--accent);
  text-decoration: none;
}

.about-who__more a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Donkere band: de drie verzendregels naast elkaar. */
.about-alive__lead {
  max-width: 62ch;
  margin: 0 0 var(--s-6);
  font-size: var(--fs-md);
  text-wrap: pretty;
}

.about-alive__rules {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-5);
  margin: 0;
}

.about-alive__rules div {
  padding-top: var(--s-4);
  border-top: 2px solid var(--accent-bright);
}

.about-alive__rules dt {
  font-family: var(--font-cond);
  font-size: var(--fs-lg);
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #fff;
}

.about-alive__rules dd {
  margin: var(--s-2) 0 0;
  color: rgba(255, 255, 255, 0.82);
  text-wrap: pretty;
}

.about-alive__acts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  margin-top: var(--s-6);
}

/* Vier liggende foto's op een rij, van de kwekerij naar het water. */
.about-mosaic {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--s-4);
}

.about-mosaic img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
}

@media (max-width: 900px) {
  .about-open,
  .about-story,
  .about-work,
  .about-who {
    grid-template-columns: minmax(0, 1fr);
  }

  .about-open {
    gap: var(--s-5);
    padding-block: var(--s-4) var(--s-6);
  }

  .about-open__media img {
    aspect-ratio: 16 / 10;
  }

  .about-work__media {
    order: 2;
  }

  .about-work__media img {
    aspect-ratio: 16 / 10;
  }

  .about-cycle {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--s-6) var(--s-5);
  }

  .about-cycle li:nth-child(2)::before {
    right: 0;
  }

  .about-alive__rules,
  .about-mosaic {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .about-facts {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--s-3);
  }

  .about-timeline li {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--s-2);
  }

  .about-cycle,
  .about-alive__rules {
    grid-template-columns: minmax(0, 1fr);
  }

  .about-cycle li::before {
    right: 0;
  }

  .about-who__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ==========================================================================
   Wat en voor wie
   ========================================================================== */

/* Opening: kop, inleiding en drie sprongen naar de groep die de bezoeker
   zoekt. De pagina beantwoordt één vraag per groep, dus die sprong is de
   snelste weg. */
.who-open {
  padding-block: var(--s-5) var(--s-6);
}

.who-open h1 {
  margin: 0;
  font-family: var(--font-cond);
  font-size: var(--fs-3xl);
  font-weight: 700;
  line-height: 0.98;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  text-wrap: balance;
}

.who-open__lead {
  max-width: 52ch;
  margin: var(--s-5) 0 0;
  font-size: var(--fs-lg);
  line-height: 1.5;
  color: var(--ink);
  text-wrap: pretty;
}

.who-jump {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  margin: var(--s-6) 0 0;
  padding: 0;
  list-style: none;
}

.who-jump a {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  min-height: 46px;
  padding: 0.55rem 1rem 0.55rem 1.1rem;
  border: 2px solid var(--line-strong);
  border-radius: var(--r);
  background-color: var(--surface);
  font-family: var(--font-cond);
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink);
  transition: border-color 0.18s var(--ease), color 0.18s var(--ease);
}

.who-jump a:hover {
  border-color: var(--brand-900);
}

.who-jump svg {
  width: 1.1rem;
  height: 1.1rem;
  color: var(--accent);
}

/* Eén groep per blok: tekst en foto naast elkaar, om en om van kant. Elk
   blok eindigt op de knop naar wat die groep bij ons koopt. */
.who-spread {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--s-7);
  align-items: center;
  scroll-margin-top: var(--s-6);
}

.who-spread--flip .who-spread__media {
  order: -1;
}

.who-spread__text h2 {
  margin: 0 0 var(--s-5);
  padding-bottom: var(--s-3);
  border-bottom: 2px solid var(--brand-900);
}

.who-spread__text p {
  max-width: 58ch;
  margin: 0;
  font-size: var(--fs-md);
  color: var(--ink-2);
  text-wrap: pretty;
}

.who-spread__text p + p {
  margin-top: var(--s-4);
}

.who-spread__text .about-fish,
.who-spread__text .about-checks {
  margin-top: var(--s-5);
}

/* De knop staat in een <p>; met alleen .who-spread__act won
   ".who-spread__text p { margin: 0 }" en plakte de knop tegen de lijst
   erboven. Flex met gap houdt twee knoppen ook op mobiel uit elkaar. */
.who-spread__text .who-spread__act {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  margin-top: var(--s-6);
}

.who-spread__media img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  box-shadow: var(--sh-2);
}

/* De formaten van de wormenhumus als kleine tabel in het blok. */
.who-sizes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-4);
  max-width: 34rem;
  margin: var(--s-5) 0 0;
}

.who-sizes div {
  padding-top: var(--s-3);
  border-top: 2px solid var(--brand-900);
}

.who-sizes dt {
  font-family: var(--font-cond);
  font-size: var(--fs-lg);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.who-sizes dd {
  margin: var(--s-1) 0 0;
  font-size: var(--fs-sm);
  color: var(--ink-3);
}

/* Donkere afsluiting: hoe wij kweken in één alinea, met de weg naar de
   winkel en naar het volledige verhaal. */
.who-close {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  gap: var(--s-5) var(--s-8);
  align-items: start;
}

.who-close > h2 {
  margin: 0;
  padding-bottom: var(--s-3);
  border-bottom: 2px solid rgba(255, 255, 255, 0.28);
}

.who-close__text p {
  max-width: 62ch;
  margin: 0;
  font-size: var(--fs-md);
  text-wrap: pretty;
}

.who-close__acts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  margin-top: var(--s-6);
}

@media (max-width: 900px) {
  .who-spread,
  .who-close {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--s-5);
  }

  .who-spread__media,
  .who-spread--flip .who-spread__media {
    order: -1;
  }

  .who-spread__media img {
    aspect-ratio: 16 / 10;
  }
}

@media (max-width: 560px) {
  .who-jump {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
  }

  .who-jump a {
    justify-content: space-between;
  }

  .who-sizes {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* --------------------------------------------------------------------------
   Herroepingsrecht op de servicepagina
   -------------------------------------------------------------------------- */

.retour-wet {
  max-width: 75ch;
  margin-top: var(--s-6);
}

.retour-wet > h3 {
  margin: 0 0 var(--s-3);
  font-family: var(--font-cond);
  font-size: var(--fs-xl);
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.retour-wet p {
  margin: 0 0 var(--s-4);
  color: var(--ink-2);
}

/* De knop "Neem contact op" onder het modelformulier. */
.retour-wet + p {
  margin-top: var(--s-5);
}

.modelformulier {
  margin-top: var(--s-5);
  padding: var(--s-5);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-lg);
  background-color: var(--surface);
}

.modelformulier h3 {
  margin: 0 0 var(--s-2);
  font-family: var(--font-cond);
  font-size: var(--fs-lg);
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.modelformulier ul {
  margin: 0 0 var(--s-4);
  padding-left: 1.2rem;
  list-style: disc;
  color: var(--ink-2);
}

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