/* ==========================================================================
   SELF-HOSTED TYPE — Cormorant Garamond (OFL), latin subset, variable woff2.
   One upright file covers wght 300-700; the single 500-italic face serves all
   italic requests (CSS matching maps 400/600 italic to it). Metrics-matched
   Georgia fallback (size-adjust/overrides via fonttools) = zero swap CLS.
   ========================================================================== */
@font-face {
  font-family: "Cormorant Garamond";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("../assets/fonts/cormorant-garamond-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Cormorant Garamond";
  font-style: italic;
  font-weight: 400 600;
  font-display: swap;
  src: url("../assets/fonts/cormorant-garamond-italic-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Cormorant Garamond Fallback";
  src: local("Georgia");
  size-adjust: 122.74%;
  ascent-override: 75.28%;
  descent-override: 23.38%;
  line-gap-override: 0%;
}

/* ==========================================================================
   MERAKI MOON MASSAGE — refresh · Stylesheet
   Dreamy, celestial, photo-forward. Night-sky black/grey + gold + moonlight.
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 7.25rem; }
body {
  background: var(--bg); color: var(--cream);
  font-family: var(--font-body); font-size: var(--fs-body); line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: clip;
}
img, picture, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; padding: 0; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
::selection { background: var(--sel); }
[hidden] { display: none !important; } /* ensure the hidden attribute always wins over component display rules */

.wrap { width: min(100% - calc(var(--gutter) * 2), var(--content-max)); margin-inline: auto; }
.section { padding-block: var(--section-y); position: relative; }
.section--alt { background: var(--bg-2); }

/* ----- TYPE ------------------------------------------------------------- */
.display { font-family: var(--font-display); font-weight: 500; }
.hero-title { font-family: var(--font-display); font-weight: 500; font-size: var(--fs-hero); line-height: var(--lh-display); letter-spacing: -0.005em; }
.h1 { font-family: var(--font-display); font-weight: 500; font-size: var(--fs-h1); line-height: 1.1; }
.h2 { font-family: var(--font-display); font-weight: 500; font-size: var(--fs-h2); line-height: 1.15; }
.h3 { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-h3); line-height: 1.25; }
.lead { font-size: var(--fs-lead); color: var(--muted); line-height: 1.6; }
.body { color: var(--muted); max-width: var(--measure); }
.body p + p { margin-top: var(--space-2); }
.gold { color: var(--gold); }
.italic { font-style: italic; }
.num { font-variant-numeric: tabular-nums lining-nums; }
.eyebrow { font-family: var(--font-body); font-size: var(--fs-eyebrow); letter-spacing: var(--track-label); text-transform: uppercase; font-weight: 600; color: var(--gold); }
.center { text-align: center; }

.section__head { max-width: 40rem; margin-bottom: clamp(2rem, 5vw, 3.5rem); }
.section__head.center { margin-inline: auto; }
.section__head .eyebrow { display: block; margin-bottom: var(--space-2); }

/* ----- BUTTONS ---------------------------------------------------------- */
.btn { display: inline-flex; align-items: center; gap: 0.5rem; font-size: var(--fs-small); font-weight: 600; letter-spacing: 0.04em; padding: 0.95rem 1.7rem; min-height: 48px; border-radius: var(--radius); transition: background var(--ease) 220ms, color var(--ease) 220ms, transform var(--ease) 160ms, border-color var(--ease) 220ms; }
.btn--gold { background: var(--gold); color: var(--ink); }
.btn--gold:hover { background: var(--gold-soft); transform: translateY(-1px); }
.btn--ghost { border: 1px solid var(--line); color: var(--cream); }
.btn--ghost:hover { border-color: var(--gold); color: var(--gold); }
.actions { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-3); align-items: center; }

/* ----- HEADER ----------------------------------------------------------- */
.header { position: sticky; top: 0; z-index: var(--z-header); border-bottom: 1px solid transparent; transition: background var(--ease) 300ms, border-color var(--ease) 300ms; }
.header.is-stuck { background: rgba(6, 7, 11, 0.68); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-bottom: 1px solid var(--line-soft); }
.header__bar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); padding-block: 0.75rem; }
.brand { display: inline-flex; align-items: center; }
.brand img { width: clamp(82px, 6vw + 60px, 100px); height: auto; }
.brand .wordmark { display: flex; flex-direction: column; gap: 0.34rem; margin-left: 0.35rem; }
.wordmark__name { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.08rem, 0.92rem + 0.6vw, 1.34rem); letter-spacing: 0.02em; line-height: 1; white-space: nowrap; }
.wordmark__sub { font-family: var(--font-body); font-size: clamp(0.62rem, 0.56rem + 0.25vw, 0.7rem); font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; line-height: 1; white-space: nowrap; color: color-mix(in srgb, var(--gold) 78%, var(--muted)); }
.nav { display: none; }
@media (min-width: 54rem) {
  .nav { display: flex; gap: clamp(1rem, 2.2vw, 1.9rem); align-items: center; }
  .nav a { font-size: var(--fs-eyebrow); letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); font-weight: 600; transition: color var(--ease) 160ms; position: relative; padding-block: 0.4rem; }
  .nav a:hover { color: var(--cream); }
  .nav a::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background: var(--gold); transform: scaleX(0); transform-origin: left; transition: transform var(--ease) 240ms; }
  .nav a:hover::after { transform: scaleX(1); }
}
.header__cta { display: none; }
@media (min-width: 48rem) { .header__cta { display: inline-flex; } }
.skip { position: absolute; left: var(--gutter); top: -100px; z-index: var(--z-skip); background: var(--gold); color: var(--ink); padding: 0.75rem 1rem; border-radius: var(--radius); font-weight: 600; transition: top var(--ease) 200ms; }
.skip:focus { top: var(--space-2); }

/* ----- HERO ------------------------------------------------------------- */
.hero { padding-block: clamp(2rem, 5vw, 4rem) clamp(3.5rem, 8vw, 6rem); }
.hero__grid { display: grid; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
@media (min-width: 56rem) { .hero__grid { grid-template-columns: 1fr 1.12fr; } }
.hero__eyebrow { margin-bottom: var(--space-3); }
.hero__title { margin-bottom: var(--space-3); }
.hero__sub { max-width: 34ch; margin-bottom: var(--space-4); }
.hero__figure { position: relative; }
.hero__figure img { width: 100%; height: auto; border-radius: var(--radius); aspect-ratio: 4 / 5; object-fit: cover; }
.hero__figure::after { content: ""; position: absolute; inset: 0; border: 1px solid var(--line); border-radius: var(--radius); transform: translate(14px, 14px); pointer-events: none; z-index: -1; }

/* ----- PHILOSOPHY BAND -------------------------------------------------- */
.philosophy { text-align: center; }
.philosophy blockquote { font-family: var(--font-display); font-style: italic; font-weight: 500; font-size: var(--fs-h1); line-height: 1.25; max-width: 22ch; margin-inline: auto; color: var(--cream); }
.philosophy .mark { color: var(--gold); }
.philosophy .crest { width: 40px; height: 40px; margin: 0 auto var(--space-4); color: var(--gold); }

/* ----- SPLIT (about) ---------------------------------------------------- */
.split { display: grid; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
@media (min-width: 56rem) { .split { grid-template-columns: 1fr 1fr; } .split--reverse .split__media { order: -1; } }
.split__media img { width: 100%; border-radius: var(--radius); aspect-ratio: 3 / 4; object-fit: cover; }

/* ----- SERVICES --------------------------------------------------------- */
.cards { display: grid; gap: var(--space-3); }
@media (min-width: 48rem) { .cards { grid-template-columns: repeat(3, 1fr); } }
.card { background: var(--panel); border: 1px solid var(--line-soft); border-radius: var(--radius); padding: clamp(1.5rem, 3vw, 2rem); display: flex; flex-direction: column; }
.card__name { margin-bottom: var(--space-2); }
.card__desc { color: var(--muted); font-size: var(--fs-small); line-height: 1.6; flex: 1; }
.card__note { color: var(--muted); font-size: 0.875rem; font-style: italic; margin-top: var(--space-2); opacity: 0.85; }
.price { display: flex; gap: var(--space-3); margin: var(--space-3) 0; padding-top: var(--space-3); border-top: 1px solid var(--line-soft); }
.price div { display: flex; flex-direction: column; }
.price .dur { font-size: 0.78rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }
.price .amt { font-family: var(--font-display); font-size: 1.6rem; font-weight: 600; color: var(--gold); }
.card .btn { margin-top: auto; justify-content: center; }

/* ----- GALLERY ---------------------------------------------------------- */
.gallery { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-2); }
@media (min-width: 48rem) { .gallery { grid-template-columns: repeat(4, 1fr); gap: var(--space-3); } }
.gallery figure { position: relative; overflow: hidden; border-radius: var(--radius); }
.gallery img { width: 100%; height: 100%; aspect-ratio: 3 / 4; object-fit: cover; transition: transform 900ms var(--ease); }
.gallery figure:hover img { transform: scale(1.05); }

/* ----- REVIEWS ---------------------------------------------------------- */
.reviews { text-align: center; }
.stars { color: var(--gold); font-size: 1.5rem; letter-spacing: 0.15em; }
.rating-num { font-family: var(--font-display); font-size: clamp(3.5rem, 8vw, 6rem); font-weight: 600; line-height: 1; color: var(--cream); }
.rating-row { display: flex; align-items: center; justify-content: center; gap: var(--space-3); flex-wrap: wrap; margin: var(--space-3) 0 var(--space-4); }
.rating-meta { text-align: left; }
.rating-meta strong { display: block; font-size: 1.1rem; color: var(--cream); }
.rating-meta > span { font-size: var(--fs-small); color: var(--muted); }
.rating-meta .stars { display: block; color: var(--gold); font-size: 1.25rem; letter-spacing: 0.12em; margin-bottom: 0.2rem; }

/* ----- VISIT ------------------------------------------------------------ */
.visit__grid { display: grid; gap: clamp(2rem, 5vw, 3.5rem); }
@media (min-width: 52rem) { .visit__grid { grid-template-columns: 1fr 1fr; } }
.info dt { font-size: var(--fs-eyebrow); letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold); font-weight: 600; margin-bottom: 0.35rem; }
.info dd { margin-bottom: var(--space-3); color: var(--cream); }
.info dd .sub { color: var(--muted); font-size: var(--fs-small); }
.hours-table { width: 100%; border-collapse: collapse; }
.hours-table td { padding: 0.6rem 0; border-top: 1px solid var(--line-soft); font-size: var(--fs-small); }
.hours-table td:last-child { text-align: right; color: var(--muted); }
.hours-table tr:first-child td { border-top: 0; }
.map { border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line-soft); min-height: 320px; }
.map iframe { width: 100%; height: 100%; min-height: 320px; border: 0; filter: grayscale(0.35) saturate(0.9) brightness(0.92); }

/* ----- FOOTER ----------------------------------------------------------- */
.footer { background: rgba(7, 8, 12, 0.72); padding-block: var(--space-6) var(--space-4); border-top: 1px solid var(--line-soft); }
.footer__grid { display: grid; gap: var(--space-4); align-items: start; }
@media (min-width: 48rem) { .footer__grid { grid-template-columns: 1.4fr 1fr 1fr; gap: var(--space-5); } }
.footer__logo img { width: 150px; height: auto; margin-bottom: var(--space-2); }
.footer p, .footer li, .footer a { font-size: var(--fs-small); color: var(--muted); line-height: 1.8; }
.footer a:hover { color: var(--gold); }
.footer h3 { font-size: var(--fs-eyebrow); letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold); font-weight: 600; margin-bottom: var(--space-2); }
.footer__legal { margin-top: var(--space-5); padding-top: var(--space-3); border-top: 1px solid var(--line-soft); display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); justify-content: space-between; font-size: 0.85rem; letter-spacing: 0.06em; color: var(--muted); text-transform: uppercase; }

/* ----- STICKY MOBILE DOCK ---------------------------------------------- */
.dock { position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-dock); display: grid; grid-template-columns: 1fr 1fr; background: color-mix(in srgb, var(--bg) 95%, transparent); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border-top: 1px solid var(--gold); transform: translateY(110%); transition: transform var(--ease) 320ms; padding-bottom: env(safe-area-inset-bottom); }
.dock.is-visible { transform: translateY(0); }
.dock a { display: flex; align-items: center; justify-content: center; gap: 0.5rem; min-height: 58px; font-size: var(--fs-small); font-weight: 600; letter-spacing: 0.04em; color: var(--cream); }
.dock a:first-child { color: var(--gold); }
.dock a + a { border-left: 1px solid var(--line-soft); }
/* Dock covers mobile AND tablet-portrait (up to the 54rem nav reveal) so booking
   is always reachable and there is no 768–863px dead zone. */
@media (min-width: 54rem) { .dock { display: none; } }
@media (max-width: 53.99rem) { .has-dock { padding-bottom: 58px; } }

/* ----- REVEAL / MOTION -------------------------------------------------- */
[data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity var(--reveal-dur) var(--ease), transform var(--reveal-dur) var(--ease); will-change: opacity, transform; }
[data-reveal].is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 0.001ms !important; animation-duration: 0.001ms !important; }
  [data-reveal] { opacity: 1; transform: none; }
  .gallery figure:hover img { transform: none; }
}

/* ==========================================================================
   UPGRADE — repositioning, pricing ladder, membership, problems, reviews, book
   ========================================================================== */

/* Full-bleed background for alt bands that are also .wrap (constrained content) */
.section--alt.wrap { position: relative; }
.section--alt.wrap::before { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; transform: translateX(-50%); width: 100vw; background: var(--bg-2); z-index: -1; }

