/* ============================================================
   SELF-HOSTED WEBFONTS — must stay at the very top of this file
   ============================================================
   These @font-face rules are inlined rather than @import-ed. CSS
   ignores @import unless it precedes every other rule, so an
   @import further down the file silently does nothing and the
   whole site falls back to Georgia. Inlining removes that trap
   and saves a round trip.

   Generated from Google Fonts and served from our own origin: a
   request to fonts.gstatic.com would send the visitor's IP and
   the page URL to a third party on every page load, which is not
   acceptable on a Florida medical site. See docs/COMPLIANCE.md.

   Fraunces + Plus Jakarta Sans, SIL Open Font License 1.1.
   Variable fonts, latin and latin-ext subsets only.
   ============================================================ */

/* latin-ext */
@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-weight: 400 600;
  font-display: swap;
  src: url(/assets/fonts/fraunces-italic-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-weight: 400 600;
  font-display: swap;
  src: url(/assets/fonts/fraunces-italic-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin-ext */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url(/assets/fonts/fraunces-normal-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url(/assets/fonts/fraunces-normal-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin-ext */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url(/assets/fonts/plus-jakarta-sans-normal-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url(/assets/fonts/plus-jakarta-sans-normal-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ============================================================
   ASK HEALTH — design system
   "Quiet clinical editorial" — deep navy on cool white,
   Fraunces display serif + Plus Jakarta Sans, arch frames
   echoing the circular tree logomark.

   PALETTE — sourced from ask-health.net. The four brand colors
   are #023955 navy, #F6F8FB cool off-white, #7FA7CD light blue,
   #7F98B0 slate. Two derived shades exist for one reason only:
   #7FA7CD on white is 2.53:1 and #7F98B0 is 2.99:1, both below
   the WCAG AA 4.5:1 floor for body text. --brand and --muted are
   darker shades of those same hues, legible on light backgrounds.
   The originals are still used at full strength on navy, where
   they clear AA comfortably (4.84:1).
   ============================================================ */

:root {
  /* palette */
  --ink: #023955;          /* BRAND navy — headings, dark surfaces */
  --ink-deep: #023955;     /* dark surfaces use the brand navy exactly */
  --ink-soft: #33586e;     /* softened navy for body copy (7.6:1 on white) */
  --brand: #3c6d9a;        /* darker shade of --sky for accent text (5.5:1) */
  --sky: #7fa7cd;          /* BRAND light blue — accents on navy, fills */
  --sky-wash: #dce7f2;     /* pale tint of --sky */
  --slate: #7f98b0;        /* BRAND slate — decorative rules & outlines */
  --muted: #55718b;        /* darker shade of --slate for meta text (5.1:1) */
  --paper: #ffffff;        /* base sections */
  --paper-deep: #f6f8fb;   /* BRAND cool off-white — alternating sections */
  --card: #ffffff;         /* card surface */
  --line: rgba(2, 57, 85, 0.14);      /* hairline rules */
  --line-strong: rgba(2, 57, 85, 0.3);

  /* type */
  --serif: "Fraunces", "Georgia", serif;
  --sans: "Plus Jakarta Sans", "Helvetica Neue", sans-serif;

  /* rhythm */
  --section-pad: clamp(4.5rem, 10vw, 8.5rem);
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --radius: 20px;
  --arch: 999px 999px 22px 22px;      /* signature arch frame */

  --shadow-soft: 0 18px 50px -22px rgba(2, 57, 85, 0.35);
  --shadow-lift: 0 26px 60px -20px rgba(2, 57, 85, 0.45);

  --ease-out: cubic-bezier(0.19, 1, 0.22, 1);
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--ink-soft);
  background: var(--paper);
  overflow-x: hidden;
}

/* paper grain over everything, very subtle */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 4;
  opacity: 0.4;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.035 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

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

::selection { background: var(--sky); color: var(--ink-deep); }

h1, h2, h3, .serif {
  font-family: var(--serif);
  font-weight: 500;
  color: var(--ink);
  line-height: 1.12;
  letter-spacing: -0.01em;
}

.em-i {
  font-style: italic;
  font-weight: 400;
  color: var(--brand);
}

.container {
  width: min(1180px, 100% - 2 * var(--gutter));
  margin-inline: auto;
}

.section { padding-block: var(--section-pad); position: relative; }
.section--alt { background: var(--paper-deep); }
.section--ink { background: var(--ink-deep); color: rgba(255, 255, 255, 0.82); }
.section--ink h2, .section--ink h3 { color: #fff; }

/* eyebrow labels: "01 · Who we serve" */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--brand);
  margin-bottom: 1.4rem;
}
.eyebrow::before {
  content: "";
  width: 34px;
  height: 1px;
  background: currentColor;
  opacity: 0.7;
}
.section--ink .eyebrow { color: var(--sky); }

.section-head { max-width: 640px; margin-bottom: clamp(2.5rem, 6vw, 4.5rem); }
.section-head h2 { font-size: clamp(2rem, 4.6vw, 3.3rem); margin-bottom: 1rem; }
.section-head p { font-size: 1.06rem; }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head--center .eyebrow { justify-content: center; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.95rem 1.8rem;
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.01em;
  transition: transform 0.35s var(--ease-out), box-shadow 0.35s var(--ease-out), background 0.25s, color 0.25s;
  will-change: transform;
}
.btn svg { transition: transform 0.35s var(--ease-out); flex: none; }
.btn:hover svg { transform: translateX(4px); }

.btn--primary { background: var(--ink); color: #fff; box-shadow: var(--shadow-soft); }
.btn--primary:hover { background: var(--brand); transform: translateY(-2px); box-shadow: var(--shadow-lift); }

.btn--ghost { border: 1px solid var(--line-strong); color: var(--ink); }
.btn--ghost:hover { border-color: var(--brand); color: var(--brand); transform: translateY(-2px); }

.btn--light { background: #fff; color: var(--ink); }
.btn--light:hover { background: var(--brand); color: #fff; transform: translateY(-2px); }

.text-link {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--ink);
  border-bottom: 1px solid var(--line-strong);
  padding-bottom: 2px;
  transition: color 0.25s, border-color 0.25s, gap 0.25s;
}
.text-link:hover { color: var(--brand); border-color: var(--brand); gap: 0.7rem; }

/* ============================================================
   HEADER
   ============================================================ */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  transition: background 0.35s, box-shadow 0.35s, transform 0.4s var(--ease-out);
}
.site-header.is-scrolled {
  background: rgba(255, 255, 255, 0.88);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow: 0 1px 0 var(--line);
}
.site-header.is-hidden { transform: translateY(-100%); }

.nav-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding-block: 1.05rem;
}
.brand img { height: 40px; width: auto; }

.nav-links {
  display: flex;
  align-items: center;
  gap: clamp(1.2rem, 2.5vw, 2.2rem);
}
.nav-links a:not(.btn) {
  font-size: 0.94rem;
  font-weight: 600;
  color: var(--ink);
  position: relative;
  padding-block: 0.3rem;
}
.nav-links a:not(.btn)::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%;
  height: 2px;
  border-radius: 2px;
  background: var(--brand);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s var(--ease-out);
}
.nav-links a:not(.btn):hover::after,
.nav-links a.is-active::after { transform: scaleX(1); }
.nav-links .btn { padding: 0.65rem 1.35rem; font-size: 0.88rem; }

/* hamburger */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  align-items: center;
  border-radius: 12px;
  z-index: 110;
}
.nav-toggle span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--ink);
  border-radius: 2px;
  transition: transform 0.35s var(--ease-out), opacity 0.25s;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 900px) {
  .nav-toggle { display: flex; }
  .nav-links {
    position: fixed;
    inset: 0;
    z-index: 105;
    flex-direction: column;
    justify-content: center;
    gap: 1.6rem;
    background: var(--paper);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.35s;
  }
  .nav-links.is-open { opacity: 1; pointer-events: auto; }
  .nav-links a:not(.btn) { font-size: 1.5rem; font-family: var(--serif); font-weight: 500; }
  .nav-links .btn { margin-top: 0.5rem; padding: 0.9rem 2rem; font-size: 1rem; }
  body.nav-locked { overflow: hidden; }
}

/* ============================================================
   HERO (home)
   ============================================================ */
