/* Halvenne skin studio · ESSENTIAL tier ($800), beauty vertical.
   The brand of the Immersive demo (/immersive/skincare): HALVENNE in tracked capitals,
   Instrument Serif + Inter Tight, limewash / amber / umber. Photography instead of 3D.
   Restrained motion: one fade-up on scroll, nothing else. One corner radius: 8px. */

:root {
  --paper: #f2ede6;
  --card: #f8f5f0;
  --lime: #e8dfd2;            /* limewash, the tinted sections */
  --bone: #eee7dd;
  --ink: #1f1b17;
  --ink-soft: #5c544b;        /* body copy on paper, 6.4:1 */
  --ink-mute: #675e54;        /* small labels: 5.45:1 on paper, 4.81:1 on the limewash */
  --line: rgba(31, 27, 23, .14);
  --line-strong: rgba(31, 27, 23, .3);
  --umber: #1a1511;
  --umber-2: #241d17;
  --amber: #c98a2e;
  --amber-ink: #82541a;       /* amber as text: 5.58:1 on paper, 4.92:1 on the limewash */
  --brass: #c49a5a;
  --sage: #6c7d4a;
  --serif: "Instrument Serif", "Iowan Old Style", "Times New Roman", serif;
  --sans: "Inter Tight", "Helvetica Neue", Arial, sans-serif;
  --r: 8px;
  --gut: clamp(20px, 5vw, 48px);
  --head-h: 72px;
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--head-h) + 16px); background: var(--paper); }
body {
  background: var(--paper); color: var(--ink);
  font-family: var(--sans); font-size: 16.5px; line-height: 1.65;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  overflow-x: clip;
}
p, h1, h2, h3, figure, ul, ol, dl, dd { margin: 0; padding: 0; }
ul, ol { list-style: none; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--amber-ink); outline-offset: 3px; border-radius: 4px; }

h1, h2, h3 { font-family: var(--serif); font-weight: 400; letter-spacing: -.012em; line-height: 1.04; }
h1, h2 { text-wrap: balance; }
h1 em, h2 em { font-style: italic; }
p { text-wrap: pretty; }

.wrap { max-width: 1200px; margin: 0 auto; padding: 0 var(--gut); }
.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }

.skip {
  position: absolute; left: 12px; top: -60px; z-index: 100;
  background: var(--ink); color: var(--paper); padding: 10px 16px; border-radius: var(--r);
  font-size: 14px; text-decoration: none; transition: top .2s ease;
}
.skip:focus { top: 12px; }

.eyebrow {
  font: 500 11.5px/1.3 var(--sans); letter-spacing: .2em; text-transform: uppercase;
  color: var(--amber-ink);
}

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 0 24px; border-radius: var(--r);
  border: 1px solid var(--ink); background: none; cursor: pointer;
  font: 500 12px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase;
  text-decoration: none; white-space: nowrap;
  transition: background-color .25s ease, color .25s ease, border-color .25s ease, transform .15s ease;
}
.btn:active { transform: scale(.98); }
.btn-fill { background: var(--ink); color: var(--paper); }
.btn-fill:hover { background: #3a3029; border-color: #3a3029; }
.btn-ghost { color: var(--ink); }
.btn-ghost:hover { background: var(--ink); color: var(--paper); }
.btn-sm { min-height: 44px; padding: 0 18px; font-size: 11.5px; }
.actions { display: flex; gap: 12px; flex-wrap: wrap; }

.text-link {
  display: inline-flex; align-items: baseline; gap: 6px;
  font: 500 13px/1.4 var(--sans); letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink); text-decoration: none;
  border-bottom: 1px solid var(--line-strong); padding: 21px 0 4px;   /* 44px tall to tap */
  transition: border-color .2s ease, color .2s ease;
}
.text-link:hover { border-color: var(--ink); color: var(--amber-ink); }

/* ---------- header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 30;
  background: rgba(242, 237, 230, .9);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
.head-row { display: flex; align-items: center; gap: 12px; min-height: var(--head-h); }
/* the wordmark: tracked capitals, as on the bottle's label */
.brand {
  font: 500 14px/1 var(--sans); letter-spacing: .42em; text-transform: uppercase;
  color: var(--ink); text-decoration: none; white-space: nowrap; margin-right: auto;
  padding: 15px 0;   /* 44px tall to tap */
}
.nav { display: flex; align-items: center; gap: 30px; }
.nav a {
  font: 500 12px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink); text-decoration: none; padding: 16px 0; white-space: nowrap;   /* 44px tall to tap */
  text-decoration-thickness: 1px; text-underline-offset: 7px;
}
.nav a:hover, .nav a[aria-current="page"] { text-decoration-line: underline; }
.nav .btn { margin-left: 4px; }

