/* ==========================================================================
   Southern Utah Hospice — shared stylesheet
   Rank Rebels · static HTML/CSS/vanilla JS, no build step.
   Edit here once; every page picks it up.
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. Typeface — Plus Jakarta Sans, self-hosted
   Variable font, weights 400–800 from one file per subset. Self-hosted on
   purpose: no third-party request from a health page, and no render delay
   waiting on fonts.googleapis.com. Licensed under the SIL Open Font License
   (see /assets/fonts/OFL.txt).
   -------------------------------------------------------------------------- */
@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("/assets/fonts/plus-jakarta-sans-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;
}
@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("/assets/fonts/plus-jakarta-sans-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;
}

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
  /* Brand palette. The orange sunburst logo was retired in Aug 2026 and replaced by a
     sage branch mark (#8fae9e, hue 149deg). The greens below were re-derived to that hue
     — the old ones sat at 137deg and read as a different family beside the new logo.
     Aug 8 2026: orange is gone entirely (Brandon). Actions are now carried by --forest,
     a green held apart from the sage used for structure, so "Talk to a nurse" and
     "Send a referral" still read as doors rather than dissolving into the page.
     This also fixed two live contrast failures: the CTA button was 2.68:1 with white
     text and its hover was 3.33:1. Both were below AA the whole time. */
  --forest: #2f6b45;       /* actions. White text 6.34:1; as text on sand 5.89:1. */
  --forest-deep: #235235;  /* action hover, and small accent text on light: 8.37:1 on sand. */
  --leaf: #a8d5b8;         /* links and markers on dark sage. 7.91:1 on --sage-deep. */
  --star: #b07d1a;         /* rating stars ONLY — kept gold, because green stars read as
                              a rendering fault. The one warm colour left, and the only
                              gold clearing 3:1 on BOTH sand (3.37) and sage-deep (3.56),
                              which matters because stars appear on both. */
  --sage: #325242;
  --sage-deep: #21362b;
  /* --sage-soft is used for TEXT (.door__label). The previous #6b8571 measured 3.74:1
     on sand, which fails AA — it predated the sweep covering that rule. 4.67:1 now. */
  --sage-soft: #567665;
  /* The logo's own green. Decorative ONLY — 2.24:1 on sand, so it must never carry text
     or a UI affordance. Logos are exempt from contrast rules; headings are not. */
  --sage-brand: #8fae9e;
  --sand: #faf6f0;
  --sand-deep: #f2ebe0;
  /* Kept, but scoped: errors, required-field markers, and the "myth" tag. These are
     semantic reds, not brand accent — an error in green would be actively misleading. */
  --terracotta: #b4552e;
  --warn-ink: #9c4a1d;     /* text partner for --terracotta on light. */
  /* Accent for SMALL text on light surfaces (eyebrows, tags, current-page nav).
     Verified by the contrast sweep, not by eye. */
  --accent-ink: #235235;
  --ink: #241f1a;
  --ink-soft: #5a5149;
  --white: #ffffff;
  --line: #e6ddd0;

  /* Type */
  --font: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* Fluid type scale */
  --fs-display: clamp(2.35rem, 1.5rem + 3.6vw, 4.25rem);
  --fs-h1: clamp(2rem, 1.4rem + 2.6vw, 3.25rem);
  --fs-h2: clamp(1.6rem, 1.25rem + 1.5vw, 2.4rem);
  --fs-h3: clamp(1.2rem, 1.08rem + 0.55vw, 1.5rem);
  --fs-lead: clamp(1.15rem, 1.05rem + 0.5vw, 1.38rem);
  --fs-body: 1.125rem;
  --fs-small: 1rem;
  --fs-eyebrow: 0.85rem;

  /* Space */
  --gutter: clamp(1.15rem, 4vw, 2.5rem);
  --section-y: clamp(3.5rem, 7vw, 6.5rem);
  --max: 1160px;
  --max-prose: 46rem;

  /* Shape + depth */
  --r-sm: 10px;
  --r: 16px;
  --r-lg: 24px;
  --r-pill: 999px;
  --shadow-sm: 0 1px 2px rgba(36, 31, 26, 0.06), 0 4px 12px rgba(36, 31, 26, 0.05);
  --shadow: 0 2px 4px rgba(36, 31, 26, 0.05), 0 12px 32px rgba(36, 31, 26, 0.09);
  --shadow-lg: 0 4px 8px rgba(36, 31, 26, 0.06), 0 24px 60px rgba(36, 31, 26, 0.13);
  --ring: 0 0 0 3px rgba(47, 107, 69, 0.4);
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 6rem;
  /* Belt-and-braces guard against sideways scroll on narrow screens. It lives
     here — not on body — and uses `clip` rather than `hidden` on purpose:
     `overflow: hidden` turns the element into a scroll container, and a scroll
     container on body breaks `position: sticky` for everything inside it.
     `clip` crops the same overflow without creating one. Layout is already
     verified free of horizontal overflow at every breakpoint, so this only
     ever catches a future regression. */
  overflow-x: clip;
}

body {
  margin: 0;
  font-family: var(--font);
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: 1.65;
  color: var(--ink);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
}

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

h1, h2, h3, h4 {
  margin: 0 0 0.6em;
  font-weight: 800;
  line-height: 1.14;
  letter-spacing: -0.021em;
  color: var(--sage-deep);
  text-wrap: balance;
}

h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); font-weight: 700; letter-spacing: -0.012em; }
h4 { font-size: 1.0625rem; font-weight: 700; }

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

a { color: var(--forest-deep); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--forest); }