.hero {
  position: relative;
  padding-top: clamp(7.5rem, 16vh, 11rem);
  padding-bottom: clamp(3.5rem, 8vw, 6rem);
  overflow: hidden;
}
/* soft radial washes behind hero */
.hero::before {
  content: "";
  position: absolute;
  top: -22%; right: -14%;
  width: 62vw; height: 62vw;
  max-width: 860px; max-height: 860px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(127, 167, 205, 0.35), transparent 65%);
  pointer-events: none;
}
.hero::after {
  content: "";
  position: absolute;
  bottom: -30%; left: -12%;
  width: 46vw; height: 46vw;
  max-width: 600px; max-height: 600px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(2, 57, 85, 0.08), transparent 65%);
  pointer-events: none;
}

.hero-grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: clamp(2rem, 6vw, 5rem);
  align-items: center;
}

.hero-copy h1 {
  font-size: clamp(2.7rem, 6.2vw, 4.6rem);
  margin-bottom: 1.5rem;
}
.hero-copy .lede {
  font-size: clamp(1.05rem, 1.6vw, 1.25rem);
  max-width: 46ch;
  margin-bottom: 2.2rem;
}
.hero-cta { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; }

.hero-ticker {
  margin-top: 3rem;
  display: flex;
  gap: 2.4rem;
  flex-wrap: wrap;
}
.hero-ticker .tick strong {
  display: block;
  font-family: var(--serif);
  font-size: 1.7rem;
  color: var(--ink);
  line-height: 1.1;
}
.hero-ticker .tick span {
  font-size: 0.8rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--muted);
}

/* arch photo with orbiting chips */
.hero-visual { position: relative; }
.hero-visual .arch-frame {
  border-radius: var(--arch);
  overflow: hidden;
  box-shadow: var(--shadow-lift);
  aspect-ratio: 4 / 4.6;
}
.hero-visual .arch-frame img {
  width: 100%; height: 100%;
  object-fit: cover;
  transform: scale(1.06);
}
/* dotted ring ornament */
.hero-visual::before {
  content: "";
  position: absolute;
  top: -7%; left: -12%;
  width: 58%;
  aspect-ratio: 1;
  border-radius: 50%;
  border: 1.5px dashed rgba(2, 57, 85, 0.3);
  animation: spin 60s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.float-chip {
  position: absolute;
  background: var(--card);
  border-radius: 16px;
  box-shadow: var(--shadow-soft);
  padding: 0.85rem 1.15rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--ink);
  animation: floaty 7s ease-in-out infinite;
}
.float-chip small { display: block; font-weight: 500; color: var(--muted); font-size: 0.75rem; }
.float-chip .dot {
  width: 38px; height: 38px;
  flex: none;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--sky-wash);
  color: var(--ink);
}
.float-chip--tl { top: 14%; left: -14%; }
.float-chip--br { bottom: 8%; right: -8%; animation-delay: -3.5s; }
@keyframes floaty {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-12px); }
}

.scroll-hint {
  position: relative;
  z-index: 2;
  margin-top: clamp(2.5rem, 6vw, 4rem);
  display: flex;
  align-items: center;
  gap: 0.9rem;
  font-size: 0.78rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--muted);
}
.scroll-hint .wheel {
  width: 22px; height: 34px;
  border: 1.5px solid var(--slate);
  border-radius: 999px;
  position: relative;
}
.scroll-hint .wheel::after {
  content: "";
  position: absolute;
  top: 6px; left: 50%;
  width: 3px; height: 7px;
  margin-left: -1.5px;
  border-radius: 3px;
  background: var(--brand);
  animation: wheel 1.8s ease-in-out infinite;
}
@keyframes wheel {
  0% { transform: translateY(0); opacity: 1; }
  70% { transform: translateY(10px); opacity: 0; }
  100% { transform: translateY(0); opacity: 0; }
}

@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-visual { max-width: 420px; margin-inline: auto; width: 100%; }
  /* pull the floating chips fully inside the photo so they never hang into
     the page margin on a stacked layout */
  .float-chip--tl { top: 6%; left: 3%; }
  .float-chip--br { bottom: 6%; right: 3%; }
}

/* phones: declutter the hero. the decorative dashed ring clips off the
   screen edge, and the proof chips crowd a ~300px-wide photo — shrink the
   chips, keep them inside the image, and drop the ring. */
@media (max-width: 600px) {
  .hero-visual::before { display: none; }
  .float-chip { font-size: 0.8rem; padding: 0.65rem 0.9rem; gap: 0.6rem; }
  .float-chip small { font-size: 0.72rem; }
  .float-chip .dot { width: 32px; height: 32px; }
  .float-chip--tl { top: 5%; left: 3%; }
  .float-chip--br { bottom: 5%; right: 3%; }
}

/* ============================================================
   MARQUEE — specialties strip
   ============================================================ */
.marquee {
  background: var(--ink);
  color: rgba(255, 255, 255, 0.9);
  overflow: hidden;
  padding-block: 1.1rem;
  position: relative;
  transform: rotate(0.001deg);
}
.marquee-track {
  display: flex;
  gap: 3rem;
  width: max-content;
  animation: marquee 40s linear infinite;
}
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee-track span {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.15rem;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 3rem;
}
.marquee-track span::after {
  content: "✚";
  font-style: normal;
  font-size: 0.7rem;
  color: var(--sky);
}
@keyframes marquee { to { transform: translateX(-50%); } }

/* ============================================================
   AUDIENCE CARDS — who we serve
   ============================================================ */
.audience-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(1.2rem, 3vw, 2rem);
}
.audience-card {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--ink-deep);
  min-height: 380px;
  display: flex;
  align-items: flex-end;
  box-shadow: var(--shadow-soft);
  transition: transform 0.5s var(--ease-out), box-shadow 0.5s var(--ease-out);
}
.audience-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lift); }
.audience-card img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0.85;
  transition: transform 0.8s var(--ease-out), opacity 0.5s;
}
.audience-card:hover img { transform: scale(1.05); opacity: 0.65; }
.audience-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(2, 57, 85, 0.94) 12%, rgba(2, 57, 85, 0.3) 55%, transparent);
}
.audience-card .card-body {
  position: relative;
  z-index: 2;
  padding: clamp(1.4rem, 3vw, 2.2rem);
  color: rgba(255, 255, 255, 0.85);
}
.audience-card .card-index {
  font-family: var(--serif);
  font-style: italic;
  color: var(--sky);
  font-size: 0.95rem;
  display: block;
  margin-bottom: 0.4rem;
}
.audience-card h3 { color: #fff; font-size: clamp(1.4rem, 2.4vw, 1.8rem); margin-bottom: 0.6rem; }
.audience-card p {
  font-size: 0.95rem;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height 0.6s var(--ease-out), opacity 0.4s 0.1s;
}
.audience-card:hover p, .audience-card:focus-within p { max-height: 200px; opacity: 1; }
.audience-card .text-link { color: #fff; border-color: rgba(255,255,255,0.4); margin-top: 0.9rem; }
.audience-card .text-link:hover { color: var(--sky); border-color: var(--sky); }

@media (max-width: 720px) {
  .audience-grid { grid-template-columns: 1fr; }
  .audience-card { min-height: 300px; }
  .audience-card p { max-height: none; opacity: 1; }
}

/* ============================================================
   STATS — the reality of post-acute care
   ============================================================ */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  border-left: 1px solid rgba(255, 255, 255, 0.16);
}
.stat-cell {
  padding: clamp(1.8rem, 4vw, 3rem) clamp(1.4rem, 3vw, 2.4rem);
  border-right: 1px solid rgba(255, 255, 255, 0.16);
  border-bottom: 1px solid rgba(255, 255, 255, 0.16);
}
.stat-cell .num {
  font-family: var(--serif);
  font-size: clamp(2.6rem, 5.5vw, 4rem);
  color: #fff;
  line-height: 1;
  display: flex;
  align-items: baseline;
  gap: 0.1em;
}
.stat-cell .num .unit { font-size: 0.45em; color: var(--sky); font-style: italic; }
.stat-cell p { margin-top: 0.8rem; font-size: 0.92rem; color: rgba(255, 255, 255, 0.65); max-width: 30ch; }

@media (max-width: 900px) { .stats-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .stats-grid { grid-template-columns: 1fr; } }

/* ============================================================
   SPLIT SECTIONS (about preview, model)
   ============================================================ */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2.5rem, 7vw, 6rem);
  align-items: center;
}
.split--rev > .split-visual { order: 2; }
.split-visual { position: relative; }
.split-visual .arch-frame {
  border-radius: var(--arch);
  overflow: hidden;
  box-shadow: var(--shadow-lift);
  aspect-ratio: 4 / 4.4;
}
.split-visual .arch-frame img { width: 100%; height: 100%; object-fit: cover; }
.split-visual .badge-circle {
  position: absolute;
  right: -6%;
  bottom: 10%;
  /* min width + tracking are sized so the longest word ("READMISSIONS")
     fits the circle at every viewport; at 110px it overflowed by 27px */
  width: clamp(132px, 14vw, 152px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--sky);
  color: var(--ink);
  display: grid;
  place-items: center;
  text-align: center;
  font-size: clamp(0.62rem, 0.4vw + 0.48rem, 0.72rem);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.45;
  padding: 0.85rem;
  box-shadow: var(--shadow-soft);
  animation: floaty 8s ease-in-out infinite;
}
.split-copy h2 { font-size: clamp(2rem, 4.2vw, 3rem); margin-bottom: 1.2rem; }
.split-copy p + p { margin-top: 1rem; }
.split-copy .btn, .split-copy .text-link { margin-top: 1.8rem; }

