/* ==========================================================================
   AMAC — main.css
   Layer order: reset → base → layout → components → utilities
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Reset
   -------------------------------------------------------------------------- */

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

* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 1rem);
}

body {
  background: var(--ivory);
  color: var(--espresso);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: 400;   /* Jost 300 reads as thin on Windows — 400 is the floor
                         for body copy while still feeling light and open. */
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img, svg, video, picture { display: block; max-width: 100%; height: auto; }

input, button, textarea, select { font: inherit; color: inherit; }

button { background: none; border: 0; cursor: pointer; }

a { color: inherit; text-decoration: none; }

ul, ol { list-style: none; padding: 0; }

:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* --------------------------------------------------------------------------
   2. Base typography
   -------------------------------------------------------------------------- */

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: var(--track-display);
  text-wrap: balance;
}

h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); line-height: 1.2; }
h4 { font-size: var(--fs-h4); line-height: 1.3; }

p { text-wrap: pretty; }

p + p { margin-top: 1em; }

strong { font-weight: 500; }

::selection { background: var(--gold-pale); color: var(--espresso); }

/* Section eyebrow — the wide-tracked gold label above every section title.
   This single mark does most of the brand's heavy lifting. */
.eyebrow {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--gold-text);
  margin-bottom: var(--sp-5);
}
.eyebrow::before {
  content: "";
  width: 40px;
  height: 1px;
  background: var(--gold-leaf);
  flex: none;
}
.eyebrow--center { justify-content: center; }
.eyebrow--center::after {
  content: "";
  width: 40px;
  height: 1px;
  background: var(--gold-leaf);
  flex: none;
}

.lead {
  font-size: var(--fs-lead);
  font-weight: 300;
  line-height: 1.65;
  color: var(--espresso-soft);
  max-width: var(--measure);
}

.muted { color: var(--taupe); }

/* Gold-leafed text. Falls back to solid gold where background-clip is
   unsupported, so it never renders invisible. */
.gilt {
  color: var(--gold-text);
  background: var(--gold-leaf-deep);
  -webkit-background-clip: text;
  background-clip: text;
}
@supports (-webkit-background-clip: text) or (background-clip: text) {
  .gilt { -webkit-text-fill-color: transparent; }
}

/* --------------------------------------------------------------------------
   3. Layout
   -------------------------------------------------------------------------- */

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container--narrow { max-width: var(--container-nr); }

.section { padding-block: var(--section-y); }
.section--tight { padding-block: calc(var(--section-y) * 0.6); }
.section--ivory-deep { background: var(--ivory-deep); }
.section--espresso {
  background: var(--espresso);
  color: var(--ivory);
}
.section--espresso .lead,
.section--espresso p { color: rgba(251, 248, 244, 0.74); }

.stack > * + * { margin-top: var(--sp-5); }

.grid { display: grid; gap: var(--sp-6); }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); }

/* Editorial split — image one side, copy the other. */
.split {
  display: grid;
  gap: clamp(2rem, 1rem + 5vw, 5.5rem);
  align-items: center;
  grid-template-columns: 1fr;
}
@media (min-width: 900px) {
  .split { grid-template-columns: 1fr 1fr; }
  .split--reverse > *:first-child { order: 2; }
}

.text-center { text-align: center; }

/* Centred intro block above a grid. */
.section-head {
  max-width: 60ch;
  margin-bottom: var(--sp-8);
}
.section-head--center {
  margin-inline: auto;
  text-align: center;
}
.section-head--center .lead { margin-inline: auto; }
.section-head h2 + .lead { margin-top: var(--sp-4); }

/* --------------------------------------------------------------------------
   4. Buttons
   -------------------------------------------------------------------------- */

.btn {
  --btn-bg: var(--espresso);
  --btn-fg: var(--ivory);
  --btn-bd: var(--espresso);

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-3);
  padding: 1.05em 2.4em;
  background: var(--btn-bg);
  color: var(--btn-fg);
  border: 1px solid var(--btn-bd);
  border-radius: var(--radius);
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: var(--track-btn);
  text-transform: uppercase;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease),
              color var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease),
              transform var(--dur-fast) var(--ease),
              box-shadow var(--dur-fast) var(--ease);
}
.btn:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow);
}
.btn:active { transform: translateY(0); }

/* Primary — gold leaf. The one CTA per screen that matters. */
.btn--gold {
  --btn-fg: #fff;
  --btn-bd: transparent;
  background: var(--gold-leaf);
  background-size: 200% 100%;
  background-position: 0% 50%;
  transition: background-position .6s var(--ease), transform var(--dur-fast) var(--ease),
              box-shadow var(--dur-fast) var(--ease);
  text-shadow: 0 1px 2px rgba(90, 62, 10, 0.28);
}
.btn--gold:hover { background-position: 100% 50%; }

.btn--outline {
  --btn-bg: transparent;
  --btn-fg: var(--espresso);
  --btn-bd: var(--espresso);
}
.btn--outline:hover {
  --btn-bg: var(--espresso);
  --btn-fg: var(--ivory);
}

.btn--outline-gold {
  --btn-bg: transparent;
  --btn-fg: var(--gold-deep);
  --btn-bd: var(--line-gold);
}
.btn--outline-gold:hover {
  --btn-bg: var(--gold);
  --btn-fg: #fff;
  --btn-bd: var(--gold);
}

/* On dark grounds */
.btn--ghost-light {
  --btn-bg: transparent;
  --btn-fg: var(--ivory);
  --btn-bd: rgba(251, 248, 244, 0.4);
}
.btn--ghost-light:hover {
  --btn-bg: var(--ivory);
  --btn-fg: var(--espresso);
  --btn-bd: var(--ivory);
}

.btn--sm { padding: 0.85em 1.7em; font-size: 0.72rem; }
.btn--block { width: 100%; }

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4);
}
.btn-row--center { justify-content: center; }

/* Underlined text link with a gold rule that draws in on hover. */
.link {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: var(--track-btn);
  text-transform: uppercase;
  color: var(--gold-text);
  padding-bottom: 4px;
  background-image: linear-gradient(var(--gold), var(--gold));
  background-repeat: no-repeat;
  background-size: 0% 1px;
  background-position: 0 100%;
  transition: background-size var(--dur) var(--ease-out);
}
.link:hover { background-size: 100% 1px; }
.link::after {
  content: "\2192";
  transition: transform var(--dur-fast) var(--ease);
}
.link:hover::after { transform: translateX(4px); }

/* --------------------------------------------------------------------------
   5. Header + navigation
   -------------------------------------------------------------------------- */

.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: var(--z-header);
  background: rgba(251, 248, 244, 0.86);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: background var(--dur) var(--ease),
              border-color var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease);
}
.site-header.is-stuck {
  background: rgba(251, 248, 244, 0.97);
  border-bottom-color: var(--line);
  box-shadow: 0 1px 24px rgba(42, 33, 28, 0.05);
}

