:root {
  --pearl: #fffdf8;
  --shell: #f8f5ee;
  --sand: #cfc5b2;
  --gold: #a29464;
  --blue: #90bccf;
  --blue-dark: #74a8bc;
  --ink: #1a1a1a;
  --soft: #565a58;
  /* goudwaas uit de letterkleur; doorgerekend op leesbaarheid (32% over parel) */
  --band-gold: #eeeadd;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--pearl);
  color: var(--ink);
  font-family: Montserrat, Arial, sans-serif;
  overflow-x: clip;
}

@keyframes fade-up {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes image-reveal {
  from {
    opacity: 0;
    transform: scale(0.98);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.reveal {
  opacity: 0;
  transform: translateY(24px);
}

.reveal-scale {
  opacity: 0;
  transform: scale(0.98);
}

.reveal.is-visible {
  animation: fade-up 0.85s cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: calc(var(--i, 0) * 90ms);
}

.reveal-scale.is-visible {
  animation: image-reveal 1.1s cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: calc(var(--i, 0) * 90ms);
}

@media (prefers-reduced-motion: reduce) {
  .reveal,
  .reveal-scale {
    opacity: 1;
    transform: none;
  }

  .reveal.is-visible,
  .reveal-scale.is-visible,
  .hero-content,
  .wave,
  .word-track,
  .faq-answer {
    animation: none;
  }

  .faq-item summary::after { transition: none; }
}

body::before {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  content: "";
  background-image: radial-gradient(rgb(162 148 100 / 0.11) 0.75px, transparent 0.75px);
  background-size: 20px 20px;
  opacity: 0.45;
}

a { color: inherit; text-decoration: none; }
img, svg { display: block; }

.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 50;
  border-bottom: 1px solid rgb(207 197 178 / 0.25);
  background: rgb(255 255 255 / 0.74);
  box-shadow: 0 10px 40px rgb(70 64 54 / 0.06);
  backdrop-filter: blur(18px);
}

.header-inner,
.section-inner,
.hero-inner,
.hero-content,
.footer-inner {
  width: min(100% - 56px, 1200px);
  margin-inline: auto;
}

.header-inner {
  min-height: 75px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 34px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
}

.brand-mark {
  display: block;
  width: auto;
  height: 56px;
  padding: 5px;
  flex: 0 0 auto;
  object-fit: contain;
  object-position: left center;
  mix-blend-mode: multiply;
  transform-origin: left center;
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.brand:hover .brand-mark {
  transform: scale(1.01);
}

@media (prefers-reduced-motion: reduce) {
  .brand-mark { transition: none; }
  .brand:hover .brand-mark { transform: none; }
}

.brand-title {
  display: block;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 21px;
  letter-spacing: 0.11em;
  line-height: 1;
  text-transform: uppercase;
}

.brand-subtitle {
  display: block;
  margin-top: 5px;
  color: #6e7471;
  font-size: 8px;
  letter-spacing: 0.34em;
  line-height: 1;
  text-transform: uppercase;
}

.main-nav {
  display: flex;
  align-items: center;
  gap: 34px;
  color: #202222;
  font-size: 12px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}

.main-nav a {
  position: relative;
  padding-bottom: 9px;
  transition: color 0.2s ease;
}

.main-nav a:hover,
.main-nav a.active { color: var(--gold); }

.main-nav a.active::after {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 36px;
  height: 1px;
  content: "";
  background: var(--gold);
  transform: translateX(-50%);
}

.nav-item {
  position: relative;
  display: flex;
  align-items: center;
}

.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 50%;
  z-index: 60;
  display: grid;
  min-width: 250px;
  padding: 14px 0;
  border: 1px solid rgb(207 197 178 / 0.35);
  border-radius: 14px;
  background: rgb(255 255 255 / 0.98);
  box-shadow: 0 24px 60px rgb(70 64 54 / 0.14);
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, 8px);
  transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
}

.nav-item:hover .dropdown-menu,
.nav-item:focus-within .dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}

.dropdown-menu a {
  padding: 11px 26px;
  font-size: 11px;
  letter-spacing: 0.16em;
  white-space: nowrap;
}

.dropdown-menu a::after { content: none; }

.pill,
.outline-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  border-radius: 999px;
  font-size: 10px;
  letter-spacing: 0.24em;
  line-height: 1;
  text-transform: uppercase;
  transition: transform 0.25s ease, background 0.25s ease, color 0.25s ease;
}

.pill {
  border: 0;
  background: var(--blue);
  color: white;
  padding: 0 28px;
  box-shadow: 0 16px 34px rgb(144 188 207 / 0.34);
}

.pill:hover { background: var(--blue-dark); transform: translateY(-1px); }

.outline-pill {
  border: 1px solid var(--blue);
  color: #202222;
  padding: 0 28px;
}

.outline-pill:hover { background: var(--blue); color: white; }

.hero {
  position: relative;
  min-height: 820px;
  overflow: visible;
  padding-top: 96px;
  background: var(--pearl);
  z-index: 20;
}

.hero-image {
  position: absolute;
  /* 45px korter dan de sectie zelf */
  inset: 0 0 45px auto;
  width: 58%;
  overflow: hidden;
  background: var(--pearl);
}

.hero-image::before {
  position: absolute;
  inset: 0;
  content: "";
  background-image:
    linear-gradient(90deg, var(--pearl) 0%, rgb(255 253 248 / 0.72) 12%, rgb(255 253 248 / 0.24) 34%, transparent 62%),
    linear-gradient(180deg, rgb(255 255 255 / 0.04), transparent 58%, rgb(255 253 248 / 0.86) 100%),
    var(--hero-url);
  background-size: cover;
  background-position: 62% center;
}

.hero-inner,
.hero-content {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: 0.55fr 0.45fr;
  padding-top: 100px;
  padding-bottom: 225px;
  animation: fade-up 0.9s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.hero-content {
  padding-left: 0;
}

h1, h2, h3, .word-strip, .step-number, .review-mark {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 400;
}

.hero h1 {
  margin: 0;
  color: #202222;
  font-size: clamp(2.8rem, 5.25vw, 5.2rem);
  letter-spacing: -0.035em;
  line-height: 1.04;
}

.gold { color: var(--gold); }

.hero p {
  max-width: 390px;
  margin: 28px 0 0;
  color: #4f5552;
  font-size: 16px;
  line-height: 2;
}

.hero .pill { margin-top: 36px; padding-inline: 32px; }

.wave {
  position: absolute;
  left: 0;
  width: 100%;
  height: 176px;
  color: var(--blue);
  overflow: visible;
  pointer-events: none;
}

.hero .wave {
  bottom: -18px;
  z-index: 8;
  height: 188px;
  opacity: 0.92;
}

.hero-wave path {
  stroke-width: 0.95;
  vector-effect: non-scaling-stroke;
}

.split-image .wave { bottom: 12px; opacity: 0.4; }
.site-footer .wave { top: -10px; opacity: 0.3; }

.wave {
  animation: wave-drift 14s ease-in-out infinite;
  will-change: transform;
}

@keyframes wave-drift {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50% { transform: translate3d(-42px, 0, 0); }
}

.compass {
  position: absolute;
  z-index: 100;
  left: 50%;
  top: calc(100% - 10px);
  bottom: auto;
  display: flex;
  width: 118px;
  height: 118px;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--blue);
  box-shadow: none;
  transform: translateX(-50%);
}

.compass img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 0 12px rgb(255 255 255 / 0.9));
}

.compass::before,
.compass::after {
  position: absolute;
  top: 50%;
  width: min(90px, 10vw);
  height: 1px;
  content: "";
  background: rgb(162 148 100 / 0.28);
}

.compass::before { right: calc(100% + 12px); }
.compass::after { left: calc(100% + 12px); }

.hero-fade {
  position: absolute;
  inset: auto 0 0;
  z-index: 2;
  height: 128px;
  background: linear-gradient(180deg, transparent, var(--pearl));
}

.word-strip {
  position: relative;
  z-index: 0;
  isolation: isolate;
  overflow: hidden;
  background: var(--pearl);
  color: var(--gold);
  font-size: 16px;
  font-style: italic;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  padding: 124px 0 0;
}

/* De woorden staan tússen twee lijnen die strak om de baan zitten,
   niet op de sectieranden — daar vallen ze weg tegen de buursectie. */
.word-rail {
  border-top: 1px solid rgb(162 148 100 / 0.45);
  border-bottom: 1px solid rgb(162 148 100 / 0.45);
  padding: 26px 0;
  overflow: hidden;
}

.word-strip .word-track {
  width: max-content;
  margin: 0;
}

.word-track {
  display: flex;
  align-items: center;
  width: max-content;
  gap: 44px;
  white-space: nowrap;
  animation: word-marquee 36s linear infinite;
}

