/* ============================================================
   RIVĒ LUME — pages.css
   Page-level layout primitives (Phase 2). Inherits from
   tokens.css, base.css, components.css.
   Each block here is additive; nothing here should override
   a Phase 1 design-system rule.
   ============================================================ */


/* ============================================================
   Page wrapper — full-height column so the footer sits at
   the bottom on short pages without ever floating mid-screen.
   ============================================================ */

.page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.page__main {
  flex: 1 0 auto;
}

.page__footer {
  flex-shrink: 0;
}


/* ============================================================
   Site navigation — extends Phase 1 .nav with the
   Phase 2 cluster IA (1×/1×/1×/2.75×/1×).
   ============================================================ */

:root {
  /* Fluid nav-unit. The active-cluster gap (1×) and the
     MEMBERSHIP→WHO-WE-ARE gap (2.6×) both derive from this, so
     scaling it compacts the whole bar continuously. It tracks the
     viewport linearly from 80px at ≥1280 down to 24px at 950 (the
     Layout B→A boundary), then floors — so ENQUIRE never overflows
     the right edge anywhere in the 950–1279 band. Below 950 it holds
     at 24px (Layout A nav handled separately).
     calc resolves to 80px @1280 and 24px @950. */
  --nav-unit: clamp(24px, calc(16.97vw - 137.2px), 80px);
}

.nav--site .nav__inner {
  /* Three top-level flex children: brand · menu · CTA.
     space-between pins brand at the left edge and CTA at the
     right edge, and shares any extra space evenly between them
     and the menu in the middle. `gap` enforces a minimum
     breathing room so the menu never butts up against the
     wordmark or the button when the viewport narrows. */
  justify-content: space-between;
  gap: 32px;
  /* Break out of the 1280 cap so brand and CTA sit near the
     viewport edges, as in the reference. */
  max-width: 100%;
  /* Asymmetric padding at all viewports: ENQUIRE button stays
     flush with the right viewport edge as the window narrows.
     (The 1024+ override below tweaks the left inset.) */
  padding-inline: var(--container-gutter) 0;
}

@media (min-width: 950px) {
  .nav--site .nav__inner {
    /* Left inset and the minimum brand·menu·CTA gap both contract
       with the viewport across 950–1280 (inset 60→28px, gap
       56→28px) so the menu keeps reclaiming horizontal room as the
       window narrows. Endpoints matched to the --nav-unit ramp.
       calc resolves to 60px/56px @1280 and 28px/28px @950. */
    padding-inline: clamp(28px, calc(9.70vw - 64.2px), 60px) 0;
    gap: clamp(28px, calc(8.48vw - 52.6px), 56px);
  }
}

/* Uniform nav height across ALL layouts (previously 60px below 1024px
   and 96px at/above, which made the bar jump shorter in the lower half
   of Layout B). Per user: same height everywhere. Scoped to .nav--site
   so the styleguide demo nav is unaffected; a single non-media rule of
   equal specificity placed after the component rules wins at every
   width. */
.nav--site {
  height: 96px;
}

/* Layouts B & C (≥950): bar +4px taller per user (96 → 100). Layout A
   (790–949) keeps its own 116px; Mobile / Layout NM (<790) stay 96px. */
@media (min-width: 950px) {
  .nav--site { height: 100px; }
}

.nav__brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  flex: 0 0 auto;
}

.nav__brand-rule {
  width: 1px;
  height: 22px;
  background: rgba(255, 255, 255, 0.4);
  flex-shrink: 0;
  display: none;
}
@media (min-width: 1024px) {
  .nav__brand-rule { display: block; }
}

.nav__brand-mark {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}
.nav__brand-mark img {
  height: 21px;
  width: auto;
  transform: translateY(2px);
  display: block;
}
@media (min-width: 1024px) {
  .nav__brand-mark img { height: 23px; }
}

/* Cluster shell — desktop only */
.nav__menu {
  display: none;
  align-items: center;
  gap: 0;
}
@media (min-width: 768px) {
  .nav__menu {
    display: flex;
    flex: 0 0 auto;
  }
}

.nav__cluster {
  display: inline-flex;
  align-items: center;
  gap: var(--nav-unit); /* 1× between items inside a cluster */
  /* never wrap nav link labels onto multiple lines */
  white-space: nowrap;
  flex-shrink: 0;
}

.nav__cluster--passive {
  /* 2.6× gap between MEMBERSHIP and WHO WE ARE, matching the
     reference composition at 1440. */
  margin-left: calc(2.6 * var(--nav-unit));
}

/* ENQUIRE block. flex-shrink: 0 keeps it from collapsing when
   the viewport narrows; space-between on the inner row glues it
   to the right edge. translateX shifts the block 8px past the
   nav's right padding so the button visually sits tighter to
   (or past) the viewport edge. */
.nav__cta {
  flex-shrink: 0;
  transform: translateX(8px);
}
.nav--site .nav__cta {
  font-family: var(--font-display-normal);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  line-height: 1;
}

/* Override Phase 1 .nav__link to keep type spec but allow
   it to live inside our clusters without inherited padding
   blowing out the rhythm. */
.nav--site .nav__link {
  font-family: var(--font-display-normal);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  padding-block: 0;
  line-height: 1;
  /* Faster than the base 200ms opacity fade; hover darkens the color. */
  transition: color 120ms var(--ease-out);
}

.nav--site .nav__link:hover {
  opacity: 1;
  color: var(--warm-accent);
}

/* ============================================================
   Wellness submenu (desktop ≥768) — hovering "Wellness" cascades
   "IV Infusions" + "Weight Management" down from the nav item,
   stacked and fading in. Pure CSS hover/focus-within; the links are
   native hash anchors so they scroll like the rest of the nav.
   ============================================================ */

/* The wrapper spans the full nav height so the dropdown can anchor to
   the BOTTOM of the bar (top: 100%) with no dead gap between the link
   and the panel — the whole column stays hoverable. The link itself
   stays vertically centered. Height is inherited (100%) from the nav so
   it tracks the real bar height at every breakpoint. */
.nav--site .nav__inner,
.nav--site .nav__menu,
.nav--site .nav__cluster {
  height: 100%;
}
.nav__item--has-sub {
  position: relative;
  display: flex;
  align-items: center;
  height: 100%;
}

/* Two-phase reveal: (1) "IV Infusions" drops out of the Wellness link,
   centered, and fades in. (2) Then the pair SPLITS — IV slides left and
   "Weight Management" slides right + fades in. The split (horizontal) and
   the drop (vertical+fade) live on different elements so they can run on
   independent timings and still reverse cleanly on un-hover:
     .nav__sub-link   → owns the horizontal split (translateX), delayed
     .nav__sub-inner  → owns the vertical drop + fade (translateY/opacity)
   Items are absolutely centered on the link's center point, so the layout
   is width-independent: IV's right edge ends 20px left of center, Weight's
   left edge 20px right of center → an even 40px gap, symmetric. */
.nav__sub {
  position: absolute;
  top: 100%;
  left: 50%;
  width: 0;            /* zero-width anchor: children center on link center */
  height: 14px;
  /* 24px below the link (net), per user; nudged up 4px (−18 → −22). */
  margin-top: -22px;
  /* Container only toggles hit-testing; the items handle the reveal. On
     close, both visibility AND pointer-events are HELD for 600ms (longer
     than the old ~200ms) so there's time to slide the cursor across the
     gap from one sub-item to the other — keeping pointer-events live lets
     the second item re-trigger the open before the panel disappears. */
  visibility: hidden;
  pointer-events: none;
  transition: visibility 0s linear 600ms, pointer-events 0s linear 600ms;
  z-index: 1;
}
.nav__item--has-sub:hover .nav__sub,
.nav__item--has-sub:focus-within .nav__sub {
  visibility: visible;
  pointer-events: auto;
  transition: visibility 0s, pointer-events 0s;
}

.nav__sub-link {
  position: absolute;
  top: 0;
  left: 0;
  /* Resting (collapsed) position: centered on the link's center point. */
  transform: translateX(-50%);
  font-family: var(--font-display-normal);
  /* −1px per user (12 → 11). */
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  line-height: 1;
  white-space: nowrap;
  color: var(--white);
  /* CLOSING (base) state: the position transform snap-back is deferred
     until AFTER the 600ms close window, so on hover-off the items hold
     their split positions and simply fade out (no slide-back). */
  transition: transform 0s linear 600ms, color 120ms var(--ease-out);
}

/* IV rides above Weight (z-index legacy from the old split). Both items
   now REST in their final positions and only fade in — no slide. IV's
   right edge sits 14px left of the Wellness center, Weight's left edge
   14px right of it → an even 28px gap, symmetric (Layouts B/C; Layout A
   uses its own 32px override). */
.nav__sub-link--iv {
  transform: translateX(calc(-100% - 14px));
  z-index: 2;
}
.nav__sub-link--weight {
  transform: translateX(14px);
  z-index: 1;
}

.nav__sub-inner {
  display: inline-block;
  opacity: 0;
  /* Start lifted (tucked up toward the bar); rolls DOWN into place on
     open. CLOSING (base): wait 250ms after mouse-off BEFORE the fade
     starts — so while deciding between the two items the panel just
     holds steady — then fade over 350ms (250 + 350 = the 600ms close
     window, so it ends exactly as visibility cuts). Transform reset is
     likewise deferred to the window end, so hover-off is a pure fade. */
  transform: translateY(-16px);
  transition: opacity 350ms var(--ease-out) 250ms, transform 0s linear 600ms;
}

/* Both items appear at once — roll DOWN into place (ease-out) while fading. */
.nav__item--has-sub:hover .nav__sub-link--iv .nav__sub-inner,
.nav__item--has-sub:focus-within .nav__sub-link--iv .nav__sub-inner,
.nav__item--has-sub:hover .nav__sub-link--weight .nav__sub-inner,
.nav__item--has-sub:focus-within .nav__sub-link--weight .nav__sub-inner {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 500ms var(--ease-out) 60ms,
              transform 500ms var(--ease-out) 60ms;
}

/* Weight's inner rests flat horizontally; the roll-down translateY is set
   on the shared .nav__sub-inner rule above. */
.nav__sub-link--weight .nav__sub-inner {
  transform: translateY(-16px);
}

.nav__sub-link:hover {
  color: var(--warm-accent);
}

@media (prefers-reduced-motion: reduce) {
  .nav__sub-link,
  .nav__sub-inner {
    transition: opacity 120ms linear;
  }
  /* Skip the horizontal choreography — items rest in their split spots. */
  .nav__item--has-sub:hover .nav__sub-link,
  .nav__item--has-sub:focus-within .nav__sub-link {
    transition-delay: 0s;
  }
  .nav__item--has-sub:hover .nav__sub-inner,
  .nav__item--has-sub:focus-within .nav__sub-inner {
    transition-delay: 0s;
  }
}

/* Compact button variant for the nav bar */
.btn--nav {
  /* Text sits ~12-15px from the LEFT edge of the button.
     Padding-right narrowed 20% from prior so the slab feels
     less dominant against the right edge. */
  padding: 7px 50px 7px 12px;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-align: left;
  /* Synthetic stroke boosts apparent weight past what the
     loaded Instrument Sans cuts (max 800) can deliver. */
  -webkit-text-stroke: 0.4px currentColor;
}
/* Bumped from the legacy 1024 step to the 950 Layout-A boundary so
   the ENQUIRE button holds one constant width through the whole
   950–1279 compaction band (no mid-band jump). */
@media (min-width: 950px) {
  .btn--nav { padding: 9px 65px 9px 15px; }
}


/* ============================================================
   LAYOUT NM — "nav mobile" (< 790px). A nav-only breakpoint: below
   790 the full text menu can't share a row with the centered links +
   flush ENQUIRE without colliding, so the nav collapses to the
   hamburger + full-screen overlay. This overrides the legacy 768
   menu/hamburger swap (higher-specificity .nav--site selectors win in
   the 768–789 overlap). Page content still uses the A/B/C bands; this
   is purely the navigation.
   ============================================================ */
@media (max-width: 789px) {
  .nav--site .nav__menu { display: none; }
  .nav--site .nav__hamburger { display: inline-flex; }

  /* Three-up mobile bar: hamburger left · wordmark centered · ENQUIRE
     flush right. The brand is absolutely centered so it stays dead-
     centre on the viewport regardless of the differing widths of the
     hamburger and the button on either side. */
  .nav--site .nav__inner {
    position: relative;
    padding-inline: 32px 0;   /* hamburger sits 32px from the left edge; ENQUIRE flush right */
  }
  .nav--site .nav__hamburger {
    order: -1;                /* move ahead of brand/CTA → left side */
    /* Nudged to sit visually centred with the wordmark (logo carries a
       baked-in optical drop); tuned to 4px per user. */
    transform: translateY(4px);
  }
  .nav--site .nav__brand {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }
  .nav--site .nav__cta {
    margin-left: auto;        /* push the button to the right edge */
    transform: translateY(2px); /* match the logo's 2px optical drop so hamburger·logo·ENQUIRE share one centreline */
  }
  /* ENQUIRE reads as a plain nav link here (no white slab): transparent
     ground, white label in the same type as the menu items from the
     other layouts (13px / 600 / 0.18em, no synthetic stroke). Seated
     32px off the right edge to mirror the hamburger's 32px left inset.
     Hover is the nav-link whisper (opacity), not a background change. */
  .nav--site .nav__cta .btn--nav {
    background: transparent;
    border-color: transparent;
    color: var(--white);
    -webkit-text-stroke: 0;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.18em;
    padding: 8px 32px 8px 12px;
    text-align: right;
    transition: opacity var(--dur-link) var(--ease-out);
  }
  .nav--site .nav__cta .btn--nav:hover {
    background: transparent;
    color: var(--white);
    opacity: 0.6;
  }
}

/* Phone view (≤649): drop ENQUIRE from the nav entirely — the hero
   carries the ENQUIRE button instead. (650–789 keeps the nav text
   label from the NM block above.) */
@media (max-width: 649px) {
  .nav--site .nav__cta { display: none; }
}


/* ============================================================
   LAYOUT A NAV (790–949) — stacked.
   Above the Layout NM cutoff (790) the hamburger gives way to the
   full menu. The bar becomes two rows: the wordmark centered on top,
   then the four links centered beneath it, with ENQUIRE pinned flush
   to the right edge on the link row.
   ============================================================ */
@media (min-width: 790px) and (max-width: 949px) {
  /* Full menu in, hamburger out, across Layout A. */
  .nav--site .nav__menu { display: flex; }
  .nav--site .nav__hamburger { display: none; }

  /* Tight two-row bar. */
  .nav--site { height: 116px; }

  .nav--site .nav__inner {
    position: relative;       /* anchor for the pinned ENQUIRE button */
    flex-wrap: wrap;
    justify-content: center;
    align-content: center;
    height: auto;             /* release the 100% chain so wrap sizes to content */
    row-gap: 14px;
    padding-inline: 48px;
    /* Nudge the centered logo+links block (and the ENQUIRE button, which
       is anchored to this inner) up 8px without changing the bar height. */
    transform: translateY(-8px);
  }

  /* Row 1 — wordmark centered across the full width. */
  .nav--site .nav__brand {
    flex: 0 0 100%;
    justify-content: center;
  }

  /* Row 2 — the four links (active trio + WHO WE ARE) left-justified
     beneath the wordmark, the first item (Aesthetics) starting 48px
     from the viewport edge. The menu gap between the two clusters
     matches the active cluster's internal gap so the four read as a
     single rhythm; the desktop 2.6× passive gap is dropped here. */
  .nav--site .nav__menu {
    flex: 0 0 100%;
    height: auto;
    justify-content: flex-start;
    gap: 44px;                /* +16px between items (was 28) */
    padding-top: 12px;        /* nudge the link row down off the wordmark */
  }
  .nav--site .nav__cluster { height: auto; gap: 44px; }  /* match the menu gap so all four read evenly */
  .nav__cluster--passive { margin-left: 0; }

  /* ENQUIRE — flush to the right viewport edge, vertically aligned with
     the centered link row (top lands its center on the links, given the
     fixed row-1 logo + row-gap + menu padding-top metrics above).
     right:0 sits flush because absolute offsets resolve against the
     inner's full-width padding box, not its 20px content inset. */
  .nav--site .nav__cta {
    position: absolute;
    top: 39px;
    right: 0;
    transform: none;
  }
  .btn--nav { padding: 8px 18px; text-align: center; }

  /* Wellness panel sits 16px below its link here. The item is only as
     tall as the link, so the gap between link and panel is dead space:
     without a bridge the cursor loses :hover crossing it and the panel
     closes before you reach an item. This transparent strip spans the
     gap (out of flow — it doesn't shift the tuned link/button positions)
     and keeps the menu open all the way down to the items. */
  .nav--site .nav__item--has-sub { height: auto; }
  .nav--site .nav__sub { margin-top: 16px; }
  /* Bring IV Infusions / Weight Management 8px closer (40px gap → 32px):
     each rests 16px off the Wellness centre instead of the base 20px. */
  .nav--site .nav__sub-link--iv { transform: translateX(calc(-100% - 16px)); }
  .nav--site .nav__sub-link--weight { transform: translateX(16px); }
  .nav--site .nav__item--has-sub::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    width: 320px;
    height: 36px;          /* bridges the 16px gap (+20px into the panel) */
  }
}


/* ============================================================
   Mobile nav overlay — full-screen, noir, items stacked
   with the same active/passive rhythm rendered vertically.
   ============================================================ */

.nav__hamburger {
  display: inline-flex;
}
@media (min-width: 768px) {
  .nav__hamburger { display: none; }
}

.nav-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  /* Frosted glass to match the scrolled nav bar (rgba(10,10,10,.55) +
     blur) — a touch denser + stronger blur since this is a full-screen
     reading surface. The blur materialises on open (see transition). */
  background: rgba(10, 10, 10, 0.62);
  backdrop-filter: blur(20px) saturate(115%);
  -webkit-backdrop-filter: blur(20px) saturate(115%);
  color: var(--white);
  display: flex;
  flex-direction: column;
  /* Content inset 48px from the left edge (32 + 16); right gutter +16px
     to match. */
  padding: 60px calc(var(--container-gutter) + 16px) var(--space-8) 48px;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-hover) var(--ease-out);
}

/* Blur materialises as the overlay opens: start clear (no blur), settle
   to the frosted state — the glass "forms" over the page. */
@media (prefers-reduced-motion: no-preference) {
  .nav-overlay {
    backdrop-filter: blur(0) saturate(100%);
    -webkit-backdrop-filter: blur(0) saturate(100%);
    transition: opacity 0.45s var(--ease-out),
                backdrop-filter 0.6s var(--ease-out),
                -webkit-backdrop-filter 0.6s var(--ease-out);
  }
  .nav-overlay.is-open {
    backdrop-filter: blur(20px) saturate(115%);
    -webkit-backdrop-filter: blur(20px) saturate(115%);
  }
}

.nav-overlay.is-open {
  opacity: 1;
  pointer-events: auto;
}

/* ---- Recommended open animation: items rise + fade in, staggered
   top→bottom, riding in just under the divider-line draw. Disabled for
   reduced-motion (items simply appear with the overlay fade). ---- */
@media (prefers-reduced-motion: no-preference) {
  .nav-overlay:not(.is-open) .nav-overlay__item,
  .nav-overlay:not(.is-open) .nav-overlay__meta {
    opacity: 0;
    transform: translateY(12px);
  }
  .nav-overlay.is-open .nav-overlay__item,
  .nav-overlay.is-open .nav-overlay__meta {
    opacity: 1;
    transform: none;
    transition: opacity 0.5s var(--ease-out), transform 0.5s var(--ease-out);
  }
  .nav-overlay.is-open .nav-overlay__item:nth-child(1) { transition-delay: 0.08s; }
  .nav-overlay.is-open .nav-overlay__item:nth-child(2) { transition-delay: 0.14s; }
  .nav-overlay.is-open .nav-overlay__item:nth-child(3) { transition-delay: 0.20s; }
  .nav-overlay.is-open .nav-overlay__item:nth-child(4) { transition-delay: 0.26s; }
  .nav-overlay.is-open .nav-overlay__item:nth-child(5) { transition-delay: 0.32s; }
  .nav-overlay.is-open .nav-overlay__meta { transition-delay: 0.40s; }
}

.nav-overlay__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: var(--space-2);
  position: relative;
}

/* Invisible close strip across the TOP of the menu — a tap anywhere in
   the header band (over the logo + Close) dismisses. Spans the full
   width from the very top down past the head; stops short of the menu
   items so they stay tappable. Transparent; sits above the head so it
   catches the tap (both logo + Close also carry data-nav-close, so any
   path closes). */
.nav-overlay__top-close {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 148px;
  padding: 0;
  margin: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  z-index: 2;
}

.nav-overlay__close {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--warm-accent);
  background: transparent;
  padding: var(--space-2) 0;
  position: relative;
  z-index: 3;   /* above the top-close strip so it stays the visible label */
}

/* Close label: slides from the middle of the bar to its resting spot in
   0.5s, while the fade (opacity 0 → 1) runs across a full 1s. */
@media (prefers-reduced-motion: no-preference) {
  .nav-overlay:not(.is-open) .nav-overlay__close {
    opacity: 0;
    transform: translateX(-128px);
  }
  .nav-overlay.is-open .nav-overlay__close {
    opacity: 1;
    transform: translateX(0);
    transition: transform 0.5s var(--ease-out),
                opacity 1s var(--ease-out);
  }
}

.nav-overlay__list {
  display: flex;
  flex-direction: column;
  margin-top: 56px;   /* nudged down 8px from 48 */
  gap: 0;
}

.nav-overlay__item {
  /* Shared treatment for ALL items (incl. Who We Are + Enquire): the
     Layout B/C nav-link type — font-display, weight 600 (lighter on the
     inverted display scale), 0.18em — at 30% smaller than the prior 32px. */
  font-family: var(--font-display);
  font-size: 22.4px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--white);
  padding-block: var(--space-4);
  /* Border kept (now transparent) so spacing is unchanged; the visible
     divider is the animated ::after line below, drawn on overlay open. */
  border-bottom: 1px solid transparent;
  position: relative;
  text-align: left;
  background: transparent;
  width: 100%;
  display: block;
}

/* The drawable divider line (was the border-bottom). Full width by
   default — no-JS / reduced-motion show it complete. */
.nav-overlay__item::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 100%;
  border-top: 1px solid var(--divider-dark);
  transform-origin: left center;
  transform: scaleX(1);
}

/* Vertical 2.75× expressed as added top padding on the passive group */
.nav-overlay__item--passive-first {
  margin-top: calc(1.75 * var(--space-5));
}

.nav-overlay__cta {
  margin-top: var(--space-8);
}

.nav-overlay__meta {
  margin-top: auto;
  padding-top: var(--space-7);
  /* Type treatment from the hero locale label (display-normal, 700,
     0.22em, uppercase); −2px per user (14 → 12). Color stays warm light. */
  font-family: var(--font-display-normal);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--light-warm);
  /* Two-line label (break after Manhattan) — a touch more leading. */
  line-height: 1.7;
}

/* ----- Overlay divider lines draw in on open (mirrors the section
   service-menu hairlines: armed at scaleX(0), drawn left→right over
   1.2s with a top→bottom cascade). Full width for no-JS / reduced
   motion. ----- */
@media (prefers-reduced-motion: no-preference) {
  /* Armed — collapsed, and starting THICKER + LIGHTER than the resting
     line (no transition → instant re-arm each time it closes). */
  .nav-overlay:not(.is-open) .nav-overlay__item::after {
    transform: scaleX(0);
    border-top-width: 2px;
    border-top-color: rgba(255, 255, 255, 0.28);
  }
  /* Playing — draw to full width while thinning to 1px and darkening to
     the resting divider color, all over 1.2s. */
  .nav-overlay.is-open .nav-overlay__item::after {
    transform: scaleX(1);
    border-top-width: 1px;
    border-top-color: var(--divider-dark);
    transition: transform 1.2s ease, border-top-width 1.2s ease, border-top-color 1.2s ease;
  }
  .nav-overlay.is-open .nav-overlay__item:nth-child(2)::after { transition-delay: 0.1s; }
  .nav-overlay.is-open .nav-overlay__item:nth-child(3)::after { transition-delay: 0.2s; }
  .nav-overlay.is-open .nav-overlay__item:nth-child(4)::after { transition-delay: 0.3s; }
  .nav-overlay.is-open .nav-overlay__item:nth-child(5)::after { transition-delay: 0.4s; }
}

/* Lock body scroll when overlay is open */
body.is-nav-open {
  overflow: hidden;
}


/* ============================================================
   Hero skeleton (Step 1: placeholder; Step 4: real composition)
   16:9 area on desktop, taller on mobile per Phase 2 §6.
   ============================================================ */

.hero {
  position: relative;
  width: 100%;
  min-height: 88vh;
  background: var(--charcoal);
  color: var(--white);
  overflow: hidden;
  display: flex;
}

@media (min-width: 1024px) {
  .hero {
    min-height: 88vh;
    aspect-ratio: 16 / 10;
  }
}

.hero__media {
  position: absolute;
  inset: 0;
  background: var(--noir);
  overflow: hidden;
}

.hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: grayscale(1) contrast(1.05);
  /* Both clips share the stage. Opacity drives the crossfade. */
  opacity: 0;
  transition: opacity 1200ms ease-out;
  z-index: 0;
}

.hero__video.is-active {
  opacity: 1;
}

.hero__still {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  filter: grayscale(1) contrast(1.05);
  /* Zoom in on the image so the face fills more of the frame.
     1.2 at Layouts A/B/C (20% less than the prior 1.5 per user). */
  transform: scale(1.2);
  transform-origin: center;
  z-index: 0;
}

/* Mobile — image at no-zoom (scale 1.0) so more of the portrait is
   visible; the desktop layouts frame the face tighter at scale 1.2.
   1.0 is the floor — going smaller than cover would reveal edge gaps. */
@media (max-width: 649px) {
  .hero__still {
    transform: scale(1.0);
  }
}

.hero__slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  filter: grayscale(1) contrast(1.05);
  opacity: 0;
  animation: heroSlide 24s infinite;
  animation-fill-mode: both;
  will-change: opacity;
}
.hero__slide:nth-child(1) { animation-delay: 0s; }
.hero__slide:nth-child(2) { animation-delay: 6s; }
.hero__slide:nth-child(3) { animation-delay: 12s; }
.hero__slide:nth-child(4) { animation-delay: 18s; }