/* Announcement ribbon above the nav. */
.topbar {
  background: var(--espresso);
  color: rgba(251, 248, 244, 0.94);
  font-size: 0.8rem;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-align: center;
  padding: 0.62rem var(--gutter);
}
.topbar a {
  color: var(--gold-light);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-fast) var(--ease);
}
.topbar a:hover { border-bottom-color: var(--gold-light); }

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-5);
  min-height: 72px;
}

/* Full logo lockup: the arch/A/lotus mark, then AMAC with the clinic name
   stacked centred beneath it — the way the printed logo sets it. */
.brand {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.62rem;
  flex: none;
  line-height: 1;
}
.brand__icon {
  width: 46px;
  height: 46px;
  flex: none;
  /* Optical alignment: the mark's lotus tail sits low in its own square, so a
     hair of lift lines it up with the AMAC cap-height rather than the box. */
  margin-top: -2px;
}
.brand__lockup {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.22rem;
  line-height: 1;
}
.brand__mark {
  font-family: var(--font-display);
  font-size: 2.35rem;
  /* Playfair is a Didone: its thin strokes are genuinely hairline at 400,
     and on a warm ivory ground they were breaking up. 500 thickens them
     enough to hold together without tipping the wordmark into looking bold
     — the thick/thin contrast that matches the printed logo survives. */
  font-weight: 500;
  letter-spacing: 0.14em;
  /* Letter-spacing adds a trailing gap after the final C, which pulls the
     word off-centre above the descriptor. Cancel it out of the box width. */
  margin-right: -0.14em;
  line-height: 0.92;
  color: var(--gold-text);
  background: var(--gold-leaf-deep);
  -webkit-background-clip: text;
  background-clip: text;
}
@supports (-webkit-background-clip: text) {
  .brand__mark { -webkit-text-fill-color: transparent; }
}
/* Sized to sit a touch narrower than AMAC above it. A descriptor that
   overhangs the wordmark reads as a mistake; one that tucks inside reads
   as a lockup. */
.brand__sub {
  font-size: 0.5rem;
  font-weight: 500;
  letter-spacing: 0.09em;
  margin-right: -0.09em;   /* same trailing-space correction */
  text-transform: uppercase;
  color: var(--taupe);
  white-space: nowrap;
}
/* Below the desktop nav breakpoint the header tightens up — drop the
   descriptor so the lockup never crowds the burger and phone number. */
@media (max-width: 560px) {
  .brand { gap: 0.5rem; }
  .brand__icon { width: 38px; height: 38px; }
  .brand__mark { font-size: 1.8rem; }
  .brand__sub { display: none; }
}

/* Desktop menu */
.nav__menu {
  display: none;
  align-items: center;
  gap: clamp(0.5rem, -0.4rem + 1.6vw, 1.6rem);
}
@media (min-width: 1080px) { .nav__menu { display: flex; } }

.nav__item { position: relative; }

.nav__link {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  padding: 0.6rem 0.15rem;
  font-size: 0.92rem;
  font-weight: 500;
  letter-spacing: 0.045em;
  color: var(--espresso);
  border-bottom: 1px solid transparent;
  transition: color var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease);
}
.nav__link:hover,
.nav__item.is-open > .nav__link { color: var(--gold-text); }

.nav__link[aria-current="page"] {
  color: var(--gold-text);
  border-bottom-color: var(--gold);
}

.nav__caret {
  width: 8px; height: 8px;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform var(--dur-fast) var(--ease);
}
.nav__item.is-open .nav__caret { transform: translateY(1px) rotate(-135deg); }

/* Mega-menu — services fan out in columns, beautybar-style. */
.megamenu {
  position: absolute;
  top: calc(100% + 14px);
  left: 50%;
  translate: -50% 0;
  min-width: min(92vw, 780px);
  padding: var(--sp-6);
  background: var(--white);
  border: 1px solid var(--line);
  border-top: 2px solid var(--gold);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--sp-6);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity var(--dur) var(--ease),
              transform var(--dur) var(--ease),
              visibility var(--dur);
}
.nav__item.is-open > .megamenu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
/* Invisible bridge so the pointer can travel from link to panel. */
.megamenu::before {
  content: "";
  position: absolute;
  inset: -16px 0 100% 0;
}

.megamenu__col-title {
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--gold-text);
  padding-bottom: var(--sp-3);
  margin-bottom: var(--sp-3);
  border-bottom: 1px solid var(--line-gold);
}
.megamenu__link {
  display: block;
  padding: 0.44rem 0;
  font-size: 0.92rem;
  font-weight: 400;
  color: var(--espresso-soft);
  transition: color var(--dur-fast) var(--ease),
              padding-left var(--dur-fast) var(--ease);
}
.megamenu__link:hover {
  color: var(--gold-text);
  padding-left: 6px;
}

.nav__actions {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  flex: none;
}
.nav__phone {
  display: none;
  font-size: 0.9rem;
  font-weight: 500;
  letter-spacing: 0.03em;
  color: var(--espresso);
  white-space: nowrap;
}
.nav__phone:hover { color: var(--gold-text); }
@media (min-width: 1280px) { .nav__phone { display: inline-flex; align-items: center; gap: .5em; } }
@media (max-width: 480px) { .nav__actions .btn { display: none; } }

/* Burger */
.nav__toggle {
  display: grid;
  place-content: center;
  gap: 5px;
  width: 44px; height: 44px;
  flex: none;
}
@media (min-width: 1080px) { .nav__toggle { display: none; } }
.nav__toggle span {
  display: block;
  width: 22px; height: 1px;
  background: var(--espresso);
  transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.nav__toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav__toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* Mobile drawer */
.drawer {
  position: fixed;
  inset: 0 0 0 auto;
  width: min(90vw, 420px);
  z-index: var(--z-menu);
  background: var(--ivory);
  border-left: 1px solid var(--line);
  padding: var(--sp-6) var(--sp-6) var(--sp-8);
  overflow-y: auto;
  overscroll-behavior: contain;
  transform: translateX(100%);
  transition: transform var(--dur) var(--ease-out);
}
.drawer.is-open { transform: translateX(0); }

.drawer__scrim {
  position: fixed;
  inset: 0;
  z-index: calc(var(--z-menu) - 1);
  background: rgba(42, 33, 28, 0.42);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur) var(--ease), visibility var(--dur);
}
.drawer__scrim.is-open { opacity: 1; visibility: visible; }

.drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: var(--sp-5);
  margin-bottom: var(--sp-5);
  border-bottom: 1px solid var(--line);
}
/* The drawer is only 420px wide — scale the lockup down so it never
   collides with the close button. */
.drawer__head .brand__icon { width: 36px; height: 36px; }
.drawer__head .brand__mark { font-size: 1.75rem; }
.drawer__head .brand__sub { font-size: 0.4rem; letter-spacing: 0.07em; margin-right: -0.07em; }

.drawer__close { font-size: 1.6rem; line-height: 1; color: var(--taupe); padding: .25rem .5rem; }
.drawer__close:hover { color: var(--espresso); }

.drawer__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 0.95rem 0;
  font-family: var(--font-display);
  font-size: 1.22rem;
  border-bottom: 1px solid var(--line);
  text-align: left;
  transition: color var(--dur-fast) var(--ease);
}
.drawer__link:hover { color: var(--gold-text); }
.drawer__link .nav__caret { width: 7px; height: 7px; color: var(--taupe); }
.drawer__link[aria-expanded="true"] .nav__caret { transform: translateY(1px) rotate(-135deg); }

