/* ==========================================================================
   roxingmoms · merk-tokens uit het merkboek
   Petrol is de hoofdkleur, koraal enkel als accent.
   Titels Bricolage Grotesque · tekst Onest · accent Shantell Sans.
   ========================================================================== */

:root {
  /* kleuren */
  --petrol:        #1e4e4a;  /* anker, hoofdkleur */
  --petrol-zacht:  #2e635e;
  --petrol-diep:   #143734;
  --zeegroen:      #86c6ba;  /* herkenning */
  --mint:          #cbe5da;  /* zacht */
  --koraal:        #f08a5d;  /* accent, spaarzaam */
  --zeewit:        #f5faf7;  /* achtergrond */
  --schelp:        #edf4f1;
  --zand:          #fbede5;  /* zachte koraal-tint voor vlakken */

  /* fonts */
  --font-titel:  "Bricolage Grotesque", system-ui, sans-serif;
  --font-tekst:  "Onest", system-ui, sans-serif;
  --font-accent: "Shantell Sans", cursive;

  /* maten */
  --radius:     22px;
  --radius-l:   34px;
  --maxbreedte: 74rem;
  --gutter:     clamp(1.1rem, 5vw, 3.5rem);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  font-family: var(--font-tekst);
  color: var(--petrol);
  background: var(--zeewit);
  line-height: 1.65;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }

.wrap {
  max-width: var(--maxbreedte);
  margin: 0 auto;
  padding-inline: var(--gutter);
}

/* --------------------------------------------------------------------------
   Woordmerk · ro[x-golf]ingmoms met de bewegingslijn eronder
   -------------------------------------------------------------------------- */
.wordmark {
  position: relative;
  display: inline-block;
  padding-bottom: 0.24em;
  line-height: 0.9;
  text-decoration: none;
}
.wordmark .word {
  position: relative;
  z-index: 1;
  display: inline-block;
  font-family: var(--font-titel);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--petrol);
  font-size: 1.5rem;
  white-space: nowrap;
}
.wordmark .xmark {
  display: inline-block;
  height: 0.6em;
  width: 0.56em;
  vertical-align: -0.03em;
  margin: 0 -0.055em;
  overflow: visible;
}
.xmark path {
  fill: none;
  stroke: currentColor;
  stroke-width: 6.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.wordmark .word .xmark { color: var(--petrol); }
.wordmark .wave-onder {
  position: absolute;
  left: 0; right: 0; bottom: 0.02em;
  width: 100%; height: 0.42em;
  z-index: 0;
  overflow: visible;
  pointer-events: none;
}

/* op donkere achtergrond */
.op-petrol .wordmark .word,
.op-petrol .wordmark .word .xmark { color: var(--zeewit); }

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(245, 250, 247, 0.9);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(30, 78, 74, 0.08);
}
.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 0.9rem;
}
.site-nav {
  display: flex;
  align-items: center;
  gap: clamp(0.9rem, 2vw, 1.8rem);
}
.site-nav a {
  color: var(--petrol);
  text-decoration: none;
  font-size: 0.95rem;
  font-weight: 500;
  position: relative;
  padding-bottom: 2px;
}
.site-nav a:hover { color: var(--petrol-zacht); }
.site-nav a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 2px;
  border-radius: 2px;
  background: var(--zeegroen);
  transform: scaleX(0);
  transition: transform 0.2s ease;
}
.site-nav a:hover::after { transform: scaleX(1); }
.site-nav .knop-klein { display: none; }
@media (min-width: 780px) {
  .site-nav .knop-klein { display: inline-block; }
}
@media (max-width: 620px) {
  .site-nav .verberg-mobiel { display: none; }
}

/* --------------------------------------------------------------------------
   Knoppen
   -------------------------------------------------------------------------- */
