/* Pure Air Alabama — shared site styles
 * Layered on top of colors_and_type.css.
 * Layouts and components shared across homepage variants and service pages.
 */

*, *::before, *::after { box-sizing: border-box; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; }

/* Prevent stray horizontal overflow on mobile from any element that
   forgets a max-width. Belt-and-suspenders alongside container rules. */
html, body { overflow-x: clip; }

/* Body lock while the mobile menu is open. */
body.menu-open-lock { overflow: hidden; }

/* ── Container ────────────────────────────────────────────────────── */
.container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-pad-x-desk);
}
@media (max-width: 900px) {
  .container { padding: 0 var(--container-pad-x-tab); }
}
@media (max-width: 640px) {
  .container { padding: 0 var(--container-pad-x-mob); }
}

/* ── Promo bar ────────────────────────────────────────────────────── */
.promo-bar {
  background-image: var(--gradient-brand-dark);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 0.55rem 0;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}
.promo-bar .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--color-brand-secondary);
  display: inline-block;
  box-shadow: 0 0 0 0 rgba(var(--rgb-sky),0.6);
  animation: pulse 1.8s ease-out infinite;
}
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(var(--rgb-sky),0.55); }
  70% { box-shadow: 0 0 0 8px rgba(var(--rgb-sky),0); }
  100% { box-shadow: 0 0 0 0 rgba(var(--rgb-sky),0); }
}

/* ── Navbar ───────────────────────────────────────────────────────── */
.nav-wrap {
  position: sticky; top: 0; z-index: 50;
}
.navbar {
  position: relative;
  z-index: 10;  /* sit above the mobile menu panel inside .nav-wrap */
  background-color: var(--color-glass-bg);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--color-border-subtle);
}
.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 88px;
}
/* flex-shrink: 0 — the logo must never be flex-squashed when nav content
   outgrows the bar; if items are ever added, overflow shows instead. */
.nav-logo { flex-shrink: 0; }
.nav-logo img { height: 48px; width: auto; }
.nav-links {
  display: flex; align-items: center; gap: 2.4rem;
  list-style: none; margin: 0; padding: 0;
}
.nav-links > li { position: relative; }
/* Tighten link spacing on smaller desktops so the bar fits without
   squeezing the logo (hamburger takes over ≤1239px). */
@media (max-width: 1440px) {
  .nav-links { gap: 1.25rem; }
}
.nav-links a {
  font-size: 15.5px;
  font-weight: 600;
  color: var(--color-text-secondary);
  letter-spacing: -0.005em;
  transition: color 0.2s ease;
  display: inline-flex; align-items: center; gap: 4px;
  white-space: nowrap;  /* two-word labels must not wrap into two lines */
}
.nav-links a:hover { color: var(--color-text-primary); }
.nav-links .chev {
  width: 16px; height: 16px; opacity: 0.6;
  transition: transform 200ms var(--ease-out);
}
.nav-links .has-dropdown:hover > a .chev,
.nav-links .has-dropdown.open > a .chev {
  transform: rotate(180deg);
}

/* Dropdown menu — opens below trigger, always light-themed so it
   reads cleanly against both light and dark hero navbars. */
.nav-links .dropdown {
  position: absolute;
  top: 100%;
  left: -0.75rem;
  min-width: 260px;
  background: #fff;
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-menu);
  padding: 0.5rem;
  margin-top: 0.5rem;
  list-style: none;
  display: flex; flex-direction: column;
  gap: 2px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 200ms var(--ease-out),
              transform 200ms var(--ease-out),
              visibility 200ms;
  z-index: 60;
}
.nav-links .has-dropdown:hover > .dropdown,
.nav-links .has-dropdown:focus-within > .dropdown,
.nav-links .has-dropdown.open > .dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
/* Dropdown items live on a light surface and must render dark text
   even when the parent nav is in overlay (white-on-hero) state. We
   anchor the selector on `.dropdown` so the same rule wins regardless
   of which nav variant is rendering above. */
.nav-links .dropdown li a,
.nav-wrap.nav-overlay .nav-links .dropdown li a,
.nav-wrap.nav-overlay.is-solid .nav-links .dropdown li a,
.svc-hero-wrap .nav-links .dropdown li a {
  display: block;
  padding: 0.7rem 0.9rem;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--color-text-body);
  border-radius: var(--radius-sm);
  letter-spacing: -0.005em;
  transition: background 0.15s ease, color 0.15s ease;
}
.nav-links .dropdown li a:hover,
.nav-wrap.nav-overlay .nav-links .dropdown li a:hover,
.nav-wrap.nav-overlay.is-solid .nav-links .dropdown li a:hover,
.svc-hero-wrap .nav-links .dropdown li a:hover {
  background: var(--color-surface-subtle);
  color: var(--color-brand-primary-700);
}

.nav-cta {
  display: flex; align-items: center; gap: 0.75rem;
}
.nav-phone {
  font-weight: 700; font-size: 15px;
  color: var(--color-brand-primary-700);
  display: inline-flex; align-items: center; gap: 6px;
}
.nav-phone svg { width: 16px; height: 16px; }

/* Phone-as-button variant — outline button with transparent fill,
   used in service-page navs so the call CTA reads as a button rather
   than a bare link. Same visual weight as the secondary "See How It
   Works" button. */
.btn.nav-phone-btn {
  padding: 0.7rem 1.25rem;
  font-size: 14.5px;
  border-radius: var(--radius-button);
  background: transparent;
  color: var(--color-brand-primary-700);
  border: 1px solid var(--color-border-default);
}
.btn.nav-phone-btn:hover {
  border-color: var(--color-brand-primary);
  background: rgba(var(--rgb-navy),0.04);
  color: var(--color-brand-primary-700);
}
.btn.nav-phone-btn svg { width: 16px; height: 16px; }

/* Overlay nav (homepage hero over dark video): flip the phone button
   to white-on-transparent with a white outline. No hover change while
   the video is visible. Reverts to the default navy state once the
   nav goes solid on scroll. */
.nav-wrap.nav-overlay .btn.nav-phone-btn,
.nav-wrap.nav-overlay .btn.nav-phone-btn:hover {
  background: transparent;
  border-color: var(--color-white-outline);
  color: #fff;
}
.nav-wrap.nav-overlay.is-solid .btn.nav-phone-btn {
  border-color: var(--color-brand-primary);
  color: var(--color-brand-primary-700);
}
.nav-wrap.nav-overlay.is-solid .btn.nav-phone-btn:hover {
  background: rgba(var(--rgb-navy),0.04);
  border-color: var(--color-brand-primary);
  color: var(--color-brand-primary-700);
}

/* Outline nav CTA — adapts to nav state. White outline + translucent
   white hover over the dark hero; flips to brand-navy outline + tinted
   hover once the nav goes solid on scroll. Matches the hero's
   "See How It Works" ghost button. */
.btn.nav-cta-outline {
  background: transparent;
  border: 1px solid var(--color-white-outline);
  color: #fff;
  padding: 0.7rem 1.25rem;
  font-size: 14.5px;
}
.btn.nav-cta-outline svg { width: 16px; height: 16px; }
.btn.nav-cta-outline:hover {
  background: var(--color-white-border);
  border-color: #fff;
  color: #fff;
}
.nav-wrap.nav-overlay.is-solid .btn.nav-cta-outline {
  border-color: var(--color-brand-primary);
  color: var(--color-brand-primary-700);
}
.nav-wrap.nav-overlay.is-solid .btn.nav-cta-outline:hover {
  background: rgba(var(--rgb-navy),0.08);
  border-color: var(--color-brand-primary);
  color: var(--color-brand-primary-700);
}

