/* ==========================================================================
   COMPONENTS — reusable UI blocks
   Absolute Cosmetic Clinic
   --------------------------------------------------------------------------
   1.  Buttons            7.  Steps (How It Works)
   2.  Hero               8.  Numbers bar
   3.  Category cards     9.  Reviews
   4.  About / Guide     10.  Doctor credentials
   5.  Treatment cards   11.  Locations
   6.  Stats             12.  Why Choose
                         13.  Accordion (FAQ)
                         14.  CTA band
                         15.  Forms
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. BUTTONS
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  padding: 0.875rem var(--space-6);
  min-height: 50px;
  border-radius: var(--radius-pill);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  line-height: 1.2;
  text-align: center;
  white-space: nowrap;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background-color var(--transition-base),
              border-color var(--transition-base),
              color var(--transition-base),
              transform var(--transition-base),
              box-shadow var(--transition-base);
}

.btn svg {
  flex-shrink: 0;
  transition: transform var(--transition-base);
}

.btn:hover svg.btn__arrow {
  transform: translateX(3px);
}

/* Primary — solid green */
.btn--primary {
  background-color: var(--color-primary);
  color: var(--color-text-invert);
  box-shadow: var(--shadow-green);
}

.btn--primary:hover {
  background-color: var(--color-primary-dark);
  transform: translateY(-2px);
}

.btn--primary:active {
  transform: translateY(0);
}

/* Secondary — white with outline */
.btn--secondary {
  background-color: var(--surface);
  color: var(--ink-900);
  border-color: var(--line-strong);
}

.btn--secondary:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
  transform: translateY(-2px);
}

/* Ghost — used on tinted backgrounds */
.btn--ghost {
  background-color: transparent;
  color: var(--color-primary);
  border-color: var(--green-200);
}

.btn--ghost:hover {
  background-color: var(--surface);
  border-color: var(--color-primary);
}

/* On the dark/green CTA band */
.btn--on-dark {
  background-color: var(--surface);
  color: var(--color-primary);
}

.btn--on-dark:hover {
  background-color: var(--green-50);
  transform: translateY(-2px);
}

.btn--sm {
  min-height: 42px;
  padding: 0.625rem var(--space-5);
  font-size: var(--fs-xs);
}

.btn--lg {
  min-height: 56px;
  padding: 1rem var(--space-8);
  font-size: var(--fs-base);
}

.btn--block {
  width: 100%;
}

/* Circular arrow button used on cards */
.btn-circle {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: var(--color-primary);
  color: var(--color-text-invert);
  border: 1px solid var(--color-primary);
  flex-shrink: 0;
  transition: background-color var(--transition-base),
              transform var(--transition-base);
}

.btn-circle--outline {
  background-color: transparent;
  color: var(--color-primary);
  border-color: var(--line-strong);
}

.btn-circle:hover {
  background-color: var(--color-primary-dark);
  border-color: var(--color-primary-dark);
  color: var(--color-text-invert);
}

.btn-circle:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.btn-circle svg {
  transition: transform var(--transition-base);
}

.btn-circle:hover svg {
  transform: translateX(2px);
}

/* --------------------------------------------------------------------------
   2. HERO
   -------------------------------------------------------------------------- */

/* ---- Full-bleed video hero -------------------------------------------
   The stage holds the video + scrim; .hero__inner holds the copy. Text is
   centred over the footage, so everything in here is light-on-dark and the
   scrim below is what guarantees the contrast. */
.hero {
  position: relative;
  overflow: hidden;
  display: grid;
  /* align-items only: `place-items: center` would also set justify-items to
     center, which makes the inner wrapper shrink to max-content instead of
     filling the hero - the copy then escapes the container gutter. */
  align-items: center;
  min-height: 100vh;
  min-height: 100svh;
  /* Bottom padding also clears the sticky mobile CTA bar, which overlays the
     foot of the viewport below 980px. Reduced again at that breakpoint. */
  padding-block: calc(var(--header-h-mobile) + var(--space-8))
                 calc(var(--space-10) + 76px);
  background-color: #1B211D;   /* shows while the poster decodes */
  isolation: isolate;
}

.hero__stage {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}

.hero__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 38%;
  /* The poster is the LCP element, so it must not fade in. Only a slow
     scale runs — a transform, which does not affect LCP timing. */
  animation: hero-drift 18s var(--ease-soft) both;
}

/* Scrim: without it, white copy over pale footage fails contrast. Darkest
   through the middle band where the headline sits. */
.hero__scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg,
      rgba(10, 17, 13, 0.62) 0%,
      rgba(10, 17, 13, 0.52) 28%,
      rgba(10, 17, 13, 0.66) 62%,
      rgba(10, 17, 13, 0.82) 100%),
    radial-gradient(120% 90% at 50% 45%, rgba(10, 17, 13, 0.34) 0%, rgba(10, 17, 13, 0.62) 100%);
}

.hero__inner {
  position: relative;
  z-index: 1;
  /* A grid item's automatic minimum size is min-content. Without this the
     trust-strip grid inside would force the whole hero wider than the
     viewport on a phone. */
  min-width: 0;
  text-align: center;
}

.hero__content {
  max-width: 54rem;
  margin-inline: auto;
  color: #FFFFFF;
}

/* ---- Hero copy rhythm ----
   Restored and re-spaced: the headline, sub-headline and button row had no
   vertical rhythm of their own, so the blocks ran straight into each other. */

.hero-headline {
  /* --lh-tight (1.05) is fine for a one-line headline but too closed for
     this one, which wraps to three lines. */
  line-height: 1.12;
  margin-bottom: clamp(var(--space-5), 1rem + 1vw, var(--space-8));
}

.hero-subheadline {
  font-size: clamp(1rem, 0.95rem + 0.3vw, 1.0625rem);
  line-height: 1.7;
  color: var(--color-text);
  max-width: 46ch;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin-top: clamp(var(--space-8), 1.5rem + 1.5vw, var(--space-12));
}

/* ---- Hero typography on dark ---- */
/* --green-300 is decorative-only (it fails contrast even on white). Over the
   footage the hero uses the lighter --green-200, which measures above 4.5:1
   against the scrimmed background. */
.hero .eyebrow {
  color: var(--green-200);
  margin-bottom: var(--space-4);
}

.hero .hero-headline {
  color: #FFFFFF;
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.35);
}

.hero .text-accent {
  color: var(--green-200);
}

.hero .hero-subheadline {
  margin-inline: auto;
  max-width: 44rem;
  color: rgba(255, 255, 255, 0.88);
}

.hero__actions {
  justify-content: center;
}

.hero .hero__phone {
  color: rgba(255, 255, 255, 0.72);
}

.hero .hero__phone a {
  color: #FFFFFF;
  text-decoration-color: rgba(255, 255, 255, 0.45);
}

.hero .hero__phone a:hover {
  color: var(--green-300);
}

/* Glass secondary button reads better than the white pill over footage */
.hero .btn--secondary {
  background-color: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.5);
  color: #FFFFFF;
}

@supports (backdrop-filter: blur(1px)) {
  .hero .btn--secondary {
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
  }
}

.hero .btn--secondary:hover {
  background-color: rgba(255, 255, 255, 0.95);
  border-color: transparent;
  color: var(--color-primary-dark);
}

/* ---- Trust strip on dark ---- */
.hero .trust-strip {
  max-width: 52rem;
  margin-inline: auto;
}

.hero .trust-strip__value {
  color: #FFFFFF;
}

.hero .trust-strip__label {
  color: rgba(255, 255, 255, 0.78);
}

/* ---- Phone line + trust strip (base) ----
   These are the structural rules; the .hero overrides above only recolour
   them for the dark background. */

.hero__phone {
  margin-top: var(--space-5);
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
}

.hero__phone a {
  color: var(--ink-700);
  font-weight: var(--fw-semibold);
  text-underline-offset: 3px;
  text-decoration: underline;
  text-decoration-color: var(--green-200);
  transition: color var(--transition-base);
}

.hero__phone a:hover {
  color: var(--color-primary);
  text-decoration-color: currentColor;
}

/* auto-fit keeps all four stats on one line wherever they fit, and folds to
   two columns on a phone rather than four cramped ones. */
/* No rule line above it, and no dividers between items — the numbers are
   loud enough to hold the row on their own. */
.trust-strip {
  display: grid;
  /* min() lets a track shrink below its floor when the container is
     narrower; plain minmax(170px, 1fr) cannot, and would overflow a phone. */
  grid-template-columns: repeat(auto-fit, minmax(min(170px, 100%), 1fr));
  /* Row gap stays modest on a phone, where the strip folds to 2x2 and the
     hero is already tall; it opens up on wider screens. */
  gap: clamp(var(--space-5), 1rem + 1.5vw, var(--space-8)) var(--space-5);
  margin-top: clamp(var(--space-8), 1.5rem + 2.5vw, var(--space-16));
}

