/* =========================================================
   S.T. DETAILING — COMPONENTS
   ========================================================= */

/* ---------------------------------------------------------
   BUTTONS
   --------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2xs);
  padding: 0.95rem 1.75rem;
  font-family: var(--font-body);
  font-size: var(--fs-button);
  font-weight: 700;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  white-space: nowrap;
  transition: background-color var(--dur-base) var(--ease-out),
              color var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
  min-height: 48px;
}
.btn:active { transform: translateY(1px); }

.btn--primary {
  background: var(--color-accent);
  color: var(--color-text-inverse);
  border-color: var(--color-accent);
}
.btn--primary:hover { background: var(--color-accent-hover); border-color: var(--color-accent-hover); }

.btn--dark {
  background: var(--color-graphite-900);
  color: var(--color-text-inverse);
  border-color: var(--color-graphite-900);
}
.btn--dark:hover { background: var(--color-graphite-700); }

.btn--outline {
  background: transparent;
  color: var(--color-text-primary);
  border-color: var(--color-border-strong);
}
.btn--outline:hover { border-color: var(--color-text-primary); }

.section--dark .btn--outline {
  color: var(--color-text-inverse);
  border-color: rgba(246,244,239,0.35);
}
.section--dark .btn--outline:hover { border-color: var(--color-text-inverse); }

.btn--ghost-light {
  background: transparent;
  color: var(--color-text-inverse);
  border-color: rgba(246,244,239,0.4);
}
.btn--ghost-light:hover { background: rgba(246,244,239,0.1); border-color: var(--color-text-inverse); }

.btn--sm { padding: 0.7rem 1.25rem; min-height: 40px; font-size: 0.8125rem; }
.btn--block { width: 100%; }
.btn--icon-trail svg { transition: transform var(--dur-base) var(--ease-out); }
.btn--icon-trail:hover svg { transform: translateX(4px); }

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  font-weight: 700;
  font-size: var(--fs-small);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--color-text-primary);
  border-bottom: 1px solid var(--color-border-strong);
  padding-bottom: 3px;
  transition: border-color var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out);
}
.link-arrow svg { transition: transform var(--dur-base) var(--ease-out); }
.link-arrow:hover { color: var(--color-accent); border-color: var(--color-accent); }
.link-arrow:hover svg { transform: translateX(4px); }
.section--dark .link-arrow { color: var(--color-text-inverse); border-color: rgba(246,244,239,0.3); }
/* Op smalle schermen mag de pijl-link niet over twee regels breken met de
   pijl los aan de rechterkant: iets kleinere letter houdt hem op een regel. */
@media (max-width: 560px) {
  .link-arrow {
    font-size: 0.8125rem;
    letter-spacing: 0.03em;
    gap: 0.4rem;
  }
}

.section--dark .link-arrow:hover { color: var(--color-accent-on-dark); border-color: var(--color-accent-on-dark); }

/* ---------------------------------------------------------
   BADGE
   --------------------------------------------------------- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0.4rem 0.85rem;
  border-radius: var(--radius-pill);
  font-size: var(--fs-caption);
  font-weight: 700;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  background: var(--color-accent-soft);
  color: var(--color-accent-hover);
  border: 1px solid transparent;
}
.badge--outline-dark {
  background: transparent;
  border-color: rgba(246,244,239,0.3);
  color: var(--color-text-inverse-secondary);
}

/* ---------------------------------------------------------
   NAVBAR
   --------------------------------------------------------- */
/* De header heeft een VASTE hoogte. Tijdens het scrollen verandert
   alleen de rand en de schaduw, nooit een maat die de documenthoogte
   beinvloedt. Zo kan het aan- en uitzetten van de scroll-status de
   scrollpositie niet verschuiven, en is een scroll-lus uitgesloten. */
:root { --header-h: 96px; }

.navbar {
  position: sticky;
  top: 0;
  z-index: var(--z-nav);
  height: var(--header-h);
  background: rgba(246, 244, 239, 0.88);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid transparent;
  /* alleen kleur en schaduw animeren: geen invloed op de layout */
  transition: box-shadow var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out);
  /* de browser mag de scrollpositie niet corrigeren op deze balk */
  overflow-anchor: none;
}
.navbar.is-scrolled {
  border-bottom-color: var(--color-border);
  box-shadow: var(--shadow-sm);
}
.navbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  height: 100%;
}

/* Het aangeleverde logo: vrijstaand, zonder eigen vlak, kader of
   afronding. Alleen proportioneel geschaald via de hoogte. */
.brand {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  line-height: 0;
  background: none;
  border: 0;
}
.brand picture { display: block; line-height: 0; }
.brand img {
  display: block;
  height: 76px;
  width: auto;
  background: none;
}

/* De footer draagt de naam als tekst; het logo staat alleen in de header. */
.footer-woordmerk {
  display: inline-flex;
  align-items: baseline;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.375rem;
  letter-spacing: 0.02em;
  color: var(--color-text-inverse);
}
.footer-woordmerk span { color: var(--color-accent-on-dark); }

.navbar__links {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
}
.navbar__links a {
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--color-text-secondary);
  padding-block: 0.25rem;
  border-bottom: 1px solid transparent;
  transition: color var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out);
}
.navbar__links a:hover,
.navbar__links a[aria-current="page"] {
  color: var(--color-text-primary);
  border-bottom-color: var(--color-accent);
}

.navbar__actions { display: flex; align-items: center; gap: var(--space-sm); }

.navbar__tel {
  display: none;
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--color-text-secondary);
}

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-sm);
}
.nav-toggle span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--color-text-primary);
  transition: transform var(--dur-base) var(--ease-out), opacity var(--dur-base) var(--ease-out);
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: calc(var(--z-nav) - 1);
  background: var(--color-bg);
  padding: 5.5rem var(--gutter) var(--space-xl);
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
  transform: translateY(-8px);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out), visibility 0s linear var(--dur-base);
  overflow-y: auto;
}
.mobile-menu.is-open {
  opacity: 1;
  transform: translateY(0);
  visibility: visible;
  transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
.mobile-menu__links { display: flex; flex-direction: column; gap: var(--space-md); }
.mobile-menu__links a {
  font-family: var(--font-display);
  font-size: 1.75rem;
  font-weight: 600;
  color: var(--color-text-primary);
}
.mobile-menu__foot { display: flex; flex-direction: column; gap: var(--space-sm); }

:root { --header-h-mobile: 72px; }
@media (max-width: 960px) {
  .navbar { height: var(--header-h-mobile); }
  .brand img { height: 56px; }
  .navbar__links { display: none; }
  .nav-toggle { display: flex; }
  .navbar__actions .btn { display: none; }
}
@media (min-width: 961px) {
  .mobile-menu { display: none; }
}

/* ---------------------------------------------------------
   SECTION HEADING
   --------------------------------------------------------- */
.section-heading {
  max-width: 680px;
  margin-bottom: var(--space-2xl);
}
.section-heading--center { margin-inline: auto; text-align: center; }
.section-heading h2 { margin-top: var(--space-sm); }
.section-heading p { margin-top: var(--space-md); }

/* ---------------------------------------------------------
   HERO
   Tekst links op het donker, de foto rechts als staand paneel tot aan de
   rand van het scherm. De klantfoto's zijn staand (1080 x 1440); over de
   volle breedte opgeblazen werden ze zacht en moest er een donkere laag
   over om de tekst leesbaar te houden. Zo blijft de lak zichtbaar en
   scherp. Op de telefoon staat de foto boven de tekst.
   --------------------------------------------------------- */
.hero {
  position: relative;
  isolation: isolate;
  background: var(--color-graphite-900);
  color: var(--color-text-inverse);
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 42%);
  min-height: clamp(600px, 86vh, 880px);
}

.hero__media {
  position: relative;
  grid-column: 2;
  grid-row: 1;
  margin: 0;
  overflow: hidden;
}
.hero__media picture,
.hero__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: 30% 72%;
}
/* Alleen een smalle overgang aan de linkerrand, zodat het paneel in het
   donker opgaat in plaats van er als een kader naast te staan. */
.hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, var(--color-graphite-900) 0%, rgba(10, 10, 11, 0) 22%);
  pointer-events: none;
}

