/* Opmaak per sectie, mobile-first. Volgorde = volgorde op de pagina. */

/* — Gloed achter de hero: het kampvuur, zacht en niet in de weg — */
.gloed {
  position: relative;
  overflow: clip;
}

.gloed::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(38rem 24rem at 82% -6rem, rgba(201, 112, 46, 0.16), transparent 65%),
    radial-gradient(30rem 22rem at 8% 10rem, rgba(46, 94, 87, 0.1), transparent 60%);
}

/* — Kader — */
.kader {
  width: min(var(--breedte), 100% - 2.5rem);
  margin-inline: auto;
}

/* — Navigatie — */
.nav {
  position: sticky;
  top: 0;
  z-index: 10;
  background: color-mix(in srgb, var(--vlak) 82%, transparent);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  border-bottom: 1px solid var(--lijn);
}

.nav__binnen {
  display: flex;
  align-items: center;
  gap: var(--maat-s);
  padding-block: 0.8rem;
}

.nav__logo {
  font-family: var(--font-kop);
  font-weight: 600;
  font-size: 1.05rem;
  letter-spacing: 0.01em;
  color: var(--inkt);
  text-decoration: none;
  white-space: nowrap;
}

.nav__logo .vonk {
  color: var(--acc);
}

/* Het beeldmerk links van de naam: de fractal (logo.svg), met om elk lid
   dezelfde drie bollen in het klein. Wessel koos hem op 2 oktober 2026 boven
   de eenvoudige vorm; daarom staat hij hier groter dan een tabbladicoon. */
.nav__logo {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.nav__merk {
  width: 2.6rem;
  height: 2.6rem;
  flex: none;
  /* Het bestand heeft een ronde achtergrond met ruimte rondom; trek die rand
     een stukje weg, zodat de bollen dichter bij de naam staan. */
  margin: -0.3rem -0.2rem -0.3rem -0.35rem;
}

.nav__links {
  display: none;
  gap: var(--maat-m);
  margin-left: auto;
}

.nav__links a {
  color: var(--inkt-zacht);
  text-decoration: none;
  font-size: 0.95rem;
}

.nav__links a:hover {
  color: var(--inkt);
}

.nav__cta {
  margin-left: auto;
  white-space: nowrap;
}

/* Inloggen is voor wie al klant is: een stille tekstlink, geen tweede knop
   naast de aanvraag. Op een telefoon staat hij in het menu. */
.nav__inlog {
  display: none;
  padding-left: var(--maat-s);
  border-left: 1px solid var(--lijn);
  color: var(--inkt-zacht);
  text-decoration: none;
  font-size: 0.9rem;
  white-space: nowrap;
}

.nav__inlog:hover {
  color: var(--inkt);
}

/* Het mobiele menu. Een <details> en geen knop met een script: als js/main.js
   niet laadt, moet een bezoeker nog steeds bij elke pagina kunnen komen. Het
   formulier van deze site mag van JavaScript afhangen, navigatie niet. */
.nav__menu {
  position: relative;
  order: 3;
}

.nav__menu summary {
  list-style: none;
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--rond-klein);
  cursor: pointer;
}

/* Safari zet er anders een driehoekje voor. */
.nav__menu summary::-webkit-details-marker {
  display: none;
}

/* Drie streepjes, zonder extra elementen: de balk zelf plus twee schaduwen. */
.nav__streepjes,
.nav__streepjes::before,
.nav__streepjes::after {
  display: block;
  width: 1.25rem;
  height: 2px;
  border-radius: 2px;
  background: var(--inkt);
}

.nav__streepjes::before,
.nav__streepjes::after {
  content: "";
  position: relative;
}

.nav__streepjes::before { top: -6px; }
.nav__streepjes::after { top: 4px; }

.nav__uitklap {
  position: absolute;
  right: 0;
  top: calc(100% + var(--maat-xs));
  z-index: 20;
  display: grid;
  gap: 0.15rem;
  min-width: 13rem;
  padding: var(--maat-xs);
  background: var(--wit);
  border: 1px solid var(--lijn);
  border-radius: var(--rond);
  box-shadow: var(--schaduw);
}

.nav__uitklap a {
  padding: 0.6rem 0.7rem;
  border-radius: var(--rond-klein);
  color: var(--inkt);
  text-decoration: none;
  font-size: 0.95rem;
}

.nav__uitklap a:hover {
  background: var(--vlak);
}

.nav__uitklap-inloggen {
  margin-top: var(--maat-xs);
  border-top: 1px solid var(--lijn);
  padding-top: 0.7rem !important;
  border-radius: 0 !important;
}

/* Boven het breekpunt staan de links in de balk en is het menu weg. Onder het
   breekpunt precies andersom. Nooit allebei, nooit geen van beide. */
/* Vijf korte woorden in de balk (2 oktober 2026: "te veel tekst, niet goed
   leesbaar, zeker niet op mobiel"). Vanaf 52rem passen logo, links, Inloggen en
   de knop op één regel; daaronder het menu. De langere namen staan in het menu. */