@keyframes heroSlide {
  0%   { opacity: 0; }
  4%   { opacity: 1; }
  21%  { opacity: 1; }
  25%  { opacity: 0; }
  100% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .hero__slide {
    animation: none;
  }
  .hero__slide:nth-child(1) { opacity: 1; }
}

.hero__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10,10,10,0.2) 0%, rgba(10,10,10,0.6) 100%);
  pointer-events: none;
  z-index: 1;
}

.hero__fade {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 28%;
  background: linear-gradient(180deg, rgba(10,10,10,0) 0%, rgba(10,10,10,0.7) 55%, var(--noir) 100%);
  pointer-events: none;
  z-index: 1;
}

/* Top dividing rule for the section immediately following the hero */
.section--top-rule {
  position: relative;
}
.section--top-rule::before {
  content: "";
  position: absolute;
  left: 24px;
  right: 24px;
  top: 0;
  height: 2px;
  background: var(--warm-accent);
  opacity: 0.35;
}

.hero__inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding: var(--space-10) var(--container-gutter) var(--space-7);
  display: grid;
  grid-template-rows: 1fr auto;
  gap: var(--space-8);
}
@media (min-width: 1024px) {
  .hero__inner {
    padding: var(--space-12) var(--container-gutter) var(--space-9);
  }
}

.hero__caption {
  align-self: start;
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  color: var(--white);
  opacity: 0.85;
}

.hero__caption-rule {
  display: inline-block;
  width: 1px;
  height: 32px;
  background: var(--white);
  flex-shrink: 0;
}

.hero__caption-text {
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  line-height: 1;
}
@media (min-width: 1024px) {
  .hero__caption-text { font-size: 13px; }
}

.hero__display {
  justify-self: start;
  text-align: left;
  max-width: 90%;
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}
@media (min-width: 1024px) {
  .hero__display { max-width: 70%; }
}

.hero__lead {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: var(--text-lg);
  line-height: 1.55;
  color: var(--light-warm);
  max-width: 56ch;
  margin: 0;
}
@media (min-width: 1024px) {
  .hero__lead { font-size: var(--text-xl); }
}

.hero__display .display-hero {
  color: var(--white);
  /* 15% smaller than the global .display-hero so the headline stops
     fighting the video underneath. */
  font-size: 39px;
}

@media (min-width: 1024px) {
  .hero__display .display-hero {
    font-size: 84px;
  }
}


/* ============================================================
   Footer (global) — see Phase 2 §11
   ============================================================ */

.site-footer {
  background: var(--noir);
  color: var(--light-warm);
  padding-block: var(--space-10) var(--space-7);
}
@media (min-width: 1024px) {
  .site-footer {
    padding-block: var(--space-11) var(--space-8);
  }
}

.site-footer__inner {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-gutter);
  display: grid;
  grid-template-columns: 1fr;
  row-gap: var(--space-9);
}
@media (min-width: 1024px) {
  .site-footer__inner {
    /* Logo sits inline with the nav columns on one row;
       the base bar spans full width beneath. */
    grid-template-columns: auto 1fr;
    column-gap: var(--space-7);
    align-items: start;
  }
  .site-footer__base {
    grid-column: 1 / -1;
  }
}

.site-footer__mark {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
}
.site-footer__mark img {
  height: 20px;
  width: auto;
  display: block;
}
@media (min-width: 1024px) {
  .site-footer__mark img { height: 24px; }
  /* Match the wordmark's horizontal inset in the site nav (~60px
     from the viewport edge). */
  .site-footer__mark { margin-left: 31px; }
}

/* Mobile: the (unstyled, zero-width) mark-rule still claims a flex slot,
   so the mark's 12px gap nudges the logo right of the "Services" column
   below it. Drop it on mobile so the logo sits flush-left, aligned with
   the footer nav columns. */
@media (max-width: 767px) {
  .site-footer__mark-rule {
    display: none;
  }
}

.site-footer__nav {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-7);
}
@media (min-width: 768px) {
  .site-footer__nav {
    /* Auto-sized columns packed together and centered within the
       remaining horizontal space to the right of the logo. */
    grid-template-columns: repeat(3, auto);
    justify-content: center;
    gap: 116px;
    /* Nudge the whole nav block left toward center. */
    margin-left: -16px;
  }
}
/* Smartphone viewports — keep the three nav columns horizontally
   inline with smaller type so they fit alongside each other. */
@media (max-width: 767px) {
  .site-footer__nav {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-4);
  }
  .site-footer__col {
    gap: var(--space-2);
  }
  .site-footer__col-label {
    font-size: 9px;
    letter-spacing: 0.18em;
    margin-bottom: var(--space-1);
  }
  .site-footer__link {
    font-size: 7px;
    letter-spacing: 0.14em;
  }
}

.site-footer__col {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.site-footer__col-label {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--warm-accent);
  margin-bottom: var(--space-2);
}

.site-footer__link {
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--white);
  padding-block: 2px;
  transition: opacity var(--dur-link) var(--ease-out);
  align-self: flex-start;
}
.site-footer__link:hover { opacity: 0.6; }

/* Mobile: footer LINKS 2px smaller than the desktop base (12px → 10px);
   the column labels keep their size. Placed AFTER the base rule so it
   wins — the earlier <767 block sits before the base and was overridden. */
@media (max-width: 767px) {
  .site-footer__link {
    font-size: 10px;
  }
}

.site-footer__base {
  border-top: 1px solid var(--divider-dark);
  padding-top: var(--space-6);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
  align-items: end;
}
@media (min-width: 768px) {
  .site-footer__base {
    grid-template-columns: 1fr auto;
    gap: var(--space-6);
  }
}

.site-footer__contact,
.site-footer__copy {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--light-warm);
  line-height: 1.7;
}

.site-footer__contact {
  font-weight: 400;
}

.site-footer__copy {
  margin-top: var(--space-2);
  color: var(--taupe);
}

.site-footer__client-login {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--taupe);
  align-self: end;
  justify-self: start;
  transition: opacity var(--dur-link) var(--ease-out);
}
@media (min-width: 768px) {
  .site-footer__client-login { justify-self: end; }
}
.site-footer__client-login:hover { opacity: 0.6; color: var(--light-warm); }


/* ============================================================
   Skeleton helpers for Step 1 placeholder content.
   These are temporary — Steps 2–5 replace them with real
   components.  Only used in the homepage shell for now.
   ============================================================ */

.skeleton-block {
  background: var(--soft-line);
  width: 100%;
  display: block;
}
.section--dark .skeleton-block,
.section--alt .skeleton-block {
  background: var(--warm-dark);
}

.skeleton-block--lead {
  height: var(--space-5);
  max-width: 56ch;
  margin-bottom: var(--space-3);
}
.skeleton-block--lead:last-child {
  max-width: 38ch;
  margin-bottom: 0;
}

.skeleton-card {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
  padding-block: var(--space-6);
  border-bottom: 1px solid var(--soft-line);
}
@media (min-width: 768px) {
  .skeleton-card {
    grid-template-columns: 2fr 1fr;
    gap: var(--space-8);
    align-items: baseline;
  }
}
.section--dark .skeleton-card,
.section--alt .skeleton-card {
  border-bottom-color: var(--divider-dark);
}

.skeleton-card__name {
  height: 22px;
  background: var(--warm-gray);
  width: 60%;
  margin-bottom: var(--space-3);
  opacity: 0.4;
}
.skeleton-card__desc {
  height: 14px;
  background: var(--warm-gray);
  width: 90%;
  margin-bottom: var(--space-2);
  opacity: 0.25;
}
.skeleton-card__desc:last-of-type {
  width: 70%;
  margin-bottom: 0;
}
.skeleton-card__price {
  height: 22px;
  background: var(--warm-gray);
  width: 80px;
  opacity: 0.4;
  justify-self: start;
}
@media (min-width: 768px) {
  .skeleton-card__price { justify-self: end; }
}


/* ============================================================
   Section header (used inside every content section)
   ============================================================ */

.section-head {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
  margin-bottom: var(--space-8);
  max-width: var(--content-medium);
}
@media (min-width: 1024px) {
  .section-head {
    gap: var(--space-5);
    margin-bottom: var(--space-10);
  }
}

.section-head__lead {
  margin-top: var(--space-3);
  color: var(--warm-gray);
  max-width: 56ch;
}
.section--dark .section-head__lead,
.section--alt .section-head__lead {
  color: var(--light-warm);
}


/* ============================================================
   Closing section composition (Step 4 will refine; placeholder OK now)
   ============================================================ */

.closing {
  text-align: center;
}

.closing__inner {
  max-width: var(--content-medium);
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-7);
}

.closing__lockup {
  display: inline-flex;
  align-items: stretch;
  gap: var(--space-4);
}

/* Mobile: 16px left padding on the closing lockup per user. */
@media (max-width: 649px) {
  .closing__lockup {
    padding-left: 16px;
  }
}
.closing__rule {
  width: 1px;
  background: rgba(255,255,255,0.4);
  align-self: stretch;
  flex-shrink: 0;
}
.closing__manifesto {
  font-family: var(--font-serif);
  /* +25% across all layouts (calc keeps the responsive token scaling). */
  font-size: calc(var(--text-xl) * 1.25);
  font-weight: 400;
  font-style: italic;
  line-height: 1.4;
  color: var(--white);
  max-width: 28ch;
  text-align: left;
}
@media (min-width: 1024px) {
  .closing__manifesto {
    font-size: calc(var(--text-2xl) * 1.25);
  }
}

/* ============================================================
   Service list — wraps service-cards, sets between-card rhythm
   ============================================================ */

.service-list {
  display: flex;
  flex-direction: column;
}
.service-list + .section-bleed,
.section-bleed + .service-list {
  margin-top: var(--space-8);
}
@media (min-width: 1024px) {
  .service-list + .section-bleed,
  .section-bleed + .service-list {
    margin-top: var(--space-10);
  }
}

/* Sub-cluster divider within a section (e.g., GLP-1 → IV Therapy in Wellness) */
.cluster-divider {
  border: 0;
  border-top: 1px solid var(--soft-line);
  margin: var(--space-9) 0;
}
.section--dark .cluster-divider,
.section--alt .cluster-divider,
.on-dark .cluster-divider {
  border-top-color: rgba(255, 255, 255, 0.12);
}
@media (min-width: 1024px) {
  .cluster-divider {
    margin: var(--space-10) 0;
  }
}

/* ============================================================
   Section bleed — editorial 4:5 portrait media
   Full-bleed to viewport edges on mobile; container-bleed on desktop
   ============================================================ */

.section-bleed {
  margin: 0;
  margin-inline: calc(-1 * var(--container-gutter));
}
@media (min-width: 1024px) {
  .section-bleed {
    margin-inline: 0;
  }
}

.section-bleed__media {
  width: 100%;
  background:
    linear-gradient(135deg, rgba(255,255,255,0.04) 0%, rgba(0,0,0,0.18) 100%),
    var(--charcoal);
  display: block;
}
.section-bleed__media--portrait {
  aspect-ratio: 4 / 5;
}
@media (min-width: 1024px) {
  .section-bleed__media--portrait {
    aspect-ratio: 16 / 10;
    max-height: 72vh;
  }
}


/* ============================================================
   Page head — quiet noir intro on secondary pages
   (Who We Are, Enquire). The homepage uses .hero instead.
   ============================================================ */

.page-head {
  position: relative;
  background: var(--noir);
  color: var(--white);
  padding-top: calc(60px + var(--space-9));
  padding-bottom: var(--space-10);
  min-height: 78vh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}
@media (min-width: 1024px) {
  .page-head {
    min-height: 88vh;
  }
}

.page-head__inner {
  width: 100%;
}

.page-head__media {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  filter: grayscale(1) contrast(1.05);
  z-index: 0;
}

.page-head__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10,10,10,0.55) 0%, rgba(10,10,10,0.82) 100%);
  z-index: 1;
}

.page-head--imaged .page-head__inner {
  position: relative;
  z-index: 2;
}
@media (min-width: 1024px) {
  .page-head {
    padding-top: calc(72px + var(--space-11));
    padding-bottom: var(--space-12);
  }
}

.page-head__inner {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-gutter);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-7);
}
/* Mobile (≤649): +8px left padding on the Enquire hero text per user,
   and lift the whole text block up 8px (−24 then back down 16). */
@media (max-width: 649px) {
  .page-head--enquire .page-head__inner {
    padding-left: calc(var(--container-gutter) + 8px);
    transform: translateY(-8px);
  }
}
@media (min-width: 1024px) {
  .page-head__inner {
    grid-template-columns: 1fr 1fr;
    column-gap: var(--space-10);
    row-gap: var(--space-10);
    align-items: end;
  }
}

.page-head__caption {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  color: var(--white);
  opacity: 0.85;
}
.page-head__caption-rule {
  width: 1px;
  height: 24px;
  background: var(--white);
  flex-shrink: 0;
  display: inline-block;
}
.page-head__caption-text {
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  line-height: 1;
}
@media (min-width: 1024px) {
  .page-head__caption-text { font-size: 13px; }
}

.page-head__title-block {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  padding-left: var(--space-1);
}
@media (min-width: 768px) {
  .page-head__title-block {
    padding-left: var(--space-4);
  }
}
@media (min-width: 1024px) {
  .page-head__title-block {
    gap: var(--space-8);
    padding-left: var(--space-6);
  }
}

.page-head__display {
  font-family: var(--font-display);
  font-weight: 200;
  text-transform: uppercase;
  letter-spacing: 1px;
  line-height: 1.15;
  color: var(--white);
  /* Fluid: 56px at ~360px viewport up to 180px at ~1600px viewport */
  /* Fluid across the full viewport range, tuned for the 50%-width title block */
  font-size: clamp(27px, 6.75vw, 105px);
  margin: 0;
}

/* Mobile (≤649): Enquire hero headline fixed at 36px per user. */
@media (max-width: 649px) {
  .page-head--enquire .page-head__display {
    font-size: 36px;
  }
}

.page-head__lead {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: var(--text-lg);
  line-height: 1.55;
  color: var(--light-warm);
  width: 100%;
  max-width: 480px;
}
@media (min-width: 1024px) {
  .page-head__lead {
    font-size: var(--text-xl);
  }
}


/* ============================================================
   Editorial section — two-column rail layout for body pages.
   Left: eyebrow + heading. Right: body copy.
   Stacks on mobile.
   ============================================================ */

.editorial {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}
@media (min-width: 900px) {
  .editorial {
    grid-template-columns: 5fr 7fr;
    column-gap: var(--space-10);
    row-gap: var(--space-8);
    align-items: start;
  }
}

.editorial__rail {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
@media (min-width: 900px) {
  .editorial__rail {
    position: sticky;
    top: calc(72px + var(--space-7));
    grid-column: 1 / 2;
    grid-row: 1 / 2;
  }
}

/* When media sits alongside, rail + body share col 1 and stack
   naturally — sticky must be off, otherwise the rail floats
   down through the body as the user scrolls. */
@media (min-width: 900px) {
  .editorial--media-right .editorial__rail {
    position: static;
    grid-column: 1 / 2;
    grid-row: 1 / 2;
  }
  .editorial--media-right .editorial__body {
    grid-column: 1 / 2;
    grid-row: 2 / 3;
  }
}

.editorial__rail .heading {
  margin-top: var(--space-2);
  max-width: 14ch;
}

.editorial__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.editorial__body p {
  font-family: var(--font-body);
  font-size: var(--text-lg);
  font-weight: 300;
  line-height: 1.7;
  color: var(--charcoal);
  max-width: 56ch;
}

.section--dark .editorial__body p,
.section--alt .editorial__body p,
.on-dark .editorial__body p {
  color: var(--light-warm);
}

.section--dark .editorial__rail .heading,
.section--alt .editorial__rail .heading,
.on-dark .editorial__rail .heading {
  color: var(--white);
}

/* Inline asset block sitting alongside an editorial body */
.editorial__media {
  margin-top: var(--space-7);
  background: var(--charcoal);
  aspect-ratio: 4 / 5;
  width: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  filter: grayscale(1) contrast(1.02);
}
@media (min-width: 900px) {
  .editorial__media {
    aspect-ratio: 4 / 5;
    margin-top: 0;
    grid-column: 1 / 2;
    grid-row: 2 / 3;
  }
  .editorial--media-right .editorial__media {
    grid-column: 2 / 3;
    grid-row: 1 / 3;
  }
}


/* ============================================================
   Who We Are — heroless top, logo-headed Model, 01 | 02 split
   ============================================================ */

/* Heroless page → the solid nav sits over a LIGHT section; the default
   0.55 tint reads muddy with white type, so make the bar a near-opaque
   dark band here. */
.page--who .nav.is-scrolled {
  background: rgba(10, 10, 10, 0.92);
}

/* The Model's heading is the Rivē Lume wordmark (replaces "How it
   works"); size the mark in place of the serif heading. */
.editorial__logo-heading {
  margin-top: var(--space-2);
  max-width: none;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.12em;
}
/* Logo nudged up 24px to align its optical top with the copy. */
#model .editorial__logo-heading {
  margin-top: -16px;
}
.editorial__logo-line {
  display: block;
  width: 75%;
  max-width: 420px;
  height: auto;
}
/* Header rule above the Model copy — full copy-column width, 36px above
   the copy (12px + the body's 24px flex gap). Drawn as a border-top (not
   a background) so it can THIN from 3px→2px during the draw without ever
   changing the element's box height. Color stepped to the system's light
   hairline token per user (was warm-gray). Resting/full-width state is
   the base, so no-JS and reduced-motion show the line complete. */
.who-rule {
  display: block;
  width: 100%;
  height: 0;
  border-top: 2px solid var(--soft-line);
  transform: scaleX(1);
  transform-origin: left center;
}
#model .editorial__body .who-rule,
#physician .editorial__body .who-rule {
  margin-bottom: 12px;
}

/* Section 01 lead title — a quiet serif statement of the Model's thesis,
   sitting just under the row-capping hairline and above the copy. Sentence-
   case serif (not display caps) keeps the brand's restraint; the tight
   measure stacks it to two lines for editorial weight. */
.who-title {
  font-family: var(--font-serif);
  font-size: var(--text-2xl);
  font-weight: 400;
  line-height: 1.28;
  color: var(--noir);
  max-width: 14ch;
  margin: 0;
  text-wrap: balance;
}
/* The title is the section's hero headline (left column) — big and
   column-spanning across all desktop widths, scaling up in the wider
   columns at ≥1024. Mobile keeps the smaller stacked size. */
@media (min-width: 650px) {
  .who-title {
    font-size: clamp(38px, 4vw, 51px);
    line-height: 1.1;
    max-width: none;
  }
}

/* Mobile: the title stretches the full section width (within padding),
   big and uncapped (the base 14ch cap is lifted). */
@media (max-width: 649px) {
  .who-title {
    font-size: clamp(36px, 10.5vw, 48px);
    line-height: 1.1;
    max-width: none;
  }
}

/* Draw-and-settle on reveal — mirrors the home page service-menu / How
   We Work hairlines: the line wipes left→right (scaleX 0→1) over 1.2s
   while thinning (2px→1px) and settling in color (light-warm→soft-line).
   reveal.js adds .is-visible to the parent .editorial__body, so the draw
   rides in with the copy. */
@media (prefers-reduced-motion: no-preference) {
  /* Armed (pre-reveal): collapsed, thicker + lighter. No transition so it
     arms instantly. */
  .reveal:not(.is-visible) .who-rule {
    transform: scaleX(0);
    border-top-width: 3px;
    border-top-color: var(--light-warm);
  }
  /* Playing (on reveal): draw to full width while thinning + darkening to
     the resting hairline. */
  .reveal.is-visible .who-rule {
    transform: scaleX(1);
    border-top-width: 2px;
    border-top-color: var(--soft-line);
    transition: transform 1.2s ease, border-top-width 1.2s ease,
                border-top-color 1.2s ease;
  }
}
/* 40px left/right on BOTH the Model and Physician containers per user
   (all layouts) so the two image columns are the same width. */
#model .container,
#physician .container {
  padding-inline: 40px;
}
/* Layout B/C (≥950): 64px each side for both 01 and 02. */
@media (min-width: 950px) {
  #model .container,
  #physician .container {
    padding-inline: 64px;
  }
}
/* Dr. Kopyt portrait atop the Physician rail — square, B&W to match the
   editorial imagery. */
.who-portrait {
  display: block;
  width: 250px;
  max-width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  filter: grayscale(1) contrast(1.02);
  margin-bottom: 0;
  /* No top offset — the portrait now starts at the row top (the name moved
   to the copy column), so its top aligns with the row-capping rule. */
  margin-top: 0;
}

/* Mobile: the portrait spans the full section width (within the section's
   L/R padding) instead of the fixed 250px square. */
@media (max-width: 649px) {
  #physician .who-portrait {
    width: 100%;
    max-width: none;
  }
}

/* ≥900: both 01 and 02 put the COPY on the left (wide) and the rail —
   logo for 01, portrait + name for 02 — on the RIGHT; copy column
   narrowed ~15% (56ch → ~47.6ch). */
@media (min-width: 900px) {
  .who-split .editorial {
    grid-template-columns: 7fr 5fr;
  }
  .who-split .editorial__body {
    grid-column: 1;
    grid-row: 1;
  }
  .who-split .editorial__rail {
    grid-column: 2;
    grid-row: 1;
  }
}
.who-split .editorial__body p {
  max-width: 47.6ch;
}
/* 24px right padding on both copy columns (01 Model + 02 Physician) per
   user — gives the running text a right margin so it stops reading as a
   wall of text. */
.who-split .editorial__body {
  padding-right: 24px;
}
/* Mobile: drop that right inset so the header rule and copy span the full
   section width (within the container's L/R padding) in both sections. */
@media (max-width: 649px) {
  .who-split .editorial__body {
    padding-right: 0;
  }
}

/* ≥900: extend the Model header rule LEFT across the image panel so the
   hairline caps the WHOLE row (image + copy), not just the copy column.
   The columns are equal (1fr 1fr), so the image track ≈ the body's content
   width (100%) plus its 24px right padding; reach back across that plus the
   column gap (--space-10). Right edge stays at the copy's content edge
   (100%). The left-origin draw now wipes right across image → copy. */
@media (min-width: 900px) {
  #model .editorial__body .who-rule,
  #physician .editorial__body .who-rule {
    width: calc(200% + 24px + var(--space-10));
    margin-left: calc(-100% - 24px - var(--space-10));
  }
}

/* Model section: the image is removed. Left column = the big hero title;
   the Rivē Lume wordmark moves into the copy column above the body. */
@media (min-width: 900px) {
  #model .editorial {
    grid-template-columns: 1fr 1fr;
    align-items: start;
  }
  #model .model-headline {
    grid-column: 1;
    grid-row: 1;
    /* Drop the title to align with the copy's first line (rule + 12px
       margin + the body's 24px flex gap). */
    padding-top: 37px;
    /* Pin the title below the fixed nav while the copy column (col 2)
       scrolls past; releases when the section's bottom is reached. The
       37px padding-top sits above the title, so it pins ~37px lower. */
    position: sticky;
    top: 96px;
    align-self: start;
  }
  #model .editorial__body {
    grid-column: 2;
    grid-row: 1;
  }
}

#model .model-media {
  position: relative;
  overflow: hidden;
  background: transparent;
  min-height: 420px;
}
@media (max-width: 899px) {
  #model .model-media {
    aspect-ratio: 3 / 2;
    min-height: 0;
  }
}
.model-media__stack {
  position: absolute;
  inset: 0;
  clip-path: inset(0 100% 0 0);
}
/* Image frame wipes in from left → right on reveal (~1s). */
@media (prefers-reduced-motion: no-preference) {
  .model-media.is-visible .model-media__stack {
    animation: model-wipe 1s cubic-bezier(0.4, 0, 0.1, 1) forwards;
  }
}
@media (prefers-reduced-motion: reduce) {
  .model-media__stack { clip-path: inset(0 0 0 0); }
}
@keyframes model-wipe {
  from { clip-path: inset(0 100% 0 0); }
  to   { clip-path: inset(0 0 0 0); }
}
.model-media__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 38%;
  filter: grayscale(1) contrast(1.04);
  transform: scale(1);
  will-change: transform;
}
@media (prefers-reduced-motion: no-preference) {
  .model-media.is-visible .model-media__img {
    animation: model-kenburns 14s ease-out forwards;
  }
}
@keyframes model-kenburns {
  from { transform: scale(1.02); }
  to { transform: scale(1.1); }
}
.model-media__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10,10,10,0.18) 0%, rgba(10,10,10,0.30) 100%);
  pointer-events: none;
}
/* Horizontal wordmark, centred over the image. */
.model-media__logo {
  position: absolute;
  left: 50%;
  top: 50%;
  margin: 0;
  width: clamp(200px, 18vw, 280px);
  transform: translate(-50%, -50%);
  opacity: 0;
  pointer-events: none;
}
.model-media__logo img {
  display: block;
  width: 100%;
  max-width: none;
  height: auto;
  filter: drop-shadow(0 1px 10px rgba(0,0,0,0.45));
}
@media (prefers-reduced-motion: no-preference) {
  .model-media.is-visible .model-media__logo {
    animation: model-logo-in 1.1s cubic-bezier(0.2, 0.7, 0.3, 1) 0.35s forwards;
  }
}
@media (prefers-reduced-motion: reduce) {
  .model-media__logo { opacity: 1; }
}
@keyframes model-logo-in {
  from { opacity: 0; transform: translate(-50%, calc(-50% + 18px)); }
  to   { opacity: 1; transform: translate(-50%, -50%); }
}
/* 02: image panel alone on the LEFT (full row height), and on the RIGHT a
   row-spanning rule → name → copy — mirroring 01. Moving 'Morris Kopyt,
   M.D.' out of the left column lets the portrait start at the row top
   (aligned with the copy) and run the full height. */
@media (min-width: 900px) {
  #physician .editorial {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
  #physician .editorial__rail {
    grid-column: 1;
    grid-row: 1;
  }
  #physician .editorial__body {
    grid-column: 2;
    grid-row: 1;
  }
}
/* Second section's top padding at ≥950 (the slot now holding the Model).
   Lock both columns to an exact 50% (minmax(0,1fr)) so the copy matches
   across sections. */