.hero__inner {
  position: relative;
  z-index: 1;
  grid-column: 1;
  grid-row: 1;
  display: flex;
  align-items: center;
  padding-block: var(--space-3xl);
  padding-left: max(var(--gutter), calc((100vw - var(--container-max)) / 2 + var(--gutter)));
  padding-right: clamp(var(--space-lg), 5vw, var(--space-3xl));
}
.hero__content { max-width: 36rem; }

.hero__title {
  font-family: var(--font-display);
  font-size: var(--fs-display);
  font-weight: 600;
  line-height: 1.02;
  letter-spacing: var(--ls-tight);
  color: var(--color-text-inverse);
  text-wrap: balance;
}
.hero__title em { font-style: normal; color: var(--color-accent-on-dark); }

.hero__sub {
  margin-top: var(--space-lg);
  font-size: var(--fs-body-lg);
  line-height: var(--lh-relaxed);
  color: var(--color-text-inverse-secondary);
  max-width: 42ch;
}

.hero__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-top: var(--space-xl);
}
.hero__ctas .btn svg { flex-shrink: 0; }

.hero__note {
  margin-top: var(--space-lg);
  font-size: var(--fs-small);
  line-height: var(--lh-normal);
  color: var(--color-text-muted);
  max-width: 44ch;
}

@media (max-width: 960px) {
  .hero {
    grid-template-columns: 1fr;
    min-height: 0;
  }
  .hero__media {
    grid-column: 1;
    grid-row: 1;
    aspect-ratio: 4 / 3;
  }
  .hero__media img { object-position: 40% 74%; }
  .hero__media::after {
    background: linear-gradient(to bottom, rgba(10, 10, 11, 0) 62%, var(--color-graphite-900) 100%);
  }
  .hero__inner {
    grid-column: 1;
    grid-row: 2;
    padding: var(--space-md) var(--gutter) var(--space-2xl);
  }
}
@media (max-width: 560px) {
  .hero__ctas { flex-direction: column; align-items: stretch; }
  .hero__ctas .btn { justify-content: center; }
}

/* ---------------------------------------------------------
   CARDS — SERVICES (editorial)
   --------------------------------------------------------- */
.service-row {
  border-top: var(--border-hairline);
}
.service-row:last-child { border-bottom: var(--border-hairline); }

.service-item {
  display: grid;
  grid-template-columns: 90px minmax(0, 1.1fr) minmax(0, 1.4fr) auto;
  gap: var(--space-lg);
  align-items: center;
  padding-block: var(--space-xl);
  text-decoration: none;
  position: relative;
  transition: background var(--dur-base) var(--ease-out);
}
.service-item:hover { background: rgba(179,114,62,0.045); }
.service-item__num {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-text-muted);
  letter-spacing: 0.05em;
}
.service-item__media {
  aspect-ratio: 4/3;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--color-graphite-800);
  position: relative;
}
.service-item__media picture { display: block; width: 100%; height: 100%; }
.service-item__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform var(--dur-slow) var(--ease-out); }
.service-item:hover .service-item__media img { transform: scale(1.06); }
.service-item__body h3 { display: flex; align-items: baseline; gap: var(--space-sm); flex-wrap: wrap; }
.service-item__price {
  font-family: var(--font-body);
  font-size: var(--fs-small);
  font-weight: 700;
  color: var(--color-accent-hover);
}
.service-item__desc { margin-top: var(--space-xs); color: var(--color-text-secondary); max-width: 56ch; }
.service-item__cta {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
  font-size: var(--fs-small);
  font-weight: 700;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  white-space: nowrap;
  border-bottom: 1px solid var(--color-border-strong);
  padding-bottom: 3px;
  transition: border-color var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out);
}
.service-item__cta svg { transition: transform var(--dur-base) var(--ease-out); }
.service-item:hover .service-item__cta { color: var(--color-accent); border-color: var(--color-accent); }
.service-item:hover .service-item__cta svg { transform: translateX(4px); }

@media (max-width: 900px) {
  .service-item {
    grid-template-columns: 72px minmax(0, 1fr);
    grid-template-areas:
      "media media"
      "num body"
      "num cta";
    row-gap: var(--space-sm);
  }
  /* Deze plaatsingsregels horen uitsluitend binnen een dienstenrij.
     Zonder deze afbakening kreeg ook de foto in de 'Over'-sectie een
     grid-area die daar niet bestaat, waardoor die op mobiel naar nul
     breedte klapte en de tekst in een smalle restkolom belandde. */
  .service-item > .service-item__media { grid-area: media; aspect-ratio: 16/10; }
  .service-item > .service-item__num { grid-area: num; }
  .service-item > .service-item__body { grid-area: body; min-width: 0; }
  .service-item > .service-item__cta {
    grid-area: cta;
    justify-self: start;
    white-space: normal;
    margin-top: var(--space-2xs);
  }
}

/* ---------------------------------------------------------
   PRICING
   --------------------------------------------------------- */
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--color-border);
  border: var(--border-hairline);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.pricing-card {
  background: var(--color-surface);
  padding: var(--space-xl) var(--space-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  min-height: 100%;
}
.pricing-card__num { font-family: var(--font-display); font-size: 0.8125rem; color: var(--color-text-muted); letter-spacing: 0.05em; }
.pricing-card__name { font-family: var(--font-display); font-size: 1.25rem; font-weight: 600; }
.pricing-card__price {
  margin-top: auto;
  padding-top: var(--space-md);
  border-top: var(--border-hairline);
  font-family: var(--font-display);
  font-size: 1.75rem;
  font-weight: 600;
  color: var(--color-accent-hover);
}
.pricing-card__price span {
  display: block;
  font-family: var(--font-body);
  font-size: var(--fs-caption);
  font-weight: 700;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: 2px;
}
.pricing-card__note { font-size: var(--fs-small); color: var(--color-text-secondary); }
.pricing-card__cta { margin-top: var(--space-xs); }
.pricing-card--helper { background: var(--color-bg); }
.pricing-card--helper .pricing-card__num { color: var(--color-accent); }

@media (max-width: 900px) {
  .pricing-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .pricing-grid { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------
   USP GRID
   --------------------------------------------------------- */
.usp-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-2xl) var(--space-lg);
}
.usp-card__num {
  font-family: var(--font-display);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--color-accent);
  letter-spacing: 0.05em;
}
.usp-card h3 { margin-top: var(--space-sm); font-size: 1.1875rem; }
.usp-card p { margin-top: var(--space-2xs); color: var(--color-text-secondary); }

/* ---------------------------------------------------------
   PROCESS TIMELINE
   --------------------------------------------------------- */
.process {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-lg);
  counter-reset: step;
}
.process__step {
  position: relative;
  padding-top: var(--space-lg);
  border-top: 2px solid var(--color-border-strong);
}
.process__step-num {
  font-family: var(--font-display);
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--color-accent);
  letter-spacing: 0.05em;
}
.process__step h3 { margin-top: var(--space-sm); font-size: 1.125rem; }
.process__step p { margin-top: var(--space-2xs); color: var(--color-text-secondary); font-size: var(--fs-small); }

@media (max-width: 900px) {
  .process { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .process { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------
   REVIEWS
   --------------------------------------------------------- */
.review-carousel { position: relative; }
.review-carousel__track-wrap { overflow: hidden; }
.review-carousel__track {
  display: flex;
  gap: var(--space-lg);
  will-change: transform;
}
.review-card {
  flex: 0 0 calc((100% - (2 * var(--space-lg))) / 3);
  background: var(--color-surface);
  border: var(--border-hairline);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}
.review-card__stars { display: inline-flex; align-items: center; gap: 2px; color: var(--color-accent); }
.review-card__stars svg { flex-shrink: 0; }
.review-card__text { color: var(--color-text-secondary); flex-grow: 1; }
.review-card__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); padding-top: var(--space-sm); border-top: var(--border-hairline); }
.review-card__name { font-weight: 700; font-size: var(--fs-small); }
.review-card__source { display: flex; align-items: center; gap: 6px; font-size: var(--fs-caption); color: var(--color-text-muted); }

@media (max-width: 1024px) {
  .review-card { flex-basis: calc((100% - var(--space-lg)) / 2); }
}
@media (max-width: 680px) {
  .review-card { flex-basis: 100%; }
}

.review-carousel__controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-md);
  margin-top: var(--space-xl);
}
.review-carousel__arrow {
  width: 46px; height: 46px;
  border-radius: 50%;
  border: var(--border-hairline);
  display: flex; align-items: center; justify-content: center;
  transition: background var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out);
}
.review-carousel__arrow:hover { background: var(--color-graphite-900); color: var(--color-text-inverse); border-color: var(--color-graphite-900); }
.review-carousel__dots { display: flex; gap: 2px; }
.review-carousel__dot {
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  background: transparent;
}
.review-carousel__dot::before {
  content: "";
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--color-border-strong);
  transition: background var(--dur-base) var(--ease-out), width var(--dur-base) var(--ease-out), border-radius var(--dur-base) var(--ease-out);
}
.review-carousel__dot[aria-current="true"]::before { background: var(--color-accent); width: 22px; border-radius: var(--radius-pill); }
/* Mobiel: groter aanraakvlak zonder dat de stip zelf groter wordt. */
@media (max-width: 560px) {
  .review-carousel__dot { width: 44px; height: 44px; }
}