.trust-strip__item {
  padding-inline: var(--space-2);
}

.trust-strip__value {
  display: block;
  font-family: var(--font-heading);
  font-size: var(--fs-2xl);
  font-weight: var(--fw-extra);
  color: var(--ink-900);
  letter-spacing: var(--tracking-tight);
  line-height: 1.1;
}

.trust-strip__label {
  display: block;
  margin-top: var(--space-1);
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
  line-height: 1.4;
}

/* --------------------------------------------------------------------------
   3. CATEGORY CARDS
   -------------------------------------------------------------------------- */

.category-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}

.category-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background-color: var(--surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-3);
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition-base),
              box-shadow var(--transition-base),
              border-color var(--transition-base);
}

.category-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: var(--green-200);
}

/* Outer box positions the overlapping badge — it must NOT clip.
   The inner .category-card__thumb does the clipping and the image zoom. */
.category-card__media {
  position: relative;
  margin-bottom: var(--space-6);
}

.category-card__thumb {
  border-radius: var(--radius-md);
  overflow: hidden;
}

.category-card__media img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

/* Circular icon badge overlapping the image's bottom-left corner */
.category-card__badge {
  position: absolute;
  left: var(--space-3);
  bottom: calc(var(--space-3) * -1 - 10px);
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background-color: var(--surface);
  box-shadow: var(--shadow-md);
  color: var(--color-primary);
}

.category-card__body {
  padding: var(--space-2) var(--space-3) var(--space-3);
  display: flex;
  flex-direction: column;
  flex: 1;
}

.category-card__title {
  margin-bottom: var(--space-2);
}

/* Tagline: the emotional one-liner from the approved design */
.category-card__text {
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--ink-700);
  margin-bottom: var(--space-2);
}

/* Description: what the category actually covers. Takes the spare height so
   the arrow buttons stay aligned across cards of differing text length. */
.category-card__desc {
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
  line-height: 1.5;
  margin-bottom: var(--space-5);
  flex: 1;
}

/* Makes the whole card clickable while keeping a single real <a> for
   accessibility and crawling. */
.stretch-link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
}

/* --------------------------------------------------------------------------
   4. ABOUT / GUIDE
   -------------------------------------------------------------------------- */

.about__inner {
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
  gap: clamp(var(--space-8), 4vw, var(--space-16));
}

.about__media {
  position: relative;
}

/* Organic leaf silhouette — the signature image treatment.
   Built from border-radius rather than an SVG clipPath: it needs no external
   reference, renders identically in every engine, and degrades to a simple
   rounded rectangle instead of disappearing if anything goes wrong.
   The full leaf shape is applied from 768px up (see responsive.css); below
   that a gentler radius keeps the subject from being cropped too hard. */
.about__image {
  width: 100%;
  height: auto;
  aspect-ratio: 5 / 6;
  object-fit: cover;
  border-radius: var(--radius-2xl);
}

/* Sits BELOW the photo, not on it. Measured over the real consultation
   photo the accent fell to 1.59:1 against the dark desk front — it only
   worked while the slot held a pale placeholder. On the page background it
   is well clear. */
.about__script {
  display: none;
  position: absolute;
  right: 2%;
  bottom: 0;
  transform: rotate(-6deg);
  text-align: right;
  line-height: 1.05;
}

.about__leaf {
  position: absolute;
  top: -8%;
  left: -12%;
  width: 55%;
  z-index: var(--z-decor);
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   5. TREATMENT CARDS — horizontal scroller (no carousel library)
   -------------------------------------------------------------------------- */

.scroller {
  display: flex;
  gap: var(--space-5);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scroll-padding-inline: var(--gutter);
  /* A scroll container clips on BOTH axes: setting overflow-x to auto forces
     overflow-y from visible to auto, so the cards' drop shadows were being
     sliced off at the padding edge and read as a hard line. The block padding
     has to clear the shadow's full reach (10px offset + 26px blur = 36px). */
  padding-block: var(--space-5) var(--space-12);
  /* Bleed to the viewport edge so a partial card signals "scrollable" */
  margin-inline: calc(var(--gutter) * -1);
  padding-inline: var(--gutter);
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.scroller::-webkit-scrollbar {
  display: none;
}

.scroller > * {
  scroll-snap-align: start;
  flex: 0 0 auto;
  width: 80vw;
  max-width: 320px;
}

.scroller__controls {
  display: flex;
  gap: var(--space-3);
}

.treatment-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background-color: var(--surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-4);
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition-base),
              box-shadow var(--transition-base),
              border-color var(--transition-base);
}

.treatment-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: var(--green-200);
}

.treatment-card__media img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius-md);
}

.treatment-card__body {
  padding: var(--space-6) var(--space-2) var(--space-2);
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: var(--space-3);
}

.treatment-card__title {
  font-size: var(--fs-lg);
  line-height: var(--lh-snug);
}

.treatment-card__text {
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: var(--color-text);
  flex: 1;
}

/* --------------------------------------------------------------------------
   6. STATS
   -------------------------------------------------------------------------- */

.stat-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-5);
  margin-top: var(--space-10);
  padding-top: var(--space-8);
  border-top: 1px solid var(--color-border);
}

.stat {
  text-align: center;
  padding-inline: var(--space-3);
}

.stat__icon {
  color: var(--color-primary);
  margin: 0 auto var(--space-3);
}

.stat__value {
  display: block;
  font-family: var(--font-heading);
  font-size: var(--fs-xl);
  font-weight: var(--fw-extra);
  color: var(--ink-900);
  letter-spacing: var(--tracking-tight);
  line-height: 1.2;
}

.stat__label {
  display: block;
  margin-top: var(--space-1);
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
  line-height: 1.4;
}

/* --------------------------------------------------------------------------
   7. STEPS — How It Works
   -------------------------------------------------------------------------- */

.steps {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
  counter-reset: step;
}

.step {
  position: relative;
  background-color: var(--surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-8) var(--space-6) var(--space-6);
  transition: transform var(--transition-base),
              box-shadow var(--transition-base);
}

.step:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}

.step__num {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background-color: var(--color-tint-strong);
  color: var(--color-primary-darker);
  font-family: var(--font-heading);
  font-size: var(--fs-lg);
  font-weight: var(--fw-extra);
  margin-bottom: var(--space-5);
}

.step__title {
  margin-bottom: var(--space-3);
}

.step__text {
  font-size: var(--fs-sm);
}

/* Connector line between steps — enabled at desktop in responsive.css */
.step::after {
  content: "";
  display: none;
  position: absolute;
  top: calc(var(--space-8) + 24px);
  right: calc(var(--space-6) * -1 - 1px);
  width: var(--space-6);
  height: 1px;
  background-color: var(--green-200);
}

.step:last-child::after {
  display: none;
}

/* --------------------------------------------------------------------------
   8. NUMBERS BAR
   -------------------------------------------------------------------------- */

.numbers {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-4);
  background-color: var(--surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-10) var(--space-6);
  box-shadow: var(--shadow-sm);
}

.numbers__item {
  text-align: center;
  padding-inline: var(--space-3);
}

.numbers__value {
  display: block;
  font-family: var(--font-heading);
  font-size: var(--fs-2xl);
  font-weight: var(--fw-extra);
  color: var(--color-primary);
  letter-spacing: var(--tracking-tight);
  line-height: 1.1;
}

.numbers__label {
  display: block;
  margin-top: var(--space-2);
  font-size: var(--fs-xs);
  color: var(--color-text);
  line-height: 1.4;
}

/* --------------------------------------------------------------------------
   9. REVIEWS — see section 17 (review grid). The single-card carousel,
   testimonial styles and decorative avatar cluster that used to live here
   were removed when the section became a 3x3 grid.
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   10. DOCTOR CREDENTIALS
   -------------------------------------------------------------------------- */

.doctor {
  display: grid;
  grid-template-columns: 1fr;
  justify-items: center;
  text-align: center;
  gap: var(--space-6);
  align-items: center;
  background-color: var(--color-tint);
  border: 1px solid var(--green-200);
  border-radius: var(--radius-xl);
  padding: var(--space-8);
}

/* The portrait is wrapped in <picture> for the WebP source, which makes the
   PICTURE the grid item rather than the IMG. Giving it `display: block` and
   the photo's footprint keeps the 180px column working.

   NOT `display: contents`, which looks like the tidier fix and silently breaks
   the row: SOURCE then becomes a grid item of its own, taking column 1 and
   pushing the IMG into column 2, which wrapped the text onto a second row in
   the 180px column. A zero-width box is still a box. */