/* Accordion body — animated via grid-template-rows so it needs no JS height math. */
.drawer__sub {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--dur) var(--ease);
}
.drawer__sub > div { overflow: hidden; }
.drawer__link[aria-expanded="true"] + .drawer__sub { grid-template-rows: 1fr; }
.drawer__sub a {
  display: block;
  padding: 0.6rem 0 0.6rem var(--sp-5);
  font-size: 0.95rem;
  font-weight: 400;
  color: var(--espresso-soft);
  border-bottom: 1px solid var(--line);
}
.drawer__sub a:hover { color: var(--gold-text); }
.drawer__sub > div > :first-child { padding-top: var(--sp-3); }
.drawer__sub > div > :last-child { border-bottom: 0; padding-bottom: var(--sp-4); }

.drawer__foot { margin-top: var(--sp-7); display: grid; gap: var(--sp-4); }
.drawer__meta { font-size: var(--fs-sm); color: var(--taupe); line-height: 2; }

/* --------------------------------------------------------------------------
   6. Hero
   -------------------------------------------------------------------------- */

/* Two rows: the copy block takes the free space and centres in it, the scroll
   cue gets its own track underneath. Previously the cue was absolutely
   positioned, so on a short viewport it sat on top of the CTA buttons. */
.hero {
  position: relative;
  display: grid;
  grid-template-rows: 1fr auto;
  justify-items: center;
  min-height: clamp(560px, 88vh, 940px);
  padding-top: var(--header-h);
  overflow: hidden;
  isolation: isolate;
  text-align: center;
  color: var(--white);
}
/* On a phone, 88vh is measured against the viewport with the browser chrome
   *retracted*, so the hero is always taller than what you can actually see
   and the CTAs start below the fold. Dynamic viewport units track the real
   visible area as the toolbar slides away. */
@supports (height: 100dvh) {
  .hero { min-height: clamp(560px, 88dvh, 940px); }
}
.hero__media {
  position: absolute;
  inset: 0;
  z-index: -2;
}
.hero__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center;
}
/* Scrim: keeps the Didone legible over a bright treatment-room photo
   without dulling the warmth of the image. */
.hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  /* The treatment-room photo is very bright cream, so white type needs a real
     scrim to clear contrast — not just a decorative tint. Warm-toned so the
     image still reads as ivory-and-gold rather than greyed out. */
  background:
    linear-gradient(180deg, rgba(38,29,22,.34) 0%, rgba(38,29,22,.26) 40%, rgba(38,29,22,.46) 100%),
    radial-gradient(ellipse 70% 62% at 50% 48%, rgba(38,29,22,.38) 0%, rgba(38,29,22,.03) 100%);
}
.hero__inner {
  position: relative;
  align-self: center;
  max-width: 1100px;
  padding-inline: var(--gutter);
  padding-block: var(--sp-8);
}
.hero__title {
  font-size: var(--fs-hero);
  line-height: 0.94;
  letter-spacing: 0.005em;
  text-transform: uppercase;
  text-shadow: 0 2px 40px rgba(24, 17, 12, 0.42);
}
.hero__title span { display: block; }
.hero__title .is-lead { font-size: 0.55em; letter-spacing: 0.06em; }

.hero .eyebrow { color: var(--gold-light); font-weight: 500; justify-content: center; }
.hero .eyebrow::before,
.hero .eyebrow::after { background: var(--gold-light); opacity: .8; }

.hero__sub {
  max-width: 58ch;
  margin: var(--sp-6) auto 0;
  font-size: var(--fs-lead);
  color: rgba(255, 255, 255, 0.9);
  text-shadow: 0 1px 20px rgba(24, 17, 12, 0.5);
}
.hero .btn-row { margin-top: var(--sp-7); }

.hero__scroll {
  position: relative;
  padding-bottom: var(--sp-6);
  font-size: 0.76rem;
  font-weight: 500;
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: rgba(255,255,255,.85);
  display: grid;
  justify-items: center;
  gap: var(--sp-3);
  transition: color var(--dur-fast) var(--ease);
}
.hero__scroll:hover { color: #fff; }

/* On a short window there is no room for a scroll cue and it only crowds the
   CTAs — the page is obviously scrollable anyway. */
@media (max-height: 720px) {
  .hero__scroll { display: none; }
}
.hero__scroll::after {
  content: "";
  width: 1px; height: 44px;
  background: linear-gradient(rgba(255,255,255,.7), transparent);
  animation: drip 2.4s var(--ease) infinite;
}
@keyframes drip {
  0%, 100% { transform: scaleY(1); transform-origin: top; opacity: .8; }
  50%      { transform: scaleY(.4); transform-origin: top; opacity: .3; }
}

/* Compact hero for interior pages. */
.page-hero {
  position: relative;
  padding-top: calc(var(--header-h) + var(--sp-8));
  padding-bottom: var(--sp-8);
  background: var(--ivory-deep);
  overflow: hidden;
  isolation: isolate;
}
.page-hero::after {
  /* faint gold arc, echoing the halo in the logo */
  content: "";
  position: absolute;
  top: -180px; right: -120px;
  width: 520px; height: 520px;
  border: 1px solid var(--line-gold);
  border-radius: 50%;
  z-index: -1;
  pointer-events: none;
}
.page-hero h1 { max-width: 20ch; }
.page-hero .lead { margin-top: var(--sp-5); }

.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5em;
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--taupe);
  margin-bottom: var(--sp-5);
}
.breadcrumb a:hover { color: var(--gold-text); }
.breadcrumb li:not(:last-child)::after { content: " / "; color: var(--taupe-light); margin-left: .5em; }
.breadcrumb ol { display: contents; }

/* --------------------------------------------------------------------------
   7. Cards
   -------------------------------------------------------------------------- */

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  transition: transform var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease),
              border-color var(--dur) var(--ease);
}
.card:hover {
  transform: translateY(-5px);
  border-color: var(--line-gold);
  box-shadow: var(--shadow);
}
.card__media {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--linen);
}
.card__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1.1s var(--ease-out);
}
.card:hover .card__media img { transform: scale(1.06); }

.card__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: var(--sp-3);
  padding: var(--sp-6);
}
.card__body p { color: var(--espresso-soft); font-size: 0.95rem; }
.card__body .link { margin-top: auto; padding-top: var(--sp-4); align-self: flex-start; }

.card__price {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 500;
  color: var(--gold-text);
}

/* Stretched link so the whole card is one click target while the
   markup keeps a real, readable anchor for assistive tech. */
.card__link::after {
  content: "";
  position: absolute;
  inset: 0;
}

