/* ============================================================
   REJUUV MEDI SPA: Luxury Redesign
   Brand palette, built around the logo colour #E5667B.
   Every token sits on that same hue (350) so the dark surfaces read as deep
   rose rather than the desaturated purple they used to be: the pink is the
   theme, not just the highlight.
   Rose #E5667B · Plum #51242C · Blush #FCF5F6 · Sand #F1DADE
   ============================================================ */

:root {
  --blush: #fcf5f6;
  --blush-deep: #f9e7ea;
  --plum: #51242c;
  --plum-brand: #713841;
  --plum-deep: #36171c;
  --rose: #e5667b;
  --rose-soft: #f09dab;
  --terracotta: #e0a4ae;
  --sand: #f1dade;
  --mauve: #a1727a;
  --line: rgba(113, 56, 65, 0.16);
  /* Card/section surfaces. The sister site (Rejuuv Med) defines the same two
     names against its dark palette, so the shared components below can be
     written once and land correctly on either theme. */
  /* Pink surface scale. The old plum ramp is gone: these are all the brand
     hue (350), stepped only in lightness, so every dark band on the site now
     reads as the brand colour instead of a separate neutral. Contrast with
     white: brand 3.2:1 (display type only), deep 5.1:1, deepest 8.5:1. */
  --brand: #e5667b;
  --brand-deep: #b04e5e;
  --brand-deepest: #7d3644;
  --panel: #fefbfb;
  --panel-2: #fdf1f3;
  --line-light: rgba(252, 245, 246, 0.16);

  --serif: "Bodoni Moda", "Didot", Georgia, serif;
  --sans: "Mulish", "Proxima Nova", "Helvetica Neue", sans-serif;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

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

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--sans);
  font-weight: 300;
  background: var(--blush);
  color: var(--plum);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

::selection {
  background: var(--rose);
  color: #fff;
}

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

a {
  color: inherit;
  text-decoration: none;
}

ul {
  list-style: none;
}

/* ---------- Typography ---------- */

h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 600;
  /* Low optical size = low stroke contrast, so the Didone hairlines stay
     sturdy and legible instead of thinning out. */
  font-optical-sizing: none;
  font-variation-settings: "opsz" 15, "wght" 650;
  line-height: 1.15;
  letter-spacing: 0.01em;
}

.display-xl,
.display-lg {
  font-weight: 700;
  font-variation-settings: "opsz" 15, "wght" 700;
}

em.accent {
  font-variation-settings: "opsz" 14, "wght" 650;
}

.eyebrow {
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 400;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--rose);
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.eyebrow::before {
  content: "";
  width: 2.5rem;
  height: 1px;
  background: var(--rose);
}

.display-xl {
  font-size: clamp(3rem, 8vw, 6.2rem);
}

.display-lg {
  font-size: clamp(2.4rem, 5vw, 4rem);
}

.display-md {
  font-size: clamp(1.8rem, 3.2vw, 2.6rem);
}

.lede {
  font-size: 1.05rem;
  font-weight: 300;
  color: rgba(81, 36, 44, 0.72);
  max-width: 36rem;
}

em.accent {
  font-style: italic;
  color: var(--rose);
}

/* ---------- Layout ---------- */

.container {
  width: min(1240px, 92vw);
  margin-inline: auto;
}

section {
  padding: clamp(3.75rem, 7vw, 5.75rem) 0;
}

.section-head {
  max-width: 44rem;
  margin-bottom: clamp(2rem, 4vw, 3.25rem);
}

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.85rem;
  font-family: var(--sans);
  font-size: 0.74rem;
  font-weight: 400;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  padding: 1.1rem 2.4rem;
  border: 1px solid var(--plum);
  color: var(--plum);
  background: transparent;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: color 0.45s var(--ease);
}

.btn::after {
  content: "→";
  letter-spacing: 0;
  transition: transform 0.45s var(--ease);
}

.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--plum);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.45s var(--ease);
  z-index: -1;
}

.btn:hover {
  color: var(--blush);
}

.btn:hover::before {
  transform: scaleX(1);
}

.btn:hover::after {
  transform: translateX(4px);
}

/* The primary action is filled, not outlined. Every button on the page being a
   thin outline meant nothing read as the thing to click. Pattern is the
   conventional filled-primary / outline-secondary pairing. */
.btn--rose {
  border-color: var(--rose);
  background: var(--rose);
  color: #fff;
  box-shadow: 0 10px 26px rgba(229, 102, 123, 0.28);
  transition: color 0.45s var(--ease), background 0.35s var(--ease),
    box-shadow 0.35s var(--ease), transform 0.35s var(--ease);
}
.btn--rose::before { background: var(--plum-deep, var(--plum)); }
.btn--rose:hover {
  color: #fff;
  box-shadow: 0 16px 34px rgba(229, 102, 123, 0.34);
  transform: translateY(-2px);
}

/* Secondary action sitting on a LIGHT surface. .btn--light is cream-on-cream
   here and was effectively invisible inside the treatment panel. */
.btn--ink {
  border-color: rgba(113, 56, 65, 0.32);
  color: var(--plum);
  background: transparent;
}
.btn--ink::before { background: var(--plum); }
.btn--ink:hover { color: var(--blush); border-color: var(--plum); }


.btn--light {
  border-color: rgba(252, 245, 246, 0.5);
  color: var(--blush);
}

.btn--light::before {
  background: var(--blush);
}

.btn--light:hover {
  color: var(--plum);
}

.text-link {
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: #fff;
  background: var(--rose);
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.9rem 1.8rem;
  align-self: flex-start;
  transition: background 0.35s var(--ease), gap 0.35s var(--ease),
    box-shadow 0.35s var(--ease);
}

.text-link:hover {
  gap: 1.1rem;
  background: #d64e64;
  box-shadow: 0 12px 28px rgba(229, 102, 123, 0.35);
}

/* ---------- Header ---------- */

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  transition: background 0.5s var(--ease), box-shadow 0.5s var(--ease),
    padding 0.5s var(--ease);
  padding: 1.4rem 0;
}

.site-header.scrolled {
  box-shadow: 0 1px 0 var(--line);
  padding: 0.8rem 0;
}

/* The frosted bar is a layer behind the header, not the header itself:
   backdrop-filter on .site-header made it the containing block for the fixed
   mobile menu, which then opened squashed into the bar after any scroll. */
.site-header::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(252, 245, 246, 0.93);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  opacity: 0;
  transition: opacity 0.5s var(--ease);
  pointer-events: none;
}
.site-header.scrolled::before { opacity: 1; }

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}

/* Wordmark: REJUUV over MEDI SPA, as in the brand logo */
.logo {
  font-family: var(--serif);
  font-size: 1.5rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 600;
  /* sturdier wordmark, low optical size keeps REJUUV's strokes legible */
  font-optical-sizing: none;
  font-variation-settings: "opsz" 11, "wght" 680;
  line-height: 1;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  z-index: 110;
}

.logo span {
  font-family: var(--sans);
  font-size: 0.46rem;
  font-weight: 400;
  letter-spacing: 0.62em;
  text-indent: 0.62em;
  text-transform: uppercase;
  color: var(--rose);
}

/* Dark header (on dark hero before scroll) */
.header-dark:not(.scrolled) {
  color: var(--blush);
}

.header-dark:not(.scrolled) .logo span {
  color: var(--rose-soft);
}

.header-dark:not(.scrolled) .nav-list > li > a {
  color: rgba(252, 245, 246, 0.85);
}

.header-dark:not(.scrolled) .nav-list > li > a:hover {
  color: #fff;
}

.main-nav {
  display: flex;
  align-items: center;
  gap: 2.6rem;
}

.nav-list {
  display: flex;
  gap: 2.4rem;
}

.nav-list > li {
  position: relative;
}

.nav-list > li > a {
  font-size: 0.74rem;
  font-weight: 400;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  white-space: nowrap;
  color: rgba(81, 36, 44, 0.78);
  padding: 0.6rem 0;
  display: inline-block;
  transition: color 0.3s;
}

.nav-list > li > a:hover,
.nav-list > li > a.active {
  color: var(--rose);
}

/* Dropdown */
.dropdown {
  position: absolute;
  top: calc(100% + 0.6rem);
  left: 50%;
  transform: translate(-50%, 12px);
  background: var(--plum);
  color: var(--blush);
  min-width: 240px;
  padding: 1.2rem 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.35s var(--ease), transform 0.35s var(--ease),
    visibility 0.35s;
  box-shadow: 0 24px 60px rgba(54, 23, 28, 0.28);
}

.dropdown::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  height: 1.4rem;
}

.nav-list li:hover .dropdown,
.nav-list li:focus-within .dropdown {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}

.dropdown a {
  display: block;
  padding: 0.55rem 1.8rem;
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(252, 245, 246, 0.7);
  transition: color 0.25s, padding-left 0.25s;
}

.dropdown a:hover {
  color: var(--rose-soft);
  padding-left: 2.2rem;
}

.header-cta {
  white-space: nowrap;
  padding: 0.85rem 1.7rem;
  font-size: 0.68rem;
}

/* Mobile nav toggle */
.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 7px;
  background: none;
  border: none;
  cursor: pointer;
  z-index: 110;
  padding: 6px;
}

.nav-toggle span {
  width: 28px;
  height: 1px;
  background: currentColor;
  transition: transform 0.4s var(--ease), opacity 0.3s;
}

/* ---------- Hero ---------- */