/* ── Buttons ──────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.85rem 1.5rem;
  border-radius: var(--radius-button);
  font-size: var(--font-size-button);
  font-weight: 700;
  letter-spacing: -0.01em;
  white-space: nowrap;
  cursor: pointer;
  transition: all 0.3s var(--ease-brand);
  border: none;
}
.btn svg { width: 18px; height: 18px; }
.btn-sm {
  padding: 0.75rem 1.35rem;
  font-size: 14.5px;
}
.btn-sm svg { width: 16px; height: 16px; }
.btn-lg {
  padding: 1.05rem 1.85rem;
  font-size: 1.0625rem;
}

/* Brand CTA — light logo gradient (sky → pale, diagonal) with deep-ink
   label. Light gradient is the dominant button treatment site-wide;
   dark gradients are reserved for section backgrounds. */
.btn-brand {
  background-image: var(--gradient-brand);
  color: var(--color-brand-secondary);
  box-shadow: 0 4px 14px -4px rgba(var(--rgb-navy),0.35);
}
.btn-brand:hover {
  filter: brightness(1.04);
  box-shadow: 0 12px 28px -8px rgba(var(--rgb-navy),0.45);
  transform: translateY(-1px);
}
.btn-brand svg { stroke: var(--color-brand-secondary); }
/* Primary accent CTA — same light gradient + dark label. Legacy class
   name kept to avoid HTML churn; visually equivalent to .btn-brand and
   .btn-soft, just with a heavier shadow for prominence. */
.btn-accent {
  background-image: var(--gradient-brand);
  color: var(--color-brand-secondary);
  box-shadow: 0 8px 22px -8px rgba(var(--rgb-navy),0.55);
}
.btn-accent:hover {
  filter: brightness(1.04);
  box-shadow: 0 12px 28px -8px rgba(var(--rgb-navy),0.65);
  transform: translateY(-1px);
}
.btn-accent svg { stroke: var(--color-brand-secondary); }
.btn-secondary {
  background: #fff;
  color: var(--color-text-primary);
  border: 1px solid var(--color-border-default);
}
.btn-secondary:hover {
  border-color: var(--color-brand-primary);
  color: var(--color-brand-primary-700);
  background: #fdfdff;
}
/* Outline CTA — transparent fill with a coloured border. The default pairs
   with a filled .btn-brand/.btn-accent on light sections; `.on-dark` swaps to
   the white outline for dark navy bands. SVGs inherit colour via currentColor. */
.btn-ghost {
  background: transparent;
  color: var(--color-brand-primary-700);
  border: 1px solid var(--color-brand-primary-700);
}
.btn-ghost:hover { background: var(--color-brand-primary-100); transform: translateY(-1px); }
.btn-ghost.on-dark { color: #fff; border-color: var(--color-white-outline); }
.btn-ghost.on-dark:hover { background: var(--color-white-surface-hi); }

/* Light/logo-gradient CTA — sky → pale wash mirroring the logo badge.
   The background is light, so the label must be the deep brand ink. Pairs
   well with the dark hero so the button reads as a bright lift, not as
   another dark slab. */
.btn-soft {
  background-image: var(--gradient-brand);
  color: var(--color-brand-secondary);
  box-shadow: 0 8px 22px -8px rgba(var(--rgb-navy),0.35);
}
.btn-soft:hover {
  filter: brightness(1.04);
  box-shadow: 0 12px 28px -8px rgba(var(--rgb-navy),0.45);
  transform: translateY(-1px);
}
.btn-soft svg { stroke: var(--color-brand-secondary); }

/* ── Eyebrow pill ─────────────────────────────────────────────────── */
/* Eyebrow pill on light surfaces.
   Uses the logo sky tint as the chip fill, the deep ink as the text, and
   the deep brand-blue as the pulse dot — so the chip itself "wears the
   brand color" and the label still reads with strong contrast. */
.eyebrow-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--color-brand-primary-200);
  border: 1px solid var(--color-brand-primary-300);
  border-radius: var(--radius-pill);
  padding: 0.4rem 0.85rem 0.4rem 0.55rem;
  font-size: var(--font-size-eyebrow);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
  color: var(--color-brand-secondary);
  box-shadow: var(--shadow-subtle);
}
.eyebrow-pill .dot-wrap {
  position: relative;
  width: 8px; height: 8px;
}
.eyebrow-pill .dot-wrap .dot {
  position: absolute; inset: 0;
  background: var(--color-brand-primary);
  border-radius: 50%;
}
.eyebrow-pill .dot-wrap .ring {
  position: absolute; inset: 0;
  background: var(--color-brand-primary);
  border-radius: 50%;
  animation: pm-ping 1.5s cubic-bezier(0, 0, 0.2, 1) infinite;
}
/* Accent variant — uses deep brand-blue text (legacy `.green` class kept
   for HTML markup compatibility; styling is brand-blue, not green). */
.eyebrow-pill.green { color: var(--color-brand-primary-700); }
.eyebrow-pill.green .dot, .eyebrow-pill.green .ring { background: var(--color-brand-primary); }
.eyebrow-pill.on-dark {
  background: var(--color-white-surface-hi);
  border-color: var(--color-white-border);
  color: #fff;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.eyebrow-pill.on-dark .dot, .eyebrow-pill.on-dark .ring {
  background: var(--color-brand-primary);
}
@media (max-width: 640px) {
  .eyebrow-pill {
    padding: 0.3rem 0.65rem 0.3rem 0.45rem;
    font-size: 0.625rem;
    letter-spacing: 0.32em;
  }
}

/* ── Section heading block ────────────────────────────────────────── */
.section-heading {
  text-align: center;
  max-width: 760px;
  margin: 0 auto 4rem;
}
.section-heading .eyebrow-pill { margin-bottom: 1.5rem; }
.section-heading h2 { margin-bottom: 1.25rem; }
.section-heading .t-lead {
  text-wrap: pretty;
}

/* ── Star rating ──────────────────────────────────────────────────── */
.stars {
  display: inline-flex; gap: 2px;
  color: var(--color-accent-gold);
}
.stars svg { width: 16px; height: 16px; fill: currentColor; }

/* ── Card ─────────────────────────────────────────────────────────── */
.card {
  background: var(--color-surface-card);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-card);
  padding: 2.5rem;
  transition: all 0.5s ease;
}
.card:hover {
  box-shadow: var(--shadow-card-hover);
  border-color: var(--color-border-brand-30);
  transform: translateY(-4px);
}
.card .icon-chip {
  width: 48px; height: 48px;
  border-radius: var(--radius-sm);
  background: var(--color-surface-subtle);
  color: var(--color-brand-primary-700);
  display: inline-flex; align-items: center; justify-content: center;
  margin-bottom: 1.5rem;
}
.card .icon-chip.green {
  background: var(--color-surface-subtle-2);
  color: var(--color-brand-secondary);
}
.card .icon-chip svg { width: 24px; height: 24px; }
.card h3 { margin-bottom: 0.75rem; font-size: 1.5rem; }
.card p { font-size: 1rem; }