.doctor picture {
  display: block;
  width: 180px;
  height: 180px;
}

.doctor__photo {
  width: 180px;
  height: 180px;
  border-radius: 50%;
  object-fit: cover;
  border: 4px solid var(--surface);
  box-shadow: var(--shadow-md);
}

.doctor__name {
  font-size: var(--fs-xl);
  margin-bottom: var(--space-1);
}

.doctor__role {
  display: block;
  font-size: var(--fs-sm);
  color: var(--color-primary);
  font-weight: var(--fw-semibold);
  margin-bottom: var(--space-4);
}

.doctor__text {
  font-size: var(--fs-sm);
  max-width: 62ch;
}

/* --------------------------------------------------------------------------
   11. LOCATIONS
   -------------------------------------------------------------------------- */

.locations {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}

.location-card {
  display: flex;
  flex-direction: column;
  background-color: var(--surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--transition-base);
}

.location-card:hover {
  box-shadow: var(--shadow-lg);
}

.location-card__media {
  position: relative;
}

.location-card__media img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.location-card__body {
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: var(--space-4);
}

.location-card__title {
  font-size: var(--fs-xl);
}

.location-card__services {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  color: var(--color-primary);
}

.location-card__services li:not(:last-child)::after {
  content: "·";
  margin-left: var(--space-2);
  color: var(--green-300);
}

.location-card__details {
  display: grid;
  gap: var(--space-3);
  font-size: var(--fs-sm);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border);
}

.location-card__detail {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  line-height: var(--lh-normal);
}

.location-card__detail svg {
  flex-shrink: 0;
  margin-top: 3px;
  color: var(--color-primary);
}

.location-card__detail a:hover {
  color: var(--color-primary);
  text-decoration: underline;
}

.location-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: auto;
  padding-top: var(--space-2);
}

/* The embedded map. Always on screen; loading="lazy" in the markup is what
   keeps it off the initial page load. aspect-ratio reserves its box before
   the iframe paints, so it cannot shift the layout. */
.location-card__map {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
  border-radius: var(--radius-md);
  background-color: var(--green-50);
}

/* --------------------------------------------------------------------------
   12. WHY CHOOSE
   -------------------------------------------------------------------------- */

.why-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-6);
}

.why-item {
  text-align: center;
  padding-inline: var(--space-4);
}

.why-item__icon {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  margin: 0 auto var(--space-4);
  border-radius: 50%;
  background-color: var(--color-tint);
  color: var(--color-primary);
}

.why-item__title {
  font-size: var(--fs-base);
  margin-bottom: var(--space-2);
}

.why-item__text {
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
}

/* --------------------------------------------------------------------------
   13. ACCORDION — FAQ
   -------------------------------------------------------------------------- */

.accordion {
  display: grid;
  gap: var(--space-3);
  max-width: 860px;
  margin-inline: auto;
}

.accordion__item {
  background-color: var(--surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: border-color var(--transition-base),
              box-shadow var(--transition-base);
}

.accordion__item:has(.accordion__trigger[aria-expanded="true"]) {
  border-color: var(--green-200);
  box-shadow: var(--shadow-md);
}

.accordion__heading {
  margin: 0;
  font-size: inherit;
  letter-spacing: normal;
}

.accordion__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  width: 100%;
  padding: var(--space-5) var(--space-6);
  text-align: left;
  font-family: var(--font-heading);
  font-size: var(--fs-base);
  font-weight: var(--fw-semibold);
  color: var(--ink-900);
  line-height: var(--lh-snug);
  transition: color var(--transition-base);
}

.accordion__trigger:hover {
  color: var(--color-primary);
}

.accordion__icon {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background-color: var(--color-tint);
  color: var(--color-primary);
  transition: transform var(--dur-slow) var(--ease-out),
              background-color var(--transition-base);
}

.accordion__trigger[aria-expanded="true"] .accordion__icon {
  transform: rotate(180deg);
  background-color: var(--color-primary);
  color: var(--color-text-invert);
}

/* Grid-template-rows animation — transitions to auto height without JS
   measuring, and degrades gracefully in older browsers. */
.accordion__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--dur-slow) var(--ease-out);
}

.accordion__panel[data-open="true"] {
  grid-template-rows: 1fr;
}

.accordion__panel > div {
  overflow: hidden;
}

.accordion__body {
  padding: 0 var(--space-6) var(--space-6);
  font-size: var(--fs-sm);
  color: var(--color-text);
  max-width: 68ch;
}

/* --------------------------------------------------------------------------
   14. CTA BAND
   -------------------------------------------------------------------------- */

.cta-band {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(70% 140% at 50% 0%, var(--green-100) 0%, transparent 70%),
    var(--color-tint);
  border-radius: var(--radius-2xl);
  margin-inline: var(--gutter);
  padding-block: clamp(3rem, 2rem + 3vw, 4.5rem);
  text-align: center;
}

/* The shell is wider than the text measure on purpose. Capping the whole
   block at 640px forced the three CTAs onto two rows (they need 792px with
   their gaps). Widening the shell and re-applying 640px to the TEXT keeps the
   reading measure identical while giving the buttons a single line. */
.cta-band__inner {
  position: relative;
  z-index: var(--z-base);
  max-width: 900px;
  margin-inline: auto;
}

.cta-band__inner > .eyebrow,
.cta-band__inner > h2,
.cta-band__text {
  max-width: 640px;
  margin-inline: auto;
}

.cta-band__text {
  margin-top: var(--space-4);
  font-size: var(--fs-base);
}

.cta-band__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  justify-content: center;
  margin-top: var(--space-8);
}

.cta-band__leaf {
  position: absolute;
  z-index: var(--z-decor);
  pointer-events: none;
  opacity: 0.6;
}

.cta-band__leaf--left  { left: -4%;  bottom: -20%; width: 28%; }
.cta-band__leaf--right { right: -4%; top: -20%;    width: 28%; transform: scaleX(-1); }

/* --------------------------------------------------------------------------
   15. FORMS
   -------------------------------------------------------------------------- */

.form {
  display: grid;
  gap: var(--space-5);
}

.form__row {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
}

.form__field {
  display: grid;
  gap: var(--space-2);
}

.form__label {
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--ink-700);
}

.form__required {
  color: var(--danger);
}

.form__input,
.form__select,
.form__textarea {
  width: 100%;
  padding: 0.75rem var(--space-4);
  min-height: 48px;
  font-size: var(--fs-sm);
  color: var(--ink-900);
  background-color: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  transition: border-color var(--transition-base),
              box-shadow var(--transition-base);
}

.form__input::placeholder,
.form__textarea::placeholder {
  color: var(--color-text-muted);
}

.form__input:focus,
.form__select:focus,
.form__textarea:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--green-100);
  outline: none;
}

.form__textarea {
  min-height: 120px;
  padding-top: var(--space-3);
}

/* Error state — set by forms.js, never on load */
.form__field[data-invalid="true"] .form__input,
.form__field[data-invalid="true"] .form__select,
.form__field[data-invalid="true"] .form__textarea {
  border-color: var(--danger);
  background-color: var(--danger-bg);
}

.form__error {
  font-size: var(--fs-xs);
  color: var(--danger);
  min-height: 1.2em;
}

.form__hint {
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
}

/* Honeypot — bots fill it, humans never see it */
.form__hp {
  position: absolute;
  left: -9999px;
  opacity: 0;
  pointer-events: none;
}

.form__status {
  padding: var(--space-4);
  border-radius: var(--radius-sm);
  font-size: var(--fs-sm);
}

.form__status[data-state="success"] {
  background-color: var(--color-tint);
  border: 1px solid var(--green-200);
  color: var(--color-primary-darker);
}

.form__status[data-state="error"] {
  background-color: var(--danger-bg);
  border: 1px solid var(--danger);
  color: var(--danger);
}

/* --------------------------------------------------------------------------
   16. FALLING LEAF FIELD
   Decorative background for the problem section. Compositor-only: every
   keyframe touches transform and opacity, nothing that triggers layout.
   -------------------------------------------------------------------------- */

.leaf-fall {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  /* Establishes the container for the cqh units the keyframes use. Safe
     here because inset:0 gives the element a definite size that does not
     depend on its contents. */
  container-type: size;
}

/* Without container query units the keyframe transforms are invalid and the
   leaves would pile up at the top. Drop the decoration instead. */
@supports not (height: 1cqh) {
  .leaf-fall { display: none; }
}

/* Keeps the copy above the leaves */
.leaf-fall__above {
  position: relative;
  z-index: 1;
}

