/* ==========================================================================
   ADEM — Massagehuis Gent
   Visual reference: Kalm Moments (Awwwards HM, Feb 2025) — palette #C9CBA7 / #E9CDB4,
   wide flared display type (Quiche Sans → Marcellus fallback), italic serif accents.
   ========================================================================== */

:root {
  /* Palette */
  --cream: #F4EFE6;
  --paper: #FAF7F1;
  --sand: #E9CDB4;
  --sand-soft: #F1E3D5;
  --sand-deep: #B98A64;
  --sage: #C9CBA7;
  --sage-soft: #DDDFC6;
  --moss: #66704C;
  --olive: #353B2B;
  --olive-deep: #252A1D;
  --ink: #22251C;
  --ink-soft: #4C5043;
  --on-dark: #F4EFE6;
  --on-dark-soft: rgba(244, 239, 230, 0.76);
  --line: rgba(34, 37, 28, 0.16);
  --line-light: rgba(244, 239, 230, 0.2);
  --focus: var(--olive);

  /* Type */
  --font-display: "quiche-sans", "Quiche Sans", "Marcellus", "Optima", "Candara", serif;
  --font-accent: "Cormorant Garamond", "Cormorant", Georgia, serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Layout */
  --container: 1320px;
  --gutter: clamp(16px, 4vw, 56px);
  /* Space inside every section, between its edge and its content: about the same as under the header
     (.section--first). Tightened 2026-10-21 at Floris's request (was clamp(88px, 12vw, 168px)). */
  --section-y: clamp(40px, 5vw, 72px);
  --header-h: 76px;
  --radius-sm: 12px;
  --radius: 20px;
  --radius-lg: 28px;

  /* Motion */
  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 180ms;
  --dur: 320ms;
  --dur-slow: 900ms;

  /* z-index scale */
  --z-header: 50;
  --z-sticky: 40;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.65;
  font-weight: 400;
  color: var(--ink);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
body.no-scroll { overflow: hidden; }
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3, p, figure, blockquote, dl, dd, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
p { text-wrap: pretty; }
h1, h2, h3 { text-wrap: balance; font-weight: 400; }
em { font-style: normal; }
section[id], [id="contact"] { scroll-margin-top: calc(var(--header-h) + 8px); }

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
  border-radius: 6px;
}

.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}
.skip-link {
  position: fixed; top: 12px; left: 12px; z-index: 200;
  padding: 12px 18px; border-radius: 999px;
  background: var(--ink); color: var(--cream);
  transform: translateY(-160%);
  transition: transform var(--dur) var(--ease-out);
}
.skip-link:focus { transform: none; }

.container {
  width: 100%;
  max-width: calc(var(--container) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.section { padding-block: var(--section-y); }

/* Dark surfaces share a soft film-grain, like the Kalm Moments typography reel */
.ritual, .booking, .site-footer, .cta-band, .mobile-menu {
  --focus: var(--sand);
  background-color: var(--olive-deep);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .055 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  color: var(--on-dark);
}

/* ---------- Type helpers ---------- */
.eyebrow {
  display: inline-flex; align-items: center; gap: 14px;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 22px;
}
.eyebrow::before {
  content: ""; width: 28px; height: 1px; background: currentColor; opacity: 0.6;
}
.eyebrow--light { color: var(--on-dark-soft); }

.h2 {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 5.4vw, 4.9rem);
  line-height: 0.98;
  letter-spacing: 0.005em;
  text-transform: uppercase;
}
.h3 {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 3vw, 2.5rem);
  line-height: 1.05;
  text-transform: uppercase;
}
.h2 em, .h3 em, .hero__title em, .intro__statement em, .footer__claim em {
  font-family: var(--font-accent);
  font-style: italic;
  font-weight: 300;
  text-transform: none;
  letter-spacing: -0.01em;
  font-size: 1.1em;
  line-height: 0.8;
}
.h2 em { color: var(--moss); }
.ritual .h2 em, .booking .h2 em { color: var(--sand); }

