/* ==========================================================================
   Unique Aesthetics — "Gilded Atelier" design system
   DNA: Art Deco/Luxury + Editorial Minimalism layout (see DESIGN.md)
   Type: Italiana (display) · Cormorant Garamond (accents) · Jost (body)
   ========================================================================== */

/* ---------- Tokens ---------- */
:root {
  /* Palette (generated, WCAG-checked — see DESIGN.md) */
  --paper: #fffcf7;
  --paper-2: #fdf8f0;
  --cream: #f9efdd;
  --cream-2: #f4e6cb;
  --gold-2: #efdcb7;
  --gold-line: #dcc086;
  --gold-line-soft: #e7cfa0;
  --gold: #dbb155;
  --gold-deep: #c69e48;
  --gold-text: #77602f;
  --gold-ink: #382c13;
  --ink: #2f2e2a;
  --ink-soft: #5a5751;
  --on-gold: #110d04;

  /* Dark ceremonial band */
  --night: #131312;
  --night-2: #1a1918;
  --night-3: #232220;
  --night-line: #4c4942;
  --night-gold-line: #5e4502;
  --night-text: #eae8e3;
  --night-muted: #bbb7b0;
  --night-gold: #cdb482;

  /* Functional (forms only) */
  --error: #974843;
  --error-bg: #ffebe9;
  --success: #337437;
  --success-bg: #e0f8e0;

  /* Semantic (re-mapped per background class) */
  --bg: var(--paper);
  --tx: var(--ink);
  --tx-muted: var(--ink-soft);
  --line: var(--gold-line);
  --line-dim: rgba(47, 46, 42, .12);
  --gold-on-bg: var(--gold-text);

  /* Type */
  --font-display: "Playfair Display", "Georgia", "Times New Roman", serif;
  --font-accent: "Playfair Display", "Georgia", serif;
  --font-body: "Poppins", "Segoe UI", "Helvetica Neue", Arial, sans-serif;

  /* Scale: 1.333 from 17px */
  --fs-xs: .75rem;
  --fs-sm: .875rem;
  --fs-base: 1.075rem;
  --fs-md: 1.333rem;
  --fs-lg: clamp(1.4rem, 2.2vw, 1.75rem);
  --fs-xl: clamp(1.75rem, 3vw, 2.3rem);
  --fs-2xl: clamp(2.1rem, 4.1vw, 3.1rem);
  --fs-hero: clamp(2.5rem, 5.4vw, 4.3rem);

  /* Space (ch05: proportional rhythm) */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 20px;
  --sp-5: 32px;
  --sp-6: 52px;
  --sp-7: 84px;
  --sp-8: 136px;

  /* Motion */
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --t-micro: 150ms;
  --t-std: 400ms;
  --t-slow: 600ms;

  /* Chrome */
  --header-h: 92px;
  --shadow-warm: 0 18px 60px rgba(56, 44, 19, .14);
}

/* ---------- Reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
/* clip (not hidden) keeps position:sticky working while killing off-canvas overflow */
html, body { overflow-x: hidden; overflow-x: clip; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}
body {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--fs-base);
  line-height: 1.62;
  color: var(--tx);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body.nav-open, body.modal-open { overflow: hidden; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
address { font-style: normal; }
:focus-visible { outline: 2px solid var(--gold-deep); outline-offset: 3px; }
::selection { background: var(--gold-2); color: var(--gold-ink); }

.skip-link {
  position: absolute; left: -999px; top: 12px; z-index: 1200;
  background: var(--night); color: var(--night-text);
  padding: 12px 18px; letter-spacing: .12em; text-transform: uppercase; font-size: var(--fs-xs);
}
.skip-link:focus { left: 12px; }

/* ---------- Background registers ---------- */
.bg-paper  { --bg: var(--paper);  --tx: var(--ink); --tx-muted: var(--ink-soft); --line: var(--gold-line); --gold-on-bg: var(--gold-text); background: var(--bg); color: var(--tx); }
.bg-cream  { --bg: var(--cream);  --tx: var(--ink); --tx-muted: var(--ink-soft); --line: var(--gold-line); --gold-on-bg: var(--gold-text); background: var(--bg); color: var(--tx); }
.bg-panel  { --bg: var(--paper-2); --tx: var(--ink); --tx-muted: var(--ink-soft); --line: var(--gold-line); --gold-on-bg: var(--gold-text); background: var(--bg); color: var(--tx); }
.bg-dark   { --bg: var(--night-2); --tx: var(--night-text); --tx-muted: var(--night-muted); --line: var(--night-gold-line); --line-dim: rgba(234,232,227,.12); --gold-on-bg: var(--night-gold); background: var(--bg); color: var(--tx); }

/* ---------- Layout primitives ---------- */
.container { width: min(1200px, calc(100% - 40px)); margin-inline: auto; }
.container.narrow { width: min(860px, calc(100% - 40px)); }
.container.wide { width: min(1320px, calc(100% - 40px)); }
.section { padding-block: clamp(64px, 9vw, var(--sp-8)); position: relative; }
.section-tight { padding-block: clamp(44px, 6vw, var(--sp-7)); }
.stack { display: grid; gap: var(--sp-4); }
.split {
  display: grid; gap: clamp(32px, 6vw, 84px);
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
}
@media (min-width: 900px) {
  .split { grid-template-columns: minmax(0, .96fr) minmax(0, 1.04fr); }
  .split.flip > :first-child { order: 2; }
  .split.flip > :last-child { order: 1; }
}

/* ---------- Typography ---------- */
h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.14;
  letter-spacing: -.005em;
}
h3, h4 { font-weight: 600; }
h1 { font-size: var(--fs-hero); }
h2 { font-size: var(--fs-2xl); }
h3 { font-size: var(--fs-lg); }
h4 { font-size: var(--fs-md); }
p { margin: 0; }
.lead {
  font-size: clamp(1.04rem, 1.4vw, 1.16rem);
  font-weight: 400;
  color: var(--tx-muted);
  max-width: 46em;
}
.muted { color: var(--tx-muted); }
.accent-italic {
  font-family: var(--font-display);
  font-weight: 600;
}

/* Eyebrow — letterspaced caps with Deco diamonds */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--gold-on-bg);
}
.eyebrow::before, .eyebrow::after {
  content: "";
  width: 6px; height: 6px;
  background: var(--gold);
  transform: rotate(45deg);
  flex: none;
}
.eyebrow.start::before { display: none; }
.eyebrow.start { gap: 12px; }

/* Ornament divider: line — diamond — line */
.ornament {
  display: flex; align-items: center; justify-content: center; gap: 14px;
  margin-block: var(--sp-3);
}
.ornament::before, .ornament::after {
  content: ""; height: 1px; width: min(72px, 18vw); background: var(--line);
}
.ornament span {
  width: 7px; height: 7px; background: var(--gold); transform: rotate(45deg);
}

/* ==========================================================================
   SIGNATURE MOVE — the interrupted frame ("engraved plaque")
   A 1px gold frame whose top border the heading interrupts.
   ========================================================================== */
