/* WordPress integration fixes for the ported front page.
   The reference CSS has no body reset and no admin-bar handling, which left a
   white gap above the fixed header. */
/* `clip` (not `hidden`) — blocks sideways overflow without creating a scroll
   container, so it can never break position: sticky descendants. */
html, body { margin: 0; padding: 0; overflow-x: clip; }
body { background: var(--forest-deep); }

/* Scroll-progress bar (JS-injected, site-wide). GPU transform only. */
.tmseScrollProgress {
  position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 120;
  transform: scaleX(0); transform-origin: 0 50%;
  background: linear-gradient(90deg, #7fd3a0 0%, #4b9f70 55%, #2d7752 100%);
  box-shadow: 0 1px 10px rgba(75, 159, 112, .5); pointer-events: none;
  transition: transform .08s linear;
}
body.admin-bar .tmseScrollProgress { top: 32px; }
@media screen and (max-width: 782px) { body.admin-bar .tmseScrollProgress { top: 46px; } }
@media (prefers-reduced-motion: reduce) { .tmseScrollProgress { display: none; } }

/* Centered-logo header with a BALANCED split nav — half the links left of the
   logo, half right — so a long menu never collides with the absolutely-centered
   brand, in both the resting and scrolled states. */
.adaptiveNavCore.adaptiveNavSplit { flex: 1; width: 100%; justify-content: space-between; gap: clamp(14px, 2vw, 32px); }
.adaptiveNavSplit .navL, .adaptiveNavRight .navR { display: inline-flex; align-items: center; gap: clamp(10px, 1.4vw, 22px); }
.adaptiveNavRight { display: inline-flex; align-items: center; gap: clamp(14px, 1.8vw, 28px); }
/* On scroll: the reference's floating GLASS PILL — not a flat full-width bar.
   The split nav itself becomes the capsule (rounded, dark glass, shadow), and a
   reserved center LANE (the min gap between the two link groups) keeps the
   absolutely-centered logo clear of both — so the pill look returns with zero
   overlap. Header stays transparent so only the pill floats. */
.adaptiveHeader.isScrolled { background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }
.adaptiveHeader.isScrolled .adaptiveHeaderShell { width: min(1280px, 100% - 40px); }
.adaptiveHeader.isScrolled .adaptiveNavCore.adaptiveNavSplit {
  min-height: 56px; padding: 6px 10px 6px 28px; border-radius: 999px;
  gap: clamp(130px, 15vw, 230px);
  background: rgba(3, 27, 20, .82);
  border: 1px solid rgba(194, 234, 208, .16);
  box-shadow: 0 18px 44px rgba(0, 13, 9, .32), inset 0 1px rgba(255, 255, 255, .06);
  -webkit-backdrop-filter: blur(24px) saturate(1.16); backdrop-filter: blur(24px) saturate(1.16);
}
.adaptiveHeader.isScrolled .adaptiveNavLinks a,
.adaptiveHeader.isScrolled .adaptiveNavCall { font-size: 11.5px; }
.adaptiveHeader.isScrolled .adaptiveNavCta { min-height: 42px; padding-inline: 17px; }
/* Below the reference's own mid-desktop breakpoint the pill would crowd; drop
   the secondary center lane so it never collides on smaller laptops. */
@media (max-width: 1120px) {
  .adaptiveHeader.isScrolled .adaptiveNavCore.adaptiveNavSplit { gap: clamp(96px, 11vw, 150px); }
}

/* RESPONSIVE: the ported `/desktop` route hard-locked the page to a 1200px
   minimum (its mobile layout lived on a separate route), forcing horizontal
   overflow on phones/tablets. Releasing it lets the reference's own
   breakpoints (down to 430px) take effect. */
.desktopRoute { min-width: 0 !important; }
img, svg, video { max-width: 100%; }
body.admin-bar .adaptiveHeader { top: 32px; }
@media screen and (max-width: 782px) {
  body.admin-bar .adaptiveHeader { top: 46px; }
}

/* Dynamic condition chips (real treatment links) — same pill as the static
   spans, plus a pointer affordance. */
.conditionTags a {
  color: #ffffffd4; text-decoration: none;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  background: #ffffff09; border: 1px solid #ffffff30; border-radius: 999px;
  padding: 12px 16px; font-size: 11px;
  transition: color .18s, border-color .18s, background .18s, transform .18s;
}
.conditionTags a:hover { color: var(--white); background: #9bd1ae1a; border-color: #9bd1ae99; transform: translateY(-1px); }

/* Reduced heading sizes — the reference type (up to 106px) overflowed and
   wrapped awkwardly; scaled ~30% smaller so copy fits each section cleanly. */
/* Hero kept at the original reference size (per request); other headings reduced. */
.hero h1        { font-size: clamp(58px, 7vw, 106px); }
.reclaim h2     { font-size: clamp(34px, 4.4vw, 60px); }
.sectionHead h2 { font-size: clamp(30px, 3.6vw, 50px); }
.conditions h2  { font-size: clamp(32px, 3.6vw, 50px); }
.processCopy h2 { font-size: clamp(32px, 3.6vw, 50px); }
.florida h2     { font-size: clamp(36px, 4.4vw, 60px); }
.faqIntro h2    { font-size: clamp(36px, 4vw,   56px); }
.contact h2     { font-size: clamp(32px, 3.6vw, 52px); }
.footerIntro h2 { font-size: clamp(34px, 3.8vw, 54px); }

/* Added sections use `.section`, which has no background of its own — give
   them a light surface so their dark headings/text are legible (the reference
   sections each set their own bg; the body is dark forest). */
#clinicians.section { background: var(--paper); }
#journal.section    { background: var(--ivory); }

/* Consultation form: the reference `.contact p{color:#fff}` was turning the
   card's paragraphs white-on-white. Out-specify it. */
.xLeadCard .xLeadSub   { color: #66736d; }
.xLeadCard .xLeadFine  { color: #7a857e; }
.xLeadCard .xLeadTitle { color: #10231d; }
.xLeadCard .xLeadField > span { color: #38473f; }

/* Supplemental sections added on top of the reference design (team, testimonials,
   blog). Colors/typography match the reference system (forest green + ivory,
   system fonts) so the additions read as part of the same site. */

.xHead p { max-width: 46ch; }

.xGrid {
  display: grid;
  gap: clamp(16px, 2.2vw, 26px);
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: clamp(28px, 4vw, 48px);
}
@media (max-width: 900px) { .xGrid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .xGrid { grid-template-columns: 1fr; } }

.xCard {
  position: relative;
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid rgba(16, 35, 29, 0.10);
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 20px 45px -30px rgba(6, 31, 25, 0.5);
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.3s;
  text-decoration: none;
  color: inherit;
}
.xCard:hover { transform: translateY(-4px); box-shadow: 0 30px 60px -28px rgba(6, 31, 25, 0.55); }

.xMedia {
  aspect-ratio: 4 / 5;
  background: #dcebe2 center / cover no-repeat;
}
.xMedia.xMediaWide { aspect-ratio: 16 / 10; }

.xBody { padding: clamp(18px, 2vw, 24px); display: flex; flex-direction: column; gap: 7px; flex: 1; }
.xEyebrow {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 9px; letter-spacing: 0.16em; text-transform: uppercase;
  color: #4b8865; font-weight: 700;
}
.xName { font-size: clamp(19px, 2.2vw, 23px); letter-spacing: -0.02em; color: #10231d; font-weight: 500; }
.xRole { color: #2d7752; font-weight: 600; font-size: 14px; }
.xMeta { color: #66736d; font-size: 13px; }

/* Testimonials */
.xQuoteCard {
  display: flex; flex-direction: column; gap: 14px;
  padding: clamp(22px, 2.4vw, 30px);
  background: #fff; border: 1px solid rgba(16, 35, 29, 0.10); border-radius: 24px;
  box-shadow: 0 20px 45px -30px rgba(6, 31, 25, 0.5);
}
.xQuoteMark { color: #4b9f70; font-size: 42px; line-height: 0.5; font-weight: 700; }
.xQuoteText { color: #22322c; font-size: 16px; line-height: 1.55; flex: 1; }
.xStars { color: #4b9f70; letter-spacing: 2px; font-size: 13px; }
.xQuoteWho { font-weight: 600; color: #10231d; }
.xQuoteWhere { color: #66736d; font-size: 13px; }

/* Blog */
.xPostDate {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px; color: #66736d; letter-spacing: 0.06em; text-transform: uppercase;
}
.xPostExcerpt { color: #45554e; font-size: 14px; line-height: 1.5; }
.xReadmore { margin-top: auto; color: #2d7752; font-weight: 600; font-size: 14px; display: inline-flex; gap: 6px; align-items: center; }

/* Tinted section background to alternate rhythm, matching the reference wash */
.xSectionMint { background: linear-gradient(180deg, #f3f8f4, #e9f2eb); }

/* Florida interactive map ------------------------------------------------- */
.xFloridaGrid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(28px, 4vw, 64px);
  align-items: center;
  text-align: left;
}
.xFloridaText { display: flex; flex-direction: column; align-items: flex-start; }
.xFloridaMap { position: relative; }
.xFloridaMap::before {
  content: ""; position: absolute; inset: -8% -6%; z-index: 0; pointer-events: none;
  background: radial-gradient(ellipse at center, rgba(3, 21, 16, 0.6), transparent 70%);
}
.xFlMap {
  position: relative; z-index: 1;
  width: 100%; height: auto; display: block; overflow: visible;
  filter: drop-shadow(0 24px 48px rgba(0, 12, 8, 0.45));
}
.xFlMap path { transition: fill 0.2s, stroke 0.2s; }
.xFlMap .fl-off > path,
.xFlMap path.fl-off { fill: rgba(220, 235, 226, 0.08); stroke: rgba(220, 235, 226, 0.18); stroke-width: 1; }
.xFlMap .fl-county path { fill: rgba(75, 159, 112, 0.62); stroke: #9bd1ae; stroke-width: 1.1; cursor: pointer; }
.xFlMap .fl-county:hover path,
.xFlMap .fl-county:focus-visible path { fill: #6fce9a; stroke: #f5f3ec; outline: none; }
.xFlMapCaption {
  display: block; margin-top: 16px; text-align: center;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  color: rgba(245, 243, 236, 0.62);
}
@media (max-width: 900px) {
  .xFloridaGrid { grid-template-columns: 1fr; text-align: center; }
  .xFloridaText { align-items: center; }
  .xFloridaMap { max-width: 420px; margin: 8px auto 0; }
}

/* Consultation form ------------------------------------------------------- */
.xLeadPhone { margin-top: 26px; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.xLeadPhone > span { font-size: 13px; color: rgba(245, 243, 236, 0.7); }

.xLeadCard {
  background: #fbfaf6;
  border: 1px solid rgba(16, 35, 29, 0.10);
  border-radius: 24px;
  padding: clamp(24px, 3vw, 38px);
  box-shadow: 0 30px 70px -30px rgba(3, 21, 16, 0.6);
  color: #10231d;
}
.xLeadKicker {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: #4b8865; font-weight: 700;
}
.xLeadTitle { font-size: clamp(24px, 3vw, 31px); letter-spacing: -0.03em; font-weight: 450; margin: 10px 0 6px; color: #10231d; }
.xLeadSub { color: #66736d; font-size: 14px; line-height: 1.6; margin: 0 0 20px; }

.xLeadGrid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.xLeadField { display: flex; flex-direction: column; gap: 6px; }
.xLeadField--full { grid-column: 1 / -1; }
.xLeadField > span { font-size: 12px; font-weight: 600; color: #38473f; letter-spacing: 0.01em; }
.xLeadField > span b { color: #b4472e; font-weight: 700; }
.xLeadField input, .xLeadField select, .xLeadField textarea {
  font: inherit; font-size: 15px; color: #10231d;
  background: #fff; border: 1px solid #d5ddd6; border-radius: 12px;
  padding: 12px 14px; width: 100%; transition: border-color 0.15s, box-shadow 0.15s;
}
.xLeadField textarea { resize: vertical; min-height: 84px; }
.xLeadField input:focus, .xLeadField select:focus, .xLeadField textarea:focus {
  outline: none; border-color: #4b9f70; box-shadow: 0 0 0 3px rgba(75, 159, 112, 0.18);
}
.xHp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.xLeadSubmit {
  margin-top: 18px; width: 100%; border: 0; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  background: linear-gradient(145deg, #225f46 0%, #0f3f2f 55%, #082b21 100%);
  color: #eafff3; font: inherit; font-size: 15px; font-weight: 600;
  padding: 15px 22px; border-radius: 999px; letter-spacing: 0.01em;
  transition: transform 0.2s, box-shadow 0.2s, opacity 0.2s;
  box-shadow: 0 16px 34px -16px rgba(8, 43, 33, 0.8);
}
.xLeadSubmit:hover { transform: translateY(-2px); box-shadow: 0 22px 44px -18px rgba(8, 43, 33, 0.9); }
.xLeadSubmit[disabled] { opacity: 0.65; cursor: default; transform: none; }
.xLeadSpin { width: 16px; height: 16px; border-radius: 50%; border: 2px solid rgba(234, 255, 243, 0.35); border-top-color: #eafff3; animation: xspin 0.7s linear infinite; display: none; }
.xLeadSubmit.is-loading .xLeadSpin { display: inline-block; }
@keyframes xspin { to { transform: rotate(360deg); } }

.xLeadNote { margin: 14px 0 0; font-size: 14px; line-height: 1.5; padding: 12px 14px; border-radius: 12px; }
.xLeadNote.is-error { background: #fbeae6; color: #9a3418; border: 1px solid #f0c9bd; }
.xLeadNote.is-success { background: #e6f4ec; color: #1c6b43; border: 1px solid #bfe3cd; }
.xLeadFine { margin: 14px 0 0; font-size: 12px; color: #7a857e; text-align: center; }

@media (max-width: 520px) { .xLeadGrid { grid-template-columns: 1fr; } }

/* Contact layout — wider form, tighter copy, single clean card (drop the
   reference's inner frame so it isn't a card-in-a-card). */
.contactInner {
  grid-template-columns: minmax(0, 1fr) minmax(440px, 0.92fr);
  gap: clamp(28px, 3vw, 52px);
  padding: clamp(32px, 4vw, 58px);
}
.contactAction {
  padding: 0; background: none; border: 0;
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
.contactAction::after { display: none; }
.xLeadCard { padding: clamp(28px, 2.6vw, 40px); }
@media (max-width: 900px) {
  .contactInner { grid-template-columns: 1fr; }
  .xLeadCard { padding: 26px; }
}

/* Professional footer link columns (forest vibe) --------------------------- */
.xFooterCols {
  display: grid;
  grid-template-columns: 1.1fr 1fr 1fr 1.15fr;
  gap: clamp(24px, 3vw, 56px);
  padding-block: clamp(36px, 4vw, 54px);
  border-top: 1px solid rgba(255, 255, 255, 0.10);
  margin-top: clamp(20px, 3vw, 40px);
}
@media (max-width: 860px) { .xFooterCols { grid-template-columns: 1fr 1fr; gap: 34px; } }
@media (max-width: 520px) { .xFooterCols { grid-template-columns: 1fr; } }
.xFootHead {
  display: block; margin-bottom: 16px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase;
  color: #9bd1ae; font-weight: 700;
}
.xFootCol ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 11px; }
.xFootCol a { color: rgba(245, 243, 236, 0.72); font-size: 14px; transition: color 0.15s; }
.xFootCol a:hover { color: #fff; }
.xFootContact { display: flex; flex-direction: column; gap: 3px; }
.xFootContact .xFootLabel { font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(245, 243, 236, 0.45); margin-top: 14px; }
.xFootContact .xFootLabel:first-of-type { margin-top: 0; }
.xFootContact a { color: rgba(245, 243, 236, 0.9); font-size: 14px; }
.xFootBig { font-size: 21px; font-weight: 600; color: #fff; letter-spacing: -0.01em; }

/* Treatment cards using an uploaded post thumbnail: force a clean cover-fit and
   apply the reference's green wash so real photos match the art-directed set. */
.treatmentImage.txPhoto { background-repeat: no-repeat; }
.treatmentImage.txPhoto::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(157deg, rgba(11, 48, 38, 0.30) 0%, transparent 46%),
    linear-gradient(0deg, rgba(6, 31, 25, 0.55) 0%, transparent 55%);
  mix-blend-mode: multiply;
}
.treatmentImage.txPhoto .imageBadge,
.treatmentImage.txPhoto .imagePulse { z-index: 2; }

/* Treatment card: clickable title + tighter spacing above the "Learn more"
   button (reference used min-height:300px + margin-top:auto → large gap).
   The reference `.treatmentBody a` rule (uppercase, green, width:max-content,
   inline-flex) leaks onto the title link and makes long titles overflow — so
   the title link must reset those to render as a normal wrapping heading. */
.treatmentBody h3 .txTitleLink {
  display: inline; width: auto;
  color: inherit; font: inherit; letter-spacing: inherit;
  text-transform: none; white-space: normal;
  padding: 0; margin: 0; gap: 0;
  transition: color 0.15s;
}
.treatmentBody h3 .txTitleLink:hover { color: #2d7752; }
.treatmentBody { min-height: 0; }
.treatmentBody a.signalTextLink { margin-top: 22px; }

/* ==========================================================================
   PHONE (<=600px): several headings use hard <br> line-breaks tuned for
   desktop, which overflow narrow screens. Let them wrap naturally and size
   them down. Desktop stays at the reference/large sizes.
   ========================================================================== */
@media (max-width: 600px) {
  /* Force every content container to the viewport width. The reference sizes
     `.shell` with range-syntax media queries that don't resolve here, leaving
     it wider than the screen (headings/paragraphs then overflow and clip). */
  .shell {
    width: auto !important;
    max-width: 100% !important;
    margin-inline: 0 !important;
    padding-inline: 20px;
    box-sizing: border-box;
  }

  .hero h1, .introTitle, .reclaim h2, .sectionHead h2, .conditions h2,
  .processCopy h2, .florida h2, .faqIntro h2, .contact h2, .footerIntro h2 {
    white-space: normal !important; overflow-wrap: break-word; max-width: 100%;
  }
  .hero h1     { font-size: clamp(32px, 9vw, 44px) !important; }
  .introTitle  { font-size: clamp(28px, 8vw, 38px) !important; }
  .reclaim h2, .sectionHead h2, .conditions h2, .processCopy h2,
  .florida h2, .faqIntro h2, .contact h2, .footerIntro h2 { font-size: clamp(26px, 7.4vw, 36px) !important; }

  /* Tighten oversized section padding on phones */
  .conditions { padding-block: 64px; }
  .contact { padding-block: 32px; }
}

/* ==========================================================================
   MOBILE HEADER (<=900px): collapse to the reference's compact chrome —
   brand · "Call now" pill · dot-grid menu button (the drawer holds the
   links). Re-stated here in classic max-width syntax AND at split-nav
   specificity: the reference's own mobile rules use `width<=` range queries
   and single-class selectors, so the .adaptiveNavSplit/.navL/.navR rules
   above would otherwise out-rank them and keep the desktop links visible.
   Colors are scoped to :not(.innerHeader) so the light inner-page header
   keeps its own palette (inner.css).
   ========================================================================== */
@media (max-width: 900px) {
  .adaptiveHeader:not(.innerHeader) {
    min-height: 70px;
    background: rgba(3, 28, 21, .72);
    border-bottom: 1px solid rgba(194, 234, 208, .13);
    -webkit-backdrop-filter: blur(22px) saturate(1.12);
    backdrop-filter: blur(22px) saturate(1.12);
  }
  .adaptiveHeaderShell,
  .adaptiveHeader.isScrolled .adaptiveHeaderShell { width: calc(100% - 28px); min-height: 70px; padding-top: 0; }
  .adaptiveHeaderBrand,
  .adaptiveHeader.isScrolled .adaptiveHeaderBrand { position: static; transform: none; margin-right: auto; }
  .adaptiveHeaderBrand .brandType strong { font-size: 22px; }

  /* Split-nav capsule collapses; the scrolled glass pill is disabled. */
  .adaptiveNavCore.adaptiveNavSplit,
  .adaptiveHeader.isScrolled .adaptiveNavCore.adaptiveNavSplit {
    flex: none; width: auto; min-height: 0; gap: 0; padding: 0;
    border: 0; border-radius: 0; background: transparent;
    box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none;
  }
  .adaptiveNavSplit .navL, .adaptiveNavRight .navR, .adaptiveNavCall { display: none; }
  .adaptiveNavRight { gap: 0; }

  .adaptiveNavCta { min-height: 42px; padding-inline: 16px; }
  .adaptiveNavCtaDesktop { display: none; }
  .adaptiveNavCtaMobile { display: inline; }

  .adaptiveMenuButton,
  .adaptiveHeader.isScrolled .adaptiveMenuButton {
    width: 44px; height: 44px;
    -webkit-backdrop-filter: none; backdrop-filter: none;
  }
  .adaptiveHeader:not(.innerHeader) .adaptiveMenuButton,
  .adaptiveHeader:not(.innerHeader).isScrolled .adaptiveMenuButton {
    background: rgba(255, 255, 255, .07);
    border-color: rgba(194, 234, 208, .17);
    box-shadow: inset 0 1px rgba(255, 255, 255, .06);
  }
  .navDotGrid { transform: scale(.86); }
}
@media (max-width: 540px) {
  .adaptiveHeaderShell,
  .adaptiveHeader.isScrolled .adaptiveHeaderShell { gap: 7px; width: calc(100% - 22px); }
  .adaptiveHeaderBrand .pulseMark { width: 24px; }
  .adaptiveHeaderBrand .brand { gap: 8px; }
  .adaptiveHeaderBrand .brandType strong { font-size: 20px; }
  .adaptiveHeaderBrand .brandType span { font-size: 7px; }
  .adaptiveNavCta { min-height: 40px; padding-inline: 13px; font-size: 11px; }
  .adaptiveMenuButton,
  .adaptiveHeader.isScrolled .adaptiveMenuButton { width: 41px; height: 41px; }
}