strong, b { font-weight: 700; color: var(--sage-deep); }
ul, ol { margin: 0 0 1.1em; padding-left: 1.3em; }
li { margin-bottom: 0.45em; }
li::marker { color: var(--forest); }

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

::selection { background: rgba(47, 107, 69, 0.28); }

.skip-link {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translate(-50%, -140%);
  z-index: 999;
  background: var(--sage-deep);
  color: var(--white);
  padding: 0.7rem 1.2rem;
  border-radius: 0 0 var(--r-sm) var(--r-sm);
  font-weight: 600;
  text-decoration: none;
  transition: transform 0.18s ease;
}
.skip-link:focus { transform: translate(-50%, 0); color: var(--white); }

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

/* --------------------------------------------------------------------------
   3. Layout helpers
   -------------------------------------------------------------------------- */
.wrap {
  width: 100%;
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.wrap--narrow { max-width: 62rem; }
.prose { max-width: var(--max-prose); }

.section { padding-block: var(--section-y); }
.section--tight { padding-block: clamp(2.5rem, 5vw, 4rem); }
.section--sand { background: var(--sand); }
.section--sand-deep { background: var(--sand-deep); }
.section--sage {
  background: var(--sage-deep);
  color: rgba(255, 255, 255, 0.86);
}
.section--sage h2, .section--sage h3, .section--sage strong { color: var(--white); }
/* :not(.btn) so buttons keep their own foreground color inside dark sections —
   otherwise orange text lands on an orange button. */
.section--sage a:not(.btn) { color: var(--leaf); }

.section-head { max-width: 44rem; margin-bottom: clamp(2rem, 4vw, 3rem); }
.section-head--center { margin-inline: auto; text-align: center; }

.eyebrow {
  display: block;
  margin-bottom: 0.85rem;
  font-size: var(--fs-eyebrow);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-ink);
}
.section--sage .eyebrow { color: var(--leaf); }

.lead {
  font-size: var(--fs-lead);
  line-height: 1.6;
  color: var(--ink-soft);
}
.section--sage .lead { color: rgba(255, 255, 255, 0.84); }

.grid { display: grid; gap: clamp(1rem, 2.2vw, 1.65rem); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 16.5rem), 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); }

.center { text-align: center; }
.mt-0 { margin-top: 0; }

/* --------------------------------------------------------------------------
   4. Buttons
   -------------------------------------------------------------------------- */
.btn {
  --btn-bg: var(--forest);
  /* White, and this flipped with the Aug 8 recolor. On the old orange the
     correct choice was ink (6.10:1; white was 2.68:1 and unreadable for the
     70+ audience this site exists for). --forest is a dark fill, so it inverts:
     ink is 2.57:1 on it, white is 6.34:1. The rule the old comment stated still
     holds — any variant that changes --btn-bg must re-check --btn-fg. */
  --btn-fg: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  padding: 0.95rem 1.6rem;
  border: 0;
  border-radius: var(--r-pill);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-family: inherit;
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: transform 0.16s ease, box-shadow 0.16s ease, background-color 0.16s ease;
}
.btn:hover {
  --btn-bg: var(--forest-deep);
  color: var(--btn-fg);
  transform: translateY(-2px);
  box-shadow: var(--shadow);
}
.btn:active { transform: translateY(0); }
.btn svg { width: 1.15em; height: 1.15em; flex: none; }

.btn--sage { --btn-bg: var(--sage-deep); --btn-fg: #fff; }
.btn--sage:hover { --btn-bg: var(--sage); }

.btn--outline {
  --btn-bg: transparent;
  --btn-fg: var(--sage-deep);
  border: 2px solid var(--sage-deep);
  padding: calc(0.95rem - 2px) calc(1.6rem - 2px);
  box-shadow: none;
}
.btn--outline:hover { --btn-bg: var(--sage-deep); --btn-fg: #fff; }

.btn--ghost-light {
  --btn-bg: rgba(255, 255, 255, 0.1);
  --btn-fg: #fff;
  border: 2px solid rgba(255, 255, 255, 0.55);
  padding: calc(0.95rem - 2px) calc(1.6rem - 2px);
  box-shadow: none;
}
.btn--ghost-light:hover { --btn-bg: #fff; --btn-fg: var(--sage-deep); border-color: #fff; }

.btn--lg { padding: 1.1rem 2rem; font-size: 1.125rem; }
.btn--sm { padding: 0.6rem 1.1rem; font-size: var(--fs-small); }
.btn--block { width: 100%; }

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  align-items: center;
}
.btn-row--center { justify-content: center; }

.textlink {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-weight: 700;
  color: var(--forest-deep);
  text-decoration: none;
}
.textlink::after { content: "→"; transition: transform 0.16s ease; }
.textlink:hover::after { transform: translateX(3px); }

/* --------------------------------------------------------------------------
   5. Header / nav
   -------------------------------------------------------------------------- */
.topbar {
  background: var(--sage-deep);
  color: rgba(255, 255, 255, 0.9);
  font-size: 0.875rem;
  font-weight: 500;
}
.topbar__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.35rem 1.25rem;
  padding-block: 0.55rem;
  text-align: center;
}
.topbar a:not(.btn) { color: var(--white); font-weight: 700; text-decoration: none; }
.topbar a:not(.btn):hover { color: var(--leaf); text-decoration: underline; }
.topbar__pulse {
  display: inline-block;
  width: 7px; height: 7px;
  margin-right: 0.45rem;
  border-radius: 50%;
  background: var(--leaf);
  box-shadow: 0 0 0 0 rgba(143, 174, 158, 0.7);
  animation: pulse 2.4s ease-out infinite;
}
/* On a narrow phone the top bar is the first thing in the tab order and the
   first thing seen — keep it to the 24/7 promise and the phone number. */
@media (max-width: 640px) {
  .topbar__aside { display: none; }
}

@keyframes pulse {
  70% { box-shadow: 0 0 0 8px rgba(143, 174, 158, 0); }
  100% { box-shadow: 0 0 0 0 rgba(143, 174, 158, 0); }
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--line);
}
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 0.7rem;
  /* Wider than the body wrap on purpose: logo + six links + two buttons need
     more room than a reading column. Text content still stops at --max. */
  max-width: 80rem;
}
.brand { display: inline-flex; align-items: center; flex: none; }
.brand img { width: 268px; height: 103px; }

