/* =========================================================
   Design tokens (extracted from reference design system)
   ========================================================= */
:root {
  --primary: #c8102e;
  --primary-dark: #a50d25;
  --primary-soft: rgba(200, 16, 46, 0.09);
  --navy: #0b1f3a;
  --text: #3d5166;
  --text-dark: #0b1f3a;
  --bg-blue: #b6ddf5;
  --bg-blue-soft: rgba(182, 221, 245, 0.35);
  --bg-gray: #f7f8fa;
  --white: #ffffff;
  --success-bg: #f0fdf4;
  --success-text: #166534;
  --error-bg: #fef2f2;
  --error-text: #991b1b;
  --warning-bg: #fffbeb;
  --warning-text: #92400e;
  --border: #e3e8ef;
  --radius-pill: 100px;
  --radius-card: 16px;
  --radius-sm: 10px;
  --shadow-card: 0 4px 20px rgba(11, 31, 58, 0.08);
  --shadow-lift: 0 12px 32px rgba(11, 31, 58, 0.14);
  --container: 1200px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: "Sora", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  color: var(--text);
  background: var(--white);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

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

h1, h2, h3, h4 {
  color: var(--text-dark);
  font-weight: 700;
  line-height: 1.15;
  margin: 0 0 16px;
}

h1 { font-size: 46px; letter-spacing: -0.5px; }
h2 { font-size: 32px; letter-spacing: -0.3px; }
h3 { font-size: 20px; }
h4 { font-size: 17px; }

p { margin: 0 0 16px; }

.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
}

section { position: relative; }

.section {
  padding: 88px 0;
}

.section-gray { background: var(--bg-gray); }
.section-blue { background: var(--bg-blue-soft); }
.section-navy { background: var(--navy); color: rgba(255,255,255,0.85); }
.section-navy h2, .section-navy h3 { color: var(--white); }

.eyebrow {
  display: inline-block;
  background: var(--primary-soft);
  color: var(--primary);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 8px 18px;
  border-radius: var(--radius-pill);
  margin-bottom: 20px;
}

.text-center { text-align: center; }
.section-head { max-width: 720px; margin: 0 auto 56px; }
.section-head p { font-size: 18px; }

/* =========================================================
   Buttons
   ========================================================= */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: inherit;
  font-weight: 700;
  font-size: 16px;
  padding: 15px 34px;
  border-radius: var(--radius-pill);
  border: 2px solid transparent;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
}

.btn-primary {
  background: var(--primary);
  color: var(--white);
}
.btn-primary:hover { background: var(--primary-dark); }

.btn-outline {
  background: var(--white);
  color: var(--text-dark);
  border-color: var(--text-dark);
}
.btn-outline:hover { background: var(--text-dark); color: var(--white); }

.btn-outline-light {
  background: transparent;
  color: var(--white);
  border-color: rgba(255,255,255,0.5);
}
.btn-outline-light:hover { background: rgba(255,255,255,0.12); }

.btn-sm { padding: 10px 22px; font-size: 14px; }
.btn-block { width: 100%; }

/* Fast Pace "virtual primary care" mark tucked to the right of the label on the
   booking CTAs (Book Appointment / Get Care Today / Book Appt Now, etc.). The
   .btn flex layout + gap:8px space and vertically center it automatically. The
   icon is white, so it is scoped to the solid .btn-primary buttons where it
   stays visible (not the light .btn-outline buttons or plain footer links). */
.btn-primary[data-book-appointment]::after {
  content: "";
  flex: none;
  width: 1.15em;
  height: 1.02em; /* icon viewBox 135.1 x 120.1 -> ~0.89 aspect */
  background: url("../images/fph-virtual-primarycare-white_icon.svg") center / contain no-repeat;
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 32px;
}

/* =========================================================
   Header / Nav
   ========================================================= */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--white);
  border-bottom: 1px solid var(--border);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 24px;
  max-width: var(--container);
  margin: 0 auto;
  gap: 16px;
}

.logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
.logo-img { height: 43px; width: auto; display: block; }

.main-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
  flex: 1;
  justify-content: center;
}
.main-nav a {
  font-size: 15px;
  font-weight: 500;
  color: var(--text-dark);
  position: relative;
  white-space: nowrap;
}
.main-nav a:hover { color: var(--primary); }

.dropdown { position: relative; }
.dropdown > a::after { content: " \25BE"; font-size: 11px; }
/* Invisible bridge so hover stays active across the gap between the
   nav link and the dropdown panel (panel sits margin-top: 12px below). */
.dropdown::before {
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: 12px;
}
.dropdown-panel {
  display: none;
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-lift);
  padding: 12px;
  min-width: 260px;
  max-height: 420px;
  overflow-y: auto;
  margin-top: 12px;
}
.dropdown:hover .dropdown-panel { display: block; }
.dropdown-panel a {
  display: block;
  padding: 9px 14px;
  border-radius: 8px;
  font-size: 14px;
  white-space: nowrap;
}
.dropdown-panel a:hover { background: var(--bg-gray); }

.dropdown-panel.mega {
  min-width: 680px;
  max-height: none;
  overflow: visible;
  padding: 24px;
}
/* Categories are grouped into explicit columns at build time (see
   MEGA_COLUMN_GROUPS) so 7 categories settle into balanced columns
   (2/3/2) instead of leaving a lone item dangling in its own row, and so
   we know precisely which category is first in its column -- that one
   skips the divider below, since there's nothing above it to separate
   from. */
.mega-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
.mega-col-group {
  min-width: 0;
}
.mega-col-group + .mega-col-group {
  border-left: 1px solid var(--border);
}
.mega-col {
  padding-top: 14px;
  margin-bottom: 14px;
}
.mega-col:first-child { padding-top: 0; }
.mega-col-group .mega-col + .mega-col {
  border-top: 1px solid var(--border);
}
.mega-col h5 {
  font-size: 12.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--primary);
  margin: 0 0 8px;
  padding: 9px 14px 0;
}
.mega-grid a { white-space: normal; }
.mega-footer {
  border-top: 1px solid var(--border);
  margin-top: 10px;
  padding-top: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.mega-footer a { font-weight: 700; color: var(--primary); white-space: nowrap; }

.header-cta { display: flex; align-items: center; gap: 14px; flex-shrink: 0; }
.header-phone { font-size: 14px; font-weight: 600; color: var(--text-dark); }

.nav-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px;
}
.nav-toggle svg { width: 26px; height: 26px; }

/* =========================================================
   Hero
   ========================================================= */