.text-link {
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 100% 1px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  padding-bottom: 2px;
  transition: background-size var(--dur) var(--ease-out);
}
.text-link:hover { background-size: 0 1px; background-position: 100% 100%; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px;
  padding: 0 30px;
  border-radius: 999px;
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  border: 1px solid transparent;
  touch-action: manipulation;
  transition: background-color var(--dur) var(--ease-out), color var(--dur) var(--ease-out),
              border-color var(--dur) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.btn:active { transform: scale(0.97); }
.btn--small { min-height: 44px; padding: 0 22px; font-size: 0.75rem; }
.btn--block { width: 100%; }
.btn--sand { background: var(--sand); color: var(--ink); }
.btn--sand:hover { background: #F2DCC8; }
.btn--dark { background: var(--olive-deep); color: var(--cream); }
.btn--dark:hover { background: var(--olive); }
.btn--ghost-light { border-color: rgba(244, 239, 230, 0.55); color: var(--cream); }
.btn--ghost-light:hover { background: rgba(244, 239, 230, 0.12); border-color: var(--cream); }
.btn--ghost-dark { border-color: var(--line); color: var(--ink); }
.btn--ghost-dark:hover { border-color: var(--ink); }
.btn:disabled { opacity: 0.42; cursor: not-allowed; transform: none; }
.btn.is-loading { position: relative; color: transparent; }
.btn.is-loading::after {
  content: ""; position: absolute; width: 20px; height: 20px;
  border: 1.5px solid var(--cream); border-right-color: transparent; border-radius: 50%;
  animation: spin 0.7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.icon-btn {
  display: inline-grid; place-items: center;
  width: 52px; height: 52px;
  border-radius: 50%;
  border: 1px solid var(--line);
  color: var(--ink);
  transition: background-color var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out), color var(--dur);
}
.icon-btn svg { width: 22px; height: 22px; }
.icon-btn:hover { background: var(--ink); color: var(--cream); border-color: var(--ink); }
.icon-btn--light { border-color: var(--line-light); color: var(--on-dark); }
.icon-btn--light:hover { background: var(--cream); color: var(--ink); border-color: var(--cream); }

/* ==========================================================================
   Header
   ========================================================================== */
/* No env(safe-area-inset-top) padding: the pages never draw under the status bar (no viewport-fit=cover), so it
   should be 0, but DuckDuckGo on phones reports the status bar's height anyway, which left an empty strip above
   the logo as tall as the bar (Floris, 2026-10-25). */
.site-header {
  position: fixed; inset: 0 0 auto 0;
  z-index: var(--z-header);
  color: var(--cream);
  --focus: var(--sand);
  transition: background-color var(--dur) var(--ease-out), color var(--dur) var(--ease-out),
              box-shadow var(--dur) var(--ease-out);
}
.site-header.is-scrolled,
.site-header--solid {
  background: rgba(244, 239, 230, 0.9);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  color: var(--ink);
  box-shadow: 0 1px 0 var(--line);
  --focus: var(--olive);
}
/* Menu open: the bar itself fades to the menu's dark colour (the logo changes colour with it) and the menu
   slides out underneath, never across the logo. */
.site-header.menu-open {
  background-color: var(--olive-deep); color: var(--cream); box-shadow: none; --focus: var(--sand);
}
/* While the menu is visible (also during the closing slide): no backdrop-filter, because a filter makes the
   header the containing block for the fixed full-screen menu, which then gets squeezed into the header's height.
   The page scrollbar is hidden then too; the padding keeps the header items in place. */
.site-header.menu-active {
  -webkit-backdrop-filter: none; backdrop-filter: none;
  padding-right: var(--scrollbar-comp, 0px);
}
/* Closing: without its blur the light bar would look see-through for a moment, so it stays solid until
   the menu has slid away (then the usual blurred bar takes over). */
.site-header.is-scrolled.menu-active:not(.menu-open),
.site-header--solid.menu-active:not(.menu-open) { background-color: var(--cream); }

.site-header__inner {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  height: var(--header-h);
  max-width: calc(var(--container) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
  position: relative; z-index: 2;
}

.brand { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; }
.brand__mark { width: 30px; height: 30px; }
.brand__word {
  font-family: var(--font-display);
  font-size: 1.45rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  line-height: 1;
}

.main-nav ul { display: flex; gap: clamp(20px, 2.4vw, 36px); }
.main-nav a {
  position: relative;
  display: inline-flex; align-items: center; min-height: 44px;
  font-size: 0.875rem;
  letter-spacing: 0.02em;
}
.main-nav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 10px; height: 1px;
  background: currentColor; transform: scaleX(0); transform-origin: right;
  transition: transform var(--dur) var(--ease-out);
}
.main-nav a:hover::after,
.main-nav a[aria-current="page"]::after { transform: scaleX(1); transform-origin: left; }
.main-nav a[aria-current="page"] { font-weight: 500; }

.header-actions { display: flex; align-items: center; gap: 14px; }
.lang-switch { display: inline-flex; align-items: center; gap: 2px; font-size: 0.75rem; letter-spacing: 0.14em; }
.lang-switch span { opacity: 0.45; }
.lang-switch a {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 44px; min-height: 44px; padding: 0 6px;
  font-weight: 500; letter-spacing: inherit;
  opacity: 0.75; /* 0.6 was 4.0:1 on the cream bar; 0.75 keeps it above 4.5:1 */
  transition: opacity var(--dur);
}
.lang-switch a[aria-current="true"] { opacity: 1; text-decoration: underline; text-underline-offset: 6px; }
.lang-switch a:hover { opacity: 1; }
.site-header.is-scrolled:not(.menu-open) .header-cta,
.site-header--solid:not(.menu-open) .header-cta { background: var(--olive-deep); color: var(--cream); }

.menu-toggle { display: none; width: 44px; height: 44px; place-items: center; }
.menu-toggle__bars, .menu-toggle__bars::before, .menu-toggle__bars::after {
  display: block; width: 24px; height: 1.5px; background: currentColor; border-radius: 2px;
  transition: transform var(--dur) var(--ease-out), opacity var(--dur-fast);
}
.menu-toggle__bars { position: relative; }
.menu-toggle__bars::before, .menu-toggle__bars::after { content: ""; position: absolute; left: 0; }
.menu-toggle__bars::before { top: -7px; }
.menu-toggle__bars::after { top: 7px; }
.menu-toggle[aria-expanded="true"] .menu-toggle__bars { background: transparent; }
.menu-toggle[aria-expanded="true"] .menu-toggle__bars::before { transform: translateY(7px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] .menu-toggle__bars::after { transform: translateY(-7px) rotate(-45deg); }

.mobile-menu {
  position: fixed; inset: 0; z-index: 1;
  padding: calc(var(--header-h) + 32px) var(--gutter) 40px;
  display: flex; flex-direction: column; justify-content: space-between; gap: 32px;
  overflow-y: auto;
}
.mobile-menu[hidden] { display: none; }
/* Slides down from under the header bar; the links follow one by one. Closing is quicker than opening. */
.mobile-menu {
  --menu-top: calc(var(--header-h) - 1px); /* 1px overlap: no hairline gap */
  clip-path: inset(var(--menu-top) 0 calc(100% - var(--menu-top)) 0);
}
.mobile-menu.is-open { clip-path: inset(var(--menu-top) 0 0 0); }
.mobile-menu li, .mobile-menu > .btn { opacity: 0; transform: translateY(14px); }
.mobile-menu.is-open li, .mobile-menu.is-open > .btn { opacity: 1; transform: none; }
.mobile-menu a:not(.btn) {
  display: block; padding: 10px 0;
  font-family: var(--font-display);
  font-size: clamp(2rem, 9vw, 3rem);
  text-transform: uppercase;
  line-height: 1.1;
  border-bottom: 1px solid var(--line-light);
}
.mobile-menu a[aria-current="page"] { color: var(--sand); }
@media (prefers-reduced-motion: no-preference) {
  .mobile-menu { transition: clip-path 420ms var(--ease-in-out); }
  .mobile-menu.is-open { transition: clip-path 560ms var(--ease-out); }
  .mobile-menu li, .mobile-menu > .btn { transition: opacity 200ms ease-in, transform 200ms ease-in; }
  .mobile-menu.is-open li, .mobile-menu.is-open > .btn {
    transition: opacity 420ms var(--ease-out), transform 520ms var(--ease-out);
    transition-delay: calc(140ms + var(--i, 0) * 45ms);
  }
  .mobile-menu.is-open li:nth-child(2) { --i: 1; }
  .mobile-menu.is-open li:nth-child(3) { --i: 2; }
  .mobile-menu.is-open li:nth-child(4) { --i: 3; }
  .mobile-menu.is-open li:nth-child(5) { --i: 4; }
  .mobile-menu.is-open li:nth-child(6) { --i: 5; }
  .mobile-menu.is-open > .btn { --i: 6; }
}
@keyframes fade-in { from { opacity: 0; } }

@media (max-width: 1023px) {
  .main-nav { display: none; }
  .menu-toggle { display: inline-grid; }
}
/* Laptop/desktop: logo left, actions right, menu exactly in the page's centre. With flex space-between it sat 50px
   left of centre, because the logo is narrower than NL/FR + "Boek nu" (Floris, 2026-10-27). */
@media (min-width: 1024px) {
  .site-header__inner { display: grid; grid-template-columns: 1fr auto 1fr; }
  .brand { justify-self: start; }
  .header-actions { justify-self: end; }
}
@media (max-width: 639px) {
  .header-cta { display: none; }
  .header-actions { gap: 4px; }
  .lang-switch a { min-width: 40px; }
}

/* ==========================================================================
   Hero
   ========================================================================== */
.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  color: var(--cream);
  --focus: var(--sand);
  overflow: hidden;
  background: var(--olive-deep);
}
.hero__img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 32%;
  /* Fades in once loaded (onload in build.js), so a photo that is still downloading never pops in. */
  opacity: 0;
  transition: opacity 0.7s var(--ease-out);
}
.hero__img.is-loaded { opacity: 1; }
.hero__shade {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(23, 25, 17, 0.55) 0%, rgba(23, 25, 17, 0.08) 30%, rgba(23, 25, 17, 0.25) 55%, rgba(23, 25, 17, 0.82) 100%),
    linear-gradient(90deg, rgba(23, 25, 17, 0.35), transparent 60%);
}
.hero__content {
  position: relative;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding-top: calc(var(--header-h) + 40px);
  padding-bottom: clamp(72px, 9vh, 112px);
}
.hero__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin-bottom: 28px; }
.hero__meta .eyebrow { margin: 0; color: rgba(244, 239, 230, 0.92); text-shadow: 0 1px 12px rgba(23, 25, 17, 0.45); }
.rating-chip {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 8px 16px;
  border-radius: 999px;
  background: rgba(244, 239, 230, 0.12);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(244, 239, 230, 0.22);
  font-size: 0.8125rem;
}
.rating-chip svg { width: 15px; height: 15px; color: var(--sand); }
.rating-chip__sep { width: 1px; height: 14px; background: rgba(244, 239, 230, 0.35); }