.plaque {
  border: 1px solid var(--line);
  text-align: center;
  padding: 0 clamp(20px, 4vw, 56px) clamp(30px, 4vw, 46px);
  margin-top: .8em; /* room for the heading to sit on the border */
}
.plaque > .plaque-title {
  width: fit-content;
  max-width: calc(100% - 8px);
  margin: -.62em auto 0;
  padding-inline: clamp(14px, 3vw, 30px);
  background: var(--bg);
}
.plaque > .lead { margin: var(--sp-4) auto 0; }
.plaque .eyebrow { margin-top: var(--sp-4); }
.section-head { margin-bottom: clamp(36px, 5vw, 64px); }
.section-head .eyebrow { margin-bottom: var(--sp-4); }
.section-head.centered { text-align: center; }
.section-head.centered .lead { margin-inline: auto; }

/* Framed content plaque (whole block framed, e.g. pricing menus, CTA) */
.plaque.left { text-align: left; }
.plaque.left > .plaque-title { margin-left: 0; padding-left: clamp(14px, 3vw, 30px); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  padding: 12px 28px;
  border: 1px solid transparent;
  font-family: var(--font-body);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  line-height: 1.2;
  text-align: center;
  transition: background var(--t-micro) ease-out, color var(--t-micro) ease-out, border-color var(--t-micro) ease-out;
}
.btn-solid { background: var(--gold); border-color: var(--gold); color: var(--on-gold); }
.btn-solid:hover { background: var(--gold-deep); border-color: var(--gold-deep); }
.btn-solid:active { background: var(--gold-ink); border-color: var(--gold-ink); color: var(--cream); }
.btn-outline { border-color: var(--gold); color: var(--tx); background: transparent; }
.btn-outline:hover { background: rgba(219, 177, 85, .14); }
.btn-outline:active { background: rgba(219, 177, 85, .26); }
.btn-quiet { border-color: transparent; color: var(--gold-on-bg); padding-inline: 10px; }
.btn-quiet:hover { border-bottom-color: var(--gold); }
.bg-dark .btn-outline, .hero .btn-outline, .page-hero .btn-outline, .sticky-mobile-cta .btn-outline {
  border-color: var(--night-gold); color: var(--night-text);
}
.bg-dark .btn-outline:hover, .hero .btn-outline:hover, .page-hero .btn-outline:hover, .sticky-mobile-cta .btn-outline:hover {
  background: rgba(205, 180, 130, .14);
}
.actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
.actions.centered { justify-content: center; }

/* Text link with gold underline draw */
.link-line {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-sm);
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gold-on-bg);
  padding-bottom: 4px;
}
.link-line::after {
  content: ""; position: absolute; left: 0; bottom: 0;
  width: 100%; height: 1px; background: var(--gold);
  transform: scaleX(.35); transform-origin: left;
  transition: transform var(--t-std) var(--ease-out);
}
.link-line:hover::after { transform: scaleX(1); }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255, 252, 247, .94);
  border-bottom: 1px solid rgba(220, 192, 134, .5);
  min-height: var(--header-h);
  transition: min-height 250ms ease, box-shadow 250ms ease;
}
/* blur lives on a pseudo-element: backdrop-filter on the header itself would
   make it the containing block for the fixed mobile drawer inside it */
.site-header::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}
.site-header.is-scrolled { min-height: 70px; box-shadow: var(--shadow-warm); }
.header-inner {
  width: min(1320px, calc(100% - 32px));
  margin-inline: auto;
  min-height: inherit;
  display: flex; align-items: center; gap: var(--sp-4);
  padding-block: 8px;
}
.brand { display: inline-flex; align-items: center; flex: none; }
.brand img { width: 208px; max-height: 70px; object-fit: contain; transition: width 220ms ease; }
.site-header.is-scrolled .brand img { width: 168px; max-height: 56px; }
.brand-wordmark { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

.primary-nav { display: flex; align-items: center; gap: clamp(4px, 1vw, 14px); margin-left: auto; }
.primary-nav > a, .dropdown-trigger {
  position: relative;
  border: 0; background: none;
  padding: 10px 6px;
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(47, 46, 42, .9);
  white-space: nowrap;
}
.primary-nav > a::after, .dropdown-trigger::after {
  content: ""; position: absolute; left: 6px; right: 6px; bottom: 4px;
  height: 1px; background: var(--gold);
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--t-std) var(--ease-out);
}
.primary-nav > a:hover::after, .primary-nav > a.active::after,
.dropdown-trigger:hover::after, .dropdown-trigger[aria-expanded="true"]::after { transform: scaleX(1); }
.primary-nav > a.active { color: var(--ink); }
.dropdown-trigger .caret { display: inline-block; margin-left: 6px; font-size: .6rem; transform: translateY(-1px); }

.dropdown { position: relative; }
.mega-menu {
  position: absolute; top: calc(100% + 16px); right: -120px;
  width: min(680px, calc(100vw - 40px));
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2px 28px;
  padding: 26px 30px;
  background: var(--paper);
  border: 1px solid var(--gold-line);
  box-shadow: var(--shadow-warm);
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity var(--t-micro) ease-out, transform var(--t-micro) ease-out, visibility var(--t-micro);
}
.mega-menu.is-open { opacity: 1; visibility: visible; transform: translateY(0); }
.mega-link {
  display: flex; align-items: baseline; gap: 12px;
  padding: 9px 4px;
  border-bottom: 1px solid rgba(220, 192, 134, .35);
  font-size: var(--fs-sm);
  font-weight: 400;
  letter-spacing: .06em;
  color: var(--ink);
  transition: color var(--t-micro) ease-out, padding-left var(--t-micro) ease-out;
}
.mega-link:hover { color: var(--gold-text); padding-left: 10px; }
.mega-link .n {
  font-family: var(--font-display); font-weight: 700;
  font-size: .72rem; color: var(--gold-deep); min-width: 22px;
}
.mega-menu .mega-all { grid-column: 1 / -1; border-bottom: 0; margin-top: 10px; justify-content: center; letter-spacing: .2em; text-transform: uppercase; font-size: var(--fs-xs); color: var(--gold-text); }

.header-actions { display: flex; align-items: center; gap: var(--sp-3); }
.header-actions .btn { min-height: 42px; padding: 9px 20px; }

/* Burger */
.nav-toggle {
  display: none;
  position: relative; z-index: 120;
  width: 48px; height: 48px;
  border: 1px solid var(--gold-line); background: none;
  align-items: center; justify-content: center;
}
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after {
  content: ""; display: block; width: 22px; height: 1.5px; background: var(--ink);
  transition: transform var(--t-micro) ease-out, opacity var(--t-micro) ease-out;
  position: relative;
}
.nav-toggle span::before { position: absolute; top: -7px; }
.nav-toggle span::after { position: absolute; top: 7px; }
body.nav-open .nav-toggle span { background: transparent; }
body.nav-open .nav-toggle span::before { transform: translateY(7px) rotate(45deg); background: var(--night-text); }
body.nav-open .nav-toggle span::after { transform: translateY(-7px) rotate(-45deg); background: var(--night-text); }