/* ── Footer ───────────────────────────────────────────────────────── */
/* Uses the same dark gradient as every other dark band, so the footer
   reads as the continuation of the brand-blue family rather than a
   separate navy. */
.footer {
  background-color: var(--color-brand-primary-950);
  background-image: var(--gradient-brand-dark);
  color: rgba(255,255,255,0.78);
  padding: 5rem 0 2.5rem;
}
.footer h4 {
  color: #fff;
  font-size: 0.75rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  margin: 0 0 1.25rem;
}
.footer ul { list-style: none; margin: 0; padding: 0; }
.footer li { margin-bottom: 0.6rem; }
.footer a { font-size: 0.9375rem; color: var(--color-text-tertiary); transition: color 0.2s; }
.footer a:hover { color: #fff; }
.footer .footer-static li { font-size: 0.9375rem; color: var(--color-text-tertiary); }
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr 1.2fr;
  gap: 3rem;
  padding-bottom: 3rem;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
/* Size by width, never height: the horizontal wordmark is ~4.4:1, and a
   fixed height + max-width:100% squashes it when the column is narrow. */
.footer-grid .brand img { width: min(220px, 100%); height: auto; margin-bottom: 1.5rem; }
.footer-grid .brand p { color: var(--color-text-tertiary); font-size: 0.9375rem; max-width: 28ch; }
.footer-bottom {
  display: flex;
  justify-content: space-between;
  padding-top: 2rem;
  font-size: 0.8125rem;
  color: #64748b;
}
.footer-bottom .legal { display: flex; gap: 1.5rem; }

/* ── Fade-up animation on scroll ──────────────────────────────────── */
.fade-up {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out);
  will-change: opacity, transform;
}
.fade-up.in {
  opacity: 1;
  transform: translateY(0);
}
/* Gentler variant for tight rows of cards / small text blocks. */
.fade-up.soft {
  transform: translateY(18px);
  transition-duration: 0.8s;
}
/* `.fade-up.soft` and `.fade-up.in` have equal specificity, so without
   this rule the later `.soft` declaration would pin the element at
   +18px even after fade-in — turning small hover lifts into 20px+
   jumps. Restore the intended landing position. */
.fade-up.soft.in { transform: translateY(0); }
/* Cascade children with a small per-row delay so a grid of cards
   reveals row-by-row instead of landing as a block. Apply `.stagger`
   on the parent, `.fade-up` on each child. */
.stagger > .fade-up:nth-child(1) { transition-delay: 0ms; }
.stagger > .fade-up:nth-child(2) { transition-delay: 80ms; }
.stagger > .fade-up:nth-child(3) { transition-delay: 160ms; }
.stagger > .fade-up:nth-child(4) { transition-delay: 240ms; }
.stagger > .fade-up:nth-child(5) { transition-delay: 320ms; }
.stagger > .fade-up:nth-child(6) { transition-delay: 400ms; }
.stagger > .fade-up:nth-child(7) { transition-delay: 480ms; }
.stagger > .fade-up:nth-child(8) { transition-delay: 560ms; }

@media (prefers-reduced-motion: reduce) {
  .fade-up, .fade-up.soft {
    transform: none !important;
    transition: opacity 0.3s ease !important;
    transition-delay: 0ms !important;
  }
}

/* ── Comparison table ─────────────────────────────────────────────── */
/* Three-column "feature vs. competitor vs. brand" table with a
   gradient-filled brand header cell. Pages set their own column
   labels and row contents; this owns the visual chrome. */
.compare {
  background: #fff;
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-card-lg);
  overflow: hidden;
  box-shadow: var(--shadow-card);
}
.compare-row {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr 1fr;
  align-items: center;
  border-bottom: 1px solid var(--color-border-subtle);
}
.compare-row:last-child { border-bottom: 0; }
.compare-row > div { padding: 1.25rem 2rem; }
.compare-row.head > div {
  padding: 1.75rem 2rem;
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-weight: 800;
  color: var(--color-text-secondary);
  background: var(--color-surface-app);
  border-bottom: 1px solid var(--color-border-default);
  text-align: center;
}
.compare-row.head > div:first-child {
  text-align: left;
}
.compare-row.head .pureairalabama {
  color: #fff;
  border-bottom-color: var(--color-brand-primary);
  position: relative;
}
.compare-row.head .pureairalabama::before {
  content: "";
  position: absolute; inset: 0;
  background: var(--gradient-brand-deep);   /* Header cell carries white text — needs the dark variant for legibility. */
  z-index: 0;
}
.compare-row.head .pureairalabama span { position: relative; z-index: 1; }
.compare-row .feature {
  font-weight: 700;
  color: var(--color-text-primary);
  font-size: 1rem;
  letter-spacing: -0.01em;
}
.compare-row .feature small {
  display: block;
  font-size: 0.8125rem;
  color: var(--color-text-secondary);
  font-weight: 500;
  margin-top: 0.25rem;
}
.compare-row .cell {
  font-size: 0.9375rem;
  color: var(--color-text-body);
  display: flex; align-items: center; justify-content: center; gap: 0.5rem;
}
.compare-row .check {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--color-surface-subtle-2);
  color: var(--color-brand-secondary);
  display: inline-flex; align-items: center; justify-content: center;
  flex: 0 0 auto;
}
.compare-row .check svg { width: 14px; height: 14px; }
.compare-row .x {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: #fff1f3;
  color: var(--color-status-danger);
  display: inline-flex; align-items: center; justify-content: center;
  flex: 0 0 auto;
}
.compare-row .x svg { width: 14px; height: 14px; }
.compare-row .pureairalabama {
  background: linear-gradient(180deg, rgba(var(--rgb-navy),0.025), transparent);
  border-left: 1px solid var(--color-border-subtle);
}
.compare-row .pureairalabama .check { background: var(--color-brand-secondary); color: #fff; }
/* When a compare row is also a fade-up target, only opacity should
   animate — sliding a table row reads as broken. */
.compare-row.fade-up { transform: none; }

/* ── Stat utility ─────────────────────────────────────────────────── */
/* Big gradient-text number recipe used in hero trust stats, review
   aggregate, testimonial result rows, and stage numerals. Page sets
   font-size; this owns the weight, tracking, and gradient fill. */
.t-stat {
  font-weight: 900;
  letter-spacing: -0.04em;
  line-height: 1;
  background-image: var(--gradient-brand-deep);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
.t-stat.accent {
  background-image: var(--gradient-accent);
}

/* ── Reviews carousel ─────────────────────────────────────────────── */
/* ── Review card (used inside the reviews carousel) ───────────── */
.svc-review {
  background: #fff;
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-card);
  padding: 2rem;
  display: flex; flex-direction: column;
  gap: 1.25rem;
  transition: all 0.4s var(--ease-brand);
}
.svc-review:hover {
  box-shadow: var(--shadow-card);
  border-color: var(--color-border-brand-30);
  transform: translateY(-4px);
}
.svc-review .stars { color: var(--color-accent-gold); display: flex; gap: 2px; }
.svc-review .stars svg { width: 16px; height: 16px; fill: currentColor; }
.svc-review blockquote {
  margin: 0;
  font-size: 1rem;
  line-height: 1.55;
  color: var(--color-text-primary);
  font-weight: 500;
  letter-spacing: -0.005em;
  text-wrap: pretty;
  flex: 1;
}
.svc-review .meta {
  display: flex; align-items: center; gap: 0.75rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--color-border-subtle);
}
.svc-review .avatar {
  width: 36px; height: 36px;
  background: var(--color-surface-subtle);
  color: var(--color-brand-primary-700);
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 0.8125rem;
  flex: 0 0 auto;
}
.svc-review .name { font-size: 0.9375rem; font-weight: 700; color: var(--color-text-primary); }
.svc-review .where { font-size: 0.75rem; color: var(--color-text-secondary); }
.svc-review .verified {
  margin-left: auto;
  display: inline-flex; align-items: center; gap: 0.3rem;
  font-size: 0.625rem;
  font-weight: 800;
  color: var(--color-brand-secondary);
  text-transform: uppercase;
  letter-spacing: 0.12em;
}
.svc-review .verified svg { width: 11px; height: 11px; }