/* ---------------------------------------------------------
   BEFORE / AFTER SLIDER
   --------------------------------------------------------- */
.ba-slider {
  position: relative;
  aspect-ratio: 16/10;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--color-graphite-800);
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
}
.ba-slider__pair {
  position: absolute;
  inset: 0;
}
.ba-slider__after,
.ba-slider__before {
  position: absolute;
  inset: 0;
}
.ba-slider__before {
  clip-path: inset(0 50% 0 0);
  will-change: clip-path;
}
.ba-slider__before > img, .ba-slider__after > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ba-slider__handle {
  position: absolute;
  top: 0; bottom: 0;
  left: 50%;
  width: 2px;
  background: var(--color-text-inverse);
  transform: translateX(-50%);
  display: flex; align-items: center; justify-content: center;
  cursor: ew-resize;
  will-change: left;
}
.ba-slider__handle-btn {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--color-text-inverse);
  color: var(--color-graphite-900);
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-md);
}
.ba-slider__tag {
  position: absolute;
  top: var(--space-sm);
  padding: 5px 12px;
  border-radius: var(--radius-pill);
  background: rgba(13,14,16,0.6);
  color: #fff;
  font-size: var(--fs-caption);
  font-weight: 700;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  backdrop-filter: blur(4px);
}
.ba-slider__tag--before { left: var(--space-sm); }
.ba-slider__tag--after { right: var(--space-sm); }

.ba-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs);
  margin-bottom: var(--space-lg);
}
.ba-tabs button {
  padding: 0.55rem 1.1rem;
  border-radius: var(--radius-pill);
  border: var(--border-hairline);
  font-size: var(--fs-small);
  font-weight: 700;
}
.ba-tabs button[aria-selected="true"] {
  background: var(--color-graphite-900);
  color: var(--color-text-inverse);
  border-color: var(--color-graphite-900);
}

/* ---------------------------------------------------------
   GALLERY
   --------------------------------------------------------- */
.gallery-filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs);
  margin-bottom: var(--space-xl);
}
.gallery-filters button {
  padding: 0.55rem 1.1rem;
  border-radius: var(--radius-pill);
  border: var(--border-hairline);
  font-size: var(--fs-small);
  font-weight: 700;
  transition: background var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out);
}
.gallery-filters button[aria-pressed="true"] {
  background: var(--color-graphite-900);
  color: var(--color-text-inverse);
  border-color: var(--color-graphite-900);
}

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-auto-rows: 130px;
  grid-auto-flow: dense;
  gap: var(--space-sm);
}
.gallery-item {
  position: relative;
  grid-column: span 3;
  grid-row: span 2;
  border-radius: var(--radius-md);
  overflow: hidden;
  cursor: pointer;
}
.gallery-item--wide { grid-column: span 4; }
.gallery-item--narrow { grid-column: span 2; }
.gallery-item--tall { grid-row: span 3; }
.gallery-item--short { grid-row: span 1; }
.gallery-item picture { display: block; width: 100%; height: 100%; }
.gallery-item img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform var(--dur-slow) var(--ease-out); }
.gallery-item:hover svg { transform: scale(1.07); }
.gallery-item__overlay {
  position: absolute; inset: 0;
  background: linear-gradient(0deg, rgba(13,14,16,0.75) 0%, rgba(13,14,16,0) 45%);
  display: flex; align-items: flex-end;
  padding: var(--space-sm);
  opacity: 0;
  transition: opacity var(--dur-base) var(--ease-out);
}
.gallery-item:hover .gallery-item__overlay, .gallery-item:focus-visible .gallery-item__overlay { opacity: 1; }
.gallery-item__label { color: #fff; font-size: var(--fs-small); font-weight: 700; }

@media (max-width: 900px) {
  .gallery-grid { grid-template-columns: repeat(4, 1fr); grid-auto-rows: 120px; }
  .gallery-item { grid-column: span 2 !important; }
}
@media (max-width: 560px) {
  .gallery-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 150px; }
  .gallery-item { grid-column: span 2 !important; grid-row: span 2 !important; }
}

/* Lightbox */
.lightbox {
  position: fixed; inset: 0;
  z-index: var(--z-modal);
  background: rgba(13,14,16,0.94);
  display: flex; align-items: center; justify-content: center;
  padding: var(--space-lg);
  opacity: 0; visibility: hidden;
  transition: opacity var(--dur-base) var(--ease-out), visibility 0s linear var(--dur-base);
}
.lightbox.is-open { opacity: 1; visibility: visible; transition: opacity var(--dur-base) var(--ease-out); }
.lightbox__figure { max-width: 1000px; width: 100%; }
.lightbox__figure picture { display: block; width: 100%; }
.lightbox__figure img { width: 100%; height: auto; max-height: 74vh; border-radius: var(--radius-md); object-fit: contain; }
.lightbox__caption { color: var(--color-text-inverse-secondary); margin-top: var(--space-sm); font-size: var(--fs-small); text-align: center; }
.lightbox__close, .lightbox__prev, .lightbox__next {
  position: absolute;
  width: 48px; height: 48px;
  border-radius: 50%;
  background: rgba(246,244,239,0.08);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  transition: background var(--dur-base) var(--ease-out);
}
.lightbox__close:hover, .lightbox__prev:hover, .lightbox__next:hover { background: rgba(246,244,239,0.2); }
.lightbox__close { top: var(--space-lg); right: var(--space-lg); }
.lightbox__prev { left: var(--space-lg); top: 50%; transform: translateY(-50%); }
.lightbox__next { right: var(--space-lg); top: 50%; transform: translateY(-50%); }
@media (max-width: 700px) {
  .lightbox__prev, .lightbox__next { width: 40px; height: 40px; }
  .lightbox__prev { left: var(--space-2xs); }
  .lightbox__next { right: var(--space-2xs); }
  .lightbox__close { top: var(--space-2xs); right: var(--space-2xs); }
}

/* ---------------------------------------------------------
   FAQ ACCORDION
   --------------------------------------------------------- */
.faq-list { border-top: var(--border-hairline); }
.faq-item { border-bottom: var(--border-hairline); }
.faq-item__q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  padding-block: var(--space-lg);
  text-align: left;
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 600;
}
.faq-item__icon {
  flex-shrink: 0;
  width: 28px; height: 28px;
  border-radius: 50%;
  border: var(--border-hairline);
  display: flex; align-items: center; justify-content: center;
  position: relative;
}
.faq-item__icon::before, .faq-item__icon::after {
  content: "";
  position: absolute;
  background: var(--color-text-primary);
  transition: transform var(--dur-base) var(--ease-out), opacity var(--dur-base) var(--ease-out);
}
.faq-item__icon::before { width: 10px; height: 1.5px; }
.faq-item__icon::after { width: 1.5px; height: 10px; }
.faq-item__q[aria-expanded="true"] .faq-item__icon::after { transform: rotate(90deg); opacity: 0; }
.faq-item__a {
  overflow: hidden;
  max-height: 0;
  transition: max-height var(--dur-slow) var(--ease-in-out);
}
.faq-item__a-inner { padding-bottom: var(--space-lg); color: var(--color-text-secondary); max-width: 68ch; }

/* ---------------------------------------------------------
   CTA SECTION
   --------------------------------------------------------- */
.cta-section {
  background: var(--color-graphite-900);
  color: var(--color-text-inverse);
  border-radius: var(--radius-lg);
  padding: var(--space-3xl) var(--space-lg);
  text-align: center;
}
.cta-section h2 { color: var(--color-text-inverse); }
.cta-section p { margin-top: var(--space-md); color: var(--color-text-inverse-secondary); max-width: 52ch; margin-inline: auto; }
.cta-section__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-sm); margin-top: var(--space-xl); }