/* Mobile drawer */
@media (max-width: 1023px) {
  .nav-toggle { display: inline-flex; margin-left: auto; }
  .primary-nav {
    position: fixed; inset: 0 0 0 auto; z-index: 110;
    width: min(420px, 100%);
    margin: 0;
    flex-direction: column; align-items: stretch; justify-content: flex-start;
    gap: 0;
    padding: calc(var(--header-h) + 12px) 28px 120px;
    background: var(--night);
    overflow-y: auto;
    transform: translateX(100%);
    transition: transform var(--t-std) var(--ease-out);
  }
  body.nav-open .primary-nav { transform: translateX(0); box-shadow: -30px 0 80px rgba(0,0,0,.4); }
  .primary-nav > a, .dropdown-trigger {
    color: var(--night-text);
    font-size: 1rem;
    letter-spacing: .2em;
    padding: 18px 2px;
    border-bottom: 1px solid rgba(234, 232, 227, .12);
    text-align: left;
    width: 100%;
  }
  .primary-nav > a::after, .dropdown-trigger::after { display: none; }
  .primary-nav > a.active { color: var(--night-gold); }
  .dropdown { width: 100%; }
  .dropdown-trigger { display: flex; justify-content: space-between; align-items: center; width: 100%; }
  .mega-menu {
    position: static; width: 100%;
    grid-template-columns: 1fr;
    padding: 4px 0 10px;
    background: transparent; border: 0; box-shadow: none;
    transform: none;
    display: none; opacity: 1; visibility: visible;
  }
  .mega-menu.is-open { display: grid; }
  .mega-link { color: var(--night-muted); border-bottom-color: rgba(234, 232, 227, .08); padding: 11px 4px 11px 16px; }
  .mega-link:hover { color: var(--night-gold); }
  .mega-menu .mega-all { color: var(--night-gold); justify-content: flex-start; padding-left: 16px; }
  .header-actions { display: none; }
}
@media (min-width: 1024px) {
  .primary-nav { position: static; transform: none; }
}

/* ---------- Hero (crossfade) ---------- */
.hero {
  position: relative;
  min-height: clamp(600px, 82vh, 840px);
  background: var(--night);
  color: var(--night-text);
  overflow: hidden;
  display: grid;
}
.hero-slide {
  grid-area: 1 / 1;
  position: relative;
  opacity: 0;
  transition: opacity 1100ms ease;
  display: grid; align-items: center;
  pointer-events: none;
}
.hero-slide.is-active { opacity: 1; pointer-events: auto; }
.hero-slide .hero-bg {
  position: absolute; inset: 0;
}
.hero-slide .hero-bg img {
  width: 100%; height: 100%; object-fit: cover;
}
.hero-slide .hero-bg::after {
  content: ""; position: absolute; inset: 0;
  /* the one permitted gradient: legibility scrim */
  background: linear-gradient(to right, rgba(19, 19, 18, .78) 0%, rgba(19, 19, 18, .55) 46%, rgba(19, 19, 18, .28) 100%);
}
@media (max-width: 700px) {
  .hero-slide .hero-bg::after { background: rgba(19, 19, 18, .62); }
}
.hero-copy {
  position: relative; z-index: 1;
  width: min(1200px, calc(100% - 40px));
  margin-inline: auto;
  padding-block: clamp(90px, 14vh, 150px);
  max-width: none;
}
.hero-copy .inner { max-width: 640px; }
.hero-copy .eyebrow { color: var(--night-gold); margin-bottom: var(--sp-4); }
.hero-copy h1, .hero-copy h2 { font-size: var(--fs-hero); color: #fdfdfc; }
.hero-copy .hero-rule {
  width: 76px; height: 1px; background: var(--gold);
  margin-block: var(--sp-4);
  position: relative;
}
.hero-copy .hero-rule::after {
  content: ""; position: absolute; right: -3px; top: -3px;
  width: 7px; height: 7px; background: var(--gold); transform: rotate(45deg);
}
.hero-copy .lead { color: rgba(234, 232, 227, .85); margin-bottom: var(--sp-5); font-weight: 400; }
.hero-controls {
  position: absolute; z-index: 2;
  left: 0; right: 0; bottom: clamp(20px, 4vh, 40px);
  display: flex; align-items: center; justify-content: center; gap: var(--sp-4);
}
.hero-arrow {
  width: 44px; height: 44px;
  border: 1px solid rgba(205, 180, 130, .55); background: none;
  color: var(--night-gold);
  font-size: 1.2rem; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background var(--t-micro) ease-out, border-color var(--t-micro) ease-out;
}
.hero-arrow:hover { background: rgba(205, 180, 130, .16); border-color: var(--night-gold); }
.hero-dots { display: flex; gap: 14px; }
.hero-dot {
  width: 8px; height: 8px; padding: 0;
  border: 1px solid var(--night-gold); background: transparent;
  transform: rotate(45deg);
  transition: background var(--t-micro) ease-out;
}
.hero-dot.is-active { background: var(--gold); border-color: var(--gold); }

/* Page hero (interior pages) */
.page-hero {
  position: relative;
  background: var(--night);
  color: var(--night-text);
  overflow: hidden;
}
.page-hero .hero-bg { position: absolute; inset: 0; }
.page-hero .hero-bg img { width: 100%; height: 100%; object-fit: cover; }
.page-hero .hero-bg::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(19, 19, 18, .66), rgba(19, 19, 18, .8));
}
.page-hero .container {
  position: relative; z-index: 1;
  padding-block: clamp(84px, 12vw, 150px);
  text-align: center;
}
.page-hero .eyebrow { color: var(--night-gold); justify-content: center; margin-bottom: var(--sp-4); }
.page-hero h1 { color: #fdfdfc; margin-inline: auto; max-width: 18em; }
.page-hero .lead { color: rgba(234, 232, 227, .85); margin: var(--sp-4) auto 0; }
.page-hero .actions { margin-top: var(--sp-5); justify-content: center; }
.page-hero .ornament::before, .page-hero .ornament::after { background: rgba(205, 180, 130, .5); }

/* Breadcrumb */
.crumbs {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 10px;
  font-size: var(--fs-xs); letter-spacing: .14em; text-transform: uppercase;
  color: var(--night-muted);
  margin-bottom: var(--sp-4);
}
.crumbs a:hover { color: var(--night-gold); }
.crumbs .sep { color: var(--gold); }

/* ---------- Service index (hairline grid, numbered) ---------- */
.svc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: clamp(20px, 3vw, 40px);
}
.svc-item { display: block; position: relative; }
.svc-item .svc-media {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--cream-2);
}
.svc-item .svc-media img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform var(--t-slow) var(--ease-out), filter var(--t-slow) var(--ease-out);
}
.svc-item:hover .svc-media img { transform: scale(1.045); }
/* fine gold inset frame on every photo */
.svc-media::after, .gilt-frame::after {
  content: ""; position: absolute; inset: 10px;
  border: 1px solid rgba(220, 192, 134, .65);
  pointer-events: none;
}
.gilt-frame { position: relative; }
.svc-item .svc-caption {
  display: flex; align-items: baseline; gap: 12px;
  padding-top: var(--sp-3);
  border-bottom: 1px solid var(--line);
  padding-bottom: var(--sp-3);
}
.svc-item .n {
  font-family: var(--font-display); font-weight: 700;
  color: var(--gold-deep); font-size: .8rem;
  min-width: 26px;
}
.svc-item h3 { font-size: 1.12rem; font-weight: 600; letter-spacing: 0; }
.svc-item .arrow {
  margin-left: auto; color: var(--gold-deep);
  transition: transform var(--t-std) var(--ease-out);
}
.svc-item:hover .arrow { transform: translateX(6px); }
/* compact two-up grid on phones: ~4 services visible per screen instead of one */
@media (max-width: 700px) {
  .svc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 14px; }
  .svc-item .svc-media { aspect-ratio: 1 / 1; }
  .svc-media::after, .gilt-frame::after { inset: 6px; }
  .svc-item .svc-caption { gap: 8px; padding-block: 9px; align-items: start; min-height: 62px; }
  .svc-item .n { min-width: auto; font-size: .7rem; padding-top: 2px; }
  .svc-item h3 { font-size: .92rem; line-height: 1.3; letter-spacing: 0; }
  .svc-item .arrow { padding-top: 1px; }
  .svc-item .arrow { font-size: .85rem; }
}

