/* Een Sprankje Prana
   Bosgroen en lotusroze, Fraunces met Figtree. Het motief is de stroom:
   de warme olie van shirodhara, als dunne roze lijn en druppel die door de
   hele pagina terugkomt, en de lotusblad-vorm op de foto's. */

:root {
  --groen-diep: #15281a;
  --groen-nacht: #0f1e13;
  --groen: #386638;
  --groen-lijn: rgba(21, 40, 26, .14);
  --roze: #e998b4;
  --roze-zacht: #f6d3df;
  --roze-mist: #fcf1f5;
  --roze-diep: #a24a6c;
  --wit: #fefefe;
  --room: #fbf3f5;
  --tekst: #1b2e1f;
  --tekst-zacht: #46574a;
  --licht-zacht: #c8d4c9;

  --kopletter: "Fraunces", Georgia, "Times New Roman", serif;
  --broodletter: "Figtree", "Segoe UI", system-ui, sans-serif;

  --rand: clamp(1.25rem, 5vw, 4.5rem);
  --ritme: clamp(4rem, 8vw, 7rem);
  --breed: 78rem;
  --blad: 0 46% 0 46%;
  --boog: 999px 999px 1.25rem 1.25rem;

  --opening-achtergrond: #15281a;
  --opening-demping: .4;
}

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

html { scroll-behavior: smooth; scroll-padding-top: 5rem; }