.nav { display: flex; align-items: center; gap: 1.25rem; }
.nav__list {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.nav__list li { margin: 0; }
.nav__link {
  color: var(--sage-deep);
  font-size: 0.9375rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}
.nav__link:hover { color: var(--forest); }
.nav__link[aria-current="page"] {
  color: var(--accent-ink);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 5px;
}
.nav__cta { display: flex; align-items: center; gap: 0.6rem; }
/* Header buttons hold their shape. Left to shrink, the flex row squeezed them to
   min-content and "435-635-1001" stacked up as "435- / 635- / 1001".
   Scoped to the header — buttons elsewhere carry longer labels and should still
   wrap rather than push the page sideways on a phone. */
.nav__cta .btn { flex: none; white-space: nowrap; }

.nav-toggle {
  display: none;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 0.9rem;
  border: 1.5px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--white);
  color: var(--sage-deep);
  font: inherit;
  font-size: 0.9375rem;
  font-weight: 700;
  cursor: pointer;
}
.nav-toggle__bars { display: grid; gap: 3.5px; }
.nav-toggle__bars span {
  display: block;
  width: 17px; height: 2px;
  border-radius: 2px;
  background: var(--sage-deep);
}

/* The burger menu covers everything below the width where the full row fits.
   Measured, not guessed: logo + six links + two buttons need ~1160px before the
   buttons start being squeezed, so the menu takes over up to there. */
@media (max-width: 1160px) {
  .brand img { width: 196px; height: 75px; }
  .nav-toggle { display: inline-flex; }
  .nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 0.5rem var(--gutter) 1.35rem;
    background: var(--white);
    border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow);
  }
  .nav[data-open="true"] { display: flex; }
  .nav__list { flex-direction: column; align-items: stretch; gap: 0; }
  .nav__list li + li { border-top: 1px solid var(--line); }
  .nav__link { display: block; padding: 0.9rem 0.25rem; font-size: 1.0625rem; }
  .nav__cta { flex-direction: column; align-items: stretch; margin-top: 1.1rem; }
}

/* --------------------------------------------------------------------------
   6. Hero
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  overflow: hidden;
  /* isolate so the negative-z photo layer below paints above this background
     but still behind the hero content. */
  isolation: isolate;
  background:
    radial-gradient(900px 520px at 88% -8%, rgba(143, 174, 158, 0.34), transparent 62%),
    radial-gradient(700px 480px at -8% 108%, rgba(86, 118, 101, 0.22), transparent 60%),
    linear-gradient(180deg, var(--sand) 0%, #fffdfa 100%);
}
/* Snow Canyon behind the hero. Held low and washed heavily: the h1 and the lede
   are the most important text on the site and their contrast comes first. Both
   measured against the rendered pixels, not judged by eye. */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, rgba(250, 246, 240, 0.86) 0%, rgba(255, 253, 250, 0.93) 100%),
    url("/assets/img/snow-canyon.jpg") center 58% / cover;
}
.hero::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 1px;
  background: var(--line);
}
.hero__inner {
  display: grid;
  gap: clamp(2.25rem, 5vw, 4rem);
  /* start, not center. The badge card is the taller column, so centring pushed
     the whole text column — front doors included — down the page to balance
     against it. Aligning both to the top costs nothing visually and hands the
     difference straight back to the fold. */
  align-items: start;
  padding-block: clamp(2.75rem, 6vw, 5.25rem);
}
@media (min-width: 900px) {
  .hero__inner { grid-template-columns: 1.08fr 0.92fr; }
}

/* Two front doors */
.doors { display: grid; gap: 1rem; margin-top: 2rem; }
@media (min-width: 560px) { .doors { grid-template-columns: 1fr 1fr; } }
.door {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  padding: 1.4rem 1.35rem;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: rgba(255, 255, 255, 0.9);
  box-shadow: var(--shadow-sm);
  text-decoration: none;
  color: var(--ink);
  transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease;
}
.door:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow);
  border-color: rgba(47, 107, 69, 0.55);
  color: var(--ink);
}
.door__label {
  font-size: var(--fs-eyebrow);
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--sage-soft);
}
.door__title {
  font-size: 1.2rem;
  font-weight: 800;
  color: var(--sage-deep);
  letter-spacing: -0.015em;
  line-height: 1.25;
}
.door__meta { font-size: var(--fs-small); color: var(--ink-soft); }

/* Secondary doors — the two reading routes that sit under the main pair.
   Same tile affordance so they read as clickable rather than as body text,
   one step down in weight so the two front doors above stay the primary
   choice rather than becoming one of four. */
.doors--soft { margin-top: 1rem; }
.door--soft { padding: 1.05rem 1.2rem; gap: 0.3rem; }
.door--soft .door__title { font-size: 1.02rem; font-weight: 750; }
.door--call { border-left: 5px solid var(--forest); }
.door--refer { border-left: 5px solid var(--sage); }