/* ---------------------------------------------------------
   FORMS
   --------------------------------------------------------- */
.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-md);
}
.form-field { display: flex; flex-direction: column; gap: 0.4rem; }
.form-field--full { grid-column: 1 / -1; }
.form-field label {
  font-size: var(--fs-small);
  font-weight: 700;
  color: var(--color-text-primary);
}
.form-field .optional { font-weight: 500; color: var(--color-text-muted); text-transform: none; }
.form-field input,
.form-field select,
.form-field textarea {
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  padding: 0.85rem 1rem;
  background: var(--color-surface);
  font-size: 1rem;
  transition: border-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
  width: 100%;
}
.form-field textarea { resize: vertical; min-height: 120px; }
.form-field input:focus, .form-field select:focus, .form-field textarea:focus {
  border-color: var(--color-accent);
  box-shadow: var(--shadow-focus);
}
.form-field input:invalid[data-touched="true"],
.form-field.has-error input,
.form-field.has-error select,
.form-field.has-error textarea {
  border-color: var(--color-error);
}
.form-field__error {
  display: none;
  font-size: var(--fs-caption);
  color: var(--color-error);
  font-weight: 600;
}
.form-field.has-error .form-field__error { display: block; }
.form-field__hint { font-size: var(--fs-caption); color: var(--color-text-muted); }

/* Donker zijpaneel naast de formulieren. Tekstkleuren worden hier
   omgedraaid, zodat secundaire tekst leesbaar blijft op de donkere
   achtergrond (was #4B4D53 op #0D0E10, veel te weinig contrast). */
.panel-dark {
  background: var(--color-graphite-900);
  color: var(--color-text-inverse);
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
}
.panel-dark h3 { color: var(--color-text-inverse); }
.panel-dark .text-secondary,
.panel-dark p { color: #E6E4DF; }
.panel-dark li,
.panel-dark span { color: #E6E4DF; }
.panel-dark .link-arrow {
  color: var(--color-text-inverse);
  border-color: rgba(246, 244, 239, 0.3);
}
.panel-dark .link-arrow:hover {
  color: var(--color-accent-on-dark);
  border-color: var(--color-accent-on-dark);
}
.panel-dark .divider { background: rgba(246, 244, 239, 0.18); }

/* ---------------------------------------------------------
   DIENSTPAGINA'S
   --------------------------------------------------------- */
/* Neutrale beeldlijst: dezelfde vormgeving als in de dienstenrijen,
   maar zonder de plaatsingsregels die daar bij de grid-indeling horen. */
.media-frame {
  aspect-ratio: 4/3;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--color-graphite-800);
  position: relative;
}
.media-frame picture { display: block; width: 100%; height: 100%; }
.media-frame img { width: 100%; height: 100%; object-fit: cover; display: block; }

.prose-block h2 { font-size: var(--fs-h3); }
.prose-block p {
  margin-top: var(--space-sm);
  color: var(--color-text-secondary);
  line-height: var(--lh-relaxed);
  max-width: 68ch;
}

a.usp-card { color: inherit; transition: border-color var(--dur-base) var(--ease-out); }
a.usp-card:hover { border-color: var(--color-accent); }

/* ---------------------------------------------------------
   VISITEKAARTJE (premium presentatie, identiek op elke plek)
   --------------------------------------------------------- */
.business-card {
  margin: 0;
  perspective: 1200px;
}
.business-card picture { display: block; }
.business-card img {
  display: block;
  width: 100%;
  height: auto;               /* verhouding volgt het ontwerp, nooit vervormd */
  aspect-ratio: 1559 / 1009;
  object-fit: contain;
  border-radius: 14px;
  box-shadow:
    0 1px 2px rgba(13, 14, 16, 0.10),
    0 10px 24px -8px rgba(13, 14, 16, 0.28),
    0 28px 56px -20px rgba(13, 14, 16, 0.32);
  transition: transform var(--dur-slow) var(--ease-out),
              box-shadow var(--dur-slow) var(--ease-out);
}
@media (hover: hover) {
  .business-card img:hover {
    transform: translateY(-4px);
    box-shadow:
      0 2px 4px rgba(13, 14, 16, 0.12),
      0 16px 32px -10px rgba(13, 14, 16, 0.32),
      0 40px 72px -24px rgba(13, 14, 16, 0.38);
  }
}
@media (prefers-reduced-motion: reduce) {
  .business-card img { transition: none; }
  .business-card img:hover { transform: none; }
}
@media (max-width: 900px) {
  .business-card img { border-radius: 12px; }
}

/* Spamval: onzichtbaar voor bezoekers, wel invulbaar voor bots. */
.form-honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form-note {
  display: flex;
  gap: var(--space-xs);
  padding: var(--space-md);
  background: var(--color-accent-soft);
  border-radius: var(--radius-md);
  font-size: var(--fs-small);
  color: var(--color-text-secondary);
}

.form-status {
  display: none;
  padding: var(--space-md) var(--space-lg);
  border-radius: var(--radius-md);
  font-weight: 600;
  font-size: var(--fs-small);
}
.form-status.is-visible { display: block; }
.form-status--success { background: #E4F1EB; color: var(--color-success); }
.form-status--error { background: #F7E4E2; color: var(--color-error); }

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

/* ---------------------------------------------------------
   CONTACT
   --------------------------------------------------------- */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3xl);
}
.contact-list { display: flex; flex-direction: column; gap: var(--space-lg); margin-top: var(--space-lg); }
.contact-list__item { display: flex; gap: var(--space-md); align-items: flex-start; }
.contact-list__icon {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--color-graphite-900);
  color: var(--color-accent-on-dark);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.contact-list__label { font-size: var(--fs-caption); font-weight: 700; letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--color-text-muted); }
.contact-list__value { margin-top: 2px; font-weight: 700; font-size: 1.0625rem; }
.contact-list__value a:hover { color: var(--color-accent); }

.map-frame {
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: var(--border-hairline);
  aspect-ratio: 4/3;
}
.map-frame iframe { width: 100%; height: 100%; border: 0; }

/* Adresblok onder de kaart. Dit staat er altijd, ook als het kaartje van
   Google om welke reden dan ook niet laadt: dan ziet de bezoeker nog steeds
   het adres met een routeknop in plaats van een leeg vak. */
.locatie-kaart {
  margin-top: var(--space-md);
  padding: var(--space-lg);
  border: var(--border-hairline);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  align-items: flex-start;
}
.locatie-kaart__eyebrow {
  font-family: var(--font-body);
  font-size: var(--fs-caption);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-accent);
}
.locatie-kaart__adres {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--fs-h4, 1.25rem);
  font-weight: 600;
  line-height: 1.35;
  color: var(--color-text-primary);
}
.locatie-kaart__tekst {
  margin: 0;
  font-size: var(--fs-small);
  color: var(--color-text-secondary);
  max-width: 44ch;
}
.locatie-kaart .cluster { margin-top: var(--space-xs); }
@media (max-width: 560px) {
  .locatie-kaart { padding: var(--space-md); }
  .locatie-kaart .cluster { flex-direction: column; align-items: stretch; width: 100%; }
  .locatie-kaart .btn { width: 100%; }
}


@media (max-width: 900px) {
  .contact-grid { grid-template-columns: 1fr; gap: var(--space-2xl); }
}

/* ---------------------------------------------------------
   FOOTER
   --------------------------------------------------------- */
.footer {
  background: var(--color-graphite-900);
  color: var(--color-text-inverse-secondary);
  padding-block: var(--space-3xl) var(--space-lg);
}
.footer__grid {
  display: grid;
  grid-template-columns: 1.4fr 0.8fr 1fr 1fr;
  gap: var(--space-2xl);
  padding-bottom: var(--space-2xl);
  border-bottom: var(--border-hairline-dark);
}
.footer__brand p { margin-top: var(--space-sm); max-width: 32ch; font-size: var(--fs-small); }
.footer__social { display: flex; gap: var(--space-sm); margin-top: var(--space-lg); }
.footer__social a {
  width: 38px; height: 38px;
  border-radius: 50%;
  border: 1px solid rgba(246,244,239,0.2);
  display: flex; align-items: center; justify-content: center;
  transition: background var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out);
}
.footer__social a:hover { background: rgba(246,244,239,0.1); border-color: rgba(246,244,239,0.5); }
.footer__heading {
  font-size: var(--fs-caption);
  font-weight: 700;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--color-text-inverse);
  margin-bottom: var(--space-md);
}
.footer__list { display: flex; flex-direction: column; gap: var(--space-xs); font-size: var(--fs-small); }
.footer__list a:hover { color: var(--color-text-inverse); }
.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  padding-top: var(--space-lg);
  /* Ruimte onder de laatste regel, zodat de zwevende WhatsApp-knop de
     juridische links niet bedekt als je helemaal onderaan de pagina staat. */
  padding-bottom: 4.5rem;
  font-size: var(--fs-caption);
}
.footer__legal { display: flex; gap: var(--space-md); flex-wrap: wrap; }
.footer__legal a:hover { color: var(--color-text-inverse); }