.word-track span {
  white-space: nowrap;
}

.values {
  position: relative;
  z-index: 2;
  background: var(--pearl);
  padding: 100px 0;
}

.values-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.value-card {
  padding: 38px 32px 26px;
  text-align: center;
}

.value-card + .value-card { border-left: 1px solid rgb(207 197 178 / 0.65); }

.icon-circle {
  display: flex;
  width: 80px;
  height: 80px;
  align-items: center;
  justify-content: center;
  margin: 0 auto 24px;
  border: 1px solid rgb(144 188 207 / 0.55);
  border-radius: 999px;
  background: white;
  color: var(--blue);
  box-shadow: 0 18px 40px rgb(143 130 92 / 0.08);
}

.icon-circle img,
.icon-circle svg {
  width: 54px;
  height: 54px;
  object-fit: contain;
}

.value-card h3,
.offer-card h3 {
  margin: 0;
  color: #202222;
  font-size: 18px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.value-card p,
.offer-card p,
.editorial p,
.split-text p,
.contact-copy p {
  color: var(--soft);
  line-height: 1.9;
}

.split {
  position: relative;
  overflow: hidden;
  background: var(--shell);
  padding: 100px 0;
}

.split-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  width: 100%;
  margin-inline: auto;
}

.split-image {
  position: relative;
  min-height: 620px;
  overflow: hidden;
  background-color: var(--sand);
}

.split-image::before,
.editorial-image::before {
  position: absolute;
  inset: 0;
  content: "";
  background-image: var(--image);
  background-size: cover;
  background-position: center;
  filter: saturate(0.72) sepia(0.08) brightness(1.05);
}

.split-image::after {
  position: absolute;
  inset: 0;
  content: "";
  background: linear-gradient(0deg, rgb(26 26 26 / 0.12), transparent 46%);
}

.split-text {
  position: relative;
  display: flex;
  min-height: 620px;
  flex-direction: column;
  justify-content: center;
  padding: 78px max(28px, calc((100% - 1280px) / 2)) 78px 78px;
}

/* waterkringen: rimpelingen zoals de lotus op water in het logo.
   De ringen dijen heel traag uit, als een steen die net is gevallen. */
.ripples {
  position: absolute;
  top: 40px;
  right: 24px;
  width: 230px;
  height: 265px;
  color: var(--gold);
  opacity: 0.34;
  pointer-events: none;
}

.ripples ellipse {
  transform-origin: 130px 150px;
  animation: rimpel 9s ease-in-out infinite;
}

.ripples ellipse:nth-child(2) { animation-delay: 0.5s; }
.ripples ellipse:nth-child(3) { animation-delay: 1s; }
.ripples ellipse:nth-child(4) { animation-delay: 1.5s; }
.ripples ellipse:nth-child(5) { animation-delay: 2s; }
.ripples ellipse:nth-child(6) { animation-delay: 2.5s; }
.ripples ellipse:nth-child(7) { animation-delay: 3s; }

@keyframes rimpel {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.045); }
}

@media (max-width: 980px) {
  .ripples { top: 20px; right: 8px; width: 150px; height: 173px; opacity: 0.22; }
}

.eyebrow {
  margin: 0 0 18px;
  color: var(--gold);
  font-size: 12px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
}

.split-text h2,
.editorial h1,
.contact-copy h1 {
  margin: 0;
  color: #202222;
  font-size: clamp(2.25rem, 3.8vw, 4.35rem);
  letter-spacing: -0.03em;
  line-height: 1.03;
}

.split-text h2 { font-size: clamp(2.15rem, 3.4vw, 3.8rem); }
.split-text p { max-width: 540px; margin-top: 30px; }
.split-text .outline-pill { margin-top: 30px; align-self: flex-start; }

.for-whom {
  position: relative;
  overflow: hidden;
  background: var(--band-gold);
  padding: 100px 0;
}

.for-whom-grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 0.92fr 1.08fr;
  gap: 74px;
  align-items: center;
}

.for-whom-copy h2 {
  margin: 0;
  max-width: 560px;
  color: #202222;
  font-size: clamp(2.2rem, 3.4vw, 3.8rem);
  letter-spacing: -0.03em;
  line-height: 1.04;
}

.for-whom-copy p:not(.eyebrow) {
  max-width: 460px;
  margin-top: 28px;
  color: var(--soft);
  line-height: 1.9;
}

.for-whom-copy .outline-pill {
  margin-top: 30px;
}

.for-whom-list {
  display: grid;
  gap: 14px;
}

.for-whom-list article {
  display: grid;
  grid-template-columns: 58px 1fr;
  gap: 18px;
  align-items: center;
  background: rgb(255 253 248 / 0.72);
  padding: 18px 20px;
}

.for-whom-list img {
  width: 48px;
  height: 48px;
  object-fit: contain;
}

.for-whom-list span {
  color: #202222;
  font-size: 15px;
  line-height: 1.7;
}

.expect {
  position: relative;
  background: var(--pearl);
  padding: 100px 0;
}

.expect-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
}

.expect-grid article {
  position: relative;
  padding: 38px 34px 42px;
  text-align: center;
}

.expect-grid article + article {
  border-left: 1px solid rgb(207 197 178 / 0.55);
}

.expect-grid span {
  display: block;
  color: var(--gold);
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 46px;
  line-height: 1;
}

.expect-grid h3 {
  margin: 18px 0 0;
  color: #202222;
  font-size: 20px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.expect-grid p {
  max-width: 300px;
  margin: 14px auto 0;
  color: var(--soft);
  font-size: 14px;
  line-height: 1.8;
}

.content-band {
  background: var(--pearl);
  padding: 100px 0;
}

.content-band .section-inner {
  max-width: 1200px;
}

.content-grid {
  display: grid;
  grid-template-columns: 0.72fr 1.28fr;
  gap: 70px;
}

.content-grid h2,
.cta-band h2,
.location-box h2 {
  margin: 0;
  color: #202222;
  font-size: clamp(1.95rem, 3vw, 3.35rem);
  letter-spacing: -0.03em;
  line-height: 1.05;
}

.rich-text p,
.check-list p,
.note-section p {
  color: var(--soft);
  line-height: 1.9;
}

.rich-text p:first-child { margin-top: 0; }

.approach {
  background: white;
  padding: 100px 0;
}

.approach-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
}

.approach-grid article,
.session-card {
  border: 1px solid rgb(207 197 178 / 0.62);
  background: rgb(255 253 248 / 0.78);
  box-shadow: 0 20px 55px rgb(55 55 45 / 0.06);
}

.approach-grid article {
  padding: 34px;
}

.approach-grid span,
.session-card span {
  color: var(--gold);
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 46px;
  line-height: 1;
}

.approach-grid h3,
.session-card h2 {
  margin: 18px 0 0;
  color: #202222;
  font-size: 24px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.approach-grid p,
.session-card p,
.session-card li {
  color: var(--soft);
  line-height: 1.8;
}

.session-list {
  background: var(--pearl);
  padding: 100px 0;
}

.session-list .section-inner {
  display: grid;
  gap: 24px;
}

.session-card {
  display: grid;
  grid-template-columns: 1fr 0.9fr 150px;
  gap: 34px;
  align-items: start;
  padding: 34px;
}

.session-card ul {
  margin: 82px 0 0;
  padding-left: 18px;
}

.session-card strong {
  justify-self: end;
  border: 1px solid rgb(144 188 207 / 0.55);
  border-radius: 999px;
  color: var(--blue);
  font-size: 12px;
  letter-spacing: 0.18em;
  padding: 12px 16px;
  text-transform: uppercase;
  white-space: nowrap;
}

.note-section {
  background: rgb(144 188 207 / 0.16);
  border-top: 1px solid rgb(144 188 207 / 0.45);
  border-bottom: 1px solid rgb(144 188 207 / 0.45);
  padding: 100px 0;
}

.note-section p {
  max-width: 900px;
  margin: 0 auto;
  color: var(--soft);
  text-align: center;
}

.check-list {
  display: grid;
  gap: 14px;
}

.check-list p {
  margin: 0;
  border-bottom: 1px solid rgb(207 197 178 / 0.55);
  padding: 0 0 14px 30px;
  position: relative;
}

.check-list p::before {
  position: absolute;
  left: 0;
  top: 0.45em;
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: var(--blue);
  content: "";
}

.cta-band {
  background: var(--band-gold);
  padding: 100px 0;
  text-align: center;
}

.cta-band h2 {
  max-width: 850px;
  margin: 0 auto;
}

.cta-band .pill {
  margin-top: 30px;
}

.offers {
  position: relative;
  z-index: 2;
  background: var(--shell);
  padding: 100px 0;
}

.section-title {
  margin-bottom: 38px;
  text-align: center;
}

.section-title h2 {
  margin: 0;
  color: #202222;
  font-family: Montserrat, Arial, sans-serif;
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.32em;
  text-transform: uppercase;
}

.section-title::after {
  display: block;
  width: 64px;
  height: 1px;
  margin: 14px auto 0;
  content: "";
  background: var(--gold);
}

.offer-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
}

