/* Kalma — demo site. Design A "Warm Glow", colours "Wit": white, black and grey only (chosen 2026-11-05, option 1 of mockups/mono/).
   Tokens first; every component below uses them. One container (.wrap) drives all horizontal alignment. */

:root {
  /* colour */
  /* token names are historical (espresso/sand/amber); values are now black, white and light grey */
  --espresso: #141414;       /* near-black: dark bands, dark buttons, panels */
  --espresso-2: #242424;
  --sand: #FFFFFF;           /* white page background */
  --sand-2: #ECECEC;
  --sand-3: #D4D4D4;
  --amber: #EDEDED;          /* light grey accent fill (featured review, active menu item, badges) */
  --amber-soft: #F4F4F4;     /* near-white text/icons on black */
  --amber-ink: #444444;      /* accent text on light: 9.7:1 on --sand */
  --ink: #111111;
  --muted: #5A5A5A;          /* 6.9:1 on --sand */
  --white: #FFFFFF;
  /* brand tints used in overlays, shadows and small accents (one place to re-colour the site) */
  --espresso-rgb: 20,20,20;
  --overlay-rgb: 13,13,13;         /* near-black of --espresso, for gradients over photos */
  --sand-rgb: 255,255,255;
  --amber-rgb: 237,237,237;
  --amber-soft-rgb: 244,244,244;
  --shadow-rgb: 20,20,20;
  --eyebrow: #F4F4F4;              /* small label on the dark hero photo */
  --stars: #444444;
  --row-hover: #FFFFFF;
  --choice-bg: #FFFFFF;
  --danger: #A63A2A;
  --success: #2F6B4F;
  --on-dark-muted: rgba(255,255,255,.78);

  /* type */
  --font: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --fs-body: 1rem;
  --fs-lead: clamp(1.0625rem, .98rem + .3vw, 1.1875rem);
  --fs-h1: clamp(2.5rem, 1.6rem + 4.2vw, 5.25rem);
  --fs-h1-inner: clamp(2.25rem, 1.6rem + 3vw, 4rem);
  --fs-h2: clamp(2rem, 1.45rem + 2.4vw, 3.375rem);
  --fs-h3: 1.375rem;

  /* layout */
  --maxw: 1200px;
  --gutter: max(clamp(16px, 4vw, 40px), env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px)); /* never under a notch in landscape */
  --frame: clamp(8px, 1.2vw, 16px);      /* inset around rounded hero / bands */
  --radius: 22px;
  --radius-lg: 32px;
  --section: clamp(27px, 3.4vw, 44px); /* was 72-120px: Floris wanted the space between sections less than half (10 Nov 2026) */
  --header-h: 84px;

  /* motion */
  --ease: cubic-bezier(.2,.7,.2,1);
  --dur: .25s;

  /* elevation */
  --shadow-1: 0 1px 0 rgba(0,0,0,.03), 0 18px 40px -26px rgba(var(--shadow-rgb),.35);
  --shadow-2: 0 30px 60px -30px rgba(var(--shadow-rgb),.45);

  /* z-index scale */
  --z-header: 40;
  --z-drawer: 60;
  --z-skip: 100;
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 16px); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  font-family: var(--font); font-size: var(--fs-body); line-height: 1.6;
  background: var(--sand); color: var(--ink);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
ul[role="list"], ol[role="list"] { list-style: none; }
h1, h2, h3, h4 { line-height: 1.08; letter-spacing: -.03em; font-weight: 700; text-wrap: balance; overflow-wrap: break-word; hyphens: auto; } /* long NL/FR compound words never push the page wider than a small phone */
p { text-wrap: pretty; }
:focus-visible { outline: 3px solid var(--amber-ink); outline-offset: 3px; border-radius: 6px; }
.hero :focus-visible, .page-hero :focus-visible, .band :focus-visible, .cta :focus-visible, .drawer :focus-visible, .panel--dark :focus-visible, .offer--dark :focus-visible, .notice :focus-visible, .site-header:not(.is-stuck):not(.site-header--solid) :focus-visible { outline-color: var(--amber-soft); }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: fixed; left: 12px; top: -60px; z-index: var(--z-skip); background: var(--white); color: var(--ink); padding: 10px 16px; border-radius: 10px; font-weight: 600; transition: top var(--dur) var(--ease); }
.skip:focus { top: 12px; }

.wrap { width: min(var(--maxw), 100% - 2 * var(--gutter)); margin-inline: auto; }
/* inside a framed (inset) block the container must widen by the frame on both sides to stay aligned with .wrap elsewhere */
.framed .wrap { width: min(var(--maxw), 100% + 2 * var(--frame) - 2 * var(--gutter)); }

.section { padding-block: var(--section); }
.section + .section { padding-top: 0; }
.section--tight { padding-block: calc(var(--section) * .7); }

/* ---------- type helpers ---------- */
.kicker { display: inline-block; font-size: .8125rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--amber-ink); }
.on-dark .kicker, .kicker--light { color: var(--amber-soft); }
.eyebrow { display: inline-flex; align-items: center; gap: 10px; font-size: .8125rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--eyebrow); }
.eyebrow::before { content: ""; width: 28px; height: 1px; background: currentColor; }
.h2 { font-size: var(--fs-h2); margin-top: 10px; }
.lead { font-size: var(--fs-lead); color: var(--muted); }
.muted { color: var(--muted); }

.sec-head { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 16px 48px; align-items: end; margin-bottom: clamp(17px, 2.2vw, 27px); }
.sec-head > :last-child:not(:first-child) { justify-self: end; max-width: 44ch; color: var(--muted); }
.sec-head .h2 { max-width: 18ch; }
.sec-head--center { grid-template-columns: 1fr; text-align: center; justify-items: center; }
.sec-head--center > :last-child:not(:first-child) { justify-self: center; }

/* ---------- buttons ---------- */
.btn {
  --btn-bg: var(--espresso); --btn-fg: var(--white); --dot-bg: var(--white); --dot-fg: var(--espresso);
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  min-height: 52px; padding: 0 24px; border-radius: 999px; border: 1px solid transparent;
  background: var(--btn-bg); color: var(--btn-fg);
  font-weight: 650; font-size: .9375rem; line-height: 1; white-space: nowrap;
  transition: transform var(--dur) var(--ease), background var(--dur) var(--ease), border-color var(--dur), color var(--dur);
  touch-action: manipulation;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0) scale(.98); }
.btn .dot { width: 36px; height: 36px; margin-right: -16px; border-radius: 50%; display: grid; place-items: center; background: var(--dot-bg); color: var(--dot-fg); flex: none; transition: transform var(--dur) var(--ease); }
.btn:hover .dot { transform: translateX(2px); }
.btn .dot svg { width: 16px; height: 16px; }
.btn--light { --btn-bg: var(--white); --btn-fg: var(--ink); --dot-bg: var(--espresso); --dot-fg: var(--white); }
.btn--amber { --btn-bg: var(--amber); --btn-fg: var(--espresso); --dot-bg: var(--espresso); --dot-fg: var(--white); }
.btn--ghost { --btn-bg: rgba(255,255,255,.1); --btn-fg: var(--white); border-color: rgba(255,255,255,.5); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.btn--ghost:hover { --btn-bg: rgba(255,255,255,.2); }
.btn--outline { --btn-bg: transparent; --btn-fg: var(--ink); border-color: var(--sand-3); }
.btn--outline:hover { border-color: var(--ink); }
.btn--sm { min-height: 44px; padding: 0 18px; font-size: .875rem; }
.btn--sm .dot { width: 30px; height: 30px; margin-right: -12px; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; transform: none; }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; }

.link-arrow { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; color: var(--amber-ink); border-bottom: 1.5px solid transparent; padding-block: 6px; transition: border-color var(--dur), gap var(--dur) var(--ease); }
.link-arrow:hover { border-color: currentColor; gap: 12px; }
.link-arrow svg { width: 16px; height: 16px; }

/* ---------- logo ---------- */
.logo { display: inline-flex; align-items: center; gap: 10px; font-weight: 800; font-size: 1.375rem; letter-spacing: -.02em; line-height: 1; min-height: 44px; }
.logo svg { width: 30px; height: 30px; flex: none; }