@media (max-width: 900px) {
  .footer__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .footer__grid { grid-template-columns: 1fr; gap: var(--space-xl); }
  .footer__bottom { flex-direction: column; align-items: flex-start; }
}

/* ---------------------------------------------------------
   WHATSAPP FLOATING BUTTON
   --------------------------------------------------------- */
.whatsapp-float {
  position: fixed;
  right: var(--space-md);
  bottom: var(--space-md);
  z-index: var(--z-toast);
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--color-graphite-900);
  color: var(--color-text-inverse);
  border-radius: var(--radius-pill);
  padding: 0.85rem 1.1rem;
  box-shadow: var(--shadow-lg);
  font-size: var(--fs-small);
  font-weight: 700;
  transition: transform var(--dur-base) var(--ease-out), background var(--dur-base) var(--ease-out);
}
.whatsapp-float:hover { transform: translateY(-2px); background: var(--color-graphite-700); }
.whatsapp-float svg { color: #25D366; flex-shrink: 0; }
.whatsapp-float__label { display: none; }
@media (min-width: 560px) {
  .whatsapp-float__label { display: inline; }
}
@media (max-width: 560px) {
  .whatsapp-float { bottom: calc(var(--space-md) + env(safe-area-inset-bottom, 0px)); padding: 0.85rem; }
}

/* ---------------------------------------------------------
   MISC LAYOUT UTILITIES
   --------------------------------------------------------- */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2xl); align-items: center; }
@media (max-width: 900px) { .grid-2 { grid-template-columns: 1fr; gap: var(--space-lg); } }

.stack { display: flex; flex-direction: column; gap: var(--space-md); }
.cluster { display: flex; flex-wrap: wrap; gap: var(--space-sm); align-items: center; }

.page-hero {
  background: var(--color-graphite-900);
  color: var(--color-text-inverse);
  padding-block: var(--space-2xl);
}
.page-hero .eyebrow { color: var(--color-accent-on-dark); }
.page-hero .eyebrow::before { background: var(--color-accent-on-dark); }
.page-hero h1 { margin-top: var(--space-sm); color: var(--color-text-inverse); }
.page-hero p { margin-top: var(--space-md); max-width: 60ch; color: var(--color-text-inverse-secondary); }
.breadcrumbs { display: flex; gap: 8px; align-items: center; font-size: var(--fs-caption); color: var(--color-text-inverse-muted); margin-bottom: var(--space-md); }
.breadcrumbs a:hover { color: var(--color-text-inverse); }

.divider { height: 1px; background: var(--color-border); border: 0; }

.icon-tick {
  color: var(--color-accent);
  flex-shrink: 0;
}

/* Kop boven een formulier: geeft de pagina structuur zonder de rustige
   opbouw van het formulier te verstoren. */
.visually-first {
  font-size: var(--fs-h3);
  margin-bottom: var(--space-lg);
}

/* ---------------------------------------------------------
   MOTION
   Elementen met data-reveal komen rustig omhoog zodra ze in beeld
   scrollen. Bewust klein en snel: 16 pixels en 600ms. Groter dan dat
   voelt als een presentatie in plaats van een website.

   Zonder JavaScript blijft alles gewoon zichtbaar: de beginstand wordt
   pas gezet als het script de klasse js-reveal op <html> plaatst.
   --------------------------------------------------------- */
.js-reveal [data-reveal] {
  opacity: 0;
  transform: translateY(16px);
  transition:
    opacity 600ms var(--ease-out),
    transform 600ms var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}
.js-reveal [data-reveal].is-in {
  opacity: 1;
  transform: none;
}
/* Na de animatie geen will-change laten staan: dat kost geheugen en kan
   op zwakkere telefoons tekst onscherp maken. */
.js-reveal [data-reveal].is-done { will-change: auto; }

/* Wie bewegende beelden liever niet ziet, krijgt ze niet. Geen halve
   maatregel: alles staat meteen op zijn plek. */
@media (prefers-reduced-motion: reduce) {
  .js-reveal [data-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ---------------------------------------------------------
   REDESIGN: DIENSTENRIJEN
   De foto was 1.1fr breed in een rij van vier kolommen, waardoor hij
   als postzegel overbleef naast veel lege ruimte. Detailing verkoopt
   op beeld, dus de foto krijgt de ruimte en de rij ademt minder leeg.
   --------------------------------------------------------- */
@media (min-width: 901px) {
  .service-item {
    grid-template-columns: 64px minmax(0, 1.6fr) minmax(0, 1.5fr) auto;
    gap: var(--space-xl);
    padding-block: var(--space-2xl);
    align-items: center;
  }
  .service-item__media { aspect-ratio: 16 / 10; border-radius: var(--radius-lg); }
}

/* Een koperen streep die bij hover vanaf links doorloopt. Kost niets,
   maakt duidelijk dat de hele rij aanklikbaar is. */
.service-item::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 2px;
  width: 0;
  background: var(--color-accent);
  transition: width 420ms var(--ease-out);
}
@media (hover: hover) {
  .service-item:hover::after { width: 100%; }
}
.service-item:focus-visible::after { width: 100%; }

/* ---------------------------------------------------------
   REDESIGN: GEEN WEES-ITEMS MEER IN DE GRIDS
   De USP-grid had 5 items in een grid dat er 4 per rij plaatste,
   waardoor er eentje alleen op regel twee bleef staan. Met een vast
   aantal kolommen dat op 5 deelt, staat alles netjes.
   --------------------------------------------------------- */
@media (min-width: 1100px) {
  .usp-grid { grid-template-columns: repeat(5, 1fr); gap: var(--space-xl) var(--space-lg); }
}
@media (min-width: 700px) and (max-width: 1099px) {
  .usp-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 699px) {
  .usp-grid { grid-template-columns: 1fr; gap: var(--space-xl); }
}

/* Een fijne lijn boven elke USP maakt van vijf losse alinea's een set. */
.usp-card {
  padding-top: var(--space-md);
  border-top: 2px solid var(--color-border);
  transition: border-color var(--dur-base) var(--ease-out);
}
.usp-card:hover { border-top-color: var(--color-accent); }

/* ---------------------------------------------------------
   PAGINA-HERO MET FOTO
   Dezelfde aanpak als de homepage-hero: de foto van de behandeling
   draagt de kop, een gradient houdt de tekst leesbaar. Zo herkent een
   bezoeker meteen waar de pagina over gaat.
   --------------------------------------------------------- */
.page-hero--foto {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.page-hero--foto .page-hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.page-hero--foto .page-hero__media picture,
.page-hero--foto .page-hero__media img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: 50% 45%;
}
.page-hero--foto .page-hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(100deg,
      rgba(13, 14, 16, 0.95) 0%,
      rgba(13, 14, 16, 0.88) 40%,
      rgba(13, 14, 16, 0.55) 72%,
      rgba(13, 14, 16, 0.38) 100%),
    linear-gradient(to bottom, rgba(13, 14, 16, 0.4) 0%, rgba(13, 14, 16, 0.2) 45%, rgba(13, 14, 16, 0.8) 100%);
}
.page-hero--foto .page-hero__inner { position: relative; z-index: 1; }
.page-hero--foto p { max-width: 58ch; }

@media (max-width: 900px) {
  .page-hero--foto .page-hero__media::after {
    background: linear-gradient(to bottom,
      rgba(13, 14, 16, 0.78) 0%,
      rgba(13, 14, 16, 0.62) 30%,
      rgba(13, 14, 16, 0.94) 100%);
  }
}