.offer-card {
  overflow: visible;
  border: 0;
  background: white;
  box-shadow: 0 20px 55px rgb(55 55 45 / 0.08);
  position: relative;
  text-align: center;
  transition: transform 0.5s ease, box-shadow 0.5s ease;
}

.offer-card:hover {
  box-shadow: 0 28px 70px rgb(55 55 45 / 0.13);
  transform: translateY(-4px);
}

.offer-image {
  position: relative;
  height: 190px;
  overflow: hidden;
  background: var(--sand);
}

.offer-image::before {
  position: absolute;
  inset: 0;
  content: "";
  background-image: var(--image);
  background-size: cover;
  background-position: center;
  filter: saturate(0.72) sepia(0.1);
  transition: transform 0.7s ease;
}

.offer-card:hover .offer-image::before { transform: scale(1.05); }

.offer-image::after {
  position: absolute;
  inset: 0;
  content: "";
  background: linear-gradient(0deg, white, rgb(255 255 255 / 0.22), transparent);
}

.offer-icon,
.offer-image .icon-circle {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 162px;
  display: flex;
  width: 64px;
  height: 64px;
  align-items: center;
  justify-content: center;
  border: 4px solid white;
  border-radius: 999px;
  background: var(--blue);
  color: white;
  transform: translateX(-50%);
}

.offer-icon img,
.offer-icon svg {
  width: 44px;
  height: 44px;
  object-fit: contain;
}

.offer-image .icon-circle {
  margin: 0;
  box-shadow: none;
}

.offer-image .icon-circle::before {
  width: 34px;
  height: 34px;
  content: "";
  background:
    radial-gradient(circle, transparent 0 11px, white 12px, transparent 13px),
    radial-gradient(circle, white 0 2px, transparent 3px),
    linear-gradient(white, white),
    linear-gradient(90deg, white, white);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 34px 34px, 34px 34px, 1px 42px, 42px 1px;
}

.offer-body { padding: 42px 24px 18px; }
.offer-body p { margin: 14px auto 0; max-width: 220px; font-size: 14px; line-height: 1.65; }

.quote {
  position: relative;
  min-height: 280px;
  overflow: hidden;
  padding: 100px 28px;
  text-align: center;
  background: var(--shell);
}

.quote::before {
  position: absolute;
  inset: 0;
  content: "";
  background-image: var(--image);
  background-size: cover;
  background-position: center;
  filter: saturate(0.7) sepia(0.05) brightness(1.12);
}

.quote::after {
  position: absolute;
  inset: 0;
  content: "";
  background: rgb(255 255 255 / 0.58);
}

.quote p {
  position: relative;
  z-index: 2;
  max-width: 980px;
  margin: 0 auto;
  color: #202222;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(1.85rem, 3.1vw, 3.35rem);
  letter-spacing: -0.02em;
  line-height: 1.08;
}

.quote p::after {
  display: block;
  width: 128px;
  height: 1px;
  margin: 30px auto 0;
  content: "";
  background: var(--gold);
}

.editorial {
  position: relative;
  overflow: hidden;
  background: var(--pearl);
  padding: 180px 0 100px;
}

.editorial-grid {
  display: grid;
  grid-template-columns: 0.9fr 1fr;
  align-items: center;
  gap: 56px;
}

.editorial-grid.reverse { grid-template-columns: 1fr 0.9fr; }
.editorial-grid.reverse .editorial-copy { order: 2; }
.editorial-copy p:not(.eyebrow) { max-width: 580px; margin-top: 28px; }

.editorial-image {
  position: relative;
  min-height: 560px;
  border-radius: 999px 999px 0 0;
  background: var(--sand);
  box-shadow: 0 28px 85px rgb(55 55 45 / 0.11);
}

.editorial-image::before {
  border-radius: 999px 999px 0 0;
  background-image: linear-gradient(0deg, rgb(26 26 26 / 0.12), transparent 46%), var(--image);
}

.steps {
  position: relative;
  background: var(--pearl);
  padding: 100px 0;
}

.steps .section-inner {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0;
  background: #ffffff;
}

.steps-link { margin-top: 38px; text-align: center; }

.step {
  padding: 40px 32px 44px;
  text-align: center;
}

.step + .step {
  border-left: 1px solid rgb(207 197 178 / 0.55);
}

.step-number {
  color: var(--gold);
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 46px;
  line-height: 1;
}

.step h3 {
  margin: 18px 0 0;
  color: #202222;
  font-size: 20px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.step p {
  max-width: 300px;
  margin: 14px auto 0;
  color: var(--soft);
  font-size: 14px;
  line-height: 1.8;
}

.reviews {
  background: var(--pearl);
  padding: 100px 0;
}

.review-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  padding-bottom: 80px;
}

.review-card {
  background: white;
  box-shadow: 0 20px 55px rgb(55 55 45 / 0.08);
  padding: 36px;
  text-align: center;
}

.review-mark { color: var(--gold); font-size: 72px; line-height: 0.6; }
.review-card p { color: #202222; font-size: 18px; line-height: 1.8; }

.contact {
  position: relative;
  background: var(--pearl);
  padding: 180px 0 100px;
}

.contact-grid {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 58px;
}

.contact-copy p:not(.eyebrow) { max-width: 580px; margin-top: 28px; }

.contact-methods {
  display: grid;
  gap: 12px;
  margin-top: 34px;
}

.contact-methods a {
  display: flex;
  align-items: center;
  gap: 16px;
  border: 1px solid rgb(207 197 178 / 0.62);
  border-radius: 2px;
  background: rgb(255 255 255 / 0.6);
  color: #202222;
  padding: 18px 22px;
  text-decoration: none;
  transition: border-color 0.25s ease, transform 0.25s ease;
}

.contact-methods a:hover,
.contact-methods a:focus-visible {
  border-color: var(--blue-dark);
  transform: translateY(-2px);
}

.method-label {
  display: block;
  color: var(--gold);
  font-size: 10px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
}

.method-value {
  display: block;
  margin-top: 7px;
  font-size: 15px;
}

.location-box {
  border: 1px solid rgb(207 197 178 / 0.65);
  background: white;
  box-shadow: 0 20px 55px rgb(55 55 45 / 0.06);
  margin-top: 38px;
  padding: 28px;
}

.location-box h2 {
  font-size: 32px;
}

.location-box p,
.form-intro {
  color: var(--soft);
  line-height: 1.8;
}

.contact-form {
  border: 1px solid rgb(207 197 178 / 0.7);
  background: rgb(255 255 255 / 0.86);
  box-shadow: 0 28px 80px rgb(55 55 45 / 0.1);
  padding: 46px;
  backdrop-filter: blur(16px);
}

.contact-form label { display: block; margin-bottom: 28px; }

.contact-form span {
  display: block;
  color: var(--gold);
  font-size: 10px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
}

.contact-form input,
.contact-form textarea {
  width: 100%;
  margin-top: 12px;
  border: 0;
  border-bottom: 1px solid var(--sand);
  background: transparent;
  color: var(--ink);
  font: inherit;
  outline: 0;
  padding: 14px 0;
}

.contact-form textarea {
  min-height: 160px;
  resize: vertical;
  border: 1px solid var(--sand);
  background: var(--shell);
  padding: 18px;
}

.site-footer {
  position: relative;
  overflow: hidden;
  margin: 0 10px;
  border-top: 1px solid rgb(207 197 178 / 0.55);
  background: white;
  padding: 50px 0 56px;
}

.footer-inner {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: max-content max-content 1fr;
  align-items: start;
  column-gap: 72px;
  justify-content: stretch;
}

.footer-logo {
  justify-self: start;
}

.footer-lower {
  display: contents;
}

.site-footer .brand-mark {
  width: auto;
  height: 76px;
}

.site-footer .brand {
  min-width: max-content;
}

.site-footer .brand-title {
  font-size: 21px;
  letter-spacing: 0.11em;
  white-space: nowrap;
}

.site-footer .brand-subtitle {
  font-size: 8px;
  letter-spacing: 0.34em;
  white-space: nowrap;
}

.footer-links {
  display: grid;
  grid-template-columns: repeat(2, max-content);
  column-gap: 34px;
  row-gap: 12px;
  padding-top: 32px;
  color: var(--soft);
  font-size: 10px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}

.footer-links a:hover { color: var(--gold); }

.footer-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: flex-end;
  justify-self: stretch;
  margin-top: 0;
  padding-top: 18px;
}

.footer-buttons {
  display: grid;
  grid-template-columns: repeat(4, 42px);
  gap: 10px;
  justify-content: flex-end;
  width:100%;
}