.lang { display: flex; gap: 2px; margin-left: 18px; }
.lang button {
  font: 500 11.5px/1 var(--sans); letter-spacing: .1em;
  color: var(--ink-mute); background: none; border: 0; border-radius: 6px;
  min-width: 44px; min-height: 44px; padding: 0 8px; cursor: pointer;   /* a 44px tap area */
  transition: background-color .2s ease, color .2s ease;
}
.lang button:hover { color: var(--ink); }
.lang button[aria-pressed="true"] { background: var(--lime); color: var(--ink); }
/* the copy of the language switch inside the phone menu, and the short "Book" button that
   stays in the header bar once the nav's own "Book online" button no longer fits */
.lang--menu, .head-book { display: none; }
.head-book { min-height: 44px; padding: 0 16px; font-size: 11.5px; }

.nav-toggle {
  display: none; background: none; border: 0; cursor: pointer;
  width: 44px; height: 44px; padding: 0 11px; margin-right: -11px;
}
.nav-toggle span { display: block; width: 22px; height: 1.5px; background: var(--ink); transition: transform .25s ease; }
.nav-toggle span + span { margin-top: 6px; }
.nav-toggle[aria-expanded="true"] span:first-child { transform: translateY(3.75px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:last-child { transform: translateY(-3.75px) rotate(-45deg); }

/* ---------- live open / closed status ---------- */
.status { display: inline-flex; align-items: center; gap: 9px; font-size: 14px; line-height: 1.35; color: var(--ink); }
.status i {
  flex: none; width: 8px; height: 8px; border-radius: 50%;
  background: #a3988c; box-shadow: 0 0 0 4px rgba(163, 152, 140, .18);
}
.status[data-state="open"] i { background: var(--sage); box-shadow: 0 0 0 4px rgba(108, 125, 74, .18); }
.status[data-state="closing"] i { background: var(--amber); box-shadow: 0 0 0 4px rgba(201, 138, 46, .2); }
.status .tz { color: var(--ink-mute); font-size: 12.5px; }
/* times and prices are set in Inter Tight with lining, tabular figures: in Instrument Serif
   the "1" reads as an "l" ("21:00", "€109") */
.num, .price { font-family: var(--sans); font-variant-numeric: tabular-nums lining-nums; letter-spacing: -.01em; }
.status--card .num { font-size: .84em; font-weight: 500; }
.serum-price .num { font-size: .82em; }

/* ---------- hero ---------- */
.hero .wrap { padding-top: clamp(28px, 4vw, 56px); padding-bottom: clamp(56px, 7vw, 96px); }
.hero-grid {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(32px, 5vw, 80px); align-items: center;
}
.hero h1 {
  font-size: clamp(46px, 6.1vw, 88px); line-height: .98; letter-spacing: -.024em;
  margin: 20px 0 24px;
}
.hero h1 em { display: block; }
.lead { font-size: clamp(17px, 1.45vw, 19px); line-height: 1.6; color: var(--ink-soft); max-width: 44ch; }
.hero .lead { margin-bottom: 34px; }
.hero-note {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px;
  margin-top: 32px; padding-top: 22px; border-top: 1px solid var(--line);
}
.hero-addr { font-size: 14px; color: var(--ink-soft); }
.hero-media { position: relative; }
.hero-photo {
  width: 100%; height: clamp(520px, 74vh, 720px); object-fit: cover; object-position: 50% 15%;
  border-radius: var(--r); background: var(--lime);
}
/* on load the copy rises once; the photo just appears (no parallax: that is Signature) */
html.js .hero-copy > * { animation: rise .9s cubic-bezier(.2, .7, .2, 1) both; }
html.js .hero-copy > :nth-child(2) { animation-delay: .08s; }
html.js .hero-copy > :nth-child(3) { animation-delay: .16s; }
html.js .hero-copy > :nth-child(4) { animation-delay: .24s; }
html.js .hero-copy > :nth-child(5) { animation-delay: .32s; }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* ---------- sections ---------- */
.pad { padding: clamp(72px, 9vw, 128px) 0; }
.pad-b { padding-bottom: clamp(72px, 9vw, 128px); }
.tint { background: var(--lime); }
.section-head { max-width: 640px; margin-bottom: clamp(36px, 4.5vw, 56px); }
.section-head h2, .split-copy h2, .expect-copy h2, .know-side h2 { font-size: clamp(36px, 4.4vw, 58px); margin: 16px 0 18px; }
.section-head p:not(.eyebrow) { color: var(--ink-soft); max-width: 56ch; }

/* intro: one statement, one small photo */
.intro { padding-top: clamp(40px, 5vw, 72px); }
.intro-grid {
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
  gap: clamp(36px, 7vw, 120px); align-items: end;
}
.statement { font-size: clamp(38px, 4.9vw, 66px); line-height: 1.02; letter-spacing: -.02em; margin-bottom: 30px; max-width: 14ch; }
.intro-copy p { color: var(--ink-soft); font-size: 18px; max-width: 54ch; }
.intro-photo img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--r); background: var(--lime); }

