/* ---------- Tokens ---------- */
:root {
  --plum-900: #2A0E28;
  --plum-800: #3B1538;
  --plum-700: #4D1C49;
  --plum-600: #5C2454;
  --plum-500: #7A3870;
  --plum-300: #B186A8;
  --plum-100: #E8DBE4;
  --plum-50:  #F4ECF1;

  --cream:    #F6F1ED;
  --cream-2:  #EDE5DD;
  --bone:     #FBF8F5;
  --ink:      #1A0E18;
  --ink-2:    #4B3C46;
  --ink-3:    #7A6B74;

  --ok-green: #2E7D5B;   /* semantic success only — not a brand colour */

  --rule:     rgba(26,14,24,0.12);
  --rule-2:   rgba(246,241,237,0.18);

  --max:      1280px;
  --pad:      clamp(20px, 4vw, 56px);
  --r-s:      8px;
  --r-m:      16px;
  --r-l:      28px;

  --f-display: 'Instrument Serif', 'Cormorant Garamond', Georgia, serif;
  --f-body:    'Manrope', system-ui, -apple-system, sans-serif;
  --f-mono:    'JetBrains Mono', ui-monospace, Menlo, monospace;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--f-body);
  background: var(--cream);
  color: var(--ink);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: 0; background: none; color: inherit; }

.wrap {
  max-width: var(--max);
  margin: 0 auto;
  padding-left: var(--pad);
  padding-right: var(--pad);
}

/* ---------- Type ---------- */
h1, h2, h3, h4 {
  font-family: var(--f-display);
  font-weight: 400;
  letter-spacing: -0.01em;
  margin: 0;
  text-wrap: balance;
}
.eyebrow {
  font-family: var(--f-mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--plum-700);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.eyebrow::before {
  content: '';
  width: 28px;
  height: 1px;
  background: currentColor;
}
.eyebrow.no-rule::before { display: none; }

.lede { font-size: 18px; color: var(--ink-2); max-width: 56ch; text-wrap: pretty; }

/* ---------- Header ---------- */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  /* Above every page layer. The dropdowns render inside this stacking context,
     so raising the header raises them with it. */
  z-index: 200;
  padding: 16px 0;
  /* SOLID, always. This used to be transparent until JS added [data-scrolled],
     and nothing ever added it - so page text scrolled straight through the
     header on every page of the site. Never make this conditional again. */
  background: var(--bone);
  border-bottom: 1px solid var(--rule);
  transition: box-shadow 0.25s ease, padding 0.25s ease;
}
.site-header[data-scrolled] {
  box-shadow: 0 6px 20px -12px rgba(26,14,24,.28);
  padding: 12px 0;
}
.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.brand img { height: 38px; width: auto; }
.site-nav {
  display: flex;
  align-items: center;
  gap: 36px;
}
.site-nav a:not(.btn) {
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
  position: relative;
  padding: 6px 0;
}
.site-nav a:not(.btn):hover { color: var(--plum-700); }

.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 22px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.01em;
  white-space: nowrap;
  transition: transform 0.2s ease, background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn-primary {
  background: var(--plum-700);
  color: var(--bone);
}
.btn-primary:hover { background: var(--plum-800); }
.btn-ghost {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--ink);
}
.btn-ghost:hover { background: var(--ink); color: var(--bone); }
.btn-ghost-light {
  background: transparent;
  color: var(--bone);
  border: 1px solid rgba(251,248,245,0.4);
}
.btn-ghost-light:hover { background: var(--bone); color: var(--plum-800); border-color: var(--bone); }
.btn .arrow {
  width: 16px; height: 16px;
  display: inline-block;
  position: relative;
}
.btn .arrow::before {
  content: '';
  position: absolute; inset: 0;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M2 8h11M9 4l4 4-4 4' stroke='black' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>") center / contain no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M2 8h11M9 4l4 4-4 4' stroke='black' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>") center / contain no-repeat;
}

.nav-toggle { display: none; }

/* ---------- Hero (scroll-scrubbed video) ---------- */
.hero-scroll {
  position: relative;
  height: 104vh;
  background: var(--cream);
}
.hero-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  background: #FFFFFF;
}
.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 78% 50%;
}
.hero-overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(96deg, rgba(255,255,255,0.97) 0%, rgba(255,255,255,0.93) 32%, rgba(255,255,255,0.7) 52%, rgba(255,255,255,0.12) 74%, rgba(255,255,255,0) 100%),
    linear-gradient(180deg, rgba(255,255,255,0.85) 0%, rgba(255,255,255,0) 26%);
  pointer-events: none;
}
.hero-grain {
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.18 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  opacity: 0.18;
  mix-blend-mode: multiply;
  pointer-events: none;
}

.hero-content {
  position: relative;
  z-index: 2;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: clamp(16px, 3vh, 40px);
  padding: clamp(76px, 11vh, 132px) var(--pad) clamp(24px, 5vh, 60px);
  color: var(--ink);
  max-width: var(--max);
  margin: 0 auto;
  width: 100%;
}

.hero-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 24px;
}
.hero-eyebrow {
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--plum-700);
}
.hero-meta {
  text-align: right;
  font-family: var(--f-mono);
  font-size: clamp(13px, 1.05vw, 15px);
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ink-2);
  line-height: 1.75;
}

.hero-headline {
  font-family: var(--f-display);
  font-size: clamp(38px, 8.5vw, 124px);
  line-height: 0.94;
  letter-spacing: -0.02em;
  color: var(--plum-900);
  max-width: 14ch;
  margin: auto 0;
}
@media (max-height: 640px) {
  .hero-headline { font-size: clamp(34px, 6vh, 64px); }
  .hero-scroll-cue { display: none; }
}
.hero-headline em {
  font-style: italic;
  position: relative;
  display: inline-block;
  color: var(--bone);
  background: var(--plum-700);
  padding: 0 0.16em 0.04em;
  margin: 0 -0.04em;
  border-radius: 4px;
  text-shadow: none;
  box-shadow: 0 6px 24px rgba(20,6,18,0.35);
}

.hero-foot {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
}
.hero-sub {
  max-width: 46ch;
  font-size: clamp(16px, 1.35vw, 19px);
  line-height: 1.5;
  color: var(--ink-2);
  margin: 20px 0 0;
}
.hero-proof {
  margin: 16px 0 0;
  font-size: clamp(13px, 1.15vw, 17px);
  line-height: 1.5;
  color: var(--ink);
  font-weight: 500;
  max-width: none;
  white-space: nowrap;
}
.hero-proof .stars { margin: 0 4px 0 2px; position: relative; top: 1px; }
.hero-actions { display: grid; gap: 16px; }
.hero-price {
  margin: 0;
  font-size: 15.5px;
  line-height: 1.5;
  color: var(--ink-2);
  max-width: 56ch;
}
.hero-mid { margin: auto 0; }
.hero-meta a { text-decoration: none; font-weight: 500; color: var(--ink); }
.hero-meta a:hover { color: var(--plum-300); }
.hero-scroll-cue {
  text-align: center;
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-3);
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: center;
}
.hero-scroll-cue .line {
  width: 1px;
  height: 40px;
  background: linear-gradient(180deg, var(--plum-500), transparent);
  animation: cueLine 2.4s ease-in-out infinite;
}
@keyframes cueLine {
  0%, 100% { transform: scaleY(0.4); transform-origin: top; opacity: 0.4; }
  50% { transform: scaleY(1); opacity: 1; }
}
.hero-cta { display: flex; gap: 12px; flex-wrap: wrap; }

/* Caption track that fades in/out at scroll positions */
.hero-captions {
  position: absolute;
  left: var(--pad);
  bottom: 32%;
  z-index: 3;
  pointer-events: none;
  color: var(--bone);
}
.hero-cap {
  position: absolute;
  left: 0; top: 0;
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--plum-300);
  display: flex;
  align-items: center;
  gap: 10px;
}
.hero-cap::before { content: ''; width: 24px; height: 1px; background: currentColor; }

/* ---------- Section: Promise ---------- */
.section { padding: clamp(52px, 6vh, 92px) 0; }
.section-tight { padding: clamp(44px, 5vh, 78px) 0; }
/* The fixed header (~88px) sits over whichever section renders first in <main>.
   .cond-hero/.page-hero/.ev-hero already add +64px of top clearance for this;
   .section-tight never did, so on the 51 pages that open with a bare
   .section-tight (contact, treatments/symptoms index, FAQs, about, legal, every
   lifestyle article) the H1 rendered underneath the header. Scoped to main's
   first child only — section-tight is used 170+ more times mid-page, where it
   must NOT gain extra top padding. */
main > .section-tight:first-child { padding-top: calc(clamp(44px, 5vh, 78px) + 64px); }

.promise {
  background: var(--cream);
}
.promise-grid {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: clamp(40px, 6vw, 96px);
  align-items: start;
}
.promise h2 {
  font-size: clamp(40px, 6vw, 72px);
  line-height: 1;
  color: var(--ink);
}
.promise h2 em { color: var(--plum-700); font-style: italic; }
.promise-body p { color: var(--ink-2); font-size: 18px; line-height: 1.6; max-width: 56ch; }
.promise-video{position:relative;aspect-ratio:16/9;max-width:560px;border-radius:var(--r-l);overflow:hidden;background:var(--plum-900);box-shadow:0 18px 44px rgba(26,14,24,.14)}
.promise-video iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
.vid-sound{position:absolute;right:14px;bottom:14px;z-index:2;display:inline-flex;align-items:center;gap:9px;padding:9px 15px 9px 12px;border-radius:999px;background:rgba(26,14,24,.55);color:var(--bone);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:1px solid rgba(251,248,245,.28);font-family:var(--f-mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;transition:background .2s ease,border-color .2s ease}
.vid-sound:hover{background:var(--plum-800);border-color:rgba(251,248,245,.5)}
.vid-sound-icon{width:15px;height:15px;flex:none;background:currentColor;-webkit-mask:var(--icon-muted) center/contain no-repeat;mask:var(--icon-muted) center/contain no-repeat}
.vid-sound[aria-pressed="true"] .vid-sound-icon{-webkit-mask-image:var(--icon-sound);mask-image:var(--icon-sound)}
:root{--icon-muted:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M11 5 6 9H2v6h4l5 4z'/><path d='m23 9-6 6M17 9l6 6'/></svg>");--icon-sound:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M11 5 6 9H2v6h4l5 4z'/><path d='M15.5 8.5a5 5 0 0 1 0 7M19 5a10 10 0 0 1 0 14'/></svg>")}
.promise-stats {
  margin-top: 32px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  border-top: 1px solid var(--rule);
  padding-top: 32px;
}
.stat-num {
  font-family: var(--f-display);
  font-size: 56px;
  line-height: 1;
  color: var(--plum-700);
  letter-spacing: -0.02em;
}
.stat-lbl {
  font-family: var(--f-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--ink-3);
  margin-top: 8px;
}

/* ---------- Approach (4 steps) ---------- */
.approach { background: var(--plum-900); color: var(--bone); }
.approach-head {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: end;
  gap: 32px;
  margin-bottom: 56px;
}
.approach-head h2 {
  font-size: clamp(40px, 5.6vw, 72px);
  line-height: 1;
  color: var(--bone);
}
.approach-head h2 em { color: var(--plum-300); font-style: italic; }
.approach-head .lede { color: rgba(251,248,245,0.7); }

.steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-top: 1px solid var(--rule-2);
}
.step {
  padding: 36px 28px 40px 0;
  border-right: 1px solid var(--rule-2);
  position: relative;
  transition: background 0.3s ease;
}
.step:last-child { border-right: 0; }
.step:hover { background: rgba(255,255,255,0.02); }
.step-num {
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: 0.18em;
  color: var(--plum-300);
  margin-bottom: 24px;
}
.step h3 {
  font-family: var(--f-display);
  font-size: 32px;
  line-height: 1.05;
  color: var(--bone);
  margin-bottom: 14px;
}
.step p {
  font-size: 15px;
  color: rgba(251,248,245,0.65);
  line-height: 1.55;
  max-width: 28ch;
  margin: 0;
}

/* ---------- Services ---------- */
.services { background: var(--cream); }
.services-head {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  align-items: end;
  margin-bottom: 44px;
}
.services-head h2 {
  font-size: clamp(40px, 5.6vw, 72px);
  line-height: 1;
}
.services-head h2 em { color: var(--plum-700); font-style: italic; }

.svc-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--rule);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.svc {
  background: var(--cream);
  padding: 24px 26px 26px;
  position: relative;
  transition: background 0.3s ease, transform 0.3s ease;
  cursor: pointer;
}
.svc:hover { background: var(--plum-50); }
.svc-tag {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--plum-700);
  margin-bottom: 16px;
}
.svc h3 {
  font-family: var(--f-display);
  font-size: 26px;
  line-height: 1.1;
  margin-bottom: 12px;
}
.svc p {
  color: var(--ink-2);
  font-size: 14px;
  line-height: 1.55;
  margin: 0 0 18px;
  max-width: 32ch;
}
.svc-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--plum-700);
}
.svc-link::after {
  content: '→';
  transition: transform 0.2s ease;
}
.svc:hover .svc-link::after { transform: translateX(4px); }

