/* ==========================================================================
   Southern Utah Home Health & 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 (from the orange sunburst logo + St. George red rock) */
  --sun: #e08a2e;
  --sun-bright: #f0a349;
  --sun-deep: #c4741f;
  --sage: #3d5a45;
  --sage-deep: #2c4433;
  --sage-soft: #6b8571;
  --sand: #faf6f0;
  --sand-deep: #f2ebe0;
  --terracotta: #b4552e;
  --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.075rem, 1rem + 0.45vw, 1.3rem);
  --fs-body: 1.0625rem;
  --fs-small: 0.9375rem;
  --fs-eyebrow: 0.8125rem;

  /* 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(224, 138, 46, 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(--terracotta); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--sun-deep); }

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(--sun); }

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

::selection { background: rgba(224, 138, 46, 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(--sun-bright); }

.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(--sun-deep);
}
.section--sage .eyebrow { color: var(--sun-bright); }

.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(--sun);
  --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(--sun-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--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(--terracotta);
  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(--sun-bright); text-decoration: underline; }
.topbar__pulse {
  display: inline-block;
  width: 7px; height: 7px;
  margin-right: 0.45rem;
  border-radius: 50%;
  background: var(--sun-bright);
  box-shadow: 0 0 0 0 rgba(240, 163, 73, 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(240, 163, 73, 0); }
  100% { box-shadow: 0 0 0 0 rgba(240, 163, 73, 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: 206px; height: 75px; }

.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(--sun-deep); }
.nav__link[aria-current="page"] {
  color: var(--sun-deep);
  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: 176px; height: 64px; }
  .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;
  background:
    radial-gradient(900px 520px at 88% -8%, rgba(240, 163, 73, 0.34), transparent 62%),
    radial-gradient(700px 480px at -8% 108%, rgba(107, 133, 113, 0.22), transparent 60%),
    linear-gradient(180deg, var(--sand) 0%, #fffdfa 100%);
}
.hero::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 1px;
  background: var(--line);
}
.hero__inner {
  display: grid;
  gap: clamp(2.25rem, 5vw, 4rem);
  align-items: center;
  padding-block: clamp(2.75rem, 6vw, 5.25rem);
}
@media (min-width: 900px) {
  .hero__inner { grid-template-columns: 1.08fr 0.92fr; }
}
.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(--terracotta);
  letter-spacing: -0.01em;
  margin-top: 0.35em;
}
.hero__lead { font-size: var(--fs-lead); color: var(--ink-soft); max-width: 34rem; }

/* 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(224, 138, 46, 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); }
.door--call { border-left: 5px solid var(--sun); }
.door--refer { border-left: 5px solid var(--sage); }

/* --------------------------------------------------------------------------
   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(240, 163, 73, 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(--sun-bright);
}
.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); }
/* 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(--sun-bright);
}
.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(--sun-bright); }

.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: var(--fs-small); color: var(--ink-soft); line-height: 1.6; }
.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(240, 163, 73, 0.2), rgba(224, 138, 46, 0.1));
  color: var(--sun-deep);
}
.icon-badge svg { width: 1.5rem; height: 1.5rem; }
.icon-badge--sage {
  background: linear-gradient(150deg, rgba(107, 133, 113, 0.2), rgba(61, 90, 69, 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(--terracotta); }
.myth__tag--truth { background: rgba(61, 90, 69, 0.12); color: var(--sage-deep); }
.myth h3 { font-size: 1.075rem; margin-bottom: 0.4rem; }
.myth p { font-size: var(--fs-small); color: var(--ink-soft); margin: 0; }

/* 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(224, 138, 46, 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='%23c4741f' 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(61, 90, 69, 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='%233d5a45' 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; }
.section--sage .steps li::before { background: var(--sun); }
.section--sage .steps p { color: rgba(255, 255, 255, 0.8); }

/* --------------------------------------------------------------------------
   9. Towns
   -------------------------------------------------------------------------- */
.town-grid {
  display: grid;
  gap: 0.85rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 700px) {
  .town-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.town {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.15rem;
  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); }
.town:hover {
  transform: translateY(-2px);
  border-color: rgba(224, 138, 46, 0.6);
  background: #fffdf9;
  color: var(--sun-deep);
}

/* --------------------------------------------------------------------------
   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(--sun-bright), var(--sun-deep));
  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(--sun-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(--sun); 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(107, 133, 113, 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(107, 133, 113, 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(--sun); letter-spacing: 0.1em; margin-bottom: 0.4rem; }

/* --------------------------------------------------------------------------
   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(--sun);
}
.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(--sun-deep); }
.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(224, 138, 46, 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='%23c4741f' 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(--sun-deep); }
.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(--sun);
  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(61, 90, 69, 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: 69px; }
.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(--sun-bright); 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.55);
}
.site-footer__legal { max-width: 62rem; font-size: 0.8125rem; line-height: 1.6; color: rgba(255, 255, 255, 0.5); }
.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(--sun-deep); 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(224, 138, 46, 0.14);
  color: var(--sun-deep);
  font-size: 0.8125rem;
  font-weight: 700;
}
.pill--sage { background: rgba(61, 90, 69, 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(240, 163, 73, 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-soft); }
.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(--sun-deep); 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(240, 163, 73, 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; }
}