/* three treatment cards */
.cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2vw, 28px); }
.card { background: var(--card); border-radius: var(--r); overflow: hidden; display: flex; flex-direction: column; }
.card-photo { width: 100%; aspect-ratio: 4 / 4.4; object-fit: cover; background: var(--bone); }
.card-body { padding: 24px 26px 28px; }
.card-top { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.card h3 { font-size: 30px; line-height: 1.05; }
.card .price { font-size: 22px; line-height: 1; white-space: nowrap; }
.card-time { font: 500 11.5px/1 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--ink-mute); margin: 10px 0 14px; }
.card-text { font-size: 15.5px; color: var(--ink-soft); line-height: 1.6; }
.more { margin-top: clamp(14px, 2.6vw, 30px); }

/* the studio */
.split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(36px, 7vw, 112px); align-items: center; }
.split-photo img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--r); background: var(--lime); }
.split-copy > p:not(.eyebrow) { color: var(--ink-soft); max-width: 54ch; }
.split-copy > p + p { margin-top: 16px; }
.team { margin-top: 36px; border-top: 1px solid var(--line); max-width: 54ch; }
.team li { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.team b { font: 400 28px/1.1 var(--serif); }
.team span { font-size: 14.5px; color: var(--ink-soft); text-align: right; }

/* Serum N°1: a small mention, set in the umber of the Immersive site */
.serum {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: stretch;
  background: var(--umber); color: var(--bone); border-radius: var(--r); overflow: hidden;
}
/* serum.webp is a still of the Immersive demo's own bottle and carton (tools/serumstill.mjs) */
.serum-photo { width: 100%; height: 100%; min-height: 420px; object-fit: cover; object-position: 50% 45%; background: #efe6da; }
.serum-copy { padding: clamp(32px, 5vw, 72px); align-self: center; }
.serum .eyebrow { color: var(--brass); }
.serum h2 { font-size: clamp(44px, 5vw, 68px); margin: 14px 0 10px; }
.serum-spec { font: 500 11px/1.4 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: rgba(238, 231, 221, .62); margin-bottom: 24px; }
.serum-text { color: rgba(238, 231, 221, .86); max-width: 50ch; }
.serum-price { font: 400 26px/1.25 var(--serif); margin: 26px 0 8px; color: var(--bone); }
.serum-small { font-size: 14px; color: rgba(238, 231, 221, .66); max-width: 50ch; }

/* visit */
.visit-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(16px, 2vw, 28px); align-items: stretch; }
.hours-card { background: var(--card); border-radius: var(--r); padding: clamp(26px, 3vw, 40px); }
.hours-card h3, .info-block h3 {
  font: 500 11.5px/1.3 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--ink-mute);
  margin-bottom: 16px;
}
/* a grid, not a wrapping row: a long status line wraps under itself and the dot stays on line one */
.status--card { display: grid; grid-template-columns: 8px minmax(0, 1fr); column-gap: 11px; row-gap: 3px; font: 400 25px/1.2 var(--serif); margin-bottom: 22px; }
.status--card i { align-self: start; margin-top: .48em; }
.status--card .tz { grid-column: 2; font-family: var(--sans); }
.hours-list li {
  display: flex; align-items: baseline; gap: 12px; padding: 10px 0;
  border-top: 1px solid var(--line); font-size: 15px;
}
.hours-list li:last-child { border-bottom: 1px solid var(--line); }
.hours-list .d { flex: 1; color: var(--ink-soft); }
.hours-list .t { font-variant-numeric: tabular-nums; }
.hours-list .t-closed { color: var(--ink-mute); }
.hours-list .is-today .d, .hours-list .is-today .t { color: var(--ink); font-weight: 500; }
.today-tag {
  order: 1; font: 500 10px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; font-style: normal;
  color: var(--amber-ink); border: 1px solid rgba(130, 84, 26, .4); border-radius: 6px; padding: 4px 6px 3px;
}
.hours-list li .d { order: 0; }
.hours-list li .t { order: 2; }
.hours-note { margin-top: 18px; font-size: 14.5px; color: var(--ink-soft); }