.hero h1 { font-size: var(--fs-display); margin-bottom: 0.45em; }
.hero__tagline {
  display: block;
  font-size: clamp(1.15rem, 0.95rem + 0.8vw, 1.6rem);
  font-weight: 600;
  color: var(--forest-deep);
  letter-spacing: -0.01em;
  margin-top: 0.35em;
}
.hero__lead { font-size: var(--fs-lead); color: var(--ink-soft); max-width: 34rem; }

/* --- Above the fold ------------------------------------------------------
   Mahogani's brief from the Aug 7 call: assume 15–20 seconds of attention and
   no scrolling. The two front doors are the entire job of this hero, so they
   have to be reachable without one.

   On a 1440x800 laptop they were sitting 184px BELOW the fold, and 257px below
   at 1280x720 — the primary "Talk to a nurse" and "Send a referral" actions
   were invisible until you scrolled.

   These blocks key on viewport HEIGHT, not width, because that is the actual
   constraint. A tall desktop keeps the generous original spacing untouched;
   only short viewports compress. Spacing and type scale only — no copy is cut
   and nothing is reordered, so what the client approved is still what ships.
   --------------------------------------------------------------------- */
@media (min-width: 900px) and (max-height: 900px) {
  .hero__inner {
    padding-block: 1.75rem 2.25rem;
    gap: clamp(1.5rem, 2.5vw, 2.5rem);
  }
  .hero h1 { font-size: clamp(1.95rem, 0.9rem + 2.1vw, 2.75rem); margin-bottom: 0.3em; }
  .hero__tagline { font-size: clamp(1rem, 0.85rem + 0.45vw, 1.22rem); margin-top: 0.25em; }
  .hero__lead { font-size: 1.08rem; max-width: 31rem; }
  .doors { margin-top: 1.15rem; gap: 0.8rem; }
  .door { padding: 1rem 1.1rem; gap: 0.35rem; }
  .doors--soft { margin-top: 0.7rem; }
  .door--soft { padding: 0.8rem 1.1rem; gap: 0.2rem; }
  .badge-card__body { font-size: 0.94rem; }
}

/* Phones. The doors stack here, so they cost roughly twice the height and the
   lede is what has to give. Everything stays on the page — it just tightens. */
@media (max-width: 899px) and (max-height: 900px) {
  .hero__inner { padding-block: 1.5rem 2rem; gap: 1.75rem; }
  .hero h1 { font-size: clamp(1.8rem, 1.25rem + 2.6vw, 2.35rem); margin-bottom: 0.28em; }
  .hero__tagline { font-size: 1.05rem; margin-top: 0.22em; }
  .hero__lead { font-size: 1.04rem; }
  .doors { margin-top: 1rem; gap: 0.7rem; }
  .door { padding: 0.9rem 1.05rem; gap: 0.3rem; }
  .doors--soft { margin-top: 0.6rem; }
}

/* --------------------------------------------------------------------------
   7. Medicare 10/10 badge
   -------------------------------------------------------------------------- */
.badge-card {
  position: relative;
  padding: clamp(1.75rem, 3.5vw, 2.5rem);
  border-radius: var(--r-lg);
  background: linear-gradient(155deg, var(--sage-deep), #24382a 60%, #1d2f23);
  color: rgba(255, 255, 255, 0.86);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.badge-card::before {
  content: "";
  position: absolute;
  top: -45%;
  right: -25%;
  width: 24rem;
  height: 24rem;
  background: radial-gradient(circle, rgba(143, 174, 158, 0.32), transparent 66%);
}
.badge-card > * { position: relative; }
.badge-card__eyebrow {
  font-size: var(--fs-eyebrow);
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--leaf);
}
.badge-card__score {
  display: flex;
  align-items: baseline;
  gap: 0.15rem;
  margin: 0.75rem 0 0.35rem;
  font-size: clamp(3.5rem, 2rem + 7vw, 5.5rem);
  font-weight: 800;
  line-height: 0.95;
  letter-spacing: -0.045em;
  color: var(--white);
}
.badge-card__score span { font-size: 0.42em; font-weight: 700; color: rgba(255, 255, 255, 0.6); }
/* The averages are what make the 10 mean anything — on its own it is a number
   out of ten that a reader has no scale for. Both figures are quoted from the
   same Care Compare page as the score itself, never computed here. */
.badge-card__compare {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 1.5rem;
  margin: 0 0 0.9rem;
  padding: 0;
  list-style: none;
}
.badge-card__compare li {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
  margin: 0;
  font-size: var(--fs-small);
}
.badge-card__compare span { color: rgba(255, 255, 255, 0.72); }
.badge-card__compare b {
  color: var(--leaf);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
/* Alternative to .badge-card__score: a verification checkmark instead of a
   number. Kept for the case where the Care Index score needs to come off the
   page (recalculated, disputed, or awaiting confirmation) without redesigning
   the badge — swap the markup, not the layout. */
.badge-card__mark {
  margin: 1rem 0 0.9rem;
  color: var(--leaf);
}
.badge-card__mark svg {
  width: clamp(3.25rem, 2rem + 4vw, 4.5rem);
  height: clamp(3.25rem, 2rem + 4vw, 4.5rem);
}

.badge-card__title {
  font-size: clamp(1.2rem, 1.05rem + 0.6vw, 1.55rem);
  font-weight: 800;
  color: var(--white);
  letter-spacing: -0.02em;
  line-height: 1.22;
  text-wrap: balance;
}
.badge-card__body { margin-top: 0.7rem; font-size: var(--fs-small); line-height: 1.6; }
.badge-card__note {
  margin-top: 1.25rem;
  padding-top: 1.15rem;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  font-size: 0.8125rem;
  color: rgba(255, 255, 255, 0.62);
}
.badge-card__note a { color: var(--leaf); }

.stat-row {
  display: grid;
  gap: 0.9rem;
  margin-top: 1.5rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.stat {
  padding: 0.9rem 1rem;
  border-radius: var(--r);
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
}
.stat__num {
  display: block;
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--white);
  letter-spacing: -0.02em;
}
.stat__label { font-size: 0.8125rem; line-height: 1.4; color: rgba(255, 255, 255, 0.72); }

/* --------------------------------------------------------------------------
   8. Cards
   -------------------------------------------------------------------------- */
.card {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  padding: clamp(1.35rem, 2.4vw, 1.85rem);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--white);
  box-shadow: var(--shadow-sm);
}
.card h3 { margin-bottom: 0.2rem; }
.card p { font-size: 1.0625rem; color: var(--ink-soft); line-height: 1.65; }
.card ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 0.4rem; }
.card ul li { font-size: 1.0625rem; color: var(--ink-soft); line-height: 1.5; padding-left: 1.15rem; position: relative; }
.card ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--sage);
}
.card--link { text-decoration: none; color: var(--ink); transition: transform 0.16s ease, box-shadow 0.16s ease; }
.card--link:hover { transform: translateY(-3px); box-shadow: var(--shadow); color: var(--ink); }
.card--flat { box-shadow: none; background: var(--sand); border-color: transparent; }