/* Knoppen staan standaard op nowrap zodat een label niet halverwege breekt.
   Op smalle schermen wint leesbaarheid het van die regel: een lang label
   duwde de pagina anders breder dan het scherm. */
@media (max-width: 560px) {
  .btn {
    white-space: normal;
    max-width: 100%;
    text-align: center;
  }
}

/* =========================================================
   RICHTING A "STUDIO": OVERRIDES
   De site is nu donker van boven tot onder. Alles hieronder corrigeert
   onderdelen die stilzwijgend een lichte achtergrond aannamen, en zet de
   serif-typografie neer.
   ========================================================= */

/* ---- Header: het enige lichte vlak. Het logo is ontworpen voor licht,
   dus dat blijft zo; tekst erop is expliciet donker. ---- */
.navbar {
  background: rgba(243, 239, 232, 0.94);
  color: var(--color-on-paper);
}
.navbar.is-scrolled { border-bottom-color: rgba(20, 20, 22, 0.12); box-shadow: 0 1px 0 rgba(20,20,22,.06); }
.navbar__links a { color: var(--color-on-paper-secondary); }
.navbar__links a:hover,
.navbar__links a[aria-current="page"] { color: var(--color-on-paper); border-bottom-color: var(--color-accent); }
.navbar__tel { color: var(--color-on-paper-secondary); }
.nav-toggle span { background: var(--color-on-paper); }
.navbar .btn--primary { color: #120800; }

/* ---- Knoppen: donkere tekst op koper leest beter (7:1) dan lichte (3.9:1) ---- */
.btn--primary { color: #120800; }
.btn--primary:hover { background: var(--color-accent-light); border-color: var(--color-accent-light); color: #120800; }
.btn--outline { color: var(--color-text-primary); border-color: var(--color-border-strong); }
.btn--outline:hover { border-color: var(--color-chrome); }
.btn--ghost-light { color: var(--color-text-primary); border-color: rgba(243, 207, 162, 0.35); }
.btn--ghost-light:hover { background: rgba(243, 207, 162, 0.08); border-color: var(--color-chrome); }

/* ---- Serif-typografie: sentence case, geen kapitalen, strakke spatiëring ---- */
h1, h2, h3, .hero__title, .section-heading h2, .cta-section h2, .page-hero h1 {
  font-family: var(--font-display);
  font-weight: 500;
  text-transform: none;
  letter-spacing: var(--ls-tight);
}
h1 em, h2 em, .hero__title em { font-style: italic; color: var(--color-chrome); font-weight: 500; }
.eyebrow { color: var(--color-chrome); }
.eyebrow::before { background: var(--color-accent); }
.section--dark .eyebrow, .dark .eyebrow { color: var(--color-chrome); }

/* Lora is als display-serif iets groter nodig dan een grotesk om dezelfde
   aanwezigheid te hebben; h3 in componenten krijgt de serif ook. */
.service-item__body h3, .usp-card h3, .process__step h3, .pricing-card__name, .faq-item__q,
.locatie-kaart__adres, .review-card__name { font-family: var(--font-display); font-weight: 500; }
.faq-item__q { font-size: 1.2rem; }

/* Nummering en labels in koper, zoals in de mock-up */
.service-item__num, .usp-card__num, .process__step-num, .pricing-card__num {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--color-accent);
}

/* ---- Secties: ritme in grafiettrappen in plaats van wit/gebroken wit ---- */
.section--surface { background: var(--color-graphite-800); }
.section--dark { background: var(--color-graphite-900); }

/* ---- Hero ---- */
.hero__title { font-size: var(--fs-display); line-height: var(--lh-tight); }
.hero__title-kicker { color: var(--color-text-secondary); font-family: var(--font-body); }

/* ---- Kaarten, panelen, formulieren ---- */
.pricing-card, .usp-card, .review-card, .faq-item, .locatie-kaart, .panel-dark, .cta-section {
  background: var(--color-graphite-800);
  border-color: var(--color-border);
}
.pricing-card--helper { background: var(--color-graphite-700); }
.panel-dark { background: var(--color-graphite-700); }
.cta-section { background: var(--color-graphite-700); }
.form-field input, .form-field select, .form-field textarea {
  background: var(--color-graphite-800);
  color: var(--color-text-primary);
  border-color: var(--color-border-strong);
}
.form-field input::placeholder, .form-field textarea::placeholder { color: var(--color-text-muted); }
.form-field select option { background: var(--color-graphite-800); color: var(--color-text-primary); }
.form-note { color: var(--color-text-secondary); }
.divider { background: var(--color-border); }

/* ---- Media: haarlijn om elk beeld, zoals op een studiofoto ---- */
.service-item__media, .media-frame, .business-card img, .over-foto {
  outline: 1px solid var(--color-border);
  outline-offset: -1px;
  border-radius: var(--radius-lg);
}

/* ---- Footer ---- */
.footer { background: var(--color-graphite-900); border-top: 1px solid var(--color-border); }
.footer-woordmerk { font-family: var(--font-display); font-weight: 500; letter-spacing: 0; }
.footer-woordmerk span { color: var(--color-chrome); }
.footer__heading { color: var(--color-chrome); }

/* ---- Mobiel menu op donker ---- */
.mobile-menu { background: var(--color-graphite-900); }
.mobile-menu__links a { color: var(--color-text-primary); border-color: var(--color-border); }

/* ---- WhatsApp-knop: houdt zijn eigen kleur, krijgt een haarlijn ---- */
.whatsapp-float { border: 1px solid var(--color-border); }

/* ---------------------------------------------------------
   DIENSTENBLOKKEN (uit richting B): beeld en tekst verspringen
   per rij op een raster van twaalf kolommen. Geen kaartjes.
   --------------------------------------------------------- */
.dienst-blokken { border-bottom: var(--border-hairline); }
.dienst-blok {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--space-md);
  align-items: center;
  padding-block: var(--space-2xl);
  border-top: var(--border-hairline);
  text-decoration: none;
  color: inherit;
}
.dienst-blok__media {
  grid-column: 1 / 8;
  margin: 0;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--color-graphite-800);
  outline: 1px solid var(--color-border);
  outline-offset: -1px;
}
.dienst-blok__media picture, .dienst-blok__media img {
  display: block; width: 100%; height: 100%; object-fit: cover;
}
.dienst-blok__media img { transition: transform var(--dur-image) var(--ease-out); }
.dienst-blok:hover .dienst-blok__media img,
.dienst-blok:focus-visible .dienst-blok__media img { transform: scale(1.035); }
.dienst-blok__tekst { grid-column: 9 / 13; min-width: 0; }
.dienst-blok:nth-child(even) .dienst-blok__media { grid-column: 6 / 13; order: 2; }
.dienst-blok:nth-child(even) .dienst-blok__tekst { grid-column: 1 / 5; order: 1; }
.dienst-blok__num {
  display: block;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1rem;
  color: var(--color-accent);
  letter-spacing: 0.06em;
}
.dienst-blok h3 {
  font-size: var(--fs-h3);
  margin-top: var(--space-2xs);
  transition: color var(--dur-base) var(--ease-out);
}
.dienst-blok:hover h3 { color: var(--color-chrome); }
.dienst-blok__prijs {
  display: inline-block;
  margin-top: var(--space-xs);
  font-size: var(--fs-caption);
  font-weight: 700;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--color-accent-light);
}
.dienst-blok p { margin-top: var(--space-sm); color: var(--color-text-secondary); max-width: 40ch; }
.dienst-blok__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  margin-top: var(--space-md);
  font-size: var(--fs-caption);
  font-weight: 700;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--color-text-primary);
  padding-bottom: 4px;
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-size: 100% 1px;
  background-position: 0 100%;
  transition: background-size var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out);
}
.dienst-blok__link svg { transition: transform var(--dur-base) var(--ease-out); }
.dienst-blok:hover .dienst-blok__link { color: var(--color-accent-light); }
.dienst-blok:hover .dienst-blok__link svg { transform: translateX(4px); }
.dienst-blok:focus-visible { outline: 2px solid var(--color-accent-light); outline-offset: 4px; }
@media (max-width: 900px) {
  .dienst-blok { grid-template-columns: 1fr; gap: var(--space-md); padding-block: var(--space-xl); }
  .dienst-blok__media, .dienst-blok:nth-child(even) .dienst-blok__media { grid-column: 1 / -1; order: 0; }
  .dienst-blok__tekst, .dienst-blok:nth-child(even) .dienst-blok__tekst { grid-column: 1 / -1; order: 1; }
  .dienst-blok p { max-width: 60ch; }
}