/* ---------- header ---------- */
.site-header { position: absolute; inset: var(--frame) var(--frame) auto; z-index: var(--z-header); color: var(--white); }
.site-header .bar { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; height: var(--header-h); }
.nav-pill { position: relative; display: flex; gap: 2px; padding: 5px; border-radius: 999px; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.24); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.nav-pill a { position: relative; z-index: 1; display: inline-flex; align-items: center; min-height: 38px; padding: 0 16px; border-radius: 999px; font-size: .875rem; font-weight: 550; transition: background var(--dur); }
.nav-pill a:hover { background: rgba(255,255,255,.16); }
.nav-pill a[aria-current="page"] { color: var(--ink); }
/* the current-page pill is a separate element under the links, pinned to the current link (CSS anchor positioning),
   so a page change can slide it from one link to the next (see page transitions). Browsers without anchor positioning
   get the plain background on the link instead. */
.nav-ind { position: absolute; border-radius: 999px; background: var(--white); pointer-events: none; }
@supports (anchor-name: --a) {
  .nav-pill a[aria-current="page"] { anchor-name: --nav-current; }
  .nav-ind { position-anchor: --nav-current; inset: anchor(top) anchor(right) anchor(bottom) anchor(left); }
}
@supports not (anchor-name: --a) {
  .nav-ind { display: none; }
  .nav-pill a[aria-current="page"] { background: var(--white); }
  .site-header.is-stuck .nav-pill a[aria-current="page"], .site-header--solid .nav-pill a[aria-current="page"] { background: var(--amber); }
}
.header-actions { display: flex; align-items: center; justify-content: flex-end; gap: 10px; }
.lang-switch { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; height: 44px; padding: 0 12px; border-radius: 999px; border: 1px solid rgba(255,255,255,.4); font-size: .8125rem; font-weight: 700; letter-spacing: .04em; transition: background var(--dur), border-color var(--dur); }
.lang-switch:hover { background: rgba(255,255,255,.14); }
.menu-btn { display: none; width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(255,255,255,.4); background: transparent; color: inherit; place-items: center; }
.menu-btn svg { width: 20px; height: 20px; }

/* stuck state (added by JS after scrolling past the hero top) */
.site-header.is-stuck { position: fixed; inset: 0 0 auto; background: rgba(var(--sand-rgb),.92); color: var(--ink); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 1px 0 var(--sand-2); animation: drop .35s var(--ease); }
.site-header.is-stuck .wrap { width: min(var(--maxw), 100% - 2 * var(--gutter)); }
.site-header.is-stuck .bar { height: 72px; }
.site-header.is-stuck .nav-pill { background: var(--white); border-color: var(--sand-2); }
.site-header.is-stuck .nav-pill a:hover { background: var(--sand-2); }
.site-header.is-stuck .nav-pill a[aria-current="page"] { color: var(--ink); background: var(--amber); }
.site-header.is-stuck .nav-ind { background: var(--amber); }
html:has(.site-header.is-stuck) { --nav-ind-bg: var(--amber); }
.site-header.is-stuck .lang-switch, .site-header.is-stuck .menu-btn { border-color: var(--sand-3); }
.site-header.is-stuck .lang-switch:hover { background: var(--white); }
.site-header.is-stuck .btn--light { --btn-bg: var(--espresso); --btn-fg: var(--white); --dot-bg: var(--white); --dot-fg: var(--espresso); }
@keyframes drop { from { transform: translateY(-100%); } to { transform: none; } }
/* pages without a photo hero */
.site-header--solid { position: sticky; top: 0; inset: auto; background: var(--sand); color: var(--ink); box-shadow: 0 1px 0 var(--sand-2); }
.site-header--solid .wrap { width: min(var(--maxw), 100% - 2 * var(--gutter)); }
.site-header--solid .nav-pill { background: var(--white); border-color: var(--sand-2); }
.site-header--solid .nav-pill a:hover { background: var(--sand-2); }
.site-header--solid .nav-pill a[aria-current="page"] { color: var(--ink); background: var(--amber); }
.site-header--solid .nav-ind { background: var(--amber); }
.site-header--solid .lang-switch, .site-header--solid .menu-btn { border-color: var(--sand-3); }
.site-header--solid .btn--light { --btn-bg: var(--espresso); --btn-fg: var(--white); --dot-bg: var(--white); --dot-fg: var(--espresso); }

/* mobile drawer */
.drawer { position: fixed; inset: 0; z-index: var(--z-drawer); display: grid; grid-template-rows: auto 1fr auto; padding: 0 var(--gutter) calc(24px + env(safe-area-inset-bottom)); background: var(--espresso); color: var(--white); visibility: hidden; opacity: 0; transform: translateY(-12px); transition: opacity .3s var(--ease), transform .3s var(--ease), visibility 0s .3s; }
.drawer.is-open { visibility: visible; opacity: 1; transform: none; transition: opacity .3s var(--ease), transform .3s var(--ease); }
.drawer-top { display: flex; align-items: center; justify-content: space-between; height: 72px; }
.drawer nav ul { display: grid; gap: 4px; padding-top: 24px; }
.drawer nav a { display: flex; align-items: center; justify-content: space-between; min-height: 56px; font-size: 1.75rem; font-weight: 700; letter-spacing: -.02em; border-bottom: 1px solid rgba(255,255,255,.1); }
.drawer nav a[aria-current="page"] { color: var(--amber-soft); }
.drawer nav a svg { width: 20px; height: 20px; opacity: .5; }
.drawer-bottom { display: grid; gap: 14px; }
.drawer-bottom .btn { width: 100%; }
.drawer-meta { display: flex; justify-content: space-between; align-items: center; gap: 12px; color: var(--on-dark-muted); font-size: .9375rem; }
.drawer .lang-switch { color: var(--white); }
body.no-scroll { overflow: hidden; }

/* ---------- home hero ---------- */
.hero { padding: var(--frame); min-height: 100svh; display: flex; }
.hero-frame { position: relative; flex: 1; display: flex; flex-direction: column; border-radius: var(--radius-lg); overflow: hidden; color: var(--white); background: var(--espresso); isolation: isolate; }
.hero-frame > picture img, .hero-frame > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 62% 40%; z-index: -2; }
.hero-frame::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(var(--overlay-rgb),.84) 0%, rgba(var(--overlay-rgb),.5) 45%, rgba(var(--overlay-rgb),.08) 78%), linear-gradient(0deg, rgba(var(--overlay-rgb),.62), transparent 45%); }
.hero-body { margin-top: auto; padding-top: calc(var(--header-h) + 48px); padding-bottom: clamp(28px, 4vw, 48px); display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 32px; }
.hero h1 { font-size: var(--fs-h1); letter-spacing: -.035em; line-height: 1.02; max-width: 12ch; margin-top: 18px; }
.hero .lead { color: var(--on-dark-muted); max-width: 46ch; margin-top: 20px; }
.hero .btn-row { margin-top: 30px; }
.proof { display: flex; align-items: center; gap: 14px; margin-top: 36px; }
.proof-avatars { display: flex; }
.proof-avatars span { width: 40px; height: 40px; margin-left: -10px; border-radius: 50%; border: 2px solid var(--white); display: grid; place-items: center; font-size: .8125rem; font-weight: 800; color: var(--espresso); }
.proof-avatars span:first-child { margin-left: 0; }
.proof strong { display: block; font-size: 1.25rem; line-height: 1.15; }
.stars { display: inline-flex; gap: 2px; color: var(--stars); vertical-align: -2px; }
.stars svg { width: 14px; height: 14px; }
.proof small { font-size: .8125rem; color: var(--on-dark-muted); margin-left: 6px; }

.glass-card { width: 330px; display: grid; grid-template-columns: 92px 1fr; gap: 14px; align-items: center; padding: 12px; border-radius: var(--radius); background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.28); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); transition: background var(--dur); }
.glass-card:hover { background: rgba(255,255,255,.2); }
.glass-card img { width: 92px; height: 92px; border-radius: 14px; object-fit: cover; }
.glass-card p { font-size: .875rem; line-height: 1.45; }
.glass-card .more { display: inline-flex; margin-top: 8px; font-size: .8125rem; font-weight: 700; color: var(--eyebrow); }

