/* ============================================================
   Rejuuv Medi Spa — Concern pages
   Builds on style.css tokens + idioms (square/editorial house style).
   Used by services/skin-tightening.html and future concern landings.
   ============================================================ */

/* ---------- Concern finder (lives in .page-hero) ---------- */
.concern-finder {
  margin-top: clamp(2rem, 4vw, 3rem);
}

.concern-finder__q {
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 400;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: rgba(252, 245, 246, 0.6);
  margin-bottom: 1.1rem;
}

.concern-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  max-width: 52rem;
}

.concern-chip {
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--blush);
  background: transparent;
  border: 1px solid rgba(252, 245, 246, 0.26);
  padding: 0.7rem 1.25rem;
  border-radius: 2rem;
  cursor: pointer;
  transition: border-color 0.35s var(--ease), background 0.35s var(--ease),
    color 0.35s var(--ease), transform 0.35s var(--ease);
}

.concern-chip:hover {
  border-color: var(--rose-soft);
  color: #fff;
  transform: translateY(-2px);
}

.concern-chip.is-active {
  background: var(--rose);
  border-color: var(--rose);
  color: #fff;
}

.concern-cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: clamp(2rem, 4vw, 2.8rem);
}

/* ---------- Signs ("you might be noticing") ---------- */
.signs-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}

.sign {
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: clamp(1.6rem, 3vw, 2.4rem);
  display: flex;
  gap: 1rem;
  align-items: baseline;
}

.sign .mark {
  color: var(--rose);
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.1rem;
  flex-shrink: 0;
}

.sign p {
  color: var(--plum);
  font-size: 1rem;
  font-weight: 300;
}

/* ---------- Options bento (ways we lift) ---------- */
.options-bento {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: minmax(210px, auto);
  gap: 1px;
  background: var(--line); /* hairline seams between cards */
  border: 1px solid var(--line);
}

.opt {
  background: var(--blush);
  padding: clamp(1.8rem, 3vw, 2.6rem);
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  transition: background 0.5s var(--ease), box-shadow 0.5s var(--ease);
  position: relative;
}

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

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

.opt__name {
  font-family: var(--serif);
  font-size: clamp(1.4rem, 2.2vw, 1.9rem);
  color: var(--plum);
}

.opt__desc {
  color: var(--mauve);
  font-size: 0.92rem;
  font-weight: 300;
  flex-grow: 1;
}

.opt__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: auto;
}

.opt__tags span {
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 0.4rem 0.85rem;
  background: var(--blush-deep);
  color: var(--mauve);
  border-radius: 2rem;
}

/* Tall focal card (the flagship treatment) */
.opt--tall {
  grid-row: span 2;
  background:
    radial-gradient(ellipse 90% 60% at 75% 12%, rgba(229, 102, 123, 0.28), transparent 62%),
    var(--plum);
  color: var(--blush);
}
.opt--tall .opt__name {
  font-size: clamp(1.9rem, 3vw, 2.7rem);
  color: var(--blush);
}
.opt--tall .opt__eyebrow {
  color: var(--rose-soft);
}
.opt--tall .opt__desc {
  color: rgba(252, 245, 246, 0.72);
}
.opt--tall .opt__tags span {
  background: rgba(252, 245, 246, 0.12);
  color: rgba(252, 245, 246, 0.82);
}
.opt--tall:hover {
  background:
    radial-gradient(ellipse 90% 60% at 75% 12%, rgba(229, 102, 123, 0.34), transparent 60%),
    var(--plum-deep);
  box-shadow: 0 30px 60px rgba(54, 23, 28, 0.28);
}

/* Wide consultation funnel card */
.opt--wide {
  grid-column: 1 / -1;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}
.opt--wide .opt__body {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.opt--wide .opt__desc {
  max-width: 44rem;
}

/* ---------- Spotlight (featured treatment) ---------- */
.spotlight__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: stretch;
}

/* left: accordion column */
.acc {
  border-top: 1px solid var(--line);
  margin-top: 2rem;
}
.acc__item {
  border-bottom: 1px solid var(--line);
}
.acc__head {
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  cursor: pointer;
  padding: 1.35rem 0;
  font-family: var(--serif);
  font-size: 1.15rem;
  color: var(--plum);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}
.acc__head .ico {
  color: var(--rose);
  font-family: var(--sans);
  font-size: 1.3rem;
  line-height: 1;
  transition: transform 0.4s var(--ease);
  flex-shrink: 0;
}
.acc__item.is-open .ico {
  transform: rotate(45deg);
}
.acc__body {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.5s var(--ease);
}
.acc__item.is-open .acc__body {
  max-height: 320px;
}
.acc__body p {
  padding: 0 0 1.4rem;
  color: var(--mauve);
  font-weight: 300;
  font-size: 0.98rem;
  max-width: 34rem;
}

/* right: tabbed info panel */
.sp-panel {
  background:
    radial-gradient(ellipse 80% 70% at 70% 15%, rgba(229, 102, 123, 0.22), transparent 60%),
    var(--plum);
  color: var(--blush);
  padding: clamp(2rem, 4vw, 3rem);
  min-height: 400px;
  display: flex;
  flex-direction: column;
}
.sp-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 1.6rem;
  border-bottom: 1px solid var(--line-light);
  margin-bottom: 1.8rem;
}
.sp-tab {
  background: none;
  border: none;
  color: rgba(252, 245, 246, 0.55);
  font-family: var(--sans);
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 0 0 0.9rem;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color 0.35s var(--ease), border-color 0.35s var(--ease);
}
.sp-tab:hover {
  color: var(--blush);
}
.sp-tab.is-active {
  color: var(--blush);
  border-bottom-color: var(--rose-soft);
}
.sp-pane {
  display: none;
}
.sp-pane.is-active {
  display: block;
}
.sp-pane ul {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.sp-pane li {
  display: flex;
  gap: 1.1rem;
  align-items: baseline;
  font-weight: 300;
  color: rgba(252, 245, 246, 0.86);
  font-size: 0.98rem;
}
.sp-pane li .k {
  color: var(--rose-soft);
  font-family: var(--serif);
  font-style: italic;
  min-width: 5.2rem;
  flex-shrink: 0;
}

/* ---------- Your visit (3 steps) ---------- */
.visit-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.5rem, 4vw, 3.5rem);
}
.step {
  border-top: 2px solid var(--rose);
  padding-top: 1.5rem;
}
.step .num {
  font-family: var(--serif);
  font-style: italic;
  font-size: 2.4rem;
  color: var(--rose);
  display: block;
  margin-bottom: 0.8rem;
}
.step h3 {
  font-size: clamp(1.3rem, 2vw, 1.7rem);
  margin-bottom: 0.6rem;
}
.step p {
  color: var(--mauve);
  font-weight: 300;
  font-size: 0.95rem;
}

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .options-bento {
    grid-template-columns: 1fr 1fr;
  }
  .opt--tall {
    grid-row: auto;
  }
  .spotlight__grid {
    grid-template-columns: 1fr;
  }
  .sp-panel {
    order: -1;
  }
}

@media (max-width: 760px) {
  .signs-grid {
    grid-template-columns: 1fr 1fr;
  }
  .visit-steps {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 540px) {
  .options-bento,
  .signs-grid {
    grid-template-columns: 1fr;
  }
  .opt--wide {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ---------- Home concern bubbles ("What would you like to improve?") ----------
   An organic field of floating bubbles. Layers per bubble:
     .bubble  (absolute position + cursor parallax, via --x/--y/--depth)
     .b-rev   (scroll-cascade reveal transition; .on added by js/bubbles.js)
     .b-face  (the pearl circle: sheen, hairline, slow bob via --bd delay)   */
/* Two-column hub: editorial head on the left, orbital system on the right.
   Tightened paddings — the orbit motif is allowed to breathe into them. */
#concerns {
  padding: clamp(3.5rem, 7vw, 5.5rem) 0;
}
#concerns .container {
  display: grid;
  grid-template-columns: minmax(300px, 5fr) 7fr;
  gap: clamp(2rem, 4vw, 4.5rem);
  align-items: center;
}
#concerns .section-head {
  margin-bottom: 0;
}
#concerns .hub-cta {
  margin-top: clamp(1.6rem, 3vw, 2.4rem);
}
@media (max-width: 1080px) {
  #concerns .container {
    display: block;
  }
  #concerns .section-head {
    margin-bottom: clamp(2.5rem, 5vw, 4rem);
  }
}