/* ---------- Doctor / About ---------- */
.about { background: var(--cream-2); }
.about-grid {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: clamp(36px, 4.5vw, 72px);
  align-items: start;
}
.doc-avatars{display:flex;gap:26px;margin-top:28px}
.doc-avatars figure{margin:0;display:flex;align-items:center;gap:11px}
.doc-avatars img{width:118px;height:118px;flex:none;border:2px solid var(--plum-700);border-radius:999px;object-fit:cover;object-position:50% 22%;background:var(--plum-100)}
.doc-avatars figcaption{font-family:var(--f-mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.about-film{margin:0}
.about-film figcaption{margin-top:14px;font-size:14px;line-height:1.55;color:var(--ink-2);max-width:52ch}
.yt-facade{position:relative;aspect-ratio:16/9;border-radius:var(--r-l);overflow:hidden;background:var(--plum-900);box-shadow:0 18px 44px rgba(26,14,24,.16)}
.yt-facade img,.yt-facade iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.yt-facade img{object-fit:cover;object-position:50% 28%}
.yt-facade::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(26,14,24,.15),rgba(26,14,24,.5));pointer-events:none;transition:opacity .25s ease}
.yt-facade[data-playing]::after{display:none}
.yt-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:2;display:inline-flex;align-items:center;gap:12px;padding:14px 24px 14px 20px;border-radius:999px;background:var(--bone);color:var(--plum-800);font-size:14px;font-weight:600;box-shadow:0 12px 34px rgba(26,14,24,.35);transition:transform .2s ease,background .2s ease}
.yt-play:hover{transform:translate(-50%,-50%) scale(1.04);background:#FFFFFF}
.yt-play-icon{width:16px;height:16px;background:currentColor;-webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M4 2.5v11l9-5.5z' fill='black'/></svg>") center/contain no-repeat;mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M4 2.5v11l9-5.5z' fill='black'/></svg>") center/contain no-repeat}
@media (max-width:960px){.doc-avatars{flex-wrap:wrap;gap:16px 26px}}
.portrait-tag { left: 12px; bottom: 12px; font-size: 10px; padding: 7px 12px; }
.about-portrait {
  margin: 0;
  aspect-ratio: 4/3;
  border-radius: var(--r-l);
  position: relative;
  overflow: hidden;
  background: var(--plum-100);
}
.about-portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 25%;
}
.portrait-tag {
  position: absolute;
  left: 20px;
  bottom: 20px;
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--plum-800);
  background: var(--bone);
  padding: 9px 16px;
  border-radius: 999px;
}

.about h2 {
  font-size: clamp(40px, 5.6vw, 64px);
  line-height: 1.05;
  margin-bottom: 24px;
}
.about h2 em { color: var(--plum-700); font-style: italic; }
.about p { color: var(--ink-2); font-size: 17px; max-width: 62ch; }
.creds {
  margin-top: 36px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px 32px;
  border-top: 1px solid var(--rule);
  padding-top: 28px;
}
.cred-lbl {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 6px;
}
.cred-val { font-family: var(--f-display); font-size: 22px; }
@media (min-width:1200px){.creds{grid-template-columns:repeat(4,1fr);gap:0 28px}.visit-info{grid-template-columns:1fr 1fr;gap:28px 36px}.visit h2{max-width:16ch}}

/* ---------- Testimonials ---------- */
.voices { background: var(--bone); }
.voices-head {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 32px;
  margin-bottom: 56px;
}
.voices-head h2 {
  font-size: clamp(40px, 5.6vw, 72px);
  line-height: 1;
  max-width: 14ch;
}
.voices-head h2 em { color: var(--plum-700); font-style: italic; }

.voices-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.quote {
  background: var(--cream);
  border-radius: var(--r-l);
  padding: 36px 32px;
  display: flex;
  flex-direction: column;
  gap: 32px;
  min-height: 320px;
}
.quote-mark {
  font-family: var(--f-display);
  font-size: 64px;
  line-height: 0.5;
  color: var(--plum-700);
  height: 32px;
}
.quote p {
  font-family: var(--f-display);
  font-size: 22px;
  line-height: 1.25;
  color: var(--ink);
  margin: 0;
  flex: 1;
}
.quote-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  border-top: 1px solid var(--rule);
  padding-top: 16px;
}
.quote-avatar {
  width: 40px; height: 40px;
  border-radius: 999px;
  background: var(--plum-100);
  display: grid;
  place-items: center;
  font-family: var(--f-display);
  font-size: 18px;
  color: var(--plum-700);
}
.quote-name { font-weight: 600; font-size: 14px; }
.quote-role {
  font-family: var(--f-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--ink-3);
  margin-top: 2px;
}

/* ---------- Visit / CTA ---------- */
.visit { background: var(--plum-800); color: var(--bone); position: relative; overflow: hidden; }
.visit::before {
  content: '';
  position: absolute;
  inset: -20% -20% auto auto;
  width: 60vw; height: 60vw;
  background: radial-gradient(circle, var(--plum-600) 0%, transparent 60%);
  opacity: 0.5;
  pointer-events: none;
}
.visit-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: clamp(40px, 6vw, 96px);
  align-items: end;
  position: relative;
  z-index: 1;
}
.visit h2 {
  font-size: clamp(56px, 8vw, 120px);
  line-height: 0.92;
  letter-spacing: -0.02em;
  color: var(--bone);
}
.visit h2 em { color: var(--plum-300); font-style: italic; }
.visit-info { display: grid; gap: 28px; }
.visit-block .lbl {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--plum-300);
  margin-bottom: 8px;
}
.visit-block .val {
  font-family: var(--f-display);
  font-size: 22px;
  line-height: 1.3;
  color: var(--bone);
}
.visit-cta {
  margin-top: 40px;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.visit-cta .btn-primary {
  background: var(--bone);
  color: var(--plum-800);
}
.visit-cta .btn-primary:hover { background: var(--plum-100); }

/* ---------- Footer ---------- */
.site-foot {
  background: var(--plum-900);
  color: var(--plum-100);
  padding: 64px 0 40px;
  border-top: 1px solid var(--rule-2);
}
.foot-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 48px;
  margin-bottom: 64px;
}
.foot-brand img { height: 36px; filter: brightness(0) invert(1) opacity(0.92); }
.foot-brand p { color: rgba(251,248,245,0.55); font-size: 14px; max-width: 28ch; margin-top: 16px; }
.foot-col h4 {
  font-family: var(--f-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: rgba(251,248,245,0.55);
  margin-bottom: 16px;
  font-weight: 500;
}
.foot-col ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.foot-col a { font-size: 14px; color: var(--bone); }
.foot-col a:hover { color: var(--plum-300); }
.foot-bot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid var(--rule-2);
  padding-top: 24px;
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(251,248,245,0.5);
}

/* ---------- Reveal ---------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.9s cubic-bezier(0.2,0.7,0.2,1), transform 0.9s cubic-bezier(0.2,0.7,0.2,1);
}
[data-reveal][data-revealed] {
  opacity: 1;
  transform: none;
}

.voices-disclaimer{margin:32px 0 0;font-family:var(--f-mono);font-size:10px;letter-spacing:.1em;color:var(--ink-3)}

/* ============ INSTAGRAM — UNUSED ============ */
/* NOTHING USES THESE RULES. The mid-page Instagram section was removed from index.html on
   2026-08-26 so the site carries one Instagram mention per page, in the footer (.foot-ig).
   Kept, like .has-photo above, because it is a complete working treatment and restoring the
   section is then a markup-only change. Delete both this block and the matching site.js block
   if the section is not coming back.

   Card-first, embed-second. Instagram serves logged-out post embeds intermittently — a failed
   one comes back a ~2px empty iframe — so site.js only reveals an embed that measured up, and
   otherwise leaves the branded card in place. The card is the design, not a placeholder. */
.ig-head{display:flex;justify-content:space-between;align-items:flex-end;gap:32px;margin-bottom:48px;flex-wrap:wrap}
.ig-head h2{font-size:clamp(40px,5.6vw,72px);line-height:1}
.ig-head h2 em{color:var(--plum-700);font-style:italic}
.ig-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;align-items:start}
.ig-item{min-width:0}

