/* design-systems/editorial/tokens.css
 * Structured token bindings for Editorial.
 * editorial publishing language with warm paper surfaces, serif display type, and composed story cards.
 */

:root {
  --bg: #fbf7f0;
  --surface: #fffdf8;
  --surface-warm: #f1e6d6;
  --fg: #1f1a16;
  --fg-2: #4b4038;
  --muted: #7d7168;
  --meta: #9a5a2f;
  --border: #ded3c5;
  --border-soft: #eee5da;
  --accent: #9a5a2f;
  --accent-on: #ffffff;
  --accent-hover: color-mix(in oklab, var(--accent), black 8%);
  --accent-active: color-mix(in oklab, var(--accent), black 14%);
  --success: #4f8a4f;
  --warn: #c9822f;
  --danger: #b33a3a;
  --font-display: Georgia, "Times New Roman", serif;
  --font-body: "Source Serif Pro", Georgia, serif;
  --font-mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
  --text-xs: 12px;
  --text-sm: 14px;
  --text-base: 18px;
  --text-lg: 21px;
  --text-xl: 30px;
  --text-2xl: 44px;
  --text-3xl: 66px;
  --text-4xl: 92px;
  --leading-body: 1.65;
  --leading-tight: 1;
  --tracking-display: -0.02em;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --section-y-desktop: 112px;
  --section-y-tablet: 80px;
  --section-y-phone: 56px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-pill: 9999px;
  --elev-flat: none;
  --elev-ring: 0 0 0 1px var(--border);
  --elev-raised: 0 20px 50px rgba(31, 26, 22, 0.12);
  --focus-ring: 0 0 0 4px rgba(154, 90, 47, 0.24);
  --motion-fast: 180ms;
  --motion-base: 280ms;
  --ease-standard: cubic-bezier(0.22, 1, 0.36, 1);
  --container-max: 1120px;
  --container-gutter-desktop: 36px;
  --container-gutter-tablet: 24px;
  --container-gutter-phone: 16px;
}

/* OD Home pass: light ivory chrome. Do not invert to Body Lab black. */
:root {
  --bg: #f6f2ea;
  --surface: #fbf7f0;
  --surface-warm: #efe8dc;
  --fg: #2c2824;
  --fg-2: #4a433c;
  --muted: #7a7268;
  --meta: #b8956a;
  --border: #e4dccf;
  --border-soft: #eee6da;
  --accent: #cbb892;
  --accent-on: #2c2824;
  --ink: #2c2824;
  --ink-2: #1a1a1a;
  --paper: #f6f2ea;
  --navy: #1b2a4a;
  --book: #d4c4a0;
  --book-ink: #3f3a34;
  --font-display: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --font-body: Satoshi, Geist, "Segoe UI", sans-serif;
  --focus-ring: 0 0 0 3px color-mix(in oklab, var(--accent), white 40%);
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --header-height: 136px;
  /* Settled header mark. Home handoff (home-option-d.css) reads this same
     pair, so the lockup matches after the handoff and on every subpage.
     Bumped with the header mark (Elena pack item 11). */
  --logo-lockup: 96px;
  --peel-duration: 360ms;
  color-scheme: light;
}

@media (min-width: 1024px) {
  :root {
    --header-height: 188px;
    --logo-lockup: 116px;
  }
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: auto;
  overflow-x: clip;
  max-width: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 400;
  line-height: var(--leading-body);
  letter-spacing: 0;
  overflow-x: clip;
  max-width: 100%;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: inherit;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
}

a:hover {
  color: var(--fg);
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
iframe:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.skip {
  position: absolute;
  left: -999px;
  top: 0;
}

.skip:focus {
  left: var(--space-4);
  top: var(--space-4);
  z-index: 80;
  background: var(--fg);
  color: var(--bg);
  padding: var(--space-3) var(--space-4);
}

.container {
  width: min(var(--container-max), 100% - 2 * var(--container-gutter-phone));
  margin-inline: auto;
}

@media (min-width: 768px) {
  .container {
    width: min(var(--container-max), 100% - 2 * var(--container-gutter-tablet));
  }
}

@media (min-width: 1024px) {
  .container {
    width: min(var(--container-max), 100% - 2 * var(--container-gutter-desktop));
  }
}

.eyebrow {
  margin: 0 0 var(--space-4);
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg);
}

.lead {
  max-width: 65ch;
  font-size: var(--text-lg);
  line-height: 1.55;
}

h1,
h2,
h3 {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.12;
  margin: 0;
}

h1 {
  font-size: clamp(40px, 6vw, 64px);
}

h2 {
  font-size: clamp(28px, 4vw, 40px);
}

h3 {
  font-size: var(--text-xl);
  letter-spacing: -0.01em;
}

/* Buttons: one primary fill per viewport */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 22px;
  border: 1px solid var(--fg);
  background: transparent;
  color: var(--fg);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--motion-fast) var(--ease-standard),
    color var(--motion-fast) var(--ease-standard),
    border-color var(--motion-fast) var(--ease-standard),
    transform 80ms var(--ease-standard);
}

.btn:hover {
  background: var(--fg);
  color: var(--bg);
}

.btn:active {
  transform: translateY(1px);
}

.btn-primary {
  background: var(--book);
  border-color: var(--book);
  color: var(--book-ink);
}

.btn-primary:hover {
  background: color-mix(in oklab, var(--book), black 8%);
  border-color: color-mix(in oklab, var(--book), black 8%);
  color: var(--book-ink);
}

.btn-primary:active {
  background: color-mix(in oklab, var(--book), black 14%);
  border-color: color-mix(in oklab, var(--book), black 14%);
  color: var(--book-ink);
}

.btn-ghost {
  border-color: color-mix(in oklab, var(--fg), transparent 40%);
  background: transparent;
  color: var(--fg);
}

.btn-ghost:hover {
  background: var(--fg);
  color: var(--bg);
  border-color: var(--fg);
}

.btn-on-dark {
  border-color: var(--bg);
  color: var(--bg);
}

.btn-on-dark:hover {
  background: var(--bg);
  color: var(--fg);
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

/* Header — ivory two-row chrome: logo + Concierge/BOOK/socials/phone, then piped nav */
.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  height: auto;
  background: var(--paper);
  border-bottom: 1px solid var(--border);
}

@media (min-width: 1024px) {
  .site-header {
    height: var(--header-height);
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2px;
  }
}

.header-bar,
.header-inner {
  width: min(1180px, 100% - 32px);
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: nowrap;
  gap: var(--space-4);
  padding: 12px 0 8px;
}

.wordmark {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  text-decoration: none;
}

.wordmark img {
  display: block;
  height: var(--logo-lockup);
  width: auto;
  max-height: var(--logo-lockup);
  object-fit: contain;
}

.nav-piped,
.nav-main {
  display: none;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 0;
  padding: 4px 16px 18px;
}

.nav-piped > a,
.nav-piped > .nav-drop > a,
.nav-main > a {
  position: relative;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  color: #4a433c;
  padding: 8px 14px;
  white-space: nowrap;
}

.nav-piped > * + * {
  position: relative;
}

.nav-piped > * + *::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 1px;
  height: 14px;
  background: #cfc8c0;
  transform: translateY(-50%);
}

.nav-piped > .nav-drop {
  position: relative;
}

.nav-piped > a[aria-current="page"],
.nav-piped > .nav-drop > a[aria-current="page"],
.nav-main a[aria-current="page"] {
  color: var(--fg);
  box-shadow: inset 0 -1px 0 var(--fg);
}

.nav-drop > a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.nav-drop > a .nav-caret {
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid currentColor;
  margin-top: 1px;
}

.nav-flyout {
  display: none;
  position: absolute;
  top: calc(100% - 2px);
  left: 50%;
  transform: translateX(-50%);
  min-width: 268px;
  margin: 0;
  padding: 10px 0;
  list-style: none;
  background: #efe8dc;
  border: 1px solid #e4dccf;
  z-index: 50;
}

.nav-drop:hover > .nav-flyout,
.nav-drop:focus-within > .nav-flyout,
.nav-drop.is-open > .nav-flyout {
  display: block;
}

.nav-flyout a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 18px;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  text-decoration: none;
  color: #2c2824;
}

.nav-flyout a:hover,
.nav-flyout a:focus-visible {
  background: color-mix(in oklab, #efe8dc, black 4%);
}

.nav-flyout a .nav-caret {
  width: 0;
  height: 0;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  border-left: 5px solid #8a8278;
  flex-shrink: 0;
}

.nav-flyout-item {
  position: relative;
}

.nav-subfly {
  display: none;
  position: absolute;
  left: calc(100% - 2px);
  top: 0;
  min-width: 180px;
  margin: 0;
  padding: 8px 0;
  list-style: none;
  background: #efe8dc;
  border: 1px solid #e4dccf;
  z-index: 51;
}

.nav-flyout-item:hover > .nav-subfly,
.nav-flyout-item:focus-within > .nav-subfly,
.nav-flyout-item.is-open > .nav-subfly {
  display: block;
}

.header-utils {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  gap: 16px;
}

.header-concierge {
  display: none;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  color: #8a8278;
  white-space: nowrap;
}

.header-concierge:hover {
  color: var(--fg);
}

.btn.btn-book {
  border-radius: 6px;
  min-height: 40px;
  padding: 0 22px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  background: var(--book);
  border: 1px solid var(--book);
  color: var(--book-ink);
}

.btn.btn-book:hover {
  background: color-mix(in oklab, var(--book), black 8%);
  border-color: color-mix(in oklab, var(--book), black 8%);
  color: var(--book-ink);
}

.header-aside {
  display: none;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
}

.header-social {
  display: flex;
  align-items: center;
  gap: 8px;
}

.header-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: 1px solid #8a8278;
  border-radius: 50%;
  color: #6f6862;
  text-decoration: none;
}

.header-social a:hover {
  color: var(--fg);
  border-color: var(--fg);
}

.header-social svg {
  display: block;
  width: 13px;
  height: 13px;
}

.header-phone {
  font-size: 12px;
  letter-spacing: 0.02em;
  text-decoration: none;
  color: #6f6862;
  white-space: nowrap;
}

.header-phone:hover {
  color: var(--fg);
}

.menu-toggle {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border: 0;
  background: transparent;
  color: var(--fg);
  cursor: pointer;
}

.menu-toggle span,
.menu-toggle span::before,
.menu-toggle span::after {
  display: block;
  width: 18px;
  height: 1px;
  background: currentColor;
  position: relative;
}

.menu-toggle span::before,
.menu-toggle span::after {
  content: "";
  position: absolute;
  left: 0;
}

.menu-toggle span::before {
  top: -6px;
}

.menu-toggle span::after {
  top: 6px;
}

/* Mobile drawer layout is defined in the shared mobile pass below. */
.nav-drawer {
  display: none;
}

.nav-drawer.is-open {
  display: block;
}

.nav-drawer a {
  display: block;
  padding: 12px 0;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  border-bottom: 1px solid var(--border);
}

.nav-drawer .drawer-sub {
  padding-left: 16px;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: none;
  color: var(--fg-2);
}

@media (min-width: 1024px) {
  .nav-piped,
  .nav-main {
    display: flex;
    flex-shrink: 0;
    flex-wrap: nowrap;
    padding: 0 16px 8px;
  }

  .header-bar,
  .header-inner {
    flex: 1;
    padding: 6px 0 2px;
  }

  .header-concierge,
  .header-aside {
    display: flex;
  }

  .menu-toggle,
  .nav-drawer {
    display: none !important;
  }
}

/* Hero */
.hero {
  position: relative;
  min-height: 58vh;
  display: grid;
  place-items: center;
  color: #ffffff;
  isolation: isolate;
  padding: 0;
  margin: 0;
  background: var(--paper);
  overflow-x: clip;
}

.hero-sticky {
  position: sticky;
  top: var(--header-height);
  z-index: 0;
  height: calc(100dvh - var(--header-height));
  min-height: calc(100dvh - var(--header-height));
}

.hero-sticky ~ section {
  position: relative;
  z-index: 1;
  background: var(--paper);
}

.hero-sticky ~ .mid-parallax {
  background: transparent;
  padding: 0;
}

.hero-sticky ~ .over-hero {
  background: transparent;
}

.hero-media {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero-media img,
.hero-media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.hero-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: rgb(17 17 17 / 0.28);
}

.hero-copy {
  position: relative;
  z-index: 2;
  width: min(900px, 100% - 32px);
  padding: 0;
  text-align: center;
}