.hero__title {
  font-family: var(--font-display);
  font-size: clamp(3.3rem, 13.4vw, 11rem);
  line-height: 0.9;
  letter-spacing: -0.005em;
  text-transform: uppercase;
  margin-bottom: clamp(28px, 4vw, 48px);
}
.hero__title .line { display: block; overflow: hidden; padding-bottom: 0.06em; }
.hero__title .line > span { display: block; }
.hero__title em { color: var(--sand); }

.hero__bottom {
  display: grid; gap: 28px;
  align-items: end;
  padding-top: 28px;
  border-top: 1px solid rgba(244, 239, 230, 0.25);
}
.hero__lead { max-width: 44ch; font-size: clamp(1rem, 1.3vw, 1.125rem); color: rgba(244, 239, 230, 0.88); }
.hero__ctas { display: flex; flex-wrap: wrap; gap: 12px; }
/* Phones book from the hero (the header has no "Boek nu" there); from 640px the header books and the hero
   points to the massages, so "book" isn't on the first screen twice (Floris, 2026-11-05, option B). */
@media (max-width: 639px) { .hero__cta-wide { display: none; } }
@media (min-width: 640px) { .hero__cta-phone { display: none; } }
@media (min-width: 900px) {
  .hero__bottom { grid-template-columns: 1fr auto; }
}
/* Tablets, laptops, desktops: exactly one screen tall. On a low screen (1366×657 and the like) the title shrinks with
   the height, so the buttons and the "scroll" hint always fit; taller screens keep the full size (Floris, 2026-10-27). */
@media (min-width: 640px) {
  .hero { height: 100vh; height: 100svh; }
  .hero__title { font-size: clamp(3.3rem, min(13.4vw, calc(52vh - 211px)), 11rem); margin-bottom: clamp(20px, min(4vw, 5vh), 48px); }
  .hero__meta { margin-bottom: clamp(16px, 3.5vh, 28px); }
  .hero__content {
    padding-top: calc(var(--header-h) + clamp(16px, 4vh, 40px));
    padding-bottom: clamp(64px, 9vh, 112px);
  }
}
/* Phones: the hero fills the first screen (svh: the height with the browser bars showing, so it fits on opening)
   with its content centred in the space under the header (Floris, 2026-10-23). */
@media (max-width: 639px) {
  .hero__content {
    justify-content: center;
    padding-top: calc(var(--header-h) + 24px);
    padding-bottom: 48px;
  }
  /* Centred and pared down: rating, eyebrow, title, one button (Floris picked option 3, 2026-10-23) */
  .hero__content { text-align: center; align-items: center; }
  .hero__meta { flex-direction: column; }
  .hero__meta .eyebrow::before { display: none; }
  .hero__title { font-size: clamp(3.6rem, 17vw, 5rem); }
  .hero__lead { display: none; }
  .hero__bottom { justify-items: center; }
}

.hero__scroll {
  position: absolute; left: 50%; bottom: 14px;
  display: flex; align-items: center; gap: 14px;
  min-height: 44px; padding-inline: 8px;
  transform: translateX(-50%);
  font-size: 0.75rem; letter-spacing: 0.3em; text-transform: uppercase;
  color: rgba(244, 239, 230, 0.8);
}
@media (max-width: 899px) { .hero__scroll { display: none; } }
.hero__scroll-line { width: 1px; height: 28px; background: rgba(244, 239, 230, 0.35); position: relative; overflow: hidden; }
.hero__scroll-line::after {
  content: ""; position: absolute; inset: 0; background: var(--cream);
  transform: translateY(-100%);
}

@media (prefers-reduced-motion: no-preference) {
  .hero__img { animation: hero-zoom 2.4s var(--ease-out) both; }
  .hero__title .line > span { animation: rise 1.2s var(--ease-out) both; }
  .hero__title .line:nth-child(2) > span { animation-delay: 0.12s; }
  .hero__meta, .hero__bottom { animation: fade-up 1s 0.45s var(--ease-out) both; }
  /* Phones: the lead text and buttons are the first thing to read and tap; don't keep them waiting */
  @media (max-width: 639px) { .hero__meta, .hero__bottom { animation-duration: 0.7s; animation-delay: 0.15s; } }
  .hero__scroll-line::after { animation: scroll-hint 2.4s var(--ease-in-out) infinite; }
}
@keyframes hero-zoom { from { transform: scale(1.08); } }
@keyframes rise { from { transform: translateY(105%); } }
@keyframes fade-up { from { opacity: 0; transform: translateY(18px); } }
@keyframes scroll-hint { 0% { transform: translateY(-100%); } 60%, 100% { transform: translateY(100%); } }

/* ==========================================================================
   Intro / about
   ========================================================================== */
.intro__statement {
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 4.4vw, 4rem);
  line-height: 1.14;
  letter-spacing: -0.005em;
  max-width: 1180px;
  margin-bottom: clamp(64px, 9vw, 128px);
}
.intro__statement em { color: var(--moss); }
.inline-img {
  display: inline-block;
  width: 1.9em; height: 0.82em;
  border-radius: 999px;
  overflow: hidden;
  vertical-align: -0.06em;
  margin-inline: 0.08em;
}
.inline-img--round { width: 0.82em; }
.inline-img img { width: 100%; height: 100%; object-fit: cover; }

.intro__grid { display: grid; gap: clamp(40px, 6vw, 96px); align-items: center; }
/* Over ons: the title sits inside the grid. Phones keep the old spacing (section-head margin minus the grid gap);
   from 900px the photo spans both rows on the left and stays in view (sticky), title + text on the right. */
.intro__grid > .intro__head { margin-bottom: calc(clamp(48px, 6vw, 80px) - clamp(40px, 6vw, 96px)); }
@media (min-width: 900px) {
  .intro__grid { grid-template-columns: 5fr 6fr; }
  .intro__grid { grid-template-rows: auto 1fr; row-gap: 0; align-items: start; }
  .intro__grid > .intro__head { grid-column: 2; grid-row: 1; margin-bottom: 40px; }
  .intro__grid > .intro__head + .intro__photo { grid-column: 1; grid-row: 1 / 3; position: sticky; top: calc(var(--header-h) + 24px); }
  .intro__grid > .intro__head ~ .intro__text { grid-column: 2; grid-row: 2; }
}
.intro__photo {
  border-radius: 999px 999px var(--radius) var(--radius);
  overflow: hidden;
  aspect-ratio: 4 / 5;
  max-width: 520px;
}
.intro__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.intro__text > p { max-width: 54ch; color: var(--ink-soft); margin-bottom: 1.2em; font-size: clamp(1.0625rem, 1.2vw, 1.1875rem); }
.intro__text strong { color: var(--ink); font-weight: 500; }
.signature {
  font-family: var(--font-accent);
  font-style: italic;
  font-size: 1.6rem !important;
  color: var(--ink) !important;
}
.stats {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;
  margin-top: 40px; padding-top: 32px;
  border-top: 1px solid var(--line);
}
.stats dt {
  font-family: var(--font-accent);
  font-style: italic;
  font-weight: 300;
  font-variant-numeric: lining-nums;
  font-size: clamp(2.8rem, 5vw, 4.2rem);
  line-height: 1;
  color: var(--moss);
}
.stats dd { font-size: 0.875rem; color: var(--ink-soft); margin-top: 8px; }