/* ---------- inner page hero ---------- */
.page-hero { padding: var(--frame); }
.page-hero .hero-frame { min-height: clamp(420px, 62svh, 600px); }
.page-hero .hero-frame::after { background: linear-gradient(90deg, rgba(var(--overlay-rgb),.82) 0%, rgba(var(--overlay-rgb),.5) 55%, rgba(var(--overlay-rgb),.2) 100%), linear-gradient(0deg, rgba(var(--overlay-rgb),.5), transparent 50%); }
.page-hero .hero-body { grid-template-columns: minmax(0, 1fr); }
.page-hero h1 { font-size: var(--fs-h1-inner); max-width: 16ch; }
.page-hero .lead { color: var(--on-dark-muted); max-width: 52ch; margin-top: 16px; }
.page-intro { display: none; } /* phone-only copy of the header intro, see the 720px block */
/* plain header block for text pages (privacy) */
.plain-hero { padding-block: clamp(48px, 7vw, 96px) clamp(32px, 4vw, 56px); border-bottom: 1px solid var(--sand-2); }
.plain-hero h1 { font-size: var(--fs-h1-inner); }

/* ---------- trust strip ---------- */
.trust { border-bottom: 1px solid var(--sand-2); }
.trust ul { display: grid; grid-template-columns: repeat(4, auto); justify-content: space-between; gap: 16px 32px; padding-block: 26px; list-style: none; }
.trust li { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: .9375rem; color: var(--muted); }
.trust svg { width: 22px; height: 22px; color: var(--amber-ink); flex: none; }

/* ---------- explore cards (home) ---------- */
.explore { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.explore-card { position: relative; display: flex; flex-direction: column; border-radius: var(--radius); overflow: hidden; background: var(--white); box-shadow: var(--shadow-1); transition: transform .35s var(--ease), box-shadow .35s var(--ease); }
.explore-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-2); }
.explore-card .media { aspect-ratio: 4 / 3; overflow: hidden; }
.explore-card .media img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease); }
.explore-card:hover .media img { transform: scale(1.05); }
.explore-card .body { min-width: 0; overflow-wrap: break-word; flex: 1; display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto 1fr; column-gap: 12px; padding: 20px 20px 22px; }
.explore-card h3 { font-size: var(--fs-h3); grid-column: 1; }
.explore-card p { grid-column: 1; margin-top: 6px; font-size: .9375rem; color: var(--muted); }
.explore-card .arrow { grid-column: 2; grid-row: 1 / 3; align-self: end; width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; background: var(--sand-2); color: var(--ink); transition: background var(--dur), color var(--dur); }
.explore-card:hover .arrow { background: var(--espresso); color: var(--white); }
.explore-card .arrow svg { width: 18px; height: 18px; }
.explore-card .num { position: absolute; top: 14px; left: 14px; min-width: 34px; height: 34px; padding: 0 10px; border-radius: 999px; display: grid; place-items: center; font-size: .8125rem; font-weight: 700; color: var(--white); background: rgba(var(--overlay-rgb),.35); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border: 1px solid rgba(255,255,255,.3); }

/* ---------- treatment photo cards ---------- */
.cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.t-card { position: relative; display: flex; flex-direction: column; justify-content: flex-end; aspect-ratio: 3 / 4.1; padding: 22px; border-radius: var(--radius); overflow: hidden; color: var(--white); isolation: isolate; }
.t-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform .7s var(--ease); }
.t-card::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgba(var(--overlay-rgb),.9) 0%, rgba(var(--overlay-rgb),.35) 45%, rgba(var(--overlay-rgb),0) 70%); }
.t-card:hover img { transform: scale(1.05); }
.t-card h3 { font-size: var(--fs-h3); letter-spacing: -.01em; }
/* four narrow cards in a row: the longest name ("Ontspanningsmassage") must stay on one line, it was cut mid-word around 1101-1180px */
@media (min-width: 1101px) { .t-card h3 { font-size: clamp(1.0625rem, 1.55vw, var(--fs-h3)); } }
.t-card p { margin-top: 6px; font-size: .875rem; color: var(--on-dark-muted); min-height: 2.9em; }
.t-card .meta { display: flex; justify-content: space-between; align-items: center; margin-top: 16px; padding-top: 14px; border-top: 1px solid rgba(255,255,255,.25); font-weight: 700; font-variant-numeric: tabular-nums; }
.badge { display: inline-flex; align-items: center; height: 28px; padding: 0 12px; border-radius: 999px; font-size: .75rem; font-weight: 700; letter-spacing: .02em; }
.t-card .badge { position: absolute; top: 16px; left: 16px; background: rgba(255,255,255,.18); border: 1px solid rgba(255,255,255,.32); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.badge--amber { background: var(--amber); color: var(--espresso); }

/* ---------- reviews ---------- */
/* desktop: the long featured review on the left, the two short ones stacked beside it (three equal-height columns left the short ones half empty) */
.quotes { display: grid; grid-template-columns: 1.15fr 1fr; gap: 18px; }
.quote { display: flex; flex-direction: column; justify-content: space-between; gap: 28px; padding: 30px; border-radius: var(--radius); background: var(--white); box-shadow: var(--shadow-1); }
.quote blockquote { font-size: 1.125rem; line-height: 1.5; font-weight: 500; }
.quote--feature { grid-row: span 2; background: var(--amber); color: var(--espresso); box-shadow: none; }
.quote--feature blockquote { font-size: clamp(1.25rem, 1.1rem + .6vw, 1.5rem); letter-spacing: -.01em; }
.who { display: flex; align-items: center; gap: 12px; font-size: .875rem; }
.who .avatar { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; background: var(--sand-2); color: var(--amber-ink); flex: none; }
.quote--feature .who .avatar { background: rgba(255,255,255,.35); color: var(--espresso); }
.who b { display: block; }
.who span { display: block; font-size: .8125rem; color: var(--muted); }
.quote--feature .who span { color: rgba(var(--espresso-rgb),.75); }

/* ---------- dark band (about teaser / help) ---------- */
.band { margin-inline: var(--frame); border-radius: var(--radius-lg); background: var(--espresso); color: var(--white); padding-block: var(--section); }
.band .lead, .band p { color: var(--on-dark-muted); }

/* ---------- CTA ---------- */
.cta { position: relative; margin-inline: var(--frame); border-radius: var(--radius-lg); overflow: hidden; color: var(--white); text-align: center; padding-block: clamp(80px, 10vw, 130px); isolation: isolate; }
.cta img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.cta::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(var(--overlay-rgb),.78), rgba(var(--espresso-rgb),.62)); z-index: -1; }
.cta .h2 { margin-inline: auto; max-width: 16ch; }
.cta p { color: var(--on-dark-muted); max-width: 46ch; margin: 18px auto 30px; }
.cta + .site-footer { margin-top: var(--section); }

/* ---------- treatments page ---------- */
.jump { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.jump > span { font-weight: 700; margin-right: 6px; }
.jump-chips { display: contents; } /* desktop/tablet: chips sit in the same row as the label; phones get a list, see the 720px block */
.chip { display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; border-radius: 999px; background: var(--white); border: 1px solid var(--sand-2); font-size: .875rem; font-weight: 600; transition: border-color var(--dur), background var(--dur); }
.chip:hover { border-color: var(--ink); }
.t-list { display: grid; gap: clamp(34px, 3.8vw, 51px); }
.t-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.t-row:nth-child(even) .t-media { order: 2; }
.t-media { position: relative; border-radius: var(--radius); overflow: hidden; aspect-ratio: 5 / 4; }
.t-media img { width: 100%; height: 100%; object-fit: cover; }
.t-media .badge { position: absolute; top: 16px; left: 16px; }
.t-info h2 { font-size: clamp(1.75rem, 1.4rem + 1.4vw, 2.5rem); }
.t-info > p { margin-top: 14px; color: var(--muted); max-width: 54ch; }
.t-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 28px; margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--sand-2); }
.t-facts h3 { font-size: .75rem; letter-spacing: .1em; text-transform: uppercase; color: var(--amber-ink); font-weight: 700; margin-bottom: 8px; }
.t-facts ul { list-style: none; display: grid; gap: 6px; font-size: .9375rem; }
.t-facts li { display: flex; gap: 8px; align-items: flex-start; }
.t-facts li svg { width: 16px; height: 16px; color: var(--amber-ink); flex: none; margin-top: 4px; }
.t-facts p { font-size: .9375rem; }
.options { display: flex; flex-wrap: wrap; gap: 10px; }
.option { display: inline-flex; align-items: baseline; gap: 8px; padding: 10px 14px; border-radius: 14px; background: var(--white); border: 1px solid var(--sand-2); font-variant-numeric: tabular-nums; }
.option b { font-size: 1.0625rem; }
.option span { font-size: .875rem; color: var(--muted); }
.t-info .btn-row { margin-top: 26px; }
.t-photo-name, .t-more { display: none; } /* phones only, see the 720px block */

