/* ═══════════════════════════════════════════════════════════════
   DE AMSHOFF: STYLE
   ═══════════════════════════════════════════════════════════════ */

/* ─── RESET & BASE ─────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bone: #F9F5F1;
  --bone-dark: #F2EBE5;
  --dark: #1A1A1A;
  --dark-accent: #242424;
  --text: #2C2C2C;
  --text-secondary: #595959;
  --brand-red: #7A2E2E;
  --brand-red-hover: #5E2222;
  --gold: #C6A87C;
  /* Goud haalt op bone/bone-dark geen AA; dit is de variant voor lichte vlakken. */
  --gold-on-light: #806339;
  /* Lichtere variant voor tekst over een foto, waar het beeld zelf licht kan zijn. */
  --gold-on-photo: #E3C99F;
  --green: #4A5D4F;
  --border: #E5E0DB;
  --font-serif: 'Cormorant Garamond', serif;
  --font-sans: 'Work Sans', sans-serif;
}

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-sans);
  font-weight: 300;
  background: var(--bone);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  line-height: 1.6;
  overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-serif);
  font-weight: 400;
  line-height: 1.1;
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; height: auto; display: block; }
button { cursor: pointer; border: none; background: none; font-family: inherit; }

::selection { background: var(--brand-red); color: #fff; }


/* ─── LAYOUT UTILITIES ─────────────────────────────────────── */
.container { max-width: 1280px; margin: 0 auto; padding: 0 24px; }
@media (min-width: 768px) { .container { padding: 0 48px; } }
@media (min-width: 1024px) { .container { padding: 0 96px; } }

.section { padding: 96px 24px; }
@media (min-width: 768px) { .section { padding: 128px 48px; } }
@media (min-width: 1024px) { .section { padding: 160px 96px; } }

.section--bone { background: var(--bone); }
.section--bone-dark { background: var(--bone-dark); }
.section--dark { background: var(--dark); color: #fff; }

.grid { display: grid; gap: 64px; }
.grid--2 { grid-template-columns: 1fr; }
@media (min-width: 1024px) { .grid--2 { grid-template-columns: 1fr 1fr; gap: 96px; } }

.grid--3 { grid-template-columns: 1fr; }
@media (min-width: 768px) { .grid--3 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .grid--3 { grid-template-columns: repeat(3, 1fr); gap: 48px; } }

.grid--4 { grid-template-columns: repeat(2, 1fr); gap: 32px; }
@media (min-width: 768px) { .grid--4 { grid-template-columns: repeat(4, 1fr); gap: 48px; } }

.text-center { text-align: center; }
.items-center { align-items: center; }
.mx-auto { margin-left: auto; margin-right: auto; }
.max-w-3xl { max-width: 768px; }
.max-w-4xl { max-width: 896px; }
.max-w-7xl { max-width: 1280px; }

/* ─── TYPOGRAPHY ───────────────────────────────────────────── */
.serif { font-family: var(--font-serif); }
.sans { font-family: var(--font-sans); }

.heading-xl {
  font-family: var(--font-serif);
  font-size: clamp(2.5rem, 6vw, 5.5rem);
  line-height: 0.95;
  color: var(--text);
}
.heading-lg {
  font-family: var(--font-serif);
  font-size: clamp(2rem, 4vw, 3.5rem);
  line-height: 1.05;
  color: var(--text);
}
.heading-md {
  font-family: var(--font-serif);
  font-size: clamp(1.5rem, 3vw, 2.5rem);
}
.heading-sm {
  font-family: var(--font-serif);
  font-size: 1.25rem;
}

.heading-xl.white, .heading-lg.white, .heading-md.white { color: #fff; }
.heading-xl i, .heading-lg i { font-weight: 300; }

/* Het opschrift boven een kop. Stond eerder in Pinyon Script; dat schreef mooi
   maar las slecht, zeker over een foto. Nu dezelfde gespatieerde kapitalen als
   de navigatie en de sectielabels, zodat de site één opschriftstijl heeft. */
.overline {
  font-family: var(--font-sans);
  font-size: 0.75rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 500;
  line-height: 1.5;
  color: var(--brand-red);
}
/* .overline.gold staat uitsluitend op donkere vlakken; daar haalt goud AA. */
.overline.gold { color: var(--gold); }

.body-text {
  font-family: var(--font-sans);
  font-size: 0.875rem;
  color: var(--text-secondary);
  line-height: 1.8;
}
.body-text.white { color: rgba(255,255,255,0.6); }

.label {
  font-family: var(--font-sans);
  font-size: 0.6875rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 500;
}
.label.red { color: var(--brand-red); }
.label.gold { color: var(--gold); }
.label.white { color: rgba(255,255,255,0.4); }

/* ─── BUTTONS ──────────────────────────────────────────────── */
.btn {
  display: inline-block;
  padding: 16px 40px;
  font-family: var(--font-sans);
  font-size: 0.6875rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 500;
  transition: all 0.3s ease;
}
.btn--primary { background: var(--brand-red); color: #fff; }
.btn--primary:hover { background: var(--brand-red-hover); }
.btn--outline { border: 1px solid rgba(255,255,255,0.4); color: #fff; background: transparent; }
.btn--outline:hover { background: rgba(255,255,255,0.1); }
.btn--outline-red { border: 1px solid var(--brand-red); color: var(--brand-red); background: transparent; }
.btn--outline-red:hover { background: var(--brand-red); color: #fff; }
.btn--dark { background: var(--dark); color: #fff; }
.btn--dark:hover { background: var(--brand-red); }

.btn-group { display: flex; flex-direction: column; gap: 16px; }
@media (min-width: 640px) { .btn-group { flex-direction: row; } }
.btn-group--center { justify-content: center; }

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.125rem;
  color: var(--brand-red);
  transition: gap 0.3s ease;
}
.link-arrow:hover { gap: 16px; }
.link-arrow svg { width: 18px; height: 18px; }
.link-arrow.white { color: #fff; }

.link-underline {
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--brand-red);
  text-decoration: underline;
  text-underline-offset: 8px;
}
.link-underline:hover { color: var(--brand-red-hover); }

/* ─── NAV ──────────────────────────────────────────────────── */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  transition: background 0.4s, backdrop-filter 0.4s, border-color 0.4s;
}
.nav--solid, .nav--scrolled {
  background: rgba(249, 245, 241, 0.85);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--border);
}

.nav__inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 80px;
}
@media (min-width: 768px) { .nav__inner { padding: 0 48px; height: 96px; } }
@media (min-width: 1024px) { .nav__inner { padding: 0 40px; } }

.nav__logo { flex-shrink: 0; margin-right: 32px; }
.nav__logo img { height: 36px; width: auto; transition: filter 0.4s; }
@media (min-width: 768px) { .nav__logo img { height: 44px; } }
/* Op de lichte navbalk het logo in de eigen merkrode kleur; boven de
   heroafbeelding wit, net als de links. */
.nav--solid .nav__logo img,
.nav--scrolled .nav__logo img { filter: none; }
.nav:not(.nav--solid):not(.nav--scrolled) .nav__logo img {
  filter: brightness(0) invert(1) drop-shadow(0 1px 6px rgba(0,0,0,0.35));
}

.nav__links {
  display: none;
  align-items: center;
  gap: 18px;
}
/* Alle menu-items passen pas vanaf 1280px naast elkaar; daaronder het mobiele menu. */
@media (min-width: 1280px) { .nav__links { display: flex; } }
@media (min-width: 1360px) { .nav__links { gap: 24px; } }

.nav__link {
  font-family: var(--font-sans);
  font-size: 0.6875rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 500;
  color: #fff;
  transition: color 0.3s;
}
.nav__link { white-space: nowrap; }
.nav__link:hover, .nav__link--active { color: var(--brand-red); }
.nav--solid .nav__link,
.nav--scrolled .nav__link { color: var(--text); }
.nav--solid .nav__link:hover,
.nav--scrolled .nav__link:hover,
.nav--solid .nav__link--active,
.nav--scrolled .nav__link--active { color: var(--brand-red); }

.nav__cta {
  display: inline-block;
  padding: 12px 24px;
  background: var(--brand-red);
  color: #fff;
  font-family: var(--font-sans);
  font-size: 0.6875rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 500;
  transition: background 0.3s;
}
.nav__cta:hover { background: var(--brand-red-hover); }

/* Mobile Toggle */
.nav__toggle {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px;
}
@media (min-width: 1280px) { .nav__toggle { display: none; } }

.nav__toggle span {
  display: block;
  width: 24px;
  height: 1.5px;
  background: #fff;
  transition: all 0.3s;
}
.nav--solid .nav__toggle span,
.nav--scrolled .nav__toggle span { background: var(--text); }

.nav__toggle.active span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
.nav__toggle.active span:nth-child(2) { opacity: 0; }
.nav__toggle.active span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); }

/* Mobile Menu */
.mobile-menu {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 99;
  background: var(--bone);
  padding: 88px 32px 28px;
  flex-direction: column;
  gap: 32px;
}
.mobile-menu.open { display: flex; }

.mobile-menu a {
  font-family: var(--font-serif);
  font-size: 1.5rem;
  color: var(--text);
}
.mobile-menu a.active { color: var(--brand-red); }

.mobile-menu__footer {
  margin-top: auto;
  padding-top: 24px;
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* ─── HERO ─────────────────────────────────────────────────── */
.hero {
  position: relative;
  width: 100%;
  max-width: 100%;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: var(--dark);
}
/* hero--bottom: zelfde volle schermhoogte als de homepage-hero, alleen staat de
   tekst linksonder in plaats van gecentreerd. */
.hero--bottom {
  align-items: flex-end;
  justify-content: flex-start;
}

/* De medialaag is 130% hoog en steekt 15% boven en onder de hero uit, zodat
   main.js hem kan verschuiven voor het parallax-effect zonder dat er een gat valt. */
.hero__media {
  position: absolute;
  top: -15%;
  left: 0;
  right: 0;
  height: 130%;
  overflow: hidden;
  z-index: 0;
  will-change: transform;
}
.hero__media picture { display: block; width: 100%; height: 100%; }
/* Op telefoons staat de parallax uit en is de medialaag precies zo hoog als de
   hero. Met die 30% speling erbij wordt een liggende foto op een smal scherm zo
   ver ingezoomd dat de browser een onwerkbaar groot bestand nodig heeft voor
   iets wat je maar voor een kwart ziet. */
@media (max-width: 767px) {
  .hero__media { top: 0; height: 100%; }
}
.hero__media img {
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center;
}

/* Scrim hoort bij de hero zelf, niet bij het beeld: zo beweegt hij niet mee. */
.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  /* De radiale laag verdonkert alleen het midden, waar de tekst staat. De
     homepagefoto is een druk zomerbeeld; met alleen een vlakke sluier viel de
     witte tekst weg tegen het licht bladerdek. */
  background:
    radial-gradient(72% 58% at 50% 42%, rgba(0,0,0,0.52) 0%, rgba(0,0,0,0.30) 62%, rgba(0,0,0,0.10) 100%),
    linear-gradient(to bottom, rgba(0,0,0,0.30) 0%, rgba(0,0,0,0.24) 45%, rgba(0,0,0,0.36) 100%);
}
.hero--bottom::after {
  background: linear-gradient(to top, rgba(0,0,0,0.468) 0%, rgba(0,0,0,0.374) 45%, rgba(0,0,0,0.165) 100%);
}

/* Condoleance: ingetogen, ontkleurd beeld. */
.hero--memoriam .hero__media img { filter: grayscale(1) brightness(1.18) contrast(0.9); }
.hero--memoriam::after {
  background: linear-gradient(to top, rgba(0,0,0,0.451) 0%, rgba(0,0,0,0.385) 40%, rgba(0,0,0,0.209) 65%, rgba(0,0,0,0.066) 100%);
}

.hero__content {
  position: relative;
  z-index: 2;
  text-align: center;
  padding: 0 24px;
  max-width: 900px;
}
.hero--bottom .hero__content {
  text-align: left;
  max-width: 1280px;
  width: 100%;
  /* Extra ruimte onderaan zodat de tekst de scroll-indicator niet raakt. */
  padding: 0 24px 104px;
}
@media (min-width: 768px) {
  .hero--bottom .hero__content { padding: 0 48px 120px; }
}
@media (min-width: 1024px) {
  .hero--bottom .hero__content { padding: 0 96px 120px; }
}

.hero__overline {
  font-family: var(--font-sans);
  font-size: 0.8125rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--gold-on-photo);
  margin-bottom: 20px;
}
/* De herfstfoto's zijn licht en mistig; een zachte schaduw houdt de tekst leesbaar
   zonder dat de foto verder verduisterd hoeft te worden. */
