/* ==========================================================================
   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);
}
/* Let op de :not(.knop-klein). Zonder die uitzondering pakte de padding-bottom
   van 2px ook de knop, die zelf 0.55rem onder hoort te hebben. De knop kreeg
   dan 8,8 boven en 2 onder, waardoor zijn tekst scheef zat tegenover de links
   ernaast en hij te laag werd om met een duim te raken. */
.site-nav a:not(.knop-klein) {
  color: var(--petrol);
  text-decoration: none;
  font-size: 0.95rem;
  font-weight: 500;
  position: relative;
}
.site-nav a:not(.knop-klein):hover { color: var(--petrol-zacht); }
.site-nav a:not(.knop-klein)::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -4px;
  height: 2px;
  border-radius: 2px;
  background: var(--zeegroen);
  transform: scaleX(0);
  transition: transform 0.2s ease;
}
.site-nav a:not(.knop-klein):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(58px, 9vw, 124px);
  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; }

/* 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.75rem;
  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: center; }
}
.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; }
/* Petrol en geen zeegroen: op de witte prijskaart haalde zeegroen maar 1,84
   op 1 aan contrast, waardoor de vinkjes zo goed als onzichtbaar waren. */
.prijskaart li .vink { color: var(--petrol); 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: center; }
}
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; }
}


/* --------------------------------------------------------------------------
   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);
  }
  /* transition: none is hier geen detail maar de kern. Het script zet .wacht
     erop en haalt hem één uitgelezen layout later weer af. Zonder deze regel
     wordt ook die eerste stap een animatie van 1,4 seconde, en dan is de golf
     bij het afhalen nog nauwelijks dichtgeschoven. Resultaat: geen zichtbare
     veeg. De begintoestand moet dus meteen staan, en enkel de weg terug mag
     animeren. */
  .js .tekenbaar.wacht {
    clip-path: inset(-80% 100% -80% -3%);
    transition: none;
  }

  /* 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);
    transition: none;
  }
}

/* --------------------------------------------------------------------------
   Ronde foto bovenaan een aanbod-kaart
   Een cirkel past bij het merk zonder met de golf te concurreren, en hij
   werkt op elke kaartbreedte gelijk. Vaste maat, dus de brede en de smalle
   kaarten krijgen dezelfde cirkel en de rij blijft rustig.
   -------------------------------------------------------------------------- */
.kaartfoto {
  align-self: flex-start;
  width: 140px;
  /* height: auto is nodig, geen overbodige regel: zonder deze regel wint de
     height="800" uit de HTML en wordt de cirkel 140 bij 800. */
  height: auto;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  object-fit: cover;
  background: var(--mint);
  margin-bottom: 0.2rem;
}
.kaart.uitgelicht .kaartfoto { background: var(--zeewit); }
@media (max-width: 480px) {
  .kaartfoto { width: 112px; }
}


/* --------------------------------------------------------------------------
   Trainingsclip
   Staand beeld, dus bewust smal gehouden. Zelfde ronding als de foto's.
   -------------------------------------------------------------------------- */
.clip {
  display: block;
  width: 100%;
  max-width: 17rem;
  height: auto;
  aspect-ratio: 9 / 16;
  margin: clamp(1.6rem, 4vw, 2.4rem) auto 0;
  object-fit: cover;
  border-radius: var(--radius-l);
  background: var(--zeewit);
  box-shadow: 0 24px 48px -32px rgba(30, 78, 74, 0.55);
}

/* Knoppen in een kaart stonden met een inline-stijl links vastgezet. Dat staat
   nu hier, zodat de mobiele weergave ze kan centreren. */
.kaart .knop,
.kaart .knop-lijn { align-self: flex-start; }



/* Een select wordt vanzelf zo breed als zijn langste optie, en in een raster
   duwt dat de hele kolom mee open. Met min-width 0 mag hij krimpen tot de
   breedte die hij krijgt, in plaats van de layout te bepalen. */
form, form label { min-width: 0; }
input, textarea, select { width: 100%; min-width: 0; }

/* --------------------------------------------------------------------------
   De x van het woordmerk is een tekening, geen letter. Deze verborgen x zorgt
   dat de tekst van de pagina wel "roxingmoms" leest: voor zoekmachines, voor
   voorleessoftware, en voor wie de naam kopieert.
   -------------------------------------------------------------------------- */
