/* =========================================================
   MAREN CLINIC · aesthetic clinic showcase
   Shape rule: buttons, chips and the switch are full pills;
   images and panels use --r (20px); inputs use --r-in (12px).
   Two skins: tokens swap on <html data-skin>.
   ========================================================= */

:root {
  --bg: oklch(0.975 0.004 250);
  --surface: oklch(0.945 0.008 250);
  --line: oklch(0.87 0.01 250);
  --ink: oklch(0.22 0.025 255);
  --muted: oklch(0.45 0.02 255);
  --accent: oklch(0.47 0.16 262);        /* cobalt */
  --on-accent: oklch(0.99 0 0);
  --accent-text: oklch(0.47 0.16 262);
  --deep: oklch(0.22 0.04 258);          /* voucher band */

  --font: "Geist", system-ui, sans-serif;
  --r: 20px;
  --r-in: 12px;
  --pad: clamp(20px, 5vw, 72px);
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --z-preview: 10;
  --z-header: 20;
  --z-switch: 30;
  --header-top: var(--bg);               /* colour behind the status bar */
  color-scheme: light;
}

/* Christmas skin: claret body, champagne accent */
/* Christmas skin: Maren's cobalt taken down to midnight, frost white type, a red satin ribbon */
[data-skin="christmas"] {
  --bg: oklch(0.2 0.05 262);
  --surface: oklch(0.25 0.055 262);
  --line: oklch(0.36 0.05 262);
  --ink: oklch(0.965 0.008 250);
  --muted: oklch(0.82 0.025 255);
  --accent: oklch(0.53 0.2 25);
  --on-accent: oklch(0.99 0.004 250);
  --accent-text: oklch(0.8 0.11 20);
  --deep: oklch(0.15 0.045 262);
  --header-top: var(--accent);           /* the notice bar is the top of the page */
  color-scheme: dark;
}

[data-skin="normal"] .skin-christmas,
[data-skin="christmas"] .skin-normal { display: none !important; }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--bg); }
html:not(.lenis) { scroll-behavior: smooth; }
html.lenis, html.lenis body { height: auto; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: 400 1.0625rem/1.6 var(--font);
  -webkit-font-smoothing: antialiased;
  transition: background-color 400ms var(--ease-out);
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3 { margin: 0; font-weight: 400; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
ul, ol, dl { margin: 0; padding: 0; list-style: none; }
fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
section[id] { scroll-margin-top: calc(var(--header-clear, calc(68px + env(safe-area-inset-top, 0px))) + 60px); }
:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 3px; }

.skip { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--accent); color: var(--on-accent); padding: 10px 16px; border-radius: 999px; text-decoration: none; }
.skip:focus { top: 12px; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 50px; padding: 0 26px; border-radius: 999px; border: 1px solid transparent;
  font: 500 1rem/1 var(--font); text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: transform 160ms var(--ease-out), background-color 200ms var(--ease-out), border-color 200ms var(--ease-out), color 200ms var(--ease-out);
}
.btn:active { transform: scale(0.98); }
.btn-primary { background: var(--accent); color: var(--on-accent); }
.btn-primary:hover { background: color-mix(in oklch, var(--accent) 88%, var(--ink)); }
.btn-ghost { border-color: var(--line); color: var(--ink); }
.btn-ghost:hover { border-color: var(--ink); }
.btn-light { background: oklch(0.99 0 0); color: oklch(0.2 0.03 258); }
.btn-light:hover { background: oklch(0.93 0.01 250); }
.btn-small { min-height: 44px; padding: 0 18px; font-size: 0.9375rem; }
[data-skin="christmas"] .btn-primary { box-shadow: inset 0 0 0 3px var(--accent), inset 0 0 0 4px color-mix(in oklch, var(--on-accent) 45%, transparent); }
.btn { position: relative; }
[data-skin="christmas"] .btn-primary::before {
  content: ""; position: absolute; left: -14px; top: -17px; width: 46px; height: 40px;
  background: url("assets/holly-sprig.svg") no-repeat center / contain; transform: rotate(-8deg); pointer-events: none;
}
[data-skin="christmas"] .btn-small::before { width: 38px; height: 33px; left: -12px; top: -14px; }

/* ---------- Header ---------- */
/* Safe area: the page is drawn edge to edge (viewport-fit=cover), so the header pads itself below
   the status bar and paints a solid strip behind it (and above it, for browsers that draw page
   content behind their own bars). Opaque, so nothing shows through behind the clock or island. */
