/* =========================================================================
   Expedient Phlebotomy Services, LLC — site.css
   One shared stylesheet. Plain CSS, no framework, no build step.

   Design system (Rev 7 — "Apple-clean"):
   - Restraint carried by type, space and color discipline. No photography.
   - Red appears ONLY on primary buttons, the header Book pill and price figures.
     Everything else is ink, gray or white.
   - Inter for everything. Headings never heavier than 600.
   - No card borders, no shadows. Rhythm comes from alternating section grounds.
   ========================================================================= */

/* Inter, self-hosted (SIL OFL 1.1, see /assets/fonts/OFL.txt). One variable
   file: Google Fonts' Inter v20 Latin subset, with the weight axis trimmed to
   400–600 because those are the only weights used (400, 500, 600). Every page
   preloads it. Characters outside this range fall back, as they did before. */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("/assets/fonts/inter-latin-400-600.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;
}

/* Metric-matched stand-in for Inter while the web font loads, so the swap
   doesn't reflow text (layout shift). Overrides are Inter's metrics vs. Arial. */
@font-face {
  font-family: "Inter Fallback";
  src: local("Arial"), local("ArialMT"), local("Helvetica");
  size-adjust: 107.4%;
  ascent-override: 90.2%;
  descent-override: 22.48%;
  line-gap-override: 0%;
}

:root {
  --ink:        #1D1D1F;  /* all headings + body */
  --ink-2:      #6E6E73;  /* secondary text, eyebrows (4.66:1 on --ground-2, 5.07:1 on white) */
  --ground:     #FFFFFF;
  --ground-2:   #F5F5F7;  /* alternating section bands, card fills */
  --hairline:   #D2D2D7;
  --red:        #C91F32;  /* CTA fill, price figures — nothing else */
  --red-deep:   #9F1222;  /* hover only */

  --font: "Inter", "Inter Fallback", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* 8px base unit */
  --maxw: 1200px;
  --gutter: 22px;
  --gap: 24px;
  --section-y: 120px;
  --radius-card: 18px;
  --radius-sm: 12px;
  --header-h: 56px;
  --ease: cubic-bezier(0.25, 0.1, 0.25, 1);
}
@media (max-width: 734px) {
  :root { --section-y: 72px; --gutter: 16px; --header-h: 52px; }
}

/* ---------- Reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 16px); }

body {
  margin: 0;
  font-family: var(--font);
  font-size: 18px;          /* patient base skews elderly — never smaller, on any screen */
  line-height: 1.55;
  letter-spacing: -0.011em;
  color: var(--ink);
  background: var(--ground);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

/* Body links: ink with a hairline underline that darkens on hover */
a {
  color: var(--ink);
  text-decoration: underline; text-decoration-thickness: 1px;
  text-decoration-color: var(--hairline); text-underline-offset: 3px;
  transition: text-decoration-color .2s ease, color .2s ease, opacity .2s ease;
}
a:hover { text-decoration-color: var(--ink); }

h1, h2, h3, h4 {
  font-family: var(--font);
  font-weight: 600;
  color: var(--ink);
  margin: 0 0 0.5em;
  text-wrap: balance;
}
/* Sizes interpolate between the mobile (390px) and desktop (1440px) values */
h1 { font-size: clamp(2.25rem, 1.786rem + 1.905vw, 3.5rem); line-height: 1.07; letter-spacing: -0.022em; }
h2 { font-size: clamp(1.875rem, 1.457rem + 1.714vw, 3rem);  line-height: 1.1;  letter-spacing: -0.022em; }
h3 { font-size: clamp(1.3125rem, 1.243rem + .286vw, 1.5rem); line-height: 1.25; letter-spacing: -0.015em; }
h4 { font-size: 1.125rem; line-height: 1.3; }
/* .h3: an h2 (for correct outline) that should look like an h3 */
h2.h3, .card h2.h3 { font-size: clamp(1.3125rem, 1.243rem + .286vw, 1.5rem); line-height: 1.25; letter-spacing: -0.015em; margin-bottom: 12px; }
strong, b { font-weight: 600; }