/* position + z-index 0 = its own stacking context, or Leaflet's panes (z 200-1000) climb over the sticky header.
   contain: size = the box never takes its height from what is inside it. Leaflet's script can arrive
   before its stylesheet; for that moment the tiles sit in the normal flow and stretch the box to some
   3000px, Leaflet centres the pin in that tall box, and once the CSS lands the visible part shows
   Haarlem station instead of the pin. */
.visit-map { position: relative; z-index: 0; min-height: 440px; contain: size; border-radius: var(--r); overflow: hidden; background: #e4dccf; }
.visit-map iframe { display: block; width: 100%; height: 100%; min-height: 440px; border: 0; }
.leaflet-container { font-family: var(--sans); background: #e4dccf; }
/* warm the OpenStreetMap tiles so the map sits in the limewash palette */
.leaflet-tile-pane { filter: sepia(.22) saturate(.62) brightness(1.02); }
.leaflet-bar { border: 0 !important; border-radius: var(--r); box-shadow: 0 6px 18px rgba(26, 21, 17, .18); overflow: hidden; }
.leaflet-bar a { color: var(--ink); }
.leaflet-control-attribution { font-size: 11px; }
.map-pin { background: none; border: 0; }
.map-pin svg { display: block; width: 34px; height: 44px; filter: drop-shadow(0 5px 7px rgba(26, 21, 17, .35)); }
.map-pop .leaflet-popup-content-wrapper { border-radius: var(--r); }
.map-pop .leaflet-popup-content { margin: 10px 14px; font: 400 18px/1.25 var(--serif); color: var(--ink); }
.map-pop .leaflet-popup-content span { font: 400 13px/1.4 var(--sans); color: var(--ink-soft); }
/* "Use Ctrl + scroll to zoom the map": shown for a moment when someone scrolls over the map */
.map-hint {
  position: absolute; inset: 0; z-index: 1100; display: grid; place-items: center; padding: 20px; text-align: center;
  background: rgba(26, 21, 17, .55); color: #fff; font: 400 24px/1.2 var(--serif);
  opacity: 0; pointer-events: none; transition: opacity .25s ease;
}
.map-hint.show { opacity: 1; }
.map-guard {
  position: absolute; inset: 0; z-index: 2; border: 0; cursor: pointer; padding: 20px;
  background: rgba(26, 21, 17, .3); color: #fff; font: 400 22px var(--serif);
}
.map-live .map-guard { display: none; }

.visit-info {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px clamp(28px, 4vw, 56px);
  margin-top: clamp(48px, 5vw, 72px); padding-top: clamp(36px, 4vw, 48px); border-top: 1px solid var(--line-strong);
}
.addr { font: 400 26px/1.2 var(--serif); margin-bottom: 14px; }
.getting, .contact-intro { font-size: 15px; color: var(--ink-soft); margin-bottom: 18px; }
.contact-line { font-size: 16px; margin-bottom: 2px; }
/* 44px tall to tap; the border is the underline, so the extra room goes above the text */
.contact-line a { display: inline-block; padding: 13px 0 4px; color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--line-strong); }
.contact-line a:hover { border-color: var(--ink); }
.contact-line .soft { display: block; margin-top: 4px; font-size: 13px; color: var(--ink-mute); }
.contact-cta { margin-top: 20px; }
.socials { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.socials a {
  display: inline-flex; align-items: center; gap: 12px; min-height: 46px; padding: 0 18px 0 14px;
  border: 1px solid var(--line-strong); border-radius: var(--r);
  font-size: 14.5px; color: var(--ink); text-decoration: none;
  transition: background-color .2s ease, border-color .2s ease;
}
.socials a:hover { background: var(--card); border-color: var(--ink); }
.socials svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.handle { margin-top: 14px; font-size: 14px; color: var(--ink-soft); }

/* ---------- treatments page ---------- */
.page-head { padding: clamp(36px, 6vw, 88px) 0 0; }
.page-head-grid {
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 28px clamp(32px, 5vw, 80px);
  align-items: end; margin-bottom: clamp(36px, 4.5vw, 56px);
}
.page-head h1 { font-size: clamp(44px, 6vw, 84px); line-height: .98; letter-spacing: -.024em; margin-top: 18px; }
.page-head .lead { max-width: 52ch; font-size: 17px; }
.jump { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }
.jump a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px;
  border: 1px solid var(--line-strong); border-radius: var(--r);
  font-size: 14px; color: var(--ink); text-decoration: none; transition: background-color .2s ease, border-color .2s ease;
}
.jump a:hover { background: var(--card); border-color: var(--ink); }
.band img { width: 100%; aspect-ratio: 16 / 6; object-fit: cover; object-position: 50% 62%; border-radius: var(--r); background: var(--lime); }

.prices { padding-top: clamp(56px, 7vw, 104px); padding-bottom: clamp(56px, 7vw, 104px); }
.group {
  display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(28px, 5vw, 80px);
  padding: clamp(40px, 5vw, 64px) 0; border-top: 1px solid var(--line-strong);
}
.group:first-child { border-top: 0; padding-top: 0; }
.g-head h2 { font-size: clamp(34px, 3.6vw, 48px); margin-bottom: 14px; }
.g-intro { color: var(--ink-soft); font-size: 15.5px; max-width: 40ch; }
.g-photo { width: 100%; max-width: 340px; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r); margin-top: 28px; background: var(--lime); }
.p-labels {
  display: grid; grid-template-columns: minmax(0, 1fr) 76px 76px; gap: 24px;
  font: 500 11px/1 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--ink-mute);
  padding-bottom: 14px; border-bottom: 1px solid var(--line-strong);
}
.p-labels span:not(:first-child) { text-align: right; }
.p-row {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px; align-items: baseline;
  padding: 22px 0; border-bottom: 1px solid var(--line);
}
.p-row:last-child { border-bottom: 0; padding-bottom: 0; }   /* the next group's rule closes the list */
.group:last-child .p-row:last-child { border-bottom: 1px solid var(--line); padding-bottom: 22px; }
.t-name { font-size: 27px; line-height: 1.1; }
.t-desc { color: var(--ink-soft); font-size: 15px; margin-top: 6px; max-width: 58ch; }
.p-meta { display: flex; align-items: baseline; gap: 24px; }
.t-time { width: 76px; text-align: right; font-size: 14.5px; color: var(--ink-soft); white-space: nowrap; font-variant-numeric: tabular-nums; }
.p-meta .price { width: 76px; text-align: right; font-size: 21px; line-height: 1.1; white-space: nowrap; }