@media (min-width: 950px) {
  #model.section {
    padding-top: 64px;
  }
  #physician .editorial {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
}
/* Name sits on one line in the copy column from ≥900 (where 02 goes
   two-column). Sized continuously by viewport so it fits the column with
   nowrap; capped at 38px above 1280. */
/* Name sizing across the two-column bands. Layout A/B (900–1023): 24px
   per user. Layout C (≥1024): 32px, scaling down only on the narrow end
   of C where the column can't hold 32px nowrap (so it never overflows). */
@media (min-width: 900px) and (max-width: 1023px) {
  #physician .editorial__body .heading {
    white-space: nowrap;
    font-size: 24px;
    line-height: 1.2;
  }
}
@media (min-width: 1024px) {
  #physician .editorial__body .heading {
    white-space: nowrap;
    font-size: clamp(24px, calc((50vw - 136px) / 14), 32px);
    line-height: 1.2;
  }
}
#physician .editorial__body .heading {
  max-width: none;
  margin: 0;
}
#physician .editorial__rail {
  padding-top: 0;
}
/* ≥900: the portrait fills the whole editorial row — its top aligns with
   the copy's top and its bottom with the copy's bottom. */
@media (min-width: 900px) {
  #physician .editorial__rail {
    align-self: stretch;
  }
  #physician .who-portrait {
    aspect-ratio: auto;
    flex: 1 1 0;
    min-height: 0;
    height: auto;
    /* Fill the column width too (base caps it at 250px) so the portrait is
       wider and object-fit: cover crops the sides far less. */
    width: 100%;
    max-width: none;
  }
}

/* Reveal animation on the Physician portrait — mirrors the Model image:
   a left→right clip-path wipe (~1s) plus a slow Ken-Burns zoom, gated on
   the rail's .is-visible (set by reveal.js) and prefers-reduced-motion.
   Reuses the model-wipe / model-kenburns keyframes. */
@media (prefers-reduced-motion: no-preference) {
  #physician .editorial__rail .who-portrait {
    clip-path: inset(0 100% 0 0);
    transform: scale(1.02);
    will-change: clip-path, transform;
  }
  /* Contain the Ken-Burns zoom within the column (mirrors the Model panel's
     overflow:hidden) so the scaled portrait never spills into the gap. */
  #physician .editorial__rail {
    overflow: hidden;
  }
  #physician .editorial__rail.is-visible .who-portrait {
    animation: model-wipe 1s cubic-bezier(0.4, 0, 0.1, 1) forwards,
               model-kenburns 14s ease-out forwards;
  }
}
@media (prefers-reduced-motion: reduce) {
  #physician .who-portrait { clip-path: inset(0 0 0 0); }
}
/* Model section trimmed 96px shorter at B/C (bottom padding). The seam to
   02 is carried by #physician's top padding, so this just tightens 01. */
/* Layout B (950–1023): center each section's editorial vertically (it was
   bottom-heavy here with padding-bottom:0). Model keeps its nav clearance
   (100px) up top with equal breathing above/below the copy; Physician gets
   symmetric padding. */
/* Layout B (950–1023): center each section's editorial vertically. The
   FIRST section (now the Physician) keeps the nav clearance (100px) up top
   with equal breathing above/below the copy; the SECOND (Model) gets
   symmetric padding. */
@media (min-width: 950px) and (max-width: 1023px) {
  #physician.section {
    padding-top: calc(100px + var(--space-7));
    padding-bottom: var(--space-7);
  }
  #model.section {
    padding-top: var(--space-7);
    padding-bottom: var(--space-7);
  }
}
@media (min-width: 1024px) {
  #model.section { padding-bottom: 104px; }
  #physician.section { padding-bottom: 67px; }
}

/* --- 01 + 02 ----------------------------------------------------------
   Below 950 the two sections STACK (each full width). Backgrounds run to
   the top edge under the fixed nav, so the nav clearance lives in the
   first section's top padding. */
.who-split > .section { padding-top: 0; }
.who-split > .section + .section { padding-top: var(--space-10); }
.page--who .who-split > .section:first-child {
  padding-top: calc(96px + var(--space-7));
}
@media (min-width: 790px) and (max-width: 949px) {
  .page--who .who-split > .section:first-child {
    padding-top: calc(116px + var(--space-7));
  }
}

/* Layout B/C (≥950): the two sections stay STACKED full width (the
   side-by-side split made the copy a narrow wall). First section clears
   the nav; a generous seam sits before 02. */
@media (min-width: 950px) {
  .page--who .who-split > .section:first-child {
    padding-top: calc(100px + var(--space-9));
  }
  .who-split > .section + .section {
    padding-top: var(--space-12);
  }
}


/* ============================================================
   Refusal list — typographic statement on dark
   "What we won't do" page section.
   ============================================================ */

.refusal-list {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--divider-dark);
  margin-top: var(--space-7);
}
@media (min-width: 1024px) {
  .refusal-list {
    margin-top: var(--space-9);
  }
}

.refusal {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-5);
  align-items: baseline;
  padding-block: var(--space-6);
  border-bottom: 1px solid var(--divider-dark);
}
@media (min-width: 768px) {
  .refusal {
    grid-template-columns: 96px 1fr;
    gap: var(--space-8);
    padding-block: var(--space-7);
  }
}
@media (min-width: 1024px) {
  .refusal {
    grid-template-columns: 160px 1fr;
  }
}

.refusal__no {
  font-family: var(--font-display);
  font-weight: 200;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  line-height: 1;
  color: var(--warm-accent);
  font-size: var(--text-2xl);
}
@media (min-width: 1024px) {
  .refusal__no {
    font-size: var(--text-4xl);
  }
}

.refusal__text {
  font-family: var(--font-body);
  font-size: var(--text-lg);
  font-weight: 300;
  line-height: 1.55;
  color: var(--white);
  max-width: 52ch;
}
@media (min-width: 1024px) {
  .refusal__text {
    font-size: var(--text-xl);
  }
}


/* ============================================================
   Process — numbered blocks for Enquire page
   ============================================================ */

.process {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  border-top: 1px solid var(--soft-line);
  margin-top: var(--space-7);
}
@media (min-width: 1024px) {
  .process {
    grid-template-columns: repeat(2, 1fr);
    border-top: 1px solid var(--soft-line);
    border-left: 1px solid var(--soft-line);
    margin-top: var(--space-9);
  }
}

.process__step {
  padding: var(--space-7) 0;
  border-bottom: 1px solid var(--soft-line);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
@media (min-width: 1024px) {
  .process__step {
    padding: var(--space-7);
    border-right: 1px solid var(--soft-line);
    border-bottom: 1px solid var(--soft-line);
  }
}

.process__num {
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--taupe);
}

.process__title {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 200;
  text-transform: uppercase;
  letter-spacing: 1px;
  line-height: 1.25;
  color: var(--noir);
}
@media (min-width: 1024px) {
  .process__title {
    font-size: var(--text-2xl);
  }
}

.process__body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 300;
  line-height: 1.7;
  color: var(--warm-gray);
  max-width: 48ch;
}


/* ============================================================
   Form layout — Enquire page form container
   ============================================================ */

.form {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.form-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
}
@media (min-width: 768px) {
  .form-row {
    grid-template-columns: 1fr 1fr;
    column-gap: var(--space-7);
  }
}

.form__honeypot {
  position: absolute;
  left: -9999px;
  top: 0;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
  overflow: hidden;
}

.form__counter {
  display: block;
  margin-top: var(--space-2);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--taupe);
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.form__submit-row {
  margin-top: var(--space-7);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-5);
}

.form__meta {
  margin-top: var(--space-7);
  padding-top: var(--space-6);
  border-top: 1px solid var(--soft-line);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  max-width: 60ch;
}
.form__meta-note {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--taupe);
  line-height: 1.6;
}
.form__meta-legal {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  color: var(--taupe);
  letter-spacing: 0.02em;
}
.form__meta-legal a {
  border-bottom: 1px solid currentColor;
}

.form__error-summary {
  margin-bottom: var(--space-6);
  padding: var(--space-5);
  border-left: 2px solid var(--charcoal);
  background: rgba(10,10,10,0.04);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--charcoal);
  display: none;
}
.form__error-summary.is-visible {
  display: block;
}


/* ============================================================
   Enquire page — composition
   ============================================================ */

/* Imaged page-head. The portraits are centred face compositions, so
   keep the crop roughly centred (biased slightly up) to hold the faces
   in frame under the tall hero. */
.page-head--enquire .page-head__media {
  background-position: center 40%;
}

/* Lighter scrim on Enquire so the upper portion of the portrait reads
   through; the bottom stays dark enough for the headline. Scoped so the
   shared who-we-are head keeps its darker scrim. */
.page-head--enquire .page-head__scrim {
  background: linear-gradient(180deg, rgba(10,10,10,0.04) 0%, rgba(10,10,10,0.16) 50%, rgba(10,10,10,0.58) 100%);
}

/* Layout A: lift all hero text (caption + title + lead) up 40px without
   changing the hero's height. */
@media (min-width: 768px) {
  .page-head--enquire .page-head__inner {
    transform: translateY(-40px);
  }
}

/* The headline doubles as a jump-link to the form. Arrow sits to the
   right of "Enquire" and nudges down on hover/focus. */
.page-head__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  color: inherit;
  text-decoration: none;
  transition: opacity 0.3s ease;
}
.page-head__cta:hover,
.page-head__cta:focus-visible {
  opacity: 0.82;
}
.page-head__cta:focus-visible {
  outline: 2px solid var(--white);
  outline-offset: 0.18em;
}
.page-head__arrow {
  /* 2× the previous size; viewBox is 60×40 so the hover expansion stays
     inside the box. */
  width: 1.56em;
  height: 1.04em;
  flex-shrink: 0;
  stroke: currentColor;
  /* Halved from 2.4 — at 2× scale this renders as the same hairline,
     reading thinner against the larger arrow. */
  stroke-width: 1.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  /* Optical: lift the arrow toward the cap-height centre of the
     light display type, nudged down 4px to sit on its vertical centre. */
  margin-top: calc(0.06em + 4px);
  /* Sits just after the word with the cta's default gap. */
  margin-left: 0;
  overflow: visible;
}
/* No motion at rest. On hover the stem lengthens to the right and the
   head slides out to meet its new end. */
.page-head__arrow-stem,
.page-head__arrow-head {
  transform-box: fill-box;
  transition: transform 0.45s cubic-bezier(0.2, 0.7, 0.3, 1);
}
.page-head__arrow-stem {
  transform-origin: left center;
}
/* Layout A/B/C (≥650): pin the arrow stroke to a constant 0.75px.
   vector-effect:non-scaling-stroke makes stroke-width render in screen
   px regardless of the SVG's em-based scaling, so it's an exact 0.75px
   hairline across A, B and C (mobile keeps its scaling stroke). */
@media (min-width: 650px) {
  .page-head__arrow-stem,
  .page-head__arrow-head {
    vector-effect: non-scaling-stroke;
    stroke-width: 0.75px;
  }
}
.page-head__cta:hover .page-head__arrow-stem,
.page-head__cta:focus-visible .page-head__arrow-stem {
  transform: scaleX(1.435);
}
.page-head__cta:hover .page-head__arrow-head,
.page-head__cta:focus-visible .page-head__arrow-head {
  transform: translateX(10px);
}

/* Align the caption's vertical rule with the title's left edge so
   caption + title + lead share one editorial left margin. Mirrors
   the responsive padding-left on .page-head__title-block. */
.page-head--enquire .page-head__caption {
  padding-left: var(--space-1);
}
@media (min-width: 768px) {
  .page-head--enquire .page-head__caption {
    padding-left: var(--space-4);
  }
}
@media (min-width: 1024px) {
  .page-head--enquire .page-head__caption {
    padding-left: var(--space-6);
  }
}

/* The Enquiry section — compact two-column: headline + caption on the
   LEFT, steps on the RIGHT. DOM order is intro-first so the mobile stack
   reads headline → caption → steps; desktop keeps intro left. Reuses the
   .how-we-work__step* primitives for the serif label + connector line. */
.enquiry {
  padding-top: 48px;
  padding-bottom: 72px;
}
/* Mobile (≤649): add 8px to the Enquiry section's left/right padding
   (20px gutter → 28px) per user. */
@media (max-width: 649px) {
  .enquiry .container {
    padding-inline: calc(var(--container-gutter) + 8px);
  }
}

/* Layout A (650–949) only: the Enquiry section keeps 32px left/right;
   the form section gets 64px left/right per user (the base container
   gutter is 20px through this band; it reaches 32px at ≥1024). Mobile
   and Layout B/C unchanged. */
@media (min-width: 650px) and (max-width: 949px) {
  .enquiry .container {
    padding-inline: 32px;
  }
  #write .container {
    padding-inline: 64px;
  }
}
.enquiry__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-7);
}
@media (min-width: 768px) {
  .enquiry__grid {
    /* Intro (left) keeps its ~0.66:1 share of the available width, plus
       16px — making the box 16px wider; the steps column (1fr) absorbs
       the 16px. */
    grid-template-columns: calc((100% - var(--space-10)) * 0.398 + 16px) 1fr;
    column-gap: var(--space-10);
    align-items: start;
  }
  .enquiry__intro {
    order: 1;
    position: sticky;
    top: calc(72px + var(--space-6));
    padding-left: 32px;
  }
  .enquiry__steps {
    order: 2;
  }
}

.enquiry__title {
  margin: 0;
}
.enquiry__caption {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: var(--text-lg);
  line-height: 1.5;
  color: var(--taupe);
  margin: var(--space-4) 0 0 0;
  max-width: 30ch;
}

/* No head rule above the steps in this section (removed per design);
   steps start flush with the headline, tighter rhythm keeps it short.
   Scoped with the .enquiry ancestor so these reliably outrank the later
   base .how-we-work__steps rules. */
.enquiry .enquiry__steps {
  gap: 32px;
  padding-top: 0;
}
@media (min-width: 768px) {
  .enquiry .enquiry__steps {
    gap: 44px;
    /* Nudge the right-hand steps column down to optically align its
       first label with the headline's cap height. */
    padding-top: 16px;
  }
}
/* A touch more air between each step's label and its body. */
.enquiry .how-we-work__step {
  gap: 10px;
}
/* A little more line spacing in the step body copy. */
.enquiry .how-we-work__step-body {
  line-height: 1.8;
}
.enquiry .enquiry__steps::before {
  content: none;
}
.enquiry__steps .how-we-work__step-body {
  padding-left: 31px;
}
@media (min-width: 768px) {
  .enquiry__steps .how-we-work__step-body {
    padding-left: 32px;
  }
}

/* Fourth step's connector line joins the ignition sequence. */
@media (prefers-reduced-motion: no-preference) {
  .enquiry__steps.is-playing .how-we-work__step:nth-child(4) .how-we-work__step-body::before {
    transition-delay: 0.4s;
  }
}

/* Form section: 72px bottom; 80px top. */
#write.section {
  padding-top: 80px;
  padding-bottom: 72px;
}
/* Mobile (≤649): pull the form content up 24px (top padding 80 → 56). */
@media (max-width: 649px) {
  #write.section {
    padding-top: 56px;
  }
}

/* Two-column form: editorial rail (eyebrow + heading + assurance)
   on the left, fields on the right. Stacks on mobile. */
.enquire-form__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
  /* 32px inset on the grid (all layouts) on top of the section gutter. */
  padding-inline: 32px;
}
/* Mobile (≤649): 16px less inset on the form grid (32 → 16) per user. */
@media (max-width: 649px) {
  .enquire-form__grid {
    padding-inline: 16px;
  }
}
@media (min-width: 650px) {
  .enquire-form__grid {
    /* Layout A: stack a full-width intro over the form, so the title and
       lead have room to sit side by side and the assurance + form move
       up beneath them. */
    grid-template-columns: 1fr;
    row-gap: var(--space-9);
  }
}

.enquire-form__aside {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}
@media (min-width: 650px) {
  .enquire-form__aside {
    position: static;
    /* Title with its caption stacked beneath it on the LEFT; the "Your
       note goes directly to Dr. Kopyt" assurance sits to the RIGHT of
       the title, spanning both rows. */
    display: grid;
    grid-template-columns: minmax(0, auto) minmax(0, 1fr);
    /* Fluid gap: ~44px at the start of Layout A (650) up to 96px on wide
       viewports. */
    column-gap: clamp(44px, 8vw, var(--space-10));
    row-gap: var(--space-5);
    align-items: start;
  }
  .enquire-form__aside .heading {
    grid-column: 1;
    grid-row: 1;
    max-width: 16ch;
  }
  .enquire-form__aside .lead {
    grid-column: 1;
    grid-row: 2;
    max-width: 42ch;
  }
  .enquire-form__aside .enquire-form__assurance {
    grid-column: 2;
    grid-row: 1 / span 2;
    /* Beside the title now — drop the stacked-divider top border and
       align to the title top; the vertical accent rule carries the
       separation. */
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
    align-self: start;
    max-width: 46ch;
  }
}

/* Layout B/C (≥950): restore the ORIGINAL two-column form — editorial
   rail (heading + caption + assurance, stacked vertically) on the LEFT,
   fields on the RIGHT. Overrides the ≥650 stacked-intro treatment, which
   now applies to Layout A only. Placed after the ≥650 rules so it wins
   at ≥950. */
@media (min-width: 950px) {
  .enquire-form__grid {
    grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
    column-gap: clamp(48px, 6vw, var(--space-10));
    row-gap: 0;
    align-items: start;
  }
  /* Aside back to a vertical editorial rail (undo the title|assurance
     side-by-side grid from ≥650). Pinned: the rail stays put below the
     fixed nav while the fields column (right) scrolls past — matching the
     "The Enquiry" intro's sticky and the Who-We-Are title. */
  .enquire-form__aside {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
    position: sticky;
    top: calc(72px + var(--space-6));
    align-self: start;
  }
  /* Restore the assurance's top divider that the side-by-side dropped. */
  .enquire-form__aside .enquire-form__assurance {
    margin-top: var(--space-3);
    padding-top: var(--space-5);
    border-top: 1px solid var(--soft-line);
    max-width: none;
  }
}
.enquire-form__aside .heading {
  margin-top: 0;
  max-width: 14ch;
}
.enquire-form__aside .lead {
  max-width: 40ch;
}

.enquire-form__assurance {
  margin-top: var(--space-3);
  padding-top: var(--space-5);
  border-top: 1px solid var(--soft-line);
  display: flex;
  gap: var(--space-4);
}
/* Mobile (≤649): remove the assurance's top padding per user. */
@media (max-width: 649px) {
  .enquire-form__assurance {
    padding-top: 0;
  }
}
.enquire-form__assurance-rule {
  width: 1px;
  background: var(--warm-accent);
  flex-shrink: 0;
}
.enquire-form__assurance p {
  font-family: var(--font-body);
  /* 2px larger than the prior --text-sm per user. */
  font-size: calc(var(--text-sm) + 2px);
  font-weight: 300;
  line-height: 1.65;
  color: var(--warm-gray);
  max-width: 38ch;
}

/* The field hairline (--soft-line) is nearly the cream ground here,
   so the inputs read as invisible. Darken the resting rule for the
   Enquire form only; focus/error keep the system's 2px noir/charcoal. */
.enquire-form__grid .field__label {
  /* --taupe/--warm-gray were sub-AA on cream; step the labels to charcoal. */
  color: var(--charcoal);
}
.enquire-form__grid .field__input,
.enquire-form__grid .field__textarea,
.enquire-form__grid .field__select {
  border-bottom-color: var(--warm-gray);
}
.enquire-form__grid .field__input:hover,
.enquire-form__grid .field__textarea:hover,
.enquire-form__grid .field__select:hover {
  border-bottom-color: var(--charcoal);
}
/* Helper / feedback text must stay legible on the cream ground (was
   light-warm/taupe at ~1.4–2.5:1). */
.enquire-form__grid .field__input::placeholder,
.enquire-form__grid .field__textarea::placeholder {
  color: var(--warm-gray);
}
.enquire-form__grid .field__error,
.enquire-form__grid .form__counter {
  color: var(--charcoal);
}

/* ---- Membership interest chip ----
   Revealed by form.js when the visitor arrives from a membership card
   (?plan=maintain|refine|complete). Sharp corners per the brand rule. */
.enquiry-plan {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 20px; /* logo -> text (4px more than space-4, shifting the text right) */
  margin-top: var(--space-6);
  padding: var(--space-5);
  padding-right: 44px; /* text runs up to the ✕ (which sits high, clear of the copy) */
  border: 1px solid var(--soft-line);
  background: #E0DACE; /* only slightly lighter than the cream form ground */
}
.enquiry-plan[hidden] { display: none; }
.enquiry-plan__mark { flex: 0 0 auto; display: inline-flex; margin-top: 4px; }
.enquiry-plan__mark img { display: block; width: 87px; height: auto; }
.enquiry-plan__body { flex: 1 1 auto; min-width: 0; }
.enquiry-plan__label {
  margin: 0 0 var(--space-1);
  font-family: var(--font-display);
  font-size: var(--text-xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 400;
  color: var(--charcoal);
}
.enquiry-plan__name { font-weight: 800; margin-right: 0.4em; }
.enquiry-plan__msg {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  line-height: 1.5;
  color: var(--warm-gray);
}
.enquiry-plan__dismiss {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  background: transparent; /* no circle behind the X */
  color: var(--warm-gray);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  transition: color var(--dur-hover) var(--ease-out);
}
.enquiry-plan__dismiss:hover { color: var(--charcoal); }

/* Mobile: stack the wordmark above the copy so the message gets the full
   width instead of wrapping into a thin column beside the logo. */
@media (max-width: 649px) {
  /* The extended display font can't fit a tier label beside the logo at
     phone width, so stack the logo on top of the copy (still top-aligned)
     to keep the label on one line and the message full-width. */
  .enquiry-plan {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px; /* logo -> text: original 12px + the 8px you asked for */
    padding: var(--space-4);
    padding-left: var(--space-5);
    padding-right: var(--space-7);
  }
  .enquiry-plan__mark { margin-top: 0; } /* keep mobile (stacked) logo as-is */
  .enquiry-plan__mark img { width: 88px; }
  .enquiry-plan__label { margin-bottom: var(--space-2); }
}
.enquire-form__grid .field__input:focus,
.enquire-form__grid .field__textarea:focus,
.enquire-form__grid .field__select:focus {
  border-bottom: 2px solid var(--noir);
  padding-bottom: 11px;
}

/* The "Select a borough" placeholder recedes to match the "(optional)"
   label hints until a real borough is chosen, so it stops competing
   with the entered values. */
.enquire-form__grid .field__select:has(option[value=""]:checked) {
  color: var(--light-warm);
  font-weight: 400;
  letter-spacing: 0.04em;
}

/* The submit button keeps left alignment within the fields column.
   Pulled up 32px (64→32); the same 32px is restored below the legal
   line so the section's overall height is unchanged. */
.enquire-form__grid .form__submit-row {
  margin-top: 40px;
  align-items: flex-start;
}
/* Mobile (≤649): center the submit button and the legal line. */
@media (max-width: 649px) {
  .enquire-form__grid .form__submit-row {
    align-items: center;
  }
  .enquire-form__grid .form__meta {
    align-items: center;
    text-align: center;
  }
}
.enquire-form__grid .form__meta {
  margin-top: 56px;
  margin-bottom: 0;
  padding-top: 0;
  border-top: 0;
}
.enquire-form__grid .form__meta {
  max-width: 52ch;
}


/* ============================================================
   Thank-you page composition
   ============================================================ */

.thanks {
  min-height: calc(100vh - 60px);
  background: var(--noir);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: calc(60px + var(--space-9)) var(--container-gutter) var(--space-10);
}
@media (min-width: 1024px) {
  .thanks {
    min-height: calc(100vh - 72px);
    padding-top: calc(72px + var(--space-10));
  }
}

.thanks__inner {
  max-width: var(--content-narrow);
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  align-items: flex-start;
}

.thanks__caption {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
}
.thanks__caption-rule {
  width: 1px;
  height: 24px;
  background: var(--warm-accent);
  flex-shrink: 0;
}
.thanks__caption-text {
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--warm-accent);
}

.thanks__heading {
  font-family: var(--font-display);
  font-size: var(--text-4xl);
  font-weight: 200;
  text-transform: uppercase;
  letter-spacing: 1px;
  line-height: 1.1;
  color: var(--white);
  max-width: 16ch;
}
@media (min-width: 1024px) {
  .thanks__heading {
    font-size: var(--text-5xl);
  }
}

.thanks__body {
  font-family: var(--font-body);
  font-size: var(--text-lg);
  font-weight: 300;
  line-height: 1.7;
  color: var(--light-warm);
  max-width: 52ch;
}

.thanks__return {
  margin-top: var(--space-5);
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--white);
  border-bottom: 1px solid var(--white);
  padding-bottom: var(--space-2);
  transition: opacity var(--dur-link) var(--ease-out);
}
.thanks__return:hover { opacity: 0.6; }


/* ============================================================
   Closing variant — light-section closing for inner pages
   (Who We Are uses this so the page doesn't end on a hard
   double-dark; the global footer is noir already.)
   ============================================================ */

.closing--light {
  background: var(--off-white);
  color: var(--charcoal);
}
.closing--light .closing__rule {
  background: var(--warm-gray);
}
.closing--light .closing__manifesto {
  color: var(--noir);
}


/* ============================================================
/* ============================================================
   Hero — bottom-left composition
   Display headline + subtext anchored to the lower-left of the
   scrim. No caption; the video stage carries the mood.
   ============================================================ */

.hero__inner--bottom-left {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  /* Break out of the 1280 cap so we can match the reference's
     deeper left inset. */
  max-width: 100%;
  /* Asymmetric inline padding: deep left, modest right.
     12% of viewport sits the headline glyph at ~170-200px from
     the left edge at 1400-1600 widths. */
  padding-inline: clamp(24px, 12%, 220px) 32px;
  padding-block: var(--space-10);
  gap: 0;
}

@media (min-width: 1024px) {
  .hero__inner--bottom-left {
    padding-block: var(--space-11);
  }
}

.hero__inner--bottom-left .hero__display {
  justify-self: start;
  text-align: left;
  max-width: 72ch;
  display: block;
  /* Nudge headline + subtext 40px further to the left for tighter
     editorial composition. */
  transform: translateX(-40px);
}