.hero__overline { text-shadow: 0 0 2px rgba(0,0,0,0.85), 0 1px 4px rgba(0,0,0,0.8), 0 1px 16px rgba(0,0,0,0.6); }
.hero__subtitle { text-shadow: 0 1px 12px rgba(0,0,0,0.55); }
.hero__title { text-shadow: 0 2px 28px rgba(0,0,0,0.4); }

.hero__title {
  font-family: var(--font-serif);
  font-size: clamp(2.5rem, 6vw, 5.5rem);
  color: #fff;
  line-height: 0.95;
  margin-bottom: 32px;
}
.hero__title i { font-weight: 300; }

.hero__subtitle {
  font-family: var(--font-sans);
  font-size: clamp(0.8125rem, 1.2vw, 1rem);
  color: rgba(255,255,255,0.92);
  max-width: 560px;
  line-height: 1.7;
  letter-spacing: 0.03em;
}
.hero .hero__subtitle { margin: 0 auto 48px; }
.hero--bottom .hero__subtitle { margin: 24px 0 0; }

.hero .btn-group { margin-top: 48px; }
.hero--bottom .btn-group { margin-top: 40px; }

.hero__scroll {
  position: absolute;
  bottom: 40px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
}
.hero__scroll span {
  display: block;
  width: 1px;
  height: 48px;
  background: rgba(255,255,255,0.4);
  animation: scrollPulse 2s ease infinite;
}
@keyframes scrollPulse {
  0%,100% { transform: translateY(0); opacity: 1; }
  50% { transform: translateY(10px); opacity: 0.5; }
}
/* Op lage schermen botst de indicator met de herotekst; daar laten we hem weg. */
@media (max-height: 700px) {
  .hero__scroll { display: none; }
}