/* straight after the price list: one way to book, so nobody has to scroll to the end */
.list-cta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px;
  margin-top: clamp(36px, 4vw, 52px); padding: clamp(22px, 3vw, 30px) clamp(22px, 3vw, 34px);
  background: var(--card); border-radius: var(--r);
}
.list-cta p { flex: 1 1 280px; color: var(--ink-soft); font-size: 15.5px; }
.list-cta p b { display: block; font: 400 26px/1.15 var(--serif); color: var(--ink); margin-bottom: 4px; }

.expect-grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(36px, 6vw, 96px); align-items: center; }
.expect-photo img { width: 100%; aspect-ratio: 4 / 3.4; object-fit: cover; border-radius: var(--r); background: var(--bone); }
.steps { counter-reset: step; margin-top: 8px; }
.steps li { padding: 20px 0 20px 52px; border-top: 1px solid var(--line-strong); position: relative; counter-increment: step; }
.steps li::before {
  content: counter(step, decimal-leading-zero); position: absolute; left: 0; top: 24px;
  font: 500 11.5px/1 var(--sans); letter-spacing: .14em; color: var(--amber-ink);
}
.steps h3 { font-size: 27px; margin-bottom: 6px; }
.steps p { color: var(--ink-soft); font-size: 15.5px; }

.know-grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
.know-photo { width: 100%; max-width: 340px; aspect-ratio: 4 / 4.6; object-fit: cover; border-radius: var(--r); margin-top: 12px; background: var(--lime); }
.know-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(28px, 4vw, 56px); }
.know-list > div { padding: 24px 0; border-top: 1px solid var(--line-strong); }
.know-list dt { font: 400 25px/1.15 var(--serif); margin-bottom: 8px; }
.know-list dd { color: var(--ink-soft); font-size: 15.5px; }

/* limewash, not umber: a dark band would run straight into the dark footer */
.closing { background: var(--lime); color: var(--ink); padding: clamp(72px, 9vw, 120px) 0; text-align: center; }
.closing-inner { display: flex; flex-direction: column; align-items: center; }
.closing h2 { font-size: clamp(40px, 5.4vw, 72px); max-width: 16ch; }
.closing-text { color: var(--ink-soft); margin: 18px 0 32px; max-width: 46ch; }
.closing .actions { justify-content: center; }
.closing-strip {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 26px;
  margin-top: 44px; padding-top: 26px; border-top: 1px solid var(--line-strong);
  font-size: 14px; color: var(--ink-soft);
}

