/* ============================================================
   SNIJERS TUINEN — st-styles.css
   v6.8 — 2026-08-14
   Global Classes. Child theme: "Snijers Tuinen "
   Geladen via functions.php, ná st-root.css.

   Alle tokens (kleur, tekst, border, ruimte, motion) staan in
   st-root.css. Dit bestand definieert uitsluitend classes en
   bevat geen enkele literale kleur- of maatwaarde.

   CHANGELOG
   v6.7 -> v6.8
   - .st-page-head had bovenop de bandpadding nog eigen bovenruimte;
     samen 144–180px boven de eerste regel
   v6.6 -> v6.7
   - .st-tile-meta voor het projectoverzicht
   v6.5 -> v6.6
   - sectie 18 voor het dienstenoverzicht en de projectpagina
   v6.4 -> v6.5
   - teamfoto's van kolombreed naar 112–144px portret
   - achtergrondvlak onder afbeeldingen verwijderd
   v6.3 -> v6.4
   - footerkolommen weer open op desktop via ::details-content
   - sectie 17 team toegevoegd
   v6.2 -> v6.3
   - footerkolommen dicht op elk formaat en overal open te klikken;
     de ::details-content-forcering op desktop is vervallen
   v6.1 -> v6.2
   - footerkolommen weer inklapbaar, met ingeklapt als uitgangs-
     toestand; opengezet op desktop via ::details-content, zonder
     JavaScript
   v6.0 -> v6.1
   - footerkolommen zonder accordion en zonder JavaScript; twee
     kolommen op mobiel in plaats van inklapbaar
   v5.3 -> v6.0
   - footer herbouwd: vier GB Pro-accordions vervangen door gewone
     kolommen. Daarmee vervalt de uitzondering op canon-regel 4; er
     staat geen !important meer in dit bestand behalve in het
     reduced-motion blok
   - footer staat op dark-spruce en valt onder de token-scope
   v5.2 -> v5.3
   - submenu weer dicht in rust, open na een tik op de chevron
   - menu-CSS werkt op GB's eigen classes; globalClasses op
     classic-menu-item en classic-sub-menu renderen niet, die
     blocks geven geen eigen element uit
   - chevron staat naast de link in plaats van eronder, met een
     raakvlak van 44px
   v5.1 -> v5.2
   - submenu in het overlaymenu staat vast open; de GB Pro-toggle
     reageerde op hover en maakte de bovenliggende link onklikbaar
   - opsommingstekens in het submenu weg
   - projectkaart is in zijn geheel klikbaar, niet alleen de titel
   v5.0 -> v5.1
   - één navigatie in plaats van twee toggles naast elkaar
   - overlaymenu volledig gestyled, inclusief menu-items, submenu
     en conversieknoppen onderin
   - dienstenlijst op mobiel naar twee kolommen; negen items in één
     kolom maakte de sectie bijna twee schermen hoog
   v4.1 -> v5.0
   - omkerende knoppen verwijzen naar het rauwe palet; via
     contexttokens werd de tekst wit op een lichte vulling (2.12:1)
   - projectafbeelding: height:100% weg, groeide over het
     bijschrift heen
   - getinte banden toegevoegd; tomato vervallen
   v4.0 -> v4.1
   - kaarten en inputs naar border-ui (4.01:1); silver haalde 2.00
   - stapstreep naar spruce; jungle haalde op alabaster 2.60:1
   v3.8 -> v4.0
   - donkere band naar dark-spruce; willow haalt daar 4.91:1 en
     werkt weer als eyebrow (op iron-grey was het 4.45:1)
   - offerte-band naar tomato-jam (wit 5.52:1)
   - proces-band naar alabaster; stapnummer naar spruce, want
     peach-ink haalt daar 3.95:1
   - gedempte tekst naar de afgeleide ink-quiet (6.37:1)
   v3.7 -> v3.8
   - dienstenlijst: volgnummer via counter i.p.v. publicatiedatum
   - titellink in de dienstenlijst niet meer onderstreept in rust
   v3.6 -> v3.7
   - sectie 0 basisreset toegevoegd (ontbrak)
   - sectie 16 token-scope op donkere vlakken, patroon uit de
     iWorkers-sheet §24; accent wisselt daar naar willow-2
   v3.5 -> v3.6
   - sectie 14 vaste onderbalk voor mobiel
   - mobiele hero-typografie volgens het patroon uit de
     iWorkers-sheet: eigen clamp onder 48em
   v3.4 -> v3.5
   - hero vervangen door de statement-variant: beeldvullend met de
     tekst onderin en een horizontale dienstenrail over de onderrand
   v3.3 -> v3.4
   - sectie 13 homepage-secties toegevoegd
   v3.2 -> v3.3
   - knoppen: radius van pill naar de ontwerpwaarde, padding strakker,
     gewicht naar 700
   - koppen krijgen expliciet de kopfont en gewicht 700
   v3.1 -> v3.2
   - hero herbouwd naar het ontwerp: 5/7-raster met dienstentegels
     in plaats van gecentreerde tekst over een fotoachtergrond
   v3.0 -> v3.1
   - .st-container-wide verwijderd; sitebreedte is 1600px en dat
     is de container zelf
   v2.8 -> v3.0
   - palet naar burnt-peach / powder-blush
   - gevulde knoppen en vlakken gebruiken de afgeleide inkten;
     rauwe merkkleuren dragen geen tekst meer
   - .st-surface-deep vervangen door .st-surface-dark-fill,
     .st-surface-blush toegevoegd
   v2.7 -> v2.8
   - sectie 12 site header toegevoegd
   v2.6 -> v2.7
   - sectie 10 hero toegevoegd
   - sectie 11 icoonschaal toegevoegd
   v2.5 -> v2.6
   - knoppen herzien: het palet heeft nog één donker anker, dus de
     hiërarchie draait op gevuld / omlijnd / tekst
   - .st-surface-warm vervallen (walnut weg), .st-surface-deep en
     .st-surface-leaf toegevoegd
   v2.4 -> v2.5
   - :root secties verplaatst naar st-root.css
   - GP Global Colors vervangen door de aliaslaag in st-root.css
   v2.3 -> v2.4
   - text-align:justify verwijderd van body/p/headings
   - transition:all vervangen door expliciete properties
   - !important verwijderd van .st-radius-* utilities
   - .hexagon-button verwijderd (dood, kleur uit ander project)
   - .footer-socket > .gb-inside-container verwijderd (GB v1-markup)
   - dubbele footer-contact media queries samengevoegd
   - CSS anchor positioning vervangen door transform
   - .balance selector gefixt
   - footer force-open: gedocumenteerde uitzondering, zie sectie 7
   ============================================================ */

/* ============================================================
   0. BASISRESET
   Overgenomen uit de iWorkers-sheet §5. Ontbrak hier.
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

img, picture, svg, video {
  display: block;
  max-width: 100%;
  height: auto;
}

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--st-ff-body);
  font-size: var(--st-fs-400);
  line-height: var(--st-lh-base);
  color: var(--st-clr-ink);
  background-color: var(--st-clr-surface);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ============================================================
   1. BASIS-CORRECTIES
   Herstelt schade uit de oude Customizer-CSS (post 30).
   text-align:justify stond op body/p/alle headings en cascadeerde
   naar menu's, knoppen en formulierlabels.
   ============================================================ */

body {
  text-align: start;
  hyphens: manual;
  letter-spacing: var(--st-ls-base);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--st-ff-heading);
  font-weight: var(--st-fw-bold);
  text-align: start;
  hyphens: manual;
  text-wrap: balance;
  line-height: var(--st-lh-snug);
  letter-spacing: var(--st-ls-tight);
  color: var(--st-clr-ink-strong);
}

p {
  text-align: start;
  hyphens: manual;
}

/* Leesbreedte alleen op lopende tekst, niet op hero/footer/cards */
.entry-content > p,
.st-prose > p,
.st-prose > ul,
.st-prose > ol {
  max-width: var(--st-measure);
}