body {
  margin: 0;
  background: var(--wit);
  color: var(--tekst);
  font-family: var(--broodletter);
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

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

h1, h2, h3, h4 { margin: 0; font-family: var(--kopletter); font-weight: 400; line-height: 1.08; letter-spacing: -.01em; }
p { margin: 0 0 1rem; }
a { color: inherit; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

.overslaan {
  position: absolute; left: 1rem; top: -4rem; z-index: 100;
  background: var(--groen-diep); color: var(--wit); padding: .6rem 1rem; border-radius: .5rem;
}
.overslaan:focus { top: 1rem; }

:focus-visible { outline: 2px solid var(--roze-diep); outline-offset: 3px; }

/* ---- knoppen ----------------------------------------------------------- */

.knop {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .95rem 1.5rem;
  border-radius: 999px;
  border: 1.5px solid transparent;
  font: 600 1rem/1.2 var(--broodletter);
  text-decoration: none;
  cursor: pointer;
  transition: transform .25s ease, background-color .25s ease, color .25s ease, border-color .25s ease;
}
.knop:hover { transform: translateY(-2px); }
.knop--roze { background: var(--roze); color: var(--groen-diep); }
.knop--roze:hover { background: var(--roze-zacht); }
.knop--lijn { border-color: rgba(251, 243, 245, .55); color: var(--room); }
.knop--lijn:hover { border-color: var(--roze); color: var(--roze); }
.knop--groen { background: var(--groen); color: #fff; }
.knop--groen:hover { background: var(--groen-diep); }
.knop--klein { padding: .6rem 1.1rem; font-size: .92rem; background: var(--groen-diep); color: #fff; }
.knop--klein:hover { background: var(--groen); }
.knop--vol { width: 100%; }

/* ---- label met druppel: het terugkerende motief --------------------- */

.label {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin-bottom: 1.25rem;
  font: 600 .78rem/1 var(--broodletter);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--groen-diep);
}
.label__stroom {
  position: relative;
  width: 2.25rem;
  height: 1.5px;
  background: var(--lijn, var(--roze));
  flex: none;
}
.label__stroom::after {
  content: "";
  position: absolute;
  right: -.35rem;
  top: 50%;
  width: .55rem;
  height: .55rem;
  background: var(--roze);
  border-radius: 0 50% 50% 50%;
  transform: translateY(-50%) rotate(-45deg);
}
.label--licht { color: var(--wit); --lijn: var(--roze); }
.label--donker { color: var(--groen-diep); --lijn: var(--wit); }
.label--donker .label__stroom::after { background: var(--groen-diep); }
.label--vlak {
  display: inline-flex;
  padding: .6rem 1.1rem .6rem .9rem;
  background-color: var(--groen-diep);
  color: var(--wit);
  --lijn: var(--roze);
}
.label--vlak .label__stroom::after { background: var(--roze); }

/* ---- kopbalk ----------------------------------------------------------- */

.kopbalk {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  background: var(--wit);
  border-bottom: 1px solid var(--groen-lijn);
}
.kopbalk__binnen {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  max-width: calc(var(--breed) + 2 * var(--rand));
  margin: 0 auto;
  padding: .7rem var(--rand);
}
.merk {
  display: flex;
  align-items: center;
  gap: .65rem;
  text-decoration: none;
  color: var(--groen-diep);
}
.merk__lotus {
  width: 2.4rem;
  height: 1.4rem;
  fill: var(--roze-zacht);
  stroke: var(--roze-diep);
  stroke-width: 2.4;
  stroke-linejoin: round;
}
.merk__naam { font: 600 1.2rem/1 var(--kopletter); letter-spacing: -.01em; }

.hoofdmenu { display: flex; align-items: center; gap: clamp(1rem, 2vw, 2rem); }
.hoofdmenu a:not(.knop) {
  position: relative;
  font-weight: 500;
  font-size: .97rem;
  text-decoration: none;
  color: var(--tekst);
  padding: .3rem 0;
}
.hoofdmenu a:not(.knop)::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1.5px;
  background: var(--roze-diep);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .3s ease;
}
.hoofdmenu a:not(.knop):hover::after { transform: scaleX(1); }

.menuknop {
  display: none;
  align-items: center;
  gap: .6rem;
  padding: .55rem .9rem;
  border: 1.5px solid var(--groen-lijn);
  border-radius: 999px;
  background: none;
  color: var(--groen-diep);
  font: 600 .92rem/1 var(--broodletter);
  cursor: pointer;
}
.menuknop__streep,
.menuknop__streep::before {
  display: block;
  width: 1.1rem;
  height: 1.5px;
  background: currentColor;
  position: relative;
  transition: transform .25s ease;
}
.menuknop__streep::before { content: ""; position: absolute; top: 5px; }
.menuknop[aria-expanded="true"] .menuknop__streep { transform: translateY(2.5px) rotate(45deg); }
.menuknop[aria-expanded="true"] .menuknop__streep::before { transform: translateY(-5px) rotate(-90deg); }

@media (max-width: 900px) {
  .menuknop { display: inline-flex; }
  .hoofdmenu {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: .5rem var(--rand) 1.5rem;
    background: var(--wit);
    border-bottom: 1px solid var(--groen-lijn);
    display: none;
  }
  .hoofdmenu.is-open { display: flex; }
  .hoofdmenu a:not(.knop) { padding: .85rem 0; border-bottom: 1px solid var(--groen-lijn); font-size: 1.05rem; }
  .hoofdmenu .knop { margin-top: 1rem; }
}

/* ---- opening ----------------------------------------------------------- */

.opening__raam [data-raam] {
  font-family: var(--kopletter);
  font-weight: 900;
  font-variation-settings: "opsz" 144;
}

.opening__kop { padding: 0 var(--rand) clamp(1.25rem, 5svh, 3rem); }

.kop-vlak {
  max-width: 35rem;
  padding: clamp(1.5rem, 3vw, 2.4rem);
  background: var(--groen-diep);
  color: var(--room);
  border-radius: 0 2.5rem 0 2.5rem;
}
.kop-vlak__opmaat {
  margin-bottom: .9rem;
  font: 600 .78rem/1.3 var(--broodletter);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--roze);
}
.kop-vlak__titel {
  font-size: clamp(2.3rem, 5vw, 3.9rem);
  font-weight: 400;
  line-height: 1.02;
  color: var(--room);
  margin-bottom: 1rem;
}
.kop-vlak__zin { color: var(--licht-zacht); font-size: 1.05rem; margin-bottom: 1.5rem; }
.kop-vlak__knoppen { display: flex; flex-wrap: wrap; gap: .75rem; }

.opening__slot { padding: 0 var(--rand) 14svh; text-align: center; }
.slotregel {
  display: inline-block;
  margin: 0;
  max-width: 34rem;
  padding: 1.1rem 1.6rem;
  background: var(--groen-diep);
  color: var(--room);
  font: 300 clamp(1.4rem, 3vw, 2.2rem)/1.2 var(--kopletter);
  font-style: italic;
  border-radius: 2rem 0 2rem 0;
}

.opening__wenk {
  flex-direction: column;
  align-items: center;
  gap: .5rem;
  left: auto;
  right: var(--rand);
  transform: none;
  padding: .7rem .7rem .9rem;
  background: var(--groen-diep);
  border-radius: 999px;
  color: var(--room);
}
.wenk__tekst { font: 600 .68rem/1 var(--broodletter); letter-spacing: .2em; text-transform: uppercase; writing-mode: vertical-rl; }
.wenk__druppel {
  width: .5rem;
  height: .5rem;
  background: var(--roze);
  border-radius: 0 50% 50% 50%;
  transform: rotate(45deg);
  animation: druppel 2.2s ease-in-out infinite;
}
@keyframes druppel {
  0%, 20% { transform: translateY(-6px) rotate(45deg); opacity: 0; }
  50% { opacity: 1; }
  100% { transform: translateY(8px) rotate(45deg); opacity: 0; }
}

@media (max-width: 640px) {
  .opening__wenk { display: none !important; }
  .kop-vlak { border-radius: 0 1.75rem 0 1.75rem; }
}

/* ---- welkom ------------------------------------------------------------ */

.welkom {
  background: linear-gradient(var(--groen-diep) 0 clamp(6rem, 12vw, 10rem), var(--wit) 0);
  padding-bottom: var(--ritme);
}
.welkom__binnen {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: clamp(2.5rem, 7vw, 7rem);
  max-width: calc(var(--breed) + 2 * var(--rand));
  margin: 0 auto;
  padding: clamp(2.5rem, 5vw, 4rem) var(--rand) 0;
}
.welkom__tekst { padding-top: clamp(5rem, 11vw, 9rem); max-width: 36rem; }
.welkom__titel {
  font-size: clamp(2rem, 4vw, 3.3rem);
  color: var(--groen-diep);
  margin-bottom: 1.75rem;
}
.welkom__intro { font-size: 1.2rem; line-height: 1.6; color: var(--tekst); }
.welkom__tekst p:not(.label):not(.welkom__intro) { color: var(--tekst-zacht); }
.welkom__noot {
  margin-top: 1.5rem;
  padding: .9rem 1.2rem;
  border-left: 2px solid var(--roze);
  background: var(--roze-mist);
  color: var(--tekst) !important;
  font-weight: 500;
}
.welkom__naam { margin: 2rem 0 .1rem; font: italic 400 1.6rem/1.2 var(--kopletter); color: var(--groen-diep) !important; }
.welkom__rol { font-size: .9rem; }

.welkom__beeld { margin: 0; position: relative; }
.welkom__beeld img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: 40% 50%;
  border-radius: var(--blad);
}
.welkom__beeld::after {
  content: "";
  position: absolute;
  left: -1.5rem;
  bottom: -1.5rem;
  width: 42%;
  height: 32%;
  border: 1.5px solid var(--roze);
  border-radius: 0 0 0 46%;
  z-index: -1;
}