.help { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 24px 48px; }
.help .h2 { max-width: 20ch; }
.help p { margin-top: 12px; max-width: 54ch; }

/* ---------- prices page ---------- */
.price-table { width: 100%; border-collapse: collapse; background: var(--white); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-1); font-variant-numeric: tabular-nums; }
.price-table caption { text-align: left; }
.price-table th, .price-table td { padding: 18px 24px; text-align: left; vertical-align: middle; }
.price-table thead th { font-size: .75rem; letter-spacing: .1em; text-transform: uppercase; color: var(--espresso); font-weight: 700; background: var(--amber); padding-block: 16px; } /* champagne header bar (option 2, chosen 2026-10-20) so the white card's top edge stands out from the page */
.price-table tbody tr + tr th, .price-table tbody tr + tr td { border-top: 1px solid var(--sand-2); }
.price-table tbody th { font-weight: 700; font-size: 1.0625rem; }
.price-table tbody th small { display: block; font-weight: 500; font-size: .875rem; color: var(--muted); margin-top: 2px; }
.price-table .num { text-align: right; white-space: nowrap; }
.price-table td.price { font-weight: 800; font-size: 1.0625rem; }
.price-table td.act { width: 1%; white-space: nowrap; }
.price-table tbody tr { transition: background var(--dur); }
.price-table tbody tr:hover { background: var(--row-hover); }
.price-list { display: none; } /* phones only, see the 720px block */

.offer-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.offer { display: flex; flex-direction: column; gap: 10px; padding: 30px; border-radius: var(--radius); background: var(--white); box-shadow: var(--shadow-1); }
.offer .icon { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: var(--sand-2); color: var(--amber-ink); margin-bottom: 8px; }
.offer .icon svg { width: 22px; height: 22px; }
.offer h3 { font-size: var(--fs-h3); }
.offer p { color: var(--muted); }
.offer .btn { margin-top: auto; align-self: flex-start; }
.offer .spacer { flex: 1; min-height: 12px; }
.offer--dark { background: var(--espresso); color: var(--white); box-shadow: none; }
.offer--dark p { color: var(--on-dark-muted); }
.offer--dark .icon { background: rgba(255,255,255,.1); color: var(--amber-soft); }

.policies { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 48px; list-style: none; }
.policies li { display: flex; gap: 14px; align-items: flex-start; padding-block: 18px; border-top: 1px solid var(--sand-2); }
.policies li svg { width: 22px; height: 22px; color: var(--amber-ink); flex: none; margin-top: 2px; }

/* ---------- about page ---------- */
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(40px, 6vw, 80px); align-items: center; }
.stack { position: relative; aspect-ratio: 1 / 1.02; }
.stack img { position: absolute; border-radius: var(--radius); object-fit: cover; }
.stack .one { top: 0; left: 0; width: 80%; height: 84%; }
.stack .two { right: 0; bottom: 0; width: 50%; height: 52%; border: 6px solid var(--sand); }
.band .stack .two { border-color: var(--espresso); }
.prose p + p { margin-top: 16px; }
.prose p { max-width: 56ch; }
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-top: 36px; }
.stat { border-top: 1px solid var(--sand-3); padding-top: 16px; }
.band .stat { border-color: rgba(255,255,255,.2); }
.stat b { display: block; font-size: clamp(1.75rem, 1.4rem + 1.2vw, 2.25rem); letter-spacing: -.03em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.stat span { font-size: .875rem; color: var(--muted); }
.band .stat span { color: var(--on-dark-muted); }

.values { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.value { padding: 30px; border-radius: var(--radius); background: var(--white); box-shadow: var(--shadow-1); }
.value .icon { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: var(--sand-2); color: var(--amber-ink); }
.value .icon svg { width: 22px; height: 22px; }
.value h3 { margin-top: 20px; font-size: 1.25rem; }
.value p { margin-top: 8px; color: var(--muted); font-size: .9375rem; }

.team { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.member { display: flex; flex-direction: column; border-radius: var(--radius); overflow: hidden; background: var(--white); box-shadow: var(--shadow-1); }
.member img { width: 100%; aspect-ratio: 1 / 1.05; object-fit: cover; }
.member .body { padding: 20px 22px 24px; }
.member h3 { font-size: 1.25rem; }
.member .role { margin-top: 2px; font-size: .8125rem; font-weight: 700; color: var(--amber-ink); letter-spacing: .02em; }
.member p { margin-top: 10px; font-size: .9375rem; color: var(--muted); }

.gallery { display: grid; grid-template-columns: 1.4fr 1fr 1fr; grid-template-rows: repeat(2, minmax(0, 1fr)); gap: 18px; height: clamp(420px, 46vw, 560px); }
.gallery img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--radius); }
.gallery img:first-child { grid-row: 1 / 3; }
.gallery img:nth-child(4) { grid-column: 2 / 4; }
.after-cta { margin-top: 40px; display: flex; justify-content: center; }

/* ---------- contact page ---------- */
.contact-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 18px; align-items: start; }
.panel { padding: clamp(24px, 3vw, 36px); border-radius: var(--radius); background: var(--white); box-shadow: var(--shadow-1); }
.panel--dark { background: var(--espresso); color: var(--white); box-shadow: none; }
.panel h2 { font-size: clamp(1.5rem, 1.3rem + .8vw, 2rem); }
.panel > p { margin-top: 10px; color: var(--muted); }
.panel--dark > p { color: var(--on-dark-muted); }
.reach { list-style: none; display: grid; gap: 4px; margin-top: 24px; }
.reach li a, .reach li > div { display: flex; align-items: center; gap: 14px; min-height: 56px; padding: 8px 0; border-bottom: 1px solid rgba(255,255,255,.12); }
.reach .ic { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.1); color: var(--amber-soft); flex: none; }
.reach .ic svg { width: 18px; height: 18px; }
.reach small { display: block; font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; color: var(--on-dark-muted); }
.reach b { overflow-wrap: anywhere; }
.reach a:hover b { text-decoration: underline; text-underline-offset: 3px; }
.hours { width: 100%; border-collapse: collapse; margin-top: 24px; font-size: .9375rem; font-variant-numeric: tabular-nums; }
.hours caption { text-align: left; font-weight: 700; margin-bottom: 8px; font-size: 1rem; }
.hours th, .hours td { padding: 9px 0; text-align: left; font-weight: 500; border-bottom: 1px solid rgba(255,255,255,.1); }
.hours td { text-align: right; color: var(--on-dark-muted); white-space: nowrap; padding-left: 12px; }
.hours tr.today th, .hours tr.today td { color: var(--amber-soft); font-weight: 700; }
.hours tr.today th::after { content: attr(data-today); display: inline-block; white-space: nowrap; margin-left: 10px; font-size: .6875rem; padding: 2px 8px; border-radius: 999px; background: rgba(var(--amber-soft-rgb),.18); vertical-align: 2px; }