.check-list { margin-top: 1.6rem; display: grid; gap: 0.9rem; }
.check-list li {
  display: flex;
  gap: 0.85rem;
  align-items: flex-start;
  font-size: 0.98rem;
}
.check-list li::before {
  content: "✚";
  flex: none;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--sky-wash);
  color: var(--ink);
  font-size: 0.65rem;
  display: grid;
  place-items: center;
  margin-top: 0.15rem;
}
.section--ink .check-list li::before { background: rgba(255,255,255,0.12); color: var(--sky); }

@media (max-width: 860px) {
  .split { grid-template-columns: 1fr; }
  .split--rev > .split-visual { order: 0; }
  .split-visual { max-width: 440px; }
  /* the badge hangs outside the arch on desktop; on narrow screens that
     -6% offset pushes it past the viewport, so tuck it back inside */
  .split-visual .badge-circle { right: 0; }
}

/* ============================================================
   SERVICES
   ============================================================ */
.services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1rem, 2.5vw, 1.6rem);
}
.service-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(1.5rem, 3vw, 2rem);
  position: relative;
  overflow: hidden;
  transition: transform 0.45s var(--ease-out), box-shadow 0.45s var(--ease-out), border-color 0.3s;
}
.service-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-soft);
  border-color: transparent;
}
.service-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 3px;
  background: linear-gradient(90deg, var(--brand), var(--sky));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.5s var(--ease-out);
}
.service-card:hover::before { transform: scaleX(1); }
.service-card .glyph {
  width: 52px; height: 52px;
  border-radius: 16px;
  background: var(--sky-wash);
  color: var(--ink);
  display: grid;
  place-items: center;
  margin-bottom: 1.2rem;
  transition: background 0.3s, color 0.3s, transform 0.45s var(--ease-out);
}
.service-card:hover .glyph { background: var(--ink); color: #fff; transform: rotate(-6deg) scale(1.05); }
.service-card h3 { font-size: 1.25rem; margin-bottom: 0.5rem; }
.service-card p { font-size: 0.93rem; }
.service-card .soon {
  position: absolute;
  top: 1.1rem; right: 1.1rem;
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  /* navy, not --brand: at 10.5px bold this pill needs the full 4.5:1,
     and --brand on --sky-wash only reaches 4.36:1 */
  color: var(--ink);
  background: var(--sky-wash);
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
}

.services-grid--four { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1080px) { .services-grid--four { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 900px) { .services-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 580px) { .services-grid, .services-grid--four { grid-template-columns: 1fr; } }

/* ============================================================
   TESTIMONIALS — horizontal snap scroller
   ============================================================ */
.testi-rail-wrap { position: relative; }
.testi-rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: min(430px, 82vw);
  gap: clamp(1rem, 2.5vw, 1.6rem);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 1.4rem;
  scrollbar-width: none;
  cursor: grab;
}
.testi-rail::-webkit-scrollbar { display: none; }
.testi-rail.is-dragging { cursor: grabbing; scroll-snap-type: none; }
.testi-card {
  scroll-snap-align: start;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(1.6rem, 3vw, 2.2rem);
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
}
.testi-card .quote-mark {
  font-family: var(--serif);
  font-size: 3.4rem;
  line-height: 0.6;
  color: var(--sky);
  padding-top: 0.75rem;
}
.testi-card blockquote {
  font-family: var(--serif);
  font-size: 1.12rem;
  line-height: 1.55;
  color: var(--ink);
  flex: 1;
}
.testi-card figcaption { display: flex; align-items: center; gap: 0.9rem; }
.testi-card .avatar {
  width: 46px; height: 46px;
  flex: none;
  border-radius: 50%;
  background: var(--ink);
  color: #fff;
  font-weight: 700;
  font-size: 0.9rem;
  display: grid;
  place-items: center;
  font-family: var(--sans);
}
.testi-card figcaption strong { display: block; color: var(--ink); font-size: 0.95rem; }
.testi-card figcaption span { font-size: 0.82rem; color: var(--muted); }

.rail-nav { display: flex; gap: 0.7rem; margin-top: 0.5rem; }
.rail-btn {
  width: 48px; height: 48px;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  color: var(--ink);
  display: grid;
  place-items: center;
  transition: background 0.25s, color 0.25s, border-color 0.25s, transform 0.3s var(--ease-out);
}
.rail-btn:hover { background: var(--ink); color: #fff; border-color: var(--ink); transform: translateY(-2px); }

/* ============================================================
   BLOG
   ============================================================ */
.blog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.2rem, 3vw, 2rem);
}
.post-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.45s var(--ease-out), box-shadow 0.45s var(--ease-out);
}
.post-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-soft); }
.post-card .cover { aspect-ratio: 16 / 9; overflow: hidden; }
.post-card .cover img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.7s var(--ease-out);
}
.post-card:hover .cover img { transform: scale(1.06); }
.post-card .post-body {
  padding: 1.5rem 1.6rem 1.7rem;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  flex: 1;
}
.post-meta {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}
.post-meta .tag { color: var(--brand); }
.post-meta .sep { opacity: 0.5; }
.post-card h3 { font-size: 1.3rem; line-height: 1.3; }
.post-card h3 a:hover { color: var(--brand); }
.post-card .excerpt { font-size: 0.95rem; flex: 1; }
.post-card .text-link { align-self: flex-start; margin-top: 0.4rem; }

.blog-featured {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 0;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  margin-bottom: clamp(2rem, 5vw, 3.5rem);
  box-shadow: var(--shadow-soft);
}
.blog-featured .cover { min-height: 320px; }
.blog-featured .cover img { width: 100%; height: 100%; object-fit: cover; }
.blog-featured .post-body {
  padding: clamp(1.8rem, 4vw, 3rem);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1rem;
}
.blog-featured h3 { font-size: clamp(1.6rem, 3vw, 2.2rem); }

@media (max-width: 900px) {
  .blog-grid { grid-template-columns: repeat(2, 1fr); }
  .blog-featured { grid-template-columns: 1fr; }
}
@media (max-width: 600px) { .blog-grid { grid-template-columns: 1fr; } }

/* blog filters */
.tag-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-bottom: clamp(1.8rem, 4vw, 2.6rem);
}
.tag-filter button {
  padding: 0.5rem 1.1rem;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  font-size: 0.84rem;
  font-weight: 700;
  color: var(--ink);
  transition: all 0.25s;
}
.tag-filter button:hover { border-color: var(--brand); color: var(--brand); }
.tag-filter button.is-active { background: var(--ink); border-color: var(--ink); color: #fff; }

/* ---------- article page ---------- */
.article-hero {
  padding-top: clamp(7.5rem, 15vh, 10rem);
  padding-bottom: clamp(2rem, 5vw, 3rem);
  text-align: center;
}
.article-hero h1 {
  font-size: clamp(2rem, 4.8vw, 3.4rem);
  max-width: 21ch;
  margin: 1rem auto 1.4rem;
}
.article-hero .post-meta { justify-content: center; }
.article-cover {
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-lift);
  max-height: 520px;
}
.article-cover img { width: 100%; height: 100%; object-fit: cover; }

.article-body {
  /* match .container gutters so prose never touches the screen edge on mobile */
  width: min(720px, 100% - 2 * var(--gutter));
  margin-inline: auto;
  padding-block: clamp(2.5rem, 6vw, 4rem);
  font-size: 1.1rem;
  line-height: 1.85;
}
.article-body h2 {
  font-size: 1.75rem;
  margin: 2.4rem 0 1rem;
}
.article-body h3 { font-size: 1.35rem; margin: 2rem 0 0.8rem; }
.article-body p { margin-bottom: 1.2rem; }
.article-body ul, .article-body ol { margin: 0 0 1.2rem 1.4rem; }
.article-body ul { list-style: disc; }
.article-body ol { list-style: decimal; }
.article-body li { margin-bottom: 0.4rem; }
.article-body a { color: var(--brand); border-bottom: 1px solid currentColor; }
.article-body blockquote {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.3rem;
  color: var(--ink);
  border-left: 3px solid var(--sky);
  padding: 0.4rem 0 0.4rem 1.4rem;
  margin: 1.8rem 0;
}
.article-body strong { color: var(--ink); }
.article-footer {
  max-width: 720px;
  margin-inline: auto;
  padding-bottom: var(--section-pad);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  border-top: 1px solid var(--line);
  padding-top: 2rem;
}