/* ---------------------------------------------------------
   MOBIEL MENU: fullscreen, items gespreid binnenkomend
   --------------------------------------------------------- */
.mobile-menu { gap: var(--space-lg); padding-top: calc(var(--header-h-mobile) + var(--space-lg)); }
.mobile-menu__links a,
.mobile-menu__diensten a,
.mobile-menu__foot {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);
  transition-delay: 0ms;
}
.mobile-menu.is-open .mobile-menu__links a,
.mobile-menu.is-open .mobile-menu__diensten a {
  opacity: 1;
  transform: none;
  transition-delay: calc(60ms + var(--i, 0) * 45ms);
}
.mobile-menu.is-open .mobile-menu__foot { opacity: 1; transform: none; transition-delay: 640ms; }
.mobile-menu__links a {
  font-size: clamp(1.75rem, 6vw, 2.25rem);
  font-weight: 500;
  padding-block: 0.15rem;
}
.mobile-menu__links a[aria-current="page"] { color: var(--color-chrome); }
.mobile-menu__diensten {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2xs) var(--space-md);
  padding-top: var(--space-md);
  border-top: var(--border-hairline);
}
.mobile-menu__kop {
  grid-column: 1 / -1;
  font-size: var(--fs-caption);
  font-weight: 700;
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--color-chrome);
  margin-bottom: var(--space-2xs);
}
.mobile-menu__diensten a {
  font-size: var(--fs-small);
  color: var(--color-text-secondary);
  padding-block: 0.35rem;
}
.mobile-menu__foot { padding-bottom: 4.5rem; }
@media (prefers-reduced-motion: reduce) {
  .mobile-menu__links a, .mobile-menu__diensten a, .mobile-menu__foot { transition: none; }
}

/* ---------------------------------------------------------
   MOBIELE BALK: bellen, WhatsApp, afspraak. Alleen op telefoons.
   --------------------------------------------------------- */
.mobiele-balk {
  display: none;
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: var(--z-nav);
  background: rgba(20, 20, 22, 0.94);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-top: var(--border-hairline);
  padding: 0.5rem var(--space-sm) calc(0.5rem + env(safe-area-inset-bottom, 0px));
  gap: 0.5rem;
}
.mobiele-balk a {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  min-height: 44px;
  font-size: var(--fs-caption);
  font-weight: 700;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--color-text-primary);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
}
.mobiele-balk a.mobiele-balk__primair {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: #120800;
}
@media (max-width: 960px) {
  .mobiele-balk { display: flex; }
  .whatsapp-float { display: none; }
  body { padding-bottom: calc(60px + env(safe-area-inset-bottom, 0px)); }
  .footer__bottom { padding-bottom: var(--space-md); }
}

/* Hero: kop op maximaal drie regels op desktop. */
.hero__content { max-width: 50rem; }
.hero__title { max-width: 12ch; }
@media (max-width: 560px) { .hero__title { max-width: none; } }

/* ---------------------------------------------------------
   BEWEGING (luxe-motion-interactie)
   Alles op transform, opacity en clip-path. Klein, rustig, één systeem.
   Zonder JavaScript (geen .js-reveal) staat alles direct op zijn plek.
   --------------------------------------------------------- */

/* Hero-intro: beeld, kop, tekst, knoppen en notitie in één rustige
   sequentie van ruim een seconde. Puur CSS, dus ook zonder script. */
@keyframes hero-beeld {
  from { opacity: 0; transform: scale(1.06); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes hero-tekst {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}
.hero__media img {
  animation: hero-beeld var(--dur-image) var(--ease-out) both;
}
.hero__title, .hero__sub, .hero__ctas, .hero__note {
  animation: hero-tekst 900ms var(--ease-out) both;
}
.hero__title    { animation-delay: 200ms; }
.hero__sub      { animation-delay: 340ms; }
.hero__ctas     { animation-delay: 460ms; }
.hero__note     { animation-delay: 580ms; }

/* Beeldonthulling: het beeld komt van onder naar boven vrij en zoomt
   licht terug van 1.08 naar 1. Alleen binnen een blok met data-reveal. */
.js-reveal [data-reveal] [data-reveal-media] {
  clip-path: inset(0 0 100% 0);
  transition: clip-path var(--dur-image) var(--ease-out);
}
.js-reveal [data-reveal] [data-reveal-media] img {
  transform: scale(1.08);
  transition: transform var(--dur-image) var(--ease-out);
}
.js-reveal [data-reveal].is-in [data-reveal-media] { clip-path: inset(0 0 0 0); }
.js-reveal [data-reveal].is-in [data-reveal-media] img { transform: scale(1); }
/* Na de onthulling neemt de hover-zoom het over. */
.js-reveal .dienst-blok.is-done:hover .dienst-blok__media img { transform: scale(1.035); }
/* Blokken met een beeldonthulling schuiven zelf niet: het beeld doet het werk. */
.js-reveal .dienst-blok[data-reveal] { transform: none; }

/* Werkwijze: de bovenlijn van elke stap loopt van links in zodra de stap
   in beeld komt, met de nummers als koperen accent. */
.process__step { border-top-color: var(--color-border); }
.process__step::before {
  content: "";
  position: absolute;
  top: -2px; left: 0;
  width: 100%;
  height: 2px;
  background: var(--color-accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-image) var(--ease-out);
  transition-delay: calc(var(--reveal-delay, 0ms) + 200ms);
}
.js-reveal .process__step.is-in::before,
html:not(.js-reveal) .process__step::before { transform: scaleX(1); }

/* Links: onderstreping die van links inloopt. */
.link-arrow, .footer__list a, .navbar__links a {
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-size: 0% 1px;
  background-position: 0 100%;
  transition: background-size var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out);
}
.link-arrow { border-bottom: 0; padding-bottom: 3px; }
.link-arrow:hover, .link-arrow:focus-visible,
.footer__list a:hover, .footer__list a:focus-visible { background-size: 100% 1px; }
.navbar__links a { border-bottom: 0; padding-bottom: 0.3rem; }
.navbar__links a:hover, .navbar__links a:focus-visible,
.navbar__links a[aria-current="page"] { background-size: 100% 1px; background-image: linear-gradient(var(--color-accent), var(--color-accent)); }

/* Knoppen: geen stuiteren, alleen een lichte kleurverschuiving en de pijl. */
.btn { transition: background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); }

/* Wie liever geen beweging ziet: alles staat direct op zijn plek. */
@media (prefers-reduced-motion: reduce) {
  .hero__media img, .hero__title, .hero__sub, .hero__ctas, .hero__note { animation: none; }
  .js-reveal [data-reveal] [data-reveal-media] { clip-path: none; transition: none; }
  .js-reveal [data-reveal] [data-reveal-media] img { transform: none; transition: none; }
  .process__step::before { transform: scaleX(1); transition: none; }
}
.mobile-menu__links { gap: var(--space-sm); }
.mobile-menu__links a { font-size: clamp(1.625rem, 5.5vw, 2rem); }

/* Lijst met vinkjes: icoon en tekst blijven op één regel samen. */
.vink-item { display: flex; align-items: flex-start; gap: 0.6rem; }
.vink-item svg { flex-shrink: 0; margin-top: 0.3em; color: var(--color-accent-light); }
a.pricing-card__name { color: inherit; text-decoration: none; }
a.pricing-card__name:hover { color: var(--color-chrome); }

/* Tekstlinks: minimaal 24 px hoog als tikdoel (WCAG 2.5.8). */
.link-arrow { padding-block: 0.3rem; }
.footer__list { gap: var(--space-2xs); }
.footer__list a { display: inline-block; padding-block: 0.2rem; align-self: flex-start; }
.footer__social a { width: 44px; height: 44px; }
.footer__legal a { display: inline-block; padding: 0.3rem 0.25rem; min-width: 44px; text-align: center; }