.knop,
.knop-licht,
.knop-lijn,
.knop-klein {
  display: inline-block;
  font-family: var(--font-tekst);
  font-weight: 600;
  text-decoration: none;
  border: none;
  cursor: pointer;
  border-radius: 100px;
  transition: transform 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.knop {
  background: var(--petrol);
  color: #fff;
  padding: 0.95rem 1.7rem;
  font-size: 1rem;
}
.knop:hover { background: var(--koraal); transform: translateY(-2px); }

.knop-licht {
  background: var(--zeewit);
  color: var(--petrol);
  padding: 0.95rem 1.7rem;
  font-size: 1rem;
}
.knop-licht:hover { background: var(--mint); transform: translateY(-2px); }

.knop-lijn {
  background: transparent;
  color: var(--petrol);
  border: 1.5px solid rgba(30, 78, 74, 0.28);
  padding: 0.9rem 1.6rem;
  font-size: 1rem;
}
.knop-lijn:hover { border-color: var(--petrol); background: rgba(30, 78, 74, 0.05); transform: translateY(-2px); }

.knop-klein {
  background: var(--petrol);
  color: #fff;
  padding: 0.55rem 1.1rem;
  font-size: 0.9rem;
}
.knop-klein:hover { background: var(--koraal); }

:is(.knop, .knop-licht, .knop-lijn, .knop-klein):focus-visible {
  outline: 3px solid var(--zeegroen);
  outline-offset: 3px;
}

/* --------------------------------------------------------------------------
   Typografie
   -------------------------------------------------------------------------- */
h1, h2, h3 {
  font-family: var(--font-titel);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.08;
}
h1 { font-size: clamp(2.4rem, 7vw, 4.4rem); }
h2 { font-size: clamp(1.9rem, 4.4vw, 3rem); }
h3 { font-size: clamp(1.15rem, 2vw, 1.4rem); font-weight: 700; line-height: 1.25; }

.krabbel {
  font-family: var(--font-accent);
  color: var(--petrol);
  font-size: clamp(1.4rem, 3vw, 1.9rem);
  line-height: 1.2;
  display: inline-block;
}
.op-petrol .krabbel { color: var(--zeegroen); }

.oogje {
  font-size: 0.76rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--petrol-zacht);
  display: block;
  margin-bottom: 0.8rem;
}
.op-petrol .oogje { color: var(--zeegroen); }

.lead { font-size: clamp(1.05rem, 1.7vw, 1.25rem); max-width: 46ch; }
.zacht { color: var(--petrol-zacht); }

/* titel met een golfje eronder: één wave per vlak */
.titel-golf { display: inline-block; position: relative; padding-bottom: 0.3em; }
.titel-golf .streep {
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 0.26em;
  overflow: visible;
}

/* --------------------------------------------------------------------------
   Secties en golvende overgangen
   -------------------------------------------------------------------------- */
section { position: relative; }
.blok { padding-block: clamp(3.5rem, 9vw, 7rem); }

.vlak-zeewit { background: var(--zeewit); }
.vlak-schelp { background: var(--schelp); }
.vlak-mint   { background: var(--mint); }
.vlak-zand   { background: var(--zand); }
.vlak-petrol { background: var(--petrol); color: var(--zeewit); }
.vlak-petrol .zacht { color: var(--mint); }

/* De golvende rand tussen twee vlakken. De svg vult de kleur van het
   vlak dat eronder komt, zodat de overgang echt golft. */
.golfrand {
  display: block;
  width: 100%;
  height: clamp(46px, 7vw, 96px);
  margin-bottom: -1px;
}
.golfrand + .golfrand { margin-top: -1px; }

/* de dunne ombré-bewegingslijn */
.beweeglijn { display: block; width: 100%; height: 26px; overflow: visible; }
.beweeglijn path { fill: none; stroke-width: 5; stroke-linecap: round; }