.site-header {
  position: fixed; inset: 0 0 auto; z-index: var(--z-header);
  padding-top: env(safe-area-inset-top, 0px);
  background: var(--bg);
  border-bottom: 1px solid color-mix(in oklch, var(--line) 70%, transparent);
}
.site-header::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: calc(100% - env(safe-area-inset-top, 0px));
  height: calc(120px + env(safe-area-inset-top, 0px)); background: var(--header-top); pointer-events: none;
}
.notice { background: var(--accent); color: var(--on-accent); text-align: center; font-size: 0.875rem; font-weight: 500; padding: 8px var(--pad); }
.nav { display: flex; align-items: center; gap: 32px; height: 68px; padding: 0 var(--pad); }
.wordmark { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; margin-right: auto; text-decoration: none; font-weight: 500; font-size: 1.375rem; letter-spacing: -0.03em; }
.mark { width: 26px; height: 26px; color: var(--accent-text); }
.nav-links { display: flex; gap: 28px; }
.nav-links a { text-decoration: none; font-size: 0.9375rem; color: var(--muted); transition: color 200ms; }
.nav-links a:hover { color: var(--ink); }
@media (max-width: 760px) { .nav-links { display: none; } .nav { gap: 12px; } .wordmark { font-size: 1.2rem; } }

/* ---------- Hero ---------- */
.hero {
  min-height: 100vh; min-height: 100svh;
  display: grid; grid-template-columns: 1.05fr 0.95fr; align-items: center; gap: clamp(32px, 5vw, 80px);
  /* --header-clear is the header's measured bottom (main.js), so the headline clears the Christmas notice too */
  padding: calc(var(--header-clear, calc(68px + env(safe-area-inset-top, 0px))) + 52px) var(--pad) 56px;
}
.hero h1 { font-weight: 300; font-size: clamp(2.6rem, 5vw, 4.75rem); line-height: 1.04; letter-spacing: -0.04em; max-width: 17ch; }
.hero-sub { margin-top: 24px; max-width: 42ch; color: var(--muted); font-size: clamp(1.0625rem, 1.3vw, 1.2rem); }
.hero-ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 36px; }
.hero-media { margin: 0; justify-self: end; width: min(100%, 560px); }
.hero-media img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--r); }

/* The house transition: a top-down wipe, on first paint and on the skin flip */
@keyframes wipe-down { from { clip-path: inset(0 0 100% 0 round var(--r)); } to { clip-path: inset(0 0 0 0 round var(--r)); } }
@keyframes rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.hero-media img { animation: wipe-down 1100ms var(--ease-out) both; }
.hero-copy > * { animation: rise 900ms var(--ease-out) both; }
.hero-copy > :nth-child(2) { animation-delay: 110ms; }
.hero-copy > :nth-child(3) { animation-delay: 200ms; }

@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; padding-top: calc(var(--header-clear, calc(68px + env(safe-area-inset-top, 0px))) + 36px); min-height: auto; }
  .hero-media { justify-self: stretch; width: 100%; }
  .hero-media img { aspect-ratio: 4 / 3.6; }
}

/* ---------- Statement ---------- */
.statement { padding: clamp(80px, 12vw, 180px) var(--pad); }
.statement p { font-weight: 300; font-size: clamp(1.6rem, 3.2vw, 2.9rem); line-height: 1.2; letter-spacing: -0.03em; max-width: 30ch; }

/* ---------- Section titles ---------- */
.treatments h2, .visit h2, .reviews h2, .vouchers h2, .book h2 {
  font-weight: 300; font-size: clamp(2rem, 3.8vw, 3.4rem); line-height: 1.05; letter-spacing: -0.035em;
}
[data-skin="christmas"] :is(.treatments, .visit, .reviews, .book, .prac) h2::after {
  content: ""; display: block; width: 132px; height: 16px; margin-top: 18px;
  background: url("assets/holly-rule.svg") no-repeat left center / contain;
  filter: brightness(1.55) saturate(1.1);
}