/* ============================================================
   LEGAL PAGES (privacy, terms, SMS terms)
   ============================================================ */
.legal-body {
  max-width: 760px;
  font-size: 1.02rem;
  line-height: 1.8;
}
.legal-body h2 {
  font-size: clamp(1.35rem, 2.4vw, 1.75rem);
  margin: 2.6rem 0 0.9rem;
  padding-top: 1.6rem;
  border-top: 1px solid var(--line);
}
.legal-body > h2:first-of-type { border-top: none; padding-top: 0; margin-top: 1rem; }
.legal-body h3 { font-size: 1.12rem; margin: 1.8rem 0 0.6rem; }
.legal-body p { margin-bottom: 1rem; }
.legal-body ul, .legal-body ol { margin: 0 0 1.2rem 1.3rem; }
.legal-body ul { list-style: disc; }
.legal-body ol { list-style: decimal; }
.legal-body li { margin-bottom: 0.45rem; }
.legal-body strong { color: var(--ink); }
.legal-body a { color: var(--brand); text-decoration: underline; }
.legal-body a:hover { color: var(--ink); }
.legal-body table { width: 100%; border-collapse: collapse; margin-bottom: 1.4rem; font-size: 0.95rem; }
.legal-body th, .legal-body td { text-align: left; padding: 0.6rem 0.8rem; border-bottom: 1px solid var(--line); }
.legal-body th { color: var(--ink); font-weight: 700; }

/* ============================================================
   PAGE HERO (subpages)
   ============================================================ */
.page-hero {
  padding-top: clamp(8rem, 18vh, 12rem);
  padding-bottom: clamp(3rem, 7vw, 5rem);
  position: relative;
  overflow: hidden;
}
.page-hero::before {
  content: "";
  position: absolute;
  top: -30%; right: -10%;
  width: 50vw; height: 50vw;
  max-width: 700px; max-height: 700px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(127, 167, 205, 0.3), transparent 65%);
}
.page-hero h1 {
  font-size: clamp(2.6rem, 6vw, 4.2rem);
  max-width: 16ch;
  position: relative;
}
.page-hero .lede {
  position: relative;
  margin-top: 1.4rem;
  font-size: clamp(1.05rem, 1.6vw, 1.25rem);
  max-width: 56ch;
}
.crumb {
  position: relative;
  display: inline-flex;
  gap: 0.6rem;
  font-size: 0.8rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--muted);
  margin-bottom: 1.6rem;
}
.crumb a:hover { color: var(--brand); }

/* ============================================================
   TIMELINE (how it works)
   ============================================================ */
.timeline { position: relative; display: grid; gap: clamp(2rem, 5vw, 3rem); }
.timeline::before {
  content: "";
  position: absolute;
  left: 27px;
  top: 10px; bottom: 10px;
  width: 1px;
  background: var(--line-strong);
}
.time-step { display: flex; gap: clamp(1.4rem, 3vw, 2.4rem); position: relative; }
.time-step .step-num {
  flex: none;
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--card);
  border: 1px solid var(--line-strong);
  display: grid;
  place-items: center;
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.2rem;
  color: var(--brand);
  position: relative;
  z-index: 2;
  transition: background 0.3s, color 0.3s, border-color 0.3s;
}
.time-step.is-inview .step-num { background: var(--ink); color: #fff; border-color: var(--ink); }
.time-step h3 { font-size: 1.4rem; margin-bottom: 0.5rem; }
.time-step p { max-width: 56ch; }

/* ============================================================
   VALUE / FEATURE ROWS
   ============================================================ */
.value-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.2rem, 3vw, 2rem);
}
.value-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(1.6rem, 3vw, 2.2rem);
  transition: transform 0.45s var(--ease-out), box-shadow 0.45s var(--ease-out);
}
.value-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-soft); }
.value-card .glyph {
  width: 50px; height: 50px;
  border-radius: 50%;
  background: var(--sky-wash);
  color: var(--brand);
  display: grid;
  place-items: center;
  margin-bottom: 1.1rem;
}
.value-card h3 { font-size: 1.2rem; margin-bottom: 0.5rem; }
.value-card p { font-size: 0.94rem; }
@media (max-width: 860px) { .value-grid { grid-template-columns: 1fr; } }

/* physicians */
.physician-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(1.2rem, 3vw, 2rem);
}
.physician-card {
  display: flex;
  gap: 1.6rem;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(1.6rem, 3vw, 2.2rem);
  align-items: flex-start;
  transition: transform 0.45s var(--ease-out), box-shadow 0.45s var(--ease-out);
}
.physician-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-soft); }
.physician-card .avatar {
  flex: none;
  width: 72px; height: 72px;
  border-radius: 50% 50% 40% 40%;
  background: var(--ink);
  color: #fff;
  font-family: var(--serif);
  font-size: 1.5rem;
  display: grid;
  place-items: center;
}
.physician-card h3 { font-size: 1.3rem; }
.physician-card .role {
  font-size: 0.8rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--brand);
  margin: 0.2rem 0 0.7rem;
}
.physician-card p { font-size: 0.95rem; }
@media (max-width: 720px) { .physician-grid { grid-template-columns: 1fr; } .physician-card { flex-direction: column; } }

/* ============================================================
   ACCORDION (FAQ / audience detail)
   ============================================================ */
.accordion { border-top: 1px solid var(--line-strong); }
.acc-item { border-bottom: 1px solid var(--line-strong); }
.acc-head {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1.5rem;
  text-align: left;
  padding: 1.5rem 0.2rem;
  font-family: var(--serif);
  font-size: clamp(1.15rem, 2.2vw, 1.45rem);
  color: var(--ink);
  transition: color 0.25s;
}
.acc-head:hover { color: var(--brand); }
.acc-head .acc-icon {
  flex: none;
  width: 34px; height: 34px;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  display: grid;
  place-items: center;
  font-size: 1.1rem;
  font-family: var(--sans);
  transition: transform 0.4s var(--ease-out), background 0.3s, color 0.3s;
}
.acc-item.is-open .acc-icon { transform: rotate(45deg); background: var(--ink); color: #fff; border-color: var(--ink); }
.acc-panel {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.5s var(--ease-out);
}
.acc-panel-inner { padding: 0 0.2rem 1.6rem; max-width: 68ch; }

/* ============================================================
   CTA BANNER
   ============================================================ */
.cta-banner {
  position: relative;
  border-radius: calc(var(--radius) + 8px);
  background: var(--ink-deep);
  color: rgba(255, 255, 255, 0.85);
  padding: clamp(2.6rem, 7vw, 5rem);
  text-align: center;
  overflow: hidden;
}
.cta-banner::before, .cta-banner::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}
.cta-banner::before {
  width: 420px; height: 420px;
  top: -55%; left: -8%;
  background: radial-gradient(circle, rgba(127, 167, 205, 0.35), transparent 65%);
}
.cta-banner::after {
  width: 360px; height: 360px;
  bottom: -55%; right: -6%;
  background: radial-gradient(circle, rgba(127, 167, 205, 0.25), transparent 65%);
}
.cta-banner h2 {
  color: #fff;
  font-size: clamp(1.9rem, 4.5vw, 3.1rem);
  max-width: 22ch;
  margin: 0 auto 1.2rem;
  position: relative;
  z-index: 2;
}
.cta-banner p { max-width: 52ch; margin: 0 auto 2rem; position: relative; z-index: 2; }
.cta-banner .btn { position: relative; z-index: 2; }

/* ============================================================
   CONTACT
   ============================================================ */
.contact-grid {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: start;
}
.contact-aside h2 { font-size: clamp(2rem, 4vw, 2.8rem); margin-bottom: 1rem; }
.contact-points { margin-top: 2rem; display: grid; gap: 1.3rem; }
.contact-points li { display: flex; gap: 1rem; align-items: flex-start; }
.contact-points .dot {
  flex: none;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--sky-wash);
  color: var(--ink);
  display: grid;
  place-items: center;
}
.contact-points strong { display: block; color: var(--ink); font-size: 0.98rem; }
.contact-points span { font-size: 0.9rem; }