@media (min-width: 52rem) {
  .nav__menu { display: none; }

  .nav__links {
    display: flex;
  }

  .nav__inlog {
    display: inline;
  }

  .nav__cta {
    margin-left: 0;
  }
}

/* Smal scherm: logo en knop compacter, zodat de balk één regel blijft.
   `a.nav__cta` wint zo van de algemene `.knop`-regel verderop. */
@media (max-width: 27rem) {
  .nav__binnen {
    gap: 0.5rem;
  }

  a.nav__logo {
    font-size: 0.9rem;
    gap: 0.35rem;
  }

  .nav__merk {
    width: 2.2rem;
    height: 2.2rem;
  }

  a.nav__cta {
    padding: 0.5rem 0.85rem;
    font-size: 0.85rem;
  }
}

/* De smalste telefoons (360 pixels): met het beeldmerk erbij nog een slag
   compacter, zodat logo, knop en menu op één regel blijven. */
@media (max-width: 23rem) {
  a.nav__logo {
    font-size: 0.84rem;
  }

  .nav__merk {
    width: 2rem;
    height: 2rem;
  }

  a.nav__cta {
    padding: 0.45rem 0.7rem;
    font-size: 0.8rem;
  }

  .nav__menu summary {
    width: 2.4rem;
  }
}

/* — Knoppen — */
.knop {
  display: inline-block;
  padding: 0.7rem 1.35rem;
  border-radius: 999px;
  font-family: var(--font-kop);
  font-weight: 500;
  font-size: 0.98rem;
  text-decoration: none;
  transition: transform 120ms ease, box-shadow 120ms ease, background 120ms ease;
}

.knop--vol {
  background: var(--acc);
  color: #fff;
  box-shadow: 0 6px 18px rgba(201, 112, 46, 0.32);
}

.knop--vol:hover {
  background: var(--acc-diep);
  color: #fff;
  transform: translateY(-1px);
}

.knop--rand {
  border: 1px solid var(--lijn);
  color: var(--inkt);
  background: color-mix(in srgb, var(--wit) 60%, transparent);
}

.knop--rand:hover {
  border-color: var(--inkt-zacht);
  color: var(--inkt);
}

/* — Hero — */
.hero {
  padding-block: clamp(4rem, 10vw, 7rem) clamp(3rem, 7vw, 5rem);
}

.hero__binnen {
  display: grid;
  gap: var(--maat-l);
  align-items: center;
}

@media (min-width: 52rem) {
  .hero__binnen {
    /* Rechts het scherm van de hero-loop: groot genoeg om een kaart te lezen. */
    grid-template-columns: 1fr 1.05fr;
  }
}

.hero__kicker {
  font-family: var(--font-kop);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--acc-diep);
  margin-bottom: var(--maat-s);
}

.hero__sub {
  font-size: 1.15rem;
  color: var(--inkt-zacht);
  max-width: 36em;
}

.hero__knoppen {
  display: flex;
  flex-wrap: wrap;
  gap: var(--maat-s);
  margin-top: var(--maat-m);
}

.hero__beeld {
  display: grid;
  place-items: center;
}

/* — De Tryb-zin: de band met portretten direct onder de hero — */
.trybzin__binnen {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--maat-m);
  max-width: 42em;
  text-align: center;
}

.trybzin__koppen {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--maat-xs);
}

.trybzin__koppen img {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--wit);
  box-shadow: 0 2px 4px rgba(29, 39, 51, 0.12);
  flex-shrink: 0;
}

.trybzin p {
  font-size: 1.15rem;
  color: var(--inkt-zacht);
}

/* — Secties — */
.sectie {
  padding-block: clamp(3.5rem, 8vw, 5.5rem);
}

.sectie--vlak {
  background: color-mix(in srgb, var(--wit) 55%, transparent);
  border-block: 1px solid var(--lijn);
}

.sectie__kop {
  max-width: 44em;
}

.sectie__intro {
  color: var(--inkt-zacht);
  max-width: 40em;
  font-size: 1.08rem;
}

/* — Weg-pagina's: "Herken je dit?", "Waar we dan naar kijken", de voetregels — */
/* De still bovenaan een weg-pagina: breed sfeerbeeld van de weg. */
.wegbeeld {
  margin: var(--maat-m) 0 var(--maat-l);
  border-radius: var(--rond);
  overflow: hidden;
  aspect-ratio: 16 / 7;
  box-shadow: var(--schaduw);
}

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

/* Een korte, trage zoom bij het openen: een still die even ademt. Onder de vijf
   seconden, dus geen pauzeknop nodig, en stil bij "minder beweging". */
@media (prefers-reduced-motion: no-preference) {
  .wegbeeld img {
    animation: wegbeeld-adem 4.5s cubic-bezier(0.2, 0.6, 0.3, 1) both;
  }
}

@keyframes wegbeeld-adem {
  from { transform: scale(1.07); }
}

.wegherken {
  max-width: 40em;
  font-size: 1.08rem;
}

.wegpunten {
  display: grid;
  gap: 0.6rem;
  max-width: 40em;
  margin: 0;
  padding-left: 1.2rem;
  color: var(--inkt-zacht);
}