/* Numbered process steps */
.step {
  position: relative;
  padding-top: var(--sp-6);
  border-top: 1px solid var(--line-gold);
}
.step__n {
  font-family: var(--font-display);
  font-size: 2.4rem;
  line-height: 1;
  color: var(--gold-text);
  background: var(--gold-leaf-deep);
  -webkit-background-clip: text;
  background-clip: text;
  margin-bottom: var(--sp-4);
}
@supports (-webkit-background-clip: text) { .step__n { -webkit-text-fill-color: transparent; } }
.step h3 { margin-bottom: var(--sp-3); }
/* :not() keeps this off the numeral. `.step p` outweighs `.step__n` on
   specificity, so without it the 2.4rem display numeral was being served
   0.95rem body copy — the "01" rendered smaller than the heading under it. */
.step p:not(.step__n) { color: var(--espresso-soft); font-size: 0.95rem; }

/* Trust stats */
.stat { text-align: center; }
.stat__n {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 1.6rem + 2.6vw, 3.6rem);
  line-height: 1;
  color: var(--gold-text);
  background: var(--gold-leaf-deep);
  -webkit-background-clip: text;
  background-clip: text;
}
@supports (-webkit-background-clip: text) { .stat__n { -webkit-text-fill-color: transparent; } }
.stat__label {
  margin-top: var(--sp-3);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--taupe);
}
.section--espresso .stat__label { color: rgba(251,248,244,.6); }

/* Gold leaf, the other way round.
   The deep leaf above is cut for ivory. On an espresso ground the polarity
   flips: the bright leaf reads at 11.6:1 there and the deep one would be the
   thing that disappears. So the dark sections get the original back.
   background-image rather than the background shorthand — the shorthand
   would reset background-clip and paint a solid block over the text. */
.section--espresso .gilt,
.section--espresso .step__n,
.section--espresso .stat__n,
.cta-band .gilt,
.cta-band .stat__n {
  color: var(--gold-light);
  background-image: var(--gold-leaf);
}

/* --------------------------------------------------------------------------
   7b. Treatment entry — the repeating block on service category pages
   -------------------------------------------------------------------------- */

.tx {
  display: grid;
  gap: clamp(2rem, 1rem + 4vw, 4.5rem);
  align-items: center;
  grid-template-columns: 1fr;
  padding-block: var(--section-y);
  border-top: 1px solid var(--line);
  scroll-margin-top: calc(var(--header-h) + 2rem);
}
.tx:first-of-type { border-top: 0; padding-top: calc(var(--section-y) * 0.4); }

@media (min-width: 900px) {
  .tx { grid-template-columns: 1fr 1fr; }
  /* Alternate the image side so the page reads as a rhythm, not a list. */
  .tx:nth-of-type(even) .tx__media { order: 2; }
}

.tx__media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius); }

.tx__body h2 { margin-bottom: var(--sp-4); }
.tx__body > p { color: var(--espresso-soft); }
.tx__body > p + p { margin-top: var(--sp-4); }

/* Spec strip — duration, downtime, longevity, price. */
.spec {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: var(--sp-5);
  margin-top: var(--sp-6);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--line-gold);
}
.spec dt {
  font-size: 0.76rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--taupe);
  margin-bottom: var(--sp-2);
}
.spec dd {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.08rem;
  color: var(--espresso);
}
.spec dd.is-price { color: var(--gold-text); font-weight: 500; }

/* Per-treatment CTA, sitting under the treatment image. Deliberately the
   outline variant — solid gold stays reserved for the page hero and closing
   band so twenty of these down a page don't flatten the hierarchy. */
.tx__cta { margin-top: var(--sp-5); }

/* --------------------------------------------------------------------------
   7c. Not yet offered

   Services flagged `soon: true` in data.js. They stay listed and readable —
   only greyed and tagged — so the menu reads complete and the pages keep their
   search value until the treatment goes live.
   -------------------------------------------------------------------------- */

.soon-tag {
  display: inline-block;
  margin-left: 0.6em;
  padding: 0.28em 0.6em;
  font-family: var(--font-body);
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--taupe);
  background: rgba(42, 33, 28, 0.06);
  border-radius: 100px;
  vertical-align: middle;
}

/* Nav — mega menu and mobile drawer */
.megamenu__link.is-soon,
.drawer__sub a.is-soon,
.footer__list a.is-soon { color: var(--taupe-light); }
.megamenu__link.is-soon:hover,
.drawer__sub a.is-soon:hover,
.footer__list a.is-soon:hover { color: var(--taupe); }

/* Price list */
.price-row.is-soon .price-row__name,
.price-row.is-soon .price-row__note { color: var(--taupe-light); }
.price-row.is-soon .price-row__value { color: var(--taupe-light); opacity: 0.75; }

/* Treatment section on a service page */
.tx--soon .tx__media img { filter: grayscale(1); opacity: 0.55; }
.tx--soon .tx__body > p,
.tx--soon .ticks li,
.tx--soon .spec dd { color: var(--taupe); }
.tx--soon .spec dd.is-price { color: var(--taupe); font-weight: 400; }

/* Replaces the booking / enquiry button while a service or plan is unavailable.
   Deliberately not a <button> or <a> — there is nothing to action. */
.is-unavailable {
  display: inline-block;
  padding: 0.9em 1.7em;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: var(--track-btn);
  text-transform: uppercase;
  line-height: 1;
  color: var(--taupe);
  background: transparent;
  border: 1px dashed var(--line);
  border-radius: var(--radius);
}
.is-unavailable--block {
  display: block;
  width: 100%;
  margin-top: auto;          /* matches .tier .btn — stays pinned to the base */
  text-align: center;
}

/* Membership plan held back — the perks depend on a service we cannot yet
   deliver, so the card stays visible but reads as not-for-sale. */
.tier--soon { background: var(--ivory); }
.tier--soon .tier__price,
.tier--soon li { color: var(--taupe-light); }
.tier--soon li::before { border-color: var(--taupe-light); }

/* Hero keyword chips */
.pill.is-soon {
  color: var(--taupe-light);
  background: rgba(42, 33, 28, 0.06);
}

/* Bulleted benefit list with the gold tick from .tier */
.ticks { display: grid; gap: var(--sp-3); margin-top: var(--sp-5); }
.ticks li {
  position: relative;
  padding-left: 1.7em;
  font-size: 0.95rem;
  color: var(--espresso-soft);
}
.ticks li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.62em;
  width: 9px; height: 5px;
  border-left: 1.5px solid var(--gold);
  border-bottom: 1.5px solid var(--gold);
  transform: rotate(-45deg);
}

/* Small pill used for product brand names */
.pill-row { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-5); }
.pill {
  padding: 0.42em 0.95em;
  font-size: 0.76rem;
  font-weight: 500;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--gold-text);
  background: var(--gold-pale);
  border-radius: 100px;
}

/* Medical safety callout */
.note {
  padding: var(--sp-5) var(--sp-6);
  margin-top: var(--sp-6);
  background: var(--linen);
  border-left: 2px solid var(--gold);
  border-radius: var(--radius);
  font-size: 0.93rem;
  line-height: 1.75;
  color: var(--espresso-soft);
}
.note strong { display: block; margin-bottom: var(--sp-2); color: var(--espresso); }

/* --------------------------------------------------------------------------
   8. Pricing
   -------------------------------------------------------------------------- */