/* De oude regel `balance {}` miste de punt en deed dus niets.
   Beide varianten hier, want de markup gebruikt className "balance". */
.balance,
.st-balance {
  text-wrap: balance;
}

.st-pretty {
  text-wrap: pretty;
}

/* ============================================================
   2. LINKS
   Evergreen tegen iron-grey body-tekst is 1.3:1 — ver onder de
   3:1 die WCAG 1.4.1 eist als kleur het enige onderscheid is.
   Onderstreping is daarom niet optioneel binnen lopende tekst.
   Zet GP Customizer -> General -> Underline links op "always"
   of laat deze regel het werk doen.
   ============================================================ */

.entry-content a:not([class]),
.st-prose a:not([class]) {
  color: var(--st-clr-link);
  text-decoration: underline;
  text-decoration-thickness: from-font;
  text-underline-offset: 0.15em;
  transition: color var(--st-transition-fast),
              text-decoration-color var(--st-transition-fast);
}

.entry-content a:not([class]):hover,
.st-prose a:not([class]):hover {
  color: var(--st-clr-link-hover);
  text-decoration-thickness: 2px;
}

/* ============================================================
   3. LAYOUT — global classes
   ============================================================ */

.st-container,
.st-container-narrow {
  margin-inline: auto;
  padding-inline: var(--st-gutter);
  width: 100%;
}
.st-container        { max-width: var(--st-container); }
.st-container-narrow { max-width: var(--st-container-narrow); }

.st-section     { padding-block: var(--st-space-3xl); }
.st-section-sm  { padding-block: var(--st-space-xl); }

.st-flow > * + * {
  margin-block-start: var(--st-flow-space, var(--st-space-m));
}

.st-stack-s,
.st-stack-m,
.st-stack-l {
  display: flex;
  flex-direction: column;
}
.st-stack-s { gap: var(--st-space-s); }
.st-stack-m { gap: var(--st-space-m); }
.st-stack-l { gap: var(--st-space-l); }

.st-cluster {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--st-space-s);
}

.st-grid-auto {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
  gap: var(--st-space-m);
}

.st-grid-2,
.st-grid-3,
.st-grid-4 {
  display: grid;
  gap: var(--st-space-m);
}
.st-grid-2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); }
.st-grid-3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); }
.st-grid-4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); }

/* ============================================================
   4. TYPOGRAFIE — global classes
   ============================================================ */

.st-eyebrow {
  display: inline-block;
  font-family: var(--st-ff-body);
  font-size: var(--st-fs-300);
  font-weight: 600;
  letter-spacing: var(--st-ls-wide);
  text-transform: uppercase;
  color: var(--st-clr-ink);
}

.st-lead {
  font-size: var(--st-fs-500);
  line-height: var(--st-lh-base);
  max-width: var(--st-measure-narrow);
}

.st-display {
  font-family: var(--st-ff-heading);
  font-size: var(--st-fs-900);
  line-height: var(--st-lh-tight);
  letter-spacing: var(--st-ls-tight);
  text-wrap: balance;
}

.st-text-muted   { color: var(--st-clr-ink-muted); }
.st-text-strong  { color: var(--st-clr-ink-strong); }
.st-text-invert  { color: var(--st-clr-ink-invert); }
.st-text-center  { text-align: center; }

/* ============================================================
   5. KNOPPEN
   Wit op --st-jungle is 3.6:1 en zakt door AA. Gevulde knoppen
   gebruiken daarom uitsluitend de afgeleide inkten uit st-root.css.
   ============================================================ */

.st-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--st-space-2xs);
  padding-block: var(--st-space-2xs);
  padding-inline: var(--st-space-s);
  border: var(--st-border-width) solid transparent;
  border-radius: var(--st-radius-sm);
  font-family: var(--st-ff-body);
  font-size: var(--st-fs-400);
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--st-transition-fast),
              border-color var(--st-transition-fast),
              color var(--st-transition-fast),
              transform var(--st-transition-fast);
}

.st-button:active { transform: translateY(1px); }

/* Hoofdactie: "Maak een afspraak". Gevuld met de peach-inkt,
   niet met rauwe burnt-peach — die haalt 3.30:1 met wit. */
.st-button-cta {
  background-color: var(--st-clr-surface-cta);
  color: var(--st-clr-ink-invert);          /* 5.45:1 */
}
.st-button-cta:is(:hover, :focus-visible) {
  background-color: var(--st-clr-surface-dark);
  color: var(--st-clr-ink-invert);          /* 10.42:1 */
}

/* Neutrale gevulde actie. */
.st-button-primary {
  background-color: var(--st-clr-surface-dark);
  color: var(--st-clr-ink-invert);          /* 9.46:1 */
}
.st-button-primary:is(:hover, :focus-visible) {
  background-color: var(--st-clr-surface-dark);
  color: var(--st-clr-ink-invert);
}

.st-button-secondary {
  background-color: transparent;
  color: var(--st-clr-ink-accent);
  border-color: var(--st-clr-ink-accent);
}
.st-button-secondary:is(:hover, :focus-visible) {
  background-color: var(--st-clr-surface-dark);
  color: var(--st-clr-ink-invert);
  border-color: var(--st-clr-surface-dark);
}

.st-button-ghost {
  background-color: transparent;
  color: var(--st-clr-ink);
}
.st-button-ghost:is(:hover, :focus-visible) {
  background-color: var(--st-clr-surface-sunk);
  color: var(--st-clr-ink-strong);
}

/* ============================================================
   6. VLAKKEN, RANDEN, KAARTEN
   ============================================================ */

.st-border        { border: var(--st-border-width) solid var(--st-clr-border); }
.st-border-strong { border: var(--st-border-width) solid var(--st-clr-border-strong); }

.st-radius-none { border-radius: 0; }
.st-radius-sm   { border-radius: var(--st-radius-sm); }
.st-radius-md   { border-radius: var(--st-radius-md); }
.st-radius-lg   { border-radius: var(--st-radius-lg); }
.st-radius-pill { border-radius: var(--st-radius-pill); }

.st-surface      { background-color: var(--st-clr-surface); }
.st-surface-sunk { background-color: var(--st-clr-surface-sunk); }
.st-surface-dark {
  background-color: var(--st-clr-surface-dark);
  color: var(--st-clr-ink-invert);
}
.st-surface-dark-fill {
  background-color: var(--st-clr-surface-dark);
  color: var(--st-clr-ink-invert);
}
.st-surface-warm {
  background-color: var(--st-clr-surface-warm);
  color: var(--st-clr-ink-invert);
}
.st-surface-soft {
  background-color: var(--st-clr-surface-sunk);
  color: var(--st-clr-ink);
}

.st-card {
  display: flex;
  flex-direction: column;
  padding: var(--st-space-m);
  background-color: var(--st-clr-surface);
  border: var(--st-border-width) solid var(--st-clr-border-ui);
  border-radius: var(--st-radius-md);
  overflow: hidden;
}

.st-card-flush { padding: 0; }

.st-media-cover {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.st-media-4-3 { aspect-ratio: 4 / 3; }

/* Kaart met tekst over de afbeelding.
   v2.3 gebruikte CSS anchor positioning (anchor-scope /
   position-anchor). Dat is nog niet overal ondersteund en levert
   hier niets op: de afbeelding vult de container al. */
.st-grid-item {
  position: relative;
  overflow: hidden;
  border-radius: var(--st-radius-md);
}

.st-grid-item > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.st-grid-item::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    var(--st-clr-scrim-soft) 0%,
    var(--st-clr-scrim) 60%,
    var(--st-clr-scrim-deep) 100%
  );
}