/* Horizontal scroll-snap track with arrow nav. Three cards visible on
   desktop, two on tablet, one on mobile. Arrows scroll one card at a
   time and disable at the ends. */
.reviews-carousel { position: relative; }
.reviews-carousel .carousel-track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - 2 * 1.25rem) / 3);
  gap: 1.25rem;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  padding: 0.5rem 0 1rem;
}
.reviews-carousel .carousel-track::-webkit-scrollbar { display: none; }
.reviews-carousel .carousel-track > * { scroll-snap-align: start; }
.reviews-carousel .carousel-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 48px; height: 48px;
  background: #fff;
  border: 1px solid var(--color-border-default);
  border-radius: 50%;
  color: var(--color-text-primary);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  box-shadow: var(--shadow-card);
  z-index: 2;
  transition: all 0.3s var(--ease-brand);
}
.reviews-carousel .carousel-arrow:hover {
  border-color: var(--color-brand-primary);
  color: var(--color-brand-primary-700);
}
.reviews-carousel .carousel-arrow:disabled {
  opacity: 0.35;
  cursor: default;
  pointer-events: none;
}
.reviews-carousel .carousel-arrow svg { width: 20px; height: 20px; }
.reviews-carousel .carousel-arrow.prev { left: -24px; }
.reviews-carousel .carousel-arrow.next { right: -24px; }
@media (max-width: 900px) {
  .reviews-carousel .carousel-track { grid-auto-columns: calc((100% - 1rem) / 2); }
}
@media (max-width: 640px) {
  .reviews-carousel .carousel-track { grid-auto-columns: 100%; }
  /* Arrows would overlap card content at this width — rely on
     scroll-snap touch behavior and hide them. */
  .reviews-carousel .carousel-arrow { display: none; }
}

/* ── Video testimonial reel ───────────────────────────────────────
   Each card keeps its video's real shape: 9:16 for the Shorts, 16:9
   for the landscape interview, all sharing one height on desktop. The
   strip scrolls sideways; arrows step one card at a time. */
.video-reel {
  --reel-h: 460px;
  --reel-card-portrait: calc(var(--reel-h) * 9 / 16);
  --reel-card-landscape: calc(var(--reel-h) * 16 / 9);
  margin: 0 0 3.5rem;
}
.video-reel-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.25rem;
}
.video-reel-head h3 {
  margin: 0;
  font-family: var(--font-family-display);
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: -0.015em;
  line-height: 1.2;
  color: var(--color-text-primary);
}
.video-reel-nav { display: flex; gap: 0.5rem; flex: 0 0 auto; }
.video-reel-arrow {
  width: 44px; height: 44px;
  background: #fff;
  border: 1px solid var(--color-border-default);
  border-radius: 50%;
  color: var(--color-text-primary);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: border-color 0.3s var(--ease-brand), color 0.3s var(--ease-brand), opacity 0.3s var(--ease-brand);
}
.video-reel-arrow:hover { border-color: var(--color-brand-primary); color: var(--color-brand-primary-700); }
.video-reel-arrow:focus-visible { outline: 3px solid var(--color-brand-primary); outline-offset: 2px; }
.video-reel-arrow:disabled { opacity: 0.35; cursor: default; pointer-events: none; }
.video-reel-arrow svg { width: 18px; height: 18px; }
.video-reel-track {
  display: flex; align-items: flex-start;
  gap: 1.25rem;
  margin: 0; padding: 0 0 0.25rem;
  list-style: none;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
}
.video-reel-track::-webkit-scrollbar { display: none; }
.video-card {
  flex: 0 0 auto;
  width: var(--reel-card-portrait);
  scroll-snap-align: start;
  display: flex; flex-direction: column;
  gap: 0.875rem;
}
.video-card.is-landscape { width: var(--reel-card-landscape); }
.video-card-media {
  position: relative;
  width: 100%;
  aspect-ratio: 9 / 16;
  border-radius: 1.75rem;
  overflow: hidden;
  background: var(--color-brand-primary-950);
}
.video-card.is-landscape .video-card-media { aspect-ratio: 16 / 9; }
.video-card-media iframe {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  border: 0;
}
.video-card-play {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  padding: 0; border: 0;
  background: none;
  cursor: pointer;
  color: var(--color-brand-secondary);
}
.video-card-play:focus-visible { outline: 3px solid var(--color-brand-primary); outline-offset: -3px; border-radius: inherit; }
.video-card-play img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s var(--ease-brand);
}
.video-card-play:hover img { transform: scale(1.03); }
.video-card-icon {
  position: absolute; left: 50%; top: 50%;
  width: 64px; height: 64px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 10px 30px -8px rgba(var(--rgb-navy-deep), 0.45);
  display: flex; align-items: center; justify-content: center;
  transition: background-color 0.3s var(--ease-brand), color 0.3s var(--ease-brand);
}
.video-card-icon svg { width: 22px; height: 22px; margin-left: 3px; fill: currentColor; }
.video-card-play:hover .video-card-icon,
.video-card-play:focus-visible .video-card-icon { background: var(--color-brand-primary); color: #fff; }
.video-card-time {
  position: absolute; right: 0.875rem; top: 0.875rem;
  padding: 0.25rem 0.625rem;
  border-radius: var(--radius-pill);
  background: rgba(var(--rgb-navy-deep), 0.72);
  color: #fff;
  font-size: 0.75rem; font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.video-card-quote {
  margin: 0;
  max-width: 40ch;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.45;
  letter-spacing: -0.005em;
  color: var(--color-text-primary);
  text-wrap: pretty;
}
.video-card-name {
  margin: -0.375rem 0 0;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-text-secondary);
}
@media (max-width: 900px) {
  .video-reel { --reel-h: 420px; }
}
@media (max-width: 640px) {
  .video-reel {
    --reel-card-portrait: 64vw;
    --reel-card-landscape: 86vw;
    margin-bottom: 2.5rem;
  }
  .video-reel-head h3 { font-size: 1.25rem; }
  .video-card-media { border-radius: 1.25rem; }
}
@media (prefers-reduced-motion: reduce) {
  .video-reel-track { scroll-behavior: auto; }
  .video-card-play img { transition: none; }
  .video-card-play:hover img { transform: none; }
}

/* ── Why Pure Air Alabama reasons grid ────────────────────────────────────── */
.why-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.25rem;
}
.why-card {
  background: #fff;
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-card);
  padding: 2.25rem 1.75rem;
  display: flex; flex-direction: column; gap: 0.75rem;
  transition:
    transform 0.3s var(--ease-out),
    box-shadow 0.3s var(--ease-out),
    border-color 0.3s var(--ease-out);
}
.why-card.fade-up.soft:hover {
  border-color: var(--color-border-brand-30);
  background:
    linear-gradient(#fff, #fff) padding-box,
    var(--gradient-brand) border-box;
  box-shadow: 0 14px 26px -18px rgba(var(--rgb-navy),0.28);
  transform: translateY(-4px);
}
.why-card .icon-chip {
  width: 48px; height: 48px;
  border-radius: var(--radius-sm);
  background: var(--color-surface-subtle);
  color: var(--color-brand-primary-700);
  display: inline-flex; align-items: center; justify-content: center;
  margin-bottom: 0.5rem;
  transition: background 0.35s var(--ease-brand), color 0.35s var(--ease-brand);
}
.why-card .icon-chip.accent {
  background: var(--color-surface-subtle-2);
  color: var(--color-brand-secondary);
}
.why-card.fade-up.soft:hover .icon-chip {
  background: var(--gradient-brand);   /* 48px chip — light variant; dark icon for legibility. */
  color: var(--color-brand-secondary);
}
.why-card .icon-chip svg { width: 22px; height: 22px; }
.why-card h3 {
  font-size: 1.125rem;
  letter-spacing: -0.02em;
  margin: 0;
}
.why-card p {
  font-size: 0.9375rem;
  color: var(--color-text-secondary);
  margin: 0;
  line-height: 1.55;
}
@media (max-width: 1100px) { .why-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .why-grid { grid-template-columns: 1fr; } }

/* ── Service areas + map ─────────────────────────────────────────── */
/* Shared across homepage and service pages. Two-column grid: stacked
   area rows on the left, embedded Google Map on the right with a
   floating overlay badge. */
.svc-areas-grid {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 3rem;
  align-items: stretch;
}
.svc-areas-list {
  display: grid; gap: 0.75rem;
  align-content: start;
}
.svc-area-row {
  background: #fff;
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-card);
  padding: 1.75rem;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 1rem;
  align-items: start;
  transition: all 0.4s ease;
}
.svc-area-row:hover {
  border-color: var(--color-border-brand-30);
  box-shadow: var(--shadow-card);
}
.svc-area-row .name {
  font-size: 1.25rem;
  font-weight: 900;
  letter-spacing: -0.02em;
  color: var(--color-text-primary);
  margin-bottom: 0.5rem;
}
.svc-area-row .neighborhoods {
  font-size: 0.875rem;
  color: var(--color-text-secondary);
  line-height: 1.55;
}
.svc-area-row .pill {
  align-self: start;
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-size: 0.625rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  padding: 0.35rem 0.65rem;
  background: var(--color-surface-subtle-2);
  color: var(--color-brand-secondary);
  border-radius: var(--radius-pill);
  white-space: nowrap;
}
.svc-area-row .pill .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--color-brand-secondary);
}
.svc-map {
  border-radius: var(--radius-card-lg);
  overflow: hidden;
  box-shadow: var(--shadow-image);
  position: relative;
  min-height: 460px;
  background: var(--color-surface-subtle);
}
.svc-map iframe {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  border: 0;
  filter: saturate(0.9) contrast(0.96);
}
.svc-map .map-overlay {
  position: absolute;
  bottom: 1.5rem; left: 1.5rem;
  background: #fff;
  padding: 1rem 1.25rem;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  display: flex; align-items: center; gap: 0.75rem;
  pointer-events: none;
}
.svc-map .map-overlay .pin {
  width: 32px; height: 32px;
  background-image: var(--gradient-brand);   /* 32px pin — light variant; dark icon for legibility. */
  color: var(--color-brand-secondary);
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  flex: 0 0 auto;
}
.svc-map .map-overlay .pin svg { width: 16px; height: 16px; }
.svc-map .map-overlay .label {
  font-size: 0.625rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-weight: 800;
  color: var(--color-text-secondary);
}
.svc-map .map-overlay strong {
  font-size: 0.9375rem;
  color: var(--color-text-primary);
  font-weight: 800;
  letter-spacing: -0.01em;
}
@media (max-width: 1100px) {
  .svc-areas-grid { grid-template-columns: 1fr; }
}