/* Opacities are capped so compositing a leaf over the section tint never
   drops body copy below 4.5:1. Measured: the darker --green-300 leaves fail
   above ~0.24; the lighter --green-200 ones are safe to ~0.42. */
.leaf-fall__leaf {
  position: absolute;
  top: 0;
  height: auto;
  opacity: 0;
  animation-name: leaf-fall;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  /* Paused until the section scrolls into view (main.js adds .is-running).
     No JS means .no-js stays on <html> and they simply run. */
  animation-play-state: paused;
}

.leaf-fall.is-running .leaf-fall__leaf,
.no-js .leaf-fall__leaf {
  animation-play-state: running;
}

.leaf-fall__leaf:nth-child(1) {
  left: 6%;
  width: 30px;
  color: var(--green-300);
  --leaf-opacity: 0.23;
  animation-duration: 22s;
  animation-delay: -3s;
}
.leaf-fall__leaf:nth-child(2) {
  left: 17%;
  width: 20px;
  color: var(--green-200);
  --leaf-opacity: 0.40;
  animation-duration: 28s;
  animation-delay: -14s;
}
.leaf-fall__leaf:nth-child(3) {
  left: 29%;
  width: 25px;
  color: var(--green-300);
  --leaf-opacity: 0.22;
  animation-duration: 19s;
  animation-delay: -9s;
}
.leaf-fall__leaf:nth-child(4) {
  left: 41%;
  width: 16px;
  color: var(--green-200);
  --leaf-opacity: 0.38;
  animation-duration: 32s;
  animation-delay: -20s;
}
.leaf-fall__leaf:nth-child(5) {
  left: 58%;
  width: 27px;
  color: var(--green-300);
  --leaf-opacity: 0.21;
  animation-duration: 25s;
  animation-delay: -6s;
}
.leaf-fall__leaf:nth-child(6) {
  left: 71%;
  width: 19px;
  color: var(--green-200);
  --leaf-opacity: 0.42;
  animation-duration: 30s;
  animation-delay: -17s;
}
.leaf-fall__leaf:nth-child(7) {
  left: 83%;
  width: 33px;
  color: var(--green-300);
  --leaf-opacity: 0.23;
  animation-duration: 21s;
  animation-delay: -11s;
}
.leaf-fall__leaf:nth-child(8) {
  left: 93%;
  width: 22px;
  color: var(--green-200);
  --leaf-opacity: 0.40;
  animation-duration: 26s;
  animation-delay: -2s;
}

/* --------------------------------------------------------------------------
   17. REVIEW GRID
   Nine Google reviews, three per row. Replaces the single-card carousel:
   with nine to show, a grid reads faster than nine clicks.
   -------------------------------------------------------------------------- */

.review-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
}

.review {
  display: flex;
  flex-direction: column;
  background-color: var(--surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition-base),
              box-shadow var(--transition-base);
}

.review:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}

.review__stars {
  display: flex;
  gap: 2px;
  color: #E8A33D;
  margin-bottom: var(--space-4);
}

/* Takes the slack so every card's footer lines up regardless of review
   length — otherwise a short review leaves its avatar floating mid-card. */
.review__text {
  flex: 1;
  font-size: var(--fs-sm);
  line-height: 1.65;
  color: var(--ink-700);
}

.review__by {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-6);
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-border);
}

.review__avatar {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background-color: var(--green-100);
  color: var(--color-primary-darker);
  font-family: var(--font-heading);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
}

/* Not every review names a treatment, so the meta line is sometimes absent.
   Reserving its height keeps the footers — and therefore the avatars — on the
   same line across a row; without it they sit 4px out of step. */
.review__who {
  min-width: 0;
  min-height: 46px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.review__name {
  display: block;
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  color: var(--ink-900);
}

.review__meta {
  display: block;
  font-size: var(--fs-xs);
  color: var(--color-primary);
}

.review__badge {
  flex-shrink: 0;
  margin-left: auto;
}

.review-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  justify-content: center;
  margin-top: var(--space-10);
}

/* --------------------------------------------------------------------------
   17a. INTERIOR PAGE CHROME — breadcrumbs and page hero

   Used by every page below the homepage. The homepage has its own full-bleed
   video hero and does not use these.
   -------------------------------------------------------------------------- */

.breadcrumbs {
  padding-top: calc(var(--header-h-mobile) + var(--space-5));
  padding-bottom: var(--space-2);
  background-color: var(--surface);
}

.breadcrumbs ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
}

.breadcrumbs li + li::before {
  content: "/";
  margin-right: var(--space-2);
  color: var(--line-strong);
}

.breadcrumbs a {
  color: var(--color-text-muted);
  text-decoration: none;
}

.breadcrumbs a:hover {
  color: var(--color-primary);
  text-decoration: underline;
}

.breadcrumbs [aria-current="page"] {
  color: var(--ink-700);
  font-weight: var(--fw-semibold);
}

.page-hero {
  padding-top: var(--space-8);
  padding-bottom: var(--space-10);
  background-color: var(--surface);
}

.page-hero__title {
  /* Caps the measure without a wrapper: a 60-character H1 run across a
     1320px column is unreadable. */
  max-width: 20ch;
  margin-top: var(--space-2);
  font-size: var(--fs-3xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
}

.page-hero__lead {
  max-width: 60ch;
  margin-top: var(--space-5);
  font-size: var(--fs-lg);
  line-height: var(--lh-relaxed);
  color: var(--color-text);
}

.page-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-8);
}

/* Follows a page hero, which already supplied the top breathing room. */
.section--tight {
  padding-top: var(--space-4);
}

/* --------------------------------------------------------------------------
   17b. PROSE — long-form treatment-page body copy

   A measure of ~68ch: past roughly 75 the eye loses the start of the next
   line. Headings get more space above than below so each one visually binds
   to the text it introduces rather than floating between two blocks.
   -------------------------------------------------------------------------- */

.prose {
  max-width: 68ch;
}

.prose > * + * {
  margin-top: var(--space-5);
}

.prose h2 {
  margin-top: var(--space-12);
  margin-bottom: var(--space-4);
  font-size: var(--fs-2xl);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--ink-900);
}

.prose h3 {
  margin-top: var(--space-8);
  margin-bottom: var(--space-3);
  font-size: var(--fs-lg);
  line-height: var(--lh-snug);
  color: var(--ink-900);
}

.prose p,
.prose li {
  font-size: var(--fs-md);
  line-height: var(--lh-relaxed);
  color: var(--color-text);
}

.prose ul {
  padding-left: var(--space-5);
  list-style: disc;
}

.prose li + li {
  margin-top: var(--space-2);
}

.prose h2:first-child,
.prose h3:first-child {
  margin-top: 0;
}

/* A quiet aside for the "what we won't do" style callout. The left rule does
   the work; a filled panel would compete with the treatment cards. */
.prose .note {
  margin-top: var(--space-8);
  padding: var(--space-5) var(--space-6);
  border-left: 3px solid var(--color-primary);
  background-color: var(--color-tint);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
}

.prose .note > * + * {
  margin-top: var(--space-3);
}

/* --------------------------------------------------------------------------
   18. BEFORE & AFTER GALLERY
   Reuses .scroller (scroll-snap, no carousel library) and overrides the card
   width so three sit side by side on desktop.
   -------------------------------------------------------------------------- */

/* The strip bleeds WIDER than the container so three cards get more room
   than the 1320px column allows. The bleed is clamped by how much free space
   there actually is beside the container — with a 48px buffer for the
   scrollbar — so it can never push the page into horizontal overflow.

   The formula still HALVES the free space even though the bleed only runs
   rightwards, which leaves headroom the cap can safely spend: 120px is
   reached at ~1608px and up, where there is 300px+ of margin to take it
   from. */
.scroller.ba-scroller {
  --ba-bleed: clamp(0px, (100vw - var(--container-max) - 48px) / 2, 120px);
  gap: var(--space-4);
  /* Bleeds to the RIGHT ONLY. The first card stays flush with the section
     heading — a symmetric bleed pushed it ~36px further left than the H2,
     which reads as a misalignment bug rather than a deliberate overhang.
     Widening rightwards buys the same card width with none of that.

     Padding is zeroed (the base .scroller puts the gutter back) so the
     content box genuinely grows instead of being handed straight back. */
  margin-inline: 0 calc(var(--ba-bleed) * -1);
  padding-inline: 0;
  scroll-padding-inline: 0;
}

/* Qualified with .scroller so these beat the generic `.scroller > *` sizing
   regardless of source order — both would otherwise score 0-1-0 and the
   treatments rule further down responsive.css would win. */