/* Mobile-only hero ENQUIRE button — mirrors the membership card CTA
   (btn--ghost-dark: white outline, white label, fills white on hover).
   Hidden from 650 up, where the nav carries its own ENQUIRE. */
.hero__cta { display: none; }

/* Mobile-only locale line (phone reorder): same display type as the
   in-subtext .hero__locale, minus the big top padding. Hidden ≥650. */
.hero__locale-m {
  display: none;
  margin: 0;
  font-family: var(--font-display-normal);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--white);
}

/* Mobile — center the hero text on the page (drop the leftward
   nudge + asymmetric inset). */
@media (max-width: 649px) {
  .hero__inner--bottom-left {
    justify-content: center;
    padding-inline: 32px;
    text-align: center;
  }
  .hero__inner--bottom-left .hero__display {
    justify-self: center;
    text-align: center;
    /* Mobile: no leftward X-nudge; shift the whole hero text block
       DOWN so it sits below center and clears the focal area. Lifted
       per user (72 → 36 → 20). */
    transform: translateY(20px);
    margin-inline: auto;
  }
  /* Phone reorder: hide the locale that lives inside the subtext, and
     render it instead as a standalone line BELOW the button (see
     .hero__locale-m rules). */
  .hero__inner--bottom-left .hero__locale {
    display: none;
  }

  /* ENQUIRE above, locale beneath — a centered pair anchored near the
     hero's bottom edge. Both absolute within .hero (position: relative);
     z-index clears the scrim/fade. */
  .hero__cta {
    display: inline-block;
    position: absolute;
    left: 50%;
    bottom: 164px;
    transform: translateX(-50%);
    z-index: 3;
  }
  .hero__locale-m {
    display: block;
    position: absolute;
    left: 50%;
    bottom: 92px;
    transform: translateX(-50%);
    white-space: nowrap;
    text-align: center;
    font-size: 12px;          /* 2px smaller than the 14px base on phones */
    z-index: 3;
  }
}

/* Layouts A/B/C (≥650): shift the hero text block 32px DOWN, keeping
   the existing 40px leftward editorial nudge. Mobile is unaffected
   (it has its own transform above). */
@media (min-width: 650px) {
  .hero__inner--bottom-left .hero__display {
    transform: translateX(-72px) translateY(120px);
  }
}

/* Layout C (≥1280): per user (viewing at true 100%) — move the whole
   hero text block down another 32px (32 → 64), scale the type +20%,
   and scale the internal spacing to match. Scoped to C so the A/B
   tuning is untouched. Type bumps live in the title/subtext blocks
   below; this handles position + spacing. */
@media (min-width: 1280px) {
  .hero__inner--bottom-left .hero__display {
    transform: translateX(-72px) translateY(152px);
  }
  /* Headline → subtext gap +20% (12 → 16). Two-class selectors so
     these outrank the later ≥1024 subtext rule + base locale rule. */
  .hero__inner--bottom-left .hero__subtext {
    margin-top: var(--space-4);
  }
  /* Locale gap +20% (96 → 116). */
  .hero__inner--bottom-left .hero__locale {
    padding-top: 116px;
  }
}

/* ============================================================
   Serif hero title — Libre Baskerville, sentence case.
   One-off treatment for the hero only; the rest of the site
   keeps Instrument Sans for section headings.
   ============================================================ */

.hero__title--serif {
  font-family: var(--font-serif) !important;
  font-weight: 400 !important;
  font-style: normal !important;
  text-transform: none !important;
  letter-spacing: -0.005em !important;
  line-height: 1.05 !important;
  color: var(--white) !important;
  font-size: 44px !important;
  margin: 0 !important;
}

@media (min-width: 1024px) {
  .hero__title--serif {
    font-size: 72px !important;
  }
}

@media (min-width: 1440px) {
  .hero__title--serif {
    /* +20% then +15% per user (76 → 91 → 105px). */
    font-size: 105px !important;
  }
}

/* Layout C lower band (1280–1439): +20% then +15% (65 → 78 → 90px). */
@media (min-width: 1280px) and (max-width: 1439px) {
  .hero__title--serif {
    font-size: 90px !important;
  }
}

/* Layout C (≥1280): keep "A Private Hour." on a single line. */
@media (min-width: 1280px) {
  .hero__title--serif {
    white-space: nowrap;
  }
}

/* Hero title sizing by layout band. Layout A (650–949) stays 30%
   up at 57px; Layout B (950–1279) matches Layout C's size (65px)
   per user comment. Mobile (≤649) and Layout C (≥1280) unchanged. */
@media (min-width: 650px) and (max-width: 949px) {
  .hero__title--serif {
    font-size: 66px !important;
    /* Layout A only: nudge the headline 8px off the left edge. */
    padding-left: 8px !important;
  }
}
@media (min-width: 950px) and (max-width: 1279px) {
  .hero__title--serif {
    font-size: 75px !important;
  }
}

.hero__subtext {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.5;
  color: var(--white);
  /* 20% narrower than before (52ch → 42ch) so the line breaks
     tuck closer to the headline. */
  max-width: 42ch;
  /* Tight to the headline — about 8-12px of breathing room */
  margin: var(--space-2) 0 0 0;
}

/* Layout A only: match the headline's 8px left nudge so the subtext
   stays aligned under it. */
@media (min-width: 650px) and (max-width: 949px) {
  .hero__subtext {
    padding-left: 8px;
  }
}

/* Locale line — set in the same all-caps display type as the
   "WELLNESS" tag in sections 02/03 (display-normal, 16px, wide
   tracking, uppercase). 24px above keeps it off the hero caption. */
.hero__locale {
  display: block;
  padding-top: 96px;
  font-family: var(--font-display-normal);
  font-weight: 700;
  /* +2px across all layouts per user (12 → 14). */
  font-size: 14px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
@media (min-width: 1024px) {
  .hero__subtext {
    font-size: 19px;
    line-height: 1.5;
    margin-top: var(--space-3);
  }
}

/* Layouts A/B/C: keep the locale on a single line (the 42ch subtext cap
   was wrapping "GREATER NEW YORK" onto a second row). Mobile uses its own
   .hero__locale-m line, so this only affects ≥650. */
@media (min-width: 650px) {
  .hero__locale {
    white-space: nowrap;
  }
}

/* Layout C (≥1280): subtext +20% (19 → 23px) to match the larger
   headline. (margin-top is scaled in the hero__display block above.) */
@media (min-width: 1280px) {
  .hero__subtext {
    font-size: 23px;
  }
}

/* ============================================================
   Manifesto — quiet beat between hero and How It Works
   ============================================================ */

.manifesto {
  padding-block: 50px !important;
}
.manifesto .container {
  padding-block: 0;
}
@media (min-width: 1024px) {
  .manifesto .container {
    padding-block: 0;
  }
}

.manifesto__inner {
  max-width: 880px;
  margin-inline: auto;
}
.manifesto__inner > .eyebrow {
  margin-bottom: var(--space-7);
}
.manifesto__statement {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: var(--text-xl);
  line-height: 1.4;
  color: var(--charcoal);
  margin: 0 0 var(--space-7) 0;
  text-wrap: balance;
  max-width: 32ch;
}
@media (min-width: 768px) {
  .manifesto__statement {
    font-size: var(--text-2xl);
    max-width: 36ch;
  }
}
@media (min-width: 1024px) {
  .manifesto__statement {
    font-size: var(--text-3xl);
    line-height: 1.3;
    max-width: 22ch;
  }
}
.manifesto__body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.7;
  color: var(--warm-gray);
  max-width: 62ch;
  margin: 0;
}
@media (min-width: 1024px) {
  .manifesto__body {
    font-size: var(--text-lg);
    line-height: 1.65;
  }
}

/* ============================================================
   How It Works — three short blocks, no icons, no timeline.
   Sits on the same off-white as the manifesto.
   ============================================================ */

.how .container {
  padding-block: var(--space-11) var(--space-12);
}
@media (min-width: 1024px) {
  .how .container {
    padding-block: var(--space-12) var(--space-13);
  }
}

.how__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-7);
  border-top: 1px solid var(--soft-line);
  padding-top: var(--space-8);
}
@media (min-width: 768px) {
  .how__grid {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-8);
  }
}
@media (min-width: 1024px) {
  .how__grid {
    gap: var(--space-9);
    padding-top: var(--space-9);
  }
}
.how__block {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.65;
  color: var(--charcoal);
  max-width: 38ch;
}
.how__block p { margin: 0; }

/* ============================================================
   Wellness block — sub-section inside the Wellness section.
   Each block (IV Therapy, Weight Management) carries a small
   uppercase label and a short lead, then its own service list.
   ============================================================ */

.wellness-block + .wellness-block {
  margin-top: var(--space-10);
}
@media (min-width: 1024px) {
  .wellness-block + .wellness-block {
    margin-top: var(--space-12);
  }
}

.wellness-block__head {
  display: grid;
  gap: var(--space-4);
  margin-bottom: var(--space-7);
  padding-bottom: var(--space-6);
  border-bottom: 1px solid var(--soft-line);
}
@media (min-width: 1024px) {
  .wellness-block__head {
    grid-template-columns: 1fr 2fr;
    gap: var(--space-8);
    align-items: baseline;
    margin-bottom: var(--space-8);
  }
}
.wellness-block__label {
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--charcoal);
  margin: 0;
}
.wellness-block__lead {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.6;
  color: var(--warm-gray);
  max-width: 62ch;
  margin: 0;
}
@media (min-width: 1024px) {
  .wellness-block__lead {
    font-size: var(--text-lg);
    line-height: 1.55;
  }
}


/* ============================================================
   HOW WE WORK — two-column composition (photo + copy)
   - Left:  full-bleed B&W photo on a light-gray bed, with a
            HOW WE WORK overlay set in display weight 800.
   - Right: off-white panel with serif eyebrow "The Visit"
            and three short body paragraphs.
   - Mobile: stacks vertically; photo on top, copy beneath.
   ============================================================ */

.how-we-work {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  width: 100%;
  background: var(--off-white);
  /* 16px breather at the top of the section for a touch more space
     below the Services band's bottom hairline. */
  padding-top: 16px;
}

/* Two-column from the start of Layout A (650px). Below 650 = mobile
   stacked treatment. Trying full side-by-side across the whole A band
   to see how the section reacts before tuning A proportions. */
@media (min-width: 650px) {
  .how-we-work {
    grid-template-columns: 1fr 1fr;
    /* No top padding in Layouts A/B/C — the 16px breather is mobile-only. */
    padding-top: 0;
  }
}

/* ----- Photo column ----- */

.how-we-work__media {
  position: relative;
  width: 100%;
  /* Transparent bed so the reveal wipe exposes the section's off-white
     ground (not a gray placeholder rectangle) as the photo swipes in.
     The photo covers fully once revealed. */
  background: transparent;
  /* Photo source is square (1632×1633). Mobile keeps the 1:1
     aspect so the image fills naturally on a single column. */
  aspect-ratio: 1 / 1;
  overflow: hidden;
}

@media (min-width: 650px) {
  /* A/B/C: let the photo column stretch to the full row height (i.e.
     match the copy column) at all times, instead of a fixed 640px that
     left a gap when the copy was taller/shorter. Grid items stretch by
     default; removing the explicit height lets the row (sized by the
     copy content) drive the photo height. */
  .how-we-work__media {
    aspect-ratio: auto;
    height: auto;
    align-self: stretch;
  }
}

/* Mobile (≤649): drop the photo but KEEP the "How We Work" H2 as a plain
   flow heading above the copy. The media wrapper collapses to its title
   only — static positioning, no fixed height/aspect, transparent bed so
   it blends into the section's off-white. Reads as one continuous panel
   with the copy block below it. */
@media (max-width: 649px) {
  .how-we-work__media {
    position: static;
    aspect-ratio: auto;
    height: auto;
    background: transparent;
    overflow: visible;
  }

  .how-we-work__photo {
    display: none;
  }

  /* Title back in flow: top-left, dark on off-white, no absolute
     centering / stroke / nowrap. Top+side padding matches the copy
     gutter; no bottom padding — the copy block's own top padding
     (space-10) supplies the gap down to "The Visit". Selector is
     doubled (.how-we-work .how-we-work__overlay) to outrank the base
     .how-we-work__overlay rule, which appears later in the file. */
  .how-we-work .how-we-work__overlay {
    position: static;
    transform: none;
    text-align: left;
    white-space: normal;
    color: var(--noir);
    -webkit-text-stroke: 0;
    /* 28px (was 24, +4); slight line spacing retained. */
    font-size: 28px;
    line-height: 1.12;
    padding: 44px var(--container-gutter) 0;
    /* Centre the title block to align with the centred copy-inner.
       Same px cap + gutter as the copy block (below) so the two text
       left-edges match at any width — px, not ch, because ch differs
       between the display and body fonts. */
    box-sizing: border-box;
    max-width: 492px;
    margin-inline: auto;
  }

  /* Pull the subhead up toward the title: copy block top padding 12px.
     Doubled selector to outrank the later base .how-we-work__copy rule.
     Bottom padding trimmed 96 → 44 so the empty space below "Post"
     matches the 44px above the title — centring the text group in the
     section vertically. (B/C are already centred via align-items.) */
  .how-we-work .how-we-work__copy {
    padding-top: 12px;
    padding-bottom: 44px;
    /* Gutter moves to the inner so the inner can be a fixed centred
       column matching the title's cap. */
    padding-inline: 0;
    justify-content: center;
  }

  /* Copy block: same 492px cap + gutter as the title, centred. This
     makes the body text left-edge align with the title at all widths. */
  .how-we-work .how-we-work__copy-inner {
    box-sizing: border-box;
    width: min(100%, 492px);
    max-width: 492px;
    margin-inline: auto;
    padding-inline: var(--container-gutter);
  }

  /* Mobile head-rule at 60% width: a border-top spans the full box, so
     drop it and draw a 60%-wide line via ::before instead. Desktop
     (≥650) keeps the full-width border on .how-we-work__steps. */
  .how-we-work .how-we-work__steps {
    border-top: 0;
    position: relative;
  }

  /* Tagline subhead nudged down 4px (margin-top); bottom margin 32
     places the head rule + steps lower again (28→32). */
  .how-we-work .how-we-work__subhead {
    margin-top: 4px;
    margin-bottom: 32px;
  }

  /* Indent each step's BODY text on mobile; the step label,
     subhead, and head rule all stay flush left. 8px top/bottom gives
     the body line room to breathe under its label. Left = 31px so the
     text clears the connector line (right edge at 7px) by 24px. */
  .how-we-work .how-we-work__step-body {
    padding: 8px 0 8px 31px;
  }
  /* Head rule full width on mobile too (was 60%) per user; still
     grows from 0 on scroll. */
  .how-we-work .how-we-work__steps::before {
    width: 100%;
  }
}

.how-we-work__photo {
  position: absolute;
  /* Extend the photo 12% below the media box; the media's overflow:hidden
     clips it, cropping the image's light studio base out of the visible
     frame so the column never shows a pale band at its bottom edge.
     (Top/left/right flush; only the bottom is pushed past the clip.) */
  inset: 0 0 -12% 0;
  /* Cover so the photo bleeds the full height of the column
     with no gap above or below. */
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
  /* The source image is already B&W; keep filter as a safety net
     in case the asset is swapped. */
  filter: grayscale(1) contrast(1.03);
}

/* Photo swipes in left→right on reveal — the same clip-path wipe as the
   Who-We-Are images (reuses the model-wipe keyframe). reveal.js adds
   .is-visible; full image for no-JS / reduced-motion. */
@media (prefers-reduced-motion: no-preference) {
  .how-we-work__photo {
    clip-path: inset(0 100% 0 0);
  }
  .how-we-work__photo.is-visible {
    animation: model-wipe 1s cubic-bezier(0.4, 0, 0.1, 1) forwards;
  }
}

/* HOW WE WORK overlay — sits in the upper-middle of the photo,
   centered horizontally within the photo column, over the
   chest area of the lab coat. */
.how-we-work__overlay {
  position: absolute;
  top: 33%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(18px, 3.2vw, 35px);
  letter-spacing: 0.04em;
  line-height: 1;
  text-transform: uppercase;
  color: var(--noir);
  text-align: center;
  white-space: nowrap;
  pointer-events: none;
  z-index: 2;
  /* Synthetic stroke past Instrument Sans's 800 cap. */
  -webkit-text-stroke: 0.6px currentColor;
}

/* ----- Copy column ----- */

.how-we-work__copy {
  background: var(--off-white);
  display: flex;
  align-items: center;
  padding: var(--space-10) var(--container-gutter);
}

@media (min-width: 650px) {
  .how-we-work__copy {
    padding: clamp(48px, 6vw, 96px) clamp(32px, 7vw, 96px);
  }
}

.how-we-work__copy-inner {
  max-width: 48ch;
}
/* Slow the How We Work copy reveal (title + subhead + steps) so the
   entrance rise reads — the base 600ms reveal was too quick to catch.
   Scroll-triggered via reveal.js like everything else. */
.how-we-work__copy-inner.reveal {
  transition-duration: 1.5s;
}

/* Sections 01/02/03 (Aesthetics · IV & Vitamin · Weight Management) —
   +32px top & bottom over Layout A/B/C to space them out per user. These
   full-bleed grid sections run padding-block:0 by default, so this is the
   added breathing room. */
@media (min-width: 650px) {
  #aesthetics.section,
  #wellness.section,
  #weight-management.section {
    padding-top: 48px;
    padding-bottom: 48px;
  }
}

/* ============================================================
   Services statement — full-width type band between the hero
   and How We Work.
   ============================================================ */
.statement {
  background: var(--off-white);
  color: var(--noir);
  /* 2x the prior vertical band (was clamp(56px, 8vw, 116px)). */
  padding-top: clamp(112px, 16vw, 232px);
  padding-bottom: calc(clamp(112px, 16vw, 232px) - 32px);
  /* Bottom hairline run — distinguishes this band from the off-white
     How We Work section directly below it. */
  border-bottom: 1px solid var(--soft-line);
  text-align: center;
  overflow: hidden;
}
.statement__inner {
  padding-inline: 16px;
  /* Nudge the content within the section without changing its height
     (transform doesn't affect layout box). */
  transform: translateY(16px);
}
/* Layout A (650–949): lift the Services content (was translateY 0 → up
   another 32px). */
@media (min-width: 650px) and (max-width: 949px) {
  .statement__inner {
    transform: translateY(-32px);
  }
}
/* Layout B/C (≥950): lift 32px from the global 16px baseline. */
@media (min-width: 950px) {
  .statement__inner {
    transform: translateY(-16px);
  }
}
.statement__title {
  font-family: var(--font-display);
  font-weight: 200;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  line-height: 1.06;
  margin: 0;
  color: var(--noir);
  text-wrap: balance;
  font-size: clamp(26px, 7.4vw, 40px);
}
/* Each service term is its own staggered reveal unit + a clickable
   secondary-nav link into its section. inline-block so the reveal's
   translateY transform applies. No `transition` declared here so the
   .reveal opacity/transform transition isn't clobbered. */
.statement__word {
  display: inline-block;
  color: inherit;
  text-decoration: none;
}
.statement__term {
  position: relative;
  display: inline-block;
  transition: color var(--dur-link) var(--ease-out);
}
/* Small section-index beneath each term — same numbering language as the
   01/02/03 section numbers (display-normal, warm-accent). Absolutely
   positioned so it never affects the full-width line metrics; sized in em
   so it tracks the title across Layouts A/B/C. */
.statement__index {
  position: absolute;
  left: 50%;
  top: 100%;
  transform: translateX(-50%);
  margin-top: 24px;
  font-family: var(--font-display-normal);
  font-weight: 400;
  font-size: 0.277em;
  letter-spacing: 0.32em;
  text-indent: 0.32em;
  line-height: 1;
  color: var(--warm-accent);
  transition: color var(--dur-link) var(--ease-out);
}
/* Hover/focus: term tints to the accent, index swaps to noir — a quiet,
   unmistakable nav cue. */
.statement__word:hover .statement__term,
.statement__word:focus-visible .statement__term {
  color: var(--warm-accent);
}
.statement__word:hover .statement__index,
.statement__word:focus-visible .statement__index {
  color: var(--noir);
}
.statement__word:focus-visible {
  outline: 2px solid var(--warm-accent);
  outline-offset: 6px;
}
/* Reveal 3x slower for this band only (duration + stagger), leaving the
   site-wide --dur-reveal token untouched. */
.statement .reveal {
  transition-duration: 1530ms;
}
.statement .reveal[data-delay="1"] { transition-delay: 204ms; }
.statement .reveal[data-delay="2"] { transition-delay: 408ms; }
.statement .reveal[data-delay="3"] { transition-delay: 612ms; }
.statement__sep {
  margin-right: 0.34em;
  color: var(--warm-gray);
  font-weight: 300;
  opacity: 0.55;
}
@media (min-width: 650px) {
  .statement__title {
    /* One line spanning the full viewport across Layouts A/B/C. With
       white-space:nowrap and a vw font-size, the rendered line stays a
       constant fraction of the viewport at every width, so a single
       tuned value fills the band edge-to-edge. Value set by measurement
       to land at ~94vw (a hair of breathing room each side). */
    white-space: nowrap;
    letter-spacing: 0;
    font-size: 4.05vw;
  }
}
.statement__sub {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: calc(var(--text-lg) * 1.5 - 2px);
  line-height: 1.5;
  color: var(--warm-gray);
  margin: calc(clamp(14px, 2vw, 26px) + 32px) 0 0;
}
@media (min-width: 1024px) {
  .statement__sub {
    font-size: calc(var(--text-xl) * 1.5 - 2px);
  }
}

/* Mobile (≤649): left-aligned. The three service terms stack vertically
   with 16px between them; each term's index number drops into flow
   beneath it (instead of the absolute, centered desktop placement) so it
   never collides with the next line. Separators are dropped. Caption is
   larger and also left-aligned. */
@media (max-width: 649px) {
  .statement {
    text-align: center;
    /* Roomier band on mobile; spaced to match the larger type. */
    padding-top: 64px;
    padding-bottom: 80px;
  }
  .statement__title {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    /* 6px larger than the base clamp(26px,…,40px) on mobile. Desktop
       titles stay vw-locked (full-width fill), so they're untouched. */
    font-size: clamp(32px, 8.6vw, 46px);
  }
  .statement__sep {
    display: none;
  }
  .statement__index {
    position: static;
    display: block;
    transform: none;
    margin: 6px 0 0 0;
    text-indent: 0;
    text-align: center;
    /* +2px over the desktop em-derived size on mobile. */
    font-size: 15px;
  }
  .statement__sub {
    text-align: center;
    font-size: calc(var(--text-lg) * 1.7);
  }
}

/* ----- Section intro: subhead under the title (Subhead A) ----- */
.how-we-work__subhead {
  font-family: var(--font-serif);
  font-weight: 400;
  /* Italic reads as an editorial standfirst, distinct from step bodies. */
  font-style: italic;
  /* Mobile 15px (≥650 bumps to 18). */
  font-size: 15px;
  line-height: 1.45;
  /* Same warm light tone as the step body text (--taupe). */
  color: var(--taupe);
  margin: 0 0 24px 0;
  max-width: 40ch;
}

/* ----- The three steps: Enquiry → Visit → Result -----
   List sits below a hairline divider (the rule that separates the
   intro from the steps). Each step = serif accent label + body line. */
.how-we-work__steps {
  list-style: none;
  margin: 0;
  /* Mobile: 36px gap between the head rule and the first step
     (≥650 overrides to 32). */
  padding: 36px 0 0 0;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 28px;
}

/* Head rule (the hairline above the steps) as a scalable ::before so it
   can grow from 0 → full width on scroll. Full width by default (and
   for no-JS / reduced-motion); mobile narrows it to 60% below. */
.how-we-work__steps::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  border-top: var(--hairline) solid var(--hww-head-rule, var(--soft-line));
  transform-origin: left center;
}

.how-we-work__step {
  display: flex;
  flex-direction: column;
  /* Title → copy gap, +4px per user (was 6). */
  gap: 10px;
}

.how-we-work__step-label {
  font-family: var(--font-serif);
  font-weight: 400;
  font-style: normal;
  font-size: 20px;
  line-height: 1.2;
  /* Black titles for strong presence. */
  color: var(--noir);
  margin: 0;
  letter-spacing: 0;
  text-transform: none;
}

.how-we-work__step-body {
  font-family: var(--font-body);
  font-weight: 400;
  /* Flat 16px across all layouts (per user). */
  font-size: 16px;
  line-height: 1.75;
  /* Warm light body, a step darker than --warm-accent for legibility. */
  color: var(--taupe);
  margin: 0;
  max-width: 44ch;
  /* Anchor for the connector line (all breakpoints, incl. mobile). */
  position: relative;
}

/* Step connector: a hairline vertical line beside each step's body
   text, in the indent gutter, grouping Enquire → Visit → Post as a
   series. Applies on every breakpoint. */
.how-we-work__step-body::before {
  content: "";
  position: absolute;
  left: 6px;
  top: 3px;
  bottom: 3px;
  /* Per-step colour + width vars; defaults (and no-JS / reduced-motion)
     = final soft-line at 1px. The scroll animation arms them to black +
     2px then transitions each line back in sequence. */
  background-color: var(--hww-line, var(--soft-line));
  width: var(--hww-line-w, 1px);
}