/* ==========================================================================
   Ritual — horizontal gallery
   ========================================================================== */
.ritual__sticky {
  display: flex; flex-direction: column; justify-content: center;
  gap: clamp(28px, 4vh, 48px);
  padding-block: var(--section-y);
}
.ritual__pin.is-pinned .ritual__sticky {
  position: sticky; top: 0;
  height: 100vh;
  padding-block: calc(var(--header-h) + 8px) 32px;
  overflow: hidden;
}
.ritual__head { display: grid; gap: 20px; align-items: end; }
.ritual__head .h2 { margin: 0; }
.ritual__lead { max-width: 40ch; color: var(--on-dark-soft); }
@media (min-width: 900px) { .ritual__head { grid-template-columns: 1fr auto; } }

.ritual__viewport { overflow: hidden; outline: none; }
.ritual__pin.is-native .ritual__viewport {
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
}
.ritual__pin.is-native .ritual__viewport::-webkit-scrollbar { display: none; }

.ritual__track {
  --edge: max(var(--gutter), calc((100vw - var(--container)) / 2));
  display: flex;
  column-gap: clamp(20px, 2.6vw, 40px);
  width: max-content;
  padding-inline: var(--edge);
  will-change: transform;
}
.ritual-card {
  flex: none;
  width: clamp(250px, 72vw, 360px);
  scroll-snap-align: center;
}
@media (min-width: 900px) {
  .ritual-card { width: clamp(280px, 27vw, 400px); scroll-snap-align: start; }
  .ritual-card:nth-child(even) { margin-top: clamp(16px, 4vh, 48px); }
}
.ritual-card__img {
  aspect-ratio: 4 / 5;
  border-radius: var(--radius);
  overflow: hidden;
  margin-bottom: 20px;
  background: var(--olive);
}
/* Pinned mode: the frame is exactly one screen tall. The photos take whatever
   height is left after the heading, text and controls, so nothing gets clipped
   whatever the window height or font rendering. */
.ritual__pin.is-pinned .ritual__sticky {
  height: 100vh;
  height: 100svh;
  justify-content: flex-start;
  gap: clamp(16px, 3vh, 40px);
}
.ritual__pin.is-pinned .ritual__head,
.ritual__pin.is-pinned .ritual__foot { flex: none; }
.ritual__pin.is-pinned .ritual__viewport { flex: 1 1 auto; min-height: 0; }
.ritual__pin.is-pinned .ritual__track { height: 100%; }
.ritual__pin.is-pinned .ritual-card { display: flex; flex-direction: column; height: 100%; }
.ritual__pin.is-pinned .ritual-card:nth-child(even) { margin-top: 0; padding-top: clamp(12px, 4vh, 48px); }
.ritual__pin.is-pinned .ritual-card > :not(.ritual-card__img) { flex: none; }
.ritual__pin.is-pinned .ritual-card__img {
  flex: 1 1 auto;
  min-height: 0;
  max-height: 460px;
  aspect-ratio: auto;
  margin-bottom: 14px;
}
.ritual-card__img img { width: 100%; height: 100%; object-fit: cover; }
.ritual-card__num {
  font-family: var(--font-accent);
  font-style: italic;
  font-variant-numeric: lining-nums;
  font-size: 1.35rem;
  letter-spacing: 0.04em;
  color: var(--sand);
}
.ritual-card h3 {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.2vw, 2rem);
  text-transform: uppercase;
  line-height: 1.1;
  margin: 6px 0 8px;
}
.ritual-card p { color: var(--on-dark-soft); font-size: 0.9375rem; max-width: 34ch; }

.ritual__foot { display: flex; align-items: center; gap: 24px; }
.ritual__progress { flex: 1; height: 1px; background: var(--line-light); overflow: hidden; }
.ritual__progress span {
  display: block; height: 100%; background: var(--sand);
  transform-origin: left; transform: scaleX(0.04);
}
.ritual__nav { display: flex; gap: 12px; }

/* ==========================================================================
   Treatments
   ========================================================================== */
/* All light page sections are cream (one background across the site); paper is only for cards and tiles.
   Where two cream sections meet, the second drops its top padding so the gap stays one section wide. */
.treatments { background: var(--cream); }
/* Home: massages, "Over ADEM" and reviews are three cream blocks in a row; a thin line at the content's width
   separates them instead of a second section gap (Floris picked this look, 2026-10-30) */
.treatments--teaser + .intro,
.intro--home + .reviews { padding-top: 0; }
.treatments--teaser + .intro > .container,
.intro--home + .reviews > .container {
  background: linear-gradient(var(--line), var(--line)) center top / calc(100% - 2 * var(--gutter)) 1px no-repeat;
  padding-top: var(--section-y);
}
.intro + .space,
.t-page + .treatments { padding-top: 0; }
.section-head {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
  gap: 24px 48px;
  margin-bottom: clamp(48px, 6vw, 80px);
}
.section-head .h2 { margin: 0; }
.section-head__lead { max-width: 42ch; color: var(--ink-soft); }

.treat-grid { display: grid; gap: 56px 28px; }
@media (min-width: 640px) { .treat-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .treat-grid { grid-template-columns: repeat(3, 1fr); } }
/* Home, two cards per row (tablets, narrow windows): show two of the three, not a third one alone on a second row
   (Floris, 2026-10-30). "Bekijk alle behandelingen" right below leads to all six. */
@media (min-width: 640px) and (max-width: 1023px) {
  .treatments--teaser .treat-card:nth-child(n + 3) { display: none; }
}

.treat-card__btn {
  display: grid; gap: 10px;
  width: 100%;
  text-align: left;
  cursor: pointer;
  border-radius: var(--radius);
}
.treat-card__img {
  display: block;
  aspect-ratio: 4 / 5;
  border-radius: var(--radius);
  overflow: hidden;
  margin-bottom: 10px;
  background: var(--sage-soft);
}
/* Phones: one card per row, so a lower photo keeps the treatments page from getting very long (2026-10-27) */
@media (max-width: 639px) { .treat-card__img { aspect-ratio: 4 / 3; } }
.treat-card__img img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 1s var(--ease-out);
}
@media (prefers-reduced-motion: no-preference) { .treat-card__btn:hover .treat-card__img img { transform: scale(1.05); } }
.treat-card__tag {
  font-size: 0.75rem; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--ink-soft);
}
.treat-card__name {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.1vw, 1.9rem);
  line-height: 1.12;
  text-transform: uppercase;
}
.treat-card__short { color: var(--ink-soft); font-size: 0.9688rem; }
.treat-card__meta {
  display: flex; justify-content: space-between; gap: 16px;
  margin-top: 6px; padding-top: 14px;
  border-top: 1px solid var(--line);
  font-size: 0.875rem;
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}
.treat-card__price { color: var(--ink); font-weight: 500; }
.treat-card__more {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 0.75rem; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase;
  min-height: 32px;
}
.treat-card__more svg { width: 18px; height: 18px; transition: transform var(--dur) var(--ease-out); }
.treat-card__btn:hover .treat-card__more svg { transform: translateX(4px); }