.footer-button {
  display: inline-flex;
  width: 42px;
  height: 42px;
  align-items: center;
  justify-content: center;
  border: 1px solid rgb(144 188 207 / 0.55);
  border-radius: 999px;
  background: var(--pearl);
  color: var(--blue);
  transition: background 0.25s ease, color 0.25s ease, transform 0.25s ease;
}

.footer-button:hover {
  background: var(--blue);
  color: white;
  transform: translateY(-1px);
}

.footer-button svg {
  width: 19px;
  height: 19px;
  stroke-width: 1.55;
}

/* ── Mobile navigation ───────────────────────────────── */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: space-between;
  width: 28px;
  height: 19px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  flex: 0 0 auto;
}

.nav-toggle span {
  display: block;
  width: 100%;
  height: 1.5px;
  background: var(--ink);
  transition: transform 0.3s ease, opacity 0.3s ease;
  transform-origin: center;
}

.site-header.nav-open .nav-toggle span:nth-child(1) {
  transform: translateY(8.75px) rotate(45deg);
}

.site-header.nav-open .nav-toggle span:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}

.site-header.nav-open .nav-toggle span:nth-child(3) {
  transform: translateY(-8.75px) rotate(-45deg);
}

.mobile-nav {
  display: none;
  border-top: 1px solid rgb(207 197 178 / 0.35);
  background: rgb(255 255 255 / 0.97);
  backdrop-filter: blur(18px);
  padding: 8px 28px 28px;
}

.mobile-nav nav {
  display: grid;
}

.mobile-nav nav a {
  border-bottom: 1px solid rgb(207 197 178 / 0.35);
  color: #202222;
  font-size: 12px;
  letter-spacing: 0.24em;
  padding: 18px 0;
  text-transform: uppercase;
  transition: color 0.2s ease;
}

.mobile-nav nav a:hover,
.mobile-nav nav a.active {
  color: var(--gold);
}

.mobile-nav nav a.mobile-sub {
  padding-left: 18px;
  font-size: 10px;
  letter-spacing: 0.18em;
  color: #6e7471;
  text-transform: none;
}

.mobile-nav .pill {
  margin-top: 20px;
  width: 100%;
  min-height: 50px;
}