.wegvoet {
  margin-top: var(--maat-xs);
  color: var(--inkt-zacht);
  font-size: 0.98rem;
}

.wegvoet strong {
  color: var(--inkt);
}

/* — Verhaal: twee kolommen tekst — */
.verhaal {
  display: grid;
  gap: var(--maat-m) var(--maat-xl);
  max-width: 100%;
}

@media (min-width: 52rem) {
  .verhaal {
    grid-template-columns: 1fr 1fr;
  }
}

.verhaal p {
  color: var(--inkt-zacht);
}

.verhaal p strong {
  color: var(--inkt);
}

/* — Kaarten (wat je Tryb doet) — */
.kaarten {
  display: grid;
  gap: var(--maat-s);
  margin-top: var(--maat-l);
}

@media (min-width: 40rem) {
  .kaarten {
    grid-template-columns: 1fr 1fr;
  }
}

@media (min-width: 62rem) {
  .kaarten {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Zeven wegen willen breder dan drie kolommen: vier op een rij, dan drie. */
@media (min-width: 60rem) {
  .kaarten--wegen {
    grid-template-columns: repeat(4, 1fr);
  }
}

.kaart {
  background: var(--wit);
  border: 1px solid var(--lijn);
  border-radius: var(--rond);
  padding: var(--maat-m);
  box-shadow: var(--schaduw);
}

/* Een sfeerbeeld bovenin de wegkaart, tot de rand. Het icoon schuift er half
   overheen, zodat de kaart zijn herkenning houdt. */
.kaart__beeld {
  display: block;
  width: calc(100% + 2 * var(--maat-m));
  max-width: none;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  margin: calc(-1 * var(--maat-m)) calc(-1 * var(--maat-m)) 0;
  border-radius: var(--rond) var(--rond) 0 0;
}

.kaart__beeld + .kaart__icoon {
  position: relative;
  margin-top: -1.3rem;
  box-shadow: 0 0 0 4px var(--wit);
}

.kaart__icoon {
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 0.8rem;
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--acc) 12%, var(--wit));
  color: var(--acc-diep);
  margin-bottom: var(--maat-s);
}

.kaart p {
  color: var(--inkt-zacht);
  font-size: 0.98rem;
  margin: 0;
}

.kaart__bewijs {
  display: block;
  margin-top: var(--maat-s);
  font-size: 0.85rem;
  color: var(--acc-diep);
}

/* Een kaart is een link: gewone tekstkleur en geen onderstreping, anders
   verdrinkt de kop in de standaard linkkleur — maar wel een hoverstand en
   een focusrand die je met het toetsenbord ook echt ziet. */
a.kaart {
  display: block;
  color: inherit;
  text-decoration: none;
  transition: border-color 180ms ease;
}

/* Kleur, geen beweging: dit is de hoverstand die overblijft voor een
   bezoeker met reduce-motion, want de lift-en-schaduw hieronder zit in
   `@media (hover: hover) and (prefers-reduced-motion: no-preference)`.
   Zonder dit is er op de zeven kaartlinks dan geen enkel hoversignaal. */
a.kaart:hover {
  color: inherit;
  border-color: var(--acc);
}

a.kaart:focus-visible {
  outline: 3px solid var(--acc-diep);
  outline-offset: 3px;
  border-radius: var(--rond);
}

/* — Het team — */
.team {
  display: grid;
  gap: var(--maat-s);
  margin-top: var(--maat-l);
  grid-template-columns: 1fr 1fr;
}

@media (min-width: 62rem) {
  .team {
    grid-template-columns: repeat(3, 1fr);
  }
}

.collega {
  background: var(--wit);
  border: 1px solid var(--lijn);
  border-radius: var(--rond);
  padding: var(--maat-m) var(--maat-s);
  text-align: center;
  box-shadow: var(--schaduw);
}

.collega img {
  width: clamp(5rem, 9vw, 7rem);
  height: auto;
  border-radius: 50%;
  border: 3px solid color-mix(in srgb, var(--acc) 25%, var(--wit));
}

.collega h3 {
  margin: var(--maat-s) 0 0.1rem;
}

.collega__vak {
  font-family: var(--font-kop);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--acc-diep);
  margin-bottom: 0.5rem;
}

.collega p:not(.collega__vak) {
  color: var(--inkt-zacht);
  font-size: 0.92rem;
  margin: 0;
}

/* — De Tryb-interface: nagebouwd, niet gefotografeerd — */
/* Het adres blijft één geheel: brak het af, dan viel de naam op de ene regel
   en `.trybintelligence.nl` op de volgende, met het gekleurde vlak
   doormidden. Op een telefoon past dat alleen wat kleiner — de langste naam
   is nu eenmaal eenentwintig tekens. */
.adres {
  white-space: nowrap;
  font-family: var(--font-kop);
  font-weight: 500;
  color: var(--groen-diep);
  background: color-mix(in srgb, var(--groen) 10%, var(--wit));
  border-radius: var(--rond-klein);
  padding: 0.1rem 0.45rem;
}