.hero-sticky .hero-copy::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -40px -28px;
  pointer-events: none;
  background: radial-gradient(ellipse at center, rgb(17 17 17 / 0.52) 0%, rgb(17 17 17 / 0.22) 46%, transparent 74%);
}

@media (min-width: 768px) {
  .hero-sticky .hero-copy::before {
    inset: -56px -48px;
  }
}

.hero-promise .hero-copy {
  position: relative;
  left: auto;
  bottom: auto;
  width: min(920px, 100% - 32px);
  max-width: none;
  text-align: center;
}

.hero-copy .eyebrow {
  color: #ffffff;
  /* .hero-copy p caps this at 62ch. margin: 0 0 14px was pinning that box
     to the left of the centered hero. Auto margins share the title/CTA center.
     padding-left cancels trailing letter-spacing so the line is optically centered. */
  margin: 0 auto 14px;
  max-width: 62ch;
  padding-left: 0.22em;
  text-align: center;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-shadow: 0 1px 16px rgb(17 17 17 / 0.45);
}

.hero-copy h1 {
  margin: 0;
  color: #ffffff;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: -0.02em;
  text-transform: none;
  padding-bottom: 0;
  text-shadow: 0 2px 22px rgb(17 17 17 / 0.5);
}

.hero-copy h1 + .eyebrow {
  margin-top: 22px;
  margin-bottom: 0;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  text-transform: none;
}

/* Hero eyebrow only: larger than the 11px .eyebrow default so the intro
   sentence reads as a lead-in line, not fine print. Sentence-case text is
   unchanged; only size scales with viewport. */
.hero-copy h1 + .eyebrow.hero-eyebrow-lg {
  font-size: clamp(17px, 2vw, 24px);
  line-height: 1.4;
  max-width: 52ch;
}

#suite-stills {
  margin-top: 48px;
}

.hero-promise {
  min-height: 62vh;
}

.hero-page {
  min-height: 42vh;
}

.hero-promise .hero-copy h1,
.hero-page .hero-copy h1 {
  font-size: clamp(36px, 5.2vw, 58px);
}

.hero-promise .hero-copy h1 {
  font-size: clamp(42px, 6.4vw, 76px);
}

.over-hero[data-od-id="featured-treatments"] {
  padding-top: 24px;
}

/* Home: short fade runway so the video reaches ivory before the WE-lines,
   without a near-full-page blank spacer. updateHeroFade() keys opacity to
   when [data-od-id='home-pillars'] reaches the fold. */
.hero-fade-cover {
  height: calc((100dvh - var(--header-height)) * 0.08);
  min-height: 28px;
  pointer-events: none;
}

.hero-page[data-od-id="about-hero"] .hero-media img {
  object-position: 18% 22%;
}

.hero-copy p {
  margin: 18px auto 0;
  max-width: 62ch;
  font-size: 16px;
  line-height: 1.55;
  color: #ffffff;
}

.hero .btn-row {
  justify-content: center;
}

.hero .btn-ghost {
  border-color: #ffffff;
  color: #ffffff;
}

.hero .btn-ghost:hover {
  background: #ffffff;
  color: #111111;
  border-color: #ffffff;
}

.mute {
  display: none;
}

/* Sections */
section {
  padding: var(--section-y-phone) 0;
}

@media (min-width: 768px) {
  section {
    padding: var(--section-y-tablet) 0;
  }
}

@media (min-width: 1024px) {
  section {
    padding: var(--section-y-desktop) 0;
  }
}

.split {
  display: grid;
  gap: var(--space-8);
}

@media (min-width: 900px) {
  .split {
    grid-template-columns: 1fr 1fr;
    gap: 64px;
    align-items: center;
  }
}

.split img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}

.rule {
  height: 1px;
  background: var(--border);
  border: 0;
  margin: 0;
}

.band-ink {
  background: var(--ink);
  color: var(--bg);
}

.band-ink h2,
.band-ink p,
.band-ink a {
  color: var(--bg);
}

.band-soft {
  background: var(--surface-warm);
}

.feature-grid {
  display: grid;
  gap: var(--space-6);
}

.flip-grid {
  display: grid;
  gap: 6px;
  grid-template-columns: 1fr;
}

/* Magazine page curl: assets/magazine-peel.svg on .flip-inner::before.
   .is-flipped (site-nav.js) peels the front off so the back face shows.
   Hover does not open the card. */
.flip-card {
  position: relative;
  aspect-ratio: 1;
  cursor: pointer;
  container-type: size;
}

.flip-card:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.flip-inner {
  position: relative;
  width: 100%;
  height: 100%;
  background: var(--navy);
  overflow: hidden;
}

.flip-face {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

/* Full-bleed photo. The curled corner is the SVG overlay, not a clip. */
.flip-front {
  z-index: 2;
  background: var(--navy);
}

.flip-front img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  aspect-ratio: auto;
}

/* Bottom-third scrim: blue-violet (not flat navy) wash under the front-face
   title/kicker/CTA stack. Taller than a title-only scrim so the stack has
   room without crowding the photo. */
.flip-front::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 52%;
  background: linear-gradient(
    to top,
    rgb(16 32 68 / 0.94) 0%,
    rgb(20 38 78 / 0.78) 32%,
    rgb(24 42 86 / 0.42) 64%,
    rgb(22 36 74 / 0) 100%
  );
  pointer-events: none;
  z-index: 1;
}

/* Front-face copy stack: title immediately followed by the outline pill CTA.
   Positioned once on the wrapper; the pieces
   flow normally inside it and stay non-interactive by default so a click
   anywhere on them still toggles the card — the CTA re-enables its own hit
   box below. */
.flip-front-copy {
  position: absolute;
  left: 20px;
  bottom: 16px;
  right: 22px;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  pointer-events: none;
}

.flip-front-title {
  margin: 0;
  color: #ffffff;
  font-family: var(--font-display);
  font-size: clamp(26px, 2.8vw, 36px);
  font-style: italic;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.08;
  text-align: left;
  opacity: 1;
  visibility: visible;
  text-shadow: 0 1px 18px rgb(17 17 17 / 0.35);
}

.flip-front-kicker,
.flip-front-duration {
  margin: 0;
  color: #ffffff;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: none;
  opacity: 1;
  text-shadow: 0 1px 12px rgb(17 17 17 / 0.35);
}

.flip-front-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 0;
  padding: 9px 18px;
  border: 1px solid #ffffff;
  border-radius: 999px;
  background: transparent;
  color: #ffffff;
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  pointer-events: auto;
  transition: background 180ms var(--ease-standard), color 180ms var(--ease-standard);
}

.flip-front-cta::after {
  content: ">";
  font-size: 12px;
  line-height: 1;
}

.flip-front-cta:hover,
.flip-front-cta:focus-visible {
  background: #ffffff;
  color: var(--navy);
}

.flip-grid.parents .flip-front-copy {
  left: 24px;
  bottom: 20px;
  right: 28px;
}

.flip-grid.parents .flip-front-title {
  font-size: clamp(32px, 3.6vw, 46px);
}

.flip-card-wide .flip-front-copy {
  left: 32px;
  bottom: 24px;
}

.flip-card-wide .flip-front-title {
  font-size: clamp(34px, 4vw, 52px);
}

/* These shortened menu labels stay on one line, sized to the card rather
   than the viewport (including narrow desktop columns and 390px phones). */
.flip-card[data-od-id$="advanced-skin-rejuvenation"] .flip-front-title,
.flip-card[data-od-id$="professional-teeth-whitening"] .flip-front-title {
  white-space: nowrap;
  font-size: min(46px, 7.6cqi);
}

[data-od-id="card-dermaplane-smoothing-facial"] .flip-front-title {
  white-space: nowrap;
  font-size: min(36px, 9cqi);
}

/* Keep the full group photo, with matching blurred photo fill behind it.
   Bottom alignment places the title over the photo, not an empty band. */
[data-od-id="parent-sparties"] .flip-front::before {
  content: "";
  position: absolute;
  inset: -16px;
  z-index: 0;
  background: url("assets/sparties-group.jpg") center / cover no-repeat;
  filter: blur(12px) brightness(0.75);
  pointer-events: none;
}

[data-od-id="parent-sparties"] .flip-front img {
  position: relative;
  z-index: 0;
  object-fit: contain;
  object-position: center bottom;
}

.tx-detail-aside img[src$="/sparties-group.jpg"] {
  aspect-ratio: auto;
  object-fit: contain;
}

.flip-front-title sup {
  font-size: 0.55em;
  font-style: normal;
}

@media (max-width: 767px) {
  .flip-front-copy {
    left: 18px;
    bottom: 14px;
    right: 18px;
    gap: 6px;
  }

  .flip-grid.parents .flip-front-copy,
  .flip-card-wide .flip-front-copy {
    left: 20px;
    bottom: 16px;
    right: 20px;
  }

  .flip-front-cta {
    padding: 7px 14px;
  }
}

.flip-back {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 28px 22px 24px;
  background: var(--navy);
  color: #ffffff;
  text-align: center;
  z-index: 1;
  -webkit-font-smoothing: antialiased;
}

.flip-back > * {
  color: #ffffff;
  opacity: 1;
  visibility: visible;
}

.flip-back h3 {
  margin: 0;
  color: #ffffff;
  font-family: var(--font-display);
  font-size: clamp(22px, 2vw, 28px);
  font-style: italic;
  font-weight: 500;
  letter-spacing: -0.02em;
}

.flip-back p {
  margin: 0;
  max-width: 28ch;
  font-size: 14px;
  line-height: 1.45;
  color: #f3efe8;
}

.flip-back p.flip-blurb {
  max-width: 38ch;
  font-size: 12.5px;
  line-height: 1.4;
}

.flip-back {
  overflow: auto;
}

.btn-learn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 0 18px;
  margin-top: 8px;
  border: 1px solid #ffffff;
  background: transparent;
  color: #ffffff;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
}

.btn-learn:hover {
  background: #ffffff;
  color: var(--navy);
}

.photo-band {
  position: relative;
  display: grid;
  place-items: center;
  isolation: isolate;
  overflow: hidden;
  min-height: 260px;
  height: min(38vh, 400px);
  color: #ffffff;
  text-align: center;
}

.photo-band-media,
.photo-band-scrim {
  position: absolute;
  inset: 0;
}

.photo-band-media {
  z-index: 0;
}

.photo-band-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.photo-band-scrim {
  z-index: 1;
  pointer-events: none;
  background: rgb(17 17 17 / 0.38);
}

.photo-band-copy {
  position: relative;
  z-index: 2;
  width: min(720px, 100% - 32px);
  padding: 28px 12px;
}

.photo-band-copy .eyebrow {
  color: #ffffff;
  text-shadow: 0 1px 16px rgb(17 17 17 / 0.45);
}

.photo-band-copy h2 {
  margin: 0 0 22px;
  color: #ffffff;
  font-style: italic;
  font-weight: 500;
  font-size: clamp(28px, 4vw, 44px);
  line-height: 1.15;
  text-shadow: 0 2px 22px rgb(17 17 17 / 0.5);
}

.photo-band .btn-ghost {
  border-color: #ffffff;
  color: #ffffff;
}

.photo-band .btn-ghost:hover {
  background: #ffffff;
  color: #111111;
  border-color: #ffffff;
}

/* Home mid-page: suite still pins as a short band; ivory Intelligent Aging veil slides over. */
.mid-parallax {
  position: relative;
  padding: 0;
  background: transparent;
  overflow: visible;
}

.mid-parallax-pin {
  position: sticky;
  top: var(--header-height);
  z-index: 0;
  height: min(36dvh, calc(100dvh - var(--header-height)));
  min-height: 160px;
  background: var(--paper);
  pointer-events: none;
}

.mid-parallax-pin img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 42% 22%;
}

.mid-parallax-stage {
  position: relative;
  z-index: 1;
  min-height: 0;
}

.mid-parallax-band {
  display: flex;
  align-items: flex-start;
  background: transparent;
}

.mid-parallax-veil {
  width: 100%;
  padding: 28px clamp(20px, 5vw, 72px) 32px;
  background: color-mix(in srgb, var(--paper) 84%, transparent);
}

.mid-parallax-veil .eyebrow {
  margin: 0 0 16px;
  text-align: left;
  letter-spacing: 0.18em;
  color: var(--fg-2);
}