.icon-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  margin-bottom: 0.5rem;
  border-radius: 14px;
  background: linear-gradient(150deg, rgba(143, 174, 158, 0.2), rgba(47, 107, 69, 0.1));
  color: var(--forest);
}
.icon-badge svg { width: 1.5rem; height: 1.5rem; }
.icon-badge--sage {
  background: linear-gradient(150deg, rgba(86, 118, 101, 0.2), rgba(50, 82, 66, 0.1));
  color: var(--sage);
}

/* Myth vs. truth (stigma-breaker) */
.myth-grid { display: grid; gap: 1rem; }
@media (min-width: 720px) { .myth-grid { grid-template-columns: 1fr 1fr; } }
.myth {
  padding: 1.4rem 1.5rem;
  border-radius: var(--r-lg);
  background: var(--white);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
}
.myth__tag {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 0.7rem;
  padding: 0.28rem 0.7rem;
  border-radius: var(--r-pill);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.myth__tag--myth { background: rgba(180, 85, 46, 0.12); color: var(--warn-ink); }
.myth__tag--truth { background: rgba(50, 82, 66, 0.12); color: var(--sage-deep); }
.myth h3 { font-size: 1.15rem; margin-bottom: 0.5rem; }
.myth p { font-size: 1.0625rem; color: var(--ink-soft); margin: 0; line-height: 1.6; }

/* Comparison table. The wrapper scrolls on its own so a wide table can never
   push the page sideways on a phone. */
.compare-scroll {
  overflow-x: auto;
  margin: 1.75rem 0 2rem;
  border-radius: var(--r);
  border: 1px solid var(--line);
  -webkit-overflow-scrolling: touch;
}
.compare {
  width: 100%;
  min-width: 34rem;
  border-collapse: collapse;
  font-size: var(--fs-small);
  background: var(--white);
}
.compare th, .compare td {
  padding: 0.85rem 1rem;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--line);
}
.compare thead th {
  background: var(--sand);
  color: var(--sage-deep);
  font-size: 0.8125rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.compare tbody th {
  width: 11rem;
  color: var(--ink);
  font-weight: 700;
}
.compare tbody td { color: var(--ink-soft); }
.compare tbody tr:last-child th, .compare tbody tr:last-child td { border-bottom: 0; }
.compare tbody tr:nth-child(even) th, .compare tbody tr:nth-child(even) td {
  background: rgba(250, 246, 240, 0.6);
}

/* Checklist */
.checklist { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.85rem; }
.checklist li {
  position: relative;
  margin: 0;
  padding-left: 2.15rem;
  line-height: 1.55;
}
.checklist li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.12em;
  width: 1.45rem;
  height: 1.45rem;
  border-radius: 50%;
  background: rgba(47, 107, 69, 0.16) url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232f6b45' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / 0.85rem no-repeat;
}
.checklist--sage li::before {
  background-color: rgba(50, 82, 66, 0.14);
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23325242' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
}
.section--sage .checklist li::before {
  background-color: rgba(255, 255, 255, 0.14);
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f0a349' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
}

/* Exclusion list — pairs with .checklist */
.crosslist { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.85rem; }
.crosslist li { position: relative; margin: 0; padding-left: 2.15rem; line-height: 1.55; }
.crosslist li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.12em;
  width: 1.45rem;
  height: 1.45rem;
  border-radius: 50%;
  background: rgba(180, 85, 46, 0.14) url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b4552e' stroke-width='3.2' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E") center / 0.75rem no-repeat;
}