/* ---------- Treatments ---------- */
.treatments { padding: 0 var(--pad) clamp(96px, 12vw, 160px); position: relative; }
.t-list { margin-top: 48px; border-top: 1px solid var(--line); }
.t-list li + li { border-top: 1px solid var(--line); }
.t-row {
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.4fr) auto; gap: 32px; align-items: baseline;
  padding: 30px 0; text-decoration: none;
  transition: padding 300ms var(--ease-out), color 200ms;
}
.t-name { font-size: clamp(1.4rem, 2.4vw, 2rem); font-weight: 400; letter-spacing: -0.03em; }
.t-desc { color: var(--muted); max-width: 46ch; }
.t-price { font-weight: 500; font-variant-numeric: tabular-nums; color: var(--accent-text); }
.t-thumb { display: none; }
@media (hover: hover) and (min-width: 900px) {
  .t-row:hover { padding-left: 16px; }
  .t-list:hover .t-row:not(:hover) { color: color-mix(in oklch, var(--ink) 45%, var(--bg)); }
}
.t-preview {
  position: fixed; left: 0; top: 0; z-index: var(--z-preview); margin: 0; pointer-events: none;
  width: 240px; aspect-ratio: 4 / 5; border-radius: var(--r); overflow: hidden;
  opacity: 0; scale: 0.85; transition: opacity 250ms var(--ease-out), scale 350ms var(--ease-out);
  box-shadow: 0 24px 60px color-mix(in oklch, var(--ink) 25%, transparent);
}
.t-preview img { width: 100%; height: 100%; object-fit: cover; }
.t-preview.is-on { opacity: 1; scale: 1; }
@media (max-width: 899px), (hover: none) {
  .t-preview { display: none; }
  .t-row { grid-template-columns: 64px 1fr auto; grid-template-areas: "thumb name price" "thumb desc desc"; gap: 6px 16px; padding: 22px 0; align-items: start; }
  .t-thumb { display: block; grid-area: thumb; width: 64px; height: 64px; object-fit: cover; border-radius: var(--r-in); }
  .t-name { grid-area: name; font-size: 1.25rem; }
  .t-desc { grid-area: desc; font-size: 0.9375rem; }
  .t-price { grid-area: price; font-size: 0.9375rem; }
}

/* ---------- First visit ---------- */
.visit {
  display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(40px, 7vw, 112px);
  padding: clamp(80px, 10vw, 140px) var(--pad); background: var(--surface);
}
.visit-media { position: sticky; top: 110px; align-self: start; }
.visit-media img { width: 100%; aspect-ratio: 11 / 13; object-fit: cover; border-radius: var(--r); }
.steps { counter-reset: step; margin-top: 56px; display: grid; gap: clamp(48px, 8vh, 88px); }
.steps li { counter-increment: step; display: grid; grid-template-columns: 72px 1fr; gap: 4px 20px; }
.steps li::before {
  content: counter(step, decimal-leading-zero); grid-row: span 2;
  font-size: 2.6rem; font-weight: 300; line-height: 1; letter-spacing: -0.04em; color: var(--accent-text);
}
.steps h3 { font-size: 1.5rem; font-weight: 400; letter-spacing: -0.02em; }
.steps p { color: var(--muted); max-width: 44ch; }
@media (max-width: 860px) {
  .visit { grid-template-columns: 1fr; }
  .visit-media { position: static; }
  .visit-media img { aspect-ratio: 4 / 3; }
  .steps li { grid-template-columns: 52px 1fr; }
  .steps li::before { font-size: 2rem; }
}

/* ---------- Reviews ---------- */
.reviews { padding: clamp(96px, 12vw, 160px) 0; }
.reviews h2 { padding: 0 var(--pad); }
.quotes {
  display: flex; gap: clamp(20px, 3vw, 40px); margin-top: 48px;
  overflow-x: auto; scroll-snap-type: x mandatory; padding: 0 var(--pad) 12px; scroll-padding: 0 var(--pad);
  scrollbar-width: none;
}
.quotes::-webkit-scrollbar { display: none; }
.quotes li {
  flex: 0 0 min(84vw, 640px); scroll-snap-align: start;
  display: flex; flex-direction: column; justify-content: space-between; gap: 40px;
  padding: clamp(28px, 4vw, 48px); border: 1px solid var(--line); border-radius: var(--r);
}
.quotes blockquote { margin: 0; }
.quotes blockquote p { font-size: clamp(1.4rem, 2.4vw, 2rem); font-weight: 300; line-height: 1.25; letter-spacing: -0.025em; }
.who { font-weight: 500; }
.who span { display: block; color: var(--muted); font-weight: 400; font-size: 0.9375rem; }