/* Home page on phones: one photo card to the treatments page instead of three cards + button */
.treat-teaser { display: none; }
@media (max-width: 639px) {
  .treatments--teaser .treat-grid,
  .treatments--teaser .section-foot { display: none; }
  .treat-teaser {
    position: relative; display: block; overflow: hidden;
    aspect-ratio: 4 / 5; border-radius: var(--radius-lg);
    background: var(--sage-soft); color: var(--cream);
  }
}
.treat-teaser img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease-out); }
@media (prefers-reduced-motion: no-preference) { .treat-teaser:hover img { transform: scale(1.05); } }
.treat-teaser::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(23, 25, 17, 0) 18%, rgba(23, 25, 17, 0.6) 52%, rgba(23, 25, 17, 0.9) 100%);
}
.treat-teaser__body { position: absolute; inset: auto 0 0 0; z-index: 1; display: grid; gap: 8px; padding: 24px; }
.treat-teaser__tag { font-size: 0.75rem; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; opacity: 0.85; }
.treat-teaser__title { font-family: var(--font-display); font-size: clamp(1.75rem, 8vw, 2.1rem); line-height: 1.08; text-transform: uppercase; }
.treat-teaser__row {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  margin-top: 6px; padding-top: 14px;
  border-top: 1px solid rgba(244, 239, 230, 0.3);
  font-size: 0.875rem; font-variant-numeric: tabular-nums;
}
.treat-teaser__arrow {
  width: 48px; height: 48px; flex: none; display: grid; place-items: center;
  border-radius: 50%; background: var(--cream); color: var(--ink);
}
.treat-teaser__arrow svg { width: 20px; height: 20px; transition: transform var(--dur) var(--ease-out); }
.treat-teaser:hover .treat-teaser__arrow svg { transform: translateX(3px); }

/* ==========================================================================
   Prices (treatment detail card, "Extra's & cadeaus" on the treatments page)
   ========================================================================== */
/* The light price card uses the same sand as the treatment detail cards. */
.extras { display: grid; gap: 20px 24px; margin-top: clamp(48px, 6vw, 96px); }
.extras__head .section-head__lead { margin-top: 12px; }
@media (min-width: 900px) { .extras { grid-template-columns: 1fr 1.4fr; align-items: start; } }
.price-card {
  background-color: var(--sand-soft);
  border-radius: var(--radius-lg);
  padding: clamp(24px, 4vw, 48px);
}
.price-card__title {
  font-family: var(--font-display);
  font-size: 1.6rem;
  text-transform: uppercase;
  margin-bottom: 12px;
}
.price-row {
  display: grid;
  grid-template-columns: minmax(0, auto) minmax(12px, 1fr) auto;
  align-items: baseline;
  column-gap: 14px;
  padding-block: 16px;
  border-bottom: 1px solid var(--line);
}
.price-row--stack { grid-template-columns: minmax(0, auto) minmax(12px, 1fr) auto; }
.price-row:last-child { border-bottom: 0; }
.price-row__name { min-width: 0; overflow-wrap: break-word; hyphens: manual; }
.price-row__name small { display: block; font-size: 0.8125rem; color: var(--ink-soft); margin-top: 2px; }
.price-row__dots { border-bottom: 1px dotted currentColor; opacity: 0.35; transform: translateY(-5px); }
.price-row__dur { font-size: 0.875rem; color: var(--ink-soft); white-space: nowrap; font-variant-numeric: tabular-nums; }
.price-row__opts { display: grid; gap: 4px; justify-items: end; }
.price-row__opt { display: flex; align-items: baseline; gap: 14px; }
.price-row__price { font-weight: 500; white-space: nowrap; min-width: 4ch; text-align: right; font-variant-numeric: tabular-nums; }
@media (max-width: 479px) {
  .price-row { grid-template-columns: 1fr auto; column-gap: 16px; }
  .price-row__dots { display: none; }
}

/* ==========================================================================
   Reviews
   ========================================================================== */
.reviews { background: var(--cream); }
/* Score on top (4,9 with stars and count beside it), then every review on one slow endless band, full width, the
   same on all screens (Floris picked option C, 2026-11-10; main.js moves it, a finger or mouse wheel scrolls it) */
.reviews__score { display: grid; grid-template-columns: auto 1fr; column-gap: 20px; align-items: end; margin-bottom: 32px; }
.reviews__score .eyebrow { grid-column: 1 / -1; }
.reviews__big {
  grid-row: span 2;
  font-family: var(--font-display);
  font-size: clamp(4rem, 8vw, 6.5rem);
  line-height: 0.9;
  color: var(--moss);
}
.reviews__stars { letter-spacing: 0.3em; color: var(--sand-deep); margin: 0 0 2px; font-size: 1.1rem; align-self: end; }
.reviews__count { font-size: 0.9375rem; color: var(--ink-soft); align-self: start; }
.review-band { overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain; outline-offset: -3px; }
.review-band::-webkit-scrollbar { display: none; }
.review-band__track { display: flex; gap: 12px; width: max-content; padding: 0 12px; }
@media (min-width: 1024px) { .review-band__track { gap: 20px; padding: 0 20px; } }
.review-card {
  width: min(78vw, 400px); margin: 0; display: flex; flex-direction: column;
  padding: 24px 22px 22px; border-radius: var(--radius-lg); background: var(--paper);
}
.review-card__stars { color: var(--sand-deep); letter-spacing: 0.25em; font-size: 0.9rem; margin: 0 0 12px; }
.review-card blockquote { margin: 0 0 16px; flex: 1; }
.review-card blockquote p { font-family: var(--font-display); font-size: clamp(1.2rem, 1.5vw, 1.35rem); line-height: 1.3; }
.review-card figcaption { font-size: 0.9375rem; }
.review-card figcaption b { font-weight: 600; }
.review-card figcaption span { color: var(--ink-soft); }

/* ==========================================================================
   Booking tile (Cal.com)
   ========================================================================== */
/* Phones/tablets: title, phone + e-mail, the booking tile, then address and hours (contact was two screens down,
   under the calendar; Floris, 2026-10-30). Desktop: title + details on the left, booking tile on the right. */
.booking__grid {
  display: grid; gap: 40px; align-items: start;
  grid-template-areas: "intro" "contact" "tile" "visit" "hours";
}
.booking__intro { grid-area: intro; }
.booking-tile { grid-area: tile; }
.booking__info { grid-area: info; }
@media (max-width: 1023px) {
  .booking__grid { row-gap: 0; }
  .booking__intro { padding-bottom: 32px; }
  .booking-tile { margin: 8px 0 40px; }
  .booking__info { display: contents; }
  .info-block--contact { grid-area: contact; }
  .info-block--visit { grid-area: visit; }
  .info-block--hours { grid-area: hours; }
}
.booking__intro .booking__lead { margin-bottom: 0; }
@media (min-width: 1024px) {
  .booking__grid {
    grid-template-columns: 1fr 1.15fr;
    grid-template-rows: auto 1fr;
    grid-template-areas: "intro tile" "info tile";
    column-gap: clamp(56px, 7vw, 120px);
    row-gap: 40px;
  }
}
.booking__lead { color: var(--on-dark-soft); max-width: 44ch; margin: 24px 0 40px; }
.info-block { padding-block: 22px; border-top: 1px solid var(--line-light); }
.info-block h2,
.info-block h3 {
  font-size: 0.75rem; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--on-dark-soft); margin-bottom: 10px;
}
.info-block p { line-height: 1.8; }
/* Phone + e-mail: one per line, each a 44px tap target with the underline kept right under the text */
.contact-links { display: flex; flex-direction: column; align-items: flex-start; }
.contact-links .text-link { padding-block: 8px; background-origin: content-box; background-clip: content-box; }
.contact-links .text-link:first-child { margin-top: -8px; }
.hours { border-collapse: collapse; width: 100%; max-width: 380px; font-variant-numeric: tabular-nums; }
.hours th, .hours td { padding: 4px 0; text-align: left; font-weight: 400; }
.hours td { text-align: right; }