.hero {
  min-height: 100svh;
  display: flex;
  align-items: center;
  position: relative;
  background:
    radial-gradient(ellipse 80% 60% at 75% 20%, rgba(229, 102, 123, 0.26), transparent 60%),
    radial-gradient(ellipse 60% 50% at 15% 85%, rgba(220, 161, 145, 0.16), transparent 55%),
    linear-gradient(160deg, #5e3444 0%, #51242c 55%, #3a222c 100%);
  color: var(--blush);
  padding: 9rem 0 6rem;
  overflow: hidden;
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E");
  pointer-events: none;
}

.hero-inner {
  position: relative;
  z-index: 2;
  max-width: 54rem;
}

.hero .eyebrow {
  color: var(--rose-soft);
}

.hero .eyebrow::before {
  background: var(--rose-soft);
}

.hero h1 {
  margin-bottom: 2rem;
}

.hero h1 .line {
  display: block;
  overflow: hidden;
}

.hero h1 .line span {
  display: block;
  transform: translateY(110%);
  animation: riseUp 1.1s var(--ease) forwards;
}

.hero h1 .line:nth-child(2) span {
  animation-delay: 0.15s;
}

.hero h1 .line:nth-child(3) span {
  animation-delay: 0.3s;
}

@keyframes riseUp {
  to {
    transform: translateY(0);
  }
}

.hero em.accent {
  color: var(--rose-soft);
}

.hero .lede {
  color: rgba(252, 245, 246, 0.65);
  margin-bottom: 3rem;
  animation: fadeIn 1.2s 0.6s var(--ease) both;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1.4rem;
  animation: fadeIn 1.2s 0.8s var(--ease) both;
}

.hero .btn--rose {
  color: var(--rose-soft);
}

.hero .btn--rose:hover {
  color: #fff;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.hero-meta {
  position: absolute;
  bottom: 2.6rem;
  left: 0;
  right: 0;
  z-index: 2;
}

.hero-meta .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 2rem;
  font-size: 0.7rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(252, 245, 246, 0.45);
}

.hero-meta .locations-strip {
  display: flex;
  gap: 2.4rem;
}

/* ---------- Marquee strip ---------- */

.strip {
  background: var(--rose);
  color: #fff;
  padding: 1.1rem 0;
  overflow: hidden;
  white-space: nowrap;
}

.strip-track {
  display: inline-flex;
  gap: 4rem;
  animation: marquee 38s linear infinite;
  font-size: 0.72rem;
  letter-spacing: 0.36em;
  text-transform: uppercase;
}

.strip-track span {
  display: inline-flex;
  align-items: center;
  gap: 4rem;
}

.strip-track span::after {
  content: "✦";
  font-size: 0.6rem;
}

@keyframes marquee {
  to {
    transform: translateX(-50%);
  }
}

/* ---------- Services ---------- */

.services-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}

.service-card {
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: clamp(2.2rem, 4vw, 3.6rem);
  position: relative;
  transition: background 0.5s var(--ease);
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
  min-height: 320px;
}

.service-card:hover {
  background: #fff;
  box-shadow: 0 24px 56px rgba(54, 23, 28, 0.1);
}

.service-card .num {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1rem;
  color: var(--rose);
}

.service-card h3 {
  font-size: clamp(1.6rem, 2.4vw, 2.1rem);
  transition: color 0.4s;
}

.service-card p {
  font-size: 0.92rem;
  color: var(--mauve);
  max-width: 30rem;
  flex-grow: 1;
}

/* Plain filled chips, labels not buttons */
.service-card .tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: auto;
}

.service-card .tags li {
  font-size: 0.66rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 0.45rem 0.95rem;
  background: var(--blush-deep);
  color: var(--mauve);
  border-radius: 2rem;
}

.service-card .text-link {
  margin-top: 1.6rem;
}

.service-card--wide {
  grid-column: 1 / -1;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 3rem;
  min-height: 0;
}

/* ---------- Philosophy ---------- */

.philosophy {
  background: var(--plum);
  color: var(--blush);
  position: relative;
  overflow: hidden;
}

.philosophy::before {
  content: "";
  position: absolute;
  width: clamp(38rem, 86vw, 74rem);
  aspect-ratio: 2000 / 720;
  background: rgba(255, 255, 255, 0.12);
  -webkit-mask: url("../assets/logo.png") no-repeat center / contain;
  mask: url("../assets/logo.png") no-repeat center / contain;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.philosophy .eyebrow,
.philosophy em.accent {
  color: var(--rose-soft);
}

.philosophy .eyebrow::before {
  background: var(--rose-soft);
}

.philosophy-inner {
  position: relative;
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: clamp(3rem, 7vw, 7rem);
  align-items: center;
}

.philosophy h2 {
  margin-bottom: 2rem;
}

.philosophy .lede {
  color: rgba(252, 245, 246, 0.62);
}

.stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border: 1px solid var(--line-light);
}

.stat {
  padding: 2.4rem 2rem;
  border-bottom: 1px solid var(--line-light);
}

.stat:nth-child(odd) {
  border-right: 1px solid var(--line-light);
}

.stat:nth-last-child(-n + 2) {
  border-bottom: none;
}

.stat .value {
  font-family: var(--serif);
  font-size: clamp(2.4rem, 4vw, 3.4rem);
  color: var(--rose-soft);
  line-height: 1;
  margin-bottom: 0.6rem;
}

.stat .label {
  font-size: 0.68rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(252, 245, 246, 0.5);
}

/* ---------- Doctors ---------- */

.doctors-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.5rem, 3vw, 3rem);
}

.doctor-card {
  background: #fff;
  border: 1px solid var(--line);
  padding: clamp(2rem, 3vw, 3rem);
  transition: transform 0.5s var(--ease), box-shadow 0.5s var(--ease);
}

.doctor-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 30px 60px rgba(54, 23, 28, 0.12);
}

.doctor-card .monogram {
  width: 76px;
  height: 76px;
  border-radius: 50%;
  border: 1px solid var(--rose);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.5rem;
  color: var(--rose);
  margin-bottom: 1.8rem;
}

.doctor-card h3 {
  font-size: 1.5rem;
  margin-bottom: 0.3rem;
}

.doctor-card .role {
  font-size: 0.68rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--rose);
  margin-bottom: 1.2rem;
}

.doctor-card p {
  font-size: 0.92rem;
  color: var(--mauve);
}

/* ---------- Experience / CTA band ---------- */

.cta-band {
  background:
    radial-gradient(ellipse 70% 90% at 80% 50%, rgba(229, 102, 123, 0.22), transparent 60%),
    var(--plum);
  color: var(--blush);
  text-align: center;
}

.cta-band .eyebrow,
.cta-band em.accent {
  color: var(--rose-soft);
}

.cta-band .eyebrow::before {
  background: var(--rose-soft);
}

.cta-band .btn--rose {
  color: var(--rose-soft);
}

.cta-band .btn--rose:hover {
  color: #fff;
}

.cta-band h2 {
  max-width: 46rem;
  margin-inline: auto;
  margin-bottom: 2.4rem;
}

/* ---------- Locations ---------- */

.locations-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.5rem, 3vw, 3rem);
}

.location-card {
  border: 1px solid var(--line);
  padding: clamp(2rem, 3vw, 3rem);
  background: #fff;
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}

.location-card .city {
  font-size: 0.66rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--rose);
}

.location-card h3 {
  font-size: 1.7rem;
}

.location-card address {
  font-style: normal;
  font-size: 0.92rem;
  color: var(--mauve);
  flex-grow: 1;
}

.location-card .tel {
  font-size: 0.9rem;
  letter-spacing: 0.08em;
  color: var(--plum);
  border-bottom: 1px solid var(--rose);
  align-self: flex-start;
  padding-bottom: 2px;
  transition: color 0.3s;
}

.location-card .tel:hover {
  color: var(--rose);
}

.hours-note {
  margin-top: 3rem;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 3.5rem;
  font-size: 0.78rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--mauve);
}

.hours-note strong {
  font-weight: 400;
  color: var(--plum);
}

/* ---------- Footer ---------- */

.site-footer {
  background: var(--plum-deep);
  color: rgba(252, 245, 246, 0.58);
  padding: clamp(4rem, 8vw, 6.5rem) 0 5.5rem;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: clamp(2rem, 5vw, 5rem);
  padding-bottom: 4rem;
  border-bottom: 1px solid rgba(252, 245, 246, 0.1);
}

.site-footer .logo {
  color: var(--blush);
  margin-bottom: 1.4rem;
  align-items: flex-start;
}

.site-footer .logo span {
  color: var(--rose-soft);
}

.footer-tagline {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.15rem;
  color: rgba(252, 245, 246, 0.48);
  max-width: 20rem;
}

.footer-col h4 {
  font-family: var(--sans);
  font-size: 0.68rem;
  font-weight: 400;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--rose-soft);
  margin-bottom: 1.4rem;
}

.footer-col li {
  margin-bottom: 0.7rem;
}

.footer-col a {
  font-size: 0.88rem;
  color: rgba(252, 245, 246, 0.58);
  transition: color 0.3s;
}

.footer-col a:hover {
  color: var(--rose-soft);
}

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1rem;
  padding-top: 2.5rem;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  color: rgba(252, 245, 246, 0.32);
}

.footer-bottom a {
  color: rgba(252, 245, 246, 0.42);
}

.footer-bottom a:hover {
  color: var(--rose-soft);
}

/* ---------- Inner page hero ---------- */

.page-hero {
  background:
    radial-gradient(ellipse 70% 60% at 80% 10%, rgba(229, 102, 123, 0.24), transparent 60%),
    var(--plum);
  color: var(--blush);
  padding: 11rem 0 5.5rem;
}

.page-hero .eyebrow,
.page-hero em.accent {
  color: var(--rose-soft);
}

.page-hero .eyebrow::before {
  background: var(--rose-soft);
}

.page-hero .lede {
  color: rgba(252, 245, 246, 0.62);
  margin-top: 1.6rem;
}

/* ---------- Treatment list (inner pages) ---------- */

.treatment-list {
  border-top: 1px solid var(--line);
}

.treatment-row {
  display: grid;
  grid-template-columns: 80px 1fr 1.4fr auto;
  gap: clamp(1.5rem, 3vw, 3.5rem);
  align-items: center;
  padding: clamp(1.8rem, 3vw, 2.8rem) 0;
  border-bottom: 1px solid var(--line);
  transition: padding-left 0.45s var(--ease), background 0.45s var(--ease);
}