.scroller.ba-scroller > * {
  width: 88vw;
  max-width: 560px;
}

.ba-card {
  background-color: var(--surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-2);
  box-shadow: var(--shadow-sm);
}

.ba-card__figure {
  margin: 0;
}

/* The two shots are STACKED, never overlapped or wiped between: both states
   stay visible at once, which is the honest way to show a pair.

   Stacked rather than side by side because the clinic's actual photography is
   landscape close-ups. Halving the card width for a side-by-side pair left
   each shot ~217px wide, which cropped the corners of the mouth clean off —
   the exact detail a lip result turns on. Full-width rows give each shot the
   whole card and keep the subject intact. */
.ba-pair {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3px;
  border-radius: var(--radius-md);
  overflow: hidden;
}

.ba-pair__side {
  position: relative;
}

.ba-pair__side img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.ba-pair__tag {
  position: absolute;
  left: var(--space-2);
  bottom: var(--space-2);
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  background-color: rgba(10, 17, 13, 0.72);
  color: #FFFFFF;
  font-size: 11px;
  font-weight: var(--fw-bold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.ba-pair__tag--after {
  background-color: var(--color-primary);
}

.ba-card__caption {
  margin-top: var(--space-4);
  margin-bottom: var(--space-1);
  font-family: var(--font-heading);
  font-size: var(--fs-xl);
  font-weight: var(--fw-bold);
  color: var(--ink-900);
  text-align: center;
}

/* The disclaimer is a legal requirement for this section, not decoration.
   Kept quiet but legible - never hidden, never below AA. */
.ba-disclaimer {
  max-width: 62ch;
  margin: var(--space-8) auto 0;
  font-size: var(--fs-xs);
  line-height: 1.6;
  color: var(--color-text-muted);
  text-align: center;
}

/* Keyboard users can scroll the strip directly, so it needs a focus ring */
.ba-scroller:focus-visible {
  outline: var(--focus-ring);
  outline-offset: 4px;
  border-radius: var(--radius-md);
}

/* ==========================================================================
   19. UTILITY BAR + MEGA-MENU + TWO-LEVEL MOBILE NAV
   Built to "Website Menu & Footer Structure" (1 Oct 2026).
   ========================================================================== */

/* --------------------------------------------------------------------------
   Utility bar — desktop only.
   Hidden below 980px because the sticky bottom bar already carries call and
   WhatsApp there; repeating them would spend the most valuable strip of a
   phone screen on a duplicate.
   -------------------------------------------------------------------------- */







/* --------------------------------------------------------------------------
   Mega-menu — desktop only. The panel is inside <header>, so it inherits the
   header's stacking context and a Tab out of the last link lands on the CTA.
   -------------------------------------------------------------------------- */

.nav__item {
  position: relative;
}

.nav__trigger {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  border: 0;
  background: none;
  font: inherit;
  cursor: pointer;
}

.nav__chevron {
  transition: transform var(--transition-base);
}

[data-mega-trigger][aria-expanded="true"] .nav__chevron {
  transform: rotate(180deg);
}

.mega {
  display: none;
}

@media (min-width: 980px) {


  .mega {
    display: block;
    position: absolute;
    top: calc(100% + var(--space-2));
    left: var(--gutter);
    right: var(--gutter);
    max-width: var(--container-max);
    margin-inline: auto;
    padding: var(--space-8);
    background-color: var(--surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
    pointer-events: auto;
  }

  .mega[hidden] {
    display: none;
  }

  .mega__grid {
    display: grid;
    /* Explicit column counts, not auto-fit. auto-fit packed 6 columns and
       pushed the 7th category onto a second row beside a large empty gap,
       because the categories hold very different numbers of treatments.
       Fixed counts keep the rows deliberate. */
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-6) var(--space-5);
    align-items: start;
  }

  .mega__cat {
    display: block;
    margin-bottom: var(--space-3);
    padding-bottom: var(--space-2);
    border-bottom: 1px solid var(--color-border);
    font-family: var(--font-heading);
    font-size: var(--fs-sm);
    font-weight: var(--fw-bold);
    color: var(--ink-900);
    text-decoration: none;
  }

  .mega__cat:hover,
  .mega__cat[aria-current] {
    color: var(--color-primary);
  }

  .mega__list {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .mega__list li + li {
    margin-top: var(--space-2);
  }

  .mega__link {
    display: block;
    font-size: var(--fs-xs);
    line-height: 1.45;
    color: var(--color-text);
    text-decoration: none;
  }

  .mega__link:hover,
  .mega__link[aria-current] {
    color: var(--color-primary);
    text-decoration: underline;
    text-underline-offset: 3px;
  }
}



/* --------------------------------------------------------------------------
   Mobile two-level accordion
   -------------------------------------------------------------------------- */

.mobile-nav__toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  width: 100%;
  padding: var(--space-3) 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: var(--fs-lg);
  font-weight: var(--fw-semibold);
  color: var(--ink-900);
  text-align: left;
  cursor: pointer;
}

.mobile-nav__toggle svg {
  flex-shrink: 0;
  transition: transform var(--transition-base);
}

.mobile-nav__toggle[aria-expanded="true"] svg {
  transform: rotate(180deg);
}

.mobile-nav__sublist {
  margin: 0 0 var(--space-2);
  padding: 0 0 0 var(--space-4);
  list-style: none;
  border-left: 2px solid var(--color-border);
}

.mobile-nav__sublist[hidden] {
  display: none;
}

/* Second level sits a step smaller so the hierarchy is readable at a glance */
.mobile-nav__link--sub {
  font-size: var(--fs-base);
  font-weight: var(--fw-regular);
}

.mobile-nav__link--all {
  font-weight: var(--fw-semibold);
  color: var(--color-primary);
}

.mobile-nav__cat .mobile-nav__toggle {
  font-size: var(--fs-base);
  font-weight: var(--fw-semibold);
}

/* --------------------------------------------------------------------------
   Footer rows 2-4
   -------------------------------------------------------------------------- */

.footer__clinic + .footer__clinic {
  margin-top: var(--space-5);
}

.footer__clinic-name {
  margin: 0 0 var(--space-1);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
}

.footer__clinic-name a {
  color: #FFFFFF;
  text-decoration: none;
}

.footer__clinic address,
.footer__hours {
  margin: 0;
  font-size: var(--fs-xs);
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.72);
}

.footer__directions {
  display: inline-block;
  margin-top: var(--space-1);
  font-size: var(--fs-xs);
  color: var(--green-200);
}

.footer__all {
  font-weight: var(--fw-semibold);
  color: var(--green-200) !important;
}

.footer__trust {
  margin-top: var(--space-10);
  padding-block: var(--space-5);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.footer__trust-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-4) var(--space-8);
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: rgba(255, 255, 255, 0.9);
  text-align: center;
}

.footer__social-row {
  padding-block: var(--space-6);
}

.footer__social-row .socials {
  justify-content: center;
}

.footer__bottom-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  text-align: center;
}

.footer__copy,
.footer__legal {
  margin: 0;
  font-size: var(--fs-xs);
  color: rgba(255, 255, 255, 0.6);
}

@media (min-width: 768px) {

  .footer__bottom-inner {
    flex-direction: row;
    justify-content: space-between;
    text-align: left;
  }
}

/* ==========================================================================
   20. TREATMENT PAGE COMPONENTS
   Mobile-first; the desktop two-column layouts live in responsive.css.
   ========================================================================== */

/* --- Hero with inline enquiry ------------------------------------------- */

.treat-hero {
  position: relative;
  isolation: isolate;          /* keeps the scrim under the copy, not the page */
  padding-top: calc(var(--chrome-h-mobile) + var(--space-6));
  padding-bottom: var(--space-10);
  background-color: var(--dark);
  overflow: hidden;
}

.treat-hero__media,
.treat-hero__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Right of centre: the face sits on that side of the frame, and the copy
     column sits on the left. */
  object-position: 68% 42%;
}

.treat-hero__scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg,
      rgba(10, 17, 13, 0.80) 0%,
      rgba(10, 17, 13, 0.62) 45%,
      rgba(10, 17, 13, 0.78) 100%);
}

.treat-hero__inner {
  position: relative;          /* above the scrim */
}

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

/* The hero runs on a photograph, so its copy inverts. Everything below the
   hero stays on the normal light palette. */
.treat-hero .page-hero__title,
.treat-hero .page-hero__lead,
.treat-hero .treat-hero__points li {
  color: #FFFFFF;
}

.treat-hero .page-hero__lead {
  /* Slight shadow rather than a heavier scrim: the scrim is already doing
     most of the work and darkening it further buries the photograph. */
  text-shadow: 0 1px 12px rgba(10, 17, 13, 0.55);
}