p { margin: 0 0 1rem; }
ul, ol { margin: 0 0 1rem; padding-left: 1.25rem; }
li { margin-bottom: 0.4rem; }

/* ---------- Accessibility helpers ---------- */
.skip-link {
  position: absolute; left: -999px; top: 0; z-index: 1000;
  background: var(--ink); color: #fff; padding: 0.75rem 1.25rem;
  border-radius: 0 0 var(--radius-sm) 0; text-decoration: none; font-weight: 600;
}
.skip-link:focus { left: 0; color: #fff; }

:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
  border-radius: 6px;
}

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- Layout ---------- */
.container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); }

.section { padding: var(--section-y) 0; }
.section--tint,
.section--gray { background: var(--ground-2); }
.section--dark { background: var(--ink); color: #fff; }
.section--dark h1, .section--dark h2, .section--dark h3 { color: #fff; }

.section-head { max-width: 68ch; margin-bottom: 56px; }
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.eyebrow {
  font-size: 12px; font-weight: 600; line-height: 1.2; text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--ink-2); margin: 0 0 12px;
}
.lead {
  font-size: clamp(1.125rem, 1.055rem + .286vw, 1.3125rem);
  line-height: 1.5; letter-spacing: -0.012em; color: var(--ink);
}
.prose { max-width: 68ch; }
.prose h2 { margin-top: 56px; font-size: clamp(1.5rem, 1.3rem + .8vw, 2rem); }
.prose h2:first-child, .prose .eyebrow + h2, .prose .eyebrow + h1 { margin-top: 0; }
.prose h3 { margin-top: 32px; }
.related { margin-top: 56px; }
.related p:last-child { margin-bottom: 0; }

/* ---------- Header / nav ---------- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255, 255, 255, 0.72);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
          backdrop-filter: saturate(180%) blur(20px);
  /* 1px hairline drawn as an inset shadow so it never adds to the 56px height */
  box-shadow: inset 0 -1px 0 transparent;
  transition: box-shadow .2s ease;
}
.site-header.is-scrolled { box-shadow: inset 0 -1px 0 var(--hairline); }
.header-inner {
  display: flex; align-items: center; gap: 24px;
  height: var(--header-h); padding: 0 var(--gutter); max-width: var(--maxw); margin: 0 auto;
}
.brand { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; flex-shrink: 0; }
.brand img { height: 40px; width: 40px; }

.nav-toggle {
  display: none; align-items: center; justify-content: center;
  width: 44px; height: 44px; margin-right: -10px; padding: 0;
  background: none; border: 0; border-radius: 8px; color: var(--ink); cursor: pointer;
}
.nav-toggle svg { width: 22px; height: 22px; }

.primary-nav { flex: 1; min-width: 0; }
.primary-nav ul {
  list-style: none; display: flex; flex-wrap: nowrap; align-items: center; justify-content: center;
  gap: 28px; margin: 0; padding: 0;
}
.primary-nav li { margin: 0; }
.primary-nav a {
  font-size: 14px; font-weight: 400; letter-spacing: -0.01em; white-space: nowrap;
  color: var(--ink); opacity: 0.8; text-decoration: none; padding: 8px 0; display: inline-block;
}
.primary-nav a:hover, .primary-nav a[aria-current="page"] { opacity: 1; }

.header-actions { display: flex; align-items: center; gap: 20px; flex-shrink: 0; }
.header-phone {
  font-size: 14px; font-weight: 600; line-height: 20px; color: var(--ink); text-decoration: none; white-space: nowrap;
  display: inline-block; padding: 12px 0;
}
.header-phone:hover { opacity: 0.8; }
.header-actions .btn { font-size: 14px; padding: 7px 16px; min-height: 34px; }

