/* Dr. Scottsdale shared styles — used by every page so the design stays
   in lock-step across home, procedure detail pages, and the results gallery. */
:root {
  --deeper: #0E001F;
  --deep: #1A0033;
  --royal: #3D0066;
  --vivid: #8B00D4;
  --accent: #C77DFF;
  --gold: #D4A853;
  --gold-light: #E8C97A;
  --gold-dark: #9C7A33;
  --pearl: #F5F0E6;
  --smoke: #9A958C;
  --r-pill: 9999px;
  --r-lg: 1.5rem;
  --r-md: 1.25rem;
  --r-sm: 0.75rem;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--deeper); color: var(--pearl);
  font-family: 'Inter', sans-serif; font-weight: 300;
  line-height: 1.6; -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; height: auto; }

.container { max-width: 80rem; margin: 0 auto; padding: 0 2.5rem; }
.eyebrow { font-family: 'Bebas Neue', sans-serif; color: var(--gold); letter-spacing: 0.32em; font-size: 11px; text-transform: uppercase; }
.gold-bar { display: inline-block; height: 1px; width: 3rem; background: var(--gold); vertical-align: middle; }
.script { font-family: 'Italianno', cursive; color: var(--gold); }

.btn-gold {
  display: inline-flex; align-items: center; gap: 0.625rem; padding: 1rem 2rem;
  background: linear-gradient(135deg, #E8C97A 0%, #D4A853 50%, #B8933E 100%);
  color: var(--deeper); font-family: 'Inter', sans-serif; font-weight: 500;
  font-size: 0.875rem; letter-spacing: 0.02em; border: none; border-radius: var(--r-pill);
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1); cursor: pointer;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.06) inset, 0 12px 30px -10px rgba(212,168,83,0.45);
}
.btn-gold:hover { transform: translateY(-2px); box-shadow: 0 0 0 1px rgba(255,255,255,0.08) inset, 0 22px 50px -10px rgba(212,168,83,0.6); }
.btn-ghost {
  display: inline-flex; align-items: center; gap: 0.625rem; padding: 1rem 2rem;
  color: var(--pearl); border: 1px solid rgba(212,168,83,0.4); border-radius: var(--r-pill);
  font-family: 'Inter', sans-serif; font-weight: 500; font-size: 0.875rem; letter-spacing: 0.02em;
  background: rgba(255,255,255,0.02); backdrop-filter: blur(8px);
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1); cursor: pointer;
}
.btn-ghost:hover { border-color: var(--gold); background: rgba(212,168,83,0.08); color: var(--gold); }
.btn-arrow { width: 1rem; height: 1rem; display: inline-block; transition: transform 0.35s ease; }
.btn-gold:hover .btn-arrow, .btn-ghost:hover .btn-arrow { transform: translateX(2px); }

nav.top {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  height: 5rem; background: rgba(14,0,31,0.75); backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(212,168,83,0.12);
}
nav.top .row { display: flex; align-items: center; justify-content: space-between; height: 100%; }
nav.top .brand { display: flex; flex-direction: column; align-items: flex-start; line-height: 1; }
nav.top .brand .word { font-family: 'Italianno', cursive; color: var(--gold); font-size: 2.25rem; }
nav.top .brand .tag { font-family: 'Bebas Neue', sans-serif; font-size: 10px; letter-spacing: 0.32em; color: rgba(245,240,230,0.6); text-transform: uppercase; margin-top: 0.125rem; }
/* Nav menu links use the body font treatment (Inter 300, no letter-spacing,
   proper case) so they read as approachable body text — not the heavier
   500-weight tracked-out display style they had before. Matches the rest
   of the page copy. */