/* De naam wisselt (jouwbedrijf → lampsleeve → … → decirculaireontruimer) en
   zonder vaste breedte verspringt de hele zin bij elke wissel.
   Geen afgemeten getal, maar alle namen op dezelfde plek in een raster: de
   verborgen namen tellen mee voor de breedte, dus die is vanzelf die van de
   langste — ook als er later een naam bij komt.
   Rechts uitgelijnd, zodat een korte naam tegen `.trybintelligence.nl` aan
   blijft plakken en de lucht ervóór valt in plaats van middenin. */
.adres__naam {
  color: var(--acc-diep);
  display: inline-grid;
  justify-items: end;
  vertical-align: bottom;
}

.adres__optie {
  grid-area: 1 / 1;
  visibility: hidden;
  opacity: 0;
  transition: opacity 300ms ease;
}

.adres__optie.aan {
  visibility: visible;
  opacity: 1;
}

@media (max-width: 34rem) {
  .adres {
    font-size: 0.82em;
  }
}

/* Onder de 352 px is ook dat nog te breed en drukt het adres tegen de
   schermrand aan. */
@media (max-width: 22rem) {
  .adres {
    font-size: 0.72em;
  }
}

/* Losse afsluitende alinea onder een blok. */
.noot {
  margin-top: var(--maat-m);
  color: var(--inkt-zacht);
  font-size: 0.98rem;
}

.scherm-duo {
  display: grid;
  gap: var(--maat-m);
  margin-top: var(--maat-l);
  align-items: start;
}

@media (min-width: 62rem) {
  .scherm-duo {
    grid-template-columns: 1.35fr 1fr;
  }
}

.scherm {
  margin: 0;
  border-radius: var(--rond);
  border: 1px solid var(--lijn);
  background: var(--wit);
  box-shadow: 0 2px 4px rgba(29, 39, 51, 0.05), 0 22px 48px rgba(29, 39, 51, 0.12);
  overflow: hidden;
}

.scherm__balk {
  display: flex;
  align-items: center;
  gap: var(--maat-s);
  padding: 0.6rem 0.9rem;
  border-bottom: 1px solid var(--lijn);
  background: color-mix(in srgb, var(--vlak) 70%, var(--wit));
  font-size: 0.78rem;
  color: var(--inkt-zacht);
}

.scherm__naam {
  font-family: var(--font-kop);
  font-weight: 600;
  color: var(--inkt);
}

.scherm__knopjes {
  margin-left: auto;
  display: flex;
  gap: 0.3rem;
}

.scherm__knopjes i {
  width: 1.7rem;
  height: 0.55rem;
  border-radius: 999px;
  background: var(--lijn);
}