@media (prefers-reduced-motion: no-preference) {
  /* Transition is active in BOTH armed and playing states so the
     changes actually animate (if the transition is added in the same
     frame as the value flip, browsers skip it). */
  .how-we-work__steps.is-armed .how-we-work__step-body::before,
  .how-we-work__steps.is-playing .how-we-work__step-body::before {
    transition: background-color 1.2s ease, width 1.2s ease;
  }
  /* Armed: all three lines go light-warm + 2× width (off-screen at load).
     Softened from --noir (near-black read too heavy) to --light-warm so
     the start is gentler while still drawing dark → light. */
  .how-we-work__steps.is-armed .how-we-work__step {
    --hww-line: var(--light-warm);
    --hww-line-w: 2px;
  }
  /* Playing: lines transition black→soft-line and 2px→1px, staggered so
     they ignite in order. 0.5s each; 0.2s start offset between steps. */
  .how-we-work__steps.is-playing .how-we-work__step {
    --hww-line: var(--soft-line);
    --hww-line-w: 1px;
  }
  /* Vertical connector lines start after a 0.1s lead-in, then ignite in
     order (0.1s stagger): step 1 @0.1s, step 2 @0.2s, step 3 @0.3s. */
  .how-we-work__steps.is-playing .how-we-work__step:nth-child(1) .how-we-work__step-body::before {
    transition-delay: 0.1s;
  }
  .how-we-work__steps.is-playing .how-we-work__step:nth-child(2) .how-we-work__step-body::before {
    transition-delay: 0.2s;
  }
  .how-we-work__steps.is-playing .how-we-work__step:nth-child(3) .how-we-work__step-body::before {
    transition-delay: 0.3s;
  }

  /* Head rule grows from 0 → full width (left-anchored) on play, riding
     the same 1.2s timing as the first line — and travels colour
     light-warm → soft-line to match the vertical connectors. */
  .how-we-work__steps.is-armed::before,
  .how-we-work__steps.is-playing::before {
    transition: transform 1.2s ease, border-top-color 1.2s ease;
  }
  .how-we-work__steps.is-armed::before {
    transform: scaleX(0);
    --hww-head-rule: var(--light-warm);
  }
  .how-we-work__steps.is-playing::before {
    transform: scaleX(1);
    --hww-head-rule: var(--soft-line);
  }
}

/* Mobile only (≤649): connector line 15% shorter (scaled from its
   center). Layout A and B/C keep the full-height line. */
@media (max-width: 649px) {
  .how-we-work__step-body::before {
    transform: scaleY(0.85);
  }
}

@media (min-width: 650px) {
  .how-we-work__subhead {
    font-size: 18px;
  }
  .how-we-work__steps {
    gap: 32px;
    padding-top: 32px;
  }
  .how-we-work__step-label {
    font-size: clamp(20px, 2vw, 24px);
  }
  .how-we-work__step-body {
    font-size: 16px;
    line-height: 1.65;
  }
}

/* Right-column title: only rendered in Layout A (see below). Hidden
   everywhere else — mobile & B/C use the .how-we-work__overlay title
   (mobile: static heading; B/C: overlaid on the photo). */
.how-we-work__copy-title {
  display: none;
}

/* ============================================================
   HOW WE WORK — Layout A/B/C (≥650)
   The title moves OFF the photo into the right copy column:
   hide the on-photo overlay, reveal the in-flow copy-title.
   Photo stays on the left (now full-height). Right-column text
   pulled closer to the left, widened, the block lifted 16px, and
   the step BODY text indented 16px. Carried from Layout A across
   all breakpoints ≥650 per user direction.
   ============================================================ */
@media (min-width: 650px) {
  /* Hide the title that overlays the photo. */
  .how-we-work .how-we-work__overlay {
    display: none;
  }

  /* Show the title at the top of the right copy column, in the same
     uppercase display type as the on-photo title. */
  .how-we-work__copy-title {
    display: block;
    margin: 0 0 20px 0;
    padding-top: 8px;
    font-family: var(--font-display);
    font-weight: 900;
    font-size: 32px;
    line-height: 1.12;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--noir);
    /* Keep the title on a single line. */
    white-space: nowrap;
  }

  /* Widen the right column: pull left padding 24px in (was 16) and
     right padding 8px in, from their clamp values. */
  .how-we-work__copy {
    padding-left: calc(clamp(32px, 7vw, 96px) - 24px);
    padding-right: calc(clamp(32px, 7vw, 96px) - 8px);
  }

  /* Indent the step BODY text (labels/title/subhead stay flush).
     32px = original 16 + 16 to clear the connector line. */
  .how-we-work .how-we-work__step-body {
    padding-left: 32px;
  }

  /* ---- EXPERIMENT #2: vertical centering (revert: set margin-top back
     to -16px to restore the earlier 16px upward lift) ----
     The block is vertically centered (align-items:center on .copy).
     -8px lifts the right-side copy block 8px above true centre (A/B/C),
     balancing the whitespace above the title and below "Post". */
  .how-we-work__copy-inner {
    margin-top: -8px;
  }

  /* Subhead in A/B/C (now 18px, +4), with +4px below it to the
     head rule (base 24→28). */
  .how-we-work__subhead {
    font-size: 18px;
    margin-bottom: 28px;
  }

  /* +4px total between each step's label and its body text (base 6→10). */
  .how-we-work__step {
    gap: 10px;
  }

  /* Looser step-body line spacing per user (1.5→1.7). */
  .how-we-work__step-body {
    line-height: 1.7;
  }
}


/* ============================================================
   TREATMENTS OVERVIEW — three-tile gateway under How We Work
   - Black bezel via the section background showing through
     thin grid gaps.
   - Each tile is an anchor link into the matching service
     section (#aesthetics, #iv-therapy, #weight-management).
   - First tile carries the "treatments" italic-serif overlay
     dead-center; all three carry an uppercase label at 65%.
   - Hover: a faint multiply overlay so the tile still reads
     as a photograph beneath the hint of state.
   ============================================================ */

.treatments-overview {
  background: #F0ECE5;
  width: 100%;
  /* Bars above and below the tile row. */
  padding: 0 0 144px;
}

@media (min-width: 1024px) {
  .treatments-overview {
    padding: 16px 0 168px;
  }
}

/* Mobile (≤649): +24px top & bottom over the base 40px = 64px, making
   the 1+2 section a touch taller without changing the tiles. */
@media (max-width: 649px) {
  .treatments-overview {
    padding: 4px 0 107px;
  }
}

/* Layout A (650–949): 24px padding-top so the section is taller above
   the "Treatments" text (base band is otherwise 0 top). */
@media (min-width: 650px) and (max-width: 949px) {
  .treatments-overview {
    padding-top: 24px;
  }
}

/* ============================================================
   MEMBERSHIP — mobile (≤649) stacked cards.
   The cards stack vertically (the base .tier-row grid 1fr) so all
   three are visible at once. Card internals are compacted so each
   card is shorter. Heading bumped +4px and nudged down.
   ============================================================ */
@media (max-width: 649px) {
  /* 20px of extra horizontal padding on the whole membership section
     (on top of the gutter) per user (16 + another 4). */
  #membership .container {
    padding-inline: calc(var(--container-gutter) + 20px);
  }

  /* Heading +4px (32→36) and nudged down 16px per user. */
  #membership .heading {
    font-size: 36px;
    margin-top: 16px;
  }

  /* "04" + "Membership" side-by-side on mobile (they stack at ≥650),
     with a wide 66px gap so "Membership" sits well right of "04". */
  #membership .section-head .eyebrow {
    display: flex;
    align-items: baseline;
    gap: 66px;
  }
  #membership .section-head .eyebrow__label {
    margin-top: 0;
  }

  /* Compact the card internals a touch (full content still shown). */
  #membership .tier__name { margin-bottom: 14px; }
  #membership .tier__price { margin-bottom: 14px; }
  #membership .tier__divider { margin-bottom: 14px; }
  #membership .tier__benefits { margin-bottom: 16px; }
  #membership .tier__benefits li { padding-block: 8px; }
  #membership .tier__cta { margin-top: 16px; }

  /* Carousel card surface (compact padding + opaque charcoal so each
     card reads as a discrete layer). The coverflow POSITIONING lives in
     the shared ≤949 block below (placed after the Layout A grid so it
     overrides that grid for 650–949 too). */
  #membership .tier {
    padding-block: 28px;
    background: var(--charcoal);
  }
}

/* ============================================================
   MEMBERSHIP (#membership) — compaction
   Strict text, no image. Scoped to #membership so other sections
   keep their rhythm. Layout C (≥1280) first.
   ============================================================ */
@media (min-width: 1280px) {
  /* 1 · cut the bottom seam to the closing section (200 → 120). */
  #membership.section {
    padding-bottom: 120px;
    /* Eyebrow ("04 — Membership") to sit 56px from the section top. */
    padding-top: 56px;
  }
  /* 2 · header → tiers gap (96 → 48). */
  #membership .section-head {
    margin-bottom: 48px;
  }
  /* 3 · tier card vertical padding (64 → 40); keep 48 horizontal. */
  #membership .tier {
    padding-block: 40px;
  }
  /* 4 · meta note top margin (64 → 36). */
  #membership .tier-row__meta {
    margin-top: 36px;
  }
  /* Lead paragraph: smaller + tighter (18/1.6 → 16/1.45). */
  #membership .section-head__lead {
    font-size: 16px;
    line-height: 1.45;
  }

  /* Section-head as a 20/80 two-column split: "04 — Membership" on the
     left, heading + lead stacked on the right. Eyebrow spans both rows
     so it pins top-left. Head widened to the full container (section
     padding unchanged). */
  #membership .section-head {
    grid-template-columns: 1fr 3fr;
    column-gap: 56px;
    row-gap: var(--space-5);
    max-width: none;
    align-items: start;
  }
  #membership .section-head .eyebrow {
    grid-column: 1;
    grid-row: 1 / 3;
    margin: 0;
    /* Nudge the 04/Membership stack down 16px to sit below the
       heading cap. */
    transform: translateY(16px);
  }
  #membership .section-head .heading {
    grid-column: 2;
    grid-row: 1;
  }
  #membership .section-head__lead {
    grid-column: 2;
    grid-row: 2;
    margin-top: 0;
  }
}

/* "04 — Membership" eyebrow: whole line styled like the 01/02/03
   section numbers (--font-display-normal, 400, 20px, 0.04em, no
   uppercase). Color inherits from .eyebrow (warm-accent) — kept. */
#membership .eyebrow,
#membership .eyebrow__no {
  font-family: var(--font-display-normal);
  font-weight: 400;
  font-size: 20px;
  letter-spacing: 0.04em;
  text-transform: none;
}

/* "04" on its own line; line-height 1 so its glyph top aligns with
   the heading's cap (both pinned to the same grid row). */
#membership .eyebrow__no {
  display: block;
  line-height: 1;
}

/* "Membership" below "04", in the same treatment as the "Wellness"
   label over the section-03 image (display-normal, 16px/500, 0.22em,
   uppercase). Inherits the eyebrow's warm-accent color. */
#membership .eyebrow__label {
  display: block;
  margin-top: 16px;
  font-family: var(--font-display-normal);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

/* Membership heading in the hero serif (like "A Private Hour.") instead
   of the uppercase display face — softer, less shouty. Mixed-case,
   weight 400, tight tracking. Color stays off-white via .section--dark. */
#membership .heading {
  font-family: var(--font-serif);
  font-weight: 400;
  font-style: normal;
  text-transform: none;
  letter-spacing: -0.005em;
  line-height: 1.1;
}

/* ----- Tier cards: prices, hover, click-to-select ----- */

/* Prices heavier (was weight 200). */
#membership .tier__price-amount {
  font-weight: 600;
}

/* Hover: card fills with the closing section's background (--warm-dark,
   the dark grey of the section directly below Membership). */
#membership .tier {
  cursor: pointer;
  transition: background-color 0.3s ease, border-color 0.3s ease;
}
#membership .tier:hover {
  background-color: var(--warm-dark);
}

/* Selection model: exactly one active card carries the warm-accent
   stroke (same as the featured card). Border is driven entirely by
   .tier--selected (JS), so the featured card's always-on highlight is
   neutralised to a normal tier border and JS selects it by default. */
#membership .tier--featured {
  border: 1px solid var(--divider-dark);
}
#membership .tier--selected {
  border: 1px solid var(--warm-accent);
}
@media (min-width: 1024px) {
  #membership .tier--featured {
    border: 0;
    border-right: 1px solid var(--divider-dark);
  }
  #membership .tier--featured:last-child {
    border-right: 0;
  }
  /* Selected gets the full warm-accent box even in the bordered-row
     layout where tiles normally show only a right divider. */
  #membership .tier--selected,
  #membership .tier--selected:last-child {
    border: 1px solid var(--warm-accent);
  }
}

/* Layout B (1024–1279): shorten the cards to match C (40) and A (32);
   the component default here is 64px vertical padding, which made the
   Layout B cards noticeably taller. */
@media (min-width: 1024px) and (max-width: 1279px) {
  #membership .tier {
    padding-block: 40px;
  }
  /* Heading 15% smaller here (56 → ~47.6px) per user — keeps
     "Structured Care, Privately Delivered" balanced in the narrower
     right column. */
  #membership .section-head .heading {
    font-size: calc(var(--text-4xl) * 0.85);
  }
}

/* Layout A + B (650–1279): section-head side-by-side like Layout C —
   "04 — Membership" eyebrow on the left, heading + caption stacked on
   the right (instead of all stacked). */
@media (min-width: 650px) and (max-width: 1279px) {
  #membership .section-head {
    grid-template-columns: 1fr 3fr;
    column-gap: 40px;
    row-gap: var(--space-5);
    max-width: none;
    align-items: start;
  }
  #membership .section-head .eyebrow {
    grid-column: 1;
    grid-row: 1 / 3;
    margin: 0;
    transform: translateY(16px);
  }
  #membership .section-head .heading {
    grid-column: 2;
    grid-row: 1;
  }
  #membership .section-head__lead {
    grid-column: 2;
    grid-row: 2;
    margin-top: 0;
    font-size: 16px;
    line-height: 1.45;
  }
}

/* Layout A (650–1023): carry the B/C 3-column grid down to this width
   instead of the stacked deck (which is mobile ≤649 only) — per user,
   there's room for three columns here. Mirrors the ≥1024 grid + border
   treatment with tighter padding for the narrower columns. */
@media (min-width: 650px) and (max-width: 1023px) {
  #membership .tier-row {
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    border-top: 1px solid var(--divider-dark);
    border-bottom: 1px solid var(--divider-dark);
  }
  #membership .tier {
    border: 0;
    border-right: 1px solid var(--divider-dark);
    padding: var(--space-6) var(--space-5);
  }
  #membership .tier:last-child {
    border-right: 0;
  }
  #membership .tier--featured {
    border: 0;
    border-right: 1px solid var(--divider-dark);
  }
  #membership .tier--featured:last-child {
    border-right: 0;
  }
  #membership .tier--selected,
  #membership .tier--selected:last-child {
    border: 1px solid var(--warm-accent);
  }
}

/* ============================================================
   MEMBERSHIP — horizontal carousel (Mobile ≤649 + Layout A 650–949).
   A swipeable, snap-to-centre strip of cards with the neighbours peeking
   at the edges. Whichever card rests nearest the centre is "active":
   full size, sharp, warm-accent border; the others shrink under a dark
   scrim so they read as "behind" — the active card comes forward in
   place (it never yanks itself to the middle). Scroll/swipe to browse;
   tap a peeking card or a dot to bring it in. membership.js toggles
   .is-active from scroll position and builds the dots. No top/bottom
   rules on the strip. Placed AFTER the 650–1023 grid block so it
   overrides it for 650–949; 950–1023 keeps the grid.
   ============================================================ */
@media (max-width: 949px) {
  #membership .tier-row {
    --tier-card-w: 72vw;
    position: relative;
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 0;
    border: 0;
    /* Full-bleed scroller; the inline padding lets the first & last card
       reach the centre, and leaves room for neighbours to peek. */
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    padding-inline: calc((100vw - var(--tier-card-w)) / 2);
    padding-block: 12px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: calc((100vw - var(--tier-card-w)) / 2);
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  #membership .tier-row::-webkit-scrollbar { display: none; }

  #membership .tier {
    position: relative;
    flex: 0 0 var(--tier-card-w);
    max-width: 340px;
    /* Negative inline margin overlaps the neighbours so they tuck in
       just behind the active card's edges (closer than a gap allows). */
    margin: 0 -7vw;
    scroll-snap-align: center;
    background: var(--charcoal);
    border: 1px solid var(--divider-dark);
    z-index: 1;
    /* Inactive cards sit back: smaller + nudged down so they read as
       "behind" the active card. (Scale raised 0.84 → 0.92 per user —
       the background cards are 10% larger.) */
    transform: scale(0.92) translateY(10px);
    transform-origin: center center;
    transition: transform 0.5s cubic-bezier(0.33, 1, 0.68, 1),
                border-color 0.5s ease,
                box-shadow 0.5s ease;
    will-change: transform;
  }

  /* Dark scrim over the inactive cards. */
  #membership .tier::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(6, 6, 6, 0.5);
    opacity: 1;
    transition: opacity 0.5s ease;
    pointer-events: none;
    z-index: 5;
  }

  /* Active (centred) card comes forward in place. */
  #membership .tier.is-active {
    transform: scale(1) translateY(0);
    border-color: var(--warm-accent);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6);
    z-index: 2;
  }
  #membership .tier.is-active::after { opacity: 0; }

  /* Suppress the desktop hover-fill inside the carousel. */
  #membership .tier:hover { background-color: var(--charcoal); }

  /* Progress dashes — three equal rounded bars spanning a fixed share of
     the viewport, with a bright "thumb" pill that slides along the track
     as the carousel scrolls (positioned by membership.js). */
  #membership .tier-dots {
    position: relative;
    display: flex;
    gap: 16px;
    /* Span 90% of the section on mobile, centred via the full-bleed trick
       (Layout A overrides to 40vw below). */
    width: 90vw;
    margin: 26px 0 0;
    margin-left: calc(-45vw + 50%);
  }
  #membership .tier-dot {
    flex: 1 1 0;
    height: 3px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.22);
    cursor: pointer;
    transition: background 0.3s ease;
  }
  #membership .tier-dots__thumb {
    position: absolute;
    top: 0;
    left: 0;
    height: 3px;
    border-radius: 999px;
    background: #fff;
    pointer-events: none;
    /* width + translateX are set from scroll position in JS; a short
       transition smooths clicks/snaps without lagging finger-scroll. */
    transition: transform 0.14s linear, width 0.2s ease;
  }
}

/* Layout A (650–949): narrower cards so more of the neighbours show. */
@media (min-width: 650px) and (max-width: 949px) {
  #membership .tier-row {
    --tier-card-w: 41vw;
  }
  #membership .tier {
    max-width: 420px;
  }
  /* Dash track spans 40% of the viewport here (vs 90% on mobile);
     reset the mobile full-bleed margin back to auto-centred. */
  #membership .tier-dots {
    width: 40vw;
    max-width: 460px;
    margin: 26px auto 0;
  }
  /* +16px left padding on the section header per user. */
  #membership .section-head {
    padding-left: 16px;
  }
}

/* Tier name: 16px. Weight matches the middle ("Refine") card's inline
   700 so all three names are consistent. */
#membership .tier__name {
  font-size: 16px;
  font-weight: 700;
}

/* Price amount: 32px, tracking 0 (weight 600 set above). */
#membership .tier__price-amount {
  font-size: 32px;
  letter-spacing: 0;
}

/* Perks: no markers, just more breathing room between rows. */
#membership .tier__benefits {
  list-style: none;
  padding-left: 0;
}
#membership .tier__benefits li {
  padding-block: 11px;
}
/* Layout A/B/C (≥650): tighten the perk row rhythm slightly
   (11 → 9px per side, –4px between rows). Mobile keeps 11px. */
@media (min-width: 650px) {
  #membership .tier__benefits li {
    padding-block: 9px;
  }
}

/* Carousel (≤949): tighten the spacing between features further to make
   the cards ~10% shorter per user (mobile 11→4, Layout A 9→4). */
@media (max-width: 949px) {
  #membership .tier__benefits li {
    padding-block: 4px;
  }
}

/* Move "Enquire" up 32px: trim the CTA's top margin (48 → 16). The card
   is content-driven (taller than min-height), so this directly lifts the
   CTA and shortens the card by 32. */
#membership .tier__cta {
  margin-top: 16px;
}

/* Carousel (≤949): lift Enquire another 16px (→ 0) per user, which also
   shortens the content-driven card by 16px. */
@media (max-width: 949px) {
  #membership .tier__cta {
    margin-top: 0;
  }
}

.treatments-overview__grid {
  display: grid;
  grid-template-columns: 1fr;
  /* Tiles butt up against each other — no gutter. */
  gap: 0;
}

/* 3-up from the start of Layout A (650). Below 650 = mobile 1+2. */
@media (min-width: 650px) {
  .treatments-overview__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Mobile (≤649): "1 + 2" composition — the title/Aesthetics tile spans
   full width on top, IV + Weight Management sit side-by-side below.
   All tiles golden-ratio landscape (1.618 : 1). Selectors are doubled
   (.grid .tile) to outrank the base .tile rule below, which would
   otherwise win at equal specificity by source order. */
@media (max-width: 649px) {
  .treatments-overview__grid {
    grid-template-columns: 1fr 1fr;
    /* Lift just the image grid 16px without changing section height. */
    transform: translateY(-16px);
  }
  .treatments-overview__grid .treatments-overview__tile {
    aspect-ratio: 1.618 / 1;
  }
  .treatments-overview__grid .treatments-overview__tile--title {
    grid-column: 1 / -1;
  }
}

.treatments-overview__tile {
  position: relative;
  display: block;
  /* Mobile: tiles stack 1-up, square. */
  aspect-ratio: 1 / 1;
  overflow: hidden;
  text-decoration: none;
  color: var(--white);
  background: var(--noir);
  isolation: isolate;
}

/* Layouts A + B (650–1279): 3-up, tiles shortened to 320px. */
@media (min-width: 650px) {
  .treatments-overview__tile {
    aspect-ratio: auto;
    height: 320px;
  }
}

/* Layout C (≥1280): 400px tile height. */
@media (min-width: 1280px) {
  .treatments-overview__tile {
    aspect-ratio: auto;
    height: 400px;
  }
}

.treatments-overview__photo {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  filter: grayscale(1) contrast(1.03);
  transition: transform 600ms var(--ease-out, ease-out);
  z-index: 0;
}

/* IV Infusions and Weight Management tiles use color photography
   per user direction. Override the default grayscale filter — the
   subtle contrast boost is preserved so the tiles still feel
   tonally consistent with the rest of the page. */
.treatments-overview__tile[href="#iv-therapy"] .treatments-overview__photo,
.treatments-overview__tile[href="#weight-management"] .treatments-overview__photo {
  filter: contrast(1.03);
}

/* Hover overlay — sits between photo and copy. Multiply against
   the photo darkens it just enough to register a hover state
   without flooding the image. */
.treatments-overview__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0);
  mix-blend-mode: multiply;
  transition: background-color 320ms var(--ease-out, ease-out);
  z-index: 1;
  pointer-events: none;
}

.treatments-overview__tile:hover .treatments-overview__overlay,
.treatments-overview__tile:focus-visible .treatments-overview__overlay {
  background: rgba(0, 0, 0, 0.6);
}

.treatments-overview__tile:hover .treatments-overview__photo,
.treatments-overview__tile:focus-visible .treatments-overview__photo {
  transform: scale(1.02);
}

/* "treatments" section heading — top-center, above the tile row. */
.treatments-overview__heading {
  margin: 64px 0 32px;
  padding: 8px 0 48px;
  /* Lift the heading 24px without changing layout/section height. */
  transform: translateY(-24px);
  font-family: var(--font-serif);
  font-style: normal;
  font-weight: 400;
  font-size: calc(clamp(43.5px, 5.4vw, 87px) - 8px);
  line-height: 1;
  letter-spacing: -0.01em;
  text-align: center;
  color: var(--noir);
}

/* Mobile (≤649): "treatments" heading 10% smaller (62 → 52px). */
@media (max-width: 649px) {
  .treatments-overview__heading {
    font-size: 52px;
  }
}

/* Per-tile uppercase label — sits at 50% from the top,
   ~15% above the previous 65% position so it tracks with the
   raised title. */
.treatments-overview__label {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--font-display-normal);
  font-weight: 800;
  /* Match the main nav link size (13px). */
  font-size: 13px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--white);
  white-space: nowrap;
  z-index: 2;
  pointer-events: none;
  text-align: center;
}

@media (min-width: 1024px) {
  .treatments-overview__label {
    font-size: 13px;
  }
}


/* ============================================================
   SECTION 01 — AESTHETICS (canonical reference)
   Three equal columns, full-bleed to the viewport edges.
     COL 1 — full-bleed B&W portrait, flush to the left viewport
             edge. "01" overlay top-left, "AESTHETICS" lower-left.
     COL 2 — display headline in full, weight 200 (light caps,
             per Rule 4). Caption pinned to the bottom of the column.
     COL 3 — stacked Service/Price cards, separated by a single
             1px warm-accent hairline. Footnote at the bottom.
   Per Rule 1, the portrait carries no color (pure B&W).
   Per Rule 2, warm-accent appears only as hairlines and price
   figures; running text takes its color from the ground.
   ============================================================ */

.aesthetics {
  /* Override .section padding so the column grid bleeds the full
     viewport top-to-bottom and edge-to-edge. */
  padding-block: 0;
  background: var(--noir);
  color: var(--off-white);
}

.aesthetics__grid {
  display: grid;
  grid-template-columns: 1fr;
  width: 100%;
}

@media (min-width: 650px) {
  .aesthetics__grid {
    /* 4-cell column layout:

         A  B  C       A = portrait      D = col-2 caption
         A  D  E       B = headline      E = col-3 footnote
                       C = service menu

       The portrait spans both rows on the left; the headline (B)
       and service menu (C) sit in row 1; the col-2 caption (D)
       and col-3 footnote (E) share row 2 so they bottom-align
       automatically without any `margin-top: auto` plumbing.

       Column ratios stay at 7 / 4 / 10 across all viewports
       (per user direction); row 2 is auto-sized to the taller
       of D / E. */
    grid-template-columns: minmax(0, 7fr) minmax(0, 4fr) minmax(0, 10fr);
    grid-template-rows: 1fr auto;
    grid-template-areas:
      "portrait head menu"
      "portrait caption footnote";
    /* Portrait sets the floor; row 1 grows to accommodate content
       when descriptions wrap to more lines at narrower viewports. */
    min-height: 648px;
    align-items: stretch;
    /* Keep column 3 24px clear of the viewport's right edge.
       The grid's column tracks lay out inside this padding, so
       col-3's right edge sits at vw - 48px regardless of the fr
       ratio. Col 1 (the portrait) still bleeds to the left edge
       because there's no padding-left here. */
    padding-right: 48px;
  }

  .aesthetics__portrait { grid-area: portrait; }

  /* Dissolve the head and menu wrappers so their children become
     independent grid items placed into the four named cells.
     Padding that used to live on the wrappers is re-attached to
     the individual children below. */
  .aesthetics__head,
  .aesthetics__menu { display: contents; }

  .aesthetics__head-top {
    grid-area: head;
    /* Top + left inset, formerly on the head wrapper. */
    padding: 48px 0 0 40px;
  }

  .aesthetics__caption {
    grid-area: caption;
    /* Bottom + left inset, formerly on the head wrapper. */
    padding: 8px 0 40px 40px;
    /* No longer needs flex auto-margin — row 2 places it. */
    margin-top: 0;
  }

  .aesthetics__menu .service-list {
    grid-area: menu;
    /* Top + horizontal inset (formerly on the menu wrapper).
       Horizontal inset scales from 24px at vw=650 → 80px at
       vw=1280 so the service-card body has enough width to keep
       titles like "NEUROMODULATOR TREATMENT" on one line. */
    padding: 48px clamp(24px, calc((100vw - 650px) * 0.1474 + 24px), 80px) 0;
  }

  .aesthetics__footnote {
    grid-area: footnote;
    padding: 8px clamp(24px, calc((100vw - 650px) * 0.1474 + 24px), 80px) 40px;
    margin-top: 0;
  }
}