.hero {
  padding: 36px 0 0;
  overflow: hidden;
  min-height: 600px;
}
.hero-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
}
.hero-copy { position: relative; z-index: 1; }
.hero-copy h1 { margin-bottom: 20px; }
.hero-copy .accent { color: var(--primary); display: block; }
.hero-copy p.lead { font-size: 19px; }
.hero-disclaimer { font-size: 13px; color: #7c8aa0; margin-top: 8px; }

/* Larger derm-style hero headline + checkmark benefit list */
.hero-title-lg { font-size: 54px; line-height: 1.08; letter-spacing: -0.5px; margin-bottom: 24px; }
.hero-bullets {
  list-style: none;
  margin: 0 0 28px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.hero-bullets li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 17px;
  line-height: 1.4;
  color: var(--text);
}
.hero-bullets svg { color: var(--primary); flex-shrink: 0; margin-top: 2px; }

/* Homepage hero image: anchored flush to the top, bottom and right edge of the
   hero section so the transparent-background cutout fills the right side. */
.hero-media {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 0;
  pointer-events: none;
}

.hero-media img { display: block; height: 100%; width: auto; object-fit: contain; object-position: right bottom; }

.hero-bottom-strip {
  height: 13px;
  background: var(--bg-blue);
  margin-top: 56px;
}

/* Interior sub-page heroes (Primary Care, Weight Management, Preventive Care):
   pin the light-blue bar flush to the bottom of the hero and stack it IN FRONT
   of the hero image, so the bar reads as one clean band and the image sits
   above it instead of breaking into or poking below it. The homepage hero has
   no .hero-subpage class, so its flush-bottom cutout keeps its own tuning. */
.hero-subpage .hero-bottom-strip {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  margin-top: 0;
  z-index: 2;
}

/* Weight Management hero copy is the tallest of the sub-page heroes (longer
   lead + disclaimer + CTA), so its "Start Today" button reaches all the way
   to the hero's bottom edge, where the absolute z-index:2 blue strip covers
   it. Add bottom room below the copy so the CTA always clears the strip.
   Desktop only: at <=980px the strip returns to normal flow (no overlap), so
   this padding is unnecessary there and would just add a gap. */
@media (min-width: 981px) {
  .hero-wm { padding-bottom: 44px; }
}

/* =========================================================
   Cards / Grids
   ========================================================= */
.grid {
  display: grid;
  gap: 28px;
}
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

.card {
  background: var(--white);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: 32px;
  border: 1px solid var(--border);
}

.icon-badge {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: var(--primary-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
}
.icon-badge svg { width: 26px; height: 26px; stroke: var(--primary); }

.card-image {
  width: 100%;
  aspect-ratio: 1 / 1;
  height: auto;
  object-fit: cover;
  border-radius: 16px;
  display: block;
  margin-bottom: 18px;
}

.med-image {
  width: 100%;
  max-width: 140px;
  height: auto;
  margin: 0 auto 20px;
}

/* Medication cards (Weight Management): flex column so the "Ask about ..."
   outlined CTA pins to the bottom of every card and the four buttons line up
   across the 2x2 grid regardless of copy length. */
.med-card { display: flex; flex-direction: column; height: 100%; }
.med-card p { flex: 1 1 auto; }
.med-cta { margin-top: 24px; display: flex; justify-content: center; }

/* Condition / service cards */
.condition-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: 26px;
  transition: box-shadow 0.15s ease, transform 0.15s ease;
  display: flex;
  flex-direction: column;
  gap: 10px;
  height: 100%;
  overflow: hidden;
}
.condition-card:hover {
  box-shadow: var(--shadow-lift);
  transform: translateY(-3px);
}
.condition-card__media {
  margin: -26px -26px 6px;
  aspect-ratio: 16 / 15;
  overflow: hidden;
  background: var(--section-gray, #f4f6f9);
}
.condition-card__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 22%;
}
.condition-card h3 { margin-bottom: 0; font-size: 18px; }
.condition-card p { font-size: 15px; margin-bottom: 0; flex: 1; }
.condition-card .learn-more {
  font-size: 14px;
  font-weight: 700;
  color: var(--primary);
  margin-top: 6px;
}

.category-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin-bottom: 44px;
}
.category-filter button {
  font-family: inherit;
  border: 1px solid var(--border);
  background: var(--white);
  padding: 9px 18px;
  border-radius: var(--radius-pill);
  font-size: 14px;
  font-weight: 600;
  color: var(--text-dark);
  cursor: pointer;
}
.category-filter button.active,
.category-filter button:hover {
  background: var(--text-dark);
  color: var(--white);
  border-color: var(--text-dark);
}

/* =========================================================
   Steps (How it works)
   ========================================================= */
.steps-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  margin-top: 48px;
}
.step {
  text-align: left;
}
.step-num {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--primary);
  color: var(--white);
  font-weight: 700;
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
}