@media (max-width: 820px) {
  .welkom__binnen { grid-template-columns: 1fr; }
  .welkom__beeld { order: -1; max-width: 26rem; justify-self: center; width: 88%; }
  .welkom__tekst { padding-top: 0; }
}

/* ---- behandelingen ----------------------------------------------------- */

.behandelingen {
  position: relative;
  max-width: calc(var(--breed) + 2 * var(--rand));
  margin: 0 auto;
  padding: 0 var(--rand) var(--ritme);
}

/* de stroom: een dunne roze lijn die door de vier ayurvedische behandelingen loopt */
.ayur { position: relative; }
.ayur::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  bottom: clamp(3.5rem, 7vw, 6rem);
  width: 1.5px;
  background: linear-gradient(var(--roze) 0, var(--roze) 85%, transparent);
  opacity: .7;
}

.sectiekop {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 1rem clamp(2.5rem, 7vw, 7rem);
  align-items: end;
  padding-top: var(--ritme);
  border-top: 1px solid var(--groen-lijn);
  margin-bottom: clamp(3rem, 6vw, 5rem);
}
.sectiekop .label { grid-column: 1 / -1; margin-bottom: 0; }
.sectiekop__titel { font-size: clamp(2.4rem, 5.5vw, 4.6rem); color: var(--groen-diep); }
.sectiekop__zin { color: var(--tekst-zacht); font-size: 1.12rem; max-width: 30rem; margin: 0; }