@keyframes mobile-nav-in {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

@media (max-width: 980px) {
  .nav-toggle { display: flex; }
  .site-header.nav-open .mobile-nav { display: block; animation: mobile-nav-in 0.22s ease both; }
  .main-nav { display: none; }
  .hero {
    min-height: 0;
    padding-top: 75px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }
  .hero-image {
    position: relative;
    order: 1;
    width: 100%;
    height: 56vh;
    min-height: 340px;
    opacity: 1;
  }
  .hero-image::before {
    inset: 0;
    background-image: var(--hero-url);
    background-position: 50% 30%;
    transform: none;
  }
  .hero-content {
    order: 3;
    display: block;
    box-sizing: border-box;
    width: min(100% - 36px, 620px);
    margin-inline: auto;
    padding: 40px 0 60px;
  }
  .hero-content > div { width: 100%; }
  .hero h1,
  .hero p { max-width: 100%; }
  .hero .wave {
    position: static;
    order: 2;
    width: calc(100% + 160px);
    height: 88px;
    margin-top: -62px;
    margin-left: -80px;
    bottom: auto;
    z-index: 5;
  }
  .hero .compass { display: none; }
  .editorial { padding: 120px 0 60px; }
  .contact { padding: 120px 0 60px; }
  .hero-inner,
  .hero-content,
  .split-grid,
  .for-whom-grid,
  .content-grid,
  .approach-grid,
  .session-card,
  .editorial-grid,
  .editorial-grid.reverse,
  .contact-grid { grid-template-columns: 1fr; }
  .editorial-grid.reverse .editorial-copy { order: initial; }
  .expect-grid,
  .reviews {
  background: var(--pearl);
  padding: 100px 0;
}

.review-grid { grid-template-columns: 1fr; }
  .values-grid {
    display: flex;
    width: min(100% - 56px, 420px);
    max-width: none;
    overflow-x: auto;
    gap: 16px;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .values-grid::-webkit-scrollbar { display: none; }
  .value-card {
    flex: 0 0 100%;
    border: 1px solid rgb(207 197 178 / 0.65);
    scroll-snap-align: center;
  }
  .offer-grid { grid-template-columns: repeat(2, 1fr); }
  .value-card + .value-card { border-left: 1px solid rgb(207 197 178 / 0.65); border-top: 1px solid rgb(207 197 178 / 0.65); }
  .expect-grid article + article { border-left: 0; border-top: 1px solid rgb(207 197 178 / 0.55); }
  .session-card strong { justify-self: start; }
  .word-strip { font-size: clamp(12px, 3vw, 16px); }
  .word-strip .section-inner {
    width: 100%;
  }
  .word-track {
    gap: 28px;
    animation-duration: 24s;
  }
  .for-whom-grid { gap: 40px; }
  .split-text { padding: 48px 28px; }
  .for-whom { padding: 66px 0; }
  .site-footer { margin: 0; padding: 40px 0 36px; }
  .footer-inner {
    grid-template-columns: 1fr;
    row-gap: 26px;
    align-items: start;
    text-align: left;
  }
  .footer-logo { grid-column: auto; justify-self: start; }
  .footer-links { padding-top: 0; }
  .footer-actions,
  .footer-buttons { justify-items: start; justify-content: flex-start; }
  .footer-actions { justify-self: start; padding-top: 0; }
  .footer-buttons { width: auto; }
  .split-text { min-height: auto; }
  .values { padding-bottom: 48px; }
  .value-card { padding: 26px 24px 18px; }
  .expect-grid article { padding: 26px 24px 30px; }
  .offers { padding: 60px 0 64px; }
  .offer-image { height: 160px; }
  .offer-icon, .offer-image .icon-circle { top: 132px; }
  .offer-grid { gap: 16px; }
  .offer-card h3 { font-size: 14px; letter-spacing: 0.1em; }
}

@keyframes word-marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

@media (max-width: 620px) {
  .header-inner, .section-inner, .hero-inner, .hero-content, .footer-inner { width: min(100% - 36px, 1280px); }
  .brand-title { font-size: 16px; }
  .brand-subtitle { letter-spacing: 0.24em; }
  .brand-mark { width: auto; height: 55px; }
  .site-footer .brand-mark { width: auto; height: 67px; }
  .footer-buttons { grid-template-columns: repeat(4, 42px); }
  .values-grid { width: min(100% - 36px, 420px); }
  .header-inner > .pill { display: none; }
  .hero { padding-top: 75px; }
  .hero-content { padding-top: 32px; padding-bottom: 56px; }
  .hero h1 { font-size: calc(clamp(2.8rem, 5.25vw, 5.2rem) - 5px); }
  .hero p { max-width: 100%; }
  .compass::before, .compass::after { width: 46px; }
  .split-image, .editorial-image { min-height: 380px; }
  .editorial-image { width: calc(100% - 40px); margin-inline: auto; }
  
  .contact-form { padding: 28px; }
  .step + .step { border-left: 0; border-top: 1px solid rgb(207 197 178 / 0.55); }
  .word-strip { padding: 72px 0 0; }
  .offer-grid { grid-template-columns: 1fr; }
}

/* ---- FAQ ---- */
.faq {
  background: var(--pearl);
  padding: 100px 0;
}

.faq .eyebrow { text-align: left; }

.faq h2 {
  margin: 0 0 34px;
  color: var(--ink);
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 32px;
  font-weight: 400;
  line-height: 1.3;
  text-align: left;
}

/* twee kolommen naast elkaar; scheelt ongeveer de helft aan paginahoogte */
.faq-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 64px;
  row-gap: 0;
  align-items: start;
  max-width: none;
  margin: 0;
}

.faq-item {
  border-bottom: 1px solid rgb(207 197 178 / 0.55);
}

/* in twee kolommen sluit een doorlopende lijn beter af dan een open einde */
.faq-item:first-child,
.faq-item:nth-child(2) {
  border-top: 1px solid rgb(207 197 178 / 0.55);
}

/* de hele rij is de knop */
.faq-item summary {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  justify-content: space-between;
  padding: 24px 0;
  cursor: pointer;
  list-style: none;
  transition: color 0.25s ease;
}

/* standaard driehoekje weghalen (WebKit en de rest) */
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::marker { content: ""; }

.faq-item summary:hover h3,
.faq-item summary:focus-visible h3 { color: var(--gold); }

.faq-item summary:focus-visible {
  outline: 2px solid var(--blue-dark);
  outline-offset: 4px;
  border-radius: 2px;
}

.faq-item h3 {
  margin: 0;
  color: #202222;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 23px;
  font-weight: 500;
  line-height: 1.4;
  transition: color 0.25s ease;
}

/* chevron rechts, draait bij openen */
.faq-item summary::after {
  content: "";
  flex: 0 0 auto;
  width: 9px;
  height: 9px;
  margin-top: 9px;
  border-right: 1.5px solid var(--gold);
  border-bottom: 1.5px solid var(--gold);
  transform: rotate(45deg);
  transform-origin: center;
  transition: transform 0.3s ease;
}

.faq-item[open] summary::after { transform: rotate(-135deg); }

.faq-answer {
  padding: 0 34px 24px 0;
  animation: faq-open 0.35s ease both;
}

.faq-answer p {
  margin: 0 0 18px;
  color: var(--soft);
  font-size: 15px;
  line-height: 1.9;
}

.faq-answer p:last-child { margin-bottom: 0; }

@keyframes faq-open {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

@media (max-width: 880px) {
  .faq-list { grid-template-columns: 1fr; column-gap: 0; }
  .faq-item:nth-child(2) { border-top: 0; }
}

/* ---- Formulier: privacy-akkoord en foutmelding ---- */
.form-consent {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin: 6px 0 4px;
  color: var(--soft);
  font-size: 13px;
  line-height: 1.7;
}

.form-consent input[type="checkbox"] {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  margin-top: 3px;
  accent-color: var(--gold);
}

.form-consent a { color: var(--gold); }

.form-error {
  margin: 0 0 18px;
  padding: 14px 18px;
  background: rgb(162 148 100 / 0.12);
  border-left: 2px solid var(--gold);
  color: var(--soft);
  font-size: 14px;
  line-height: 1.7;
}

.honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ---- Juridische pagina's (privacy) ---- */
.legal { padding: 100px 0; }

.legal .section-inner { max-width: 820px; }

.legal h2 {
  margin: 48px 0 18px;
  color: var(--ink);
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 28px;
  font-weight: 400;
}

.legal h2:first-of-type { margin-top: 0; }

.legal p,
.legal li {
  color: var(--soft);
  font-size: 15px;
  line-height: 1.9;
}

.legal ul { padding-left: 20px; }

.legal li { margin-bottom: 10px; }

@media (max-width: 720px) {
  .faq { padding: 72px 0; }
  .faq h2 { font-size: 26px; margin-bottom: 26px; }
  .faq-item h3 { font-size: 20px; }
  .faq-item summary { padding: 20px 0; gap: 16px; }
  .faq-answer { padding-right: 24px; }
}

/* ---- Doorverwijzing binnen sessiekaarten ---- */
.session-card h2 a {
  color: inherit;
  text-decoration: none;
}

.session-card h2 a:hover,
.session-card h2 a:focus-visible { color: var(--gold); }

.more-link {
  margin: 16px 0 0;
  font-size: 13px;
  letter-spacing: 0.06em;
}

.more-link a {
  color: var(--gold);
  text-decoration: none;
  border-bottom: 1px solid rgb(162 148 100 / 0.4);
  padding-bottom: 2px;
}

.more-link a:hover,
.more-link a:focus-visible { border-bottom-color: var(--gold); }

/* ---- Derde bandkleur: zandwaas uit het merkpalet ----
   --pearl en --shell schelen te weinig om als sectiegrens te lezen.
   Deze tint geeft wél een zichtbare overgang, zonder buiten de huisstijl te gaan. */
.band-sand {
  background: var(--band-gold);
}

/* Beeldband met tekst ernaast: iets minder hoog dan op de homepage,
   zodat hij als onderbreking werkt en niet als tweede hero. */
.split.split-compact .split-image { min-height: 460px; }
.split.split-compact .split-text { padding-top: 62px; padding-bottom: 62px; }

@media (max-width: 980px) {
  .split.split-compact .split-image { min-height: 320px; }
}

/* Beeld rechts in plaats van links, zodat opeenvolgende banden elkaar afwisselen */
.split-grid.reverse .split-image { order: 2; }

/* Iconenlijst ook bruikbaar buiten de homepage-sectie */
.content-grid .for-whom-list { margin: 0; }

.expect-lead {
  max-width: 640px;
  margin: 0 auto 44px;
  color: var(--soft);
  font-size: 15px;
  line-height: 1.9;
  text-align: center;
}

.expect-note { margin: 48px auto 0; }

/* Op mobiel is .values-grid een horizontale carrousel. Kaarten die zijwaarts
   buiten beeld staan komen nooit langs de IntersectionObserver en zouden dus
   onzichtbaar blijven. Binnen de carrousel daarom geen fade-in. */
@media (max-width: 980px) {
  .values-grid .reveal,
  .values-grid .reveal.is-visible {
    opacity: 1;
    transform: none;
    animation: none;
  }
}

/* =======================================================================
   Portretsectie met meelopend beeld
   Het portret blijft staan terwijl de tekstblokken erlangs schuiven; elk
   blok komt afzonderlijk in beeld. Bewust rustig gehouden: één beweging
   tegelijk, geen zwevende effecten.
   ======================================================================= */
.portrait-story {
  position: relative;
  background: var(--shell);
  padding: 100px 0;
}

.portrait-grid {
  display: grid;
  grid-template-columns: 0.85fr 1fr;
  gap: 90px;
  /* géén align-items: start — de kolom moet de volle rijhoogte krijgen,
     anders heeft het meelopende blok hieronder geen ruimte om te schuiven */
}

/* de kolom vult de volle rijhoogte; het blok daarbinnen blijft staan
   terwijl de tekst ernaast doorschuift */
.portrait-col { height: 100%; }

/* beeld rechts in plaats van links */
.portrait-grid.reverse { grid-template-columns: 1fr 0.85fr; }
.portrait-grid.reverse .portrait-col { order: 2; }

.portrait-sticky {
  position: sticky;
  top: 130px;
}

.portrait-figure {
  position: relative;
  width: min(100%, 430px);
  margin: 0;   /* browsers geven <figure> standaard 1em/40px mee */
}

/* zelfde boogvorm als het beeld in de hero */
.portrait-figure img {
  position: relative;
  z-index: 2;
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: 999px 999px 0 0;
  box-shadow: 0 28px 85px rgb(55 55 45 / 0.11);
  filter: saturate(0.72) sepia(0.08) brightness(1.05);
}

/* Het verschoven gouden kader uit de hero. Daar ligt het óp het beeld en
   steekt het naar linksboven uit; hier is het portret de linkerkolom, dus
   is de verschuiving gespiegeld naar rechts. Zo blijft de linkerkant van
   het beeld strak uitgelijnd met de rest van de pagina. */

/* ---- de tekstblokken ---- */
.story-list {
  display: flex;
  flex-direction: column;
  gap: 62px;
  max-width: 620px;
}

.story-item-title {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  margin: 0 0 18px;
  color: var(--gold);
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 25px;
  font-weight: 500;
  letter-spacing: 0.01em;
  line-height: 1.3;
}

/* het streepje vóór de kop, in plaats van een bolletje */
.story-item-title::before {
  flex: 0 0 auto;
  width: 34px;
  height: 1px;
  margin-top: 15px;
  background: var(--gold);
  content: "";
}

.story-body p {
  margin: 0 0 18px;
  color: var(--soft);
  font-size: 15px;
  line-height: 1.95;
}

.story-body p:last-child { margin-bottom: 0; }

.story-body { padding-left: 52px; }

/* ---- afsluitende oproep ---- */
.story-cta { padding-left: 52px; }


@media (max-width: 980px) {
  .portrait-story { padding: 64px 0 72px; }
  .portrait-grid,
  .portrait-grid.reverse { grid-template-columns: 1fr; gap: 52px; }
  /* op één kolom staat het beeld altijd bovenaan */
  .portrait-grid.reverse .portrait-col { order: 0; }
  .portrait-sticky { position: static; }
  .portrait-figure { width: min(100%, 360px); margin-inline: auto; }
  /* kleinere verschuiving, anders valt het gouden kader buiten de rand */
  
  .story-list { gap: 46px; }
  .story-body,
  .story-cta { padding-left: 0; }
  .story-item-title { font-size: 22px; }
  
}

/* knoppenrij in de paginakop: één knop plus een rustige tekstlink,
   zodat het ook past in de smalle tekstkolom van een laptopscherm */
.editorial-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 26px;
  margin-top: 38px;
}

.editorial-textlink {
  color: var(--gold);
  font-size: 13px;
  letter-spacing: 0.06em;
  border-bottom: 1px solid rgb(162 148 100 / 0.4);
  padding-bottom: 3px;
  transition: border-color 0.25s ease;
}

.editorial-textlink:hover,
.editorial-textlink:focus-visible { border-bottom-color: var(--gold); }

.editorial-copy .eyebrow { margin-bottom: 18px; }

@media (max-width: 620px) {
  .editorial-actions { gap: 10px; margin-top: 30px; }
  .editorial-actions .pill,
  .editorial-actions .outline-pill { padding-inline: 22px; }
}

/* de citeerbare openingszin krijgt iets meer gewicht dan de regel eronder */
.editorial-lead {
  color: #4f5552;
  font-size: 16px;
  line-height: 1.95;
}

.editorial-copy .editorial-lead + p {
  margin-top: 18px;
  color: var(--gold);
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 19px;
  line-height: 1.5;
}

/* =======================================================================
   Tijdlijn — "Zo werkt het"
   Eén doorlopende lijn met een stip die meescrollt, tekstblokken links en
   rechts afwisselend, en grote lichte cijfers achter de tekst.
   ======================================================================= */
.timeline {
  position: relative;
  background: var(--pearl);
  padding: 100px 0;
}

/* drie kolommen: tekst | lijn | beeld — en omgekeerd bij de tweede helft */
/* Twee kolommen; de foto blijft staan terwijl de stappen erlangs schuiven.
   De stappen staan gewoon onder elkaar en vervagen op basis van waar ze
   in beeld staan — animations.js regelt die dekking. */
.timeline-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 86px;
}