/* =========================================================
   Stats strip
   ========================================================= */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
  text-align: center;
}
.stat-num {
  font-size: 42px;
  font-weight: 800;
  color: var(--bg-blue);
  margin-bottom: 6px;
}
.stat-label { font-size: 15px; color: rgba(255,255,255,0.75); margin-bottom: 4px; }
.stat-source { font-size: 12px; color: rgba(255,255,255,0.45); }
.stat-link { display: inline-block; margin-top: 4px; font-size: 13px; color: #fff; text-decoration: underline; opacity: 0.72; }
.stat-link:hover { opacity: 1; }

/* =========================================================
   Checklists (included / not included)
   ========================================================= */
.checklist { list-style: none; margin: 0; padding: 0; }
.checklist li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 10px 0;
  font-size: 15px;
  border-bottom: 1px solid var(--border);
}
.checklist li:last-child { border-bottom: none; }
.check-icon, .x-icon {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 800;
  margin-top: 1px;
}
.check-icon { background: var(--success-bg); color: var(--success-text); }
.x-icon { background: var(--error-bg); color: var(--error-text); }

/* =========================================================
   Pricing cards
   ========================================================= */
.pricing-card {
  background: var(--white);
  border-radius: 20px;
  padding: 36px;
  box-shadow: var(--shadow-card);
  border: 2px solid var(--border);
  position: relative;
}
.pricing-card.featured { border-color: var(--primary); }
.pricing-badge {
  position: absolute;
  top: -14px;
  left: 32px;
  background: var(--primary);
  color: var(--white);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.05em;
  padding: 6px 16px;
  border-radius: var(--radius-pill);
}
.price-amount { font-size: 44px; font-weight: 800; color: var(--text-dark); }
.price-amount span { font-size: 16px; font-weight: 500; color: var(--text); }

/* =========================================================
   Testimonials
   ========================================================= */
.testimonial-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: 28px;
  height: 100%;
}
.testimonial-quote { font-size: 15px; font-style: italic; margin-bottom: 18px; }
.testimonial-person { display: flex; align-items: center; gap: 12px; }
.avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--bg-blue);
  flex-shrink: 0;
}
.testimonial-name { font-weight: 700; font-size: 14px; color: var(--text-dark); }

/* =========================================================
   FAQ accordion
   ========================================================= */
.faq-item {
  border-bottom: 1px solid var(--border);
}
.faq-item summary {
  list-style: none;
  cursor: pointer;
  padding: 22px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-weight: 700;
  color: var(--text-dark);
  font-size: 17px;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+";
  font-size: 22px;
  font-weight: 400;
  color: var(--primary);
  margin-left: 20px;
  flex-shrink: 0;
}
.faq-item[open] summary::after { content: "\2212"; }
.faq-item .faq-answer { padding: 0 0 22px; font-size: 15px; }

/* =========================================================
   Cost comparison
   ========================================================= */
.cost-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.cost-card {
  background: var(--white);
  border-radius: var(--radius-card);
  padding: 28px;
  text-align: center;
  border: 1px solid var(--border);
}
.cost-card .cost-label { font-size: 13px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--text); margin-bottom: 10px; }
.cost-card .cost-amount { font-size: 28px; font-weight: 800; color: var(--text-dark); margin-bottom: 10px; }
.cost-card.highlight { border: 2px solid var(--primary); }
.cost-card.highlight .cost-amount { color: var(--primary); }

/* =========================================================
   Sidebar / CTA banner
   ========================================================= */
.cta-banner {
  background: var(--navy);
  border-radius: 24px;
  padding: 56px;
  text-align: center;
  color: var(--white);
}
.cta-banner h2 { color: var(--white); margin-bottom: 12px; }
.cta-banner p { color: rgba(255,255,255,0.75); font-size: 18px; }
.cta-banner .btn-row { justify-content: center; }

.inline-cta {
  background: var(--bg-gray);
  border-radius: var(--radius-card);
  padding: 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  margin: 40px 0;
}
.inline-cta h3 { margin-bottom: 4px; }
.inline-cta p { margin-bottom: 0; }