/* ── Nav overlay (homepage) ───────────────────────────────────────── */
/* Used when the nav floats transparent over a hero video and then
   becomes solid on scroll. Service pages still use the default nav. */
.nav-wrap.nav-overlay {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  transition: background 350ms var(--ease-out),
              border-color 350ms var(--ease-out),
              backdrop-filter 350ms var(--ease-out);
}
.nav-wrap.nav-overlay .navbar {
  background: transparent;
  border-bottom: 1px solid transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.nav-wrap.nav-overlay .nav-links a { color: rgba(255,255,255,0.75); }
.nav-wrap.nav-overlay .nav-links a:hover { color: #fff; }
.nav-wrap.nav-overlay .nav-phone { color: #fff; }
.nav-wrap.nav-overlay .nav-logo .logo-dark { display: none; }
.nav-wrap.nav-overlay .nav-logo .logo-light { display: block; }

.nav-wrap.nav-overlay.is-solid .navbar {
  background: var(--color-glass-bg);
  border-bottom-color: var(--color-border-subtle);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
.nav-wrap.nav-overlay.is-solid .nav-links a { color: var(--color-text-secondary); }
.nav-wrap.nav-overlay.is-solid .nav-links a:hover { color: var(--color-text-primary); }
.nav-wrap.nav-overlay.is-solid .nav-phone { color: var(--color-brand-primary-700); }
.nav-wrap.nav-overlay.is-solid .nav-logo .logo-light { display: none; }
.nav-wrap.nav-overlay.is-solid .nav-logo .logo-dark { display: block; }

/* ── Section base (shared by homepage and service pages) ──────────── */
section.svc-section { padding: 7rem 0; position: relative; }
section.svc-alt     { background: var(--color-surface-section); }

/* ── Vapure section (video + intro), shared layout ────────────────── */
/* Used on homepage and service pages alike. Pages may override the
   media side (some show video, some show a photo with a play overlay)
   but the grid + copy rules are the same everywhere. */
.vapure {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 4rem;
  align-items: center;
}
.vapure-video {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-card-lg);
  overflow: hidden;
  box-shadow: var(--shadow-image-large);
  background: var(--color-brand-primary-900);
}
.vapure-video iframe {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  border: 0;
  display: block;
}
.vapure-copy .eyebrow-pill { margin-bottom: 1.5rem; }
.vapure-copy h2            { margin-bottom: 1.5rem; text-wrap: balance; }
.vapure-copy .t-lead       { margin-bottom: 2rem; max-width: 56ch; }
.vapure-features {
  list-style: none;
  margin: 0 0 2rem;
  padding: 0;
  display: grid; gap: 0.6rem;
}
.vapure-features li {
  display: flex; align-items: center; gap: 0.6rem;
  font-size: 0.9375rem;
  color: var(--color-text-body);
}
.vapure-features li svg {
  width: 18px; height: 18px;
  color: var(--color-brand-secondary);
  flex: 0 0 auto;
}
.vapure-cta-row { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; }
@media (max-width: 1100px) { .vapure { grid-template-columns: 1fr; } }

/* ── KHAOS air purifier (BLS affiliate) ─────────────────────────────
   The product shot is cropped at the bottom, so it stands on the
   panel's lower edge rather than floating in the middle. */
.khaos {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 4rem;
  align-items: center;
}
.khaos-product {
  display: flex; align-items: flex-end; justify-content: center;
  aspect-ratio: 5 / 6;
  padding: 3rem 3rem 0;
  border-radius: var(--radius-card-lg);
  background: linear-gradient(180deg, var(--color-brand-primary-100) 0%, var(--color-brand-primary-200) 100%);
  overflow: hidden;
}
.khaos-product img { width: 72%; height: auto; display: block; }
.khaos-copy .eyebrow-pill { margin-bottom: 1.5rem; }
.khaos-copy h2 { margin-bottom: 1.5rem; text-wrap: balance; }
.khaos-copy .t-lead { margin-bottom: 1.25rem; max-width: 60ch; }
.khaos-copy .btn { margin-top: 0.75rem; }
@media (max-width: 1100px) {
  .khaos { gap: 2.5rem; }
  .khaos-product { padding: 2rem 2rem 0; }
}
@media (max-width: 900px) {
  .khaos { grid-template-columns: 1fr; }
  .khaos-product { max-width: 520px; width: 100%; margin: 0 auto; }
}

/* ── Dark-section grid overlay (paint via ::before) ───────────────── */
/* Add this class to any dark navy section that wants the subtle
   grid-pattern stamp + radial mask. Set --grid-opacity inline to tune
   if the section needs a more or less prominent overlay. */
/* `.svc-section.is-dark` is grouped in below so every dark navy band gets
   the grid automatically — no need to repeat `.surface-grid-dark` in markup. */
.surface-grid-dark,
.svc-section.is-dark {
  position: relative;
  /* `clip` not `hidden`: hidden turns the section into a scroll
     container, which silently disables the sticky .health-intro. */
  overflow: clip;
}
.surface-grid-dark::before,
.svc-section.is-dark::before {
  content: "";
  position: absolute; inset: 0;
  background-image: var(--surface-grid-image);
  background-size: var(--surface-grid-size);
  mask-image: var(--surface-grid-mask);
  -webkit-mask-image: var(--surface-grid-mask);
  pointer-events: none;
  opacity: var(--grid-opacity, 0.5);
}

/* ── Glass card on dark backgrounds ───────────────────────────────── */
/* Reusable recipe for cards that sit on navy/dark sections — used by
   .health-card, .b-closing-card, and similar one-off panels. */
.card-on-dark {
  background: var(--color-white-surface);
  border: 1px solid var(--color-white-border);
  border-radius: var(--radius-card);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition:
    transform 0.3s var(--ease-out),
    background 0.3s var(--ease-out),
    border-color 0.3s var(--ease-out);
}
/* Two selectors so the hover works both for plain cards and for
   `.fade-up.soft` cards. The 3-class form is needed because
   `.fade-up.soft.in` (0,2,0) would otherwise pin the transform after
   scroll-in. See memory: hover-on-fade-up-soft-cards. */
.card-on-dark:hover,
.card-on-dark.fade-up.soft:hover {
  background: var(--color-white-surface-hi);
  border-color: var(--color-white-border-hi);
  transform: translateY(-4px);
}

/* ── Dark navy section variant ────────────────────────────────────── */
/* Apply `.is-dark` (with `.surface-grid-dark` for the grid overlay) to
   any `.svc-section` that should sit on the brand navy band — used by
   the home-health "Why Pure Air Alabama" intro on the homepage and service
   pages, the testing-options 3-up grid, the closing CTA, etc. */
/* Grid overlay (position/overflow + ::before) is shared with
   `.surface-grid-dark` above, so every dark band carries it automatically. */
.svc-section.is-dark {
  background-color: var(--color-brand-primary-950);
  background-image: var(--gradient-brand-dark);   /* Clean two-stop sweep — no overlays that introduce off-family tints. */
  color: #fff;
  --grid-opacity: 0.6;
}
.svc-section.is-dark .container { position: relative; }
.svc-section.is-dark .section-heading h2     { color: #fff; text-wrap: balance; }
.svc-section.is-dark .section-heading .t-lead{ color: var(--color-white-text-lead); }
.health-grid {
  display: grid;
  grid-template-columns: 1fr 1.35fr;
  gap: 4rem;
  align-items: start;
}
/* The intro column (eyebrow + heading + lead) pins just below the nav
   once it would scroll out, and rides along until the cards column —
   the taller of the two — runs out of section. align-self keeps the
   sticky box its natural height instead of stretching to the row. */
.health-intro {
  position: sticky;
  top: 7rem;
  align-self: start;
}
.health-intro h2 {
  text-wrap: balance;
  margin-bottom: 1.25rem;
  color: #fff;
}
.health-intro .t-lead {
  max-width: 42ch;
  color: var(--color-white-text-lead);
}
/* Single column on purpose: the stacked card list is what gives the
   sticky intro its scroll distance. Two-across would halve the section
   height and the pin would never engage. */
.health-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}
/* `.health-card` inherits chrome from `.card-on-dark`. */
.health-card {
  display: flex;
  gap: 1.1rem;
  align-items: flex-start;
  padding: 1.6rem 1.5rem;
}
.health-icon {
  flex: 0 0 auto;
  width: 44px; height: 44px;
  border-radius: var(--radius-md);
  background: rgba(var(--rgb-sky),0.22);
  color: var(--color-brand-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.health-icon svg { width: 22px; height: 22px; }
.health-card h3 {
  font-size: 1.0625rem;
  letter-spacing: -0.015em;
  margin: 0 0 0.35rem;
  line-height: 1.25;
  color: #fff;
}
.health-card p {
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--color-white-text-muted);
  margin: 0;
}
@media (max-width: 1100px) {
  .health-grid { grid-template-columns: 1fr; }
  /* Single-column layout: a sticky intro would overlap the cards. */
  .health-intro { position: static; }
}
@media (max-width: 640px)  { .health-cards { grid-template-columns: 1fr; } }

/* ── "The Evidence" section · study cards ────────────────────────── */
/* Shared by index.html and mold-remediation.html. */
.studies {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
}
.study {
  background: #fff;
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-card);
  padding: 2.25rem;
  display: flex; flex-direction: column; gap: 1rem;
  position: relative;
  overflow: hidden;
  transition: all 0.4s ease;
}
.study:hover {
  border-color: var(--color-border-brand-30);
  box-shadow: var(--shadow-card);
  transform: translateY(-4px);
}
.study::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 3px;
  background-image: var(--gradient-brand);
  z-index: 1;  /* keep the brand accent line on top of the photo header */
}
/* Full-bleed photo header — pulls against the card padding so the image
   meets the card edges; the card's overflow:hidden rounds the corners. */
.study-photo {
  margin: -2.25rem -2.25rem 0.5rem;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  position: relative;
}
.study-photo img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: grayscale(15%);
  transition: transform 0.8s var(--ease-out), filter 0.6s var(--ease-out);
}
.study:hover .study-photo img {
  transform: scale(1.04);
  filter: grayscale(0%);
}
.study-photo .doc-tag {
  position: absolute;
  bottom: 0.85rem; left: 0.85rem;
  display: inline-flex; align-items: center; gap: 0.4rem;
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  padding: 0.4rem 0.75rem;
  border-radius: var(--radius-pill);
  font-size: 0.625rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--color-brand-primary-700);
  box-shadow: var(--shadow-subtle);
}
.study-photo .doc-tag svg { width: 12px; height: 12px; }
.study .meta-row {
  display: flex; align-items: center; gap: 0.75rem;
  font-size: 0.6875rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--color-text-secondary);
}
.study .meta-row .journal {
  color: var(--color-brand-primary-700);
  padding: 0.35rem 0.7rem;
  background: var(--color-surface-subtle);
  border-radius: var(--radius-pill);
}
.study h3 {
  font-size: 1.3125rem;
  letter-spacing: -0.02em;
  line-height: 1.3;
  text-wrap: balance;
}
.study .finding {
  font-size: 0.9375rem;
  color: var(--color-text-body);
  line-height: 1.6;
  flex: 1;
}
.study .finding-stat {
  display: flex; align-items: baseline; gap: 0.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--color-border-subtle);
  margin-top: 0.5rem;
}
.study .finding-stat .num {
  font-size: 1.75rem;
  font-weight: 900;
  letter-spacing: -0.03em;
  background-image: var(--gradient-brand-deep);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.study .finding-stat .lbl {
  font-size: 0.75rem;
  color: var(--color-text-secondary);
  font-weight: 600;
}
.study .source {
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--color-brand-primary-700);
}
.study .source svg { width: 12px; height: 12px; }
.evidence-coda {
  text-align: center;
  margin-top: 2.5rem;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--color-text-secondary);
  font-style: italic;
  letter-spacing: -0.005em;
}
@media (max-width: 1100px) { .studies { grid-template-columns: 1fr 1fr; } }
@media (max-width: 720px)  { .studies { grid-template-columns: 1fr; } }

