/* Basis */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 6rem; }
body {
  margin: 0;
  background: var(--color-cream);
  color: var(--color-ink);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}
img, picture, svg { display: block; max-width: 100%; }
h1, h2, h3, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
:focus-visible { outline: 2px solid var(--color-olive); outline-offset: 3px; }
.cta-band :focus-visible, .site-footer :focus-visible { outline-color: var(--color-cream); }
main:focus { outline: none; }

.skip-link { position: absolute; left: var(--space-2); top: -4rem; z-index: 100; background: var(--color-olive); color: var(--color-cream); padding: var(--space-1) var(--space-2); border-radius: var(--radius-pill); }
.skip-link:focus { top: var(--space-2); }

.container { width: min(100% - 2 * var(--gutter), var(--container)); margin-inline: auto; }
.container--narrow { width: min(100% - 2 * var(--gutter), var(--container-narrow)); }
.text-center { text-align: center; }

/* Typografie */
h1, h2, h3 { font-family: var(--font-serif); font-weight: 400; color: var(--color-olive); }
em { font-style: italic; }
.hero__title { font-size: var(--fs-h1); line-height: var(--lh-h1); }
.section-title { font-size: var(--fs-h2); line-height: var(--lh-h2); }
.card__title, .steps__title, .facts__title { font-size: var(--fs-h3); line-height: var(--lh-h3); }
.lead { font-size: 1.125rem; max-width: 34rem; }
.eyebrow { font-size: var(--fs-label); font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--color-olive); line-height: 1.4; }
.eyebrow::before { content: "// "; }
.eyebrow--light { color: var(--color-cream); }
.eyebrow--light::before { content: none; }
.small { font-size: var(--fs-small); color: var(--color-muted); }
.notice { margin-top: var(--space-6); font-size: var(--fs-small); color: var(--color-muted); max-width: 40rem; }
.prose > * + * { margin-top: var(--space-2); }
.prose h2 { margin-top: var(--space-6); }

/* Knoppen */
.btn {
  display: inline-flex; align-items: center; gap: var(--space-2);
  min-height: 3rem; padding: 0 var(--space-3);
  background: var(--color-olive); color: var(--color-cream);
  border: 1.5px solid var(--color-olive); border-radius: var(--radius-pill);
  font: 500 1rem/1.25 var(--font-sans); text-decoration: none; cursor: pointer;
  transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}
.btn:hover { background: var(--color-hover); border-color: var(--color-hover); }
.btn:focus-visible { outline-offset: 3px; }
.btn__arrow { display: inline-block; width: 1.5rem; height: 0.75rem; background: currentColor; flex: none;
  -webkit-mask: var(--arrow) center / contain no-repeat; mask: var(--arrow) center / contain no-repeat;
  --arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 12'%3E%3Cpath d='M0 6h22M17 1l5 5-5 5' fill='none' stroke='black' stroke-width='1.3'/%3E%3C/svg%3E"); }
.btn--secondary { background: transparent; color: var(--color-olive); }
.btn--secondary:hover { background: var(--color-olive); color: var(--color-cream); }
.btn--light { background: var(--color-cream); color: var(--color-olive); border-color: var(--color-cream); }
.btn--light:hover { background: var(--color-sand); border-color: var(--color-sand); }
.btn--outline-light { background: transparent; color: var(--color-cream); border-color: var(--color-cream); }
.btn--outline-light:hover { background: var(--color-cream); color: var(--color-olive); }
.btn--small { min-height: 2.5rem; padding: 0 var(--space-2); font-size: var(--fs-small); }
.btn[disabled] { background: var(--color-sand); border-color: var(--color-sand); color: var(--color-muted); cursor: not-allowed; }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-4); }
.btn-row--center { justify-content: center; }