.timeline-row + .timeline-row { margin-top: 120px; }

.timeline-row .timeline-steps { max-width: 430px; justify-self: end; }

.timeline-row.reverse .timeline-steps { justify-self: start; }
.timeline-row.reverse .timeline-figure { margin-left: auto; }

/* de stip blijft in beeld en zakt zo mee langs de lijn */


.timeline-steps {
  display: grid;
  /* ruime afstand: elke stap krijgt zijn eigen moment in beeld, en de
     kolom wordt hoog genoeg zodat de foto ernaast kan blijven staan */
  gap: 300px;
  padding: 150px 0 170px;
}

/* de dekking wordt tijdens het scrollen gezet; de overgang houdt het zacht */
.timeline-step { transition: opacity 0.35s ease; }

.timeline-step { position: relative; }

/* het grote cijfer op de achtergrond */
.timeline-step::before {
  position: absolute;
  top: -78px;
  left: -10px;
  z-index: 0;
  content: attr(data-nummer);
  color: rgb(162 148 100 / 0.10);
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 112px;
  line-height: 1;
  pointer-events: none;
  user-select: none;
}

.timeline-row.reverse .timeline-step::before { left: -10px; }

.timeline-step > * { position: relative; z-index: 1; }

.timeline-step h3 {
  margin: 0 0 14px;
  color: #202222;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 27px;
  font-weight: 500;
  line-height: 1.3;
}

.timeline-step p {
  margin: 0;
  color: var(--soft);
  font-size: 15px;
  line-height: 1.95;
}

/* beeld in dezelfde boogvorm met gouden kader als op Over mij */
.timeline-figure {
  position: relative;
  width: min(100%, 440px);
  margin: 0;
}

.timeline-figure img {
  position: relative;
  z-index: 2;
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: 999px 999px 0 0;
  box-shadow: 0 28px 85px rgb(55 55 45 / 0.11);
  filter: saturate(0.72) sepia(0.08) brightness(1.05);
}

/* De kolom vult de rij. Het beeld staat vast: de rijhoogte wordt door de
   foto zelf bepaald, dus meelopen zou toch geen ruimte hebben. De stip op
   de lijn is hier de beweging. */
/* de kolom vult de rij; de foto erbinnen blijft staan terwijl de
   stappen ernaast doorschuiven */
.timeline-sticky { height: 100%; }

.timeline-figure { position: sticky; top: 128px; }

@media (max-width: 980px) {
  .timeline { padding: 72px 0; }
  
  /* op smallere schermen vervalt de tweede kolom en stapelt alles:
     eerst de foto, daarna de tekst eronder */
  .timeline-row { grid-template-columns: 1fr; column-gap: 0; row-gap: 48px; height: auto; }
  .timeline-row .timeline-steps { max-width: none; justify-self: stretch; }
  .timeline-row.reverse .timeline-steps { justify-self: stretch; }
  .timeline-sticky { order: -1; }
    .timeline-steps { row-gap: 56px; }
  .timeline-step { grid-area: auto; opacity: 1; transform: none; pointer-events: auto; }
  .timeline-figure { position: static; }
  .timeline-figure { width: min(100%, 340px); margin-inline: auto; }
  .timeline-steps { padding: 0; }
  .timeline-row.reverse .timeline-figure { margin-inline: auto; }
  .timeline-steps { gap: 56px; }
  .timeline-step::before { font-size: 96px; top: -56px; left: -6px; }
  .timeline-row.reverse .timeline-step::before { right: auto; left: -6px; }
  .timeline-step h3 { font-size: 23px; }
  .timeline-step h2 { font-size: 25px; overflow-wrap: break-word; }
}

@media (prefers-reduced-motion: reduce) {
  .ripples ellipse { animation: none; }
}

/* ---- Hero: tweede, rustige actie naast de knop ---- */
.hero-link {
  display: inline-block;
  margin: 36px 0 0 26px;
  color: var(--gold);
  font-size: 13px;
  letter-spacing: 0.06em;
  border-bottom: 1px solid rgb(162 148 100 / 0.4);
  padding-bottom: 3px;
  transition: border-color 0.25s ease;
}

.hero-link:hover,
.hero-link:focus-visible { border-bottom-color: var(--gold); }

/* ---- USP's: ze hadden geen enkele hover-toestand ---- */
.value-card {
  border-radius: 2px;
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.45s ease;
}

.value-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 26px 60px rgb(55 55 45 / 0.09);
}

.icon-circle {
  transition: border-color 0.4s ease, box-shadow 0.4s ease, transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.value-card:hover .icon-circle {
  border-color: rgb(162 148 100 / 0.7);
  box-shadow: 0 22px 46px rgb(143 130 92 / 0.16);
  transform: translateY(-3px) scale(1.04);
}

/* heel trage zweving, zodat de rij ook zonder muis leeft */
.values-grid .icon-circle img { animation: zweef 7s ease-in-out infinite; }
.value-card:nth-child(2) .icon-circle img { animation-delay: 1.2s; }
.value-card:nth-child(3) .icon-circle img { animation-delay: 2.4s; }

@keyframes zweef {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-5px); }
}

/* ---- Hero: aanwijzing om te scrollen ---- */
.hero-scroll {
  position: absolute;
  left: 50%;
  bottom: 34px;
  z-index: 9;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  color: var(--gold);
  font-size: 10px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  transform: translateX(-50%);
  pointer-events: none;
}

.hero-scroll span {
  display: block;
  width: 1px;
  height: 42px;
  background: linear-gradient(180deg, rgb(162 148 100 / 0.7), rgb(162 148 100 / 0));
  animation: scroll-hint 2.6s ease-in-out infinite;
  transform-origin: top;
}

@keyframes scroll-hint {
  0%, 100% { transform: scaleY(0.4); opacity: 0.4; }
  50%      { transform: scaleY(1);   opacity: 1; }
}

@media (max-width: 980px) {
  .hero-scroll { display: none; }
  .hero-link { margin-left: 0; display: block; margin-top: 22px; }
}

@media (prefers-reduced-motion: reduce) {
  .values-grid .icon-circle img,
  .hero-scroll span { animation: none; }
  .value-card,
  .icon-circle { transition: none; }
}

/* ---- Toonklassen ----
   Nu de haarlijnen weg zijn, scheiden tonen de secties. Deze klassen
   worden gebruikt waar twee buren anders dezelfde kleur zouden krijgen. */
.tone-pearl { background: var(--pearl); }
.tone-shell { background: var(--shell); }
.tone-gold  { background: var(--band-gold); }

/* De regel voor rustige modus bovenaan dit bestand staat vóór .word-strip .word-track
   en verliest daardoor op volgorde. Hier nogmaals, met gelijke specificiteit. */
@media (prefers-reduced-motion: reduce) {
  .word-strip .word-track,
  .word-track,
  .wave { animation: none; }
}

/* =======================================================================
   TYPOGRAFIESCHAAL
   Er liepen 20 verschillende combinaties voor lopende tekst, 9 voor H2 en
   4 voor H3 door elkaar. Hieronder één schaal die de rest overschrijft.
   Vier tekstmaten, drie kopmaten, één labelstijl.
   ======================================================================= */

/* --- lopende tekst: 15px is de norm --- */
main p,
main li,
.rich-text p,
.story-body p,
.faq-answer p,
.check-list p,
.note-section p,
.value-card p,
.offer-card p,
.expect-grid p,
.step p,
.approach-grid p,
.timeline-step p,
.for-whom-list span,
.session-card li,
.review-card p,
.contact-copy p,
.legal p,
.legal li {
  font-family: Montserrat, Arial, sans-serif;
  font-size: 15px;
  line-height: 1.9;
}