/* ----------------------------------------------------------------
   650–949px range — narrower 2-col layout (user-supplied comp).

        A  B        A = portrait      B = headline
        A  D        D = caption
        C  C        C = service menu
        E  E        E = footnote

   Portrait (A) spans rows 1–2 on the left. Headline (B) and
   caption (D) stack in the right column. Service list (C) and
   footnote (E) each take a full-width row below.
   ---------------------------------------------------------------- */
@media (min-width: 650px) and (max-width: 949px) {
  .aesthetics__grid {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto auto auto;
    grid-template-areas:
      "portrait head"
      "portrait caption"
      "menu     menu"
      "footnote footnote";
    row-gap: 0;
  }

  /* Portrait spans rows 1–2 on the left. height: 100% fills the grid
     area (so the img inside, which is height: 100%, resolves
     correctly). min-height sets the floor at 592px. 16px top padding
     gives the image breathing room from the section's top edge.
     !important to win against the base (min-width: 650px) portrait
     block lower in this file, which sets height: 648px, min-height: 0,
     and align-self: start. */
  .aesthetics__portrait {
    align-self: stretch !important;
    height: 100% !important;
    min-height: 592px !important;
    padding: 16px 0 0 0 !important;
  }

  /* Right column — headline at top of row 1, caption flowing into
     row 2 with a small top inset to separate it from the headline.
     !important to win against inline padding on head-top
     ("24px 0px 0px 32px") and caption ("8px 0px 40px 32px"). 48px
     left = base 32px column inset + 40px extra per user comment. */
  .aesthetics__head-top {
    padding: 24px 0 0 72px !important;
    width: auto;
  }

  /* Bigger headline in Layout A — stacks down the portrait height
     into short lines. Base inline style on the <h2> is 20px and
     padding 0; !important to override both at this break. */
  .aesthetics__headline {
    font-size: 30px !important;
    padding-right: 56px !important;
  }

  .aesthetics__caption {
    padding: 24px 32px 32px 72px !important;
    justify-self: start;
    text-align: left;
    max-width: 34ch !important;
    margin-top: 0;
    width: auto;
  }

  /* Service list — full-width row 3, 56px horizontal inset for a
     more spacious feel that visually centers the content. Drop the
     inline 600px height so the list sizes to its content. */
  .aesthetics__menu .service-list {
    padding: 48px 56px 0 56px !important;
    height: auto !important;
  }

  /* Footnote — full-width row 4, same 56px inset as the service
     list. Override the inline 500px width so it can fill the row. */
  .aesthetics__footnote {
    padding: 24px 56px 40px 56px !important;
    width: auto !important;
    max-width: none;
    margin-top: 0;
    justify-self: start;
    text-align: left;
  }

  /* Cards use the full row width — kill the inline name/desc
     widths so they no longer cap at ~328/344px. */
  .aesthetics__menu .service-card__name,
  .aesthetics__menu .service-card__desc {
    width: auto !important;
  }

  /* Push prices to the right edge of their 88px price column. The
     .service-card base CSS only flips justify-self to end at ≥768px,
     so at 650–767 (lower half of Layout A) the prices would otherwise
     sit at the LEFT of the 88px cell. */
  .aesthetics__menu .service-card__price {
    justify-self: end;
    align-items: flex-end;
    text-align: right;
  }
}

/* ----------------------------------------------------------------
   950–1279px range — original 2-col comp:

        A  B        A = portrait      B = headline
        A  C        C = service menu
        D  E        D = caption       E = footnote

   Portrait (A) spans rows 1–2 on the left; the right col holds
   the headline above the service menu. Row 3 sits below both —
   caption under the image, footnote under the service menu.
   ---------------------------------------------------------------- */
@media (min-width: 950px) and (max-width: 1279px) {
  /* Grid: portrait spans rows 1+2 on the left; head + menu stack
     in the right column; row 3 holds caption (col 1) + footnote
     (col 2) with a 12px gap above. */
  .aesthetics__grid {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto 1fr auto;
    grid-template-areas:
      "portrait head"
      "portrait menu"
      "caption  footnote";
    row-gap: 12px;
  }

  /* Portrait spans rows 1+2 on the left and stretches to fill them.
     Override the inline height with a value tuned to this break
     (675px desktop × 1.1 ≈ 743px, less 16px = 727px, less another
     24px per user = 703px). Padding zeroed so the image sits flush
     against the section's top/bottom edges. */
  .aesthetics__portrait {
    /* Sticky in Layout B: the menu column runs long here, so pin the
       portrait below the fixed nav (72px + 8px) and let the list scroll
       past it. align-self:start (not stretch) so the figure keeps its
       own 703px height and can travel within its grid area. !important
       because the base ≥650 portrait rule (align-self: stretch) sits
       later in the file and would otherwise win and break sticky. */
    /* Layout B: image bleeds the full left column — flush to the top and
       left edges and stretched to the column's full height, so it reads as
       a solid full-bleed image rather than a floating fixed-height box. */
    align-self: stretch !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 0;
  }

  /* Head-top: 32px top + left inset off the image; tightened gap
     (32 → 24) so the headline sits closer to the rule above it.
     width: auto cancels the desktop-only 212px constraint in case
     it leaks in. */
  .aesthetics__head-top {
    gap: var(--space-5);
    /* Match Weight Management's Layout B head-top: 16px top inset so the
       rule lines up with the portrait's 16px top inset. */
    padding: 16px 0 0 32px;
    width: auto;
  }

  /* Headline +2px in Layout B (inline 22 → 24). !important to beat the
     inline font-size on the h2. */
  .aesthetics__headline {
    font-size: 24px !important;
  }

  /* Override the inline style="padding: 48px 0px 0px; height: 600px"
     on .service-list. Previously a fixed 500/540px, but the type/row
     bumps grew the 5 cards enough to overflow any fixed height at the
     narrow end of the band and collide with the footnote. height:auto
     lets the list always fit its content; the grid row-gap (12px) plus
     4px padding-bottom give ~16px clearance to the footnote below. */
  .aesthetics__menu .service-list {
    padding: 40px 0 4px 32px !important;
    height: auto !important;
  }

  /* Override the inline style="padding: 8px 24px 40px 8px;
     width: 500px" on .aesthetics__footnote — the 500px fixed
     width overflows the ~640px-and-narrower col 2. */
  .aesthetics__footnote {
    padding: 8px 0 40px 32px !important;
    width: auto !important;
    max-width: none;
    margin-top: 0;
  }

  /* Override the inline width: 328px / 344px on the service-card
     name and description so they fit the narrower right column. */
  .aesthetics__menu .service-card__name,
  .aesthetics__menu .service-card__desc {
    width: auto !important;
  }

  /* Caption sits in row 3 of column 1, pinned with justify-self:
     end so it shares the image's right column edge. 16px right
     padding pulls the text just inside the image's right edge.
     !important to win against the inline style="padding: 8px 0px
     40px 32px" on the caption (0 right). */
  .aesthetics__caption {
    justify-self: end;
    max-width: 280px;
    padding: 8px 16px 40px 0 !important;
    text-align: left;
    margin-top: 0;
    width: auto;
  }
}

/* Col-3 width cap. Once the viewport gets wide enough that the
   10fr share would exceed 640px (≈ vw 1344px), pin col 3 at a
   fixed 640px and let the extra horizontal space flow into
   cols 1+2 in the 7:4 ratio. The image (col 1) absorbs most of
   the growth at very wide viewports. */
@media (min-width: 1344px) {
  .aesthetics__grid {
    grid-template-columns: minmax(0, 7fr) minmax(0, 4fr) 640px;
  }
}

/* ----------------------------------------------------------------
   Column 1 — full-bleed editorial portrait, pure B&W.
   ---------------------------------------------------------------- */

.aesthetics__portrait {
  margin: 0;
  /* 8px of section ground above and below the image so it sits
     inset from the section's top and bottom edges. */
  padding: 16px 0;
  position: relative;
  overflow: hidden;
  background: transparent;
}

@media (min-width: 650px) {
  .aesthetics__portrait {
    /* Stretch to the content row so the image grows with the (now
       taller) service menu instead of leaving bare ground below it.
       Layouts A (650–949) and C (≥1280) set their own stretch rules
       with !important; this governs Layout B (950–1279). */
    align-self: stretch;
    height: 100%;
    min-height: 648px;
  }
}

.aesthetics__portrait img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Slide the visible window toward the right side of the
     original portrait. Adjust % to taste. */
  object-position: 30% center;
  /* Pure B&W per Rule 1. */
  filter: grayscale(1) contrast(1.03);
}

/* Numeric overlay — top-left. */
.aesthetics__no {
  position: absolute;
  top: var(--space-7);
  left: var(--space-7);
  font-family: var(--font-display-normal);
  font-weight: 400;
  font-size: 20px;
  letter-spacing: 0.04em;
  color: #fff;
  margin: 0;
  z-index: 2;
}

/* Category label — vertically centered on the image, left-aligned
   with the "01" overlay (same left inset). */
.aesthetics__name {
  position: absolute;
  top: 50%;
  left: var(--space-7);
  transform: translateY(-50%);
  font-family: var(--font-display);
  font-weight: 200;
  font-size: 30px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #fff;
  margin: 0;
  z-index: 2;
}

@media (min-width: 1024px) {
  .aesthetics__no   { top: var(--space-8); left: var(--space-8); font-size: 20px; }
  .aesthetics__name { left: var(--space-8); }
}

/* Inner wrapper for the section-name titles (Aesthetics / IV / Weight).
   Carries the .reveal entrance (fade + 12px rise on scroll-in) so the
   parent name span keeps its absolute centering transform untouched.
   Block so the wrapped text + Wellness sub-label lay out unchanged. */
.section-name__inner {
  display: block;
  max-width: 100%;
}
/* Section name overlays (01 Aesthetics / 02 Wellness / 03 Weight
   Management) reveal uniformly across all layouts + mobile: 0.5s delay,
   2s ease-in. */
.section-name__inner.reveal {
  transition-delay: 0s;
  transition-duration: 2s;
}

/* Layout B + C (≥950px): slow these two Aesthetics reveals down further
   per user — the headline eases in over 1s, and the "Aesthetics" name
   overlay gets an even longer 2.5s reveal. */
@media (min-width: 950px) {
  #aesthetics .aesthetics__headline.reveal {
    /* Match Layout C: 3s fade, no delay (was 1s in Layout B). */
    transition-delay: 0s;
    transition-duration: 3s;
  }
}

/* Layout A (650–949): section name titles 2px smaller (28 → 26). Section
   id raises specificity so it wins over the base 28px regardless of order. */
@media (min-width: 650px) and (max-width: 949px) {
  #aesthetics .aesthetics__name,
  #wellness .iv__name,
  #weight-management .weight-mgmt__name {
    font-size: 28px;
  }
}

/* ----------------------------------------------------------------
   Column 2 — display headline + caption.

   Below 650px this wrapper is a real flex column (head-top stacked
   above caption). At ≥650 the grid setup higher in this file sets
   `display: contents` on this wrapper so head-top and caption
   become independent grid items. The mobile rule below is scoped
   to <650 so it doesn't compete with the contents override.
   ---------------------------------------------------------------- */

.aesthetics__head-top {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

/* Short warm-accent hairline above the headline (matches the
   hairlines above each card in the menu column). */
.aesthetics__head-rule {
  display: block;
  width: 64px;
  height: 1px;
  background: var(--warm-accent);
  border: 0;
  margin: 0;
}

.aesthetics__headline {
  font-family: var(--font-display);
  /* Per user override: Area Extended Bold, white. Scales with the
     viewport so the headline stays proportional to column 2's
     width (24px at the design's 1280px reference width). */
  font-weight: 700;
  text-transform: uppercase;
  font-size: clamp(14px, 1.9vw, 24px);
  line-height: 1.4;
  letter-spacing: 0.01em;
  color: #fff;
  margin: 0;
  /* Never hyphenate; let long words sit on their own line. */
  hyphens: none;
  overflow-wrap: normal;
  word-break: normal;
}

.aesthetics__caption {
  font-family: var(--font-display-normal);
  /* Per user override: Area Normal Bold, white. +2px → 13px. */
  font-weight: 700;
  font-size: 13px;
  color: #fff;
  line-height: 1.55;
  margin: 0;
  max-width: 26ch;
  /* Pin to bottom so it aligns with the column-3 footnote. */
  margin-top: auto;
}

/* ----------------------------------------------------------------
   Column 3 — service / price menu.

   Below 650px this wrapper is a real flex column (service-list
   stacked above footnote). At ≥650 the grid setup higher in this
   file sets `display: contents` on this wrapper so service-list
   and footnote become independent grid items.
   ---------------------------------------------------------------- */

.aesthetics__menu .service-list {
  flex: 0 0 auto;
}

/* Card hairline runs full width above each card. Per user
   override on Section 01: 2px, not 1px. Suppress on the first
   card so the menu column starts clean. */
.aesthetics__menu .service-card {
  border-bottom: 0;
  border-top: 2px solid var(--divider-dark);
  /* Tightened vertical rhythm — cards sit closer together. */
  padding-block: var(--space-3) var(--space-4);
  position: relative;
  gap: var(--space-5);
  grid-template-columns: 1fr 88px;
}
.aesthetics__menu .service-card:first-child {
  border-top: 0;
  padding-top: 0;
}

@media (min-width: 1024px) {
  .aesthetics__menu .service-card {
    /* Row rhythm: base 12/16 → 16/20 → 24/28; then +4px top per user
       (→ 28/28) for more space above each card's content. */
    padding-block: 28px 28px;
    gap: var(--space-6);
    grid-template-columns: 1fr 96px;
  }
}

/* Layout A/B lower band (650–1023): base 12/16 + 8px each, then +4px
   top per user (→ 24/24). */
@media (min-width: 650px) and (max-width: 1023px) {
  .aesthetics__menu .service-card {
    padding-block: 24px 24px;
  }
}

.aesthetics__footnote {
  font-family: var(--font-display-normal);
  /* Matches column-2 caption typography; meta on dark stays light-warm.
     +2px → 13px per user. */
  font-weight: 700;
  font-size: 13px;
  line-height: 1.55;
  color: var(--light-warm);
  margin: 0;
  /* Fill the full col-3 cell width so the right edge aligns with
     the price-amount column above. */
  max-width: none;
  /* Pin to bottom so it aligns with the column-2 caption. */
  margin-top: auto;
}

/* ----------------------------------------------------------------
   Section 01 — typographic overrides for the service-card text
   inside .aesthetics__menu. Scoped so other sections that reuse
   the .service-card component keep their existing styles.
   ---------------------------------------------------------------- */

.aesthetics__menu .service-card__name {
  font-family: var(--font-display-normal);
  /* Was font-weight: 200 (which the Adobe kit non-standardly mapped
     to Area Normal Extrablack). Switched to 600 per user — loads a
     genuine semibold cut, visibly lighter than Extrablack. */
  font-weight: 600;
  font-size: 18px;
  letter-spacing: 0.08em;
  line-height: 1.2;
  color: #fff;
  margin-bottom: var(--space-2);
}

.aesthetics__menu .service-card__tag {
  font-family: var(--font-display);
  /* Area Extended, same 18px as the service-card name.
     8px padding-left separates it visually from the name. */
  font-weight: 700;
  font-size: 18px;
  letter-spacing: 0.12em;
  margin-left: 0.7em;
  padding-left: 8px;
  text-transform: uppercase;
  color: #fff;
}

.aesthetics__menu .service-card__desc {
  font-family: var(--font-display-normal);
  /* Area Normal Bold, 11px. Body-on-dark stays light-warm. */
  font-weight: 700;
  font-size: 11px;
  line-height: 1.55;
  letter-spacing: 0.04em;
  color: var(--light-warm);
  /* Override the 52ch cap in components.css so the description
     can fill the body column instead of wrapping early. */
  max-width: none;
}

.aesthetics__menu .service-card__price-amount {
  font-family: var(--font-display-normal);
  /* Area Normal Bold, white, 18px (overrides warm-accent for this
     section per user direction). */
  font-weight: 700;
  font-size: 18px;
  letter-spacing: 0;
  color: #fff;
  /* Nudge the figure down a hair so its baseline sits visually
     beneath the service-card name baseline. */
  margin-top: 4px;
}

.aesthetics__menu .service-card__price-note {
  font-family: var(--font-display-normal);
  /* Area Normal Bold, 10px, no caps. Meta on dark stays light-warm. */
  font-weight: 700;
  font-size: 11px;
  text-transform: none;
  letter-spacing: 0;
  color: var(--light-warm);
  margin-top: -2px;
}

/* Price column on dark ground — override the inherited warm-accent
   color so amounts read in white per user direction. */
.aesthetics__menu .service-card__price {
  color: #fff;
}

/* ----------------------------------------------------------------
   Section 01 — Layout A/B/C (≥650) type + spacing bump (per user):
   titles +2px, +4px title→desc gap, descriptions +2px with looser
   leading, and the price block dropped to align with the top of the
   description text beside it. Mobile keeps the base sizes above.
   The card padding-bottom is untouched, so the gap from a
   description's last line to the next card's top rule is preserved.
   ---------------------------------------------------------------- */
@media (min-width: 650px) {
  .aesthetics__menu .service-card__name,
  .aesthetics__menu .service-card__tag {
    font-size: 20px;
  }
  .aesthetics__menu .service-card__name {
    /* Title→desc gap 10px (8 + 2px per user). */
    margin-bottom: 10px !important;
  }
  .aesthetics__menu .service-card__desc {
    font-size: 13px;
    line-height: 1.75;
  }
  /* The Aesthetics cards align items to the name's baseline by
     default (pinning the price beside the title). Switch to top
     alignment so the price can be dropped to the description line
     via margin-top below. */
  .aesthetics__menu .service-card {
    align-items: start;
  }
  /* Price column: the amount lines up with the service-item TITLE and
     the note lines up with the TOP of the description (per user). The
     block starts at the card content top (margin-top:0) so the amount
     sits on the title's line; the amount then carries a 24px line box +
     10px margin (mirroring the title's 24px line + 10px gap) so the note
     drops exactly onto the description's first line. */
  .aesthetics__menu .service-card__price {
    margin-top: 0;
  }
  .aesthetics__menu .service-card__price-amount {
    margin-top: 0;
    line-height: 24px;
    margin-bottom: 10px;
  }
  .aesthetics__menu .service-card__price-note {
    margin-top: 0;
  }
  /* The taller type/spacing overflows the inline height:600px on the
     service-list (which persists in the wide Layout B/C grid), colliding
     with the footnote. Let the list size to its content so the grid row
     grows and the footnote/caption drop below it. */
  .aesthetics__menu .service-list {
    height: auto !important;
  }
}

/* ----------------------------------------------------------------
   Section 01 — desktop (≥1280) tuned sizing.

   User-supplied values lifted off inline `style="…"` edits in
   index.html so they stop bleeding into the 950–1279 layout.
   At ≥1280 the head-top + caption sit in a hard-set 212px-wide
   column and the service-list / footnote have asymmetric
   horizontal padding (48 left / 80 right).
   ---------------------------------------------------------------- */

@media (min-width: 1280px) {
  /* !important on every override below so the inline `style="…"`
     attributes on these elements in index.html can no longer beat
     the Layout C intent. Without this, desktop silently inherits
     the inline values at every breakpoint. */
  .aesthetics__head-top {
    width: 270px !important;
    padding: 16px 0 0 8px !important;
  }

  .aesthetics__caption {
    width: 212px !important;
    /* Match the head-top's padding-left so the caption left edge
       aligns with the headline. Bottom padding 100 (92 + 8 per user)
       pushes the caption up off the section floor. Footnote matched
       so they stay aligned. Section height unchanged. */
    padding: 8px 0 100px 8px !important;
    text-align: left;
  }

  .aesthetics__menu .service-list {
    /* Left inset +16px (48→64) so the menu clears column 2; right inset
       trimmed to 24px so the price track lands ~48px from the viewport
       edge — matching the IV section (grid padding-right 48 + flush
       content). */
    padding: 48px 24px 0 64px !important;
  }

  .aesthetics__footnote {
    /* Right inset trimmed to 24px to track the service list's new right
       edge (IV-style fixed margin from the viewport edge). */
    padding: 8px 24px 108px 64px !important;
  }

  /* Headline bumped from inline 20px → 24px → 26px → 28px at desktop
     per user. !important to beat the inline style on the h2. */
  .aesthetics__headline {
    font-size: 28px !important;
  }
  /* Layout C: reveal the headline as a top→bottom wipe over 2s, so its
     lines appear in sequence from top to bottom. Keeps the 0.5s delay and
     overrides the global fade/translate for this element. linear timing so
     each line gets even reveal time. */
  /* Layout C: standard fade/translate reveal, no delay, 3s long. */
  #aesthetics .aesthetics__headline.reveal {
    transition-delay: 0s;
    transition-duration: 3s;
  }

  /* Portrait fills the full section height (top → bottom) instead of
     the inline fixed 675px. align-self: stretch + height auto override
     the ≥650 base (height 648 / align-self start) and the inline
     height; 16px top & bottom padding insets it from the section edges
     per user. */
  .aesthetics__portrait {
    align-self: stretch !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 16px 8px 16px 0 !important;
  }

  /* Keep every service-card title on one line at Layout C (the 18px
     bump can otherwise wrap "NEUROMODULATOR TREATMENT"). minmax(0,1fr)
     lets the body column shrink so the title still fits. */
  .aesthetics__menu .service-card__name {
    white-space: nowrap;
  }
  .aesthetics__menu .service-card {
    grid-template-columns: minmax(0, 1fr) 96px;
  }
}

/* The standalone 1500px wide-viewport rule was removed as dead
   code — its padding-left: 0 (no !important) could no longer win
   against Layout C's !important overrides. */

/* ----------------------------------------------------------------
   MOBILE (<650px) — portrait-overlay layout.

   Portrait fills the top "media" area as a 1:1 square; head
   (rule + headline + caption) overlays the bottom-left of the same
   area via grid area sharing. Service list and footnote stack
   below on flat dark with 56px symmetric inset (same as Layout A).

   "01" and "AESTHETICS" overlays are already absolutely positioned
   on the portrait — they carry over unchanged.
   ---------------------------------------------------------------- */
@media (max-width: 649px) {
  /* 3-row stack: portrait + head share the media area; menu and
     footnote each take their own row below. */
  .aesthetics.section {
    /* Lengthen the section below the footnote. Applied on the
       section (not the footnote) so it reliably extends the dark
       ground regardless of the footnote's own padding. +24px per
       user comment (24 → 48px). */
    padding-bottom: 48px;
  }
  .aesthetics__grid {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
    grid-template-areas:
      "media"
      "menu"
      "footnote";
    row-gap: 0;
    align-items: stretch;
  }

  /* Portrait fills media area as a 1:1 square. Override the inline
     style="height: 675px; padding: 16px 24px 16px 0px" on the
     <figure>. */
  .aesthetics__portrait {
    grid-area: media;
    align-self: stretch !important;
    /* Slightly taller than square so the long headline (now below
       the title) fits within the image on mobile. Tuned 16px
       shorter than 5/6 per user comment. */
    aspect-ratio: 0.866;
    height: auto !important;
    min-height: 0 !important;
    padding: 0 !important;
    width: 100%;
  }

  /* Head (rule + headline) sits BELOW the "01"/"AESTHETICS"
     overlays (align-self: start + top offset), so the long headline
     no longer collides with the AESTHETICS title. Caption is removed
     on mobile (see below). */
  .aesthetics__head {
    grid-area: media;
    align-self: start;
    justify-self: start;
    z-index: 1;
    display: flex !important;
    flex-direction: column;
    padding: 0 40px 16px 40px !important;
    width: 100%;
    gap: 0;
    min-width: 0;
    /* Clear the "01" (top 24) and "AESTHETICS" (top 92, ~47 tall)
       overlays so the head starts just below the title, with a
       comfortable gap. */
    position: relative;
    top: 202px;
  }

  /* Head-top (rule + headline) — zero padding so the head wrapper
     drives spacing. Override the inline padding on .head-top.
     Gap between rule and headline tightened from 32px (--space-6)
     to 24px (--space-5) per user comment. */
  /* Header rule removed on mobile per user comment; the +25px
     padding-top (64 → 89) compensates for the rule (1px) + its 24px
     gap so the headline stays put. */
  .aesthetics__head-rule {
    display: none !important;
  }
  .aesthetics__head-top {
    padding: 16px 0 0 0 !important;
    width: auto;
    gap: var(--space-5);
  }

  /* "AESTHETICS" overlay — base CSS pins it to vertical center of
     the portrait, which collides with the headline overlaid at the
     bottom. Move it just under the "01" at the top of the image.
     "01" also bumped up 16px from --space-7 (48px) → 32px so the
     pair shifts up together with the same vertical spacing. */
  .aesthetics__no {
    top: 24px;
  }

  .aesthetics__name {
    top: 108px;
    transform: none;
    font-size: 30px;
  }

  /* Headline — smaller + tighter line-height so the head block
     stays compact at the bottom of the portrait. !important to
     beat the inline style="font-size: 20px; padding: 0px".
     18 → 22px (+4) per user. */
  .aesthetics__headline {
    font-size: 22px !important;
    line-height: 1.35 !important;
    padding: 0 !important;
    max-width: none;
    /* Nudged up 64px more from -16px → -80px per user.
       Then up another 32px → -112px per user. */
    transform: translateY(-112px);
  }

  /* Caption removed on mobile — it crowded/overlapped the headline
     over the image. (Returns at ≥650 where there's room.) */
  .aesthetics__caption {
    display: none !important;
  }

  /* Menu wrapper dissolves so service-list and footnote land in
     their own grid areas (matches the Layout A/B/C pattern). */
  .aesthetics__menu {
    display: contents;
  }

  /* Service list — row 2, 32px symmetric inset on mobile.
     Override inline padding + 600px height. */
  .aesthetics__menu .service-list {
    grid-area: menu;
    padding: 48px 40px 0 40px !important;
    height: auto !important;
  }

  /* Cards use the full row width — kill the inline name/desc
     widths so they no longer cap at ~328/344px. */
  .aesthetics__menu .service-card__name,
  .aesthetics__menu .service-card__desc {
    width: auto !important;
  }

  /* Push prices to the right edge of their 88px price column on
     mobile. The .service-card base CSS only flips justify-self to
     end at ≥768px, so without this override the prices sit at the
     LEFT of the 88px cell (leaving a wide gap to the row's right
     padding). */
  .aesthetics__menu .service-card__price {
    justify-self: end;
    align-items: flex-end;
    text-align: right;
  }

  /* Let the body column shrink so the card fits narrow viewports.
     The base grid is `1fr 88px`, but a bare `1fr` keeps a
     min-content floor — below ~360px the card couldn't shrink and
     pushed itself (and the prices) off the right edge. minmax(0,1fr)
     + min-width:0 lets the body text wrap and the card fit. */
  .aesthetics__menu .service-card {
    grid-template-columns: minmax(0, 1fr) 88px;
  }
  .aesthetics__menu .service-card__body {
    min-width: 0;
  }

  /* Footnote — row 3, same 32px inset as the service list.
     Bottom inset stays 40px; extra section length is handled by
     the section's own padding-bottom above. */
  .aesthetics__footnote {
    grid-area: footnote;
    padding: 24px 40px 40px 40px !important;
    width: auto !important;
    max-width: none;
    margin-top: 0;
    justify-self: start;
    text-align: left;
  }
}