/* =========================================================
   Condition detail page layout
   ========================================================= */
.detail-hero {
  background: var(--bg-blue-soft);
  padding: 48px 0 0;
  position: relative;
  overflow: hidden;
  min-height: 520px;
}
.detail-hero .hero-grid { align-items: start; height: 100%; }
.detail-hero .hero-copy {
  max-width: 540px;
  position: relative;
  z-index: 2;
}
.detail-hero .hero-media {
  /* This box's edges are ALL explicit (top/bottom/left/right), so it has a
     genuinely fixed width and height -- not "however wide the image wants
     to be, then clipped." The image inside is told to fit *within* this
     box (object-fit: contain) rather than fill it and get cropped -- that's
     what stops the photo itself from being cut off; any leftover slack
     from the aspect-ratio mismatch shows as a sliver of background at the
     top/left instead of eating into the photo.
     `left` here is a worst-case fallback only (assumes hero-copy's full
     540px max-width + a 20px gap, in the same coordinate space .container
     itself uses for centering) for the brief moment before JS runs.
     main.js measures hero-copy's *actual* rendered width and overrides
     this inline -- most headlines don't reach 540px, so the static
     fallback alone would leave a much bigger gap than intended. */
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(max(0px, (100% - var(--container)) / 2) + 584px);
  right: 0;
  overflow: hidden;
  border-radius: 0;
}
.detail-hero .hero-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: bottom right;
  border-radius: 0;
  /* The source photo has an opaque light background baked in (no alpha
     channel available) -- multiply blend approximates a cutout by letting
     light pixels merge into the section's light-blue background. */
  mix-blend-mode: multiply;
}
.detail-layout {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 56px;
  align-items: start;
}
.detail-main h2 { margin-top: 48px; }
.detail-main h2:first-child { margin-top: 0; }

.symptom-tags { display: flex; flex-wrap: wrap; gap: 10px; margin: 20px 0 8px; }
.symptom-tag {
  background: var(--bg-gray);
  border: 1px solid var(--border);
  padding: 8px 16px;
  border-radius: var(--radius-pill);
  font-size: 14px;
  font-weight: 600;
  color: var(--text-dark);
}

.detail-sidebar { position: sticky; top: 100px; }
.sidebar-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: 28px;
  margin-bottom: 24px;
}
.sidebar-card h4 { margin-bottom: 14px; }
.sidebar-illustration { margin-bottom: 24px; }
.sidebar-illustration img { display: block; width: 100%; height: auto; }
.related-list { list-style: none; margin: 0; padding: 0; }
.related-list li { border-bottom: 1px solid var(--border); }
.related-list li:last-child { border-bottom: none; }
.related-list a {
  display: block;
  padding: 12px 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-dark);
}
.related-list a:hover { color: var(--primary); }

/* Desktop only: lift the sidebar so the "Start with a provider today" card
   tucks up and slightly overlaps the bottom of the hero image, pulling the
   rest of the sidebar (illustration, related conditions) up with it. The
   following .section's 88px top padding is what created the gap, so we pull
   up by that plus a modest overlap. position/z-index keeps the card painting
   in front of the hero image. Mobile (<=980px) is untouched: there the sidebar
   stacks in normal flow below a full-width hero image. */
@media (min-width: 981px) {
  .detail-sidebar {
    /* keeps its sticky position from the base rule; sticky already paints
       this (a later DOM sibling) in front of the hero. */
    margin-top: -128px;
    z-index: 2;
  }
}

.emergency-note {
  background: var(--warning-bg);
  color: var(--warning-text);
  border-radius: var(--radius-sm);
  padding: 18px 20px;
  font-size: 14px;
  margin: 28px 0;
}
.emergency-note strong { display: block; margin-bottom: 4px; }

/* =========================================================
   Footer
   ========================================================= */