.ig-card{display:flex;flex-direction:column;gap:10px;aspect-ratio:1/1;padding:26px;border:1px solid var(--rule);border-radius:var(--r-l);background:var(--cream);color:var(--ink);text-decoration:none;transition:border-color .18s ease,box-shadow .18s ease,transform .18s ease}
.ig-card:hover{border-color:var(--plum-300);box-shadow:0 18px 44px rgba(26,14,24,.10);transform:translateY(-2px)}
.ig-glyph{width:34px;height:34px;border-radius:10px;border:2px solid var(--plum-700);position:relative;flex:0 0 auto}
.ig-glyph::before{content:'';position:absolute;inset:7px;border:2px solid var(--plum-700);border-radius:999px}
.ig-glyph::after{content:'';position:absolute;top:5px;right:5px;width:3px;height:3px;border-radius:999px;background:var(--plum-700)}
.ig-card strong{font-family:var(--f-display);font-size:clamp(22px,1.7vw,28px);font-weight:400;line-height:1.15;margin-top:6px}
.ig-kind{font-family:var(--f-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.ig-go{margin-top:auto;font-size:14px;font-weight:500;color:var(--plum-700);display:inline-flex;align-items:center;gap:8px}

/* embed.js writes inline width/min-width onto the blockquote and then onto the iframe it swaps
   in, so both need overriding or the card refuses to share the grid column. */
.ig-item .instagram-media{display:none;width:100%!important;max-width:100%!important;margin:0!important;border:1px solid var(--rule)!important;border-radius:var(--r-l)!important;box-shadow:0 10px 30px rgba(26,14,24,.07)!important}
.ig-item[data-embed="ok"] .instagram-media{display:block}
.ig-item[data-embed="ok"] .ig-card{display:none}

@media (max-width:900px){
  /* three stacked cards bury the rest of the page — swipe instead */
  .ig-grid{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:14px;padding-bottom:10px;-webkit-overflow-scrolling:touch}
  .ig-item{flex:0 0 78%;scroll-snap-align:start}
  .ig-head{align-items:flex-start}
}

/* ---------- Google reviews ---------- */
.google{background:var(--bone)}
.g-card{background:var(--cream);border:1px solid var(--rule);border-radius:var(--r-l);padding:28px 26px 24px;display:flex;flex-direction:column;gap:18px}
.google-head{display:flex;justify-content:space-between;align-items:flex-end;gap:32px;margin-bottom:48px;flex-wrap:wrap}
.google-head h2{font-size:clamp(40px,5.6vw,72px);line-height:1}
.google-head h2 em{color:var(--plum-700);font-style:italic}
.google-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;align-items:start}
.g-top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.g-mark{width:30px;height:30px;border-radius:999px;background:var(--plum-800);color:var(--bone);display:grid;place-items:center;font-family:var(--f-display);font-size:17px;line-height:1}
.g-stars{color:var(--plum-600);font-size:15px;letter-spacing:.14em}
.g-card>p{margin:0;font-size:15px;line-height:1.55;color:var(--ink-2);flex:1;text-wrap:pretty}
.g-by{display:flex;align-items:center;gap:12px;border-top:1px solid var(--rule);padding-top:16px}
.g-avatar{width:36px;height:36px;flex:none;border-radius:999px;background:var(--plum-100);color:var(--plum-700);display:grid;place-items:center;font-family:var(--f-display);font-size:16px}
.g-by span:last-child{display:flex;flex-direction:column}
.g-by strong{font-size:14px;font-weight:600;color:var(--ink)}
.g-by em{font-style:normal;font-family:var(--f-mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);margin-top:3px}
.g-cta{background:var(--plum-800);color:var(--bone);border-radius:var(--r-l);padding:28px 26px;display:flex;flex-direction:column;gap:12px}
.g-cta h3{font-family:var(--f-display);font-size:28px;line-height:1.1;color:var(--bone)}
.g-cta p{margin:0;font-size:14px;line-height:1.55;color:rgba(251,248,245,.7)}
.g-links{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.g-links a{font-family:var(--f-mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--bone);border:1px solid rgba(251,248,245,.35);padding:8px 13px;border-radius:999px;transition:background .2s ease,color .2s ease}
.g-links a:hover{background:var(--bone);color:var(--plum-800)}

.stars-row{display:flex;align-items:center;gap:9px;margin:8px 0 0}.stars-row a{font-family:var(--f-mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--plum-700);text-decoration:underline;text-underline-offset:3px}
.stars{color:#F2A61C;font-size:15px;letter-spacing:.1em;line-height:1}

/* ---------- Condition pages ---------- */
.cond-hero{background:var(--cream);padding:calc(clamp(52px,6vh,92px) + 64px) 0 clamp(44px,5vh,72px)}
.cond-hero h1{font-size:clamp(38px,5.2vw,68px);line-height:1.02;max-width:16ch;color:var(--plum-900)}
.cond-hero h1 em{font-style:italic;color:var(--plum-700)}
.cond-lede{font-size:19px;line-height:1.55;color:var(--ink-2);max-width:60ch;margin:22px 0 0;text-wrap:pretty}
.cond-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
.cond-body{background:var(--bone)}
.cond-cols{display:grid;grid-template-columns:1fr;gap:clamp(28px,3vw,44px) clamp(40px,5vw,80px)}
@media (min-width:1000px){.cond-cols{grid-template-columns:1fr 1fr}}
.cond-block h2{font-size:clamp(26px,2.8vw,38px);line-height:1.08;margin-bottom:12px}
.cond-block h2 em{font-style:italic;color:var(--plum-700)}
.cond-block h3{font-family:var(--f-display);font-size:22px;line-height:1.2;margin:20px 0 8px}
.cond-block p{color:var(--ink-2);font-size:16.5px;line-height:1.62;margin:0 0 14px;max-width:62ch;text-wrap:pretty}
.cond-block ul{margin:0 0 14px;padding-left:20px;color:var(--ink-2);font-size:16.5px;line-height:1.62;max-width:62ch}
.cond-block li{margin-bottom:6px}
.cond-body a:not(.btn),.cond-hero a:not(.btn){color:var(--plum-700);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.cond-body a:not(.btn):hover,.cond-hero a:not(.btn):hover{color:var(--plum-500)}
.cond-band{background:var(--plum-800);color:var(--bone)}
.cond-band .wrap{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:24px}
.cond-band h2{font-size:clamp(28px,3.4vw,44px);line-height:1.05;color:var(--bone);max-width:20ch}
.cond-band h2 em{font-style:italic;color:var(--plum-300)}
.cond-band .btn-primary{background:var(--bone);color:var(--plum-800)}
.cond-band .btn-primary:hover{background:var(--plum-100)}

/* ---------- Footer map ---------- */
.foot-map{border-top:1px solid var(--rule-2);margin-bottom:28px;padding-top:28px;display:grid;grid-template-columns:1fr 1.4fr;gap:28px;align-items:center}
.foot-mapframe{position:relative;border:1px solid var(--rule-2);border-radius:var(--r-m);overflow:hidden;background:rgba(251,248,245,.05)}
.foot-map iframe{display:block;width:100%;height:230px;border:0;filter:grayscale(.28) contrast(1.02)}
.foot-mapopen{position:absolute;right:12px;bottom:12px;z-index:2;display:inline-flex;align-items:center;padding:9px 14px;border-radius:999px;background:var(--plum-800);color:var(--bone);font-family:var(--f-mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;text-decoration:none;box-shadow:0 6px 20px rgba(26,14,24,.35)}
.foot-mapopen:hover{background:var(--plum-700);color:var(--bone)}
.foot-mapcard{display:flex;align-items:center;gap:18px;padding:22px 24px;border:1px solid var(--rule-2);border-radius:var(--r-m);background:rgba(251,248,245,.05);transition:background .2s ease,border-color .2s ease}
.foot-mapcard:hover{background:rgba(251,248,245,.1);border-color:rgba(251,248,245,.4)}
.foot-mapcard-pin{width:30px;height:30px;flex:none;background:var(--plum-300);-webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 22s7-6.4 7-12a7 7 0 1 0-14 0c0 5.6 7 12 7 12z' fill='none' stroke='black' stroke-width='1.7'/><circle cx='12' cy='10' r='2.6' fill='none' stroke='black' stroke-width='1.7'/></svg>") center/contain no-repeat;mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 22s7-6.4 7-12a7 7 0 1 0-14 0c0 5.6 7 12 7 12z' fill='none' stroke='black' stroke-width='1.7'/><circle cx='12' cy='10' r='2.6' fill='none' stroke='black' stroke-width='1.7'/></svg>") center/contain no-repeat}
.foot-mapcard-txt{display:flex;flex-direction:column;gap:4px;font-size:14px;line-height:1.5;color:rgba(251,248,245,.62)}
.foot-mapcard-txt strong{font-family:var(--f-display);font-weight:400;font-size:21px;color:var(--bone)}
.foot-mapcard-txt em{font-style:normal;font-family:var(--f-mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--plum-300);margin-top:4px}
.foot-map .lbl{font-family:var(--f-mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:rgba(251,248,245,.55);margin-bottom:10px}
.foot-map .val{font-family:var(--f-display);font-size:21px;line-height:1.35;color:var(--bone)}
.foot-map a.dir{display:inline-flex;margin-top:14px}
@media (max-width:960px){.foot-map{grid-template-columns:1fr}}

/* ---------- footer Instagram strip ---------- */
/* Deliberately mirrors .foot-map's 1fr/1.4fr band so the two read as siblings stacked above the
   bottom bar. Tiles are 4/3, not square: square is the Instagram-native ratio but these carry
   text only, and at footer column width a square leaves a hollow band of dead space under the
   title. No Instagram embed.js runs down here — see the FOOT_IG block in site.js for why. */
.foot-ig{border-top:1px solid var(--rule-2);margin-bottom:28px;padding-top:28px;display:grid;grid-template-columns:1fr 1.4fr;gap:28px;align-items:center}
.foot-ig .lbl{font-family:var(--f-mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:rgba(251,248,245,.55);margin-bottom:10px}
.foot-ig .val{font-family:var(--f-display);font-size:21px;line-height:1.35;color:var(--bone)}
.foot-ig a.follow{display:inline-flex;margin-top:14px}
.foot-ig-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.foot-ig-card{display:flex;flex-direction:column;gap:8px;aspect-ratio:4/3;padding:18px;border:1px solid var(--rule-2);border-radius:var(--r-m);background:rgba(251,248,245,.05);color:var(--bone);text-decoration:none;transition:background .2s ease,border-color .2s ease,transform .2s ease}
.foot-ig-card:hover{background:rgba(251,248,245,.1);border-color:rgba(251,248,245,.4);color:var(--bone);transform:translateY(-2px)}
.foot-ig-glyph{width:26px;height:26px;border-radius:8px;border:2px solid var(--plum-300);position:relative;flex:0 0 auto}
.foot-ig-glyph::before{content:'';position:absolute;inset:5px;border:2px solid var(--plum-300);border-radius:999px}
.foot-ig-glyph::after{content:'';position:absolute;top:3px;right:3px;width:2.5px;height:2.5px;border-radius:999px;background:var(--plum-300)}
.foot-ig-card strong{font-family:var(--f-display);font-weight:400;font-size:clamp(17px,1.35vw,20px);line-height:1.2;margin-top:4px;text-wrap:pretty}
.foot-ig-card em{margin-top:auto;font-style:normal;font-family:var(--f-mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--plum-300)}
@media (max-width:960px){.foot-ig{grid-template-columns:1fr}}
/* three squares stacked would own the footer on a phone - swipe instead, same as .ig-grid */
@media (max-width:620px){
  .foot-ig-grid{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:12px;padding-bottom:8px;-webkit-overflow-scrolling:touch}
  .foot-ig-card{flex:0 0 62%;scroll-snap-align:start}
}

/* ---------- Services: compact list ---------- */
.svc-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--rule);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.svc-list li{background:var(--cream)}
.svc-list a{display:block;padding:18px 24px 18px 0;transition:background .2s ease}
.svc-list li:nth-child(even) a{padding-left:24px}
.svc-list a:hover{background:var(--plum-50)}
.svc-list h3{font-family:var(--f-display);font-size:24px;line-height:1.15;margin-bottom:4px}
.svc-list p{margin:0;font-size:14px;line-height:1.5;color:var(--ink-2);max-width:40ch}
@media (max-width:640px){.svc-list{grid-template-columns:1fr}.svc-list li:nth-child(even) a{padding-left:0}}

/* ---------- Accessibility ---------- */
:where(a,button,summary,input,[tabindex]):focus-visible{outline:2px solid var(--plum-600);outline-offset:3px;border-radius:4px}
.approach :focus-visible,.visit :focus-visible,.booking :focus-visible,.panel:focus{outline:none}
.skip-link{position:absolute;left:-9999px;top:0;z-index:200;background:var(--plum-800);color:var(--bone);padding:12px 20px;border-radius:0 0 12px 0;font-size:14px;font-weight:600}
.skip-link:focus{left:0}

/* ---------- Symptom router ---------- */
.router{background:var(--cream)}
.router-h{font-size:clamp(30px,3.4vw,44px);line-height:1.05}
.router-h em{color:var(--plum-700);font-style:italic}
.router-row{display:flex;flex-wrap:wrap;gap:10px;margin:26px 0 34px}
.router-btn{display:inline-flex;align-items:center;min-height:46px;padding:11px 20px;border:1px solid var(--rule);border-radius:999px;background:var(--bone);font-size:14px;font-weight:500;color:var(--ink);transition:background .2s ease,border-color .2s ease,color .2s ease}
.router-btn:hover{background:var(--plum-50);border-color:var(--plum-300)}
.router-btn[aria-current="true"]{background:var(--plum-700);border-color:var(--plum-700);color:var(--bone)}
.panels{border-top:1px solid var(--rule);padding-top:32px}
.panel{max-width:66ch}
.panel h3{font-family:var(--f-display);font-size:clamp(26px,2.6vw,36px);line-height:1.1;margin-bottom:14px}
.panel p{color:var(--ink-2);font-size:17px;line-height:1.6;margin:0 0 16px;text-wrap:pretty}
.panel a:not(.btn){color:var(--plum-700);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.panel a:not(.btn):hover{color:var(--plum-500)}
.panel-links{display:flex;flex-wrap:wrap;align-items:center;gap:14px 18px;margin-top:10px}
.panel-more{font-family:var(--f-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase}
@media (min-width:1200px){.panel[hidden]{display:none}.panel{max-width:none;display:grid;grid-template-columns:1fr 1fr;column-gap:clamp(40px,4vw,72px)}.panel h3,.panel .panel-links{grid-column:1 / -1}.panel p{max-width:52ch}}

/* ---------- First visit ---------- */
.first-visit{background:var(--plum-50)}
.fv-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(36px,5vw,80px);align-items:start}
.first-visit h2{font-size:clamp(36px,4.6vw,58px);line-height:1.02}
.first-visit h2 em{color:var(--plum-700);font-style:italic}
.fv-price{color:var(--ink-2);font-size:17px;line-height:1.6;max-width:44ch;margin:22px 0 0}
.fv-price strong{color:var(--plum-700);font-weight:700}
.fv-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
.fv-list{list-style:none;margin:0;padding:0;display:grid;gap:1px;background:var(--rule);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.fv-list li{display:flex;gap:20px;background:var(--bone);padding:15px 4px}
.fv-list span{font-family:var(--f-mono);font-size:11px;letter-spacing:.16em;color:var(--plum-500);padding-top:5px}
.fv-list h3{font-family:var(--f-display);font-size:24px;line-height:1.15;margin-bottom:4px}
.fv-list p{margin:0;font-size:14px;color:var(--ink-2);line-height:1.5;max-width:40ch}

/* ---------- Booking ---------- */
.booking{background:var(--plum-900);color:var(--bone)}
.bk-head{display:flex;justify-content:space-between;align-items:flex-end;gap:32px;flex-wrap:wrap;margin-bottom:36px}
.booking h2{font-size:clamp(38px,5vw,64px);line-height:1;color:var(--bone)}
.booking h2 em{color:var(--plum-300);font-style:italic}
.bk-trust{margin:0;font-family:var(--f-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--plum-300);max-width:34ch;line-height:1.8}
.bk-card{display:grid;grid-template-columns:1.35fr 1fr;gap:0;background:var(--bone);color:var(--ink);border-radius:var(--r-l);overflow:hidden}

/* ---------- FAQ / objections ---------- */
.faq{background:var(--cream-2)}
.faq-grid{display:grid;grid-template-columns:1fr 1.15fr;gap:clamp(36px,5vw,80px);align-items:start}
.faq h2{font-size:clamp(34px,4.4vw,54px);line-height:1.02}
.faq h2 em{color:var(--plum-700);font-style:italic}
.faq .lede a{color:var(--plum-700);text-decoration:underline;text-underline-offset:3px}
.faq-list{border-top:1px solid var(--rule)}
.faq-list details{border-bottom:1px solid var(--rule)}
.faq-list summary{list-style:none;cursor:pointer;padding:20px 40px 20px 0;font-family:var(--f-display);font-size:23px;line-height:1.2;position:relative}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary::after{content:'';position:absolute;right:6px;top:28px;width:12px;height:12px;background:currentColor;-webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><path d='M6 1v10M1 6h10' stroke='black' stroke-width='1.6' stroke-linecap='round'/></svg>") center/contain no-repeat;mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><path d='M6 1v10M1 6h10' stroke='black' stroke-width='1.6' stroke-linecap='round'/></svg>") center/contain no-repeat;color:var(--plum-700);transition:transform .2s ease}
.faq-list details[open] summary::after{transform:rotate(45deg)}
.faq-list details p{margin:0 0 22px;font-size:15px;line-height:1.6;color:var(--ink-2);max-width:56ch}
.faq-list details a{color:var(--plum-700);text-decoration:underline;text-underline-offset:3px}

/* ---------- Mobile action bar ---------- */
.mobile-bar{display:none}

/* ---------- AI chat ---------- */
.chat-root{position:fixed;right:clamp(16px,3vw,32px);bottom:clamp(16px,3vw,32px);z-index:80;display:flex;flex-direction:column;align-items:flex-end;gap:14px;font-family:var(--f-body)}
.chat-fab{display:inline-flex;align-items:center;gap:10px;background:var(--plum-700);color:var(--bone);padding:14px 22px;border-radius:999px;font-size:14px;font-weight:600;box-shadow:0 10px 34px rgba(26,14,24,0.28);transition:transform .2s ease,background .2s ease}
.chat-fab:hover{transform:translateY(-2px);background:var(--plum-800)}
.chat-fab-icon{width:18px;height:18px;background:currentColor;-webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M21 12a8 8 0 0 1-8 8H7l-4 3 1.2-4.2A8 8 0 1 1 21 12z' fill='none' stroke='black' stroke-width='1.8' stroke-linejoin='round'/></svg>") center/contain no-repeat;mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M21 12a8 8 0 0 1-8 8H7l-4 3 1.2-4.2A8 8 0 1 1 21 12z' fill='none' stroke='black' stroke-width='1.8' stroke-linejoin='round'/></svg>") center/contain no-repeat}
.chat-root.is-open .chat-fab{display:none}
.chat-panel{width:min(360px,calc(100vw - 32px));background:var(--bone);border-radius:var(--r-l);box-shadow:0 24px 60px rgba(26,14,24,0.28);overflow:hidden;display:flex;flex-direction:column}
.chat-panel[hidden]{display:none}
.chat-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:18px 20px;background:var(--plum-800);color:var(--bone)}
.chat-eyebrow{font-family:var(--f-mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--plum-300)}
.chat-title{font-family:var(--f-display);font-size:22px;line-height:1.2;margin-top:4px}
.chat-close{font-size:24px;line-height:1;color:var(--bone);opacity:.7;padding:0 4px}
.chat-close:hover{opacity:1}
.chat-log{padding:18px 20px;display:flex;flex-direction:column;gap:12px;max-height:min(46vh,340px);overflow-y:auto}
.chat-msg{font-size:14px;line-height:1.5;padding:11px 14px;border-radius:16px;max-width:88%;text-wrap:pretty}
.chat-bot{background:var(--plum-50);color:var(--ink);align-self:flex-start;border-bottom-left-radius:5px}
.chat-user{background:var(--plum-700);color:var(--bone);align-self:flex-end;border-bottom-right-radius:5px}
.chat-msg.is-thinking{color:var(--ink-3);letter-spacing:.2em}
.chat-chips{display:flex;flex-wrap:wrap;gap:8px;padding:0 20px 14px}
.chat-chips button{font-size:12px;color:var(--plum-700);border:1px solid var(--rule);background:var(--cream);padding:7px 13px;border-radius:999px;transition:background .2s ease}
.chat-chips button:hover{background:var(--plum-50)}
.chat-form{display:flex;gap:8px;padding:14px 20px;border-top:1px solid var(--rule)}
.chat-input{flex:1;font:inherit;font-size:14px;border:1px solid var(--rule);background:var(--cream);border-radius:999px;padding:11px 16px;color:var(--ink)}
.chat-input:focus{outline:none;border-color:var(--plum-500)}
.chat-send{width:42px;height:42px;flex:none;border-radius:999px;background:var(--plum-700);color:var(--bone);font-size:17px;transition:background .2s ease}
.chat-send:hover{background:var(--plum-800)}
.chat-fine{margin:0;padding:0 20px 16px;font-family:var(--f-mono);font-size:10px;letter-spacing:.08em;color:var(--ink-3)}
.chat-card{background:var(--plum-800);color:var(--bone);border-radius:16px;padding:14px 16px;align-self:stretch}
.chat-card-head{font-family:var(--f-mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--plum-300);margin-bottom:10px}
.chat-card-rows{margin:0;display:grid;gap:6px}
.chat-card-rows>div{display:flex;gap:10px;font-size:13px}
.chat-card-rows dt{flex:0 0 52px;color:rgba(251,248,245,.6);font-family:var(--f-mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;padding-top:2px}
.chat-card-rows dd{margin:0;flex:1;word-break:break-word}

/* ---------- Responsive ---------- */
@media (max-width: 960px) {
  .promise-grid,
  .approach-head,
  .services-head,
  .about-grid,
  .voices-head,
  .visit-grid { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr 1fr; }
  .step { border-right: 0; border-bottom: 1px solid var(--rule-2); padding-right: 0; }
  .step:nth-child(odd) { border-right: 1px solid var(--rule-2); padding-right: 24px; }
  .svc-grid { grid-template-columns: 1fr 1fr; }
  .google-grid { grid-template-columns: 1fr 1fr; }
  .google-head { align-items: flex-start; }
  .fv-grid, .faq-grid, .bk-card { grid-template-columns: 1fr; }
  .voices-grid { grid-template-columns: 1fr; }
  .foot-grid { grid-template-columns: 1fr 1fr; }
  .hero-foot { grid-template-columns: 1fr; gap: 24px; }
  .hero-cta { justify-self: start; }
  .hero-scroll-cue { display: none; }
  .hero-scroll { height: 150vh; }
}
/* The horizontal nav (logo + 6 items + CTA) needs ~1024px of room; the drawer trigger below used
   to only kick in at 640px, so 641-1023px (iPad portrait and landscape included) got a header with
   nowhere to put anything — the logo crushed to a blob or pushed off-screen, the CTA cut off on
   the right. Moved to 1024px, matched by wide() in site.js and by the .nav-drop-menu accordion
   collapse further down, which must switch to single-column at the same width or the two go out
   of sync. */
@media (max-width: 1024px) {
  .site-nav {
    position: fixed;
    inset: 0 0 0 30%;
    background: var(--cream);
    flex-direction: column;
    align-items: flex-start;
    padding: 100px 32px;
    transform: translateX(100%);
    transition: transform 0.35s cubic-bezier(0.7,0,0.2,1);
    box-shadow: -10px 0 40px rgba(0,0,0,0.15);
    z-index: 60;
  }
  .site-nav[data-open] { transform: none; }
        .site-nav .btn { margin-top: 16px; }
  .nav-toggle {
    display: inline-flex;
    width: 40px; height: 40px;
    align-items: center;
    justify-content: center;
    z-index: 70;
  }
  .nav-toggle .bar {
    width: 22px; height: 1.5px;
    background: var(--ink);
    position: relative;
  }
  .nav-toggle .bar::before, .nav-toggle .bar::after {
    content: '';
    position: absolute; left: 0;
    width: 22px; height: 1.5px;
    background: var(--ink);
  }
  .nav-toggle .bar::before { top: -7px; }
  .nav-toggle .bar::after { top: 7px; }
}
@media (max-width: 640px) {
  .svc-grid { grid-template-columns: 1fr; }
  .promise-stats { grid-template-columns: 1fr; }
  .creds { grid-template-columns: 1fr; }
  .foot-grid { grid-template-columns: 1fr; gap: 32px; }
  .foot-bot { flex-direction: column; gap: 12px; align-items: flex-start; }
  .hero-headline { font-size: clamp(44px, 12vw, 76px); }
  .hero-proof { font-size: 12.5px; }
  .hero-top { flex-direction: column; }
  .hero-meta { text-align: left; }
  .google-grid { grid-template-columns: 1fr; }
  .router-row { gap: 8px; }
  .fv-list li { flex-direction: column; gap: 6px; }
  .mobile-bar {
    display: flex;
    position: fixed;
    left: 12px; right: 12px; bottom: 12px;
    z-index: 70;
    gap: 10px;
    align-items: center;
  }
  .mobile-bar .btn { flex: 1; justify-content: center; min-height: 50px; box-shadow: 0 10px 30px rgba(26,14,24,0.3); }
  .mb-call {
    width: 50px; height: 50px; flex: none;
    border-radius: 999px;
    background: var(--bone);
    border: 1px solid var(--rule);
    display: grid; place-items: center;
    box-shadow: 0 10px 30px rgba(26,14,24,0.22);
  }
  .mb-call-icon {
    width: 20px; height: 20px;
    background: var(--plum-700);
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3.1 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2.1 4.2 2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7c.1 1 .4 1.9.7 2.8a2 2 0 0 1-.5 2.1L8.1 9.9a16 16 0 0 0 6 6l1.3-1.2a2 2 0 0 1 2.1-.5c.9.3 1.8.6 2.8.7a2 2 0 0 1 1.7 2z' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/contain no-repeat;
            mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3.1 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2.1 4.2 2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7c.1 1 .4 1.9.7 2.8a2 2 0 0 1-.5 2.1L8.1 9.9a16 16 0 0 0 6 6l1.3-1.2a2 2 0 0 1 2.1-.5c.9.3 1.8.6 2.8.7a2 2 0 0 1 1.7 2z' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/contain no-repeat;
  }
  .chat-root { bottom: 82px; }
  .site-nav .btn { white-space: normal; }
}

/* ---------- Booking embed slot ---------- */
.bk-card-embed{display:block;padding:8px;border:1px solid var(--rule);border-radius:var(--r-l);box-shadow:0 18px 44px rgba(26,14,24,.16)}
.bk-embed-lead{margin:0 0 clamp(18px,2vw,24px);padding-bottom:clamp(16px,1.8vw,22px);border-bottom:1px solid var(--rule);font-family:var(--f-body);font-size:16px;line-height:1.6;color:var(--ink-2);max-width:62ch}
.bk-embed-lead strong{font-weight:600;color:var(--plum-700)}

/* ---------- Aloha (ReviewWave) booking widget ---------- */
/* Replaced the GHL calendar iframe on 2026-08-27. Aloha renders real DOM into .rw-embed instead of
   an iframe, so everything past the container rule is a skin over the vendor's own markup. Stock
   accent is amber (#face19 / #f4a822) and it fights the plum badly; the four places it appears are
   the step chips, the active day, and the two button classes. Vendor class names - re-check after
   any Aloha update. */
.rw-embed{position:relative;min-height:520px;border:1px dashed rgba(122,56,112,.4);border-radius:var(--r-m);background:repeating-linear-gradient(135deg,rgba(232,219,228,.5) 0 12px,rgba(244,236,241,.5) 12px 24px)}
.rw-embed:not(.is-live)::before{content:attr(data-slot);position:absolute;inset:0;display:grid;place-items:center;text-align:center;padding:24px;font-family:var(--f-mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--plum-500)}
.rw-embed.is-live{border:0;background:none;min-height:0;overflow:visible;padding:clamp(8px,1.4vw,18px)}
.rw-embed-fallback{margin:0;padding:28px;text-align:center;font-size:15px;line-height:1.6;color:var(--ink-2)}
.rw-embed-fallback a{color:var(--plum-700);text-decoration:underline;text-underline-offset:3px}

.rw-embed .rw-embed-wrap,.rw-embed .rw-embed-wrap input,.rw-embed .rw-embed-wrap button,.rw-embed .rw-embed-wrap textarea{font-family:var(--f-body)}
.rw-embed .rw-section-header{font-family:var(--f-display);font-weight:400;color:var(--ink)}
/* The widget sits inside section.booking, which paints its own text bone-on-plum. On the cream
   card that inheritance renders the vendor's headings near-white on near-white - "Choose a Time"
   was effectively invisible. Undo it for everything inside the embed. */
.rw-embed,.rw-embed .rw-embed-wrap{color:var(--ink)}
.rw-embed h1,.rw-embed h2,.rw-embed h3,.rw-embed h4,.rw-embed .instructions{color:var(--ink)!important;font-family:var(--f-display);font-weight:400;font-size:clamp(20px,2.2vw,26px);line-height:1.2}
.rw-embed h2 em,.rw-embed .instructions em{color:var(--plum-700)!important}
.rw-embed label,.rw-embed .rw-dow{color:var(--ink-2)!important}

.rw-embed .rw-header-progress{border-radius:var(--r-m);overflow:hidden}
.rw-embed .rw-header-progress-active{background-image:linear-gradient(to right,var(--plum-700),var(--plum-800))!important;color:var(--bone)!important}
.rw-embed .rw-header-progress-active .rw-header-progress-number,.rw-embed .rw-header-progress-active .rw-header-progress-title{color:var(--bone)!important}
.rw-embed .rw-header-progress-inactive{background:var(--cream-2)!important;color:var(--ink-3)!important}

.rw-embed .rw-day{border-radius:14px!important;border:1px solid var(--rule)!important;background:var(--cream)!important;color:var(--ink)!important;transition:background .2s ease,border-color .2s ease,color .2s ease}
.rw-embed .rw-day:hover:not(.rw-disabled){border-color:var(--plum-300)!important}
.rw-embed .rw-day.active{background:var(--plum-700)!important;border-color:var(--plum-700)!important;color:var(--bone)!important}
.rw-embed .rw-day.active .rw-dow,.rw-embed .rw-day.active .rw-day-mo,.rw-embed .rw-day.active .rw-day-dom{color:var(--bone)!important}
.rw-embed .rw-day.rw-disabled{opacity:.38}

.rw-embed .rw-slot,.rw-embed .rw-sched-slot{border-radius:10px!important;border:1px solid var(--rule)!important;background:var(--cream)!important;color:var(--ink)!important;font-weight:500;min-height:46px;transition:background .2s ease,border-color .2s ease,color .2s ease}
.rw-embed .rw-slot:hover,.rw-embed .rw-sched-slot:hover{background:var(--plum-50)!important;border-color:var(--plum-300)!important}
.rw-embed .rw-slot.active,.rw-embed .rw-sched-slot.active{background:var(--plum-700)!important;border-color:var(--plum-700)!important;color:var(--bone)!important}

.rw-embed .rw-form-button,.rw-embed .rw-privacy-button,.rw-embed .rw-button{background:var(--plum-700)!important;background-image:none!important;color:var(--bone)!important;border:0!important;border-radius:999px!important;min-height:48px;font-weight:500;transition:background .2s ease}
.rw-embed .rw-form-button:hover,.rw-embed .rw-privacy-button:hover,.rw-embed .rw-button:hover{background:var(--plum-800)!important}
/* The Back control carries .rw-form-button too, but the vendor paints it solid black with a more
   specific !important rule, and reviewwave.css is injected at runtime so it wins any tie on load
   order. The id selector is what beats it. Kept solid plum rather than a ghost style because the
   arrow inside is a light glyph and would disappear on a pale background. */
#rw-booking .rw-section-back .rw-form-button{background:var(--plum-700)!important;color:var(--bone)!important;min-height:40px}
#rw-booking .rw-section-back .rw-form-button:hover{background:var(--plum-800)!important}

.rw-embed input[type=text],.rw-embed input[type=email],.rw-embed input[type=tel],.rw-embed input[type=date],.rw-embed textarea{font:inherit!important;font-size:15px!important;padding:12px 14px!important;border:1px solid var(--rule)!important;border-radius:10px!important;background:var(--bone)!important;color:var(--ink)!important;min-height:46px}
.rw-embed input:focus,.rw-embed textarea:focus{outline:none!important;border-color:var(--plum-500)!important;box-shadow:0 0 0 3px rgba(122,56,112,.18)!important}

/* "Add a Note (optional)" is hidden. It never blocks submission, and a free-text box on a booking
   form is friction for detail the intake form captures properly. Delete this one rule to restore. */
.rw-embed .rw-field:has(#rw-notes-field){display:none}

/* Vendor attribution stays visible - deliberately not hidden - only quietened. */
.rw-embed .rw-powered-by{opacity:.55;font-size:11px}

@media (max-width:620px){.rw-embed.is-live{padding:4px}}
.chat-fab{text-decoration:none}

/* ---------- Home: rotating patient story ---------- */
.vband{background:var(--cream)}
.vband-head{display:flex;justify-content:space-between;align-items:flex-end;gap:32px;flex-wrap:wrap;margin-bottom:30px}
.vband-head h2{font-size:clamp(36px,4.6vw,60px);line-height:1;margin-top:18px;color:var(--plum-900)}
.vband-head h2 em{font-style:italic;color:var(--plum-700)}
.vband-side{margin:0;max-width:36ch;font-size:16px;line-height:1.6;color:var(--ink-2)}
.vband-side a{display:inline-block;margin-top:10px;color:var(--plum-700);text-decoration:underline;text-underline-offset:3px}
.vband-side a:hover{color:var(--plum-500)}
.vband-frame{margin:0;position:relative;aspect-ratio:16/9;width:100%;overflow:hidden;background:var(--plum-900)}
.vband-frame video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.vband-cap{position:absolute;left:0;bottom:0;z-index:2;display:flex;flex-direction:column;gap:4px;padding:20px clamp(190px,20vw,240px) 20px 24px;color:var(--bone);background:linear-gradient(to top,rgba(26,14,24,.72),rgba(26,14,24,0));width:100%}
.vband-cap .who{font-family:var(--f-mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--plum-300)}
.vband-cap .what{font-family:var(--f-display);font-size:clamp(20px,2.4vw,30px);line-height:1.15}
.vband-drop{position:absolute;inset:0;display:grid;place-items:center;text-align:center;padding:28px;color:var(--plum-300);font-family:var(--f-mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;line-height:2}
.vband-note{margin:14px 0 0;font-size:13px;color:var(--ink-3)}
@media (max-width:760px){.vband-head{display:block}.vband-side{margin-top:18px}}

/* ---------- Interior pages: shared ---------- */
.page-hero{background:var(--cream);padding:calc(clamp(52px,6vh,92px) + 64px) 0 clamp(40px,4.5vh,66px)}
.page-hero h1{font-size:clamp(38px,5.2vw,68px);line-height:1.02;max-width:18ch;color:var(--plum-900)}
.page-hero h1 em{font-style:italic;color:var(--plum-700)}
.page-lede{font-size:19px;line-height:1.55;color:var(--ink-2);max-width:62ch;margin:22px 0 0;text-wrap:pretty}
.prose a:not(.btn){color:var(--plum-700);text-decoration:underline;text-underline-offset:3px}
.prose a:not(.btn):hover{color:var(--plum-500)}

/* ---------- Services hub ---------- */
.svc-detail{display:grid;gap:1px;background:var(--rule);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.services-page .wrap>.svc-detail{margin-inline:calc(var(--pad) * -1)}
.services-page .svc-detail article{padding-inline:var(--pad)}
.svc-detail article{background:var(--bone);display:grid;grid-template-columns:.8fr 1.4fr;gap:clamp(20px,4vw,56px);padding:clamp(24px,3vw,38px) 0}
.svc-detail h2{font-size:clamp(26px,3vw,38px);line-height:1.05;color:var(--plum-900);max-width:14ch}
.svc-detail h2 em{font-style:italic;color:var(--plum-700)}
.svc-detail p{margin:0 0 14px;font-size:16px;line-height:1.65;color:var(--ink-2);max-width:62ch}
.svc-detail .svc-helps{margin:0;font-family:var(--f-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);line-height:2}
.svc-num{font-family:var(--f-mono);font-size:11px;letter-spacing:.18em;color:var(--plum-500);display:block;margin-bottom:12px}
.tech-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:1px;background:var(--rule);border:1px solid var(--rule);margin-top:28px}
.tech-grid div{background:var(--bone);padding:22px 24px}
.tech-grid h3{font-family:var(--f-display);font-size:22px;line-height:1.15;margin-bottom:6px}
.tech-grid p{margin:0;font-size:14px;line-height:1.55;color:var(--ink-2)}
@media (max-width:820px){.svc-detail article{grid-template-columns:1fr;gap:16px}}

/* ---------- Doctor bio ---------- */
.doc-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(28px,5vw,72px);align-items:start}
.doc-portrait{margin:0}
.doc-portrait img{width:100%;height:auto;border-radius:var(--r-l);display:block;border:1px solid var(--rule)}
.doc-portrait figcaption{margin-top:12px;font-family:var(--f-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.doc-body p{margin:0 0 18px;font-size:17px;line-height:1.7;color:var(--ink-2);max-width:64ch}
.doc-facts{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--rule);border:1px solid var(--rule);margin-top:28px}
.doc-facts div{background:var(--bone);padding:18px 20px}
.doc-facts .lbl{font-family:var(--f-mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-3);margin-bottom:6px}
.doc-facts .val{font-size:15px;line-height:1.5;color:var(--ink)}
@media (max-width:820px){.doc-grid{grid-template-columns:1fr}}

/* ---------- Video testimonials ---------- */
.vt-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(22px,3vw,38px)}
.vt-card{margin:0}
.vt-frame{position:relative;aspect-ratio:16/9;background:var(--plum-900);border-radius:var(--r-m);overflow:hidden;display:grid;place-items:center}
.vt-frame iframe,.vt-frame video{position:absolute;inset:0;width:100%;height:100%;border:0;display:block;object-fit:cover}
.vt-drop{text-align:center;padding:24px;color:var(--plum-300);font-family:var(--f-mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;line-height:2}
.vt-drop .glyph{display:block;width:46px;height:46px;margin:0 auto 14px;border-radius:999px;border:1px solid rgba(177,134,168,.5);position:relative}
.vt-drop .glyph::after{content:'';position:absolute;left:52%;top:50%;transform:translate(-50%,-50%);border-left:13px solid var(--plum-300);border-top:8px solid transparent;border-bottom:8px solid transparent}
.vt-card h2{font-family:var(--f-display);font-size:clamp(24px,2.6vw,32px);line-height:1.1;margin:18px 0 6px;color:var(--plum-900)}
.vt-card p{margin:0;font-size:15px;line-height:1.6;color:var(--ink-2);max-width:52ch}
.vt-tag{font-family:var(--f-mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--plum-500)}
@media (max-width:760px){.vt-grid{grid-template-columns:1fr}}

/* ---------- Stub pages ---------- */
.stub{min-height:46vh;display:grid;align-content:center}
.stub-note{font-family:var(--f-mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--plum-500);margin-top:22px}

/* ---------- Patient stories: YouTube grid ---------- */
.vband-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
.vt-frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.vt-frame .yt-play{white-space:nowrap}
.vt-card figcaption h2{font-family:var(--f-display);font-size:clamp(21px,2.2vw,28px);line-height:1.15;margin:16px 0 0;color:var(--plum-900)}

.vband-cap .what{text-wrap:pretty}
@media (max-width:700px){.vband-cap{padding:20px 20px 62px}.vid-sound{bottom:auto;top:14px}}

/* Alternating section tones — no two adjacent sections share a background */
.voices{background:var(--plum-50)}
.voices .g-card{background:var(--bone)}


/* ---------- Photo bands on interior page headers ---------- */
/* NO PAGE USES THIS ANY MORE (2026-08-22). Every interior header is now `has-panel` below.
   Kept, not deleted, so the band is one class name away if it is ever wanted back — the
   `--band-focus` values that were tuned per page are recorded in the README. Delete this
   block only once the panel layout is settled in production. */
.page-hero.has-photo,.cond-hero.has-photo{position:relative;overflow:hidden;min-height:clamp(440px,64vh,660px);display:flex;align-items:center;background:var(--band-tone,var(--cream))}
.band-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:var(--band-focus,50% 46%);z-index:0}
.page-hero.has-photo::after,.cond-hero.has-photo::after{content:'';position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,var(--band-tone) 0%,var(--band-tone) 30%,rgba(246,241,237,.72) 46%,rgba(246,241,237,.16) 63%,rgba(246,241,237,0) 76%)}
.page-hero.has-photo .wrap,.cond-hero.has-photo .wrap{position:relative;z-index:2;width:100%}
.page-hero.has-photo .wrap>*,.cond-hero.has-photo .wrap>*{max-width:min(100%,46ch)}
.page-hero.has-photo h1,.cond-hero.has-photo h1{max-width:min(100%,15ch)}
.page-hero.has-photo .cond-cta,.cond-hero.has-photo .cond-cta{max-width:none;flex-wrap:nowrap}
.cond-cta .btn,.hero-cta .btn,.fv-cta .btn,.visit-cta .btn{white-space:nowrap}
@media (max-width:640px){.page-hero.has-photo .cond-cta,.cond-hero.has-photo .cond-cta{flex-wrap:wrap}}
@media (max-width:900px){.page-hero.has-photo,.cond-hero.has-photo{align-items:flex-start;min-height:clamp(540px,74vh,680px)}
.band-img{object-position:var(--band-focus-m,60% 32%)}
.page-hero.has-photo::after,.cond-hero.has-photo::after{background:linear-gradient(180deg,var(--band-tone) 0%,var(--band-tone) 44%,rgba(246,241,237,.5) 64%,rgba(246,241,237,0) 84%)}
.page-hero.has-photo .wrap>*,.cond-hero.has-photo .wrap>*{max-width:100%}}

/* ---------- Split header: copy left, photo shown whole on the right ---------- */
/* The full-bleed band above is 2.5:1 at 1440px and wider still beyond that, against a 3:2
   photo. Under object-fit:cover that leaves *zero* horizontal slack — the X half of
   object-position cannot move the crop sideways at any desktop width, only the Y half does
   anything. Where a photo's subject sits in the shaded strip, no focal point rescues it.
   This variant sidesteps the crop entirely: the photo is placed beside the copy at its
   native ratio, uncropped. See README. */
.page-hero.has-panel,.cond-hero.has-panel{background:var(--band-tone,var(--cream))}
.hero-split{display:grid;grid-template-columns:minmax(0,1.06fr) minmax(0,1fr);gap:clamp(28px,4vw,60px);align-items:center}
.hero-split>*{min-width:0}
.cond-hero.has-panel h1,.page-hero.has-panel h1{max-width:15ch}
.has-panel .cond-lede,.has-panel .page-lede{max-width:46ch}
.has-panel .hero-proof{white-space:normal}
.hero-panel{margin:0;position:relative}
.hero-panel img{display:block;width:100%;height:auto;border-radius:var(--r-l);border:1px solid var(--rule);box-shadow:0 26px 64px rgba(26,14,24,.16)}
.hero-panel.is-portrait{display:flex;flex-direction:column;align-items:center}
/* Portrait source (640x960) in a side-by-side header: cap the height so the header does not
   run a full screen tall. The cap also keeps it sharp — displayed smaller than the source. */
.hero-panel.is-portrait img{width:auto;max-width:100%;max-height:clamp(380px,56vh,540px)}
.hero-panel.is-portrait figcaption{text-align:center}
.hero-panel figcaption{margin-top:14px;font-family:var(--f-mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);text-align:right}
@media (max-width:900px){
  .hero-split{grid-template-columns:1fr;gap:30px}
  .cond-hero.has-panel h1,.page-hero.has-panel h1{max-width:16ch}
  .hero-panel figcaption{text-align:left}
}

/* ---------- Body photos ---------- */
.body-photo{margin:clamp(28px,4vw,48px) 0;display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(20px,3vw,40px);align-items:center}
.body-photo.flip{grid-template-columns:.85fr 1.15fr}
.body-photo.flip img{order:2}
.body-photo.flip figcaption{order:1}
.body-photo img{width:100%;height:100%;max-height:420px;object-fit:cover;border-radius:var(--r-l);display:block}
.body-photo figcaption{font-size:16px;line-height:1.6;color:var(--ink-2);text-wrap:pretty}
.body-photo figcaption strong{display:block;font-family:var(--f-display);font-weight:400;font-size:clamp(22px,2.4vw,30px);line-height:1.15;color:var(--plum-900);margin-bottom:10px}
.body-photo.solo{grid-template-columns:1fr}
.body-photo.portrait img{max-height:none;aspect-ratio:4/5;object-position:52% 62%}
@media (max-width:760px){.body-photo,.body-photo.flip{grid-template-columns:1fr}.body-photo.flip img{order:0}.body-photo.flip figcaption{order:1}}

/* ---------- Doctors page: matched pair ---------- */
.doc-alt{background:var(--plum-50)}
.doc-grid-flip{grid-template-columns:1.15fr .85fr}
.doc-grid-flip .doc-portrait{order:2}
.doc-grid-flip .doc-body{order:1}
.doc-body h2{font-size:clamp(30px,3.6vw,46px);line-height:1.02;color:var(--plum-900);margin-bottom:16px}
.doc-body h2 em{font-style:italic;color:var(--plum-700)}
.doc-lede{font-size:19px;line-height:1.55;color:var(--ink);margin-bottom:20px;text-wrap:pretty}
@media (max-width:820px){.doc-grid-flip{grid-template-columns:1fr}.doc-grid-flip .doc-portrait{order:0}.doc-grid-flip .doc-body{order:1}}

/* ---------- Booking modal (one pattern site-wide) ---------- */
/* The booking modal was removed on 2026-08-27. Aloha renders once per page, so a modal copy
   alongside the inline embed could never render - its .bkm-* rules went with it. */

/* ---------- Resources nav dropdown ---------- */
.nav-drop{position:relative}
.nav-drop-btn{display:inline-flex;align-items:center;gap:7px;background:none;border:0;padding:6px 0;
  font-family:var(--f-body);font-size:14px;font-weight:500;color:var(--ink);cursor:pointer}
.site-nav .nav-drop-btn:hover,.nav-drop-btn[aria-expanded="true"]{color:var(--plum-700)}
.nav-drop-caret{width:7px;height:7px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
  transform:rotate(45deg) translateY(-2px);transition:transform .2s ease}
.nav-drop-btn[aria-expanded="true"] .nav-drop-caret{transform:rotate(-135deg) translateY(1px)}

/* ============================================================
   MEGA-MENU
   Four rules here are load-bearing; changing any of them
   reintroduces a bug that was reported from the live preview.
   1. top:100% — the panel opens FLUSH under the trigger. Any gap
      is dead space the pointer crosses, which fires mouseleave
      and closes the menu. That was the flicker.
   2. padding-top on .nav-drop — extends the hover target down to
      the panel so the button and panel are one continuous area.
   3. solid background — the panel sits over page text.
   4. NO max-height and NO overflow — everything fits in one view.
   ============================================================ */
.nav-drop{
  /* Extends the hover target from the button down to the header's bottom edge,
     with a negative margin so the header does not grow. Without this there is
     16px of dead header padding between button and panel; crossing it fires
     mouseleave and the menu closes under the pointer. That was the flicker. */
  padding-bottom:16px;margin-bottom:-16px}
.site-header[data-scrolled] .nav-drop{padding-bottom:12px;margin-bottom:-12px}
.nav-drop-menu{
  position:absolute;top:100%;left:50%;transform:translateX(-50%) translateY(-4px);
  background:var(--bone);border:1px solid var(--rule);border-radius:0 0 14px 14px;
  border-top:0;box-shadow:0 24px 48px -20px rgba(26,14,24,.34);
  opacity:0;visibility:hidden;z-index:10;
  transition:opacity .16s ease,transform .16s ease,visibility .16s}
.nav-drop-btn[aria-expanded="true"]+.nav-drop-menu{
  opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}

.nav-mega{padding:26px 28px 20px;min-width:max-content}
.nav-mega-grid{display:grid;gap:0 30px;align-items:start}
.nav-mega[data-cols="4"] .nav-mega-grid{grid-template-columns:repeat(4,minmax(178px,1fr))}
.nav-mega[data-cols="3"] .nav-mega-grid{grid-template-columns:repeat(3,minmax(190px,1fr))}
.nav-mega[data-cols="2"] .nav-mega-grid{grid-template-columns:repeat(2,minmax(200px,1fr))}
.nav-mega-col{display:flex;flex-direction:column;gap:1px}
.nav-mega-h{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-3);margin:0 0 10px;padding:0 10px;white-space:nowrap}
.site-nav .nav-mega-col a{display:block;padding:7px 10px;border-radius:7px;font-size:14px;
  line-height:1.35;color:var(--ink);white-space:nowrap;transition:background .14s ease,color .14s ease}
.site-nav .nav-mega-col a:hover{background:var(--plum-50);color:var(--plum-700)}
.nav-mega-all{display:inline-flex;align-items:center;gap:8px;margin-top:18px;padding-top:16px;
  border-top:1px solid var(--rule);width:100%;font-family:var(--f-mono);font-size:11px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--plum-700)}
.site-nav .nav-mega-all:hover{color:var(--plum-900)}

/* Panels centre on their trigger by default (left:50%/translateX(-50%) above), which is fine for
   a button with room on both sides. The Conditions panel is the widest (4 columns, ~926px,
   min-width:max-content) sitting on the leftmost nav item — centred, its left half runs off the
   viewport below ~1780px, with body{overflow-x:hidden} hiding the clipped column with no
   scrollbar to hint anything is missing. Anchor the first and last dropdown to the trigger's own
   edge instead of centring, so neither panel needs room it doesn't have. */
.nav-drop:first-of-type .nav-drop-menu{left:0;transform:translateY(-4px)}
.nav-drop:first-of-type .nav-drop-btn[aria-expanded="true"]+.nav-drop-menu{transform:translateY(0)}
.nav-drop:last-of-type .nav-drop-menu{left:auto;right:0;transform:translateY(-4px)}
.nav-drop:last-of-type .nav-drop-btn[aria-expanded="true"]+.nav-drop-menu{transform:translateY(0)}

@media (max-width:900px){
  .nav-mega{padding:18px 16px 14px;min-width:0}
  .nav-mega[data-cols="4"] .nav-mega-grid,
  .nav-mega[data-cols="3"] .nav-mega-grid{grid-template-columns:repeat(2,minmax(150px,1fr))}
}
@media (max-width:1024px){
  .nav-drop{width:100%;padding-bottom:0}
  .nav-drop-menu{position:static;transform:none;opacity:1;visibility:hidden;height:0;overflow:hidden;
    border:0;box-shadow:none;background:none;border-radius:0;padding:0}
  .nav-drop-btn[aria-expanded="true"]+.nav-drop-menu{transform:none;height:auto;overflow:visible;
    padding:4px 0 10px}
  .nav-mega-grid,
  .nav-mega[data-cols="4"] .nav-mega-grid,
  .nav-mega[data-cols="3"] .nav-mega-grid,
  .nav-mega[data-cols="2"] .nav-mega-grid{grid-template-columns:1fr;gap:14px}
  .site-nav .nav-mega-col a{white-space:normal;padding:8px 0 8px 14px;border-radius:0}
  .nav-mega-h{padding-left:0}
  .nav-mega-all{margin-top:12px}
}

/* ---------- Events ---------- */
.ev-hero{background:var(--cream);padding:calc(clamp(52px,6vh,92px) + 64px) 0 clamp(40px,5vh,64px)}
.ev-hero h1{font-size:clamp(38px,6vw,76px);line-height:1.02}
.ev-hero h1 em{font-style:italic;color:var(--plum-700)}
.ev-hero .page-lede{margin-top:22px;max-width:56ch}
.ev-section{background:var(--bone)}
.ev-grid{margin-top:clamp(28px,3.4vw,44px);display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,2.4vw,32px)}
/* sync-events.mjs writes this when GHL has no future-dated post — a real, expected state (every
   past workshop rolls into it eventually), not an error. Was never styled; grid-column:1/-1 keeps
   it from trying to sit in a 3-up card grid meant for .ev-card. */
.ev-empty{grid-column:1/-1;padding:clamp(28px,4vw,44px) clamp(20px,3vw,32px);text-align:center;
  background:var(--cream);border:1px dashed var(--rule);border-radius:var(--r-l);
  color:var(--ink-2);font-size:16px}
.ev-reserve-pending{margin:0;font-size:14px;color:var(--ink-2)}
.ev-reserve-pending a{color:var(--plum-700);text-decoration:underline}
.ev-card{display:flex;flex-direction:column;background:var(--bone);border:1px solid var(--rule);border-radius:var(--r-l);overflow:hidden;box-shadow:0 14px 36px rgba(26,14,24,.09);transition:transform .22s ease,box-shadow .22s ease}
.ev-card:hover{transform:translateY(-3px);box-shadow:0 22px 50px rgba(26,14,24,.14)}
.ev-poster-link{display:block}
.ev-poster{aspect-ratio:4/3;width:100%;height:auto;object-fit:cover;display:grid;place-items:center;background:var(--plum-50);border-bottom:1px solid var(--rule);color:var(--plum-500);font-family:var(--f-mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;text-align:center;line-height:1.7}
.ev-body{display:flex;flex-direction:column;gap:10px;padding:clamp(20px,2.2vw,28px)}
.ev-date{margin:0;font-family:var(--f-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--plum-600)}
.ev-card h3{font-family:var(--f-display);font-size:clamp(24px,2.2vw,30px);line-height:1.12}
.ev-blurb{margin:0;font-size:15.5px;line-height:1.6;color:var(--ink-2);text-wrap:pretty}
.ev-more{margin-top:6px;display:inline-flex;align-items:center;gap:10px;font-family:var(--f-mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--plum-700)}
.ev-more:hover{color:var(--plum-500)}
.ev-past{background:var(--cream);padding-top:clamp(30px,3.4vw,46px)}
.ev-past-wrap{border-top:1px solid var(--rule);padding-top:22px}
.ev-past-wrap summary{display:flex;align-items:baseline;gap:14px;cursor:pointer;list-style:none}
.ev-past-wrap summary::-webkit-details-marker{display:none}
.ev-past-label{font-family:var(--f-mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--plum-700)}
.ev-past-wrap[open] .ev-past-label::after{content:' — hide'}
.ev-past-count{font-size:13px;color:var(--ink-3)}
.ev-grid-past{margin-top:24px;grid-template-columns:repeat(3,1fr);gap:18px}
.ev-card.is-past{box-shadow:none;background:transparent;opacity:.72;transition:opacity .22s ease}
.ev-card.is-past:hover{transform:none;box-shadow:none;opacity:1}
.ev-card.is-past .ev-poster{aspect-ratio:16/10;background:var(--cream);filter:grayscale(1)}
.ev-card.is-past .ev-body{padding:18px 20px;gap:7px}
.ev-card.is-past h3{font-size:20px}
.ev-card.is-past .ev-blurb{font-size:14px}
.ev-card.is-past a.ev-more{display:inline-flex;margin-top:2px}
@media (max-width:900px){.ev-grid,.ev-grid-past{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.ev-grid,.ev-grid-past{grid-template-columns:1fr}}

/* ---------- Event card: expand in place ---------- */
.ev-detail{margin-top:4px}
.ev-detail summary{list-style:none;cursor:pointer;display:inline-flex}
.ev-detail summary::-webkit-details-marker{display:none}
.ev-detail summary .ev-more{margin-top:0}
.ev-detail[open] summary .ev-more{color:var(--plum-500)}
.ev-detail[open] summary .ev-more .arrow{transform:rotate(90deg)}
.ev-detail-body{display:flex;flex-direction:column;gap:12px;margin-top:16px;padding-top:16px;border-top:1px solid var(--rule)}
.ev-detail-body p{margin:0;font-size:14.5px;line-height:1.6;color:var(--ink-2);text-wrap:pretty}
.ev-detail-body strong{display:block;font-weight:600;color:var(--plum-700)}
.ev-detail-body .btn-sm{align-self:flex-start;margin-top:4px;padding:11px 18px;font-size:13px}

/* ============================================================
   ReviewWave intake — progress bar overlay
   Paired with rw-progress.js and new-patient-intake.html.
   Colour comes from the existing plum tokens; no new hex values.
   ============================================================ */
.rw-progress {
  position: sticky;
  top: var(--rwp-top, 0px);   /* set by rw-progress.js from the live header height */
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px clamp(16px, 3vw, 28px);
  margin-bottom: clamp(20px, 3vw, 32px);
  background: var(--bone);
  border: 1px solid var(--rule);
  border-radius: var(--r-m);
  box-shadow: 0 6px 20px rgba(26, 14, 24, 0.06);
  font-family: var(--f-body);
}
.rw-progress[hidden] { display: none; }

/* The "Step X of Y" wording is not shown — the percentage carries the same
   information with far less furniture. Kept in the DOM, and still updated by
   the wrapper, so screen readers announce position rather than a bare number. */
.rwp-step {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip-path: inset(50%);
  overflow: hidden;
  white-space: nowrap;
}

.rwp-track {
  flex: 1 1 auto;
  height: 8px;
  border-radius: 999px;
  background: var(--plum-100);
  overflow: hidden;
}

.rwp-fill {
  display: block;
  height: 100%;
  width: 0%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--plum-500), var(--plum-600));
  transition: width 0.33s linear; /* matches RW's own .33s slide */
}

.rwp-pct {
  flex: 0 0 auto;
  min-width: 4ch;
  text-align: right;
  font-family: var(--f-mono);
  font-size: 13px;
  font-weight: 500;
  color: var(--plum-600);
  font-variant-numeric: tabular-nums;
}

.rw-progress[data-complete="true"] .rwp-pct { color: var(--plum-700); }

/* The embed itself — RW injects into this host. */
.rw-form-shell {
  background: var(--bone);
  border: 1px solid var(--rule);
  border-radius: var(--r-l);
  padding: clamp(18px, 3vw, 34px);
}
#rw-form-host { min-height: 420px; }

.rw-form-fallback {
  margin: 0;
  padding: 24px 0 4px;
  text-align: center;
  color: var(--ink-3);
  font-size: 15px;
}

@media (max-width: 560px) {
  .rw-progress { gap: 10px; padding: 12px 14px; }
  .rwp-step { font-size: 12px; }
  .rwp-pct  { font-size: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .rwp-fill { transition: none; }
}

/* ============================================================
   ReviewWave intake — visual corrections to the vendor widget
   RW renders inline in our DOM (no iframe, no shadow root), so its screens
   are ours to restyle.

   !important is load-bearing here, not laziness: RW injects its stylesheet
   into <head> AFTER ours (verified — document.styleSheets order is ours=2,
   RW=3), so on any property RW also sets, source order hands the vendor the
   win no matter how specific our selector is. Every !important below is on a
   property RW itself declares. Anything RW does not set is left plain.
   ============================================================ */

/* --- 1. Loading screen: RW's generic cog -> the DeMoss rhino filling in plum.

   Two layers, because the logo's rhino is line art, not a solid shape — masking
   the artwork alone gives a hollow outline and the fill barely reads:
     base      = demoss-rhino-solid.png (a filled silhouette derived from the
                 logo by flood-filling the outside of the rhino) masking a
                 gradient that animates bottom-to-top -> the "water level"
     ::after   = the original logo, offset to crop to columns 225-298, masking
                 flat plum-800 -> keeps the real line art crisp on top
   Gated behind @supports so browsers without mask support keep RW's original
   cog rather than showing a bare gradient rectangle. --- */
@supports ((-webkit-mask-image: url("/assets/demoss-rhino-solid.png")) or (mask-image: url("/assets/demoss-rhino-solid.png"))) {
  .rw-loading .is-loading {
    --rhino: 96px;
    position: relative;
    width: var(--rhino) !important;
    height: calc(var(--rhino) * 75 / 74) !important;
    min-height: 0 !important;   /* RW sets min-height:120px, which outranks height */
    margin: 0 auto !important;

    background-image: linear-gradient(to top, var(--plum-500) 0 50%, var(--plum-100) 50% 100%) !important;
    background-size: 100% 200% !important;
    background-repeat: no-repeat !important;
    background-position: 0 0%;

    -webkit-mask-image: url("/assets/demoss-rhino-solid.png");
            mask-image: url("/assets/demoss-rhino-solid.png");
    -webkit-mask-size: 100% 100%;
            mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;

    animation: rwp-rhino-fill 1.6s ease-in-out infinite alternate;
  }
  .rw-loading .is-loading::after {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--plum-800);

    -webkit-mask-image: url("/assets/demoss-logo.png");
            mask-image: url("/assets/demoss-logo.png");
    -webkit-mask-size: calc(var(--rhino) * 300 / 74) auto;
            mask-size: calc(var(--rhino) * 300 / 74) auto;
    -webkit-mask-position: calc(var(--rhino) * -225 / 74) 0;
            mask-position: calc(var(--rhino) * -225 / 74) 0;
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
  }
}
@keyframes rwp-rhino-fill {
  from { background-position: 0 0%; }
  to   { background-position: 0 100%; }
}

/* --- 2. Confirmation screen: orange -> green, half size.
   RW hardcodes side margins (0 162px 40px) to centre a 136px disc in a 460px
   column, so halving the disc without resetting the margin would shove it
   off-centre. --- */
.rw-confirmation .rw-completed-checkmark {
  width: 68px !important;
  height: 68px !important;
  border-radius: 34px !important;
  margin: 0 auto 32px !important;
  background-color: var(--ok-green) !important;
}
.rw-confirmation .rw-completed-checkmark svg {
  width: 28px !important;
  height: 29px !important;
}

/* --- 3. RW ships line-height equal to font-size, so any label that wraps has
   zero leading and consecutive lines collide — this is what read as "jumbled
   letters" on the consent screen. Reproduced on a bare embed with none of our
   CSS loaded, so it is the vendor's bug, not a font-load flash (FOUT/FOIT)
   and not a checkbox/text overlap. --- */
#rw-form-host .rw-form-step label,
#rw-form-host .rw-text,
#rw-form-host .rw-confirm-message,
#rw-form-host .input-label {
  line-height: 1.45 !important;
}
#rw-form-host .rw-e-sig-consent label { line-height: 1.5 !important; }

@media (prefers-reduced-motion: reduce) {
  .rw-loading .is-loading {
    animation: none !important;
    background-position: 0 70%;
  }
}

/* ============================================================
   ReviewWave intake — grouped-screen wrapper (rw-wrapper.js)
   RW's own markup is hidden, never removed: step detection reads geometry
   and the signature canvases need real dimensions, so it must stay laid out.
   Width is deliberately never changed between modes — RW's translateX is in
   px against step width, so resizing the host would desync its track.
   ============================================================ */

#rw-form-host.rwx-on { min-height: 0; }

/* group  = our mirrored controls only
   native = RW's own step (signature, drawable, checklist, legal text)
   both   = a native step with mirrored fields following it */
#rw-form-host.rwx-on[data-mode="group"] .rw-embed-wrap {
  visibility: hidden;
  height: 0;
  overflow: hidden;
}
#rw-form-host.rwx-on[data-mode="native"] .rwx-fields,
#rw-form-host.rwx-on[data-mode="group"]  .rw-embed-wrap { pointer-events: none; }
#rw-form-host.rwx-on[data-mode="native"] .rwx-fields { display: none; }

/* One set of navigation: RW's own Back/Continue/Submit are suppressed and
   driven programmatically. Undo/Clear on signature pads (.rw-btn-sm) stay. */
#rw-form-host.rwx-on .rw-btn-next,
#rw-form-host.rwx-on .rw-btn-prev,
#rw-form-host.rwx-on .rw-btn-submit { display: none !important; }

.rwx-head { margin-bottom: clamp(10px, 1.4vw, 15px); }
.rwx-title {
  margin: 0;
  font-family: var(--f-display);
  font-size: clamp(24px, 2.6vw, 32px);
  line-height: 1.15;
  color: var(--plum-800);
}

.rwx-fields {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: clamp(16px, 2vw, 22px);
}
.rwx-row { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
/* Only a LONG choice list earns the full width. Gender has two options and
   was being stretched across the whole grid on its own line, which left it
   looking stranded next to the field above it. Short lists now sit in the
   grid like any other field. */
.rwx-row-choice { grid-column: auto; }
.rwx-row-choice:has(.rwx-choice:nth-child(4)) { grid-column: 1 / -1; }

.rwx-label {
  font-family: var(--f-body);
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-2);
  line-height: 1.4;
}

.rwx-input {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--rule);
  border-radius: var(--r-s);
  background: var(--bone);
  font-family: var(--f-body);
  font-size: 16px;              /* 16px avoids iOS zoom-on-focus */
  color: var(--ink);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.rwx-input:focus {
  outline: none;
  border-color: var(--plum-500);
  box-shadow: 0 0 0 3px var(--plum-100);
}

.rwx-choices { display: flex; flex-wrap: wrap; gap: 10px; }
.rwx-choice {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 11px 16px;
  border: 1px solid var(--rule);
  border-radius: 999px;
  background: var(--bone);
  font-family: var(--f-body);
  font-size: 15px;
  color: var(--ink-2);
  cursor: pointer;
}
.rwx-choice:has(input:checked) {
  border-color: var(--plum-600);
  background: var(--plum-50);
  color: var(--plum-800);
  font-weight: 600;
}

.rwx-err {
  margin: 18px 0 0;
  padding: 12px 14px;
  border-radius: var(--r-s);
  background: #FDECEC;
  border: 1px solid #E9C4C4;
  color: #8A2B2B;
  font-family: var(--f-body);
  font-size: 14.5px;
  line-height: 1.5;
}
.rwx-err[hidden] { display: none; }

.rwx-nav {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  margin-top: clamp(24px, 3vw, 34px);
  padding-top: clamp(18px, 2.4vw, 24px);
  border-top: 1px solid var(--rule);
}
.rwx-btn {
  padding: 13px 26px;
  border-radius: 999px;
  border: 1px solid transparent;
  font-family: var(--f-body);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease, opacity 0.15s ease;
}
.rwx-btn-primary { background: var(--plum-700); color: var(--bone); }
.rwx-btn-primary:hover:not(:disabled) { background: var(--plum-800); }
.rwx-btn-ghost { background: transparent; color: var(--ink-2); border-color: var(--rule); }
.rwx-btn-ghost:hover:not(:disabled) { border-color: var(--ink-3); }
.rwx-btn:disabled { opacity: 0.4; cursor: default; }

/* --- Long checklists: layout only. These are RW's REAL checkboxes, put into
   a grid with CSS. Nothing is recreated, so what submits is unchanged. --- */
/* `:has(.checkbox-wrap)` (descendant) used to match TWO nested elements: the outer
   .rw-form-row AND the .checkbox-list inside it, which also carries .rw-form-row. Both became
   4-column grids, so the outer put the whole field in a 100px track and the inner then split
   that into 10px cells - labels came out 9px wide and rendered one letter per line. Measured on
   the live Medications step: outer row 460px -> field 100px -> checkbox 10px -> label 9px.
   Only the DIRECT parent of the checkboxes may become the grid. */
.rw-form-step.rwx-grid .rw-form-row:has(.checkbox-wrap) {
  display: block !important;
  grid-template-columns: none !important;
}
/* auto-fit, not a fixed column count: the constraint is the ~480px SLIDE, not the viewport, so
   viewport media queries never saw the real width. This adapts to whatever space the step has. */
.rw-form-step.rwx-grid .checkbox-list,
.rw-form-step.rwx-grid .rw-form-row:has(> .checkbox-wrap),
.rw-form-step.rwx-grid .rw-form-col:has(> .checkbox-wrap) {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)) !important;
  gap: 6px 20px !important;
  align-items: start;
  text-align: left;
}
.rw-form-step.rwx-grid .checkbox-wrap {
  display: flex !important;
  align-items: flex-start;
  gap: 9px;
  padding: 5px 0;
  text-align: left;
}
.rw-form-step.rwx-grid .checkbox-wrap .input-label {
  font-size: 14px;
  line-height: 1.35;
}
@media (max-width: 560px) {
  .rwx-nav .rwx-btn { padding: 13px 20px; }
}

/* Signature pads and the pain diagram: container styling only. The drawable
   canvas is RW's own, untouched. */
#rw-form-host.rwx-on .e-sig-field,
#rw-form-host.rwx-on .drawable-image-wrapper {
  border: 1px solid var(--rule);
  border-radius: var(--r-s);
  background: var(--bone);
}

/* RW's track is sized to the tallest step in the whole form, so a short native
   step would otherwise reserve ~3000px and bury the wrapper's Continue button
   below the fold. rw-wrapper.js measures the active step and sets --rwx-native-h. */
#rw-form-host.rwx-on[data-mode="native"] .rw-embed-wrap,
#rw-form-host.rwx-on[data-mode="both"]   .rw-embed-wrap,
#rw-form-host.rwx-on[data-mode="native"] .rw-slide-wrap,
#rw-form-host.rwx-on[data-mode="both"]   .rw-slide-wrap {
  height: var(--rwx-native-h, auto) !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

/* On the consent gate the wrapper stands aside and RW's own "Get Started"
   button drives the step — see the note in rw-wrapper.js. Everywhere else
   RW's buttons stay hidden and our single Back/Continue pair drives. */
#rw-form-host.rwx-on.rwx-consent .rw-btn-consent { display: block !important; }
#rw-form-host.rwx-on:not(.rwx-consent) .rw-btn-consent { display: none !important; }

/* [hidden] sets display:none only at UA level, which a later display:flex
   silently beats — without this the nav stays visible when hidden is set. */
.rwx-nav[hidden] { display: none !important; }
.rwx-head[hidden] { display: none !important; }

/* ---- Legal text beside the step it belongs to --------------------------- *
 * RW splits an agreement across two steps: the words on one, the signature or
 * initial on the next. rw-wrapper.js copies the words into .rwx-legal and
 * walks RW onto the step that needs acting on, so both are on screen at once.
 * The columns are placed on the HOST — .rw-embed-wrap is never re-parented. */
.rwx-legal { min-width: 0; }
.rwx-legal[hidden] { display: none !important; }

.rwx-legal-body {
  max-height: min(62vh, 560px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 16px 18px;
  border: 1px solid var(--rule);
  border-radius: var(--r-s);
  background: color-mix(in srgb, var(--bone) 60%, transparent);
  font-size: 14.5px;
  line-height: 1.62;
  color: var(--ink-2);
  text-align: left;
}
.rwx-legal-body * { text-align: left !important; max-width: none !important; }
.rwx-legal-body p { margin: 0 0 0.9em; }
.rwx-legal-body :is(h1,h2,h3,h4,b,strong) {
  display: block;
  font-family: var(--f-body);
  font-size: 14.5px;
  font-weight: 700;
  color: var(--ink);
  margin: 1.1em 0 0.4em;
}
.rwx-legal-body :first-child { margin-top: 0; }

/* Two columns: the text on the left, the thing to act on at the right. */
#rw-form-host.rwx-on.rwx-2col {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  column-gap: clamp(20px, 2.6vw, 34px);
  align-items: start;
}
#rw-form-host.rwx-on.rwx-2col > .rwx-head,
#rw-form-host.rwx-on.rwx-2col > .rwx-err,
#rw-form-host.rwx-on.rwx-2col > .rwx-nav { grid-column: 1 / -1; }
#rw-form-host.rwx-on.rwx-2col > .rwx-legal { grid-column: 1; grid-row: 2; }
#rw-form-host.rwx-on.rwx-2col > .rw-embed-wrap,
#rw-form-host.rwx-on.rwx-2col > .rwx-fields { grid-column: 2; grid-row: 2; }

/* RW has not moved off the text step yet, so its pane is showing the very
   words we copied into the left column. Hide the pane rather than print the
   agreement twice; settleOnLive() walks RW forward and it comes back. */
#rw-form-host.rwx-on.rwx-2col.rwx-hidenative > .rw-embed-wrap {
  visibility: hidden;
  height: 0 !important;
  min-height: 0 !important;
  overflow: hidden;
}