.bubble-field {
  position: relative;
  height: clamp(640px, 74vh, 720px);
  --R-outer: min(295px, 21vw);
  --R-inner: min(175px, 15.5vw);
}
/* hairline orbit rings + a soft center wash (inspired by magicui Orbiting Circles) */
.orbit-rings {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.orbit-rings::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: calc(var(--R-outer) * 1.7);
  height: calc(var(--R-outer) * 1.7);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(229, 102, 123, 0.07), transparent 65%);
}
.orbit-rings .ring {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border: 1px solid rgba(113, 56, 65, 0.16);
  border-radius: 50%;
}
.ring--outer {
  width: calc(var(--R-outer) * 2);
  height: calc(var(--R-outer) * 2);
}
.ring--inner {
  width: calc(var(--R-inner) * 2);
  height: calc(var(--R-inner) * 2);
  border-color: rgba(113, 56, 65, 0.12);
}
.bubble {
  position: absolute;
  display: block;
  left: var(--x);
  top: var(--y);
  width: var(--s);
  transform: translate(-50%, -50%)
    translate(calc(var(--px, 0) * var(--depth, 10px)), calc(var(--py, 0) * var(--depth, 10px)));
  transition: transform 0.9s var(--ease);
  will-change: transform;
}
.b-rev {
  display: block;
  opacity: 0;
  transform: translateY(46px) scale(0.9);
  transition: opacity 1s var(--ease), transform 1s var(--ease);
}
.bubble.on .b-rev {
  opacity: 1;
  transform: translateY(0) scale(1);
}
.bubble.on:hover .b-rev {
  transform: translateY(-4px) scale(1.045);
}
.b-face {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  text-align: center;
  width: 100%;
  aspect-ratio: 1;
  border-radius: 50%;
  padding: 1.2rem;
  /* glass: specular highlight + sheet gradient + rose under-glow over blur */
  border: 1px solid rgba(255, 255, 255, 0.7);
  background:
    radial-gradient(circle at 30% 24%, rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0) 40%),
    linear-gradient(150deg, rgba(255, 255, 255, 0.38), rgba(255, 255, 255, 0.06) 55%),
    radial-gradient(circle at 68% 82%, rgba(229, 102, 123, 0.14), rgba(229, 102, 123, 0) 58%),
    rgba(242, 231, 223, 0.5);
  -webkit-backdrop-filter: blur(9px) saturate(1.2);
  backdrop-filter: blur(9px) saturate(1.2);
  box-shadow:
    0 24px 48px rgba(54, 23, 28, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.85),
    inset 0 -22px 34px rgba(229, 102, 123, 0.07);
  animation: bubbleBob 7.5s ease-in-out var(--bd, 0s) infinite alternate;
  transition: border-color 0.5s var(--ease), box-shadow 0.5s var(--ease);
}
.bubble:hover .b-face {
  border-color: rgba(229, 102, 123, 0.55);
  box-shadow:
    0 26px 60px rgba(229, 102, 123, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.85),
    inset 0 -22px 34px rgba(229, 102, 123, 0.1);
}
@keyframes bubbleBob {
  from { transform: translateY(-5px); }
  to { transform: translateY(6px); }
}

/* ---------- Orbital motion (magicui Orbiting-Circles pattern) ----------
   .orb > .o-spin (rotates) > .o-arm (radius offset) > .o-counter (rotates
   back so text stays upright) > .b-rev > .b-face. Outer ring clockwise,
   .orb--rev (inner ring) counter-clockwise. Hover pauses that bubble. */
.orb {
  left: 50%;
  top: 50%;
  z-index: 1;
}
.orb--rev {
  z-index: 2; /* inner ring passes above the outer on crossings */
}
.o-spin,
.o-arm,
.o-counter {
  display: block;
}
/* Both rings orbit the same direction with the SAME period (110s, set inline),
   so the constellation is rigid: the inner bubbles start midway between the
   outer ones (delays -13.75s, -41.25s, -68.75s = 45, 135, 225 degrees against
   the outer ring's 0, 90, 180, 270) and never cross them. With different
   periods (110s vs 96s) the rings crossed and bubbles overlapped by up to 27px. */
.o-spin {
  animation: orbSpin var(--T, 110s) linear infinite;
  animation-delay: var(--od, 0s);
}
.o-arm {
  transform: translateX(var(--R));
}
.o-counter {
  animation: orbSpin var(--T, 110s) linear infinite reverse;
  animation-delay: var(--od, 0s);
}
@keyframes orbSpin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
.orb:hover .o-spin,
.orb:hover .o-counter {
  animation-play-state: paused;
}
.orb .b-face {
  animation: none; /* the orbit is the motion; no bob on top */
}
.orb--rev .bubble__meta {
  display: none; /* inner-ring bubbles stay minimal: label only */
}
.bubble--center {
  left: 50%;
  top: 50%;
  z-index: 3;
}
.bubble--center .bubble__meta {
  font-size: 0.56rem;
  letter-spacing: 0.12em;
  white-space: nowrap;
  max-width: none;
}
.bubble--center .b-face {
  animation: ctaBreathe 9s ease-in-out infinite alternate;
}
@keyframes ctaBreathe {
  from { transform: scale(1); }
  to { transform: scale(1.035); }
}
.bubble__label {
  font-family: var(--serif);
  font-size: clamp(1rem, calc(var(--s) * 0.11), 1.55rem);
  color: var(--plum);
  line-height: 1.12;
}
.bubble__meta {
  font-family: var(--sans);
  font-size: 0.6rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mauve);
  font-weight: 400;
  max-width: 84%;
}
.bubble--cta .b-face {
  background:
    radial-gradient(circle at 30% 25%, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0) 40%),
    radial-gradient(ellipse 80% 70% at 72% 78%, rgba(229, 102, 123, 0.3), transparent 62%),
    var(--plum);
  border-color: rgba(229, 102, 123, 0.35);
}
.bubble--cta .bubble__label {
  color: var(--blush);
}
.bubble--cta .bubble__meta {
  color: var(--rose-soft);
}
/* between 901 and 1080px the rings get close: smaller bubbles keep them clear */
@media (max-width: 1080px) {
  .orb { width: calc(var(--s) * 0.84); }
  .bubble--center { width: 160px; }
}
@media (max-width: 900px) {
  .bubble {
    width: calc(var(--s) * 0.8);
  }
}
/* Mobile keeps the SAME orbital design, scaled down: the plum consult bubble
   at center and all 7 concerns evenly phased on ONE shared ring (two rings
   don't fit a phone), label-only, one unified rotation period so spacing
   never drifts. */