.getting { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.map { position: relative; margin-top: 28px; border-radius: var(--radius); overflow: hidden; min-height: 360px; background: var(--sand-2); display: grid; place-items: center; text-align: center; }
.map::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(var(--sand-3) 1px, transparent 1px), linear-gradient(90deg, var(--sand-3) 1px, transparent 1px); background-size: 48px 48px; opacity: .55; }
.map > div { position: relative; padding: 24px; display: grid; justify-items: center; gap: 14px; }
.map p { color: var(--muted); max-width: 44ch; font-size: .875rem; }
.map .pin { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: var(--espresso); color: var(--amber-soft); box-shadow: var(--shadow-2); }
.map .pin svg { width: 24px; height: 24px; }
.map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ---------- forms ---------- */
.form { display: grid; gap: 18px; margin-top: 24px; }
.form .row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.field { display: grid; gap: 6px; align-content: start; }
.field label, .field .label { font-weight: 650; font-size: .9375rem; }
.field .req { color: var(--danger); margin-left: 2px; }
.input, .select, .textarea { width: 100%; min-height: 52px; padding: 12px 16px; border-radius: 14px; border: 1.5px solid var(--sand-3); background: var(--white); font-size: 1rem; transition: border-color var(--dur), box-shadow var(--dur); }
.textarea { min-height: 140px; resize: vertical; line-height: 1.5; }
.select { appearance: none; -webkit-appearance: none; padding-right: 44px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%23161514' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 16px center; }
.input:hover, .select:hover, .textarea:hover { border-color: var(--muted); }
.input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--amber-ink); box-shadow: 0 0 0 4px rgba(var(--amber-rgb),.22); }
.field.has-error .input, .field.has-error .select, .field.has-error .textarea { border-color: var(--danger); }
.hint { font-size: .8125rem; color: var(--muted); }
.error { display: none; align-items: center; gap: 6px; font-size: .8125rem; font-weight: 600; color: var(--danger); }
.error svg { width: 14px; height: 14px; flex: none; }
.field.has-error .error, .check.has-error .error { display: flex; }
.check { display: grid; grid-template-columns: auto 1fr; gap: 6px 12px; align-items: start; font-size: .9375rem; }
.check input { width: 22px; height: 22px; margin-top: 1px; accent-color: var(--espresso); cursor: pointer; }
.check a { text-decoration: underline; text-underline-offset: 3px; }
.check .error { grid-column: 2; }
.form-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.error-summary { display: none; padding: 16px 18px; border-radius: 14px; background: #FBEDEA; border: 1.5px solid #E8B9B0; color: var(--danger); }
.error-summary.is-visible { display: block; }
.error-summary h3 { font-size: 1rem; letter-spacing: 0; }
.error-summary ul { margin: 8px 0 0 18px; font-size: .9375rem; }
.error-summary a { text-decoration: underline; }
.form-success { display: none; gap: 10px; padding: 18px 20px; border-radius: 14px; background: #E7F1EB; color: var(--success); font-weight: 600; }
.form-success.is-visible { display: flex; }
.form-success svg { width: 22px; height: 22px; flex: none; }
.btn.is-loading { pointer-events: none; opacity: .8; }

/* ---------- booking ---------- */
.booking { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.stepper { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; list-style: none; counter-reset: step; }
.stepper li { display: flex; align-items: center; gap: 10px; padding-top: 12px; border-top: 3px solid var(--sand-2); font-size: .875rem; font-weight: 650; color: var(--muted); counter-increment: step; }
.stepper li::before { content: counter(step); width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-size: .75rem; background: var(--sand-2); flex: none; }
.stepper li.is-active { border-color: var(--amber-ink); color: var(--ink); }
.stepper li.is-active::before { background: var(--amber); color: var(--espresso); }
.stepper li.is-done { border-color: var(--espresso); color: var(--ink); }
.stepper li.is-done::before { content: "✓"; background: var(--espresso); color: var(--white); }
.step[hidden] { display: none; }
.step { display: grid; gap: 18px; margin-top: 28px; }
.step legend { font-size: 1.25rem; font-weight: 700; letter-spacing: -.02em; margin-bottom: 4px; }
[data-cal] .step legend { margin-bottom: 14px; } /* the legend is the only heading above the treatment cards there */
fieldset { border: 0; min-width: 0; }
.choice-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.choice { position: relative; }
.choice input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.choice label { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; padding: 14px 16px; min-height: 64px; border-radius: 14px; border: 1.5px solid var(--sand-3); background: var(--white); cursor: pointer; transition: border-color var(--dur), background var(--dur); }
.choice label b { font-size: .9375rem; }
.choice label small { grid-column: 1; color: var(--muted); font-size: .8125rem; }
.choice label .p { grid-row: 1 / 3; grid-column: 2; align-self: center; font-weight: 800; font-variant-numeric: tabular-nums; }
.choice input:hover + label { border-color: var(--muted); }
.choice input:checked + label { border-color: var(--espresso); background: var(--choice-bg); box-shadow: inset 0 0 0 1px var(--espresso); }
.choice input:focus-visible + label { outline: 3px solid var(--amber-ink); outline-offset: 2px; }
.seg { display: flex; flex-wrap: wrap; gap: 8px; }
.seg .choice label { min-height: 48px; grid-template-columns: auto; padding: 12px 18px; align-items: center; }
.step-nav { display: flex; justify-content: space-between; gap: 12px; margin-top: 6px; }
.summary { position: sticky; top: 96px; }
.summary dl { display: grid; grid-template-columns: auto 1fr; gap: 10px 16px; margin-top: 18px; font-size: .9375rem; }
.summary dt { color: var(--on-dark-muted); }
.summary dd { text-align: right; font-weight: 600; }
.summary .total { display: flex; justify-content: space-between; align-items: baseline; margin-top: 18px; padding-top: 16px; border-top: 1px solid rgba(255,255,255,.15); font-weight: 800; font-size: 1.25rem; font-variant-numeric: tabular-nums; }
.summary .empty { margin-top: 14px; color: var(--on-dark-muted); font-size: .9375rem; }
.tips { list-style: none; display: grid; gap: 12px; margin-top: 18px; }
.tips li { display: flex; gap: 12px; font-size: .9375rem; color: var(--muted); }
.tips svg { width: 20px; height: 20px; color: var(--amber-ink); flex: none; margin-top: 2px; }
/* online agenda (Cal.com): opens under the treatment cards once one is chosen (main.js) */
.cal-agenda { margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--sand-2); scroll-margin-top: calc(var(--header-h) + 16px); }
.panel .cal-title { font-size: 1.25rem; letter-spacing: -.02em; } /* same size as the "Behandeling" legend above it */
.cal-inline { width: 100%; min-height: 560px; margin-top: 12px; overflow: auto; }
.cal-note { margin-top: 14px; font-size: .875rem; color: var(--muted); }
.success-state { text-align: center; padding: clamp(24px, 5vw, 56px) 8px; display: grid; justify-items: center; gap: 14px; }
.success-state .ic { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; background: #E7F1EB; color: var(--success); }
.success-state .ic svg { width: 30px; height: 30px; }
.success-state p { max-width: 46ch; color: var(--muted); }

/* FAQ */
.faq { display: grid; gap: 10px; max-width: 860px; margin-inline: auto; }
.faq details { border-radius: 16px; background: var(--white); box-shadow: var(--shadow-1); }
.faq summary { display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 64px; padding: 16px 22px; font-weight: 700; cursor: pointer; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary .pm { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--sand-2); flex: none; transition: transform var(--dur) var(--ease); }
.faq summary .pm svg { width: 14px; height: 14px; }
.faq details[open] summary .pm { transform: rotate(45deg); }
.faq details p { padding: 0 22px 20px; color: var(--muted); max-width: 70ch; }

/* ---------- privacy / text page ---------- */
.doc { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: clamp(32px, 5vw, 72px); align-items: start; }
.toc { position: sticky; top: 96px; }
.toc h2 { font-size: .75rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-bottom: 10px; }
.toc ol { list-style: none; display: grid; gap: 2px; counter-reset: toc; }
.toc a { display: flex; gap: 10px; padding: 8px 0; font-size: .9375rem; color: var(--muted); counter-increment: toc; transition: color var(--dur); }
.toc a::before { content: counter(toc, decimal-leading-zero); font-variant-numeric: tabular-nums; color: var(--amber-ink); font-weight: 700; font-size: .8125rem; padding-top: 2px; }
.toc a:hover { color: var(--ink); }
.notice { display: grid; grid-template-columns: auto 1fr; gap: 16px; padding: 22px 24px; border-radius: var(--radius); background: var(--espresso); color: var(--white); }
.notice .ic { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--amber); color: var(--espresso); }
.notice .ic svg { width: 20px; height: 20px; }
.notice h2 { font-size: 1.125rem; letter-spacing: -.01em; }
.notice p { margin-top: 6px; color: var(--on-dark-muted); }
.notice a { color: var(--amber-soft); text-decoration: underline; text-underline-offset: 3px; }
.doc-body { max-width: 72ch; }
.doc-body .updated { margin-top: 20px; font-size: .875rem; color: var(--muted); }
.doc-body section { padding-top: 40px; }
.doc-body h2 { font-size: clamp(1.375rem, 1.2rem + .6vw, 1.75rem); letter-spacing: -.02em; }
.doc-body p { margin-top: 12px; }
.doc-body ul { margin: 12px 0 0 20px; display: grid; gap: 6px; }
.doc-body a { overflow-wrap: anywhere; color: var(--amber-ink); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- 404 ---------- */
.nf { min-height: 60svh; display: grid; place-items: center; text-align: center; padding-block: var(--section); }
.nf .big { font-size: clamp(5rem, 14vw, 10rem); font-weight: 800; letter-spacing: -.06em; line-height: 1; color: var(--sand-3); }
.nf h1 { font-size: var(--fs-h2); margin-top: 8px; }
.nf p { margin: 14px auto 28px; color: var(--muted); max-width: 44ch; }
.nf .btn-row { justify-content: center; }

/* ---------- footer ---------- */
/* a page that ends on a plain section: one section of air above the footer, not two (tablet and desktop) */
@media (min-width: 721px) { main > .section:last-child { padding-bottom: 0; } }
.site-footer { padding-top: var(--section); padding-bottom: 32px; font-size: .9375rem; color: var(--muted); }
.foot-grid { display: grid; grid-template-columns: 1.5fr repeat(4, minmax(0, 1fr)); gap: 32px; align-items: start; }
.foot-grid > * { min-width: 0; overflow-wrap: anywhere; } /* long words/e-mail wrap instead of widening the page at large system text sizes */
.foot-grid h2 { font-size: .8125rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink); line-height: 44px; height: 44px; font-weight: 700; } /* same height as the logo row, so all columns start on one line */
.foot-grid ul { list-style: none; display: grid; gap: 8px; }
.foot-grid a { transition: color var(--dur); }
.foot-grid a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.foot-brand .logo { color: var(--ink); }
.foot-brand p { margin-top: 8px; max-width: 30ch; }
.foot-hours li { display: flex; justify-content: space-between; gap: 12px; font-variant-numeric: tabular-nums; }
.foot-legal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 24px; margin-top: 56px; padding-top: 22px; border-top: 1px solid var(--sand-2); font-size: .875rem; }
.foot-legal a { text-decoration: underline; text-underline-offset: 3px; }
.foot-legal a:hover { color: var(--ink); }
.demo-note { max-width: 70ch; }
.foot-card, .foot-links { display: none; } /* phones only, see the 720px block */

/* ---------- page transitions ----------
   Same-site page changes (Chrome/Edge, Safari 18.2+). Off for people who prefer reduced motion.
   - the rounded header photo morphs from one page's size to the next (clipped to its frame, so the old photo never hangs over the new page)
   - the header stays put; the white "current page" pill slides to the new link
   - the old headline and intro fade out quickly, the new ones rise in one after the other
   - the rest of the page cross-fades over the ivory background (no flash of white or of the old page)
   The header text (eyebrow, title, lead, buttons, rating, glass card) is named per page by build.js (vtStyle: title-home,
   title-treatments ...), with view-transition classes vt-text + vt-d1..5. Two pages never share those names, so the old
   headline always fades out where it is and can never be squeezed into the new one, with or without JavaScript.
   main.js switches the photo morph off when the photo is scrolled out of view, so nothing flies in from above. */
html { background: var(--sand); }
.site-header:not(.is-stuck) { view-transition-name: site-header; }
.hero-frame { view-transition-name: hero-frame; }
.nav-ind { view-transition-name: nav-ind; }
.nav-pill a:nth-of-type(1) { view-transition-name: nav-1; }
.nav-pill a:nth-of-type(2) { view-transition-name: nav-2; }
.nav-pill a:nth-of-type(3) { view-transition-name: nav-3; }
.nav-pill a:nth-of-type(4) { view-transition-name: nav-4; }
.nav-pill a:nth-of-type(5) { view-transition-name: nav-5; }
/* leaving from the sticky bar (scrolled down): the links and the pill go with the old page instead. Otherwise the browser stacks
   the new page's whole header, frosted pill included, on top of them and the links vanish until the page change ends. */
.site-header.is-stuck .nav-pill a, .site-header.is-stuck .nav-ind { view-transition-name: none; }
.vt-calm .hero-frame, .vt-calm .hero-frame *, .vt-calm .page-intro .lead { view-transition-name: none !important; }
/* page being left (class from main.js): the header text gets no name, so it is part of the old photo (and the intro under the
   photo part of the old page) and leaves with it, instead of hanging below the shrinking photo. Without the class it just fades. */
.vt-leaving .hero-body *, .vt-leaving .page-intro .lead { view-transition-name: none !important; }
/* leaving from the open phone menu: the menu is its own layer, so it stays on top of the photo and fades out quickly */
.drawer.is-open { view-transition-name: drawer; }

@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  ::view-transition-group(*) { animation-duration: .5s; animation-timing-function: var(--ease); }
  /* the page itself never moves or resizes, it only fades: when the browser bar changes height between two pages (Samsung
     Internet), the default root morph squeezed the content under the photo up into it (Floris's phone, 10 Nov) */
  ::view-transition-group(root) { animation: none; }
  ::view-transition-old(root) { animation: vt-out .22s ease-out both; }
  ::view-transition-new(root) { animation: vt-in .42s .06s var(--ease) both; }

  /* the current-page pill slides as one clean shape (its two snapshots would stretch differently), in the colour of the new page's header */
  ::view-transition-group(nav-ind) { border-radius: 999px; background: var(--nav-ind-bg, var(--white)); }
  ::view-transition-old(nav-ind), ::view-transition-new(nav-ind) { display: none; }

  ::view-transition-group(hero-frame) { animation-duration: .6s; overflow: hidden; border-radius: var(--radius-lg); }
  ::view-transition-old(hero-frame), ::view-transition-new(hero-frame) { height: 100%; object-fit: cover; animation-duration: .6s; }
  /* the old photo (with its headline in it) is pinned to the top, so the shrinking frame cuts its text off instead of sliding
     it up, and it hands over to the new photo in the first .3s */
  ::view-transition-old(hero-frame) { object-position: 50% 0; animation: vt-out .3s ease-out both; }
  ::view-transition-new(hero-frame) { animation: vt-in .3s ease-out both; }
  ::view-transition-group(drawer) { animation: none; }
  ::view-transition-old(drawer) { animation: vt-out .2s ease-out both; }

  /* header text (names per page, see build.js): the old one fades out where it is, the new one rises in, one part after the other */
  ::view-transition-group(.vt-text) { animation: none; }
  ::view-transition-old(.vt-text) { animation: vt-out .18s ease-out both; }
  ::view-transition-new(.vt-text) { animation: vt-rise .6s var(--ease) both; }
  ::view-transition-new(.vt-d1) { animation-delay: .08s; }
  ::view-transition-new(.vt-d2) { animation-delay: .12s; }
  ::view-transition-new(.vt-d3) { animation-delay: .2s; }
  ::view-transition-new(.vt-d4) { animation-delay: .27s; }
  ::view-transition-new(.vt-d5) { animation-delay: .33s; }
  /* the hot stone card is frosted glass: the browser carries its backdrop blur over to the transition group, where it stayed on
     top of the new page as a blurred box until the whole page change ended */
  ::view-transition-group(.vt-glass) { backdrop-filter: none; -webkit-backdrop-filter: none; }
}
@media (prefers-reduced-motion: no-preference) and (max-width: 960px) {
  /* phones and tablets: the header photo still morphs to its new size, but the content under it (intro, "Ga naar" list, ...)
     only fades in once the photo is nearly in place. Before, the full-screen home photo shrank over text that was already there. */
  /* the photo shrinks a whole screen here: an even curve, not --ease (that did ~80% of the move in the first 50ms, so the page
     looked squeezed upwards) */
  ::view-transition-group(hero-frame) { animation-duration: .7s; animation-timing-function: cubic-bezier(.45,.05,.25,1); }
  ::view-transition-new(root) { animation: vt-in .2s .5s ease-out both; }
  /* Samsung Internet draws the new page's snapshot squeezed to ~80% of its height during the change (everything under the
     photo sat too high, then jumped down when the change ended; Floris's recording, 10 Nov). So the content under the photo is
     not shown in the snapshot at all: the inline script in <head> (build.js) hides it while the photo morphs (vt-arrive) and
     fades the real page in once the change is over (vt-arrived). Without JS the snapshot just fades in as before. */
  .vt-arrive main > :not(.hero):not(.page-hero), .vt-arrive .site-footer { opacity: 0; }
  .vt-arrived main > :not(.hero):not(.page-hero), .vt-arrived .site-footer { animation: vt-in .3s ease-out both; transition: none; }
  /* the intro sits under the photo here: keep it in the page snapshot, so it fades in together with the "Ga naar" list.
     As its own layer, Samsung Internet drew the list over it for a moment, then let it jump back (Floris's recording, 10 Nov). */
  .page-intro .lead { view-transition-name: none !important; }
}
@keyframes vt-out { to { opacity: 0; } }
@keyframes vt-in { from { opacity: 0; } }
@keyframes vt-rise { from { opacity: 0; transform: translateY(16px); } }