.dienst {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2.5rem, 8vw, 8rem);
  align-items: center;
  margin-bottom: clamp(3.5rem, 7vw, 6rem);
}
/* de druppel op de stroom, bij elke behandeling */
.dienst::after,
.stroom::after {
  content: "";
  position: absolute;
  left: calc(50% - .4rem - 2.25px);
  top: 50%;
  width: .8rem;
  height: .8rem;
  background: var(--roze);
  border: 3px solid var(--wit);
  box-sizing: content-box;
  border-radius: 0 50% 50% 50%;
  transform: translateY(-50%) rotate(45deg);
}
.dienst__beeld { margin: 0; overflow: hidden; }
.dienst__beeld img { width: 100%; object-fit: cover; transition: transform 1.2s cubic-bezier(.2, .7, .2, 1); }
.dienst--a .dienst__beeld { border-radius: var(--blad); }
.dienst--a .dienst__beeld img { aspect-ratio: 5 / 6; object-position: 55% 40%; }
.dienst--b .dienst__beeld { border-radius: var(--boog); max-width: 30rem; justify-self: end; width: 100%; }
.dienst--b .dienst__beeld img { aspect-ratio: 4 / 5; object-position: 70% 50%; }
.dienst--c .dienst__beeld { border-radius: 46% 0 46% 0; max-width: 28rem; justify-self: end; width: 100%; }
.dienst--c .dienst__beeld img { aspect-ratio: 1 / 1; object-position: 40% 50%; }
.dienst:hover .dienst__beeld img { transform: scale(1.03); }

.dienst__tekst { max-width: 32rem; }
.dienst__tekst p { color: var(--tekst-zacht); }
.dienst__nr {
  font: 300 1rem/1 var(--kopletter);
  letter-spacing: .1em;
  color: var(--roze-diep) !important;
  margin-bottom: .75rem;
}
.dienst__titel {
  font-size: clamp(2rem, 3.6vw, 3rem);
  color: var(--groen-diep);
  margin-bottom: 1.25rem;
}
.citaat-klein {
  font: italic 400 1.25rem/1.4 var(--kopletter);
  color: var(--groen) !important;
  padding-left: 1rem;
  border-left: 2px solid var(--roze);
}

.dienst__feit { margin: 1.75rem 0 0; }
.dienst__feit div {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 1.25rem;
  align-items: baseline;
  padding: .85rem 0;
  border-top: 1px solid var(--groen-lijn);
}
.dienst__feit div:last-child { border-bottom: 1px solid var(--groen-lijn); }
.dienst__feit dt { font-weight: 600; color: var(--tekst); }
.dienst__feit dd { margin: 0; color: var(--tekst-zacht); font-size: .95rem; }
.dienst__feit .prijs { font: 600 1.35rem/1 var(--kopletter); color: var(--roze-diep); }

/* shirodhara: geen foto, wel het woord zelf als beeld */
.stroom {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2.5rem, 8vw, 8rem);
  align-items: center;
  margin: 0 calc(-1 * var(--rand)) clamp(3.5rem, 7vw, 6rem);
  padding: clamp(3rem, 6vw, 5rem) var(--rand);
  background: var(--roze-mist);
  border-radius: 0 6rem 0 6rem;
}
.stroom::after { border-color: var(--roze-mist); }
.stroom__woorden { justify-self: end; text-align: right; }
.stroom__woord {
  margin: 0;
  font: 300 clamp(3.5rem, 9vw, 8rem)/.9 var(--kopletter);
  font-style: italic;
  color: var(--groen-diep);
  letter-spacing: -.03em;
}
.stroom__plus { margin: .4rem 0; font: 300 2rem/1 var(--kopletter); color: var(--roze-diep); }
.stroom__lijn {
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 1.5px;
  background: var(--roze);
  opacity: .7;
}
.stroom__lijn span {
  position: absolute;
  left: 50%;
  top: 0;
  width: .55rem;
  height: .55rem;
  margin-left: -.275rem;
  background: var(--roze-diep);
  border-radius: 0 50% 50% 50%;
  transform: rotate(45deg);
  animation: val 4.5s cubic-bezier(.5, 0, .7, 1) infinite;
}
@keyframes val {
  0% { top: 0; opacity: 0; }
  10% { opacity: 1; }
  80% { opacity: 1; }
  100% { top: 100%; opacity: 0; }
}
.stroom__tekst { max-width: 32rem; }
.stroom__tekst p { color: var(--tekst-zacht); }
.stroom__uitleg { font: italic 400 1.25rem/1.4 var(--kopletter); color: var(--groen) !important; }