/* De sfeerband bovenin: zacht bewegend, zoals in de echte Tryb. */
.scherm__band {
  height: 4.5rem;
  background: linear-gradient(
    100deg,
    color-mix(in srgb, var(--acc) 45%, #fff),
    color-mix(in srgb, var(--groen) 35%, #fff),
    color-mix(in srgb, var(--acc) 30%, #fff),
    color-mix(in srgb, var(--groen) 45%, #fff)
  );
  background-size: 300% 100%;
}

@media (prefers-reduced-motion: no-preference) {
  .scherm__band {
    animation: band 18s ease-in-out infinite alternate;
  }
}

@keyframes band {
  from { background-position: 0% 50%; }
  to { background-position: 100% 50%; }
}

.scherm__binnen {
  padding: var(--maat-m) var(--maat-s);
}

.scherm__groet {
  font-family: var(--font-kop);
  font-size: 1.2rem;
  font-weight: 300;
  color: var(--inkt);
  margin-bottom: var(--maat-s);
}

.scherm__groet span {
  font-family: var(--font-tekst);
  font-size: 0.8rem;
  color: var(--inkt-zacht);
  margin-left: 0.4rem;
}

.regel {
  display: flex;
  gap: 0.7rem;
  align-items: flex-start;
  padding: 0.75rem 0;
  border-top: 1px solid var(--lijn);
}

.regel--kop {
  border-top: 0;
  align-items: center;
}

.regel img {
  width: 2.2rem;
  height: 2.2rem;
  border-radius: 50%;
  flex-shrink: 0;
}

.regel > div {
  flex: 1;
  min-width: 0;
}

.regel__wie {
  font-family: var(--font-kop);
  font-weight: 600;
  font-size: 0.92rem;
  margin: 0 0 0.15rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
}

/* — Het gesprek: wie tikt, wie net iets gezegd heeft — */
.tikt {
  display: none;
  align-items: center;
  gap: 0.15rem;
}

.regel--tikt .tikt {
  display: inline-flex;
}

.tikt i {
  width: 0.28rem;
  height: 0.28rem;
  border-radius: 50%;
  background: var(--acc);
}

@media (prefers-reduced-motion: no-preference) {
  .tikt i {
    animation: tikken 1.1s ease-in-out infinite;
  }

  .tikt i:nth-child(2) { animation-delay: 0.15s; }
  .tikt i:nth-child(3) { animation-delay: 0.3s; }
}

@keyframes tikken {
  0%, 60%, 100% { opacity: 0.3; transform: translateY(0); }
  30% { opacity: 1; transform: translateY(-0.14rem); }
}

/* De regel die zojuist iets gezegd heeft, licht even op. */
.regel {
  border-radius: var(--rond-klein);
  transition: background 420ms ease, transform 420ms cubic-bezier(0.22, 1, 0.36, 1);
}

.regel--aan {
  background: color-mix(in srgb, var(--acc) 7%, transparent);
}

@media (prefers-reduced-motion: no-preference) {
  .regel--aan {
    transform: translateX(3px);
  }
}

/* Wat er net binnenkomt, valt binnen in plaats van er ineens te staan. */
@media (prefers-reduced-motion: no-preference) {
  .regel--nieuw .regel__wat,
  .regel--nieuw .regel__knoppen {
    animation: invallen 420ms cubic-bezier(0.22, 1, 0.36, 1) backwards;
  }

  .regel--nieuw .regel__knoppen {
    animation-delay: 120ms;
  }
}

@keyframes invallen {
  from { opacity: 0; transform: translateY(5px); }
  to { opacity: 1; transform: none; }
}

.regel__wie span:not(.vlag) {
  font-weight: 400;
  color: var(--inkt-zacht);
}

.regel__wat {
  font-size: 0.85rem;
  color: var(--inkt-zacht);
  margin: 0;
}

.regel__knoppen {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin: 0.5rem 0 0;
}

.vlag {
  font-family: var(--font-tekst);
  font-size: 0.68rem;
  font-weight: 600;
  border-radius: 999px;
  padding: 0.1rem 0.5rem;
  background: color-mix(in srgb, var(--groen) 12%, var(--wit));
  color: var(--groen-diep);
}

/* Wat dringend is vraagt om aandacht — precies zoals in de echte Tryb. */
.vlag--nu {
  background: color-mix(in srgb, var(--acc) 18%, var(--wit));
  color: var(--acc-diep);
}

@media (prefers-reduced-motion: no-preference) {
  .js .scherm.zichtbaar .vlag--nu {
    animation: aandacht 2.8s ease-in-out 1.6s infinite;
  }
}

@keyframes aandacht {
  0%, 70%, 100% { box-shadow: 0 0 0 0 rgba(201, 112, 46, 0); }
  35% { box-shadow: 0 0 0 0.3rem rgba(201, 112, 46, 0.22); }
}

.vlag--klaar {
  background: color-mix(in srgb, var(--inkt) 8%, var(--wit));
  color: var(--inkt-zacht);
}

/* Nepknoppen: dit is een afbeelding van de interface, geen interface. */
.nepknop {
  font-family: var(--font-kop);
  font-size: 0.72rem;
  font-weight: 500;
  border-radius: 999px;
  padding: 0.3rem 0.7rem;
  border: 1px solid var(--lijn);
  color: var(--inkt-zacht);
  white-space: nowrap;
}

.nepknop--vol {
  background: var(--acc);
  border-color: var(--acc);
  color: #fff;
}

.scherm__vraag {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: var(--maat-s);
  padding-top: var(--maat-s);
  border-top: 1px solid var(--lijn);
}

.scherm__veld {
  position: relative;
  flex: 1;
  border: 1px solid var(--lijn);
  border-radius: 999px;
  padding: 0.45rem 0.85rem;
  font-size: 0.8rem;
  color: var(--inkt-zacht);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Een knipperende cursor: het veld staat klaar, je kunt zo beginnen. */
.scherm__veld::after {
  content: "";
  display: inline-block;
  width: 1px;
  height: 0.9em;
  margin-left: 0.15rem;
  vertical-align: -0.1em;
  background: var(--acc);
}

@media (prefers-reduced-motion: no-preference) {
  .scherm__veld::after {
    animation: knipper 1.15s steps(1) infinite;
  }
}

@keyframes knipper {
  0%, 45% { opacity: 1; }
  50%, 95% { opacity: 0; }
  100% { opacity: 1; }
}

/* Het bolletje bij de kop: er wordt gemeten, ook nu je kijkt. */
.leeft {
  display: inline-block;
  width: 0.42rem;
  height: 0.42rem;
  border-radius: 50%;
  background: var(--groen);
  margin-right: 0.35rem;
  vertical-align: 0.05em;
}

@media (prefers-reduced-motion: no-preference) {
  .leeft {
    animation: leeft 2.6s ease-in-out infinite;
  }
}

@keyframes leeft {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(46, 94, 87, 0.4); }
  50% { opacity: 0.55; box-shadow: 0 0 0 0.32rem rgba(46, 94, 87, 0); }
}

/* Regels komen één voor één binnen zodra het scherm in beeld is.
   Ook hier `backwards` en geen `forwards`: bleef de eindstand van deze
   animatie staan, dan hield die `transform: none` het opschuiven van de
   regel die aan het woord is tegen. */
@media (prefers-reduced-motion: no-preference) {
  .js .scherm .regel,
  .js .scherm__vraag {
    opacity: 0;
  }

  .js .scherm.zichtbaar .regel,
  .js .scherm.zichtbaar .scherm__vraag {
    opacity: 1;
    animation: inregel 520ms cubic-bezier(0.22, 1, 0.36, 1) backwards;
    animation-delay: calc(var(--stap, 1) * 130ms);
  }
}

@keyframes inregel {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* — De meters van Merel — */
.meters {
  display: grid;
  gap: var(--maat-m);
}

.meter-groot {
  text-align: center;
}

.meter-groot svg {
  width: 100%;
  max-width: 11rem;
  height: auto;
}

.boog--baan {
  stroke: var(--lijn);
}

/* Basisstand is de éindstand: draait main.js niet, dan staat de boog er
   gewoon vol op in plaats van volledig weggeknipt. Pas als de klasse `js`
   erop staat wordt hij eerst leeggemaakt om te kunnen aanlopen. */
.boog--vol {
  stroke: var(--groen);
  stroke-dasharray: 157;
  stroke-dashoffset: 3.14;
}

/* Leegmaken doen we alleen als er ook echt gemeten gaat worden. Staat
   beweging uit, dan zet JS de klasse `meet` nooit en zou de boog voor altijd
   weggeknipt blijven. */
@media (prefers-reduced-motion: no-preference) {
  .js .boog--vol {
    stroke-dashoffset: 157;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .js .scherm--cijfers.meet .boog--vol {
    transition: stroke-dashoffset 1.6s cubic-bezier(0.22, 1, 0.36, 1);
  }
}

.js .scherm--cijfers.meet .boog--vol {
  stroke-dashoffset: 3.14;
}

.meter-groot__cijfer {
  font-family: var(--font-kop);
  font-size: 2.2rem;
  font-weight: 600;
  color: var(--inkt);
  margin: -1.6rem 0 0;
}

.meter-groot__cijfer span:last-child {
  font-size: 0.9rem;
  font-weight: 400;
  color: var(--inkt-zacht);
}

.meter-groot__uitleg {
  font-size: 0.85rem;
  color: var(--inkt-zacht);
  margin: 0.2rem 0 0;
}

.meter-lijst {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.7rem;
}

.meter-lijst p {
  display: flex;
  justify-content: space-between;
  gap: var(--maat-s);
  font-size: 0.85rem;
  color: var(--inkt-zacht);
  margin: 0 0 0.25rem;
}

.meter-lijst strong {
  font-family: var(--font-kop);
  color: var(--groen-diep);
}

.balk {
  position: relative;
  display: block;
  height: 0.4rem;
  border-radius: 999px;
  background: var(--lijn);
  overflow: hidden;
}

/* Een lichte golf die over de balken loopt: er wordt opnieuw gemeten. De
   balken komen na elkaar aan de beurt, zodat het één beweging wordt. */
.balk::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    100deg,
    transparent 30%,
    rgba(255, 255, 255, 0.75) 50%,
    transparent 70%
  );
  transform: translateX(-100%);
}

@media (prefers-reduced-motion: no-preference) {
  .js .scherm--cijfers.meet .balk::after {
    animation: meetgolf 7s ease-in-out infinite;
    animation-delay: calc(2.6s + var(--rij, 0) * 180ms);
  }
}

@keyframes meetgolf {
  0%, 55% { transform: translateX(-100%); }
  75%, 100% { transform: translateX(100%); }
}

/* Zelfde afspraak als bij de boog: gevuld tenzij JS het overneemt. */
.balk i {
  display: block;
  height: 100%;
  width: var(--vul, 0);
  border-radius: 999px;
  background: var(--groen);
}

/* Zelfde afspraak als bij de boog hierboven. */
@media (prefers-reduced-motion: no-preference) {
  .js .balk i {
    width: 0;
  }
}

.js .scherm--cijfers.meet .balk i {
  width: var(--vul);
}

@media (prefers-reduced-motion: no-preference) {
  .js .scherm--cijfers.meet .balk i {
    transition: width 1.2s cubic-bezier(0.22, 1, 0.36, 1) 200ms;
  }
}

.scherm figcaption {
  padding: 0.7rem var(--maat-s);
  border-top: 1px solid var(--lijn);
  background: color-mix(in srgb, var(--vlak) 60%, var(--wit));
  font-family: var(--font-kop);
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--inkt-zacht);
}

/* — Fasekoppen en "wat je nodig hebt" bij de werkwijze — */
.fase-kop {
  font-family: var(--font-kop);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--acc-diep);
  margin: var(--maat-l) 0 0;
}

.fase-kop--samen {
  color: var(--groen-diep);
}

.fase-kop span {
  display: block;
  font-family: var(--font-tekst);
  font-size: 0.92rem;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--inkt-zacht);
  margin-top: 0.2rem;
}

.nodig {
  margin-top: var(--maat-l);
  border: 1px solid var(--lijn);
  border-radius: var(--rond);
  background: var(--wit);
  padding: var(--maat-m);
  box-shadow: var(--schaduw);
}

.nodig > p {
  color: var(--inkt-zacht);
  font-size: 0.98rem;
}

.nodig ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.5rem;
}