/* Numbered steps */
.steps { counter-reset: step; display: grid; gap: 1.15rem; margin: 0; padding: 0; list-style: none; }
.steps li {
  position: relative;
  margin: 0;
  padding: 0 0 0 3.5rem;
  min-height: 2.5rem;
}
.steps li::before {
  counter-increment: step;
  content: counter(step);
  position: absolute;
  left: 0;
  top: -0.1rem;
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: var(--sage-deep);
  color: var(--white);
  font-weight: 800;
  font-size: 1.0625rem;
}
.steps h3 { margin-bottom: 0.25rem; font-size: 1.075rem; }
.steps p { font-size: var(--fs-small); color: var(--ink-soft); margin: 0; }
/* On-dark variant. This component lives on two dark surfaces — .section--sage
   bands and .help-card sidebars — and BOTH need it. The original override only
   named .section--sage, so the /refer sidebar shipped with --ink-soft (dark
   brown) paragraphs and sage-on-sage number chips: unreadable. The headings
   there were hand-patched with inline color:#fff, which hid half the bug.
   If .steps ever lands on a third dark surface, add it to these selectors —
   or better, notice that the inline patch you are about to write is the tell
   that the component doesn't know about its surface yet. */
.section--sage .steps li::before,
.help-card .steps li::before { background: var(--leaf); }
.section--sage .steps h3,
.help-card .steps h3 { color: var(--white); }
.section--sage .steps p,
.help-card .steps p { color: rgba(255, 255, 255, 0.8); }

/* --------------------------------------------------------------------------
   9. Towns
   -------------------------------------------------------------------------- */
/* This grid appears in two very different containers: the full-width towns
   section on the home page, and the narrow sidebar card on every town page.
   Fixed column counts broke the sidebar — three columns inside a 300px aside
   gave ~90px cells, so "Washington" overflowed its card and "Santa Clara" and
   "Mesquite, NV" wrapped mid-name.
   auto-fit sizes columns from the space actually available, so the sidebar gets
   one column and the home page gets three or four. The min() is what keeps it
   honest: without it, a container narrower than the 11rem minimum would still
   be handed an 11rem column and overflow. */
.town-grid {
  display: grid;
  gap: 0.85rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
}
.town {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.15rem;
  /* Town names are proper nouns — never break one across lines. */
  overflow-wrap: normal;
  hyphens: none;
  padding: 1rem 1.25rem;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--white);
  color: var(--sage-deep);
  font-weight: 700;
  text-decoration: none;
  transition: background-color 0.16s ease, border-color 0.16s ease, transform 0.16s ease;
}
.town span {
  font-size: var(--fs-small);
  font-weight: 500;
  color: var(--ink-soft);
  white-space: nowrap;
}
.town:hover {
  transform: translateY(-2px);
  border-color: rgba(47, 107, 69, 0.6);
  background: #fffdf9;
  color: var(--forest);
}

/* --------------------------------------------------------------------------
   10. Team
   -------------------------------------------------------------------------- */
.person { text-align: center; align-items: center; }
.person__avatar {
  display: grid;
  place-items: center;
  width: 5.5rem;
  height: 5.5rem;
  margin: 0 auto 0.35rem;
  border-radius: 50%;
  background: linear-gradient(150deg, var(--leaf), var(--forest));
  color: var(--white);
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: 0.02em;
}
.person__avatar--sage { background: linear-gradient(150deg, var(--sage-soft), var(--sage-deep)); }
.person__role {
  font-size: var(--fs-small);
  font-weight: 700;
  color: var(--forest-deep);
  margin: 0;
}
.person p { margin: 0.35rem 0 0; }

/* --------------------------------------------------------------------------
   11. Quotes / testimonial placeholders
   -------------------------------------------------------------------------- */
/* Public aggregate rating from the Google Business Profile. Number only — no
   quoted review text, which would need written consent from the family. */
.rating-band {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem 1.5rem;
  margin-bottom: 1.75rem;
  padding: 1.1rem clamp(1.15rem, 2.5vw, 1.6rem);
  border-radius: var(--r);
  background: var(--sand);
  border: 1px solid var(--line);
}
.rating-band__score {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--sage-deep);
  white-space: nowrap;
}
.rating-band__score strong { font-size: 1.6rem; font-weight: 800; }
.rating-band__stars { margin-right: 0.35rem; color: var(--star); letter-spacing: 0.05em; }
.rating-band__meta { margin: 0; font-size: var(--fs-small); color: var(--ink-soft); }

.quote-placeholder {
  position: relative;
  padding: 1.6rem 1.6rem 1.5rem;
  border: 1.5px dashed rgba(86, 118, 101, 0.45);
  border-radius: var(--r-lg);
  background: rgba(255, 255, 255, 0.6);
}
.quote-placeholder__tag {
  display: inline-block;
  margin-bottom: 0.7rem;
  padding: 0.25rem 0.65rem;
  border-radius: var(--r-pill);
  background: rgba(86, 118, 101, 0.15);
  color: var(--sage-deep);
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.quote-placeholder p { font-size: var(--fs-small); color: var(--ink-soft); margin: 0; font-style: italic; }
.quote-placeholder__stars { color: var(--star); letter-spacing: 0.1em; margin-bottom: 0.4rem; }

/* --------------------------------------------------------------------------
   11b. Photography
   --------------------------------------------------------------------------
   These are LICENSED STOCK photographs, not patients, families, or staff of
   this agency. Never caption or place one so it reads as a real person we
   serve, and never use one as a staff portrait on /team — that would be a
   misrepresentation, and consent for a real family's image is a separate
   matter handled under HIPAA. Alt text describes what is in the frame; it does
   not claim who they are. */
.figure {
  margin: 0;
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow);
}
.figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* Wide editorial band — sits between sections at a fixed height so a tall or
   short source crops predictably instead of changing the page rhythm. */
.figure--band img { aspect-ratio: 21 / 8; }
@media (max-width: 700px) { .figure--band img { aspect-ratio: 3 / 2; } }

