@font-face {
  font-family: "DM Sans";
  src: url("assets/dm-sans.woff2") format("woff2");
  font-weight: 400 700;
  font-display: swap;
}

@font-face {
  font-family: "Instrument Serif";
  src: url("assets/instrument-serif.woff2") format("woff2");
  font-display: swap;
}

@font-face {
  font-family: "Instrument Serif";
  src: url("assets/instrument-serif-italic.woff2") format("woff2");
  font-style: italic;
  font-display: swap;
}

:root {
  color-scheme: light;
  --paper: #f9f4ef;
  --cream: #fffcf8;
  --blush: #f4e4e8;
  --rose: #edc4d2;
  --plum: #392533;
  --night: #251922;
  --berry: #79465a;
  --muted: #63535c;
  --line: #dacbd0;
  --display: "Instrument Serif", Georgia, serif;
  --gutter: clamp(1.35rem, 5.6vw, 6.5rem);
  --shell: 81rem;
}

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--plum);
  font: 400 1rem/1.6 "DM Sans", system-ui, sans-serif;
}

h1, h2, h3, h4, p, dl, dd, figure { margin: 0; }
h1, h2, p { text-wrap: pretty; }
h1, h2 { font-family: var(--display); font-weight: 400; }
h2 { font-size: clamp(3.25rem, 5.3vw, 5.7rem); letter-spacing: -.025em; line-height: .99; }
h1 em, h2 em { color: var(--berry); }
h3 { font-size: 1.06rem; line-height: 1.35; font-weight: 700; }
a { color: inherit; text-underline-offset: .24em; }
img { display: block; max-inline-size: 100%; block-size: auto; }
:focus-visible { outline: 2px solid currentColor; outline-offset: .25rem; }
section[id] { scroll-margin-top: 1.2rem; }

.skip-link {
  position: absolute;
  z-index: 2;
  inset: .7rem auto auto .7rem;
  padding: .7rem 1rem;
  background: var(--cream);
  transform: translateY(-160%);
}
.skip-link:focus { transform: none; }

.shell {
  inline-size: min(var(--shell), calc(100% - 2 * var(--gutter)));
  margin-inline: auto;
}

.site-header {
  background: var(--night);
  color: var(--cream);
  border-block-end: 1px solid #ffffff26;
}

.header-inner {
  min-block-size: 5.15rem;
  inline-size: min(var(--shell), calc(100% - 2 * var(--gutter)));
  margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(max-content, 1fr);
  align-items: center;
  gap: 1.5rem;
}

.brand { display: block; justify-self: start; max-inline-size: 100%; padding-block: .45rem; }

.brand img {
  inline-size: 10.75rem;
}

.main-nav { display: flex; gap: clamp(1.25rem, 3vw, 3.2rem); }
.main-nav a {
  display: inline-flex;
  align-items: center;
  min-block-size: 2.75rem;
  color: #f0dfe5;
  text-decoration: none;
  font-size: .88rem;
  font-weight: 600;
}

.main-nav a:hover, .footer-links a:hover, address a:hover { text-decoration: underline; }

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .75rem;
  min-block-size: 3.2rem;
  max-inline-size: 100%;
  padding: .73rem 1.18rem;
  border: 1px solid currentColor;
  border-radius: 999px;
  text-decoration: none;
  font-size: .88rem;
  line-height: 1.25;
  font-weight: 700;
}

.button span, .text-link span { flex: none; }
.button:hover { background: var(--blush); }
.primary-action { background: var(--plum); color: var(--cream); border-color: var(--plum); }
.primary-action:hover { background: var(--berry); border-color: var(--berry); }
.primary-action:focus-visible { outline-color: var(--plum); }
.header-cta { justify-self: end; white-space: nowrap; }
.header-cta:hover { background: #ffffff18; }

.text-link {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  min-block-size: 2.75rem;
  font-size: .89rem;
  font-weight: 650;
  text-decoration-thickness: 1px;
}

.text-link:hover { text-decoration-thickness: 2px; }

.eyebrow {
  display: flex;
  align-items: center;
  gap: .75rem;
  color: var(--berry);
  font-size: .72rem;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: .15em;
  text-transform: uppercase;
}

.rule { flex: 0 0 1.55rem; block-size: 1px; background: currentColor; }

.hero {
  isolation: isolate;
  position: relative;
  display: grid;
  align-items: center;
  min-block-size: clamp(36rem, 48vw, 52rem);
  overflow: hidden;
  color: var(--cream);
  background: var(--night);
}

.hero-content {
  z-index: 1;
  padding-block: clamp(3rem, 5.8vw, 6.8rem);
}

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

.hero h1 {
  margin-block: .95rem 1.4rem;
  font-size: clamp(4.75rem, 8.45vw, 9.2rem);
  line-height: .88;
  letter-spacing: -.036em;
}

.hero h1 em { display: inline-block; color: var(--rose); font-size: .86em; }
.hero-description { max-inline-size: 24rem; color: #f0dfe5; font-size: clamp(1rem, 1.4vw, 1.18rem); }

.hero-actions, .booking-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 1.25rem;
  row-gap: .35rem;
  margin-block-start: 1.4rem;
}

.hero .primary-action {
  background: var(--rose);
  color: var(--night);
  border-color: var(--rose);
}

.hero .primary-action:hover { background: var(--cream); border-color: var(--cream); }
.hero .primary-action:focus-visible { outline-color: var(--cream); }

.device-notice {
  max-inline-size: 28rem;
  margin-block-start: 1.25rem;
  color: #e4cdd7;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .058em;
  line-height: 1.5;
  text-transform: uppercase;
}

.hero-photo {
  position: absolute;
  inset: 0;
  background: var(--night);
  pointer-events: none;
}

.hero-photo img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  object-position: 50% 39%;
}

.hero-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, #251922 0%, #251922f5 19%, #251922c9 36%, #25192248 52%, transparent 67%),
    linear-gradient(0deg, #25192284, transparent 21%);
}