.mid-parallax-veil h2 {
  margin: 0 0 22px;
  text-align: center;
  font-size: clamp(34px, 4.5vw, 76px);
  letter-spacing: 0.01em;
  font-weight: 500;
  font-style: italic;
  color: var(--navy);
}

.mid-parallax-veil .lead {
  margin: 0 auto;
  max-width: 48ch;
  text-align: center;
  font-size: clamp(18px, 1.6vw, 22px);
  line-height: 1.55;
  color: var(--fg-2);
}

@media (max-width: 639px) {
  .mid-parallax-veil {
    padding: 28px 20px 32px;
  }

  .mid-parallax-veil h2 {
    font-size: clamp(28px, 8vw, 36px);
  }

  .mid-parallax-veil .lead {
    font-size: 17px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mid-parallax {
    display: grid;
  }

  .mid-parallax-pin,
  .mid-parallax-band {
    grid-area: 1 / 1;
  }

  .mid-parallax-pin {
    position: relative;
    top: auto;
    height: min(36dvh, calc(100dvh - var(--header-height)));
  }

  .mid-parallax-band {
    align-items: center;
    min-height: 100%;
  }
}

.book-strip {
  text-align: center;
  background: var(--paper);
  padding: 72px 0;
}

.book-strip h2 {
  font-style: italic;
  font-weight: 500;
}

.book-strip .lead {
  margin: 12px auto 28px;
  max-width: 42ch;
  font-size: 16px;
  color: var(--fg-2);
}

.quote-band {
  text-align: center;
  padding: 24px 0 80px;
}

.quote-band blockquote {
  margin: 0 auto;
  max-width: 52ch;
  border: 0;
  padding: 0;
}

.quote-band p {
  margin: 0;
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(20px, 2.4vw, 28px);
  line-height: 1.45;
  color: var(--fg);
}

.quote-band cite {
  display: block;
  margin-top: 20px;
  font-style: normal;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.suite-split {
  display: grid;
  gap: 40px;
  align-items: center;
}

.suite-split img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center 40%;
}

.suite-split h2 {
  margin-bottom: 16px;
}

.suite-split .lead {
  margin: 0 0 20px;
}

.suite-split .text-link {
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-underline-offset: 0.28em;
}

@media (min-width: 768px) {
  .feature-grid {
    grid-template-columns: 1fr 1fr;
  }

  .flip-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (min-width: 1024px) {
  .feature-grid {
    grid-template-columns: 1fr 1fr 1fr;
  }

  .flip-grid {
    grid-template-columns: 1fr 1fr 1fr;
    gap: 6px;
  }

  .suite-split {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: 64px;
  }
}

.tx-card {
  display: grid;
  gap: var(--space-4);
}

.tx-card img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
}

.tx-card h3 {
  font-size: 26px;
}

.tx-card p {
  margin: 0;
  color: var(--fg-2);
  font-size: 16px;
  max-width: 42ch;
}

.tx-card .meta {
  margin: 0;
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--muted);
}

.tx-links {
  display: flex;
  gap: var(--space-5);
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.certs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4) var(--space-6);
  margin: var(--space-8) 0 0;
  padding: 0;
  list-style: none;
  font-size: 14px;
  letter-spacing: 0.04em;
}

.results-strip {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: 1fr;
}

@media (min-width: 640px) {
  .results-strip {
    grid-template-columns: 1fr 1fr;
  }
}

@media (min-width: 1024px) {
  .results-strip {
    grid-template-columns: 1fr 1fr 1fr;
  }
}

.results-strip img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
}

.hero-video-band {
  padding: 32px 0 56px;
  margin: 0;
  background: #000;
  color: #f6f3ee;
}

.hero-video-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
  overflow: hidden;
}

.hero-video-poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 6% 12%;
}

.hero-video-play {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.hero-video-play-mark {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 72px;
  height: 72px;
  border: 1px solid #f6f3ee;
  border-radius: 50%;
  background: rgba(17, 17, 17, 0.55);
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.hero-video-play-mark::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 53%;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 10px 0 10px 16px;
  border-color: transparent transparent transparent #f6f3ee;
  transform: translate(-50%, -50%);
}

.hero-video-play:hover .hero-video-play-mark,
.hero-video-play:focus-visible .hero-video-play-mark {
  background: rgba(17, 17, 17, 0.78);
}

.hero-video-frame.is-playing iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

.reviews {
  display: grid;
  gap: 48px;
  margin-top: 64px;
}

@media (min-width: 900px) {
  .reviews {
    grid-template-columns: 1fr 1fr 1fr;
    gap: 40px;
    align-items: start;
  }
}

.reviews blockquote {
  margin: 0;
  padding: 0;
  border: 0;
}

.reviews img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  margin: 0 0 var(--space-5);
}

.reviews p {
  margin: 0 0 var(--space-5);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.65;
  letter-spacing: 0;
  color: var(--fg-2);
}

.reviews cite {
  display: block;
  font-style: normal;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
}

.client-videos {
  margin-top: 48px;
  margin-inline: auto;
  max-width: 760px;
}

.client-video-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #111111;
  overflow: hidden;
}

.client-video-poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.client-video-play {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.client-video-play-mark {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 72px;
  height: 72px;
  border: 1px solid #f6f3ee;
  border-radius: 50%;
  background: rgba(17, 17, 17, 0.55);
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.client-video-play-mark::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 53%;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 10px 0 10px 16px;
  border-color: transparent transparent transparent #f6f3ee;
  transform: translate(-50%, -50%);
}

.client-video-play:hover .client-video-play-mark,
.client-video-play:focus-visible .client-video-play-mark {
  background: rgba(17, 17, 17, 0.78);
}

.client-video-frame.is-playing iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

.client-video-caption {
  margin: 16px 0 0;
  font-family: var(--font-display);
  font-size: 22px;
  font-style: italic;
  letter-spacing: -0.01em;
  line-height: 1.25;
  color: var(--fg);
}

.client-video-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  margin-top: 20px;
}

.client-video-prev,
.client-video-next {
  min-height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--fg);
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
}

.client-video-prev:hover,
.client-video-next:hover {
  color: var(--accent);
}

.client-video-dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.client-video-dot {
  width: 8px;
  height: 8px;
  padding: 0;
  border: 1px solid var(--fg);
  background: transparent;
  cursor: pointer;
}

.client-video-dot[aria-current="true"] {
  background: var(--accent);
  border-color: var(--accent);
}

.journey {
  display: grid;
  gap: var(--space-8);
}

@media (min-width: 768px) {
  .journey {
    grid-template-columns: 1fr 1fr 1fr;
  }
}

.journey article h3 {
  font-size: 28px;
  margin-bottom: var(--space-3);
}

.journey p {
  margin: 0;
  font-size: 16px;
  max-width: 36ch;
}

.partners {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 28px;
  padding: 0;
  margin: var(--space-6) 0 0;
  list-style: none;
}

.partners li {
  font-family: var(--font-display);
  font-size: 22px;
  font-style: italic;
}

.discover-tiles {
  display: grid;
  gap: var(--space-4);
}

@media (min-width: 768px) {
  .discover-tiles {
    grid-template-columns: 2fr 1fr;
    grid-template-rows: auto auto;
  }

  .discover-tiles a:first-child {
    grid-row: 1 / 3;
  }
}

.tile {
  position: relative;
  display: block;
  min-height: 280px;
  color: #f6f3ee;
  text-decoration: none;
  overflow: hidden;
}

.tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  inset: 0;
}

.tile span {
  position: absolute;
  left: 20px;
  bottom: 20px;
  right: 20px;
  font-family: var(--font-display);
  font-size: 32px;
  letter-spacing: -0.02em;
  text-shadow: 0 8px 24px rgb(17 17 17 / 0.45);
}

/* Treatments: dark-tint cards → dedicated pages. LYS look, not Raw Beauty palette. */
.tx-index-intro {
  padding-bottom: 24px;
}

.svc-group {
  padding: 40px 0;
  scroll-margin-top: 88px;
}

.svc-group h2 {
  margin-bottom: 0;
}

.svc-grid {
  display: grid;
  gap: 16px;
  margin-top: 28px;
  grid-template-columns: 1fr;
}

@media (min-width: 700px) {
  .svc-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (min-width: 1024px) {
  .svc-grid {
    grid-template-columns: 1fr 1fr 1fr;
  }
}

.svc-card {
  position: relative;
  display: block;
  min-height: 350px;
  overflow: hidden;
  background: #111111;
  color: #f6f3ee;
  text-decoration: none;
  isolation: isolate;
}

.svc-card:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.svc-card-media,
.svc-card-tint,
.svc-card-hover {
  position: absolute;
  inset: 0;
}

.svc-card-media {
  background-size: cover;
  background-position: center;
  z-index: 0;
}

.svc-card-tint {
  background: rgb(17 17 17 / 0.48);
  z-index: 1;
}

.svc-card-label {
  position: relative;
  z-index: 2;
  min-height: 350px;
  display: grid;
  place-items: center;
  padding: 28px 22px;
  text-align: center;
}

.svc-card-label h3 {
  margin: 0;
  max-width: 18ch;
  color: #ffffff;
  font-family: var(--font-body);
  font-size: clamp(20px, 2.1vw, 26px);
  font-weight: 500;
  letter-spacing: 0.01em;
  line-height: 1.25;
}

.svc-card-hover {
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 28px 24px 56px;
  background: var(--paper);
  color: var(--fg);
  opacity: 0;
  transition: opacity var(--motion-fast) var(--ease-standard);
}

.svc-card-hover h3 {
  margin: 0 0 12px;
  font-family: var(--font-body);
  font-size: clamp(22px, 2.2vw, 28px);
  font-weight: 500;
  text-align: left;
}

.svc-card-hover p {
  margin: 0;
  max-width: 36ch;
  font-size: 15px;
  line-height: 1.45;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.svc-card-go {
  position: absolute;
  right: 18px;
  bottom: 16px;
  font-size: 18px;
  line-height: 1;
  color: var(--fg);
}

.svc-card:hover .svc-card-hover,
.svc-card:focus-visible .svc-card-hover {
  opacity: 1;
}

@media (hover: none) {
  .svc-card-hover {
    opacity: 0;
  }
}

.btn-ink {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
}

.btn-ink:hover {
  background: var(--fg-2);
  border-color: var(--fg-2);
  color: var(--paper);
}

.tx-hero {
  background: var(--surface-warm);
  padding: 72px 0 64px;
}

.tx-hero-inner {
  text-align: center;
}

.tx-hero h1 {
  max-width: 22ch;
  margin: 0 auto 28px;
}

.tx-hero .btn-row {
  justify-content: center;
}

/* Advanced Regenerative Skincare — Stitch mock + existing LYS chrome */
.ars-hero {
  padding: 64px 0 32px;
  text-align: center;
  background: var(--paper);
}

.ars-hero h1 {
  max-width: 16ch;
  margin: 0 auto 20px;
}

.ars-hero .lead {
  margin: 0 auto;
  max-width: 62ch;
  font-size: 16px;
  line-height: 1.55;
  color: var(--fg-2);
}

.ars-cards {
  padding: 8px 0 56px;
}

.ars-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: 1fr;
}

@media (min-width: 700px) {
  .ars-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (min-width: 1100px) {
  .ars-grid {
    grid-template-columns: 1fr 1fr 1fr 1fr;
  }
}

.ars-card {
  position: relative;
  display: block;
  min-height: 420px;
  overflow: hidden;
  background: #111111;
  color: #ffffff;
  text-decoration: none;
  isolation: isolate;
}

.ars-card:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.ars-card-media,
.ars-card-tint {
  position: absolute;
  inset: 0;
}

.ars-card-media {
  background-size: cover;
  background-position: center;
  z-index: 0;
}

.ars-card-media.is-product {
  background-size: contain;
  background-repeat: no-repeat;
  background-color: #111111;
}

.ars-card-tint {
  background: rgb(17 17 17 / 0.52);
  z-index: 1;
}

.ars-card-copy {
  position: relative;
  z-index: 2;
  min-height: 420px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 32px 20px 28px;
  text-align: center;
  color: #ffffff;
}

.ars-card-copy h3 {
  margin: 0;
  max-width: 14ch;
  color: #ffffff;
  font-family: var(--font-display);
  font-size: clamp(26px, 2.2vw, 32px);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.12;
}

.ars-kicker {
  margin: 10px 0 12px;
  font-family: var(--font-display);
  font-size: 16px;
  font-style: italic;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: #ffffff;
}

.ars-kicker.is-caps {
  font-family: var(--font-body);
  font-size: 11px;
  font-style: normal;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.ars-card-copy p {
  margin: 0;
  max-width: 28ch;
  font-size: 14px;
  line-height: 1.45;
  color: #f6f3ee;
}

.ars-tag {
  margin-top: 18px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #ffffff;
}

.ars-block {
  padding: 64px 0;
  scroll-margin-top: 88px;
  border-top: 1px solid var(--border);
}

.ars-block-grid {
  display: grid;
  gap: 40px;
}

@media (min-width: 900px) {
  .ars-block-grid {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    gap: 64px;
    align-items: start;
  }

  .ars-block.is-flip .ars-block-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  }

  .ars-block.is-flip .ars-block-copy {
    order: -1;
  }
}

.ars-block-media img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  background: #ffffff;
}

.ars-block-copy h2 {
  margin-bottom: 8px;
}

.ars-block-copy .ars-kicker {
  margin: 0 0 16px;
  color: var(--fg);
}

.ars-block-copy .ars-kicker.is-caps {
  color: var(--muted);
}

.ars-block-copy p,
.ars-block-copy li {
  max-width: 62ch;
  font-size: 16px;
  color: var(--fg-2);
}

.ars-block-copy ul {
  margin: 0 0 16px;
  padding-left: 1.15em;
}

.ars-block-copy li + li {
  margin-top: 8px;
}

.ars-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-5);
  margin-top: 8px;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.ars-kits,