.st-text-on-image {
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  z-index: 2;
  margin: 0;
  padding: var(--st-space-2xs) var(--st-space-s);
  width: max-content;
  max-width: 90%;
  text-align: center;
  color: var(--st-clr-ink-invert);
  font-family: var(--st-ff-heading);
  font-size: var(--st-fs-600);
  font-weight: 600;
  line-height: var(--st-lh-snug);
  text-shadow: 0 2px 12px var(--st-clr-scrim-deep);
}

/* ============================================================
   7. SITE FOOTER

   De vier GB Pro-accordions zijn vervangen door native <details>.
   Daarmee vervalt de uitzondering op canon-regel 4: geen
   !important, geen JavaScript, geen geforceerde open-staat.
   Ingeklapt is de uitgangstoestand op elk schermformaat.
   ============================================================ */

.st-site-footer {
  background-color: var(--st-spruce);
  color: var(--st-white);
  padding-block: var(--st-space-2xl) var(--st-space-l);
}

/* --- Vertrouwensrij --- */

.st-footer-usp {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--st-space-m);
  margin: 0 0 var(--st-space-2xl);
  padding: 0;
  list-style: none;
}

@media (max-width: 63.99em) {
  .st-footer-usp { grid-template-columns: 1fr; gap: var(--st-space-s); }
}

.st-footer-usp-item {
  display: grid;
  gap: var(--st-space-2xs);
  align-content: start;
  padding: var(--st-space-m);
  border: var(--st-border-width) solid var(--st-clr-rule-on-dark);
  border-radius: var(--st-radius-sm);
}

.st-footer-usp-item h3 {
  margin: 0;
  font-size: var(--st-fs-600);
  font-weight: var(--st-fw-semibold);
  color: var(--st-white);
}

.st-footer-usp-item p {
  margin: 0;
  font-size: var(--st-fs-400);
  line-height: var(--st-lh-base);
  color: var(--st-alabaster);          /* 7.56:1 op spruce */
}

/* --- Navigatiekolommen ---
   Native <details> zonder open-attribuut: dicht is de uitgangs-
   toestand. Boven 48em zet CSS ze open via ::details-content — het
   enige aangrijpingspunt dat de browser biedt, want de inhoud van
   een gesloten <details> zit in een interne slot waar een gewone
   display-regel niet bij komt.

   Terugval zonder ::details-content: kolommen blijven op desktop
   dicht en de kop blijft klikbaar. Daarom staat pointer-events
   binnen dezelfde @supports; anders kreeg zo'n browser een kop
   die niets doet.
   --------------------------------------------------------- */

.st-footer-nav {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--st-space-l) var(--st-space-m);
  padding-block-end: var(--st-space-xl);
}

@media (max-width: 63.99em) {
  .st-footer-nav { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 47.99em) {
  .st-footer-nav {
    grid-template-columns: 1fr;
    gap: 0;
  }
}

.st-footer-col {
  border-block-start: var(--st-border-width) solid var(--st-clr-rule-on-dark);
  padding-block: var(--st-space-s);
}

.st-footer-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--st-space-s);
  /* 44px is de kleinste betrouwbare raakvlakhoogte */
  min-height: 44px;
  font-family: var(--st-ff-heading);
  font-size: var(--st-fs-600);
  font-weight: var(--st-fw-bold);
  color: var(--st-white);
  cursor: pointer;
  list-style: none;
}

.st-footer-heading::-webkit-details-marker { display: none; }

.st-footer-heading::after {
  content: "";
  flex-shrink: 0;
  width: 0.5em;
  height: 0.5em;
  border-right: 2px solid var(--st-willow);
  border-bottom: 2px solid var(--st-willow);
  rotate: 45deg;
  translate: 0 -25%;
  transition: rotate var(--st-transition-fast);
}

.st-footer-col[open] > .st-footer-heading::after {
  rotate: -135deg;
  translate: 0 25%;
}

.st-footer-col[open] > .st-footer-heading {
  margin-block-end: var(--st-space-xs);
}

/* WordPress-menu binnen de kolom */
.st-footer-col :is(ul, ol) {
  display: grid;
  gap: var(--st-space-3xs);
  margin: 0;
  padding: 0;
  list-style: none;
}

.st-footer-col li { margin: 0; }

.st-footer-col a {
  display: inline-block;
  padding-block: var(--st-space-3xs);
  font-size: var(--st-fs-500);
  color: var(--st-alabaster);          /* 7.56:1 op spruce */
  text-decoration: none;
  transition: color var(--st-transition-fast);
}

.st-footer-col a:is(:hover, :focus-visible) {
  color: var(--st-willow);             /* 4.91:1 op spruce */
  text-decoration: underline;
  text-underline-offset: 0.25em;
}

@supports selector(::details-content) {
  @media (min-width: 48em) {
    .st-footer-col::details-content {
      content-visibility: visible;
      block-size: auto;
    }

    .st-footer-col { padding-block-end: 0; }

    .st-footer-heading {
      margin-block-end: var(--st-space-xs);
      cursor: default;
      pointer-events: none;
    }

    .st-footer-heading::after { display: none; }
  }
}

/* --- Contact --- */

.st-footer-contact {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--st-space-m);
  margin: 0;
  padding-block: var(--st-space-l);
  list-style: none;
  border-block-start: var(--st-border-width-rule) solid var(--st-willow);
}

@media (max-width: 47.99em) {
  .st-footer-contact { grid-template-columns: 1fr; gap: var(--st-space-s); }
}

.st-footer-contact-item {
  display: flex;
  align-items: flex-start;
  gap: var(--st-space-s);
  font-size: var(--st-fs-500);
  line-height: var(--st-lh-base);
  color: var(--st-white);
}

.st-footer-contact-item .gb-shape {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 2.75rem;
  height: 2.75rem;
  background-color: var(--st-clr-rule-on-dark);
  border-radius: var(--st-radius-pill);
  color: var(--st-willow);
}

.st-footer-contact-item .gb-shape svg {
  width: 1.25rem;
  height: 1.25rem;
  fill: currentColor;
}

.st-footer-contact-item a {
  color: var(--st-white);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.st-footer-contact-item a:is(:hover, :focus-visible) {
  color: var(--st-willow);
}

/* --- Socket --- */

.st-footer-socket {
  padding-block-start: var(--st-space-m);
  border-block-start: var(--st-border-width) solid var(--st-clr-rule-on-dark);
  font-size: var(--st-fs-400);
  color: var(--st-alabaster);
  text-align: center;
}

/* ============================================================
   8. TOEGANKELIJKHEID
   ============================================================ */

.st-skip-link {
  position: absolute;
  top: var(--st-space-s);
  left: var(--st-space-s);
  z-index: var(--st-z-tooltip);
  padding: var(--st-space-xs) var(--st-space-s);
  background-color: var(--st-clr-surface-dark);
  color: var(--st-clr-ink-invert);
  border-radius: var(--st-radius-sm);
  text-decoration: none;
  translate: 0 -200%;
  transition: translate var(--st-transition-fast);
}

.st-skip-link:focus { translate: 0 0; }

.st-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--st-clr-focus);
  outline-offset: 2px;
}

.st-surface-dark :where(a, button, input, select, textarea, [tabindex]):focus-visible,
.st-surface-dark-fill :where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline-color: var(--st-clr-focus-invert);
}

/* Formulierranden moeten 3:1 halen; --st-clr-border doet 2:1 */
input:not([type="submit"]):not([type="button"]),
select,
textarea {
  border: var(--st-border-width) solid var(--st-clr-border-strong);
  border-radius: var(--st-radius-sm);
}

/* ============================================================
   10. HERO — statement
   Beeldvullend met de tekst onderin, en een rail met diensten die
   over de onderrand heen schuift.
   ============================================================ */

.st-hero {
  margin-bottom: var(--st-space-2xl);
}

.st-hero-stage {
  position: relative;
  height: max(64vh, 540px);
  background-color: var(--st-clr-surface-sunk);
}