/* de rest van het aanbod: een rustige lijst, geen kaarten */
.overig {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2.2fr);
  gap: clamp(2rem, 6vw, 6rem);
  padding-top: clamp(2rem, 4vw, 3rem);
}
.overig__titel { font-size: clamp(1.9rem, 3.2vw, 2.6rem); color: var(--groen-diep); margin-bottom: 2rem; }
.overig__beeld { margin: 0; max-width: 18rem; }
.overig__beeld img { border-radius: 50%; aspect-ratio: 1 / 1; object-fit: cover; box-shadow: 0 0 0 10px var(--roze-mist); }

.overig__lijst {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: clamp(2rem, 4vw, 3.5rem);
}
.behandeling {
  display: grid;
  grid-template-columns: 1fr auto;
  column-gap: 1rem;
  align-content: start;
  padding: 1.4rem 0;
  border-top: 1px solid var(--groen-lijn);
  transition: background-color .3s ease;
}
.behandeling__naam {
  grid-column: 1 / -1;
  font-size: 1.45rem;
  color: var(--groen-diep);
  margin-bottom: .5rem;
  transition: color .3s ease;
}
.behandeling:hover .behandeling__naam { color: var(--roze-diep); }
.behandeling__tekst { grid-column: 1 / -1; color: var(--tekst-zacht); font-size: .97rem; margin-bottom: .75rem; }
.behandeling__duur { margin: 0; color: var(--tekst-zacht); font-size: .92rem; }
.behandeling__prijs { margin: 0; font: 600 1.25rem/1.2 var(--kopletter); color: var(--roze-diep); }

@media (max-width: 860px) {
  .ayur::before,
  .dienst::after,
  .stroom::after,
  .stroom__lijn { display: none; }
  .sectiekop { grid-template-columns: 1fr; }
  .dienst, .stroom { grid-template-columns: 1fr; gap: 2rem; }
  .dienst--b .dienst__beeld { order: -1; justify-self: start; max-width: 24rem; }
  .dienst--c .dienst__beeld { justify-self: start; max-width: 22rem; }
  .dienst--a .dienst__beeld img { aspect-ratio: 4 / 3; }
  .stroom { border-radius: 0 3rem 0 3rem; }
  .stroom__woorden { justify-self: start; text-align: left; display: flex; align-items: baseline; gap: .75rem; flex-wrap: wrap; }
  .stroom__plus { margin: 0; }
  .overig { grid-template-columns: 1fr; }
  .overig__beeld { max-width: 13rem; }
}
@media (max-width: 600px) {
  .overig__lijst { grid-template-columns: 1fr; }
}

/* ---- ervaringen -------------------------------------------------------- */

.ervaringen {
  position: relative;
  z-index: 2;
  background: var(--roze);
  color: var(--groen-diep);
  padding: var(--ritme) var(--rand) 0;
}
.ervaringen__binnen { max-width: var(--breed); margin: 0 auto; }
.ervaring { margin: 0; }
.ervaring blockquote { margin: 0; }
.ervaring--groot {
  position: relative;
  max-width: 62rem;
  padding-left: clamp(0rem, 6vw, 6rem);
  margin-bottom: clamp(3rem, 6vw, 4.5rem);
}
.ervaring--groot::before {
  content: "“";
  position: absolute;
  left: -.5rem;
  top: -2.5rem;
  font: 900 clamp(7rem, 14vw, 12rem)/1 var(--kopletter);
  color: var(--wit);
  opacity: .55;
}
.ervaring--groot p {
  position: relative;
  font: 300 clamp(1.55rem, 3.2vw, 2.6rem)/1.3 var(--kopletter);
  letter-spacing: -.01em;
  margin-bottom: 1.25rem;
}
.ervaring figcaption {
  font: 600 .85rem/1 var(--broodletter);
  letter-spacing: .18em;
  text-transform: uppercase;
}
.ervaringen__rij {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1rem, 3vw, 2rem);
  margin-bottom: -6rem;
  position: relative;
}
.ervaringen__rij .ervaring {
  background: var(--wit);
  padding: clamp(1.5rem, 3vw, 2.4rem);
  border-radius: 0 2.5rem 0 2.5rem;
  box-shadow: 0 30px 60px -30px rgba(15, 30, 19, .45);
}
.ervaringen__rij .ervaring:nth-child(2) { transform: translateY(2.5rem); }
.ervaringen__rij p { margin: 0; color: var(--tekst); font-size: 1.02rem; }