@media (max-width: 760px) {
  #concerns {
    padding: clamp(3rem, 10vw, 4rem) 0;
  }
  .bubble-field {
    height: clamp(430px, 118vw, 500px);
    --R-outer: min(150px, 36vw);
    --R-inner: min(150px, 36vw); /* inner ring joins the outer one */
  }
  .ring--inner {
    display: none;
  }
  .orb {
    width: clamp(86px, 24vw, 102px);
  }
  .orb .bubble__label {
    font-size: 0.76rem;
  }
  .bubble__meta {
    display: none;
  }
  .bubble--center {
    width: clamp(132px, 38vw, 148px);
  }
  .bubble--center .bubble__label {
    font-size: 0.9rem;
  }
  .bubble--center .bubble__meta {
    display: block;
    white-space: normal;
    font-size: 0.48rem;
    letter-spacing: 0.08em;
  }
  /* one ring, one period, seven evenly spaced seats (360/7 = 51.4deg) */
  .o-spin,
  .o-counter {
    animation-duration: 130s;
  }
  .orb:nth-of-type(1) { --a: 0deg; }
  .orb:nth-of-type(1) .o-spin, .orb:nth-of-type(1) .o-counter { animation-delay: 0s; }
  .orb:nth-of-type(2) { --a: 51.4deg; }
  .orb:nth-of-type(2) .o-spin, .orb:nth-of-type(2) .o-counter { animation-delay: -18.6s; }
  .orb:nth-of-type(3) { --a: 102.9deg; }
  .orb:nth-of-type(3) .o-spin, .orb:nth-of-type(3) .o-counter { animation-delay: -37.1s; }
  .orb:nth-of-type(4) { --a: 154.3deg; }
  .orb:nth-of-type(4) .o-spin, .orb:nth-of-type(4) .o-counter { animation-delay: -55.7s; }
  .orb:nth-of-type(5) { --a: 205.7deg; }
  .orb:nth-of-type(5) .o-spin, .orb:nth-of-type(5) .o-counter { animation-delay: -74.3s; }
  .orb:nth-of-type(6) { --a: 257.1deg; }
  .orb:nth-of-type(6) .o-spin, .orb:nth-of-type(6) .o-counter { animation-delay: -92.9s; }
  .orb:nth-of-type(7) { --a: 308.6deg; }
  .orb:nth-of-type(7) .o-spin, .orb:nth-of-type(7) .o-counter { animation-delay: -111.4s; }
}
@media (prefers-reduced-motion: reduce) {
  .b-face,
  .bubble--center .b-face {
    animation: none;
  }
  .b-rev {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  /* freeze each bubble at its designed angle instead of orbiting */
  .o-spin {
    animation: none;
    transform: rotate(var(--a, 0deg));
  }
  .o-counter {
    animation: none;
    transform: rotate(calc(var(--a, 0deg) * -1));
  }
}

/* ---------- Before / after slider ---------- */
.ba-note {
  color: var(--rose);
  font-size: 0.82rem;
}
.ba-slider {
  position: relative;
  width: 100%;
  max-width: 960px;
  margin-inline: auto;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border: 1px solid var(--line);
  --pos: 50%;
  touch-action: none;
  cursor: ew-resize;
}
.ba-before,
.ba-after {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  padding: 1.2rem;
}
.ba-after {
  background: linear-gradient(135deg, #f9e7ea 0%, #f0adba 100%);
}
.ba-before {
  background: linear-gradient(135deg, #d9c3ca 0%, #a1727a 100%);
  clip-path: inset(0 calc(100% - var(--pos)) 0 0);
}
.ba-tag {
  font-family: var(--sans);
  font-size: 0.62rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: #fff;
  background: rgba(54, 23, 28, 0.55);
  padding: 0.45rem 0.9rem;
}
.ba-handle {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--pos);
  width: 2px;
  background: #fff;
  transform: translateX(-1px);
  pointer-events: none;
}
.ba-handle span {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 4px 16px rgba(54, 23, 28, 0.3);
}
.ba-handle span::before {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 16px;
  height: 8px;
  border-left: 2px solid var(--rose);
  border-right: 2px solid var(--rose);
}

/* ---------- WebGL liquid hero background ---------- */
[data-liquid] {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.liquid-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
  z-index: 0;
}
[data-liquid] > .container {
  position: relative;
  z-index: 1;
}
/* NOTE: never override .hero-meta here — it must stay position:absolute
   (pinned to the hero bottom); a blanket relative rule once broke the
   home hero layout by turning it into a centered flex item. */

/* While the liquid shader is running (.liquid-on set by liquid-bg.js), drop
   the baked-in radial rose glows — they double up with the shader's bloom.
   The no-WebGL / reduced-motion fallback keeps the original gradients. */
.hero.liquid-on {
  background: linear-gradient(160deg, #f07d90 0%, #e5667b 55%, #c2415a 100%);
}
.page-hero.liquid-on {
  background: linear-gradient(100deg, rgba(54,23,28,0.34) 0%, rgba(54,23,28,0.30) 38%, transparent 70%), var(--rose);
}

/* ---------- Vertical cut reveal (display headings) ---------- */
[data-cut-reveal] {
  visibility: hidden;
}
[data-cut-reveal] > [data-lang] {
  display: block;
}
.vcr-line {
  display: block;
  overflow: hidden;
  padding: 0.14em 0;
  margin: -0.14em 0;
}
.vcr-inner {
  display: inline-block;
  transform: translateY(122%);
  transition: transform 1s cubic-bezier(0.19, 1, 0.22, 1);
  will-change: transform;
}
[data-cut-reveal].vcr-on .vcr-inner {
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  [data-cut-reveal] {
    visibility: visible !important;
  }
  .vcr-inner {
    transform: none !important;
    transition: none !important;
  }
}

/* ---------- Hub search ("Tell us what you're looking for") ---------- */
.hub-search {
  position: relative;
  margin-top: clamp(1.6rem, 3vw, 2.2rem);
  max-width: 30rem;
}
.hub-search input {
  width: 100%;
  padding: 1.05rem 3.4rem 1.05rem 1.3rem;
  font-family: var(--sans);
  font-size: 0.92rem;
  font-weight: 300;
  color: var(--plum);
  background: rgba(255, 255, 255, 0.65);
  border: 1px solid var(--line);
  outline: none;
  transition: border-color 0.4s var(--ease), background 0.4s var(--ease),
    box-shadow 0.4s var(--ease);
}
.hub-search input::placeholder {
  color: var(--mauve);
}
.hub-search input:focus {
  border-color: var(--rose);
  background: #fff;
  box-shadow: 0 18px 44px rgba(54, 23, 28, 0.08);
}
/* direct child only — the suggest panel's "Ask the concierge" button must
   NOT inherit this absolute positioning (that bug once shoved it out of
   the panel as a 51px sliver) */
.hub-search > button {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 3.2rem;
  border: none;
  background: none;
  color: var(--rose);
  font-size: 1.1rem;
  cursor: pointer;
  transition: transform 0.3s var(--ease);
}
.hub-search > button:hover {
  transform: translateX(3px);
}
.hub-search .search-suggest {
  right: 0;
  min-width: 0;
}
#concerns .hub-cta {
  margin-top: clamp(1.2rem, 2.2vw, 1.6rem);
}

/* ===========================================================
   Ported from Rejuuv Med so both sites share one flow:
     - hero photo gallery (pinned scroll track)
     - stacking "how it works" cards (.visit-steps.stack)
     - concierge chat panel (.hero-chat / .hchat__*)
     - universal treatments explorer (.procedures-universal,
       .cat-*, .pe-*) with the category switcher
   Colours are re-toned for this site's light cream/rose
   palette; surfaces go through --panel / --panel-2 so the same
   rules work against either theme.
   =========================================================== */
/* Featured procedure — full-width hero banner */
.opt--hero {
  grid-column: 1 / -1;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  background:
    radial-gradient(ellipse 90% 60% at 78% 14%, rgba(229, 102, 123, 0.28), transparent 62%),
    var(--plum);
  color: var(--blush);
}
.opt--hero .opt__body {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  max-width: 42rem;
}
.opt--hero .opt__name {
  font-size: clamp(1.9rem, 3vw, 2.7rem);
  color: var(--blush);
}
.opt--hero .opt__eyebrow {
  color: var(--rose-soft);
}
.opt--hero .opt__desc {
  color: rgba(252, 245, 246, 0.72);
  flex-grow: 0;
}
.opt--hero .opt__tags {
  margin-top: 0;
  justify-content: flex-end;
  max-width: 17rem;
}
.opt--hero .opt__tags span {
  background: rgba(252, 245, 246, 0.12);
  color: rgba(252, 245, 246, 0.82);
}
.opt--hero:hover {
  background:
    radial-gradient(ellipse 90% 60% at 78% 14%, rgba(229, 102, 123, 0.34), transparent 60%),
    var(--plum-deep);
  box-shadow: 0 30px 60px rgba(54, 23, 28, 0.28);
}
/* ---------- Service hero: intro + concierge box ---------- */
.ph-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(400px, 1.12fr);
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: center;
  width: 100%;
}
/* Grid items default to min-width:auto, which lets a wide child (the
   estimator's long field labels) blow out the track. */
.ph-grid > * {
  min-width: 0;
}
.ph-book {
  margin-top: clamp(1.6rem, 3vw, 2.4rem);
}
.hero-chat {
  background:
    radial-gradient(120% 120% at 100% 0%, rgba(229, 102, 123, 0.08), transparent 60%),
    rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(113, 56, 65, 0.12);
  border-radius: 20px;
  padding: clamp(1.4rem, 2.5vw, 2rem);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.35);
  display: flex;
  flex-direction: column;
}
.hchat__badge {
  font-family: var(--sans);
  font-size: 0.6rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--rose);
}
.hchat__title {
  font-family: var(--serif);
  font-size: clamp(1.3rem, 2vw, 1.7rem);
  color: var(--plum);
  margin: 0.5rem 0 0.3rem;
}
.hchat__sub {
  color: var(--mauve);
  font-size: 0.9rem;
  font-weight: 300;
  margin: 0 0 1rem;
  line-height: 1.5;
}
.hchat__log {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  min-height: 180px;
  max-height: 380px;
  overflow-y: auto;
  margin-bottom: 1rem;
  padding-right: 0.3rem;
}
.hchat__msg {
  padding: 0.8rem 1.1rem;
  border-radius: 14px;
  font-size: 0.95rem;
  line-height: 1.55;
  max-width: 92%;
}
.hchat__msg--user {
  align-self: flex-end;
  background: var(--rose);
  color: #fff;
  border-bottom-right-radius: 4px;
}
.hchat__msg--bot {
  align-self: flex-start;
  background: rgba(113, 56, 65, 0.07);
  color: var(--plum);
  border-bottom-left-radius: 4px;
}
.hchat__msg.is-typing {
  opacity: 0.55;
  letter-spacing: 0.2em;
}
.hchat__form {
  display: flex;
  gap: 0.6rem;
  align-items: center;
}
.hchat__input {
  flex: 1;
  min-width: 0;
  background: rgba(0, 0, 0, 0.28);
  border: 1px solid rgba(113, 56, 65, 0.16);
  border-radius: 100px;
  padding: 0.85rem 1.2rem;
  color: var(--plum);
  font-family: var(--sans);
  font-size: 0.95rem;
}
.hchat__input::placeholder {
  color: rgba(113, 56, 65, 0.42);
}
.hchat__input:focus {
  outline: none;
  border-color: var(--rose);
}
.hchat__send {
  flex-shrink: 0;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: none;
  background: var(--rose);
  color: #fff;
  font-size: 1.2rem;
  cursor: pointer;
  transition: transform 0.2s var(--ease);
}
.hchat__send:hover {
  transform: scale(1.06);
}
/* concierge box inside the Home "What would you like to improve?" section */
.hub-chat {
  max-width: 34rem;
  margin: 1.6rem 0 0.4rem;
}
/* ---------- Universal procedures (full-screen, category switcher) ---------- */
.procedures-universal {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 5.5rem 0 3rem;
}
.pu-head {
  margin-bottom: clamp(1.5rem, 3vw, 2.4rem);
}
.pu-title {
  margin: 0.3rem 0 1.4rem;
}
.cat-slot {
  display: inline-block;
  overflow: hidden;
  height: 1.25em;          /* room for descenders ("body"): 1em clipped the tail */
  line-height: 1.25;
  vertical-align: bottom;
  color: var(--rose);
  font-style: italic;
}
.cat-slot__reel {
  display: flex;
  flex-direction: column;
  will-change: transform;
}
.cat-slot__item {
  height: 1.25em;
  line-height: 1.25;
  white-space: nowrap;
}
.cat-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.cat-tab {
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 100px;
  padding: 0.55rem 1.2rem;
  font-family: var(--sans);
  font-size: 0.78rem;
  color: rgba(113, 56, 65, 0.66);
  cursor: pointer;
  transition: color 0.3s var(--ease), border-color 0.3s var(--ease), background 0.3s var(--ease);
}
.cat-tab:hover {
  color: var(--plum);
  border-color: rgba(113, 56, 65, 0.3);
}
.cat-tab.is-active {
  background: var(--rose);
  border-color: var(--rose);
  color: #fff;
}
.cat-explorer[hidden] {
  display: none;
}
/* no internal scroll — the collapsed panel fits the screen; overflow uses normal page scroll */
.procedures-universal .pe-grid {
  align-items: start;
}
/* ---------- Procedure explorer (select -> reveal detail) ---------- */
.pe-grid {
  display: grid;
  grid-template-columns: minmax(220px, 300px) 1fr;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: start;
}
.pe-list {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
  position: sticky;
  top: 96px;
}
.pe-item {
  text-align: left;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--line);
  padding: 0.95rem 1.2rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  color: var(--mauve);
  transition: background 0.35s var(--ease), color 0.35s var(--ease);
}
.pe-item:last-child {
  border-bottom: none;
}
.pe-item__name {
  font-family: var(--serif);
  font-size: 1.08rem;
}
.pe-item {
  transition: background 0.35s ease, color 0.35s ease, box-shadow 0.35s ease;
}
.pe-item:hover {
  background: var(--panel);
  color: var(--plum);
}
.pe-item.is-active {
  background: var(--panel-2);
  color: var(--plum);
  box-shadow: inset 3px 0 0 var(--rose);
}
.pe-item__tag {
  font-family: var(--sans);
  font-size: 0.52rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--rose);
  white-space: nowrap;
}
.pe-panel {
  display: none;
}
/* Panel change is a sequenced fade driven from concern.js: the outgoing panel
   eases out over 220ms, then the incoming one eases in over 560ms from a few
   pixels below. Keyframe animations, not transitions: a transition on an
   element that was display:none a moment earlier froze at its start value in
   Chrome, so the panel arrived at opacity 0 and stayed there. Animations on a
   newly displayed element run reliably. */