/* ============================================================
   SECTION 02 — Weight Management.

   Light-ground mirror of the Aesthetics section. Same 3-column
   architecture (portrait | head | menu), same overlay pattern
   (02 + WEIGHT MANAGEMENT), same four-breakpoint behavior
   (Mobile / Layout A / B / C). Selectors are intentionally
   duplicated under .weight-mgmt__* so each section can be tuned
   independently — the two can be merged into shared rules once
   both are dialed in.

   Color adaptations from dark → light:
     #fff                 → var(--charcoal)
     var(--light-warm)    → var(--warm-gray)
     var(--divider-dark)  → var(--soft-line)
   Overlay text (02, WEIGHT MANAGEMENT) stays #fff (sits on B&W).
   ============================================================ */

.weight-mgmt,
.section.weight-mgmt {
  /* Override .section padding so the column grid bleeds the full
     viewport top-to-bottom and edge-to-edge (matches aesthetics).
     The compound .section.weight-mgmt selector is needed to beat
     `.section + .section { padding-top: ... }` in components.css
     (specificity 0,2,0) — Weight Management is preceded by the
     Wellness section, so the seam rule applies and would otherwise
     re-introduce 96px of top padding. */
  padding-block: 0;
  /* 03 background a touch lighter than --off-white (#F7F4F0), same
     warm hue, for subtle distinction between the two Wellness
     sub-sections (02 IV / 03 Weight Management). */
  background: #FDFBF8;
}

.weight-mgmt__grid {
  display: grid;
  grid-template-columns: 1fr;
  width: 100%;
}

/* ----------------------------------------------------------------
   Column 1 — full-bleed editorial portrait, pure B&W.
   ---------------------------------------------------------------- */

.weight-mgmt__portrait {
  margin: 0;
  /* 8px of section ground above and below the image so it sits
     inset from the section's top and bottom edges. */
  padding: 16px 0;
  position: relative;
  overflow: hidden;
  background: transparent;
}

.weight-mgmt__portrait img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Centered crop by default — adjust % if a specific focal area
     should sit higher / lower in the visible window. */
  object-position: 50% center;
  /* Pure B&W per Rule 1 (insurance — source is already grayscale). */
  filter: grayscale(1) contrast(1.03);
}

/* Numeric overlay — top-left. */
.weight-mgmt__no {
  position: absolute;
  top: var(--space-7);
  left: var(--space-7);
  font-family: var(--font-display-normal);
  font-weight: 400;
  font-size: 20px;
  letter-spacing: 0.04em;
  color: #fff;
  margin: 0;
  z-index: 2;
}

/* Category label — vertically centered on the image, left-aligned
   with the "02" overlay (same left inset). max-width lets the
   two-word "WEIGHT MANAGEMENT" wrap onto two lines naturally. */
.weight-mgmt__name {
  position: absolute;
  top: 50%;
  left: var(--space-7);
  transform: translateY(-50%);
  font-family: var(--font-display);
  font-weight: 200;
  font-size: 30px;
  letter-spacing: 0.04em;
  line-height: 1.3;
  text-transform: uppercase;
  color: #fff;
  margin: 0;
  z-index: 2;
  max-width: 60%;
}

@media (min-width: 1024px) {
  .weight-mgmt__no   { top: var(--space-8); left: var(--space-8); font-size: 20px; }
  .weight-mgmt__name { left: var(--space-8); }
}

/* ----------------------------------------------------------------
   Column 2 — display headline + caption.
   ---------------------------------------------------------------- */

.weight-mgmt__head-top {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

/* Short warm-accent hairline above the headline. */
.weight-mgmt__head-rule {
  display: block;
  width: 64px;
  height: 1px;
  background: var(--warm-accent);
  border: 0;
  margin: 0;
}

.weight-mgmt__headline {
  font-family: var(--font-display);
  /* Area Extended Bold, charcoal. Scales with the viewport (same
     clamp as aesthetics). */
  font-weight: 700;
  text-transform: uppercase;
  font-size: clamp(14px, 1.9vw, 24px);
  line-height: 1.4;
  letter-spacing: 0.01em;
  color: var(--charcoal);
  margin: 0;
  /* Never hyphenate; let long words sit on their own line. */
  hyphens: none;
  overflow-wrap: normal;
  word-break: normal;
}

.weight-mgmt__caption {
  font-family: var(--font-display-normal);
  font-weight: 700;
  font-size: 13px;
  color: var(--charcoal);
  line-height: 1.55;
  margin: 0;
  max-width: 26ch;
  /* Pin to bottom so it aligns with the column-3 footnote. */
  margin-top: auto;
}

/* ----------------------------------------------------------------
   Column 3 — service / price menu.
   ---------------------------------------------------------------- */

.weight-mgmt__menu .service-list {
  flex: 0 0 auto;
}

/* Card hairline — soft-line on light ground (mirror of the
   aesthetics 2px treatment on dark). Suppress on the first card
   so the menu column starts clean. */
.weight-mgmt__menu .service-card {
  border-bottom: 0;
  border-top: 2px solid var(--soft-line);
  /* Tightened vertical rhythm — cards sit closer together. */
  padding-block: var(--space-3) var(--space-4);
  position: relative;
  gap: var(--space-5);
  grid-template-columns: 1fr 88px;
}
.weight-mgmt__menu .service-card:first-child {
  border-top: 0;
  padding-top: 0;
}

@media (min-width: 1024px) {
  .weight-mgmt__menu .service-card {
    /* Row rhythm ported from Aesthetics: base 12/16 → 28/28. */
    padding-block: 28px 28px;
    gap: var(--space-6);
    grid-template-columns: 1fr 96px;
  }
}

/* Layout A/B lower band (650–1023): 24/24 (ported from Aesthetics). */
@media (min-width: 650px) and (max-width: 1023px) {
  .weight-mgmt__menu .service-card {
    padding-block: 24px 24px;
  }
}

.weight-mgmt__footnote {
  font-family: var(--font-display-normal);
  /* Matches the column-2 caption exactly per user direction —
     same font, weight, size, color (charcoal on light). */
  font-weight: 700;
  font-size: 13px;
  line-height: 1.55;
  color: var(--charcoal);
  margin: 0;
  max-width: none;
  margin-top: auto;
}

/* ----------------------------------------------------------------
   Section 02 — typographic overrides for the service-card text
   inside .weight-mgmt__menu. Scoped so other sections that reuse
   the .service-card component keep their existing styles.
   ---------------------------------------------------------------- */

.weight-mgmt__menu .service-card__name {
  font-family: var(--font-display-normal);
  font-weight: 700;
  font-size: 18px;
  letter-spacing: 0.08em;
  line-height: 1.2;
  color: var(--charcoal);
  margin-bottom: var(--space-2);
}

.weight-mgmt__menu .service-card__tag {
  font-family: var(--font-display);
  /* Area Extended, same 18px as the service-card name.
     8px padding-left separates it visually from the name. */
  font-weight: 700;
  font-size: 18px;
  letter-spacing: 0.12em;
  margin-left: 0.7em;
  padding-left: 8px;
  text-transform: uppercase;
  color: var(--charcoal);
}

.weight-mgmt__menu .service-card__desc {
  font-family: var(--font-display-normal);
  /* Area Normal Bold, 11px. Body-on-light reads warm-gray. */
  font-weight: 700;
  font-size: 11px;
  line-height: 1.55;
  letter-spacing: 0.04em;
  color: var(--warm-gray);
  /* Override the 52ch cap in components.css so the description
     can fill the body column instead of wrapping early. */
  max-width: none;
  /* Breathing room around the description per user comment. */
  padding-top: 4px;
  padding-bottom: 8px;
}

.weight-mgmt__menu .service-card__price-amount {
  font-family: var(--font-display-normal);
  /* Area Normal Bold, charcoal, 18px (overrides warm-accent for
     this section to keep prices high-contrast on light). */
  font-weight: 700;
  font-size: 18px;
  letter-spacing: 0;
  color: var(--charcoal);
  /* Nudge the figure down a hair so its baseline sits visually
     beneath the service-card name baseline. */
  margin-top: 4px;
}

.weight-mgmt__menu .service-card__price-note {
  font-family: var(--font-display-normal);
  /* Area Normal Bold, 11px, no caps. Meta on light = warm-gray.
     white-space: normal overrides the parent .service-card__price's
     nowrap so long notes like "credited towards first month" wrap
     onto two lines inside the 96px price column. */
  font-weight: 700;
  font-size: 11px;
  text-transform: none;
  letter-spacing: 0;
  color: var(--warm-gray);
  margin-top: -2px;
  white-space: normal;
  text-align: right;
}

/* Price column on light ground — override the inherited warm-accent
   color so amounts read in charcoal per design comp. */
.weight-mgmt__menu .service-card__price {
  color: var(--charcoal);
}

/* ----------------------------------------------------------------
   Section 03 — Layout A/B/C (≥650) type + spacing + price alignment.
   Ported from the Aesthetics section so the two menus behave
   identically; only the colours differ (charcoal/warm-gray on light).
     • titles +2px, +10px title→desc gap, descriptions +2px / 1.75
     • cards top-aligned so the price can be offset cleanly
     • price AMOUNT lines up with the title, price NOTE lines up with
       the description top (amount 24px line box + 10px margin mirrors
       the title's 24px line + 10px gap)
     • list sizes to content so the footnote/caption drop below it
   ---------------------------------------------------------------- */
@media (min-width: 650px) {
  .weight-mgmt__menu .service-card__name,
  .weight-mgmt__menu .service-card__tag {
    font-size: 20px;
  }
  .weight-mgmt__menu .service-card__name {
    margin-bottom: 10px;
  }
  .weight-mgmt__menu .service-card__desc {
    font-size: 13px;
    line-height: 1.75;
    /* Drop the section's own 4/8 breathing room so spacing is driven by
       the name margin + card padding, exactly like Aesthetics. */
    padding-top: 0;
    padding-bottom: 0;
  }
  .weight-mgmt__menu .service-card {
    align-items: start;
  }
  .weight-mgmt__menu .service-card__price {
    margin-top: 0;
  }
  .weight-mgmt__menu .service-card__price-amount {
    margin-top: 0;
    line-height: 24px;
    margin-bottom: 10px;
  }
  .weight-mgmt__menu .service-card__price-note {
    margin-top: 0;
  }
  .weight-mgmt__menu .service-list {
    height: auto;
  }
}

/* ============================================================
   SECTION 02 — Weight Management — breakpoint blocks.

   Mirror of the Aesthetics breakpoint rules:
     Mobile     <650px     portrait-overlay layout
     Layout A   650–949    portrait left, head right, menu+footnote full-width below
     Layout B   950–1279   portrait left, head + menu stacked right, caption + footnote row 3
     Layout C   1280+      4-cell desktop (portrait | head | menu / caption | footnote)

   No !important needed here — there are no inline `style="…"`
   attributes on .weight-mgmt__* markup, so the cascade resolves
   cleanly.
   ============================================================ */

/* ----------------------------------------------------------------
   ≥650 base — 3-col grid that Layout C builds on. Layouts A and B
   re-template the same grid with their own column/area shapes;
   Mobile drops it back to a single column.
   ---------------------------------------------------------------- */
@media (min-width: 650px) {
  .weight-mgmt__grid {
    grid-template-columns: minmax(0, 7fr) minmax(0, 4fr) minmax(0, 10fr);
    grid-template-rows: 1fr auto;
    grid-template-areas:
      "portrait head menu"
      "portrait caption footnote";
    min-height: 648px;
    align-items: stretch;
    /* Keep col 3 24px clear of the viewport's right edge. */
    padding-right: 48px;
  }

  .weight-mgmt__portrait { grid-area: portrait; }

  /* Dissolve the head + menu wrappers so their children become
     independent grid items placed into the named cells. */
  .weight-mgmt__head,
  .weight-mgmt__menu { display: contents; }

  .weight-mgmt__head-top {
    grid-area: head;
    padding: 48px 0 0 40px;
  }

  .weight-mgmt__caption {
    grid-area: caption;
    padding: 8px 0 40px 40px;
    margin-top: 0;
  }

  .weight-mgmt__menu .service-list {
    grid-area: menu;
    /* Horizontal inset scales from 24px @ vw=650 → 80px @ vw=1280. */
    padding: 48px clamp(24px, calc((100vw - 650px) * 0.1474 + 24px), 80px) 0;
  }

  .weight-mgmt__footnote {
    grid-area: footnote;
    padding: 8px clamp(24px, calc((100vw - 650px) * 0.1474 + 24px), 80px) 40px;
    margin-top: 0;
  }

  /* Portrait sizing — fixed height + align-self: start decouples
     it from the other columns' grid-row stretching. */
  .weight-mgmt__portrait {
    aspect-ratio: auto;
    height: 648px;
    min-height: 0;
    align-self: start;
  }
}

/* ----------------------------------------------------------------
   Layout A — 650–949px.

        A  B        A = portrait      B = headline
        A  D        D = caption
        C  C        C = service menu
        E  E        E = footnote
   ---------------------------------------------------------------- */
@media (min-width: 650px) and (max-width: 949px) {
  .weight-mgmt__grid {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto auto auto;
    grid-template-areas:
      "portrait head"
      "portrait caption"
      "menu     menu"
      "footnote footnote";
    row-gap: 0;
  }

  /* Portrait spans rows 1–2 on the left. min-height 592 sets a
     floor; 16px top padding breathes off the section edge. */
  .weight-mgmt__portrait {
    align-self: stretch;
    height: 100%;
    min-height: 592px;
    padding: 16px 0 0 0;
  }

  .weight-mgmt__head-top {
    padding: 32px 0 0 72px;
    width: auto;
  }

  /* Bigger headline in Layout A — stacks down the portrait height. */
  .weight-mgmt__headline {
    font-size: 28px;
    padding-right: 56px;
  }

  .weight-mgmt__caption {
    padding: 24px 32px 32px 72px;
    justify-self: start;
    text-align: left;
    max-width: 34ch;
    margin-top: 0;
    width: auto;
  }

  /* Service list — full-width row 3, 56px symmetric inset. */
  .weight-mgmt__menu .service-list {
    padding: 48px 56px 0 56px;
    height: auto;
  }

  /* Footnote — full-width row 4, same 56px inset. */
  .weight-mgmt__footnote {
    padding: 24px 56px 40px 56px;
    width: auto;
    max-width: none;
    margin-top: 0;
    justify-self: start;
    text-align: left;
  }

  /* Cards use the full row width. */
  .weight-mgmt__menu .service-card__name,
  .weight-mgmt__menu .service-card__desc {
    width: auto;
  }

  /* Push prices to the right edge of their 88px price column.
     The .service-card base only flips to justify-self: end at
     ≥768, so at 650–767 prices would otherwise sit left. */
  .weight-mgmt__menu .service-card__price {
    justify-self: end;
    align-items: flex-end;
    text-align: right;
  }
}

/* ----------------------------------------------------------------
   Layout B — 950–1279px.

        A  B        A = portrait      B = headline
        A  C        C = service menu
        D  E        D = caption       E = footnote
   ---------------------------------------------------------------- */
@media (min-width: 950px) and (max-width: 1279px) {
  .weight-mgmt__grid {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto 1fr auto;
    grid-template-areas:
      "portrait head"
      "portrait menu"
      "caption  footnote";
    row-gap: 12px;
  }

  /* Portrait stretches to fill rows 1+2 of column 1; fixed 703px
     locks visual height regardless of right-column content. 16px
     top inset breathes the image off the section's top edge
     (matches Layout A / mobile). */
  .weight-mgmt__portrait {
    /* Layout B: image bleeds the full left column — flush to the top and
       left edges and stretched to the column's full height, so it reads as
       a solid full-bleed image rather than a floating fixed-height box
       (matches the Aesthetics section). */
    align-self: stretch;
    height: auto;
    min-height: 0;
    padding: 0;
  }

  /* Head-top — tightened gap + 32px left inset off the image. Top
     inset is 16px to align the head rule + headline with the top of
     the portrait in column 1 (which carries a matching 16px inset). */
  .weight-mgmt__head-top {
    gap: var(--space-5);
    padding: 16px 0 0 32px;
    width: auto;
  }

  .weight-mgmt__menu .service-list {
    padding: 32px 0 0 32px;
    height: auto;
  }

  .weight-mgmt__footnote {
    padding: 12px 0 36px 32px;
    width: auto;
    max-width: none;
    margin-top: 0;
  }

  .weight-mgmt__menu .service-card__name,
  .weight-mgmt__menu .service-card__desc {
    width: auto;
  }

  /* Program tag ("Semaglutide"/"Tirzepatide") sits inline after the
     title at a reduced cut so the pair fits the narrow Layout-B
     body column without wrapping the title mid-phrase. Inherits the
     base inline margin + baseline alignment. */
  .weight-mgmt__menu .service-card__tag {
    font-size: 12px;
    letter-spacing: 0.1em;
    margin-left: 0;
  }

  /* Caption sits in row 3 of column 1, pinned with justify-self:
     end so it shares the image's right column edge. */
  .weight-mgmt__caption {
    justify-self: end;
    max-width: 280px;
    padding: 12px 16px 36px 0;
    text-align: left;
    margin-top: 0;
    width: auto;
  }
}

/* ----------------------------------------------------------------
   Col-3 width cap. At ≥1344 the 10fr share would exceed 640px;
   pin col 3 there and let the extra space flow into cols 1+2.
   ---------------------------------------------------------------- */
@media (min-width: 1344px) {
  .weight-mgmt__grid {
    grid-template-columns: minmax(0, 7fr) minmax(0, 4fr) 640px;
  }
}

/* ----------------------------------------------------------------
   Layout C — ≥1280px (desktop tuned sizing).

   Head-top + caption sit in a hard-set 212px-wide column;
   service-list + footnote use asymmetric 48 left / 80 right
   padding; headline bumps to 24px.
   ---------------------------------------------------------------- */
@media (min-width: 1280px) {
  .weight-mgmt__head-top {
    width: 212px;
    padding: 16px 0 0 8px;
  }

  .weight-mgmt__caption {
    width: 212px;
    /* Pull the caption text up to 32px above the section floor
       (16 + another 16 per user) so it aligns with the footnote. */
    padding: 8px 0 32px 8px;
    text-align: left;
    /* Span both grid rows in column 2 and bottom-align: the caption
       rises into the empty space under the headline (row 1) instead of
       forcing the bottom row (row 2) to its full height. That lets
       row 2 collapse to the much shorter footnote, shrinking the whole
       section ~150px while the caption text bottom still aligns with
       the footnote 16px above the floor. */
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: end;
  }

  .weight-mgmt__menu .service-list {
    /* Left inset +16px (48→64) to clear column 2; right inset trimmed to
       24px so the price track lands ~48px from the viewport edge —
       matching the IV section (ported from Aesthetics). */
    padding: 48px 24px 0 64px;
  }

  .weight-mgmt__footnote {
    /* Bottom-pinned (align-self: end) + 32px padding-bottom so its
       text bottom lands on the same line as the caption, 32px above
       the section floor (16 + another 16 per user). Horizontal padding
       tracks the service list above it (64 left / 24 right). */
    padding: 32px 24px 32px 64px;
    align-self: end;
  }

  .weight-mgmt__headline {
    font-size: 26px;
  }

  /* Service-card names stay on one line at Layout C — there's
     plenty of column width here, but long names like "3 MONTH
     PROGRAM SEMAGLUTIDE" tip into a 2-line wrap by a few pixels
     of char-width variation. Forcing nowrap keeps them stretched. */
  .weight-mgmt__menu .service-card__name {
    white-space: nowrap;
  }

  /* Pin the price column to the menu's right edge regardless of
     name width. The default 1fr track is minmax(auto, 1fr); with
     nowrap, a long committed name ("3 MONTH PROGRAM SEMAGLUTIDE")
     raises that auto-minimum and — in the narrower lower Layout C
     band (1280–1343) — pushes the card (and its $price) past the
     menu's right edge. minmax(0, 1fr) lets the name track shrink so
     the price stays in bounds and aligned with the other rows. */
  .weight-mgmt__menu .service-card {
    grid-template-columns: minmax(0, 1fr) 96px;
  }

  /* Portrait fills the full section height (top → bottom) per user,
     mirroring Aesthetics Layout C. align-self: stretch + height auto
     override the fixed height; 16px top & bottom padding insets it. */
  .weight-mgmt__portrait {
    align-self: stretch;
    height: auto;
    min-height: 0;
    padding: 16px 8px 16px 0;
  }
}

/* ----------------------------------------------------------------
   Mobile (<650px) — portrait-overlay layout.

   Portrait + head share the "media" grid area as a 1:1 square;
   head (rule + headline + caption) overlays the bottom-left.
   Service list + footnote stack below on flat light ground.
   "02" and "WEIGHT MANAGEMENT" overlays carry over via the base
   absolute-position rules.
   ---------------------------------------------------------------- */
@media (max-width: 649px) {
  .weight-mgmt__grid {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
    grid-template-areas:
      "media"
      "menu"
      "footnote";
    row-gap: 0;
    align-items: stretch;
  }

  /* Portrait fills media area as a 1:1 square. */
  .weight-mgmt__portrait {
    grid-area: media;
    align-self: stretch;
    /* Matches Aesthetics' mobile image height (taller than square). */
    aspect-ratio: 0.866;
    height: auto;
    min-height: 0;
    padding: 0;
    width: 100%;
  }

  /* Head overlays bottom-left of the media area. 24px bottom inset
     (was 16px) lifts the headline up another 8px off the image's
     bottom edge. */
  .weight-mgmt__head {
    grid-area: media;
    align-self: end;
    justify-self: start;
    z-index: 1;
    display: flex;
    flex-direction: column;
    padding: 0 40px 24px 40px;
    width: 100%;
    gap: 0;
    min-width: 0;
  }

  .weight-mgmt__head-top {
    padding: 24px 0 0 0;
    width: auto;
    gap: var(--space-5);
  }

  /* Header rule removed on mobile per user comment. The head is
     bottom-pinned (align-self: end), so the headline stays put. */
  .weight-mgmt__head-rule {
    display: none;
  }

  /* "02" + "WEIGHT MANAGEMENT" overlay positions for mobile. */
  .weight-mgmt__no {
    top: 24px;
  }

  .weight-mgmt__name {
    top: 124px;
    transform: none;
    font-size: 30px;
  }

  /* Headline mirrors the Aesthetics mobile headline type treatment:
     22px, tight line-height, nudged up 24px off the portrait floor.
     White on mobile only — the head overlays the portrait here, so
     charcoal (the light-ground default) would be unreadable. */
  .weight-mgmt__headline {
    font-size: 20px;
    line-height: 1.35;
    padding: 0;
    max-width: none;
    color: var(--white);
    transform: translateY(-24px);
  }

  /* Caption hidden on mobile — the long caption sits in the media
     overlay and crowds/overlaps the headline. Removed entirely
     here; it returns at ≥650px where there's room for it. */
  .weight-mgmt__caption {
    display: none;
  }

  /* Menu wrapper dissolves so service-list + footnote land in
     their own grid areas. */
  .weight-mgmt__menu {
    display: contents;
  }

  .weight-mgmt__menu .service-list {
    grid-area: menu;
    padding: 48px 40px 0 40px;
    height: auto;
  }

  .weight-mgmt__menu .service-card__name,
  .weight-mgmt__menu .service-card__desc {
    width: auto;
  }

  /* Cap the body column so the title + description wrap a touch
     sooner — without this they fill the full 1fr track and the
     description runs further right than it reads well. 240px is the
     threshold where the longest single-line title ("Semaglutide
     Program") still fits on one line; below it that title wraps. */
  .weight-mgmt__menu .service-card__body {
    max-width: 240px;
  }
  .weight-mgmt__menu .service-card__price {
    justify-self: end;
    align-items: flex-end;
    text-align: right;
  }

  /* Title becomes a flex row so the program tag can top-align with
     the first line ("3 MONTH") instead of flowing onto the wrapped
     second line and reading as vertically centered. The bare title
     text wraps inside its own flex item; the tag is the second item,
     pinned to the top. */
  /* flex-wrap + min-width:0 are critical: without them this flex
     row's minimum width is the SUM of the title-box and the tag's
     min-content, and the tag ("SEMAGLUTIDE"/"TIRZEPATIDE") is one
     unbreakable word ~110px wide. That gave these names a ~210px
     min-width floor — far wider than any other row — which stopped
     the whole 1fr menu column from shrinking and pushed the price
     column off the right edge. Wrapping lets the tag drop below the
     title only when genuinely pinched; min-width:0 lets the column
     collapse to the real content. */
  .weight-mgmt__menu .service-card__name {
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    min-width: 0;
    /* row-gap applies ONLY when the tag wraps to its own line, so it
       gives the 8px title→tag gap when stacked WITHOUT pushing the
       tag down when it sits inline on wider phones. column-gap is
       the small inline gap for that side-by-side case. */
    column-gap: 8px;
    row-gap: 8px;
  }

  /* Title text sizes to its own content so the tag sits inline
     right after it. (A fixed width here was a leftover from when
     the body column was narrow — it forced the tag onto its own
     line once the column widened.) flex-wrap on the parent still
     lets the tag drop below only if the row is genuinely pinched. */
  .weight-mgmt__menu .service-card__name-text {
    flex: 0 0 auto;
    width: auto;
  }

  /* Widen the body column by content-sizing the price track: the
     price ("$1,450" max) only needs its own width, so the leftover
     flows to the 1fr body column — which keeps flexing with the
     viewport. */
  .weight-mgmt__menu .service-card {
    grid-template-columns: 1fr max-content;
  }

  /* Program tag ("Semaglutide"/"Tirzepatide") set to 13px on
     mobile. No padding-left — it must sit flush with the title's
     left edge when wrapped to its own line. Inline/stacked gaps are
     handled by the parent's column-gap / row-gap. */
  .weight-mgmt__menu .service-card__tag {
    font-size: 13px;
    margin-left: 0;
    padding-left: 0;
  }

  .weight-mgmt__footnote {
    grid-area: footnote;
    padding: 24px 40px 48px 40px;
    width: auto;
    max-width: none;
    margin-top: 0;
    justify-self: start;
    text-align: left;
  }
}


/* ============================================================
   02 — IV & VITAMIN THERAPY

   Mirrors the Weight Management architecture (light ground,
   full-bleed B&W portrait, charcoal display headline) — BUT the
   right column stacks the headline ABOVE a GROUPED price menu:
   three categories (Restore / Protect / Perform), each owning two
   items, separated by full-width hairlines.

   The head and every group share ONE 4-track column template
   (--iv-cols) so the headline, item names, descriptions, and
   prices all line up down the whole right column:
        1 · category gutter    2 · item name
        3 · description         4 · price (right-aligned)

   Breakpoints mirror the other two treatment sections; ≥650 is
   tuned for Layout C first — Mobile / A / B refined afterwards.
   ============================================================ */

/* Bleed the grid full-height like the other treatment sections;
   compound selector beats the .section + .section seam padding. */
.iv,
.section.iv {
  padding-block: 0;
}

.iv__grid {
  display: grid;
  grid-template-columns: 1fr;
  width: 100%;
}

/* ---------- Column 1 — full-bleed editorial portrait, pure B&W ---------- */
.iv__portrait {
  margin: 0;
  /* 16px of section ground above/below, matching the other sections. */
  padding: 16px 0;
  position: relative;
  overflow: hidden;
  background: transparent;
}

.iv__portrait img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Keep the face in the visible window. */
  object-position: 50% 30%;
  filter: grayscale(1) contrast(1.03);
}