/* ---------- Vouchers ---------- */
.vouchers {
  position: relative; isolation: isolate; overflow: clip;
  margin: 0 var(--pad); border-radius: var(--r);
  padding: clamp(56px, 9vw, 120px) clamp(28px, 6vw, 96px);
  color: oklch(0.98 0.005 250); background: var(--deep);
}
.vouchers-bg { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.vouchers::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, var(--deep) 30%, color-mix(in oklch, var(--deep) 30%, transparent)); }
.vouchers-copy { max-width: 520px; }
.vouchers-copy p { margin: 20px 0 32px; color: oklch(0.88 0.01 250); }
.amounts { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 28px; }
.amounts button {
  min-height: 44px; min-width: 76px; padding: 0 18px; border-radius: 999px; cursor: pointer;
  background: transparent; color: inherit; border: 1px solid oklch(1 0 0 / 0.45);
  font: 500 1rem var(--font); font-variant-numeric: tabular-nums;
  transition: background-color 200ms var(--ease-out), color 200ms var(--ease-out), border-color 200ms;
}
.amounts button:hover { border-color: oklch(1 0 0); }
.amounts button[aria-checked="true"] { background: oklch(0.99 0 0); color: oklch(0.2 0.03 258); border-color: transparent; }
@media (max-width: 700px) { .vouchers::before { background: color-mix(in oklch, var(--deep) 82%, transparent); } }

/* ---------- Book ---------- */
.book { display: grid; grid-template-columns: 1fr minmax(0, 560px); gap: clamp(40px, 7vw, 112px); padding: clamp(96px, 12vw, 160px) var(--pad); }
.book-intro > p { margin-top: 20px; color: var(--muted); max-width: 40ch; }
.details { margin-top: 40px; display: grid; gap: 18px; }
.details dt { font-size: 0.875rem; color: var(--muted); }
.details dd { margin: 2px 0 0; }
.details a { position: relative; text-decoration: none; border-bottom: 1px solid var(--line); }
.details a::after { content: ""; position: absolute; inset: -11px -4px; } /* 44px tap height */
.book-form { display: grid; gap: 20px; padding: clamp(24px, 4vw, 40px); background: var(--surface); border-radius: var(--r); }
.field { display: grid; gap: 8px; }
.field label, .field legend { font-weight: 500; font-size: 0.9375rem; padding: 0; }
.field input:not([type="radio"]), .field select {
  min-height: 50px; padding: 0 14px; border-radius: var(--r-in);
  background: var(--bg); color: var(--ink); border: 1px solid color-mix(in oklch, var(--ink) 30%, transparent);
  font: 400 1rem var(--font);
}
.field input:focus-visible, .field select:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 1px; }
.field input[aria-invalid="true"] { border-color: oklch(0.55 0.2 25); }
.err { color: oklch(0.5 0.19 25); font-size: 0.875rem; }
[data-skin="christmas"] .err { color: oklch(0.85 0.1 40); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.chips label { cursor: pointer; }
.chips input { position: absolute; opacity: 0; pointer-events: none; }
.chips span {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border-radius: 999px;
  border: 1px solid color-mix(in oklch, var(--ink) 30%, transparent); font-size: 0.9375rem;
  transition: background-color 200ms var(--ease-out), color 200ms var(--ease-out);
}
.chips input:checked + span { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.chips input:focus-visible + span { outline: 2px solid var(--accent-text); outline-offset: 2px; }
.form-status { min-height: 1.6em; color: var(--accent-text); font-weight: 500; }
@media (max-width: 900px) { .book { grid-template-columns: 1fr; } }

/* ---------- Footer ---------- */
.site-footer { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 24px 48px; padding: 56px var(--pad) 120px; border-top: 1px solid var(--line); }
.footer-mark { font-weight: 300; font-size: clamp(3rem, 9vw, 7rem); line-height: 0.9; letter-spacing: -0.05em; }
.site-footer ul { display: flex; flex-wrap: wrap; gap: 0 28px; }
.site-footer a { display: inline-block; padding: 11px 0; text-decoration: none; color: var(--muted); } /* 44px tap height */
.site-footer a:hover { color: var(--ink); }
.footer-small { width: 100%; color: var(--muted); font-size: 0.8125rem; }

/* ---------- Reveals: one shot, set off by IntersectionObserver in main.js ----------
   Nothing is hidden unless the script has added .js-reveal to <html>, and it skips that under
   reduced motion, so with no JS everything simply shows. Opacity and transform only, never
   tied to the scroll position, so there is nothing to stutter on a phone. */
.js-reveal [data-reveal] { transition: opacity 560ms var(--ease-out), transform 560ms var(--ease-out); }
.js-reveal [data-reveal="up"]:not(.is-shown) { opacity: 0; transform: translateY(14px); }
.js-reveal [data-reveal="settle"] { transition-duration: 900ms; }
.js-reveal [data-reveal="settle"]:not(.is-shown) { transform: scale(1.08); }
/* The gift card in the voucher band turns into its resting tilt */
.js-reveal [data-reveal="tilt"]:not(.is-shown) { opacity: 0; transform: rotate(1deg) translateY(16px); }

/* ---------- Demo skin switch ---------- */
.skin-switch {
  position: fixed; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); z-index: var(--z-switch);
  display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 16px 0 10px;
  background: oklch(0.99 0 0); color: oklch(0.2 0 0); border: 0; border-radius: 999px; cursor: pointer;
  font: 500 0.875rem/1 var(--font); box-shadow: 0 8px 24px oklch(0 0 0 / 0.22);
}
.switch-track { width: 38px; height: 22px; border-radius: 999px; padding: 3px; background: oklch(0.8 0 0); transition: background-color 250ms var(--ease-out); }
.switch-thumb { display: block; width: 16px; height: 16px; border-radius: 50%; background: white; box-shadow: 0 1px 3px oklch(0 0 0 / 0.3); transition: transform 250ms var(--ease-out); }
.skin-switch[aria-pressed="true"] .switch-track { background: oklch(0.53 0.2 25); }
.skin-switch[aria-pressed="true"] .switch-thumb { transform: translateX(16px); }
[data-demo-hidden] .skin-switch { display: none; }

::view-transition-old(root) { animation: none; }
::view-transition-new(root) { animation: page-wipe 900ms var(--ease-out); }
@keyframes page-wipe { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-delay: 0ms !important; transition-duration: 1ms !important; }
  html { scroll-behavior: auto; }
  ::view-transition-new(root) { animation: none; }
}