.st-hero-stage > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* De sluier loopt onderin dieper door dan in het ontwerp: de
   eyebrow in willow-2 haalt 5.49:1 op iron-grey, maar alleen als
   het vlak eronder ook echt zo donker is. */
.st-hero-stage::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    var(--st-clr-scrim-soft) 0%,
    var(--st-clr-scrim) 55%,
    var(--st-clr-scrim-deep) 100%
  );
}

.st-hero-content {
  position: absolute;
  inset: 0;
  z-index: var(--st-z-raised);
  display: grid;
  align-content: end;
  pointer-events: none;
}

.st-hero-inner {
  width: 100%;
  max-width: var(--st-container);
  margin-inline: auto;
  padding-inline: var(--st-gutter);
  padding-block-end: var(--st-space-2xl);
}

.st-hero-title {
  margin: 0 0 var(--st-space-s);
  max-width: 17ch;
  font-family: var(--st-ff-heading);
  font-size: var(--st-fs-900);
  font-weight: var(--st-fw-bold);
  line-height: 1.02;
  letter-spacing: -0.03em;
  color: var(--st-clr-ink-invert);
  text-wrap: balance;
}

.st-hero-lead {
  margin: 0 0 var(--st-space-m);
  max-width: 52ch;
  font-size: var(--st-fs-600);
  line-height: var(--st-lh-base);
  color: var(--st-clr-ink-invert);
}

.st-hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--st-space-s);
  pointer-events: auto;
}

/* Omlijnde knop op beeld. De rand is de drager, niet de vulling. */
.st-button-outline-invert {
  background-color: transparent;
  color: var(--st-clr-ink-invert);
  border-color: var(--st-clr-rule-on-dark);
}

.st-button-outline-invert:is(:hover, :focus-visible) {
  background-color: var(--st-clr-surface);
  color: var(--st-clr-ink-strong);
  border-color: var(--st-clr-surface);
}

/* --- Dienstenrail ---
   Schuift horizontaal en overlapt de onderrand van het beeld. */

.st-hero-rail-wrap {
  position: relative;
  max-width: var(--st-container);
  margin-inline: auto;
  margin-block-start: calc(var(--st-space-l) * -1);
  padding-inline: var(--st-gutter);
}

.st-service-rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(148px, 1fr);
  gap: var(--st-space-2xs);
  margin: 0;
  padding: 0 0 var(--st-space-3xs);
  list-style: none;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  overscroll-behavior-x: contain;
}

.st-service-card {
  display: grid;
  grid-template-rows: 96px auto;
  overflow: hidden;
  background-color: var(--st-clr-surface);
  border: var(--st-border-width) solid var(--st-clr-border-ui);
  border-radius: var(--st-radius-sm);
  box-shadow: var(--st-shadow-sm);
  color: var(--st-clr-ink);
  text-decoration: none;
  scroll-snap-align: start;
  transition: border-color var(--st-transition-fast),
              color var(--st-transition-fast);
}

.st-service-card:is(:hover, :focus-visible) {
  border-color: var(--st-clr-ink-accent);
  color: var(--st-clr-ink-accent);
}

.st-service-card img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.st-service-card-label {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--st-space-2xs);
  padding: var(--st-space-2xs) var(--st-space-xs);
}

.st-service-card-title {
  font-size: var(--st-fs-400);
  font-weight: var(--st-fw-semibold);
}

/* Volgnummer uit een CSS-counter; een GB-looper heeft geen index. */
.st-service-card-num {
  font-family: var(--st-ff-mono);
  font-size: var(--st-fs-300);
  color: var(--st-clr-ink-leaf);
}

.st-service-rail { counter-reset: st-service; }
.st-service-rail > li { counter-increment: st-service; }
.st-service-card-num::before {
  content: counter(st-service, decimal-leading-zero);
}

@media (max-width: 47.99em) {
  .st-hero-stage {
    height: max(72vh, 480px);
  }

  /* Op mobiel wint de volle breedte het van de regellengte:
     17ch laat de kop anders in vier smalle regels vallen. */
  .st-hero-title {
    max-width: none;
    font-size: clamp(2.3rem, 9.75vw, 3.5rem);
    line-height: 1;
    letter-spacing: -0.025em;
  }

  .st-hero-actions .st-button {
    flex: 1 1 100%;
  }
}

/* ============================================================
   11. ICONEN
   Iconen schalen met font-size, niet met vaste px. Kleur via
   currentColor, zodat een SVG nooit een eigen fill hardcodeert.
   ============================================================ */

.st-icon {
  display: inline-flex;
  flex-shrink: 0;
  line-height: 1;
}

.st-icon svg {
  width: 1em;
  height: 1em;
  fill: currentColor;
}

.st-icon-sm { font-size: 1.25rem; }
.st-icon-md { font-size: 2rem; }
.st-icon-lg { font-size: 4rem; }

.st-icon-accent { color: var(--st-clr-accent-soft); }
.st-icon-leaf   { color: var(--st-clr-accent); }
.st-icon-brand  { color: var(--st-clr-ink-accent); }

/* ============================================================
   12. SITE HEADER
   Twee rijen: een balk met kernclaims en een hoofdbalk met merk
   plus navigatie. De oude derde rij (losse desktopnavigatie) is
   vervallen; het diensten-menu zit nu in de hoofdbalk.
   ============================================================ */

.st-header {
  background-color: var(--st-clr-surface);
  border-bottom: var(--st-border-width) solid var(--st-clr-border);
}

.st-header.gb-is-sticky {
  box-shadow: var(--st-shadow-sm);
}

/* --- Claimbalk --- */

.st-header-bar {
  border-bottom: var(--st-border-width) solid var(--st-clr-border);
}

.st-header-usp {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--st-space-2xs) var(--st-space-xl);
  margin: 0;
  padding-block: var(--st-space-2xs);
  list-style: none;
  font-size: var(--st-fs-300);
  font-weight: var(--st-fw-semibold);
  color: var(--st-clr-ink);
}

.st-header-usp-item {
  display: inline-flex;
  align-items: center;
  gap: var(--st-space-2xs);
}

/* Op smalle schermen blijft alleen de laatste claim staan; drie
   naast elkaar duwen de balk anders over drie regels. */
@media (max-width: 47.99em) {
  .st-header-usp-item:not(:last-child) {
    display: none;
  }
}

/* --- Hoofdbalk --- */

.st-header-main {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--st-space-m);
  padding-block: var(--st-space-xs);
}

.st-brand {
  display: flex;
  align-items: center;
  gap: var(--st-space-xs);
  min-width: 0;
}

.st-brand-tagline {
  font-size: var(--st-fs-300);
  letter-spacing: var(--st-ls-wide);
  text-transform: uppercase;
  color: var(--st-clr-ink-muted);
  white-space: nowrap;
}

@media (max-width: 63.99em) {
  .st-brand-tagline {
    display: none;
  }
}

.st-header-nav {
  display: flex;
  align-items: center;
  gap: var(--st-space-3xs);
  font-size: var(--st-fs-400);
  font-weight: var(--st-fw-semibold);
}

.st-nav-link {
  padding-block: var(--st-space-2xs);
  padding-inline: var(--st-space-s);
  color: var(--st-clr-ink);
  text-decoration: none;
  border-radius: var(--st-radius-sm);
  transition: color var(--st-transition-fast),
              background-color var(--st-transition-fast);
}

.st-nav-link:is(:hover, :focus-visible) {
  color: var(--st-clr-ink-accent);
  background-color: var(--st-clr-surface-sunk);
}

.st-nav-link[aria-current="page"] {
  color: var(--st-clr-ink-accent);
  text-decoration: underline;
  text-underline-offset: 0.3em;
}

/* De tekstlinks wijken op tablet en kleiner; daar neemt het
   hamburgermenu het over. */
@media (max-width: 63.99em) {
  .st-nav-link {
    display: none;
  }
}

/* --- Menuknoppen --- */