.site-footer {
  background: var(--navy);
  color: rgba(255,255,255,0.65);
  padding: 64px 0 32px;
  font-size: 14px;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.6fr repeat(4, 1fr);
  gap: 32px;
  margin-bottom: 48px;
}
.footer-col h4 { color: var(--white); font-size: 14px; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 18px; }
.footer-col a, .footer-col p { display: block; color: rgba(255,255,255,0.65); margin-bottom: 10px; font-size: 14px; }
.footer-col a:hover { color: var(--white); }
.footer-logo { display: flex; align-items: center; gap: 10px; color: var(--white); font-weight: 700; font-size: 18px; margin-bottom: 16px; }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.12);
  padding-top: 28px;
  font-size: 12.5px;
  color: rgba(255,255,255,0.45);
  line-height: 1.7;
}
.footer-bottom p { margin-bottom: 10px; }

/* =========================================================
   Mobile sticky "Get Care Today" bar
   ========================================================= */
.mobile-sticky-cta { display: none; }

/* =========================================================
   Book Appointment modal
   ========================================================= */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(11, 31, 58, 0.55);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 24px;
}
.modal-overlay.open { display: flex; }

.modal-box {
  background: var(--white);
  border-radius: 20px;
  max-width: 560px;
  width: 100%;
  padding: 40px;
  position: relative;
  box-shadow: var(--shadow-lift);
  max-height: 88vh;
  overflow-y: auto;
}
.modal-close {
  position: absolute;
  top: 20px;
  right: 20px;
  background: var(--bg-gray);
  border: none;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  color: var(--text-dark);
}
.modal-box h3 { font-size: 24px; margin-bottom: 8px; }
.modal-box > p { margin-bottom: 28px; }
.state-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.state-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 1px solid var(--border);
  background: var(--white);
  border-radius: var(--radius-sm);
  padding: 8px;
  font-family: inherit;
  font-weight: 600;
  font-size: 15px;
  color: var(--text-dark);
  cursor: pointer;
  text-align: center;
}
.state-btn:hover {
  border-color: var(--primary);
  background: var(--primary-soft);
  color: var(--primary);
}
.state-icon {
  width: 68%;
  aspect-ratio: 1;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  color: var(--text);
}
.state-icon img { width: 100%; height: 100%; object-fit: contain; }
/* Reserve room for two lines so every tile is the same height, whether
   the state name wraps (e.g. "North Carolina") or not. */