/* direct phone/fax/email block on the contact page */
.direct-contact {
  margin-top: 2.4rem;
  padding-top: 1.8rem;
  border-top: 1px solid var(--line);
}
.direct-contact h3 { font-size: 1.15rem; margin-bottom: 0.9rem; }

/* light-background variant of the footer contact list */
.office-contact--light li { font-size: 0.98rem; }
.office-contact--light .lbl { color: var(--muted); }
.office-contact--light a { color: var(--ink); font-weight: 600; border-bottom: 1px solid var(--line-strong); }
.office-contact--light a:hover { color: var(--brand); border-color: var(--brand); }

/* practice location cards */
.location-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(1.2rem, 3vw, 2rem);
}
.location-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(1.6rem, 3vw, 2.2rem);
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  align-items: flex-start;
  transition: transform 0.45s var(--ease-out), box-shadow 0.45s var(--ease-out);
}
.location-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-soft); }
.location-card .loc-state {
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--brand);
}
.location-card h3 { font-size: clamp(1.3rem, 2.2vw, 1.6rem); }
.location-card address {
  font-style: normal;
  font-size: 1rem;
  line-height: 1.65;
}
@media (max-width: 760px) { .location-grid { grid-template-columns: 1fr; } }

.contact-form {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: calc(var(--radius) + 4px);
  padding: clamp(1.8rem, 4vw, 2.8rem);
  box-shadow: var(--shadow-soft);
}
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }
.form-field { margin-bottom: 1.1rem; }
.form-field label {
  display: block;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--ink);
  margin-bottom: 0.45rem;
}
.form-field input, .form-field textarea, .form-field select {
  width: 100%;
  font: inherit;
  /* must stay >= 16px: iOS Safari auto-zooms the page on focus below that */
  font-size: 1rem;
  color: var(--ink);
  background: var(--paper-deep);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 0.85rem 1rem;
  transition: border-color 0.25s, box-shadow 0.25s;
}
.form-field input:focus, .form-field textarea:focus, .form-field select:focus {
  outline: none;
  border-color: var(--sky);
  box-shadow: 0 0 0 3px rgba(127, 167, 205, 0.25);
}
.form-field textarea { min-height: 130px; resize: vertical; }
.form-consent {
  display: flex;
  gap: 0.7rem;
  align-items: flex-start;
  font-size: 0.83rem;
  margin: 0.4rem 0 1.4rem;
  line-height: 1.6;
  cursor: pointer;
}
.form-consent input { margin-top: 0.3rem; accent-color: var(--ink); flex: none; }
.form-consent a { color: var(--brand); font-weight: 600; text-decoration: underline; }
.form-consent a:hover { color: var(--ink); }

/* A2P 10DLC: SMS consent is visually separated from Terms acceptance so it
   reads — and is recorded — as its own distinct, optional opt-in. */
.consent-group {
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 1rem 1.1rem 0.2rem;
  margin: 1.4rem 0 1.2rem;
  background: var(--paper-deep);
}
.consent-group legend {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 0 0.45rem;
}
.consent-group .form-consent { margin-bottom: 1rem; }

.form-emergency {
  font-size: 0.82rem;
  line-height: 1.6;
  color: var(--ink-soft);
  background: var(--sky-wash);
  border-left: 3px solid var(--ink);
  border-radius: 0 10px 10px 0;
  padding: 0.85rem 1rem;
  margin-bottom: 1.3rem;
}
.form-emergency strong { color: var(--ink); }
.form-status { margin-top: 1rem; font-weight: 600; font-size: 0.95rem; display: none; }
.form-status.ok { display: block; color: #1e7d54; }
.form-status.err { display: block; color: #b33f2b; }

@media (max-width: 860px) {
  .contact-grid { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr; gap: 0; }
}

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer {
  background: var(--ink-deep);
  color: rgba(255, 255, 255, 0.68);
  padding: clamp(3.5rem, 8vw, 5.5rem) 0 2rem;
  position: relative;
  overflow: hidden;
}
.site-footer::before {
  content: "";
  position: absolute;
  top: -40%; right: -10%;
  width: 46vw; height: 46vw;
  max-width: 620px; max-height: 620px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(127, 167, 205, 0.16), transparent 65%);
}
/* practice locations + main phone/fax/email */
.footer-offices {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.6rem, 4vw, 3rem);
  padding-bottom: 2.6rem;
  margin-bottom: 2.6rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.footer-offices h3, .footer-offices h4 {
  color: var(--sky);
  font-family: var(--sans);
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: 0.9rem;
}
.footer-offices .office-name {
  color: #fff;
  font-weight: 700;
  font-size: 0.98rem;
  margin-bottom: 0.35rem;
}
.footer-offices address {
  font-style: normal;
  font-size: 0.93rem;
  line-height: 1.6;
}
.office-contact { display: grid; gap: 0.5rem; }
.office-contact li {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  font-size: 0.93rem;
}
.office-contact .lbl {
  flex: none;
  min-width: 3.2em;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  /* 0.6 alpha over the navy footer = 5.4:1; 0.45 was 3.71:1 (below AA) */
  color: rgba(255, 255, 255, 0.6);
}
.office-contact a { transition: color 0.25s; }
.office-contact a:hover { color: var(--sky); }

@media (max-width: 860px) { .footer-offices { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .footer-offices { grid-template-columns: 1fr; gap: 1.8rem; } }

/* phones: tap-to-call/email are primary actions, so give the links a
   ~44px touch target instead of the 26px text line box */
@media (max-width: 600px) {
  .office-contact li { align-items: center; }
  .office-contact a { display: inline-block; padding-block: 0.6rem; }
}

.footer-grid {
  position: relative;
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
  gap: clamp(2rem, 5vw, 3.5rem);
  padding-bottom: 3rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.footer-brand img { height: 40px; margin-bottom: 1.2rem; }
.footer-brand p { font-size: 0.92rem; max-width: 34ch; }
.footer-col h3, .footer-col h4 {
  color: #fff;
  font-family: var(--sans);
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: 1.2rem;
}
.footer-col ul { display: grid; gap: 0.65rem; }
.footer-col a { font-size: 0.94rem; transition: color 0.25s; }
.footer-col a:hover { color: var(--sky); }
.footer-social {
  display: inline-flex;
  gap: 0.7rem;
  margin-top: 1.4rem;
}
.footer-social a {
  width: 42px; height: 42px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.25);
  display: grid;
  place-items: center;
  transition: background 0.25s, border-color 0.25s, transform 0.3s var(--ease-out);
}
.footer-social a:hover { background: var(--brand); border-color: var(--brand); transform: translateY(-3px); }
.footer-legal {
  position: relative;
  padding-top: 1.8rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1rem;
  font-size: 0.8rem;
  /* this block carries the clinical-services legal disclaimer, so it has to
     be readable: 0.6 alpha over navy = 5.4:1 (0.45 was 3.71:1, below AA) */
  color: rgba(255, 255, 255, 0.6);
}
.footer-legal .disclaimer { max-width: 78ch; line-height: 1.6; }

@media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .footer-grid { grid-template-columns: 1fr; } }

/* ============================================================
   SCROLL REVEAL SYSTEM
   ============================================================ */
.reveal {
  opacity: 0;
  transform: translateY(34px);
  transition: opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out);
  transition-delay: var(--d, 0s);
  will-change: opacity, transform;
}
.reveal--left { transform: translateX(-40px); }
.reveal--right { transform: translateX(40px); }
.reveal--scale { transform: scale(0.92); }
.reveal.is-inview { opacity: 1; transform: none; }

/* On narrow screens the horizontal reveal offset is wider than the gutter,
   so a not-yet-revealed element sticks out past the viewport. Reveal
   vertically instead — no horizontal overflow to mask. */
@media (max-width: 900px) {
  .reveal--left,
  .reveal--right { transform: translateY(34px); }
}

/* progress bar */
.scroll-progress {
  position: fixed;
  top: 0; left: 0;
  height: 3px;
  width: 100%;
  transform-origin: left;
  transform: scaleX(0);
  background: linear-gradient(90deg, var(--brand), var(--sky));
  z-index: 200;
}

/* back to top */
.to-top {
  position: fixed;
  right: 1.4rem;
  bottom: 1.4rem;
  z-index: 90;
  width: 50px; height: 50px;
  border-radius: 50%;
  background: var(--ink);
  color: #fff;
  display: grid;
  place-items: center;
  box-shadow: var(--shadow-soft);
  opacity: 0;
  pointer-events: none;
  transform: translateY(12px);
  transition: opacity 0.35s, transform 0.35s var(--ease-out), background 0.25s;
}
.to-top.is-visible { opacity: 1; pointer-events: auto; transform: none; }
.to-top:hover { background: var(--brand); }