/* ---------- reveal ---------- */
.js .reveal { transition: opacity .7s var(--ease), transform .7s var(--ease); }
.js .reveal.is-pending { opacity: 0; transform: translateY(18px); } /* set by main.js only for blocks below the first screen */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
  .js .reveal, .js .reveal.is-pending { opacity: 1; transform: none; }
}

/* ---------- responsive ---------- */
@media (max-width: 1100px) {
  .cards, .team { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .foot-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .foot-brand { grid-column: 1 / -1; }
  .trust ul { grid-template-columns: repeat(2, auto); justify-content: start; column-gap: 48px; }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 960px) {
  :root { --header-h: 72px; }
  .nav-pill, .header-actions .btn, .header-actions .lang-switch { display: none; }
  .site-header .bar { grid-template-columns: 1fr auto; }
  .menu-btn { display: grid; }
  .hero-body { grid-template-columns: minmax(0, 1fr); }
  .glass-card { width: min(360px, 100%); }
  .split, .booking, .contact-grid, .doc { grid-template-columns: minmax(0, 1fr); }
  .quotes { grid-template-columns: 1fr 1fr; }
  .quote--feature { grid-column: 1 / -1; grid-row: auto; }
  .t-row { grid-template-columns: minmax(0, 1fr); }
  .t-row:nth-child(even) .t-media { order: 0; }
  .offer-grid, .values, .getting { grid-template-columns: minmax(0, 1fr); }
  .offer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .offer-grid .offer:last-child { grid-column: 1 / -1; }
  .help { grid-template-columns: minmax(0, 1fr); }
  .summary, .toc { position: static; }
  .toc { display: none; }
  .stack { max-width: 560px; }
}
@media (max-width: 720px) {
  .sec-head { grid-template-columns: minmax(0, 1fr); }
  .sec-head > :last-child:not(:first-child) { justify-self: start; }
  .sec-head--center > :last-child:not(:first-child) { justify-self: center; }
  .quotes, .policies, .offer-grid, .form .row-2, .choice-grid { grid-template-columns: minmax(0, 1fr); }
  .offer-grid .offer:last-child { grid-column: auto; }
  .gallery { grid-template-columns: 1fr 1fr; grid-template-rows: auto; height: auto; }
  .gallery img { aspect-ratio: 1 / 1; height: auto; }
  .gallery img:first-child { grid-row: auto; grid-column: 1 / -1; aspect-ratio: 16 / 10; }
  .gallery img:nth-child(4) { grid-column: 1 / -1; aspect-ratio: 16 / 10; }
}
@media (max-width: 960px) {
  /* text sits over the whole photo on narrow screens: darken top-to-bottom instead of left-to-right */
  .hero-frame::after, .page-hero .hero-frame::after { background: linear-gradient(0deg, rgba(var(--overlay-rgb),.9) 0%, rgba(var(--overlay-rgb),.72) 45%, rgba(var(--overlay-rgb),.35) 75%, rgba(var(--overlay-rgb),.45) 100%); }
}
@media (max-width: 960px) {
  /* Home hero on phones and tablets (option A, chosen 2026-10-19): like desktop, the photo fills the rounded frame;
     only label, headline and the two buttons sit at the bottom. Lead text, rating row and hot stone card stay desktop-only.
     Height = the visible screen: --app-h is measured by main.js (window.innerHeight; right in in-app browsers too),
     minus the bottom safe area, so the frame ends above Android navigation buttons / the iPhone home bar
     when the browser draws the page behind them. 100svh is the fallback before JS runs. */
  .hero { min-height: 100vh; min-height: 100svh; min-height: calc(var(--app-h, 100svh) - env(safe-area-inset-bottom, 0px)); }
  .hero .hero-frame > img { position: absolute; inset: 0; height: 100%; z-index: -2; object-position: 57% 40%; }
  .hero .hero-frame::after { inset: 0; height: auto; z-index: -1; background: linear-gradient(180deg, rgba(var(--overlay-rgb),.45) 0%, rgba(var(--overlay-rgb),0) 18%, rgba(var(--overlay-rgb),0) 38%, rgba(var(--overlay-rgb),.62) 62%, rgba(var(--overlay-rgb),.9) 100%); }
  .hero .hero-body { position: static; margin-top: auto; padding-top: calc(var(--header-h) + 24px); padding-bottom: 24px; }
  .hero .lead, .hero .proof, .hero .glass-card { display: none; }
  .hero h1 { margin-top: 14px; }
  .hero .btn-row { margin-top: 26px; gap: 10px; }
}
@media (min-width: 561px) and (max-width: 960px) {
  /* tablets: a little more air around the copy */
  .hero .hero-body { padding-bottom: 40px; }
}
@media (min-width: 561px) and (max-width: 1100px) {
  /* three explore cards side by side: arrow goes under the text so long titles fit */
  .explore-card .body { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr auto; }
  .explore-card .arrow { grid-column: 1; grid-row: 3; justify-self: end; margin-top: 14px; }
}
@media (max-width: 720px) {
  /* Sub-page headers on phones (option 1, chosen 2026-10-19): the photo gets room and carries only the title;
     the intro text sits just below the photo on the page background. Colours come from the tokens, so any palette fits. */
  .page-hero .hero-frame { min-height: clamp(320px, 50svh, 440px); }
  .page-hero .lead { display: none; }
  .page-hero .hero-frame::after { background: linear-gradient(180deg, rgba(var(--overlay-rgb),.45) 0%, rgba(var(--overlay-rgb),0) 22%, rgba(var(--overlay-rgb),0) 45%, rgba(var(--overlay-rgb),.8) 100%); }
  .page-hero h1 { margin-top: 0; }
  .page-intro { display: block; padding-top: 22px; }
  .page-intro .lead { max-width: 46ch; } /* the intro sits here on phones; build.js names it like the title, so it animates with it */
  /* One line on phones (option 2 of mockups/header-align/, chosen 2026-10-21): logo, the text in the header photo and all page
     content start 24px from the screen edge. The header on the photo lines up with the page instead of with the photo frame. */
  :root { --gutter: max(24px, env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px)); }
  .site-header:not(.is-stuck):not(.site-header--solid) .wrap { width: min(var(--maxw), 100% + 2 * var(--frame) - 2 * var(--gutter)); }
  /* "Ga naar" on the treatments page (option 2 of mockups/jump-nav/, chosen 2026-10-21): a white card with numbered rows */
  .jump { display: block; }
  .jump > span { display: block; margin: 0 0 12px; font-size: .8125rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--amber-ink); }
  .jump-chips { display: block; counter-reset: t; background: var(--white); border: 1px solid var(--sand-2); border-radius: var(--radius); padding: 4px 20px; box-shadow: var(--shadow-1); }
  .jump .chip { counter-increment: t; display: flex; align-items: center; gap: 14px; min-height: 50px; padding: 0; background: none; border: 0; border-bottom: 1px solid var(--sand-2); border-radius: 0; font-size: 1rem; }
  .jump .chip:last-child { border-bottom: 0; }
  .jump .chip::before { content: counter(t, decimal-leading-zero); width: 22px; font-size: .75rem; font-weight: 700; letter-spacing: .04em; color: var(--amber-ink); font-variant-numeric: tabular-nums; }
  .jump .chip::after { content: ""; margin-left: auto; width: 7px; height: 7px; border-right: 1.5px solid var(--muted); border-bottom: 1.5px solid var(--muted); transform: translateY(-2px) rotate(45deg); }
}
@media (max-width: 720px) {
  /* Shorter phone pages (option 2 of mockups/phone-length/ for all three, chosen 2026-10-21) */

  /* treatments: a white card per treatment with the name on the photo (.t-photo-name; the real h2 stays for screen readers).
     With JS the text is cut to 3 lines and "what it does" / "ideal for" fold away behind .t-more; prices and button stay visible. */
/* homepage treatments (option 1 of mockups/home-treatments/): one swipe row on phones, the next card peeks in */
  .cards--swipe { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); scroll-padding-inline: var(--gutter); scrollbar-width: none; }
  .cards--swipe::-webkit-scrollbar { display: none; }
  .cards--swipe .t-card { flex: 0 0 72%; scroll-snap-align: start; aspect-ratio: 3 / 3.7; }
  .cards--swipe .t-card h3 { font-size: clamp(.8125rem, 4.2vw, 1.25rem); } /* sized so "Ontspanningsmassage" fits the card on every phone width */
  .js .cards--swipe .reveal.is-pending { opacity: 1; transform: none; } /* cards waiting off to the right must not fade in late when swiped in */
  .t-list { gap: 16px; }
  .t-row { gap: 0; background: var(--white); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-1); }
  .t-media { aspect-ratio: 16 / 10; border-radius: 0; isolation: isolate; }
  .t-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(var(--overlay-rgb),.8) 0%, rgba(var(--overlay-rgb),0) 55%); }
  .t-media .badge { z-index: 1; }
  .t-photo-name { display: block; position: absolute; left: 20px; right: 20px; bottom: 16px; z-index: 1; color: var(--white); font-size: 1.5rem; font-weight: 700; line-height: 1.08; letter-spacing: -.03em; text-wrap: balance; }
  .t-info { padding: 16px 20px 20px; }
  .t-info h2 { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .t-info > p { margin-top: 0; }
  .t-facts { margin-top: 8px; padding-top: 16px; gap: 16px; }
  .t-info .btn-row { margin-top: 18px; }
  .t-info .btn-row .btn { width: 100%; }
  .js .t-more { display: inline-flex; align-items: center; min-height: 44px; padding: 0; border: 0; background: none; font-weight: 700; color: var(--amber-ink); text-decoration: underline; text-underline-offset: 3px; touch-action: manipulation; }
  .js .t-row:not(.is-open) .t-info > p { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
  .js .t-row:not(.is-open) .t-facts { margin-top: 4px; padding-top: 4px; border-top: 0; }
  .js .t-row:not(.is-open) .t-facts > :not(:last-child) { display: none; }

  /* prices: the table becomes a list with one row per treatment, durations and prices on one line; the whole row books */
  .price-table { display: none; }
  .price-list { display: block; background: var(--white); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-1); font-variant-numeric: tabular-nums; }
  .price-list-head { display: flex; justify-content: space-between; padding: 14px 20px; background: var(--amber); color: var(--espresso); font-size: .75rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
  .price-list li + li { border-top: 1px solid var(--sand-2); }
  .price-list a { display: grid; grid-template-columns: minmax(0, 1fr) 16px; align-items: center; gap: 6px 14px; min-height: 64px; padding: 14px 16px 14px 20px; touch-action: manipulation; transition: background var(--dur); }
  .price-list a:active { background: var(--row-hover); }
  .price-list a > svg { grid-column: 2; grid-row: 1 / 3; width: 16px; height: 16px; color: var(--muted); }
  .pl-name b { display: block; font-size: 1.0625rem; line-height: 1.3; }
  .pl-name small { display: block; margin-top: 2px; font-size: .875rem; color: var(--muted); }
  .pl-opts { display: flex; flex-wrap: wrap; gap: 4px 22px; }
  .pl-opts > span { display: flex; align-items: baseline; gap: 8px; white-space: nowrap; }
  .pl-opts span span { font-size: .9375rem; color: var(--muted); }
  .pl-opts b { font-weight: 800; }

  /* footer: address, hours, phone and e-mail in one card, the page links in one row; the four columns are hidden */
  .site-footer { padding-top: 40px; }
  .foot-grid > :not(.foot-brand) { display: none; }
  .foot-card { display: block; margin-top: 22px; padding: 2px 18px; border-radius: var(--radius); background: var(--white); box-shadow: var(--shadow-1); color: var(--ink); }
  .foot-row { display: flex; align-items: center; gap: 14px; min-height: 64px; padding: 12px 0; }
  .foot-row + .foot-row { border-top: 1px solid var(--sand-2); }
  .foot-row--hours { align-items: flex-start; }
  .foot-row > svg { flex: none; width: 40px; height: 40px; padding: 10px; border-radius: 50%; background: var(--sand-2); color: var(--amber-ink); }
  .foot-row > span { flex: 1; min-width: 0; }
  .foot-row small { display: block; font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
  .foot-row b { font-weight: 600; overflow-wrap: anywhere; }
  .foot-h { display: flex; justify-content: space-between; gap: 12px; font-variant-numeric: tabular-nums; }
  .foot-links { display: flex; flex-wrap: wrap; column-gap: 20px; margin-top: 14px; }
  .foot-links a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; color: var(--ink); }
  .foot-legal { margin-top: 36px; }
}
/* short screens (small phones, big browser bars, larger system text): tighten so both buttons stay on screen */
@media (max-width: 960px) and (max-height: 680px) {
  .hero h1 { font-size: 2.375rem; margin-top: 10px; }
  .hero .btn-row { margin-top: 18px; gap: 8px; }
  .hero .btn { min-height: 48px; }
  .hero .btn .dot { width: 32px; height: 32px; margin-right: -14px; }
}
@media (max-width: 960px) and (max-height: 540px) {
  .hero .eyebrow { display: none; }
  .hero h1 { font-size: 2rem; margin-top: 0; }
  .hero .hero-body { padding-bottom: 16px; }
}
@media (max-width: 560px) {
  .btn { white-space: normal; text-align: center; line-height: 1.25; max-width: 100%; }
  .hero .btn-row .btn { flex: 1 1 100%; }
  .hero .glass-card { display: none; } /* the hot stone teaser lives on the treatments page; keeps the phone hero to one screen of copy */
  .proof small { display: block; margin: 2px 0 0; }
  /* compact, horizontal cards keep the homepage short on phones */
  .explore { gap: 12px; }
  .explore-card { flex-direction: row; align-items: stretch; }
  .explore-card .media { flex: none; width: 112px; aspect-ratio: auto; }
  .explore-card .body { padding: 16px; align-items: center; }
  .explore-card h3 { font-size: 1.125rem; }
  .explore-card p { font-size: .875rem; }
  .explore-card .num { top: 10px; left: 10px; min-width: 28px; height: 28px; padding: 0 8px; font-size: .75rem; }
  .member { display: grid; grid-template-columns: 112px minmax(0, 1fr); }
  .member img { height: 100%; aspect-ratio: auto; }
  .member .body { padding: 16px 18px; }
  .explore, .cards, .team { grid-template-columns: minmax(0, 1fr); }
  .t-card { aspect-ratio: 4 / 4.2; }
  .explore-card .media { aspect-ratio: 16 / 9; }
  .trust ul { grid-template-columns: minmax(0, 1fr); }
  .t-facts { grid-template-columns: minmax(0, 1fr); }
  .stepper { display: flex; }
  .stepper li { flex: 1 1 0; min-width: 0; font-size: 0; gap: 0; }
  .stepper li::before { font-size: .75rem; }
  .stepper li.is-active { flex: 3 1 0; font-size: .8125rem; gap: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .step-nav .btn { flex: 1; }
  .notice { grid-template-columns: minmax(0, 1fr); }
  .form-foot .btn { width: 100%; }
}