.st-menu-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--st-space-2xs);
  padding-block: var(--st-space-2xs);
  padding-inline: var(--st-space-xs);
  background-color: var(--st-clr-surface-dark);
  color: var(--st-clr-ink-invert);
  border: 0;
  border-radius: var(--st-radius-sm);
  font-family: inherit;
  font-size: var(--st-fs-300);
  font-weight: var(--st-fw-bold);
  letter-spacing: var(--st-ls-button);
  cursor: pointer;
  transition: background-color var(--st-transition-fast);
}

.st-menu-toggle:is(:hover, :focus-visible) {
  background-color: var(--st-clr-surface-dark);
}

.st-menu-toggle svg {
  width: 1.5em;
  height: 1.5em;
  fill: currentColor;
}

.st-menu-panel {
  width: 350px;
  max-width: 350px;
}

.st-menu-panel.gb-menu-container--mobile {
  position: fixed;
  padding-bottom: var(--st-space-2xl);
  background-color: var(--st-clr-surface-dark);
  color: var(--st-clr-ink-invert);
}

.st-menu-panel.gb-menu-container--mobile .gb-menu {
  flex-direction: column;
}

/* --- Overlaymenu ---
   Eén navigatie. De toggle staat alleen onder 64em.

   BELANGRIJK: generateblocks-pro/classic-menu-item en
   classic-sub-menu geven geen eigen element uit — ze zijn
   stijl-proxies voor de WordPress-menu-output. globalClasses
   daarop verschijnt niet in de DOM. Alles hieronder werkt daarom
   op GB's eigen classes, afgeleid vanaf de container.
   --------------------------------------------------------- */

.st-menu-panel.gb-menu-container--mobile {
  position: fixed;
  inset: 0;
  z-index: var(--st-z-overlay);
  width: 100%;
  max-width: none;
  padding-block: calc(var(--st-space-3xl) + 1rem) var(--st-space-2xl);
  padding-inline: var(--st-gutter);
  overflow-y: auto;
  overscroll-behavior: contain;
  background-color: var(--st-spruce);
  color: var(--st-white);
}

.st-menu-panel.gb-menu-container--mobile .gb-menu {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  margin: 0;
  padding: 0;
}

.st-menu-panel.gb-menu-container--mobile li {
  list-style: none;
  margin: 0;
  padding: 0;
}

.st-menu-panel.gb-menu-container--mobile .gb-menu > .gb-menu-item,
.st-menu-panel.gb-menu-container--mobile .gb-menu > .menu-item {
  border-bottom: var(--st-border-width) solid var(--st-clr-rule-on-dark);
}

/* Link en chevron op één regel. De chevron stond als blokelement
   onder de link, waardoor "Tuindiensten" een halve regel omhoog
   leek te zweven. */
.st-menu-panel.gb-menu-container--mobile .gb-menu-item,
.st-menu-panel.gb-menu-container--mobile .menu-item {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

.st-menu-panel.gb-menu-container--mobile .gb-menu-link {
  flex: 1 1 auto;
  display: block;
  padding-block: var(--st-space-s);
  padding-inline: 0;
  font-family: var(--st-ff-heading);
  font-size: var(--st-fs-800);
  font-weight: var(--st-fw-bold);
  line-height: var(--st-lh-tight);
  letter-spacing: var(--st-ls-tight);
  color: var(--st-white);              /* 10.42:1 op spruce */
  text-decoration: none;
}

.st-menu-panel.gb-menu-container--mobile .gb-menu-link:is(:hover, :focus-visible) {
  color: var(--st-willow);             /*  4.91:1 op spruce */
}

.st-menu-panel.gb-menu-container--mobile .current-menu-item > .gb-menu-link {
  color: var(--st-willow);
}

/* De chevron is een eigen knop naast de link, niet eronder. Zo
   blijft de bovenliggende pagina gewoon aanklikbaar. */
.st-menu-panel.gb-menu-container--mobile .gb-menu-item > button,
.st-menu-panel.gb-menu-container--mobile .gb-sub-menu-toggle,
.st-menu-panel.gb-menu-container--mobile .gb-menu-item__dropdown-toggle {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* 44px is de kleinste betrouwbare raakvlakmaat */
  width: 44px;
  height: 44px;
  margin-inline-start: var(--st-space-2xs);
  background: transparent;
  border: 0;
  color: var(--st-alabaster);
  cursor: pointer;
}

.st-menu-panel.gb-menu-container--mobile .gb-menu-item > button svg,
.st-menu-panel.gb-menu-container--mobile .gb-sub-menu-toggle svg {
  width: 1.25rem;
  height: 1.25rem;
  fill: currentColor;
  transition: rotate var(--st-transition-fast);
}

.st-menu-panel.gb-menu-container--mobile [aria-expanded="true"] svg {
  rotate: 180deg;
}

/* Submenu: dicht in rust, open na een tik op de chevron.
   Niet op hover — op touch bestaat dat niet. */
.st-menu-panel.gb-menu-container--mobile .gb-sub-menu {
  position: static;
  display: none;
  flex-basis: 100%;
  width: auto;
  min-width: 0;
  inset: auto;
  margin: 0 0 var(--st-space-s);
  padding-inline-start: var(--st-space-s);
  background: none;
  border: 0;
  box-shadow: none;
}

.st-menu-panel.gb-menu-container--mobile .gb-menu-item:has(> [aria-expanded="true"]) > .gb-sub-menu,
.st-menu-panel.gb-menu-container--mobile .menu-item:has(> [aria-expanded="true"]) > .gb-sub-menu,
.st-menu-panel.gb-menu-container--mobile .gb-menu-item--open > .gb-sub-menu,
.st-menu-panel.gb-menu-container--mobile .gb-menu-item.is-open > .gb-sub-menu {
  display: block;
}

.st-menu-panel.gb-menu-container--mobile .gb-sub-menu .gb-menu-link {
  font-family: var(--st-ff-body);
  font-size: var(--st-fs-600);
  font-weight: var(--st-fw-medium);
  padding-block: var(--st-space-2xs);
  color: var(--st-alabaster);          /*  7.56:1 op spruce */
}

.st-menu-panel.gb-menu-container--mobile .gb-sub-menu :is(.gb-menu-item, .menu-item) {
  border-bottom: 0;
}

/* Conversieknoppen onder in het menu */
.st-menu-actions {
  display: grid;
  gap: var(--st-space-2xs);
  margin-block-start: var(--st-space-l);
}

.st-menu-actions .st-button {
  width: 100%;
  padding-block: var(--st-space-xs);
  font-size: var(--st-fs-500);
}

.st-menu-actions .st-button-invert {
  background-color: var(--st-white);
  color: var(--st-spruce);
  border-color: var(--st-white);
}

.st-menu-actions .st-button-invert:is(:hover, :focus-visible) {
  background-color: var(--st-willow);
  color: var(--st-spruce);
  border-color: var(--st-willow);
}

.st-menu-actions .st-button-outline-invert {
  background-color: transparent;
  color: var(--st-white);
  border-color: var(--st-clr-rule-on-dark);
}

.st-menu-actions .st-button-outline-invert:is(:hover, :focus-visible) {
  background-color: var(--st-white);
  color: var(--st-spruce);
  border-color: var(--st-white);
}

.st-menu-note {
  margin: var(--st-space-s) 0 0;
  font-size: var(--st-fs-400);
  color: var(--st-alabaster);
}

/* De toggle verdwijnt zodra de tekstlinks passen. */
@media (min-width: 64em) {
  .st-header-nav .gb-navigation {
    display: none;
  }
}

/* --- Kruimelpad --- */

.st-header-crumbs {
  border-bottom: var(--st-border-width) solid var(--st-clr-border);
  font-size: var(--st-fs-300);
  color: var(--st-clr-ink);
}

.st-header-crumbs a {
  color: var(--st-clr-link);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.st-header-crumbs a:is(:hover, :focus-visible) {
  color: var(--st-clr-link-hover);
}

.st-header-crumbs > * {
  padding-block: var(--st-space-2xs);
}

/* ============================================================
   13. HOMEPAGE-SECTIES
   Diensten, projecten, proces, veelgestelde vragen, offerte.
   ============================================================ */

.st-band          { padding-block: var(--st-space-2xl); }
.st-band-lg       { padding-block: var(--st-space-3xl); }

.st-band-dark {
  background-color: var(--st-clr-surface-dark);
  color: var(--st-clr-ink-invert);
}

.st-band-blush {
  background-color: var(--st-clr-surface-sunk);
  border-block: var(--st-border-width) solid var(--st-clr-border);
}

/* De offerte-band. Tomato is vervallen, dus dit is spruce met een
   willow-keeplijn erboven zodat hij zich onderscheidt van de
   dienstenband hogerop. */
.st-band-warm {
  background-color: var(--st-clr-surface-dark);
  color: var(--st-clr-ink-invert);
  border-block-start: var(--st-border-width-rule) solid var(--st-clr-accent-soft);
}

/* Kop links, inhoud rechts */
.st-split {
  display: grid;
  grid-template-columns: 4fr 8fr;
  gap: var(--st-space-2xl);
}

@media (max-width: 63.99em) {
  .st-split { grid-template-columns: 1fr; gap: var(--st-space-l); }
}

.st-section-title {
  margin: 0;
  font-size: var(--st-fs-800);
  font-weight: var(--st-fw-bold);
  line-height: var(--st-lh-tight);
  letter-spacing: var(--st-ls-tight);
  text-wrap: balance;
}

.st-eyebrow-leaf,
.st-eyebrow-soft {
  display: block;
  margin: 0 0 var(--st-space-2xs);
  font-size: var(--st-fs-300);
  font-weight: var(--st-fw-semibold);
  letter-spacing: var(--st-ls-wider);
  text-transform: uppercase;
}

/* Op wit: rauwe jungle haalt 3.58:1 en dit is kleine tekst. */
.st-eyebrow-leaf { color: var(--st-clr-ink-leaf); }
.st-eyebrow-soft { color: var(--st-clr-accent-soft); }

/* Monospace volgnummers en bijschriften */
.st-num {
  font-family: var(--st-ff-mono);
  font-size: var(--st-fs-300);
  color: var(--st-clr-ink);
}

.st-num-soft   { color: var(--st-clr-accent-soft); }
.st-num-accent { color: var(--st-clr-ink-accent); }

/* --- Diensten --- */

.st-service-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-top: var(--st-border-width) solid var(--st-clr-rule-on-dark);
  counter-reset: st-entry;
}

/* Negen diensten in één kolom maakt de sectie op mobiel bijna twee
   schermen hoog. Twee kolommen halveert dat; de titels zijn kort
   genoeg. Het nummer gaat naast de titel in plaats van erboven. */
@media (max-width: 47.99em) {
  .st-service-entry {
    grid-template-columns: auto 1fr;
    align-items: baseline;
    column-gap: var(--st-space-2xs);
    padding-block: var(--st-space-s);
    padding-inline-end: var(--st-space-s);
  }

  .st-service-entry h3 {
    font-size: var(--st-fs-600);
  }

  .st-service-entry p {
    grid-column: 1 / -1;
    font-size: var(--st-fs-400);
  }
}

.st-service-entry {
  counter-increment: st-entry;
  display: grid;
  gap: var(--st-space-2xs);
  align-content: start;
  padding-block: var(--st-space-m);
  padding-inline-end: var(--st-space-l);
  border-bottom: var(--st-border-width) solid var(--st-clr-rule-on-dark);
}

.st-service-entry h3 {
  margin: 0;
  font-size: var(--st-fs-700);
  font-weight: var(--st-fw-semibold);
  letter-spacing: -0.01em;
}

/* De titel is een link. Zonder deze regel pakt hij de
   onderstreepte lopende-tekst-stijl uit sectie 2, en dan
   domineert de streep de hele kolom. */
.st-service-entry h3 a {
  color: var(--st-clr-ink-invert);
  text-decoration: none;
  transition: color var(--st-transition-fast);
}

.st-service-entry h3 a:is(:hover, :focus-visible) {
  color: var(--st-clr-ink-accent);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.2em;
}

/* Volgnummer uit een counter. De publicatiedatum stond hier
   eerst; die is voor alle dienstpagina's gelijk en zegt niets. */
.st-service-num::before {
  content: counter(st-entry, decimal-leading-zero);
}

.st-service-entry p {
  margin: 0;
  font-size: var(--st-fs-500);
  line-height: var(--st-lh-base);
  color: var(--st-alabaster);
}

/* --- Projecten --- */

.st-projects-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--st-space-m);
  margin-bottom: var(--st-space-l);
}