@media (max-width: 760px) {
  .ervaringen__rij { grid-template-columns: 1fr; }
  .ervaringen__rij .ervaring:nth-child(2) { transform: none; }
}

/* ---- tarieven ---------------------------------------------------------- */

.tarieven {
  background: var(--groen-diep);
  color: var(--room);
  padding: calc(var(--ritme) + 6rem) var(--rand) var(--ritme);
}
.tarieven__binnen {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 4vw, 4rem);
  max-width: var(--breed);
  margin: 0 auto;
  padding-top: 2.5rem;
}
.tarieven__titel { font-size: clamp(2.2rem, 4vw, 3.4rem); color: var(--room); margin-bottom: 1.25rem; }
.tarieven__zin { color: var(--room); font-size: 1.08rem; }
.tarieven__noot { color: var(--licht-zacht); font-size: .95rem; margin-bottom: 1.75rem; }

.prijslijst__titel {
  font-size: 1.5rem;
  color: var(--roze);
  padding-bottom: 1rem;
  margin-bottom: .25rem;
  border-bottom: 1.5px solid var(--roze);
}
.prijslijst__regels { list-style: none; margin: 0; padding: 0; }
.prijsregel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  column-gap: 1rem;
  align-items: baseline;
  padding: .8rem 0;
  border-bottom: 1px solid rgba(251, 243, 245, .14);
  transition: background-color .25s ease;
}
.prijsregel:hover { background: rgba(233, 152, 180, .07); }
.prijsregel p { margin: 0; }
.prijsregel__naam { color: var(--room); font-size: .98rem; line-height: 1.4; }
.prijsregel__duur { color: var(--licht-zacht); font-size: .88rem; white-space: nowrap; }
.prijsregel__bedrag { grid-column: 3; font: 600 1.2rem/1 var(--kopletter); color: var(--roze); min-width: 3.2rem; text-align: right; }
.prijsregel__extra {
  grid-column: 1 / -1;
  margin-top: .3rem !important;
  font-size: .85rem;
  color: var(--roze);
}

@media (max-width: 1080px) {
  .tarieven__binnen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tarieven__kop { grid-column: 1 / -1; max-width: 40rem; }
}
@media (max-width: 700px) {
  .tarieven__binnen { grid-template-columns: 1fr; }
}

/* ---- meedoenregeling --------------------------------------------------- */

.meedoen { padding: var(--ritme) var(--rand) 0; }
.meedoen__binnen {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2.5rem, 7vw, 7rem);
  max-width: var(--breed);
  margin: 0 auto;
  align-items: start;
}
.meedoen__titel { font-size: clamp(2.2rem, 4.4vw, 3.6rem); color: var(--groen-diep); margin-bottom: 1.5rem; }
.meedoen__tekst p:not(.label) { color: var(--tekst-zacht); }
.meedoen__tekst p.meedoen__klein { font-size: .95rem; }

.stappen { list-style: none; margin: 0; padding: 0; counter-reset: stap; }
.stap {
  position: relative;
  display: grid;
  grid-template-columns: 4rem 1fr;
  gap: 1.25rem;
  align-items: center;
  padding: 1.4rem 0;
}
.stap + .stap { border-top: 1px solid var(--groen-lijn); }
.stap__nr {
  margin: 0;
  display: grid;
  place-items: center;
  width: 4rem;
  height: 4rem;
  background: var(--roze-mist);
  border: 1.5px solid var(--roze);
  border-radius: 0 50% 50% 50%;
  font: 400 1.6rem/1 var(--kopletter);
  color: var(--roze-diep);
}
.stap__tekst { margin: 0; font-size: 1.08rem; color: var(--tekst); }

@media (max-width: 820px) {
  .meedoen__binnen { grid-template-columns: 1fr; }
}

/* ---- praktisch --------------------------------------------------------- */