@media (min-width: 52rem) {
  .nodig ul {
    grid-template-columns: repeat(3, 1fr);
  }
}

.nodig li {
  color: var(--inkt-zacht);
  font-size: 0.95rem;
  border-left: 3px solid color-mix(in srgb, var(--acc) 45%, var(--wit));
  padding-left: 0.75rem;
}

.nodig li strong {
  color: var(--inkt);
}

/* — Werkwijze: drie stappen — */
.stappen {
  list-style: none;
  margin: var(--maat-l) 0 0;
  padding: 0;
  display: grid;
  gap: var(--maat-m);
  counter-reset: stap;
}

@media (min-width: 52rem) {
  .stappen {
    grid-template-columns: repeat(3, 1fr);
  }
}

.stap {
  counter-increment: stap;
  background: var(--wit);
  border: 1px solid var(--lijn);
  border-radius: var(--rond);
  padding: var(--maat-m);
  box-shadow: var(--schaduw);
}

.stap::before {
  content: counter(stap);
  display: inline-grid;
  place-items: center;
  width: 2.2rem;
  height: 2.2rem;
  border-radius: 50%;
  background: var(--groen);
  color: #fff;
  font-family: var(--font-kop);
  font-weight: 600;
  margin-bottom: var(--maat-s);
}