/* Header */
.site-header { border-bottom: var(--line); background: var(--color-cream); position: relative; z-index: 10; }
.site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding-block: var(--space-2); }
.logo { text-decoration: none; display: inline-flex; flex-direction: column; align-items: center; line-height: 1; color: var(--color-olive); }
.logo__word { font-family: var(--font-serif); font-weight: 300; font-size: 2rem; letter-spacing: 0.02em; line-height: 1; margin: 0; }
.logo__tag { font-size: 0.6rem; letter-spacing: 0.14em; margin-top: 0.25rem; }
.logo__word--light { color: var(--color-cream); }
.site-nav { display: flex; align-items: center; margin-left: auto; }
.site-nav ul { display: flex; gap: 1.75rem; }
.site-nav > ul { align-items: center; }
.site-nav > ul > li { display: flex; align-items: center; }
.site-nav a { text-decoration: none; font-size: var(--fs-small); font-weight: 600; letter-spacing: 0.04em; padding-block: 0.125rem; border-bottom: 1.5px solid transparent; }
.site-nav a:hover, .site-nav a[aria-current="page"] { border-bottom-color: var(--color-olive); }
.site-header__actions { display: flex; align-items: center; gap: var(--space-1); }
.site-header { position: sticky; top: 0; box-shadow: 0 6px 20px rgba(51, 43, 38, 0.14); }
.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.nav-toggle { display: none; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; padding: 0; background: none; border: 0; color: var(--color-olive); border-radius: 0; cursor: pointer; }
.nav-toggle__bars { position: relative; display: block; width: 1.125rem; height: 0.875rem; }
.nav-toggle__bars span { position: absolute; left: 0; width: 100%; height: 1.5px; background: currentColor; border-radius: 1px; transition: transform 0.25s ease, opacity 0.2s ease; }
.nav-toggle__bars span:nth-child(1) { top: 0; }
.nav-toggle__bars span:nth-child(2) { top: 50%; margin-top: -0.75px; }
.nav-toggle__bars span:nth-child(3) { bottom: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(1) { transform: translateY(6.25px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(3) { transform: translateY(-6.25px) rotate(-45deg); }

@media (max-width: 59.99em) {
  .site-header__inner { flex-wrap: wrap; }
  .site-header__actions { margin-left: auto; }
  .site-header__actions .btn { position: fixed; right: max(var(--gutter), env(safe-area-inset-right)); bottom: max(var(--space-3), env(safe-area-inset-bottom)); z-index: 30; box-shadow: 0 5px 20px rgba(51, 43, 38, 0.22); }
  .site-nav { order: 3; width: 100%; margin-left: 0; }
  .site-nav > ul { align-items: stretch; }
  .site-nav ul { flex-direction: column; gap: var(--space-1); }
  .site-nav a { font-size: 1rem; }
  .site-header.js-ready .nav-toggle { display: inline-flex; }
  .site-header.js-ready .site-nav { display: none; position: absolute; left: 0; right: 0; top: 100%; width: auto; padding: var(--space-3) var(--gutter) var(--space-4); background: var(--color-cream); border-bottom: var(--line); }
  .site-header.js-ready .site-nav.is-open { display: flex; }
}
@media (max-width: 29.99em) {
  .site-header__actions .btn__arrow { display: inline-block; }
  .site-header__actions .btn { padding-inline: var(--space-2); }
}

/* Dropdown behandelingen */
.has-sub { position: relative; display: flex; align-items: center; gap: 0.125rem; }
.subnav-toggle { display: inline-flex; align-items: center; justify-content: center; width: 1.75rem; height: 1.75rem; padding: 0; background: none; border: 0; border-radius: var(--radius-pill); color: var(--color-olive); cursor: pointer; }
.subnav-toggle svg { transition: transform 0.2s ease; }
.has-sub.is-open .subnav-toggle svg { transform: rotate(180deg); }
.site-nav .subnav { display: none; position: absolute; left: -1rem; top: 100%; z-index: 20; min-width: 16rem; flex-direction: column; gap: 0; padding: var(--space-1); background: var(--color-cream); border: var(--line); border-radius: var(--radius-card); box-shadow: 0 12px 32px rgba(51, 43, 38, 0.1); }
.site-nav .subnav a { display: block; padding: 0.5rem var(--space-2); border-bottom: 0; border-radius: 2px; font-weight: 500; }
.site-nav .subnav a:hover, .site-nav .subnav a[aria-current="page"] { background: var(--color-sand); }
.has-sub:hover > .subnav, .has-sub.is-open > .subnav, .site-header:not(.js-ready) .has-sub:focus-within > .subnav { display: flex; }
@media (min-width: 60em) { .has-sub + li { margin-left: -0.5rem; } }
@media (prefers-reduced-motion: no-preference) { .has-sub > .subnav { animation: page-in 0.2s ease-out both; } }
@media (max-width: 59.99em) {
  .has-sub { flex-wrap: wrap; }
  .subnav-toggle { display: none; }
  .site-nav .subnav { display: flex; position: static; width: 100%; min-width: 0; padding: 0 0 0 var(--space-2); background: none; border: 0; box-shadow: none; animation: none; }
  .site-nav .subnav a { padding: 0.25rem 0; font-size: var(--fs-small); }
  .site-nav .subnav a:hover, .site-nav .subnav a[aria-current="page"] { background: none; text-decoration: underline; }
}

/* Categorie-grid */
.tile-grid { display: grid; gap: var(--space-3); grid-template-columns: 1fr 1fr; }
@media (min-width: 60em) { .tile-grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 29.99em) { .tile-grid { grid-template-columns: 1fr; } }
.tile { display: block; text-decoration: none; color: var(--color-ink); }
.tile__media { display: block; aspect-ratio: 4 / 5; overflow: hidden; border-radius: var(--radius-card); background: var(--color-peach); }
.tile__media picture, .tile__media .ph { display: block; width: 100%; height: 100%; }
.tile__media img { transition: transform 0.6s ease; }
.tile:hover .tile__media img { transform: scale(1.03); }
.tile__body { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 0 var(--space-2); padding-top: var(--space-2); border-bottom: 1px solid var(--color-olive); padding-bottom: var(--space-2); }
.tile__body .eyebrow { grid-column: 1 / -1; }
.tile__title { font-family: var(--font-serif); font-size: var(--fs-h3); line-height: var(--lh-h3); color: var(--color-olive); }
.tile__body .btn__arrow { color: var(--color-olive); margin-bottom: 0.5rem; }
.tile:hover .tile__title { text-decoration: underline; text-underline-offset: 0.2em; }
.tile:focus-visible { outline: 2px solid var(--color-olive); outline-offset: 4px; }
@media (prefers-reduced-motion: reduce) { .tile:hover .tile__media img { transform: none; } }

/* Secties */
.section { padding-block: var(--space-8); }
.section--tight { padding-block: var(--space-4) var(--space-8); }
.section--sand { background: var(--color-sand); }
.section-head { max-width: 40rem; margin-bottom: var(--space-6); }
.section-head > * + * { margin-top: var(--space-2); }
.section-text { max-width: 36rem; }
.section-title + .section-text { margin-top: var(--space-2); }
.offer-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-2); }
.offer-item { display: flex; height: 100%; flex-direction: column; align-items: flex-start; padding: var(--space-3); border-top: 1px solid var(--color-olive); border-bottom: 1px solid var(--color-sand); color: var(--color-ink); text-decoration: none; transition: background-color 0.2s ease; }
.offer-item:hover { background: rgba(229, 216, 197, 0.32); }
.offer-item:focus-visible { outline: 2px solid var(--color-olive); outline-offset: 3px; }
.offer-item__icon { display: grid; width: 3.5rem; aspect-ratio: 1; place-items: center; margin-bottom: var(--space-2); border-radius: 50%; background: var(--color-sand); color: var(--color-olive); }
.offer-item__icon svg { display: block; width: 2.5rem; height: 2.5rem; }
.offer-item__title { font-size: var(--fs-h3); line-height: var(--lh-h3); color: var(--color-olive); }
.offer-item > p { margin-top: var(--space-1); }
.offer-item__more { display: inline-flex; align-items: center; gap: var(--space-1); margin-top: auto; padding-top: var(--space-3); color: var(--color-olive); font-size: var(--fs-small); font-weight: 600; }
.offer-item__more .btn__arrow { width: 1.25rem; height: 0.625rem; }
@media (min-width: 40em) { .offer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); } }
@media (min-width: 60em) { .offer-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } .offer-item { padding-inline: var(--space-2); } }
.review-grid { display: grid; grid-template-columns: 1fr; gap: 0; list-style: none; padding: 0; }
.review-item { display: flex; min-width: 0; flex-direction: column; align-items: center; padding: var(--space-3) var(--space-2); border-top: 1px solid rgba(69, 69, 33, 0.3); text-align: center; }
.review-item:first-child { border-top: 0; }
.review-item__quote { max-width: 28rem; margin: 0; color: var(--color-ink); font: 400 1.25rem/1.5 var(--font-serif); }
.review-item__quote::before { display: block; margin-bottom: var(--space-2); color: var(--color-olive); content: "\201C"; font: 400 3.5rem/0.75 var(--font-serif); }
.review-item__name { align-self: center; margin-top: auto; padding-top: var(--space-3); color: var(--color-olive); font-size: 1.125rem; font-weight: 600; text-align: center; }
@media (min-width: 40em) {
  .review-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .review-item, .review-item:first-child { border-top: 0; }
  .review-item + .review-item { border-left: 1px solid rgba(69, 69, 33, 0.3); }
}