/* Full-bleed regional backdrop. Held behind content at low opacity so it reads
   as warmth and place rather than as a photograph competing for attention. */
.section--photo { position: relative; isolation: isolate; overflow: hidden; }
.section--photo::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background-image: var(--photo);
  background-size: cover;
  background-position: center 60%;
}
.section--photo::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  /* Sand at high alpha so body text keeps its contrast; the image shows through
     as texture. Verified against WCAG AA at every breakpoint. */
  background: linear-gradient(180deg, rgba(250, 246, 240, 0.9), rgba(250, 246, 240, 0.94));
}

/* --------------------------------------------------------------------------
   12. Callout / notes
   -------------------------------------------------------------------------- */
.callout {
  display: flex;
  gap: 1rem;
  padding: 1.25rem 1.4rem;
  border-radius: var(--r);
  background: var(--sand);
  border-left: 5px solid var(--forest);
}
.callout--sage { border-left-color: var(--sage); }
.callout p { font-size: var(--fs-small); margin: 0; }
.callout p + p { margin-top: 0.6rem; }
.callout__icon { flex: none; color: var(--forest); }
.callout__icon svg { width: 1.5rem; height: 1.5rem; }

/* Sticky urgent-help panel */
.help-card {
  padding: clamp(1.4rem, 2.6vw, 1.9rem);
  border-radius: var(--r-lg);
  background: var(--sage-deep);
  color: rgba(255, 255, 255, 0.85);
  box-shadow: var(--shadow);
}
.help-card h3 { color: var(--white); font-size: 1.15rem; }
.help-card p { font-size: var(--fs-small); }
.help-card .btn { margin-top: 0.5rem; }
/* Stick the WHOLE sidebar as one unit. Sticking the help card on its own let it
   slide down inside the <aside> and paint over the card below it ("Keep
   reading") once the reader scrolled past. Pinning the column keeps the cards'
   spacing relative to each other, so they can never collide.
   The min-height gate: a pinned column taller than the space below the header
   hides its own bottom until the article ends. Short windows get a plain
   static sidebar instead, which is better than a half-visible pinned one. */
@media (min-width: 1000px) and (min-height: 700px) {
  .split > aside { position: sticky; top: 7rem; align-self: start; }
  /* When the help card is the only thing in its column there is no sibling to
     run into, so it may still pin on its own. */
  .help-card--sticky:only-child { position: sticky; top: 7rem; }
}

.split {
  display: grid;
  gap: clamp(1.75rem, 4vw, 3.25rem);
  align-items: start;
}
/* Grid items default to min-content as their floor, so one wide child (a
   comparison table, a long code string) stretches the column and pushes the
   page sideways. This lets the column shrink and the child scroll instead. */
.split > * { min-width: 0; }
@media (min-width: 1000px) {
  .split { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); }
  .split--even { grid-template-columns: 1fr 1fr; align-items: center; }
}

/* --------------------------------------------------------------------------
   13. FAQ (details/summary)
   -------------------------------------------------------------------------- */
.faq { display: grid; gap: 0.75rem; }
.faq details {
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--white);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.faq summary {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.15rem 1.35rem;
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--sage-deep);
  cursor: pointer;
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "";
  flex: none;
  width: 1.35rem;
  height: 1.35rem;
  margin-top: 0.1rem;
  border-radius: 50%;
  background: rgba(47, 107, 69, 0.15) url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232f6b45' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center / 0.8rem no-repeat;
  transition: transform 0.2s ease;
}
.faq details[open] summary::after { transform: rotate(180deg); }
.faq summary:hover { color: var(--forest); }
.faq__body { padding: 0 1.35rem 1.35rem; }
.faq__body p, .faq__body li { font-size: var(--fs-small); color: var(--ink-soft); }
.faq__body p:last-child { margin-bottom: 0; }

/* --------------------------------------------------------------------------
   14. Forms
   -------------------------------------------------------------------------- */
.form-card {
  padding: clamp(1.5rem, 3vw, 2.25rem);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--white);
  box-shadow: var(--shadow);
}
.field { margin-bottom: 1.1rem; }
.field label {
  display: block;
  margin-bottom: 0.4rem;
  font-size: var(--fs-small);
  font-weight: 700;
  color: var(--sage-deep);
}
.field .hint { display: block; font-weight: 500; color: var(--ink-soft); font-size: 0.8125rem; margin-top: 0.15rem; }
.field input, .field select, .field textarea {
  width: 100%;
  padding: 0.8rem 0.95rem;
  border: 1.5px solid var(--line);
  border-radius: var(--r-sm);
  background: #fffdfa;
  font-family: inherit;
  font-size: 1rem;
  color: var(--ink);
  transition: border-color 0.16s ease, box-shadow 0.16s ease;
}
.field textarea { min-height: 6.5rem; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--forest);
  box-shadow: var(--ring);
}
.field-row { display: grid; gap: 1.1rem; }
@media (min-width: 620px) { .field-row { grid-template-columns: 1fr 1fr; } }
.req { color: var(--terracotta); }

.form-note {
  margin-top: 1rem;
  font-size: 0.8125rem;
  color: var(--ink-soft);
}
.form-status {
  margin-top: 1rem;
  padding: 0.9rem 1.1rem;
  border-radius: var(--r-sm);
  font-size: var(--fs-small);
  font-weight: 600;
}
.form-status[hidden] { display: none; }
.form-status--ok { background: rgba(50, 82, 66, 0.1); color: var(--sage-deep); border-left: 4px solid var(--sage); }
.form-status--err { background: rgba(180, 85, 46, 0.1); color: var(--terracotta); border-left: 4px solid var(--terracotta); }