/* Prijzenpagina: wat zit erin, per behandeling een rij. */
.prijs-uitleg { margin-top: var(--space-xl); border-top: var(--border-hairline); }
.prijs-uitleg__rij {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: var(--space-md) var(--space-2xl);
  padding-block: var(--space-lg);
  border-bottom: var(--border-hairline);
  align-items: start;
}
.prijs-uitleg__kop { display: grid; gap: var(--space-2xs); }
.prijs-uitleg__num { font-family: var(--font-display); font-style: italic; color: var(--color-accent); font-size: 1rem; letter-spacing: 0.06em; }
.prijs-uitleg__kop h3 { font-size: var(--fs-h4); }
.prijs-uitleg__kop h3 a { color: inherit; }
.prijs-uitleg__kop h3 a:hover { color: var(--color-chrome); }
.prijs-uitleg__prijs { font-family: var(--font-display); font-size: 1.375rem; color: var(--color-accent-light); }
.prijs-uitleg__rij p { max-width: 62ch; }
.prijs-uitleg__rij .link-arrow { grid-column: 2; justify-self: start; }
.prijs-factoren { margin-top: var(--space-2xl); max-width: 72ch; }
.prijs-factoren h3 { margin-bottom: var(--space-md); }
.prijs-factoren li { color: var(--color-text-secondary); }
@media (max-width: 760px) {
  .prijs-uitleg__rij { grid-template-columns: 1fr; gap: var(--space-sm); }
  .prijs-uitleg__rij .link-arrow { grid-column: 1; }
}

/* Dienstenblok zonder foto (zolang er geen eigen foto is): de tekst krijgt
   de volle breedte op het raster, met een koperen haarlijn links als
   rustig beeldaccent. Geen stockfoto als opvulling. */
.dienst-blok--tekst .dienst-blok__tekst,
.dienst-blok--tekst:nth-child(even) .dienst-blok__tekst {
  grid-column: 1 / 9;
  order: 0;
  padding-left: var(--space-lg);
  border-left: 2px solid var(--color-accent);
}
.dienst-blok--tekst p { max-width: 60ch; }
@media (max-width: 900px) {
  .dienst-blok--tekst .dienst-blok__tekst, .dienst-blok--tekst:nth-child(even) .dienst-blok__tekst { grid-column: 1 / -1; }
}

/* Acht behandelingen plus de hulpkaart: de hulpkaart krijgt een eigen,
   volle rij, zodat er geen lege vakken in het raster ontstaan. */
.pricing-card--helper { grid-column: 1 / -1; }
@media (min-width: 761px) {
  .pricing-card--helper {
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-sm) var(--space-xl);
    padding-block: var(--space-lg);
  }
  .pricing-card--helper > span:nth-of-type(3) { margin-top: 0 !important; padding-top: 0 !important; border-top: 0 !important; flex: 1 1 22rem; }
}

/* =========================================================
   HOMEPAGE, OKTOBER 2026
   Na de Impeccable-critique: korter, eerst het werk, elke boodschap een
   keer. Geen labeltjes boven de koppen en geen nummers waar de volgorde
   niets betekent.
   ========================================================= */

/* ---- Ons werk: drie staande foto's op ware grootte ---- */
.werk-sectie { padding-top: var(--space-2xl); }
.werk-sectie__kop {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-sm) var(--space-xl);
  padding-top: var(--space-xl);
  border-top: var(--border-hairline);
}
.werk-sectie__kop p { max-width: 38ch; font-size: var(--fs-small); }
.werk-rij {
  list-style: none;
  margin: var(--space-xl) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-md);
}
.werk-rij__item figure { margin: 0; }
.werk-rij__media {
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: var(--color-graphite-800);
  border-radius: var(--radius-lg);
  outline: 1px solid var(--color-border);
  outline-offset: -1px;
}
.werk-rij__media picture,
.werk-rij__media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.werk-rij__media img { transition: transform var(--dur-image) var(--ease-out); }
@media (hover: hover) {
  .werk-rij__item:hover .werk-rij__media img { transform: scale(1.03); }
}
.werk-rij figcaption {
  margin-top: var(--space-sm);
  font-size: var(--fs-small);
  line-height: 1.45;
  color: var(--color-text-secondary);
}
/* Op de telefoon schuift de rij opzij: elke foto groot, met een stukje
   van de volgende in beeld als hint dat er meer is. */
@media (max-width: 760px) {
  .werk-sectie__rij { padding-inline: 0; }
  .werk-rij {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 78%;
    gap: var(--space-sm);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--gutter);
    padding-inline: var(--gutter);
    padding-bottom: var(--space-2xs);
    scrollbar-width: none;
    overscroll-behavior-x: contain;
  }
  .werk-rij::-webkit-scrollbar { display: none; }
  .werk-rij__item { scroll-snap-align: start; }
}

/* ---- Diensten ---- */
.diensten-voet { margin-top: var(--space-xl); }

/* ---- Prijslijst met stippellijn ---- */
.prijslijst {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: var(--border-hairline);
}
.prijslijst__regel {
  display: flex;
  align-items: baseline;
  gap: var(--space-sm);
  padding-block: var(--space-md);
  border-bottom: var(--border-hairline);
}
.prijslijst__naam {
  font-family: var(--font-display);
  font-size: clamp(1.125rem, 1rem + 0.5vw, 1.375rem);
  font-weight: 500;
  color: var(--color-text-primary);
  text-decoration: none;
  transition: color var(--dur-base) var(--ease-out);
}
.prijslijst__naam:hover, .prijslijst__naam:focus-visible { color: var(--color-chrome); }
.prijslijst__stip {
  flex: 1;
  min-width: var(--space-lg);
  border-bottom: 1px dotted var(--color-border-strong);
  transform: translateY(-0.3em);
}
.prijslijst__prijs {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--color-text-secondary);
}
.prijslijst__meer { display: inline-flex; margin-top: var(--space-lg); }

/* ---- Over Stefan ---- */
.over-blok { align-items: center; }
.over-blok__foto { aspect-ratio: 4 / 5; }
.over-blok__tekst { margin-top: var(--space-lg); }
.over-punten {
  list-style: none;
  margin: var(--space-xl) 0 0;
  padding: 0;
  border-top: var(--border-hairline);
}
.over-punten li {
  padding-block: var(--space-sm);
  border-bottom: var(--border-hairline);
  color: var(--color-text-secondary);
  font-size: var(--fs-small);
  line-height: var(--lh-normal);
}
.over-punten strong { color: var(--color-text-primary); font-weight: 600; }
.over-blok__link { display: inline-flex; margin-top: var(--space-lg); }

/* ---- Reviews als vaste citaten ---- */
.review-citaten {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-xl);
}
.review-citaat {
  margin: 0;
  padding-top: var(--space-md);
  border-top: var(--border-hairline);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}
.review-citaat .review-card__stars { color: var(--color-accent-light); display: inline-flex; gap: 2px; }
.review-citaat blockquote { margin: 0; }
.review-citaat blockquote p {
  font-family: var(--font-display);
  font-size: var(--fs-body-lg);
  line-height: var(--lh-normal);
  color: var(--color-text-primary);
}
.review-citaat figcaption { font-size: var(--fs-small); color: var(--color-text-primary); }
.review-citaat figcaption span { color: var(--color-text-muted); }
.review-citaten__links { margin-top: var(--space-xl); gap: var(--space-md) var(--space-xl); }
@media (max-width: 900px) {
  .review-citaten { grid-template-columns: 1fr; gap: var(--space-lg); }
}

/* ---- Motto als afsluiter ---- */
.motto-sectie { border-top: var(--border-hairline); }
.motto { max-width: 60rem; }
.motto__quote { margin: 0; }
.motto__quote p {
  font-family: var(--font-display);
  font-size: clamp(2rem, 1.2rem + 3.4vw, 4.25rem);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: var(--ls-tight);
  color: var(--color-text-primary);
  text-wrap: balance;
}
.motto__quote em { font-style: italic; color: var(--color-chrome); }
.motto__naam { margin-top: var(--space-lg); color: var(--color-text-muted); font-size: var(--fs-small); }
.motto__acties {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-top: var(--space-2xl);
}
.motto__acties .btn svg { flex-shrink: 0; }
@media (max-width: 560px) {
  .motto__acties { flex-direction: column; align-items: stretch; }
  .motto__acties .btn { justify-content: center; }
}

/* Hero-kop iets kleiner dan --fs-display, zodat hij op desktop in drie
   regels past en de twee knoppen naast elkaar blijven staan. */
.hero .hero__title { font-size: clamp(2.375rem, 1.2rem + 3.5vw, 4.75rem); }
@media (max-width: 960px) {
  .hero .hero__title { font-size: clamp(2.375rem, 1.6rem + 3.6vw, 3.5rem); }
}