.booking-tile {
  --focus: var(--olive);
  background: var(--paper);
  color: var(--ink);
  border-radius: var(--radius-lg);
  padding: clamp(20px, 3vw, 32px);
  box-shadow: 0 40px 90px -40px rgba(0, 0, 0, 0.6);
}
/* Cal.com inline embed: Cal.com sets the height itself */
/* Space reserved for Cal.com's calendar before it loads, close to its final height (measured 21 Oct 2026), so the
   address/hours below don't jump down: the list of all events, or one event (--event, via ?t= from a treatment page). */
.cal-inline { width: 100%; min-height: 1230px; overflow: auto; }
.cal-inline--event { min-height: 1195px; }
.cal-inline { position: relative; }
.cal-inline > :not(.cal-loading) { visibility: hidden; }
.cal-inline.is-ready > :not(.cal-loading) { visibility: visible; }
.cal-loading { position: absolute; inset: 24px 0 auto; display: grid; gap: 8px; justify-items: center; text-align: center; color: var(--ink-soft); }
.cal-loading small { max-width: 34ch; font-size: 0.8125rem; }
.cal-inline.is-ready .cal-loading { display: none; }
/* Cal.com didn't load (blocked, offline): no more "loading…", just the sentence pointing to phone and e-mail */
.cal-inline.is-failed { min-height: 0; padding: 24px 0 32px; }
.cal-inline.is-failed .cal-loading { position: static; }
.cal-inline.is-failed .cal-loading span { display: none; }
.cal-inline.is-failed .cal-loading small { font-size: 0.9375rem; color: var(--ink); }
@media (max-width: 639px) {
  .cal-inline { min-height: 1350px; }
  .cal-inline--event { min-height: 1090px; }
}

.bk-demo-note {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px; margin-bottom: 22px;
  border-radius: var(--radius-sm);
  background: var(--sand-soft);
  font-size: 0.8125rem; color: var(--ink-soft);
}
.bk-demo-note svg { width: 18px; height: 18px; flex: none; }
.bk-form fieldset { border: 0; margin-inline: 0; margin-top: 0; padding: 0; min-width: 0; }
.bk-form legend { padding: 0; }
.bk-step { margin-bottom: 24px; }
.bk-label {
  display: flex; align-items: center; gap: 10px;
  font-size: 0.9375rem; font-weight: 600;
  margin-bottom: 12px;
}
.bk-num {
  display: inline-grid; place-items: center;
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--olive-deep); color: var(--cream);
  font-size: 0.75rem; font-weight: 500;
}
.bk-hint { font-size: 0.875rem; color: var(--ink-soft); padding: 12px 0; }

.select-wrap { position: relative; }
.select-wrap::after {
  content: ""; position: absolute; right: 18px; top: 50%;
  width: 8px; height: 8px;
  border-right: 1.5px solid var(--ink); border-bottom: 1.5px solid var(--ink);
  transform: translateY(-70%) rotate(45deg);
  pointer-events: none;
}
.select-wrap select {
  width: 100%; min-height: 54px;
  padding: 0 48px 0 16px;
  border: 1px solid rgba(34, 37, 28, 0.5);
  border-radius: var(--radius-sm);
  background: #fff;
  font: inherit; font-size: 1rem; color: var(--ink);
  -webkit-appearance: none; appearance: none;
  cursor: pointer;
  text-overflow: ellipsis;
}
.select-wrap select:hover { border-color: var(--ink); }
.bk-form textarea {
  display: block;
  width: 100%; min-height: 96px;
  padding: 14px 16px;
  border: 1px solid rgba(34, 37, 28, 0.5);
  border-radius: var(--radius-sm);
  background: #fff;
  font: inherit; font-size: 1rem; line-height: 1.5; color: var(--ink);
  resize: vertical;
}
.bk-form textarea::placeholder { color: var(--ink-soft); opacity: 0.8; }
.bk-form textarea:hover { border-color: var(--ink); }

.chip-row { display: grid; gap: 8px; }
.chip-row--days { grid-template-columns: repeat(3, 1fr); }
.chip-row--times { grid-template-columns: repeat(3, 1fr); }
@media (min-width: 480px) {
  .chip-row--days { grid-template-columns: repeat(6, 1fr); }
  .chip-row--times { grid-template-columns: repeat(4, 1fr); }
}
.chip { position: relative; display: block; cursor: pointer; }
.chip input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: inherit; }
.chip span {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-height: 48px; padding: 6px 4px;
  border: 1px solid rgba(34, 37, 28, 0.5); /* form borders need 3:1 on white */
  border-radius: var(--radius-sm);
  background: #fff;
  text-align: center;
  font-size: 0.9375rem;
  font-variant-numeric: tabular-nums;
  transition: background-color var(--dur-fast), color var(--dur-fast), border-color var(--dur-fast);
}
.chip--day span { min-height: 64px; }
.chip span small { font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-soft); }
.chip span b { font-weight: 500; white-space: nowrap; }
.chip:hover span { border-color: var(--ink); }
.chip input:checked + span { background: var(--olive-deep); border-color: var(--olive-deep); color: var(--cream); }
.chip input:checked + span small { color: var(--on-dark-soft); }
.chip input:focus-visible + span { outline: 2px solid var(--olive); outline-offset: 2px; }
.chip.is-full { cursor: not-allowed; }
.chip.is-full span { background: transparent; color: var(--ink-soft); border-style: dashed; opacity: 0.7; }
.chip.is-full span small { font-size: 0.625rem; }
.chip.is-full:hover span { border-color: rgba(34, 37, 28, 0.22); }

.bk-summary {
  padding: 16px 0 20px; margin-top: 4px;
  border-top: 1px dashed rgba(34, 37, 28, 0.25);
  font-size: 0.9375rem; color: var(--ink-soft);
  min-height: 4.5em;
}

.bk-success { text-align: center; padding: 32px 8px 16px; outline: none; }
.bk-success__icon {
  display: inline-grid; place-items: center;
  width: 68px; height: 68px; border-radius: 50%;
  background: var(--sage); color: var(--olive-deep);
  margin-bottom: 20px;
}
.bk-success__icon svg { width: 30px; height: 30px; }
.bk-success__title { font-family: var(--font-display); font-size: 1.9rem; text-transform: uppercase; line-height: 1.1; margin-bottom: 12px; }
.bk-success__summary { font-weight: 500; margin-bottom: 14px; }
.bk-success__text { color: var(--ink-soft); font-size: 0.9375rem; max-width: 40ch; margin: 0 auto 24px; }

/* ==========================================================================
   FAQ
   ========================================================================== */