/* ---------- footer ---------- */
.site-footer { background: var(--umber-2); color: rgba(238, 231, 221, .78); padding: clamp(56px, 6vw, 80px) 0 32px; font-size: 14.5px; }
.foot-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 3fr) minmax(0, 4fr); gap: 36px; padding-bottom: 40px; }
.site-footer .brand { color: var(--bone); display: inline-block; margin: -7px 0 7px; }
.foot-tag { color: var(--bone); }
.foot-hours { margin-top: 4px; }
.foot-nav, .foot-contact { display: flex; flex-direction: column; gap: 0; align-items: flex-start; margin-top: -10px; }
.foot-nav a, .foot-contact a { padding: 10px 0; }   /* 44px tall to tap */
.site-footer .foot-nav a:hover, .site-footer .foot-contact a:hover { border-bottom-color: transparent; text-decoration: underline; text-underline-offset: 4px; text-decoration-color: rgba(238, 231, 221, .5); }
.site-footer a { color: rgba(238, 231, 221, .86); text-decoration: none; border-bottom: 1px solid transparent; transition: border-color .2s ease, color .2s ease; }
.site-footer a:hover { color: var(--bone); border-bottom-color: rgba(238, 231, 221, .5); }
.foot-small { position: relative; padding-top: 24px; display: grid; gap: 6px; font-size: 13px; color: rgba(238, 231, 221, .62); }
/* the rule stops where the text does, not at the wrap's padding */
.foot-small::before { content: ""; position: absolute; top: 0; left: var(--gut); right: var(--gut); height: 1px; background: rgba(238, 231, 221, .14); }
.foot-small a { color: rgba(238, 231, 221, .8); border-bottom-color: rgba(238, 231, 221, .3); }
.foot-small p > span + span::before { content: "·"; margin: 0 8px; }

/* ---------- the same studio in every package: a slim band right above the footer ---------- */
/* on the footer's own grid: the label over the brand column, the three packages from the nav column on.
   The current package is a soft tile, as the chosen language is in the header; the other two are links. */