/* Hero */
.hero { padding-block: var(--space-6) var(--space-8); }
.hero--compact { padding-block: var(--space-6) var(--space-6); }
.hero--text { text-align: left; }
.hero__grid { display: grid; gap: var(--space-6); align-items: center; }
.hero__text > * + * { margin-top: var(--space-3); }
.hero__text .btn-row { margin-top: var(--space-4); }
.hero--text .container > * + * { margin-top: var(--space-3); }
.hero__media { position: relative; aspect-ratio: 4 / 5; border-radius: var(--radius-card); overflow: hidden; background: var(--color-peach); }
.hero__media--portrait { aspect-ratio: 4 / 5; }
.hero__caption { position: absolute; left: 50%; bottom: var(--space-3); transform: translateX(-50%); background: var(--color-cream); color: var(--color-ink); padding: 0.25rem var(--space-3); border-radius: var(--radius-pill); font: italic 400 1.25rem/1.3 var(--font-serif); white-space: nowrap; }
.breadcrumb { font-size: var(--fs-small); color: var(--color-muted); }
.breadcrumb a { text-decoration: none; }
.breadcrumb a:hover { text-decoration: underline; }

.hero--home { position: relative; display: grid; min-height: 100vh; min-height: 100svh; padding: 0; overflow: hidden; background: var(--color-ink); }
.hero--home::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgba(28, 25, 22, 0.78) 0%, rgba(28, 25, 22, 0.55) 48%, rgba(28, 25, 22, 0.18) 100%), linear-gradient(0deg, rgba(28, 25, 22, 0.28), transparent 48%); }
.hero--home .hero__grid { position: relative; z-index: 2; display: flex; width: min(100% - 2 * var(--gutter), var(--container)); min-height: inherit; margin-inline: auto; padding-block: var(--space-8); }
.hero--home .hero__text { max-width: 44rem; align-self: center; color: var(--color-cream); }
.hero--home .hero__text .eyebrow, .hero--home .hero__title { color: var(--color-cream); }
.hero--home .hero__text .lead { max-width: 36rem; }
.hero--home .hero__media { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; min-height: 0; aspect-ratio: auto; border-radius: 0; }
.hero--home .hero__media .media-fill { object-position: center 42%; }
.hero--home .hero__media .hero__caption { left: auto; right: var(--gutter); bottom: var(--space-3); transform: none; }

@media (min-width: 60em) {
  .hero__grid { grid-template-columns: 1.1fr 0.9fr; gap: var(--space-8); }
  .hero__media { aspect-ratio: 1 / 1.1; }
  .hero__media--portrait { aspect-ratio: 4 / 5; }
}

@media (max-width: 39.99em) {
  .hero--home .hero__grid { padding-block: var(--space-7); }
  .hero--home .hero__text { max-width: 34rem; }
  .hero--home::after { background: linear-gradient(90deg, rgba(28, 25, 22, 0.72), rgba(28, 25, 22, 0.36)), linear-gradient(0deg, rgba(28, 25, 22, 0.4), transparent 58%); }
  .hero--home .hero__media .media-fill { object-position: 58% center; }
  .hero--home .hero__media .hero__caption { right: var(--gutter); bottom: var(--space-2); font-size: 1rem; }
  .hero--home .btn-row { flex-direction: column; align-items: flex-start; }
}

/* Afbeeldingen en placeholders */
.media-fill, .hero__media picture, .split__media picture { width: 100%; height: 100%; }
.media-fill { object-fit: cover; }
.ph { width: 100%; height: 100%; min-height: 12rem; display: grid; place-items: center; background: var(--color-peach); color: var(--color-cream); }
.ph .motif { width: 45%; max-width: 12rem; height: auto; }

/* Kaarten */
.card-grid { display: grid; gap: var(--space-3); }
@media (min-width: 48em) { .card-grid { grid-template-columns: 1fr 1fr; } }
.card { position: relative; display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-4); border-radius: var(--radius-card); }
.card--sand { background: var(--color-sand); }
.card--peach { background: var(--color-peach); }
.card--peach, .card--peach .eyebrow, .card--peach .card__title { color: var(--color-ink); }
.card__link { text-decoration: none; }
.card__media { aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--radius-card); background: var(--color-peach); }
.card__media picture { width: 100%; height: 100%; }
.card__link::after { content: ""; position: absolute; inset: 0; }
.card__link:hover { text-decoration: underline; }
.card__cta { margin-top: auto; padding-top: var(--space-2); display: inline-flex; align-items: center; gap: var(--space-1); font-size: var(--fs-small); font-weight: 600; color: var(--color-olive); }
.card--peach .card__cta { color: var(--color-ink); }
.card:focus-within { outline: 2px solid var(--color-olive); outline-offset: 3px; }
.card__link:focus-visible { outline: none; }

/* Stappen */
.steps { display: grid; gap: var(--space-4); counter-reset: none; }
.steps__item { border-top: 1px solid var(--color-olive); padding-top: var(--space-2); }
.steps__item > * + * { margin-top: var(--space-1); }
.steps__num { font-size: var(--fs-label); font-weight: 600; letter-spacing: 0.16em; color: var(--color-olive); }
@media (min-width: 48em) { .steps { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 60em) { .steps { grid-template-columns: repeat(4, 1fr); } .steps--three { grid-template-columns: repeat(3, 1fr); } }
.steps-carousel { min-width: 0; }
.steps--carousel { display: flex; gap: var(--space-3); overflow-x: auto; overflow-y: hidden; padding-bottom: var(--space-1); scroll-behavior: smooth; overscroll-behavior-inline: contain; scrollbar-width: none; cursor: grab; }
.steps--carousel.is-dragging { cursor: grabbing; scroll-behavior: auto; user-select: none; }
.steps--carousel::-webkit-scrollbar { display: none; }
.steps--carousel .steps__item { display: grid; flex: 0 0 60%; grid-template-columns: minmax(0, 1fr); align-content: start; min-height: 15rem; min-width: 0; padding: var(--space-3); border: 1px solid var(--color-sand); border-top: 2px solid var(--color-olive); background: var(--color-cream); }
.steps--carousel .steps__num { font-family: var(--font-serif); font-size: 3rem; font-weight: 300; letter-spacing: 0; line-height: 1; }
@media (min-width: 60em) { .steps--carousel .steps__item { flex-basis: calc(40% - 1.2rem); } }
.steps-carousel__controls { display: flex; align-items: center; justify-content: flex-end; gap: var(--space-2); margin-top: var(--space-2); }
.steps-carousel__status { color: var(--color-muted); font-size: var(--fs-small); }
.steps-carousel__buttons { display: flex; gap: var(--space-1); }
.steps-carousel__button { display: inline-flex; width: 2.75rem; height: 2.75rem; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: 50%; background: var(--color-olive); color: var(--color-cream); cursor: pointer; }
.steps-carousel__button:hover:not(:disabled) { background: var(--color-hover); }
.steps-carousel__button:focus-visible { outline: 2px solid var(--color-olive); outline-offset: 3px; }
.steps-carousel__button:disabled { background: var(--color-sand); color: var(--color-muted); cursor: default; }
.steps-carousel__button[data-step-prev] .btn__arrow { transform: scaleX(-1); }

/* Gesplitste sectie */
.split { display: grid; gap: var(--space-6); align-items: center; }
.split__media { aspect-ratio: 4 / 5; border-radius: var(--radius-card); overflow: hidden; background: var(--color-peach); }
.split__text > * + * { margin-top: var(--space-2); }
.split__text .btn { margin-top: var(--space-3); }
@media (min-width: 60em) { .split { grid-template-columns: 0.8fr 1.2fr; gap: var(--space-8); } }

/* Behandelpagina */
.facts { display: grid; gap: var(--space-4); border-top: var(--line); border-bottom: var(--line); padding-block: var(--space-4); }
.facts__title { margin-bottom: var(--space-1); }
@media (min-width: 48em) { .facts { grid-template-columns: 1fr 1fr; } }
.faq details { border-bottom: var(--line); padding-block: var(--space-2); }
.faq summary { cursor: pointer; font-weight: 600; list-style-position: outside; }
.faq details p { margin-top: var(--space-1); }

/* CTA-band */
.cta-band { background: var(--color-ink); color: var(--color-cream); padding-block: var(--space-8); text-align: center; }
.cta-band__inner > * + * { margin-top: var(--space-2); }
.cta-band .motif { width: 3.5rem; height: auto; margin-inline: auto; color: var(--color-cream); }
.cta-band__title { font-size: var(--fs-h2); line-height: var(--lh-h2); color: var(--color-cream); font-style: italic; }

/* Boeken */
.booking { display: grid; gap: var(--space-6); }
.booking__intro > * + * { margin-top: var(--space-2); }
.checklist { counter-reset: stap; display: grid; gap: var(--space-1); }
.checklist li { counter-increment: stap; display: flex; gap: var(--space-2); }
.checklist li::before { content: "0" counter(stap); font-size: var(--fs-label); font-weight: 600; letter-spacing: 0.16em; color: var(--color-olive); padding-top: 0.2rem; }
.booking__panel { display: none; }
.placeholder-note { padding: var(--space-3); border: 1.5px dashed var(--color-terra); border-radius: var(--radius-card); color: var(--color-ink); }
.booking__frame { width: 100%; min-height: 40rem; border: 1px solid var(--color-sand); border-radius: var(--radius-card); background: #fff; }
@media (min-width: 60em) {
  .booking { grid-template-columns: 0.8fr 1.2fr; }
  .booking__panel { display: block; }
}
@media (max-width: 59.99em) { .booking__panel:has(.placeholder-note) { display: block; } }

/* Contact en formulier */
.contact { display: grid; gap: var(--space-6); }
.contact__intro > * + * { margin-top: var(--space-2); }
.contact__details { margin-top: var(--space-3); display: grid; gap: var(--space-1); }
.contact__details .eyebrow { display: block; }
@media (min-width: 60em) { .contact { grid-template-columns: 0.8fr 1.2fr; } }
.form { display: grid; gap: var(--space-3); }
.field label { display: block; font-weight: 500; margin-bottom: 0.375rem; }
.field input[type="text"], .field input[type="email"], .field select, .field textarea {
  width: 100%; min-height: 3rem; padding: 0.75rem 1rem; background: var(--color-cream); color: var(--color-ink);
  border: 1px solid var(--color-olive); border-radius: var(--radius-field); font: inherit;
}
.field textarea { resize: vertical; }
.field [aria-invalid="true"] { border-color: var(--color-terra); border-width: 2px; }
.field__error { margin-top: 0.375rem; font-size: var(--fs-small); font-weight: 500; color: #8a3a1c; }
.field--check { display: grid; grid-template-columns: auto 1fr; gap: 0 var(--space-1); align-items: start; }
.field--check input { width: 1.25rem; height: 1.25rem; margin: 0.25rem 0 0; accent-color: var(--color-olive); }
.field--check label { font-weight: 400; margin: 0; }
.field--check .field__error { grid-column: 2; }
.field--hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form .btn { justify-self: start; }
.form__status { font-weight: 500; }
.form__status:empty { display: none; }
.form__status[data-state="success"] { padding: var(--space-2) var(--space-3); border-left: 3px solid var(--color-olive); background: var(--color-cream); color: var(--color-olive); }
.form__status[data-state="error"] { padding: var(--space-2) var(--space-3); border-left: 3px solid #8a3a1c; background: var(--color-cream); color: #8a3a1c; }

/* Footer */
.site-footer { background: var(--color-olive); color: var(--color-cream); padding-top: var(--space-8); }
.site-footer a { text-decoration: none; }
.site-footer__grid { display: grid; gap: var(--space-4); }
.site-footer__grid ul { margin-top: var(--space-1); display: grid; gap: 0.25rem; font-size: var(--fs-small); }
.site-footer__tag { font-size: var(--fs-small); letter-spacing: 0.14em; margin-top: 0.25rem; }
.site-footer__text { margin-top: var(--space-2); font-size: var(--fs-small); max-width: 22rem; }
.site-footer__bottom { display: flex; justify-content: space-between; gap: var(--space-2); flex-wrap: wrap; margin-top: var(--space-6); padding-block: var(--space-3); border-top: 1px solid rgba(255, 243, 227, 0.3); font-size: var(--fs-small); }
@media (min-width: 48em) { .site-footer__grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; } }

/* Beweging: subtiel en alleen als de bezoeker dat prettig vindt */
@keyframes page-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: no-preference) {
  main { animation: page-in 0.6s ease-out both; }
  .js .reveal { transition: opacity 0.7s ease-out, transform 0.7s ease-out; }
  .js .reveal:not(.is-visible) { opacity: 0; transform: translateY(16px); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
}