/* tape: dezelfde golf dicht op elkaar, als accentstrook */
.tape {
  height: 40px;
  background: var(--mint);
  overflow: hidden;
  display: flex;
  align-items: center;
}
.tape svg { width: 100%; height: 100%; }
.tape path { fill: none; stroke: var(--petrol); stroke-width: 3; stroke-linecap: round; opacity: 0.85; }

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */
.hero {
  background: var(--zeewit);
  padding-top: clamp(2.5rem, 6vw, 4.5rem);
  padding-bottom: clamp(2rem, 5vw, 3.5rem);
  overflow: hidden;
}
.hero .wrap {
  display: grid;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
@media (min-width: 900px) {
  .hero .wrap { grid-template-columns: 1.05fr 0.95fr; }
}
.hero-logo { margin-bottom: 1.6rem; }
.hero-logo .word { font-size: clamp(2.6rem, 7.5vw, 4rem); }
.hero h1 {
  font-size: clamp(2rem, 4.6vw, 3.1rem);
  max-width: 15ch;
  margin-bottom: 1.1rem;
}
.hero .lead { margin-bottom: 1.6rem; }
.hero-knoppen { display: flex; flex-wrap: wrap; gap: 0.8rem; align-items: center; }
.hero-krabbel { margin-top: 1.8rem; }

/* Geen gekleurde vorm meer achter de foto. Die stak aan elke kant een ander
   stuk uit (-8% -6% -6% -8%) met nog eens een eigen ronding, en dat trok het
   hele blok scheef zodra er een echte foto in stond. */
.hero-foto { position: relative; }

/* --------------------------------------------------------------------------
   Fotoplekken · vervangen door echte foto's zodra ze er zijn
   -------------------------------------------------------------------------- */
.foto {
  position: relative;
  z-index: 1;
  background: var(--schelp);
  border: 1px dashed rgba(30, 78, 74, 0.25);
  border-radius: var(--radius-l);
  aspect-ratio: 4 / 5;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 1.5rem;
  overflow: hidden;
}
.foto span {
  font-family: var(--font-accent);
  color: var(--petrol-zacht);
  font-size: 1.05rem;
  line-height: 1.35;
  max-width: 22ch;
}
.foto.breed  { aspect-ratio: 16 / 10; }
.foto.vierkant { aspect-ratio: 1 / 1; }
.foto.golvend { border-radius: 56% 44% 48% 52% / 48% 50% 50% 52%; }

/* Staat er een echte foto in plaats van een leeg kader, dan valt de stippellijn
   weg en vult het beeld de vorm. De mint-achtergrond blijft staan zolang de
   foto nog aan het laden is, zodat de vorm niet opspringt.

   Bewust een gewone afgeronde rechthoek en geen organische vorm: een blob
   werkt als leeg kader, maar snijdt een echte foto scheef af. Het merkboek
   zegt trouwens ook dat de wave niet gecombineerd mag worden met andere
   golvende vormen, en een blob rond een foto is precies dat.

   De verhouding staat op 3/4, gelijk aan de foto's zelf, zodat er niets
   afgesneden wordt. Staat er ooit een foto met een andere verhouding in,
   dan vult object-fit het kader netjes op. */
img.foto {
  border: none;
  padding: 0;
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: var(--radius-l);
  background: var(--mint);
  box-shadow: 0 24px 48px -32px rgba(30, 78, 74, 0.55);
}
.contact-foto { max-width: 21rem; margin-top: 1.4rem; }

/* --------------------------------------------------------------------------
   Herkenning · "geen tijd, geen goesting"
   -------------------------------------------------------------------------- */
.herkenning .wrap {
  display: grid;
  gap: clamp(1.6rem, 4vw, 3.5rem);
}
@media (min-width: 860px) {
  .herkenning .wrap { grid-template-columns: 1fr 1fr; align-items: center; }
}
.herkenning-lijst { display: grid; gap: 0.9rem; margin-top: 1.6rem; }
.herkenning-lijst li {
  list-style: none;
  display: flex;
  gap: 0.85rem;
  align-items: flex-start;
  font-size: 1.02rem;
}
.herkenning-lijst .bolletje {
  flex: none;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--zeegroen);
  display: grid; place-items: center;
  margin-top: 0.22rem;
}
.herkenning-lijst .bolletje svg { width: 15px; height: 15px; overflow: visible; }
.herkenning-lijst .bolletje path { fill: none; stroke: var(--petrol); stroke-width: 3.2; stroke-linecap: round; }