nav.top .links { display: flex; gap: 2.5rem; font-family: 'Inter', sans-serif; font-weight: 300; font-size: 0.9375rem; letter-spacing: 0; text-transform: none; }
nav.top .links a { color: rgba(245,240,230,0.85); transition: color 0.3s ease; }
nav.top .links a:hover, nav.top .links a.active { color: var(--gold); }
nav.top .cta {
  padding: 0.625rem 1.5rem;
  background: linear-gradient(135deg, #E8C97A 0%, #D4A853 50%, #B8933E 100%);
  color: var(--deeper); font-family: 'Inter', sans-serif; font-weight: 500;
  font-size: 0.8125rem; letter-spacing: 0.02em; border-radius: var(--r-pill);
  box-shadow: 0 8px 24px -8px rgba(212,168,83,0.45);
}

footer { background: var(--deeper); border-top: 1px solid rgba(212,168,83,0.18); }
footer .inner { padding: 4rem 0; display: grid; grid-template-columns: 5fr 3fr 4fr; gap: 3rem; }
footer .brand-script { font-family: 'Italianno', cursive; color: var(--gold); font-size: 3rem; line-height: 1; margin-bottom: 1rem; }
footer .desc { color: rgba(245,240,230,0.7); font-size: 0.875rem; line-height: 1.55; max-width: 22rem; }
footer .desc a { color: var(--gold); }
footer .socials { display: flex; gap: 0.5rem; margin-top: 1.5rem; }
footer .socials a { width: 2.5rem; height: 2.5rem; border: 1px solid rgba(212,168,83,0.2); background: rgba(212,168,83,0.04); border-radius: 50%; color: rgba(245,240,230,0.75); display: flex; align-items: center; justify-content: center; font-size: 0.6875rem; font-family: 'Inter', sans-serif; font-weight: 500; letter-spacing: 0.04em; transition: all 0.3s ease; }
footer .socials a:hover { border-color: var(--gold); color: var(--gold); background: rgba(212,168,83,0.1); }
footer h4 { font-family: 'Bebas Neue', sans-serif; color: var(--gold); text-transform: uppercase; letter-spacing: 0.32em; font-size: 11px; margin-bottom: 1rem; font-weight: 400; }
footer .addr { color: rgba(245,240,230,0.8); font-size: 0.875rem; line-height: 1.55; font-style: normal; }
footer .phone { display: inline-block; margin-top: 1rem; padding: 0.5rem 1.125rem; background: rgba(212,168,83,0.08); border: 1px solid rgba(212,168,83,0.25); border-radius: var(--r-pill); color: var(--gold); font-family: 'Inter', sans-serif; font-weight: 500; font-size: 0.875rem; }
footer .hrs { color: rgba(245,240,230,0.5); font-size: 0.75rem; margin-top: 0.75rem; }
footer ul { list-style: none; }
footer ul li { margin-bottom: 0.625rem; }
footer ul a { color: rgba(245,240,230,0.8); font-size: 0.875rem; transition: color 0.3s ease; }
footer ul a:hover { color: var(--gold); }
footer .bottom { border-top: 1px solid rgba(212,168,83,0.18); padding: 1.5rem 0; display: flex; justify-content: space-between; gap: 1rem; font-size: 0.75rem; color: rgba(245,240,230,0.5); flex-wrap: wrap; }
footer .bottom .legal { display: flex; gap: 1.25rem; }

.fab-ask { position: fixed; bottom: 1.5rem; left: 1.5rem; z-index: 40; display: inline-flex; align-items: center; gap: 0.75rem; background: linear-gradient(180deg, var(--deep) 0%, var(--deeper) 100%); border: 1px solid rgba(212,168,83,0.45); border-radius: var(--r-pill); padding: 0.625rem 1.25rem 0.625rem 0.625rem; transition: all 0.3s ease; cursor: pointer; box-shadow: 0 12px 30px -10px rgba(0,0,0,0.5); }
.fab-ask:hover { border-color: var(--gold); transform: translateY(-2px); }
.fab-ask .label { font-family: 'Inter', sans-serif; font-weight: 500; font-size: 0.8125rem; color: var(--pearl); letter-spacing: 0.01em; }
.fab-book { position: fixed; bottom: 1.5rem; right: 1.5rem; z-index: 40; display: inline-flex; align-items: center; gap: 0.625rem; background: linear-gradient(135deg, #E8C97A 0%, #D4A853 50%, #B8933E 100%); color: var(--deeper); padding: 0.875rem 1.5rem; font-family: 'Inter', sans-serif; font-weight: 500; font-size: 0.875rem; letter-spacing: 0.02em; border-radius: var(--r-pill); box-shadow: 0 0 0 1px rgba(255,255,255,0.06) inset, 0 12px 30px -8px rgba(212,168,83,0.5); cursor: pointer; transition: transform 0.3s ease; }
.fab-book:hover { transform: translateY(-2px); }
.avatar-s { width: 2.5rem; height: 2.5rem; border-radius: 50%; background: linear-gradient(135deg, #E8C97A, #D4A853 45%, #9C7A33); color: var(--deeper); font-family: 'Bebas Neue', sans-serif; font-size: 1.125rem; display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 1px rgba(255,255,255,0.06) inset, 0 6px 20px -6px rgba(212,168,83,0.4); }

/* Procedure detail + gallery shared blocks */
section.page-hero {
  position: relative; padding: 12rem 0 6rem; overflow: hidden;
  background:
    radial-gradient(ellipse at 30% 20%, rgba(139,0,212,0.32) 0%, transparent 55%),
    radial-gradient(ellipse at 75% 70%, rgba(212,168,83,0.18) 0%, transparent 50%),
    linear-gradient(180deg, var(--deeper) 0%, var(--deep) 60%, var(--deeper) 100%);
}
section.page-hero .row { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1.5rem; }
section.page-hero h1 { font-family: 'Bebas Neue', sans-serif; text-transform: uppercase; color: var(--pearl); font-size: clamp(3rem, 7vw, 6rem); line-height: 1; letter-spacing: -0.005em; }
section.page-hero h1 .reg { font-size: 0.4em; color: var(--gold); vertical-align: super; margin-left: -0.4rem; }
section.page-hero .sub { margin-top: 1.5rem; font-family: 'Italianno', cursive; color: var(--gold); font-size: 2.25rem; line-height: 1.2; }
section.page-hero .lead { margin-top: 2rem; max-width: 50rem; font-size: 1.0625rem; line-height: 1.65; color: rgba(245,240,230,0.85); font-weight: 300; }
section.page-hero .ctas { margin-top: 2.5rem; display: flex; gap: 1rem; flex-wrap: wrap; }

.section { padding: 6rem 0; }
.section h2 { font-family: 'Bebas Neue', sans-serif; text-transform: uppercase; color: var(--pearl); font-size: clamp(2rem, 4vw, 3.25rem); line-height: 1; }

/* B&A grid — used by gallery + procedure pages */
.ba-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }
.ba-card { border-radius: var(--r-lg); overflow: hidden; border: 1px solid rgba(212,168,83,0.18); background: var(--deep); transition: all 0.4s ease; }
.ba-card:hover { border-color: rgba(212,168,83,0.45); box-shadow: 0 20px 50px -20px rgba(139,0,212,0.4); transform: translateY(-2px); }
.ba-card .pair { display: grid; grid-template-columns: 1fr 1fr; }
.ba-card .slot { position: relative; aspect-ratio: 3 / 4; background: var(--deeper); }
.ba-card .slot img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.ba-card .slot .label { position: absolute; top: 0.75rem; left: 0.75rem; background: rgba(14,0,31,0.85); color: var(--gold); font-family: 'Bebas Neue', sans-serif; padding: 0.3125rem 0.75rem; font-size: 0.625rem; letter-spacing: 0.32em; border-radius: var(--r-pill); border: 1px solid rgba(212,168,83,0.3); }
.ba-card .meta { padding: 1rem 1.25rem; display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.ba-card .meta .procedure { font-family: 'Bebas Neue', sans-serif; text-transform: uppercase; color: var(--pearl); letter-spacing: 0.04em; font-size: 1rem; }
.ba-card .meta .meta-tag { font-size: 0.75rem; color: rgba(245,240,230,0.55); }

/* Procedure detail — the rich "what / how / recovery" block */
.proc-grid { display: grid; grid-template-columns: 5fr 7fr; gap: 4rem; align-items: start; }
.proc-side { position: sticky; top: 8rem; display: flex; flex-direction: column; gap: 1.25rem; }
.proc-side .fact-card { background: var(--deep); border: 1px solid rgba(212,168,83,0.18); border-radius: var(--r-lg); padding: 1.5rem; }
.proc-side .fact-card h4 { font-family: 'Bebas Neue', sans-serif; color: var(--gold); text-transform: uppercase; letter-spacing: 0.32em; font-size: 11px; margin-bottom: 1rem; font-weight: 400; }
.proc-side .fact-card .row { display: flex; justify-content: space-between; padding: 0.625rem 0; border-bottom: 1px solid rgba(212,168,83,0.1); font-size: 0.875rem; }
.proc-side .fact-card .row:last-child { border-bottom: none; }
.proc-side .fact-card .row .k { color: rgba(245,240,230,0.6); }
.proc-side .fact-card .row .v { color: var(--pearl); font-weight: 500; text-align: right; }
.proc-body h3 { font-family: 'Bebas Neue', sans-serif; text-transform: uppercase; color: var(--pearl); letter-spacing: 0.005em; font-size: 1.5rem; margin: 2.5rem 0 1rem; }
.proc-body h3:first-child { margin-top: 0; }
.proc-body p { color: rgba(245,240,230,0.82); font-size: 1.0625rem; line-height: 1.75; margin-bottom: 1.15rem; font-weight: 300; }
/* Subtle italic accent — no aggressive bold. Reads as a phrase elevation, not a tag-link. */
.proc-body p strong, .proc-body li strong { color: var(--gold-light); font-weight: 400; font-style: italic; letter-spacing: 0.005em; }
.proc-body ul { list-style: none; padding: 0; margin: 1.25rem 0; }
.proc-body ul li { padding: 0.75rem 0 0.75rem 1.5rem; border-bottom: 1px solid rgba(212,168,83,0.1); position: relative; font-size: 0.9375rem; color: rgba(245,240,230,0.85); line-height: 1.55; }
.proc-body ul li::before { content: '✦'; position: absolute; left: 0; color: var(--gold); font-size: 0.875rem; top: 0.875rem; }

/* Gallery filter rail */
.gal-filter { display: flex; gap: 0.5rem; flex-wrap: wrap; justify-content: center; margin: 0 auto 3rem; max-width: 64rem; }
.gal-filter button { background: rgba(212,168,83,0.05); border: 1px solid rgba(212,168,83,0.2); border-radius: var(--r-pill); padding: 0.625rem 1.25rem; color: rgba(245,240,230,0.8); font-family: 'Inter', sans-serif; font-weight: 500; font-size: 0.8125rem; cursor: pointer; transition: all 0.3s ease; }
.gal-filter button:hover { border-color: var(--gold); color: var(--gold); }
.gal-filter button.active { background: linear-gradient(135deg, #E8C97A 0%, #D4A853 50%, #B8933E 100%); color: var(--deeper); border-color: transparent; }

/* Global typography refinement — kill aggressive bold sitewide.
   Bold body copy reads tacky in luxury context. Replace with subtle italic + gold tint. */
p strong, li strong { color: var(--gold-light); font-weight: 400; font-style: italic; letter-spacing: 0.005em; }
p b { font-weight: 400; }

/* 18+ B&A age-gate modal — required compliance for surgical results imagery */
.age-gate {
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(14,0,31,0.92); backdrop-filter: blur(12px);
  display: none; align-items: center; justify-content: center; padding: 1.5rem;
}
.age-gate.show { display: flex; }
.age-gate .card {
  max-width: 32rem; width: 100%;
  background: linear-gradient(180deg, var(--deep) 0%, var(--deeper) 100%);
  border: 1px solid rgba(212,168,83,0.35); border-radius: var(--r-lg);
  padding: 2.5rem 2rem; text-align: center;
  box-shadow: 0 50px 100px -30px rgba(0,0,0,0.7), 0 0 0 1px rgba(212,168,83,0.12);
}
.age-gate .card .row { display: inline-flex; align-items: center; gap: 0.75rem; margin-bottom: 1.25rem; }
.age-gate .card h3 {
  font-family: 'Bebas Neue', sans-serif; text-transform: uppercase;
  color: var(--pearl); font-size: 1.75rem; line-height: 1.1; margin-bottom: 1rem;
  letter-spacing: 0.005em;
}
.age-gate .card p { color: rgba(245,240,230,0.78); font-size: 0.9375rem; line-height: 1.65; margin-bottom: 1.5rem; }
.age-gate .card .actions { display: flex; gap: 0.75rem; justify-content: center; flex-wrap: wrap; }
.age-gate .card .note { margin-top: 1.25rem; font-size: 0.75rem; color: rgba(245,240,230,0.5); }

/* Persistent B&A consent badge */
.consent-badge {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.4rem 0.875rem; margin: 0 auto 1.75rem;
  background: rgba(212,168,83,0.06);
  border: 1px solid rgba(212,168,83,0.22);
  border-radius: var(--r-pill);
  font-family: 'Inter', sans-serif; font-weight: 400;
  font-size: 0.75rem; color: rgba(245,240,230,0.75);
  letter-spacing: 0.02em;
}
.consent-badge .dot { width: 5px; height: 5px; border-radius: 50%; background: var(--gold); }

/* Ask Dr. Scottsdale slide-out chat panel */
.ask-panel {
  position: fixed; bottom: 5.5rem; left: 1.5rem; z-index: 45;
  width: 22rem; max-width: calc(100vw - 3rem);
  background: linear-gradient(180deg, var(--deep) 0%, var(--deeper) 100%);
  border: 1px solid rgba(212,168,83,0.3); border-radius: var(--r-lg);
  box-shadow: 0 30px 70px -20px rgba(0,0,0,0.7), 0 0 0 1px rgba(212,168,83,0.12);
  opacity: 0; transform: translateY(12px) scale(0.96); pointer-events: none;
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  overflow: hidden;
}
.ask-panel.show { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }
.ask-panel .head {
  padding: 1.125rem 1.25rem; border-bottom: 1px solid rgba(212,168,83,0.15);
  display: flex; align-items: center; gap: 0.875rem;
  background: radial-gradient(ellipse at 30% 0%, rgba(139,0,212,0.25) 0%, transparent 70%);
}
.ask-panel .head .who { flex: 1; }
.ask-panel .head .who .name { font-family: 'Italianno', cursive; color: var(--gold); font-size: 1.75rem; line-height: 1; }
.ask-panel .head .who .tag { font-family: 'Bebas Neue', sans-serif; font-size: 9px; letter-spacing: 0.32em; color: rgba(245,240,230,0.6); text-transform: uppercase; margin-top: 0.125rem; }
.ask-panel .head .close { background: transparent; border: 0; color: rgba(245,240,230,0.6); cursor: pointer; font-size: 1.25rem; line-height: 1; padding: 0.25rem; transition: color 0.3s ease; }
.ask-panel .head .close:hover { color: var(--gold); }
.ask-panel .body { padding: 1.25rem; color: rgba(245,240,230,0.82); font-size: 0.875rem; line-height: 1.6; }
.ask-panel .body .intro { color: rgba(245,240,230,0.7); margin-bottom: 1rem; }
.ask-panel .body .chip-row { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 1.25rem; }
.ask-panel .body .chip {
  padding: 0.4rem 0.75rem; background: rgba(212,168,83,0.06);
  border: 1px solid rgba(212,168,83,0.18); border-radius: var(--r-pill);
  font-size: 0.75rem; color: rgba(245,240,230,0.85); cursor: pointer;
  transition: all 0.3s ease;
}
.ask-panel .body .chip:hover { border-color: var(--gold); color: var(--gold); }
.ask-panel .body .cta-row {
  display: flex; flex-direction: column; gap: 0.625rem;
  padding-top: 1rem; border-top: 1px solid rgba(212,168,83,0.12);
}
.ask-panel .body .cta-row a { display: inline-block; text-align: center; }
.ask-panel .body .cta-row .gold-cta {
  padding: 0.75rem 1.25rem;
  background: linear-gradient(135deg, #E8C97A 0%, #D4A853 50%, #B8933E 100%);
  color: var(--deeper); font-weight: 500; font-size: 0.8125rem;
  letter-spacing: 0.02em; border-radius: var(--r-pill);
}
.ask-panel .body .cta-row .ghost-cta {
  padding: 0.75rem 1.25rem; border: 1px solid rgba(212,168,83,0.3);
  color: rgba(245,240,230,0.85); font-weight: 500; font-size: 0.8125rem;
  letter-spacing: 0.02em; border-radius: var(--r-pill);
}

/* ──────────────────────────────────────────────────────────────────
   Streaming chat panel — overrides default ask-panel for chat mode
   ────────────────────────────────────────────────────────────────── */
.ask-panel-chat { width: 24rem; max-height: 32rem; display: flex; flex-direction: column; }
.ask-panel-chat .chat-body { max-height: 22rem; overflow-y: auto; padding: 1rem; display: flex; flex-direction: column; gap: 0.75rem; }
.ask-panel-chat .msg { display: flex; }
.ask-panel-chat .msg-user { justify-content: flex-end; }
.ask-panel-chat .msg-assistant { justify-content: flex-start; }
.ask-panel-chat .bubble {
  max-width: 85%; padding: 0.625rem 0.875rem;
  border-radius: var(--r-md); font-size: 0.875rem; line-height: 1.5;
  white-space: pre-wrap; word-wrap: break-word;
}
.ask-panel-chat .msg-user .bubble {
  background: linear-gradient(135deg, rgba(212,168,83,0.18) 0%, rgba(212,168,83,0.08) 100%);
  border: 1px solid rgba(212,168,83,0.25); color: var(--pearl);
}
.ask-panel-chat .msg-assistant .bubble {
  background: rgba(255,255,255,0.04); border: 1px solid rgba(212,168,83,0.12); color: rgba(245,240,230,0.92);
}
.ask-panel-chat .bubble.thinking::after {
  content: '•••'; color: var(--gold); animation: pulse 1.4s infinite;
}
@keyframes pulse { 0%,100%{opacity:0.3;} 50%{opacity:1;} }
.ask-panel-chat .chip-row { padding: 0 0 0.5rem; display: flex; flex-wrap: wrap; gap: 0.4rem; }
.ask-panel-chat .chip {
  padding: 0.35rem 0.7rem; background: rgba(212,168,83,0.06);
  border: 1px solid rgba(212,168,83,0.18); border-radius: var(--r-pill);
  font-family: 'Inter', sans-serif; font-size: 0.7rem; color: rgba(245,240,230,0.85);
  cursor: pointer; transition: all 0.3s ease;
}
.ask-panel-chat .chip:hover { border-color: var(--gold); color: var(--gold); }
.ask-composer {
  display: flex; gap: 0.5rem; padding: 0.75rem 1rem; border-top: 1px solid rgba(212,168,83,0.15);
  background: rgba(14,0,31,0.5);
}
.ask-composer input {
  flex: 1; padding: 0.625rem 1rem; border-radius: var(--r-pill);
  background: rgba(255,255,255,0.04); border: 1px solid rgba(212,168,83,0.2);
  color: var(--pearl); font-family: 'Inter', sans-serif; font-size: 0.875rem;
  outline: none; transition: border-color 0.3s ease;
}
.ask-composer input:focus { border-color: var(--gold); }
.ask-composer button {
  width: 2.5rem; height: 2.5rem; border-radius: 50%; border: 0;
  background: linear-gradient(135deg, #E8C97A 0%, #D4A853 50%, #B8933E 100%);
  color: var(--deeper); display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: transform 0.3s ease;
}
.ask-composer button:hover { transform: translateY(-1px); }

/* ──────────────────────────────────────────────────────────────────
   Lead-capture widget — corner-pop panel (mirrors NRPS FloatingContactWidget)
   Anchored bottom-right next to the .fab-book pill; never takes over the page.
   On narrow viewports it scales to a near-full panel without locking scroll.
   ────────────────────────────────────────────────────────────────── */
.lead-modal {
  position: fixed;
  /* Sit just above the .fab-book pill (which lives at bottom: 1.5rem; right: 1.5rem
     and is ~2.75rem tall). Stack the panel on top of it with a 0.75rem gap. */
  bottom: calc(1.5rem + 2.75rem + 0.75rem);
  right: 1.5rem;
  z-index: 60;
  display: none;
  /* No backdrop, no flex centering — this is a floating panel, not a modal overlay. */
}
.lead-modal.show { display: block; animation: leadPopIn 0.3s cubic-bezier(0.16, 1, 0.3, 1); }
@keyframes leadPopIn { from { opacity: 0; transform: translateY(12px) scale(0.98); } to { opacity: 1; transform: translateY(0) scale(1); } }

/* v1.5 step-based widget — menu + per-action forms */
.lead-card-menu {
  position: relative;
  padding: 0;
  width: min(92vw, 380px);
  max-height: min(82vh, 640px);
  display: flex; flex-direction: column;
  overflow: hidden;
  background: linear-gradient(180deg, var(--deep) 0%, var(--deeper) 100%);
  border: 1px solid rgba(212,168,83,0.3); border-radius: var(--r-lg);
  box-shadow: 0 30px 80px -20px rgba(0,0,0,0.7), 0 0 0 1px rgba(212,168,83,0.06) inset;
}
.lead-card-menu .lead-close { position: absolute; top: 0.625rem; right: 0.75rem; z-index: 5; }
.lead-card-menu .lead-step { display: none; padding: 1.5rem 1.25rem 1.25rem; overflow-y: auto; }
.lead-card-menu .lead-step[data-active="true"] { display: block; animation: leadFadeIn 0.3s ease; }
@keyframes leadFadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
.lead-card-menu .lead-back {
  background: transparent; border: 0; color: var(--gold);
  font-family: 'Inter', sans-serif; font-weight: 500; font-size: 0.8125rem;
  cursor: pointer; padding: 0.25rem 0.5rem; margin: 0 0 0.625rem -0.5rem;
  letter-spacing: 0.02em; transition: color 0.3s ease;
}
.lead-card-menu .lead-back:hover { color: var(--gold-light); }

.lead-menu { display: flex; flex-direction: column; gap: 0.625rem; margin-top: 1.5rem; }
.lead-menu-row {
  display: flex; align-items: center; gap: 1rem;
  width: 100%; padding: 1rem 1.125rem; text-align: left;
  background: rgba(212,168,83,0.04); border: 1px solid rgba(212,168,83,0.18);
  border-radius: var(--r-md); color: var(--pearl);
  font-family: 'Inter', sans-serif; cursor: pointer;
  transition: all 0.3s ease; text-decoration: none;
}
.lead-menu-row:hover { border-color: rgba(212,168,83,0.45); background: rgba(212,168,83,0.08); transform: translateX(2px); }
.lead-menu-row.primary {
  background: linear-gradient(135deg, rgba(212,168,83,0.18) 0%, rgba(212,168,83,0.06) 100%);
  border-color: rgba(212,168,83,0.4);
}
.lead-menu-row .icon { flex: none; width: 2.5rem; height: 2.5rem; border-radius: 50%; background: rgba(212,168,83,0.12); display: flex; align-items: center; justify-content: center; color: var(--gold); }
.lead-menu-row .icon svg { width: 1.125rem; height: 1.125rem; }
.lead-menu-row .txt { flex: 1; display: flex; flex-direction: column; gap: 0.125rem; }
.lead-menu-row .label { font-weight: 500; font-size: 0.9375rem; color: var(--pearl); }
.lead-menu-row .sub { font-size: 0.75rem; color: rgba(245,240,230,0.62); }
.lead-menu-row .chev { color: var(--gold); font-size: 1.25rem; line-height: 1; opacity: 0.7; }

.lead-procedures { display: flex; flex-direction: column; gap: 0.5rem; margin-top: 1.25rem; }
.lead-proc-row {
  display: flex; flex-direction: column; gap: 0.125rem;
  width: 100%; padding: 0.875rem 1.125rem; text-align: left;
  background: rgba(212,168,83,0.04); border: 1px solid rgba(212,168,83,0.18);
  border-radius: var(--r-md); cursor: pointer;
  transition: all 0.3s ease;
}
.lead-proc-row:hover { border-color: var(--gold); background: rgba(212,168,83,0.1); }
.lead-proc-row .lead-proc-label { color: var(--pearl); font-weight: 500; font-size: 0.9375rem; }
.lead-proc-row .lead-proc-desc { color: rgba(245,240,230,0.62); font-size: 0.75rem; }

#iq-selected-proc em { color: var(--gold); font-style: normal; font-weight: 500; }
.lead-close {
  position: absolute; top: 0.625rem; right: 0.75rem; background: transparent; border: 0;
  color: rgba(245,240,230,0.6); font-size: 1.25rem; line-height: 1; cursor: pointer;
  width: 1.875rem; height: 1.875rem; transition: color 0.3s ease;
  display: inline-flex; align-items: center; justify-content: center;
}
.lead-close:hover { color: var(--gold); }
/* Compact left-aligned header for the corner panel (was center-aligned in the old modal). */
.lead-head { text-align: left; margin-bottom: 1rem; }
.lead-head .row { display: inline-flex; align-items: center; gap: 0.5rem; margin-bottom: 0.625rem; }
.lead-head h3 { font-family: 'Bebas Neue', sans-serif; text-transform: uppercase; color: var(--pearl); font-size: 1.25rem; line-height: 1.15; margin-bottom: 0.5rem; }
.lead-head p { color: rgba(245,240,230,0.75); font-size: 0.8125rem; line-height: 1.5; }
.lead-form label { display: block; margin-bottom: 0.875rem; font-family: 'Inter', sans-serif; font-size: 0.8125rem; color: rgba(245,240,230,0.8); font-weight: 500; }
.lead-form .row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }
.lead-form input, .lead-form textarea {
  width: 100%; padding: 0.625rem 0.875rem; margin-top: 0.3125rem;
  background: rgba(255,255,255,0.04); border: 1px solid rgba(212,168,83,0.2);
  border-radius: var(--r-sm); color: var(--pearl);
  font-family: 'Inter', sans-serif; font-size: 0.875rem;
  outline: none; transition: border-color 0.3s ease;
}
.lead-form input:focus, .lead-form textarea:focus { border-color: var(--gold); }
.lead-form textarea { resize: vertical; min-height: 4rem; }
.lead-actions { display: flex; gap: 0.75rem; margin-top: 1.25rem; flex-wrap: wrap; }
.lead-actions .btn-gold, .lead-actions .btn-ghost { flex: 1; min-width: 0; padding: 0.75rem 1rem; justify-content: center; }
.lead-submit { font-family: 'Inter', sans-serif; }
.lead-submit:disabled { opacity: 0.6; cursor: not-allowed; }
.lead-status { margin-top: 1rem; font-size: 0.8125rem; text-align: center; padding: 0.625rem; border-radius: var(--r-sm); }
.lead-status:empty { display: none; }
.lead-status-ok { background: rgba(60,180,90,0.1); color: #7dd896; border: 1px solid rgba(60,180,90,0.3); }
.lead-status-err { background: rgba(220,80,80,0.1); color: #f4a3a3; border: 1px solid rgba(220,80,80,0.3); }

/* ──────────────────────────────────────────────────────────────────
   Instant Quote (NRPS-parity) — multi-step flow inside the corner panel
   ────────────────────────────────────────────────────────────────── */

/* Step 1: Gender — 2-card grid */
.iq-gender-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.625rem; margin-top: 1rem; }
.iq-gender-card {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.625rem;
  padding: 1.25rem 0.75rem; aspect-ratio: 3/4;
  background: rgba(255,255,255,0.03); border: 1px solid rgba(212,168,83,0.18);
  border-radius: var(--r-md); color: rgba(245,240,230,0.7);
  font-family: 'Inter', sans-serif; font-size: 0.875rem; cursor: pointer;
  transition: all 0.25s ease;
}
.iq-gender-card:hover { border-color: rgba(212,168,83,0.45); color: var(--pearl); }
.iq-gender-card.active { border-color: var(--gold); background: rgba(212,168,83,0.1); color: var(--gold-light); }
.iq-gender-card svg { width: 1.75rem; height: 1.75rem; }

/* Step 2: Area — list of rows */
.iq-area-list { display: flex; flex-direction: column; gap: 0.4rem; margin-top: 1rem; }
.iq-area-row {
  display: flex; align-items: center; gap: 0.875rem; width: 100%;
  padding: 0.75rem 0.875rem; text-align: left;
  background: rgba(212,168,83,0.04); border: 1px solid rgba(212,168,83,0.16);
  border-radius: var(--r-md); cursor: pointer; transition: all 0.25s ease;
}
.iq-area-row:hover { border-color: rgba(212,168,83,0.45); background: rgba(212,168,83,0.08); }
.iq-area-row .iq-area-emoji { font-size: 1.375rem; flex: none; }
.iq-area-row .iq-area-text { flex: 1; display: flex; flex-direction: column; gap: 0.125rem; }
.iq-area-row .iq-area-label { color: var(--pearl); font-weight: 500; font-size: 0.9rem; }
.iq-area-row .iq-area-sub { color: rgba(245,240,230,0.55); font-size: 0.7rem; }
.iq-area-row .chev { color: var(--gold); font-size: 1.125rem; line-height: 1; opacity: 0.6; }

/* Step 3: Services — scrollable list + sticky footer */
.iq-services-scroll {
  display: flex; flex-direction: column; gap: 0.4rem;
  max-height: 28rem; overflow-y: auto;
  /* Negative-margin trick so the scrollable area touches the panel edges */
  margin: 0.5rem -1.25rem 0;
  padding: 0 1.25rem 0.5rem;
}
.iq-svc-row {
  background: rgba(255,255,255,0.03); border: 1px solid rgba(212,168,83,0.16);
  border-radius: var(--r-sm); transition: all 0.25s ease;
}
.iq-svc-row.on { border-color: var(--gold); background: rgba(212,168,83,0.08); }
.iq-svc-row:hover { border-color: rgba(212,168,83,0.4); }
.iq-svc-main {
  display: flex; align-items: flex-start; gap: 0.6rem; width: 100%;
  padding: 0.625rem 0.75rem; text-align: left; background: transparent;
  border: 0; cursor: pointer; color: inherit;
}
.iq-svc-check {
  flex: none; width: 1.125rem; height: 1.125rem; border-radius: 50%;
  border: 1.5px solid rgba(245,240,230,0.25); display: inline-flex;
  align-items: center; justify-content: center; font-size: 0.75rem;
  color: var(--deeper); margin-top: 0.125rem; transition: all 0.25s ease;
}
.iq-svc-check.on { background: var(--gold); border-color: var(--gold); }
.iq-svc-spacer { flex: none; width: 1.125rem; height: 1.125rem; margin-top: 0.125rem; }
.iq-svc-info { flex: 1; display: flex; flex-direction: column; gap: 0.0625rem; min-width: 0; }
.iq-svc-name { color: var(--pearl); font-weight: 500; font-size: 0.8125rem; line-height: 1.3; }
.iq-svc-blurb { color: rgba(245,240,230,0.55); font-size: 0.6875rem; line-height: 1.35; }
.iq-svc-price { color: var(--gold-light); font-size: 0.6875rem; font-weight: 500; margin-top: 0.125rem; }
.iq-svc-variant-label { color: var(--gold-light); font-weight: 500; }
.iq-svc-price-num { color: var(--gold-light); font-variant-numeric: tabular-nums; }
.iq-svc-chev { flex: none; color: rgba(245,240,230,0.4); transition: transform 0.25s ease; margin-top: 0.125rem; font-size: 0.75rem; }
.iq-svc-chev.open { transform: rotate(180deg); }
.iq-svc-remove {
  flex: none; width: 1.125rem; height: 1.125rem; border-radius: 50%;
  background: rgba(255,255,255,0.1); border: 0; color: rgba(245,240,230,0.7);
  font-size: 0.875rem; line-height: 1; cursor: pointer; margin-top: 0.125rem;
  transition: all 0.25s ease;
}
.iq-svc-remove:hover { background: rgba(255,255,255,0.18); color: var(--pearl); }
.iq-svc-variants {
  border-top: 1px solid rgba(212,168,83,0.12);
  padding: 0.5rem 0.75rem 0.625rem;
  display: flex; flex-direction: column; gap: 0.3rem;
}
.iq-svc-variants-head {
  color: rgba(245,240,230,0.5); font-family: 'Bebas Neue', sans-serif;
  text-transform: uppercase; letter-spacing: 0.18em; font-size: 0.625rem;
  padding-top: 0.25rem;
}
.iq-svc-variant {
  display: flex; align-items: center; gap: 0.625rem; width: 100%;
  padding: 0.5rem 0.625rem; text-align: left;
  background: rgba(255,255,255,0.02); border: 1px solid rgba(245,240,230,0.08);
  border-radius: var(--r-sm); cursor: pointer; transition: all 0.2s ease;
}
.iq-svc-variant:hover { border-color: rgba(212,168,83,0.4); background: rgba(255,255,255,0.05); }
.iq-svc-variant-dot {
  flex: none; width: 0.875rem; height: 0.875rem; border-radius: 50%;
  border: 1.5px solid rgba(245,240,230,0.25);
}
.iq-svc-variant-info { flex: 1; display: flex; flex-direction: column; gap: 0.0625rem; min-width: 0; }
.iq-svc-variant-lbl { color: var(--pearl); font-size: 0.75rem; font-weight: 500; }
.iq-svc-variant-px { color: var(--gold-light); font-size: 0.6875rem; font-variant-numeric: tabular-nums; }

.iq-services-footer {
  position: sticky; bottom: 0; left: 0; right: 0;
  margin: 0 -1.25rem -1.25rem;
  padding: 0.75rem 1.25rem 0.875rem;
  background: linear-gradient(180deg, rgba(14,0,31,0.6) 0%, var(--deeper) 50%);
  backdrop-filter: blur(8px);
  border-top: 1px solid rgba(212,168,83,0.12);
}
.iq-services-summary {
  display: flex; align-items: center; justify-content: space-between;
  gap: 0.75rem; margin-bottom: 0.5rem;
}
.iq-count {
  font-family: 'Bebas Neue', sans-serif; color: rgba(245,240,230,0.55);
  text-transform: uppercase; letter-spacing: 0.18em; font-size: 0.625rem;
}
.iq-range { color: var(--gold-light); font-size: 0.8125rem; font-weight: 500; font-variant-numeric: tabular-nums; }
.iq-continue {
  width: 100%; padding: 0.75rem 1rem; justify-content: center;
  font-family: 'Inter', sans-serif; font-weight: 500;
}
.iq-continue[disabled] { opacity: 0.4; cursor: not-allowed; }

.iq-empty { text-align: center; padding: 2rem 0.5rem; color: rgba(245,240,230,0.55); font-size: 0.8125rem; }

/* Step 4: Estimate — hero price card + line-item breakdown */
.iq-price-card {
  position: relative; overflow: hidden;
  background: linear-gradient(135deg, rgba(212,168,83,0.18) 0%, rgba(212,168,83,0.04) 100%);
  border: 1px solid rgba(212,168,83,0.4); border-radius: var(--r-md);
  padding: 1.125rem 1rem; margin-bottom: 0.875rem;
}
.iq-price-card::before {
  content: ''; position: absolute; top: -2.5rem; right: -2.5rem;
  width: 8rem; height: 8rem; background: rgba(212,168,83,0.12);
  border-radius: 50%; filter: blur(36px);
}
.iq-price-inner { position: relative; }
.iq-price-eyebrow { font-family: 'Bebas Neue', sans-serif; color: var(--gold); text-transform: uppercase; letter-spacing: 0.32em; font-size: 0.625rem; }
.iq-price-big { font-family: 'Bebas Neue', sans-serif; color: var(--pearl); font-size: 2rem; line-height: 1.05; margin-top: 0.5rem; font-variant-numeric: tabular-nums; }
.iq-price-max { color: var(--gold-light); }
.iq-price-monthly { font-size: 0.8125rem; color: rgba(245,240,230,0.8); margin-top: 0.625rem; }
.iq-price-monthly strong { color: var(--gold-light); font-weight: 500; }
.iq-price-fineprint { font-size: 0.625rem; color: rgba(245,240,230,0.4); margin-top: 0.25rem; }

.iq-breakdown {
  background: rgba(255,255,255,0.02); border: 1px solid rgba(212,168,83,0.16);
  border-radius: var(--r-md); padding: 0.75rem 0.875rem; margin-bottom: 0.75rem;
}
.iq-breakdown-head, .iq-includes-head {
  font-family: 'Bebas Neue', sans-serif; color: rgba(245,240,230,0.55);
  text-transform: uppercase; letter-spacing: 0.18em; font-size: 0.625rem;
  margin-bottom: 0.625rem;
}
.iq-bd-row { display: flex; justify-content: space-between; gap: 0.75rem; font-size: 0.8125rem; padding: 0.25rem 0; }
.iq-bd-name { flex: 1; min-width: 0; color: rgba(245,240,230,0.88); }
.iq-bd-variant { display: block; color: rgba(245,240,230,0.5); font-size: 0.6875rem; margin-top: 0.125rem; }
.iq-bd-price { color: rgba(245,240,230,0.6); font-size: 0.75rem; font-variant-numeric: tabular-nums; flex: none; }

.iq-includes {
  background: rgba(255,255,255,0.015); border: 1px solid rgba(245,240,230,0.06);
  border-radius: var(--r-md); padding: 0.75rem 0.875rem; margin-bottom: 1rem;
}
.iq-includes ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.25rem; }
.iq-includes li {
  position: relative; padding-left: 1.125rem; font-size: 0.75rem;
  color: rgba(245,240,230,0.72);
}
.iq-includes li::before {
  content: '✓'; position: absolute; left: 0; top: 0; color: var(--gold); font-size: 0.75rem; font-weight: 600;
}

/* Step 5: Contact — preferred-contact + best-time toggles */
.iq-pref-group { margin-top: 0.5rem; }
.iq-pref-label {
  display: block; font-family: 'Bebas Neue', sans-serif;
  color: rgba(245,240,230,0.55); text-transform: uppercase;
  letter-spacing: 0.18em; font-size: 0.625rem; margin-bottom: 0.4rem;
}
.iq-pref-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.35rem; }
.iq-pref-row.iq-pref-row-4 { grid-template-columns: repeat(4, 1fr); }
.iq-pref-row button {
  padding: 0.5rem 0.5rem; border-radius: var(--r-pill);
  background: rgba(255,255,255,0.03); border: 1px solid rgba(245,240,230,0.1);
  color: rgba(245,240,230,0.7); font-family: 'Inter', sans-serif;
  font-size: 0.6875rem; font-weight: 500; cursor: pointer;
  transition: all 0.2s ease; text-transform: capitalize;
}
.iq-pref-row button:hover { border-color: rgba(212,168,83,0.4); color: var(--pearl); }
.iq-pref-row button.active { border-color: var(--gold); background: rgba(212,168,83,0.12); color: var(--gold-light); }

.iq-fineprint { font-size: 0.625rem; color: rgba(245,240,230,0.4); text-align: center; line-height: 1.4; margin-top: 0.625rem; }

@media (max-width: 900px) {
  nav.top .links { display: none; }
  .ba-grid { grid-template-columns: 1fr; }
  .proc-grid { grid-template-columns: 1fr; }
  .proc-side { position: static; }
  footer .inner { grid-template-columns: 1fr; }
  .ask-panel-chat { width: calc(100vw - 3rem); }
  .lead-form .row-2 { grid-template-columns: 1fr; }
}

/* ────────────────────────────────────────────────────────────────────
   Homepage Ask Dr. Scottsdale — inline chat bubbles.
   Used by wireHomepageAskInline() in scripts.js. Mirrors NRPS
   HomepageAskDrMata visual language: user-right-aligned gold-edged
   bubbles, bot-left-aligned royal-purple bubbles, thinking pulse.
   ──────────────────────────────────────────────────────────────────── */
section.ask .chat .body .iq-msg {
  display: flex;
  width: 100%;
}
section.ask .chat .body .iq-msg-user { justify-content: flex-end; }
section.ask .chat .body .iq-msg-bot { justify-content: flex-start; }
section.ask .chat .body .iq-bubble {
  max-width: 85%;
  padding: 0.75rem 1rem;
  border-radius: var(--r-lg);
  font-size: 0.875rem;
  line-height: 1.55;
  word-wrap: break-word;
}
section.ask .chat .body .iq-msg-user .iq-bubble {
  background: linear-gradient(135deg, rgba(212,168,83,0.18) 0%, rgba(212,168,83,0.08) 100%);
  border: 1px solid rgba(212,168,83,0.32);
  color: var(--pearl);
  border-bottom-right-radius: 0.25rem;
}
section.ask .chat .body .iq-msg-bot .iq-bubble {
  background: rgba(61,0,102,0.32);
  border: 1px solid rgba(212,168,83,0.18);
  color: rgba(245,240,230,0.92);
  border-bottom-left-radius: 0.25rem;
}
@keyframes drScottsdalePulse {
  0%, 100% { opacity: 0.55; }
  50% { opacity: 1; }
}
section.ask .chat .body .iq-bubble.iq-thinking {
  animation: drScottsdalePulse 1.4s ease-in-out infinite;
  font-style: italic;
  color: rgba(212,168,83,0.7);
}

/* ────────────────────────────────────────────────────────────────────
   Mobile hamburger + drawer.
   Injected by wireMobileNav() in scripts.js. Hidden on desktop.
   ──────────────────────────────────────────────────────────────────── */
.nav-hamburger {
  display: none;
  background: transparent;
  border: 1px solid rgba(212,168,83,0.32);
  border-radius: var(--r-md);
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  cursor: pointer;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  z-index: 10001;
  margin-left: 0.5rem;
}
.nav-hamburger span {
  display: block;
  width: 1.125rem;
  height: 1.5px;
  background: var(--gold);
  border-radius: 1px;
  transition: transform 0.25s ease, opacity 0.25s ease;
}
.nav-hamburger.open span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
.nav-hamburger.open span:nth-child(2) { opacity: 0; }
.nav-hamburger.open span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }

.nav-drawer {
  position: fixed;
  inset: 0;
  background: rgba(14,0,31,0.96);
  backdrop-filter: blur(10px);
  z-index: 10000;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0s linear 0.3s;
  display: flex;
  align-items: flex-start; /* was center — locked scroll when content was taller than viewport */
  justify-content: center;
  overflow-y: auto;        /* allow drawer to scroll when Signatures expands */
  -webkit-overflow-scrolling: touch;
  padding: 4.5rem 0 2rem;  /* leave room above content so close button doesn't overlap viewport edge */
}
.nav-drawer.show {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.3s ease, visibility 0s linear 0s;
}
.nav-drawer-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  padding: 2rem;
  max-width: 22rem;
  width: 100%;
  position: relative;
}
.nav-drawer-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  background: transparent;
  border: 1px solid rgba(212,168,83,0.32);
  border-radius: 50%;
  width: 2.25rem;
  height: 2.25rem;
  color: var(--gold);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  padding: 0;
}
.nav-drawer-links {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  text-align: center;
  margin-bottom: 1.5rem;
}
.nav-drawer-links a {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1.5rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--pearl);
  padding: 0.875rem 1.5rem;
  transition: color 0.25s ease;
}
.nav-drawer-links a:hover, .nav-drawer-links a.active { color: var(--gold); }
.nav-drawer-cta {
  background: linear-gradient(135deg, var(--gold) 0%, var(--gold-light) 100%);
  color: var(--deeper);
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  padding: 1rem 2rem;
  border-radius: var(--r-pill);
  font-weight: 500;
  min-width: 14rem;
  text-align: center;
}
.nav-drawer-foot {
  margin-top: 2.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.375rem;
  color: rgba(245,240,230,0.6);
  font-size: 0.8125rem;
}
.nav-drawer-foot a {
  font-family: 'Bebas Neue', sans-serif;
  color: var(--gold);
  font-size: 1.125rem;
  letter-spacing: 0.16em;
}

@media (max-width: 900px) {
  .nav-hamburger { display: flex; }
  /* Tighten the top CTA on mobile so the nav row doesn't overflow. */
  nav.top .cta {
    padding: 0.625rem 1.125rem;
    font-size: 0.6875rem;
    letter-spacing: 0.16em;
  }
}

/* ════════════════════════════════════════════════════════════════════════
   v2.4 — Mobile fixes, Signatures dropdown, sitewide animations.
   Comprehensive QA/QC pass from Gunn's feedback:
     1. Mobile header: hamburger to far right, hide top CTA on mobile
     2. Mobile footer: center-align + readable
     3. Signatures dropdown (desktop hover + mobile expand)
     4. Sitewide animations (fade-up on scroll, hero stagger, button micro)
     5. Suppress fab-ask on homepage (body.no-fab-ask)
   ════════════════════════════════════════════════════════════════════════ */

/* ─── Hide fab-ask when body says so (homepage suppresses it) ──────────── */
body.no-fab-ask .fab-ask { display: none !important; }

/* ─── Desktop Signatures dropdown ──────────────────────────────────────── */
nav.top .has-dropdown { position: relative; }
nav.top .has-dropdown > a { display: inline-flex; align-items: center; gap: 0.25rem; }
nav.top .has-dropdown > a::after {
  content: '';
  width: 0; height: 0;
  border-left: 3px solid transparent;
  border-right: 3px solid transparent;
  border-top: 3.5px solid currentColor;
  opacity: 0.55;
  transition: transform 0.25s ease, opacity 0.25s ease;
}
nav.top .has-dropdown:hover > a::after,
nav.top .has-dropdown.open > a::after {
  transform: rotate(180deg);
  opacity: 1;
}
nav.top .dropdown-menu {
  position: absolute;
  top: calc(100% + 0.5rem);
  left: 50%;
  transform: translateX(-50%) translateY(-6px);
  min-width: 16rem;
  padding: 0.75rem;
  background: linear-gradient(180deg, var(--deep) 0%, var(--deeper) 100%);
  border: 1px solid rgba(212,168,83,0.32);
  border-radius: var(--r-md);
  box-shadow: 0 24px 60px -20px rgba(0,0,0,0.7), 0 0 0 1px rgba(212,168,83,0.05) inset;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease;
  z-index: 100;
  display: flex; flex-direction: column; gap: 0.125rem;
}
nav.top .has-dropdown:hover .dropdown-menu,
nav.top .has-dropdown.open .dropdown-menu {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
nav.top .dropdown-menu a {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.625rem 0.875rem;
  border-radius: var(--r-sm);
  color: rgba(245,240,230,0.85);
  font-family: 'Inter', sans-serif;
  font-weight: 300;
  font-size: 0.875rem;
  letter-spacing: 0;
  text-transform: none;
  transition: all 0.2s ease;
}
nav.top .dropdown-menu a:hover {
  background: rgba(212,168,83,0.08);
  color: var(--gold);
  padding-left: 1.125rem;
}
nav.top .dropdown-menu a .tm {
  font-size: 0.625rem;
  color: var(--gold);
  margin-left: 0.125rem;
  opacity: 0.85;
}
nav.top .dropdown-menu .dd-section {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 0.625rem;
  letter-spacing: 0.28em;
  color: rgba(212,168,83,0.5);
  text-transform: uppercase;
  padding: 0.5rem 0.875rem 0.25rem;
  pointer-events: none;
}
nav.top .dropdown-menu .dd-divider {
  height: 1px;
  margin: 0.375rem 0.625rem;
  background: linear-gradient(90deg, transparent, rgba(212,168,83,0.18), transparent);
}

/* ─── Mobile drawer Signatures expandable sub-list ─────────────────────── */
.nav-drawer-links .has-sub > button {
  background: transparent;
  border: none;
  color: var(--pearl);
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1.5rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 0.875rem 1.5rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  justify-content: center;
}
.nav-drawer-links .has-sub > button::after {
  content: '';
  width: 0; height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid var(--gold);
  transition: transform 0.25s ease;
}
.nav-drawer-links .has-sub.open > button::after { transform: rotate(180deg); }
.nav-drawer-links .has-sub .sub-list {
  display: none;
  flex-direction: column;
  gap: 0.125rem;
  padding: 0.5rem 0 0.25rem;
  border-left: 1px solid rgba(212,168,83,0.18);
  margin: 0.25rem auto 0.5rem;
  max-width: 16rem;
}
.nav-drawer-links .has-sub.open .sub-list { display: flex; }
.nav-drawer-links .has-sub .sub-list a {
  font-family: 'Inter', sans-serif;
  font-size: 0.875rem;
  font-weight: 300;
  letter-spacing: 0;
  text-transform: none;
  padding: 0.5rem 1rem;
  color: rgba(245,240,230,0.85);
}

/* ─── ANIMATIONS ───────────────────────────────────────────────────────── */
/* Fade-up on scroll — applied via Intersection Observer (data-anim attr).
   We respect prefers-reduced-motion so users with motion sensitivity see
   the final state immediately. */
@media (prefers-reduced-motion: no-preference) {
  [data-anim="fade-up"] {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.7s cubic-bezier(.16,.84,.36,1), transform 0.7s cubic-bezier(.16,.84,.36,1);
    will-change: opacity, transform;
  }
  [data-anim="fade-up"].in-view {
    opacity: 1;
    transform: translateY(0);
  }
  [data-anim="fade-up"][data-delay="100"] { transition-delay: 0.1s; }
  [data-anim="fade-up"][data-delay="200"] { transition-delay: 0.2s; }
  [data-anim="fade-up"][data-delay="300"] { transition-delay: 0.3s; }
  [data-anim="fade-up"][data-delay="400"] { transition-delay: 0.4s; }
  [data-anim="fade-up"][data-delay="500"] { transition-delay: 0.5s; }

  /* Gold-bar draw-in: the eyebrow rules across the site */
  [data-anim="gold-bar"] .gold-bar,
  [data-anim="gold-bar"] {
    transform-origin: left center;
    transform: scaleX(0);
    transition: transform 0.8s cubic-bezier(.65,0,.35,1) 0.2s;
  }
  [data-anim="gold-bar"].in-view .gold-bar,
  [data-anim="gold-bar"].in-view {
    transform: scaleX(1);
  }

  /* Hero portrait subtle float — feels alive but not jarring */
  section.hero .portrait-wrap img {
    animation: drScHeroFloat 8s ease-in-out infinite;
  }
  @keyframes drScHeroFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
  }

  /* Button micro-interactions — lift + glow on hover */
  .cta, .fab-book, section.hero .row .cta, a.cta {
    transition: transform 0.3s cubic-bezier(.16,.84,.36,1),
                box-shadow 0.3s cubic-bezier(.16,.84,.36,1),
                filter 0.3s ease;
  }
  .cta:hover, .fab-book:hover, section.hero .row .cta:hover, a.cta:hover {
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 14px 38px -8px rgba(212,168,83,0.6), 0 0 0 1px rgba(255,255,255,0.08) inset;
    filter: brightness(1.08);
  }
  .cta:active, a.cta:active { transform: translateY(0) scale(0.99); }

  /* Card lifts on hover (signature cards, procedure cards, etc.) */
  .sig-card, .proc-card, .testimonial, .home-card, .video-card, .press-card {
    transition: transform 0.4s cubic-bezier(.16,.84,.36,1),
                border-color 0.4s ease,
                box-shadow 0.4s ease;
  }
  .sig-card:hover, .proc-card:hover, .home-card:hover, .video-card:hover, .press-card:hover {
    transform: translateY(-4px);
    border-color: rgba(212,168,83,0.45);
    box-shadow: 0 22px 50px -18px rgba(0,0,0,0.6);
  }

  /* Smooth-scroll for anchors */
  html { scroll-behavior: smooth; }
}

/* ════════════════════════════════════════════════════════════════════════
   MOBILE FIXES — @media (max-width: 900px) overrides
   ════════════════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  /* HEADER: hamburger to far right, hide top CTA (drawer + bottom CTA cover it) */
  nav.top .row {
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
  }
  nav.top .brand { flex: 1 1 auto; min-width: 0; }
  nav.top .brand .word { font-size: 1.75rem; }
  nav.top .brand .tag { font-size: 8.5px; letter-spacing: 0.2em; }
  nav.top .cta {
    display: none; /* drawer cta + bottom fab-book cover this */
  }
  nav.top .nav-hamburger {
    margin-left: auto;
    flex-shrink: 0;
  }

  /* DESKTOP DROPDOWN: hide on mobile (drawer has its own sub-list) */
  nav.top .dropdown-menu { display: none; }

  /* FOOTER: center-align everything */
  footer .inner {
    text-align: center;
    grid-template-columns: 1fr;
    gap: 2.25rem;
    padding: 3rem 1.25rem;
  }
  footer .brand-script { text-align: center; }
  footer .desc { max-width: none; text-align: center; margin: 0 auto; }
  footer .socials { justify-content: center; }
  footer .addr { text-align: center; }
  footer .phone { margin-left: auto; margin-right: auto; }
  footer h4 { text-align: center; }
  footer ul { padding: 0; }
  footer ul li { text-align: center; }
  footer .bottom {
    text-align: center;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 1.5rem 1.25rem;
  }
  footer .bottom .legal { justify-content: center; flex-wrap: wrap; }

  /* Floating FABs: tighten spacing on mobile so they don't dominate */
  .fab-ask, .fab-book {
    padding: 0.625rem 1rem;
    font-size: 0.75rem;
    bottom: 1rem;
  }
  .fab-ask { left: 0.875rem; }
  .fab-book { right: 0.875rem; }
}