.treatment-row:hover {
  padding-left: 1.5rem;
  background: rgba(229, 102, 123, 0.07);
}

.treatment-row .num {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.1rem;
  color: var(--rose);
}

.treatment-row h3 {
  font-size: clamp(1.4rem, 2.2vw, 1.9rem);
}

.treatment-row p {
  font-size: 0.9rem;
  color: var(--mauve);
}

.treatment-row .btn {
  padding: 0.8rem 1.6rem;
  font-size: 0.66rem;
}

/* ---------- Values (about page) ---------- */

.values-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.5rem, 3vw, 3rem);
}

.value-card {
  padding: clamp(2rem, 3vw, 3rem);
  border: 1px solid var(--line);
  background: #fff;
}

.value-card .num {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1rem;
  color: var(--rose);
  display: block;
  margin-bottom: 1.4rem;
}

.value-card h3 {
  font-size: 1.45rem;
  margin-bottom: 0.9rem;
}

.value-card p {
  font-size: 0.92rem;
  color: var(--mauve);
}

.team-strip {
  margin-top: 4rem;
  padding: clamp(2rem, 4vw, 3.5rem);
  background: var(--plum);
  color: var(--blush);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}

.team-strip h3 {
  font-size: 1.8rem;
  max-width: 26rem;
}

.team-strip p {
  font-size: 0.9rem;
  color: rgba(252, 245, 246, 0.6);
  max-width: 30rem;
}

/* ---------- Contact / booking ---------- */

.booking-grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: clamp(3rem, 6vw, 6rem);
  align-items: start;
}

.contact-details li {
  padding: 1.4rem 0;
  border-bottom: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.contact-details .label {
  font-size: 0.66rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--rose);
}

.contact-details .value {
  font-family: var(--serif);
  font-size: 1.3rem;
}

.booking-form {
  display: grid;
  gap: 1.6rem;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.field label {
  font-size: 0.66rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--mauve);
}

.field input,
.field select,
.field textarea {
  font-family: var(--sans);
  font-size: 1rem;
  font-weight: 300;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--line);
  padding: 0.7rem 0;
  color: var(--plum);
  transition: border-color 0.3s;
  border-radius: 0;
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-bottom-color: var(--rose);
}

.field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.6rem;
}

/* ---------- Reveal on scroll ---------- */

.reveal {
  opacity: 0;
  transform: translateY(36px);
  transition: opacity 0.9s var(--ease), transform 0.9s var(--ease);
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

.reveal-d1 { transition-delay: 0.1s; }
.reveal-d2 { transition-delay: 0.2s; }
.reveal-d3 { transition-delay: 0.3s; }

/* ---------- Reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .reveal,
  .hero .lede,
  .hero-actions {
    opacity: 1;
    transform: none;
    transition: none;
    animation: none;
  }

  .hero h1 .line span {
    transform: none;
    animation: none;
  }

  .strip-track {
    animation: none;
  }
}

/* ---------- Responsive ---------- */

@media (max-width: 1020px) {
  .doctors-grid,
  .locations-grid,
  .values-grid {
    grid-template-columns: 1fr;
    max-width: 560px;
  }

  .philosophy-inner,
  .booking-grid {
    grid-template-columns: 1fr;
  }

  .treatment-row {
    grid-template-columns: 1fr;
    gap: 0.8rem;
  }

  .treatment-row .num {
    display: none;
  }
}

@media (max-width: 880px) {
  .nav-toggle {
    display: flex;
  }

  .main-nav {
    position: fixed;
    inset: 0;
    background: var(--plum);
    color: var(--blush);
    flex-direction: column;
    justify-content: center;
    gap: 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.45s var(--ease), visibility 0.45s;
    z-index: 105;
  }

  .main-nav.open {
    opacity: 1;
    visibility: visible;
  }

  .nav-list {
    flex-direction: column;
    align-items: center;
    gap: 1.6rem;
  }

  .nav-list > li > a {
    font-size: 1.05rem;
    color: rgba(252, 245, 246, 0.8);
  }

  .dropdown {
    position: static;
    transform: none;
    opacity: 1;
    visibility: visible;
    background: transparent;
    box-shadow: none;
    display: none;
  }

  .main-nav .header-cta {
    margin-top: 2.5rem;
    border-color: var(--rose);
    color: var(--rose-soft);
  }

  body.nav-open {
    overflow: hidden;
  }

  body.nav-open .nav-toggle {
    color: var(--blush);
  }

  body.nav-open .nav-toggle span:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
  }

  body.nav-open .nav-toggle span:nth-child(2) {
    opacity: 0;
  }

  body.nav-open .nav-toggle span:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
  }

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

  .service-card--wide {
    flex-direction: column;
    align-items: flex-start;
  }

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

  .hero-meta .locations-strip {
    display: none;
  }

  .field-row {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 540px) {
  .footer-grid {
    grid-template-columns: 1fr;
  }

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

  .stat:nth-child(odd) {
    border-right: none;
  }
}

/* ============================================================
   CHAT WIDGET
   ============================================================ */

.rejuuv-chat {
  position: fixed;
  right: clamp(1rem, 3vw, 2rem);
  bottom: clamp(1rem, 3vw, 2rem);
  z-index: 200;
  font-family: var(--sans);
}

.rchat-launch {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--rose);
  color: #fff;
  border: none;
  cursor: pointer;
  font-family: var(--sans);
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  padding: 0.8rem 1.3rem;
  border-radius: 2.5rem;
  box-shadow: 0 12px 30px rgba(229, 102, 123, 0.42);
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease),
    background 0.35s var(--ease), opacity 0.3s var(--ease);
}

.rchat-launch-icon { display: block; }

.rchat-launch:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 40px rgba(229, 102, 123, 0.5);
}

/* gentle attention pulse on the closed bubble */
.rchat-launch::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: 0 0 0 0 rgba(229, 102, 123, 0.45);
  animation: rchatPulse 2.4s var(--ease) 3;
  pointer-events: none;
}

@keyframes rchatPulse {
  0% { box-shadow: 0 0 0 0 rgba(229, 102, 123, 0.45); }
  70% { box-shadow: 0 0 0 14px rgba(229, 102, 123, 0); }
  100% { box-shadow: 0 0 0 0 rgba(229, 102, 123, 0); }
}

/* hide the launch bubble while the panel is open */
.rejuuv-chat.is-open .rchat-launch {
  opacity: 0;
  transform: scale(0.6);
  pointer-events: none;
}

.rchat-panel {
  position: absolute;
  right: 0;
  bottom: 0;
  width: min(340px, calc(100vw - 2rem));
  height: min(470px, calc(100vh - 6rem));
  background: var(--blush);
  border-radius: 1.1rem;
  box-shadow: 0 30px 70px rgba(54, 23, 28, 0.32);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transform-origin: bottom right;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(16px) scale(0.92);
  transition: opacity 0.32s var(--ease), transform 0.4s var(--ease),
    visibility 0s linear 0.4s;
}

.rejuuv-chat.is-open .rchat-panel {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0) scale(1);
  transition: opacity 0.32s var(--ease), transform 0.4s var(--ease),
    visibility 0s;
}

.rchat-head {
  background: var(--plum);
  color: var(--blush);
  padding: 1.1rem 1.3rem;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.8rem;
}

.rchat-head-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
}

.rchat-end {
  border: 1px solid rgba(252, 245, 246, 0.28);
  background: transparent;
  color: rgba(252, 245, 246, 0.8);
  font-family: var(--sans);
  font-size: 0.58rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 0.35rem 0.65rem;
  border-radius: 2rem;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.3s, color 0.3s, border-color 0.3s;
}

.rchat-end:hover {
  background: var(--rose);
  border-color: var(--rose);
  color: #fff;
}

.rchat-min {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  background: rgba(252, 245, 246, 0.12);
  color: var(--blush);
  cursor: pointer;
  transition: background 0.3s, transform 0.3s var(--ease);
}

.rchat-min:hover {
  background: rgba(252, 245, 246, 0.24);
  transform: scale(1.08);
}

.rchat-brand {
  font-family: var(--serif);
  font-weight: 600;
  font-optical-sizing: none;
  font-variation-settings: "opsz" 11, "wght" 680;
  font-size: 1.25rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  display: inline-flex;
  flex-direction: column;
  line-height: 1;
  gap: 0.25rem;
}

.rchat-brand span {
  font-family: var(--sans);
  font-size: 0.4rem;
  font-weight: 400;
  letter-spacing: 0.6em;
  text-indent: 0.6em;
  color: var(--rose-soft);
}

.rchat-sub {
  font-size: 0.62rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgba(252, 245, 246, 0.5);
  margin-top: 0.7rem;
}

.rchat-log {
  flex: 1;
  overflow-y: auto;
  padding: 1.3rem;
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}

.rchat-msg {
  max-width: 84%;
  padding: 0.7rem 1rem;
  border-radius: 1rem;
  font-size: 0.9rem;
  line-height: 1.55;
  white-space: pre-wrap;
  word-wrap: break-word;
}

.rchat-bot {
  background: #fff;
  color: var(--plum);
  border-bottom-left-radius: 0.3rem;
  align-self: flex-start;
  box-shadow: 0 4px 14px rgba(54, 23, 28, 0.06);
}

.rchat-user {
  background: var(--rose);
  color: #fff;
  border-bottom-right-radius: 0.3rem;
  align-self: flex-end;
}

.rchat-typing {
  display: inline-flex;
  gap: 4px;
  align-items: center;
}

.rchat-typing span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--mauve);
  opacity: 0.5;
  animation: rchatBlink 1.2s infinite both;
}
.rchat-typing span:nth-child(2) { animation-delay: 0.2s; }
.rchat-typing span:nth-child(3) { animation-delay: 0.4s; }

@keyframes rchatBlink {
  0%, 80%, 100% { opacity: 0.25; transform: translateY(0); }
  40% { opacity: 0.9; transform: translateY(-3px); }
}

.rchat-form {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.8rem 0.9rem;
  border-top: 1px solid var(--line);
  background: #fff;
}

.rchat-input {
  flex: 1;
  border: none;
  background: transparent;
  font-family: var(--sans);
  font-size: 0.92rem;
  color: var(--plum);
  padding: 0.6rem 0.4rem;
}

.rchat-input:focus { outline: none; }

.rchat-send {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: none;
  background: var(--rose);
  color: #fff;
  font-size: 1.1rem;
  cursor: pointer;
  transition: background 0.3s, transform 0.3s var(--ease);
}

.rchat-send:hover { background: #d64e64; transform: scale(1.05); }

.rchat-disclaimer {
  font-size: 0.62rem;
  letter-spacing: 0.04em;
  color: var(--mauve);
  text-align: center;
  padding: 0 1rem 0.7rem;
  background: #fff;
}

@media (prefers-reduced-motion: reduce) {
  .rchat-panel { transition: none; }
  .rchat-launch { transition: none; }
  .rchat-launch::after, .rchat-typing span { animation: none; }
}

/* ============================================================
   BILINGUAL (EN / 简体中文)
   ============================================================ */

:root {
  --cjk-serif: "Songti SC", "STSong", "Noto Serif SC", "Source Han Serif SC", serif;
  --cjk-sans: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", sans-serif;
}

/* dual-language content blocks (used in long-form / articles) */
html.lang-en [data-lang="zh"],
html.lang-zh [data-lang="en"] {
  display: none !important;
}

/* Chinese typography: swap Latin Didone/sans for refined CJK faces.
   The Rejuuv wordmark stays Latin (it is a brand mark, not translated). */
html.lang-zh body {
  font-family: var(--cjk-sans);
  font-weight: 400;
}

html.lang-zh h1,
html.lang-zh h2,
html.lang-zh h3,
html.lang-zh h4,
html.lang-zh .display-xl,
html.lang-zh .display-lg,
html.lang-zh .display-md {
  font-family: var(--cjk-serif);
  font-variation-settings: normal;
  font-style: normal;
  font-weight: 600;
  letter-spacing: 0.04em;
  line-height: 1.35;
}

html.lang-zh em.accent {
  font-style: normal;
}

/* tighten the wide Latin tracking that looks unnatural on Chinese */
html.lang-zh .eyebrow { letter-spacing: 0.22em; }
html.lang-zh .nav-list > li > a { letter-spacing: 0.12em; }
html.lang-zh .btn,
html.lang-zh .text-link,
html.lang-zh .rchat-launch { letter-spacing: 0.12em; }
html.lang-zh .stat .label,
html.lang-zh .location-card .city,
html.lang-zh .contact-details .label,
html.lang-zh .field label,
html.lang-zh .hours-note { letter-spacing: 0.12em; }

/* ---------- Language toggle ---------- */

.lang-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.1rem;
  background: rgba(140, 122, 133, 0.16);
  border: 1px solid var(--line);
  border-radius: 2rem;
  padding: 0.28rem;
  cursor: pointer;
  font-family: var(--sans);
  line-height: 1;
  flex-shrink: 0;
}

.lang-toggle span {
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  padding: 0.32rem 0.6rem;
  border-radius: 2rem;
  color: var(--mauve);
  transition: background 0.3s var(--ease), color 0.3s var(--ease);
}

.lang-toggle span.is-active {
  background: var(--rose);
  color: #fff;
}

.lang-zh-label { font-family: var(--cjk-sans); }

/* on the dark hero header (before scroll) */
.header-dark:not(.scrolled) .lang-toggle {
  background: rgba(252, 245, 246, 0.1);
  border-color: rgba(252, 245, 246, 0.22);
}

.header-dark:not(.scrolled) .lang-toggle span {
  color: rgba(252, 245, 246, 0.7);
}

.header-dark:not(.scrolled) .lang-toggle span.is-active {
  background: var(--rose);
  color: #fff;
}

@media (max-width: 880px) {
  .lang-toggle { margin-left: auto; margin-right: 0.8rem; }
}

/* ============================================================
   BLOG / JOURNAL
   ============================================================ */

.blog-hero {
  background:
    radial-gradient(ellipse 70% 60% at 80% 10%, rgba(229, 102, 123, 0.22), transparent 60%),
    var(--plum);
  color: var(--blush);
  padding: 11rem 0 4.5rem;
}

.blog-hero .eyebrow,
.blog-hero em.accent { color: var(--rose-soft); }
.blog-hero .eyebrow::before { background: var(--rose-soft); }
.blog-hero .lede { color: rgba(252, 245, 246, 0.62); margin-top: 1.6rem; }

/* index grid */
.blog-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(1.6rem, 3vw, 2.6rem);
}

.post-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--line);
  overflow: hidden;
  transition: transform 0.5s var(--ease), box-shadow 0.5s var(--ease);
}

.post-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 30px 60px rgba(54, 23, 28, 0.12);
}

.post-card .post-cover {
  aspect-ratio: 16 / 9;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  padding: 1.4rem;
}

.post-cover--sofwave {
  background:
    radial-gradient(circle at 70% 30%, rgba(229, 102, 123, 0.55), transparent 60%),
    linear-gradient(150deg, #713841, #2c1a22);
}

.post-cover--morpheus {
  background:
    radial-gradient(circle at 30% 30%, rgba(220, 161, 145, 0.5), transparent 60%),
    linear-gradient(150deg, #51242c, #1e1319);
}

.post-cover .post-cat {
  position: relative;
  font-size: 0.62rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: #fff;
  background: rgba(24, 20, 16, 0.35);
  backdrop-filter: blur(4px);
  padding: 0.4rem 0.9rem;
  border-radius: 2rem;
}

.post-card .post-body {
  padding: clamp(1.6rem, 2.5vw, 2.2rem);
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  gap: 0.8rem;
}

.post-card .post-meta {
  font-size: 0.66rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--rose);
}

.post-card h3 {
  font-size: clamp(1.4rem, 2.2vw, 1.8rem);
  line-height: 1.2;
}

.post-card p {
  font-size: 0.92rem;
  color: var(--taupe, var(--mauve));
  flex-grow: 1;
}

.post-card .text-link { margin-top: 0.6rem; }

/* article */
.article {
  padding: clamp(3rem, 6vw, 5rem) 0 clamp(4rem, 8vw, 6rem);
}

.article-col {
  width: min(720px, 92vw);
  margin-inline: auto;
}

.article-col p {
  font-size: 1.06rem;
  line-height: 1.85;
  color: rgba(81, 36, 44, 0.86);
  margin-bottom: 1.4rem;
}

.article-col h2 {
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  margin: 2.8rem 0 1.1rem;
}

html.lang-zh .article-col p { font-size: 1.04rem; line-height: 2; }

.article-col .sup {
  font-size: 0.7em;
  vertical-align: super;
  color: var(--rose);
  font-weight: 600;
  padding: 0 0.1em;
}

.pull-quote {
  font-family: var(--serif);
  font-style: italic;
  font-optical-sizing: none;
  font-variation-settings: "opsz" 18, "wght" 600;
  font-size: clamp(1.5rem, 3vw, 2rem);
  line-height: 1.4;
  color: var(--plum);
  border-left: 3px solid var(--rose);
  padding: 0.4rem 0 0.4rem 1.6rem;
  margin: 2.4rem 0;
}

html.lang-zh .pull-quote {
  font-family: var(--cjk-serif);
  font-style: normal;
}

.facts-box {
  background: var(--blush-deep);
  border: 1px solid var(--line);
  padding: clamp(1.6rem, 3vw, 2.2rem);
  margin: 2.4rem 0;
}

.facts-box h3 {
  font-size: 1.3rem;
  margin-bottom: 1.2rem;
}

.facts-box dl {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.7rem 1.4rem;
}

.facts-box dt {
  font-size: 0.66rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--rose);
  padding-top: 0.2rem;
  white-space: nowrap;
}

.facts-box dd { font-size: 0.96rem; color: var(--plum); }

.article-citations {
  margin-top: 3rem;
  padding-top: 1.6rem;
  border-top: 1px solid var(--line);
}

.article-citations h4 {
  font-family: var(--sans);
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--mauve);
  margin-bottom: 1rem;
}

.article-citations ol { padding-left: 1.2rem; }

.article-citations li {
  list-style: decimal;
  font-size: 0.84rem;
  color: var(--mauve);
  margin-bottom: 0.5rem;
  word-break: break-word;
}

.article-citations a { color: var(--rose); }
.article-citations a:hover { text-decoration: underline; }

.article-back {
  display: inline-flex;
  margin-bottom: 1.4rem;
  font-size: 0.7rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(252, 245, 246, 0.7);
}
.article-back:hover { color: #fff; }

@media (max-width: 760px) {
  .blog-grid { grid-template-columns: 1fr; }
  .facts-box dl { grid-template-columns: 1fr; gap: 0.2rem 0; }
  .facts-box dt { margin-top: 0.8rem; }
}

/* ---------- Blog images ---------- */

.article-lead {
  margin: 0 0 0.4rem;
}

.article-lead img {
  width: 100%;
  max-height: 460px;
  object-fit: cover;
  border-radius: 2px;
}

.article-figure {
  margin: 2.6rem 0;
}

.article-figure img {
  width: 100%;
  border-radius: 2px;
}

.article-lead figcaption,
.article-figure figcaption {
  margin-top: 0.6rem;
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  color: var(--mauve);
  text-align: right;
}

.article-lead figcaption a,
.article-figure figcaption a {
  color: var(--mauve);
  border-bottom: 1px solid var(--line);
}

.article-lead figcaption a:hover,
.article-figure figcaption a:hover {
  color: var(--rose);
}

html.lang-zh .article-lead figcaption,
html.lang-zh .article-figure figcaption {
  letter-spacing: 0.06em;
}

/* ---------- Blog card covers (actual product/procedure images) ---------- */

.post-card .post-cover {
  background-size: cover;
  background-position: center top;
  background-color: var(--plum);
}

.post-card .post-cover::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(24, 20, 16, 0.5), transparent 55%);
}

.post-cover .post-cat {
  position: relative;
  z-index: 1;
}

/* device product shots (transparent PNG) sit on a clean card */
.article-figure--pad {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 2px;
  padding: 1.8rem;
  text-align: center;
}

.article-figure--pad img {
  width: auto;
  max-width: 100%;
  max-height: 380px;
  margin: 0 auto;
}

/* ---------- Site search (nav bar + suggestion panel) ---------- */

.nav-search {
  position: relative;
  margin-left: 0.5rem;
}

.nav-search input {
  width: 168px;
  padding: 0.55rem 0.95rem;
  font-family: var(--sans);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  color: var(--plum);
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 2rem;
  outline: none;
  transition: width 0.4s var(--ease), border-color 0.4s var(--ease),
    background 0.4s var(--ease);
}

.nav-search input::placeholder {
  color: var(--mauve);
}

.nav-search input:focus {
  width: 232px;
  border-color: var(--rose);
  background: rgba(255, 255, 255, 0.75);
}

.header-dark:not(.scrolled) .nav-search input {
  border-color: rgba(252, 245, 246, 0.35);
  color: var(--blush);
}

.header-dark:not(.scrolled) .nav-search input::placeholder {
  color: rgba(252, 245, 246, 0.55);
}

.header-dark:not(.scrolled) .nav-search input:focus {
  border-color: var(--rose-soft);
  background: rgba(54, 23, 28, 0.35);
}

.search-suggest {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  min-width: 272px;
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: 0 24px 56px rgba(54, 23, 28, 0.16);
  z-index: 260;
}

.search-suggest__row {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.7rem;
  width: 100%;
  padding: 0.75rem 1rem;
  font-family: var(--sans);
  font-size: 0.78rem;
  color: var(--plum);
  text-align: left;
  background: none;
  border: none;
  border-bottom: 1px solid var(--line);
  cursor: pointer;
  transition: background 0.3s var(--ease);
}

.search-suggest__row .sub {
  color: var(--mauve);
  font-size: 0.68rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.search-suggest__row .go {
  margin-left: auto;
}

.search-suggest__row:last-child {
  border-bottom: none;
}

.search-suggest__row:hover {
  background: var(--blush);
}

.search-suggest__row .go {
  color: var(--rose);
}

.search-suggest__ask {
  color: var(--rose);
}

/* ---------- Chat: persistent booking action + links in replies ---------- */

.rchat-actions {
  display: flex;
  padding: 0.55rem 0.9rem;
  border-top: 1px solid var(--line);
  background: var(--blush);
}

.rchat-book {
  width: 100%;
  text-align: center;
  font-family: var(--sans);
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #fff;
  background: var(--rose);
  padding: 0.7rem 1rem;
  border-radius: 2rem;
  transition: background 0.3s var(--ease), box-shadow 0.3s var(--ease);
}

.rchat-book:hover {
  background: #d64e64;
  box-shadow: 0 10px 24px rgba(229, 102, 123, 0.35);
}

.rchat-msg .rchat-link {
  display: inline-block;
  margin-top: 0.35rem;
  color: var(--rose);
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 3px;
}

@media (max-width: 880px) {
  .nav-search {
    margin: 2rem 0 0;
    width: min(320px, 78vw);
  }

  .nav-search input,
  .nav-search input:focus {
    width: 100%;
    background: rgba(252, 245, 246, 0.08);
    border-color: rgba(252, 245, 246, 0.35);
    color: var(--blush);
  }

  .nav-search input::placeholder {
    color: rgba(252, 245, 246, 0.55);
  }

  .search-suggest {
    left: 0;
    right: 0;
    min-width: 0;
  }
}

/* ---------- Clinic section: expand-on-hover physicians + clinics strip ----------
   (pattern after 21st.dev "Expanding Cards": the hovered panel grows,
   siblings compress, the bio reveals inside the grown panel) */

/* Hovering never changes a card's size. The expand-on-hover this replaced
   (flex 1 -> 2.3) re-wrapped the names, rescaled the photos on every frame and
   grew the row from 400 to 456px, so the page below jumped (2026-10-01). Now the
   hovered card lifts and glows, its photo eases in and its bio fades up; only
   transform and opacity animate, which the compositor handles without layout. */
.docs-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  margin-bottom: clamp(3rem, 6vw, 4.5rem);
}

.doc {
  position: relative;
  isolation: isolate;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: clamp(1.6rem, 2.6vw, 2.4rem);
  background:
    radial-gradient(ellipse 90% 60% at 80% 8%, rgba(229, 102, 123, 0.2), transparent 60%),
    var(--plum);
  color: var(--blush);
  overflow: hidden;
  transition: transform 0.8s var(--ease), box-shadow 0.8s var(--ease), opacity 0.6s var(--ease);
}

/* the hover glow fades in; swapping one gradient for another cannot animate and snapped */
.doc::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(ellipse 90% 60% at 80% 8%, rgba(255, 255, 255, 0.16), transparent 58%);
  opacity: 0;
  transition: opacity 0.8s var(--ease);
  pointer-events: none;
}

.doc__mono {
  width: 62px;
  height: 62px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.15rem;
  color: var(--rose-soft);
  border: 1px solid rgba(229, 102, 123, 0.4);
  margin-bottom: auto;
  flex-shrink: 0;
}

/* The cards were authored around a 62px .doc__mono initials circle. When real
   headshots replaced it no rule replaced .doc__mono either, so the photo laid
   out at its intrinsic size (2048x3072) and blew the card open while loading.
   Constrained here, and it grows with the card as the flex accordion opens. */
.doc__photo {
  display: block;
  width: 100%;
  height: clamp(180px, 22vh, 240px);
  object-fit: cover;
  object-position: 50% 18%;
  background: rgba(252, 245, 246, 0.06);
  transition: transform 1.2s var(--ease);
}
/* the photo frame clips the slow zoom on hover */
.doc > picture {
  display: block;
  flex-shrink: 0;
  overflow: hidden;
  border-radius: 10px;
}

.doc__id h3 {
  font-size: clamp(1.1rem, 1.5vw, 1.4rem);
  line-height: 1.2;
}

.doc__role {
  font-family: var(--sans);
  font-size: 0.66rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--rose-soft);
  margin-top: 0.4rem;
}

.doc__bio {
  font-size: 0.9rem;
  font-weight: 300;
  line-height: 1.6;
  color: rgba(252, 245, 246, 0.75);
  max-width: 30rem;
  transition: opacity 0.7s var(--ease), transform 0.8s var(--ease);
}

/* Desktop pointers only: the hovered card lifts, glows and brings its bio up to
   full strength while the others step back. Touch screens and phones show the
   cards at rest, bios included. */
@media (hover: hover) and (min-width: 901px) {
  .doc__bio { opacity: 0.72; }
  .doc:hover { transform: translateY(-6px); box-shadow: 0 26px 50px -28px rgba(54, 23, 28, 0.55); }
  .doc:hover::after { opacity: 1; }
  .doc:hover .doc__photo { transform: scale(1.045); }
  .doc:hover .doc__bio { opacity: 1; }
  .docs-row:has(.doc:hover) .doc:not(:hover) { opacity: 0.82; }
}

.clinics-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}

.clinic {
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: clamp(1.8rem, 3vw, 2.6rem);
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  transition: background 0.5s var(--ease), box-shadow 0.5s var(--ease);
}

.clinic:hover {
  background: #fff;
  box-shadow: 0 24px 56px rgba(54, 23, 28, 0.1);
}

.clinic__city {
  font-family: var(--sans);
  font-size: 0.64rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--rose);
}

.clinic__name {
  font-size: clamp(1.4rem, 2vw, 1.8rem);
}

.clinic address {
  font-style: normal;
  color: var(--mauve);
  font-size: 0.9rem;
  font-weight: 300;
  line-height: 1.55;
  flex-grow: 1;
}

.clinic__tel {
  font-size: 0.8rem;
  letter-spacing: 0.12em;
  color: var(--plum);
  transition: color 0.3s var(--ease);
}

.clinic__tel:hover {
  color: var(--rose);
}

.clinic-hours {
  margin-top: 2.2rem;
  text-align: center;
  color: var(--mauve);
  font-size: 0.85rem;
  font-weight: 300;
}

.clinic-hours strong {
  color: var(--plum);
  font-weight: 500;
}

.clinic-hours a {
  color: var(--mauve);
  transition: color 0.3s var(--ease);
}

.clinic-hours a:hover {
  color: var(--rose);
}

@media (max-width: 900px) {
  .docs-row {
    grid-template-columns: 1fr;
  }

  .doc__mono {
    margin-bottom: 0.5rem;
  }

  .clinics-strip {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .doc,
  .doc::after,
  .doc__photo,
  .doc__bio {
    transition: none;
  }

  .doc__bio,
  .doc:hover .doc__bio {
    opacity: 1;
  }

  .doc:hover,
  .doc:hover .doc__photo {
    transform: none;
  }
}


/* ---------- Clinic section: subheads + locations map ---------- */

.crew-sub {
  margin-bottom: 1.6rem;
}

.docs-row {
  margin-bottom: clamp(2.4rem, 4.5vw, 3.4rem);
}

.locs {
  display: grid;
  grid-template-columns: minmax(300px, 5fr) 7fr;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  align-items: stretch;
}

.loc-list {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--line);
}

.loc {
  text-align: left;
  background: none;
  border: none;
  border-bottom: 1px solid var(--line);
  border-left: 2px solid transparent;
  font: inherit;
  color: inherit;
  padding: clamp(1.2rem, 2vw, 1.7rem) clamp(1rem, 1.6vw, 1.4rem);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  flex: 1;
  transition: background 0.4s var(--ease), border-color 0.4s var(--ease),
    box-shadow 0.4s var(--ease);
}

.loc:hover {
  background: rgba(255, 255, 255, 0.6);
}

.loc.is-active {
  background: #fff;
  border-left-color: var(--rose);
  box-shadow: 0 18px 44px rgba(54, 23, 28, 0.08);
}

.loc__city {
  font-family: var(--sans);
  font-size: 0.62rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--rose);
}

.loc__name {
  font-size: clamp(1.25rem, 1.8vw, 1.6rem);
}

.loc address {
  font-style: normal;
  color: var(--mauve);
  font-size: 0.88rem;
  font-weight: 300;
  line-height: 1.5;
}

.loc__meta {
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  color: var(--plum);
  margin-top: 0.25rem;
}

.loc__meta a {
  transition: color 0.3s var(--ease);
}

.loc__meta a:hover {
  color: var(--rose);
}

.loc__dir {
  color: var(--rose);
}

.loc-map {
  border: 1px solid var(--line);
  min-height: 480px;
  background: var(--blush-deep);
}

.loc-map iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  /* muted, editorial tint so the map sits inside the palette */
  filter: grayscale(1) sepia(0.14) saturate(1.05) contrast(0.97) opacity(0.94);
  transition: filter 0.5s var(--ease);
}

.loc-map:hover iframe {
  filter: none; /* full colour when the guest actually reads the map */
}

@media (max-width: 900px) {
  .locs {
    display: block;
  }

  .loc-map {
    margin-top: 1.4rem;
    min-height: 320px;
    height: 320px;
  }
}

/* ============================================================
   Brand-pink heroes
   The client asked for #E5667B to be the main colour, not just the
   highlight, so the hero surfaces carry the brand pink itself. A filled
   pink button cannot sit on a pink field, so on these surfaces the
   primary action inverts to white and the secondary becomes a white
   outline. Everything else on the page keeps #E5667B as the primary.
   ============================================================ */
.page-hero,
.blog-hero,
.hero {
  /* The field is the brand pink. White on #E5667B is only 3.2:1, which is fine
     for the display headline but fails WCAG AA for body copy, so the side the
     text sits on is deepened to about 5.1:1 while the rest stays pure brand. */
  background:
    linear-gradient(100deg, rgba(54, 23, 28, 0.34) 0%, rgba(54, 23, 28, 0.30) 38%, transparent 70%),
    radial-gradient(ellipse 80% 70% at 82% 14%, rgba(255, 255, 255, 0.18), transparent 60%),
    var(--rose);
  color: #fff;
}
.page-hero .lede,
.blog-hero .lede,
.hero .lede { color: rgba(255, 255, 255, 0.95); }
.page-hero .eyebrow,
.blog-hero .eyebrow,
.hero .eyebrow { color: #fff; }
.page-hero .eyebrow::before,
.blog-hero .eyebrow::before,
.hero .eyebrow::before { background: rgba(255, 255, 255, 0.7); }
.page-hero em.accent,
.blog-hero em.accent,
.hero em.accent { color: #fff; font-style: italic; }
.page-hero h1, .page-hero h2,
.blog-hero h1,
.hero h1, .hero h2 { color: #fff; }

/* primary action inverts on the pink field */
.page-hero .btn--rose,
.blog-hero .btn--rose,
.hero .btn--rose,
.cta-band .btn--rose,
.philosophy .btn--rose,
.team-strip .btn--rose {
  background: #fff;
  border-color: #fff;
  color: var(--brand-deep);
  box-shadow: 0 12px 30px rgba(54, 23, 28, 0.22);
}
.page-hero .btn--rose::before,
.blog-hero .btn--rose::before,
.hero .btn--rose::before,
.cta-band .btn--rose::before,
.philosophy .btn--rose::before,
.team-strip .btn--rose::before { background: var(--brand-deepest); }
.page-hero .btn--rose:hover,
.blog-hero .btn--rose:hover,
.hero .btn--rose:hover,
.cta-band .btn--rose:hover,
.philosophy .btn--rose:hover,
.team-strip .btn--rose:hover {
  color: #fff;
  box-shadow: 0 18px 38px rgba(54, 23, 28, 0.3);
}
/* secondary action: white outline */
.page-hero .btn--light,
.page-hero .btn--ink,
.blog-hero .btn--light,
.hero .btn--light,
.hero .btn--ink {
  border-color: rgba(255, 255, 255, 0.62);
  color: #fff;
  background: transparent;
}
.page-hero .btn--light::before,
.page-hero .btn--ink::before,
.blog-hero .btn--light::before,
.hero .btn--light::before,
.hero .btn--ink::before { background: #fff; }
.page-hero .btn--light:hover,
.page-hero .btn--ink:hover,
.blog-hero .btn--light:hover,
.hero .btn--light:hover,
.hero .btn--ink:hover { color: var(--rose); border-color: #fff; }

/* chips and indication lists sit on pink now */
.page-hero .tp-chip { color: #fff; border-color: rgba(255, 255, 255, 0.45); }
.page-hero .tp-chip:hover { background: rgba(255, 255, 255, 0.18); border-color: #fff; color: #fff; }
.page-hero .tp-inds__label { color: rgba(255, 255, 255, 0.9); }
.page-hero .tp-inds li { color: rgba(255, 255, 255, 0.86); }
.page-hero .tp-inds li::before { color: #fff; }
.page-hero .concern-finder__q { color: rgba(255, 255, 255, 0.82); }
.page-hero .concern-chip { color: #fff; border-color: rgba(255, 255, 255, 0.42); }
.page-hero .concern-chip:hover { border-color: #fff; background: rgba(255, 255, 255, 0.16); }
.page-hero .concern-chip.is-active { background: #fff; border-color: #fff; color: var(--rose); }

/* header sitting over a pink hero */
.header-dark:not(.scrolled) { color: #fff; }
.header-dark:not(.scrolled) .logo span { color: rgba(255, 255, 255, 0.9); }
.header-dark:not(.scrolled) .btn--rose {
  background: #fff; border-color: #fff; color: var(--brand-deep);
}

/* ============================================================
   Every remaining dark band moves onto the pink scale.
   Statement bands take the brand pink itself; cards and panels take
   --brand-deep so they still recede against it; the footer takes
   --brand-deepest to ground the page. Supplementary colours (eyebrows,
   dividers, muted copy) are re-tuned to sit on pink rather than plum.
   ============================================================ */
.philosophy,
.cta-band,
.team-strip {
  background:
    linear-gradient(115deg, rgba(54, 23, 28, 0.34) 0%, rgba(54, 23, 28, 0.26) 45%, transparent 78%),
    var(--brand);
  color: #fff;
}
.philosophy .eyebrow,
.cta-band .eyebrow,
.team-strip .eyebrow { color: #fff; }
.philosophy .eyebrow::before,
.cta-band .eyebrow::before,
.team-strip .eyebrow::before { background: rgba(255, 255, 255, 0.72); }
.philosophy em.accent,
.cta-band em.accent { color: #fff; }
.philosophy p,
.cta-band p { color: rgba(255, 255, 255, 0.92); }

/* cards and covers: deep rose so they read as brand, not as a neutral */
.doc,
.post-card .post-cover {
  background:
    radial-gradient(ellipse 90% 60% at 80% 8%, rgba(255, 255, 255, 0.14), transparent 60%),
    var(--brand-deep);
  color: #fff;
}
.doc__role { color: rgba(255, 255, 255, 0.9); }
.doc__bio { color: rgba(255, 255, 255, 0.9); }

/* footer grounds the page, still unmistakably the brand hue */
.site-footer { background: var(--brand-deepest); color: #fff; }
.site-footer .eyebrow,
.site-footer h4 { color: #fff; }
.site-footer a,
.site-footer p,
.site-footer li { color: rgba(255, 255, 255, 0.88); }
.site-footer a:hover { color: #fff; }

/* menus and the concierge header sit above content, so they keep the deepest
   tone for legibility, but on the brand hue. NOT .main-nav at this level: its
   background belongs to the mobile drawer only, and setting it here painted a
   dark bar behind the desktop nav. */
.dropdown,
.rchat-head { background: var(--brand-deepest); }
@media (max-width: 880px) {
  .main-nav { background: var(--brand-deepest); }
}

/* Supplementary colours on the pink bands. --rose-soft and 62%-white were
   tuned against dark plum; on the brand pink they wash out, so figures go to
   white and secondary copy is lifted well clear of the background. */
.philosophy .lede,
.philosophy p { color: rgba(255, 255, 255, 0.95); }
.philosophy em.accent { color: #fff; }
.stat .value { color: #fff; }
.stat .label { color: rgba(255, 255, 255, 0.92); }
.stats,
.stat,
.stat:nth-child(odd) { border-color: rgba(255, 255, 255, 0.28); }
/* the oversized "Rejuuv" watermark behind the band */
.philosophy::before { color: rgba(255, 255, 255, 0.09); }

/* ---------- Brand wordmark ----------
   The REJUUV wordmark is the same asset Rejuuv Med uses, applied as a mask so
   it takes its colour from the theme: rose on light surfaces, white over the
   pink hero. A text wordmark could never match the real letterforms. */
.logo-mark {
  display: inline-block;
  width: 118px;
  aspect-ratio: 2000 / 720;
  background: var(--rose);
  -webkit-mask: url("../assets/logo.png") no-repeat center / contain;
  mask: url("../assets/logo.png") no-repeat center / contain;
  transition: background 0.4s var(--ease);
}
.header-dark:not(.scrolled) .logo-mark { background: #fff; }
.header-dark:not(.scrolled) .logo span { color: rgba(255, 255, 255, 0.92); }
.site-footer .logo-mark { background: #fff; }
.site-footer .logo span { color: rgba(255, 255, 255, 0.88); }
.rchat-head .logo-mark { background: #fff; width: 96px; }
.rchat-brand { display: inline-flex; flex-direction: column; align-items: center; gap: 0.3rem; }
@media (max-width: 880px) {
  .main-nav .logo-mark { background: #fff; }
}

/* Sister-site dropdown ("More"): the parent is not a link of its own, so it
   needs the pointer affordance, and the menu must open on keyboard focus as
   well as hover or it is unreachable without a mouse. */
.nav-parent { cursor: pointer; }
.nav-list > li:focus-within > .dropdown {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
.nav-more .dropdown a { white-space: nowrap; }

/* Form honeypot: present for bots, invisible and untabbable for people. */
.hp-field { position: absolute !important; left: -5000px !important; height: 0; overflow: hidden; }

/* success line rendered after a booking request (also the element the Ads conversion trigger watches) */
.form-success { margin-top: 0.9rem; padding: 0.8rem 1rem; border-radius: 12px; background: rgba(46, 125, 50, 0.08); color: #2e7d32; font-weight: 600; }

/* home: the live site's H1 keeps its keywords as the kicker; the display line is a <p> */
/* the kicker is the page's H1 but must look exactly like the old eyebrow <p>: undo the
   h1-h4 rule's serif metrics and variable-font weight, keep .eyebrow's 0.72rem / 400 / 1.5rem */
h1.hero-kicker { font-size: 0.72rem; font-weight: 400; font-variation-settings: normal; font-optical-sizing: auto; line-height: inherit; margin: 0 0 1.5rem; }
p.display-xl { margin: 0; }
/* ...and that <p> gets back everything it had as the hero <h1> (lost 2026-09-08,
   when the H1 moved to the kicker): the Bodoni display face and heading metrics
   (the h1-h4 rule), the white of the pink hero, the 2rem gap, and the line-by-line
   rise. Without these it fell back to the body sans-serif with body line spacing. */
.hero p.display-xl { color: #fff; margin: 0 0 2rem; }
/* English only: in Chinese mode html.lang-zh .display-xl sets the CJK serif */
html:not(.lang-zh) .hero p.display-xl {
  font-family: var(--serif);
  font-optical-sizing: none;
  line-height: 1.15;
  letter-spacing: 0.01em;
}
.hero p.display-xl .line { display: block; overflow: hidden; }
.hero p.display-xl .line span { display: block; transform: translateY(110%); animation: riseUp 1.1s var(--ease) forwards; }
.hero p.display-xl .line:nth-child(2) span { animation-delay: 0.15s; }
.hero p.display-xl .line:nth-child(3) span { animation-delay: 0.3s; }
@media (prefers-reduced-motion: reduce) {
  .hero p.display-xl .line span { transform: none; animation: none; }
}

/* ============================================================
   Pages carried over from the live site (build_carryover.py):
   Ads landing pages, location pages, promotions, thank-you pages,
   careers and feedback forms.
   ============================================================ */
.cta-row { display: flex; flex-wrap: wrap; gap: 0.9rem; margin-top: 2rem; }
.cta-band .cta-row { justify-content: center; }
.sec-h2 {
  font-size: clamp(1.6rem, 2.6vw, 2.2rem);
  color: var(--plum);
  margin-bottom: 1rem;
  text-wrap: balance;
}
.sec-lede { font-size: 1rem; font-weight: 300; color: var(--mauve); max-width: 40rem; line-height: 1.65; }
.contact-details .value { overflow-wrap: anywhere; }

/* treatment highlights: four areas, each a short list of treatment links */
.lp-cats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(1rem, 2vw, 1.6rem); }
.lp-cat {
  border: 1px solid var(--line);
  background: #fff;
  padding: clamp(1.4rem, 2.2vw, 2rem);
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  min-width: 0;
}
.lp-cat h3 { font-size: 1.35rem; color: var(--plum); }
.lp-cat p { font-size: 0.9rem; font-weight: 300; color: var(--mauve); line-height: 1.6; }
.lp-cat ul { display: grid; gap: 0.45rem; margin-top: 0.3rem; }
.lp-cat a {
  font-size: 0.92rem;
  color: var(--plum);
  border-bottom: 1px solid transparent;
  transition: color 0.3s var(--ease), border-color 0.3s var(--ease);
}
.lp-cat a:hover { color: var(--rose); border-bottom-color: var(--rose); }
@media (max-width: 1020px) { .lp-cats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .lp-cats { grid-template-columns: 1fr; } }

/* medical director feature */
.lp-doc {
  display: grid;
  grid-template-columns: minmax(0, 320px) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
.lp-doc img { width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; }
.lp-doc p { font-weight: 300; color: var(--mauve); line-height: 1.7; max-width: 40rem; margin-bottom: 1.6rem; }
@media (max-width: 760px) {
  .lp-doc { grid-template-columns: 1fr; }
  .lp-doc picture { max-width: 280px; }
}

/* clinic cards: two instead of three, plus the directions and page links */
.locations-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 900px; }
.location-card .loc__dir { font-size: 0.82rem; letter-spacing: 0.06em; align-self: flex-start; }
.location-card .card-link {
  font-size: 0.82rem;
  color: var(--plum);
  border-bottom: 1px solid var(--line);
  align-self: flex-start;
  padding-bottom: 2px;
}
.location-card .card-link:hover { color: var(--rose); border-bottom-color: var(--rose); }
.loc-dir-row { margin-top: 1.2rem; font-size: 0.85rem; letter-spacing: 0.06em; }
.loc-map--page { min-height: 320px; margin-top: 1.4rem; }
.loc-map--page iframe { min-height: 320px; }
@media (max-width: 1020px) { .locations-grid--2 { grid-template-columns: 1fr; } }

/* promotions */
.promo-card {
  border: 1px solid var(--line);
  background: #fff;
  padding: clamp(1.8rem, 4vw, 3.2rem);
  max-width: 52rem;
}
.promo-card .sec-h2 { margin-bottom: 0.5rem; }
.promo-card__plus {
  font-family: var(--serif);
  font-size: clamp(1.15rem, 1.8vw, 1.4rem);
  color: var(--rose);
  margin-bottom: 1.2rem;
}
.promo-card__terms { display: grid; gap: 0.4rem; font-size: 0.9rem; font-weight: 300; color: var(--mauve); }
.promo-card__terms li { padding-left: 1rem; position: relative; }
.promo-card__terms li::before { content: ""; position: absolute; left: 0; top: 0.65em; width: 5px; height: 1px; background: var(--rose); }
.promo-card .cta-row { margin-top: 1.8rem; }
.promo-card[hidden], .promo-none[hidden] { display: none !important; }
.promo-none { font-size: 1.05rem; font-weight: 300; color: var(--mauve); max-width: 40rem; }

/* booking form appended to a treatment or landing page (beats concern.css's .tp-block padding) */
.tp-block.landing-book { padding: clamp(3rem, 6vw, 5rem) 0; border-top: 1px solid var(--line); }
.landing-book .booking-form { max-width: 760px; margin-top: 1.8rem; }

/* careers and feedback forms */
.form-narrow { max-width: 760px; }
.choice-group { border: 0; padding: 0; margin: 0; min-width: 0; }
.choice-group legend {
  font-size: 0.66rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--mauve);
  margin-bottom: 0.8rem;
  padding: 0;
  line-height: 1.7;
}
.choice-list { display: grid; gap: 0.55rem; }
.choice-list--cols { grid-template-columns: repeat(auto-fill, minmax(min(100%, 190px), 1fr)); column-gap: 1.2rem; }
.choice-list label {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  font-size: 0.95rem;
  font-weight: 300;
  color: var(--plum);
  line-height: 1.5;
  cursor: pointer;
}
.choice-list input { accent-color: var(--rose); width: 1.05rem; height: 1.05rem; margin-top: 0.2rem; flex: none; }
.choice-other {
  font: inherit;
  font-size: 0.95rem;
  font-weight: 300;
  width: 100%;
  max-width: 26rem;
  margin-top: 0.7rem;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  padding: 0.55rem 0;
  color: var(--plum);
}
.choice-other:focus { outline: none; border-bottom-color: var(--rose); }
.field input[type="file"] { border-bottom: none; padding: 0.4rem 0; font-size: 0.9rem; }
.form-hint { font-size: 0.82rem; font-weight: 300; color: var(--mauve); }
.form-error {
  margin-top: 0.9rem;
  padding: 0.8rem 1rem;
  border-radius: 12px;
  background: rgba(176, 78, 94, 0.08);
  color: var(--brand-deepest);
  font-weight: 600;
  line-height: 1.55;
}
.form-error__retry {
  display: inline-block;
  margin-top: 0.5rem;
  padding: 0.45rem 1rem;
  border: 1px solid currentColor;
  border-radius: 999px;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
}
.form-error__retry:hover { background: rgba(176, 78, 94, 0.12); }

/* on phones the form comes before the clinic details: the hero's "Book"
   button jumps to this section, and a visitor from an ad came for the form */
@media (max-width: 1020px) { .booking-grid--form-first > form { order: -1; } }

/* Replicated WordPress pages (build_ported.py): the article column with the
   reading elements those pages use beyond paragraphs and h2 */
.article-col.ported h3 { font-size: clamp(1.2rem, 2.2vw, 1.5rem); margin: 2rem 0 0.8rem; color: var(--plum); }
.article-col.ported ul, .article-col.ported ol { margin: 0 0 1.4rem 1.2rem; display: grid; gap: 0.45rem; }
.article-col.ported ul { list-style: disc; }
.article-col.ported ol { list-style: decimal; }
.article-col.ported li { font-size: 1.02rem; line-height: 1.75; color: rgba(81, 36, 44, 0.86); padding-left: 0.2rem; }
.article-col.ported a { color: var(--rose); border-bottom: 1px solid rgba(229, 102, 123, 0.35); }
.article-col.ported a:hover { border-bottom-color: var(--rose); }
.article-col.ported blockquote { border-left: 2px solid var(--rose); padding: 0.4rem 0 0.4rem 1.2rem; margin: 0 0 1.4rem;
  font-style: italic; color: var(--mauve); }
.article-col.ported table { width: 100%; border-collapse: collapse; margin: 0 0 1.6rem; font-size: 0.95rem; display: block; overflow-x: auto; }
.article-col.ported th, .article-col.ported td { border: 1px solid var(--line); padding: 0.6rem 0.8rem; text-align: left; vertical-align: top; }
.article-col.ported th { background: var(--blush-deep); color: var(--plum); }
/* treatment pages whose H1 is the live keyword kicker (hero_kicker in
   build_treatments.py): the title is a <p> that keeps everything the h1 had */
.page-hero p.display-lg { line-height: 1.15; letter-spacing: 0.01em; color: #fff; margin: 0; font-optical-sizing: none; }
html:not(.lang-zh) .page-hero p.display-lg { font-family: var(--serif); }
/* WordPress copy a redesigned page had dropped, carried back so the URL keeps
   the text Google ranked it on (patch_wp_carry in build_concerns.py) */
.wp-carry { padding: clamp(1.8rem, 4vw, 3rem) 0; }
.wp-carry__more { max-width: 46rem; margin: 0 auto; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.wp-carry__more > summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.2rem;
  padding: 1.15rem 0;
}
.wp-carry__more > summary::-webkit-details-marker { display: none; }
.wp-carry__title {
  font-family: var(--serif);
  font-size: clamp(1.1rem, 1.9vw, 1.4rem);
  line-height: 1.3;
  color: var(--plum);
  margin: 0;
  transition: color 0.3s var(--ease);
}
.wp-carry__more > summary:hover .wp-carry__title { color: var(--rose); }
.wp-carry__ico {
  flex-shrink: 0;
  width: 1.8rem;
  height: 1.8rem;
  border-radius: 50%;
  border: 1px solid var(--line);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1;
  color: var(--rose);
  transition: transform 0.35s var(--ease), background 0.3s var(--ease), border-color 0.3s var(--ease), color 0.3s var(--ease);
}
.wp-carry__more[open] .wp-carry__ico { transform: rotate(45deg); background: var(--rose); color: #fff; border-color: var(--rose); }
.wp-carry__more > .article-col { width: auto; max-width: 100%; margin: 0; padding: 0.2rem 0 1.6rem; }
.wp-carry__more[open] > .article-col { animation: fadeIn 0.6s var(--ease); }
.wp-carry .article-col.ported h3 { margin: 1.6rem 0 0.5rem; }
.wp-carry .article-col.ported p { margin-bottom: 0.9rem; }
@media (prefers-reduced-motion: reduce) {
  .wp-carry__more[open] > .article-col { animation: none; }
  .wp-carry__ico { transition: none; }
}
/* team cards carried from WordPress: name in bold, role underneath */
.article-col.ported .ported-person { margin: 1.8rem 0 0.4rem; line-height: 1.5; color: var(--plum); }
.ported-related { margin-top: 2.4rem; padding-top: 1.2rem; border-top: 1px solid var(--line); font-size: 0.95rem; color: var(--mauve); }


/* ---------- Header fit, 2026-10-01 ----------
   The full header needs about 1,330px (1,400 with the search field focused), so
   at common laptop widths the language toggle and the booking button ran off the
   right edge, where overflow-x: hidden made them unreachable. From 1201 to 1559px
   the header tightens (and the search field does not grow on focus); at 1200px and
   below, which leaves room for a Windows scrollbar, it collapses into the menu button. */
@media (min-width: 1201px) and (max-width: 1559px) {
  .header-inner { gap: 1.2rem; }
  .main-nav { gap: 1.3rem; }
  .nav-list { gap: 1.35rem; }
  .nav-list > li > a { letter-spacing: 0.18em; }
  .nav-search { margin-left: 0; }
  .nav-search input,
  .nav-search input:focus { width: 132px; }
  .header-cta { padding: 0.8rem 1.15rem; letter-spacing: 0.16em; }
  .logo { letter-spacing: 0.16em; }
}

@media (max-width: 1200px) {
  .nav-toggle { display: flex; }
  /* the desktop hover rule's translateX(-50%) must not follow the lists in here */
  .nav-list li:hover > .dropdown,
  .nav-list li:focus-within > .dropdown,
  .nav-list li .dropdown { transform: none; }
  /* the open menu is the whole screen: the chat waits, and the top bar is solid so
     links scrolling under the logo and buttons stay legible */
  body.nav-open .rejuuv-chat { display: none; }
  body.nav-open .site-header::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 106;
    background: var(--brand-deepest);
    pointer-events: none;
  }
  body.nav-open .logo { position: relative; z-index: 110; }
  body.nav-open .logo-mark { background: #fff; }
  body.nav-open .logo span { color: rgba(255, 255, 255, 0.92); }
  .main-nav {
    position: fixed;
    inset: 0;
    background: var(--brand-deepest);
    color: var(--blush);
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    gap: 0;
    padding: 6.5rem 1.5rem 3rem;
    overflow-y: auto;
    overscroll-behavior: contain;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.45s var(--ease), visibility 0.45s;
    z-index: 105;
  }
  .main-nav.open { opacity: 1; visibility: visible; }
  .main-nav .logo-mark { background: #fff; }
  .nav-list { flex-direction: column; align-items: center; gap: 1.4rem; }
  .nav-list > li { text-align: center; }
  .nav-list > li > a,
  .header-dark:not(.scrolled) .nav-list > li > a {
    font-size: 1.05rem;
    color: rgba(252, 245, 246, 0.86);
    cursor: pointer;
  }
  /* sub-menus open in place on tap (main.js): every page stays reachable */
  .dropdown {
    position: static;
    transform: none;
    opacity: 1;
    visibility: visible;
    background: transparent;
    box-shadow: none;
    min-width: 0;
    padding: 0.6rem 0 0.2rem;
    display: none;
  }
  .dropdown::before { display: none; }
  .nav-list li.sub-open > .dropdown { display: block; }
  .dropdown a { font-size: 0.78rem; padding: 0.45rem 0; color: rgba(252, 245, 246, 0.7); }
  .dropdown a:hover { padding-left: 0; }
  .main-nav .header-cta { margin-top: 2.2rem; border-color: var(--rose); color: #fff; }
  .nav-search { margin: 2rem 0 0; width: min(320px, 78vw); }
  .nav-search input,
  .nav-search input:focus {
    width: 100%;
    background: rgba(252, 245, 246, 0.08);
    border-color: rgba(252, 245, 246, 0.35);
    color: var(--blush);
  }
  .nav-search input::placeholder { color: rgba(252, 245, 246, 0.55); }
  .lang-toggle { margin-left: auto; margin-right: 0.8rem; }
  /* the language toggle and the close button stay above the open menu */
  body.nav-open .lang-toggle,
  body.nav-open .nav-toggle { position: relative; z-index: 110; }
  body.nav-open .lang-toggle { background: rgba(252, 245, 246, 0.1); border-color: rgba(252, 245, 246, 0.25); }
  body.nav-open .lang-toggle span { color: rgba(252, 245, 246, 0.75); }
  body.nav-open .lang-toggle span.is-active { color: #fff; }
  body.nav-open { overflow: hidden; }
  body.nav-open .nav-toggle { color: var(--blush); }
  body.nav-open .nav-toggle span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
  body.nav-open .nav-toggle span:nth-child(2) { opacity: 0; }
  body.nav-open .nav-toggle span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
}

/* ---------- Journal archive, site map, cross-links (2026-10-01) ---------- */
.journal-archive .archive-years {
  display: grid;
  align-items: start;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
  gap: 2rem 3rem;
  margin-top: 1.6rem;
}
.archive-year h3 { font-size: 1.1rem; color: var(--rose); margin-bottom: 0.6rem; }
.archive-year ul,
.sitemap-group ul { display: grid; gap: 0.45rem; }
.archive-year a,
.sitemap-group a { color: var(--plum); font-size: 0.94rem; line-height: 1.45; transition: color 0.25s; }
.archive-year a:hover,
.sitemap-group a:hover { color: var(--rose); }
.sitemap-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
  gap: 2.4rem 3rem;
  align-items: start;
}
.sitemap-group h2 { font-size: 1.25rem; margin-bottom: 0.8rem; }
.article-col.ported .ported-more ul { list-style: none; margin: 0.4rem 0 0; display: flex; flex-wrap: wrap; gap: 0.4rem 1.2rem; }
.article-col.ported .ported-more li { padding: 0; }
.article-col.ported .ported-link { margin: 0.3rem 0; }

/* the journal posts' Chinese title is a <p> (one H1 per page) with the heading's look */
.blog-hero p.display-lg { font-family: var(--cjk-serif, var(--serif)); line-height: 1.15; letter-spacing: 0.01em; color: #fff; margin: 0; }

/* treatment pages: their WordPress "-toronto" and Chinese / Vietnamese versions */
.tp-variants { padding-top: 0; }
.tp-variants__list { display: flex; flex-wrap: wrap; gap: 0.5rem 1.4rem; margin-top: 0.6rem; }
.tp-variants__list a { color: var(--plum); border-bottom: 1px solid rgba(229, 102, 123, 0.35); font-size: 0.92rem; }
.tp-variants__list a:hover { color: var(--rose); border-bottom-color: var(--rose); }

/* home: the treatment pages WordPress's home linked directly */
.popular { padding-top: 0; }
.popular__list { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 1.4rem; }
.popular__list a { display: inline-block; padding: 0.55rem 1rem; border: 1px solid var(--line); border-radius: 999px;
  font-family: var(--sans); font-size: 0.8rem; letter-spacing: 0.08em; color: var(--plum); transition: color 0.25s, border-color 0.25s; }
.popular__list a:hover { color: var(--rose); border-color: var(--rose); }
/* consent / eligibility line under a landing form */
.form-note { margin-top: 0.9rem; font-size: 0.8rem; line-height: 1.6; color: var(--mauve); max-width: 720px; }