/* helpers */
.cream { color: var(--cream); }
.link-gold { color: var(--gold); text-decoration: underline; text-underline-offset: 2px; }
.link-gold:hover { color: var(--gold-soft); }

/* hero trust line */
.trustline { display: flex; align-items: center; gap: 0.6rem; margin-top: var(--space-4); font-size: var(--fs-small); color: var(--muted); }
.trustline .stars { font-size: 1rem; letter-spacing: 0.12em; }
.trustline strong { color: var(--cream); font-weight: 600; }

/* What I help with */
.problems { display: grid; gap: var(--space-3); grid-template-columns: 1fr; }
@media (min-width: 40rem) { .problems { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64rem) { .problems { grid-template-columns: repeat(4, 1fr); } }
.pcard { background: var(--panel); border: 1px solid var(--line-soft); border-radius: var(--radius); padding: clamp(1.4rem, 2.5vw, 1.8rem); }
.pcard__icon { width: 22px; height: 22px; color: var(--gold); margin-bottom: var(--space-2); }
.pcard h3 { margin-bottom: 0.5rem; color: var(--cream); }
.pcard p { color: var(--muted); font-size: var(--fs-small); line-height: 1.6; }
.help__note { margin-top: var(--space-4); color: var(--muted); font-size: var(--fs-small); max-width: 62ch; margin-inline: auto; }

/* Pricing ladder */
.pricing { display: grid; gap: var(--space-3); }
@media (min-width: 56rem) {
  .pricing { grid-template-columns: 1.4fr 1fr; align-items: stretch; }
  .pricing .ptier--flagship { grid-column: 1; grid-row: 1; }
  .pricing .ptier--relax { grid-column: 2; grid-row: 1; }
  .pricing .ptier--gift { grid-column: 1 / -1; grid-row: 2; flex-direction: row; align-items: center; justify-content: space-between; gap: var(--space-4); }
  .pricing .ptier--gift .ptier__name { margin-bottom: 0.3rem; }
  .pricing .ptier--gift .ptier__desc { max-width: 54ch; }
  .pricing .ptier--gift .btn { margin-top: 0; align-self: center; white-space: nowrap; }
}
.ptier { position: relative; background: var(--panel); border: 1px solid var(--line-soft); border-radius: var(--radius); padding: clamp(1.6rem, 3vw, 2.4rem); display: flex; flex-direction: column; }
.ptier--flagship { border-color: color-mix(in srgb, var(--gold) 55%, transparent); }
.ptier__name { margin-bottom: var(--space-2); color: var(--cream); }
.ptier__desc { color: var(--muted); font-size: var(--fs-small); line-height: 1.65; }
.ptier__desc strong { color: var(--cream); font-weight: 600; }
.ptier .btn { margin-top: auto; align-self: flex-start; }
.ptier-gift__copy { min-width: 0; }
.ptier--relax, .ptier--gift { padding: clamp(1.3rem, 2.2vw, 1.7rem); }
.ribbon { position: absolute; top: 0; right: var(--space-3); transform: translateY(-50%); background: var(--gold); color: var(--ink); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; padding: 0.3rem 0.7rem; border-radius: 999px; }
.durations { display: flex; gap: var(--space-2); margin: var(--space-4) 0; flex-wrap: wrap; }
.durations li { flex: 1 1 0; min-width: 4.5rem; text-align: center; border: 1px solid var(--line-soft); border-radius: var(--radius); padding: 0.95rem 0.5rem; position: relative; }
.durations .dur { display: block; font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); margin-bottom: 0.35rem; }
.durations .amt { font-family: var(--font-display); font-size: 1.55rem; font-weight: 600; color: var(--gold); }
.durations li.is-popular { border-color: var(--gold); background: color-mix(in srgb, var(--gold) 9%, transparent); }
.tagpop { position: absolute; top: 0; left: 50%; transform: translate(-50%, -50%); background: var(--gold); color: var(--ink); font-size: 0.65rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; padding: 0.18rem 0.5rem; border-radius: 999px; white-space: nowrap; }
.durations--plain .amt { color: var(--cream); font-size: 1.4rem; } /* relaxation: subordinate, not gold */
.durnote { display: block; margin-top: 0.4rem; font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }

/* Membership & packages */
.mcards { display: grid; gap: var(--space-3); }
@media (min-width: 52rem) { .mcards { grid-template-columns: 1fr 1fr; } }
.mcard { position: relative; background: var(--panel); border: 1px solid var(--line-soft); border-radius: var(--radius); padding: clamp(1.6rem, 3vw, 2.4rem); display: flex; flex-direction: column; }
.mcard--featured { border-color: color-mix(in srgb, var(--gold) 55%, transparent); }
.mlist { margin: var(--space-3) 0 var(--space-4); display: flex; flex-direction: column; gap: 0.7rem; }
.mlist li { color: var(--muted); font-size: var(--fs-small); line-height: 1.5; padding-left: 1.4rem; position: relative; }
.mlist li::before { content: "✦"; position: absolute; left: 0; top: 0.05em; color: var(--gold); font-size: 0.8rem; }
.mlist li.mlist__price { color: var(--cream); padding-left: 0; margin-bottom: 0.2rem; }
.mlist li.mlist__price::before { content: none; }
.mlist .amt { font-family: var(--font-display); font-size: 2rem; font-weight: 600; color: var(--gold); }
.mlist__per { color: var(--muted); font-size: var(--fs-small); margin-left: 0.4rem; }
.mlist__save { display: inline-block; margin-left: 0.5rem; font-size: 0.78rem; letter-spacing: 0.03em; color: var(--moon); background: color-mix(in srgb, var(--moon) 16%, transparent); padding: 0.15rem 0.55rem; border-radius: 999px; }
.mcard .btn { margin-top: auto; align-self: flex-start; }

/* About */
.about__lic { margin-top: var(--space-4); font-size: var(--fs-small); color: var(--muted); }
.about__lic .eyebrow { margin-right: 0.5rem; }
.about__quote { margin-top: var(--space-4); font-family: var(--font-display); font-style: italic; font-size: var(--fs-h3); line-height: 1.3; color: var(--cream); border-left: 2px solid var(--gold); padding-left: var(--space-3); max-width: 34ch; }
.split__media { position: relative; }

/* Placeholder / to-confirm markers (clearly distinct from real copy) */
.todo-chip { font-size: var(--fs-small); color: var(--muted); border: 1px dashed var(--line); border-radius: var(--radius); padding: 0.6rem 0.85rem; background: color-mix(in srgb, var(--gold) 6%, transparent); }
.todo-chip::before { content: "✎  "; color: var(--gold); }
.figure-note { margin-top: 0.75rem; font-size: 0.85rem; color: var(--muted); font-style: italic; opacity: 0.85; }
.figure-note::before { content: "✎  "; color: var(--gold); }
.booking__deposit { margin: var(--space-4) auto 0; max-width: 52ch; font-size: 0.9rem; color: var(--muted); border-top: 1px solid var(--line-soft); padding-top: var(--space-3); }

/* Reviews grid */
.review-grid { display: grid; gap: var(--space-3); grid-template-columns: 1fr; margin-top: var(--space-2); }
@media (min-width: 40rem) { .review-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64rem) { .review-grid { grid-template-columns: repeat(3, 1fr); } }
.review { background: var(--panel); border: 1px solid var(--line-soft); border-radius: var(--radius); padding: clamp(1.3rem, 2.5vw, 1.7rem); text-align: left; display: flex; flex-direction: column; gap: 0.7rem; position: relative; }
.review__stars { color: var(--gold); font-size: 1.05rem; letter-spacing: 0.12em; }
.review__text { color: var(--cream); font-family: var(--font-display); font-size: 1.18rem; line-height: 1.4; font-style: italic; }
.review--placeholder .review__text { color: var(--muted); }
.review__foot { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; margin-top: auto; padding-top: 0.4rem; }
.review__name { font-size: var(--fs-small); color: var(--muted); font-weight: 600; }
.review__tag { font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gold); background: color-mix(in srgb, var(--gold) 10%, transparent); padding: 0.2rem 0.55rem; border-radius: 999px; }
.review__sample { position: absolute; top: 0.8rem; right: 0.8rem; font-size: 0.66rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); border: 1px solid var(--line-soft); padding: 0.12rem 0.42rem; border-radius: 999px; }

/* Booking */
.booking { max-width: 46rem; margin-inline: auto; text-align: center; background: var(--panel); border: 1px solid var(--line-soft); border-radius: var(--radius); padding: clamp(1.8rem, 4vw, 3rem); }
.booking__fallback .lead { margin-inline: auto; max-width: 44ch; margin-bottom: var(--space-3); }
/* When the Square calendar is embedded, drop the card chrome and go wide */
.booking--embed { max-width: 56rem; padding: clamp(0.5rem, 1.5vw, 0.85rem); background: transparent; border: 0; }
.booking__embed { background: var(--panel); border: 1px solid var(--line-soft); border-radius: var(--radius); overflow: hidden; }
.booking__embed iframe { display: block; width: 100%; min-height: 840px; border: 0; background: #fff; }
.booking__cap { margin-top: var(--space-3); font-size: var(--fs-small); color: var(--muted); }

/* ==========================================================================
   CONVERSION ADD-ONS — featured proof, FAQ, booking hub, referral, since-2021
   ========================================================================== */

/* Featured testimonial band (strongest review, near the top) */
.featured-proof { padding-block: clamp(2.5rem, 6vw, 4.5rem); }
.fproof { max-width: 48rem; margin-inline: auto; }
.fproof .stars { display: block; font-size: 1.1rem; letter-spacing: 0.18em; margin-bottom: var(--space-3); }
.fproof__quote { font-family: var(--font-display); font-style: italic; font-weight: 500; font-size: var(--fs-h2); line-height: 1.3; color: var(--cream); }
.fproof__by { margin-top: var(--space-3); font-size: var(--fs-small); letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold); }

/* FAQ accordion (native details/summary — accessible, no JS) */
.faq { max-width: 46rem; margin-inline: auto; }
.faq__item { border-top: 1px solid var(--line-soft); }
.faq__item:last-child { border-bottom: 1px solid var(--line-soft); }
.faq__item summary { cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-3) 0; font-family: var(--font-display); font-size: var(--fs-h3); color: var(--cream); }
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after { content: "+"; flex: 0 0 auto; color: var(--gold); font-size: 1.5rem; line-height: 1; transition: transform var(--ease) 200ms; }
.faq__item[open] summary::after { transform: rotate(45deg); }
.faq__item p { color: var(--muted); max-width: 60ch; padding-bottom: var(--space-3); }

/* Booking hub: clean container on the band; client proof at the decision point */
.booking { background: transparent; border: 0; padding: 0; max-width: 52rem; }
.booking__proof { display: grid; gap: var(--space-3); margin-bottom: var(--space-4); text-align: left; }
@media (min-width: 40rem) { .booking__proof { grid-template-columns: 1fr 1fr; } }
.booking__rebook { margin-top: var(--space-2); font-size: var(--fs-small); color: var(--muted); }
.booking__rebook::before { content: "↻  "; color: var(--gold); }

/* Refer a friend band */
.referral__inner { max-width: 40rem; margin-inline: auto; }
.referral .eyebrow { display: block; margin-bottom: var(--space-2); }
.referral h2 { margin-bottom: var(--space-2); }
.referral .actions { margin-top: var(--space-4); }

/* Established-since credibility cue */
.footer__since { color: var(--gold); }

/* Accessibility helper + status line */
.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; }
.refer-status { display: block; min-height: 1.2em; margin-top: var(--space-2); font-size: var(--fs-small); color: var(--gold); }
.booking__proof-label { display: block; margin-bottom: var(--space-3); }

/* About — long-form bio with sticky portrait */
.about__role { margin-top: 0.5rem; font-size: var(--fs-small); color: var(--muted); }
.split--about { align-items: start; }
.about__bio { max-width: 64ch; }
.body .about__pivot { margin-block: var(--space-3); font-family: var(--font-display); font-style: italic; font-size: var(--fs-h3); line-height: 1.3; color: var(--cream); }
.about__bio .about__lic { margin-top: var(--space-4); }
@media (min-width: 56rem) {
  .split--about { grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr); gap: clamp(2.5rem, 5vw, 4.5rem); }
  .split--about .split__media { position: sticky; top: calc(var(--space-6) + 0.75rem); }
}

/* ==========================================================================
   PREMIUM POLISH — cards, type rhythm, imagery, buttons, responsive
   (appended overrides — later source order wins; keeps the minimalist system)
   ========================================================================== */

/* — type rhythm — */
.lead { line-height: 1.5; }
.body p + p { margin-top: var(--space-3); }
.hero__sub { max-width: 46ch; }
.about__bio { max-width: var(--measure); }
.faq__item p { max-width: var(--measure); }
.review__text { font-size: clamp(1.25rem, 1.1rem + 0.5vw, 1.4rem); line-height: 1.45; }

/* — one card system: radius scale + two padding tokens — */
.card, .pcard, .ptier, .mcard, .review, .booking__embed, .map, .gallery figure { border-radius: var(--radius-card); }
.card, .ptier, .mcard { padding: var(--card-pad); }
.pcard, .review, .ptier--relax, .ptier--gift { padding: var(--card-pad-sm); }
.durations li { border-radius: var(--radius-tile); background: color-mix(in srgb, var(--cream) 3%, transparent); }
.durations li.is-popular { border-color: var(--gold); background: color-mix(in srgb, var(--gold) 12%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gold) 40%, transparent); }
.durations--plain .amt { color: var(--cream); font-size: 1.25rem; font-weight: 600; }