.stap p {
  color: var(--inkt-zacht);
  font-size: 0.98rem;
  margin: 0;
}

/* Varianten ná de basisregels: `.stappen` en `.stappen--vier` wegen even
   zwaar, dus wint hier de laatste. Stonden ze eerder, dan deed geen van
   deze regels iets. */
.stappen--vier,
.stappen--drie {
  margin-top: var(--maat-m);
}

@media (min-width: 40rem) {
  .stappen--vier {
    grid-template-columns: 1fr 1fr;
  }
}

@media (min-width: 62rem) {
  .stappen--vier {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* De tweede lijst loopt door op 5: het nummer komt uit een CSS-teller, en
   die trekt zich niets aan van `start="5"` op de <ol>. */
.stappen--drie {
  counter-reset: stap 4;
}

.stap--samen::before {
  background: var(--acc);
}

/* — Cases — */
.cases {
  display: grid;
  gap: var(--maat-m);
  margin-top: var(--maat-l);
}

@media (min-width: 40rem) {
  .cases {
    grid-template-columns: 1fr 1fr;
  }
}

@media (min-width: 64rem) {
  .cases {
    grid-template-columns: repeat(4, 1fr);
  }
}

.case {
  display: flex;
  flex-direction: column;
  background: var(--wit);
  border: 1px solid var(--lijn);
  border-radius: var(--rond);
  padding: var(--maat-m);
  box-shadow: var(--schaduw);
}

.case__label {
  align-self: flex-start;
  font-family: var(--font-kop);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--groen-diep);
  background: color-mix(in srgb, var(--groen) 12%, var(--wit));
  border-radius: 999px;
  padding: 0.25rem 0.75rem;
  margin-bottom: var(--maat-s);
}

.case p {
  color: var(--inkt-zacht);
  font-size: 0.98rem;
  flex-grow: 1;
}

.case a {
  font-size: 0.95rem;
}

/* — Over — */
.over {
  max-width: 46em;
}

.over p {
  color: var(--inkt-zacht);
  font-size: 1.08rem;
}

.over p strong {
  color: var(--inkt);
}

/* — FAQ — */
.faq {
  display: grid;
  gap: var(--maat-s);
  margin-top: var(--maat-l);
}

.faq__item {
  background: var(--wit);
  border: 1px solid var(--lijn);
  border-radius: var(--rond);
  padding: var(--maat-s) var(--maat-m);
  box-shadow: var(--schaduw);
}

.faq__vraag {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--maat-s);
  font-family: var(--font-kop);
  font-weight: 600;
  font-size: 1.02rem;
  color: var(--inkt);
  padding-block: 0.35rem;
}

.faq__vraag::-webkit-details-marker {
  display: none;
}

.faq__vraag::after {
  content: "+";
  flex-shrink: 0;
  color: var(--acc);
  font-size: 1.3rem;
  line-height: 1;
}

.faq__item[open] .faq__vraag::after {
  content: "–";
}

.faq__antwoord p {
  color: var(--inkt-zacht);
  font-size: 0.98rem;
  margin: 0.5rem 0 0.15rem;
}

/* — Contact — */
.contact {
  text-align: center;
  padding-block: clamp(4rem, 9vw, 6rem);
}

.contact__binnen {
  max-width: 38em;
  margin-inline: auto;
}

.contact p {
  color: var(--inkt-zacht);
  font-size: 1.08rem;
}

/* — Contactformulier — */
.formulier {
  margin-top: var(--maat-m);
  text-align: left;
  display: grid;
  gap: var(--maat-s);
}

.formulier__rij {
  display: grid;
  gap: var(--maat-s);
}