/* --- intro's een maat groter --- */
.editorial-lead,
.editorial-copy > p:not(.eyebrow):first-of-type,
.split-text p,
.for-whom-copy p:not(.eyebrow),
.hero p,
.expect-lead {
  font-size: 16px;
  line-height: 1.9;
}

/* --- meta: interface-tekst, geen proza --- */
.form-intro,
.method-value,
.more-link,
.editorial-textlink,
.hero-link,
.story-cta-second {
  font-family: Montserrat, Arial, sans-serif;
  font-size: 13px;
  line-height: 1.8;
}

/* --- labels: kickers en kaarttitels --- */
.eyebrow,
.value-card h3,
.offer-card h3,
.expect-grid h3,
.step h3,
.approach-grid article h3,
.session-card h2 {
  font-family: Montserrat, Arial, sans-serif;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.22em;
  line-height: 1.6;
  text-transform: uppercase;
}

.eyebrow { color: var(--gold); }

.value-card h3,
.offer-card h3,
.expect-grid h3,
.step h3,
.approach-grid article h3,
.session-card h2 { color: #202222; }

/* --- koppen: drie maten --- */
/* groot: paginakop en de dragende secties */
.hero h1,
.editorial-copy h1,
.contact-copy h1,
.split-text h2,
.for-whom-copy h2 {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 400;
  letter-spacing: -0.025em;
  line-height: 1.08;
}

.hero h1 { font-size: clamp(2.7rem, 5vw, 4.6rem); }

.editorial-copy h1,
.contact-copy h1 { font-size: clamp(2.3rem, 4vw, 3.7rem); }

.split-text h2,
.for-whom-copy h2 { font-size: clamp(1.9rem, 3vw, 2.9rem); }

/* midden: sectiekoppen */
.section-title h2,
.faq h2,
.cta-band h2,
.content-grid h2,
.legal h1 {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(1.7rem, 2.5vw, 2.3rem);
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1.25;
}

/* klein: onderwerpen binnen een sectie */
.faq-item h3,
.story-item-title,
.timeline-step h3,
.location-box h2,
.legal h2 {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 22px;
  font-weight: 500;
  line-height: 1.35;
}

@media (max-width: 620px) {
  main p, main li, .rich-text p, .story-body p, .faq-answer p,
  .timeline-step p, .value-card p, .offer-card p { font-size: 14.5px; }

  .editorial-lead, .split-text p, .for-whom-copy p:not(.eyebrow),
  .hero p { font-size: 15px; }

  .faq-item h3, .story-item-title, .timeline-step h3 { font-size: 20px; }
}

/* --- Verticaal ritme van de tekst ---
   Alinea's vielen deels terug op de browserstandaard (1em boven én onder),
   wat tien verschillende afstanden opleverde. Eén ritme: alleen ruimte
   ónder een alinea, en niets onder de laatste. */
main p,
main li,
.rich-text p,
.story-body p,
.faq-answer p,
.timeline-step p,
.legal p,
.legal li {
  margin-top: 0;
  margin-bottom: 18px;
}

main p:last-child,
main li:last-child,
.rich-text p:last-child,
.story-body p:last-child,
.faq-answer p:last-child,
.timeline-step p:last-child,
.legal p:last-child { margin-bottom: 0; }

/* lijstjes hebben hun eigen, kleinere ritme */
.check-list p,
.for-whom-list span,
.session-card li { margin-bottom: 0; }

/* afstand tussen kop en tekst, overal gelijk */
.faq-item h3,
.timeline-step h3,
.story-item-title { margin-bottom: 14px; }

.section-title h2,
.faq h2,


/* de losse regelafstand die nog afweek */
.approach-grid p,
.session-card p,
.session-card li { line-height: 1.9; }

/* Bijschriften onder een beeld. Er stonden drie losse regels voor deze
   selector door het bestand verspreid, met verschillende maten. Dit is de
   enige: zelfde maat als de lopende tekst, alleen zachter van kleur. */
.portrait-caption,
.timeline-figure figcaption {
  margin: 20px 0 0;
  max-width: none;
  color: var(--soft);
  font-family: Montserrat, Arial, sans-serif;
  font-size: 15px;
  font-style: italic;
  line-height: 1.9;
  text-align: left;
}

/* ---- Gouden kader terug, behalve op de homepage ----
   .editorial-image staat op alle pagina's behalve index; .portrait-figure
   alleen op Over mij. De tijdlijnfoto's op de homepage blijven zonder kader. */
.editorial-image::after {
  position: absolute;
  inset: 0;
  z-index: 2;
  content: "";
  border: 1.5px solid var(--gold);
  border-bottom: none;
  border-radius: 999px 999px 0 0;
  background: none;
  transform: translate(-18px, -18px);
  pointer-events: none;
}

.portrait-figure::after {
  position: absolute;
  inset: 0;
  z-index: 3;
  content: "";
  border: 1.5px solid var(--gold);
  border-bottom: none;
  border-radius: 999px 999px 0 0;
  transform: translate(18px, -18px);
  pointer-events: none;
}

/* Ook op de tijdlijnfoto's. Die staan in een <figure> met een bijschrift
   eronder, dus het kader mag niet de hele figure beslaan: met aspect-ratio
   3/4 en alleen bovenaan verankerd volgt het precies de foto. De verschuiving
   gaat naar binnen toe, anders loopt de boog het raster uit. */
.timeline-figure::after {
  position: absolute;
  inset: 0 0 auto 0;
  z-index: 3;
  content: "";
  aspect-ratio: 3 / 4;
  border: 1.5px solid var(--gold);
  border-bottom: none;
  border-radius: 999px 999px 0 0;
  transform: translate(18px, -18px);
  pointer-events: none;
}

/* in omgekeerde rijen staat de foto links, dus wijst de boog naar links */
.timeline-row.reverse .timeline-figure::after { transform: translate(-18px, -18px); }

@media (max-width: 980px) {
  .editorial-image::after { transform: translate(-12px, -12px); }
  .portrait-figure::after { transform: translate(12px, -12px); }
  .timeline-figure::after { transform: translate(12px, -12px); }
  .timeline-row.reverse .timeline-figure::after { transform: translate(-12px, -12px); }
}

/* De "Leer mij kennen"-sectie op de homepage staat zonder verticale ruimte,
   zodat het beeld tegen de buursecties aan loopt. Alleen daar: contact.html
   gebruikt dezelfde .split en houdt zijn ruimte. */
/* beeldsectie zonder ruimte boven en onder: homepage, werkwijze, reviews */
.split.split-flush { padding: 0; }

/* ---- Sectie-intro: één opzet voor kicker + kop + inleiding ----
   Het aanbodblok spande de volle breedte met een gouden streep eronder,
   terwijl de tijdlijn een smalle gecentreerde kolom zonder streep had.
   Dit is de gedeelde vorm. */
.section-intro {
  max-width: 680px;
  margin: 0 auto 74px;
  text-align: center;
}

.section-intro .eyebrow {
  margin: 0 0 18px;
  color: var(--gold);
  font-family: Montserrat, Arial, sans-serif;
  font-size: 12px;
  font-style: normal;
  font-weight: 500;
  letter-spacing: 0.22em;
  line-height: 1.6;
  text-transform: uppercase;
}

.section-intro h2 {
  margin: 0 0 22px;
  color: #202222;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(1.7rem, 2.5vw, 2.3rem);
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1.25;
}

.section-intro p:not(.eyebrow) {
  margin: 0;
  color: var(--soft);
  font-size: 16px;
  line-height: 1.9;
}

.section-intro h2:last-child { margin-bottom: 0; }

@media (max-width: 620px) {
  .section-intro { margin-bottom: 48px; }
  .section-intro p:not(.eyebrow) { font-size: 15px; }
}

/* afsluitende band met één knop en één rustige tekstlink ernaast */
.cta-acties {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 14px 26px;
  margin-top: 34px;
}


/* afsluiting van het verhaal: standaardknop met een korte toelichting ernaast */
.story-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 22px;
}

.story-cta-second {
  color: var(--gold);
  font-family: Montserrat, Arial, sans-serif;
  font-size: 13px;
  letter-spacing: 0.06em;
}

/* afsluitende band met kicker en een korte toelichting onder de kop */
.cta-band .eyebrow { text-align: center; }

.cta-band p:not(.eyebrow) {
  max-width: 560px;
  margin: 22px auto 0;
  color: var(--soft);
  font-size: 16px;
  line-height: 1.9;
}