/* One column on narrow screens — reading a signature pad at 320px wide beside
   a wall of text helps nobody. Text first, then the thing to sign. */
@media (max-width: 860px) {
  #rw-form-host.rwx-on.rwx-2col { grid-template-columns: minmax(0, 1fr); }
  #rw-form-host.rwx-on.rwx-2col > .rwx-legal,
  #rw-form-host.rwx-on.rwx-2col > .rw-embed-wrap,
  #rw-form-host.rwx-on.rwx-2col > .rwx-fields { grid-column: 1; grid-row: auto; }
  .rwx-legal-body { max-height: 44vh; }
}

/* ---- RW's consent gate, restyled ---------------------------------------- *
 * This step is RW's own — its Get Started button is the control that starts
 * the form (see the note in rw-wrapper.js), so it is restyled, never replaced. */

/* RW ships this button in its own gold with black text. Demoss purple. */
#rw-form-host.rwx-on .rw-btn-consent {
  background: var(--plum-700) !important;
  border: 1px solid var(--plum-700) !important;
  color: var(--bone) !important;
  font-family: var(--f-body) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em;
  text-transform: none !important;
  border-radius: var(--r-s) !important;
  /* Smoke test 8: was 14px/30px, which read as an oversized slab for a
     control that only acknowledges a consent tick. */
  padding: 11px 22px !important;
  width: auto !important;
  min-width: 0 !important;
  transition: background 0.15s ease;
}
#rw-form-host.rwx-on .rw-btn-consent:hover {
  background: var(--plum-800) !important;
  border-color: var(--plum-800) !important;
}
/* RW also paints a gold slab under the button as a box-shadow, which survived
   recolouring the background and read as a stray orange underline. */