.price-nav {
  position: sticky;
  top: var(--header-h);
  z-index: 20;
  display: flex;
  gap: var(--sp-2);
  padding: var(--sp-4) 0;
  margin-bottom: var(--sp-7);
  background: var(--ivory);
  border-bottom: 1px solid var(--line);
  overflow-x: auto;
  scrollbar-width: thin;
}
.price-nav button {
  padding: 0.62rem 1.15rem;
  font-size: 0.79rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--taupe);
  white-space: nowrap;
  border: 1px solid transparent;
  border-radius: var(--radius);
  transition: all var(--dur-fast) var(--ease);
}
.price-nav button:hover { color: var(--espresso); background: var(--linen); }
.price-nav button.is-active {
  color: var(--gold-text);
  border-color: var(--line-gold);
  background: var(--white);
}

.price-group { margin-bottom: var(--sp-9); scroll-margin-top: calc(var(--header-h) + 90px); }
.price-group__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-4);
  padding-bottom: var(--sp-4);
  margin-bottom: var(--sp-5);
  border-bottom: 1px solid var(--gold);
}
.price-group__head p { max-width: 52ch; font-size: 0.95rem; color: var(--taupe); }

/* Row uses a leader dot rule between name and price — the classic
   menu treatment, and it degrades gracefully when the name wraps. */
.price-row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  gap: var(--sp-3) var(--sp-4);
  padding: var(--sp-4) 0;
  border-bottom: 1px solid var(--line);
}
.price-row:last-child { border-bottom: 0; }
.price-row__name { font-size: 1.02rem; }
.price-row__note {
  display: block;
  margin-top: 2px;
  font-size: var(--fs-sm);
  color: var(--taupe);
  max-width: 60ch;
}
.price-row__value {
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 500;
  color: var(--gold-text);
  white-space: nowrap;
}
.price-row__unit {
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 400;
  letter-spacing: 0.08em;
  color: var(--taupe);
  text-transform: uppercase;
}

/* Package / membership tiers */
.tier {
  display: flex;
  flex-direction: column;
  padding: var(--sp-7) var(--sp-6);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.tier--featured {
  border-color: var(--gold);
  box-shadow: var(--shadow);
}
.tier--featured::before {
  content: "Most popular";
  align-self: flex-start;
  margin-bottom: var(--sp-4);
  padding: 0.4em 0.95em;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #fff;
  background: var(--gold-leaf);
  border-radius: 100px;
}
.tier__price {
  font-family: var(--font-display);
  font-size: 2.6rem;
  line-height: 1;
  margin: var(--sp-4) 0 var(--sp-2);
}
.tier__period { font-size: var(--fs-sm); color: var(--taupe); }
.tier ul { margin: var(--sp-5) 0; display: grid; gap: var(--sp-3); }
.tier li {
  position: relative;
  padding-left: 1.7em;
  font-size: 0.95rem;
  color: var(--espresso-soft);
}
.tier li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.62em;
  width: 9px; height: 5px;
  border-left: 1.5px solid var(--gold);
  border-bottom: 1.5px solid var(--gold);
  transform: rotate(-45deg);
}
.tier .btn { margin-top: auto; }

/* --------------------------------------------------------------------------
   9. Accordion (FAQ)
   -------------------------------------------------------------------------- */

.accordion { border-top: 1px solid var(--line); }
.accordion__item { border-bottom: 1px solid var(--line); }
.accordion__trigger {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-5);
  width: 100%;
  padding: var(--sp-5) 0;
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 0.98rem + 0.35vw, 1.3rem);
  line-height: 1.35;
  text-align: left;
  transition: color var(--dur-fast) var(--ease);
}
.accordion__trigger:hover { color: var(--gold-text); }
.accordion__icon {
  position: relative;
  flex: none;
  width: 16px; height: 16px;
  margin-top: 0.35em;
}
.accordion__icon::before,
.accordion__icon::after {
  content: "";
  position: absolute;
  inset: 50% 0 auto 0;
  height: 1px;
  background: var(--gold);
  transition: transform var(--dur) var(--ease);
}
.accordion__icon::after { transform: rotate(90deg); }
.accordion__trigger[aria-expanded="true"] .accordion__icon::after { transform: rotate(0deg); }

.accordion__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--dur) var(--ease);
}
.accordion__panel > div { overflow: hidden; }
.accordion__trigger[aria-expanded="true"] + .accordion__panel { grid-template-rows: 1fr; }
.accordion__panel p {
  padding-bottom: var(--sp-5);
  max-width: var(--measure);
  color: var(--espresso-soft);
}
.accordion__panel > div > :first-child { padding-top: var(--sp-1); }

/* --------------------------------------------------------------------------
   10. Gallery
   -------------------------------------------------------------------------- */

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
  gap: var(--sp-4);
}
.gallery__item {
  position: relative;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--linen);
  cursor: zoom-in;
}
.gallery__item img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1s var(--ease-out);
}
.gallery__item:hover img { transform: scale(1.05); }
.gallery__item figcaption {
  position: absolute;
  inset: auto 0 0 0;
  padding: var(--sp-6) var(--sp-4) var(--sp-4);
  font-size: var(--fs-sm);
  color: #fff;
  background: linear-gradient(transparent, rgba(42,33,28,.8));
  transform: translateY(100%);
  transition: transform var(--dur) var(--ease);
}
.gallery__item:hover figcaption { transform: translateY(0); }

.gallery__item--wide { grid-column: span 2; aspect-ratio: 3 / 2; }
@media (max-width: 620px) { .gallery__item--wide { grid-column: span 1; aspect-ratio: 3 / 4; } }

.gallery-filter {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-bottom: var(--sp-7);
}
.gallery-filter button {
  padding: 0.58rem 1.1rem;
  font-size: 0.79rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--taupe);
  border: 1px solid var(--line);
  border-radius: 100px;
  transition: all var(--dur-fast) var(--ease);
}
.gallery-filter button:hover { color: var(--espresso); border-color: var(--taupe-light); }
.gallery-filter button.is-active {
  color: #fff;
  background: var(--espresso);
  border-color: var(--espresso);
}

/* Lightbox */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: grid;
  place-items: center;
  padding: var(--sp-6);
  background: rgba(26, 20, 16, 0.93);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur) var(--ease), visibility var(--dur);
}
.lightbox.is-open { opacity: 1; visibility: visible; }
.lightbox img {
  max-width: min(100%, 1100px);
  max-height: 86vh;
  object-fit: contain;
  border-radius: var(--radius);
}
.lightbox__close {
  position: absolute;
  top: var(--sp-5); right: var(--sp-5);
  width: 48px; height: 48px;
  font-size: 1.8rem;
  color: #fff;
  border: 1px solid rgba(255,255,255,.3);
  border-radius: 50%;
}
.lightbox__close:hover { background: rgba(255,255,255,.12); }
.lightbox__cap {
  margin-top: var(--sp-4);
  font-size: var(--fs-sm);
  color: rgba(255,255,255,.7);
  text-align: center;
}

/* --------------------------------------------------------------------------
   11. Forms
   -------------------------------------------------------------------------- */