.state-name {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 2.4em;
  line-height: 1.2;
}
.modal-footnote { font-size: 12.5px; color: #8b97a8; margin-top: 24px; margin-bottom: 0; }

/* =========================================================
   Placeholder image blocks
   ========================================================= */
.ph-block {
  background: repeating-linear-gradient(45deg, #eef1f5, #eef1f5 10px, #e6eaf0 10px, #e6eaf0 20px);
  border: 1px dashed #c3cddb;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #7c8aa0;
  font-size: 13px;
  font-weight: 600;
  text-align: center;
  border-radius: 16px;
}

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width: 980px) {
  .main-nav, .header-phone { display: none; }
  .nav-toggle { display: flex; }
  body { padding-bottom: 88px; }
  .mobile-sticky-cta {
    display: block;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 90;
    background: var(--white);
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
    box-shadow: 0 -4px 16px rgba(11, 31, 58, 0.12);
  }
  .hero { padding-top: 36px; min-height: 0; }
  .hero-grid { grid-template-columns: 1fr; }
  /* Mobile: hero image drops BELOW the hero copy (so the buttons come first),
     sits tight under the buttons, fills the full frame width (full-bleed past
     the container padding) and locks flush to the right + bottom like the
     desktop cutout (Kyle's request). */
  .hero-media { position: static; order: 1; margin: 6px -24px 0; }
  .hero-media img { height: auto; width: 100%; max-width: none; margin: 0; display: block; object-fit: contain; object-position: right bottom; }
  .hero-bottom-strip { margin-top: 0; }
  /* On mobile the sub-page image already stacks above the bar in normal flow,
     so return the bar to the flow (no absolute overlap to correct). */
  .hero-subpage .hero-bottom-strip { position: static; z-index: auto; }
  .detail-hero { min-height: 0; padding-bottom: 0; overflow: visible; }
  .detail-hero .hero-copy { max-width: none; order: 1; }
  .detail-hero .hero-media {
    position: static;
    order: 2;
    height: auto;
    margin: 8px -24px 0;
  }
  .detail-hero .hero-media img {
    position: static;
    width: 100%;
    height: auto;
    /* No fixed height / object-fit:cover here on purpose -- at in-between
       widths (tablet-ish, still under the 980px nav breakpoint) a fixed
       height forces width-bound cover scaling, which crops the top and
       bottom of the photo. Scaling by width alone always shows the full,
       uncropped image, just taller or shorter depending on viewport. */
  }
  .detail-layout { grid-template-columns: 1fr; }
  .detail-sidebar { position: static; }
  .footer-grid { grid-template-columns: repeat(2, 1fr); }
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .cost-grid { grid-template-columns: 1fr; }
  .steps-grid { grid-template-columns: 1fr; }
}

@media (max-width: 620px) {
  h1 { font-size: 34px; }
  h2 { font-size: 26px; }
  .hero-title-lg { font-size: 36px; }
  .section { padding: 56px 0; }
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  /* Conditions card list stays TWO columns on phones (Kyle) instead of the
     single-column default above, with slightly smaller card text and tighter
     spacing so two fit cleanly side by side. Scoped to #conditions-grid so
     other sections' grids keep their single-column mobile layout. */
  #conditions-grid.grid-4 { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  #conditions-grid .condition-card { padding: 16px; gap: 8px; }
  #conditions-grid .condition-card__media { margin: -16px -16px 4px; }
  #conditions-grid .condition-card h3 { font-size: 15px; line-height: 1.25; }
  #conditions-grid .condition-card p { font-size: 13px; }
  #conditions-grid .condition-card .learn-more { font-size: 13px; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .cta-banner { padding: 36px 24px; }
  .state-grid { grid-template-columns: repeat(2, 1fr); }
  .stats-grid { grid-template-columns: 1fr 1fr; }
  .header-inner { padding: 14px 16px; gap: 10px; }
  .logo-img { height: 34px; }
  .header-cta { gap: 10px; }
  .header-cta > .btn-primary.btn-sm { display: none; }
  .mobile-nav { padding: 12px 16px 20px; }
}

/* Mobile nav drawer: positioned absolute (over .site-header's sticky
   containing block) so it floats over the page instead of pushing
   content down. */
.mobile-nav {
  display: none;
  flex-direction: column;
  background: var(--white);
  border-top: 1px solid var(--border);
  padding: 12px 24px 24px;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  max-height: 80vh;
  overflow-y: auto;
  box-shadow: var(--shadow-lift);
}
.mobile-nav.open { display: flex; }
.mobile-nav a {
  padding: 12px 0;
  font-weight: 600;
  color: var(--text-dark);
  border-bottom: 1px solid var(--border);
}
.mobile-nav .btn { margin-top: 16px; }

/* =========================================================
   Condition / symptom search
   ========================================================= */
.cs-band {
  background-color: var(--bg-blue-soft);
  background-image: url("../images/start_here_bg.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding: 56px 0;
}
.cs-card {
  /* Opaque surface so the band's background image never reduces contrast
     of the heading, search input, or buttons that sit on the card. */
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  max-width: 860px;
  margin: 0 auto;
  padding: 40px;
}
.cs-head { text-align: center; margin-bottom: 28px; }
.cs-head h2 { margin-bottom: 10px; }
.cs-head p { font-size: 17px; margin-bottom: 0; color: var(--text); }

.cs-controls {
  display: flex;
  align-items: flex-end;
  gap: 14px;
}
.cs-field { flex: 1; min-width: 0; }
.cs-label {
  display: block;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-dark);
  margin-bottom: 8px;
}
.cs-combo { position: relative; }
.cs-search-icon {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: #8b97a8;
  pointer-events: none;
}
.cs-input {
  width: 100%;
  font-family: inherit;
  font-size: 16px;
  color: var(--text-dark);
  background: var(--white);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-pill);
  padding: 15px 44px 15px 46px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.cs-input::placeholder { color: #9aa6b6; }
.cs-input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 4px var(--primary-soft);
}
.cs-clear {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 26px;
  height: 26px;
  border: none;
  background: var(--bg-gray);
  color: var(--text-dark);
  border-radius: 50%;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cs-clear:hover { background: var(--border); }
/* [hidden] must win over the flex display rules on these elements. */
.cs-clear[hidden], .cs-brief[hidden], .cs-listbox[hidden], .cs-popular[hidden] { display: none; }

/* Popular / pinned topic chips (shown before the patient types) */
.cs-popular {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 16px;
}
.cs-popular-label {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #8b97a8;
}
.cs-popular-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.cs-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-dark);
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  padding: 8px 16px;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.cs-chip:hover {
  border-color: var(--primary);
  background: var(--primary-soft);
  color: var(--primary);
}
.cs-chip.is-pinned {
  border-color: var(--primary);
  color: var(--primary);
  background: var(--primary-soft);
}
.cs-chip.is-pinned:hover {
  background: var(--primary);
  color: var(--white);
}
.cs-chip-star { font-size: 12px; line-height: 1; }

.cs-listbox {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  z-index: 50;
  margin: 0;
  padding: 6px;
  list-style: none;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-lift);
  max-height: 320px;
  overflow-y: auto;
}
.cs-option {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.cs-option:hover,
.cs-option.is-active {
  background: var(--primary-soft);
}
.cs-option-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-dark);
}
.cs-option-title mark {
  background: transparent;
  color: var(--primary);
  font-weight: 700;
}
.cs-option-desc {
  font-size: 13px;
  color: var(--text);
  line-height: 1.35;
}
.cs-empty {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 14px;
  font-size: 14px;
  color: var(--text);
  text-align: center;
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.cs-empty:hover { background: var(--primary-soft); }
.cs-empty-lead { color: var(--text-dark); font-weight: 600; }
.cs-empty-book { color: var(--primary); font-weight: 700; }
.cs-cta { flex-shrink: 0; }

.cs-brief {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-top: 20px;
  padding: 16px 18px;
  background: var(--bg-gray);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.cs-brief-icon { color: var(--primary); flex-shrink: 0; margin-top: 1px; }
.cs-brief-body { margin: 0; font-size: 15px; line-height: 1.5; }
.cs-brief-title { color: var(--text-dark); display: block; margin-bottom: 2px; }
.cs-brief-desc { color: var(--text); }

.cs-footnote {
  font-size: 13px;
  color: #8b97a8;
  text-align: center;
  margin: 20px 0 0;
}
.cs-footnote a { color: var(--primary); font-weight: 600; }

/* =========================================================
   Condition-search: mobile overrides
   Placed AFTER the base .cs-* rules above so they win by source order
   (the base .cs-* block sits after the earlier @media blocks, so mobile
   overrides for .cs-* must live here, at the end, to take effect).
   ========================================================= */
@media (max-width: 980px) {
  /* Search bar spans the full width; input stacks above the Book a visit CTA. */
  .cs-controls { flex-direction: column; align-items: stretch; }
  .cs-field { width: 100%; }
  .cs-input { width: 100%; }
  .cs-cta { width: 100%; }
}
@media (max-width: 620px) {
  .cs-card { padding: 28px 20px; }
}