.faq { background: var(--cream); }
.faq__grid { display: grid; gap: 48px; }
@media (min-width: 900px) { .faq__grid { grid-template-columns: 1fr 1.5fr; gap: clamp(48px, 7vw, 120px); } }
.faq__list details { border-top: 1px solid var(--line); }
.faq__list details:last-child { border-bottom: 1px solid var(--line); }
.faq__list summary {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  min-height: 72px; padding-block: 18px;
  list-style: none; cursor: pointer;
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 1.8vw, 1.45rem);
  line-height: 1.25;
}
.faq__list summary::-webkit-details-marker { display: none; }
.faq__list summary::after {
  content: ""; flex: none;
  width: 14px; height: 14px;
  background:
    linear-gradient(currentColor, currentColor) center / 100% 1.5px no-repeat,
    linear-gradient(currentColor, currentColor) center / 1.5px 100% no-repeat;
  transition: transform var(--dur) var(--ease-out);
}
.faq__list details[open] summary::after { transform: rotate(45deg); }
.faq__list details p { color: var(--ink-soft); padding-bottom: 24px; max-width: 60ch; }

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer { padding-top: var(--section-y); overflow: hidden; }
.cta-band { padding-top: var(--section-y); }
.cta-band + .site-footer { padding-top: 0; }
.footer__top {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 32px;
  padding-bottom: 56px; border-bottom: 1px solid var(--line-light);
}
.footer__claim {
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 7vw, 6rem);
  line-height: 0.95;
  text-transform: uppercase;
}
.footer__claim em { color: var(--sand); }
.footer__cols {
  display: grid; gap: 32px 24px;
  grid-template-columns: repeat(2, minmax(0, 1fr)); /* minmax: the long e-mail address must not widen column 1 */
  padding-block: 48px;
}
@media (min-width: 900px) { .footer__cols { grid-template-columns: repeat(3, 1fr); } }
.footer__label {
  font-size: 0.75rem; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--on-dark-soft); margin-bottom: 12px;
}
.site-footer p { line-height: 1.8; }

.footer__bottom {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px;
  padding-block: 24px; /* no safe-area inset: see .site-header */
  border-top: 1px solid var(--line-light);
  font-size: 0.8125rem; color: var(--on-dark-soft);
  position: relative;
}
.footer__bottom:first-child { border-top: 0; padding-top: 0; } /* booking page: no address/hours columns above it */

/* ==========================================================================
   Multi-page components
   ========================================================================== */

/* First section on a page without the photo hero: clears the fixed header. Tightened again on 2026-10-27
   (Floris: the gap above "Behandelingen" was too big, twice; was clamp(32px, 4.5vw, 64px), then clamp(24px, 3vw, 40px)). */
.section--first { padding-top: calc(var(--header-h) + clamp(16px, 1.75vw, 24px)); }

/* Homepage intro: statement + link to the about page */
.intro--home .intro__statement { margin-bottom: 32px; }
/* Home "Over ADEM" with Lien (build.js introHome). Below 900px: statement, round photo + name + facts, link.
   From 900px: arched portrait left, statement + one-line bio + link right. */
.intro__portrait { display: none; margin: 0; overflow: hidden; aspect-ratio: 4 / 5; width: 100%; max-width: 440px;
  border-radius: 999px 999px var(--radius) var(--radius); background: var(--sage-soft); }
.intro__portrait img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.intro__bio { display: none; color: var(--ink-soft); max-width: 52ch; margin-bottom: 20px; }
.intro__bio b { color: var(--ink); font-weight: 600; }
.intro__byline { display: flex; align-items: center; gap: 20px; margin-bottom: 28px; }
.intro__avatar { width: 72px; height: 72px; flex: none; border-radius: 50%; object-fit: cover; background: var(--sage-soft); }
.intro__who { display: grid; gap: 3px; min-width: 0; }
.intro__who b { font-weight: 600; }
.intro__who span { color: var(--ink-soft); font-size: 0.9375rem; }
@media (min-width: 900px) {
  .intro__split { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(48px, 6vw, 96px); align-items: center; }
  .intro__portrait, .intro__bio { display: block; }
  .intro__byline { display: none; }
  .intro--home .intro__split .intro__statement { font-size: clamp(1.75rem, 3.1vw, 2.9rem); margin-bottom: 24px; }
}
.intro__more {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 0.8125rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase;
  min-height: 44px;
}
.intro__more svg { width: 18px; height: 18px; }

.section-foot { margin-top: clamp(40px, 5vw, 64px); }
.nowrap { white-space: nowrap; }

/* Two related treatments on a treatment page */
@media (min-width: 1024px) { .treat-grid--two { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 880px; } }


/* Price names link to their treatment page */

/* Treatment page: hero */
/* Treatment page (build.js treatmentMain): one section with two columns of blocks and the price bar.
   Phones/tablets: the columns are display: contents, so the blocks form one list in this order:
   title, photo, Wat is het / Voor wie, Inbegrepen, price card, Goed om te weten (Floris, option A, 2026-11-06).
   From 900px: left title, intro, Wat is het, Voor wie, Inbegrepen; right photo, Goed om te weten; the price bar
   below both. Each column runs on without gaps (Floris, 2026-11-06). No breadcrumb on any width. */
.t-page { background: var(--cream); }
.t-main { display: flex; flex-direction: column; }
.t-main__col { display: contents; }
.t-hero__text { order: 1; }
.t-hero__img { order: 2; margin-top: clamp(40px, 6vw, 96px); align-self: center; }
.t-details__text { order: 3; margin-top: var(--section-y); }
.t-incl { order: 4; margin-top: clamp(40px, 6vw, 96px); }
.t-faq { order: 5; }
.t-incl, .t-faq { width: 100%; max-width: 520px; }
.t-hero__title { margin-bottom: 20px; overflow-wrap: break-word; hyphens: manual; }
/* Phones: long one-word names (SCHOUDERMASSAGE, AROMATHERAPIE-) must fit from 320px up */
@media (max-width: 639px) { .t-hero__title { font-size: clamp(1.6rem, 8vw, 2.4rem); } }
.t-hero__lead { max-width: 44ch; color: var(--ink-soft); font-size: clamp(1.0625rem, 1.3vw, 1.1875rem); }
.t-hero__ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.t-hero__img {
  border-radius: 999px 999px var(--radius) var(--radius);
  overflow: hidden;
  aspect-ratio: 4 / 5;
  max-width: 520px;
  width: 100%;
  background: var(--sage-soft);
}
.t-hero__img img { width: 100%; height: 100%; object-fit: cover; }
.t-details__text .h3, .t-incl .h3, .t-faq .h3 { margin-bottom: 16px; }
/* "Inbegrepen" and the questions are separate flex items, so their margins don't merge: the questions' heading
   margin alone makes the gap (as when they were one block) */
.t-incl .check-list { margin-bottom: 0; }
.t-details__desc { max-width: 54ch; color: var(--ink-soft); font-size: clamp(1.0625rem, 1.2vw, 1.1875rem); margin-bottom: clamp(40px, 5vw, 56px); }
/* The treatment's few questions sit with "Inbegrepen" instead of in a section of their own (declutter, 2026-10-27) */
.t-faq .t-details__faq-title { margin-top: clamp(40px, 5vw, 56px); }
/* Phones/tablets (option A, 2026-11-06): one rhythm, 32px between every block and 12px under every heading
   (USWDS: at least 1.5x more space above a heading than below). List items have 6px padding, so the lists get
   -6px margins and the visible gaps really are equal. The price card comes before the questions. */