@keyframes peIn  { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes peOut { from { opacity: 1; transform: translateY(0); }    to { opacity: 0; transform: translateY(-4px); } }
.pe-panel.is-active {
  display: block;
  animation: peIn 0.56s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.pe-panel.is-active.is-leaving {
  animation: peOut 0.22s ease-in both;
}
@media (prefers-reduced-motion: reduce) {
  .pe-panel.is-active, .pe-panel.is-active.is-leaving { animation: none; }
}
.pe-name {
  font-family: var(--serif);
  font-size: clamp(1.9rem, 3.4vw, 2.9rem);
  color: var(--plum);
  margin: 0.4rem 0 1rem;
}
.pe-desc {
  color: var(--mauve);
  font-size: 1.05rem;
  font-weight: 300;
  max-width: 48rem;
  margin-bottom: 1.4rem;
}
.pe-panel .opt__tags {
  margin: 0 0 1.6rem;
}
.pe-faq {
  margin-top: 2rem;
  border-top: 1px solid var(--line);
  padding-top: 1.6rem;
}
.pe-faq__label {
  font-family: var(--sans);
  font-size: 0.64rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--rose);
  margin-bottom: 0.8rem;
}
/* Timeline / good-to-know / areas for the focal treatment. Flat columns, not
   tabs: this sits inside the explorer, which is already tabbed. */
.pe-facts {
  margin-top: 2rem;
  border-top: 1px solid var(--line);
  padding-top: 1.6rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: 1.4rem 2rem;
}
.pe-facts__label {
  font-family: var(--sans);
  font-size: 0.64rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--rose);
  margin-bottom: 0.7rem;
}
.pe-facts ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.pe-facts li {
  font-size: 0.88rem;
  font-weight: 300;
  line-height: 1.5;
  padding: 0.4rem 0;
  border-bottom: 1px solid var(--line);
}
.pe-facts li:last-child {
  border-bottom: 0;
}
.pe-facts .k {
  display: block;
  font-family: var(--sans);
  font-size: 0.66rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--plum);
  opacity: 0.72;
}
.pe-facts .v {
  color: var(--mauve);
}
.pe-note {
  color: rgba(113, 56, 65, 0.5);
  font-size: 0.86rem;
  font-style: italic;
  margin: 1.6rem 0 0;
}
/* Independent references under a procedure. Muted: they support the copy,
   they don't compete with it. */
.pe-source {
  color: rgba(113, 56, 65, 0.45);
  font-size: 0.78rem;
  letter-spacing: 0.02em;
  margin: 1.1rem 0 0;
}
.pe-source a {
  color: var(--rose-soft);
  text-decoration: underline;
  text-underline-offset: 0.2em;
  text-decoration-thickness: 1px;
  transition: color 0.3s var(--ease);
}
.pe-source a:hover {
  color: var(--rose);
}
.pe-cta {
  margin-top: 1.5rem;
}
/* ---------- Your visit — horizontal deal-out stacking cards ---------- */
.visit-steps.stack {
  display: flex;
  gap: clamp(0.9rem, 1.8vw, 1.6rem);
  justify-content: center;
  align-items: stretch;
  max-width: 1080px;
  margin: 0 auto;
  perspective: 1400px;
}
.visit-steps.stack .step {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding: clamp(1.4rem, 2.4vw, 2rem);
  background:
    radial-gradient(130% 150% at 0% 0%, rgba(229, 102, 123, 0.08), transparent 60%),
    linear-gradient(180deg, var(--blush) 0%, var(--blush-deep) 100%);
  border: 1px solid rgba(113, 56, 65, 0.09);
  border-top: 2px solid var(--rose);
  border-radius: 16px;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.3);
  transform-origin: center bottom;
  will-change: transform;
}
.visit-steps.stack .step .num {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(2rem, 3.4vw, 2.7rem);
  line-height: 0.9;
  color: var(--rose);
}
.visit-steps.stack .step h3 {
  font-size: clamp(1.2rem, 1.8vw, 1.55rem);
  margin: 0 0 0.15rem;
}
.visit-steps.stack .step p {
  color: var(--mauve);
  font-weight: 300;
  font-size: 0.94rem;
  margin: 0;
}
.opt--hero {
  background:
    radial-gradient(ellipse 80% 90% at 82% 20%, rgba(229, 102, 123, 0.20), transparent 60%),
    linear-gradient(120deg, var(--blush-deep), var(--sand));
  color: var(--plum);
}
.opt--hero .opt__name { color: var(--plum-deep); }
.opt--hero .opt__eyebrow { color: var(--rose-soft); }
.opt--hero .opt__desc { color: rgba(113, 56, 65, 0.74); }
.opt--hero .opt__tags span { background: rgba(113, 56, 65, 0.12); color: rgba(113, 56, 65, 0.82); }

@media (max-width: 900px) {
  .opt--hero {
    flex-direction: column;
    align-items: flex-start;
  }
  .opt--hero .opt__tags {
    justify-content: flex-start;
    max-width: none;
  }
  .pe-grid {
    grid-template-columns: 1fr;
  }
  .pe-list {
    position: static;
  }
  /* minmax(0,…) not 1fr: a plain 1fr track grows to its widest child's
     min-content, which pushes the hero panel past the container on phones. */
  .ph-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 760px) {
  .visit-steps.stack {
    flex-direction: column;
    max-width: 460px;
  }
  .visit-steps.stack .step {
    transform: none !important;
  }
}