/* Tarieven: één regel per duur, bedrag rechts uitgelijnd */
.tarief-lijst { margin: 0; display: grid; }
.tarief-regel {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 28px;
  padding: 26px 0;
  border-bottom: 1px solid rgb(207 197 178 / 0.55);
}
.tarief-regel:first-child { border-top: 1px solid rgb(207 197 178 / 0.55); }
.tarief-regel dt {
  margin: 0;
  color: #202222;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 22px;
  line-height: 1.3;
}
.tarief-regel dt span {
  display: block;
  margin-top: 7px;
  color: var(--soft);
  font-family: Montserrat, Arial, sans-serif;
  font-size: 14px;
  line-height: 1.7;
}
.tarief-regel dd {
  margin: 0;
  color: var(--gold);
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 26px;
  white-space: nowrap;
}
.tarief-noot {
  max-width: 640px;
  margin: 34px auto 0;
  color: var(--soft);
  font-family: Montserrat, Arial, sans-serif;
  font-size: 14px;
  line-height: 1.9;
  text-align: center;
}

/* de nuancering onder de drie kaarten: kleiner en cursief, zodat hij
   niet als tweede inleiding leest */
.values-note {
  max-width: 640px;
  margin: 54px auto 0;
  color: var(--soft);
  font-family: Montserrat, Arial, sans-serif;
  font-size: 14px;
  font-style: italic;
  line-height: 1.9;
  text-align: center;
}

@media (max-width: 620px) {
  .tarief-regel { flex-direction: column; gap: 8px; }
  .tarief-regel dd { font-size: 23px; }
}

/* De tijdlijn draagt hier bestaande tekst in plaats van genummerde stappen:
   de sectiekop staat in het eerste blok en het grote cijfer vervalt. */
.timeline-step:not([data-nummer])::before { content: none; }

.timeline-step h2 {
  margin: 0 0 20px;
  color: #202222;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(1.7rem, 2.5vw, 2.3rem);
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1.25;
}

.timeline-step p + p { margin-top: 20px; }

/* Tekst-tijdlijn: deze rijen dragen doorlopende tekst in plaats van losse
   stappen. Dus de gewone alinea-afstand van 18px, en geen vervaging per
   blok, want dat maakt aangrenzende alinea's verschillend zichtbaar en
   dat leest niet. De foto blijft wel meelopen. */
/* 18px tussen de alinea's zodat het als lopende tekst leest, maar wel
   ruimte boven en onder: daardoor is de kolom hoger dan de foto, blijft
   de foto staan en schuift de tekst ernaast omhoog. */
.timeline-tekst .timeline-steps { gap: 18px; padding: 150px 0 170px; }
.timeline-tekst .timeline-step { opacity: 1; transition: none; }
.timeline-tekst .timeline-step h2 { margin-bottom: 18px; }

/* Impressie op de contactpagina: tekst links, foto's van de praktijk in een
   carrousel rechts. De carrousel is een gewone scrollcontainer met
   scroll-snap, dus vegen werkt zonder javascript; de knoppen en stippen
   sturen dezelfde scrollpositie aan. */
.impressie {
  position: relative;
  background: var(--shell);
  padding: 100px 0;
}

.impressie-grid {
  display: grid;
  grid-template-columns: 0.85fr 1fr;
  gap: 90px;
  align-items: center;
}

.impressie-tekst h2 {
  margin: 0 0 22px;
  color: #202222;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(1.7rem, 2.5vw, 2.3rem);
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1.25;
}

.impressie-tekst p:not(.eyebrow) {
  margin: 0 0 18px;
  color: var(--soft);
  font-family: Montserrat, Arial, sans-serif;
  font-size: 15px;
  line-height: 1.9;
}

.impressie-tekst .outline-pill { margin-top: 14px; }

.carrousel { position: relative; min-width: 0; }

/* anderhalve foto in beeld: de volgende steekt er half uit, zodat te zien
   is dat er meer is. De breedte is de kolom min één tussenruimte, gedeeld
   door 1,5. */
.carrousel-spoor {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - 18px) / 1.5);
  gap: 18px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.carrousel-spoor::-webkit-scrollbar { display: none; }
.carrousel-spoor:focus-visible { outline: 2px solid var(--gold); outline-offset: 6px; }

.carrousel-dia {
  margin: 0;
  min-width: 0;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

.carrousel-dia img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  box-shadow: 0 28px 85px rgb(55 55 45 / 0.11);
  filter: saturate(0.72) sepia(0.08) brightness(1.05);
}

.carrousel-bediening {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-top: 26px;
}

.carrousel-knop {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  padding: 0;
  border: 1px solid rgb(207 197 178 / 0.9);
  border-radius: 50%;
  background: transparent;
  color: var(--soft);
  cursor: pointer;
  transition: border-color 0.3s ease, color 0.3s ease, background 0.3s ease;
}

.carrousel-knop svg { width: 18px; height: 18px; }
.carrousel-knop:hover { border-color: var(--gold); color: var(--gold); }
.carrousel-knop:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.carrousel-knop[disabled] { opacity: 0.35; cursor: default; }
.carrousel-knop[disabled]:hover { border-color: rgb(207 197 178 / 0.9); color: var(--soft); }

.carrousel-stippen {
  display: flex;
  flex: 1;
  justify-content: center;
  gap: 12px;
}

.carrousel-stip {
  width: 8px;
  height: 8px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgb(207 197 178 / 0.95);
  cursor: pointer;
  transition: background 0.3s ease, transform 0.3s ease;
}

.carrousel-stip[aria-selected="true"] { background: var(--gold); transform: scale(1.35); }
.carrousel-stip:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; }

@media (max-width: 980px) {
  .impressie { padding: 72px 0; }
  .impressie-grid { grid-template-columns: 1fr; gap: 44px; }
}

@media (prefers-reduced-motion: reduce) {
  .carrousel-stip { transition: none; }
}

/* Zachtere hoeken op de onderdelen waar je iets moet doen of kiezen:
   formulier, FAQ, kaarten. Harde hoeken lezen daar administratief.
   De foto's blijven vierkant; daar doet de boog het werk. Regels met
   alleen een lijn boven en onder (tarieven) en secties die van rand tot
   rand lopen (citaat) blijven ongemoeid, want een radius doet daar niets. */
.contact-form,
.contact-form textarea,
.contact-methods a,
.location-box,
.faq-item,
.session-card,
.review-card,
.value-card,
.offer-card,
.steps .section-inner { border-radius: 6px; }

.faq-item summary:focus-visible { border-radius: 6px; }

/* het beeld bovenin de aanbodkaart raakt de rand, dus dat moet mee afronden */
.offer-card { overflow: hidden; }

/* Zichtbare markering dat de drie ervaringen nog proefteksten zijn.
   Verwijderen zodra er echte reviews met toestemming staan. */
.review-let-op {
  max-width: 760px;
  margin: 0 auto 46px;
  padding: 18px 24px;
  border: 1px solid rgb(162 148 100 / 0.5);
  border-radius: 6px;
  background: rgb(238 234 221 / 0.6);
  color: var(--soft);
  font-family: Montserrat, Arial, sans-serif;
  font-size: 14px;
  line-height: 1.8;
  text-align: center;
}

.legal-versie {
  margin: 0 0 40px;
  color: var(--soft);
  font-family: Montserrat, Arial, sans-serif;
  font-size: 13px;
  letter-spacing: 0.04em;
}

.form-let-op {
  margin: 14px 0 0;
  color: var(--soft);
  font-family: Montserrat, Arial, sans-serif;
  font-size: 13px;
  line-height: 1.8;
}

.footer-knop {
  display: inline-block;
  padding: 10px 22px;
  border: 1px solid rgb(207 197 178 / 0.9);
  border-radius: 999px;
  color: var(--soft);
  font-family: Montserrat, Arial, sans-serif;
  font-size: 13px;
  letter-spacing: 0.12em;
  text-decoration: none;
  text-transform: uppercase;
  transition: border-color 0.3s ease, color 0.3s ease;
}

.footer-knop + .footer-knop { margin-left: 10px; }
.footer-knop:hover { border-color: var(--gold); color: var(--gold); }

/* Iconen bij de contactgegevens. Het WhatsApp-merkteken krijgt zijn eigen
   groen, telefoon en e-mail blijven in het goud van de site. */
.method-icoon {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 1px solid rgb(207 197 178 / 0.75);
  border-radius: 50%;
  color: var(--gold);
}

.method-icoon .icoon { width: 19px; height: 19px; }
.method-wa { color: #25d366; border-color: rgb(37 211 102 / 0.45); }
.method-tekst { display: block; }

.footer-icoon {
  display: inline-grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 1px solid rgb(207 197 178 / 0.9);
  border-radius: 50%;
  color: var(--soft);
  text-decoration: none;
  transition: border-color 0.3s ease, color 0.3s ease;
}

.footer-icoon .icoon { width: 19px; height: 19px; }
.footer-icoon:hover { border-color: var(--gold); color: var(--gold); }
.footer-wa:hover { border-color: rgb(37 211 102 / 0.7); color: #25d366; }
.footer-icoon:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }