/* ============================================================
   REJUUV MEDI SPA: Luxury Redesign
   Brand palette (from rejuuvmedispa.com):
   Rose #E4647C · Plum #5D4954 · Blush #F8F3EF · Sand #E6DBD0
   ============================================================ */

:root {
  --blush: #f8f3ef;
  --blush-deep: #f2e7df;
  --plum: #4a3a44;
  --plum-brand: #5d4954;
  --plum-deep: #382b34;
  --rose: #e4647c;
  --rose-soft: #f09fae;
  --terracotta: #dca191;
  --sand: #e6dbd0;
  --mauve: #8d7a85;
  --line: rgba(93, 73, 84, 0.16);
  --line-light: rgba(248, 243, 239, 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(74, 58, 68, 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);
}

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

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

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

.btn--light {
  border-color: rgba(248, 243, 239, 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: #b8935a;
  box-shadow: 0 12px 28px rgba(205, 174, 116, 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 {
  background: rgba(248, 243, 239, 0.93);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow: 0 1px 0 var(--line);
  padding: 0.8rem 0;
}

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

/* 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(248, 243, 239, 0.85);
}

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

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

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

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

.nav-list > li > a {
  font-size: 0.72rem;
  font-weight: 400;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  white-space: nowrap;
  color: rgba(74, 58, 68, 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(56, 43, 52, 0.28);
}

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

/* A nav item that only opens its menu — it is not a link itself. */
.nav-parent {
  cursor: pointer;
}

.dropdown a {
  display: block;
  padding: 0.55rem 1.8rem;
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(248, 243, 239, 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;
  color: var(--plum);
}

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

/* ---------- Email reveal (click-to-reveal, js/email-reveal.js) ---------- */
.email-reveal {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: rgba(205, 174, 116, 0.5);
  transition: color 0.2s var(--ease), opacity 0.2s var(--ease);
}
.email-reveal:hover {
  color: var(--rose);
}
.email-reveal-link {
  color: inherit;
}
.email-reveal-box {
  display: inline-block;
  vertical-align: middle;
}
.email-reveal-fail {
  opacity: 0.85;
  font-style: italic;
}

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

.hero {
  min-height: 100svh;
  display: flex;
  align-items: center;
  position: relative;
  background:
    radial-gradient(ellipse 80% 60% at 75% 20%, rgba(205, 174, 116, 0.26), transparent 60%),
    radial-gradient(ellipse 60% 50% at 15% 85%, rgba(220, 161, 145, 0.16), transparent 55%),
    linear-gradient(160deg, #54424d 0%, #4a3a44 55%, #3e303a 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(248, 243, 239, 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(248, 243, 239, 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(56, 43, 52, 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 {
  /* ghost watermark: the actual REJUUV wordmark, tinted champagne */
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(66vw, 1040px);
  aspect-ratio: 2000 / 720;
  background: rgba(205, 174, 116, 0.05);
  -webkit-mask: url("../assets/logo.png") no-repeat center / contain;
          mask: url("../assets/logo.png") no-repeat center / contain;
  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(248, 243, 239, 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(248, 243, 239, 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(56, 43, 52, 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(205, 174, 116, 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(248, 243, 239, 0.58);
  padding: clamp(4rem, 8vw, 6.5rem) 0 2.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(248, 243, 239, 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(248, 243, 239, 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(248, 243, 239, 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(248, 243, 239, 0.32);
}

.footer-bottom a {
  color: rgba(248, 243, 239, 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(205, 174, 116, 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(248, 243, 239, 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(205, 174, 116, 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(248, 243, 239, 0.6);
  max-width: 30rem;
}

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

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

.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;
  }
}

/* Nav collapses to the hamburger earlier now that the bar carries six
   links + search + CTA — below 1160 the full-screen menu takes over. */
@media (max-width: 1160px) {
  .nav-toggle {
    display: flex;
  }

  .main-nav {
    position: fixed;
    inset: 0;
    background: linear-gradient(160deg, #14497a 0%, #0f3d66 55%, #0b2c4c 100%);
    color: var(--plum);
    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(248, 243, 239, 0.8);
  }

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

  /* Dropdowns are hidden in the full-screen menu, but this item's parent is
     not a link — so show its children, or it would be a dead end on mobile.
     The panel chrome (absolute position, min-width, background, border) is
     reset here: in the full-screen menu these read as plain sub-items. */
  .nav-list > li.has-menu {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .nav-list > li.has-menu .dropdown {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    position: static;
    transform: none;
    min-width: 0;
    width: auto;
    padding: 0.7rem 0 0;
    background: transparent;
    border: 0;
    box-shadow: none;
  }

  .nav-list > li.has-menu .dropdown a {
    padding: 0;
    font-size: 0.82rem;
    letter-spacing: 0.16em;
    color: rgba(248, 243, 239, 0.6);
  }

  .nav-list > li.has-menu .dropdown a:hover {
    padding-left: 0;
    color: var(--rose-soft);
  }

  .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(--plum);
  }

  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);
  }
}

/* Mid-width desktops: keep all six links + CTA, drop the search field
   (procedures are still reachable via the Procedures menu + home explorer). */
@media (min-width: 1161px) and (max-width: 1300px) {
  .nav-search {
    display: none;
  }
}

@media (max-width: 880px) {
  .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(205, 174, 116, 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(205, 174, 116, 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(205, 174, 116, 0.45);
  animation: rchatPulse 2.4s var(--ease) 3;
  pointer-events: none;
}

@keyframes rchatPulse {
  0% { box-shadow: 0 0 0 0 rgba(205, 174, 116, 0.45); }
  70% { box-shadow: 0 0 0 14px rgba(205, 174, 116, 0); }
  100% { box-shadow: 0 0 0 0 rgba(205, 174, 116, 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(56, 43, 52, 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(248, 243, 239, 0.28);
  background: transparent;
  color: rgba(248, 243, 239, 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(248, 243, 239, 0.12);
  color: var(--blush);
  cursor: pointer;
  transition: background 0.3s, transform 0.3s var(--ease);
}

.rchat-min:hover {
  background: rgba(248, 243, 239, 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(248, 243, 239, 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(56, 43, 52, 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: #b8935a; 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(248, 243, 239, 0.1);
  border-color: rgba(248, 243, 239, 0.22);
}

.header-dark:not(.scrolled) .lang-toggle span {
  color: rgba(248, 243, 239, 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(205, 174, 116, 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(248, 243, 239, 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(56, 43, 52, 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(205, 174, 116, 0.55), transparent 60%),
    linear-gradient(150deg, #5d4954, #2f2530);
}

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

.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(74, 58, 68, 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(248, 243, 239, 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.25rem;
}

.nav-search input {
  width: 150px;
  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(248, 243, 239, 0.35);
  color: var(--blush);
}

.header-dark:not(.scrolled) .nav-search input::placeholder {
  color: rgba(248, 243, 239, 0.55);
}

.header-dark:not(.scrolled) .nav-search input:focus {
  border-color: var(--rose-soft);
  background: rgba(56, 43, 52, 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(56, 43, 52, 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: #b8935a;
  box-shadow: 0 10px 24px rgba(205, 174, 116, 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: 1160px) {
  .nav-search {
    margin: 2rem 0 0;
    width: min(320px, 78vw);
  }

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

  .nav-search input::placeholder {
    color: rgba(248, 243, 239, 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) */

.docs-row {
  display: flex;
  gap: 1rem;
  margin-bottom: clamp(3rem, 6vw, 4.5rem);
}

.doc {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  min-height: 400px;
  padding: clamp(1.6rem, 2.6vw, 2.4rem);
  background:
    radial-gradient(ellipse 90% 60% at 80% 8%, rgba(205, 174, 116, 0.2), transparent 60%),
    var(--plum);
  color: var(--blush);
  overflow: hidden;
  transition: flex 0.7s var(--ease), background 0.7s var(--ease);
}

.docs-row:hover .doc {
  flex: 0.85;
}

.docs-row .doc:hover {
  flex: 2.3;
  background:
    radial-gradient(ellipse 90% 60% at 80% 8%, rgba(205, 174, 116, 0.28), transparent 58%),
    var(--plum-deep);
}

.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(205, 174, 116, 0.4);
  margin-bottom: auto;
  flex-shrink: 0;
}

.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;
  color: rgba(248, 243, 239, 0.75);
  max-width: 30rem;
  max-height: 0;
  opacity: 0;
  transform: translateY(10px);
  transition: max-height 0.7s var(--ease), opacity 0.5s var(--ease),
    transform 0.7s var(--ease);
}

.doc:hover .doc__bio {
  max-height: 240px;
  opacity: 1;
  transform: none;
}

.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(56, 43, 52, 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 {
    flex-direction: column;
  }

  .docs-row:hover .doc,
  .docs-row .doc:hover {
    flex: 1;
  }

  .doc {
    min-height: 0;
  }

  .doc__mono {
    margin-bottom: 0.5rem;
  }

  .doc__bio {
    max-height: none;
    opacity: 1;
    transform: none;
  }

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

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

  .doc__bio {
    max-height: none;
    opacity: 1;
    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(56, 43, 52, 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;
  }
}

/* ============================================================
   REJUUV MED — EMERALD & CHAMPAGNE THEME
   One comprehensive layer over the (light) Medi Spa base. Deep
   emerald canvas, warm cream text, matte champagne accent. Every
   dark surface re-declares BOTH background and text so nothing
   renders dark-on-dark.
   ============================================================ */
:root {
  --blush: #0c3357;
  --blush-deep: #0a2744;
  --plum: #eee7d8;
  --plum-brand: #e6dcc6;
  --plum-deep: #f5efe2;
  --rose: #cdae74;
  --rose-soft: #ddc99c;
  --terracotta: #cdae74;
  --sand: #134672;
  --mauve: #9fb2cc;
  --line: rgba(238, 231, 216, 0.13);
  --line-light: rgba(238, 231, 216, 0.13);
  --panel: #0e426d;
  --panel-2: #14507f;
  --panel-deep: #0a2846;
  --emerald: #5aa0e0;
}
::selection { background: var(--rose); color: #16110a; }

.lede { color: rgba(238, 231, 216, 0.7); }
.nav-list > li > a { color: rgba(238, 231, 216, 0.76); }

.site-header.scrolled { background: rgba(10, 32, 54, 0.9); box-shadow: 0 1px 0 var(--line); }
.header-dark:not(.scrolled) { color: var(--plum); }
.header-dark:not(.scrolled) .nav-list > li > a { color: rgba(238, 231, 216, 0.84); }
.header-dark:not(.scrolled) .nav-list > li > a:hover { color: #fff; }
.logo span, .site-footer .logo span { color: var(--rose); }

.dropdown { background: #12446f; color: var(--plum); border: 1px solid var(--line); box-shadow: 0 24px 60px rgba(0,0,0,0.55); }

.btn--light { border-color: rgba(238, 231, 216, 0.4); color: var(--plum); }
.btn--light::before { background: var(--plum); }
.btn--light:hover { color: var(--blush); }
.btn--rose:hover { color: #16110a; }
.text-link, .text-link:hover { color: #16110a; }

.hero {
  background:
    radial-gradient(ellipse 90% 60% at 78% 12%, rgba(205, 174, 116, 0.14), transparent 58%),
    radial-gradient(ellipse 70% 60% at 12% 88%, rgba(90, 160, 224, 0.13), transparent 60%),
    linear-gradient(158deg, #14497a 0%, #0f3d66 55%, #0b2c4c 100%);
  color: var(--plum);
}
.strip { border-color: var(--line); }
.strip span { color: rgba(238, 231, 216, 0.48); }

.philosophy {
  background:
    radial-gradient(ellipse 60% 80% at 85% 20%, rgba(205, 174, 116, 0.10), transparent 60%),
    linear-gradient(160deg, #11426d 0%, #0c3053 100%);
  color: var(--plum);
}
.philosophy-inner { background: transparent; color: var(--plum); }
.philosophy .lede, .stat .label { color: rgba(238, 231, 216, 0.66); }
.stat .value { color: var(--plum-deep); }

.loc { color: var(--plum); }
.loc__city { color: var(--rose); }
.loc.is-active { background: var(--panel); }
.clinic-hours { color: rgba(238, 231, 216, 0.66); }

.cta-band {
  background:
    radial-gradient(ellipse 70% 90% at 80% 50%, rgba(205, 174, 116, 0.12), transparent 60%),
    linear-gradient(160deg, #11426d 0%, #0c3053 100%);
  color: var(--plum);
}

.site-footer { background: var(--panel-deep); color: var(--plum); border-top: 1px solid var(--line); }
.site-footer .logo { color: var(--plum); }
.footer-tagline, .footer-col a, .footer-bottom, .footer-bottom a { color: rgba(238, 231, 216, 0.6); }
.footer-col h4 { color: var(--rose); }
.footer-col a:hover { color: var(--plum); }

.service-card:hover,
.doctor-card,
.location-card,
.value-card,
.post-card,
.clinic,
.clinic:hover,
.article-figure--pad { background: var(--panel); }

.page-hero {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 7rem 0 3.5rem;
  background:
    radial-gradient(ellipse 70% 60% at 82% 8%, rgba(205, 174, 116, 0.14), transparent 58%),
    linear-gradient(158deg, #14497a 0%, #0f3d66 55%, #0b2c4c 100%);
  color: var(--plum);
}

.nav-search input, .hub-search input { background: rgba(238, 231, 216, 0.05); border-color: var(--line); color: var(--plum); }
.nav-search input::placeholder, .hub-search input::placeholder { color: rgba(238, 231, 216, 0.42); }
.search-suggest { background: #12446f; border: 1px solid var(--line); box-shadow: 0 24px 60px rgba(0,0,0,0.55); }
.search-suggest__row { color: var(--plum); }
.search-suggest__row .sub { color: var(--mauve); }
.search-suggest__row:hover, .search-suggest .is-active { background: var(--panel-2); }
.search-suggest__ask { color: var(--rose); }

.rchat-panel { background: #0d3357; border: 1px solid var(--line); }
.rchat-head { background: #0b2c4c; color: var(--plum); border-bottom: 1px solid var(--line); }
.rchat-sub { color: rgba(238, 231, 216, 0.5); }
.rchat-min { background: rgba(238, 231, 216, 0.12); color: var(--plum); }
.rchat-min:hover { background: rgba(238, 231, 216, 0.22); }
.rchat-bot { background: var(--panel); color: var(--plum); box-shadow: 0 4px 14px rgba(0,0,0,0.35); }
.rchat-user { background: var(--rose); color: #16110a; }
.rchat-form { background: #0b2c4c; border-top-color: var(--line); }
.rchat-input { color: var(--plum); }
.rchat-send { background: var(--rose); color: #16110a; }
.rchat-disclaimer { background: #0b2c4c; color: rgba(238, 231, 216, 0.4); }
.rchat-launch { color: #16110a; }

.doc__mono {
  background:
    radial-gradient(circle at 32% 26%, rgba(255,255,255,0.10), transparent 45%),
    linear-gradient(150deg, rgba(205,174,116,0.30), rgba(90,160,224,0.32));
  color: var(--plum-deep);
  border: 1px solid rgba(238,231,216,0.14);
}

/* cards that set color:var(--blush) internally (e.g. .doc names) → cream text */
.doc, .docs-row .doc, .doctor-card, .value-card, .location-card,
.service-card, .post-card, .clinic, .team-strip { color: var(--plum); }
.doctor-card h3, .value-card h3, .location-card h3, .team-strip h3 { color: var(--plum); }
.doctor-card .role { color: var(--rose); }

/* marquee → subtle dark band with champagne procedure names (was solid champagne) */
.strip { background: transparent; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.strip span { color: rgba(205, 174, 116, 0.7); }
/* home team cards were var(--plum) (→ cream). Make them dark emerald panels. */
.docs-row .doc { background: #0e426d; }
.docs-row .doc:hover { background: #175488; }

/* ============================================================
   HERO 3D PARALLAX GALLERY (right side) + CLINIC VIDEO
   Ported from 21st.dev "3D Parallax Unfurling Gallery".
   ============================================================ */
.hero-inner {
  max-width: none;
  display: grid;
  grid-template-columns: minmax(0, 1.04fr) minmax(0, 0.96fr);
  gap: clamp(1.5rem, 4vw, 4rem);
  align-items: center;
}
.hero-copy { max-width: 40rem; }

.hero-gallery {
  position: relative;
  height: min(82vh, 700px);
  overflow: hidden;
  perspective: 1500px;
  -webkit-mask-image: radial-gradient(130% 105% at 58% 50%, #000 46%, transparent 88%);
          mask-image: radial-gradient(130% 105% at 58% 50%, #000 46%, transparent 88%);
}
.hg-stage { position: absolute; inset: -10% -6%; display: flex; align-items: center; justify-content: center; transform-style: preserve-3d; }
.hg-grid {
  display: flex;
  gap: 14px;
  width: 116%;
  height: 150%;
  transform: translateX(5%) rotateX(var(--tx, 11deg)) rotateY(var(--ty, -20deg)) rotateZ(3deg);
  transform-style: preserve-3d;
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.hg-col { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 14px; will-change: transform; animation: hgDrift 42s linear infinite; }
.hg-col--2 { animation-duration: 52s; animation-direction: reverse; }
.hg-col--3 { animation-duration: 46s; }
.hg-col--4 { animation-duration: 58s; animation-direction: reverse; }
.hg-col img {
  width: 100%;
  height: 208px;
  object-fit: cover;
  border-radius: 12px;
  border: 1px solid rgba(238, 231, 216, 0.10);
  opacity: 0.92;
  box-shadow: 0 22px 44px rgba(0, 0, 0, 0.45);
}
@keyframes hgDrift { from { transform: translateY(0); } to { transform: translateY(-50%); } }
.hg-mask { position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background: radial-gradient(125% 100% at 55% 50%, transparent 42%, rgba(13, 38, 62, 0.5) 84%, var(--blush) 100%); }
.hero-gallery::before { content: ""; position: absolute; inset: 0; z-index: 4; pointer-events: none;
  background: linear-gradient(90deg, var(--blush) 0%, rgba(13, 38, 62, 0) 18%); }

@media (max-width: 1000px) {
  .hero-inner { grid-template-columns: 1fr; }
  .hero-gallery { display: none; }
}
@media (prefers-reduced-motion: reduce) { .hg-col { animation: none; } }

/* clinic tour video (Our Clinic section) */
.clinic-video {
  position: relative;
  margin: 0 0 clamp(1.5rem, 3vw, 2.5rem);
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--line);
  aspect-ratio: 16 / 9;
  background: #0b2c4c;
}
.clinic-video video { width: 100%; height: 100%; object-fit: cover; display: block; }
.clinic-video__tag {
  position: absolute; left: 1rem; bottom: 1rem;
  font-size: 0.66rem; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--plum); background: rgba(11, 34, 57, 0.6);
  padding: 0.45rem 0.9rem; border-radius: 20px; border: 1px solid var(--line);
  backdrop-filter: blur(6px);
}

/* ============================================================
   HERO GALLERY v2 — pinned unfurl (supersedes the v1 block above)
   Bigger imagery, no borders/rings, seamless blend into the smoke,
   scroll-driven 3D handled by js/hero-gallery.js.
   ============================================================ */
.hero--track {
  display: block;
  height: 205vh;          /* runway: unfurl finishes ~2/3 in, then extra drift */
  min-height: 0;
  padding: 0;
  background: none;
  overflow: visible;      /* the base .hero{overflow:hidden} would break the pin */
}
.hero--track .hero-meta { z-index: 3; }
.hero-sticky {
  position: -webkit-sticky;
  position: sticky !important;
  top: 0;
  height: 100svh;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: linear-gradient(158deg, #14497a 0%, #0f3d66 55%, #0b2c4c 100%);
}
.hero--track .hero-inner { display: block; max-width: none; }
.hero-copy { max-width: 42rem; position: relative; z-index: 2; }
/* the headline is longer than the old tagline; scale it to hold two lines */
.hero-copy .display-xl { font-size: clamp(2.8rem, 6.4vw, 5.4rem); }

.hero-gallery {
  position: absolute;
  top: 0; right: 0; bottom: 0;
  height: auto;   /* override the v1 height cap so it truly runs to the bottom */
  width: 60vw;
  z-index: 1;
  pointer-events: none;
  perspective: 1400px;
  perspective-origin: 18% 50%;
  /* soft, wide falloffs — no ring, no hard edges; the smoke shows
     through the faded zones so the wall melts into the background.
     The wall runs FULL-BLEED top to bottom of the splash; readability of
     the nav/meta text is handled by the ::after scrims, not by cutting
     the photos short. */
  -webkit-mask-image:
    radial-gradient(108% 178% at 76% 54%, #000 34%, rgba(0,0,0,0.85) 58%, transparent 93%),
    linear-gradient(180deg, rgba(0,0,0,0.55) 0%, #000 13%, #000 100%),
    linear-gradient(90deg, transparent 0%, rgba(0,0,0,0.4) 13%, #000 34%);
  -webkit-mask-composite: source-in;
          mask-image:
    radial-gradient(108% 178% at 76% 54%, #000 34%, rgba(0,0,0,0.85) 58%, transparent 93%),
    linear-gradient(180deg, rgba(0,0,0,0.55) 0%, #000 13%, #000 100%),
    linear-gradient(90deg, transparent 0%, rgba(0,0,0,0.4) 13%, #000 34%);
          mask-composite: intersect;
}
/* scrims (drawn over the photos): melt the left edge into the smoke and
   keep the nav (top) + meta strip (bottom) readable while the wall itself
   runs edge to edge — no abrupt cut, no empty gap. */
.hero-gallery::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(11, 33, 56, 0.55) 0%, transparent 22%),
    linear-gradient(180deg, rgba(11, 33, 56, 0.5) 0%, transparent 15%),
    linear-gradient(0deg, rgba(11, 33, 56, 0.82) 0%, rgba(11, 33, 56, 0.35) 9%, transparent 20%);
}
.hg-stage { position: absolute; inset: 0; transform-style: preserve-3d; }
.hg-grid {
  position: absolute;
  left: -12%; top: -36%;
  width: 128%; height: 172%;
  display: flex;
  gap: clamp(18px, 1.8vw, 28px);
  transform-style: preserve-3d;
  will-change: transform;
  animation: none;
  transform: translateX(0) rotate(0);
}
.hg-col {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column;
  gap: clamp(18px, 1.8vw, 28px);
  will-change: transform;
  animation: none;
}
.hg-col img {
  width: 100%;
  height: clamp(330px, 24vw, 470px);
  object-fit: cover;
  border-radius: 10px;
  border: 0;
  opacity: 0.94;
  filter: saturate(0.86) brightness(0.82) contrast(1.04);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
}
/* the most luxurious shots run larger — varied sizes = editorial rhythm */
.hg-col img.hg-xl {
  height: clamp(480px, 36vw, 680px);
}
.hg-mask, .hero-gallery::before { display: none; content: none; }

@media (max-width: 1000px) {
  /* track collapses to one screen; the (inert) pin is harmless */
  .hero--track { height: auto; }
  .hero-sticky { height: auto; min-height: 100svh; padding: 8rem 0 5rem; }
  .hero-gallery { display: none; }
}

/* ============================================================
   BRAND WORDMARK — the actual REJUUV logo (transparent PNG used
   as a mask so it can take any theme color).
   ============================================================ */
.logo-mark {
  display: inline-block;
  width: 112px;
  aspect-ratio: 2000 / 720;
  background: var(--plum);
  -webkit-mask: url("../assets/logo.png") no-repeat center / contain;
          mask: url("../assets/logo.png") no-repeat center / contain;
  transition: background 0.3s;
}
.logo:hover .logo-mark { background: var(--plum-deep); }
.site-footer .logo-mark { width: 126px; }
.rchat-brand .logo-mark { width: 84px; }

/* logo lockup: larger MED, tighter to the wordmark */
.logo { gap: 0.16rem; }
.logo span { font-size: 0.62rem; letter-spacing: 0.5em; text-indent: 0.5em; }
.rchat-brand { gap: 0.14rem; }
.rchat-brand span { font-size: 0.52rem; }

/* clinic video lives INSIDE the clinic card (under the Directions row)
   and stretches so the card bottom-aligns with the map */
.loc { flex: 1; cursor: default; }
.loc .clinic-video {
  flex: 1;
  aspect-ratio: auto;
  min-height: 240px;
  margin: clamp(0.9rem, 1.6vw, 1.2rem) 0 0;
  border-radius: 12px;
}
@media (max-width: 900px) {
  .loc .clinic-video { aspect-ratio: 16 / 9; min-height: 0; }
}

/* ============================================================
   DOCTOR PORTRAITS — real photos from rejuuvmed.com, unified with
   an emerald duotone grade (hides the mismatched source lighting),
   full-bleed in the expand-on-hover cards. Hover eases the portrait
   back toward colour while the bio reveals.
   ============================================================ */
.doc { position: relative; min-height: clamp(420px, 34vw, 520px); }
.doc__photo {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1) sepia(0.32) hue-rotate(95deg) saturate(0.4) brightness(0.8) contrast(1.06);
  opacity: 0.92;
  transition: filter 0.8s var(--ease), transform 1s var(--ease);
}
.doc::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(180deg,
    rgba(11, 33, 56, 0.22) 0%,
    rgba(11, 33, 56, 0.02) 30%,
    rgba(11, 33, 56, 0.15) 52%,
    rgba(11, 33, 56, 0.86) 82%,
    rgba(11, 33, 56, 0.96) 100%);
}
.doc__id, .doc__bio { position: relative; z-index: 2; }
.doc__id { margin-top: auto; }
.doc:hover .doc__photo {
  filter: grayscale(0.25) sepia(0.06) saturate(0.85) brightness(0.9) contrast(1.02);
  transform: scale(1.045);
}

/* about page cards: photo replaces the monogram */
.doctor-photo {
  width: 100%;
  height: 250px;
  object-fit: cover;
  border-radius: 10px;
  margin-bottom: 1.2rem;
  filter: grayscale(1) sepia(0.32) hue-rotate(95deg) saturate(0.4) brightness(0.82) contrast(1.06);
  transition: filter 0.8s var(--ease);
}
.doctor-card:hover .doctor-photo {
  filter: grayscale(0.25) sepia(0.06) saturate(0.85) brightness(0.92) contrast(1.02);
}

/* ============================================================
   DOCTORS PAGE — editorial profiles: offset-framed duotone
   portrait, headline accolades first, expandable full profile.
   ============================================================ */
.profile {
  display: grid;
  grid-template-columns: minmax(280px, 5fr) 7fr;
  gap: clamp(2rem, 4.5vw, 4.5rem);
  align-items: start;
  padding: clamp(2.5rem, 5vw, 4rem) 0;
}
.profile + .profile { border-top: 1px solid var(--line); }
.profile--rev .profile__media { order: 2; }
.profile__media {
  position: relative;
  margin: 14px;
}
.profile__media::after {
  content: "";
  position: absolute;
  inset: 14px -14px -14px 14px;
  border: 1px solid rgba(205, 174, 116, 0.35);
  pointer-events: none;
}
.profile--rev .profile__media::after { inset: 14px 14px -14px -14px; }
.profile__media img {
  position: relative;
  z-index: 1;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  filter: grayscale(1) sepia(0.32) hue-rotate(95deg) saturate(0.4) brightness(0.82) contrast(1.06);
  transition: filter 0.8s var(--ease);
}
.profile:hover .profile__media img {
  filter: grayscale(0.25) sepia(0.06) saturate(0.85) brightness(0.92) contrast(1.02);
}
.profile__body .display-md { margin: 0.6rem 0 1.1rem; }
.profile__intro { color: rgba(238, 231, 216, 0.72); max-width: 40rem; }

.accolades { margin: 1.6rem 0 0.4rem; max-width: 40rem; }
.accolades li {
  position: relative;
  padding: 0.85rem 0 0.85rem 2rem;
  border-bottom: 1px solid var(--line);
  font-size: 0.95rem;
  color: var(--plum);
}
.accolades li:first-child { border-top: 1px solid var(--line); }
.accolades li::before {
  content: "\2726";
  position: absolute;
  left: 0.2rem;
  top: 0.9rem;
  color: var(--rose);
  font-size: 0.8rem;
}

/* expandable full profile — luxe summary + animated reveal */
.profile-more { margin-top: 1.4rem; max-width: 40rem; }
.profile-more summary {
  list-style: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--rose);
  padding: 0.6rem 0;
  transition: color 0.35s;
}
.profile-more summary::-webkit-details-marker { display: none; }
.profile-more summary:hover { color: var(--rose-soft); }
.pm-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border: 1px solid rgba(205, 174, 116, 0.45);
  border-radius: 50%;
  font-size: 0.95rem;
  font-weight: 300;
  transition: transform 0.5s var(--ease), background 0.4s, color 0.4s;
}
.profile-more[open] .pm-ico { transform: rotate(45deg); background: var(--rose); color: #14100a; }
:root { interpolate-size: allow-keywords; }
.profile-more::details-content {
  block-size: 0;
  overflow: hidden;
  transition: block-size 0.6s var(--ease), content-visibility 0.6s allow-discrete;
}
.profile-more[open]::details-content { block-size: auto; }
.pm-body { padding: 0.6rem 0 0.6rem 2rem; border-left: 1px solid rgba(205, 174, 116, 0.3); margin-left: 12px; }
.pm-body h4 {
  font-family: var(--sans);
  font-size: 0.64rem;
  font-weight: 600;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--rose);
  margin: 1.3rem 0 0.5rem;
}
.pm-body h4:first-child { margin-top: 0.4rem; }
.pm-body ul li {
  font-size: 0.92rem;
  font-weight: 300;
  color: rgba(238, 231, 216, 0.78);
  padding: 0.3rem 0;
}

/* home team → dedicated page, luxurious hand-off */
.team-cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.1rem;
  margin: calc(-1 * clamp(1.5rem, 3vw, 2.25rem)) 0 clamp(3rem, 6vw, 4.5rem);
  text-align: center;
}
.team-cta::before { content: ""; width: 1px; height: 44px; background: linear-gradient(180deg, transparent, var(--rose)); }
.team-cta em {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.15rem;
  color: rgba(238, 231, 216, 0.8);
}
.doc__more {
  position: relative;
  z-index: 2;
  align-self: flex-start;
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--rose);
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height 0.6s var(--ease), opacity 0.5s var(--ease) 0.1s, color 0.3s;
}
.doc:hover .doc__more { max-height: 2rem; opacity: 1; }
.doc__more:hover { color: var(--rose-soft); }

@media (max-width: 880px) {
  .profile { grid-template-columns: 1fr; }
  .profile--rev .profile__media { order: 0; }
  .profile__media { max-width: 420px; }
}

/* ============================================================
   DOCTOR CARDS, same design as the Medi Spa (Alex, 2026-10-04):
   colour headshot in a rounded frame, name, role and bio always
   shown; the hovered card lifts and glows. Replaces the older
   full-bleed duotone expand-on-hover panels above. Two cards here,
   sized like the Medi Spa's three-across cards.
   ============================================================ */
.docs-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}
.docs-row--two { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: calc((100% - 2rem) * 2 / 3 + 1rem); }
.docs-row:hover .doc,
.docs-row .doc:hover { flex: none; }
.doc,
.docs-row .doc {
  position: relative;
  isolation: isolate;
  min-height: 0;
  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(205, 174, 116, 0.18), transparent 60%),
    #0e426d;
  color: var(--plum);
  overflow: hidden;
  transition: transform 0.8s var(--ease), box-shadow 0.8s var(--ease), opacity 0.6s var(--ease);
}
.docs-row .doc:hover {
  background:
    radial-gradient(ellipse 90% 60% at 80% 8%, rgba(205, 174, 116, 0.18), transparent 60%),
    #0e426d;
}
.doc::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(ellipse 90% 60% at 80% 8%, rgba(238, 231, 216, 0.12), transparent 58%);
  opacity: 0;
  transition: opacity 0.8s var(--ease);
  pointer-events: none;
}
.doc__photo {
  position: static;
  display: block;
  width: 100%;
  height: clamp(180px, 22vh, 240px);
  object-fit: cover;
  object-position: 50% 18%;
  filter: none;
  opacity: 1;
  background: rgba(238, 231, 216, 0.06);
  transition: transform 1.2s var(--ease);
}
.doc > picture {
  display: block;
  flex-shrink: 0;
  overflow: hidden;
  border-radius: 10px;
}
.doc__id { margin-top: 0; }
.doc__role { color: var(--rose); }
.doc__bio {
  max-height: none;
  opacity: 1;
  transform: none;
  line-height: 1.6;
  color: rgba(238, 231, 216, 0.8);
  transition: opacity 0.7s var(--ease), transform 0.8s var(--ease);
}
.doc:hover .doc__photo { filter: none; }
@media (hover: hover) and (min-width: 901px) {
  .doc__bio { opacity: 0.78; }
  .doc:hover { transform: translateY(-6px); box-shadow: 0 26px 50px -28px rgba(0, 0, 0, 0.6); }
  .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; }
}
@media (max-width: 900px) {
  .docs-row, .docs-row--two { grid-template-columns: 1fr; max-width: none; }
}
@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; }
}
.email-reveal-link { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(205, 174, 116, 0.5); }
.email-reveal-link:hover { color: var(--rose); }