/* ─── IMAGE COMPONENTS ─────────────────────────────────────── */
.img-zoom { overflow: hidden; position: relative; }
.img-zoom img { transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1); }
.img-zoom:hover img { transform: scale(1.05); }

.img-aspect-portrait { aspect-ratio: 4/5; object-fit: cover; width: 100%; }
.img-aspect-landscape { aspect-ratio: 16/10; object-fit: cover; width: 100%; }
.img-aspect-square { aspect-ratio: 1; object-fit: cover; width: 100%; }
.img-aspect-43 { aspect-ratio: 4/3; object-fit: cover; width: 100%; }
.img-aspect-169 { aspect-ratio: 16/9; object-fit: cover; width: 100%; }

.badge {
  position: absolute;
  bottom: -24px;
  left: -24px;
  background: var(--brand-red);
  color: #fff;
  padding: 16px 24px;
  font-family: var(--font-serif);
  font-size: 0.875rem;
}
.badge strong { display: block; font-size: 1.5rem; font-weight: 600; }

/* ─── IMAGE STRIP ──────────────────────────────────────────── */
.img-strip { display: flex; overflow: hidden; }
.img-strip__item { flex-shrink: 0; width: 50%; overflow: hidden; }
@media (min-width: 768px) { .img-strip__item { width: 25%; } }
.img-strip__item img { width: 100%; aspect-ratio: 1; object-fit: cover; transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1); }
.img-strip__item:hover img { transform: scale(1.05); }

/* ─── SERVICE CARDS ────────────────────────────────────────── */
.service-card { display: block; }
.service-card__img { margin-bottom: 32px; }
.service-card__img img { width: 100%; aspect-ratio: 3/4; object-fit: cover; }
.service-card__title {
  font-family: var(--font-serif);
  font-size: 1.75rem;
  color: var(--text);
  margin-bottom: 16px;
  transition: color 0.3s;
}
.service-card:hover .service-card__title { color: var(--brand-red); }
.service-card__desc {
  font-family: var(--font-sans);
  font-size: 0.875rem;
  color: var(--text-secondary);
  line-height: 1.8;
  margin-bottom: 16px;
}

/* ─── NUMBER STEPS ─────────────────────────────────────────── */
.step { border-top: 1px solid rgba(255,255,255,0.1); padding-top: 32px; }
.step__num { font-family: var(--font-sans); font-size: 0.6875rem; color: var(--gold); letter-spacing: 0.15em; }
.step__title { font-family: var(--font-serif); font-size: 1.5rem; color: #fff; margin: 12px 0; }
.step__desc { font-family: var(--font-sans); font-size: 0.875rem; color: rgba(255,255,255,0.5); }

/* ─── REVIEWS SLIDER ───────────────────────────────────────── */
.reviews { text-align: center; }

.reviews__stars {
  display: flex;
  gap: 4px;
  justify-content: center;
  margin-bottom: 8px;
}
.reviews__stars svg { width: 16px; height: 16px; fill: var(--gold); color: var(--gold); }

.reviews__meta {
  font-family: var(--font-sans);
  font-size: 0.875rem;
  color: var(--text-secondary);
  margin-bottom: 16px;
}

.review-slider { position: relative; max-width: 768px; margin: 0 auto; overflow: hidden; }
.review-slider__track { display: flex; transition: transform 0.5s ease; }
.review-slider__slide {
  flex: 0 0 100%;
  width: 100%;
  min-width: 0;
  text-align: center;
  padding: 0 16px;
}

.review-slider__quote {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(1.25rem, 2.5vw, 1.75rem);
  color: var(--text);
  line-height: 1.5;
  margin: 32px 0;
}

.review-slider__author {
  font-family: var(--font-sans);
  font-size: 0.875rem;
  color: var(--brand-red);
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.review-slider__nav {
  display: flex;
  justify-content: center;
  gap: 16px;
  margin-top: 48px;
}
.review-slider__btn {
  width: 48px;
  height: 48px;
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s;
}
.review-slider__btn:hover { border-color: var(--brand-red); color: var(--brand-red); }
.review-slider__btn svg { width: 20px; height: 20px; }

/* ─── ICON FEATURES ────────────────────────────────────────── */
.feature { text-align: center; }
.feature__icon { color: var(--brand-red); margin: 0 auto 12px; }
.feature__icon svg { width: 28px; height: 28px; margin: 0 auto; }
.feature__label { font-family: var(--font-sans); font-size: 0.6875rem; letter-spacing: 0.15em; text-transform: uppercase; color: var(--text-secondary); }

.feature-row { text-align: left; }
.feature-row__icon { color: var(--brand-red); margin-bottom: 16px; }
.feature-row__icon svg { width: 28px; height: 28px; }
.feature-row__title { font-family: var(--font-serif); font-size: 1.25rem; color: var(--text); margin-bottom: 12px; }
.feature-row__desc { font-family: var(--font-sans); font-size: 0.875rem; color: var(--text-secondary); line-height: 1.7; }

/* ─── MENU CARDS ───────────────────────────────────────────── */
.menu-card {
  background: var(--bone);
  padding: 40px 48px;
}
.menu-card__title { font-family: var(--font-serif); font-size: 1.75rem; color: var(--text); margin-bottom: 8px; }
.menu-card__price { font-family: var(--font-serif); font-size: 2.25rem; color: var(--brand-red); margin-bottom: 24px; }
.menu-card__price span { font-size: 1rem; color: var(--text-secondary); }
.menu-card__desc { font-family: var(--font-sans); font-size: 0.875rem; color: var(--text-secondary); line-height: 1.7; margin-bottom: 16px; }
.menu-card__wine { font-family: var(--font-sans); font-size: 0.75rem; color: var(--gold-on-light); margin-bottom: 8px; }
.menu-card__note { font-family: var(--font-sans); font-size: 0.75rem; color: var(--text-secondary); font-style: italic; }

/* ─── ROOM CARDS ───────────────────────────────────────────── */
.room-card__img { margin-bottom: 32px; }
.room-card__img img { width: 100%; aspect-ratio: 4/3; object-fit: cover; }
.room-card__title { font-family: var(--font-serif); font-size: 1.75rem; color: var(--text); margin-bottom: 8px; }
.room-card__subtitle { font-family: var(--font-serif); font-style: italic; font-size: 1.125rem; color: var(--brand-red); margin-bottom: 16px; }
.room-card__desc { font-family: var(--font-sans); font-size: 0.875rem; color: var(--text-secondary); line-height: 1.7; margin-bottom: 16px; }
.room-card__price { font-family: var(--font-serif); font-size: 1.75rem; color: var(--text); margin-bottom: 8px; }
.room-card__price span { font-family: var(--font-sans); font-size: 0.6875rem; color: var(--text-secondary); }
.room-card__extra { font-family: var(--font-sans); font-size: 0.75rem; color: var(--gold-on-light); }
.room-card__amenities {
  display: flex;
  gap: 24px;
  margin-top: 24px;
  color: var(--text-secondary);
}
.room-card__amenity {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-sans);
  font-size: 0.6875rem;
}
.room-card__amenity svg { width: 16px; height: 16px; }

/* ─── CONTACT FORM ─────────────────────────────────────────── */
.form-grid { display: grid; grid-template-columns: 1fr; gap: 0; }
@media (min-width: 768px) { .form-grid { grid-template-columns: 1fr 1fr; gap: 0 32px; } }

.form-input {
  width: 100%;
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(44,44,44,0.2);
  padding: 16px 0;
  font-family: var(--font-sans);
  font-size: 0.875rem;
  color: var(--text);
  outline: none;
  transition: border-color 0.3s;
}
.form-input::placeholder { color: rgba(44,44,44,0.3); }
.form-input:focus { border-color: var(--brand-red); }

textarea.form-input { resize: none; }

.form-types {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 48px;
}
.form-type-btn {
  padding: 8px 16px;
  font-family: var(--font-sans);
  font-size: 0.6875rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  font-weight: 500;
  border: 1px solid var(--border);
  color: var(--text-secondary);
  background: transparent;
  transition: all 0.3s;
}
.form-type-btn:hover { border-color: var(--brand-red); color: var(--brand-red); }
.form-type-btn.active { background: var(--brand-red); color: #fff; border-color: var(--brand-red); }

.contact-info { position: sticky; top: 128px; }
.contact-info__title { font-family: var(--font-serif); font-size: 1.5rem; color: var(--text); margin-bottom: 32px; }
.contact-info__item {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 24px;
  font-family: var(--font-sans);
  font-size: 0.875rem;
  color: var(--text-secondary);
}
.contact-info__item svg { color: var(--brand-red); flex-shrink: 0; margin-top: 4px; width: 20px; height: 20px; }
.contact-info__item a { transition: color 0.3s; }
.contact-info__item a:hover { color: var(--brand-red); }
.contact-info__divider { margin: 48px 0; padding-top: 48px; border-top: 1px solid var(--border); }
.contact-info__owners { font-family: var(--font-sans); font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.15em; color: var(--text-secondary); margin-bottom: 16px; }

.form-success {
  text-align: center;
  padding: 80px 0;
}
.form-success__icon {
  width: 64px;
  height: 64px;
  background: var(--green);
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 24px;
}
.form-success__icon svg { width: 28px; height: 28px; }

/* ─── VERHALEN: ARTIKEL (CMS-blogmodule) ───────────────────── */
.article { max-width: 760px; margin: 0 auto; }
.article .overline a { color: inherit; text-decoration: none; }
.article .overline a:hover { text-decoration: underline; text-underline-offset: 4px; }
.article__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  margin-top: 24px;
  font-family: var(--font-sans);
  font-size: 0.6875rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--text-secondary);
}
.article__hero { margin: 48px 0; }
.article__hero img { display: block; width: 100%; height: auto; aspect-ratio: 16/9; object-fit: cover; }
.article__body { margin-top: 48px; }
.article__body > * + * { margin-top: 24px; }
.article__body .cms-post__lede {
  font-family: var(--font-serif);
  font-size: 1.375rem;
  line-height: 1.5;
  color: var(--text);
}
.article__body h2 {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 1.75rem;
  line-height: 1.2;
  color: var(--text);
  margin-top: 48px;
}
.article__body ul { padding-left: 1.25em; }
.article__body li + li { margin-top: 8px; }
.article__body a:not(.btn) { color: var(--brand-red); text-decoration: underline; text-underline-offset: 3px; }
.article__body .cms-post__table-wrap { overflow-x: auto; }
.article__body table { width: 100%; border-collapse: collapse; font-family: var(--font-sans); font-size: 0.875rem; }
.article__body th, .article__body td { text-align: left; padding: 12px 16px; border-bottom: 1px solid var(--border); vertical-align: top; }
.article__body th { font-weight: 500; font-size: 0.6875rem; letter-spacing: 0.15em; text-transform: uppercase; color: var(--text-secondary); }
.article__body .cms-post__source { font-size: 0.8125rem; color: var(--text-secondary); }
.article__body figure { margin: 48px 0; }
.article__body figure img { display: block; width: 100%; height: auto; }
.article__body figcaption { margin-top: 12px; font-family: var(--font-sans); font-size: 0.8125rem; color: var(--text-secondary); }
.article__body .cms-post__video iframe { width: 100%; height: auto; aspect-ratio: 16/9; border: 0; }
.article__back { margin-top: 64px; }
.cms-visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }

/* ─── BLOG CARDS ───────────────────────────────────────────── */
.blog-card { display: block; color: inherit; text-decoration: none; }
.blog-card__img { margin-bottom: 24px; }
.blog-card__img img { width: 100%; aspect-ratio: 16/10; object-fit: cover; }
.blog-card__date { font-family: var(--font-sans); font-size: 0.6875rem; letter-spacing: 0.15em; text-transform: uppercase; color: var(--gold-on-light); margin-bottom: 12px; }
.blog-card__title {
  font-family: var(--font-serif);
  font-size: clamp(1.25rem, 2vw, 1.75rem);
  color: var(--text);
  margin-bottom: 12px;
  transition: color 0.3s;
}
.blog-card:hover .blog-card__title { color: var(--brand-red); }
.blog-card__excerpt { font-family: var(--font-sans); font-size: 0.875rem; color: var(--text-secondary); line-height: 1.7; margin-bottom: 16px; }

/* ─── SECTION LABEL + ICON ─────────────────────────────────── */
.section-label {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 24px;
}
.section-label svg { width: 24px; height: 24px; color: var(--brand-red); }
.section-label span { font-family: var(--font-sans); font-size: 0.6875rem; letter-spacing: 0.2em; text-transform: uppercase; font-weight: 500; color: var(--brand-red); }

/* ─── GALLERY GRID ─────────────────────────────────────────── */
/* Elke tegel is even groot en vierkant. De foto's zijn een mix van staand en
   liggend; een vaste tegelverhouding is het enige dat die netjes op één lijn
   houdt. De volledige, ongesneden foto zit achter de lightbox. */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
@media (min-width: 768px) { .gallery-grid { grid-template-columns: repeat(3, 1fr); gap: 16px; } }
@media (min-width: 1024px) { .gallery-grid { grid-template-columns: repeat(4, 1fr); } }

/* Aanklikbare foto: een knop die er geen knop uitziet. Overal gebruikt waar een
   foto in de lightbox vergroot kan worden, niet alleen in het trouwraster. */
.zoom-item {
  display: block;
  position: relative;
  width: 100%;
  padding: 0;
  border: 0;
  overflow: hidden;
  background: var(--border);
  cursor: zoom-in;
  font: inherit;
  color: inherit;
  -webkit-appearance: none;
  appearance: none;
}
.zoom-item picture { display: block; }
.zoom-item img { display: block; width: 100%; }

.gallery-grid__item { aspect-ratio: 1; }
.gallery-grid__item img { height: 100%; object-fit: cover; }

/* Vergrootglas: alleen zichtbaar bij hover/focus, zodat het raster rustig blijft. */
.zoom-item::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(26,26,26,0.28) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M21 21l-4.35-4.35M11 8v6M8 11h6'/%3E%3C/svg%3E") center no-repeat;
  opacity: 0;
  transition: opacity 0.4s;
  pointer-events: none;
}
.zoom-item:hover::after,
.zoom-item:focus-visible::after { opacity: 1; }
.zoom-item:focus-visible { outline: 2px solid var(--brand-red); outline-offset: 3px; }

/* ─── LIGHTBOX ─────────────────────────────────────────────── */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 64px 16px 88px;
  background: rgba(16,14,13,0.94);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s, visibility 0.3s;
}
.lightbox.open { opacity: 1; visibility: visible; }
.lightbox__figure { margin: 0; max-width: 1200px; width: 100%; text-align: center; }
.lightbox__figure img {
  max-width: 100%;
  max-height: calc(100vh - 176px);
  width: auto;
  margin: 0 auto;
  object-fit: contain;
}
.lightbox__caption {
  margin-top: 16px;
  font-family: var(--font-sans);
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  color: rgba(255,255,255,0.65);
}
.lightbox__count { display: block; margin-top: 6px; letter-spacing: 0.2em; color: rgba(255,255,255,0.45); }

.lightbox__btn {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  color: #fff;
  border: 1px solid rgba(255,255,255,0.3);
  border-radius: 50%;
  background: rgba(0,0,0,0.25);
  transition: background 0.3s, border-color 0.3s;
}
.lightbox__btn[hidden] { display: none; }
.lightbox__btn:hover { background: var(--brand-red); border-color: var(--brand-red); }
.lightbox__btn:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.lightbox__btn svg { width: 22px; height: 22px; }
.lightbox__close { top: 16px; right: 16px; }
.lightbox__prev { left: 12px; top: 50%; transform: translateY(-50%); }
.lightbox__next { right: 12px; top: 50%; transform: translateY(-50%); }
@media (min-width: 768px) {
  .lightbox__close { top: 24px; right: 24px; }
  .lightbox__prev { left: 24px; }
  .lightbox__next { right: 24px; }
}
/* Op een smal scherm zouden de pijlen over de foto heen vallen; daar staan ze
   onder het bijschrift. */
@media (max-width: 639px) {
  .lightbox { padding: 72px 16px 116px; }
  .lightbox__figure img { max-height: calc(100vh - 208px); }
  .lightbox__prev,
  .lightbox__next { top: auto; bottom: 24px; transform: none; }
  .lightbox__prev { left: calc(50% - 56px); }
  .lightbox__next { right: calc(50% - 56px); }
}

/* ─── CALLOUT ──────────────────────────────────────────────── */
/* Losse mededeling die niet in de lopende tekst mag wegvallen. */
.callout {
  margin-top: 32px;
  padding: 16px 20px;
  border-left: 2px solid var(--brand-red);
  background: var(--bone-dark);
  font-family: var(--font-sans);
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.7;
  color: var(--text);
}
.section--bone-dark .callout { background: var(--bone); }

/* ─── VIDEO ────────────────────────────────────────────────── */
/* preload="none" in de markup: de film wordt pas geladen als iemand op
   afspelen drukt, tot die tijd staat alleen de posterfoto op de pagina. */
.video-embed {
  max-width: 960px;
  margin: 0 auto;
  background: var(--dark);
  overflow: hidden;
}
.video-embed video { display: block; width: 100%; height: auto; aspect-ratio: 1920/816; }

/* ─── TESTIMONIAL (DARK BG) ───────────────────────────────── */
.testimonial { text-align: center; max-width: 640px; margin: 80px auto 0; }
.testimonial__stars { display: flex; justify-content: center; gap: 4px; margin-bottom: 24px; }
.testimonial__stars svg { width: 16px; height: 16px; fill: var(--gold); color: var(--gold); }
.testimonial__quote { font-family: var(--font-serif); font-style: italic; font-size: clamp(1.125rem, 2vw, 1.5rem); color: #fff; line-height: 1.5; margin-bottom: 24px; }
.testimonial__author { font-family: var(--font-sans); font-size: 0.6875rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); }

/* ─── FOOTER ───────────────────────────────────────────────── */
.footer { background: var(--dark); color: #fff; }
/* Hoogte afgestemd op de door de klant aangeleverde footer (524px op desktop). */
.footer__inner { max-width: 1280px; margin: 0 auto; padding: 54px 24px 20px; }
@media (min-width: 768px) { .footer__inner { padding: 54px 48px 20px; } }
@media (min-width: 1024px) { .footer__inner { padding: 54px 96px 20px; } }

.footer__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 64px;
}
@media (min-width: 768px) { .footer__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .footer__grid { grid-template-columns: repeat(4, 1fr); } }

.footer__logo { height: 40px; margin-bottom: 32px; }
.footer__heading { font-family: var(--font-serif); font-size: 1.125rem; color: var(--gold); margin-bottom: 24px; }
.footer__desc { font-family: var(--font-sans); font-size: 0.875rem; color: rgba(255,255,255,0.6); line-height: 1.7; }
.footer__col { display: flex; flex-direction: column; }
.footer__link {
  font-family: var(--font-sans);
  font-size: 0.875rem;
  color: rgba(255,255,255,0.6);
  margin-bottom: 12px;
  transition: color 0.3s;
}
.footer__link:hover { color: #fff; }

.footer__contact-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-family: var(--font-sans);
  font-size: 0.875rem;
  color: rgba(255,255,255,0.6);
  margin-bottom: 16px;
  transition: color 0.3s;
}
.footer__contact-item:hover { color: #fff; }
.footer__icon { color: var(--gold); flex-shrink: 0; margin-top: 2px; }

.footer__social { display: flex; gap: 16px; margin-top: 24px; }
.footer__social-link {
  width: 40px;
  height: 40px;
  border: 1px solid rgba(255,255,255,0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  transition: all 0.3s;
}
.footer__social-link:hover { border-color: var(--gold); color: var(--gold); }

.footer__bottom {
  margin-top: 80px;
  padding-top: 32px;
  border-top: 1px solid rgba(255,255,255,0.1);
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: center;
}
@media (min-width: 768px) {
  .footer__bottom { flex-direction: row; flex-wrap: wrap; justify-content: space-between; gap: 12px 32px; }
}
.footer__bottom p, .footer__bottom a {
  font-family: var(--font-sans);
  font-size: 0.6875rem;
  color: rgba(255,255,255,0.6);
}
.footer__bottom a:hover { color: rgba(255,255,255,0.6); }

/* ─── ANIMATIONS ───────────────────────────────────────────── */
.fade-up {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1), transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}
.fade-up.visible { opacity: 1; transform: translateY(0); }

.stagger-1 { transition-delay: 0.1s; }
.stagger-2 { transition-delay: 0.2s; }
.stagger-3 { transition-delay: 0.3s; }
.stagger-4 { transition-delay: 0.4s; }
.stagger-5 { transition-delay: 0.5s; }
.stagger-6 { transition-delay: 0.6s; }

/* ─── CTA SECTION ──────────────────────────────────────────── */
.cta-section { text-align: center; max-width: 896px; margin: 0 auto; }

/* Contact layout */
.contact-layout { display: grid; grid-template-columns: 1fr; gap: 64px; }
@media (min-width: 1024px) { .contact-layout { grid-template-columns: 3fr 2fr; gap: 96px; } }

/* ─── NAV SUBMENU (Evenementen › Condoleance) ──────────────── */
.nav__group { position: relative; display: flex; align-items: center; gap: 4px; }
.nav__group-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
  color: #fff;
  transition: color 0.3s, transform 0.3s;
}
.nav__group-toggle svg { width: 14px; height: 14px; }
.nav--solid .nav__group-toggle,
.nav--scrolled .nav__group-toggle { color: var(--text); }
.nav__group:hover .nav__group-toggle,
.nav__group-toggle[aria-expanded="true"] { color: var(--brand-red); }
.nav__group-toggle[aria-expanded="true"] { transform: rotate(180deg); }

.nav__submenu {
  position: absolute;
  top: 100%;
  left: -20px;
  min-width: 260px;
  padding: 12px 0;
  background: var(--bone);
  border: 1px solid var(--border);
  box-shadow: 0 16px 40px rgba(26,26,26,0.12);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
}
.nav__group:hover .nav__submenu,
.nav__group:focus-within .nav__submenu,
.nav__group--open .nav__submenu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.nav__sublink {
  display: block;
  padding: 10px 24px;
  font-family: var(--font-sans);
  font-size: 0.6875rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--text);
  white-space: nowrap;
  transition: color 0.3s, background 0.3s;
}
.nav__sublink:hover,
.nav__sublink--active { color: var(--brand-red); background: var(--bone-dark); }

/* Mobiel menu: submenu-items ingesprongen, lijst scrollbaar op kleine schermen */
.mobile-menu { overflow-y: auto; }
.mobile-menu__nav { display: flex; flex-direction: column; gap: 14px; }
.mobile-menu__sublink {
  font-size: 1rem !important;
  padding-left: 24px;
  color: var(--text-secondary) !important;
  position: relative;
}
.mobile-menu__sublink::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  width: 12px;
  height: 1px;
  background: var(--border);
}
.mobile-menu__sublink.active { color: var(--brand-red) !important; }

/* ─── FAQ ACCORDEON ────────────────────────────────────────── */
.faq__title {
  font-family: var(--font-serif);
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  color: var(--text);
  margin-bottom: 48px;
  text-align: center;
}
.section--dark .faq__title { color: #fff; }
.faq__list { max-width: 800px; margin: 0 auto; }
.faq__item { border-bottom: 1px solid var(--border); }
.section--dark .faq__item { border-bottom-color: rgba(255,255,255,0.15); }
.faq__heading { margin: 0; font-weight: 400; }
.faq__question {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 24px 0;
  font-family: var(--font-serif);
  font-size: 1.25rem;
  line-height: 1.3;
  color: var(--text);
  text-align: left;
  transition: color 0.3s;
}
.section--dark .faq__question { color: #fff; }
.faq__question:hover { color: var(--brand-red); }
.section--dark .faq__question:hover { color: var(--gold); }

.faq__icon { flex-shrink: 0; width: 20px; height: 20px; position: relative; }
.faq__icon::before,
.faq__icon::after {
  content: '';
  position: absolute;
  background: currentColor;
  transition: transform 0.3s ease, opacity 0.3s ease;
}
.faq__icon::before { width: 100%; height: 1px; top: 50%; left: 0; }
.faq__icon::after { width: 1px; height: 100%; left: 50%; top: 0; }
.faq__item.active .faq__icon::after { transform: rotate(90deg); opacity: 0; }

.faq__answer {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.4s ease;
}
.faq__answer > * { overflow: hidden; margin: 0; }
.faq__item.active .faq__answer { grid-template-rows: 1fr; }
.faq__answer p {
  font-family: var(--font-sans);
  font-size: 0.9375rem;
  color: var(--text-secondary);
  line-height: 1.8;
}
.faq__item.active .faq__answer p { padding-bottom: 24px; }
.section--dark .faq__answer p { color: rgba(255,255,255,0.7); }

/* ─── AANBEVELINGEN / PARTNERKAARTEN ───────────────────────── */
.partner-grid { display: grid; grid-template-columns: 1fr; gap: 32px; }
@media (min-width: 768px)  { .partner-grid { grid-template-columns: repeat(2, 1fr); gap: 48px; } }
@media (min-width: 1024px) { .partner-grid--3 { grid-template-columns: repeat(3, 1fr); } }

.partner-card { background: var(--bone); display: flex; flex-direction: column; }
.partner-card__img { overflow: hidden; }
.partner-card__img img { width: 100%; aspect-ratio: 4/3; object-fit: cover; }
.partner-card__body { padding: 32px; }
.partner-card__category {
  font-family: var(--font-sans);
  font-size: 0.6875rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--gold-on-light);
  margin-bottom: 8px;
}
.partner-card__name { font-family: var(--font-serif); font-size: 1.5rem; color: var(--text); margin-bottom: 12px; }
.partner-card__desc {
  font-family: var(--font-sans);
  font-size: 0.875rem;
  color: var(--text-secondary);
  line-height: 1.7;
  margin-bottom: 20px;
}
.section--bone-dark .partner-card { background: var(--bone); }
/* Kaart zonder eigen foto: tekst verticaal centreren, anders valt naast een
   kaart mét foto een groot leeg vlak onder de tekst. */
.partner-card--text { justify-content: center; }

/* ─── SFEERIMPRESSIE ───────────────────────────────────────── */
.sfeerimpressie__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
@media (min-width: 640px) { .sfeerimpressie__grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 768px) { .sfeerimpressie__grid { grid-template-columns: repeat(4, 1fr); gap: 16px; } }
.sfeerimpressie__grid img { width: 100%; aspect-ratio: 1; object-fit: cover; }

.photo-credit {
  margin-top: 24px;
  font-family: var(--font-sans);
  font-size: 0.6875rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--text-secondary);
}
.photo-credit a { border-bottom: 1px solid var(--border); transition: color 0.3s, border-color 0.3s; }
.photo-credit a:hover { color: var(--brand-red); border-color: var(--brand-red); }
.section--dark .photo-credit { color: rgba(255,255,255,0.6); }
.footer__credit { font-family: var(--font-sans); }
.footer__credit a { border-bottom: 1px solid rgba(255,255,255,0.2); }
.footer__credit a:hover { color: rgba(255,255,255,0.9); }

/* ─── ONDERSCHEIDINGEN ─────────────────────────────────────── */
.awards {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 32px 48px;
}
.awards__item { display: flex; align-items: center; gap: 16px; text-align: left; }
.awards__item img { width: auto; height: 88px; object-fit: contain; flex-shrink: 0; }
.awards__label {
  font-family: var(--font-sans);
  font-size: 0.6875rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--text-secondary);
  line-height: 1.6;
}
.awards__label strong { display: block; font-weight: 500; color: var(--text); }
.section--dark .awards__label { color: rgba(255,255,255,0.6); }
.section--dark .awards__label strong { color: #fff; }
/* De Top 500-badge linkt door; flex houdt de hoogte gelijk aan de andere badge. */
.awards__item a { display: flex; flex-shrink: 0; }
.awards__note {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: 0.9375rem;
  line-height: 1.8;
  color: var(--text-secondary);
  max-width: 640px;
  margin: 32px auto 0;
}
.section--dark .awards__note { color: rgba(255,255,255,0.6); }

/* ─── CONDOLEANCE ──────────────────────────────────────────── */
.memoriam-img img { filter: grayscale(1) brightness(1.06); transition: filter 0.6s ease; }
.memoriam-note {
  border-left: 2px solid var(--gold);
  padding: 8px 0 8px 24px;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.25rem;
  line-height: 1.6;
  color: var(--text);
}
.section--dark .memoriam-note { color: #fff; }

/* ─── FOCUS ────────────────────────────────────────────────── */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 2px solid var(--brand-red);
  outline-offset: 3px;
}
.hero a:focus-visible,
.section--dark a:focus-visible,
.section--dark button:focus-visible,
.footer a:focus-visible,
.nav:not(.nav--solid):not(.nav--scrolled) a:focus-visible,
.nav:not(.nav--solid):not(.nav--scrolled) button:focus-visible {
  outline-color: var(--gold);
}
.form-input:focus-visible { outline-offset: 2px; }

/* ─── VERMINDERDE BEWEGING ─────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .fade-up { opacity: 1; transform: none; }
  .hero__media { transform: none !important; }
  .faq__answer { transition: none; }
}

/* ─── FORMULIERLABELS & FOUTMELDING ────────────────────────── */
/* De inputs houden hun placeholder-uiterlijk; de labels zijn er voor
   schermlezers en voor de koppeling label→veld. */
.form-label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.form-error {
  margin-top: 24px;
  padding: 12px 16px;
  border-left: 2px solid var(--brand-red);
  background: rgba(122, 46, 46, 0.06);
  font-family: var(--font-sans);
  font-size: 0.875rem;
  color: var(--brand-red);
}
.form-error a { text-decoration: underline; text-underline-offset: 3px; }
.form-error--top { margin: 0 0 32px; }
.form-error:focus-visible { outline: 2px solid var(--brand-red); outline-offset: 2px; }

/* Serverside validatie (submit.php): het veld krijgt een rode onderlijn en
   een korte melding eronder; de ingevulde waarden blijven staan. */
.form-input.is-invalid { border-bottom-color: var(--brand-red); }
.form-field__error {
  margin: 8px 0 0;
  font-family: var(--font-sans);
  font-size: 0.8125rem;
  color: var(--brand-red);
}