/* ── FAQ accordion ────────────────────────────────────────────────── */
/* Shared by faqs.html and the FAQ section on mold-remediation.html. */
.faq-list {
  max-width: 820px;
  margin: 0 auto;
  display: flex; flex-direction: column;
  gap: 0.75rem;
}
.faq-item {
  background: #fff;
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-card);
  overflow: hidden;
  transition: border-color 0.3s var(--ease-brand), box-shadow 0.3s var(--ease-brand);
}
.faq-item:hover { border-color: var(--color-border-default); }
.faq-q {
  width: 100%;
  background: none; border: 0; cursor: pointer;
  text-align: left;
  font: inherit;
  padding: 1.4rem 1.6rem;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  font-weight: 700;
  font-size: 1.0625rem;
  color: var(--color-text-primary);
  letter-spacing: -0.01em;
}
.faq-q .faq-icon {
  width: 20px; height: 20px;
  flex: 0 0 auto;
  color: var(--color-brand-primary-700);
  transition: transform 0.3s var(--ease-brand);
}
.faq-q.open .faq-icon { transform: rotate(180deg); }
.faq-a {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s var(--ease-brand);
}
.faq-a p {
  padding: 0 1.6rem 1.4rem;
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--color-text-body);
}

/* ── Heading-after-eyebrow rhythm ─────────────────────────────────── */
/* Standard 1.5rem gap between an eyebrow-pill and the heading that
   immediately follows it. Replaces inline margin-top declarations
   scattered across pages. */