.hero-photo figcaption {
  position: absolute;
  z-index: 1;
  inset: auto 1rem .8rem auto;
  padding: .28rem .58rem;
  border-radius: 3px;
  color: var(--cream);
  background: #251922b8;
  font-size: .69rem;
  line-height: 1.4;
}

.facts {
  color: var(--plum);
  background: var(--rose);
}
.facts-inner { display: grid; grid-template-columns: 1.18fr 1fr .83fr; padding-block: 1.28rem; }
.facts-inner div + div { padding-inline-start: clamp(1rem, 4vw, 3rem); border-inline-start: 1px solid #39253340; }
.facts dt { color: #63394a; font-size: .68rem; text-transform: uppercase; font-weight: 700; letter-spacing: .15em; }
.facts dd { margin-block-start: .14rem; font-family: var(--display); font-size: clamp(1.38rem, 2.45vw, 2.6rem); line-height: 1.08; }

.section { padding-block: clamp(4rem, 8vw, 8rem); }
.section .eyebrow, .booking .eyebrow { margin-block-end: 1rem; }
.section h2 + p, .booking h2 + p { margin-block-start: 1.35rem; }
.section p:not(.eyebrow) { color: var(--muted); }
.section p + p { margin-block-start: .86rem; }

.visually-hidden {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.section-intro { max-inline-size: 63rem; margin-block-end: clamp(1.45rem, 3vw, 2.7rem); }
.section-intro p:not(.eyebrow) { max-inline-size: 42rem; }

.comparison { background: var(--cream); }
.comparison-table {
  inline-size: 100%;
  table-layout: fixed;
  border-spacing: 0;
  border: 1px solid var(--line);
  border-radius: 1.1rem;
  overflow: hidden;
  background: var(--cream);
  text-align: start;
}

.comparison-table thead th {
  padding: clamp(.75rem, 2.5vw, 1.85rem) clamp(.68rem, 3vw, 2.65rem);
  color: var(--cream);
  background: var(--plum);
  font: 400 clamp(1.55rem, 3.6vw, 3.5rem)/1 var(--display);
  text-align: start;
  vertical-align: top;
}

.comparison-table thead th + th { background: #eadbe1; color: var(--plum); }
.comparison-table thead span {
  display: block;
  margin-block-start: .4rem;
  font: 600 clamp(.73rem, 1.1vw, .9rem)/1.35 "DM Sans", system-ui, sans-serif;
  color: #f5dfe8;
}

.comparison-table thead th + th span { color: var(--muted); }

.comparison-label th {
  padding: .6rem clamp(.68rem, 3vw, 2.65rem) .12rem;
  border-block-start: 1px solid var(--line);
  color: var(--berry);
  background: #fbf5f2;
  text-align: start;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.comparison-table td {
  padding: .58rem clamp(.68rem, 3vw, 2.65rem) .94rem;
  vertical-align: top;
  color: var(--muted);
  font-size: clamp(.88rem, 1.3vw, 1rem);
  line-height: 1.5;
}

.comparison-table td + td, .comparison-table thead th + th { border-inline-start: 1px solid var(--line); }
.comparison-note { margin-block-start: .9rem; font-size: .84rem; }
.comparison-note a:hover { color: var(--berry); }

.results { background: #f5e7ea; }
.results .section-intro {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  column-gap: clamp(1.5rem, 6vw, 6rem);
  align-items: end;
  max-inline-size: none;
}
.results .eyebrow { grid-column: 1 / -1; }
.results .section-intro h2 { font-size: clamp(3.6rem, 6.4vw, 6.4rem); }
.results .section-intro p:not(.eyebrow) { max-inline-size: 24rem; padding-block-end: .2rem; }
.results-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.3rem clamp(.8rem, 2.25vw, 2.25rem); }
.results-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .25rem;
  overflow: hidden;
  border: 1px solid #d6c3ca;
  border-radius: 1rem;
  background: #e1ced6;
}
.results-pair img { inline-size: 100%; }
.results-pair span {
  display: block;
  padding: .75rem .42rem;
  background: var(--cream);
  font-size: clamp(.69rem, 1vw, .83rem);
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  text-align: center;
}
.results-more { margin-block-start: .6rem; }
.consultation-band {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 1rem 2rem;
  margin-block-start: clamp(1.5rem, 3vw, 2.4rem);
  padding: clamp(1.25rem, 2.7vw, 2.3rem);
  color: var(--cream);
  background: var(--plum);
  border-radius: .7rem 3rem .7rem .7rem;
}
.consultation-band h3 { font: 400 clamp(1.85rem, 3.25vw, 2.95rem)/1.04 var(--display); }
.results .consultation-band p { margin-block-start: .48rem; color: #f0dfe5; }
.consultation-band .primary-action { background: var(--rose); color: var(--night); border-color: var(--rose); }
.consultation-band .primary-action:hover { background: var(--cream); border-color: var(--cream); }
.consultation-band .primary-action:focus-visible { outline-color: var(--cream); }

.treatment { background: var(--cream); }

.treatment-stage {
  position: relative;
  overflow: hidden;
  background: radial-gradient(ellipse at 85% 60%, #593d53 0, var(--night) 65%);
  color: var(--cream);
  padding-block: clamp(3.6rem, 7vw, 7rem);
}

.treatment-grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.4fr);
  gap: clamp(1.9rem, 5vw, 5rem);
  align-items: center;
}

.treatment-copy .eyebrow { color: var(--rose); margin-block-end: 1rem; }
.treatment-copy h2 { font-size: clamp(4rem, 6.8vw, 7rem); }
.treatment-copy h2 em { color: var(--rose); }
.treatment-copy > p:not(.eyebrow) {
  max-inline-size: 25rem;
  margin-block-start: 1.25rem;
  color: #f1dfe7;
}

.technology-photo { align-self: center; }
.technology-photo img {
  inline-size: 100%;
  aspect-ratio: 1.85;
  object-fit: cover;
  object-position: 42% 50%;
  border-radius: .65rem 4.5rem .65rem .65rem;
  box-shadow: 0 2.15rem 4rem #140d1680;
}

.technology-photo figcaption {
  color: #f1dfe7;
  margin-block-start: .75rem;
  font-size: .79rem;
}

.options-shell { padding-block: clamp(3.25rem, 6vw, 6rem); }
.options { margin: 0; }

.options > h3 {
  font-family: var(--display);
  font-size: clamp(1.95rem, 3.5vw, 3.15rem);
  font-weight: 400;
  line-height: 1;
  margin-block-end: 1.35rem;
}

.options-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-block: 1px solid var(--line);
}

.options article { padding: 1.35rem clamp(1rem, 2.35vw, 2.25rem); }
.options article:first-child { padding-inline-start: 0; }
.options article:last-child { padding-inline-end: 0; }
.options article + article { border-inline-start: 1px solid var(--line); }
.options h4 { font-size: 1.08rem; line-height: 1.3; }
.options p { margin-block-start: .55rem; color: var(--muted); font-size: .95rem; }
.options p.option-question { color: var(--berry); font-weight: 650; }

.experience { background: #eddee4; }
.experience-grid {
  display: grid;
  grid-template-columns: minmax(0, .83fr) minmax(0, 1fr);
  gap: clamp(2.5rem, 8.5vw, 9rem);
  align-items: center;
}

.experience-photo {
  inline-size: min(100%, 33rem);
  justify-self: center;
}

.steps { list-style: none; counter-reset: steps; margin: 1.75rem 0 0; padding: 0; }
.steps li {
  position: relative;
  counter-increment: steps;
  border-block-start: 1px solid #cdb9c0;
  padding: 1.05rem 0 1.05rem 2.8rem;
}

.steps li::before {
  content: counter(steps, decimal-leading-zero);
  position: absolute;
  inset: 1rem auto auto 0;
  font-family: var(--display);
  color: var(--berry);
  font-size: 1.45rem;
  line-height: 1.05;
}
.steps li:last-child { border-block-end: 1px solid #cdb9c0; }
.steps p { margin-block-start: .32rem; font-size: .95rem; }

.questions { background: var(--cream); }
.questions-grid {
  display: grid;
  grid-template-columns: minmax(0, .68fr) minmax(0, 1.15fr);
  gap: clamp(2rem, 6vw, 6rem);
  align-items: start;
}

.faq-intro p { max-inline-size: 24rem; }

.faq-list { border-block-start: 1px solid var(--line); }
.faq-list details { border-block-end: 1px solid var(--line); }
.faq-list summary {
  display: flex;
  align-items: baseline;
  gap: .8rem;
  list-style: none;
  padding-block: 1.12rem;
  font-weight: 700;
  cursor: pointer;
}
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::before {
  content: "";
  flex: 0 0 .49rem;
  block-size: .49rem;
  margin-inline: .14rem .1rem;
  border-inline-end: 1.5px solid currentColor;
  border-block-end: 1.5px solid currentColor;
  transform: rotate(-45deg);
}
.faq-list details[open] > summary::before { transform: rotate(45deg) translate(-.12rem, -.12rem); }
.faq-list summary:hover { color: var(--berry); }
.faq-list details p { margin: 0 0 1.15rem 1.54rem; }

.safety {
  margin-block-start: 1.8rem;
  border-inline-start: 2px solid var(--berry);
  background: var(--blush);
  padding: 1.35rem clamp(1.1rem, 2.7vw, 1.95rem);
}

.safety p { margin-block-start: .6rem; font-size: .91rem; }
.safety .text-link { margin-block-start: .4rem; }

.booking {
  background: var(--night);
  color: var(--cream);
  padding-block: clamp(3.75rem, 7vw, 7rem);
}
.booking-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, .58fr);
  gap: clamp(2.25rem, 7vw, 7rem);
  align-items: end;
}

.booking h2 em, .booking .eyebrow { color: #edc4d2; }
.booking h2 + p { max-inline-size: 28rem; color: #f2e5e9; }
.booking .primary-action { background: var(--cream); color: var(--plum); border-color: var(--cream); }
.booking .primary-action:hover { background: var(--blush); border-color: var(--blush); }
.booking .primary-action:focus-visible { outline-color: var(--cream); }

address {
  font-style: normal;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  border-inline-start: 1px solid #ffffff45;
  padding-inline-start: clamp(1.3rem, 4vw, 3rem);
}
address strong { font-weight: 700; }
address a { overflow-wrap: anywhere; min-block-size: 2rem; }
.address-link { margin-block: .65rem .5rem; }

.site-footer { background: var(--night); color: #f2e5e9; font-size: .81rem; }
.footer-inner {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  border-block-start: 1px solid #ffffff35;
  gap: .6rem 1.3rem;
  padding-block: 1.1rem 1.4rem;
}

.footer-links { display: flex; flex-wrap: wrap; column-gap: 1.4rem; }
.footer-links a { display: inline-flex; align-items: center; gap: .3rem; min-block-size: 2.3rem; text-decoration: none; }

@media (max-width: 980px) {
  .header-inner { gap: .9rem; }
  .main-nav { gap: 1rem; }
  .hero h1 { font-size: clamp(4.3rem, 8.6vw, 6rem); }
  .hero-actions { column-gap: .85rem; }
  .treatment-grid { column-gap: 2rem; }
  .experience-grid { column-gap: 2.8rem; }
}

@media (max-width: 760px) {
  .header-inner { min-block-size: 4.65rem; grid-template-columns: minmax(0, 1fr) auto; }
  .brand img { inline-size: 8.15rem; }
  .main-nav { display: none; }
  .header-cta { min-block-size: 2.75rem; padding-inline: .85rem; font-size: .79rem; }
  .hero { align-items: start; min-block-size: auto; }
  .hero-content { padding-block: 2.2rem .95rem; }
  .hero h1 { font-size: clamp(3.65rem, 12vw, 5.9rem); line-height: .88; margin-block: .8rem .9rem; }
  .hero-description { max-inline-size: 21rem; }
  .hero-actions { margin-block-start: .95rem; }
  .device-notice { margin-block-start: .85rem; font-size: .67rem; }
  .hero-photo { position: relative; min-block-size: clamp(17rem, 70vw, 26rem); }
  .hero-photo img { position: absolute; object-position: 78% 42%; }
  .hero-photo::after { background: linear-gradient(180deg, var(--night), #25192252 18%, transparent 43%); }
  .results .section-intro { display: block; }
  .results .section-intro h2 { font-size: clamp(3.15rem, 9.5vw, 4.75rem); }
  .results-break { display: none; }
  .facts-inner { inline-size: 100%; padding-block: 1.05rem; }
  .facts-inner div { padding-inline: clamp(.65rem, 2.8vw, 1.1rem); }
  .facts dt { font-size: .58rem; letter-spacing: .12em; }
  .facts dd { font-size: clamp(1.14rem, 4.1vw, 1.7rem); }
  .treatment-grid, .experience-grid, .questions-grid, .booking-grid { grid-template-columns: 1fr; }
  .comparison-table thead th { font-size: clamp(1.08rem, 5vw, 1.75rem); overflow-wrap: anywhere; }
  .results-grid, .options-grid { grid-template-columns: 1fr; }
  .options article, .options article:first-child, .options article:last-child { padding-inline: 0; }
  .options article + article { border-inline-start: 0; border-block-start: 1px solid var(--line); }
  .experience-photo { inline-size: min(78%, 23rem); grid-row: 2; }
  .experience-grid > div { grid-row: 1; }
  address { border-inline-start: 0; border-block-start: 1px solid #ffffff45; padding: 1.25rem 0 0; }
}

@media (max-width: 540px) {
  .hero-photo img {
    inset-inline-end: 0;
    inline-size: 145%;
    max-inline-size: none;
    object-position: 50% 38%;
  }
}

@media (max-width: 360px) {
  .hero h1 { font-size: 3.35rem; }
  .hero-actions { align-items: start; flex-direction: column; }
  .hero .button { min-block-size: 2.85rem; }
  .header-inner { gap: .65rem; }
}

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

/* Ultherapy PRIME and HIFU comparison (hifu-compare.js) */
.hifu { background: var(--blush); }
@keyframes hifu-blink { 50% { opacity: .25; } }
.hifu-cmp {
  --stage-chip: rgba(37, 25, 34, .62);
  --stage-edge: rgba(237, 196, 210, .28);
  display: grid;
  gap: clamp(1.1rem, 2.4vw, 1.75rem);

  [hidden] { display: none !important; }
  .nb { white-space: nowrap; }

  .tabs { display: flex; flex-wrap: wrap; gap: .5rem; }
  .tab {
    font: inherit; font-size: .9rem; font-weight: 500; line-height: 1; color: var(--plum); background: transparent;
    border: 1px solid var(--plum); border-radius: 999px; padding: .75rem 1.2rem; cursor: pointer; white-space: nowrap;
    transition: background .2s, color .2s;
  }
  .tab:hover { background: rgba(57, 37, 51, .08); }
  .tab[aria-selected="true"] { background: var(--plum); color: var(--cream); }

  .stage {
    --split: 50%;
    position: relative; inline-size: 100%; aspect-ratio: 16 / 9; background: var(--night); color: var(--cream);
    border-radius: 14px; overflow: hidden; touch-action: pan-y; user-select: none; -webkit-user-select: none; cursor: ew-resize;
  }
  .stage canvas { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; display: block; }
  .side { position: absolute; top: 0; bottom: 0; overflow: hidden; pointer-events: none; }
  .side-a { left: 0; width: var(--split); }
  .side-b { left: var(--split); right: 0; }
  .tag { position: absolute; top: 14px; white-space: nowrap; font-family: var(--display); font-size: clamp(1.25rem, 2.6vw, 1.9rem); line-height: 1; }
  .side-a .tag { left: 16px; }
  .side-b .tag { right: 16px; }
  .chip {
    position: absolute; white-space: nowrap; font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; line-height: 1.5;
    color: var(--rose); background: var(--stage-chip); border: 1px solid var(--stage-edge);
    border-radius: 999px; padding: 4px 10px; display: inline-flex; align-items: center; gap: 7px;
  }
  .side-a .chip.status { left: 16px; top: clamp(44px, 9.2%, 54px); }
  .side-b .chip.status { right: 16px; top: clamp(44px, 9.2%, 54px); }
  .live-dot { width: 7px; height: 7px; border-radius: 50%; background: #ffb38a; animation: hifu-blink 1.6s ease-in-out infinite; }

  .lbl {
    position: absolute; white-space: nowrap; font-size: 11px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; line-height: 1.5;
    color: var(--cream); background: var(--stage-chip); border-radius: 4px; padding: 2px 7px; transform: translateY(-50%);
    font-variant-numeric: tabular-nums;
  }
  .lbl.layer { left: 14px; }
  .lbl.depth { right: 14px; transform: translateY(-115%); color: var(--rose); }
  .side-a .lbl.depth { right: 32px; }
  .note { position: absolute; font-size: 12.5px; line-height: 1.35; color: var(--rose); max-inline-size: 22ch; text-wrap: balance; }
  .cap { position: absolute; top: 19%; display: grid; gap: 4px; max-inline-size: calc(100% - 32px); }
  .side-a .cap { left: 16px; }
  .side-b .cap { right: 16px; text-align: right; justify-items: end; }
  .cap b { font-family: var(--display); font-weight: 400; font-size: clamp(1.4rem, 3.4vw, 2.5rem); line-height: 1.02; text-wrap: balance; }
  .cap span { font-size: clamp(.75rem, 1.4vw, .875rem); line-height: 1.35; color: var(--rose); text-wrap: balance; max-inline-size: 24ch; }
  .cap span.nb { text-wrap: nowrap; max-inline-size: none; }
  .cap.low { top: auto; bottom: 16px; background: var(--stage-chip); border: 1px solid var(--stage-edge); border-radius: 10px; padding: 10px 14px; }
  .cap.low b { font-variant-numeric: tabular-nums; }
  .mo { position: absolute; top: 80.5%; transform: translateX(-50%); font-size: 11px; color: var(--rose); white-space: nowrap; font-variant-numeric: tabular-nums; }
  .axis { position: absolute; top: 86%; left: 10%; font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--rose); opacity: .75; white-space: nowrap; }

  .divider {
    position: absolute; top: 0; bottom: 0; left: var(--split); width: 44px; margin-left: -22px;
    cursor: ew-resize; background: none; border: 0; padding: 0; touch-action: none; color: var(--cream);
  }
  .divider:focus-visible { outline-offset: -4px; }
  .divider::before { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 1px; background: var(--cream); opacity: .85; }
  .knob {
    position: absolute; left: 50%; top: 50%; width: 44px; height: 44px; margin: -22px 0 0 -22px; border-radius: 50%;
    background: var(--cream); display: flex; align-items: center; justify-content: center; gap: 9px; box-shadow: 0 4px 18px rgba(0, 0, 0, .35);
  }
  .knob i { width: 8px; height: 8px; border: solid var(--night); border-width: 0 0 2px 2px; transform: rotate(45deg); }
  .knob i + i { transform: rotate(-135deg); }
  .fallback { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; text-align: center; padding: 24px; color: var(--rose); }

  .copy { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.1rem, 4vw, 3rem); }
  .col { min-inline-size: 0; display: grid; gap: .4rem; align-content: start; border-block-start: 1px solid var(--line); padding-block-start: .9rem; }
  .col h3 { font-family: var(--display); font-weight: 400; font-size: 1.65rem; line-height: 1.1; }
  .col .kicker { color: var(--berry); font-size: .72rem; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; }
  .col p { max-inline-size: 46ch; text-wrap: pretty; }
  .fine { font-size: .84rem; text-wrap: pretty; }

  @media (max-width: 640px) {
    .stage { aspect-ratio: 3 / 4; }
    .tabs { display: grid; grid-template-columns: 1fr 1fr; }
    .tab { text-align: center; padding-inline: .5rem; }
    .copy { grid-template-columns: 1fr; }
    .lbl { font-size: 10px; letter-spacing: .05em; padding: 2px 5px; }
    .lbl.layer { left: 8px; }
    .lbl.depth { right: 8px; }
    .side-a .lbl.depth { right: 30px; }
    .chip { font-size: 9.5px; letter-spacing: .06em; padding: 3px 8px; }
    .side-a .tag, .side-a .chip.status, .side-a .cap { left: 12px; }
    .side-b .tag, .side-b .chip.status, .side-b .cap { right: 12px; }
    .cap { max-inline-size: calc(100% - 20px); top: 16%; }
    .cap.low { top: auto; }
    .note { font-size: 11.5px; max-inline-size: 16ch; }
  }
  @media (prefers-reduced-motion: reduce) {
    .live-dot { animation: none; }
    .tab { transition: none; }
  }
}

/* Campaign version (campaign.js): hero points, stats, face map, before and after sliders, text enquiry, sticky bar */
.nb { white-space: nowrap; }
.ghost-action { background: transparent; color: inherit; border-color: currentColor; }
.ghost-action:hover { background: #ffffff1c; }
.small-pill { min-block-size: 2.75rem; padding: .55rem 1.05rem; font-size: .84rem; }
.site-header { position: sticky; inset-block-start: 0; z-index: 10; }
section[id] { scroll-margin-top: 6rem; }
.header-cta { background: var(--rose); color: var(--night); border-color: var(--rose); }
.header-cta:hover { background: var(--cream); border-color: var(--cream); }

.hero h1 { font-size: clamp(4.75rem, 8.9vw, 9.6rem); }
.hero-description { max-inline-size: 27rem; }
.hero-points {
  display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; margin: 1.25rem 0 0; padding: 0;
}
.hero-points li {
  padding: .38rem .85rem; border: 1px solid #edc4d266; border-radius: 999px; color: var(--rose);
  font-size: .74rem; font-weight: 700; letter-spacing: .1em; line-height: 1.5; text-transform: uppercase; white-space: nowrap;
}
.hero-actions { margin-block-start: 1.6rem; gap: .75rem; }

.stats { background: var(--rose); color: var(--plum); }
.stats-inner { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-block: 0; padding-block: clamp(1.3rem, 2.6vw, 2.2rem); }
.stats-inner div { display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: .35rem; }
.stats-inner div + div { padding-inline-start: clamp(.9rem, 3vw, 2.6rem); border-inline-start: 1px solid #39253340; }
.stats dd { font-family: var(--display); font-size: clamp(2.7rem, 6vw, 5.4rem); line-height: .9; letter-spacing: -.02em; }
.stats dt { max-inline-size: 13rem; color: #63394a; font-size: .7rem; font-weight: 700; letter-spacing: .13em; line-height: 1.45; text-transform: uppercase; text-wrap: balance; }

.fullface { background: var(--cream); }
.facemap { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1fr); gap: clamp(2rem, 6vw, 6.5rem); align-items: center; }
.facemap-photo { position: relative; overflow: hidden; border-radius: .7rem 5rem .7rem .7rem; background: var(--night); }
.facemap-photo img { inline-size: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.facemap-photo figcaption {
  position: absolute; inset: auto auto .8rem .9rem; padding: .28rem .58rem; border-radius: 3px;
  color: var(--cream); background: #251922b8; font-size: .69rem; line-height: 1.4;
}
@keyframes spot-pulse { 0% { transform: scale(1); opacity: .7; } 100% { transform: scale(2.5); opacity: 0; } }
.spot {
  position: absolute; inline-size: 2.75rem; block-size: 2.75rem; margin: -1.375rem 0 0 -1.375rem; padding: 0;
  display: grid; place-items: center; border: 0; border-radius: 50%; background: none; color: var(--night); cursor: pointer;
}
.spot span {
  position: relative; display: grid; place-items: center; inline-size: 1.85rem; block-size: 1.85rem; border-radius: 50%;
  border: 1.5px solid var(--cream); background: #25192299; color: var(--cream); font-size: .78rem; font-weight: 700;
  transition: background .25s, color .25s, transform .25s;
}
.spot::before {
  content: ""; position: absolute; inline-size: 1.85rem; block-size: 1.85rem; border-radius: 50%; border: 1.5px solid var(--cream);
  animation: spot-pulse 2.4s ease-out infinite;
}
.spot:nth-of-type(2)::before { animation-delay: .8s; }
.spot:nth-of-type(3)::before { animation-delay: 1.6s; }
.spot[aria-pressed="true"] span { background: var(--rose); border-color: var(--rose); color: var(--night); transform: scale(1.18); }
.spot:focus-visible { outline-color: var(--cream); outline-offset: 0; }

.zones { list-style: none; margin: 0; padding: 0; border-block-start: 1px solid var(--line); }
.zone { border-block-end: 1px solid var(--line); }
.zone button {
  display: flex; align-items: baseline; gap: 1.1rem; inline-size: 100%; padding: 1.05rem 0 .2rem; border: 0; background: none;
  color: var(--plum); font: inherit; text-align: start; cursor: pointer;
}
.zone-num { flex: none; font-family: var(--display); font-size: 1.45rem; color: var(--berry); }
.zone-name { font-family: var(--display); font-size: clamp(2rem, 3.6vw, 3.3rem); line-height: 1.02; letter-spacing: -.015em; transition: color .25s; }
.zone p { max-inline-size: 30rem; margin: 0 0 1.1rem 2.7rem; }
.zone:not(.is-active) .zone-name { color: #a08d97; }
.zone:not(.is-active) button:hover .zone-name { color: var(--berry); }
.js .zone:not(.is-active) p { display: none; }
.facemap-side .primary-action { margin-block-start: 1.6rem; }
.section p.facemap-note { max-inline-size: 31rem; margin-block-start: 1.1rem; font-size: .84rem; }

.results .section-intro h2 { font-size: clamp(3.6rem, 6.4vw, 6.4rem); }
.ba-frame {
  --pos: 50%;
  position: relative; overflow: hidden; border: 1px solid #d6c3ca; border-radius: 1rem; background: #e1ced6; aspect-ratio: 1;
}
.ba-frame img { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; user-select: none; -webkit-user-drag: none; }
.ba-before { clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
.ba-tag {
  position: absolute; inset-block-end: .8rem; padding: .34rem .7rem; border-radius: 999px; background: #251922cc; color: var(--cream);
  font-size: .7rem; font-weight: 700; letter-spacing: .1em; line-height: 1.5; text-transform: uppercase; white-space: nowrap; pointer-events: none;
}
.ba-tag-before { inset-inline-start: .8rem; }
.ba-tag-after { inset-inline-end: .8rem; background: var(--rose); color: var(--night); }
.ba-handle { position: absolute; inset-block: 0; inset-inline-start: var(--pos); inline-size: 0; pointer-events: none; }
.ba-handle::before { content: ""; position: absolute; inset-block: 0; inset-inline-start: -.5px; inline-size: 1px; background: var(--cream); box-shadow: 0 0 0 .5px #25192240; }
.ba-handle .knob {
  position: absolute; inset-block-start: 50%; inset-inline-start: 0; inline-size: 44px; block-size: 44px; margin: -22px 0 0 -22px; border-radius: 50%;
  background: var(--cream); display: flex; align-items: center; justify-content: center; gap: 9px; box-shadow: 0 4px 18px #00000059;
}
.ba-handle .knob i { inline-size: 8px; block-size: 8px; border: solid var(--night); border-width: 0 0 2px 2px; transform: rotate(45deg); }
.ba-handle .knob i + i { transform: rotate(-135deg); }
.ba-range {
  position: absolute; inset: 0; inline-size: 100%; block-size: 100%; margin: 0; opacity: 0; cursor: ew-resize; touch-action: pan-y;
  -webkit-appearance: none; appearance: none;
}
.ba-range::-webkit-slider-thumb { -webkit-appearance: none; inline-size: 44px; block-size: 100vh; }
.ba-range::-moz-range-thumb { inline-size: 44px; block-size: 100vh; border: 0; }
.ba-frame:has(.ba-range:focus-visible) { outline: 2px solid var(--plum); outline-offset: .25rem; }
.ba figcaption { margin-block-start: .7rem; color: var(--muted); font-size: .8rem; font-weight: 600; letter-spacing: .04em; }
.results-more { margin-block-start: 1.1rem; }
.results-more:hover, .safety .small-pill:hover { background: #39253314; }

.enquiry { margin-block-start: 1.7rem; max-inline-size: 36rem; }
.enquiry fieldset { margin: 0; padding: 0; border: 0; min-inline-size: 0; }
.enquiry legend { padding: 0; margin-block-end: .7rem; color: var(--rose); font-size: .72rem; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; }
.enquiry-chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.enquiry-chips label { position: relative; cursor: pointer; }
.enquiry-chips input { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; margin: 0; opacity: 0; cursor: pointer; }
.enquiry-chips span {
  display: inline-flex; align-items: center; min-block-size: 2.75rem; padding: .5rem 1.1rem; border: 1px solid #ffffff73; border-radius: 999px;
  font-size: .9rem; font-weight: 600; transition: background .2s, color .2s, border-color .2s;
}
.enquiry-chips input:checked + span { background: var(--rose); border-color: var(--rose); color: var(--night); }
.enquiry-chips input:focus-visible + span { outline: 2px solid var(--cream); outline-offset: .2rem; }
.booking p.enquiry-preview {
  margin-block-start: 1.1rem; padding: .95rem 1.15rem; border-radius: 1.1rem 1.1rem 1.1rem .3rem; background: #ffffff14; color: var(--cream);
  font-size: .95rem; line-height: 1.5; max-inline-size: 30rem;
}
.booking .ghost-action { color: var(--cream); }
.booking p.enquiry-note { margin-block-start: .8rem; color: #d9c5ce; font-size: .8rem; }
.booking-grid { align-items: start; }

.sticky-cta { display: none; }

.js .reveal { opacity: 0; transform: translateY(1.4rem); transition: opacity .7s ease, transform .7s cubic-bezier(.2, .7, .2, 1); }
.js .reveal.is-in { opacity: 1; transform: none; }

@media (max-width: 760px) {
  .hero h1 { font-size: clamp(3.65rem, 14.5vw, 5.9rem); }
  .hero-points li { font-size: .66rem; padding: .32rem .7rem; }
  .hero-actions .button { flex: 1 1 100%; }
  .stats-inner { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 1.2rem; }
  .stats-inner div:nth-child(3) { padding-inline-start: 0; border-inline-start: 0; }
  .stats dd { font-size: clamp(2.9rem, 13vw, 4.2rem); }
  .facemap { grid-template-columns: 1fr; }
  .facemap-photo { border-radius: .7rem 3.5rem .7rem .7rem; }
  .facemap-photo img { aspect-ratio: 1; object-position: 50% 30%; }
  .zone p { margin-inline-start: 0; }
  .booking-actions .button { flex: 1 1 100%; }
  .sticky-cta:not([hidden]) {
    position: fixed; z-index: 5; inset: auto 0 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: .6rem;
    padding: .7rem max(1rem, env(safe-area-inset-left)) calc(.7rem + env(safe-area-inset-bottom)) max(1rem, env(safe-area-inset-right));
    background: #251922f2; color: var(--cream); border-block-start: 1px solid #ffffff26;
    transform: translateY(110%); transition: transform .35s ease;
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  }
  .sticky-cta.is-on { transform: none; }
  .sticky-cta .button { min-block-size: 2.9rem; }
  .sticky-cta .primary-action { background: var(--rose); color: var(--night); border-color: var(--rose); }
  .site-footer { padding-block-end: 4.6rem; }
}

@media (prefers-reduced-motion: reduce) {
  .spot::before { animation: none; }
  .js .reveal { opacity: 1; transform: none; transition: none; }
  .sticky-cta { transition: none; }
}

/* Header actions */
.header-actions { justify-self: end; display: flex; align-items: center; gap: .6rem; }
.header-phone { color: var(--cream); white-space: nowrap; font-variant-numeric: tabular-nums; }
.header-phone:hover { background: #ffffff18; }
.when-narrow { display: none; }
.main-nav { gap: clamp(1rem, 2vw, 2.4rem); }
@media (max-width: 1180px) { .main-nav { display: none; } .header-inner { grid-template-columns: minmax(0, 1fr) auto; } }
@media (max-width: 760px) {
  .when-wide { display: none; }
  .when-narrow { display: inline; }
  .header-actions { gap: .45rem; }
  .header-phone { min-block-size: 2.75rem; padding-inline: 1rem; font-size: .79rem; }
}

/* Lift or surgery comparison */
.versus { inline-size: 100%; table-layout: fixed; border-collapse: separate; border-spacing: 0; text-align: start; }
.versus thead td { inline-size: 23%; }
.versus thead th {
  padding: clamp(1.4rem, 2.6vw, 2.2rem) clamp(1.2rem, 2.6vw, 2.4rem) clamp(1.1rem, 2vw, 1.6rem);
  font: 400 clamp(1.9rem, 3.3vw, 3.2rem)/1 var(--display); letter-spacing: -.015em; text-align: start; vertical-align: bottom;
  border-block-end: 1px solid var(--line);
}
.versus thead small { display: block; margin-block-start: .55rem; font: 600 .84rem/1.4 "DM Sans", system-ui, sans-serif; letter-spacing: 0; color: var(--muted); }
.versus-badge {
  display: table; margin-block-end: 1rem; padding: .3rem .75rem; border: 1px solid currentColor; border-radius: 999px;
  font: 700 .66rem/1.5 "DM Sans", system-ui, sans-serif; letter-spacing: .13em; text-transform: uppercase; color: var(--berry);
}
.versus tbody th {
  padding: clamp(1.1rem, 2vw, 1.6rem) 1.5rem clamp(1.1rem, 2vw, 1.6rem) 0; border-block-end: 1px solid var(--line);
  font: 400 clamp(1.25rem, 1.9vw, 1.7rem)/1.12 var(--display); color: var(--berry); text-align: start; vertical-align: top; text-wrap: balance;
}
.versus tbody td {
  padding: clamp(1.1rem, 2vw, 1.6rem) clamp(1.2rem, 2.6vw, 2.4rem); border-block-end: 1px solid var(--line);
  color: var(--muted); font-size: 1rem; line-height: 1.55; vertical-align: top; text-wrap: pretty;
}
.versus tbody tr:last-child th, .versus tbody tr:last-child td { border-block-end: 0; }
.versus .versus-prime { background: var(--plum); color: #f4e6ec; border-block-end-color: #ffffff24; }
.versus thead .versus-prime { color: var(--cream); border-radius: .7rem 3rem 0 0; }
.versus thead .versus-prime small { color: var(--rose); }
.versus thead .versus-prime .versus-badge { color: var(--night); background: var(--rose); border-color: var(--rose); }
.versus tbody td.versus-prime { font-weight: 500; }
.versus tbody tr:last-child .versus-prime { border-radius: 0 0 .7rem .7rem; padding-block-end: clamp(1.6rem, 2.8vw, 2.3rem); }
.comparison-note { margin-block-start: 1.4rem; }

@media (max-width: 760px) {
  .versus, .versus thead, .versus tbody { display: block; }
  .versus tr { display: grid; grid-template-columns: 1fr 1fr; }
  .versus thead td { display: none; }
  .versus thead th { padding: 1rem .85rem .9rem; font-size: clamp(1.3rem, 6vw, 1.8rem); border-block-end: 0; }
  .versus thead th:not(.versus-prime) { background: #eadbe1; border-radius: 0 .7rem 0 0; }
  .versus thead .versus-prime { border-radius: .7rem 0 0 0; }
  .versus thead small { font-size: .72rem; }
  .versus-badge { margin-block-end: .7rem; font-size: .58rem; padding: .22rem .55rem; letter-spacing: .1em; }
  .versus tbody th {
    grid-column: 1 / -1; padding: .7rem .85rem .5rem; border: 0; background: linear-gradient(90deg, var(--plum) 50%, #fbf5f2 50%);
    font: 700 .68rem/1.4 "DM Sans", system-ui, sans-serif; letter-spacing: .1em; text-transform: uppercase; color: var(--berry);
    border-block-start: 1px solid var(--line);
  }
  .versus tbody th { background: #fbf5f2; }
  .versus tbody td { padding: .7rem .85rem 1rem; font-size: .9rem; line-height: 1.5; border-block-end: 0; }
  .versus tbody td:not(.versus-prime) { border-inline-end: 1px solid var(--line); }
  .versus tbody tr:last-child td:not(.versus-prime) { border-block-end: 1px solid var(--line); border-radius: 0 0 .7rem 0; }
  .versus tbody tr:last-child .versus-prime { border-radius: 0 0 0 .7rem; padding-block-end: 1.1rem; }
}

/* Safety link */
.safety .safety-link { margin-block-start: 1.25rem; min-block-size: 2.4rem; padding: .38rem .9rem; font-size: .78rem; gap: .55rem; }

/* Visit the clinic panel */
.booking-grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(2.25rem, 6vw, 6rem); }
.clinic-card {
  display: block; align-self: stretch; padding: clamp(1.6rem, 3.4vw, 3rem); border: 0;
  border-radius: .7rem 4rem .7rem .7rem; background: var(--cream); color: var(--plum);
}
.clinic-kicker { color: var(--berry); font-size: .72rem; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; }
.clinic-name { margin-block-start: .6rem; font: 400 clamp(2.5rem, 4.2vw, 4rem)/.98 var(--display); letter-spacing: -.02em; }
.clinic-name em { color: var(--berry); }
.clinic-details { margin: clamp(1.4rem, 2.6vw, 2.2rem) 0 0; border-block-start: 1px solid var(--line); }
.clinic-details div { display: grid; grid-template-columns: 7.2rem minmax(0, 1fr); gap: .8rem; padding-block: .95rem; border-block-end: 1px solid var(--line); }
.clinic-details dt { padding-block-start: .28rem; color: var(--berry); font-size: .68rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; }
.clinic-details dd { font-size: 1.12rem; font-weight: 600; line-height: 1.4; overflow-wrap: anywhere; }
.clinic-details a { display: inline; min-block-size: 0; text-decoration: none; transition: color .2s; }
.clinic-details a:hover { color: var(--berry); text-decoration: none; }
.clinic-directions { margin-block-start: clamp(1.3rem, 2.4vw, 1.9rem); color: var(--plum); }
.clinic-directions:hover { background: #39253314; }
@media (max-width: 760px) {
  .booking-grid { grid-template-columns: 1fr; }
  .clinic-card { padding: 1.5rem 1.35rem 1.6rem; border-radius: .7rem 3rem .7rem .7rem; border-block-start: 0; }
  .clinic-details div { grid-template-columns: 1fr; gap: .15rem; }
  .clinic-details dt { padding-block-start: 0; }
  .clinic-details dd { font-size: 1.05rem; }
}

/* Scroll and load motion */
.js .reveal { transition: opacity .9s cubic-bezier(.2, .6, .2, 1), transform .9s cubic-bezier(.2, .7, .2, 1); }
.js .reveal-img { transform: translateY(1rem) scale(.975); transition-duration: 1.2s; }
.js .reveal-img.is-in { transform: none; }
@keyframes hero-rise { from { opacity: 0; transform: translateY(1.3rem); } to { opacity: 1; transform: none; } }
@keyframes hero-settle { from { opacity: .55; transform: scale(1.05); } to { opacity: 1; transform: none; } }
.js .hero-content > * { animation: hero-rise .9s cubic-bezier(.2, .7, .2, 1) both; }
.js .hero-content > :nth-child(2) { animation-delay: .1s; }
.js .hero-content > :nth-child(3) { animation-delay: .22s; }
.js .hero-content > :nth-child(4) { animation-delay: .34s; }
.js .hero-content > :nth-child(5) { animation-delay: .46s; }
.js .hero-photo img { animation: hero-settle 2s cubic-bezier(.2, .6, .2, 1) both; }
@media (prefers-reduced-motion: reduce) {
  .js .hero-content > *, .js .hero-photo img { animation: none; }
  .js .reveal, .js .reveal-img { opacity: 1; transform: none; transition: none; }
}

/* Clinic street map (line art from OpenStreetMap data, generated offline) */
.clinic-map {
  position: relative; display: block; margin-block-start: clamp(1.2rem, 2.2vw, 1.8rem); overflow: hidden; aspect-ratio: 16 / 9;
  border: 1px solid var(--line); border-radius: .6rem; background: var(--cream); color: var(--plum); text-decoration: none;
}
.clinic-map-svg { display: block; inline-size: 100%; block-size: 100%; font-family: "DM Sans", system-ui, sans-serif; transition: transform 1.2s cubic-bezier(.2, .7, .2, 1); }
.clinic-map:hover .clinic-map-svg { transform: scale(1.04); }
.clinic-map-cta {
  position: absolute; inset: auto .7rem .7rem auto; display: inline-flex; align-items: center; gap: .5rem; padding: .42rem .85rem;
  border: 1px solid var(--plum); border-radius: 999px; background: var(--cream); font-size: .76rem; font-weight: 700; line-height: 1.4;
  transition: background .2s, color .2s;
}
.clinic-map:hover .clinic-map-cta { background: var(--plum); color: var(--cream); }
.clinic-map:focus-visible { outline: 2px solid var(--plum); outline-offset: .25rem; }
.clinic-details { margin-block-start: clamp(1.1rem, 2vw, 1.6rem); }
@media (prefers-reduced-motion: reduce) { .clinic-map-svg { transition: none; } .clinic-map:hover .clinic-map-svg { transform: none; } }
.clinic-map-credit { margin-block-start: .4rem; color: var(--muted); font-size: .68rem; }