/* — buttons / appointment CTAs — */
.btn { transition: background var(--ease) 220ms, color var(--ease) 220ms, transform var(--ease) 160ms, border-color var(--ease) 220ms, box-shadow var(--ease) 220ms; }
.btn--ghost { border: 1px solid color-mix(in srgb, var(--gold) 40%, transparent); background: color-mix(in srgb, var(--cream) 3%, transparent); }
.btn:focus-visible { outline: 2px solid var(--cream); outline-offset: 3px; box-shadow: 0 0 0 4px color-mix(in srgb, var(--gold) 45%, transparent); }
.btn:active { transform: translateY(0) scale(0.985); }
@media (hover: hover) {
  .btn--gold:hover { background: var(--gold-soft); transform: translateY(-1px); box-shadow: 0 6px 20px -8px color-mix(in srgb, var(--gold) 60%, transparent); }
  .btn--ghost:hover { border-color: var(--gold); color: var(--gold); background: color-mix(in srgb, var(--gold) 8%, transparent); }
}

/* — pricing: top-align (kills relax dead-space), 2-up from tablet, full-width gift bar — */
.ptier__best { margin-top: var(--space-3); font-size: var(--fs-small); color: var(--muted); line-height: 1.55; }
.ptier__best-label { display: inline-block; margin-right: 0.4rem; font-size: var(--fs-eyebrow); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--gold); font-weight: 600; }
.ptier--flagship { background: color-mix(in srgb, var(--gold) 4%, var(--panel)); box-shadow: 0 0 0 1px color-mix(in srgb, var(--gold) 18%, transparent), 0 24px 48px -36px rgba(0,0,0,0.7); }
.ptier .btn { margin-top: var(--space-4); align-self: flex-start; }
.ptier--flagship .btn { margin-top: auto; }
.ptier--gift .btn { margin-top: var(--space-3); align-self: stretch; justify-content: center; }
@media (min-width: 48rem) {
  .pricing { grid-template-columns: 1.4fr 1fr; align-items: start; }
  .pricing .ptier--flagship { grid-column: 1; grid-row: 1; }
  .pricing .ptier--relax { grid-column: 2; grid-row: 1; }
  .pricing .ptier--gift { grid-column: 1 / -1; grid-row: 2; flex-direction: row; align-items: center; justify-content: space-between; gap: var(--space-4); }
  .pricing .ptier--gift .ptier__name { margin-bottom: 0.3rem; }
  .pricing .ptier--gift .ptier__desc { max-width: 54ch; }
  .pricing .ptier--gift .btn { margin-top: 0; align-self: center; justify-content: center; white-space: nowrap; }
}

/* — responsive parity at tablet — */
@media (min-width: 48rem) {
  .mcards { grid-template-columns: 1fr 1fr; }
  .visit__grid { grid-template-columns: 1fr 1fr; }
  .gallery { grid-template-columns: repeat(3, 1fr); gap: var(--space-3); }
}

/* — imagery: one frame language, no-crop for the line-art — */
.hero__figure { isolation: isolate; }
.hero__figure img { aspect-ratio: 1162 / 1300; border-radius: var(--radius-card); position: relative; z-index: 1; box-shadow: inset 0 0 0 1px var(--line); }
.hero__figure::after { border-radius: var(--radius-card); transform: translate(clamp(8px, 1.4vw, 18px), clamp(8px, 1.4vw, 18px)); z-index: 0; }
@media (max-width: 30rem) { .hero__figure::after { display: none; } }
.split__media img { border-radius: var(--radius-card); box-shadow: inset 0 0 0 1px var(--line); }
.gallery img { transition: transform 600ms var(--ease); }
.gallery figure.is-art { background: var(--panel); border: 1px solid var(--line-soft); }
.gallery figure.is-art img { object-fit: contain; padding: 9%; }
.gallery figure:not(.is-art)::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, color-mix(in srgb, var(--bg) 55%, transparent), transparent 55%); opacity: 0; transition: opacity 400ms var(--ease); pointer-events: none; }
.gallery figure:not(.is-art):hover::after { opacity: 1; }

/* — FAQ row inset + hover affordance — */
.faq__item summary { padding-inline: var(--space-2); border-radius: var(--radius); transition: background var(--ease) 160ms; }
.faq__item summary:hover { background: color-mix(in srgb, var(--cream) 3%, transparent); }

/* — small-phone pricing tile guard — */
@media (max-width: 24rem) {
  .durations { gap: var(--space-1); }
  .durations li { min-width: 4rem; padding-inline: 0.35rem; }
  .tagpop { font-size: 0.6rem; padding: 0.16rem 0.4rem; }
}

/* — mobile gallery: real photo full-width, the two illustrations paired beneath — */
@media (max-width: 47.99rem) {
  .gallery figure:first-child { grid-column: 1 / -1; }
}

/* — footer links: comfortable tap targets — */
.footer p > a { display: inline-block; padding-block: 0.3rem; }

/* — prepaid packages table + membership layout — */
@media (min-width: 48rem) { .mcards--pkg { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); } }
.pkg-table-wrap { margin: var(--space-3) 0 var(--space-4); overflow-x: auto; }
.pkg-table { width: 100%; border-collapse: collapse; }
.pkg-table th { text-align: right; font-family: var(--font-body); font-size: var(--fs-eyebrow); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--muted); font-weight: 600; padding: 0 0 0.65rem 0.6rem; white-space: nowrap; }
.pkg-table th:first-child { text-align: left; padding-left: 0; }
.pkg-table td { padding: 0.7rem 0 0.7rem 0.6rem; border-top: 1px solid var(--line-soft); text-align: right; font-family: var(--font-display); font-size: 1.2rem; font-weight: 600; color: var(--gold); white-space: nowrap; }
.pkg-table td:first-child { text-align: left; padding-left: 0; }
/* savings lead; session count is the secondary identifier */
.pkg-save { display: block; color: var(--gold); font-family: var(--font-body); font-size: var(--fs-small); font-weight: 700; letter-spacing: 0.01em; }
.pkg-n { display: block; color: var(--muted); font-family: var(--font-body); font-size: 0.875rem; font-weight: 500; margin-top: 0.1rem; }

/* prepaid-packages section: constrain + center the JS-rendered table */
.pkg { max-width: 44rem; margin: var(--space-2) auto 0; min-height: 6rem; }
.pkg-note { margin-top: var(--space-3); color: var(--muted); font-size: var(--fs-small); }
.pkg-cta { justify-content: center; margin-top: var(--space-4); }

/* ==========================================================================
   VISUAL ELEVATION PASS — cinematic hero, immaculate type rhythm, flagship
   pricing, arched imagery, refined micro-interactions. Brand untouched.
   ========================================================================== */

/* — HERO: cinematic — */
.hero-title { line-height: 0.98; letter-spacing: -0.015em; text-wrap: balance; }
.hero__sub { font-size: clamp(1.1rem, 1rem + 0.45vw, 1.3rem); line-height: 1.55; color: color-mix(in srgb, var(--muted) 88%, var(--cream)); }
@media (min-width: 78rem) {
  .hero__eyebrow { display: inline-flex; align-items: center; gap: 0.75rem; white-space: nowrap; }
  .hero__eyebrow::before { content: ""; flex: 0 0 auto; width: 2rem; height: 1px; background: var(--gold); opacity: 0.7; }
}
.hero__figure { overflow: hidden; border-radius: var(--radius-card); }
.hero__figure::before { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; border-radius: var(--radius-card);
  background: linear-gradient(to top, color-mix(in srgb, var(--bg) 55%, transparent), transparent 38%),
              radial-gradient(120% 90% at 70% 20%, transparent 55%, color-mix(in srgb, var(--bg) 35%, transparent) 100%);
  box-shadow: inset 0 0 60px 8px color-mix(in srgb, var(--bg) 45%, transparent); }
@keyframes kenburns { from { transform: scale(1); } to { transform: scale(1.045); } }
.hero__figure img { animation: kenburns 26s var(--ease) both alternate infinite; transform-origin: 60% 30%; }
.hero__figure::after { content: none; } /* old offset frame would be clipped by overflow:hidden; the vignette replaces it */
/* trustline as a jewel */
.trustline { display: inline-flex; padding: 0.55rem 1.1rem; border: 1px solid color-mix(in srgb, var(--gold) 32%, transparent); border-radius: 999px; background: color-mix(in srgb, var(--gold) 6%, transparent); }
.trustline .stars { font-size: 1.05rem; letter-spacing: 0.18em; text-shadow: 0 0 14px color-mix(in srgb, var(--gold) 55%, transparent); }

/* — TYPE & RHYTHM SYSTEM: one section-header treatment everywhere — */
.section__head { margin-bottom: clamp(2.25rem, 5vw, 3.75rem); }
.section__head .eyebrow { margin-bottom: var(--space-2); }
.section__head.center .eyebrow { display: inline-flex; align-items: center; gap: 0.9rem; }
.section__head.center .eyebrow::before, .section__head.center .eyebrow::after { content: ""; width: 1.75rem; height: 1px; background: color-mix(in srgb, var(--gold) 55%, transparent); }
.h1, .h2 { text-wrap: balance; }
.section__head .h1 + .lead { margin-top: var(--space-3); }

/* — PRICING: flagship glow, refined pills, price numerals — */
.ptier--flagship { box-shadow: 0 0 0 1px color-mix(in srgb, var(--gold) 22%, transparent), 0 0 44px -20px color-mix(in srgb, var(--gold) 45%, transparent), 0 28px 56px -40px rgba(0,0,0,0.8); }
.ribbon, .tagpop { letter-spacing: 0.16em; box-shadow: 0 0 0 4px var(--bg), 0 4px 14px -6px color-mix(in srgb, var(--gold) 70%, transparent); }
.amt-cur { font-size: 0.52em; vertical-align: 0.55em; margin-right: 0.06em; opacity: 0.85; letter-spacing: 0; }
.ptier--flagship .durations .amt { font-size: 1.8rem; }
.durations .amt { letter-spacing: 0.01em; }
@media (hover: hover) {
  .ptier:hover, .mcard:hover { transform: translateY(-3px); box-shadow: 0 22px 44px -30px rgba(0,0,0,0.85), 0 0 0 1px color-mix(in srgb, var(--gold) 26%, transparent); }
  .ptier, .mcard { transition: transform 240ms var(--ease), box-shadow 240ms var(--ease); }
  .ptier--flagship:hover { box-shadow: 0 0 0 1px color-mix(in srgb, var(--gold) 32%, transparent), 0 0 54px -18px color-mix(in srgb, var(--gold) 55%, transparent), 0 30px 60px -38px rgba(0,0,0,0.85); }
}

/* — ABOUT: arched portrait + celestial accent, quiet credential row — */
.split--about .split__media img { border-radius: 999px 999px var(--radius-card) var(--radius-card); height: auto; aspect-ratio: 4 / 5; object-fit: cover; }
/* (old partial arch ornament removed — the celestial pass frames the full portrait instead) */
.body .about__pivot { padding-left: var(--space-3); border-left: 2px solid var(--gold); font-size: clamp(1.5rem, 1.2rem + 1vw, 1.9rem); }
.about__bio .about__lic { border-top: 1px solid var(--line-soft); padding-top: var(--space-3); letter-spacing: 0.02em; }

/* — GALLERY: intentional triptych, arch masks, 1.03 zoom — */
.gallery figure:hover img { transform: scale(1.03); }
@media (min-width: 48rem) {
  .gallery figure { border-radius: 999px 999px var(--radius-card) var(--radius-card); }
  .gallery figure.is-art img { padding: 14% 9% 9%; }
}