/* ---------- Team showcase (About page) ----------
   Photo mosaic + name list, adapted from 21st.dev "Team Showcase". Three
   columns filled round-robin, each a different tile size and top offset, so
   the wall staggers. Greyscale until hovered; hovering a tile or a name
   highlights the pair and dims the rest. */
.team-section { background: var(--blush-deep); padding: clamp(3.5rem, 6vw, 6rem) 0; }

.team-chips { display: flex; flex-wrap: wrap; gap: 0.55rem; margin-bottom: clamp(1.5rem, 3vw, 2.4rem); }
.team-chip {
  font-family: var(--sans);
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--plum);
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0.5rem 1.05rem;
  cursor: pointer;
  transition: background 0.3s var(--ease), color 0.3s var(--ease), border-color 0.3s var(--ease);
}
.team-chip:hover { border-color: var(--rose); color: var(--rose); }
.team-chip.is-active { background: var(--rose); border-color: var(--rose); color: #fff; }

.tm-showcase {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(2rem, 4vw, 3.5rem);
}
@media (min-width: 900px) { .tm-showcase { flex-direction: row; } }

/* ---- mosaic ---- */
.tm-mosaic { display: flex; gap: 0.75rem; flex-shrink: 0; max-width: 100%; }
.tm-col { display: flex; flex-direction: column; gap: 0.75rem; }
.tm-col--2 { margin-top: 68px; }
.tm-col--3 { margin-top: 32px; }
.tm-tile {
  padding: 0;
  border: 0;
  background: var(--sand);
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
  flex-shrink: 0;
  width: 110px; height: 120px;
  transition: opacity 0.4s var(--ease), transform 0.4s var(--ease);
}
.tm-col--2 .tm-tile { width: 122px; height: 132px; }
.tm-col--3 .tm-tile { width: 115px; height: 125px; }
@media (min-width: 768px) {
  .tm-tile          { width: 155px; height: 165px; }
  .tm-col--2 .tm-tile { width: 172px; height: 182px; }
  .tm-col--3 .tm-tile { width: 162px; height: 172px; }
}
/* <picture> is inline by default, so the img's 100% would resolve against a
   shrink-to-fit box rather than the tile */
.tm-tile picture { display: block; width: 100%; height: 100%; }
.tm-tile img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; display: block; transition: filter 0.5s var(--ease); }
.tm-showcase.is-interactive .tm-tile img { filter: grayscale(1) brightness(0.92); }
.tm-showcase.is-interactive .tm-tile.is-focus img { filter: grayscale(0) brightness(1); }
.tm-showcase.is-interactive.has-focus .tm-tile:not(.is-focus) { opacity: 0.55; }
.tm-tile.is-focus { transform: translateY(-2px); }

/* ---- name list ---- */
/* The list is the wide half of the showcase, so it columnises instead of
   running 18 names down a single narrow strip -- that left the right of the
   page empty and made the section roughly three times taller than it needed
   to be. align-items:start keeps an opened bio from stretching its row-mates. */
.tm-list { display: flex; flex-direction: column; gap: 1.05rem; flex: 1; width: 100%; min-width: 0; }
@media (min-width: 560px) {
  .tm-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
    align-items: start;
    gap: 1.15rem 2rem;
  }
}
.tm-name {
  display: flex;
  align-items: center;
  gap: 0.62rem;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  font-family: var(--serif);
  font-size: 1.02rem;
  line-height: 1.2;
  color: var(--plum);
  text-align: left;
  transition: color 0.3s var(--ease);
}
.tm-row.is-focus .tm-name, .tm-name:hover { color: var(--rose); }
.tm-dot {
  width: 9px; height: 9px;
  border-radius: 50%;
  flex-shrink: 0;
  background: transparent;
  border: 1px solid var(--line);
  transition: background 0.3s var(--ease), border-color 0.3s var(--ease);
}
.tm-row.is-lead .tm-dot { border-color: var(--rose); }
.tm-row.is-focus .tm-dot, .tm-row.is-open .tm-dot { background: var(--rose); border-color: var(--rose); }
.tm-role {
  margin-top: 0.3rem;
  padding-left: 1.32rem;
  font-family: var(--sans);
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--mauve);
}
.tm-showcase.is-interactive.has-focus .tm-row:not(.is-focus) { opacity: 0.5; }
.tm-row { transition: opacity 0.3s var(--ease); }

.tm-detail { padding-left: 1.32rem; margin-top: 0.5rem; }
.tm-showcase.is-interactive .tm-detail {
  max-height: 0;
  overflow: hidden;
  margin-top: 0;
  transition: max-height 0.45s var(--ease), margin-top 0.45s var(--ease);
}
.tm-showcase.is-interactive .tm-row.is-open .tm-detail { margin-top: 0.5rem; }
.tm-bio { font-size: 0.84rem; line-height: 1.65; color: var(--mauve); max-width: 34rem; }
.tm-creds { list-style: none; margin: 0.5rem 0 0; padding: 0; font-size: 0.74rem; line-height: 1.6; color: var(--mauve); }
.tm-creds li { padding-left: 0.85rem; position: relative; }
.tm-creds li::before { content: "\2022"; position: absolute; left: 0; color: var(--rose); }

@media (max-width: 560px) {
  .tm-mosaic { overflow-x: auto; padding-bottom: 0.4rem; }
}

/* ---------- Clinical results (opt-in) ----------
   Deliberately collapsed. Before/after photos must not be shown where the
   public would see them unsolicited, so the visitor opens this themselves. */
.pe-results {
  margin-top: 1.4rem;
  border-top: 1px solid var(--line);
  padding-top: 1.1rem;
}
.pe-results > summary {
  cursor: pointer;
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  font-family: var(--sans);
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--rose);
  transition: color 0.3s var(--ease);
}
.pe-results > summary::-webkit-details-marker { display: none; }
.pe-results > summary::after {
  content: "+";
  font-size: 1rem;
  line-height: 1;
  transition: transform 0.35s var(--ease);
}
.pe-results[open] > summary::after { transform: rotate(45deg); }
.pe-results > summary:hover { color: var(--plum); }
.pe-results__count {
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  color: var(--mauve);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0.1rem 0.5rem;
}
.pe-results__body { padding-top: 1rem; }
.pe-results__note {
  font-size: 0.78rem;
  line-height: 1.6;
  color: var(--mauve);
  margin-bottom: 0.9rem;
}
.pe-results__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 0.8rem;
}
.pe-results__grid img {
  width: 100%;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--panel-2);
}
@media (max-width: 560px) {
  .pe-results__grid { grid-template-columns: 1fr 1fr; }
}

/* ---------- Hero scroll track + unfurling photo gallery ----------
   Ported from Rejuuv Med in source order. The base .hero--track rule is
   load-bearing: it flips the .hero section from flex to block (so the
   sticky pane is full width and the gallery bleeds to the right edge)
   and gives the 205vh scroll runway the unfurl animates along. */
.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(93, 73, 84, 0.10); opacity: 0.92; box-shadow: 0 22px 44px rgba(0, 0, 0, 0.45); }
.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-gallery { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .hg-col { animation: none; }
}
.hero--track { display: block; height: 205vh; min-height: 0; padding: 0; background: none; overflow: visible; }
.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, rgba(54,23,28,0.42) 0%, rgba(54,23,28,0.30) 46%, rgba(54,23,28,0.16) 100%), var(--rose); }
.hero--track .hero-inner { display: block; max-width: none; }
.hero-copy { max-width: 42rem; position: relative; z-index: 2; }
.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; width: 60vw; z-index: 1; pointer-events: none; perspective: 1400px; perspective-origin: 18% 50%; -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; }
.hero-gallery::after { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: linear-gradient(90deg, rgba(81, 36, 44, 0.55) 0%, transparent 22%), linear-gradient(180deg, rgba(81, 36, 44, 0.5) 0%, transparent 15%), linear-gradient(0deg, rgba(81, 36, 44, 0.82) 0%, rgba(81, 36, 44, 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); transition: none; }
/* transition: none above is deliberate: the script animates this transform every frame; a CSS transition on it fights every write. */
.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); }
.hg-col img.hg-xl { height: clamp(480px, 36vw, 680px); }
.hg-mask, .hero-gallery::before { display: none; content: none; }
@media (max-width: 1000px) {
  .hero--track { height: auto; }
  .hero-sticky { height: auto; min-height: 100svh; padding: 8rem 0 5rem; }
  .hero-gallery { display: none; }
}
/* ---------- Clinic video (under the Markham location) ---------- */
/* 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: var(--plum-deep);
}
.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);
}
.loc .clinic-video {
  flex: 1;
  aspect-ratio: auto;
  min-height: 240px;
  margin: clamp(0.9rem, 1.6vw, 1.2rem) 0 0;
  border-radius: 12px;
}
.loc .clinic-video { aspect-ratio: 16 / 9; min-height: 0; }
/* Footer contact is split per location: Markham & North York share a line,
   Yorkville has its own number and mailbox. */