/* --------------------------------------------------------------------------
   Aanbod
   -------------------------------------------------------------------------- */
.aanbod-kop { max-width: 52ch; margin-bottom: clamp(2rem, 4vw, 3rem); }

.kaarten {
  display: grid;
  gap: clamp(1rem, 2vw, 1.5rem);
  grid-template-columns: 1fr;
}
@media (min-width: 700px)  { .kaarten { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1080px) { .kaarten { grid-template-columns: repeat(3, 1fr); } }

.kaart {
  background: var(--zeewit);
  border: 1px solid rgba(30, 78, 74, 0.09);
  border-radius: var(--radius-l);
  padding: clamp(1.5rem, 2.6vw, 2.1rem);
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  position: relative;
  overflow: hidden;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.kaart:hover {
  transform: translateY(-4px);
  box-shadow: 0 26px 44px -30px rgba(30, 78, 74, 0.55);
}

.kaart h3 { margin-top: 0.4rem; }
.kaart p { font-size: 0.98rem; color: var(--petrol-zacht); }
.kaart .prijsje {
  font-family: var(--font-accent);
  color: var(--petrol);
  font-size: 1.15rem;
}
.kaart .plaatsjes {
  font-size: 0.85rem;
  color: var(--petrol-zacht);
  border-top: 1px solid rgba(30, 78, 74, 0.1);
  padding-top: 0.8rem;
  margin-top: auto;
}
.kaart.uitgelicht { background: var(--mint); border-color: transparent; }
.kaart.uitgelicht p { color: var(--petrol); }
.kaart .lintje {
  align-self: flex-start;
  background: var(--petrol);
  color: var(--zeewit);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 600;
  padding: 0.25rem 0.75rem;
  border-radius: 100px;
}

/* --------------------------------------------------------------------------
   Club-blok
   -------------------------------------------------------------------------- */
.club .wrap {
  display: grid;
  gap: clamp(2rem, 5vw, 4rem);
}
@media (min-width: 920px) {
  .club .wrap { grid-template-columns: 1fr 1fr; align-items: start; }
}
.weeklijst { display: grid; gap: 0.7rem; margin-top: 1.6rem; }
.weeklijst li {
  list-style: none;
  background: rgba(245, 250, 247, 0.08);
  border: 1px solid rgba(203, 229, 218, 0.22);
  border-radius: 16px;
  padding: 0.85rem 1.1rem;
  display: flex;
  gap: 0.85rem;
  align-items: baseline;
  font-size: 1rem;
}
.weeklijst .nummer {
  font-family: var(--font-titel);
  font-weight: 800;
  color: var(--zeegroen);
  font-size: 0.95rem;
  min-width: 1.6rem;
}
.prijskaart {
  background: var(--zeewit);
  color: var(--petrol);
  border-radius: var(--radius-l);
  padding: clamp(1.6rem, 3vw, 2.4rem);
  position: relative;
  overflow: hidden;
}
.prijskaart .bedrag {
  font-family: var(--font-titel);
  font-weight: 800;
  font-size: clamp(2.4rem, 6vw, 3.4rem);
  line-height: 1;
  letter-spacing: -0.03em;
}
.prijskaart .permaand { color: var(--petrol-zacht); font-size: 0.95rem; }
.prijskaart ul { list-style: none; display: grid; gap: 0.55rem; margin: 1.4rem 0; }
.prijskaart li { display: flex; gap: 0.7rem; align-items: flex-start; font-size: 0.98rem; }
.prijskaart li .vink { color: var(--zeegroen); flex: none; font-weight: 700; }
.prijskaart .knop { width: 100%; text-align: center; }
.prijskaart .fijnprint { font-size: 0.85rem; color: var(--petrol-zacht); margin-top: 0.9rem; text-align: center; }

/* --------------------------------------------------------------------------
   Wie zijn wij
   -------------------------------------------------------------------------- */
.overons .wrap {
  display: grid;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
@media (min-width: 900px) {
  .overons .wrap { grid-template-columns: 0.9fr 1.1fr; }
}
.overons p + p { margin-top: 1rem; }
.overons .foto-duo { position: relative; }
.namen {
  display: flex;
  gap: 1.4rem;
  margin-top: 1.6rem;
  flex-wrap: wrap;
}
.naam { display: flex; align-items: center; gap: 0.55rem; font-weight: 600; }
.naam .stip { width: 13px; height: 13px; border-radius: 50%; flex: none; }
.naam .stip.anke  { background: var(--zeegroen); }
.naam .stip.ellen { background: var(--koraal); }

/* --------------------------------------------------------------------------
   Citaat
   -------------------------------------------------------------------------- */
.citaat { text-align: center; }
.citaat blockquote {
  font-family: var(--font-titel);
  font-weight: 700;
  font-size: clamp(1.5rem, 3.6vw, 2.4rem);
  line-height: 1.22;
  letter-spacing: -0.02em;
  max-width: 22ch;
  margin: 0 auto;
}
.citaat .bron { margin-top: 1.4rem; font-size: 0.95rem; }
.citaat .beweeglijn { max-width: 220px; margin: 1.8rem auto 0; }

/* --------------------------------------------------------------------------
   Locaties
   -------------------------------------------------------------------------- */
.locatie-rij {
  display: grid;
  gap: clamp(0.9rem, 2vw, 1.4rem);
  grid-template-columns: 1fr;
  margin-top: 2.2rem;
}
@media (min-width: 640px) { .locatie-rij { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px) { .locatie-rij { grid-template-columns: repeat(4, 1fr); } }
.locatie {
  background: var(--zeewit);
  border: 1px solid rgba(30, 78, 74, 0.09);
  border-radius: var(--radius);
  padding: 1.3rem 1.4rem;
}
.locatie b { font-family: var(--font-titel); font-size: 1.05rem; display: block; }
.locatie span { font-size: 0.88rem; color: var(--petrol-zacht); }

/* --------------------------------------------------------------------------
   Contact
   -------------------------------------------------------------------------- */
.contact .wrap {
  display: grid;
  gap: clamp(2rem, 5vw, 4rem);
}
@media (min-width: 900px) {
  .contact .wrap { grid-template-columns: 0.85fr 1.15fr; align-items: start; }
}
form { display: grid; gap: 1rem; }
label { display: grid; gap: 0.35rem; font-weight: 600; font-size: 0.95rem; }
input, textarea, select {
  padding: 0.8rem 1rem;
  border: 1.5px solid rgba(30, 78, 74, 0.18);
  border-radius: 14px;
  font: inherit;
  color: var(--petrol);
  background: #fff;
}
input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: var(--zeegroen);
  box-shadow: 0 0 0 3px rgba(134, 198, 186, 0.35);
}
textarea { resize: vertical; }
.hp { position: absolute; left: -9999px; }
#form-status { font-size: 0.95rem; min-height: 1.5em; }
#form-status.gelukt { color: var(--petrol); font-weight: 600; }
#form-status.mis {
  color: var(--petrol);
  font-weight: 600;
  background: rgba(240, 138, 93, 0.22);
  border-radius: 12px;
  padding: 0.5rem 0.85rem;
}
.contact-info { display: grid; gap: 1.2rem; }
.contact-info a { color: var(--petrol); }

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
.site-footer { background: var(--petrol); color: var(--zeewit); }
.site-footer .wrap {
  padding-block: clamp(2.5rem, 5vw, 3.5rem);
  display: flex;
  flex-wrap: wrap;
  gap: 1.6rem;
  align-items: center;
  justify-content: space-between;
}
.site-footer .kreet { font-family: var(--font-accent); color: var(--mint); font-size: 1.15rem; }
.site-footer .fijn { width: 100%; font-size: 0.85rem; color: var(--mint); opacity: 0.75; }
.site-footer a { color: var(--mint); }

/* --------------------------------------------------------------------------
   Beweging · zachte deining, uit bij prefers-reduced-motion
   -------------------------------------------------------------------------- */
@keyframes deining {
  0%, 100% { transform: translateX(0); }
  50%      { transform: translateX(-2.2%); }
}
.deint {
  width: 106%;
  animation: deining 9s ease-in-out infinite;
}
@keyframes deining-traag {
  0%, 100% { transform: translateX(-2%); }
  50%      { transform: translateX(0); }
}
.deint-traag {
  width: 106%;
  animation: deining-traag 13s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
  .deint, .deint-traag { width: 100%; transform: none; }
}

/* houder rond een golfrand zodat de deining niet uitloopt */
.golfrand-houder { display: block; overflow: hidden; line-height: 0; }

/* Golvend ritme in het kaartenraster: brede en smalle kaarten wisselen elkaar af. */
@media (min-width: 1080px) {
  .kaart.breed-2 { grid-column: span 2; }
}

/* Mobiele header: woordmerk wat kleiner, sectielinks weg, de knop blijft staan. */
@media (max-width: 780px) {
  .site-header .wordmark .word { font-size: 1.25rem; }
  .site-nav { gap: 0.85rem; }
  .site-nav .knop-klein { display: inline-block; }
}
@media (max-width: 420px) {
  .site-nav a[href="#contact"] { display: none; }
}

/* --------------------------------------------------------------------------
   Nav-knop: .site-nav a is specifieker dan .knop-klein, dus de kleur en het
   hover-streepje moeten hier expliciet overschreven worden.
   -------------------------------------------------------------------------- */
.site-nav a.knop-klein { color: #fff; }
.site-nav a.knop-klein:hover { color: #fff; }
.site-nav a.knop-klein::after { content: none; }

/* --------------------------------------------------------------------------
   De golf tekent zichzelf uit
   De bewegingslijn loopt van links naar rechts vol, zoals ze in het merkboek
   onder het woordmerk doorloopt tot het einde van het woord. Het pad heeft
   pathLength="100", dus de streepjes rekenen in procenten en blijven kloppen
   hoe breed de svg ook uitgerekt wordt.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  /* De verborgen begintoestand hangt aan .wacht, en die zet javascript er zelf
     op om ze meteen weer af te halen. Zo is zichtbaar de standaard: gaat er in
     het script iets mis, dan staat alles er gewoon, in plaats van onzichtbaar
     te blijven hangen. Dat was precies wat er misliep toen de golven op een
     scroll-melding wachtten die nooit kwam.

     De veeg gebruikt clip-path en geen stroke-dasharray: dat laatste rekent
     samen met non-scaling-stroke in schermpixels in plaats van in de lengte
     van het pad, waardoor de lijn halverwege het woord stilviel. De boven- en
     ondermarge staan negatief zodat de dikte nergens afgesneden wordt. */
  /* De open eindtoestand staat er expliciet als inset en niet als "none":
     clip-path: none valt niet te interpoleren, dus dan sprong de golf er in
     een keer bij in plaats van open te vegen. Deze inset ligt aan alle kanten
     buiten het kader, dus ze knipt niets af en de golf staat gewoon volledig. */
  .js .tekenbaar {
    clip-path: inset(-80% -3% -80% -3%);
    transition: clip-path 1.4s cubic-bezier(0.22, 0.61, 0.36, 1);
  }
  .js .tekenbaar.wacht { clip-path: inset(-80% 100% -80% -3%); }

  /* Hero komt rustig opzetten, met een klein verschil per regel. */
  .js .opkomst {
    transition: opacity 0.75s ease, transform 0.75s cubic-bezier(0.22, 0.61, 0.36, 1);
  }
  .js .opkomst.wacht { opacity: 0; transform: translateY(16px); }
}