/* — MICRO-INTERACTIONS: link sweep, FAQ chevron + smooth open — */
.link-gold { text-decoration: none; background-image: linear-gradient(var(--gold), var(--gold)); background-repeat: no-repeat; background-size: 100% 1px; background-position: 0 100%; transition: background-size 200ms var(--ease), color 200ms var(--ease); }
.link-gold:hover { background-size: 0% 1px; }
.faq__item summary::after { content: "\2304"; font-size: 1.3rem; line-height: 0.5; transform: translateY(-0.15em); transition: transform 240ms var(--ease), color 240ms var(--ease); }
.faq__item[open] summary::after { transform: translateY(-0.05em) rotate(180deg); }
.faq__item[open] summary { color: var(--gold-soft); }
@keyframes faqOpen { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.faq__item[open] > p { animation: faqOpen 280ms var(--ease) both; }

/* — FOOTER: tightened — */
.footer__grid { gap: var(--space-5); }
.footer h3 { margin-bottom: var(--space-2); }
.footer a { transition: color 180ms var(--ease); }
.footer__legal { letter-spacing: 0.08em; opacity: 0.85; }

/* — MOBILE: full-width book buttons, compact stuck header — */
@media (max-width: 47.99rem) {
  .ptier .btn, .mcard .btn { width: 100%; justify-content: center; align-self: stretch; }
  .header.is-stuck .header__bar { padding-block: 0.45rem; }
  .trustline { padding: 0.5rem 0.9rem; }
}
@media (prefers-reduced-motion: reduce) {
  .hero__figure img { animation: none; }
  .faq__item[open] > p { animation: none; }
}

/* — review cards: a subtle gold quotation-mark accent + a gentle lift that makes each one stand out — */
.review { transition: transform 260ms var(--ease), border-color 260ms var(--ease), box-shadow 260ms var(--ease); }
.review::before {
  content: "\201C"; position: absolute; top: 0.1rem; right: 0.55rem; z-index: 0;
  font-family: var(--font-display); font-weight: 600; font-size: 4.5rem; line-height: 1;
  color: var(--gold); opacity: 0.13; pointer-events: none;
  transition: opacity 260ms var(--ease), transform 260ms var(--ease);
}
.review > * { position: relative; z-index: 1; }
@media (hover: hover) {
  .review:hover {
    transform: translateY(-4px);
    border-color: color-mix(in srgb, var(--gold) 45%, transparent);
    box-shadow: 0 16px 34px -20px rgba(0,0,0,0.75), inset 0 0 0 1px color-mix(in srgb, var(--gold) 22%, transparent);
  }
  .review:hover::before { opacity: 0.28; transform: translateY(2px) scale(1.05); }
}

/* ============================================================
   HERO — original celestial gold line-art background (JOB 1).
   Full-bleed decorative SVG behind the hero content, whisper-low opacity,
   masked to fade out before the photo so the headline/CTA stay legible.
   Pure inline SVG (no request, no raster). currentColor = --gold.
   ============================================================ */
.hero { isolation: isolate; }
.hero__grid { position: relative; z-index: 1; }
.hero__canvas {
  position: absolute; inset: 0; z-index: 0;
  width: 100vw; left: 50%; margin-left: -50vw;   /* full-bleed, robust vs. transform on child */
  color: var(--gold); pointer-events: none; overflow: hidden;
  -webkit-mask-image: linear-gradient(100deg, #000 38%, rgba(0,0,0,0.35) 60%, transparent 74%);
          mask-image: linear-gradient(100deg, #000 38%, rgba(0,0,0,0.35) 60%, transparent 74%);
}
.hero__canvas svg { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0.24; }
@media (prefers-reduced-motion: no-preference) {
  .hero__canvas svg { animation: heroDrift 64s var(--ease) infinite alternate; will-change: transform; }
}
@keyframes heroDrift {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(-1.3%, -1.1%, 0) scale(1.035); }
}
/* mobile: text stacks above the photo — fade the art vertically instead so it sits behind the copy */
@media (max-width: 55.99rem) {
  .hero__canvas {
    -webkit-mask-image: linear-gradient(178deg, #000 26%, rgba(0,0,0,0.3) 52%, transparent 68%);
            mask-image: linear-gradient(178deg, #000 26%, rgba(0,0,0,0.3) 52%, transparent 68%);
  }
  .hero__canvas svg { opacity: 0.2; }
}

/* ============================================================
   PRICING — UNIFY: one shared price ladder + two style cards + gift row.
   Prices appear exactly ONCE, in the ladder. Amounts stay plain "$100" text
   inside .durations .amt so the JS <sup class="amt-cur"> injection still fires.
   Appended last so it overrides the earlier .pricing / .ptier / .durations rules.
   ============================================================ */

/* --- base: single-column stacking (mobile-first); neutralize old grid pins --- */
.pricing { display: grid; gap: var(--space-3); }
.pricing .ptier { grid-column: auto; grid-row: auto; }

/* --- 1) SHARED PRICE LADDER — the single source of truth ------------------ */
.ptier--ladder {
  background:
    radial-gradient(120% 140% at 50% -20%, color-mix(in srgb, var(--gold) 8%, transparent), transparent 60%),
    color-mix(in srgb, var(--gold) 4%, var(--panel));
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--gold) 14%, transparent),
    0 24px 52px -40px rgba(0,0,0,0.75);
  align-items: center;
  text-align: center;
  padding-block: clamp(1.8rem, 3.4vw, 2.6rem);
}
.ladder__head { max-width: 48ch; }
.ladder__eyebrow {
  display: block;
  font-family: var(--font-body);
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  font-weight: 600;
  color: var(--gold);
}
.ladder__note {
  margin-top: var(--space-2);
  color: var(--muted);
  font-size: var(--fs-small);
  line-height: 1.55;
}
/* italic Cormorant beat carries the "choose by feel" idea */
.ladder__note-em {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.2rem;
  line-height: 1.2;
  color: var(--cream);
}

/* ladder tiles: bigger, gold, centered, roomy top so the pill never clips */
.ladder__durations {
  width: 100%;
  max-width: 40rem;
  margin: var(--space-4) auto 0;
  gap: var(--space-3);
}
.ladder__durations li {
  padding-top: 1.5rem;            /* reserves clearance for the "Most popular" pill */
  padding-bottom: 1.1rem;
  overflow: visible;             /* pill's outer ring never clipped */
}
.ladder__durations .amt { font-size: clamp(1.7rem, 4vw, 2.1rem); }
.ladder__durations .durnote { margin-top: 0.5rem; }
.ladder__durations li.is-popular { border-color: var(--gold); }

/* --- 2) THE TWO STYLE CARDS — no prices; they differ only in focus -------- */
.ptier--style { display: flex; flex-direction: column; }
.ptier--style .ptier__desc { flex: 1; }               /* equalize heights */
.ptier--style .ptier__best { margin-top: var(--space-3); }
.ptier--style .btn { margin-top: var(--space-4); align-self: flex-start; }

/* one-word character tag — the real differentiator */
.ptier__kind {
  margin: 0 0 var(--space-2);
  font-family: var(--font-body);
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  font-weight: 600;
}
.ptier__kind--therapeutic { color: var(--gold); }
.ptier__kind--relax       { color: var(--moon); }

/* keep flagship emphasized (reinforces the gold wash/ring) */
.ptier--flagship.ptier--style {
  background: color-mix(in srgb, var(--gold) 5%, var(--panel));
}

/* --- 3) desktop: ladder full-width on top, two styles side by side, gift row --- */
@media (min-width: 48rem) {
  .pricing {
    grid-template-columns: 1.4fr 1fr;
    align-items: stretch;
    column-gap: var(--space-3);
  }
  .pricing .ptier--ladder                { grid-column: 1 / -1; grid-row: 1; }
  .pricing .ptier--flagship.ptier--style { grid-column: 1; grid-row: 2; }
  .pricing .ptier--relax.ptier--style    { grid-column: 2; grid-row: 2; }
  .pricing .ptier--gift {
    grid-column: 1 / -1; grid-row: 3;
    flex-direction: row; align-items: center; justify-content: space-between;
    gap: var(--space-4);
  }
  .pricing .ptier--gift .ptier__name { margin-bottom: 0.3rem; }
  .pricing .ptier--gift .ptier__desc { max-width: 54ch; }
  .pricing .ptier--gift .btn { margin-top: 0; align-self: center; justify-content: center; white-space: nowrap; }

  /* ladder tiles read as one horizontal row on desktop */
  .ladder__durations li { flex: 1 1 0; }
}

/* --- 4) small phones: tiles breathe, CTAs full-width ---------------------- */
@media (max-width: 34rem) {
  .ladder__durations { gap: var(--space-2); }
  .ladder__durations li { min-width: 4.5rem; padding-inline: 0.4rem; }
  .ptier--style .btn { width: 100%; justify-content: center; align-self: stretch; }
}

/* ============================================================
   ECHOED LINE-ART EPIGRAPHS (positioning band retired 2026-07-06)
   ============================================================ */

/* "why massage" epigraph opening the About section */
.about__why {
  max-width: 58ch; margin: 0 0 clamp(2rem, 5vw, 3rem);
  font-family: var(--font-display); font-style: italic; font-weight: 500;
  font-size: clamp(1.3rem, 1.05rem + 1vw, 1.7rem); line-height: 1.42;
  color: color-mix(in srgb, var(--muted) 62%, var(--cream));
  text-wrap: pretty;
}

/* deep-tissue benefit lead under the help heading */
.help__lead {
  max-width: 64ch; margin: 0 auto clamp(2rem, 5vw, 3rem);
  font-size: var(--fs-lead); line-height: 1.6;
  color: color-mix(in srgb, var(--muted) 85%, var(--cream));
}

/* footer echo — a faint crescent + stars in the corner */
.footer { position: relative; overflow: hidden; }
.footer__motif {
  position: absolute; top: 0; right: 0; z-index: 0; pointer-events: none;
  width: min(24rem, 46%); color: var(--gold); opacity: 0.1;
  -webkit-mask-image: radial-gradient(120% 120% at 85% 25%, #000 40%, transparent 78%);
          mask-image: radial-gradient(120% 120% at 85% 25%, #000 40%, transparent 78%);
}
.footer__motif svg { width: 100%; height: auto; display: block; }
.footer__grid, .footer__legal { position: relative; z-index: 1; }
@media (max-width: 40rem) { .footer__motif { opacity: 0.075; width: 60%; } }

/* ==========================================================================
   CELESTIAL NIGHT-SKY PASS — dreamy black/grey gradient, quietly twinkling
   stars, rounded gold frames. The .sky layer is fixed behind everything;
   bands and cards are translucent so the night sky reads through the page.
   ========================================================================== */

/* — the sky: black/grey gradient + a faint gold aurora at the crown — */
.sky {
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(62% 38% at 74% -8%, rgba(198, 161, 78, 0.07), transparent 70%),
    radial-gradient(140% 95% at 50% -12%, #1B2036 0%, #141830 38%, #0A0B14 74%, #06070B 100%);
}
.sky i { position: absolute; inset: 0; background-repeat: repeat; }
/* layer 1 — fine cool-white stars */
.sky i:nth-child(1) {
  background-image:
    radial-gradient(1px 1px at 18px 44px, rgba(236, 240, 248, 0.85), transparent 55%),
    radial-gradient(1.3px 1.3px at 74px 196px, rgba(236, 240, 248, 0.7), transparent 55%),
    radial-gradient(1px 1px at 139px 80px, rgba(236, 240, 248, 0.9), transparent 55%),
    radial-gradient(1.2px 1.2px at 198px 290px, rgba(236, 240, 248, 0.6), transparent 55%),
    radial-gradient(1px 1px at 256px 32px, rgba(236, 240, 248, 0.75), transparent 55%),
    radial-gradient(1.3px 1.3px at 301px 344px, rgba(236, 240, 248, 0.85), transparent 55%),
    radial-gradient(1px 1px at 357px 124px, rgba(236, 240, 248, 0.65), transparent 55%),
    radial-gradient(1.2px 1.2px at 404px 455px, rgba(236, 240, 248, 0.8), transparent 55%),
    radial-gradient(1px 1px at 447px 215px, rgba(236, 240, 248, 0.7), transparent 55%),
    radial-gradient(1.3px 1.3px at 498px 564px, rgba(236, 240, 248, 0.9), transparent 55%),
    radial-gradient(1px 1px at 524px 60px, rgba(236, 240, 248, 0.6), transparent 55%),
    radial-gradient(1.2px 1.2px at 561px 340px, rgba(236, 240, 248, 0.8), transparent 55%),
    radial-gradient(1px 1px at 598px 472px, rgba(236, 240, 248, 0.7), transparent 55%),
    radial-gradient(1.2px 1.2px at 58px 392px, rgba(236, 240, 248, 0.75), transparent 55%),
    radial-gradient(1px 1px at 126px 543px, rgba(236, 240, 248, 0.65), transparent 55%),
    radial-gradient(1.3px 1.3px at 282px 612px, rgba(236, 240, 248, 0.8), transparent 55%);
  background-size: 640px 640px;
  animation: skyTwinkle 7.5s ease-in-out -2s infinite alternate;
}
/* layer 2 — sparser, slightly larger, moonlight-silver leaning */
.sky i:nth-child(2) {
  background-image:
    radial-gradient(1.5px 1.5px at 70px 110px, rgba(199, 211, 232, 0.8), transparent 55%),
    radial-gradient(1.4px 1.4px at 215px 505px, rgba(236, 240, 248, 0.65), transparent 55%),
    radial-gradient(1.7px 1.7px at 340px 58px, rgba(199, 211, 232, 0.75), transparent 55%),
    radial-gradient(1.4px 1.4px at 430px 320px, rgba(236, 240, 248, 0.6), transparent 55%),
    radial-gradient(1.8px 1.8px at 555px 660px, rgba(199, 211, 232, 0.85), transparent 55%),
    radial-gradient(1.4px 1.4px at 640px 150px, rgba(236, 240, 248, 0.7), transparent 55%),
    radial-gradient(1.6px 1.6px at 760px 430px, rgba(199, 211, 232, 0.65), transparent 55%),
    radial-gradient(1.5px 1.5px at 860px 780px, rgba(236, 240, 248, 0.75), transparent 55%),
    radial-gradient(1.6px 1.6px at 150px 750px, rgba(199, 211, 232, 0.7), transparent 55%),
    radial-gradient(1.4px 1.4px at 500px 870px, rgba(236, 240, 248, 0.65), transparent 55%),
    radial-gradient(1.7px 1.7px at 880px 90px, rgba(199, 211, 232, 0.8), transparent 55%);
  background-size: 920px 920px;
  animation: skyTwinkle 12s ease-in-out -6s infinite alternate;
}
/* layer 3 — a handful of softly glowing gold stars */
.sky i:nth-child(3) {
  background-image:
    radial-gradient(2px 2px at 160px 210px, rgba(220, 192, 127, 0.9), transparent 60%),
    radial-gradient(36px 36px at 160px 210px, rgba(198, 161, 78, 0.14), transparent 65%),
    radial-gradient(2px 2px at 520px 640px, rgba(220, 192, 127, 0.8), transparent 60%),
    radial-gradient(30px 30px at 520px 640px, rgba(198, 161, 78, 0.12), transparent 65%),
    radial-gradient(2.2px 2.2px at 840px 120px, rgba(220, 192, 127, 0.9), transparent 60%),
    radial-gradient(40px 40px at 840px 120px, rgba(198, 161, 78, 0.15), transparent 65%),
    radial-gradient(2px 2px at 980px 820px, rgba(220, 192, 127, 0.75), transparent 60%),
    radial-gradient(30px 30px at 980px 820px, rgba(198, 161, 78, 0.11), transparent 65%),
    radial-gradient(2.2px 2.2px at 330px 1010px, rgba(220, 192, 127, 0.85), transparent 60%),
    radial-gradient(34px 34px at 330px 1010px, rgba(198, 161, 78, 0.13), transparent 65%);
  background-size: 1180px 1180px;
  animation: skyTwinkle 17s ease-in-out -4s infinite alternate;
}
@keyframes skyTwinkle { from { opacity: 0.4; } to { opacity: 1; } }

/* alt bands: a whisper of structure so the dark glass reads as a band */
.section--alt.wrap::before { border-block: 1px solid rgba(242, 236, 220, 0.05); }

/* the hero line-art flows up behind the transparent header, all the way to
   the top of the page, so the moon's orbit rings are never cut off flat by
   the banner (offset must cover the full header height: ~0.75rem padding x2
   + the ~96px logo) */
.hero__canvas { top: -7.5rem; }

/* — rounded gold frames floating around the imagery — */
.hero__figure,
.split--about .split__media img,
.gallery figure {
  outline: 1px solid color-mix(in srgb, var(--gold) 38%, transparent);
  outline-offset: clamp(6px, 1.1vw, 10px);
}
.gallery { gap: clamp(1.6rem, 3.5vw, 2rem); }

/* — the featured review: a glowing double-ring gold frame — */
.fproof {
  position: relative;
  max-width: 52rem;
  padding: clamp(2.2rem, 5vw, 3.5rem) clamp(1.4rem, 4.5vw, 3.5rem);
  background:
    radial-gradient(130% 110% at 50% 0%, color-mix(in srgb, var(--gold) 8%, transparent), transparent 58%),
    var(--panel);
  border: 1px solid color-mix(in srgb, var(--gold) 45%, transparent);
  border-radius: calc(var(--radius-card) + 8px);
  outline: 1px solid color-mix(in srgb, var(--gold) 20%, transparent);
  outline-offset: 8px;
  box-shadow:
    0 0 80px -30px color-mix(in srgb, var(--gold) 50%, transparent),
    0 34px 70px -50px rgba(0, 0, 0, 0.85);
}
/* longer featured quotes stay elegant at a calmer size */
.fproof__quote { font-size: clamp(1.35rem, 1.05rem + 1.3vw, 1.95rem); line-height: 1.4; }

@media (prefers-reduced-motion: reduce) {
  .sky i { animation: none; }
}

/* ==========================================================================
   POLISH PASS (2026-07-07) — matched style-card titles, centered gift row,
   elevated "Meet Your Therapist" section.
   ========================================================================== */

/* — gift row: centered column; the copy balances onto two lines on desktop — */
.pricing .ptier--gift { flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.ptier--gift .ptier-gift__copy { max-width: none; }
.pricing .ptier--gift .ptier__desc, .ptier--gift .ptier__desc { max-width: 78ch; margin-inline: auto; text-wrap: balance; }
.pricing .ptier--gift .btn, .ptier--gift .btn { margin-top: var(--space-3); align-self: center; width: auto; }

/* — About: centered head + epigraph; bigger, brighter, airier bio — */
.about__role { font-size: var(--fs-body); }
.about__why {
  text-align: center;
  margin: 0 auto clamp(2.25rem, 5vw, 3.25rem);
  max-width: 48ch;
  font-size: clamp(1.45rem, 1.15rem + 1.2vw, 2rem);
  line-height: 1.42;
  text-wrap: balance;
}
.about__bio {
  font-size: clamp(1.2rem, 1.08rem + 0.45vw, 1.35rem);
  line-height: 1.75;
  color: color-mix(in srgb, var(--muted) 55%, var(--cream));
}
.about__bio p + p { margin-top: var(--space-3); }
.body .about__pivot { font-size: clamp(1.65rem, 1.3rem + 1.2vw, 2.1rem); padding-block: 0.2rem; }
.about__bio .about__lic { font-size: var(--fs-small); color: var(--muted); }

/* ==========================================================================
   ROUND-2 DECISIONS (2026-07-08) — softer hero tagline font (Edit 2) +
   reviews folded into "Meet Your Therapist", two at a time (Edits 7/8).
   ========================================================================== */

/* Edit 2: soft, rounded "moon" font for the hero's gold tagline only.
   The longer tagline must WRAP (not force one nowrap line) — otherwise its
   column's min-content pushes the hero photo small. Drop the ::before gold
   rule that only suited a short single-line eyebrow. */
.hero__eyebrow { font-family: "Comfortaa", var(--font-body); letter-spacing: 0.14em; font-weight: 600; display: block; white-space: normal; max-width: 40ch; }
.hero__eyebrow::before { content: none; }

/* Edits 7/8: two client reviews woven into the About section */
.about-reviews { margin-top: clamp(2.5rem, 5vw, 3.5rem); padding-top: clamp(2rem, 4vw, 3rem); border-top: 1px solid var(--line-soft); }
.about-reviews__head { display: flex; align-items: center; justify-content: center; gap: var(--space-3); flex-wrap: wrap; margin-bottom: clamp(1.6rem, 3.2vw, 2.4rem); }
.about-reviews__pair { display: grid; gap: var(--space-3); grid-template-columns: 1fr; max-width: 54rem; margin-inline: auto; }
@media (min-width: 40rem) { .about-reviews__pair { grid-template-columns: 1fr 1fr; } }

/* Gallery (Devon 2026-07-08): make the two illustrations FILL their frames
   like the hot-stone photo, instead of sitting letterboxed in a padded panel. */
.gallery figure.is-art { background: none; border: 0; }
.gallery figure.is-art img { object-fit: cover; padding: 0; }

/* ==========================================================================
   DREAMY CELESTIAL ENHANCEMENT PASS (2026-07-08) — per Melissa: holistic,
   celestial, dreamy, spiritual. Adds soft nebula color-depth, a luminous
   moon, gentle drifting, occasional shooting stars, and a whisper of glow.
   All motion is disabled under prefers-reduced-motion (see end).
   ========================================================================== */

/* — nebula: muted indigo / violet / teal / dusk-rose clouds drifting slowly.
   Low opacity so the gold stays the hero; blur keeps it dreamy, not banded. */
.sky::before {
  content: ""; position: absolute; inset: -25%;
  background:
    radial-gradient(38% 30% at 20% 16%, rgba(74, 86, 168, 0.16), transparent 60%),
    radial-gradient(34% 30% at 84% 26%, rgba(122, 78, 150, 0.13), transparent 60%),
    radial-gradient(42% 36% at 70% 82%, rgba(58, 110, 132, 0.11), transparent 62%),
    radial-gradient(36% 30% at 10% 78%, rgba(154, 96, 122, 0.10), transparent 62%);
  filter: blur(10px);
  animation: nebulaDrift 52s ease-in-out infinite alternate;
  will-change: transform;
}
@keyframes nebulaDrift {
  from { transform: translate3d(-2.5%, -1.5%, 0) scale(1.03); }
  to   { transform: translate3d(2.5%, 2%, 0) scale(1.09); }
}

/* — a large, soft luminous moon high in the sky — */
.sky::after {
  content: ""; position: absolute;
  top: 6vh; right: 11vw; width: min(48vw, 32rem); aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle at 50% 48%,
    rgba(236, 228, 204, 0.12) 0%, rgba(216, 192, 127, 0.08) 28%,
    rgba(198, 161, 78, 0.05) 46%, transparent 64%);
  filter: blur(4px);
  animation: moonBreath 15s ease-in-out infinite alternate;
}
@keyframes moonBreath {
  from { opacity: 0.68; transform: scale(1); }
  to   { opacity: 1; transform: scale(1.05); }
}

/* — occasional shooting stars: a faint gold streak that crosses now and then — */
.sky i.shoot {
  inset: auto; top: 14%; left: -12%;
  width: clamp(90px, 12vw, 170px); height: 1.5px; background-repeat: no-repeat;
  background-image: linear-gradient(90deg, transparent, rgba(232, 220, 190, 0.95));
  border-radius: 999px; opacity: 0; transform: rotate(16deg); transform-origin: left center;
  filter: drop-shadow(0 0 5px rgba(220, 192, 127, 0.7));
  animation: shootStar 14s cubic-bezier(0.4, 0, 0.7, 1) 4s infinite;
}
.sky i.shoot--2 { top: 8%; left: 32%; animation-duration: 19s; animation-delay: 11s; }
@keyframes shootStar {
  0%   { opacity: 0; transform: translate3d(0, 0, 0) rotate(16deg); }
  2%   { opacity: 0.9; }
  9%   { opacity: 0; transform: translate3d(78vw, 34vh, 0) rotate(16deg); }
  100% { opacity: 0; transform: translate3d(78vw, 34vh, 0) rotate(16deg); }
}

/* — a whisper of luminous glow on the display gold accents (dreamy, not blurry) — */
.hero-title .gold, .fproof__quote, .positioning__statement,
.philosophy blockquote .mark { text-shadow: 0 0 26px color-mix(in srgb, var(--gold) 26%, transparent); }
.section__head.center .eyebrow::before,
.section__head.center .eyebrow::after { box-shadow: 0 0 8px color-mix(in srgb, var(--gold) 50%, transparent); }

/* — arched image frames get a soft moonlit halo — */
.hero__figure, .split--about .split__media img, .gallery figure {
  box-shadow: 0 0 44px -18px color-mix(in srgb, var(--gold) 34%, transparent);
}

@media (prefers-reduced-motion: reduce) {
  .sky::before, .sky::after { animation: none; }
  .sky i.shoot { display: none; }
}

/* ==========================================================================
   MERAKI — the word behind the name (2026-07-08). A luminous, spacious
   celestial definition band. meraki [may-rah-kee], Greek: to put soul,
   creativity and love into your work.
   ========================================================================== */
.meraki { text-align: center; padding-block: clamp(4rem, 9vw, 7rem); }
.meraki__inner { max-width: 44rem; margin-inline: auto; }
.meraki__moons {
  display: block; width: min(17rem, 66%); height: auto;
  margin: 0 auto clamp(1.6rem, 3.2vw, 2.6rem); color: var(--gold); opacity: 0.85;
  filter: drop-shadow(0 0 5px color-mix(in srgb, var(--gold) 45%, transparent));
}
.meraki__full { filter: drop-shadow(0 0 6px color-mix(in srgb, var(--gold) 75%, transparent)); }
.meraki__word {
  font-family: var(--font-display); font-style: italic; font-weight: 500;
  font-size: clamp(3.2rem, 1.8rem + 6.4vw, 6.5rem); line-height: 0.95;
  letter-spacing: 0.06em; color: var(--gold);
  text-shadow: 0 0 44px color-mix(in srgb, var(--gold) 38%, transparent);
}
.meraki__pron {
  margin-top: var(--space-3); font-family: "Comfortaa", var(--font-body);
  font-size: var(--fs-small); letter-spacing: 0.12em; color: var(--muted);
}
.meraki__pron .lang { color: var(--gold-soft); letter-spacing: 0.16em; }
.meraki__def {
  margin: clamp(1.6rem, 3.2vw, 2.4rem) auto 0; max-width: 42ch;
  font-family: var(--font-display); font-size: clamp(1.32rem, 1.05rem + 1.05vw, 1.75rem);
  line-height: 1.5; color: color-mix(in srgb, var(--muted) 52%, var(--cream)); text-wrap: balance;
}
.meraki__def--tie {
  margin-top: var(--space-3); font-style: italic; font-size: clamp(1.15rem, 1rem + 0.6vw, 1.4rem);
  color: var(--muted); max-width: 46ch;
}
.meraki__values {
  margin-top: clamp(2rem, 4vw, 2.75rem); display: inline-flex; flex-wrap: wrap;
  gap: clamp(0.7rem, 2.5vw, 1.6rem); align-items: center; justify-content: center;
  font-family: var(--font-body); text-transform: uppercase; letter-spacing: 0.24em;
  font-size: var(--fs-eyebrow); font-weight: 600; color: var(--gold);
}
.meraki__values i { color: color-mix(in srgb, var(--gold) 60%, transparent); font-size: 0.7em; font-style: normal; }

/* ==========================================================================
   INCREDIBLE PORTRAIT FRAME (2026-07-08) — a celestial "moon-window" for the
   Meet Your Therapist photo: gold-gradient arch + crescent-and-stars crown +
   breathing moonlight halo. Scoped to .split--about .portrait only.
   ========================================================================== */
.split--about .split__media { position: relative; }
.split--about .portrait {
  padding: 3px;
  background: linear-gradient(155deg,
    var(--gold-soft) 0%, var(--gold) 44%,
    color-mix(in srgb, var(--gold) 45%, #4a3a17) 100%);
  border-radius: 999px 999px calc(var(--radius-card) + 4px) calc(var(--radius-card) + 4px);
  box-shadow:
    0 0 66px -22px color-mix(in srgb, var(--gold) 42%, transparent),
    0 26px 60px -34px rgba(0, 0, 0, 0.85);
  isolation: isolate;
}
.split--about .portrait img {
  outline: none; box-shadow: none; display: block;
  border-radius: 999px 999px var(--radius-card) var(--radius-card);
}
/* breathing moonlight halo, behind the photo */
.portrait__halo {
  position: absolute; inset: -16px; z-index: -1; pointer-events: none;
  background: radial-gradient(66% 56% at 50% 34%, color-mix(in srgb, var(--gold) 30%, transparent), transparent 72%);
  filter: blur(18px);
  animation: portraitGlow 7.5s var(--ease) infinite alternate;
}
@keyframes portraitGlow { from { opacity: 0.5; } to { opacity: 1; } }
/* a second, faint moon-window ring for depth */
.split--about .portrait::before {
  content: ""; position: absolute; inset: -13px -13px -9px -13px; pointer-events: none;
  border: 1px solid color-mix(in srgb, var(--gold) 26%, transparent);
  border-radius: 999px 999px calc(var(--radius-card) + 13px) calc(var(--radius-card) + 13px);
}
/* crescent-and-stars crown at the apex of the arch */
.portrait__crown {
  position: absolute; top: clamp(-36px, -4.5vw, -22px); left: 50%; transform: translateX(-50%);
  width: clamp(62px, 20%, 90px); height: auto; color: var(--gold); z-index: 3; pointer-events: none;
  filter: drop-shadow(0 0 7px color-mix(in srgb, var(--gold) 68%, transparent));
}
@media (prefers-reduced-motion: reduce) { .portrait__halo { animation: none; } }

/* ==========================================================================
   SCORPIO (2026-07-08) — Melissa's sign, woven faintly into her section.
   Her Scorpius constellation drifts in the About background; Antares (the
   scorpion's heart) carries a whisper of rose.
   ========================================================================== */
#about { position: relative; isolation: isolate; }
.about__scorpius {
  position: absolute; z-index: -1; pointer-events: none;
  width: clamp(150px, 20vw, 250px); height: auto;
  top: clamp(1.5rem, 7vw, 4.5rem); right: clamp(0.75rem, 2.5vw, 2.5rem);
  color: var(--gold); opacity: 0.2;
  filter: drop-shadow(0 0 5px color-mix(in srgb, var(--gold) 40%, transparent));
  -webkit-mask-image: radial-gradient(125% 120% at 62% 32%, #000 42%, transparent 84%);
          mask-image: radial-gradient(125% 120% at 62% 32%, #000 42%, transparent 84%);
}
.about__scorpius .antares { fill: color-mix(in srgb, var(--gold) 55%, #c67d70); }
@media (prefers-reduced-motion: no-preference) {
  .about__scorpius { animation: scorpTwinkle 9s var(--ease) infinite alternate; }
}
@keyframes scorpTwinkle { from { opacity: 0.13; } to { opacity: 0.24; } }

/* ==========================================================================
   HERO — spacey orbital portrait (2026-07-08). The pink headshot as a
   luminous "planet" ringed by rotating orbits, a travelling moon, and a
   gold halo. Overrides the old rectangular hero photo treatment.
   ========================================================================== */
.hero__orbit {
  position: relative; display: grid; place-items: center; overflow: visible !important;
  width: 100%; max-width: 500px; aspect-ratio: 1; margin-inline: auto;
  isolation: isolate; animation: none !important;
}
.hero__orbit::before, .hero__orbit::after { content: none !important; }
.hero__orbit > * { grid-area: 1 / 1; }
/* the portrait, a gold-ringed circle */
.hero__portrait-ring {
  place-self: center; width: 70%; aspect-ratio: 1; border-radius: 50%; padding: 4px; z-index: 3;
  background: linear-gradient(150deg, var(--gold-soft) 0%, var(--gold) 46%, color-mix(in srgb, var(--gold) 45%, #4a3a17) 100%);
  box-shadow: 0 22px 60px -28px rgba(0,0,0,0.85);
}
.hero__orbit .hero__portrait {
  width: 100%; height: 100%; aspect-ratio: 1; border-radius: 50%; object-fit: cover;
  display: block; box-shadow: none; animation: none; outline: none;
}
/* breathing moonlight halo behind her */
.hero__halo {
  place-self: center; width: 82%; aspect-ratio: 1; border-radius: 50%; z-index: 1;
  background: radial-gradient(circle, color-mix(in srgb, var(--gold) 24%, transparent), transparent 68%);
  filter: blur(18px); animation: portraitGlow 7s var(--ease) infinite alternate;
}
/* orbit rings */
.orbit { place-self: center; border-radius: 50%; z-index: 2; pointer-events: none;
  border: 1px solid color-mix(in srgb, var(--gold) 24%, transparent); }
.orbit--a { width: 84%; aspect-ratio: 1; }
.orbit--b { width: 100%; height: 90%; transform: rotate(-15deg);
  border-style: dashed; border-color: color-mix(in srgb, var(--gold) 15%, transparent); }
.orbit--c { width: 93%; aspect-ratio: 1; animation: spin 44s linear infinite; }
.orbit__moon { position: absolute; top: -5px; left: 50%; margin-left: -5px; width: 10px; height: 10px;
  border-radius: 50%; background: radial-gradient(circle at 35% 35%, #fff, var(--gold-soft) 55%, var(--gold));
  box-shadow: 0 0 12px 2px color-mix(in srgb, var(--gold) 65%, transparent); }
@keyframes spin { to { transform: rotate(360deg); } }
/* mobile: her face greets you first, and small */
@media (max-width: 55.99rem) {
  .hero__grid .hero__figure.hero__orbit { order: -1; max-width: 232px; margin-bottom: var(--space-2); }
}
@media (prefers-reduced-motion: reduce) {
  .orbit--c { animation: none; } .hero__halo { animation: none; }
}
/* kill the old rectangular figure box on the orbital hero (radius + halo shadow) */
.hero__figure.hero__orbit { box-shadow: none; border-radius: 0; background: none; }
.hero__figure.hero__orbit { outline: none; }

/* ==========================================================================
   MERAKI — compact it (kill the vertical dead space) + a more bespoke,
   celestial bio treatment (Devon 2026-07-08).
   ========================================================================== */
.meraki { padding-block: clamp(2.25rem, 4.5vw, 3.5rem); }
.meraki__inner { max-width: 40rem; }
.meraki__moons { width: min(12.5rem, 50%); margin-bottom: clamp(0.9rem, 2vw, 1.4rem); }
.meraki__word { font-size: clamp(2.7rem, 1.7rem + 4.8vw, 5rem); }
.meraki__pron { margin-top: var(--space-2); }
.meraki__def { margin-top: clamp(1rem, 2.2vw, 1.5rem); }
.meraki__def--tie { margin-top: var(--space-2); }
.meraki__values { margin-top: clamp(1.2rem, 2.6vw, 1.8rem); }

/* — About bio: centered celestial pull-quote + a moon divider before the seal — */
.body .about__pivot {
  border-left: 0; padding-left: 0; text-align: center;
  margin-block: clamp(1.6rem, 3.6vw, 2.6rem);
  display: flex; align-items: center; justify-content: center; gap: clamp(0.8rem, 2vw, 1.4rem);
  color: var(--gold-soft);
}
.body .about__pivot::before, .body .about__pivot::after {
  content: "\2726"; font-family: var(--font-body); font-style: normal;
  font-size: 0.5em; color: color-mix(in srgb, var(--gold) 70%, transparent); flex: 0 0 auto;
}
.about__bio .about__lic { text-align: center; }
.about__bio .about__lic::before {
  content: "\263E"; display: block; margin: 0 auto 0.5rem;
  color: color-mix(in srgb, var(--gold) 72%, transparent); font-size: 1.15rem;
}

/* ==========================================================================
   HERO ORBIT v2 (2026-07-08) — remove any square framing, make the circles
   far more impressive: shimmering metallic ring, layered orbital planes,
   three glowing planets travelling at different speeds, a breathing aura.
   ========================================================================== */
.hero__aura {
  place-self: center; width: 100%; aspect-ratio: 1; border-radius: 50%; z-index: 0; pointer-events: none;
  background: radial-gradient(circle, color-mix(in srgb, var(--gold) 26%, transparent) 0%, transparent 62%);
  filter: blur(22px); animation: portraitGlow 7s var(--ease) infinite alternate;
}
.orbit { position: relative; }
.orbit--1 { place-self:center; width:80%;  aspect-ratio:1; border-radius:50%; z-index:3;
  border:1px solid  color-mix(in srgb,var(--gold) 30%,transparent); }
.orbit--2 { place-self:center; width:100%; height:80%;   border-radius:50%; z-index:1;
  border:1px solid  color-mix(in srgb,var(--gold) 14%,transparent); transform: rotate(-18deg); }
.orbit--3 { place-self:center; width:90%;  aspect-ratio:1; border-radius:50%; z-index:4;
  border:1px dashed color-mix(in srgb,var(--gold) 24%,transparent); animation: spin 42s linear infinite; }
.orbit--4 { place-self:center; width:96%;  aspect-ratio:1; border-radius:50%; z-index:2;
  border:1px dotted color-mix(in srgb,var(--gold) 20%,transparent); animation: spin 70s linear infinite reverse; }
.orbit--5 { place-self:center; width:100%; aspect-ratio:1; border-radius:50%; z-index:2;
  border:1px dotted color-mix(in srgb,var(--gold) 12%,transparent); animation: spin 112s linear infinite; }
.planet { position:absolute; left:50%; top:-6px; border-radius:50%; }
.planet--1 { width:13px; height:13px; margin-left:-6.5px;
  background: radial-gradient(circle at 34% 30%, #fff, var(--gold-soft) 52%, var(--gold));
  box-shadow: 0 0 14px 2px color-mix(in srgb,var(--gold) 70%,transparent); }
.planet--2 { width:9px; height:9px; margin-left:-4.5px; top:-5px;
  background: radial-gradient(circle at 34% 30%, #fff, var(--moon) 58%, #9fb0cc);
  box-shadow: 0 0 11px 1px color-mix(in srgb,var(--moon) 70%,transparent); }
.planet--3 { width:7px; height:7px; margin-left:-3.5px; top:-4px;
  background: radial-gradient(circle at 34% 30%, var(--gold-soft), var(--gold));
  box-shadow: 0 0 8px 1px color-mix(in srgb,var(--gold) 60%,transparent); }
/* the portrait as a shimmering metallic-gold ring (overrides the old linear ring) */
.hero__portrait-ring { position: relative; width: 68%; aspect-ratio:1; border-radius:50%; padding:5px; z-index:5;
  background: conic-gradient(from 210deg, var(--gold-soft), var(--gold) 18%, #6f561f 34%, var(--gold-soft) 50%, var(--gold) 66%, #6f561f 82%, var(--gold-soft));
  box-shadow: 0 0 74px -10px color-mix(in srgb,var(--gold) 46%,transparent), 0 24px 60px -30px rgba(0,0,0,.85); }
.hero__portrait-shimmer { position:absolute; inset:-1px; border-radius:50%; z-index:1; pointer-events:none;
  background: conic-gradient(from 0deg, transparent 0%, rgba(255,247,224,.9) 7%, transparent 18%, transparent 52%, rgba(255,247,224,.55) 60%, transparent 72%);
  -webkit-mask: radial-gradient(circle, transparent 0 calc(50% - 7px), #000 calc(50% - 6px));
          mask: radial-gradient(circle, transparent 0 calc(50% - 7px), #000 calc(50% - 6px));
  animation: spin 8s linear infinite; }
.hero__orbit .hero__portrait { position: relative; z-index:2; width:100%; height:100%; aspect-ratio:1; border-radius:50%; object-fit:cover; display:block; box-shadow:none; animation:none; outline:none; }
@media (prefers-reduced-motion: reduce) {
  .hero__aura, .orbit--3, .orbit--4, .orbit--5, .hero__portrait-shimmer { animation: none; }
}

/* ==========================================================================
   POLISH PASS v3 (2026-07-08) — bigger hero portrait, 4-up gallery, meraki
   type harmonized with the body copy, tighter homepage rhythm.
   ========================================================================== */

/* — bigger hero portrait (keep the orbits clear of it) — */
.hero__orbit { max-width: 540px; }
.hero__portrait-ring { width: 74%; }
.orbit--1 { width: 84%; }
.orbit--3 { width: 92%; }

/* — gallery: 4 across on desktop (the massage photo leads), 2 on tablet — */
@media (min-width: 48rem)   { .gallery { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 60rem)   { .gallery { grid-template-columns: repeat(4, 1fr); } }
.gallery figure.is-art img { object-fit: cover; padding: 0; }   /* keep all four filling their frames */

/* — meraki: the WORD stays the serif feature; its definition now matches the
     body copy below (same family + weight + colour), so it reads as one system — */
.meraki__def {
  font-family: var(--font-body); font-style: normal; font-weight: 400;
  font-size: clamp(1.12rem, 1.0rem + 0.5vw, 1.32rem); line-height: 1.65;
  color: color-mix(in srgb, var(--muted) 84%, var(--cream)); max-width: 46ch;
}
.meraki__def--tie {
  font-family: var(--font-body); font-style: italic;
  font-size: clamp(1rem, 0.94rem + 0.35vw, 1.15rem); line-height: 1.6; color: var(--muted); max-width: 48ch;
}
.meraki__pron { font-family: var(--font-body); letter-spacing: var(--track-label); text-transform: uppercase; font-size: var(--fs-eyebrow); }
.meraki__pron .lang { color: var(--gold); }

/* — meraki sits close under the hero portrait — */
.hero { padding-block-end: clamp(2rem, 4vw, 3rem); }
.section.meraki { padding-block-start: clamp(1.5rem, 3vw, 2.5rem); }

/* — more subtle constellations, woven across the page for a complete feel — */
.meraki, #help, #book { position: relative; isolation: isolate; }
.constellation {
  position: absolute; z-index: -1; pointer-events: none; color: var(--gold);
  width: clamp(140px, 15vw, 220px); height: auto;
  filter: drop-shadow(0 0 4px color-mix(in srgb, var(--gold) 34%, transparent));
  -webkit-mask-image: radial-gradient(120% 120% at 52% 38%, #000 42%, transparent 84%);
          mask-image: radial-gradient(120% 120% at 52% 38%, #000 42%, transparent 84%);
}
.constellation--tr { top: clamp(1.5rem, 5vw, 3.5rem); right: clamp(0.75rem, 3vw, 3rem); }
.constellation--bl { bottom: clamp(1.5rem, 5vw, 3.5rem); left: clamp(0.75rem, 3vw, 3rem); }
@media (prefers-reduced-motion: no-preference) { .constellation { animation: scorpTwinkle 11s var(--ease) infinite alternate; } }
@media (prefers-reduced-motion: reduce) { .constellation { opacity: 0.16; } }

/* — tighter, more intentional vertical rhythm (less cavernous / templated) — */
:root { --section-y: clamp(2.75rem, 6.5vw, 6.5rem); }
.section__head { margin-bottom: clamp(1.6rem, 3.6vw, 2.6rem); }
.section__head .h1 + .lead, .section__head .lead { margin-top: var(--space-2); }
/* section eyebrow + heading sit closer, read as one unit */
.section__head .eyebrow { margin-bottom: 0.85rem; }

/* ==========================================================================
   HERO + ABOUT COPY FLOW (2026-07-09) — break dense text into a breathing,
   elegant hierarchy (Devon: "these words don't feel right / make it flow").
   ========================================================================== */
/* hero: a calmer headline + a lead promise and a quieter supporting line */
.hero__title { font-size: clamp(2.55rem, 1.3rem + 4.4vw, 4.6rem); line-height: 1.0; }
.hero__sub { max-width: 42ch; margin-bottom: 0; }
.hero__sub2 {
  margin-top: clamp(1rem, 2vw, 1.4rem); max-width: 46ch;
  font-size: clamp(1rem, 0.93rem + 0.38vw, 1.14rem); line-height: 1.62;
  color: color-mix(in srgb, var(--muted) 92%, var(--cream));
}
.hero__sub2 .gold { font-weight: 500; }
.hero__sub, .hero__sub2 { text-wrap: pretty; }
/* the actions get a touch more air now that the copy breathes */
.hero .actions { margin-top: clamp(1.6rem, 3vw, 2.2rem); }

/* Meet Your Therapist: a lighter, more graceful opening statement (was a big
   6-line centred block competing with the bio) */
.about__why {
  font-size: clamp(1.28rem, 1.05rem + 0.85vw, 1.62rem);
  max-width: 40ch; line-height: 1.46; text-wrap: balance;
  margin-block: clamp(1.4rem, 3vw, 2.2rem) clamp(2rem, 4.5vw, 3.25rem);
}
#about .section__head { margin-bottom: clamp(1.4rem, 3vw, 2.2rem) !important; }
.about__role { margin-top: 0.4rem; }

/* ==========================================================================
   CENTERED-RUN REFLOW (2026-07-09) — the meraki / featured review / Meet-Your-
   Therapist stretch read as three centred "islands" stacked down the middle.
   Give the run rhythm and structure to match the confident, asymmetric layouts
   elsewhere: an editorial two-column definition, one focal centred testimonial,
   and a left-anchored therapist masthead flowing into the split.
   ========================================================================== */

/* -- meraki: an editorial "dictionary entry" that uses the full width ------ */
.meraki { text-align: left; }
.meraki__inner { max-width: 60rem; margin-inline: 0; }
.meraki__moons { margin-inline: 0; width: min(13rem, 78%); }
.meraki__word { font-size: clamp(3rem, 1.9rem + 5vw, 5.6rem); }
.meraki__pron { text-align: left; }
.meraki__def, .meraki__def--tie { margin-inline: 0; max-width: 46ch; text-align: left; }
.meraki__meaning > .meraki__def:first-child { margin-top: 0; }
.meraki__values { justify-content: flex-start; }
@media (min-width: 52rem) {
  .meraki__inner {
    display: grid; align-items: center;
    grid-template-columns: auto minmax(0, 1fr);
    gap: clamp(2rem, 4vw, 3.25rem);
  }
  .meraki__meaning {
    border-left: 1px solid color-mix(in srgb, var(--gold) 20%, transparent);
    padding-left: clamp(2rem, 4vw, 3.25rem);
  }
}

/* -- Featured review: the single, deliberate centred moment of the run ----- */
.fproof { position: relative; }
.fproof::before {
  content: "\201C"; display: block;
  font-family: var(--font-display); font-style: italic; font-weight: 500;
  font-size: clamp(3.4rem, 6vw, 5.5rem); line-height: 0.5; color: var(--gold);
  opacity: 0.5; margin-bottom: 0.32em;
  text-shadow: 0 0 28px color-mix(in srgb, var(--gold) 42%, transparent);
}

/* -- Meet Your Therapist: a left-anchored editorial masthead + lead -------- */
.about__head { text-align: left; margin-inline: 0; }
.about__head .eyebrow { display: inline-flex; align-items: center; gap: 0.9rem; }
.about__head .eyebrow::after {
  content: ""; width: 2.5rem; height: 1px;
  background: color-mix(in srgb, var(--gold) 55%, transparent);
  box-shadow: 0 0 8px color-mix(in srgb, var(--gold) 50%, transparent);
}
.about__why { text-align: left; margin-inline: 0; max-width: 56ch; text-wrap: pretty; }

/* ==========================================================================
   HERO REFINEMENT (2026-07-11) — full-width single-line tagline, portrait
   byline (her name moved out of the crowded top-left), and ONE quiet,
   luxurious booking CTA above the fold (ghost-gold, whisper not shout).
   ========================================================================== */

/* — tagline: first row of the hero grid, spanning both columns — */
.hero__grid .hero__eyebrow { margin-bottom: 0; }
@media (min-width: 56rem) {
  .hero__grid { row-gap: 0; }
  .hero__grid .hero__eyebrow {
    grid-column: 1 / -1;
    align-self: start;
    white-space: nowrap;           /* one line on desktop, always */
    max-width: none;
    letter-spacing: 0.12em;
    font-size: clamp(0.7rem, 0.88vw, 0.8125rem);  /* eases down before it could ever wrap */
    margin-bottom: clamp(1.5rem, 2.6vw, 2.25rem);
  }
}
/* mobile: wrap gracefully, balanced around the interpuncts */
@media (max-width: 55.99rem) {
  .hero__grid .hero__eyebrow { text-wrap: balance; max-width: 34ch; }
}

/* — her byline beneath the portrait: one tight, centered unit (per Melissa:
     tighter line spacing, everything centered, sitting close under the pic) — */
.hero__byline {
  position: absolute; top: 100%; left: 0; right: 0;
  /* the orbit figure extends 13% (of its width) past the photo's bottom edge;
     the % margin pulls the byline up so it hugs the pic itself */
  margin-top: calc(0.75rem - 13%);
  display: grid; gap: 0.3rem; justify-items: center; text-align: center;
  z-index: 6;  /* above the orbit rings + travelling planets */
}
/* her name leads: larger, serif, gold */
.hero__byline-name {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(1.2rem, 1.05rem + 0.55vw, 1.45rem); line-height: 1.1;
  letter-spacing: 0.02em; color: var(--gold);
}
/* her title beneath: smaller small-caps in moonlight silver (distinct from the gold) */
.hero__byline-title {
  font-family: var(--font-body); font-size: 0.72rem; font-weight: 600;
  letter-spacing: 0.18em; text-transform: uppercase; line-height: 1.35;
  color: color-mix(in srgb, var(--moon) 82%, transparent);
  max-width: 32ch;
}
/* fainter, smaller, tightly stacked: Est. 2021 + license numbers */
.hero__byline-sub {
  font-size: 0.7rem; letter-spacing: 0.09em; line-height: 1.15;
  color: color-mix(in srgb, var(--muted) 72%, transparent);
}
.hero__byline-sub + .hero__byline-sub { margin-top: -0.16rem; }
.hero__figure.hero__orbit { margin-bottom: 3.4rem; }  /* reserves room for the byline */
@media (max-width: 55.99rem) {
  .hero__grid .hero__figure.hero__orbit { margin-bottom: 3.4rem; }
}

/* — the one booking CTA: thin gold line, uppercase whisper, calm hover — */
.btn--luxe {
  border: 1px solid color-mix(in srgb, var(--gold) 45%, transparent);
  background: transparent; color: var(--gold-soft);
  font-size: 0.84rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase;
  padding: 1.02rem 2.2rem;
  transition: border-color 340ms var(--ease), background 340ms var(--ease),
              color 340ms var(--ease), box-shadow 340ms var(--ease);
}
@media (hover: hover) {
  .btn--luxe:hover {
    border-color: color-mix(in srgb, var(--gold) 80%, transparent);
    background: color-mix(in srgb, var(--gold) 7%, transparent);
    box-shadow: 0 0 36px -14px color-mix(in srgb, var(--gold) 60%, transparent);
    transform: none;
  }
}
.hero__alt { font-size: var(--fs-small); color: var(--muted); }
.hero__alt:hover { color: var(--gold-soft); }
.nowrap { white-space: nowrap; }

/* ==========================================================================
   REVIEW PULL-QUOTES (2026-07-11) — real client words scattered into quiet
   corners of the page. One per section, one consistent voice: gold star row,
   italic serif quote, small-caps attribution. Plus the aggregate trust line
   inside the featured band.
   ========================================================================== */
.pullquote {
  max-width: 44rem;
  margin: clamp(2.75rem, 6vw, 4rem) auto 0;
  text-align: center;
}
.pullquote__stars {
  display: block; margin-bottom: var(--space-2);
  color: var(--gold); font-size: 0.95rem; letter-spacing: 0.24em;
  text-shadow: 0 0 12px color-mix(in srgb, var(--gold) 50%, transparent);
}
.pullquote__quote {
  font-family: var(--font-display); font-style: italic; font-weight: 500;
  font-size: clamp(1.28rem, 1.08rem + 0.75vw, 1.62rem); line-height: 1.45;
  color: color-mix(in srgb, var(--muted) 42%, var(--cream));
  text-wrap: pretty;
}
.pullquote__by {
  margin-top: var(--space-2);
  font-size: var(--fs-eyebrow); letter-spacing: var(--track-label);
  text-transform: uppercase; font-weight: 600; color: var(--gold);
}
/* variant: left-anchored (sits inside the Visit info column) */
.pullquote--left { text-align: left; margin-inline: 0; max-width: 40rem; margin-top: clamp(2rem, 4vw, 2.75rem); }
.pullquote--left .pullquote__quote { font-size: clamp(1.18rem, 1.04rem + 0.5vw, 1.4rem); }
/* variant: compact (inside the tighter referral band) */
.pullquote--compact { max-width: 36rem; margin-top: clamp(2.25rem, 4.5vw, 3rem); }
.pullquote--compact .pullquote__quote { font-size: clamp(1.18rem, 1.04rem + 0.5vw, 1.4rem); }

/* aggregate trust line, quietly closing the featured review band */
.fproof__aggregate {
  margin-top: var(--space-3); padding-top: var(--space-3);
  border-top: 1px solid var(--line-soft);
  font-size: var(--fs-small); color: var(--muted); letter-spacing: 0.015em;
}
.fproof__aggregate strong { color: var(--cream); font-weight: 600; }
.fproof__aggregate .stars { font-size: 0.85rem; letter-spacing: 0.2em; display: inline; }
.fproof__aggregate-em { font-family: var(--font-display); font-style: italic; font-size: 1.12em; color: color-mix(in srgb, var(--muted) 50%, var(--cream)); }

/* ==========================================================================
   ABOUT BIO RESTRUCTURE (2026-07-11) — the wall of text becomes short
   scannable blocks under small gold subheads.
   ========================================================================== */
.about__bio .bio-sub {
  margin: clamp(1.9rem, 3.6vw, 2.6rem) 0 0.8rem;
  display: flex; align-items: center; gap: 0.8rem;
  font-family: var(--font-body); font-size: var(--fs-eyebrow);
  letter-spacing: var(--track-label); text-transform: uppercase;
  font-weight: 600; color: var(--gold); line-height: 1.3;
}
.about__bio .bio-sub::after {
  content: ""; flex: 0 0 2rem; height: 1px;
  background: color-mix(in srgb, var(--gold) 45%, transparent);
  box-shadow: 0 0 8px color-mix(in srgb, var(--gold) 40%, transparent);
}
.about__bio .bio-sub + p { margin-top: 0; }

/* ==========================================================================
   PHOTO PLACEMENT (2026-07-11, per Melissa) — her studio portrait sits beside
   the bio where she tells her story (#about); the candlelit massage-table
   photo leads the gallery; Visit returns to a clean info | map pair.
   Gallery is a 3-up row from tablet up (massage-table photo now lives in
   #help as .help__scene).
   ========================================================================== */
@media (min-width: 48rem) { .gallery { grid-template-columns: repeat(3, 1fr); } }

/* ==========================================================================
   /BOOK LANDING PAGE (2026-07-11) — the destination for every booking CTA.
   Two data-driven service cards (js/book.js), duration rows as full links,
   guidance line, gift row. Onyx + gold + celestial restraint.
   ========================================================================== */
.book-hero { text-align: center; padding-block: clamp(2.5rem, 6vw, 4.5rem) 0; }
.book-hero .eyebrow { display: inline-flex; align-items: center; gap: 0.9rem; margin-bottom: var(--space-2); }
.book-hero .eyebrow::before, .book-hero .eyebrow::after {
  content: ""; width: 1.75rem; height: 1px;
  background: color-mix(in srgb, var(--gold) 55%, transparent);
  box-shadow: 0 0 8px color-mix(in srgb, var(--gold) 50%, transparent);
}
.book-hero__sub { margin: var(--space-2) auto 0; max-width: 44ch; }

.book-services { padding-block: clamp(2.5rem, 5vw, 4rem); }
.bgrid { display: grid; gap: var(--space-3); max-width: 62rem; margin-inline: auto; }
@media (min-width: 52rem) { .bgrid { grid-template-columns: 1fr 1fr; align-items: stretch; } }

.bcard {
  position: relative; display: flex; flex-direction: column;
  background: var(--panel); border: 1px solid var(--line-soft);
  border-radius: var(--radius-card); padding: var(--card-pad);
}
.bcard--flagship {
  background: color-mix(in srgb, var(--gold) 5%, var(--panel));
  border-color: color-mix(in srgb, var(--gold) 55%, transparent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--gold) 20%, transparent),
              0 0 44px -20px color-mix(in srgb, var(--gold) 45%, transparent),
              0 28px 56px -40px rgba(0, 0, 0, 0.8);
}
.bcard__kind {
  margin-bottom: var(--space-2);
  font-size: var(--fs-eyebrow); letter-spacing: var(--track-label);
  text-transform: uppercase; font-weight: 600;
}
.bcard__kind--therapeutic { color: var(--gold); }
.bcard__kind--relax { color: var(--moon); }
.bcard__name { color: var(--cream); margin-bottom: 0.3rem; }
.bcard__sub { font-family: var(--font-display); font-style: italic; font-size: 1.15rem; color: var(--muted); margin-bottom: var(--space-2); }
.bcard__desc { color: var(--muted); font-size: var(--fs-small); line-height: 1.65; flex: 1; }

.bcard__rows { margin-top: var(--space-4); display: grid; gap: 0.7rem; }
.bcard__rows-label {
  font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: color-mix(in srgb, var(--muted) 80%, var(--cream)); font-weight: 600;
  margin-bottom: 0.1rem;
}
.bcard__row {
  display: flex; align-items: baseline; gap: 0.8rem;
  border: 1px solid var(--line-soft); border-radius: var(--radius-tile);
  padding: 0.9rem 1.05rem;
  background: color-mix(in srgb, var(--cream) 3%, transparent);
  transition: border-color 260ms var(--ease), background 260ms var(--ease),
              box-shadow 260ms var(--ease), transform 200ms var(--ease);
}
.bcard__dur { font-size: var(--fs-small); font-weight: 600; color: var(--cream); white-space: nowrap; }
.bcard__leader { flex: 1; border-bottom: 1px dotted color-mix(in srgb, var(--gold) 30%, transparent); transform: translateY(-0.28em); }
.bcard__price { font-family: var(--font-display); font-size: 1.4rem; font-weight: 600; color: var(--gold); line-height: 1; }
.bcard__go { color: color-mix(in srgb, var(--gold) 70%, transparent); font-size: 0.95rem; transition: transform 200ms var(--ease), color 200ms var(--ease); }
@media (hover: hover) {
  .bcard__row:hover {
    border-color: var(--gold);
    background: color-mix(in srgb, var(--gold) 8%, transparent);
    box-shadow: 0 0 24px -12px color-mix(in srgb, var(--gold) 55%, transparent);
  }
  .bcard__row:hover .bcard__go { color: var(--gold-soft); transform: translate(2px, -2px); }
}
.bcard__nslist { display: grid; gap: 0.6rem; margin-top: var(--space-2); }

.book-guide { max-width: 46rem; margin: clamp(2.5rem, 5vw, 3.5rem) auto 0; text-align: center; }
.book-guide__label { display: block; margin-bottom: var(--space-2); }
.book-guide__line { color: var(--muted); font-size: var(--fs-small); line-height: 1.7; text-wrap: pretty; }

.book-gift { padding-block: 0 clamp(3.5rem, 7vw, 5.5rem); }
.book-gift__row {
  max-width: 62rem; margin-inline: auto;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3);
  border-top: 1px solid var(--line-soft);
  padding-top: clamp(2rem, 4vw, 2.75rem);
}
.book-gift__line { color: var(--muted); font-size: var(--fs-small); max-width: 46ch; }
.book-gift__line .gold { font-family: var(--font-display); font-style: italic; font-size: 1.35em; margin-right: 0.35rem; }
@media (max-width: 40rem) { .book-gift__row { justify-content: center; text-align: center; } }

.book-footer { margin-top: 0; }
/* the slim book-page nav shows at every width (base .nav is desktop-only) */
.nav--book { display: flex !important; gap: clamp(1rem, 2.2vw, 1.9rem); align-items: center; }
.nav--book a {
  font-size: var(--fs-eyebrow); letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--muted); font-weight: 600; padding-block: 0.4rem;
  transition: color var(--ease) 160ms;
}
.nav--book a:hover { color: var(--cream); }
@media (max-width: 30rem) { .nav--book a:not(:first-child) { display: none; } }

/* ==========================================================================
   ABOUT MASTHEAD REFINEMENT (2026-07-11) — clearer hierarchy for the
   "Meet Your Therapist" stack: name leads, the credential line becomes a
   quiet small-caps role, and a short gold hairline hands off to the epigraph.
   ========================================================================== */
.about__role {
  margin-top: 0.85rem;
  font-family: var(--font-body); font-size: 0.8rem; font-weight: 600;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: color-mix(in srgb, var(--gold) 55%, var(--muted));
}
.about__why::before {
  content: ""; display: block; width: 3rem; height: 1px;
  margin-bottom: clamp(1.1rem, 2.4vw, 1.6rem);
  background: color-mix(in srgb, var(--gold) 55%, transparent);
  box-shadow: 0 0 8px color-mix(in srgb, var(--gold) 45%, transparent);
}

/* ==========================================================================
   FEATURED CARD CALMED (2026-07, per Devon) — the Mike O. band was dominating
   its run. Tighter width, calmer padding, type, flourish, and glow so it
   matches the visual weight of the meraki and About sections around it.
   ========================================================================== */
.featured-proof { padding-block: clamp(2rem, 4.5vw, 3.25rem); }
.fproof {
  max-width: 58rem;
  padding: clamp(1.5rem, 3.2vw, 2.3rem) clamp(1.2rem, 3.4vw, 2.8rem);
  border-radius: var(--radius-card);
  outline-offset: 6px;
  box-shadow:
    0 0 44px -24px color-mix(in srgb, var(--gold) 40%, transparent),
    0 22px 48px -40px rgba(0, 0, 0, 0.85);
}
.fproof::before { font-size: clamp(2.4rem, 3.6vw, 3.4rem); opacity: 0.45; margin-bottom: 0.28em; }
.fproof .stars { font-size: 0.95rem; letter-spacing: 0.2em; margin-bottom: var(--space-2); }
.fproof__quote { font-size: clamp(1.12rem, 0.98rem + 0.55vw, 1.4rem); line-height: 1.5; }
.fproof__by { margin-top: var(--space-2); }
.fproof__aggregate { margin-top: var(--space-2); padding-top: var(--space-2); font-size: 0.85rem; }

/* ==========================================================================
   HELP PROOF (2026-07, per Devon) — the candlelit deep-tissue photo (Melissa
   working on a client's back) finds its contextual home in "Where Deep
   Tissue Makes the Biggest Difference", paired with Dave P.'s words.
   Full 4:5 crop so the client is visible, standard gold frame language.
   ========================================================================== */
.help__proof {
  display: grid; gap: clamp(1.75rem, 4vw, 3rem); align-items: center;
  max-width: 30rem; margin: clamp(2.75rem, 5.5vw, 4rem) auto 0;
}
@media (min-width: 52rem) {
  .help__proof { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); max-width: 58rem; }
}
.help__scene { margin: 0; }
.help__scene img {
  width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 42%;
  border-radius: 999px 999px var(--radius-card) var(--radius-card);
  outline: 1px solid color-mix(in srgb, var(--gold) 38%, transparent);
  outline-offset: clamp(6px, 1.1vw, 10px);
  box-shadow: 0 0 44px -18px color-mix(in srgb, var(--gold) 34%, transparent);
}
.help__proof-quote { margin-top: 0; }

/* help lead reads as a 3-4 line thought, not a paragraph block */
.help__lead { max-width: 74ch; }

/* license numbers under the hero byline: small, muted, quiet */
/* reserve room for the byline that now tucks up under the photo */
.hero__figure.hero__orbit { margin-bottom: 2.6rem; }
@media (max-width: 55.99rem) {
  .hero__grid .hero__figure.hero__orbit { margin-bottom: 5.5rem; }
}

/* ==========================================================================
   MEET YOUR THERAPIST — approved-copy rebuild (2026-07, Gate 2).
   Heading is the section title; her name lives in a tight, centered caption
   under the portrait. Serif subheads, a gold skim path (all >= 24px), and
   one hero pull-quote: "Deep tissue doesn't have to hurt."
   ========================================================================== */

/* — caption: one tight unit, centered, directly under the image — */
.portrait__cap {
  position: absolute; top: 100%; left: 0; right: 0;
  margin-top: 0.85rem;
  display: grid; gap: 0.28rem; justify-items: center;
  text-align: center; line-height: var(--lh-caption);
}
.portrait__cap-name { font-family: var(--font-display); font-weight: 600; font-size: 1.22rem; color: var(--cream); }
.portrait__cap-role {
  font-family: var(--font-body); font-size: 0.76rem; font-weight: 600;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: color-mix(in srgb, var(--gold) 60%, var(--muted));
}
.split--about .portrait { margin-bottom: 4.4rem; } /* reserves room for the absolute caption */

/* — subheads: Cormorant, cream, keep the gold hairline from the base rule — */
.about__bio .bio-sub {
  font-family: var(--font-display); font-size: var(--fs-sub-serif); font-weight: 600;
  letter-spacing: 0.01em; text-transform: none; color: var(--cream);
}

/* — inline skim phrases: gold serif italic, never below 24px — */
.about__bio .skim {
  font-family: var(--font-display); font-style: italic; font-weight: 500;
  font-size: var(--fs-skim); line-height: 1.15; color: var(--gold);
}

/* — the creed: largest element after the section heading — */
.about__kicker { margin-top: var(--space-3); font-style: italic; color: var(--muted); }
.about__creed {
  display: grid; justify-items: center; gap: clamp(0.7rem, 1.6vw, 1rem);
  margin-block: clamp(1.3rem, 2.8vw, 2rem);
}
.about__creed p {
  font-family: var(--font-display); font-style: italic; font-weight: 500;
  font-size: var(--fs-quote-pull); line-height: 1.08; text-align: center; text-wrap: balance;
  color: var(--gold);
  text-shadow: 0 0 32px color-mix(in srgb, var(--gold) 28%, transparent);
}
.about__creed::before, .about__creed::after {
  content: ""; width: 3.5rem; height: 1px;
  background: color-mix(in srgb, var(--gold) 50%, transparent);
  box-shadow: 0 0 8px color-mix(in srgb, var(--gold) 45%, transparent);
}

/* ==========================================================================
   SKY INK (2026-07, per Melissa) — faint constellations echoing her shoulder
   tattoo (scorpius chain, radiant sun, crescent, sparkles) woven into the
   fixed night-sky wallpaper. Whisper-quiet, slow breathing.
   ========================================================================== */
.sky__ink {
  position: absolute; inset: 0; width: 100%; height: 100%;
  color: var(--gold); opacity: 0.09; pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
  .sky__ink { animation: inkBreath 19s ease-in-out -6s infinite alternate; }
}
@keyframes inkBreath { from { opacity: 0.06; } to { opacity: 0.115; } }
@media (prefers-reduced-motion: reduce) { .sky__ink { animation: none; } }

/* the "feel like themselves again" skim phrase always reads as one line */
.skim--oneline { white-space: nowrap; }

/* the hero constellation: its own unscaled svg, anchored under the CTA /
   reviews area, immune to the canvas slice-crop on ultrawide screens */
.hero__canvas .hero__constellation {
  position: absolute; inset: auto;
  left: clamp(0.75rem, 3.5vw, 4rem);
  bottom: clamp(0.75rem, 4.5vh, 2.75rem);
  width: clamp(300px, 34vw, 600px); height: auto;
  opacity: 0.26; animation: none;
}

/* ==========================================================================
   STAR GLINTS (2026-07, per Devon) — every so often a star quietly flares:
   a fine 4-point glint that blooms and fades. Five of them, out of phase,
   so the sky feels alive without ever being busy.
   ========================================================================== */
.sky .glint {
  position: absolute; width: 18px; height: 18px; opacity: 0; pointer-events: none;
  color: #ECF0F8;
  filter: drop-shadow(0 0 6px currentColor);
}
.sky .glint::before, .sky .glint::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 1.5px; height: 100%; border-radius: 2px;
  transform: translate(-50%, -50%);
  background: linear-gradient(to bottom, transparent, currentColor 42%, #fff 50%, currentColor 58%, transparent);
}
.sky .glint::after { transform: translate(-50%, -50%) rotate(90deg); }
@keyframes glintFlash {
  0%, 86%, 100% { opacity: 0; transform: scale(0.25) rotate(0deg); }
  90%           { opacity: 0.9; transform: scale(1) rotate(18deg); }
  95%           { opacity: 0.15; transform: scale(0.5) rotate(30deg); }
}
.sky .glint:nth-of-type(1) { top: 16%; left: 11%; animation: glintFlash 13s ease-in-out -3s infinite; }
.sky .glint:nth-of-type(2) { top: 8%;  left: 63%; width: 13px; height: 13px; color: #DCC07F; animation: glintFlash 17s ease-in-out -9s infinite; }
.sky .glint:nth-of-type(3) { top: 42%; left: 90%; width: 15px; height: 15px; animation: glintFlash 21s ease-in-out -14s infinite; }
.sky .glint:nth-of-type(4) { top: 74%; left: 7%;  width: 12px; height: 12px; color: #DCC07F; animation: glintFlash 19s ease-in-out -5s infinite; }
.sky .glint:nth-of-type(5) { top: 85%; left: 72%; width: 14px; height: 14px; animation: glintFlash 23s ease-in-out -17s infinite; }
@media (prefers-reduced-motion: reduce) { .sky .glint { display: none; } }