.treat-hero .page-hero__title {
  text-shadow: 0 2px 18px rgba(10, 17, 13, 0.5);
}

/* The accent must LIGHTEN on the hero, not use the brand green. --color-primary
   over the darkened photograph measured 1.47:1 against a required 3.0 for
   large bold text — effectively invisible. --green-200 is what the homepage
   hero already uses for the same reason. */
.treat-hero .text-accent {
  color: var(--green-200);
}

.eyebrow--invert {
  color: var(--green-200);
}

.treat-hero .treat-hero__points li::before {
  background-color: var(--green-300);
}

.treat-hero .btn--secondary {
  background-color: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.55);
  color: #FFFFFF;
}

.treat-hero .btn--secondary:hover {
  background-color: rgba(255, 255, 255, 0.24);
  border-color: #FFFFFF;
  color: #FFFFFF;
}

/* The enquiry card sits ON the photograph, so it needs to be opaque and
   lifted rather than the tinted panel it was on a white page. */
.treat-hero .enquiry {
  background-color: var(--surface);
  border-color: transparent;
  box-shadow: var(--shadow-xl);
}

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

.treat-hero__points li {
  position: relative;
  padding-left: var(--space-6);
  margin-top: var(--space-2);
  font-size: var(--fs-sm);
  color: var(--color-text);
}

.treat-hero__points li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--color-primary);
}

.enquiry {
  padding: var(--space-6);
  background-color: var(--color-tint);
  border: 1px solid var(--green-200);
  border-radius: var(--radius-xl);
}

.enquiry__title {
  margin: 0;
  font-size: var(--fs-xl);
  color: var(--ink-900);
}

.enquiry__sub {
  margin: var(--space-1) 0 var(--space-5);
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
}

/* The enquiry reuses .lead-field from lead-capture.css, so the inline form
   and the popup cannot drift apart visually. */
.enquiry .lead-field input,
.enquiry .lead-field select {
  background-color: var(--surface);
}

/* --- Byline / E-E-A-T strip --------------------------------------------- */

.byline {
  padding-block: var(--space-4);
  background-color: var(--bg);
  border-block: 1px solid var(--color-border);
}

.byline__inner {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-8);
}

.byline__item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
}

.byline__item svg {
  flex-shrink: 0;
  color: var(--color-primary);
}

.byline__item strong {
  color: var(--ink-700);
}

/* --- Direct answer box (AEO) -------------------------------------------- */

.answer-box {
  max-width: 72ch;
  padding: var(--space-6) var(--space-8);
  border-left: 4px solid var(--color-primary);
  background-color: var(--color-tint);
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
}

.answer-box__q {
  margin: 0 0 var(--space-3);
  font-size: var(--fs-xl);
  color: var(--ink-900);
}

.answer-box__text {
  margin: 0;
  font-size: var(--fs-md);
  line-height: var(--lh-relaxed);
  color: var(--color-text);
}

/* --- Cost ---------------------------------------------------------------- */