.foot-contact__where {
  font-family: var(--sans);
  font-size: 0.6rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--rose);
  margin-top: 0.7rem;
}
.foot-contact__where:first-child { margin-top: 0; }

/* ============================================================
   Treatment pages (<slug>/index.html)
   These live at the same paths the old WordPress site used, so the
   copy ported from it needs a home that matches the rest of the site.
   ============================================================ */
.tp-hero .lede { max-width: 34rem; }
.tp-hero__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: center;
}
@media (min-width: 900px) { .tp-hero__grid { grid-template-columns: 1.15fr 0.85fr; } }
.tp-hero__media { margin: 0; }
.tp-hero__media picture { display: block; }
.tp-hero__media img {
  width: 100%;
  height: clamp(300px, 46vh, 520px);
  object-fit: cover;
  border-radius: 14px;
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.34);
}
.tp-cta-row { display: flex; flex-wrap: wrap; gap: 0.9rem; margin-top: 1.6rem; }

.tp-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 1.4rem 0 0.4rem; }
/* the hero is dark, so these must be light -- they were plum on plum and
   effectively invisible */
.tp-chip {
  font-family: var(--sans);
  font-size: 0.64rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(252, 245, 246, 0.82);
  border: 1px solid rgba(252, 245, 246, 0.28);
  border-radius: 999px;
  padding: 0.42rem 0.9rem;
  text-decoration: none;
  transition: border-color 0.3s var(--ease), color 0.3s var(--ease), background 0.3s var(--ease);
}
.tp-chip:hover { border-color: var(--rose-soft); color: #fff; background: rgba(229, 102, 123, 0.18); }

/* quick-read strip between hero and body */
.tp-strip { padding: 0; background: var(--blush-deep, var(--panel)); border-bottom: 1px solid var(--line); }
.tp-strip__list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: 0.2rem 2rem;
  margin: 0;
  padding: 1.5rem 0;
}
.tp-strip__list dt {
  font-family: var(--sans); font-size: 0.6rem; letter-spacing: 0.24em;
  text-transform: uppercase; color: var(--rose); margin-bottom: 0.3rem;
}
.tp-strip__list dd { margin: 0; font-size: 0.92rem; font-weight: 300; color: var(--plum); }

/* related treatments: a landing page must not be a dead end */
.tp-related { border-top: 1px solid var(--line); }
.tr-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 1rem 1.6rem; margin-bottom: 1.6rem; }
.tr-head .display-md { flex: 1; min-width: 14rem; }
.tr-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.tr-card {
  background: var(--blush); padding: 1.1rem 1.3rem; text-decoration: none;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  transition: background 0.35s var(--ease);
}
.tr-card:hover { background: #fff; }
.tr-name { font-family: var(--serif); font-size: 1.05rem; color: var(--plum); }
.tr-go { color: var(--rose); opacity: 0; transform: translateX(-6px); transition: opacity 0.3s var(--ease), transform 0.3s var(--ease); }
.tr-card:hover .tr-go { opacity: 1; transform: none; }

.tp-inds { margin: 0.4rem 0 1.5rem; }
.tp-inds__label {
  font-family: var(--sans);
  font-size: 0.62rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--rose);
  margin-bottom: 0.5rem;
}
.tp-inds ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.4rem 1.5rem; }
.tp-inds li { font-size: 0.9rem; font-weight: 300; color: var(--mauve); position: relative; padding-left: 0.85rem; }
.tp-inds li::before { content: "\2022"; position: absolute; left: 0; color: var(--rose); }

/* Section spacing baseline; the rail-and-content grid itself lives in the
   wide-layout block at the end of this file, so one system owns it. */
.tp-block { margin-bottom: 0; padding: 1.5rem 0; }
.tp-block + .tp-block { border-top: 1px solid var(--line); }
.tp-h2 {
  font-family: var(--serif);
  font-size: clamp(1.1rem, 1.5vw, 1.32rem);
  line-height: 1.25;
  color: var(--plum);
  margin-bottom: 0.6rem;
  text-transform: none;
}
.tp-block p {
  font-size: 0.94rem; font-weight: 300; line-height: 1.65;
  color: var(--mauve); margin-bottom: 0.7rem; max-width: 40rem;
}
.tp-block p:last-child { margin-bottom: 0; }
.tp-list { list-style: none; margin: 0.1rem 0 0.4rem; padding: 0; max-width: 40rem; }
.tp-list li {
  font-size: 0.9rem; font-weight: 300; line-height: 1.55; color: var(--mauve);
  padding: 0.24rem 0 0.24rem 0.95rem; position: relative;
}
.tp-list li::before { content: "\2022"; position: absolute; left: 0; top: 0.24rem; color: var(--rose); }

/* Before/after. Shown inline rather than behind a gate: a clinic's own website
   is where a prospective patient seeks these out. The statement below the grid
   is required to accompany them. */
.ba-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 1rem;
  margin-bottom: 0.9rem;
}
.ba-item { margin: 0; border-radius: 12px; overflow: hidden; background: var(--sand); }
.ba-item picture { display: block; }
.ba-item img { width: 100%; height: auto; display: block; }
.ba-note {
  font-size: 0.78rem;
  font-style: italic;
  color: rgba(113, 56, 65, 0.62);
  margin: 0;
}

/* Treatment fact card: Areas We Treat / Your Timeline / Good To Know.
   Three columns of key-over-value rows, laid out to match the card the client
   approved in the content review. On a treatment that is used for more than one
   concern with different targets (Botox, dermal filler) there is one card per
   concern, headed by .tf-for. */
.tf-card {
  background: var(--blush);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: clamp(1.1rem, 2.2vw, 1.6rem);
  margin-bottom: 1rem;
}
.tf-card + .tf-card { margin-top: 0.2rem; }
.tf-for {
  font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--rose); margin: 0 0 0.5rem;
}
.tf-lede {
  font-size: 0.94rem; font-weight: 300; line-height: 1.65;
  color: var(--plum); margin: 0 0 0.8rem; max-width: 44rem;
}
.tf-tags { list-style: none; display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0 0 1.1rem; padding: 0; }
.tf-tag {
  font-size: 0.68rem; letter-spacing: 0.11em; text-transform: uppercase;
  color: var(--plum-brand); background: var(--blush-deep);
  border-radius: 999px; padding: 0.36rem 0.75rem;
}
.tf-cols { display: grid; grid-template-columns: 1fr; gap: 1.4rem; }
@media (min-width: 760px) {
  /* auto-fit rather than a fixed 3: injectables add an "At a Glance" panel and
     IV therapy a "Common Ingredients" one, so a card can carry four. */
  .tf-cols { grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: 1.6rem 2rem; }
}
.tf-col__label {
  font-size: 0.68rem; letter-spacing: 0.13em; text-transform: uppercase;
  color: var(--rose); margin: 0 0 0.55rem;
}
.tf-rows { margin: 0; }
.tf-rows > div { padding: 0.5rem 0; border-top: 1px solid var(--line); }
.tf-rows > div:first-child { border-top: 0; padding-top: 0; }
.tf-rows dt {
  font-size: 0.66rem; letter-spacing: 0.11em; text-transform: uppercase;
  color: var(--mauve); margin-bottom: 0.16rem;
}
.tf-rows dd { margin: 0; font-size: 0.88rem; font-weight: 300; line-height: 1.5; color: var(--plum); }

  content: counter(tfs); position: absolute; left: 0; top: 0;
  width: 1.5rem; height: 1.5rem; border-radius: 50%;
  background: var(--blush-deep); color: var(--plum-brand);
  font-size: 0.72rem; display: grid; place-items: center;
}

/* Treatment category index (services/injectables|face|skin|body-health.html) */
.tc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.tc-card { background: var(--blush); padding: clamp(1.5rem, 2.6vw, 2.1rem); display: flex; flex-direction: column; gap: 0.6rem; text-decoration: none; transition: background 0.45s var(--ease), box-shadow 0.45s var(--ease); }
.tc-card:hover { background: #fff; box-shadow: 0 20px 48px rgba(54, 23, 28, 0.10); z-index: 1; }
.tc-name { font-family: var(--serif); font-size: clamp(1.15rem, 1.8vw, 1.45rem); color: var(--plum); }
.tc-desc { font-size: 0.88rem; font-weight: 300; line-height: 1.6; color: var(--mauve); flex-grow: 1; }
.tc-inds { list-style: none; margin: 0.2rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.3rem 0.9rem; }
.tc-inds li { font-size: 0.74rem; color: var(--mauve); opacity: 0.85; position: relative; padding-left: 0.7rem; }
.tc-inds li::before { content: "\2022"; position: absolute; left: 0; color: var(--rose); }
.tc-go { font-family: var(--sans); font-size: 0.62rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--rose); margin-top: 0.5rem; }