/* ---------- Ruled list (benefits, details) ---------- */
.rule-list { list-style: none; margin: 0; padding: 0; }
.rule-list li {
  display: flex; gap: var(--sp-3); align-items: baseline;
  padding-block: 14px;
  border-bottom: 1px solid var(--line-dim);
}
.rule-list li::before {
  content: ""; flex: none;
  width: 6px; height: 6px; background: var(--gold); transform: rotate(45deg) translateY(-1px);
}
.rule-list strong { font-weight: 500; }

/* Numbered steps — Italiana numerals in the margin */
.steps { list-style: none; margin: 0; padding: 0; counter-reset: step; display: grid; gap: 0; }
.steps li {
  counter-increment: step;
  display: grid;
  grid-template-columns: 84px 1fr;
  gap: var(--sp-4);
  padding-block: var(--sp-4);
  border-bottom: 1px solid var(--line-dim);
  align-items: start;
}
.steps li::before {
  content: counter(step, decimal-leading-zero);
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 4vw, 3.2rem);
  line-height: .9;
  color: var(--gold);
}
.steps h3, .steps h4 { margin-bottom: 6px; }
.steps p { color: var(--tx-muted); font-weight: 400; }
@media (max-width: 560px) {
  .steps li { grid-template-columns: 56px 1fr; }
}

/* ---------- Price menu (dotted leaders, Cormorant prices) ---------- */
.menu-frame { margin-top: 1em; }
.menu-list { list-style: none; margin: 0; padding: 0; text-align: left; }
.menu-list li {
  display: flex; align-items: baseline; gap: 12px;
  padding-block: 13px;
}
.menu-list li + li { border-top: 1px solid rgba(220, 192, 134, .3); }
.menu-list .item { font-weight: 400; }
.menu-list .item small { display: block; color: var(--tx-muted); font-size: var(--fs-sm); font-weight: 400; letter-spacing: .02em; }
.menu-list .dots { flex: 1; border-bottom: 1px dotted var(--gold-line); transform: translateY(-4px); min-width: 24px; }
.menu-list .price {
  font-family: var(--font-display); font-weight: 700;
  font-size: 1.2rem;
  color: var(--gold-text);
  white-space: nowrap;
}
.menu-list .price .was {
  display: block; font-size: .8rem; font-weight: 400;
  color: var(--tx-muted); text-decoration: line-through; opacity: .8;
}
.menu-note { margin-top: var(--sp-4); font-size: var(--fs-sm); color: var(--tx-muted); font-weight: 400; }

/* ---------- Stats / trust bar ---------- */
.stat-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1px;
  background: var(--line-dim);
  border-block: 1px solid var(--line-dim);
}
.stat { background: var(--bg); text-align: center; padding: var(--sp-5) var(--sp-3); }
.stat .num {
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 4vw, 3.1rem);
  color: var(--gold-on-bg);
  line-height: 1;
  display: block;
}
.stat .lbl {
  display: block; margin-top: 10px;
  font-size: var(--fs-xs); letter-spacing: .2em; text-transform: uppercase;
  color: var(--tx-muted);
}

/* ---------- Before / After ---------- */
.ba-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: clamp(24px, 3vw, 40px);
}
.ba-card { display: grid; gap: var(--sp-3); }
.ba-card .gilt-frame { aspect-ratio: 16 / 10; overflow: hidden; background: var(--cream-2); }
.ba-card .gilt-frame img { width: 100%; height: 100%; object-fit: cover; }
.ba-card figcaption, .ba-card .ba-caption { border-bottom: 1px solid var(--line-dim); padding-bottom: var(--sp-3); }
.ba-card strong {
  font-family: var(--font-display); font-weight: 700;
  font-size: 1.1rem; letter-spacing: 0;
}
.ba-card p { color: var(--tx-muted); font-size: var(--fs-sm); font-weight: 400; }

/* Filter chips */
.chip-row { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: var(--sp-5); }
.chip {
  border: 1px solid var(--line); background: none;
  padding: 9px 18px;
  font-size: var(--fs-xs); letter-spacing: .16em; text-transform: uppercase; font-weight: 500;
  color: var(--tx-muted);
  transition: all var(--t-micro) ease-out;
}
.chip:hover { color: var(--tx); border-color: var(--gold); }
.chip.is-active { background: var(--gold); border-color: var(--gold); color: var(--on-gold); }