.cost-grid {
  display: grid;
  gap: var(--space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.cost-card {
  padding: var(--space-6);
  background-color: var(--surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

.cost-card h3 {
  margin: 0 0 var(--space-2);
  font-size: var(--fs-lg);
  color: var(--ink-900);
}

.cost-card p {
  margin: 0;
  font-size: var(--fs-sm);
  line-height: var(--lh-relaxed);
  color: var(--color-text);
}

.cost-note {
  max-width: 68ch;
  margin: var(--space-8) auto 0;
  font-size: var(--fs-sm);
  line-height: var(--lh-relaxed);
  color: var(--color-text);
  text-align: center;
}

.cost-actions {
  display: flex;
  justify-content: center;
  margin-top: var(--space-6);
}

/* --- Treatment modality cards -------------------------------------------- */

.mod-grid {
  display: grid;
  gap: var(--space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.mod-card {
  padding: var(--space-6);
  background-color: var(--surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

.mod-card__title {
  margin: 0 0 var(--space-2);
  font-size: var(--fs-lg);
  color: var(--ink-900);
}

.mod-card__for {
  margin: 0 0 var(--space-3);
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
}

.mod-card__for span {
  font-weight: var(--fw-bold);
  color: var(--color-primary);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
}

.mod-card__text {
  margin: 0;
  font-size: var(--fs-sm);
  line-height: var(--lh-relaxed);
  color: var(--color-text);
}

/* --- Suitability --------------------------------------------------------- */

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

.suit-card {
  padding: var(--space-6);
  background-color: var(--surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}

.suit-card h3 {
  margin: 0 0 var(--space-4);
  font-size: var(--fs-lg);
  color: var(--ink-900);
}

.suit-card ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.suit-card li {
  position: relative;
  /* 32px: clears the 20px marker plus a 12px gap. NOT --space-7, which does
     not exist in the scale — an undefined custom property makes the whole
     declaration invalid, the padding collapsed to 0, and the marker sat on
     top of the first characters of every item. */
  padding-left: var(--space-8);
  font-size: var(--fs-sm);
  line-height: var(--lh-relaxed);
  color: var(--color-text);
}

.suit-card li + li {
  margin-top: var(--space-3);
}

/* Marks are drawn, not glyphs: a tick character renders as tofu in several
   Android system fonts, which is exactly where this will be read most. */
.suit-card li::before {
  position: absolute;
  left: 0;
  top: 0.15em;
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-size: 12px;
  font-weight: var(--fw-bold);
  line-height: 1;
}

.suit-card--yes li::before {
  content: "\2713";
  background-color: var(--green-100);
  color: var(--green-800);
}

.suit-card--no li::before {
  content: "\00D7";
  background-color: #FDECEA;
  color: var(--danger);
  font-size: 14px;
}

.suit-card__note {
  margin: var(--space-5) 0 0;
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border);
  font-size: var(--fs-xs);
  line-height: var(--lh-relaxed);
  color: var(--color-text-muted);
}

/* --- Before / after care ------------------------------------------------- */

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

.care-card {
  padding: var(--space-6);
  background-color: var(--surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}

.care-card h3 {
  margin: 0 0 var(--space-4);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--color-border);
  font-size: var(--fs-lg);
  color: var(--ink-900);
}

.care-card ul {
  margin: 0;
  padding-left: var(--space-5);
  list-style: disc;
}

.care-card li {
  font-size: var(--fs-sm);
  line-height: var(--lh-relaxed);
  color: var(--color-text);
}

.care-card li + li {
  margin-top: var(--space-2);
}

/* Breadcrumb sitting ON the hero photograph. It is already inside
   .treat-hero__inner, which carries the container padding, so it resets the
   standalone version's own spacing and background. */
.breadcrumbs--invert {
  padding: 0 0 var(--space-4);
  background: none;
}

.breadcrumbs--invert ol {
  color: rgba(255, 255, 255, 0.75);
}

.breadcrumbs--invert a {
  color: rgba(255, 255, 255, 0.75);
}

.breadcrumbs--invert a:hover {
  color: #FFFFFF;
}

.breadcrumbs--invert li + li::before {
  color: rgba(255, 255, 255, 0.4);
}

.breadcrumbs--invert [aria-current="page"] {
  color: #FFFFFF;
}

/* ==========================================================================
   21. TREATMENT PAGE — conversion layout
   Structure follows the Youthville HIFU reference; palette is this site's
   green, taken from the homepage, not the reference's pink.
   ========================================================================== */

/* --- Trust pills in the hero -------------------------------------------- */

.trust-pills {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: var(--space-6) 0 0;
  padding: 0;
  list-style: none;
}

.trust-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-pill);
  background-color: rgba(255, 255, 255, 0.92);
  color: var(--ink-900);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  white-space: nowrap;
}

.enquiry__alt {
  margin: var(--space-3) 0 0;
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
  text-align: center;
}

/* --- Dark stat bar under the hero ---------------------------------------- */

.statbar {
  background-color: var(--green-900);
  color: #FFFFFF;
}

.statbar__inner {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-6) var(--space-4);
  padding-block: var(--space-8);
  text-align: center;
}

.statbar__item strong {
  display: block;
  font-family: var(--font-heading);
  font-size: var(--fs-3xl);
  font-weight: var(--fw-extra);
  line-height: 1;
  color: #FFFFFF;
}

.statbar__item span {
  display: block;
  margin-top: var(--space-2);
  font-size: var(--fs-xs);
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.72);
}

/* --- Feature / treatment cards ------------------------------------------- */

.feat-grid {
  display: grid;
  gap: var(--space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.feat-card {
  padding: var(--space-6);
  background-color: var(--surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

.feat-card__icon {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  margin-bottom: var(--space-4);
  border-radius: var(--radius-md);
  background-color: var(--color-tint-strong);
  color: var(--color-primary);
}

.feat-card__num {
  display: block;
  margin-bottom: var(--space-2);
  font-family: var(--font-heading);
  font-size: var(--fs-sm);
  font-weight: var(--fw-extra);
  letter-spacing: var(--tracking-wide);
  line-height: 1;
  color: var(--color-primary);
}

.feat-card__title {
  margin: 0 0 var(--space-3);
  font-size: var(--fs-lg);
  line-height: var(--lh-snug);
  color: var(--ink-900);
}

.feat-card p {
  margin: 0;
  font-size: var(--fs-sm);
  line-height: var(--lh-relaxed);
  color: var(--color-text);
}

.feat-card p + p {
  margin-top: var(--space-3);
}

/* The closing card in the grid is a CTA rather than more reading. */
.feat-card--cta {
  display: flex;
  flex-direction: column;
  justify-content: center;
  background-color: var(--green-900);
  border-color: transparent;
}

.feat-card--cta .feat-card__title,
.feat-card--cta p {
  color: #FFFFFF;
}

.feat-card--cta p {
  margin-bottom: var(--space-5);
  color: rgba(255, 255, 255, 0.78);
}

/* --- Centred prose ------------------------------------------------------- */

.prose--center {
  margin-inline: auto;
  text-align: center;
}

/* --- Two-column split ---------------------------------------------------- */

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

.split__col > p {
  margin: 0 0 var(--space-4);
  font-size: var(--fs-md);
  line-height: var(--lh-relaxed);
  color: var(--color-text);
}

.split__title {
  margin: 0 0 var(--space-4);
  font-size: var(--fs-xl);
  color: var(--ink-900);
}

/* --- "What we won't do" panel -------------------------------------------- */

.promise {
  display: grid;
  gap: 0;
  border-radius: var(--radius-xl);
  overflow: hidden;
}

.promise__main {
  padding: var(--space-8);
  background-color: var(--green-900);
  color: #FFFFFF;
}

.promise__main h2 {
  margin: var(--space-2) 0 var(--space-4);
  color: #FFFFFF;
}

.promise__main p {
  margin: 0 0 var(--space-4);
  font-size: var(--fs-sm);
  line-height: var(--lh-relaxed);
  color: rgba(255, 255, 255, 0.82);
}

.promise__side {
  padding: var(--space-8);
  background-color: var(--color-tint);
}

.promise__side h3 {
  margin: 0 0 var(--space-4);
  font-size: var(--fs-lg);
  color: var(--ink-900);
}

.promise__side p {
  margin: 0 0 var(--space-4);
  font-size: var(--fs-sm);
  line-height: var(--lh-relaxed);
  color: var(--color-text);
}

/* --- Doctor panel -------------------------------------------------------- */

.docpanel {
  display: grid;
  gap: var(--space-6);
  padding: var(--space-6);
  background-color: var(--surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
}

.docpanel__photo img {
  display: block;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  object-fit: cover;
}

.docpanel__name {
  margin: 0 0 var(--space-3);
  font-size: var(--fs-xl);
  color: var(--ink-900);
}

.docpanel__body p {
  margin: 0 0 var(--space-4);
  font-size: var(--fs-sm);
  line-height: var(--lh-relaxed);
  color: var(--color-text);
}

.cred-pills {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: 0 0 var(--space-5);
  padding: 0;
  list-style: none;
}

.cred-pills li {
  padding: var(--space-1) var(--space-3);
  border: 1px solid var(--green-200);
  border-radius: var(--radius-pill);
  background-color: var(--color-tint);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  color: var(--green-800);
}

/* --- Closing band meta --------------------------------------------------- */

/* .cta-band is a LIGHT tinted panel on this site, not the dark band the
   reference used. Writing this block in white first measured 1.08:1 — the
   location and hours lines were invisible. These colours are the ones that
   pass against --green-50. */
.cta-band__meta {
  margin: var(--space-8) 0 0;
  padding: var(--space-5) 0 0;
  border-top: 1px solid var(--green-200);
  list-style: none;
  display: grid;
  gap: var(--space-3);
}

.cta-band__meta li {
  display: flex;
  align-items: flex-start;
  /* Centred, like the rest of the band. Left-aligned it drifted to one side
     once the shell widened to 900px for the button row. */
  justify-content: center;
  gap: var(--space-2);
  font-size: var(--fs-xs);
  line-height: 1.5;
  color: var(--color-text);
  text-align: center;
}

.cta-band__meta svg {
  flex-shrink: 0;
  margin-top: 2px;
  color: var(--color-primary);
}

.cta-band__meta a {
  color: var(--color-primary-dark);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* --- Copy beside an image ------------------------------------------------ */

.media-split {
  display: grid;
  gap: var(--space-8);
  align-items: center;
}

.media-split__title {
  margin: var(--space-2) 0 var(--space-5);
  font-size: var(--fs-2xl);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--ink-900);
}

.media-split__copy > p {
  margin: 0 0 var(--space-4);
  max-width: 60ch;
  font-size: var(--fs-md);
  line-height: var(--lh-relaxed);
  color: var(--color-text);
}

.media-split__copy > p:last-child {
  margin-bottom: 0;
}

.media-split__media {
  margin: 0;
}

.media-split__media img {
  display: block;
  width: 100%;
  height: auto;
  /* Ratio pinned here as well as on the attributes: the image is lazy, and
     without it the column collapses before the file arrives. */
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
}

/* A card carrying a diagram drops its own padding and hands it to an inner
   body, so the image is simply 100% wide.

   The first attempt bled the image out with negative margins and
   `width: calc(100% + 48px)`. That resolved to 366px on a 416px card — the
   percentage did not resolve against the box assumed — and left a 49px gap
   down the right side of every card. Moving the padding inwards removes the
   arithmetic entirely. */
.feat-card:has(> .feat-card__media) {
  padding: 0;
  overflow: hidden;
}

.feat-card__media {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.feat-card__body {
  padding: var(--space-6);
}

/* --- Results timeline ---------------------------------------------------- */

.media-split__media--wide img {
  aspect-ratio: 4 / 3;
}

.timeline-block {
  margin-top: var(--space-20);
}

.timeline {
  position: relative;
  display: grid;
  gap: var(--space-6);
  margin: 0 0 var(--space-6);
  padding: 0 0 0 var(--space-8);
  list-style: none;
}

/* The rail. Mobile runs it vertically down the left; the desktop rule in
   responsive.css flips it horizontal. */
.timeline::before {
  content: "";
  position: absolute;
  left: 7px;
  top: 8px;
  bottom: 8px;
  width: 2px;
  background: linear-gradient(var(--green-300), var(--green-200));
}

.timeline__step {
  position: relative;
}

.timeline__dot {
  position: absolute;
  left: calc(var(--space-8) * -1);
  top: 4px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background-color: var(--surface);
  border: 4px solid var(--color-primary);
}

.timeline__when {
  margin: 0;
  font-family: var(--font-heading);
  font-size: var(--fs-xl);
  font-weight: var(--fw-extra);
  line-height: 1.1;
  color: var(--ink-900);
}

.timeline__what {
  margin: var(--space-1) 0 0;
  font-size: var(--fs-sm);
  line-height: 1.5;
  color: var(--color-text-muted);
}

.timeline__note {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  max-width: 62ch;
  margin: 0 auto var(--space-10);
  padding: var(--space-4) var(--space-5);
  border-left: 3px solid var(--color-primary);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  background-color: var(--surface);
  font-size: var(--fs-sm);
  line-height: 1.55;
  color: var(--color-text);
}

.timeline__note svg {
  flex-shrink: 0;
  margin-top: 3px;
  color: var(--color-primary);
}

/* The document's closing line on timelines is an opinion, not a fact — it is
   set apart so it lands as one. */
.timeline__quote {
  margin-top: var(--space-6);
  font-size: var(--fs-lg);
  font-style: italic;
  line-height: var(--lh-relaxed);
  color: var(--ink-700);
}

/* ==========================================================================
   22. GOOGLE ADS LANDING PAGES
   Same components and palette as the rest of the site; the differences are
   a stripped header and a tighter hero.
   ========================================================================== */

/* Simplified header: logo, phone, CTA. No nav — paid traffic should have no
   exit paths other than the conversion. */
.header--lp .header__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding-inline: var(--space-5);
}

.header--lp__actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.header--lp__phone {
  display: none;            /* phone shows from 560px; mobile has the sticky bar */
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--ink-900);
  text-decoration: none;
  white-space: nowrap;
}

.header--lp__phone:hover {
  color: var(--color-primary);
}

/* The hero must fit one viewport on mobile with the CTA visible, so it runs
   tighter than the treatment-page hero. */
.lp-hero {
  padding-top: calc(var(--header-h-mobile) + var(--space-8));
  padding-bottom: var(--space-10);
}

.lp-hero__copy {
  max-width: 34rem;
}

.lp-hero .page-hero__lead {
  font-size: var(--fs-md);
}

.lp-hero .trust-pills {
  margin-top: var(--space-6);
}

/* --- Treatment picker ---------------------------------------------------- */

.pick-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.pick-card a {
  position: relative;
  display: block;
  border-radius: var(--radius-lg);
  overflow: hidden;
  text-decoration: none;
  box-shadow: var(--shadow-sm);
}

.pick-card img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform var(--dur-slow) var(--ease-out);
}

.pick-card a:hover img {
  transform: scale(1.05);
}

/* Scrim behind the label: the photographs vary in brightness, so a plain
   white label fails contrast on the lighter ones. */
.pick-card__label {
  position: absolute;
  inset: auto 0 0 0;
  padding: var(--space-8) var(--space-4) var(--space-3);
  background: linear-gradient(transparent, rgba(10, 17, 13, 0.82));
  color: #FFFFFF;
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  line-height: 1.25;
}

.lp-reviews__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  margin: var(--space-8) 0 0;
  font-size: var(--fs-sm);
  color: var(--color-text);
}

.lp-reviews__foot a {
  color: var(--color-primary-dark);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* --- Landing hero: copy beside the booking form -------------------------- */

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

/* Deliberately smaller than a service-page H1. A landing headline competes
   with the form for the same viewport, and at --fs-4xl it ran to four lines
   on desktop and pushed the form below the fold. */
.lp-hero .page-hero__title {
  /* Wide enough for the longest forced line ("Hair & Aesthetic Clinic."),
     or the 18ch cap re-wrapped it and defeated the <br>. */
  max-width: 26ch;
  font-size: clamp(1.75rem, 1.25rem + 1.8vw, 2.5rem);
  line-height: 1.12;
}

.lp-hero .page-hero__lead {
  max-width: 46ch;
  margin-top: var(--space-4);
  font-size: var(--fs-base);
}

.lp-hero .trust-pills {
  margin-top: var(--space-5);
}

.lp-hero .trust-pill {
  font-size: 0.75rem;
  padding: 6px var(--space-3);
}

.lp-hero .enquiry {
  background-color: var(--surface);
  border-color: transparent;
  box-shadow: var(--shadow-xl);
}

/* --- Landing-page-only blocks -------------------------------------------- */

/* "Do any of these sound familiar?" — a mirror, not a feature list. */
.check-grid {
  display: grid;
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.check-item {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4);
  background-color: var(--surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  font-size: var(--fs-md);
  line-height: var(--lh-relaxed);
  color: var(--color-text);
}

/* A fixed tile, not an inline image. flex: 0 0 auto stops a long statement
   from squeezing the drawing, and the explicit box keeps all four cards'
   text starting at the same x however many lines each one wraps to. */
.check-item__icon {
  flex: 0 0 auto;
  width: 72px;
  height: 72px;
  padding: var(--space-3);
  background-color: var(--color-tint);
  border: 1px solid var(--green-300);
  border-radius: var(--radius-md);
}

.check-item__text {
  margin: 0;
}

/* Laser treatment areas */
.area-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.area-card {
  padding: var(--space-5);
  background-color: var(--surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

.area-card__name {
  margin: 0 0 var(--space-1);
  font-size: var(--fs-base);
  color: var(--ink-900);
}

.area-card__note {
  margin: 0;
  font-size: var(--fs-xs);
  line-height: 1.5;
  color: var(--color-text-muted);
}

/* The acne page's empathy paragraph — deliberately unadorned. */
.empathy {
  max-width: 62ch;
  margin-inline: auto;
  font-size: var(--fs-lg);
  line-height: var(--lh-relaxed);
  color: var(--color-text);
  text-align: center;
}

/* ==========================================================================
   WORK IN PROGRESS PAGE
   Served at the URL of every treatment and info page that is written but not
   built yet. The URL stays correct, so when the real page lands it simply
   replaces the stub and no link anywhere has to change.
   ========================================================================== */

.wip {
  text-align: center;
}

.wip__badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  background-color: var(--color-tint);
  border: 1px solid var(--green-200);
  border-radius: var(--radius-pill);
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--green-800);
}

.wip__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--green-600);
}

.wip__title {
  margin-top: var(--space-5);
}

.wip__lead {
  max-width: 60ch;
  margin: var(--space-5) auto 0;
  font-size: var(--fs-lg);
  line-height: var(--lh-relaxed);
  color: var(--color-text-muted);
}

/* --- the draft sheet ----------------------------------------------------
   A page mid-write. Each row is a track with a fill that sweeps across it,
   staggered, so the sheet reads as being filled in rather than loading. */

.wip-sheet {
  width: 100%;
  max-width: 420px;
  margin: var(--space-10) auto 0;
  padding: var(--space-6);
  background-color: var(--surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  text-align: left;
}

.wip-sheet__head {
  width: 55%;
  height: 16px;
  margin-bottom: var(--space-5);
  border-radius: var(--radius-pill);
  background-color: var(--green-600);
}

.wip-sheet__row {
  height: 10px;
  margin-bottom: var(--space-3);
  border-radius: var(--radius-pill);
  background-color: var(--green-50);
  overflow: hidden;
}

.wip-sheet__row:nth-child(3) { width: 92%; }
.wip-sheet__row:nth-child(4) { width: 100%; }
.wip-sheet__row:nth-child(5) { width: 78%; }

.wip-sheet__fill {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  background-color: var(--green-200);
  /* scaled from the left edge, so the fill grows the way a line is written */
  transform-origin: left center;
  transform: scaleX(0);
}

.wip-sheet__block {
  height: 90px;
  margin-top: var(--space-5);
  border-radius: var(--radius-md);
  background-color: var(--green-50);
  border: 1px dashed var(--green-200);
}

.wip__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-4);
  margin-top: var(--space-10);
}

.wip__note {
  margin-top: var(--space-6);
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
}

/* --- what you can reach today ------------------------------------------ */

.wip-next {
  display: grid;
  gap: var(--space-3);
  margin: var(--space-6) 0 0;
  padding: 0;
  list-style: none;
  text-align: left;
}

.wip-next__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  background-color: var(--surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  font-weight: 600;
  color: var(--color-text);
  text-decoration: none;
  transition: border-color var(--dur-base) var(--ease-out),
              background-color var(--dur-base) var(--ease-out);
}

.wip-next__link:hover,
.wip-next__link:focus-visible {
  border-color: var(--green-500);
  background-color: var(--color-tint);
}

.wip-next__link svg {
  flex: 0 0 auto;
  color: var(--green-700);
}

/* ==========================================================================
   FLOATING WHATSAPP BUTTON
   On every page, via the generated footer region.
   ========================================================================== */

.wa-float {
  /* Below 980px the sticky CTA bar owns the bottom of the screen (48px icon
     + 12px padding top and bottom + the safe area), so the button is lifted
     clear of it. The offset is a custom property rather than a hard value so
     the breakpoints below can move it without restating the whole rule. */
  --wa-bottom: calc(84px + env(safe-area-inset-bottom, 0px));

  position: fixed;
  right: var(--space-4);
  bottom: var(--wa-bottom);
  z-index: var(--z-sticky);

  display: grid;
  place-items: center;
  width: 73px;
  height: 73px;
  border-radius: 50%;

  /* The site's own green, not WhatsApp's #25D366: white on that brand green
     measures about 1.8:1, which fails the 3:1 that WCAG 1.4.11 asks of a
     control. The glyph is what makes the button recognisable anyway. */
  background-color: var(--color-primary);
  color: #FFFFFF;
  box-shadow: 0 6px 20px rgba(16, 24, 20, 0.28);

  transition: background-color var(--transition-base),
              transform var(--transition-base);
}

.wa-float:hover,
.wa-float:focus-visible {
  background-color: var(--color-primary-dark);
  transform: translateY(-2px);
}

.wa-float svg {
  position: relative;   /* above the ring */
  z-index: 1;
}

/* The expanding ring. A separate element rather than ::before so the hover
   transform on the button does not scale it as well. */
.wa-float__ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background-color: var(--color-primary);
  opacity: 0.45;
}

/* Hidden while the mobile menu is open, exactly as the sticky bar is -
   otherwise it floats above the open panel. */
body.is-locked .wa-float {
  display: none;
}