.form { display: grid; gap: var(--sp-5); }
.form__row { display: grid; gap: var(--sp-5); grid-template-columns: 1fr; }
@media (min-width: 680px) { .form__row--2 { grid-template-columns: 1fr 1fr; } }

.field { display: grid; gap: var(--sp-2); }
.field label {
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--taupe);
}
.field .req { color: var(--gold); }

.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 0.95rem 1.1rem;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font-size: 1rem;
  font-weight: 300;
  transition: border-color var(--dur-fast) var(--ease),
              box-shadow var(--dur-fast) var(--ease);
}
.field textarea { min-height: 150px; resize: vertical; }
.field select { appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%238A7A6C' fill='none' stroke-width='1.4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1.1rem center;
  padding-right: 2.6rem;
}
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(192, 145, 47, 0.14);
}
.field input::placeholder,
.field textarea::placeholder { color: var(--taupe-light); }

.field--check {
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: var(--sp-3);
}
.field--check input { width: 18px; height: 18px; margin-top: 3px; accent-color: var(--gold); }
.field--check label {
  font-size: var(--fs-sm);
  letter-spacing: 0;
  text-transform: none;
  color: var(--espresso-soft);
  line-height: 1.6;
}

.form__note { font-size: var(--fs-sm); color: var(--taupe); }

.form-status {
  padding: var(--sp-4) var(--sp-5);
  border-radius: var(--radius);
  font-size: var(--fs-sm);
  display: none;
}
.form-status.is-visible { display: block; }
.form-status--ok { background: var(--gold-pale); border: 1px solid var(--line-gold); color: var(--espresso); }
.form-status--err { background: #FBEAE6; border: 1px solid #E8BCB2; color: #7A2E1C; }

/* --------------------------------------------------------------------------
   12. Booking embed
   -------------------------------------------------------------------------- */

.booking-frame {
  position: relative;
  min-height: 780px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
.booking-frame iframe { width: 100%; min-height: 780px; border: 0; display: block; }

/* Shown until a real booking provider is wired in data.js */
.booking-fallback {
  display: grid;
  place-items: center;
  gap: var(--sp-5);
  min-height: 420px;
  padding: var(--sp-8) var(--sp-6);
  text-align: center;
}
.booking-fallback .eyebrow { justify-content: center; }

/* --------------------------------------------------------------------------
   12b. Location map
   -------------------------------------------------------------------------- */

.map {
  --map-h: 440px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--white);
  box-shadow: var(--shadow-sm);
}

.map__frame {
  position: relative;
  height: var(--map-h);
  background: var(--linen);   /* holds the space while the iframe loads */
}
/* Google's tiles are a cool grey that fights the ivory ground. A whisper of
   sepia pulls them back towards the brand without muddying road labels or
   costing legibility — past ~15% the blue water starts reading brown. */
.map__frame iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  filter: sepia(12%) saturate(96%);
}
@media (prefers-reduced-motion: no-preference) {
  .map__frame iframe { transition: filter var(--dur) var(--ease); }
}
.map:hover .map__frame iframe,
.map:focus-within .map__frame iframe {
  filter: none;   /* full fidelity the moment someone actually reads it */
}

.map__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-5);
  padding: var(--sp-5) var(--sp-6);
  border-top: 1px solid var(--line);
  background: var(--white);
}

.map__addr {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  font-size: var(--fs-sm);
  line-height: 1.5;
  color: var(--espresso-soft);
}

/* The venue name is the wayfinding cue — patients are looking for a spa
   storefront, not a clinic sign. Give it the weight of a label. */
.map__venue {
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-text);
}

/* --------------------------------------------------------------------------
   13. Testimonials
   -------------------------------------------------------------------------- */

.quote {
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
  padding: var(--sp-7) var(--sp-6);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.quote__stars { color: var(--gold); letter-spacing: 0.2em; font-size: 0.9rem; }
.quote blockquote {
  font-family: var(--font-display);
  font-size: 1.1rem;
  line-height: 1.6;
  color: var(--espresso);
}
.quote figcaption {
  margin-top: auto;
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--taupe);
}

/* --------------------------------------------------------------------------
   14. CTA band
   -------------------------------------------------------------------------- */

.cta-band {
  position: relative;
  padding-block: var(--section-y);
  background: var(--espresso);
  color: var(--ivory);
  text-align: center;
  overflow: hidden;
  isolation: isolate;
}
.cta-band::before,
.cta-band::after {
  content: "";
  position: absolute;
  border: 1px solid rgba(192, 145, 47, 0.22);
  border-radius: 50%;
  z-index: -1;
  pointer-events: none;
}
.cta-band::before { width: 620px; height: 620px; top: -300px;  left: -160px; }
.cta-band::after  { width: 460px; height: 460px; bottom: -240px; right: -120px; }
.cta-band h2 { max-width: 22ch; margin-inline: auto; }
.cta-band p { max-width: 56ch; margin: var(--sp-5) auto 0; color: rgba(251,248,244,.74); }
.cta-band .btn-row { margin-top: var(--sp-7); justify-content: center; }

/* --------------------------------------------------------------------------
   15. Footer
   -------------------------------------------------------------------------- */

.site-footer {
  background: var(--ivory-deep);
  border-top: 1px solid var(--line);
  padding-top: var(--sp-9);
}
.footer__grid {
  display: grid;
  gap: var(--sp-7);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr));
  padding-bottom: var(--sp-8);
}
.footer__brand { grid-column: 1 / -1; }
@media (min-width: 960px) { .footer__brand { grid-column: span 1; max-width: 300px; } }
/* inline-flex so the lockup shrinks to its own width and sits flush left in
   the column, while the descriptor stays centred under the wordmark. */
.footer__brand .brand { display: inline-flex; gap: 0.7rem; }
.footer__brand .brand__icon { width: 54px; height: 54px; }
.footer__brand .brand__mark { font-size: 2.6rem; }
.footer__brand .brand__sub { font-size: 0.55rem; letter-spacing: 0.105em; margin-right: -0.105em; }
.footer__brand p { margin-top: var(--sp-5); font-size: var(--fs-sm); color: var(--taupe); }

.footer__title {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--espresso);
  margin-bottom: var(--sp-5);
}
.footer__list { display: grid; gap: var(--sp-3); }
.footer__list a, .footer__list span {
  font-size: 0.94rem;
  font-weight: 400;
  color: var(--espresso-soft);
  transition: color var(--dur-fast) var(--ease);
}
.footer__list a:hover { color: var(--gold-text); }

.socials { display: flex; gap: var(--sp-3); margin-top: var(--sp-5); }
.socials a {
  display: grid;
  place-items: center;
  width: 40px; height: 40px;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--espresso-soft);
  transition: all var(--dur-fast) var(--ease);
}
.socials a:hover {
  color: #fff;
  background: var(--espresso);
  border-color: var(--espresso);
  transform: translateY(-2px);
}
.socials svg { width: 17px; height: 17px; fill: currentColor; }

.footer__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding-block: var(--sp-5);
  border-top: 1px solid var(--line);
  font-size: 0.8rem;
  font-weight: 400;
  color: var(--taupe);
}
.footer__bar nav { display: flex; flex-wrap: wrap; gap: var(--sp-5); }
.footer__bar a:hover { color: var(--gold-text); }