/* --------------------------------------------------------------------------
   15. Footer
   -------------------------------------------------------------------------- */
.site-footer {
  background: var(--sage-deep);
  color: rgba(255, 255, 255, 0.72);
  font-size: var(--fs-small);
}
.site-footer__cta {
  padding-block: clamp(2.5rem, 5vw, 4rem);
  border-bottom: 1px solid rgba(255, 255, 255, 0.13);
  text-align: center;
}
.site-footer__cta h2 { color: var(--white); margin-bottom: 0.5rem; }
.site-footer__cta p { color: rgba(255, 255, 255, 0.8); max-width: 38rem; margin-inline: auto; }
.site-footer__grid {
  display: grid;
  gap: 2rem clamp(1.5rem, 3vw, 3rem);
  padding-block: clamp(2.5rem, 5vw, 3.5rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
}
.site-footer__brand-chip {
  display: inline-flex;
  padding: 0.6rem 0.85rem;
  border-radius: var(--r-sm);
  background: var(--white);
  margin-bottom: 1rem;
}
.site-footer__brand-chip img { width: 190px; height: 73px; }
.site-footer h4 {
  color: var(--white);
  font-size: 0.8125rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 0.9rem;
}
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: 0.5rem; }
.site-footer a:not(.btn) { color: rgba(255, 255, 255, 0.78); text-decoration: none; }
.site-footer a:not(.btn):hover { color: var(--leaf); text-decoration: underline; }
.site-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1.5rem;
  justify-content: space-between;
  padding-block: 1.35rem;
  border-top: 1px solid rgba(255, 255, 255, 0.13);
  font-size: 0.8125rem;
  color: rgba(255, 255, 255, 0.68);
}
.site-footer__legal { max-width: 62rem; font-size: 0.8125rem; line-height: 1.6; color: rgba(255, 255, 255, 0.66); }
.footer-phone {
  display: block;
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--white) !important;
  letter-spacing: -0.02em;
  margin-bottom: 0.25rem;
}

/* --------------------------------------------------------------------------
   16. Breadcrumbs, pills, misc
   -------------------------------------------------------------------------- */
.breadcrumb {
  padding-top: 1.35rem;
  font-size: 0.8125rem;
  color: var(--ink-soft);
}
.breadcrumb ol { display: flex; flex-wrap: wrap; gap: 0.4rem; list-style: none; margin: 0; padding: 0; }
.breadcrumb li { margin: 0; }
.breadcrumb li + li::before { content: "/"; margin-right: 0.4rem; color: var(--line); }
.breadcrumb a { color: var(--ink-soft); text-decoration: none; }
.breadcrumb a:hover { color: var(--forest); text-decoration: underline; }

.pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.85rem;
  border-radius: var(--r-pill);
  background: rgba(47, 107, 69, 0.14);
  color: var(--accent-ink);
  font-size: 0.8125rem;
  font-weight: 700;
}
.pill--sage { background: rgba(50, 82, 66, 0.12); color: var(--sage-deep); }
.pill-row { display: flex; flex-wrap: wrap; gap: 0.5rem; }

.page-hero {
  position: relative;
  padding-block: clamp(2.25rem, 5vw, 3.75rem) clamp(2.25rem, 5vw, 3.5rem);
  background:
    radial-gradient(760px 420px at 92% -20%, rgba(143, 174, 158, 0.26), transparent 62%),
    linear-gradient(180deg, var(--sand) 0%, #fffdfa 100%);
  border-bottom: 1px solid var(--line);
}
.page-hero .lead { max-width: 44rem; }
.page-hero__inner { padding-top: 0.5rem; }

.toc {
  padding: 1.25rem 1.4rem;
  border-radius: var(--r);
  background: var(--sand);
  border: 1px solid var(--line);
}
.toc h4 { margin-bottom: 0.6rem; font-size: 0.8125rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--sage); }
.toc ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.45rem; }
.toc li { margin: 0; }
.toc a { color: var(--sage-deep); font-weight: 600; font-size: var(--fs-small); text-decoration: none; }
.toc a:hover { color: var(--forest); text-decoration: underline; }

.hr { height: 1px; background: var(--line); border: 0; margin-block: clamp(2rem, 4vw, 3rem); }

.big-cta {
  display: grid;
  gap: 1.5rem;
  align-items: center;
  padding: clamp(1.75rem, 4vw, 3rem);
  border-radius: var(--r-lg);
  background:
    radial-gradient(600px 300px at 100% 0%, rgba(143, 174, 158, 0.3), transparent 60%),
    linear-gradient(150deg, var(--sage-deep), #22352880);
  background-color: var(--sage-deep);
  color: rgba(255, 255, 255, 0.86);
  box-shadow: var(--shadow-lg);
}
@media (min-width: 820px) { .big-cta { grid-template-columns: 1.35fr auto; } }
.big-cta h2 { color: var(--white); margin-bottom: 0.4rem; }
.big-cta p { margin: 0; }

/* --------------------------------------------------------------------------
   17. Motion / print
   -------------------------------------------------------------------------- */
.reveal { opacity: 0; transform: translateY(14px); }
.reveal.is-visible {
  opacity: 1;
  transform: none;
  transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

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

@media print {
  .topbar, .site-header, .site-footer__cta, .nav-toggle { display: none; }
  body { font-size: 11pt; }
  .badge-card, .big-cta, .help-card, .section--sage { background: #fff !important; color: #000 !important; }
}