.tiers { background: var(--umber); color: rgba(238, 231, 221, .62); border-bottom: 1px solid rgba(238, 231, 221, .08); }
.tiers-row {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 3fr) minmax(0, 4fr); column-gap: 36px; align-items: center;
  padding-top: 10px; padding-bottom: 10px;
}
.tiers-title { font: 500 11.5px/1.3 var(--sans); letter-spacing: .2em; text-transform: uppercase; }
/* -12px: the names line up with the footer's text; the tile around the current one hangs into the margin */
.tiers-list { grid-column: 2 / -1; display: flex; flex-wrap: wrap; gap: 4px; margin-left: -12px; }
.tiers-list a, .tiers-cur {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; border-radius: var(--r);   /* 44px tall to tap */
  font: 400 20px/1 var(--serif); letter-spacing: -.005em; white-space: nowrap;
}
.tiers-list a {
  color: rgba(238, 231, 221, .86); text-decoration: underline; text-decoration-thickness: 1px;
  text-decoration-color: rgba(238, 231, 221, .3); text-underline-offset: 5px;
  transition: color .2s ease, text-decoration-color .2s ease;
}
.tiers-list a:hover { color: var(--bone); text-decoration-color: rgba(238, 231, 221, .7); }
.tiers-list a:focus-visible { outline-color: var(--brass); }
/* the outline is invisible, except in forced colours, where the tile's fill is dropped */
.tiers-cur { background: rgba(238, 231, 221, .1); color: var(--bone); outline: 1px solid transparent; outline-offset: -1px; }
@media (max-width: 900px) {
  .tiers-row { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px) {
  .tiers-row { display: block; padding-top: 16px; padding-bottom: 10px; }
  .tiers-title { margin-bottom: 4px; }
}
@media (max-width: 360px) {
  .tiers-list { gap: 2px; margin-left: -10px; }
  .tiers-list a, .tiers-cur { padding: 0 10px; font-size: 19px; }
}
@media (prefers-reduced-motion: reduce) {
  .tiers-list a { transition: none; }
}

/* ---------- "Book online" demo notice ---------- */
.book-note {
  width: min(520px, calc(100vw - 32px)); max-height: calc(100dvh - 32px);
  padding: 0; border: 0; border-radius: var(--r); background: var(--paper); color: var(--ink);
  box-shadow: 0 30px 80px rgba(26, 21, 17, .35);
}
.book-note::backdrop { background: rgba(26, 21, 17, .5); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.book-note[open] { animation: pop .28s cubic-bezier(.2, .7, .2, 1); }
@keyframes pop { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.bn-inner { position: relative; padding: 34px clamp(24px, 5vw, 40px) 32px; }
.bn-chip {
  display: inline-block; font: 500 10.5px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase;
  color: var(--amber-ink); border: 1px solid rgba(130, 84, 26, .45); border-radius: 6px; padding: 6px 8px 5px;
}
.book-note h2 { font-size: clamp(32px, 6vw, 40px); margin: 16px 0 14px; padding-right: 24px; }
.book-note h2:focus { outline: none; }   /* it takes the focus on open, so a screen reader starts at the title */
.book-note p { color: var(--ink-soft); font-size: 15.5px; }
.bn-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.bn-actions .btn { white-space: normal; text-align: center; line-height: 1.3; padding-top: 10px; padding-bottom: 10px; }
.bn-x {
  position: absolute; top: 14px; right: 14px; width: 40px; height: 40px; display: grid; place-items: center;
  background: none; border: 0; border-radius: var(--r); cursor: pointer; color: var(--ink-soft);
}
.bn-x:hover { background: var(--lime); color: var(--ink); }
.bn-x svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
html:has(.book-note[open]) { overflow: hidden; }

/* demo toast: says what a placeholder link would do on a real site */
.toast {
  position: fixed; left: 50%; bottom: 22px; z-index: 60; width: max-content; max-width: min(calc(100vw - 32px), 460px);
  transform: translate(-50%, 16px); opacity: 0; pointer-events: none;
  background: var(--ink); color: var(--paper); font-size: 14.5px; line-height: 1.5;
  padding: 13px 18px; border-radius: var(--r); box-shadow: 0 14px 40px rgba(26, 21, 17, .3);
  border: 1px solid rgba(238, 231, 221, .16);   /* still reads over the umber serum card and the footer */
  transition: opacity .3s ease, transform .3s ease;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.toast b { color: var(--brass); font-weight: 500; }

/* ---------- the one scroll animation ---------- */
html.js .reveal { opacity: 0; transform: translateY(18px); transition: opacity .8s ease, transform .8s cubic-bezier(.2, .7, .2, 1); }
html.js .reveal.in { opacity: 1; transform: none; }

/* ================= tablet ================= */
@media (max-width: 1040px) {
  .nav { gap: 22px; }
  .nav .btn { display: none; }
  .head-book { display: inline-flex; }   /* "Book" stays one tap away at every width */
  .lang { margin-left: 6px; }
  .cards { gap: 16px; }
  .card-body { padding: 20px 20px 24px; }
  .card h3 { font-size: 26px; }
  .card .price { font-size: 20px; }
}

/* the nav folds into the menu a little before the content goes single-column: below ~980px
   the Dutch and Spanish menu items no longer fit on one line next to the languages and "Book" */
@media (max-width: 980px) {
  :root { --head-h: 64px; }
  .site-header .wrap { position: relative; }
  .nav {
    display: none; position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--paper); border-bottom: 1px solid var(--line); padding: 4px var(--gut) 20px;
    box-shadow: 0 18px 30px rgba(26, 21, 17, .08);
  }
  .nav.open { display: flex; }
  .nav a { padding: 16px 0; border-bottom: 1px solid var(--line); font-size: 12.5px; }
  .nav a:hover, .nav a[aria-current="page"] { text-decoration-line: none; }
  .nav a[aria-current="page"] { color: var(--amber-ink); }
  .nav-toggle { display: block; }
  /* the bar keeps the brand, "Book" and the menu button; the languages move into the menu */
  .head-row > .lang { display: none; }
  .lang--menu { display: flex; gap: 6px; margin: 16px 0 0; }
  .lang--menu button { border: 1px solid var(--line-strong); min-width: 52px; font-size: 12px; }
  .lang--menu button[aria-pressed="true"] { border-color: var(--lime); }
}

@media (max-width: 900px) {
  /* the photo comes first, in a 3:2 crop, so a phone's first screen is not text only */
  .hero-grid { grid-template-columns: 1fr; gap: 32px; }
  .hero-media { order: -1; }
  .hero-photo { height: auto; aspect-ratio: 3 / 2; object-position: 50% 50%; }
  .intro-grid { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
  .cards { grid-template-columns: 1fr; gap: 20px; }
  .card { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); }
  .card-photo { aspect-ratio: auto; height: 100%; min-height: 240px; }
  .card-body { align-self: center; }
  .split { grid-template-columns: 1fr 1fr; gap: 40px; }
  .serum { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); }
  .visit-grid { grid-template-columns: 1fr; }
  .visit-map, .visit-map iframe { min-height: 380px; }
  .visit-info { grid-template-columns: 1fr 1fr; }
  .group, .know-grid { grid-template-columns: 1fr; gap: 24px; }
  .page-head-grid { grid-template-columns: 1fr; }
  .g-photo { display: none; }
  .know-photo { display: none; }
  .expect-grid { grid-template-columns: 1fr; gap: 36px; }
  .foot-grid { grid-template-columns: 1fr 1fr; }
  .foot-brand { grid-column: 1 / -1; }
}

/* ================= phone ================= */
@media (max-width: 760px) {
  body { font-size: 16px; }
  .hero .wrap { padding-top: 16px; padding-bottom: 64px; }
  .hero-grid { gap: 26px; }
  .hero h1 { font-size: clamp(42px, 12.4vw, 56px); margin: 16px 0 18px; }
  .hero .lead { margin-bottom: 26px; }
  .hero-note { margin-top: 26px; padding-top: 18px; gap: 8px 18px; }
  .actions .btn { flex: 1 1 auto; }

  .pad { padding: 72px 0; }
  .pad-b { padding-bottom: 72px; }
  .section-head h2, .split-copy h2, .expect-copy h2, .know-side h2 { font-size: clamp(34px, 9.6vw, 42px); }
  .intro-grid { grid-template-columns: 1fr; gap: 32px; }
  .statement { font-size: clamp(36px, 10.4vw, 46px); margin-bottom: 20px; }
  .intro-copy p { font-size: 17px; }
  .intro-photo { width: 62%; justify-self: end; }

  .card { display: flex; }
  .card-photo { aspect-ratio: 4 / 3; height: auto; min-height: 0; }
  .card-body { padding: 20px 20px 24px; }
  .card h3 { font-size: 28px; }

  .split { grid-template-columns: 1fr; gap: 32px; }
  .split-photo img { aspect-ratio: 4 / 4.2; }
  .team b { font-size: 25px; }

  .serum { grid-template-columns: 1fr; }
  .serum-photo { min-height: 0; height: auto; aspect-ratio: 1 / 1; object-position: 50% 40%; }
  .serum-copy { padding: 28px 22px 32px; }

  .status--card { font-size: 22px; }
  .visit-map, .visit-map iframe { min-height: 320px; }
  .visit-info { grid-template-columns: 1fr; gap: 36px; }
  .socials { flex-direction: row; flex-wrap: wrap; }

  .page-head h1 { font-size: clamp(40px, 11.4vw, 54px); }
  .jump { margin-top: 26px; }
  .band img { aspect-ratio: 4 / 3; }
  .prices { padding-top: 48px; }
  .group { padding: 40px 0; }
  .g-head h2 { font-size: 36px; }
  .p-labels { display: none; }
  .p-list { border-top: 1px solid var(--line-strong); }
  .p-row { gap: 16px; padding: 18px 0; }
  .t-name { font-size: 23px; }
  .t-desc { font-size: 14.5px; }
  .p-meta { flex-direction: column; align-items: flex-end; gap: 4px; }
  .p-meta .price { order: -1; width: auto; font-size: 20px; }
  .t-time { width: auto; font-size: 13px; }

  .steps li { padding-left: 40px; }
  .steps h3 { font-size: 24px; }
  .know-list { grid-template-columns: 1fr; }
  .know-list dt { font-size: 23px; }
  .closing h2 { font-size: clamp(36px, 10vw, 46px); }
  .closing .actions { width: 100%; max-width: 380px; }
  .closing-strip { flex-direction: column; align-items: center; gap: 8px; }

  .foot-grid { grid-template-columns: auto auto; justify-content: start; gap: 28px 40px; }
}

@media (max-width: 360px) {
  .foot-grid { grid-template-columns: 1fr; }
  .brand { letter-spacing: .3em; font-size: 13px; padding: 16px 0; }
  .head-book { padding: 0 12px; }
  .hero h1 { font-size: 40px; }
  .t-name { font-size: 21px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  html.js .reveal { opacity: 1; transform: none; transition: none; }
  html.js .hero-copy > * { animation: none; }
  .book-note[open] { animation: none; }
  .toast { transition: none; }
}