/* Desktop: one row, always. */
@media (min-width: 1024px) {
  .nav-toggle { display: none; }
  .primary-nav { display: block !important; }
}
@media (min-width: 1024px) and (max-width: 1120px) {
  .primary-nav ul { gap: 20px; }
}

/* Below 1024px: hamburger + full-height sheet (progressive enhancement).
   With JS, <html> gets class "js" and the nav collapses behind the hamburger.
   With JS disabled (<html class="no-js">), the hamburger is hidden and the nav
   is shown expanded in flow so the menu still works. */
@media (max-width: 1023px) {
  .header-inner { flex-wrap: wrap; gap: 12px; }
  .brand { margin-right: auto; }
  .brand img { height: 36px; width: 36px; }
  .header-actions { gap: 12px; }
  .header-actions .btn { min-height: 44px; padding: 10px 18px; }
  .header-phone .phone-label { display: none; }
  .js .nav-toggle { display: inline-flex; order: 3; }

  .js .primary-nav {
    display: none; position: absolute; top: 100%; left: 0; right: 0;
    height: calc(100vh - var(--header-h)); height: calc(100dvh - var(--header-h));
    overflow-y: auto; background: var(--ground);
  }
  .js .primary-nav.is-open { display: block; }
  .js.nav-open .site-header { background: var(--ground); box-shadow: inset 0 -1px 0 var(--hairline); }
  .js.nav-open, .js.nav-open body { overflow: hidden; }

  .no-js .header-inner { height: auto; min-height: var(--header-h); }
  .no-js .primary-nav { flex-basis: 100%; order: 4; }

  .primary-nav ul { flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 0; padding: 16px var(--gutter) 48px; max-width: var(--maxw); margin: 0 auto; }
  .primary-nav li { border-bottom: 1px solid var(--ground-2); }
  .primary-nav a {
    display: flex; align-items: center; min-height: 56px; padding: 8px 0;
    font-size: 24px; font-weight: 600; letter-spacing: -0.015em; opacity: 1;
  }
  .no-js .primary-nav a { font-size: 17px; min-height: 44px; }
}
@media (max-width: 374px) {
  .header-actions .btn { padding: 10px 14px; }
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  font-family: var(--font); font-size: 17px; font-weight: 500; line-height: 1.18; letter-spacing: -0.01em;
  text-decoration: none; text-align: center; cursor: pointer;
  padding: 12px 24px; min-height: 44px; border-radius: 980px;
  border: 1px solid transparent;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.btn--lg { min-height: 48px; }
/* Primary */
.btn--primary { background: var(--red); color: #fff; }
.btn--primary:hover { background: var(--red-deep); color: #fff; }
/* Secondary */
.btn--ghost,
.btn--on-dark { background: transparent; color: var(--ink); border-color: var(--hairline); }
.btn--ghost:hover,
.btn--on-dark:hover { background: var(--ground-2); color: var(--ink); }
.section--tint .btn--ghost:hover,
.section--gray .btn--ghost:hover,
.cta-band .btn--on-dark:hover { background: var(--ground); }
.btn-row { display: flex; flex-wrap: wrap; gap: 16px; }

/* Tertiary: red text link with a trailing arrow that nudges on hover */
.link-more { color: var(--red); font-weight: 500; text-decoration: none; }
.link-more .arrow { display: inline-block; transition: transform .2s ease; }
a:hover .link-more .arrow, a.link-more:hover .arrow { transform: translateX(4px); }

/* ---------- Hero (home) ---------- */
.hero { padding: 180px 0 140px; background: var(--ground); text-align: center; }
.hero-inner { display: flex; flex-direction: column; align-items: center; }
.hero-inner h1 {
  font-size: clamp(2.5rem, 1.757rem + 3.048vw, 4.5rem);
  line-height: 1.05; letter-spacing: -0.022em;
  max-width: 20ch; margin: 0 0 24px;
}
.hero-inner .lead { color: var(--ink-2); max-width: 52ch; margin: 0 0 40px; }
.hero-inner .btn-row { justify-content: center; }
.hero-phone { margin: 32px 0 0; color: var(--ink-2); }
.hero-phone a { color: var(--ink); font-weight: 600; text-decoration: none; }
.hero-phone a:hover { text-decoration: underline; text-decoration-color: var(--ink); }
@media (max-width: 734px) {
  .hero { padding: 104px 0 80px; }
}

/* Page-level hero (subpages): left-aligned, lighter padding */
.hero--page { padding: 72px 0 0; text-align: left; }
@media (max-width: 734px) { .hero--page { padding-top: 40px; } }

/* Old boxed-logo figure (About page): no box */
.hero-figure { margin: 0; }
.hero-figure img { max-width: 280px; margin: 0 auto; }

/* ---------- Trust band ---------- */
.trust-band { background: var(--ground-2); padding: 48px 0; text-align: center; }
.trust-band p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--ink-2); }
.trust-band .item { white-space: nowrap; }
.trust-band .sep { margin: 0 0.35em; }
@media (max-width: 734px) {
  .trust-band { padding: 32px 0; }
  .trust-band .item { display: block; }
  .trust-band .sep { display: none; }
}

/* ---------- Cards / grids ---------- */
.grid { display: grid; gap: var(--gap); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.grid-2 { column-gap: 64px; }

/* Default card: filled panel, no border, no shadow */
.card {
  background: var(--ground-2); border: 0; border-radius: var(--radius-card);
  padding: 32px; box-shadow: none;
}
.section--tint .card,
.section--gray .card,
.cta-band .card { background: var(--ground); }
.card > :last-child { margin-bottom: 0; }
.card h3 { margin-bottom: 12px; }
/* A heading inside a panel is a panel title, not a section headline */
.card h2, .form-card h2 { font-size: clamp(1.5rem, 1.357rem + .571vw, 1.875rem); letter-spacing: -0.02em; }

/* Borderless card: icon, heading, body — separated by whitespace only */
.card--plain,
.section--tint .card--plain,
.section--gray .card--plain { background: none; padding: 0; border-radius: 0; }
.grid:has(> .card--plain) { row-gap: 48px; column-gap: 48px; }

.card--link { text-decoration: none; color: inherit; display: flex; flex-direction: column; }
.card--link > .price-tag,
.card--link > .link-more { margin-top: auto; padding-top: 8px; }
.card--link:hover h2, .card--link:hover h3 { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }

.card-icon { width: 32px; height: 32px; margin-bottom: 20px; color: var(--ink); }
.card-icon svg { width: 100%; height: 100%; }

.price-tag {
  font-weight: 600; color: var(--red); font-size: 1.5rem; letter-spacing: -0.015em; line-height: 1.2;
}
.price-note { color: var(--ink-2); font-size: 15px; }

/* Value props */
.valueprop { text-align: left; }

/* Steps — the headings already carry their numbers ("1. Request a Visit"),
   so no decorative counter badge. A hairline rule sets each step apart. */
.step { border-top: 1px solid var(--hairline); padding-top: 24px; }

/* ---------- Tables (pricing) ---------- */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table.rates { width: 100%; border-collapse: collapse; background: transparent; }
table.rates caption { text-align: left; color: var(--ink-2); padding: 0 0 16px; font-size: 15px; }
table.rates th, table.rates td { padding: 18px 16px 18px 0; text-align: left; border-bottom: 1px solid var(--hairline); vertical-align: top; }
table.rates thead th {
  font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--ink-2); padding-bottom: 12px; border-bottom-color: var(--ink);
}
table.rates tbody tr:last-child td { border-bottom: none; }
table.rates td.price { font-weight: 600; color: var(--red); white-space: nowrap; }

/* ---------- Trust / badges ---------- */
.trust-row { display: flex; flex-wrap: wrap; gap: 8px 24px; align-items: center; }
.badge {
  display: inline-flex; align-items: center; gap: 8px;
  font-weight: 500; font-size: 15px; color: var(--ink);
}
.badge svg { width: 16px; height: 16px; color: var(--ink); flex-shrink: 0; }

/* ---------- Closing CTA band ---------- */
.cta-band { background: var(--ground-2); text-align: center; }
/* Never sit a gray band directly on another gray band */
.section--tint + .cta-band,
.section--gray + .cta-band { background: var(--ground); border-top: 1px solid var(--hairline); }
.cta-band .container { max-width: 52rem; }
.cta-band .lead { color: var(--ink-2) !important; margin-bottom: 40px; }
.cta-band .btn-row { justify-content: center !important; }
/* First CTA-band button is the primary action */
.cta-band .btn-row .btn--on-dark:first-child { background: var(--red); color: #fff; border-color: var(--red); }
.cta-band .btn-row .btn--on-dark:first-child:hover { background: var(--red-deep); border-color: var(--red-deep); }

/* ---------- NAP ---------- */
.nap {
  line-height: 1.7; font-style: normal;
  background: var(--ground-2); border: 0; border-radius: var(--radius-card); padding: 32px;
}
.section--tint .nap, .section--gray .nap { background: var(--ground); }
.nap a { font-weight: 600; display: inline-flex; align-items: center; min-height: 44px; }

/* ---------- Forms ---------- */
.form-card { background: var(--ground-2); border: 0; border-radius: var(--radius-card); padding: clamp(24px, 4vw, 40px); box-shadow: none; }
.section--tint .form-card, .section--gray .form-card { background: var(--ground); }
.field { margin-bottom: 20px; }
.field label { display: block; font-weight: 500; font-size: 15px; margin-bottom: 8px; }
.field .req { color: inherit; }
.field input, .field select, .field textarea {
  width: 100%; font-family: var(--font); font-size: 17px; color: var(--ink);
  padding: 12px 14px; min-height: 48px;
  border: 1px solid #86868B; border-radius: var(--radius-sm); background: var(--ground);
  transition: border-color .2s ease, box-shadow .2s ease;
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px rgba(29, 29, 31, 0.16);
}
.field .hint, .hint { color: var(--ink-2); font-size: 15px; margin-top: 6px; }
.form-note {
  background: var(--ground-2); border: 0; border-radius: var(--radius-sm); padding: 20px 24px;
  font-size: 16px; margin-bottom: 24px;
}
.section--tint .form-note, .section--gray .form-note, .card .form-note, .form-card .form-note { background: var(--ground); }
.hp-field { position: absolute; left: -9999px; } /* honeypot */

/* ---------- FAQ accordion ---------- */
.faq { border-top: 1px solid var(--hairline); }
.faq details { border-bottom: 1px solid var(--hairline); }
.faq summary {
  cursor: pointer; list-style: none; padding: 24px 0;
  font-weight: 600; font-size: 19px; letter-spacing: -0.012em;
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; font-size: 24px; font-weight: 400; color: var(--ink-2); line-height: 1; flex-shrink: 0;
}
.faq details[open] summary::after { content: "\2013"; } /* en dash */
.faq .faq-body { padding: 0 0 24px; color: var(--ink); }
.faq .faq-body p:last-child { margin-bottom: 0; }

/* ---------- Breadcrumbs ---------- */
.breadcrumb { padding: 24px 0 0; }
.breadcrumb ol { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; padding: 0; margin: 0; font-size: 13px; }
.breadcrumb li { margin: 0; }
.breadcrumb li::after { content: "/"; color: var(--hairline); margin-left: 6px; }
.breadcrumb li:last-child::after { content: ""; }
.breadcrumb a { color: var(--ink-2); text-decoration: none; }
.breadcrumb a:hover { color: var(--ink); text-decoration: underline; }
.breadcrumb [aria-current="page"] { color: var(--ink); }

/* ---------- Lists ---------- */
.check-list { list-style: none; padding-left: 0; }
.check-list li { position: relative; padding-left: 28px; margin-bottom: 10px; }
.check-list li::before {
  content: ""; position: absolute; left: 0; top: 0.3em; width: 16px; height: 16px;
  background: var(--ink);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center/contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center/contain no-repeat;
}

.confirm-flag {
  display: inline-block; background: #FFF4D6; color: #7a5a00; border: 1px solid #E7C65A;
  font-size: 0.85rem; font-weight: 600; padding: 0.05rem 0.4rem; border-radius: 4px;
}

/* ---------- Footer ---------- */
.site-footer { background: var(--ground-2); color: var(--ink-2); font-size: 14px; border-top: 1px solid var(--hairline); }
.footer-top { padding: 64px 0 40px; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 32px; }
.site-footer h3 { color: var(--ink); font-weight: 600; font-size: 13px; letter-spacing: 0; margin-bottom: 14px; }
.site-footer a { color: var(--ink-2); text-decoration: none; }
.site-footer a:hover { color: var(--ink); text-decoration: underline; }
.footer-nav ul { list-style: none; padding: 0; margin: 0; }
.footer-nav li { margin-bottom: 0; }
.footer-nav a { display: inline-flex; align-items: center; min-height: 32px; }
.footer-logo { height: 56px; width: auto; margin-bottom: 16px; }
.footer-tag { font-weight: 600; color: var(--ink); }
.footer-bar { border-top: 1px solid var(--hairline); color: var(--ink-2); padding: 20px 0; font-size: 12px; }
.footer-bar .container { display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between; align-items: center; }

/* ---------- Responsive grids ---------- */
@media (max-width: 1023px) {
  .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .grid-2 { column-gap: 40px; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 734px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .grid-2 { row-gap: 40px; }
  .footer-grid { grid-template-columns: 1fr; }
  .section-head { margin-bottom: 40px; }
  .card, .nap { padding: 24px; }
  .card--plain { padding: 0; }
  .footer-nav a { min-height: 44px; }
}

/* ---------- Motion: one reveal effect ----------
   site.js adds .reveal only to below-the-fold elements, so nothing is ever
   hidden without JavaScript and the hero is never animated. */
.js .reveal {
  opacity: 0; transform: translateY(12px);
  transition: opacity 500ms var(--ease), transform 500ms var(--ease);
}
.js .reveal.is-visible { opacity: 1; transform: none; }

/* ---------- Reduced motion: disable all animation ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .reveal { opacity: 1; transform: none; transition: none; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ---------- Print ---------- */
@media print {
  .site-header, .site-footer, .cta-band, .nav-toggle { display: none; }
  body { font-size: 12pt; color: #000; }
}

/* =========================================================================
   Text Us button, Google reviews, Google rating badge
   ========================================================================= */

/* ---------- "Text Us" floating button (a primary action, so it stays red) ---------- */
.textus { position: fixed; right: 16px; bottom: 16px; z-index: 200; }
.textus-btn {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--red); color: #fff; text-decoration: none; font-weight: 500; font-size: 16px;
  padding: 10px 18px; min-height: 48px; min-width: 48px; border-radius: 980px;
  border: 0; transition: background-color .2s ease;
}
.textus-btn:hover, .textus-btn:focus-visible { background: var(--red-deep); color: #fff; }
.textus-btn svg { width: 22px; height: 22px; flex-shrink: 0; }
.textus-panel {
  display: none; position: absolute; right: 0; bottom: calc(100% + 10px);
  width: min(300px, calc(100vw - 32px));
  background: var(--ground); color: var(--ink);
  border: 1px solid var(--hairline); border-radius: var(--radius-sm);
  padding: 16px 20px; font-size: 15px;
}
/* Reveal on JS toggle, or on keyboard focus / hover as a no-JS fallback (desktop where sms: is inert) */
.textus.is-open .textus-panel,
.textus:focus-within .textus-panel,
.textus:hover .textus-panel { display: block; }
.textus-panel p { margin: 0 0 8px; }
.textus-panel p:last-child { margin-bottom: 0; }
.textus-panel a { font-weight: 600; }
.textus-note { font-size: 14px; color: var(--ink-2); }
@media print { .textus { display: none; } }

/* ---------- Google reviews ----------
   Single column at every width: quotes run 25–130 words, so a grid leaves
   ragged gaps. White cards on a --ground-2 section. */
.reviews { display: grid; gap: var(--gap); max-width: 68ch; margin: 0 auto; }
.review { margin: 0; }
.review blockquote {
  margin: 0; padding: 32px; background: var(--ground); border-radius: var(--radius-card);
  color: var(--ink); font-size: 21px; font-weight: 400; line-height: 1.45; letter-spacing: -0.012em;
}
.review blockquote p { margin: 0; }
.review figcaption { margin-top: 12px; font-size: 15px; color: var(--ink-2); }

/* ---------- Google rating badge ---------- */
.google-badge {
  display: inline-flex; align-items: center; gap: 6px; text-decoration: none;
  font-weight: 500; color: var(--ink);
}
.google-badge:hover { text-decoration: underline; text-decoration-color: var(--ink); }
.google-badge .star { color: var(--ink); font-size: 14px; }
.google-badge .rating { color: var(--ink); font-weight: 600; }
.google-badge .count { color: var(--ink-2); font-weight: 400; }

/* ---------- Footer social + directory ---------- */
.footer-social { display: flex; gap: 8px; margin: 16px 0 0; }
.footer-social a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid var(--hairline); color: var(--ink); text-decoration: none;
  transition: background-color .2s ease;
}
.footer-social a:hover { background: var(--ground); color: var(--ink); }
.footer-social svg { width: 20px; height: 20px; }
.footer-directory {
  grid-column: 1 / -1; margin: 24px 0 0; padding-top: 20px;
  border-top: 1px solid var(--hairline);
  color: var(--ink-2); font-size: 12px;
}
.footer-directory a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--hairline); }
.footer-directory a:hover { text-decoration-color: var(--ink); }

/* Floating Text Us button stays out of the way of the open menu sheet */
.nav-open .textus { display: none; }

/* =========================================================================
   Photography (Pexels stock — decorative/illustrative only, never "us")
   No overlays, tints or text on photos. Bands are square-edged and sit
   between sections; in-card photos get the card radius. Nothing animates.
   ========================================================================= */
.photo-band { display: block; margin: 0; background: var(--ground-2); }
.photo-band img {
  display: block; width: 100%; object-fit: cover;
  height: min(56.25vw, var(--band-h)); /* 16:9 on phones, capped at the band height */
}
.photo-band--60 { --band-h: 60vh; }
.photo-band--40 { --band-h: 40vh; }
.photo-band--32 { --band-h: 32vh; }

.card-photo { display: block; margin: 0 0 24px; }
.card-photo img {
  display: block; width: 100%; height: auto;
  border-radius: var(--radius-card); background: var(--ground-2);
}
.card-photo--below { margin: 24px 0 0; }

/* Full-width audience band (home: Providers & Practices) */
.audience-band { padding: 72px 0; }
.audience-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: center; gap: 32px 64px; }
.audience-band .card-photo { margin: 0; }
.audience-band .audience-copy { max-width: 68ch; }
.audience-band h3 { margin-bottom: 12px; }
.audience-band p { margin: 0 0 24px; }
@media (max-width: 734px) {
  .audience-band { padding: 56px 0; }
  .audience-grid { grid-template-columns: 1fr; }
}
/* People photos: keep faces in frame when the band crops to a wide strip */
.photo-band--faces img { object-position: 50% 35%; }