.iv__no {
  position: absolute;
  top: var(--space-7);
  left: var(--space-7);
  font-family: var(--font-display-normal);
  font-weight: 400;
  font-size: 20px;
  letter-spacing: 0.04em;
  color: #fff;
  /* Invert against whatever is behind so the label stays legible
     over the bright/light areas of the portrait (was white-on-white). */
  mix-blend-mode: difference;
  margin: 0;
  z-index: 2;
}

/* "Wellness" tag — sits 16px BELOW each section title (inside the
   title element as a block) in the nav menu's type (display-normal,
   wide tracking, uppercase), 16px / weight 500. Ties the section to
   the nav's Wellness group. */
.wellness-label {
  display: block;
  margin-top: 24px;
  font-family: var(--font-display-normal);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.iv__name {
  position: absolute;
  top: 50%;
  left: var(--space-7);
  transform: translateY(-50%);
  font-family: var(--font-display);
  font-weight: 200;
  font-size: 30px;
  letter-spacing: 0.04em;
  line-height: 1.3;
  text-transform: uppercase;
  color: #fff;
  margin: 0;
  z-index: 2;
  max-width: 60%;
}

/* ---------- Column 2 — content (headline + grouped menu) ---------- */
.iv__content {
  /* Shared column template for the head + every group. Price track
     is a fixed 48px (fits the widest price, "$275+" at 47px) rather
     than `auto`, so the head grid — which has no price element —
     keeps the SAME track widths as the groups. That lets the
     headline (grid-column 1/4) end exactly at the description
     column's right edge. */
  --iv-cols: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 3fr) 48px;
  --iv-col-gap: var(--space-6);
  display: flex;
  flex-direction: column;
}

.iv__head { margin: 0; }

/* Short warm-accent hairline above the headline — mirrors the
   .weight-mgmt__head-rule "header run" in the other sections. */
.iv__head-rule {
  display: block;
  width: 64px;
  height: 1px;
  background: var(--warm-accent);
  border: 0;
  margin: 0 0 24px 0;
}

.iv__headline {
  font-family: var(--font-display);
  /* Same as the other section headlines: Area Extended Bold,
     charcoal, viewport-scaled clamp. */
  font-weight: 700;
  text-transform: uppercase;
  font-size: clamp(14px, 1.9vw, 24px);
  line-height: 1.4;
  letter-spacing: 0.01em;
  color: var(--charcoal);
  margin: 0;
  hyphens: none;
  overflow-wrap: normal;
  word-break: normal;
}

.iv__lead {
  /* Matches the service-menu item description exactly (font,
     weight, size, leading, tracking, color). */
  font-family: var(--font-display-normal);
  font-weight: 700;
  font-size: 11px;
  line-height: 1.55;
  letter-spacing: 0.04em;
  color: var(--warm-gray);
  margin: var(--space-5) 0 0 0;
  max-width: 40ch;
}

/* ----- Menu type ----- */
.iv__group-label {
  font-family: var(--font-display);
  /* Lightened per direction (700 → 300). NOTE: lower = thinner;
     ask if a heavier label was intended. */
  font-weight: 300;
  text-transform: uppercase;
  font-size: 17px;
  letter-spacing: 0.02em;
  color: var(--charcoal);
  margin: 0;
}

/* "IV" reminder appended to each group label (Restore / Protect /
   Perform). Same type treatment as the group item names (Hydrate,
   Soothe, …) — display-normal, bold, uppercase, charcoal — but it keeps
   the group-label's font-size (inherited) per user. */
.iv__group-suffix {
  font-family: var(--font-display-normal);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--charcoal);
  margin-left: 0.22em;
}

.iv__item-name {
  font-family: var(--font-display-normal);
  font-weight: 700;
  text-transform: uppercase;
  font-size: 15px;
  letter-spacing: 0.04em;
  color: var(--charcoal);
  margin: 0;
}

/* Layout A/B/C (≥650): group labels + item names +2px per user
   (17→19, 15→17). Mobile keeps the base 17/15. */
@media (min-width: 650px) {
  .iv__group-label { font-size: 19px; }
  .iv__item-name { font-size: 17px; }
}

.iv__item-desc {
  font-family: var(--font-display-normal);
  font-weight: 700;
  font-size: 11px;
  line-height: 1.55;
  letter-spacing: 0.04em;
  color: var(--warm-gray);
  margin: 0;
  max-width: 40ch;
}

.iv__price {
  font-family: var(--font-display-normal);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0;
  color: var(--charcoal);
  margin: 0;
  white-space: nowrap;
}

/* ----- Mobile (base) — single column, stacked groups ----- */
.iv__group {
  border-top: 1px solid var(--soft-line);
  padding: var(--space-6) 0;
}
.iv__group:last-child { padding-bottom: 0; }

/* Mobile: drop the divider above the first group (RESTORE) — it sits
   directly under the portrait, so the hairline reads as redundant. */
@media (max-width: 649px) {
  .iv__group:first-child { border-top: 0; }
  .iv__group:first-child::before { display: none; }
}

.iv__group-label { margin-bottom: var(--space-5); }

.iv__row {
  display: grid;
  grid-template-columns: 1fr auto;
  column-gap: var(--space-5);
}
.iv__row + .iv__row { margin-top: 20px; }  /* Mobile (≤649) inter-row gap, tightened 24 → 20 per user. */
.iv__item-name { grid-column: 1; grid-row: 1; }
.iv__item-desc { grid-column: 1; grid-row: 2; margin-top: var(--space-2); }
.iv__price { grid-column: 2; grid-row: 1 / span 2; justify-self: end; text-align: right; }


/* ---------- ≥650 — portrait | content, grouped 4-track menu ---------- */
@media (min-width: 650px) {
  .iv__grid {
    grid-template-columns: minmax(0, 7fr) minmax(0, 14fr);
    grid-template-areas: "portrait content";
    min-height: 648px;
    align-items: stretch;
    /* Keep the content 48px clear of the viewport's right edge. */
    padding-right: 48px;
  }

  .iv__portrait {
    grid-area: portrait;
    height: 842px;
    align-self: start;
  }

  .iv__content {
    grid-area: content;
    /* Left inset scales from 24px @ 650 → 56px @ 1280. */
    padding: 56px 0 48px clamp(24px, calc((100vw - 650px) * 0.0508 + 24px), 56px);
    gap: var(--space-8);
  }

  /* Head shares the 4-track group template so the lead aligns
     exactly with the item-name column. The headline spans the full
     width but is pushed LEFT into the category gutter via a %
     padding (≈¾ across the gutter) for dynamic, staggered spacing. */
  .iv__head {
    display: grid;
    grid-template-columns: var(--iv-cols);
    grid-template-rows: auto auto;
    column-gap: var(--iv-col-gap);
  }
  .iv__head-rule {
    grid-column: 1 / -1;
    grid-row: 1;
  }
  .iv__headline {
    grid-column: 1 / -1;
    grid-row: 2;
    padding-left: 24%;
  }
  .iv__lead { grid-column: 2 / -1; grid-row: 2; }

  /* Each group: own grid, SAME template → columns align across all
     three groups. Category label spans both item rows in column 1. */
  .iv__group {
    display: grid;
    grid-template-columns: var(--iv-cols);
    column-gap: var(--iv-col-gap);
    /* Vertical rhythm: row-gap between the two items in a group;
       padding between categories set to 36px per user comment. */
    row-gap: 43px;
    padding: 36px 0;
    border-top: 1px solid var(--soft-line);
  }
  .iv__group:last-child { padding-bottom: 0; }

  /* First group (RESTORE) pulled 4px tighter top + bottom — negative
     block margin since padding can't go below 0. Experimental per
     user comment. */
  .iv__group:first-child {
    margin-top: -4px;
    margin-bottom: -4px;
  }

  .iv__group-label {
    grid-column: 1;
    grid-row: 1 / span 2;
    align-self: start;
    margin: 0;
  }

  /* Row dissolves so name/desc/price flow into the group grid. */
  .iv__row { display: contents; }

  .iv__item-name { grid-column: 2; grid-row: auto; margin: 0; }
  .iv__item-desc { grid-column: 3; grid-row: auto; margin: 0; max-width: 38ch; }
  .iv__price {
    grid-column: 4;
    grid-row: auto;
    justify-self: end;
    text-align: right;
  }
}


/* ============================================================
   IV — Mobile (≤649): matching section 03's mobile spacing,
   carried over incrementally. Starting with the menu's horizontal
   insets (40px left/right, from Weight Management's mobile menu).
   ============================================================ */
@media (max-width: 649px) {
  /* Stack: image, then menu, then the caption as a footer below the
     menu (like section 03's footnote). Headline + rule hidden. */
  .iv__grid {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
    grid-template-areas:
      "media"
      "menu"
      "caption";
  }
  /* Dissolve content + head so the menu and caption (the only
     surviving head child on mobile) place onto the grid directly. */
  .iv__content { display: contents; }
  .iv__head { display: contents; }

  .iv__portrait {
    grid-area: media;
    padding: 0;
    /* Match the Aesthetics / Weight Management mobile image height. */
    aspect-ratio: 0.866;
    width: 100%;
    height: auto;
  }

  .iv__head-rule { display: none; }
  .iv__headline { display: none; }

  /* Caption → footer below the menu, matching 03's footnote
     (charcoal on light, 40px side inset, 40px bottom to separate
     02 from 03). */
  .iv__lead {
    grid-area: caption;
    color: var(--charcoal);
    max-width: none;
    margin: 0;
    /* +8px top (40 → 48) to detach the caption from the service menu
       above — it's a footer, not part of the menu. */
    padding: 48px 40px 40px 40px;
  }

  .iv__menu {
    grid-area: menu;
    padding-left: 40px;
    padding-right: 40px;
    padding-bottom: 0;
  }

  /* Group top inset (gap from the divider rule to the title):
     32 → 24 → 20 → 22 (+2 back) per user comments. */
  .iv__group {
    padding-top: 22px;
  }

  /* Take 4px off the gap between the two items in each group
     (24 → 20px). */
  .iv__row + .iv__row {
    margin-top: 20px;
  }

  /* Move the items 2px closer to the group title (label bottom
     margin 24 → 22px). */
  .iv__group-label {
    margin-bottom: 22px;
  }
}


/* ============================================================
   IV — Layout A (650–949): mirror the other sections' Layout A.
   Portrait + head share the top row (portrait left, headline +
   caption right); the grouped menu drops to a full-width row below.
   .iv__content is dissolved (display: contents) so .iv__head and
   .iv__menu become direct grid items, like the other sections.
   ============================================================ */
@media (min-width: 650px) and (max-width: 949px) {
  .iv__grid {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
    grid-template-areas:
      "portrait head"
      "menu     menu";
    min-height: 0;
    align-items: start;
    /* 48px reserved on the right (like Weight Management's Layout A),
       so the two columns pack left and resolve to the same widths /
       positions as section 03 — no column-gap (which would push the
       head 48px right). */
    padding-right: 48px;
  }

  /* Dissolve the content wrapper so head + menu place onto the grid. */
  .iv__content { display: contents; }

  .iv__portrait {
    grid-area: portrait;
    align-self: stretch;
    height: 100%;
    min-height: 592px;
    margin-right: 0;
    padding: 16px 0 0 0;
  }

  /* Head — rule, headline, caption stacked in the right column.
     align-items: stretch + left inset 72px so the headline fills its
     column like Weight Management's (carrying over 03's dimensions). */
  .iv__head {
    grid-area: head;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    margin-left: 0;
    padding: 32px 0 0 72px;
  }
  .iv__headline {
    font-size: 28px;
    width: auto;
    max-width: none;
    padding: 0 56px 0 0;
    margin: 0;
  }
  .iv__lead {
    width: auto;
    /* Narrower than the WM caption (which is 34ch) — the IV caption
       copy is short, so a tighter box reads more balanced. */
    max-width: 254px;
    margin-top: 56px;
  }

  /* Menu — full-width row below, 56px symmetric inset, 40px bottom
     to separate 02 from the 03 section. Groups reset to no left
     margin (the Layout B bleed offset doesn't apply). */
  .iv__menu {
    grid-area: menu;
    padding: 48px 56px 40px 56px;
  }
  .iv__group {
    margin-left: 0;
    /* Group padding + row-gap between the two items. */
    padding: 32px 0;
    row-gap: 32px;
  }
}


/* ============================================================
   IV — Layout B (950–1279): bring the Layout C head treatment down
   to this band, but at a 65 / 35 headline-to-caption split (per user
   direction). Keeps the side-by-side; only the head changes from the
   base indented treatment. Layout A (650–949) is left untouched.
   ============================================================ */
@media (min-width: 950px) and (max-width: 1279px) {
  /* Align the header rule with the top of the portrait image (16px
     section inset), pulling the content block up — same as Layout C. */
  .iv__content {
    padding-top: 16px;
  }

  /* Stacked head: header rule, then the headline across 60% of the
     box, then the caption directly beneath it — left-aligned and
     matching the headline's 60% width (per user direction). Shifted
     right 32px to clear the widened portrait (see below). */
  .iv__head {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin-left: 32px;
  }

  /* Make room for a wider image at Layout B (echoing the other
     sections' larger Layout B portrait). Bleed the portrait 32px
     wider to the right; the head shifts right 32px (above) and the
     menu group rows come in 32px from the left (below) so they clear
     the wider image; prices stay anchored at the content right edge. */
  .iv__portrait {
    margin-right: -48px;
    /* Stretch the portrait to the full content height (the grouped
       menu runs taller than the base 842px image), so its bottom
       reaches the section boundary instead of leaving a beige gap
       above the next Wellness section. */
    height: auto;
    align-self: stretch;
  }

  /* Head→menu gap set to 40px at Layout B per user comment. */
  .iv__content {
    gap: 40px;
  }

  .iv__headline {
    font-size: 24px;
    width: 100%;
    max-width: none;
    padding-left: 0;
    padding-right: 0;
    margin: 0;
  }

  .iv__lead {
    width: 50%;
    max-width: none;
    margin-top: 24px;
  }

  /* Tighter menu at Layout B: 24px top/bottom padding per category
     group, and 24px row-gap between the two items in each group.
     Each group row is also pulled in 32px from the left (margin) to
     clear the widened portrait — narrowing the row rather than
     padding it. */
  .iv__group {
    padding: 24px 0;
    row-gap: 24px;
    margin-left: 32px;
  }
}


/* ============================================================
   Layout C — shift columns 2 (headline) + 3 (menu) right 24px on
   the Aesthetics & Weight Management sections (per user direction).
   Opens breathing room between the widened portrait and the
   headline while preserving the headline↔menu gap. translateX keeps
   each column's width intact; the menu's right margin goes 48 → 24px.
   Applies across both Layout C sub-bands (1280–1343 / 1344+).
   ============================================================ */
@media (min-width: 1280px) {
  .aesthetics__head-top,
  .aesthetics__caption,
  .aesthetics__menu .service-list,
  .aesthetics__footnote,
  .weight-mgmt__head-top,
  .weight-mgmt__caption,
  .weight-mgmt__menu .service-list,
  .weight-mgmt__footnote {
    transform: translateX(24px);
  }

  /* IV — content top inset aligns the header rule with the TOP of
     the portrait image (which carries a 16px top inset from the
     section edge). Pulls the whole content block up 40px. */
  .iv__content {
    padding-top: 16px;
  }

  /* Inset the portrait on the right so its edge aligns with the
     Aesthetics / Weight Management images (the IV portrait column is
     wider). 8px lands it flush at Layout C. Stretch it to the full
     section/grid-row height (override the ≥650 fixed 842px + align-self
     start); the base padding:16px 0 insets the image 16px top & bottom
     per user. */
  .iv__portrait {
    padding-right: 8px;
    align-self: stretch;
    height: auto;
  }

  /* Headline + lead sit SIDE BY SIDE at Layout C in a true 70 / 30
     split of the head box. Columns are exactly 70% / 30%; the gap
     lives INSIDE the headline cell (padding-right) so the box widths
     stay a literal 70/30 rather than being eaten by a grid gap. */
  .iv__head {
    grid-template-columns: 70% 30%;
    grid-template-rows: auto auto;
    column-gap: 0;
    align-items: start;
  }

  .iv__head-rule { grid-column: 1 / -1; grid-row: 1; }

  /* IV headline — larger at Layout C (24px felt underwhelming).
     Higher vw term so it actually reaches the 30px ceiling; scoped
     to IV so the other two sections keep their 24px cap. Takes the
     70% column, flush-left, height auto; gap held as padding-right. */
  .iv__headline {
    font-size: clamp(24px, 2.4vw, 30px);
    grid-column: 1;
    grid-row: 2;
    padding-left: 0;
    padding-right: var(--iv-col-gap);
    width: auto;
  }

  .iv__lead {
    grid-column: 2;
    grid-row: 2;
    margin-top: 0;
    max-width: none;
  }
}

/* ============================================================
   Scroll-drawn menu divider lines (sections 01 / 02 / 03)
   The hairlines dividing the service-menu items (Aesthetics +
   Weight Management) and the IV group rules are converted from
   border-tops to scalable ::before lines that grow left→right when
   the menu scrolls into view — same 1.2s timing as How We Work.
   The borders are kept (transparent) so layout/spacing is unchanged,
   and the lines show full by default (no-JS / reduced-motion).
   menu-rules.js arms each section (.rules-armed) then plays
   (.rules-playing) on scroll into view.
   ============================================================ */

/* Aesthetics + Weight Management — per-card 2px top hairline. */
.aesthetics__menu .service-card,
.weight-mgmt__menu .service-card {
  position: relative;
  border-top-color: transparent;
}
.aesthetics__menu .service-card:not(:first-child)::before,
.weight-mgmt__menu .service-card:not(:first-child)::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  width: 100%;
  height: 1px;
  transform-origin: left center;
}
.aesthetics__menu .service-card:not(:first-child)::before {
  background: var(--divider-dark);
}
.weight-mgmt__menu .service-card:not(:first-child)::before {
  background: var(--soft-line);
}

/* IV — per-group 1px top hairline. */
.iv__group {
  position: relative;
  border-top-color: transparent;
}
.iv__group::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  width: 100%;
  height: 1px;
  background: var(--soft-line);
  transform-origin: left center;
}

@media (prefers-reduced-motion: no-preference) {
  /* Armed — collapse each line to zero width (left-anchored) and start
     it THICKER than its resting hairline (settles on play). */
  #aesthetics.rules-armed .service-card::before,
  #weight-management.rules-armed .service-card::before,
  #wellness.rules-armed .iv__group::before {
    transform: scaleX(0);
  }
  #aesthetics.rules-armed .service-card::before,
  #weight-management.rules-armed .service-card::before,
  #wellness.rules-armed .iv__group::before { height: 2px; }              /* start 2px → settle 1px */
  /* Emphasis color while armed — settles to the resting divider color on
     play (the visible cue, mirroring the mobile-nav line): lighter on the
     dark Aesthetics ground, darker on the light IV / Weight-Mgmt ground. */
  #aesthetics.rules-armed .service-card::before { background-color: rgba(255, 255, 255, 0.34); }
  #weight-management.rules-armed .service-card::before,
  #wellness.rules-armed .iv__group::before { background-color: var(--taupe); }
  /* Playing — draw each line to full width while thinning back to its
     resting hairline, over 1.2s (matches HWW). */
  #aesthetics.rules-playing .service-card::before,
  #weight-management.rules-playing .service-card::before,
  #wellness.rules-playing .iv__group::before {
    transform: scaleX(1);
    /* RE-DECLARE the end weight + color here in the PLAYING state — not
       just in the transition list. menu-rules.js leaves .rules-armed on,
       so any target set ONLY in the armed rule stays frozen; the playing
       rule must restate every animated property to win. (This is the bug
       the Aesthetics rewrite exposed — same fix, applied to all three.)
       Draw width on ease; weight + color hold through the draw via ease-in
       and refine at the END. */
    height: 1px;
    transition: transform 1.2s ease, height 1.2s ease-in, background-color 1.2s ease-in;
  }
  /* End color settles to the resting divider per ground: Aesthetics
     darkens (handled in its dedicated block below); IV + Weight, on the
     light ground, lighten taupe → soft-line. */
  #weight-management.rules-playing .service-card::before,
  #wellness.rules-playing .iv__group::before {
    background-color: var(--soft-line);
  }
  /* Left→right cascade — each subsequent line +0.1s. (Card 1 has no
     line, so the cascade starts at card 2 = nth-of-type 2.) */
  #aesthetics.rules-playing .service-card:nth-of-type(3)::before,
  #weight-management.rules-playing .service-card:nth-of-type(3)::before {
    transition-delay: 0.1s;
  }
  #aesthetics.rules-playing .service-card:nth-of-type(4)::before,
  #weight-management.rules-playing .service-card:nth-of-type(4)::before {
    transition-delay: 0.2s;
  }
  #aesthetics.rules-playing .service-card:nth-of-type(5)::before,
  #weight-management.rules-playing .service-card:nth-of-type(5)::before {
    transition-delay: 0.3s;
  }
  #wellness.rules-playing .iv__group:nth-of-type(2)::before {
    transition-delay: 0.1s;
  }
  #wellness.rules-playing .iv__group:nth-of-type(3)::before {
    transition-delay: 0.2s;
  }
}


/* ============================================================
   AESTHETICS header-rule draw — REWRITTEN, self-contained.
   Why a rewrite: menu-rules.js adds .rules-playing WITHOUT removing
   .rules-armed, so both classes coexist. Any property set ONLY in the
   armed rule (color, weight) therefore stays frozen at its start value
   — only the draw (transform) flips, because the shared playing rule
   re-declares it. That's why the line drew but never changed color or
   weight. Fix: the PLAYING rule below RE-DECLARES every target, so it
   always wins over the lingering armed start. Higher specificity
   (:not(:first-child)) + later source than the shared rules above.
   Stroke 2px→1px · light→dark · left→right · 1s.
   ============================================================ */
@media (prefers-reduced-motion: no-preference) {
  /* START — collapsed (left-anchored), 2px, light. */
  #aesthetics.rules-armed .service-card:not(:first-child)::before {
    transform: scaleX(0);
    height: 2px;
    background-color: rgba(255, 255, 255, 0.55);
  }
  /* END — full width, 1px, dark resting; explicitly set so it wins
     even while .rules-armed is still present. */
  #aesthetics.rules-playing .service-card:not(:first-child)::before {
    transform: scaleX(1);
    height: 1px;
    background-color: var(--divider-dark);
    transition: transform 1s ease, height 1s ease, background-color 1s ease;
  }
  /* Left→right cascade (card 1 has no line; starts at card 2). */
  #aesthetics.rules-playing .service-card:nth-of-type(3):not(:first-child)::before { transition-delay: 0.1s; }
  #aesthetics.rules-playing .service-card:nth-of-type(4):not(:first-child)::before { transition-delay: 0.2s; }
  #aesthetics.rules-playing .service-card:nth-of-type(5):not(:first-child)::before { transition-delay: 0.3s; }
}