#rw-form-host.rwx-on .rw-btn-consent { box-shadow: none !important; }

/* The agreement was centred, which at this width broke it into a stack of
   near-single-word lines ("...and Intend to" / "sign,"). Ranged left with a
   comfortable measure it reads as the paragraph it is. */
#rw-form-host.rwx-on .rw-form-step .rw-text {
  text-align: left !important;
  max-width: 54ch;
  margin-inline: auto;
  line-height: 1.6;
}
/* The centring is imposed by .rw-form-col, not by .rw-text — left-aligning the
   inner block alone left the lines centred inside a centred box. */
#rw-form-host.rwx-on.rwx-consent .rw-form-step .rw-form-col,
#rw-form-host.rwx-on.rwx-consent .rw-form-step .rw-form-col * { text-align: left !important; }
#rw-form-host.rwx-on.rwx-consent .rw-form-step .rw-form-col {
  max-width: 54ch;
  margin-inline: auto;
}

/* ---- Vertical rhythm ---------------------------------------------------- *
 * RW's own steps carry generous block spacing meant for a full-page form.
 * Inside our card it read as content floating low and far apart. */
#rw-form-host.rwx-on .rw-form-step { padding: 0 !important; }
#rw-form-host.rwx-on .rw-form-step > .rw-form-row { margin-block: 0 !important; }
#rw-form-host.rwx-on .rw-form-step .rw-form-row + .rw-form-row { margin-top: 14px !important; }
#rw-form-host.rwx-on .rw-form-step .rw-form-section,
#rw-form-host.rwx-on .rw-form-step .rw-form-col { padding-block: 0 !important; }