/* ---------- Reviews (dark ceremonial band) ---------- */
.review-carousel { position: relative; }
.reviews {
  display: grid; grid-auto-flow: column;
  grid-auto-columns: min(420px, 86%);
  gap: clamp(20px, 3vw, 36px);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: var(--sp-3);
  scrollbar-width: none;
}
.reviews::-webkit-scrollbar { display: none; }
.review {
  scroll-snap-align: start;
  border: 1px solid var(--night-line);
  padding: clamp(24px, 3vw, 40px);
  display: flex; flex-direction: column; gap: var(--sp-3);
  background: rgba(19, 19, 18, .35);
}
.review .qmark {
  font-family: var(--font-display);
  font-size: 3.4rem; line-height: .6;
  color: var(--gold);
  height: .42em;
}
.review-text {
  font-weight: 400;
  color: var(--night-text);
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.review-author {
  margin-top: auto;
  padding-top: var(--sp-3);
  border-top: 1px solid rgba(234, 232, 227, .14);
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
.review-author strong {
  font-size: var(--fs-xs); font-weight: 500;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--night-gold);
}
.stars { color: var(--gold); letter-spacing: 4px; font-size: .85rem; }
.review-more {
  align-self: flex-start;
  border: 0; background: none; padding: 0;
  color: var(--night-gold);
  font-size: var(--fs-xs); letter-spacing: .16em; text-transform: uppercase;
  border-bottom: 1px solid var(--night-gold-line);
}
.review-more:hover { border-bottom-color: var(--night-gold); }
.review-controls { display: flex; gap: var(--sp-3); justify-content: center; margin-top: var(--sp-5); }
.review-nav {
  width: 44px; height: 44px;
  border: 1px solid rgba(205, 180, 130, .55); background: none;
  color: var(--night-gold); font-size: 1.2rem;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background var(--t-micro) ease-out;
}
.review-nav:hover { background: rgba(205, 180, 130, .16); }

/* Review modal */
.review-modal {
  position: fixed; inset: 0; z-index: 300;
  background: rgba(19, 17, 14, .7);
  display: grid; place-items: center;
  padding: 20px;
}
.review-modal[hidden] { display: none; }
.review-modal-card {
  width: min(640px, 100%);
  max-height: 84vh; overflow-y: auto;
  background: var(--paper);
  border: 1px solid var(--gold-line);
  padding: clamp(28px, 4vw, 48px);
  box-shadow: var(--shadow-warm);
}
.review-modal-head { display: flex; align-items: start; justify-content: space-between; gap: 16px; margin-bottom: var(--sp-3); }
.review-modal-title { font-size: var(--fs-lg); }
.review-modal-close {
  border: 1px solid var(--gold-line); background: none;
  width: 40px; height: 40px; font-size: 1.3rem; line-height: 1;
  color: var(--ink);
}
.review-modal-close:hover { background: var(--cream); }
.review-modal-text { margin-top: var(--sp-3); font-weight: 400; }

/* ---------- Pull-quote ---------- */
.pullquote {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.4rem, 2.6vw, 2rem);
  line-height: 1.35;
  max-width: 24em;
}
.pullquote .mark { color: var(--gold); }

/* ---------- Locations ---------- */
.location-grid {
  display: grid; gap: clamp(24px, 4vw, 48px);
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}
.location { display: grid; gap: var(--sp-3); align-content: start; }
.location .eyebrow { margin-bottom: 2px; }
.map-frame { position: relative; aspect-ratio: 16 / 10; background: var(--cream-2); }
.map-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; filter: sepia(.18) saturate(.9); }
.map-frame::after { content: ""; position: absolute; inset: 0; border: 1px solid var(--gold-line); pointer-events: none; }
.location address { font-weight: 400; color: var(--tx-muted); }
.location .link-line { width: fit-content; }

/* ---------- FAQ ---------- */
.faq-list { border-top: 1px solid var(--line); }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-question {
  width: 100%;
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4);
  padding: 20px 2px;
  border: 0; background: none;
  text-align: left;
  font-family: var(--font-body);
  font-size: 1.05rem; font-weight: 400; letter-spacing: .03em;
}
.faq-question:hover { color: var(--gold-on-bg); }
.faq-question .faq-icon {
  flex: none;
  width: 30px; height: 30px;
  border: 1px solid var(--line);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 1.1rem; font-weight: 400; line-height: 1;
  color: var(--gold-on-bg);
  transition: transform var(--t-std) var(--ease-out), background var(--t-micro) ease-out;
}
.faq-question[aria-expanded="true"] .faq-icon { transform: rotate(45deg); background: var(--gold); color: var(--on-gold); border-color: var(--gold); }
.faq-answer {
  max-height: 0; overflow: hidden;
  transition: max-height var(--t-std) var(--ease-out);
}
.faq-answer p {
  padding: 0 2px 22px;
  color: var(--tx-muted);
  font-weight: 400;
  max-width: 60em;
}

/* ---------- CTA plaque ---------- */
.cta-plaque {
  border: 1px solid var(--line);
  text-align: center;
  padding: 0 clamp(24px, 5vw, 72px) clamp(36px, 5vw, 60px);
  margin-top: 1em;
}
.cta-plaque > h2 {
  width: fit-content; max-width: calc(100% - 8px);
  margin: -.62em auto 0;
  padding-inline: clamp(14px, 3vw, 30px);
  background: var(--bg);
}
.cta-plaque .lead { margin: var(--sp-4) auto var(--sp-5); }
.cta-plaque .actions { justify-content: center; }

/* ---------- Footer ---------- */
.site-footer {
  background: var(--night);
  color: var(--night-muted);
  font-weight: 400;
}
.footer-top {
  border-bottom: 1px solid rgba(234, 232, 227, .1);
  padding-block: var(--sp-5);
  text-align: center;
}
.footer-top .ornament::before, .footer-top .ornament::after { background: var(--night-gold-line); width: min(120px, 26vw); }
.footer-grid {
  display: grid;
  gap: clamp(32px, 5vw, 64px);
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  padding-block: clamp(48px, 6vw, 84px);
}
.footer-brand img { width: 200px; margin-bottom: var(--sp-3); background: var(--paper); padding: 12px 16px; }
.footer-brand p { max-width: 30em; font-size: var(--fs-sm); }
.site-footer h3 {
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--night-gold);
  margin-bottom: var(--sp-4);
}
.footer-links { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.footer-links a, .site-footer address, .site-footer p a {
  font-size: var(--fs-sm);
  color: var(--night-muted);
  transition: color var(--t-micro) ease-out;
}
.footer-links a:hover, .site-footer p a:hover { color: var(--night-text); }
.site-footer address { margin-bottom: 8px; }
.social-row { display: flex; gap: 12px; margin-top: var(--sp-4); }
.social-row a {
  width: 42px; height: 42px;
  border: 1px solid var(--night-line);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--night-gold);
  transition: border-color var(--t-micro) ease-out, background var(--t-micro) ease-out;
}
.social-row a:hover { border-color: var(--night-gold); background: rgba(205, 180, 130, .12); }
.social-row svg { width: 18px; height: 18px; stroke-width: 1.5; }
.footer-bottom {
  display: flex; flex-wrap: wrap; gap: 10px 28px; justify-content: space-between;
  border-top: 1px solid rgba(234, 232, 227, .1);
  padding-block: var(--sp-4);
  font-size: var(--fs-xs);
  letter-spacing: .06em;
}