.footer__disclaimer {
  padding-bottom: var(--sp-7);
  font-size: var(--fs-xs);
  line-height: 1.8;
  color: var(--taupe-light);
  max-width: 90ch;
}

/* --------------------------------------------------------------------------
   16. Utilities & motion
   -------------------------------------------------------------------------- */

.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: 0; left: 50%;
  translate: -50% -120%;
  z-index: calc(var(--z-modal) + 1);
  padding: 0.85rem 1.6rem;
  background: var(--espresso);
  color: var(--ivory);
  font-size: var(--fs-xs);
  letter-spacing: var(--track-btn);
  text-transform: uppercase;
  transition: translate var(--dur) var(--ease);
}
.skip-link:focus { translate: -50% 0; }

body.is-locked { overflow: hidden; }

/* Reveal on scroll — opt in with [data-reveal]. Elements are visible by
   default and only hidden once JS confirms it can reveal them, so the page
   is never blank if the script fails. */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .8s var(--ease-out), transform .8s var(--ease-out);
}
.js [data-reveal].is-in { opacity: 1; transform: none; }
.js [data-reveal][data-delay="1"] { transition-delay: .08s; }
.js [data-reveal][data-delay="2"] { transition-delay: .16s; }
.js [data-reveal][data-delay="3"] { transition-delay: .24s; }
.js [data-reveal][data-delay="4"] { transition-delay: .32s; }

/* Branded stand-in for photography that hasn't been supplied yet.
   Sized by its container, so it slots into any image slot. */
.img-placeholder {
  display: grid;
  place-content: center;
  justify-items: center;
  gap: var(--sp-4);
  width: 100%;
  height: 100%;
  min-height: 200px;
  padding: var(--sp-6);
  text-align: center;
  background:
    linear-gradient(135deg, var(--linen) 0%, var(--blush) 52%, var(--ivory-deep) 100%);
  color: var(--gold);
  border-radius: inherit;
}
.img-placeholder svg { width: 44px; height: 44px; opacity: .55; }
.img-placeholder span {
  font-size: var(--fs-xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--taupe);
  max-width: 26ch;
  line-height: 1.7;
}
.hero__media .img-placeholder { min-height: 100%; }

/* Decorative full-width gold hairline */
.rule-gold {
  height: 1px;
  background: var(--gold-leaf);
  opacity: .5;
  border: 0;
}

/* Ornament — the lotus/arch motif from the logo, used as a section divider */
.ornament {
  display: grid;
  place-items: center;
  margin-block: var(--sp-6);
  color: var(--gold);
}
.ornament svg { width: 46px; height: auto; }

.aspect-portrait { aspect-ratio: 3 / 4; object-fit: cover; width: 100%; border-radius: var(--radius); }
.aspect-landscape { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; border-radius: var(--radius); }

/* Framed image — thin gold offset border, a quiet luxury signal. */
.framed { position: relative; }
.framed::after {
  content: "";
  position: absolute;
  inset: 18px -18px -18px 18px;
  border: 1px solid var(--line-gold);
  border-radius: var(--radius);
  z-index: -1;
}
@media (max-width: 620px) { .framed::after { inset: 12px -12px -12px 12px; } }

/* --------------------------------------------------------------------------
   17. Responsive layer

   Everything above is fluid by default: clamp() on the type scale, auto-fit
   on the grids, and a gutter that grows with the viewport. That carries most
   of the work, and it is why there are so few queries in the sections above.

   What follows are the places fluid scaling cannot reach — where a component
   has to change *shape* rather than size, and where the hardware has an
   opinion of its own: notches, home indicators, browser toolbars that slide
   away, and fingers instead of a cursor.

   Read large to small. Later rules win, so the phone rules sit at the bottom.
   -------------------------------------------------------------------------- */

/* ---- Overflow guard ------------------------------------------------------
   overflow-x: hidden on the body turns it into a scroll container, which
   quietly breaks position: sticky for anything inside it — the pricing
   filter, most visibly. overflow: clip does the same clipping without the
   scroll container, so sticky keeps working. */
@supports (overflow: clip) {
  body { overflow-x: clip; }
}

/* Reserve the scrollbar track so opening the drawer (which locks the body)
   does not shunt the whole page sideways by 15px on desktop. */
@supports (scrollbar-gutter: stable) {
  html { scrollbar-gutter: stable; }
}

/* ---- Safe areas ----------------------------------------------------------
   A notched phone held in landscape puts the camera cutout over the left or
   right edge of the page. env() resolves to 0 everywhere else, so max() is
   a no-op on hardware that does not need it. */
.container,
.topbar {
  padding-left:  max(var(--gutter), env(safe-area-inset-left));
  padding-right: max(var(--gutter), env(safe-area-inset-right));
}
.hero__inner {
  padding-left:  max(var(--gutter), env(safe-area-inset-left));
  padding-right: max(var(--gutter), env(safe-area-inset-right));
}
.drawer {
  padding-right:  max(var(--sp-6), env(safe-area-inset-right));
  padding-bottom: calc(var(--sp-8) + env(safe-area-inset-bottom));
}
.lightbox__close {
  top:   calc(var(--sp-5) + env(safe-area-inset-top));
  right: calc(var(--sp-5) + env(safe-area-inset-right));
}

/* ---- Tablet and small laptop: up to 1024 -------------------------------- */
@media (max-width: 1024px) {
  /* The decorative arcs are sized for a wide canvas. At tablet width they
     stop reading as a halo and start reading as a stray line across the
     headline. Pull them back out of the text. */
  .page-hero::after {
    width: 380px; height: 380px;
    top: -150px; right: -170px;
  }
  .cta-band::before { width: 460px; height: 460px; top: -240px; left: -190px; }
  .cta-band::after  { width: 340px; height: 340px; bottom: -190px; right: -150px; }

  .booking-frame,
  .booking-frame iframe { min-height: 700px; }
}

/* ---- Tablet portrait: 620–1023 ------------------------------------------
   auto-fit resolves the four-up grids to three columns here, which leaves a
   single orphan on the second row. Two-by-two is the honest shape. */