.eyebrow-pill + h1,
.eyebrow-pill + h2,
.eyebrow-pill + h3 { margin-top: 1.5rem; }

/* ── Inline body links ────────────────────────────────────────────── */
/* Long-form prose links (about, science, faqs) need underline
   affordance. Apply `.prose a` or use the class directly. */
.prose a,
a.body-link {
  border-bottom: 1px dotted var(--color-border-brand-30);
  transition: color 0.2s ease, border-color 0.2s ease;
}
.prose a:hover,
a.body-link:hover {
  color: var(--color-brand-primary-700);
  border-bottom-color: var(--color-brand-primary);
}

/* ── Footer phone CTA ─────────────────────────────────────────────── */
/* The footer phone number is the loudest legal/contact mark in the
   footer. Replaces an inline style="" repeated across every page. */
.footer .footer-static li.phone {
  color: #fff;
  font-weight: 800;
  font-size: 1.125rem;
  letter-spacing: -0.02em;
}
.footer .footer-static li.book-cta { margin-top: 1rem; }
.footer .footer-static li.book-cta .btn { margin-top: 0.5rem; }

/* ── Form input focus ring on dark sections ───────────────────────── */
.form-on-dark input,
.form-on-dark textarea {
  background: var(--color-white-surface-hi);
  border: 1px solid var(--color-white-border);
  border-radius: var(--radius-md);
  padding: 0.95rem 1.1rem;
  color: #fff;
  font-family: inherit;
  font-size: 0.9375rem;
  font-weight: 500;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.form-on-dark input::placeholder,
.form-on-dark textarea::placeholder { color: rgba(255,255,255,0.45); }
.form-on-dark input:focus,
.form-on-dark textarea:focus {
  outline: none;
  border-color: rgba(255,255,255,0.4);
  box-shadow: 0 0 0 3px rgba(255,255,255,0.1);
}

/* ── Hamburger toggle (mobile/tablet nav) ─────────────────────────── */
/* The button is rendered on every nav by site.js at runtime. It sits in
   `.nav-inner` after the desktop CTAs and is hidden on desktop. */
.nav-toggle {
  display: none;
  background: none;
  border: 0;
  cursor: pointer;
  width: 44px; height: 44px;
  padding: 0;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 5px;
  color: var(--color-text-primary);
  transition: color 0.2s ease;
}
.nav-toggle span {
  display: block;
  width: 26px; height: 2px;
  background: currentColor;
  border-radius: 2px;
  transition: transform 0.3s var(--ease-brand), opacity 0.2s ease;
}
.nav-wrap.menu-open .nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-wrap.menu-open .nav-toggle span:nth-child(2) { opacity: 0; }
.nav-wrap.menu-open .nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* On the homepage overlay variant, the toggle sits over the dark video
   hero — flip it to white. Goes back to navy once the nav scrolls solid. */
.nav-wrap.nav-overlay .nav-toggle { color: #fff; }
.nav-wrap.nav-overlay.is-solid .nav-toggle { color: var(--color-text-primary); }
.nav-wrap.nav-overlay.menu-open .nav-toggle { color: var(--color-text-primary); }

/* ── Mobile menu panel (≤1100px) ──────────────────────────────────── */
/* Slides down from below the navbar. Content is generated by site.js
   from the desktop nav structure so this CSS only owns presentation. */
.nav-mobile-panel {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: var(--color-surface-app);
  padding: calc(var(--nav-height, 72px) + 1.5rem) 1.5rem 2rem;
  overflow-y: auto;
  transform: translateY(-100%);
  visibility: hidden;
  transition: transform 0.4s var(--ease-brand), visibility 0s linear 0.4s;
  z-index: 5;  /* below the navbar inside .nav-wrap so the toggle stays clickable */
  -webkit-overflow-scrolling: touch;
}
.nav-wrap.menu-open .nav-mobile-panel {
  transform: translateY(0);
  visibility: visible;
  transition: transform 0.4s var(--ease-brand), visibility 0s;
}
.nav-mobile-panel ul {
  list-style: none;
  padding: 0; margin: 0;
}
.nav-mobile-panel .nav-mobile-section-title {
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-weight: 800;
  color: var(--color-text-secondary);
  padding: 1.25rem 0.5rem 0.35rem;
}
.nav-mobile-panel li a {
  display: block;
  padding: 0.95rem 0.5rem;
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--color-text-primary);
  border-bottom: 1px solid var(--color-border-subtle);
  letter-spacing: -0.01em;
  transition: color 0.2s ease;
}
.nav-mobile-panel li a:hover {
  color: var(--color-brand-primary-700);
}
/* Dropdown children are indented and set lighter so they read as members of
   the section label above them. Without this every row is identical, so a
   standalone top-level link that happens to follow a section ("Reviews"
   after Resources) looks like one of its children. */
.nav-mobile-panel .nav-mobile-sub a {
  padding-left: 1.5rem;
  font-weight: 600;
  color: var(--color-text-body);
}
/* A top-level link directly after a section's children starts a new group. */
.nav-mobile-panel .nav-mobile-sub + .nav-mobile-top a {
  margin-top: 0.75rem;
}
.nav-mobile-panel .nav-mobile-cta {
  margin-top: 1.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.nav-mobile-panel .nav-mobile-cta .btn {
  width: 100%;
  justify-content: center;
}
/* The mobile panel is a light surface, but it lives inside .nav-wrap —
   which on the homepage carries .nav-overlay, whose rule flips the phone
   button to white-on-transparent (invisible here). Force the dark/default
   voice for the cloned phone CTA regardless of the overlay state. */
.nav-wrap .nav-mobile-panel .nav-mobile-cta .btn.nav-phone-btn,
.nav-wrap.nav-overlay .nav-mobile-panel .nav-mobile-cta .btn.nav-phone-btn {
  background: transparent;
  color: var(--color-brand-primary-700);
  border-color: var(--color-border-default);
}

/* Nav height on tablet/mobile — compressed so the mobile menu panel
   has more breathing room. The CSS custom prop is read by the panel
   to offset its top padding. */
/* 1239px (not 900) — four top-level items + phone + CTA need ~1180px to
   sit on one line with breathing room, so 1280px laptops get the full nav
   and tablets and narrow windows get the hamburger menu. Moving The Science
   into Resources (30 Sep 2026) is what freed the space; was 1280px. */
@media (max-width: 1239px) {
  .nav-wrap { --nav-height: 72px; }
  .nav-inner { height: 72px; }
  .nav-logo img { height: 38px; }
  .nav-inner nav,
  .nav-cta { display: none; }
  .nav-toggle {
    display: inline-flex;
    position: relative;
    z-index: 11;  /* sits above the panel even within navbar's stack */
  }
}

/* The overlay nav on the homepage stays transparent over the video on
   mobile by default; once the user opens the menu, we promote it to
   the same light-themed glass treatment used post-scroll so links stay
   readable when the panel is open behind it. */
@media (max-width: 1239px) {
  .nav-wrap.nav-overlay.menu-open .navbar {
    background: var(--color-glass-bg);
    border-bottom-color: var(--color-border-subtle);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
  }
  .nav-wrap.nav-overlay.menu-open .nav-logo .logo-light { display: none; }
  .nav-wrap.nav-overlay.menu-open .nav-logo .logo-dark  { display: block; }
}

/* ── Pulsating call FAB (mobile only) ─────────────────────────────── */
/* Rendered by site.js so it ships once and applies to every page. */
.call-fab { display: none; }
body.menu-open-lock .call-fab { display: none !important; }
@media (max-width: 640px) {
  .call-fab {
    position: fixed;
    right: 1.1rem;
    bottom: 1.1rem;
    z-index: 200;
    width: 60px; height: 60px;
    border-radius: 50%;
    background-image: var(--gradient-accent);
    /* Dark ink so the phone icon reads clearly on the light gradient. */
    color: var(--color-brand-secondary);
    /* Faint dark outline + a soft dark drop shadow to lift it off the page. */
    border: 1px solid rgba(var(--rgb-navy),0.18);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 14px 28px -10px rgba(var(--rgb-sky),0.55), 0 6px 16px -4px rgba(var(--rgb-navy),0.30), 0 2px 6px rgba(0,0,0,0.12);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
  }
  .call-fab:hover,
  .call-fab:focus-visible {
    transform: scale(1.06);
    outline: none;
  }
  .call-fab svg {
    width: 26px; height: 26px;
    position: relative;
    z-index: 2;
  }
  .call-fab::before,
  .call-fab::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: var(--color-brand-secondary);
    z-index: 0;
    animation: pm-fab-pulse 2.4s cubic-bezier(0, 0, 0.2, 1) infinite;
  }
  .call-fab::after { animation-delay: 1.2s; }
}
@keyframes pm-fab-pulse {
  0%   { transform: scale(0.97); opacity: 0.38; }
  80%  { transform: scale(1.6);  opacity: 0;    }
  100% { transform: scale(1.6);  opacity: 0;    }
}
@media (prefers-reduced-motion: reduce) {
  .call-fab::before, .call-fab::after { animation: none; opacity: 0; }
}

/* ── Footer responsive ────────────────────────────────────────────── */
@media (max-width: 900px) {
  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 2.5rem 2rem;
  }
  .footer-grid .brand { grid-column: 1 / -1; }
  .footer-grid .brand p { max-width: none; }
  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }
  .footer-bottom .legal { flex-wrap: wrap; gap: 1rem 1.5rem; }
}
@media (max-width: 640px) {
  /* Extra bottom padding lifts the legal-link row clear of the fixed
     call FAB (bottom-right, ~78px tall zone), which otherwise covers
     the "Sitemap" link and blocks the tap. */
  .footer { padding: 4rem 0 5.5rem; }
  .footer-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
    padding-bottom: 2.25rem;
  }
  .footer-grid .brand img { width: 190px; }
  /* Keep the legal links from sliding under the FAB on the right. */
  .footer-bottom .legal { padding-right: 4.5rem; }
}