/* ---------- Forms (editorial underline style) ---------- */
.form-grid { display: grid; gap: var(--sp-4); }
@media (min-width: 720px) {
  .form-grid.cols-2 { grid-template-columns: 1fr 1fr; }
  .form-grid .full { grid-column: 1 / -1; }
}
.field { display: grid; gap: 8px; }
.field label {
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--gold-on-bg);
}
.field label .req { color: var(--error); }
.field input, .field select, .field textarea {
  border: 0;
  border-bottom: 1px solid var(--line);
  background: transparent;
  padding: 10px 2px;
  font-weight: 400;
  font-size: 1rem;
  border-radius: 0;
  transition: border-color var(--t-micro) ease-out;
  width: 100%;
}
.field select { appearance: none; background-image: none; cursor: pointer; }
.field .select-wrap { position: relative; }
.field .select-wrap::after {
  content: ""; position: absolute; right: 8px; top: 50%;
  width: 7px; height: 7px;
  border-right: 1px solid var(--gold-deep); border-bottom: 1px solid var(--gold-deep);
  transform: translateY(-70%) rotate(45deg);
  pointer-events: none;
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-bottom-color: var(--gold-deep);
  box-shadow: 0 1px 0 var(--gold-deep);
}
.field textarea { min-height: 120px; resize: vertical; }
.field.has-error input, .field.has-error select, .field.has-error textarea { border-bottom-color: var(--error); }
.field .error-msg { display: none; font-size: var(--fs-sm); color: var(--error); font-weight: 400; }
.field.has-error .error-msg { display: block; }
.form-success {
  display: none;
  border: 1px solid var(--success);
  background: var(--success-bg);
  color: var(--success);
  padding: var(--sp-4);
  font-weight: 400;
}
.form-success.is-visible { display: block; }
.form-fail {
  display: none;
  border: 1px solid var(--error);
  background: var(--error-bg);
  color: var(--error);
  padding: var(--sp-4);
  font-weight: 400;
}
.form-fail a { color: inherit; text-decoration: underline; }
.form-fail.is-visible { display: block; }
[data-submit][aria-busy="true"] { opacity: .6; cursor: progress; }
/* Honeypot: off-screen rather than display:none, which some bots detect */
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-note { font-size: var(--fs-sm); color: var(--tx-muted); font-weight: 400; }

/* Contact info panel */
.contact-panel { border: 1px solid var(--line); padding: clamp(24px, 3.4vw, 44px); display: grid; gap: var(--sp-4); align-content: start; }
.contact-panel .row { display: grid; gap: 4px; border-bottom: 1px solid var(--line-dim); padding-bottom: var(--sp-3); }
.contact-panel .row:last-child { border-bottom: 0; padding-bottom: 0; }
.contact-panel .lbl { font-size: var(--fs-xs); letter-spacing: .2em; text-transform: uppercase; color: var(--gold-on-bg); font-weight: 500; }
.contact-panel a:hover { color: var(--gold-on-bg); }

/* ---------- Editorial article (resources) ---------- */
.article-cols { display: grid; gap: var(--sp-6); }
@media (min-width: 960px) { .article-cols { grid-template-columns: 2fr 1fr; align-items: start; } }
.prose { max-width: 62ch; display: grid; gap: var(--sp-4); }
.prose h2 { font-size: var(--fs-xl); margin-top: var(--sp-4); }
.prose h3 { margin-top: var(--sp-3); }
.prose p, .prose li { font-weight: 400; color: var(--tx); }
.aside-panel { border: 1px solid var(--line); padding: var(--sp-5); display: grid; gap: var(--sp-3); position: sticky; top: calc(var(--header-h) + 20px); }

/* ---------- Media frames ---------- */
.photo-frame { position: relative; }
.photo-frame img { width: 100%; object-fit: cover; }
.photo-frame::after {
  content: ""; position: absolute; inset: 10px;
  border: 1px solid rgba(220, 192, 134, .65);
  pointer-events: none;
}
.photo-frame.tall img { aspect-ratio: 4 / 5; }
.photo-frame.wide img { aspect-ratio: 16 / 10; }

/* ---------- Sticky mobile CTA ---------- */
.sticky-mobile-cta {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
  display: none;
  gap: 1px;
  background: var(--night);
  border-top: 1px solid var(--night-gold-line);
  padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px));
}
@media (max-width: 767px) {
  .sticky-mobile-cta { display: grid; grid-template-columns: 1.6fr 1fr; gap: 10px; }
  body { padding-bottom: 76px; }
  body.nav-open .sticky-mobile-cta { display: none; }
}

/* ---------- Reveal system ---------- */
[data-reveal] { opacity: 1; transform: none; }
body.js-reveal [data-reveal] {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity var(--t-slow) var(--ease-out), transform var(--t-slow) var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}
body.js-reveal [data-reveal].is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  body.js-reveal [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }
  .hero-slide { transition: none; }
  .svc-item .svc-media img { transition: none; }
  * { animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}

/* ---------- Utilities ---------- */
.center { text-align: center; }
.mt-0 { margin-top: 0; }
.gap-lg { gap: var(--sp-5); }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.overflow-x { overflow-x: auto; }

/* Simple data table (aftercare/candidacy) */
.data-table { width: 100%; border-collapse: collapse; font-weight: 400; }
.data-table th {
  text-align: left; font-weight: 500;
  font-size: var(--fs-xs); letter-spacing: .18em; text-transform: uppercase;
  color: var(--gold-on-bg);
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
}
.data-table td { padding: 12px 14px; border-bottom: 1px solid var(--line-dim); vertical-align: top; }

/* Print */
@media print {
  .site-header, .site-footer, .sticky-mobile-cta, .hero-controls, .nav-toggle { display: none !important; }
  body { background: #fff; color: #000; }
}

/* ==========================================================================
   Package cards — card layout for treatment pricing
   ========================================================================== */
.pkg-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: clamp(20px, 2.6vw, 32px);
}
.pkg {
  display: flex; flex-direction: column;
  border: 1px solid var(--line);
  background: var(--paper);
  padding: clamp(24px, 2.6vw, 34px);
  position: relative;
}
.bg-paper .pkg { background: var(--paper-2); }
.pkg.is-featured { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold) inset; }
.pkg-flag {
  position: absolute; top: 0; right: clamp(18px, 3vw, 30px);
  transform: translateY(-50%);
  background: var(--gold); color: var(--on-gold);
  font-size: .66rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  padding: 6px 14px;
}
.pkg h3 { font-size: 1.28rem; margin-bottom: 4px; }
.pkg .pkg-meta {
  font-size: .78rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase;
  color: var(--gold-on-bg);
  margin-bottom: var(--sp-3);
}
.pkg .pkg-desc { color: var(--tx-muted); font-size: .96rem; margin-bottom: var(--sp-4); }
.pkg .pkg-price {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  padding-top: var(--sp-3);
  border-top: 1px solid var(--line-dim);
  margin-bottom: var(--sp-4);
}
.pkg .pkg-price .amount {
  font-family: var(--font-display); font-weight: 700;
  font-size: 2rem; line-height: 1; color: var(--gold-text);
}
.pkg .pkg-price .was {
  font-size: .95rem; color: var(--tx-muted);
  text-decoration: line-through; opacity: .75;
}
.pkg .pkg-price .save {
  font-size: .68rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  background: var(--cream); color: var(--gold-text);
  padding: 4px 10px;
}
.pkg .pkg-includes { list-style: none; margin: 0 0 var(--sp-4); padding: 0; display: grid; gap: 9px; }
.pkg .pkg-includes li {
  display: flex; gap: 10px; align-items: baseline;
  font-size: .93rem; color: var(--tx-muted);
}
.pkg .pkg-includes li::before {
  content: ""; flex: none; width: 5px; height: 5px;
  background: var(--gold); transform: rotate(45deg) translateY(-1px);
}
.pkg .pkg-includes-label {
  font-size: .72rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  color: var(--tx); margin-bottom: 10px;
}
.pkg .btn { margin-top: auto; width: 100%; }