.praktisch { padding: var(--ritme) var(--rand); }
.praktisch__binnen {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.4fr);
  gap: clamp(2.5rem, 7vw, 7rem);
  max-width: var(--breed);
  margin: 0 auto;
  padding-top: var(--ritme);
  border-top: 1px solid var(--groen-lijn);
}
.praktisch__titel { font-size: clamp(2.2rem, 4.4vw, 3.6rem); color: var(--groen-diep); margin-bottom: 2rem; }
.praktisch__beeld { margin: 0; max-width: 24rem; }
.praktisch__beeld img { aspect-ratio: 4 / 5; object-fit: cover; object-position: 45% 50%; border-radius: var(--boog); }

.vraag { border-top: 1px solid var(--groen-lijn); }
.vraag:last-child { border-bottom: 1px solid var(--groen-lijn); }
.vraag summary {
  position: relative;
  list-style: none;
  cursor: pointer;
  padding: 1.15rem 3rem 1.15rem 0;
  font: 400 1.3rem/1.3 var(--kopletter);
  color: var(--groen-diep);
  transition: color .25s ease;
}
.vraag summary::-webkit-details-marker { display: none; }
.vraag summary::after {
  content: "";
  position: absolute;
  right: .4rem;
  top: 50%;
  width: .7rem;
  height: .7rem;
  border: 1.5px solid var(--roze-diep);
  border-radius: 0 50% 50% 50%;
  transform: translateY(-50%) rotate(45deg);
  transition: transform .3s ease, background-color .3s ease;
}
.vraag summary:hover { color: var(--roze-diep); }
.vraag[open] summary::after { background: var(--roze); border-color: var(--roze); transform: translateY(-30%) rotate(225deg); }
.vraag p { color: var(--tekst-zacht); padding-right: 2rem; margin-bottom: 1.4rem; }

@media (max-width: 820px) {
  .praktisch__binnen { grid-template-columns: 1fr; }
  .praktisch__beeld { max-width: 16rem; }
  .praktisch__beeld img { aspect-ratio: 1 / 1; }
}

/* ---- cadeaubon: brug naar contact -------------------------------------- */

.cadeau {
  padding: 0 var(--rand);
  background: linear-gradient(var(--wit) 50%, var(--groen-diep) 50%);
}
.cadeau__binnen {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
  max-width: var(--breed);
  margin: 0 auto;
  padding: clamp(1.25rem, 2.5vw, 2rem);
  background: var(--roze-mist);
  border-radius: 0 4rem 0 4rem;
  box-shadow: 0 40px 70px -40px rgba(15, 30, 19, .55);
}
.cadeau__beeld { margin: 0; overflow: hidden; border-radius: 0 3rem 0 3rem; }
.cadeau__beeld img { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; transition: transform 1.2s ease; }
.cadeau__binnen:hover .cadeau__beeld img { transform: scale(1.03); }
.cadeau__tekst { padding: 1rem clamp(0rem, 3vw, 2rem) 1rem 0; }
.cadeau__titel { font-size: clamp(2.2rem, 4.4vw, 3.6rem); color: var(--groen-diep); margin-bottom: 1.25rem; }
.cadeau__tekst p:not(.label) { color: var(--tekst-zacht); margin-bottom: 1.75rem; }

@media (max-width: 760px) {
  .cadeau__binnen { grid-template-columns: 1fr; border-radius: 0 2.5rem 0 2.5rem; }
  .cadeau__tekst { padding: 0 .5rem 1rem; }
}

/* ---- contact ----------------------------------------------------------- */