.st-project-grid {
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: var(--st-space-l);
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (max-width: 63.99em) {
  .st-project-grid { grid-template-columns: 1fr; }
}

.st-project-item {
  margin: 0;
}

/* De hele kaart is de link, niet alleen de titel. Bezoekers
   klikken op de foto. */
.st-project-link {
  display: grid;
  grid-template-rows: auto auto;
  align-content: start;
  gap: var(--st-space-xs);
  color: var(--st-clr-ink-strong);
  text-decoration: none;
}

.st-project-link img {
  transition: scale var(--st-transition-slow);
}

.st-project-item {
  overflow: hidden;
  border-radius: var(--st-radius-sm);
}

.st-project-link:is(:hover, :focus-visible) img {
  scale: 1.03;
}

.st-project-link:is(:hover, :focus-visible) .st-project-title {
  color: var(--st-clr-ink-accent);
  text-decoration: underline;
  text-underline-offset: 0.25em;
}

.st-project-title {
  font-weight: var(--st-fw-semibold);
  transition: color var(--st-transition-fast);
}

/* Verspringing zoals in het ontwerp. Alleen op breed scherm, en
   via padding — niet via grid-order, zodat de leesvolgorde klopt. */
@media (min-width: 64em) {
  .st-project-item:nth-child(2) { padding-block-start: var(--st-space-xl); }
  .st-project-item:nth-child(3) { padding-inline-end: var(--st-space-3xl); }
}

/* height:100% naast aspect-ratio liet de afbeelding buiten haar
   rasterrij groeien, waardoor het bijschrift eronder verdween. */
.st-project-item img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--st-radius-sm);
}

.st-project-caption {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--st-space-2xs);
  font-size: var(--st-fs-400);
}



/* --- Proces --- */

.st-steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--st-space-l);
  margin: var(--st-space-xl) 0 0;
  padding: 0;
  list-style: none;
  counter-reset: st-step;
}

@media (max-width: 63.99em) {
  .st-steps { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 47.99em) {
  .st-steps { grid-template-columns: 1fr; }
}

.st-step {
  display: grid;
  gap: var(--st-space-2xs);
  align-content: start;
  counter-increment: st-step;
  padding-block-start: var(--st-space-s);
  /* Jungle haalt op alabaster 2.60:1; spruce 7.56:1. */
  border-top: var(--st-border-width-thick) solid var(--st-clr-ink-strong);
}

/* Op alabaster haalt peach-ink 3.95:1 en tomato 4.00:1; beide
   zakken door AA. Spruce haalt er 7.56:1. */
.st-step-num {
  font-family: var(--st-ff-mono);
  font-size: var(--st-fs-300);
  color: var(--st-clr-ink-strong);
}

.st-step-num::before {
  content: "stap " counter(st-step, decimal-leading-zero);
}

.st-step h3 {
  margin: 0;
  font-size: var(--st-fs-600);
  font-weight: var(--st-fw-semibold);
}

.st-step p {
  margin: 0;
  font-size: var(--st-fs-500);
  line-height: var(--st-lh-base);
  color: var(--st-clr-ink);
}

/* --- Veelgestelde vragen ---
   Native details/summary. Geen GB Pro accordion nodig: de browser
   levert toetsenbordbediening en de juiste ARIA-semantiek al. */

.st-faq {
  border-top: var(--st-border-width) solid var(--st-clr-border);
}

.st-faq-item {
  border-bottom: var(--st-border-width) solid var(--st-clr-border);
}

.st-faq-question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--st-space-s);
  padding-block: var(--st-space-s);
  font-size: var(--st-fs-600);
  font-weight: var(--st-fw-semibold);
  color: var(--st-clr-ink-strong);
  cursor: pointer;
  list-style: none;
}