/* reduced motion: calm everything down */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .marquee-track { animation: none; }
  .float-chip, .badge-circle, .hero-visual::before { animation: none; }
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

/* legal links in the footer bottom row */
.legal-links { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.legal-links a { transition: color 0.25s; }
.legal-links a:hover { color: var(--sky); }

/* ============================================================
   ============================================================
   CLINIC LAYER — ASK Health Brain & Body Wellness, Clearwater
   ============================================================
   Everything above this line is inherited from the parent
   ask-health.net design system. Everything below adapts it for
   a patient-facing outpatient clinic. Three forces shape it:

   1. THE AUDIENCE IS OLDER. Pinellas County skews heavily 65+,
      and neurology patients skew older still. Base type goes up
      to 18px, line length comes down, tap targets are 44px
      minimum, and contrast is pushed past the AA floor rather
      than sitting on it.

   2. THE TONE IS WARMER. The parent site sells to hospital
      administrators; this one talks to someone who is worried
      about their memory. A warm off-white replaces the parent's
      cool grey for alternating sections, and the tree logomark
      recurs as a quiet watermark instead of stock photography.

   3. NO PHOTOGRAPHY OF PEOPLE. Until the practice supplies real
      headshots and real interior shots, this site uses no stock
      images of clinicians or patients. On a medical site a
      stock model reads as a member of staff, and that is a
      trust problem, not a design problem. Image slots are
      marked and empty-state gracefully.
   ============================================================ */

:root {
  /* warm neutral — the flyer's clinic walls, not a lab */
  --warm: #faf7f2;
  --warm-deep: #f3ede3;
  --sand-line: rgba(2, 57, 85, 0.1);

  /* larger rhythm for an older readership */
  --section-pad: clamp(4rem, 8.5vw, 7.5rem);

  /* focus ring — one definition, used everywhere */
  --focus: 3px solid #0b6fb8;
  --focus-offset: 3px;
}

body {
  font-size: 1.125rem;      /* 18px — up from the parent's 17px */
  line-height: 1.72;
}

/* Body copy caps its measure so long paragraphs stay readable
   at 18px. Grid and flex children opt out where they set width. */
.section p:not([class]) { max-width: 68ch; }

.section--warm { background: var(--warm); }
.section--warm + .section--warm { padding-top: 0; }

/* ---------- accessibility floor ---------- */

/* WCAG 2.2 — 2.4.11 Focus Not Obscured, 2.4.13 Focus Appearance.
   :focus-visible only, so mouse users never see a ring, but the
   ring that keyboard users do see is unmistakable. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: var(--focus);
  outline-offset: var(--focus-offset);
  border-radius: 6px;
}
/* The fixed header would otherwise cover a focused element that
   the browser has just scrolled to. */
:target, main :focus-visible { scroll-margin-top: 8rem; }

.skip-link {
  position: absolute;
  left: 1rem;
  top: -100%;
  z-index: 200;
  padding: 0.9rem 1.5rem;
  background: var(--ink);
  color: #fff;
  font-weight: 700;
  border-radius: 0 0 14px 14px;
  transition: top 0.2s;
}
.skip-link:focus { top: 0; }

/* WCAG 2.2 — 2.5.8 Target Size (Minimum). */
.nav-links a, .util-bar a, .footer-col a, .office-contact a { min-height: 24px; }

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ============================================================
   BRAND LOCKUP — wordmark + "BRAIN & BODY WELLNESS" descender
   ============================================================
   The supplied logo asset is the parent "askhealth" wordmark.
   The flyer's lockup adds a letterspaced descender line beneath
   it. Rather than ship a raster of a lockup we do not have as a
   vector, the descender is live text locked to the wordmark's
   width — which also means it stays crisp and is readable by
   screen readers as part of the practice name.
   ============================================================ */
.brand { display: block; }
.brand img { height: 34px; width: auto; display: block; }
.brand .lockup-sub {
  display: block;
  margin-top: 4px;
  font-size: 0.5rem;
  font-weight: 800;
  letter-spacing: 0.235em;
  text-transform: uppercase;
  color: var(--brand);
  white-space: nowrap;
}
.site-footer .brand .lockup-sub { color: var(--sky); }

/* ============================================================
   UTILITY BAR — phone, modality, referrer lane
   ============================================================
   The referring-provider link lives here and nowhere else in the
   header. It stays permanently reachable without competing with
   the patient navigation for attention.
   ============================================================ */
.util-bar {
  background: var(--ink-deep);
  color: rgba(255, 255, 255, 0.9);
  font-size: 0.85rem;
}
.util-bar .container {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 1.6rem;
  min-height: 40px;
  padding-block: 0.35rem;
}
.util-bar a { font-weight: 600; display: inline-flex; align-items: center; gap: 0.45rem; }
.util-bar a:hover { color: var(--sky); }
.util-bar .util-phone { font-weight: 700; letter-spacing: 0.01em; }
.util-bar .util-sep { opacity: 0.35; }
.util-bar svg { flex: none; }
@media (max-width: 780px) {
  .util-bar { display: none; }
}

/* the header sits below the util bar, so it is no longer fixed
   at y=0 — it scrolls the bar away and then pins. */
.site-header.is-scrolled .util-bar { display: none; }
@media (max-width: 780px) { .site-header.is-scrolled .util-bar { display: none; } }

/* ---------- nav: six items + a filled CTA ---------- */
.nav-links .btn--primary { padding: 0.8rem 1.4rem; font-size: 0.9rem; }

/* the mobile drawer separates the patient links from the
   referrer link with a rule — referrers are deliberately last */
@media (max-width: 900px) {
  .nav-links { gap: 1.25rem; overflow-y: auto; padding-block: 6rem 2rem; justify-content: flex-start; }
  .nav-links a:not(.btn) { font-size: 1.35rem; }
  .nav-divider {
    width: min(240px, 60%);
    height: 1px;
    background: var(--line);
    margin-block: 0.5rem;
  }
  .nav-links .nav-referrer { font-size: 1rem !important; font-family: var(--sans) !important; font-weight: 700 !important; color: var(--muted) !important; }
  .nav-links .nav-phone {
    margin-top: 0.75rem;
    font-family: var(--sans) !important;
    font-size: 1.5rem !important;
    font-weight: 800 !important;
    color: var(--ink) !important;
  }
}
@media (min-width: 901px) {
  .nav-divider, .nav-links .nav-referrer, .nav-links .nav-phone { display: none; }
}

/* ============================================================
   MOBILE CTA BAR — the highest-leverage element on the site
   ============================================================
   Two thumb-sized targets, always visible, on every page. A
   worried patient on a phone should never have to scroll to
   find the phone number.
   ============================================================ */
.mobile-cta-bar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 120;
  display: none;
  background: rgba(255, 255, 255, 0.97);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-top: 1px solid var(--line);
  padding: 0.55rem 0.7rem calc(0.55rem + env(safe-area-inset-bottom));
  gap: 0.6rem;
}
.mobile-cta-bar a {
  flex: 1;
  min-height: 52px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 0.5rem;
  padding: 0.5rem 0.7rem;
  border-radius: 999px;
  font-weight: 800;
  font-size: 0.95rem;
  /* body line-height is 1.72 for readability; at two lines that overflows
     the pill, so the bar sets its own. */
  line-height: 1.2;
}
/* "Call" is short and always fits; the label beside it needs the room. */
.mobile-cta-bar .cta-call { flex: 0 0 38%; }
.mobile-cta-bar .cta-book { flex: 1; }
.mobile-cta-bar .cta-call { background: var(--ink); color: #fff; }
.mobile-cta-bar .cta-book { border: 1.5px solid var(--ink); color: var(--ink); }
@media (max-width: 780px) {
  .mobile-cta-bar { display: flex; }
  /* keep the footer clear of the bar, and move the to-top button up */
  body { padding-bottom: 74px; }
  .to-top { bottom: 86px; }
}

/* ============================================================
   PAGE HERO — interior pages
   ============================================================ */
.page-hero {
  padding-top: clamp(8rem, 15vh, 10.5rem);
  padding-bottom: clamp(2.5rem, 5vw, 4rem);
  position: relative;
  overflow: hidden;
  background: var(--warm);
  border-bottom: 1px solid var(--sand-line);
}
.page-hero .container { position: relative; z-index: 2; }
.page-hero h1 { font-size: clamp(2.3rem, 5.4vw, 3.9rem); margin-bottom: 1.1rem; max-width: 18ch; }
.page-hero .lede { font-size: clamp(1.1rem, 1.9vw, 1.32rem); max-width: 60ch; color: var(--ink-soft); }
.page-hero .hero-cta { margin-top: 2.2rem; display: flex; flex-wrap: wrap; gap: 0.9rem; }

/* the tree logomark as a quiet watermark, in place of a photo */
.page-hero::after {
  content: "";
  position: absolute;
  right: -6%;
  top: 50%;
  transform: translateY(-50%);
  width: min(420px, 42vw);
  aspect-ratio: 1;
  background: url("/assets/img/mark.png") center / contain no-repeat;
  opacity: 0.07;
  pointer-events: none;
}
@media (max-width: 700px) { .page-hero::after { width: 260px; right: -18%; opacity: 0.05; } }

/* breadcrumb trail */
.crumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.83rem;
  font-weight: 600;
  color: var(--muted);
  margin-bottom: 1.4rem;
}
.crumb a:hover { color: var(--brand); text-decoration: underline; }
.crumb span[aria-hidden] { opacity: 0.45; }