.pkg-tiers { list-style: none; margin: 0 0 var(--sp-4); padding: 0; }
.pkg-tiers li {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding: 9px 0;
  border-top: 1px solid var(--line-dim);
  font-size: .95rem;
}
.pkg-tiers .t-label { color: var(--tx-muted); }
.pkg-tiers .t-price { font-family: var(--font-display); font-weight: 700; color: var(--gold-text); }

/* ==========================================================================
   App promo band
   ========================================================================== */
.app-band { background: var(--night-2); color: var(--night-text); }
.app-inner {
  display: grid; gap: clamp(28px, 4vw, 60px);
  align-items: center;
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 900px) { .app-inner { grid-template-columns: 1.1fr .9fr; } }
.app-band .eyebrow { color: var(--night-gold); }
.app-band h2 { color: #fdfdfc; }
.app-band .lead { color: rgba(234, 232, 227, .84); }
.app-features { list-style: none; margin: var(--sp-4) 0 0; padding: 0; display: grid; gap: 12px; }
.app-features li {
  display: flex; gap: 12px; align-items: baseline;
  color: rgba(234, 232, 227, .88); font-size: .97rem;
}
.app-features li::before {
  content: ""; flex: none; width: 6px; height: 6px;
  background: var(--gold); transform: rotate(45deg) translateY(-1px);
}
.app-visual {
  border: 1px solid var(--night-line);
  padding: clamp(26px, 3vw, 40px);
  text-align: center;
  background: rgba(19, 19, 18, .5);
}
.app-visual .app-mark {
  width: 64px; height: 64px; margin: 0 auto var(--sp-4);
  border: 1px solid var(--night-gold);
  display: grid; place-items: center;
  color: var(--night-gold);
}
.app-visual .app-mark svg { width: 30px; height: 30px; }
.app-visual h3 { color: #fdfdfc; font-size: 1.3rem; margin-bottom: 8px; }
.app-visual p { color: rgba(234, 232, 227, .78); font-size: .93rem; margin-bottom: var(--sp-4); }
.app-visual .btn { width: 100%; }

/* ==========================================================================
   Social buttons
   ========================================================================== */
.social-row a svg { width: 18px; height: 18px; }
.social-inline { display: flex; flex-wrap: wrap; gap: 10px; }
.social-inline a {
  display: inline-flex; align-items: center; gap: 9px;
  min-height: 44px; padding: 10px 18px;
  border: 1px solid var(--line);
  font-size: .78rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  color: var(--tx);
  transition: background var(--t-micro) ease-out, border-color var(--t-micro) ease-out;
}
.social-inline a:hover { border-color: var(--gold); background: rgba(219, 177, 85, .12); }
.social-inline svg { width: 17px; height: 17px; flex: none; }
.header-social { display: flex; gap: 6px; }
.header-social a {
  width: 38px; height: 38px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--line);
  color: var(--gold-text);
  transition: background var(--t-micro) ease-out, border-color var(--t-micro) ease-out;
}
.header-social a:hover { border-color: var(--gold); background: rgba(219, 177, 85, .14); }
.header-social svg { width: 16px; height: 16px; }
@media (max-width: 1319px) { .header-social { display: none; } }

.nav-social {
  display: flex; gap: 10px; margin-top: var(--sp-5);
  padding-top: var(--sp-4);
  border-top: 1px solid rgba(234, 232, 227, .14);
}
.nav-social a {
  width: 46px; height: 46px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--night-line); color: var(--night-gold);
}
.nav-social a:hover { border-color: var(--night-gold); background: rgba(205, 180, 130, .12); }
.nav-social svg { width: 19px; height: 19px; }
@media (min-width: 1024px) { .nav-social { display: none; } }

/* Continue in App — sticky left-edge tab, mirroring the clinic's existing site.
   The bottom-right corner is left clear for the Lead360 chat launcher. */
.cia-fixed-wrap {
  position: fixed; left: 0; top: 50%; transform: translateY(-50%); z-index: 95;
}
.cia-button {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 14px 10px;
  background: var(--gold); color: var(--gold-ink);
  border: 1px solid var(--gold-deep); border-left: 0;
  border-radius: 0 10px 10px 0;
  box-shadow: 0 10px 30px rgba(47, 46, 42, .18);
  text-decoration: none;
  transition: transform var(--t-micro) ease-out, background var(--t-micro) ease-out;
}
.cia-button:hover { transform: translateX(3px); background: var(--gold-deep); }
.cia-vertical-text {
  writing-mode: vertical-rl; text-orientation: mixed; transform: rotate(180deg);
  white-space: nowrap;
  font-weight: 600; font-size: .72rem; letter-spacing: .16em; text-transform: uppercase;
}
.cia-icon { display: flex; }
.cia-icon svg { width: 18px; height: 18px; }
@media (max-width: 767px) {
  .cia-button { padding: 12px 8px; }
  .cia-vertical-text { font-size: .66rem; letter-spacing: .12em; }
  .cia-icon svg { width: 16px; height: 16px; }
}
@media print { .cia-fixed-wrap { display: none; } }

/* Lead360 chat widget.
   The widget renders in a shadow root and anchors itself with position:fixed, so it
   cannot be restyled directly. Making its host a fixed, viewport-sized box turns the
   host into the containing block for that fixed child, which lets us lift the widget
   clear of the sticky mobile booking bar. The host takes no clicks; the widget's own
   stylesheet re-enables pointer events on its launcher and panel. */
div[id^="lead360-chat-widget"] {
  position: fixed;
  inset: 0;
  pointer-events: none;
  /* a transform is what actually makes this the containing block for the
     fixed-position widget inside the shadow root — position:fixed alone does not */
  transform: translateZ(0);
  /* the transform creates a stacking context, so the host must carry the widget's
     own z-index or site chrome would paint over the open chat panel */
  z-index: 2147483000;
}
@media (max-width: 767px) {
  div[id^="lead360-chat-widget"] { bottom: 74px; }
}
@media print { div[id^="lead360-chat-widget"] { display: none; } }

/* ==========================================================================
   Misc
   ========================================================================== */
.note-line {
  border-left: 2px solid var(--gold);
  padding: 4px 0 4px 18px;
  color: var(--tx-muted);
  font-size: .95rem;
}
.mega-menu.grouped { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2px 26px; align-content: start; }
.mega-group-title {
  font-size: .68rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase;
  color: var(--gold-deep);
  padding: 14px 4px 6px;
  border-bottom: 1px solid rgba(220, 192, 134, .5);
  margin-bottom: 4px;
}
@media (max-width: 1023px) {
  .mega-menu.grouped { grid-template-columns: 1fr; }
  .mega-group-title { color: var(--night-gold); border-bottom-color: rgba(234,232,227,.14); padding-left: 16px; }
}
.svc-grid.compact .svc-media { aspect-ratio: 1 / 1; }