.st-faq-question::-webkit-details-marker { display: none; }

.st-faq-question::after {
  content: "+";
  flex-shrink: 0;
  font-family: var(--st-ff-mono);
  font-size: var(--st-fs-700);
  line-height: 1;
  color: var(--st-clr-ink-accent);
}

.st-faq-item[open] .st-faq-question::after { content: "\2212"; }

.st-faq-answer {
  margin: 0 0 var(--st-space-m);
  max-width: 62ch;
  font-size: var(--st-fs-500);
  line-height: var(--st-lh-base);
  color: var(--st-clr-ink);
}

/* --- Offerte --- */

.st-cta-band {
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: var(--st-space-2xl);
  align-items: center;
}

@media (max-width: 63.99em) {
  .st-cta-band { grid-template-columns: 1fr; gap: var(--st-space-l); }
}

.st-cta-title {
  margin: 0 0 var(--st-space-s);
  font-size: var(--st-fs-800);
  font-weight: var(--st-fw-bold);
  line-height: var(--st-lh-tight);
  letter-spacing: var(--st-ls-tight);
  color: var(--st-clr-ink-invert);
  text-wrap: balance;
}

.st-cta-text {
  margin: 0;
  max-width: 52ch;
  font-size: var(--st-fs-600);
  line-height: var(--st-lh-base);
  color: var(--st-alabaster);
}

.st-cta-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: var(--st-space-s);
}

@media (max-width: 63.99em) {
  .st-cta-actions { justify-content: flex-start; }
}

/* Rauw palet, geen contexttokens: binnen .st-band-dark wordt
   --st-clr-ink-strong naar wit omgezet, en dan staat er wit op
   een lichte vulling (2.12:1). */
.st-button-invert {
  background-color: var(--st-white);
  color: var(--st-spruce);                  /* 10.42:1 */
  padding-block: var(--st-space-xs);
  padding-inline: var(--st-space-m);
}

.st-button-invert:is(:hover, :focus-visible) {
  background-color: var(--st-willow);
  color: var(--st-spruce);                  /*  4.91:1 */
}

/* ============================================================
   14. VASTE ONDERBALK — mobiel
   Navigatie en actie naar de duimzone, zodat de kop bovenin
   alleen het logo hoeft te dragen. Alleen onder 48em; op
   desktop staat de hoogte op nul en valt alles wat eraan hangt
   vanzelf weg.
   ============================================================ */

.st-bottombar {
  display: none;
}

@media (max-width: 47.99em) {

  :root {
    --st-bottombar-height: 4.25rem;
    --st-bottombar-inset: env(safe-area-inset-bottom, 0px);
  }

  .st-bottombar {
    position: fixed;
    inset-inline: 0;
    inset-block-end: 0;
    z-index: var(--st-z-bottombar);
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    align-items: stretch;
    min-height: var(--st-bottombar-height);
    padding-block-end: var(--st-bottombar-inset);
    background-color: var(--st-clr-surface);
    border-block-start: var(--st-border-width) solid var(--st-clr-border);
    box-shadow: 0 -6px 18px rgb(67 70 69 / 0.08);
  }

  .st-bottombar-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--st-space-3xs);
    padding-block: var(--st-space-2xs);
    /* 44px is de kleinste betrouwbare raakvlakhoogte */
    min-height: 44px;
    color: var(--st-clr-ink);
    font-size: var(--st-fs-300);
    font-weight: var(--st-fw-semibold);
    line-height: 1.1;
    text-align: center;
    text-decoration: none;
    background-color: transparent;
    border: 0;
    cursor: pointer;
    font-family: inherit;
  }

  .st-bottombar-item svg {
    width: 1.375rem;
    height: 1.375rem;
    fill: currentColor;
  }

  .st-bottombar-item:is(:hover, :focus-visible) {
    color: var(--st-clr-ink-accent);
    background-color: var(--st-clr-surface-sunk);
  }

  .st-bottombar-item[aria-current="page"] {
    color: var(--st-clr-ink-accent);
    box-shadow: inset 0 3px 0 var(--st-clr-ink-accent);
  }

  /* De hoofdactie draagt kleur; de rest blijft neutraal, zodat
     er één ding opvalt in plaats van vier. */
  .st-bottombar-item--cta {
    background-color: var(--st-clr-surface-dark);
    color: var(--st-clr-ink-invert);          /* 5.45:1 */
  }

  .st-bottombar-item--cta:is(:hover, :focus-visible) {
    background-color: var(--st-clr-surface-deep);
    color: var(--st-clr-ink-invert);
  }

  /* Kop bovenin houdt alleen nog het merk en de menuknop over;
     de acties staan nu onderin. */
  .st-header-nav .st-button {
    display: none;
  }

  /* De onderbalk dekt de onderkant van de pagina af. */
  .st-site-footer,
  .site-footer,
  .footer-socket {
    padding-block-end: calc(
      var(--st-bottombar-height) + var(--st-bottombar-inset) + var(--st-space-l)
    );
  }

  html {
    scroll-padding-block-end: calc(
      var(--st-bottombar-height) + var(--st-bottombar-inset)
    );
  }
}

/* ============================================================
   16. DONKERE VLAKKEN — token-scope
   Patroon uit de iWorkers-sheet §24: in plaats van elk onderdeel
   apart te repareren op een donker vlak, herdefiniëren we de
   contexttokens één keer op de sectie zelf. Alles wat eraan hangt
   volgt automatisch, ook componenten die hier niet genoemd staan.

   Waarom niet gewoon het merkaccent: peach-ink haalt op iron-grey
   1.74:1 en op jungle-ink 1.45:1 — onzichtbaar. Willow-2 haalt
   daar 5.49 resp. 4.58 en neemt de accentrol dus over zodra het
   vlak donker is.
   ============================================================ */

.st-band-dark,
.st-band-warm,
.st-site-footer,
.st-hero-content {
  --st-clr-ink:        var(--st-clr-ink-invert);
  --st-clr-ink-strong: var(--st-clr-ink-invert);
  --st-clr-ink-muted:  var(--st-alabaster);

  /* Accent en link wisselen naar willow-2; peach verdwijnt hier. */
  --st-clr-ink-accent: var(--st-willow);
  --st-clr-ink-leaf:   var(--st-willow);
  --st-clr-link:       var(--st-willow);
  --st-clr-link-hover: var(--st-clr-ink-invert);
  --st-clr-focus:      var(--st-willow);

  --st-clr-border:        var(--st-clr-rule-on-dark);
  --st-clr-border-strong: color-mix(in srgb, var(--st-white) 55%, transparent);

  /* Vlak-op-vlak: een gevulde knop binnen een donkere sectie
     draait om — wit vlak, donkere tekst. */
  --st-clr-surface:        var(--st-clr-ink-invert);
  --st-clr-surface-sunk:   color-mix(in srgb, var(--st-white) 10%, transparent);
}

/* Tomato is lichter dan spruce: wit haalt er 5.52:1. Willow zakt
   daar weg, dus het accent blijft binnen deze band gewoon wit. */
/* Peach-ink is lichter dan spruce: wit haalt er 5.45:1. Willow
   zakt daar weg, dus het accent blijft binnen deze band wit. */
.st-band-warm {
  --st-clr-ink-accent: var(--st-clr-ink-invert);
  --st-clr-link:       var(--st-clr-ink-invert);
  --st-clr-ink-muted:  color-mix(in srgb, var(--st-white) 88%, var(--st-peach));
}