@media (max-width: 899px) {
  .t-hero__img, .t-details__text, .t-incl { margin-top: 32px; }
  .t-main .price-bar { order: 5; margin-top: 32px; }
  .t-faq { order: 6; margin-top: 32px; }
  .t-faq .t-details__faq-title { margin-top: 0; }
  .t-main .h3 { margin-bottom: 12px; }
  .t-details__desc { margin-bottom: 32px; }
  .t-main .check-list { margin-top: -6px; margin-bottom: -6px; }
}
@media (min-width: 900px) {
  .t-main { display: grid; grid-template-columns: 6fr 5fr; column-gap: clamp(40px, 6vw, 96px); align-items: start; }
  .t-main__col { display: block; min-width: 0; }
  .t-main .price-bar { grid-column: 1 / -1; }
  /* The photo and the questions keep to the right edge, at the photo's width */
  .t-main__col--right { display: flex; flex-direction: column; align-items: flex-end; }
  .t-hero__img { margin-top: 0; align-self: auto; }
  /* The top button is a quiet outline on desktop; the dark one in the price bar is the main way to book
     (Floris, option 2, 2026-11-06). Scoped to .t-page: the 404 page reuses .t-hero__ctas. */
  .t-page .t-hero__ctas .btn { background: transparent; color: var(--ink); border: 1px solid var(--ink); }
  .t-page .t-hero__ctas .btn:hover { background: var(--olive-deep); color: var(--cream); }
  /* Left column (Floris, 2026-11-06, "a bit smaller"): 32px under the button, 24px between the text blocks, 12px
     under every heading; lists get -6px margins for their 6px item padding, so the visible gaps are exact */
  .t-details__text { margin-top: 32px; }
  .t-incl { margin-top: 24px; max-width: 44ch; }
  .t-faq { margin-top: 48px; }
  .t-faq .t-details__faq-title { margin-top: 0; }
  .t-details__text .h3, .t-incl .h3, .t-faq .h3 { margin-bottom: 12px; }
  .t-details__desc { margin-bottom: 24px; }
  .t-details__text .check-list, .t-incl .check-list { margin-top: -6px; margin-bottom: -6px; }
}
/* Price bar under the explanation: the only place the price is shown (Floris picked it, 2026-10-25).
   A sand card on phones; one row across the full width (text edge to page edge) from 900px. */
.price-bar {
  display: grid; gap: 16px;
  margin-top: clamp(16px, 3vw, 40px);
  background: var(--sand-soft); border-radius: var(--radius-lg);
  padding: 24px 24px 28px;
}
.price-bar .price-card__title { font-size: 1.25rem; margin: 0; }
.price-bar .price-row { padding-block: 12px; }
/* "Boek deze massage" in the price bar (Floris, 2026-11-06): full width at the bottom of the card on phones,
   at the right end of the row from 900px */
.price-bar__btn { justify-self: stretch; margin-top: 4px; }
@media (min-width: 900px) {
  .price-bar { grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 48px; padding: 28px 40px; margin-top: 48px; }
  .price-bar .price-list { display: flex; gap: 40px; justify-content: flex-end; }
  .price-bar .price-row { display: flex; gap: 14px; border: 0; padding: 0; }
  .price-bar .price-row__dots { display: none; }
  .price-bar__btn { justify-self: end; margin-top: 0; }
}
.mini-label {
  font-size: 0.75rem; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--ink-soft); margin: 28px 0 12px;
}
.check-list { margin-bottom: 24px; }
.check-list li { position: relative; padding: 6px 0 6px 26px; }
.check-list li::before {
  content: ""; position: absolute; left: 2px; top: 0.95em;
  width: 12px; height: 6px;
  border-left: 1.5px solid var(--moss); border-bottom: 1.5px solid var(--moss);
  transform: translateY(-60%) rotate(-45deg);
}

/* Privacy page: one reading column, left-aligned with the heading */
.legal { background: var(--cream); }
.legal__body { max-width: 68ch; margin-top: clamp(28px, 4vw, 48px); }
.legal__notice { background: var(--sand-soft); border-radius: var(--radius); padding: 22px 24px; }
.legal__notice h2 { font-size: 0.75rem; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 8px; }
.legal__updated { margin: 24px 0 8px; font-size: 0.875rem; color: var(--ink-soft); }
.legal__part h2 { font-family: var(--font-display); font-weight: 400; text-transform: uppercase; font-size: clamp(1.25rem, 2vw, 1.5rem); line-height: 1.15; margin: clamp(32px, 4vw, 48px) 0 12px; }
.legal__part p, .legal__part li { color: var(--ink-soft); }
.legal__part p + p { margin-top: 12px; }
.legal__part ul { margin-top: 12px; }
.legal__part li { position: relative; padding: 4px 0 4px 22px; }
.legal__part li::before { content: ""; position: absolute; left: 4px; top: 0.95em; width: 6px; height: 6px; border-radius: 50%; background: var(--moss); transform: translateY(-50%); }
.legal a.text-link { color: var(--ink); overflow-wrap: anywhere; }

/* About page: the space */
.space { background: var(--cream); }
.space__photo { border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 4 / 3; }
@media (min-width: 900px) { .space__photo { aspect-ratio: 21 / 9; } }
.space__photo img { width: 100%; height: 100%; object-fit: cover; }

/* Booking page: map, loaded on request */
.map { background: var(--cream); }
.map-box {
  position: relative;
  aspect-ratio: 4 / 5;
  max-width: 100%;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--sage-soft);
}
@media (min-width: 640px) { .map-box { aspect-ratio: 16 / 9; } }
@media (min-width: 1024px) { .map-box { aspect-ratio: 21 / 9; } }
.map-box__placeholder {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px;
  padding: 24px; text-align: center;
}
.map-box__placeholder svg { width: 40px; height: 40px; color: var(--olive); }
.map-box__placeholder p { max-width: 40ch; font-size: 0.875rem; color: var(--ink-soft); }
.map-box iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; filter: grayscale(0.35) sepia(0.12); }

/* ==========================================================================
   Reveal on scroll (only when JS is on and motion is welcome)
   ========================================================================== */
@media (prefers-reduced-motion: no-preference) {
  /* Content stays readable before the animation runs (thumbnails, fast scrolling). */
  .js .reveal {
    opacity: 0.5;
    transform: translateY(28px);
    transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);
    transition-delay: calc(var(--i, 0) * 90ms);
  }
  .js .reveal.is-in { opacity: 1; transform: none; }
}

/* ==========================================================================
   Page transitions: the browser crossfades from one page to the next (View Transitions; browsers
   without it just switch pages). The header is its own layer, so it melts from see-through (home)
   to cream instead of flashing.
   Laptops/desktops only (Floris, 2026-10-21): on phones and tablets the address bar changes the screen height
   between pages, so the crossfade squeezed the page; there pages simply switch.
   ========================================================================== */
@media (prefers-reduced-motion: no-preference) and (min-width: 1024px) and (hover: hover) and (pointer: fine) {
  @view-transition { navigation: auto; }
  ::view-transition-old(root), ::view-transition-new(root) {
    animation-duration: 0.6s; animation-timing-function: var(--ease-in-out);
  }
  .site-header { view-transition-name: site-header; }
  ::view-transition-group(site-header) { animation-duration: 0.6s; }
}