/* Unpriced treatment-area list */
.area-list {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 0;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
}
.area-list li {
  display: flex; align-items: baseline; gap: 11px;
  padding: 11px 4px;
  border-bottom: 1px solid rgba(220, 192, 134, .3);
  font-size: .97rem;
}
.area-list li::before {
  content: ""; flex: none; width: 5px; height: 5px;
  background: var(--gold); transform: rotate(45deg) translateY(-1px);
}

/* Consultation-priced variation inside a package card */
.pkg .pkg-price .price-note {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--gold-text);
  line-height: 1.3;
}

/* ==========================================================================
   Monthly Specials — homepage offer band directly below the hero
   ========================================================================== */
.specials-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: clamp(20px, 2.6vw, 34px);
}
.special {
  display: flex; flex-direction: column;
  border: 1px solid var(--line);
  background: var(--paper);
  position: relative;
}
.special.is-featured { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold) inset; }

/* Day ribbon */
.special-day {
  position: absolute; top: 14px; left: 14px; z-index: 2;
  background: var(--gold); color: var(--on-gold);
  font-size: .66rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  padding: 7px 14px;
}
.special-media {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--cream-2);
}
.special-media img { width: 100%; height: 100%; object-fit: cover; }
.special-media::after {
  content: ""; position: absolute; inset: 10px;
  border: 1px solid rgba(255, 252, 247, .5);
  pointer-events: none;
}
.special-body {
  display: flex; flex-direction: column; flex: 1;
  padding: clamp(20px, 2.4vw, 30px);
}
.special-body h3 { font-size: 1.2rem; margin-bottom: 4px; }
.special-meta {
  font-size: .74rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase;
  color: var(--gold-on-bg);
  margin-bottom: var(--sp-3);
}
.special-price {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 10px;
  padding-top: var(--sp-3);
  border-top: 1px solid var(--line-dim);
  margin-bottom: var(--sp-3);
}
.special-price .amount {
  font-family: var(--font-display); font-weight: 700;
  font-size: 1.85rem; line-height: 1; color: var(--gold-text);
}
.special-price .was {
  font-size: .92rem; color: var(--tx-muted);
  text-decoration: line-through; opacity: .75;
}
.special-price .save {
  font-size: .66rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  background: var(--cream); color: var(--gold-text);
  padding: 4px 10px;
}
.special-desc {
  color: var(--tx-muted); font-size: .93rem;
  margin-bottom: var(--sp-4);
}
.special-body .btn { margin-top: auto; width: 100%; }

/* (small-screen specials rules now live in the Monthly Specials rail block below) */

/* ==========================================================================
   Before & After — single-row auto-scrolling rail (homepage)
   ========================================================================== */
.ba-carousel { position: relative; }

.ba-rail {
  display: flex;
  gap: clamp(16px, 2vw, 28px);
  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: 4px;
  scrollbar-width: none;
  -ms-overflow-style: none;
  /* the rail is driven by script; stop the browser easing fighting it */
  scroll-behavior: auto;
  overscroll-behavior-x: contain;
}
.ba-rail::-webkit-scrollbar { display: none; }

.ba-rail > .ba-card {
  flex: 0 0 clamp(236px, 24vw, 330px);
  margin: 0;
}
.ba-rail > .ba-card .gilt-frame {
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--cream-2);
}
.ba-rail > .ba-card .gilt-frame img { width: 100%; height: 100%; object-fit: cover; }

/* Keyboard users can scroll the rail directly — make that focus visible */
.ba-rail:focus-visible { outline: 2px solid var(--gold-deep); outline-offset: 4px; }

.ba-controls {
  display: flex; gap: var(--sp-3); justify-content: center;
  margin-top: var(--sp-5);
}
.ba-nav {
  width: 46px; height: 46px;
  border: 1px solid var(--line);
  background: none;
  color: var(--gold-on-bg);
  font-size: 1.25rem; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background var(--t-micro) ease-out, border-color var(--t-micro) ease-out;
}
.ba-nav:hover { border-color: var(--gold); background: rgba(219, 177, 85, .14); }
.ba-nav:active { background: rgba(219, 177, 85, .26); }

@media (max-width: 560px) {
  .ba-rail > .ba-card { flex-basis: 78vw; }
}

/* ==========================================================================
   Monthly Specials — horizontal rail on small screens
   Desktop keeps the 3-up grid; phones get a compact swipeable row with arrows,
   so the offers do not push the treatment menu far down the page.
   ========================================================================== */
.specials-carousel { position: relative; }

/* Arrows are a phone-only affordance — the desktop grid shows everything at once */
.specials-controls { display: none; }

@media (max-width: 767px) {
  .specials-grid {
    display: flex;
    gap: 14px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding-bottom: 2px;
    /* let the first and last card sit flush with the container edge */
    scroll-padding-inline: 0;
  }
  .specials-grid::-webkit-scrollbar { display: none; }
  .specials-grid:focus-visible { outline: 2px solid var(--gold-deep); outline-offset: 4px; }

  .specials-grid > .special {
    flex: 0 0 81%;              /* a sliver of the next card hints at more */
    scroll-snap-align: start;
  }

  /* --- compact treatment for phones --- */
  .special-media { aspect-ratio: 16 / 9; }
  .special-media::after { inset: 7px; }
  .special-day { top: 10px; left: 10px; padding: 5px 11px; font-size: .6rem; }

  .special-body { padding: 16px 16px 18px; }
  .special-body h3 { font-size: 1.06rem; line-height: 1.25; }
  .special-meta { font-size: .66rem; margin-bottom: 10px; }

  .special-price { padding-top: 10px; margin-bottom: 10px; gap: 8px; }
  .special-price .amount { font-size: 1.5rem; }
  .special-price .was { font-size: .84rem; }
  .special-price .save { font-size: .6rem; padding: 3px 8px; }

  .special-desc {
    font-size: .87rem;
    margin-bottom: 14px;
    /* keep every card the same height without truncating mid-thought on desktop */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .special-body .btn { min-height: 44px; padding: 10px 18px; }

  .specials-controls {
    display: flex;
    gap: var(--sp-3);
    justify-content: center;
    margin-top: var(--sp-4);
  }
  .specials-controls .ba-nav[disabled] { opacity: .35; pointer-events: none; }

  /* The rail is compact, so the band around it can be too — this section sits
     between the hero and the treatment menu, and should not delay reaching it. */
  #monthly-specials { padding-block: clamp(40px, 7vw, 56px); }
  #monthly-specials .section-head { margin-bottom: var(--sp-4); }
  #monthly-specials .section-head .lead { font-size: .94rem; }
}