/* ================= Phase 2 — patient forms, downloads, payments ================= */

/* Form and download cards reuse .ev-grid / .ev-card. These only cover the bits
   an event card has that a form card does not: no poster image, and a button
   pinned to the bottom so cards of different text length still line up. */
.pf-card .ev-body { height: 100%; }
.pf-go { align-self: flex-start; margin-top: auto; padding-top: 12px; }
.pf-grid, .doc-grid-pdf { grid-template-columns: repeat(3, 1fr); }
.doc-grid-pdf { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 900px) { .pf-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .pf-grid, .doc-grid-pdf { grid-template-columns: 1fr; } }

/* Insurance carriers and payment methods: plain lists, set as chips. */
.ins-grid, .pay-grid {
  list-style: none;
  margin: clamp(20px, 2.4vw, 30px) 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.ins-grid li, .pay-grid li {
  padding: 11px 18px;
  border: 1px solid var(--rule);
  border-radius: 999px;
  background: var(--bone);
  font-size: 15px;
  color: var(--ink-2);
}
.ins-note { margin-top: 18px; font-size: 14.5px; color: var(--ink-3); }

/* Insurance badge. Drawn here rather than reusing the incumbent's
   insurance-badge.png: that asset is theirs, the rights question is open, and a
   two-colour SVG in the brand palette scales properly on a phone. */
.ins-badge {
  margin-top: clamp(22px, 2.6vw, 32px);
  display: inline-flex;
  align-items: center;
  gap: 16px;
  padding: 16px 22px 16px 18px;
  border: 1px solid var(--rule);
  border-radius: var(--r-l);
  background: var(--bone);
  box-shadow: 0 14px 36px rgba(26, 14, 24, .07);
}
.ins-badge svg { width: 46px; height: 46px; flex: 0 0 auto; }
.ins-badge-shield { fill: var(--plum-700); }
.ins-badge-cross  { fill: var(--bone); }
.ins-badge-txt { display: flex; flex-direction: column; gap: 3px; }
.ins-badge-txt strong {
  font-family: var(--f-body); font-size: 15px; font-weight: 700; color: var(--ink);
}
.ins-badge-txt span { font-size: 13.5px; color: var(--ink-3); }
@media (max-width: 520px) { .ins-badge { width: 100%; } }

/* ============================================================
   FOOTER — hours, social row, legal strip        (port, 2026-09-02)
   The incumbent carries both hour sets in the footer on all ~110
   pages. Patients arriving from Google land on a symptom page, not
   the homepage, so hours living only on index.html was a content
   regression against the site we are replacing.
   ============================================================ */
.foot-hours{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:clamp(20px,3vw,44px);
  padding:clamp(26px,3.4vw,38px) 0;margin-top:clamp(26px,3.4vw,38px);
  border-top:1px solid var(--foot-rule,rgba(255,255,255,.14))}
.foot-hours .fh-col h4{
  font-family:var(--mono,"JetBrains Mono",monospace);font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--plum-300,#B186A8);margin:0 0 14px;font-weight:500}
.fh-row{display:flex;justify-content:space-between;gap:18px;padding:7px 0;
  border-bottom:1px solid rgba(255,255,255,.07);font-size:14.5px}
.fh-row:last-child{border-bottom:0}
.fh-d{color:var(--plum-300,#B186A8);flex:0 0 auto}
.fh-t{text-align:right;font-variant-numeric:tabular-nums}

.foot-phone{margin-top:10px!important;font-size:17px;font-weight:600}
.foot-phone a{text-decoration:none}
.foot-addr-phone{margin-top:8px;font-size:17px;font-weight:600}
.foot-addr-phone a{text-decoration:none}

.foot-social{display:flex;flex-wrap:wrap;gap:12px;
  padding:clamp(22px,3vw,30px) 0;border-top:1px solid var(--foot-rule,rgba(255,255,255,.14))}
.foot-soc{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;
  border:1px solid rgba(255,255,255,.22);transition:background .15s ease,border-color .15s ease}
.foot-soc svg{width:18px;height:18px;fill:currentColor}
.foot-soc:hover,.foot-soc:focus-visible{background:var(--plum-300,#B186A8);border-color:transparent;color:var(--plum-900,#2A0E28)}

.foot-legal{display:flex;flex-wrap:wrap;gap:6px 20px;list-style:none;margin:0;padding:0}
.foot-legal a{font-size:13px;opacity:.75;text-decoration:none}
.foot-legal a:hover,.foot-legal a:focus-visible{opacity:1;text-decoration:underline}
@media (max-width:640px){
  .foot-bot{flex-direction:column;align-items:flex-start;gap:12px}
}

/* Mega-menu columns for the full condition / treatment lists.
   The incumbent carries all 18 treatments on every page; that site-wide link
   graph is part of why these pages rank, so the dropdown has to hold them all
   rather than six homepage anchors. */
@media (max-width:900px){
  }

/* Index grids for /symptoms/ and /treatments/. Was auto-fill(minmax(260px,1fr)),
   which changes column count with viewport width and leaves a lone item stranded
   in column 1 on any row that doesn't divide evenly. Fixed at 3 columns with a
   min-height on the cards so two-line titles ("Activator Methods Technique®",
   "Failed Back Surgery Syndrome") don't make one row taller than the rest. */
.index-grid{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(3,1fr);gap:12px}
.index-grid a{display:flex;align-items:center;justify-content:space-between;gap:14px;
  min-height:84px;
  padding:16px 18px;border:1px solid var(--rule,rgba(42,14,40,.14));border-radius:8px;
  text-decoration:none;font-weight:600;transition:border-color .15s ease,transform .15s ease}
.index-grid a:hover,.index-grid a:focus-visible{border-color:var(--plum-700,#4A2645);transform:translateY(-1px)}
@media (max-width:900px){.index-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.index-grid{grid-template-columns:1fr}}
.xlink-grid{list-style:none;margin:18px 0 0;padding:0;display:grid;
  grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px}
.xlink-grid a{display:block;padding:12px 15px;border:1px solid var(--rule,rgba(42,14,40,.14));
  border-radius:7px;text-decoration:none;font-size:15px}
.xlink-grid a:hover,.xlink-grid a:focus-visible{border-color:var(--plum-700,#4A2645)}
.ben-card{margin:22px 0}
.ben-list{margin:10px 0 0;padding-left:20px}
.ben-list li{margin:5px 0}
.prose .p-list{padding-left:22px}
.prose .p-list li{margin:7px 0}
.vid-frame{position:relative;padding-top:56.25%;border-radius:10px;overflow:hidden}
.vid-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.vid-note{margin-top:10px;font-size:13px;opacity:.7}

/* ============================================================
   Smoke-test fixes 8 and 9                       (2026-09-02)
   ============================================================ */
/* 8 — whitespace around the consent gate. RW pads the step for a full-page
   form; inside our card the button ended up marooned in dead space. */
#rw-form-host.rwx-on.rwx-consent .rw-form-step{padding-block:0!important}
#rw-form-host.rwx-on.rwx-consent .rw-btn-consent{margin-top:18px!important;margin-bottom:0!important}
#rw-form-host.rwx-on.rwx-consent .rw-form-row:last-child{margin-bottom:0!important}
.rw-form-shell{padding-block:clamp(18px,2.4vw,26px)}

/* 9 — Personal Injury: RW renders an oversized DeMoss logo above the consent
   gate. The page header already carries the logo two rows further up, so this
   is a duplicate at three times the size. Hidden, not removed: it is RW's own
   markup and comes back on their next release. */
#rw-form-host img[src*="logo"],
#rw-form-host .rw-form-logo,
#rw-form-host img[alt*="DeMoss" i]{display:none!important}
.router-all,.services-all{margin-top:18px}
.router-all a,.services-all a{font-family:var(--f-mono,"JetBrains Mono",monospace);font-size:12px;
  letter-spacing:.08em;text-transform:uppercase;text-decoration:none;border-bottom:1px solid currentColor;
  padding-bottom:2px}

/* Contact page */
.contact-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px}
.contact-card{border:1px solid var(--rule,rgba(42,14,40,.14));border-radius:10px;padding:24px}
.contact-card .lbl{font-family:var(--f-mono,"JetBrains Mono",monospace);font-size:11px;
  letter-spacing:.14em;text-transform:uppercase;opacity:.65;margin-bottom:10px}
.contact-big{font-size:20px;font-weight:600;margin:0 0 10px;line-height:1.35}
.contact-big a{text-decoration:none}
.contact-map{height:min(52vh,440px);border-radius:12px;overflow:hidden}
.contact-map iframe{width:100%;height:100%;border:0}
.ghl-form-slot:empty{display:none}
/* GHL's form_embed.js resizes the iframe's own height inline via postMessage once the form
   inside it reports its real content height (taller on mobile, where fields stack single-column
   with more room for the SMS/marketing consent checkboxes). The iframe's own inline style handles
   height:100%; this wrapper only needs a fallback min-height matching data-height="900" so
   nothing collapses to ~150px before the script runs, and no overflow/max-height that could clip
   it if the real content comes back taller than 900px. */
.contact-form-embed{min-height:900px}
.contact-form-embed iframe{width:100%;min-height:900px;display:block}
.event-form-embed{min-height:882px}
.event-form-embed iframe{width:100%;min-height:882px;display:block}