@media (min-width: 620px) and (max-width: 1023px) {
  .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---- Below the desktop split: up to 899 --------------------------------- */
@media (max-width: 899px) {
  /* .split and .tx have already collapsed to one column by now. Their
     offset gold frame was drawn for a half-width image and overhangs a
     full-width one. */
  .framed::after { inset: 14px -14px -14px 14px; }

  .section-head { margin-bottom: var(--sp-7); }
}

/* ---- Tablet portrait and below: up to 767 ------------------------------- */
@media (max-width: 767px) {
  /* Five columns of links do not fit; two read cleanly and keep the footer
     from becoming a single 2000px-tall ribbon of text. */
  .footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .footer__bar { justify-content: flex-start; }
  .footer__bar nav { gap: var(--sp-4); }

  .booking-frame,
  .booking-frame iframe { min-height: 620px; }

  .price-group { margin-bottom: var(--sp-8); }
}

/* ---- Phones: up to 620 ---------------------------------------------------
   This is the main mobile breakpoint, and it matches the token query in
   tokens.css that tightens the eyebrow tracking. */
@media (max-width: 620px) {

  /* Header — the ribbon wraps to two lines on every phone, so buy the space
     back by setting it smaller and tighter. This is worth ~18px of header,
     which is 18px of hero the visitor actually sees. */
  .topbar {
    font-size: 0.72rem;
    letter-spacing: 0.03em;
    line-height: 1.5;
    padding-block: 0.5rem;
  }
  .nav { min-height: 64px; gap: var(--sp-4); }

  /* Buttons — the single biggest source of horizontal overflow on this site.
     "Book an Eligibility Consultation" set in uppercase with 0.16em of
     tracking is 355px wide and will not fit on any phone, so let the label
     wrap and let the button own its row. */
  .btn {
    white-space: normal;
    text-wrap: balance;
    padding: 1em 1.6em;
    line-height: 1.35;
  }
  .btn-row > .btn {
    flex: 1 1 auto;
    /* Never narrower than this, never wider than the row: two short buttons
       still sit side by side, anything longer breaks onto its own line and
       fills it. */
    min-width: min(100%, 15rem);
  }
  /* The header's Book Now pill is laid out against the burger, not in a
     btn-row — it must stay on one line. */
  .nav__actions .btn { white-space: nowrap; }

  /* Hero */
  .hero__sub { margin-top: var(--sp-5); }
  .hero .btn-row { margin-top: var(--sp-6); }

  .page-hero { padding-bottom: var(--sp-7); }
  .page-hero::after {
    width: 260px; height: 260px;
    top: -110px; right: -120px;
  }

  /* Pricing filter — a horizontally scrolled strip with no visible scrollbar
     on a phone. Snap it, and fade the trailing edge so it reads as "there is
     more to the right" rather than "the last word is cut off". */
  .price-nav {
    gap: var(--sp-1);
    padding: var(--sp-3) 0;
    margin-bottom: var(--sp-6);
    scroll-snap-type: x proximity;
    scroll-padding-left: var(--sp-1);
  }
  .price-nav button {
    scroll-snap-align: start;
    padding: 0.6rem 0.9rem;
    font-size: 0.74rem;
  }
  .price-group { scroll-margin-top: calc(var(--header-h) + 5rem); }

  .price-group__head { gap: var(--sp-2); }

  /* Cards, tiers and callouts all carry desktop padding that eats a third of
     a phone's width. */
  .card__body { padding: var(--sp-5); }
  .tier  { padding: var(--sp-6) var(--sp-5); }
  .quote { padding: var(--sp-6) var(--sp-5); }
  .note  { padding: var(--sp-4) var(--sp-5); }

  .tier__price { font-size: 2.2rem; }

  .accordion__trigger { gap: var(--sp-4); padding: var(--sp-4) 0; }

  .lightbox { padding: var(--sp-3); }
  .lightbox img { max-height: 78vh; }
  .lightbox__close {
    width: 44px; height: 44px;
    font-size: 1.5rem;
  }

  .gallery { gap: var(--sp-3); }
  .gallery-filter {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    margin-inline: calc(var(--gutter) * -1);
    padding-inline: var(--gutter);
  }
  .gallery-filter::-webkit-scrollbar { display: none; }
  .gallery-filter button { flex: none; }

  .breadcrumb { font-size: 0.72rem; margin-bottom: var(--sp-4); }

  .socials a { width: 44px; height: 44px; }

  .booking-frame,
  .booking-frame iframe { min-height: 560px; }
  .booking-fallback { min-height: 340px; padding: var(--sp-7) var(--sp-5); }

  /* A 440px map is most of a phone screen. Shorten it, and let the bar's
     buttons take the full width — .btn-row > .btn above already stacks them. */
  .map { --map-h: 320px; }
  .map__bar { padding: var(--sp-5); }
  .map__bar .btn-row { width: 100%; }
}

/* ---- Small phones: up to 420 -------------------------------------------- */
@media (max-width: 420px) {
  /* A single column of links. Two columns of eight-word treatment names at
     this width wrap every line. */
  .footer__grid { grid-template-columns: 1fr; gap: var(--sp-6); }

  /* The leader-dot price row runs out of room for a long treatment name and
     a price on the same line. Stack them. */
  .price-row { grid-template-columns: 1fr; gap: var(--sp-2); }
  .price-row__value { justify-self: start; }

  .spec { gap: var(--sp-4); }

  .step__n { font-size: 2rem; }

  .form__row { gap: var(--sp-4); }
}

/* ---- Landscape phones ----------------------------------------------------
   ~400px of height, most of it already spoken for by the browser chrome.
   A 560px minimum-height hero means the visitor scrolls twice before
   reaching a single word of content. */
@media (orientation: landscape) and (max-height: 560px) {
  .hero {
    min-height: 0;
    padding-bottom: var(--sp-7);
  }
  .hero__inner { padding-block: var(--sp-6); }
  .page-hero { padding-top: calc(var(--header-h) + var(--sp-6)); }

  /* The drawer is a full-height panel with a lot of vertical rhythm in it —
     compress so the CTAs at the bottom stay reachable. Only the top: the
     bottom still has to clear the home indicator. */
  .drawer { padding-top: var(--sp-5); }
  .drawer__link { padding: 0.7rem 0; font-size: 1.1rem; }
  .drawer__head { padding-bottom: var(--sp-4); margin-bottom: var(--sp-4); }
  .drawer__foot { margin-top: var(--sp-5); }
}

/* ---- Touch ---------------------------------------------------------------
   Not a size question but a hardware one, and it applies at every width.
   On a touch screen there is no hover, so anything that only appears on
   hover is simply unreachable, and anything that changes on hover sticks
   after a tap until you touch something else. */
@media (hover: none) {
  /* Gallery captions live behind a hover. Show them. */
  .gallery__item figcaption { transform: translateY(0); }

  /* Lift-and-shadow on tap is noise, and the card image stays zoomed in
     after the finger leaves. */
  .card:hover { transform: none; box-shadow: none; border-color: var(--line); }
  .card:hover .card__media img { transform: none; }
  .gallery__item:hover img { transform: none; }
  .btn:hover { transform: none; box-shadow: none; }
  .socials a:hover { transform: none; }

  /* 44px is the smallest target that a finger hits reliably. Dense link
     lists — the footer, the drawer's treatment lists, the mega-menu —
     default to line-height and come in well under that. */
  .footer__list a,
  .drawer__sub a,
  .megamenu__link {
    display: flex;
    align-items: center;
    min-height: 44px;
  }
  .footer__bar nav a,
  .breadcrumb a { padding-block: 0.35rem; }
}

/* Print — patients do print price lists. */
@media print {
  .site-header, .site-footer, .cta-band, .price-nav, .drawer, .drawer__scrim,
  .hero__scroll, .btn, .booking-frame { display: none !important; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .section { padding-block: 1rem; }
  a::after { content: " (" attr(href) ")"; font-size: 9pt; color: #555; }
  .price-row { break-inside: avoid; }
}