.ars-peptides {
  display: grid;
  gap: 16px;
  margin-top: 28px;
  grid-template-columns: 1fr;
}

@media (min-width: 640px) {
  .ars-kits,
  .ars-peptides {
    grid-template-columns: 1fr 1fr 1fr;
  }
}

@media (min-width: 900px) {
  .ars-peptides {
    grid-template-columns: 1fr 1fr 1fr 1fr;
  }
}

.ars-kits figure,
.ars-peptides figure {
  margin: 0;
}

.ars-kits img,
.ars-peptides img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: contain;
  background: #ffffff;
}

.ars-kits figcaption,
.ars-peptides figcaption {
  margin-top: 10px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  text-align: center;
}

.tx-detail {
  padding: 40px 0 28px;
}

.tx-detail-grid {
  display: grid;
  gap: 48px;
}

@media (min-width: 960px) {
  .tx-detail-grid {
    grid-template-columns: minmax(0, 1.6fr) minmax(240px, 0.85fr);
    gap: 72px;
    align-items: start;
  }
}

.tx-detail-copy section {
  /* Nested sections were inheriting the page section padding (up to 112px)
     and opening a large gap above How it works / Visit notes / Before you book.
     Match the rhythm between Long Term and Pricing. */
  margin: 0 0 1.15em;
  padding: 0;
  scroll-margin-top: 96px;
}

.tx-detail-copy p,
.tx-detail-copy li,
.tx-detail-copy .lead,
.tx-detail .lead {
  font-size: 16px;
  line-height: 1.65;
  font-weight: 400;
  font-family: var(--font-body);
}

.tx-detail-copy h2 {
  margin-bottom: 16px;
}

/* Shared, responsive treatment videos; reserve space before lazy loading. */
.tx-video {
  aspect-ratio: 16 / 9;
  width: 100%;
  margin-bottom: 20px;
  background: var(--navy);
}

.tx-video iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

.tx-detail-copy p,
.tx-detail-copy li {
  max-width: 62ch;
  font-size: 16px;
}

.tx-detail-copy ul {
  margin: 0;
  padding-left: 1.15em;
}

.tx-detail-copy li + li {
  margin-top: 8px;
}

.tx-detail-aside img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  background: #111111;
}

.tx-toc {
  margin-top: 28px;
  padding-top: 8px;
}

@media (min-width: 960px) {
  .tx-toc {
    position: sticky;
    top: 88px;
  }
}

.tx-toc-label {
  margin: 0 0 12px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}

.tx-toc a {
  display: block;
  padding: 8px 0 8px 14px;
  border-left: 2px solid var(--border);
  color: var(--fg-2);
  text-decoration: none;
  font-size: 14px;
}

.tx-toc a[aria-current="true"] {
  border-left-color: var(--accent);
  color: var(--fg);
}

/* Suite Tour — collage with About / card photo height, not a 9:16 phone slot */
#suite-tour {
  scroll-margin-top: 88px;
}

.suite-tour-collage {
  display: grid;
  gap: var(--space-4);
  margin-top: 40px;
  grid-template-columns: 1fr;
}

@media (min-width: 640px) {
  .suite-tour-collage {
    grid-template-columns: 1fr 1fr;
  }
}

.suite-tour-collage img,
.suite-tour-collage video {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center;
}

.menu-group {
  display: grid;
  gap: var(--space-8);
  padding: var(--space-12) 0;
  border-top: 1px solid var(--border);
}

@media (min-width: 900px) {
  .menu-group {
    grid-template-columns: 280px 1fr;
    gap: 64px;
  }
}

.menu-group img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.menu-group .flip-front img {
  height: 100%;
  aspect-ratio: auto;
}

.menu-list {
  margin: var(--space-6) 0 0;
  padding: 0;
  list-style: none;
}

.menu-list li {
  padding: 14px 0;
  border-bottom: 1px solid var(--border);
  display: grid;
  gap: 4px;
}

.menu-list strong {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 500;
}

.menu-list span {
  font-size: 15px;
  color: var(--fg-2);
}

.note {
  font-size: 14px;
  color: var(--muted);
}

.book-layout {
  display: grid;
  gap: var(--space-8);
}

@media (min-width: 900px) {
  .book-layout {
    grid-template-columns: 1.4fr 0.8fr;
    gap: 56px;
    align-items: start;
  }
}

.vagaro-frame {
  width: 100%;
  min-height: 720px;
  border: 1px solid var(--border);
  background: var(--surface-warm);
}

.hours dt {
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin: 0 0 4px;
}

.hours dd {
  margin: 0 0 var(--space-5);
}

.quiz-well {
  max-width: 560px;
  margin: var(--space-8) auto 0;
  padding: var(--space-8);
  background: var(--surface-warm);
  border: 1px solid var(--border);
}

.quiz-well fieldset {
  border: 0;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-3);
}

.quiz-well legend {
  font-family: var(--font-display);
  font-size: 28px;
  margin-bottom: var(--space-5);
  padding: 0;
}

.choice {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 52px;
  padding: 0 var(--space-4);
  border: 1px solid var(--border);
  background: var(--bg);
  cursor: pointer;
}

.choice:hover,
.choice:has(:checked) {
  border-color: var(--fg);
}

.choice input {
  accent-color: var(--fg);
}

.field {
  display: grid;
  gap: var(--space-2);
  margin-bottom: var(--space-5);
}

.field label {
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.field input,
.field textarea,
.field select {
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--fg);
  font: inherit;
}

.field input:focus {
  border-color: var(--fg);
}

.site-footer {
  padding: 0 0 var(--space-8);
  border-top: 1px solid var(--border);
  background: var(--paper);
  font-size: 14px;
}

.footer-nav {
  padding: 18px 0 16px;
  margin-bottom: 8px;
  border-bottom: 1px solid var(--border);
  background: #ffffff;
}

.footer-nav-row,
.footer-subnav-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 2px 4px;
}

.footer-nav-row a,
.footer-subnav-row a {
  padding: 6px 11px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-decoration: none;
  color: var(--fg);
  white-space: nowrap;
}

.footer-nav-row a:hover,
.footer-subnav-row a:hover {
  color: var(--fg);
  text-decoration: underline;
  text-underline-offset: 0.22em;
}

.footer-subnav-row {
  margin-top: 2px;
}

.footer-subnav-row a {
  font-size: 12px;
  font-weight: 400;
  color: var(--fg-2);
}

.footer-grid {
  display: grid;
  gap: var(--space-8);
  padding-top: var(--space-8);
}

@media (min-width: 768px) {
  .footer-grid {
    grid-template-columns: 1.4fr 1fr 1fr;
  }
}

.site-footer h2 {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: var(--space-4);
}

.site-footer p,
.site-footer a {
  color: var(--fg-2);
}

.site-footer .footer-nav-row a {
  color: var(--fg);
}

.site-footer .footer-subnav-row a {
  color: var(--fg-2);
}

.tagline {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 22px;
  color: var(--fg);
}

.social {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: var(--space-4);
}

.social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  color: var(--fg);
  text-decoration: none;
}

.social a:hover {
  color: var(--accent);
}

.social svg {
  display: block;
  width: 22px;
  height: 22px;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }

  /* Reveal stays instant: --peel and the fade both snap. */
}

/* Icon liner under the hero — Zinovations pattern, LYS type */
.icon-strip {
  padding: 64px 0;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
}

@media (min-width: 768px) {
  .icon-strip {
    padding: 80px 0;
  }
}

@media (min-width: 1024px) {
  .icon-strip {
    padding: 88px 0;
  }
}

.icon-strip-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 640px) {
  .icon-strip-grid {
    grid-template-columns: 1fr 1fr;
    gap: 48px 28px;
  }
}

@media (min-width: 900px) {
  .icon-strip-grid {
    grid-template-columns: 1fr 1fr 1fr;
  }
}

@media (min-width: 1024px) {
  .icon-strip-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0;
  }
}

.icon-item {
  text-align: center;
  display: grid;
  justify-items: center;
  align-content: start;
  padding: 0 16px;
}

@media (min-width: 1024px) {
  .icon-item {
    border-right: 1px solid #d8c9b3;
    border-right: 1px solid color-mix(in oklab, var(--accent), transparent 62%);
  }

  .icon-item:last-child {
    border-right: 0;
  }
}

.icon-mark {
  display: flex;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  color: var(--accent);
}

.icon-mark svg {
  width: 40px;
  height: 40px;
  display: block;
  stroke: currentColor;
}

.icon-item h3 {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1.4;
  color: var(--fg);
  margin: 0 0 12px;
}

.icon-item p {
  margin: 0;
  max-width: 28ch;
  font-size: 14px;
  line-height: 1.55;
  color: var(--muted);
}

/* Docked Concierge — compact panel on desktop, bottom sheet on small screens */
.lys-quiz-chip {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 45;
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 0 14px;
  border: 1px solid var(--border);
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  box-shadow: 0 10px 28px rgba(17, 17, 17, 0.1);
  cursor: pointer;
}

.lys-quiz-chip:hover {
  border-color: var(--fg);
  color: var(--fg);
}

.lys-quiz-scrim {
  display: block;
  position: fixed;
  inset: 0;
  z-index: 45;
  margin: 0;
  padding: 0;
  border: 0;
  background: rgba(17, 17, 17, 0.28);
  cursor: pointer;
}

body.lys-quiz-open {
  overflow: hidden;
}

.lys-quiz {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 46;
  width: min(360px, calc(100vw - 24px));
  height: auto;
  max-width: 360px;
  max-height: min(520px, calc(100dvh - 32px));
  display: flex;
  flex-direction: column;
  background: var(--paper);
  color: var(--ink);
  border: 1px solid var(--border);
  box-shadow: 0 18px 40px rgba(17, 17, 17, 0.14);
}

.lys-quiz[hidden],
.lys-quiz-chip[hidden],
.lys-quiz-scrim[hidden] {
  display: none !important;
}

.lys-quiz-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 44px;
  padding: 0 10px 0 14px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.lys-quiz-head h2 {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 500;
  letter-spacing: -0.02em;
  margin: 0;
  color: var(--ink);
}

.lys-quiz-close {
  width: 36px;
  height: 36px;
  border: 0;
  background: transparent;
  color: var(--ink);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}

.lys-quiz-close:hover {
  color: var(--accent);
}

.lys-quiz-log {
  flex: 0 1 auto;
  overflow: auto;
  padding: 12px 12px 8px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 0;
  max-height: 260px;
}

.lys-quiz-msg {
  max-width: 94%;
  padding: 8px 10px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--fg);
}

.lys-quiz-msg.is-bot {
  background: var(--surface-warm);
  align-self: flex-start;
}

.lys-quiz-msg.is-user {
  align-self: flex-end;
  background: var(--ink);
  color: var(--paper);
}

.lys-quiz-msg p {
  margin: 0 0 0.55em;
}

.lys-quiz-msg p:last-child {
  margin-bottom: 0;
}

.lys-quiz-msg a {
  color: inherit;
}

.lys-quiz-msg.is-bot a {
  color: var(--ink);
  text-decoration-color: var(--accent);
}

.lys-quiz-msg.is-user a {
  color: var(--paper);
}

/* Typed concierge: no Yes/No chip stacks */
.lys-quiz-msg .lys-quiz-hint {
  margin-top: 6px;
  font-size: 12px;
  color: var(--muted);
}

.lys-quiz-composer {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px;
  border-top: 1px solid var(--border);
  flex-shrink: 0;
  background: var(--paper);
}

.lys-quiz-composer input {
  flex: 1;
  min-height: 36px;
  min-width: 0;
  padding: 0 10px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 13px;
}

.lys-quiz-composer button {
  min-height: 36px;
  padding: 0 12px;
  border: 1px solid var(--accent);
  background: var(--accent);
  color: var(--accent-on);
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
}

.lys-quiz-page {
  padding: 72px 0 96px;
}

.lys-quiz-page h1 {
  margin-bottom: 16px;
}

@media (max-width: 719px) {
  .lys-quiz-scrim {
    background: rgba(17, 17, 17, 0.32);
  }

  .lys-quiz-chip {
    right: 12px;
    bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    min-height: 44px;
    padding: 0 16px;
    font-size: 13px;
  }

  .lys-quiz {
    left: 8px;
    right: 8px;
    bottom: 0;
    width: auto;
    max-width: none;
    height: auto;
    max-height: min(70dvh, calc(100dvh - env(safe-area-inset-top, 0px) - 8px));
    border-radius: 18px 18px 0 0;
    border-bottom: 0;
    box-shadow: 0 -10px 36px rgba(17, 17, 17, 0.16);
  }

  .lys-quiz-head {
    min-height: 56px;
    padding: 0 6px 0 16px;
  }

  .lys-quiz-head h2 {
    font-size: 26px;
  }

  .lys-quiz-close {
    width: 44px;
    height: 44px;
    font-size: 28px;
  }

  .lys-quiz-log {
    padding: 14px 14px 10px;
    gap: 12px;
    max-height: 34dvh;
  }

  .lys-quiz-msg {
    font-size: 15px;
    padding: 10px 12px;
    line-height: 1.5;
  }

  .lys-quiz-composer {
    gap: 8px;
    padding: 10px 12px calc(12px + env(safe-area-inset-bottom, 0px));
  }

  .lys-quiz-composer input {
    min-height: 44px;
    padding: 0 12px;
    font-size: 16px;
  }

  .lys-quiz-composer button {
    min-height: 44px;
    min-width: 64px;
    padding: 0 16px;
    font-size: 13px;
  }
}

/* Home WE-lines: Body Lab pattern (stacked lead-in + divider + scroll build), LYS copy. */
.we-build {
  padding: 40px 0 96px;
  background: var(--paper);
}

@media (max-width: 767px) {
  .we-build {
    padding: 32px 0 28px;
  }
}

.we-build-chassis {
  display: grid;
  gap: 28px;
}

@media (min-width: 900px) {
  .we-build-chassis {
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    gap: 64px 80px;
    align-items: start;
  }
}

.we-build-lead h2 {
  margin: 0;
  font-size: clamp(34px, 5vw, 52px);
  font-weight: 500;
  font-style: italic;
  letter-spacing: -0.02em;
  line-height: 1.12;
}

.we-build-subhead {
  margin: 18px 0 0;
  max-width: 46ch;
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(18px, 2vw, 23px);
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1.35;
  text-transform: none;
  color: var(--fg);
}

.we-build-photo {
  margin: 0;
}

.we-build-photo img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center 30%;
  border-radius: 12px;
}

.we-build-lines {
  margin: 28px 0 0;
  padding: 0;
  list-style: none;
}

.we-line {
  margin: 0;
  padding: 18px 0;
  border-top: 1px solid var(--border);
}

.we-line p {
  margin: 0;
  max-width: 46ch;
  font-size: 17px;
  font-weight: 400;
  line-height: 1.55;
  color: var(--fg-2);
}

.we-line strong {
  display: inline;
  margin-right: 0.35em;
  font-family: var(--font-body);
  font-size: clamp(20px, 2vw, 26px);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg);
}

.we-build-lead,
.we-line {
  opacity: 0;
  transform: translate3d(28px, 0, 0);
  transition: opacity 720ms var(--ease-standard), transform 720ms var(--ease-standard);
}

.we-build-lead.is-in,
.we-line.is-in {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .we-build-lead,
  .we-line {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

.essay {
  text-align: center;
  padding: 56px 0 80px;
}

.essay-inner {
  max-width: 720px;
  margin-inline: auto;
}

.essay .eyebrow {
  color: var(--muted);
  letter-spacing: 0.18em;
}

.essay h2 {
  margin: 12px 0 28px;
  font-size: clamp(34px, 5vw, 52px);
  font-weight: 500;
}

.essay .lead {
  margin: 0 auto 20px;
  font-size: 17px;
  color: var(--fg-2);
}

.essay .closer {
  margin: 28px 0 0;
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(22px, 3vw, 30px);
  font-weight: 500;
}

.featured-head {
  text-align: center;
  margin-bottom: 22px;
}

[data-od-id="featured-treatments"] {
  padding-top: 80px;
  padding-bottom: 56px;
}

.featured-head .eyebrow {
  margin-bottom: 8px;
}

.featured-head h2 {
  margin: 0;
  font-size: clamp(34px, 5vw, 56px);
  font-style: italic;
  font-weight: 500;
}

.featured-kicker {
  margin: 14px 0 0;
  font-size: clamp(17px, 1.5vw, 20px);
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: none;
  /* Same lilac as the Tap to reveal page-curl, not body copy. */
  color: #8d7bad;
}

.over-hero .featured-kicker {
  color: #ffffff;
}

.featured-also {
  margin: 28px 0 0;
  text-align: center;
  font-size: 14px;
  color: var(--muted);
}

.featured-also a {
  color: inherit;
  text-decoration: none;
}

.featured-also a:hover {
  color: var(--fg);
  text-decoration: underline;
  text-underline-offset: 0.22em;
}

.tx-card {
  text-align: center;
  justify-items: center;
}

.tx-card h3 {
  margin: 8px 0 0;
  font-size: 24px;
  font-style: italic;
  font-weight: 500;
}

.tx-card p {
  margin: 8px auto 0;
  max-width: 38ch;
  text-align: center;
}

.learn-more {
  display: inline-block;
  margin-top: 14px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: underline;
  text-underline-offset: 0.28em;
}

.tx-card a.learn-more,
.menu-card .learn-more {
  color: var(--muted);
}

.tx-index-intro {
  text-align: center;
  padding: 40px 0 8px;
}

.tx-index-intro .lead {
  margin-inline: auto;
  color: var(--muted);
  font-size: 16px;
}

.tx-index-intro.over-hero .lead,
.tx-index-intro.over-hero .note,
.tx-index-intro.over-hero .note a {
  color: #ffffff;
}

.menu-group {
  display: block;
  padding: 48px 0;
  scroll-margin-top: calc(var(--header-height) + 16px);
}

.menu-group > .container > .eyebrow,
.menu-group h2.group-label {
  text-align: center;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 36px;
}

.menu-note {
  text-align: center;
  margin: 28px 0 0;
  font-size: 15px;
  color: var(--fg-2);
}

.menu-note a {
  font-weight: 600;
}

.menu-card {
  display: grid;
  gap: 12px;
  text-align: center;
  justify-items: center;
}

.menu-card a {
  display: grid;
  gap: 12px;
  justify-items: center;
  text-decoration: none;
  color: inherit;
}

.menu-card img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
}

.menu-card h3 {
  margin: 4px 0 0;
  font-size: 24px;
  font-style: italic;
  font-weight: 500;
}

.menu-card p {
  margin: 0;
  max-width: 38ch;
  font-size: 15px;
  line-height: 1.5;
  color: var(--muted);
}

.discover-essay {
  padding: 64px 0 24px;
  text-align: center;
}

.discover-essay .kicker {
  margin: 0 auto 28px;
  max-width: 62ch;
  font-size: 15px;
  line-height: 1.65;
  color: var(--muted);
}

.discover-essay h2 {
  margin: 0 0 8px;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.discover-essay .display {
  margin: 0 0 28px;
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(28px, 4vw, 40px);
  font-weight: 500;
}

.discover-essay .lead {
  margin: 0 auto 18px;
}

.learn-stack {
  padding: 24px 0 80px;
}

#results,
#elena,
#suite-tour,
#results,
#suite-stills {
  scroll-margin-top: calc(var(--header-height) + 16px);
}

.learn-block {
  display: grid;
  grid-template-columns: 1fr; /* icons removed; was 56px 1fr */
  gap: 28px 32px;
  align-items: start;
  padding: 40px 0;
  border-top: 1px solid var(--border);
}
/* Iconless learn-blocks (About): never reserve a 56px icon column. */
.learn-block:not(:has(.learn-icon)),
.learn-block--no-icon {
  display: block;
  grid-template-columns: none;
}
.learn-block:not(:has(.learn-icon)) > *,
.learn-block--no-icon > * {
  max-width: 100%;
}

.learn-block:last-child {
  border-bottom: 1px solid var(--border);
}

.learn-icon {
  width: 56px;
  height: 56px;
  color: var(--fg);
}

.learn-icon svg {
  width: 100%;
  height: 100%;
  stroke: currentColor;
  fill: none;
}

.learn-block h2 {
  margin: 0 0 14px;
  font-family: var(--font-body);
  font-size: clamp(18px, 2vw, 22px);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.learn-block h2 em {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  color: var(--accent);
}

.learn-block p {
  margin: 0;
  max-width: 68ch;
  font-size: 16px;
  line-height: 1.65;
  color: var(--fg-2);
}

.learn-block p + p {
  margin-top: 16px;
}

.flip-duration {
  margin: 0;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #ffffff;
}

.flip-grid.parents {
  grid-template-columns: 1fr;
  gap: 32px 6px;
  max-width: 960px;
  margin-inline: auto;
}

.tx-parents {
  padding: 28px 0 80px;
}

.tx-parents .flip-back h3 {
  font-family: var(--font-display);
  font-size: clamp(28px, 3.2vw, 42px);
  font-style: italic;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.12;
}

.hero-sticky ~ .tx-parents.over-hero,
.hero-sticky ~ .tx-cat.over-hero {
  background: var(--bg);
}

.tx-cat {
  padding: 48px 0 80px;
}

.tx-cat-back {
  display: inline-block;
  margin: 0 0 28px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  text-decoration: none;
}

.tx-cat-back:hover {
  color: var(--fg);
}

.tx-cat-kicker {
  margin: 0 0 8px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
}

.tx-cat-title-row {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}

.tx-cat-title-row h1 {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(36px, 5.2vw, 58px);
  font-style: italic;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.12;
  text-transform: none;
  color: var(--ink);
}

.tx-cat-mins {
  margin: 0;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: none;
  color: var(--muted);
}

.tx-cat .lead {
  margin: 16px 0 36px;
  max-width: 70rem;
  text-wrap: pretty;
}

.tx-cat .flip-grid {
  margin-top: 8px;
}

.tx-studio-videos {
  display: grid;
  gap: 20px;
  margin: 36px 0 8px;
}

.tx-studio-videos h2 {
  margin: 0;
}

.tx-studio-video {
  margin: 0;
}

.tx-studio-video-cap {
  margin-top: 8px;
  font-size: 13px;
  color: var(--muted);
}

.flip-back-wide {
  justify-content: center;
  align-items: center;
  gap: 14px;
  padding: 28px 40px 24px;
}

.flip-back-wide > p:not(.flip-duration) {
  max-width: 46ch;
}

.flip-back-wide h3 {
  font-size: clamp(22px, 2.4vw, 32px);
}

.flip-back-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 28px;
  width: 100%;
}

.flip-back-wide .flip-back-row p {
  max-width: 42ch;
}

.flip-card-wide {
  aspect-ratio: 4 / 3;
}

@media (min-width: 768px) {
  .flip-grid.parents {
    grid-template-columns: 1fr 1fr;
  }

  .flip-grid.parents .flip-card-wide {
    grid-column: 1 / -1;
    aspect-ratio: 2 / 1;
  }
}

@media (min-width: 1024px) {
  .flip-grid.parents {
    grid-template-columns: 1fr 1fr;
    gap: 48px 24px;
  }
}

@media (max-width: 767px) {
  .flip-back-wide {
    justify-content: center;
    gap: 18px;
  }

  .flip-back-row {
    flex-direction: column;
    justify-content: center;
  }

  .flip-back-wide .flip-back-row p {
    max-width: 28ch;
  }
}

@media (max-width: 639px) {
  .learn-block {
    grid-template-columns: 1fr;
    justify-items: start;
  }

  .header-bar,
  .header-inner {
    gap: 12px;
    padding: 12px 0 10px;
  }

  .header-utils {
    gap: 10px;
  }
}

/* In-hero Book CTA (Vagaro) + optional Concierge */
.hero-cta {
  margin-top: 22px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  align-items: center;
}

.hero-cta .btn-book {
  min-height: 44px;
  padding: 0 26px;
}

.hero-cta .btn-ghost {
  min-height: 44px;
  padding: 0 20px;
  border: 1px solid #ffffff;
  background: transparent;
  color: #ffffff;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.hero-cta .btn-ghost:hover {
  background: #ffffff;
  color: #111111;
}

@media (max-width: 767px) {
  .hero-cta {
    margin-top: 18px;
    width: min(100%, 320px);
    margin-inline: auto;
    flex-direction: column;
  }

  .hero-cta .btn-book,
  .hero-cta .btn-ghost {
    width: 100%;
  }
}

/* Essential Facials opts into a flat hero and corner-free cards only. */
.hero.hero-solid { background: #7a567e; }
.hero.hero-solid::before,
.hero.hero-solid::after,
.hero.hero-solid .hero-copy::before { content: none; }
.flip-grid--no-corner .flip-inner::before { display: none; }

/* Essential + Signature cards share one grade and a soft fog vignette.
   Both live on .flip-grid--matched so the set can be tuned in one place.
   The filter is on the photo only. The fog is a cream radial on ::before,
   under the existing bottom title scrim (::after). */
.flip-grid--matched .flip-front img {
  filter: saturate(0.8) contrast(0.94) brightness(1.06) sepia(0.09);
}

.flip-grid--matched .flip-front::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: radial-gradient(
    ellipse 86% 82% at 50% 42%,
    rgba(251, 247, 240, 0) 52%,
    rgba(251, 247, 240, 0.05) 70%,
    rgba(248, 243, 236, 0.28) 88%,
    rgba(246, 240, 232, 0.62) 100%
  );
}

/* Parent child-page heroes: photo + title, not generic Treatments loop */
.hero-page.hero-parent {
  min-height: 36vh;
}

.hero-page.hero-parent.hero-sticky {
  height: min(42vh, calc(100dvh - var(--header-height)));
  min-height: 220px;
}

.hero-page.hero-parent .hero-copy h1 {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
}


/* Mobile menu: fixed overlay so drawer never bleeds into page content (Jason #90) */
@media (max-width: 1023px) {
  .nav-drawer {
    display: none;
    position: fixed;
    left: 0;
    right: 0;
    top: var(--header-height, 118px);
    bottom: 0;
    z-index: 45;
    margin: 0;
    border-top: 1px solid var(--border);
    background: var(--paper);
    padding: var(--space-6) var(--container-gutter-phone) calc(var(--space-8) + env(safe-area-inset-bottom, 0px));
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    box-shadow: 0 12px 40px rgba(20, 16, 28, 0.12);
  }

  .nav-drawer.is-open {
    display: block;
  }

  body.nav-drawer-open {
    overflow: hidden;
    position: fixed;
    top: var(--nav-scroll-top, 0px);
    width: 100%;
  }

  body.nav-drawer-open .site-header {
    position: fixed;
    inset: 0 0 auto;
    overflow: visible;
    z-index: 60;
  }
}

/* Jason #90: retain the full CTA label without crowding the 44px toggle. */
@media (max-width: 1023px) {
  .site-header {
    padding-top: env(safe-area-inset-top, 0px);
  }

  .header-bar,
  .header-inner {
    width: auto;
    margin-left: max(16px, env(safe-area-inset-left, 0px));
    margin-right: max(16px, env(safe-area-inset-right, 0px));
  }

  .header-utils {
    min-width: 0;
    flex-shrink: 1;
  }

  .header-utils .btn-book {
    min-width: 0;
    min-height: 44px;
    padding: 8px 12px;
    letter-spacing: 0.1em;
    line-height: 1.4;
    text-align: center;
  }

  .menu-toggle {
    display: grid;
    place-items: center;
  }

  .menu-toggle[aria-expanded="true"] span {
    background: transparent;
  }

  .menu-toggle[aria-expanded="true"] span::before {
    top: 0;
    transform: rotate(45deg);
  }

  .menu-toggle[aria-expanded="true"] span::after {
    top: 0;
    transform: rotate(-45deg);
  }

  .nav-drawer {
    padding-left: max(16px, env(safe-area-inset-left, 0px));
    padding-right: max(16px, env(safe-area-inset-right, 0px));
    scroll-padding-block: 16px;
  }

  .nav-drawer a {
    min-height: 44px;
    overflow-wrap: anywhere;
  }
}

@media (max-width: 767px) {
  .book-layout > *,
  .tx-detail-grid > * {
    min-width: 0;
    overflow-wrap: anywhere;
  }

  .book-layout .note a,
  .book-layout .hours a,
  .book-layout #consult a,
  .tx-toc a,
  .btn-learn {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  .tx-toc a {
    display: flex;
  }

  #consult,
  .tx-detail-copy section {
    scroll-margin-top: calc(var(--header-height) + 16px);
  }

  /* Keep the full hero copy visible in short landscape viewports. */
  .hero-sticky:not(.hero-parent) {
    height: auto;
    min-height: calc(100svh - var(--header-height));
    padding-block: 32px;
  }
}

/* ============================================================
   Elena feedback tip #100 — home/about/location/services/footer
   Design SoT: /workspace/lys-elena-feedback-od/ (shared.css, plates 01-05).
   ============================================================ */
:root {
  --purple: #986c9e; /* logo purple, interim — swap when Elena sends hex */
}

/* Home: prominent logo above the video hero (separate from the small header
   wordmark, which stays as-is for in-page navigation). */
.home-logo-hero {
  padding: 48px 20px 16px;
  text-align: center;
  background: var(--paper);
}
.home-logo-hero img {
  width: 100%;
  max-width: 340px;
  height: auto;
}
@media (max-width: 650px) {
  .home-logo-hero { padding: 32px 16px 8px; }
  .home-logo-hero img { max-width: 220px; }
}

/* Chat chip — fixed bottom-right, sitewide (injected by site.js). Visual
   placeholder only; no chat transport. */
.chat-chip {
  position: fixed;
  right: 20px;
  bottom: 20px;
  /* Below open mobile drawer (.nav-drawer z=45, .site-header z=60). */
  z-index: 35;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--purple);
  color: #fff;
  border: none;
  border-radius: 999px;
  padding: 14px 22px;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  box-shadow: 0 10px 30px rgb(0 0 0 / 0.18);
}
.chat-chip:hover { filter: brightness(1.05); }
body.nav-drawer-open .chat-chip {
  visibility: hidden;
  pointer-events: none;
}
.chat-chip-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 1.5px solid #fff;
  flex: none;
}
@media (max-width: 650px) {
  .chat-chip { right: 14px; bottom: 14px; padding: 12px 18px; font-size: 14px; }
}

/* Resting magazine curl. Artwork is assets/magazine-peel.svg
   (viewBox 394×382): deep-purple flap, thick white underside, cool-grey
   crease, cast shadow, white tap-hand, upright TAP TO / REVEAL.
   Square cards: 41% of card width, aspect preserved, nudged -3px
   top/right so the reference-crop gutters sit outside the card.
   Wide cards keep that same silhouette at ~40% of card height so the
   curl stays a corner on short banners.
   --peel is 0 at rest and 1 when .is-flipped. That number turns the
   page: the photo clips away along one curve and the same SVG rides
   the fold, solid, until it has left the card. It does not dissolve.
   --peel-duration (360ms) is the only timing. site-nav.js toggles
   .is-flipped and adds .peel-armed so the curl animation can reverse. */
@property --peel {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}

.flip-card {
  --peel: 0;
  /* Linear so the curl keyframes stay on the same clock as the clip.
     360ms is the whole turn: quick on tap, slow enough to read as a page. */
  transition: --peel var(--peel-duration) linear;
}

.flip-card.is-flipped,
.flip-card:focus-within:not(:focus) {
  --peel: 1;
}

/* Keyboard: snap. A focused back link must not sit under a moving curl,
   and a focused front CTA must stay the thing on top. */
.flip-card:has(.flip-back :focus) {
  --peel: 1;
  transition: none;
}

.flip-card:has(.flip-front :focus) {
  --peel: 0;
  transition: none;
}

.flip-front,
.flip-inner::before {
  transition: visibility 0s linear 0s;
}

.flip-inner::before {
  content: "";
  position: absolute;
  z-index: 4;
  top: -3px;
  right: -3px;
  width: 41%;
  aspect-ratio: 394 / 382;
  pointer-events: none;
  background: url("assets/magazine-peel.svg") top right / 100% 100% no-repeat;
}

/* 4/3 wide card: 30.7% of width ≈ 40% of height at 394:382. */
.flip-card-wide .flip-inner::before {
  width: 30.7%;
}

@media (min-width: 768px) {
  /* 2/1 parent banner. */
  .flip-grid.parents .flip-card-wide .flip-inner::before {
    width: 20.5%;
  }
}

.flip-front-cue {
  display: none;
}

/* Open: the photo turns off along the clip below, and the curl stays
   solid until that turn has carried it off the card. No opacity fade —
   fading the SVG washes its cast shadow across the back face. Focus
   inside the back snaps open so the focused control is not covered.
   Focus on the front CTA snaps the curl back, including Shift+Tab. */
.flip-card.is-flipped .flip-front,
.flip-card:focus-within:not(:focus) .flip-front {
  pointer-events: none;
}

.flip-card.is-flipped .flip-inner::before,
.flip-card:focus-within:not(:focus) .flip-inner::before {
  visibility: hidden;
  pointer-events: none;
  /* End pose if the turn animation is cancelled (reduced motion). */
  transform: translate3d(-140cqi, 150cqh, 0) rotate(-16deg);
  transition: visibility 0s linear var(--peel-duration);
}

/* Curl rides the fold. Keyframe times match a linear --peel, so at 45%
   the artwork is on the curve and at 100% it has left the card. Opacity
   stays 1: the SVG shadow travels with the paper. peel-armed is added
   on the first tap so this does not run on load. */
.flip-card.peel-armed.is-flipped .flip-inner::before {
  animation: curl-on var(--peel-duration) linear forwards;
}

.flip-card.peel-armed:not(.is-flipped) .flip-inner::before {
  animation: curl-on var(--peel-duration) linear reverse forwards;
}

@keyframes curl-on {
  0% {
    transform: translate3d(0, 0, 0) rotate(0deg);
  }
  25% {
    transform: translate3d(-8cqi, 9cqh, 0) rotate(-3deg);
  }
  45% {
    transform: translate3d(-30cqi, 31cqh, 0) rotate(-6deg);
  }
  70% {
    transform: translate3d(-62cqi, 64cqh, 0) rotate(-11deg);
  }
  100% {
    transform: translate3d(-140cqi, 150cqh, 0) rotate(-16deg);
  }
}

.flip-card:has(.flip-back :focus),
.flip-card:has(.flip-front :focus) {
  animation: none;
}

.flip-card:has(.flip-back :focus) .flip-front,
.flip-card:has(.flip-back :focus) .flip-inner::before {
  opacity: 1;
  visibility: hidden;
  pointer-events: none;
  transform: none;
  animation: none;
  transition: none;
}

.flip-card:has(.flip-front :focus) .flip-front {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  animation: none;
  transition: none;
}

.flip-card:has(.flip-front :focus) .flip-inner::before {
  opacity: 1;
  visibility: visible;
  pointer-events: none;
  transform: none;
  animation: none;
  transition: none;
}

/* Beat .peel-armed.is-flipped so a focused control is never under a moving curl. */
.flip-card.peel-armed:has(.flip-back :focus) .flip-inner::before,
.flip-card.peel-armed:has(.flip-front :focus) .flip-inner::before {
  animation: none;
}

.flip-card:hover:not(.is-flipped) .flip-inner::before,
.flip-card:focus-visible:not(.is-flipped) .flip-inner::before {
  filter: brightness(1.05);
}

/* Peel the photo off along one curve and carry the magazine SVG on that
   fold. At --peel: 0 the curve is a point on the top-right corner, so the
   full photo still sits under the SVG (the #47 resting look). At --peel: 1
   the curve has left through the bottom and the SVG has turned off the
   card. The paper stays opaque the whole way; only visibility drops once
   it has cleared, so the lift is a page turn and not a shadow fade.
   Polygon is the fallback where shape() is missing — still a peel, not a
   dissolve. */
.flip-front {
  /* Straight fallback where shape() is missing. 220% clears the far
     corner. The curve below is the page fold. */
  clip-path: polygon(
    0% 0%,
    calc(100% - var(--peel) * 220%) 0%,
    100% calc(var(--peel) * 220%),
    100% 100%,
    0% 100%
  );
}

.flip-inner::before {
  transform-origin: 100% 0%;
  opacity: 1;
}

@supports (clip-path: shape(from 0% 0%, line to 0% 0%, close)) {
  .flip-front {
    /* Endpoints travel past the far corner so the open curve leaves no
       photo. Controls start on that same top-right point, so at rest the
       curve has no area and the picture stays full-bleed under the SVG.
       The curve bows across the card the way a page fold does. */
    --lax: calc(100% - var(--peel) * 160%);
    --lby: calc(var(--peel) * 160%);
    --c1x: calc(100% - var(--peel) * 180%);
    --c1y: calc(var(--peel) * 80%);
    --c2x: calc(100% - var(--peel) * 30%);
    --c2y: calc(var(--peel) * 190%);
    clip-path: shape(
      from 0% 0%,
      line to var(--lax) 0%,
      curve to 100% var(--lby) with var(--c1x) var(--c1y) / var(--c2x) var(--c2y),
      line to 100% 100%,
      line to 0% 100%,
      close
    );
  }
}


/* About — merged with Discover, full purple background, all text white. */
.about-purple {
  background: var(--purple);
  color: #fff;
}
.about-purple h1,
.about-purple h2,
.about-purple h3 { color: #fff; }
.about-purple .lead,
.about-purple p { color: #fff; }
.about-purple .kicker { color: rgb(255 255 255 / 0.82); }
.about-purple main a:not(.btn),
.about-purple .site-footer a:not(.btn) { color: #fff; text-decoration-color: rgb(255 255 255 / 0.55); }
.btn-outline {
  display: inline-block;
  border: 1px solid var(--ink);
  color: var(--ink);
  background: transparent;
  border-radius: var(--radius-md);
  padding: 14px 28px;
  font-family: var(--font-body);
  font-weight: 600;
  text-decoration: none;
  text-align: center;
}
.btn-outline small { display: block; font-weight: 400; opacity: 0.8; font-size: 12px; margin-top: 2px; }
.about-purple .btn-outline {
  border-color: #fff;
  color: #fff;
}
.about-purple .btn-outline small { color: inherit; }
/* My Story: normal bounded portrait card (rounded rectangle, no arch/mask/clip-path). */
.about-purple .elena-portrait-card {
  width: 100%;
  max-width: 460px;
  justify-self: center;
  border-radius: 20px;
  overflow: hidden;
}
.about-purple .elena-portrait-card img {
  width: 100%;
  display: block;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  /* Face sits in the top of the frame. */
  object-position: center 8%;
}
.about-purple main > section {
  padding-top: 36px;
  padding-bottom: 28px;
}
.elena-belief {
  margin: 28px 0 0;
  padding: 0;
  border: 0;
  max-width: 46ch;
}
.elena-belief p {
  margin: 0;
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(20px, 2.2vw, 26px);
  line-height: 1.4;
  color: #fff;
}
.elena-belief-attr {
  margin-top: 14px !important;
  font-family: var(--font-body);
  font-style: normal;
  font-size: 13px !important;
  letter-spacing: 0.04em;
  line-height: 1.45;
  color: rgb(255 255 255 / 0.88) !important;
}
.about-discover-note { color: rgb(255 255 255 / 0.7); font-size: 12px; letter-spacing: 0.04em; text-transform: uppercase; margin-top: 24px; }

/* Location page */
.location-hero { padding: 56px 20px 24px; }
.location-visit-card {
  background: var(--surface-warm);
  border-radius: var(--radius-lg);
  padding: 32px 28px;
}
.location-visit-card h3 { margin: 0 0 4px; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--meta); }
.location-visit-card .address { font-family: var(--font-display); font-size: 22px; margin: 8px 0 16px; }
.location-visit-card .address-note { color: var(--muted); font-size: 13px; margin-bottom: 20px; }
.location-map-placeholder {
  position: relative;
  min-height: 260px;
  border-radius: var(--radius-lg);
  background:
    repeating-linear-gradient(100deg, transparent 0 120px, rgb(0 0 0 / 0.04) 120px 128px),
    repeating-linear-gradient(10deg, transparent 0 160px, rgb(0 0 0 / 0.04) 160px 168px),
    var(--surface-warm);
  display: flex;
  align-items: center;
  justify-content: center;
}
.location-map-placeholder .pin-card {
  background: var(--surface);
  border-radius: var(--radius-md);
  padding: 18px 28px;
  text-align: center;
  box-shadow: 0 6px 24px rgb(0 0 0 / 0.08);
}
.location-map-placeholder .pin-card h3 { margin: 0 0 4px; font-family: var(--font-display); font-size: 20px; }
.location-map-placeholder .pin-card p { margin: 0; font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.location-photos {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 20px;
}
.location-photos figure { margin: 0; }
.location-photos img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius-md); display: block; }
.location-photos figcaption { margin-top: 8px; font-size: 13px; color: var(--muted); }
@media (max-width: 900px) {
  .location-photos { grid-template-columns: 1fr; }
}
.location-grid { display: grid; grid-template-columns: minmax(280px, 380px) 1fr; gap: 32px; align-items: start; }
@media (max-width: 900px) {
  .location-grid { grid-template-columns: 1fr; }
}

/* Locked footer — Elena feedback tip #100. Applies to the five primary pages
   this tip touches (index/about/treatments/location/book); see RESULT.md for
   why the ~39 individual treatment detail pages keep the prior rich footer. */
.footer-elena { background: var(--paper); border-top: 1px solid var(--border); }
.footer-elena-inner { padding: 56px 20px 32px; text-align: center; }
.footer-elena .footer-kicker { font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--meta); margin: 0; }
.footer-elena .footer-heading { font-family: var(--font-display); font-size: clamp(28px, 4vw, 40px); margin: 8px 0 28px; }
.footer-facials {
  display: grid;
  grid-template-columns: repeat(4, auto);
  justify-content: center;
  gap: 12px 40px;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 24px 0;
  max-width: 980px;
  margin: 0 auto;
}
.footer-facials a { color: var(--ink); text-decoration: none; font-family: var(--font-display); font-size: 18px; }
.footer-facials a:hover { text-decoration: underline; }
@media (max-width: 750px) {
  .footer-facials { grid-template-columns: repeat(2, auto); }
}
.footer-elena .footer-book { margin: 28px 0; }
.footer-elena .btn-book {
  display: inline-block;
  background: transparent;
  color: var(--fg);
  border: 1px solid color-mix(in oklab, var(--fg), transparent 40%);
  border-radius: var(--radius-md);
  padding: 16px 40px;
  font-family: var(--font-body);
  font-size: 20px;
  font-weight: 600;
  text-decoration: none;
}
.footer-elena .btn-book:hover,
.footer-elena .btn-book:focus-visible {
  background: var(--fg);
  color: var(--bg);
  border-color: var(--fg);
}
.footer-elena .btn-book small { display: block; font-weight: 400; opacity: 0.85; font-size: 13px; margin-top: 2px; }
.footer-meta {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  max-width: 980px;
  margin: 24px auto 0;
  border-top: 1px solid var(--border);
  padding-top: 24px;
}
.footer-meta h3 { font-family: var(--font-display); font-size: 27px; margin: 0 0 10px; font-weight: 500; }
.footer-meta p { font-size: 17px; }
.footer-meta .footer-review { color: var(--purple); text-decoration: none; }
.footer-meta .footer-review:hover { text-decoration: underline; }
@media (max-width: 750px) {
  .footer-meta { grid-template-columns: 1fr; }
}
.footer-placeholder-note { margin-top: 24px; font-size: 13px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); }
.footer-elena .footer-nav-row {
  display: flex;
  justify-content: center;
  gap: 28px;
  flex-wrap: wrap;
  padding: 20px;
  border-top: 1px solid var(--border);
  font-size: 14px;
}
.footer-elena .footer-nav-row a { color: var(--ink); font-size: 17px; text-decoration: none; }
.footer-elena .footer-nav-row a[aria-current="page"] { color: var(--purple); text-decoration: underline; }

/* About page: the shared footer sits inside the full-purple page, so it needs
   its own purple/white treatment here rather than the ivory default used on
   the other four primary pages. */
.about-purple .footer-elena { background: var(--purple); border-top-color: rgb(255 255 255 / 0.25); }
.about-purple .footer-elena .footer-kicker { color: rgb(255 255 255 / 0.75); }
.about-purple .footer-elena .footer-heading { color: #fff; }
.about-purple .footer-facials { border-color: rgb(255 255 255 / 0.25); }
.about-purple .footer-facials a { color: #fff; }
/* a.btn-book matches the specificity of `.about-purple .site-footer a:not(.btn)`
   (btn-book is not .btn). Ghost outline on the purple footer, same idea as
   the other transparent buttons. small inherits the label color. */
.about-purple .footer-elena a.btn-book {
  background: transparent;
  color: #fff;
  border-color: #fff;
}
.about-purple .footer-elena a.btn-book small {
  color: inherit;
}
.about-purple .footer-elena a.btn-book:hover,
.about-purple .footer-elena a.btn-book:focus-visible {
  background: #fff;
  color: var(--purple);
}
.about-purple .footer-meta { border-color: rgb(255 255 255 / 0.25); }
.about-purple .footer-meta h3 { color: #fff; }
.about-purple .footer-meta .footer-review { color: #fff; }
.about-purple .footer-placeholder-note { color: rgb(255 255 255 / 0.65); }
.about-purple .footer-nav-row { border-top-color: rgb(255 255 255 / 0.25); }
.about-purple .footer-nav-row a { color: #fff; }
.about-purple .footer-nav-row a[aria-current="page"] { color: #fff; text-decoration-color: #fff; }

/* Location — map-forward visit, not a contact-page clone. */
.loc-hero { padding: 36px 0 8px; }
.loc-hero h1 { max-width: 16ch; }
.loc-hero .lead { max-width: 42ch; margin-top: 12px; }
.loc-map-wrap {
  position: relative;
  margin-top: 28px;
  border-radius: 18px;
  overflow: hidden;
  min-height: 420px;
  background: var(--surface-warm);
}
.loc-map-wrap iframe {
  display: block;
  width: 100%;
  height: 460px;
  border: 0;
}
.loc-address-chip {
  position: absolute;
  left: 20px;
  bottom: 20px;
  max-width: min(360px, calc(100% - 40px));
  padding: 18px 20px;
  background: var(--paper);
  border-radius: 14px;
  box-shadow: 0 10px 30px rgb(44 40 36 / 0.16);
}
.loc-address-chip h2 {
  margin: 0 0 6px;
  font-size: 26px;
  font-style: italic;
}
.loc-address-chip p { margin: 0; }
.loc-address-chip .loc-note { margin-top: 8px; font-size: 12px; color: var(--muted); }
.loc-ribbon {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr 1fr;
  gap: 18px;
  margin-top: 22px;
}
.loc-panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 18px 18px 16px;
}
.loc-panel h2 {
  margin: 0 0 8px;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--purple);
}
.loc-panel p, .loc-panel a { font-size: 16px; }
.loc-hours { list-style: none; margin: 0; padding: 0; }
.loc-hours li {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 8px 0;
  border-top: 1px solid var(--border);
  font-size: 15px;
}
.loc-hours li:first-child { border-top: 0; padding-top: 0; }
.loc-kit {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: 24px;
  align-items: stretch;
  margin-top: 28px;
}
.loc-kit .loc-map-wrap { margin-top: 0; min-height: 420px; }
.loc-kit .loc-map-wrap iframe { height: 100%; min-height: 460px; }
.loc-video {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 22px 20px 16px;
  text-align: center;
  background: var(--surface-warm);
  border: 1px solid var(--border);
  border-radius: 18px;
}
.loc-video-dock {
  position: relative;
  width: 100%;
  max-width: 360px;
  padding: 8px;
  background: var(--paper);
  border-radius: 22px;
  box-shadow: 0 10px 30px rgb(44 40 36 / 0.14);
}
.loc-video video {
  display: block;
  width: 100%;
  height: auto;
  max-height: 68vh;
  aspect-ratio: 9 / 16;
  object-fit: cover;
  background: #000;
  border-radius: 16px;
}
.loc-mute {
  position: absolute;
  right: 18px;
  bottom: 18px;
  min-height: 34px;
  padding: 6px 12px;
  border: 0;
  border-radius: 999px;
  background: rgb(44 40 36 / 0.62);
  color: #fff;
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}
.loc-mute:focus-visible { outline: 2px solid var(--purple); outline-offset: 2px; }
.loc-video figcaption { margin-top: 12px; font-size: 13px; color: var(--muted); }
@media (max-width: 800px) {
  .loc-kit { grid-template-columns: 1fr; gap: 18px; }
  .loc-kit .loc-map-wrap iframe { min-height: 420px; }
  .loc-video { padding: 18px 14px 14px; }
  .loc-video-dock { max-width: 290px; }
}
.loc-film {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(220px, 1fr);
  gap: 14px;
  margin-top: 22px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 6px;
}
.loc-film figure { margin: 0; scroll-snap-align: start; }
.loc-film img {
  width: 100%;
  height: 180px;
  object-fit: cover;
  border-radius: 12px;
}
.loc-film figcaption { margin-top: 6px; font-size: 13px; color: var(--muted); }
.policies {
  padding-top: 28px;
  padding-bottom: 64px;
}
.policies-intro {
  text-align: left;
  max-width: 46rem;
  margin: 0 0 28px;
}
.policies-please {
  margin: 18px 0 0;
  font-family: var(--font-body);
  font-style: normal;
  font-size: 18px;
  line-height: 1.5;
  color: var(--fg-2);
}
.book-online-cta .btn {
  min-width: 320px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-size: 13px;
  font-weight: 600;
}
.policy-stack { display: grid; gap: 16px; }
.policy-card {
  background: var(--surface);
  border-left: 3px solid var(--purple);
  border-radius: 0 12px 12px 0;
  padding: 18px 22px 8px;
}
.policy-card h3 {
  margin: 0 0 8px;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--purple);
}
.policy-card p { margin: 0 0 12px; font-size: 16px; max-width: 75ch; }
.book-online-cta { margin: 0 0 8px; }
@media (max-width: 800px) {
  .loc-ribbon { grid-template-columns: 1fr; }
  .loc-address-chip { position: static; max-width: none; border-radius: 0; }
  .loc-map-wrap { border-radius: 12px; }
}

/* Footer social / phone / chat (footer-elena) */
.footer-elena .footer-social,
.footer-elena .footer-review-mark-row { display: flex; justify-content: center; gap: 14px; }
.footer-elena .footer-social a,
.footer-elena .footer-review-mark {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 50%;
  color: var(--purple); border: 1px solid var(--border); background: var(--paper);
}
.footer-elena .footer-review-mark { flex: none; }
.footer-elena .footer-social a svg,
.footer-elena .footer-review-mark svg { width: 24px; height: 24px; }
.footer-elena .footer-social a:hover { background: var(--surface-warm); }
.footer-elena .footer-phone { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; }
.about-purple .footer-elena .footer-social a,
.about-purple .footer-elena .footer-review-mark { color: #fff; border-color: rgb(255 255 255 / 0.4); background: transparent; }
@media (max-width: 650px) {
  .footer-elena .footer-social a,
  .footer-elena .footer-review-mark { width: 40px; height: 40px; }
}
.chat-chip {
  position: fixed; right: 18px; bottom: 18px; z-index: 60;
  padding: 12px 20px; border: 0; border-radius: 999px;
  background: var(--purple); color: #fff; font: inherit; font-size: 15px;
  box-shadow: 0 8px 24px rgb(44 40 36 / 0.25); cursor: pointer;
}
.chat-panel {
  position: fixed; right: 18px; bottom: 74px; z-index: 61;
  width: min(340px, calc(100vw - 36px)); padding: 20px;
  background: var(--paper); border: 1px solid var(--border); border-radius: 16px;
  box-shadow: 0 16px 40px rgb(44 40 36 / 0.28);
}
.chat-panel[hidden] { display: none; }
.chat-panel h3 { margin: 0 0 12px; font-size: 22px; }
.chat-panel label { display: block; margin-bottom: 10px; font-size: 13px; color: var(--muted); }
.chat-panel input, .chat-panel textarea {
  display: block; width: 100%; margin-top: 4px; padding: 10px;
  border: 1px solid var(--border); border-radius: 10px; font: inherit; font-size: 16px; background: #fff;
}
.chat-close { position: absolute; top: 8px; right: 12px; border: 0; background: none; font-size: 24px; cursor: pointer; color: var(--muted); }

/* Home featured-treatments: View services buttons + purple back (Jason 9/29) */
[data-od-id="featured-treatments"] .flip-back {
  background: color-mix(in srgb, var(--purple) 80%, black);
}

/* Keep the Science Behind the Art card copy comfortably readable without
   crowding its button on the smallest square cards. */
[data-od-id="featured-treatments"] .flip-back p {
  font-size: clamp(0.88rem, 4.5cqw, 1.12rem);
  line-height: 1.42;
}

[data-od-id="featured-treatments"] .btn-view-service {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  margin-top: 6px;
  padding: 12px 26px;
  border: 1.5px solid #ffffff;
  border-radius: var(--radius-pill);
  background: transparent;
  color: #ffffff;
  font-family: var(--font-body);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: 0.04em;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--motion-fast) var(--ease-standard), color var(--motion-fast) var(--ease-standard);
}

[data-od-id="featured-treatments"] .btn-view-service:hover,
[data-od-id="featured-treatments"] .btn-view-service:focus-visible {
  background: #ffffff;
  color: color-mix(in srgb, var(--purple) 80%, black);
}

[data-od-id="featured-treatments"] .btn-view-service:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 3px;
}

@media (max-width: 359px) {
  [data-od-id="featured-treatments"] .flip-back {
    gap: 8px;
    padding: 12px 16px;
  }

  [data-od-id="featured-treatments"] .flip-back h3 {
    font-size: 21px;
    line-height: 1.05;
  }

  [data-od-id="featured-treatments"] .flip-back p {
    font-size: 0.88rem;
    line-height: 1.35;
  }

  [data-od-id="featured-treatments"] .btn-view-service {
    min-height: 44px;
    margin-top: 0;
    padding: 10px 22px;
  }
}

@media (min-width: 768px) {
  [data-od-id="featured-treatments"] .flip-back {
    gap: 10px;
    padding: 22px 20px;
  }

  [data-od-id="featured-treatments"] .flip-back p {
    font-size: clamp(1.05rem, 4.5cqw, 1.12rem);
  }

  [data-od-id="featured-treatments"] .btn-view-service {
    font-size: 18px;
  }
}

/* The 4:3 body-therapy card is shortest just above the small-card layout.
   Keep its larger description while tightening only that intermediate size. */
@container (min-width: 328px) and (max-width: 388px) {
  [data-od-id="home-parent-specialized-body-therapies"] .flip-back-wide {
    gap: 8px;
    padding-block: 18px 16px;
  }

  [data-od-id="home-parent-specialized-body-therapies"] .flip-back-wide > p {
    line-height: 1.32;
  }
}

/* Home pillars (Art of Intelligent Aging): bigger paragraph, one-liners lower (Jason 9/29 B) */
[data-od-id="home-pillars"] .we-build-subhead {
  max-width: 48ch;
  font-size: clamp(21px, 2.4vw, 28px);
  line-height: 1.4;
}

[data-od-id="home-pillars"] .we-build-lines {
  margin-top: 20px;
}

@media (min-width: 900px) {
  [data-od-id="home-pillars"] .we-build-lead {
    display: flex;
    flex-direction: column;
    align-self: stretch;
  }

  [data-od-id="home-pillars"] .we-build-lines {
    margin-top: 20px;
    padding-top: 0;
  }
}

/* Seasonal card labels sit over the navy photo wash and purple back face. */
.flip-front-eyebrow,
.flip-eyebrow {
  margin: 0;
  color: #ffffff;
  font-family: var(--font-body);
  font-size: clamp(0.65rem, 1.2cqw, 0.75rem);
  font-weight: 600;
  letter-spacing: 0.14em;
  line-height: 1.2;
  text-transform: uppercase;
}

.flip-front-eyebrow {
  text-shadow: 0 1px 12px rgb(17 17 17 / 0.45);
}

.flip-eyebrow {
  color: rgb(255 255 255 / 0.82);
}

/* About My Story: portrait up + quote under portrait (Jason 9/29 C/D) */
.about-purple #elena .elena-media {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 460px;
  justify-self: center;
}

.about-purple #elena .elena-belief {
  max-width: 100%;
  margin-top: 24px;
  text-align: left;
}

@media (min-width: 900px) {
  .about-purple #elena .elena-media {
    align-self: start;
    justify-self: start;
  }
}

/* About Mission/Philosophy: larger text (Jason 9/29 E) */
.about-purple [data-od-id="philosophy"] .learn-block.learn-block--no-icon h2 {
  font-size: clamp(22px, 2.6vw, 30px);
}

.about-purple [data-od-id="philosophy"] .learn-block.learn-block--no-icon p {
  max-width: 62ch;
  font-size: 18px;
  line-height: 1.6;
}

@media (min-width: 768px) {
  .about-purple [data-od-id="philosophy"] .learn-block.learn-block--no-icon p {
    font-size: 20px;
  }
}

@media (min-width: 1024px) {
  .about-purple [data-od-id="philosophy"] .learn-block.learn-block--no-icon p {
    font-size: 21px;
  }
}

/* Header logo larger on every page (Jason 9/29 F) */
:root {
  --logo-lockup: 116px;
  --header-height: 156px;
}

/* Clear the sticky header for hash links, including the skip-link target. */
main[id],
main [id] {
  scroll-margin-top: calc(var(--header-height) + 16px);
}

@media (min-width: 1024px) {
  :root {
    --logo-lockup: 150px;
    --header-height: 222px;
  }

  /* Keep the two desktop rows as compact as the larger lockup allows. */
  .header-bar,
  .header-inner {
    padding-block: 4px 2px;
  }
}

/* Desktop nav links larger + spread (Jason 9/29 G) */
@media (min-width: 1024px) {
  .nav-piped {
    flex-wrap: nowrap !important;
  }

  .nav-piped > a,
  .nav-piped > .nav-drop > a {
    font-size: 17px;
    padding-inline: 22px;
  }
}

@media (min-width: 1280px) {
  .nav-piped > a,
  .nav-piped > .nav-drop > a {
    font-size: 18px;
    padding-inline: 30px;
  }
}

/* Header social icons + phone larger (Jason 9/29 H) */
@media (min-width: 1024px) {
  .site-header .header-social {
    gap: 10px;
  }

  .site-header .header-social a {
    width: 38px;
    height: 38px;
  }

  .site-header .header-social svg {
    width: 18px;
    height: 18px;
  }

  .site-header .header-phone {
    font-size: 15px;
  }
}

/* Shared video posters (click to play). */
.ev-video { position: relative; aspect-ratio: 16 / 9; background: #000; overflow: hidden; }
.ev-video img, .ev-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border: 0; }
.ev-video button { position: absolute; inset: 0; width: 100%; border: 0; background: transparent; cursor: pointer; }
.ev-video button::before { content: ""; position: absolute; left: 50%; top: 50%; width: 76px; height: 76px; margin: -38px 0 0 -38px; border: 1px solid #fff; border-radius: 50%; background: rgba(75,53,78,.55); }
.ev-video button::after { content: ""; position: absolute; left: 50%; top: 50%; margin: -12px 0 0 -6px; border-style: solid; border-width: 12px 0 12px 20px; border-color: transparent transparent transparent #fff; }
.ev-video button:focus-visible { outline: 3px solid #fff; outline-offset: -5px; }

/* Editable copy placeholders (batch 3 service template). Every one is preceded by
   an HTML comment "<!-- PLACEHOLDER: section-name -->" and starts "Elena to add:". */
.lys-placeholder {
  display: block;
  width: fit-content;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding: 6px 12px;
  border: 1px dashed currentColor;
  border-radius: 2px;
  font-style: italic;
  font-weight: 400;
  opacity: 0.72;
}
.ev-hero .lys-placeholder,
.ev-faq-intro .lys-placeholder { margin-left: 0; }