/* Gevulde knoppen keren om binnen een donker vlak. */
:is(.st-band-dark, .st-band-warm) .st-button-cta,
:is(.st-band-dark, .st-band-warm) .st-button-primary {
  background-color: var(--st-white);
  color: var(--st-spruce);                  /* 10.42:1 */
}

:is(.st-band-dark, .st-band-warm) .st-button-cta:is(:hover, :focus-visible),
:is(.st-band-dark, .st-band-warm) .st-button-primary:is(:hover, :focus-visible) {
  background-color: var(--st-willow);
  color: var(--st-spruce);                  /*  4.91:1 — iron-grey
                                               haalt hier 4.45 */
}

:is(.st-band-dark, .st-band-warm) .st-button-secondary {
  color: var(--st-clr-ink-invert);
  border-color: var(--st-clr-rule-on-dark);
}

:is(.st-band-dark, .st-band-warm) .st-button-secondary:is(:hover, :focus-visible) {
  background-color: var(--st-white);
  color: var(--st-spruce);
  border-color: var(--st-white);
}


/* ============================================================
   17. TEAM
   Twee of drie teamleden, willekeurig gekozen. Geen archief, geen
   detailpagina: dit is een gezicht bij het bedrijf, geen inhoud
   om door te klikken.
   ============================================================ */

.st-team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: var(--st-space-l);
  margin: var(--st-space-xl) 0 0;
  padding: 0;
  list-style: none;
}

.st-team-card {
  display: grid;
  grid-template-rows: auto auto auto 1fr;
  gap: var(--st-space-2xs);
  align-content: start;
}

/* Een portret naast lopende tekst hoeft niet de kolombreedte te
   vullen. Vaste maat, links uitgelijnd; zonder cap werd de foto
   op een 1600px-container ruim 500px breed. */
.st-team-photo {
  display: block;
  width: clamp(7rem, 10vw, 9rem);
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  margin-block-end: var(--st-space-xs);
  border-radius: var(--st-radius-sm);
}

.st-team-name {
  margin: 0;
  font-family: var(--st-ff-heading);
  font-size: var(--st-fs-700);
  font-weight: var(--st-fw-bold);
  line-height: var(--st-lh-tight);
  letter-spacing: var(--st-ls-tight);
  color: var(--st-clr-ink-strong);
}

.st-team-role {
  font-family: var(--st-ff-mono);
  font-size: var(--st-fs-300);
  letter-spacing: var(--st-ls-wide);
  text-transform: uppercase;
  color: var(--st-clr-ink-accent);     /* 5.45:1 */
}

.st-team-bio {
  margin: 0;
  max-width: 42ch;
  font-size: var(--st-fs-500);
  line-height: var(--st-lh-base);
  color: var(--st-clr-ink);
}

/* ============================================================
   18. OVERZICHTS- EN DETAILPAGINA'S
   Tuindiensten-overzicht en de losse projectpagina.
   ============================================================ */

/* --- Paginakop --- */

/* Geen bovenruimte: die komt van de band eromheen. Stapelen gaf
   144 tot 180px boven de eyebrow. */
.st-page-head {
  display: grid;
  gap: var(--st-space-s);
  max-width: var(--st-measure);
  padding-block-end: var(--st-space-l);
}

.st-page-title {
  margin: 0;
  font-family: var(--st-ff-heading);
  font-size: var(--st-fs-800);
  font-weight: var(--st-fw-bold);
  line-height: var(--st-lh-tight);
  letter-spacing: var(--st-ls-tight);
  color: var(--st-clr-ink-strong);
  text-wrap: balance;
}

.st-page-lead {
  margin: 0;
  font-size: var(--st-fs-600);
  line-height: var(--st-lh-base);
  color: var(--st-clr-ink);
}

/* --- Tegelraster: diensten en projecten --- */

.st-tile-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr));
  gap: var(--st-space-l) var(--st-space-m);
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: st-tile;
}

.st-tile {
  counter-increment: st-tile;
  margin: 0;
}

.st-tile-link {
  display: grid;
  grid-template-rows: auto auto;
  gap: var(--st-space-xs);
  color: var(--st-clr-ink-strong);
  text-decoration: none;
}

.st-tile-link img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--st-radius-sm);
  transition: scale var(--st-transition-slow);
}

.st-tile {
  overflow: hidden;
  border-radius: var(--st-radius-sm);
}

.st-tile-link:is(:hover, :focus-visible) img { scale: 1.03; }

.st-tile-caption {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--st-space-2xs);
}

.st-tile-title {
  margin: 0;
  font-size: var(--st-fs-600);
  font-weight: var(--st-fw-semibold);
  line-height: var(--st-lh-snug);
  transition: color var(--st-transition-fast);
}

.st-tile-link:is(:hover, :focus-visible) .st-tile-title {
  color: var(--st-clr-ink-accent);
  text-decoration: underline;
  text-underline-offset: 0.25em;
}

.st-tile-num {
  flex-shrink: 0;
  font-family: var(--st-ff-mono);
  font-size: var(--st-fs-300);
  color: var(--st-clr-ink-muted);
}

.st-tile-num::before { content: counter(st-tile, decimal-leading-zero); }

/* Variant zonder teller: bij projecten staat het projecttype
   rechts in plaats van een volgnummer. */
.st-tile-meta {
  flex-shrink: 0;
  font-family: var(--st-ff-mono);
  font-size: var(--st-fs-300);
  color: var(--st-clr-ink-muted);
}

/* --- Projectdetail --- */

.st-project-head {
  display: grid;
  gap: var(--st-space-s);
  padding-block: var(--st-space-m) var(--st-space-l);
}

.st-project-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--st-space-2xs) var(--st-space-s);
  font-family: var(--st-ff-mono);
  font-size: var(--st-fs-300);
  letter-spacing: var(--st-ls-wide);
  text-transform: uppercase;
  color: var(--st-clr-ink-accent);     /* 5.45:1 */
}

.st-project-figure {
  margin: 0 0 var(--st-space-xl);
}

.st-project-figure img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--st-radius-sm);
}

.st-project-body {
  display: grid;
  grid-template-columns: 4fr 8fr;
  gap: var(--st-space-2xl);
  padding-block-end: var(--st-space-2xl);
}

@media (max-width: 63.99em) {
  .st-project-body { grid-template-columns: 1fr; gap: var(--st-space-l); }
}

.st-project-body p {
  margin: 0 0 var(--st-space-s);
  max-width: var(--st-measure);
  font-size: var(--st-fs-500);
  line-height: var(--st-lh-base);
}

.st-project-facts {
  display: grid;
  gap: var(--st-space-2xs);
  align-content: start;
  margin: 0;
  padding-block-start: var(--st-space-s);
  border-block-start: var(--st-border-width-thick) solid var(--st-clr-ink-strong);
}

.st-project-facts dt {
  font-family: var(--st-ff-mono);
  font-size: var(--st-fs-300);
  letter-spacing: var(--st-ls-wide);
  text-transform: uppercase;
  color: var(--st-clr-ink-muted);
}

.st-project-facts dd {
  margin: 0 0 var(--st-space-xs);
  font-size: var(--st-fs-500);
  color: var(--st-clr-ink-strong);
}

/* --- Vorige en volgende --- */

.st-postnav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--st-space-m);
  padding-block: var(--st-space-l);
  border-block-start: var(--st-border-width) solid var(--st-clr-border);
}

.st-postnav a {
  color: var(--st-clr-ink-strong);
  font-weight: var(--st-fw-semibold);
  text-decoration: none;
}

.st-postnav a:is(:hover, :focus-visible) {
  color: var(--st-clr-ink-accent);
  text-decoration: underline;
  text-underline-offset: 0.25em;
}

/* ============================================================
   19. REDUCED MOTION
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}