.contact {
  background: var(--groen-diep);
  color: var(--room);
  padding: var(--ritme) var(--rand);
}
.contact__binnen {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: clamp(2.5rem, 7vw, 7rem);
  max-width: var(--breed);
  margin: 0 auto;
}
.contact__titel { font-size: clamp(2.6rem, 6vw, 5rem); color: var(--room); margin-bottom: 1.25rem; }
.contact__zin { color: var(--licht-zacht); max-width: 30rem; margin-bottom: 2rem; }
.contact__bel {
  display: inline-block;
  font: 300 clamp(2.2rem, 5vw, 3.8rem)/1 var(--kopletter);
  color: var(--roze);
  text-decoration: none;
  margin-bottom: .75rem;
  transition: color .25s ease;
}
.contact__bel:hover { color: var(--roze-zacht); }
.contact__mail {
  display: block;
  width: fit-content;
  font-size: 1.1rem;
  color: var(--room);
  text-decoration-color: var(--roze);
  text-underline-offset: .3em;
  margin-bottom: 2.75rem;
  overflow-wrap: anywhere;
}
.contact__blokken {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2rem;
  padding-top: 2rem;
  border-top: 1px solid rgba(251, 243, 245, .16);
}
.contact__kopje {
  font: 600 .75rem/1 var(--broodletter);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--roze);
  margin-bottom: 1rem;
}
.contact__blok p { margin: 0 0 .3rem; color: var(--room); font-size: .97rem; }
.contact__social {
  display: block;
  width: fit-content;
  margin-bottom: .4rem;
  color: var(--room);
  text-decoration: none;
  border-bottom: 1px solid var(--roze);
}
.contact__social:hover { color: var(--roze); }

.formulier {
  align-self: start;
  background: var(--wit);
  color: var(--tekst);
  padding: clamp(1.5rem, 3vw, 2.5rem);
  border-radius: 0 3rem 0 3rem;
}
.formulier__titel { font-size: 1.8rem; color: var(--groen-diep); margin-bottom: 1.5rem; }
.veld { display: block; margin-bottom: 1.1rem; }
.veld__label { display: block; font-size: .85rem; font-weight: 600; margin-bottom: .4rem; color: var(--tekst); }
.veld input,
.veld select,
.veld textarea {
  width: 100%;
  padding: .8rem .95rem;
  font: 400 1rem/1.4 var(--broodletter);
  color: var(--tekst);
  background: var(--roze-mist);
  border: 1.5px solid transparent;
  border-radius: .75rem;
  transition: border-color .2s ease, background-color .2s ease;
}
.veld input:focus,
.veld select:focus,
.veld textarea:focus { outline: none; border-color: var(--roze-diep); background: var(--wit); }
.veld textarea { resize: vertical; }
.formulier__melding { margin: 1rem 0 0; font-size: .92rem; color: var(--groen); min-height: 1.4em; }

@media (max-width: 900px) {
  .contact__binnen { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .contact__blokken { grid-template-columns: 1fr; gap: 1.5rem; }
}

/* ---- voet -------------------------------------------------------------- */

.voet { background: var(--wit); padding: clamp(2.5rem, 5vw, 3.5rem) var(--rand); }
.voet__binnen {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 2rem;
  align-items: center;
  max-width: var(--breed);
  margin: 0 auto;
}
.voet__logo { width: 8.5rem; height: auto; }
.voet__tekst p, .voet__tekst a { display: block; margin: 0 0 .2rem; color: var(--tekst-zacht); font-size: .95rem; text-decoration: none; }
.voet__tekst .voet__slot { font: italic 400 1.25rem/1.35 var(--kopletter); color: var(--groen-diep); margin-bottom: .5rem; }
.voet__klein { margin: 0; font-size: .82rem; color: var(--tekst-zacht); align-self: end; }

@media (max-width: 760px) {
  .voet__binnen { grid-template-columns: 1fr; justify-items: start; gap: 1.25rem; }
}

/* ---- onthullen --------------------------------------------------------- */
/* Alles staat zichtbaar in de HTML; pas als script.js draait en de
   observer bestaat, wacht wat onder de vouw staat op zijn moment. */

.onthul [data-reveal]:not(.is-zichtbaar),
.onthul [data-reveal-group]:not(.is-zichtbaar) > * {
  opacity: 0;
  transform: translateY(28px);
}
[data-reveal],
[data-reveal-group] > * {
  transition: opacity .9s cubic-bezier(.2, .7, .2, 1), transform .9s cubic-bezier(.2, .7, .2, 1);
  transition-delay: calc(var(--i, 0) * 90ms);
}
.onthul .dienst[data-reveal]:not(.is-zichtbaar) .dienst__beeld img { transform: scale(1.08); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0s !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0s !important;
    transition-delay: 0s !important;
  }
  .onthul [data-reveal]:not(.is-zichtbaar),
  .onthul [data-reveal-group]:not(.is-zichtbaar) > * { opacity: 1; transform: none; }
  .stroom__lijn span, .wenk__druppel { display: none; }
}