/* ============================================================
   ACCESS BADGES — the flyer's three promises, as real UI
   ============================================================
   These are the practice's genuine differentiator in a market
   where neurology waits run months, so they sit high on the
   page and are styled as facts, not decoration.
   ============================================================ */
.badge-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin-top: 2.6rem;
}
.access-badge {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  padding: 1.15rem 1.25rem;
  background: #fff;
  border: 1px solid var(--sand-line);
  border-radius: 16px;
  box-shadow: 0 10px 30px -24px rgba(2, 57, 85, 0.5);
}
.access-badge svg { flex: none; color: var(--brand); margin-top: 2px; }
.access-badge strong {
  display: block;
  font-size: 0.98rem;
  font-weight: 800;
  color: var(--ink);
  line-height: 1.35;
}
.access-badge span { display: block; font-size: 0.86rem; color: var(--muted); line-height: 1.5; margin-top: 2px; }
a.access-badge:hover { border-color: var(--brand); transform: translateY(-2px); transition: transform 0.3s var(--ease-out), border-color 0.3s; }
@media (max-width: 900px) { .badge-row { grid-template-columns: 1fr; gap: 0.7rem; } }

/* ============================================================
   SYMPTOM ROUTER — "What brings you in?"
   ============================================================
   Patients search by what they feel, not by specialty. This is
   the primary navigation of the homepage, above the service
   taxonomy, because it matches how the visitor actually thinks.
   ============================================================ */
.symptom-router {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 1.1rem;
}
.symptom-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding: 1.7rem 1.5rem 1.5rem;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 18px;
  min-height: 100%;
  transition: transform 0.4s var(--ease-out), box-shadow 0.4s var(--ease-out), border-color 0.3s;
}
.symptom-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-soft); border-color: var(--sky); }
.symptom-card .glyph {
  width: 46px; height: 46px;
  display: grid; place-items: center;
  border-radius: 14px;
  background: var(--sky-wash);
  color: var(--ink);
  margin-bottom: 0.3rem;
}
.symptom-card h3 { font-family: var(--sans); font-size: 1.06rem; font-weight: 800; letter-spacing: -0.005em; }
.symptom-card p { font-size: 0.94rem; color: var(--muted); line-height: 1.6; margin: 0; }
.symptom-card .go {
  margin-top: auto;
  padding-top: 0.9rem;
  font-size: 0.85rem;
  font-weight: 800;
  color: var(--brand);
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}
.symptom-card:hover .go svg { transform: translateX(3px); }
.symptom-card .go svg { transition: transform 0.3s var(--ease-out); }
/* whole card clickable, but only one link in the a11y tree */
.symptom-card .stretch::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }

/* ============================================================
   PROVIDERS
   ============================================================
   `.provider-card` extends the parent's `.physician-card`. The
   portrait slot is an arch frame — the same motif as the tree
   logomark's circular crown — and it degrades to a monogram
   when no headshot exists, which is the state at launch.
   ============================================================ */
.provider-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: clamp(1.2rem, 3vw, 2.2rem);
}
.provider-card {
  display: flex;
  flex-direction: column;
  text-align: center;
  padding: 0 0 1.8rem;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 20px;
  overflow: hidden;
  transition: transform 0.4s var(--ease-out), box-shadow 0.4s var(--ease-out);
}
.provider-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-soft); }
.provider-portrait {
  position: relative;
  margin: 1.6rem auto 1.3rem;
  width: 148px;
  aspect-ratio: 4 / 4.6;
  border-radius: var(--arch);
  overflow: hidden;
  background: linear-gradient(165deg, var(--sky-wash), #fff);
  border: 1px solid var(--sand-line);
  display: grid;
  place-items: center;
}
.provider-portrait img { width: 100%; height: 100%; object-fit: cover; }
/* <picture> becomes the grid item, so it has to fill the slot itself or the
   image inside it centres at its intrinsic size instead of covering. */
.provider-portrait picture { display: block; width: 100%; height: 100%; }

/* Practice leadership: same card, but these people are not clinicians, so the
   card carries the biography inline rather than linking to a provider page. */
.provider-grid--lead { max-width: 560px; margin-inline: auto; }
.provider-card-bio {
  margin-top: 1rem;
  padding-inline: 1.2rem 1.2rem;
  text-align: left;
  font-size: 0.94rem;
  line-height: 1.7;
}
.provider-card-bio p + p { margin-top: 0.85rem; }
.bio-pending { font-size: 0.94rem; color: var(--muted); font-style: italic; }
/* launch state: initials in the display serif, not a stock face */
.provider-portrait .monogram {
  font-family: var(--serif);
  font-size: 2.5rem;
  font-weight: 500;
  color: var(--brand);
  letter-spacing: 0.02em;
}
.provider-card h3 { font-size: 1.28rem; margin-bottom: 0.35rem; padding-inline: 1.2rem; }
.credential-line {
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--brand);
  padding-inline: 1.2rem;
}
.provider-card p { font-size: 0.94rem; color: var(--muted); padding-inline: 1.5rem; margin-top: 0.9rem; }
.provider-card .text-link { margin: 1.3rem auto 0; }

/* provider detail page header */
.provider-hero { display: grid; grid-template-columns: 240px 1fr; gap: clamp(2rem, 5vw, 3.5rem); align-items: center; }
.provider-hero .provider-portrait { width: 100%; margin: 0; }
.provider-hero h1 { font-size: clamp(2.1rem, 4.6vw, 3.2rem); margin-bottom: 0.7rem; }
.provider-hero .credential-line { padding-inline: 0; font-size: 0.82rem; }
@media (max-width: 720px) {
  .provider-hero { grid-template-columns: 1fr; justify-items: start; }
  .provider-hero .provider-portrait { width: 170px; }
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.4rem 0.9rem;
  border-radius: 999px;
  background: var(--sky-wash);
  color: var(--ink);
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.02em;
}
.pill::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #1f8a4c; }

/* ============================================================
   REFERRING PROVIDERS — the peer lane
   ============================================================
   Deliberately calmer and denser than the patient sections: a
   referring PCP wants the operational facts, not marketing.
   ============================================================ */