/* The treatment name doubles as the route to its own page (preserved URL). */
.pe-name__link { color: inherit; text-decoration: none; display: inline-flex; align-items: baseline; gap: 0.5rem; }
.pe-name__link:hover { color: var(--rose); }
.pe-name__go { font-size: 0.6em; opacity: 0; transform: translateX(-6px); transition: opacity 0.3s var(--ease), transform 0.3s var(--ease); }
.pe-name__link:hover .pe-name__go { opacity: 1; transform: none; }

/* .pe-item is an anchor now (it navigates to the treatment's own URL). Keep the
   flex layout the button had; only the link defaults need resetting. */
a.pe-item { text-decoration: none; width: 100%; }

/* ---------- Progressive disclosure on treatment pages ----------
   A ported treatment page carries ~1,000 words. Shown as one column it is an
   endless scroll and none of it gets read. Intro stays open; the reference
   material collapses behind scannable headings. */
.tp-disclose { margin-top: 2.2rem; }
.dx-label {
  font-family: var(--sans);
  font-size: 0.62rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--rose);
  margin-bottom: 0.9rem;
}
.dx-list { border-top: 1px solid var(--line); }
.dx-item { border-bottom: 1px solid var(--line); }
.dx-item > summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.2rem;
  padding: 1.05rem 0;
  transition: color 0.3s var(--ease);
}
.dx-item > summary::-webkit-details-marker { display: none; }
.dx-q {
  font-family: var(--serif);
  font-size: 1.05rem;
  line-height: 1.3;
  color: var(--plum);
}
.dx-item > summary:hover .dx-q { color: var(--rose); }
.dx-ico {
  flex-shrink: 0;
  width: 1.6rem; height: 1.6rem;
  border-radius: 50%;
  border: 1px solid var(--line);
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--sans); font-size: 0.95rem; line-height: 1;
  color: var(--rose);
  transition: transform 0.35s var(--ease), background 0.3s var(--ease), border-color 0.3s var(--ease);
}
.dx-item[open] .dx-ico { transform: rotate(45deg); background: var(--rose); color: #fff; border-color: var(--rose); }
.dx-a { padding: 0 0 1.2rem; max-width: 44rem; }
.dx-a p { font-size: 0.92rem; font-weight: 300; line-height: 1.65; color: var(--mauve); margin-bottom: 0.6rem; }
.dx-a p:last-child, .dx-a ul:last-child { margin-bottom: 0; }
.dx-a .tp-list { margin: 0.2rem 0 0.5rem; }

/* (The prose-only override and the centred 48rem column that used to live here
   are superseded by the wide editorial layout at the end of this file.) */

/* The indications list sits in the DARK hero, so it needs light ink and room to
   breathe; it was colliding with the chips above it and running off the edge. */
.tp-hero .tp-inds { margin: 1.5rem 0 0.4rem; max-width: 46rem; }
.tp-hero .tp-inds__label { color: #fff; margin-bottom: 0.55rem; }
.tp-hero .tp-inds ul { gap: 0.45rem 1.4rem; }
.tp-hero .tp-inds li { color: rgba(255, 255, 255, 0.92); font-size: 0.88rem; }
.tp-hero .tp-inds li::before { color: #fff; }
.tp-hero .tp-chips { margin-bottom: 0; }
.tp-hero .tp-cta-row { margin-top: 2rem; }

.tp-body > section:first-child { padding-top: 0; }
#about { padding-top: clamp(2.4rem, 4vw, 3.4rem); padding-bottom: clamp(2.4rem, 4vw, 3.4rem); }
.tp-disclose { margin-top: 1.6rem; }
.tp-disclose + .tp-disclose { margin-top: 2rem; }

/* .tp-disclose is a <section>, so the global section padding was adding ~90px
   above and below each list. Reset it; the margins above do the spacing. */
.tp-disclose { padding: 0; }

/* ---------- Detail as pill tabs, not a stack of accordions ---------- */
.tp-detail { padding: 0; margin-top: 1.8rem; }
.dt-tabs {
  position: relative;
  display: flex;
  /* Never wrap. The sliding indicator is positioned on one axis, so a second
     row put it under the wrong pill; overflow scrolls instead. */
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  gap: 0.4rem;
  padding: 0.35rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--panel);
  margin-bottom: 1.6rem;
}
/* the pill that slides under the active tab */
.dt-ind {
  position: absolute;
  top: 0.35rem;
  left: 0;
  height: calc(100% - 0.7rem);
  border-radius: 999px;
  background: var(--rose);
  box-shadow: 0 8px 20px rgba(229, 102, 123, 0.28);
  transition: transform 0.45s var(--ease), width 0.45s var(--ease);
  pointer-events: none;
  width: 0;
}
.dt-tabs::-webkit-scrollbar { display: none; }
.dt-tab {
  position: relative;
  z-index: 1;
  background: none;
  border: 0;
  cursor: pointer;
  font-family: var(--sans);
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mauve);
  padding: 0.62rem 1.15rem;
  border-radius: 999px;
  transition: color 0.35s var(--ease);
  white-space: nowrap;
}
.dt-tab:hover { color: var(--plum); }
.dt-tab.is-active { color: #fff; }
.dt-panes { position: relative; }
.dt-pane { display: none; }
.dt-pane.is-active { display: block; animation: peIn 0.45s var(--ease); }
.dt-h {
  font-family: var(--serif);
  font-size: clamp(1.1rem, 1.6vw, 1.35rem);
  color: var(--plum);
  margin-bottom: 0.7rem;
  text-transform: none;
}
.dt-pane p { font-size: 0.94rem; font-weight: 300; line-height: 1.68; color: var(--mauve); margin-bottom: 0.7rem; }
.dt-pane .tp-list { margin: 0.2rem 0 0.6rem; }

/* ---------- FAQ (FaqPro pattern, ported to vanilla) ----------
   Separate rounded cards with gaps rather than a bordered list, a rotating
   chevron, one row open at a time, and a search field that filters and
   highlights. */
.tp-faq { padding: 0; margin-top: 2.2rem; }
.fp-search { position: relative; margin-bottom: 0.9rem; }
.fp-input {
  width: 100%;
  height: 3rem;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--panel);
  padding: 0 2.8rem 0 1.4rem;
  font-family: var(--sans);
  font-size: 0.94rem;
  font-weight: 300;
  color: var(--plum);
  appearance: none;
  outline: none;
  transition: border-color 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.fp-input::placeholder { color: var(--mauve); opacity: 0.75; }
.fp-input:focus { border-color: var(--rose); box-shadow: 0 0 0 3px rgba(229, 102, 123, 0.12); }
.fp-input::-webkit-search-cancel-button,
.fp-input::-webkit-search-decoration { appearance: none; }
.fp-clear {
  position: absolute; top: 50%; right: 0.7rem; transform: translateY(-50%);
  width: 1.85rem; height: 1.85rem; border: 0; border-radius: 50%;
  background: transparent; color: var(--mauve); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background 0.25s var(--ease), color 0.25s var(--ease);
}
.fp-clear svg { width: 0.95rem; height: 0.95rem; }
.fp-clear:hover { background: var(--blush-deep); color: var(--plum); }

.fp-list { display: flex; flex-direction: column; gap: 0.6rem; }
.fp-row {
  border-radius: 16px;
  background: var(--panel);
  border: 1px solid var(--line);
  overflow: hidden;
  transition: background 0.3s var(--ease), border-color 0.3s var(--ease);
}
.fp-row.is-open { background: #fff; border-color: rgba(229, 102, 123, 0.34); }
.fp-q {
  width: 100%;
  display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem;
  background: none; border: 0; cursor: pointer;
  padding: 1.05rem 1.3rem;
  text-align: left;
  font-family: var(--serif);
  font-size: 1.02rem;
  line-height: 1.4;
  color: var(--plum);
  transition: color 0.3s var(--ease);
}
.fp-q:hover { color: var(--rose); }
.fp-chev {
  width: 1.05rem; height: 1.05rem; flex-shrink: 0; margin-top: 0.2rem;
  color: var(--rose);
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
.fp-row.is-open .fp-chev { transform: rotate(180deg); }
.fp-a { max-height: 0; overflow: hidden; transition: max-height 0.45s cubic-bezier(0.16, 1, 0.3, 1); }
.fp-a__in { padding: 0 1.3rem 1.25rem; }
.fp-a p { font-size: 0.92rem; font-weight: 300; line-height: 1.68; color: var(--mauve); margin-bottom: 0.6rem; }
.fp-a p:last-child, .fp-a ul:last-child { margin-bottom: 0; }
.fp-a .tp-list { margin: 0.2rem 0 0.4rem; }
.fp-row[hidden] { display: none; }
.fp-empty { text-align: center; padding: 2rem 0; font-size: 0.9rem; color: var(--mauve); }
/* search match highlight */
.fp-mark { background: rgba(229, 102, 123, 0.22); border-radius: 3px; padding: 0 0.12em; color: var(--plum); }

/* Concern-page panels move onto the pink scale too. */
.opt--tall,
.opt--hero,
.sp-panel {
  background:
    radial-gradient(ellipse 90% 60% at 76% 12%, rgba(255, 255, 255, 0.16), transparent 60%),
    var(--brand-deep);
  color: #fff;
}
.opt--tall:hover,
.opt--hero:hover {
  background:
    radial-gradient(ellipse 90% 60% at 76% 12%, rgba(255, 255, 255, 0.22), transparent 58%),
    var(--brand-deep);
}
.opt--tall .opt__name,
.opt--hero .opt__name { color: #fff; }
.opt--tall .opt__eyebrow,
.opt--hero .opt__eyebrow { color: rgba(255, 255, 255, 0.9); }
.opt--tall .opt__desc,
.opt--hero .opt__desc { color: rgba(255, 255, 255, 0.85); }
.opt--tall .opt__tags span,
.opt--hero .opt__tags span { background: rgba(255, 255, 255, 0.18); color: #fff; }
.sp-tab { color: rgba(255, 255, 255, 0.68); }
.sp-tab:hover, .sp-tab.is-active { color: #fff; }
.sp-tab.is-active { border-bottom-color: #fff; }
.sp-pane li { color: rgba(255, 255, 255, 0.9); }
.sp-pane li .k { color: #fff; }
.clinic-video { background: var(--brand-deepest); }

/* Route back to the concern this treatment belongs to, landing on the
   treatment itself inside the explorer rather than the top of the page. */
.tp-back { padding: 0 0 clamp(2.4rem, 4vw, 3.4rem); }
.tp-back__link {
  display: inline-flex;
  align-items: center;
  gap: 0.9rem;
  padding: 0.95rem 1.5rem 0.95rem 1.2rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--panel);
  text-decoration: none;
  transition: border-color 0.3s var(--ease), background 0.3s var(--ease), transform 0.3s var(--ease);
}
.tp-back__link:hover { border-color: var(--rose); background: #fff; transform: translateX(-3px); }
.tp-back__arrow {
  width: 1.9rem; height: 1.9rem; flex-shrink: 0;
  border-radius: 50%; background: var(--blush-deep); color: var(--rose);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 0.95rem; line-height: 1;
  transition: background 0.3s var(--ease), color 0.3s var(--ease);
}
.tp-back__link:hover .tp-back__arrow { background: var(--rose); color: #fff; }
.tp-back__label {
  display: block;
  font-family: var(--sans);
  font-size: 0.58rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--rose);
  margin-bottom: 0.16rem;
}
.tp-back__name { display: block; font-family: var(--serif); font-size: 1rem; color: var(--plum); }

/* The explorers share a wrapper whose height is animated on category change,
   so switching neither jumps the page nor leaves dead space under the shorter
   categories. */
.cat-stage {
  position: relative;
  overflow: hidden;
  transition: height 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
/* the universal section no longer needs to reserve a screen of height */
.procedures-universal { min-height: 0; }
/* the explorer already ends with generous padding; do not stack another
   full section's worth before "How it works" */
.procedures-universal + section { padding-top: clamp(1.6rem, 3vw, 2.6rem); }

/* =========================================================================
   Wide editorial layout for treatment pages (2026-08).
   The previous pass centred a 48rem prose column, which left roughly half of
   a desktop window empty. Now the header, hero, facts strip, body and footer
   share one wide measure; on desktop every body section is a left rail
   (sticky serif title) with its content beside it. Text keeps a readable
   measure while the wide components -- review card, steps, FAQ rows,
   photos -- fill the column. */
body:has(.tp-hero) .site-header .container,
body:has(.tp-hero) .site-footer .container,
.tp-hero .container,
.tp-strip .container,
.tp-back .container,
.container.tp-body { width: min(1680px, 94vw); }

.tp-hero .lede { max-width: 52rem; }
.tp-body { max-width: none; margin-inline: auto; }

/* One spacing rhythm for every section, whatever component it holds. */
.tp-body > section { padding: clamp(2.1rem, 3.2vw, 3.1rem) 0; margin: 0; }
.tp-body > section + section { border-top: 1px solid var(--line); }
.tp-body > section:first-child { padding-top: 0; }
.tp-body > section:last-child { padding-bottom: 0; }

/* Section titles: the FAQ / In-detail labels get the same serif treatment as
   the block headings, so every rail reads as one family. */
.tp-body .tp-h2,
.tp-body .dx-label {
  font-family: var(--serif);
  font-size: clamp(1.3rem, 1.7vw, 1.62rem);
  line-height: 1.25;
  letter-spacing: 0;
  text-transform: none;
  color: var(--plum);
  margin: 0 0 1rem;
}
.tp-body .tp-h2::before,
.tp-body .dx-label::before {
  content: "";
  display: block;
  width: 2.2rem;
  height: 2px;
  background: var(--rose);
  margin-bottom: 0.9rem;
}

/* Readable measures inside the wide column. */
.tp-body .tp-block p { max-width: 66ch; font-size: 1rem; line-height: 1.7; }
.tp-body .tp-list { max-width: 72ch; }
.tp-body .dt-pane p { max-width: 70ch; font-size: 0.98rem; }
.tp-body .fp-a p { max-width: 72ch; font-size: 0.95rem; }

/* Desktop: rail + content. */
@media (min-width: 1020px) {
  .tp-body > section {
    display: grid;
    grid-template-columns: minmax(14rem, 18rem) minmax(0, 1fr);
    gap: 0 clamp(2.5rem, 4.5vw, 5.5rem);
    align-items: start;
  }
  .tp-body > section > .tp-h2,
  .tp-body > section > .dx-label {
    grid-column: 1;
    position: sticky;
    top: 6.5rem;
    margin-bottom: 0;
  }
  .tp-body > section > :not(.tp-h2):not(.dx-label) { grid-column: 2; }
}

/* The review card breathes in the wider column. */
.tf-card { padding: clamp(1.2rem, 2.4vw, 2.1rem); }
.tf-lede { max-width: 62ch; font-size: 1.02rem; }
@media (min-width: 760px) {
  .tf-cols { gap: 0 clamp(2rem, 3.6vw, 4rem); }
}

/* How-it-works reads as one horizontal band of three numbered steps. */
@media (min-width: 900px) {
    max-width: none;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0 clamp(1.6rem, 3vw, 3rem);
  }
}

/* Before/after photos: big tiles, no colour slab behind a short image. */
.tp-body .ba-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(21rem, 100%), 1fr));
  gap: 1.1rem;
  align-items: start;
}
.tp-body .ba-item { max-width: 44rem; }

/* A panel row with no value is a sub-heading ("Treatment Options"), not a
   label missing its value. */
.tf-rows > div.tf-sub { padding-bottom: 0.15rem; }
.tf-rows > div.tf-sub dt {
  font-size: 0.72rem; letter-spacing: 0.08em; color: var(--plum-brand);
  text-transform: none; font-weight: 500; margin-bottom: 0;
}

/* Hero gallery first paint. The markup is now server-rendered, so the panel
   exists before the script runs; it stays hidden until the first photo of each
   column has decoded, then fades in as one piece instead of filling in image by
   image. Fallback: if the script never runs, the :not() rule keeps it visible. */
/* The fade must NOT sit on .hg-stage: that element is preserve-3d, and
   opacity < 1 is a grouping property that forces it flat for the duration of
   the fade, then snaps the scene back into perspective at opacity 1 (measured:
   31.6% of gallery pixels moved between opacity 1 and 0.99). The host is the
   perspective root and outside the 3D context, so fading it is safe. */
.hero-gallery[data-hero-gallery] { opacity: 0; transition: opacity 0.55s ease; }
.hero-gallery[data-hero-gallery].is-ready { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .hero-gallery[data-hero-gallery] { opacity: 1; transition: none; }
}

/* Ads landing page: booking form appended to the treatment page */
.landing-book .booking-form { margin-top: 1.5rem; max-width: 720px; }


/* phones: the orbit field must not widen the page (it pushed 375px screens to 381px) */
@media (max-width: 880px) {
  #concerns { overflow-x: clip; }
}
/* phones: a fade at the right edge says the tab strip scrolls */
@media (max-width: 720px) {
  .dt-tabs.has-more { -webkit-mask-image: linear-gradient(90deg, #000 82%, transparent); mask-image: linear-gradient(90deg, #000 82%, transparent); }
}

/* the last pane's margin stays inside the box, so the height animation does not snap at its ends */
.dt-panes { display: flow-root; }

/* FAQ questions are headings; the button keeps its own type */
.fp-q__h { margin: 0; font: inherit; }