.verborgen-x {
  display: inline-block;
  width: 0;
  overflow: hidden;
  vertical-align: baseline;
}


/* --------------------------------------------------------------------------
   Resultaatregel in het club-blok
   Niet wat je krijgt, maar wat er verandert.
   -------------------------------------------------------------------------- */
.resultaat {
  margin-top: 1.4rem;
  max-width: 46ch;
  padding: 1rem 1.3rem;
  border-left: 3px solid var(--zeegroen);
  border-radius: 0 14px 14px 0;
  background: rgba(245, 250, 247, 0.08);
  font-size: 1.05rem;
}

/* --------------------------------------------------------------------------
   Ervaringen
   -------------------------------------------------------------------------- */
.ervaring-rij {
  display: grid;
  gap: clamp(1rem, 2vw, 1.5rem);
  margin-top: clamp(2rem, 4vw, 3rem);
}
@media (min-width: 860px) {
  .ervaring-rij { grid-template-columns: repeat(3, 1fr); }

  /* De scheidingslijn hangt aan de onderkant van de kaart. Staat er een
     bijschrift van twee regels, dan schuift die lijn een regel omhoog en
     ligt ze niet meer gelijk met de buren. Met subgrid delen de drie kaarten
     dezelfde rijen: één rij voor het citaat, één voor het bijschrift. Zo
     ligt de lijn overal op exact dezelfde hoogte, ongeacht de lengte.
     Kan een browser geen subgrid, dan valt hij terug op het oude gedrag. */
  @supports (grid-template-rows: subgrid) {
    .ervaring-rij { grid-template-rows: auto auto; }
    /* Bewust .ervaring-rij .ervaring en niet .ervaring alleen: de basisregel
       van de kaart staat verderop in dit bestand en zet display terug op flex,
       en dan doet subgrid niets. */
    .ervaring-rij .ervaring {
      display: grid;
      grid-template-rows: subgrid;
      grid-row: span 2;
    }
    .ervaring-rij .ervaring figcaption { margin-top: 0; }
  }
}
.ervaring {
  background: var(--zeewit);
  border: 1px solid rgba(30, 78, 74, 0.09);
  border-radius: var(--radius-l);
  padding: clamp(1.4rem, 2.4vw, 1.9rem);
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}
.ervaring blockquote {
  font-size: 1.02rem;
  line-height: 1.6;
  quotes: "\201E" "\201D";
}
.ervaring blockquote::before { content: open-quote; }
.ervaring blockquote::after  { content: close-quote; }
.ervaring figcaption {
  margin-top: auto;
  padding-top: 0.9rem;
  border-top: 1px solid rgba(30, 78, 74, 0.1);
  font-size: 0.88rem;
  color: var(--petrol-zacht);
}





/* --------------------------------------------------------------------------
   Nieuwsbrief
   -------------------------------------------------------------------------- */
.nieuwsbrief .lead { max-width: 52ch; }
.nieuwsbrief-form {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  align-items: center;
  margin-top: clamp(1.6rem, 3vw, 2.2rem);
  max-width: 34rem;
}
.nieuwsbrief-form input[type="email"] {
  flex: 1 1 16rem;
  padding: 0.95rem 1.2rem;
  border-radius: 100px;
  border: 1.5px solid rgba(30, 78, 74, 0.22);
  background: var(--zeewit);
}
.nieuwsbrief-form .knop { flex: none; }
#nieuwsbrief-status { font-size: 0.95rem; min-height: 1.5em; margin-top: 0.8rem; }
#nieuwsbrief-status.gelukt { font-weight: 600; }
#nieuwsbrief-status.mis {
  font-weight: 600;
  background: rgba(240, 138, 93, 0.22);
  border-radius: 12px;
  padding: 0.5rem 0.85rem;
  display: inline-block;
}

.mailregel { font-size: 0.95rem; }
.mailregel a { color: var(--petrol); }

