/* Kalma — demo site. Design A "Warm Glow", colours "Zwart & Champagne" (chosen 2026-10-19, see mockups/palettes/palettes-v2.json).
   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, ivory and champagne */
  --espresso: #141312;       /* warm near-black: dark bands, dark buttons, panels */
  --espresso-2: #232120;
  --sand: #F5F2EC;           /* ivory page background */
  --sand-2: #E8E3DA;
  --sand-3: #D6CFC3;
  --amber: #D8C5A6;          /* champagne accent (on dark, or as a background behind black text) */
  --amber-soft: #E8DAC0;     /* champagne text/icons on black: 13.5:1 */
  --amber-ink: #6F5B3E;      /* accent text on light: 5.8:1 on --sand */
  --ink: #161514;
  --muted: #5D5954;          /* 6.2:1 on --sand */
  --white: #FFFFFF;
  /* brand tints used in overlays, shadows and small accents (one place to re-colour the site) */
  --espresso-rgb: 20,19,18;
  --overlay-rgb: 12,11,10;         /* near-black of --espresso, for gradients over photos */
  --sand-rgb: 245,242,236;
  --amber-rgb: 216,197,166;
  --amber-soft-rgb: 232,218,192;
  --shadow-rgb: 30,28,26;
  --eyebrow: #EFE5CF;              /* small label on the dark hero photo */
  --stars: #E6CF98;
  --row-hover: #FBF9F6;
  --choice-bg: #F9F7F3;
  --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(72px, 9vw, 120px);
  --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(32px, 4vw, 52px); }
.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(--amber); --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(--espresso); }
}
.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); }
.site-header.is-stuck .nav-pill a[aria-current="page"] { color: var(--white); }
.site-header.is-stuck .nav-ind { background: var(--espresso); }
html:has(.site-header.is-stuck) { --nav-ind-bg: var(--espresso); }
.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(--amber); --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); }
.site-header--solid .nav-pill a[aria-current="page"] { color: var(--white); }
.site-header--solid .nav-ind { background: var(--espresso); }
.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(--amber); --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(4, 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); 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; }
.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 ---------- */
.quotes { display: grid; grid-template-columns: 1.3fr 1fr 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 { 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); 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(56px, 7vw, 96px); }
.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, .t-back { 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); 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); 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; }

/* ---------- 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); }
.hours tr.today th, .hours tr.today td { color: var(--amber-soft); font-weight: 700; }
.hours tr.today th::after { content: attr(data-today); 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: 18px; 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); 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; }
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); 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 ---------- */
.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)
   main.js switches the photo/headline 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; }
.hero-body .eyebrow { view-transition-name: hero-eyebrow; }
.hero-body h1 { view-transition-name: hero-title; }
.hero-body .lead { view-transition-name: hero-lead; }
.hero-body .btn-row { view-transition-name: hero-actions; }
.hero-body .proof { view-transition-name: hero-proof; }
.hero-body .glass-card { view-transition-name: hero-card; }
/* on the page being left, the headline etc. get other names (class set by main.js), so they fade out where they are
   instead of sliding into the new headline */
.vt-leaving .hero-body .eyebrow { view-transition-name: hero-eyebrow-old; }
.vt-leaving .hero-body h1 { view-transition-name: hero-title-old; }
.vt-leaving .hero-body .lead, .vt-leaving .page-intro .lead { view-transition-name: hero-lead-old; }
.vt-leaving .hero-body .btn-row { view-transition-name: hero-actions-old; }
.vt-leaving .hero-body .proof { view-transition-name: hero-proof-old; }
.vt-leaving .hero-body .glass-card { view-transition-name: hero-card-old; }
.vt-calm .hero-frame, .vt-calm .hero-frame *, .vt-calm .page-intro .lead { view-transition-name: none !important; }

@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  ::view-transition-group(*) { animation-duration: .5s; animation-timing-function: var(--ease); }
  ::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; }

  ::view-transition-old(hero-eyebrow-old), ::view-transition-old(hero-title-old), ::view-transition-old(hero-lead-old), ::view-transition-old(hero-actions-old), ::view-transition-old(hero-proof-old), ::view-transition-old(hero-card-old) { animation: vt-out .18s ease-out both; }
  /* the hot stone card is frosted glass: the browser carries its backdrop blur over to the transition, where it stayed on top of
     the new page as a blurred box until the whole page change ended. Drop the blur and fade the whole group out with the card. */
  ::view-transition-group(hero-card-old) { backdrop-filter: none; -webkit-backdrop-filter: none; animation: vt-out .18s ease-out both; }
  ::view-transition-new(hero-eyebrow), ::view-transition-new(hero-title), ::view-transition-new(hero-lead), ::view-transition-new(hero-actions), ::view-transition-new(hero-proof), ::view-transition-new(hero-card) { animation: vt-rise .6s var(--ease) both; }
  ::view-transition-new(hero-eyebrow) { animation-delay: .08s; }
  ::view-transition-new(hero-title) { animation-delay: .12s; }
  ::view-transition-new(hero-lead) { animation-delay: .2s; }
  ::view-transition-new(hero-actions) { animation-delay: .27s; }
  ::view-transition-new(hero-proof), ::view-transition-new(hero-card) { animation-delay: .33s; }
}
@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. */
  ::view-transition-group(hero-frame), ::view-transition-old(hero-frame), ::view-transition-new(hero-frame) { animation-duration: .5s; }
  ::view-transition-new(root) { animation: vt-in .35s .38s var(--ease) both; }
  ::view-transition-new(hero-lead) { animation-delay: .4s; }
}
@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) {
  .explore, .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; }
  .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 (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; view-transition-name: hero-lead; } /* the intro sits here on phones, so it animates like the title */
  /* 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. */
  .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%; }
  .t-back { display: inline-flex; min-height: 44px; margin-top: 10px; }
  .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); 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%; }
}