/* ── Compare table on mobile ──────────────────────────────────────── */
/* 5-column grid is too wide for phones. Wrap in horizontal scroll so
   users can still see every column by sliding sideways within the
   table rather than losing data via stacking. */
@media (max-width: 900px) {
  .compare {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .compare-row { min-width: 680px; }
  .compare-row > div { padding: 1rem 1.25rem; }
  /* Keep header labels (e.g. "Pure Air AL", "DIY Scrub") on a single line —
     tighter spacing + smaller type stop them wrapping and skewing the rows. */
  .compare-row.head > div {
    padding: 1.1rem 0.85rem;
    font-size: 0.625rem;
    letter-spacing: 0.06em;
    white-space: nowrap;
  }
}

/* ── Section padding compression on mobile ────────────────────────── */
/* The standard 7rem section padding crushes vertical rhythm on phones. */
@media (max-width: 640px) {
  section.svc-section { padding: 4rem 0; }
  /* 20px lead copy wraps heavily on a phone; at body size it reads
     tighter while staying distinct via weight/color. */
  .t-lead { font-size: 1.125rem; }
}

/* ── Utility ──────────────────────────────────────────────────────── */
.text-center { text-align: center; }
.muted { color: var(--color-text-secondary); }
.divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--color-border-default), transparent);
  margin: 0;
}