/* Verbergen voor het oog, niet voor voorleessoftware. */
.enkel-voorlezers {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* De bijgesneden hero-foto is bijna vierkant (1050 bij 1062). Met de 3/4 van
   de andere foto's zou er links en rechts een kwart afvallen, precies waar hun
   armen zitten. Vandaar zijn eigen verhouding. */
img.hero-beeld { aspect-ratio: 1050 / 1062; }

/* --------------------------------------------------------------------------
   Instagram in de voettekst
   -------------------------------------------------------------------------- */
.instagram {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  color: var(--mint);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.98rem;
  padding: 0.5rem 0.9rem;
  border: 1px solid rgba(203, 229, 218, 0.35);
  border-radius: 100px;
  transition: background 0.15s ease, transform 0.15s ease;
}
.instagram:hover { background: rgba(203, 229, 218, 0.14); transform: translateY(-2px); }
.instagram:focus-visible { outline: 3px solid var(--zeegroen); outline-offset: 3px; }
.instagram svg {
  width: 20px;
  height: 20px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
}
.instagram svg .stip { fill: currentColor; stroke: none; }

/* --------------------------------------------------------------------------
   Ankerlinks en de plakkende kop
   Zonder deze regel springt een klik op "Aanbod" of "Contact" de titel net
   onder de kop, waar je ze niet meer ziet. Deze marge houdt er ruimte vrij.
   -------------------------------------------------------------------------- */
:target,
section[id],
main[id] { scroll-margin-top: clamp(78px, 9vw, 96px); }
/* ==========================================================================
   MOBIEL · alles gecentreerd
   Onder deze breedte staat elk blok onder elkaar in plaats van naast elkaar.
   Links uitlijnen laat dan een rafelige rechterkant achter; gecentreerd
   leest rustiger op een smal scherm.
   ========================================================================== */
@media (max-width: 760px) {
  .hero .wrap,
  .herkenning .wrap,
  .aanbod-kop,
  .kaarten,
  .club .wrap,
  .overons .wrap,
  #locaties .wrap,
  .ervaringen .wrap,
  .nieuwsbrief .wrap,
  .contact .wrap,
  .site-footer .wrap { text-align: center; }

  /* blokken met een leesbreedte netjes in het midden zetten */
  .lead,
  .aanbod-kop,
  .kaart p,
  .overons p,
  .club p,
  /* De hero-titel heeft een maximumbreedte van 15 tekens. Zonder automarge
     staat dat kader links, en dan is de gecentreerde tekst erin alsnog 12
     pixels naar links geschoven tegenover de rest. */
  .hero h1,
  #contactform { margin-inline: auto; }

  /* knoppen en losse elementen */
  .hero-knoppen { justify-content: center; }
  /* het veld vult de breedte, de knop valt eronder en komt in het midden */
  .nieuwsbrief-form { justify-content: center; margin-inline: auto; }
  .kaart { align-items: center; }
  .kaart .knop,
  .kaart .knop-lijn,
  .kaartfoto,
  .kaart .lintje { align-self: center; }
  .kaart .plaatsjes { width: 100%; }
  .resultaat { border-left: none; border-top: 3px solid var(--zeegroen); border-radius: 0 0 14px 14px; margin-inline: auto; }

  /* Lijstjes. Het vinkje of cijfer staat altijd voor de zin, ook op een smal
     scherm. De lijst als geheel staat in het midden, maar de regels binnen de
     lijst blijven links uitgelijnd, zodat alle vinkjes netjes onder elkaar
     staan en een zin van twee regels gewoon doorloopt. */
  .herkenning-lijst,
  .weeklijst,
  .prijskaart ul {
    width: fit-content;
    max-width: 100%;
    margin-inline: auto;
    text-align: left;
  }
  .herkenning-lijst li,
  .weeklijst li,
  .prijskaart li {
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
    text-align: left;
  }
  .namen { justify-content: center; }

  /* foto's en clip */
  .contact-foto { margin-inline: auto; }

  /* formulier: labels in het midden, maar wat je typt blijft links staan */
  form label { justify-items: center; }
  input, textarea, select { text-align: left; }

  /* Een invoerveld kleiner dan 16 pixels laat iPhones inzoomen zodra je erin
     tikt, en dan staat de pagina scheef. Vandaar precies 16. */
  input, textarea, select { font-size: 1rem; }

  /* Tikdoelen groot genoeg om met een duim te raken. */
  .site-nav .knop-klein {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
  .mailregel a { display: inline-block; padding-block: 0.45rem; }
  #form-status { text-align: center; }

  .site-footer .wrap { justify-content: center; }
}