@media (min-width: 40rem) {
  .formulier__rij {
    grid-template-columns: 1fr 1fr;
  }
}

.formulier__veld {
  display: grid;
  gap: 0.35rem;
  font-size: 0.95rem;
  color: var(--inkt-zacht);
}

.formulier__veld input,
.formulier__veld textarea {
  font: inherit;
  color: var(--inkt);
  background: var(--wit);
  border: 1px solid var(--lijn);
  border-radius: var(--rond-klein);
  padding: 0.65rem 0.85rem;
  width: 100%;
}

.formulier__veld input:focus-visible,
.formulier__veld textarea:focus-visible {
  outline: 2px solid var(--acc);
  outline-offset: 0;
  border-color: var(--acc);
}

.formulier__veld textarea {
  resize: vertical;
  min-height: 7rem;
}

.formulier .knop {
  justify-self: center;
  border: 0;
  cursor: pointer;
}

/* Honingpot: uit beeld, niet display:none — spamscripts vullen hem dan nog in. */
.formulier__honing {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.formulier__status {
  text-align: center;
  font-size: 0.98rem;
  margin: 0;
  min-height: 1.5em;
}

.formulier__status--goed {
  color: var(--groen-diep);
}

.formulier__status--fout {
  color: #a8442a;
}

/* — Voettekst — */
.voet {
  border-top: 1px solid var(--lijn);
  padding-block: var(--maat-l);
  font-size: 0.9rem;
  color: var(--inkt-zacht);
}

.voet__binnen {
  display: flex;
  flex-wrap: wrap;
  gap: var(--maat-s) var(--maat-l);
  align-items: center;
  justify-content: space-between;
}

.voet a {
  color: var(--inkt-zacht);
}

.voet a:hover {
  color: var(--inkt);
}

/* De links rechtsonder blijven bij elkaar staan; zonder deze groepering duwt
   `space-between` ze los uit elkaar zodra er een tweede link bij komt. */
.voet__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--maat-s) var(--maat-m);
  align-items: center;
}

/* — Onthullen bij scrollen (JS zet .zichtbaar; zonder JS is alles zichtbaar) — */
@media (prefers-reduced-motion: no-preference) {
  /* Bewust een animatie en geen transition. Een transition op `.onthul` zou
     ook de hover eronder overnemen — die zou dan 620 ms duren, mét de
     wachttijd van de rij erbij. Nu blijft `transition` vrij voor hover.
     `backwards` houdt de beginstand vast tijdens de wachttijd; er staat geen
     `forwards`, want een blijvende animatiewaarde wint van de hover-transform. */
  .js .onthul {
    opacity: 0;
    --van: translateY(18px);
  }

  .js .onthul.zichtbaar {
    opacity: 1;
    animation: onthullen 620ms cubic-bezier(0.22, 1, 0.36, 1) backwards;
    /* JS zet --rij per kaart binnen dezelfde rij, zodat ze na elkaar komen. */
    animation-delay: calc(var(--rij, 0) * 90ms);
  }

  /* Kaarten en schermen komen iets dieper vandaan: meer gevoel van laag. */
  .js .kaart.onthul,
  .js .collega.onthul,
  .js .case.onthul,
  .js .stap.onthul {
    --van: translateY(26px) scale(0.985);
  }

}

@keyframes onthullen {
  from {
    opacity: 0;
    transform: var(--van, translateY(18px));
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* De gloed achter hero en contact beweegt langzaam mee. */
@media (prefers-reduced-motion: no-preference) {
  .gloed::before {
    animation: gloeien 14s ease-in-out infinite alternate;
  }
}

@keyframes gloeien {
  from { opacity: 0.75; transform: translate3d(0, 0, 0) scale(1); }
  to { opacity: 1; transform: translate3d(-1.5%, 1%, 0) scale(1.06); }
}

/* Aanraakbare dingen reageren. */
.kaart,
.collega,
.case,
.stap,
.scherm {
  transition: transform 260ms cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 260ms ease;
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .kaart:hover,
  .collega:hover,
  .case:hover,
  .stap:hover {
    transform: translateY(-4px);
    box-shadow: 0 2px 4px rgba(29, 39, 51, 0.05), 0 20px 40px rgba(29, 39, 51, 0.11);
  }

  .scherm:hover {
    transform: translateY(-3px);
  }

  .collega:hover img {
    border-color: var(--acc);
  }

  .collega img {
    transition: border-color 260ms ease;
  }
}

/* Op /roadmap zijn `.kaart` (het lege meetvak) en `.stap` (de zeven
   stappen) geen links — er is daar niets om op te klikken. Zonder deze
   regel liften ze toch mee met de hoverstijl hierboven en belooft de
   pagina een klikbaarheid die niet bestaat. Selector met hogere
   specificiteit dan `.kaart:hover`/`.stap:hover`, dus buiten de
   media-query is genoeg. */
.pagina-roadmap .kaart:hover,
.pagina-roadmap .stap:hover {
  transform: none;
  box-shadow: var(--schaduw);
}