/* ---------- Christmas details ---------- */
.mark-wrap { position: relative; display: inline-grid; place-items: center; width: 26px; height: 26px; }
.mark-wrap .festive-wreath { position: absolute; left: 50%; top: 50%; width: 60px; height: 60px; transform: translate(-50%, -50%); overflow: visible; pointer-events: none; }
[data-skin="christmas"] .mark-wrap { margin-right: 6px; }
.header-lights { position: absolute; left: 0; right: 0; top: calc(100% - 6px); height: 80px; pointer-events: none; transition: opacity 400ms var(--ease-out), transform 500ms var(--ease-out); }
.header-lights svg { display: block; overflow: visible; }
.site-header.is-solid .header-lights { opacity: 0; transform: translateY(-24px); }
.bulb-glow { opacity: 0.55; animation: glow 3.6s ease-in-out infinite alternate; animation-delay: calc(var(--d) * -1); }
@keyframes glow { from { opacity: 0.2; } to { opacity: 0.85; } }

/* ---------- Gift card ---------- */
.hero-media { position: relative; }
.gcard { position: relative; aspect-ratio: 1.6; border-radius: 18px; }
.gcard-face {
  position: absolute; inset: 0; border-radius: inherit; overflow: hidden;
  display: grid; grid-template-rows: auto auto 1fr auto; padding: 6% 8% 7%;
  background: radial-gradient(120% 140% at 0% 0%, #ffffff 0%, #eef2f9 45%, #dfe5f1 100%);
  color: oklch(0.22 0.05 262);
  box-shadow: 0 40px 80px oklch(0.08 0.04 262 / 0.6), 0 2px 0 #fff inset;
}
/* Light catching the card now and then, like foil */
.gcard-face::after {
  content: ""; position: absolute; inset: -20%;
  background: linear-gradient(115deg, transparent 42%, oklch(1 0 0 / 0.75) 50%, transparent 58%);
  transform: translateX(-70%); animation: sheen 7s 1.2s cubic-bezier(.22,1,.36,1) infinite;
}
@keyframes sheen { 0% { transform: translateX(-70%); } 22%, 100% { transform: translateX(70%); } }
.gcard-logo { display: inline-flex; align-items: center; gap: 8px; font-weight: 500; font-size: 1.125rem; letter-spacing: -0.03em; }
.gcard-logo svg { width: 20px; height: 20px; color: oklch(0.47 0.16 262); }
.gcard-kind { margin-top: 4px; font-size: 0.8125rem; color: oklch(0.42 0.04 262); }
.gcard-amt { align-self: end; font-weight: 300; font-size: clamp(2.6rem, 4.4vw, 3.6rem); line-height: 1; letter-spacing: -0.05em; font-variant-numeric: tabular-nums; }
.gcard-note { margin-top: 8px; max-width: 58%; font-size: 0.75rem; color: oklch(0.42 0.04 262); }
.gcard-ribbon-v, .gcard-ribbon-h { position: absolute; background: linear-gradient(90deg, #8f121b, #c41f2a 30%, #ea5059 50%, #c41f2a 70%, #8f121b); box-shadow: 0 2px 6px oklch(0.2 0.1 25 / 0.35); }
.gcard-ribbon-v { top: 0; bottom: 0; left: 68%; width: 8%; }
.gcard-ribbon-h { left: 0; right: 0; top: 38%; height: 12%; background: linear-gradient(180deg, #8f121b, #c41f2a 30%, #ea5059 50%, #c41f2a 70%, #8f121b); }
.gcard-bow { position: absolute; left: 72%; top: 44%; width: 36%; transform: translate(-50%, -48%); overflow: visible; filter: drop-shadow(0 6px 8px oklch(0.15 0.08 25 / 0.45)); }

/* The Christmas hero: the card, wrapped, over warm tree lights */
.xscene { position: relative; overflow: hidden; border-radius: var(--r); aspect-ratio: 4 / 5; isolation: isolate; animation: wipe-down 1100ms var(--ease-out) both; }
.xscene > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; filter: brightness(0.82) saturate(1.2); transform: scale(1.08); }
.xscene::after { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(90% 70% at 50% 60%, transparent 30%, oklch(0.15 0.045 262 / 0.75) 100%); }
.xscene-lights { position: absolute; left: -2%; right: -2%; top: 3%; height: 120px; transform: rotate(-4deg); }
.xscene-lights svg { display: block; overflow: visible; }
.gcard--hero { position: absolute; left: 50%; top: 58%; width: 80%; transform: translate(-50%, -50%) rotate(-7deg); animation: card-in 1100ms 350ms var(--ease-out) both, card-float 6s 1.5s ease-in-out infinite alternate; }
@keyframes card-in { from { opacity: 0; transform: translate(-50%, -38%) rotate(-2deg) scale(0.94); } to { opacity: 1; transform: translate(-50%, -50%) rotate(-7deg); } }
@keyframes card-float { from { transform: translate(-50%, -50%) rotate(-7deg); } to { transform: translate(-50%, -53%) rotate(-5.5deg); } }

.vouchers { display: flex; align-items: center; justify-content: space-between; gap: 40px; flex-wrap: wrap; }
.gcard--band { flex: none; width: min(400px, 100%); transform: rotate(-4deg); }
@media (max-width: 900px) { .gcard--hero { width: 86%; } .gcard-amt { font-size: 2.4rem; } }
@media (prefers-reduced-motion: reduce) { .gcard-face::after { display: none; } }

/* ---------- Concern filter ---------- */
.concerns { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 32px; }
.concern {
  min-height: 44px; padding: 0 18px; border-radius: 999px; cursor: pointer;
  background: transparent; color: var(--ink); border: 1px solid var(--line);
  font: 500 0.9375rem/1 var(--font);
  transition: background-color 200ms var(--ease-out), color 200ms var(--ease-out), border-color 200ms;
}
.concern:hover { border-color: var(--ink); }
.concern[aria-pressed="true"] { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.t-list { margin-top: 32px; }
.t-list li.is-out { display: none; }
.t-list li.is-in { animation: rise 420ms var(--ease-out) both; }

/* ---------- Practitioner ---------- */
.prac {
  display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(40px, 7vw, 112px); align-items: center;
  padding: clamp(96px, 12vw, 160px) var(--pad);
}
.prac-media { margin: 0; overflow: hidden; border-radius: var(--r); }
.prac-media img { width: 100%; aspect-ratio: 5 / 6; object-fit: cover; }
.prac-copy > p { margin: 22px 0 0; color: var(--muted); max-width: 46ch; font-size: 1.125rem; }
.prac h2 { font-weight: 300; font-size: clamp(2rem, 3.8vw, 3.4rem); line-height: 1.05; letter-spacing: -0.035em; max-width: 18ch; }
.prac-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 20px 32px; margin: 36px 0 40px; }
.prac-facts dt { font-size: 0.875rem; color: var(--muted); }
.prac-facts dd { margin: 4px 0 0; font-weight: 500; }
@media (max-width: 860px) { .prac { grid-template-columns: 1fr; } .prac-media img { aspect-ratio: 4 / 3.6; } }
[data-skin="christmas"] .wordmark { padding-left: 14px; }