.referrer-strip {
  background: var(--ink-deep);
  color: rgba(255, 255, 255, 0.84);
  border-radius: 26px;
  padding: clamp(2rem, 4.5vw, 3.2rem);
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: clamp(1.8rem, 4vw, 3rem);
  align-items: center;
}
.referrer-strip h2 { color: #fff; font-size: clamp(1.6rem, 3vw, 2.3rem); margin-bottom: 0.9rem; }
.referrer-strip p { font-size: 1rem; line-height: 1.7; }
.referrer-strip .eyebrow { color: var(--sky); }
.referrer-facts { display: grid; gap: 0.75rem; }
.referrer-facts li {
  display: flex;
  gap: 0.7rem;
  align-items: flex-start;
  font-size: 0.95rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.referrer-facts li:last-child { border-bottom: none; padding-bottom: 0; }
.referrer-facts svg { flex: none; color: var(--sky); margin-top: 4px; }
@media (max-width: 860px) { .referrer-strip { grid-template-columns: 1fr; } }

.referral-methods { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.2rem; }
.referral-method {
  padding: 1.7rem 1.5rem;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: #fff;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.referral-method .glyph { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 12px; background: var(--sky-wash); color: var(--ink); }
.referral-method h3 { font-family: var(--sans); font-size: 1.05rem; font-weight: 800; }
.referral-method .big {
  font-family: var(--serif);
  font-size: 1.55rem;
  color: var(--ink);
  letter-spacing: -0.01em;
  word-break: break-word;
}
.referral-method p { font-size: 0.92rem; color: var(--muted); margin: 0; }
.referral-method .text-link { margin-top: auto; padding-top: 0.8rem; align-self: flex-start; }

/* copy-paste block for a referral coordinator's EMR */
.copy-block {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
  font-size: 0.88rem;
  line-height: 1.85;
  background: var(--ink-deep);
  color: rgba(255, 255, 255, 0.9);
  padding: 1.5rem 1.6rem;
  border-radius: 16px;
  white-space: pre-wrap;
  overflow-x: auto;
  user-select: all;
}

.download-card {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  padding: 1.3rem 1.5rem;
  border: 1px dashed var(--line-strong);
  border-radius: 16px;
  background: var(--warm);
}
.download-card .glyph { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 12px; background: #fff; color: var(--brand); border: 1px solid var(--sand-line); }
.download-card strong { display: block; color: var(--ink); font-size: 1rem; }
.download-card span { font-size: 0.86rem; color: var(--muted); }

/* ============================================================
   LOCATION — NAP card + static map
   ============================================================
   No Google Maps iframe. An embedded map sets third-party
   cookies and leaks the visitor's IP and the page URL, which on
   a health site in Florida is a live liability under the state
   wiretap statute. A drawn map plus a link out costs the
   visitor nothing and costs us no exposure.
   ============================================================ */
.nap-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 22px;
  padding: clamp(1.6rem, 3.5vw, 2.4rem);
  box-shadow: var(--shadow-soft);
}
.nap-card h3 { font-size: 1.35rem; margin-bottom: 0.3rem; }
.nap-card .nap-sub { font-size: 0.82rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--brand); margin-bottom: 1.3rem; }
.nap-card address { font-style: normal; font-size: 1.08rem; line-height: 1.65; color: var(--ink); }
.nap-list { margin-top: 1.5rem; display: grid; gap: 0.85rem; }
.nap-list li { display: flex; gap: 0.85rem; align-items: flex-start; font-size: 0.98rem; }
.nap-list svg { flex: none; color: var(--brand); margin-top: 4px; }
.nap-list .lbl { display: block; font-size: 0.74rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.nap-list a { font-weight: 700; color: var(--ink); border-bottom: 1px solid var(--line-strong); }
.nap-list a:hover { color: var(--brand); border-color: var(--brand); }

.static-map {
  position: relative;
  border-radius: 22px;
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--warm);
  aspect-ratio: 4 / 3.1;
}
.static-map svg { width: 100%; height: 100%; display: block; }
.static-map .map-open {
  position: absolute;
  right: 1rem;
  bottom: 1rem;
  background: #fff;
  color: var(--ink);
  padding: 0.7rem 1.15rem;
  border-radius: 999px;
  font-size: 0.88rem;
  font-weight: 800;
  box-shadow: var(--shadow-soft);
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 44px;
}
.static-map .map-open:hover { background: var(--ink); color: #fff; }

/* ============================================================
   CALLOUTS
   ============================================================ */
.callout {
  display: flex;
  gap: 1rem;
  padding: 1.25rem 1.4rem;
  border-radius: 16px;
  font-size: 0.96rem;
  line-height: 1.65;
}
.callout svg { flex: none; margin-top: 3px; }
.callout strong { display: block; margin-bottom: 0.2rem; }

/* Emergency. Deliberately the loudest element on any page it
   appears on — it is a safety notice, not a disclaimer. */
.callout--emergency {
  background: #fdf3ef;
  border: 1.5px solid #d2703f;
  color: #6b2f13;
}
.callout--emergency svg { color: #c05621; }
.callout--emergency strong { color: #8a3a12; }
.callout--emergency a { font-weight: 800; text-decoration: underline; color: inherit; }

.callout--note { background: var(--sky-wash); border: 1px solid rgba(2, 57, 85, 0.12); color: var(--ink-soft); }
.callout--note svg { color: var(--brand); }

/* "Medically reviewed by …" — the YMYL trust line. The parent's
   serve.js emits `.reviewed-by` with no CSS rule at all; this
   supplies one for both class names. */
.callout--review, .reviewed-by {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--muted);
  padding: 0.7rem 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  margin-block: 1.5rem;
}
.callout--review svg, .reviewed-by svg { flex: none; color: var(--brand); }

/* ============================================================
   DIAGNOSTICS — one block per test
   ============================================================ */
.test-block {
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: clamp(1.6rem, 3.5vw, 2.4rem);
  background: #fff;
}
.test-block + .test-block { margin-top: 1.4rem; }
.test-block > header { display: flex; align-items: flex-start; gap: 1.1rem; margin-bottom: 1.1rem; }
.test-block .glyph { width: 52px; height: 52px; flex: none; display: grid; place-items: center; border-radius: 15px; background: var(--sky-wash); color: var(--ink); }
.test-block h3 { font-size: 1.4rem; margin-bottom: 0.15rem; }
.test-block .test-abbr { font-size: 0.78rem; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: var(--brand); }
.test-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1rem;
  margin-top: 1.5rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--line);
}
.test-facts .lbl { display: block; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); margin-bottom: 0.25rem; }
.test-facts p { font-size: 0.94rem; margin: 0; color: var(--ink-soft); }

/* ============================================================
   LEGAL / NOTICE TYPOGRAPHY
   ============================================================ */
/* Fla. Stat. § 456.062 requires this statement be "clearly
   distinguishable from the surrounding text." */
.legal-caps {
  text-transform: uppercase;
  font-size: 0.86rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  line-height: 1.7;
  border: 2px solid var(--ink);
  border-radius: 12px;
  padding: 1.2rem 1.35rem;
  background: #fff;
  color: var(--ink);
}
.tagline-list { display: grid; gap: 0.55rem; margin-top: 1.2rem; }
.tagline-list li { font-size: 0.94rem; padding-left: 1.1rem; border-left: 2px solid var(--sky); color: var(--ink-soft); }
.payment-note {
  font-size: 0.92rem;
  color: var(--muted);
  padding: 1rem 1.2rem;
  background: var(--warm-deep);
  border-radius: 12px;
}

/* ============================================================
   SMALL SHARED PIECES
   ============================================================ */
.step-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: clamp(1.2rem, 3vw, 2rem); counter-reset: step; }
.step {
  position: relative;
  padding-top: 3.4rem;
  counter-increment: step;
}
.step::before {
  content: counter(step, decimal-leading-zero);
  position: absolute;
  top: 0; left: 0;
  font-family: var(--serif);
  font-size: 1.6rem;
  color: var(--sky);
  font-weight: 600;
}
.step::after { content: ""; position: absolute; top: 2.6rem; left: 0; width: 34px; height: 1px; background: var(--slate); }
.step h3 { font-family: var(--sans); font-size: 1.08rem; font-weight: 800; margin-bottom: 0.5rem; }
.step p { font-size: 0.96rem; color: var(--muted); margin: 0; }

.fact-list { display: grid; gap: 0.9rem; }
.fact-list li { display: flex; gap: 0.8rem; align-items: flex-start; font-size: 1rem; line-height: 1.6; }
.fact-list svg { flex: none; color: var(--brand); margin-top: 5px; }

.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem, 4vw, 3rem); align-items: start; }
@media (max-width: 820px) { .two-col { grid-template-columns: 1fr; } }

.anchor-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-bottom: 2.5rem;
}
.anchor-nav a {
  padding: 0.55rem 1.1rem;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--ink);
  min-height: 40px;
  display: inline-flex;
  align-items: center;
}
.anchor-nav a:hover { background: var(--ink); color: #fff; border-color: var(--ink); }

/* ---------- footer tweaks for a single-location practice ---------- */
.site-footer .footer-nap address { font-style: normal; line-height: 1.7; }
.site-footer .footer-nap a { border-bottom: 1px solid rgba(255, 255, 255, 0.25); }
.site-footer .footer-nap a:hover { border-color: var(--sky); color: var(--sky); }
.footer-disclaimer {
  font-size: 0.82rem;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.6);
  max-width: 88ch;
}

/* ---------- print: patients do print directions ---------- */
@media print {
  .site-header, .mobile-cta-bar, .to-top, .scroll-progress, .skip-link, .cta-banner { display: none !important; }
  body { padding-bottom: 0; font-size: 12pt; }
  .reveal { opacity: 1 !important; transform: none !important; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; }
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1 !important; transform: none !important; }
}