/* ==========================================================================
   Running Horse Services — production build (Navajo Nation / NNOGC subsidiary)
   ART DIRECTION v2 (RESET) — "Light coming up over the land that's ours."
   The dawn is a DEVICE: page opens pre-dawn (basalt + dawn-violet) and warms
   into full daylight as you scroll (the dawn arc). Photography-led, editorial,
   confident accent. Owned by the Navajo Nation, serving Dine families.

   CULTURAL-RESPECT RAILS (binding):
   - No sacred/ceremonial motif, no reproduced rug pattern, no pan-Indian
     cliche, no Shiprock-as-mascot. Geometry here is GENERIC high-desert
     line work only (a stepped/diamond divider), never a weaving.
   - Teal is the confirmed brand jewel accent (<=8% of surface); never captioned
     as a sacred diagram.
   - Every culturally-specific element ships only after OWNER SIGN-OFF.

   Serif voice = Spectral (deliberately DISTINCT from Blue Ridge's Fraunces /
   Summit's pairing). Diacritics (a, ', eeh) render in Spectral + Source Sans 3.
   ========================================================================== */

/* ---------- Tokens (the contract — never hardcode these values inline) ---------- */
:root {
  /* Warm sand grounds — "the land is the base surface" (deepened for v2) */
  --ground:       oklch(94.8% 0.020 78);    /* warm sand / buff paper  ~#F5EDE0 */
  --ground-sunk:  oklch(90.2% 0.030 72);    /* deeper sand band        ~#EBDFCB */
  --canyon:       oklch(84.5% 0.046 72);    /* NEW third warm surface  ~#E4C9A8 */

  /* Dark anchors — warm basalt, NOT cool slate, NOT navy */
  --basalt:       oklch(23.0% 0.012 56);    /* primary text + dark band ~#26221E */
  --basalt-deep:  oklch(18.5% 0.012 50);    /* footer / deepest band   ~#1E1A17 */

  /* The striking pre-dawn moment — hero upper-sky stop ONLY */
  --dawn-violet:  oklch(28.0% 0.040 312);   /* deep pre-dawn sky        ~#3A2F45 */

  /* Brand accent — CONFIRMED client brand brown (Running Horse Services onboarding, 2026-07-08). */
  --redrock:      #522500;    /* confirmed brand brown (decorative use — eyebrows, rules, numerals) */
  --redrock-deep: #3a1a00;    /* darker brown derivative for AA text links (contrast-safe) */

  /* Quiet structure */
  --sage:         oklch(84.0% 0.030 130);   /* silver-green vegetation ~#C9CDB6 */
  --sage-pale:    oklch(90.5% 0.024 128);   /* paler sage tint block   ~#E4E6D8 */
  --sky:          oklch(46.5% 0.072 235);   /* deep desert daytime blue ~#34607F */

  /* The single jewel accent — CONFIRMED client brand teal (owner-confirmed 2026-07-08).
     Carries: hero rule, the Yaʼataʼeeh word, eyebrow ticks, active-nav underline,
     map pin/ring. Still <=~8% of total surface. */
  --turquoise:    #007a72;    /* confirmed brand teal */
  --turquoise-dim:#4db3a8;    /* lightened derivative — legible on dark bands */
  --turquoise-ink:#00564f;    /* darkened derivative — AA text on light ground */

  /* Signal — rationed action/emergency ONLY. Re-verified distinct from the
     hotter redrock: signal is brighter + more orange (hue 38 vs redrock 42,
     L 57.5% vs 50.5%, C 0.155 vs 0.135) so the two never read as the same red. */
  --signal:       oklch(57.5% 0.155 38);    /* warm "call now" orange  ~#C24F2A */
  --signal-hot:   oklch(63.5% 0.165 40);    /* hover                    */

  /* Ornament + grounding hairline (the almanac signature, mesa-toned) */
  --line:         oklch(78.0% 0.040 70);    /* warm sand hairline      ~#C9A876-ish */
  --line-soft:    oklch(85.0% 0.030 72);    /* softer divider           */
  --mist:         oklch(86.5% 0.022 74);    /* input borders            */

  /* Text on dark */
  --ground-dim:   oklch(88.0% 0.022 76);    /* body text on basalt      */
  --line-dim:     oklch(80.0% 0.045 75);    /* eyebrows/rules on basalt */

  /* Readable body text on light (not pure basalt — slightly warmer for long reads) */
  --ink:          oklch(28.0% 0.014 52);    /* body copy                */
  --ink-soft:     oklch(40.0% 0.030 48);    /* secondary copy           */

  --focus:        oklch(52% 0.14 250);      /* non-brand a11y focus ring (blue) */

  /* Spacing (8px base, non-linear rhythm) */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px; --s5: 24px;
  --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px; --s10: 128px;

  /* Radii (squared, editorial — not pill/SaaS) */
  --r-sm: 4px; --r-md: 6px; --r-lg: 10px;

  --shadow-soft: 0 1px 2px rgba(42,38,34,0.22);
  --shadow-card: 0 2px 6px rgba(42,38,34,0.07), 0 16px 36px rgba(42,38,34,0.10);

  --maxw: 1200px;
  --prose: 65ch;   /* older + ESL readers — tighter measure than Summit's 68ch */

  /* Type families — Spectral display + Source Serif read + Source Sans UI.
     Metric-ish serif fallbacks reduce CLS; all render Dine diacritics. */
  --font-display: "Spectral", "Hoefler Text", "Georgia", "Times New Roman", serif;
  --font-read:    "Source Serif 4", "Georgia", "Times New Roman", serif;
  --font-ui:      "Source Sans 3", -apple-system, "Segoe UI", system-ui, sans-serif;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: clip; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--font-read);
  font-size: 1.125rem;       /* 18px base — older + ESL Four Corners audience */
  line-height: 1.7;          /* generous for long reads, within 1.6-1.75 */
  -webkit-font-smoothing: antialiased;
  font-optical-sizing: auto;
}
img, svg, iframe { display: block; max-width: 100%; }
img { height: auto; }
/* Text links use --redrock-deep — AA pass: 6.88:1 on ground, 6.07:1 on sunk, 6.32:1 on sage-pale.
   --redrock (4.32:1, FAILS AA for text) is reserved for DECORATIVE use ONLY
   (eyebrows, rules, numerals, icons, hover targets) — never as a text-link color. */
a { color: var(--redrock-deep); text-decoration: none; }
a:hover { color: var(--redrock); }

/* ---------- Typography ---------- */
h1, h2, h3, h4 {
  font-family: var(--font-display); font-weight: 600; line-height: 1.08;
  margin: 0 0 var(--s4); letter-spacing: -0.015em; color: var(--basalt);
  font-optical-sizing: auto;
  overflow-wrap: break-word; text-wrap: balance;
}
.display { font-size: clamp(2.6rem, 5.6vw, 4.6rem); line-height: 1.04; font-weight: 600; }
h1 { font-size: clamp(2.15rem, 4.2vw, 3.1rem); }
h2 { font-size: clamp(1.9rem, 3.7vw, 3rem); }
h3 { font-family: var(--font-display); font-weight: 600; font-size: 1.45rem; line-height: 1.18; letter-spacing: -0.005em; }
p { margin: 0 0 var(--s5); }
.lead {
  font-family: var(--font-read); font-weight: 400;
  font-size: clamp(1.22rem, 1.9vw, 1.45rem); line-height: 1.55;
  max-width: 48ch; color: var(--ink);
}
.eyebrow {
  font-family: var(--font-ui); font-weight: 600; font-size: 0.8125rem;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--redrock);
  margin: 0 0 var(--s4); line-height: 1.3;
}
.prose { max-width: var(--prose); overflow-wrap: break-word; word-break: break-word; }
.prose p, .prose li { font-size: 1.125rem; }
.prose h2 { margin-top: var(--s8); }
.prose h3 { margin-top: var(--s7); margin-bottom: var(--s3); }
.prose ul { padding-left: 1.2em; }
.prose li { margin-bottom: var(--s3); }
.muted { color: var(--ink-soft); }
.center { text-align: center; }
.tnum { font-feature-settings: "tnum"; }

/* Bilingual welcome — the hero's distinct new beat (styled in the hero block below).
   OWNER-VERIFY diacritics + appropriateness before publish. */
.dine { font-style: normal; }                 /* keep Dine words upright, no fake italics */

/* ---------- Layout helpers ---------- */
.container { max-width: var(--maxw); margin-inline: auto; padding-inline: clamp(20px, 5vw, 72px); }
.section { padding-block: clamp(72px, 12vh, 156px); }
.section--sunk  { background: var(--ground-sunk); }
.section--canyon { background: var(--canyon); }
.section--sage  { background: var(--sage-pale); }
.section--basalt { background: var(--basalt); color: var(--ground-dim); }
.section--basalt-deep { background: var(--basalt-deep); color: var(--ground-dim); }
.section--basalt h1, .section--basalt h2, .section--basalt h3,
.section--basalt-deep h1, .section--basalt-deep h2, .section--basalt-deep h3 { color: var(--ground); }
.section--basalt .eyebrow, .section--basalt-deep .eyebrow { color: var(--line-dim); }
.section--basalt .lead, .section--basalt-deep .lead { color: var(--ground-dim); } /* fix: .lead defaulted to --ink (dark), invisible on dark bands */
.stack > * + * { margin-top: var(--s5); }

/* ==========================================================================
   The DAWN ARC (Mira) — a BACKGROUND-COLOR transition tied to scroll, NOT
   parallax. The homepage <main> steps from deep pre-dawn through dawn-violet
   tint, into canyon warmth, and lands on full-daylight ground. Each .arc-*
   section declares its own base color so the page is meaningful pre-JS and
   honors prefers-reduced-motion (static per-section colors below).
   JS adds .arc-active to interpolate the body backdrop as you scroll; without
   JS, the per-section colors alone tell the same dawn story.
   ========================================================================== */
.dawn-arc { background: var(--basalt-deep); transition: background-color 700ms ease-out; }
@media (prefers-reduced-motion: reduce) { .dawn-arc { transition: none; } }
/* Per-section dawn steps (these paint with or without JS) */
.arc-predawn  { background: var(--basalt-deep); color: var(--ground-dim); }
.arc-violet   { background: var(--dawn-violet); color: var(--ground-dim); }
.arc-canyon   { background: var(--canyon); }
.arc-ground   { background: var(--ground); }
/* BUGFIX (design-polish pass): source order let .arc-canyon's tan win over
   .section--basalt's dark band on the homepage stat strip, washing white
   text out to ~1.6:1 contrast on tan. Pin the dark band back to basalt
   whenever it shares an element with an arc-* step. */
.section--basalt.arc-canyon, .section--basalt.arc-violet, .section--basalt.arc-ground,
.section--basalt-deep.arc-canyon, .section--basalt-deep.arc-violet, .section--basalt-deep.arc-ground {
  background: var(--basalt);
}
.section--basalt-deep.arc-canyon, .section--basalt-deep.arc-violet, .section--basalt-deep.arc-ground {
  background: var(--basalt-deep);
}
.arc-violet h1, .arc-violet h2, .arc-violet h3,
.arc-predawn h1, .arc-predawn h2, .arc-predawn h3 { color: var(--ground); }
.arc-violet .eyebrow, .arc-predawn .eyebrow { color: var(--turquoise-dim); }
.arc-violet .arc-link, .arc-predawn .arrow-link { color: var(--turquoise-dim); }

/* Sand hairline — the almanac signature (mesa-toned, generic geometry only) */
.rule { border: 0; border-top: 1px solid var(--line); margin: 0; }
.dark-rule {
  border: 0; border-top: 1px solid var(--line-dim); opacity: 0.7;
  text-align: center; overflow: visible; margin: 0 0 var(--s7);
}
/* Generic high-desert stepped-diamond divider mark — abstract, NOT a weaving */
.dark-rule::after {
  content: ""; display: inline-block; width: 14px; height: 14px;
  transform: translateY(-7px) rotate(45deg);
  background: var(--basalt); border: 1px solid var(--line-dim);
}
.section--basalt .dark-rule::after { background: var(--basalt); }
.section--basalt-deep .dark-rule::after { background: var(--basalt-deep); }

/* Stepped-diamond hairline for light sections (generic geometry seasoning) */
.diamond-rule { display: flex; align-items: center; gap: var(--s3); margin: 0 0 var(--s6); color: var(--line); }
.diamond-rule::before, .diamond-rule::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.diamond-rule i { width: 9px; height: 9px; transform: rotate(45deg); border: 1px solid var(--redrock); flex: 0 0 auto; }

/* ---------- Skip link ---------- */
.skip-link {
  position: absolute; left: -999px; top: 0; z-index: 300;
  background: var(--basalt); color: var(--ground); padding: var(--s3) var(--s4);
  border-radius: var(--r-sm); font-family: var(--font-ui);
}
.skip-link:focus { left: var(--s4); top: var(--s4); color: var(--ground); }

/* ---------- Focus ---------- */
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 3px; }
/* Sticky header is ~72px; keep focused/targeted elements clear of it (WCAG 2.4.11) */
:target { scroll-margin-top: 90px; }
a:focus, button:focus, input:focus, select:focus, textarea:focus, [tabindex]:focus { scroll-margin-top: 90px; }

/* ==========================================================================
   Emergency strip (one of two signal surfaces)
   ========================================================================== */
.emergency-strip {
  background: var(--signal); color: #fff;
  font-family: var(--font-ui); font-size: 0.95rem; font-weight: 500;
  text-align: center; padding: var(--s2) var(--s4);
}
.emergency-strip a { color: #fff; font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
.emergency-strip a:hover { color: #fff; }

/* ==========================================================================
   Header / nav
   ========================================================================== */
.site-header {
  /* BUGFIX (design-polish pass): z-index raised from 100->210. The header's
     sticky+z-index creates a stacking context, so the mobile nav-links panel
     (fixed, nested inside header) was capped at that context's level and
     rendered BELOW the z-index:150 mobile-callbar no matter its own z-index.
     Root-cause fix at the shared ancestor, not a per-descendant patch. */
  position: sticky; top: 0; z-index: 210; background: var(--ground);
  border-bottom: 1px solid var(--line); transition: box-shadow 200ms ease-out;
}
.site-header.scrolled { box-shadow: 0 2px 14px rgba(42,38,34,0.10); }
.nav { display: flex; align-items: center; gap: var(--s4); padding-block: var(--s3); overflow: hidden; min-width: 0; }
.brand { display: flex; align-items: center; gap: var(--s3); color: var(--basalt); white-space: nowrap; }
.brand:hover { color: var(--basalt); }
.brand .mark { flex: 0 0 auto; color: var(--redrock); }
.brand .mark svg { width: 42px; height: 42px; }
.brand .wordmark { display: flex; flex-direction: column; line-height: 1; }
/* Enlarged wordmark (v2) + turquoise "Navajo-owned" micro-cap descender */
.brand .wm-1 { font-family: var(--font-display); font-weight: 600; font-size: 1.55rem; letter-spacing: -0.005em; }
.brand .wm-2 { font-family: var(--font-ui); font-weight: 700; font-size: 0.625rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--turquoise-ink); margin-top: 4px; } /* fix: --turquoise (4.48:1) fails AA at this size; --turquoise-ink is the existing "AA text on light ground" derivative */
.nav-links { display: flex; gap: var(--s5); margin-left: auto; align-items: center; list-style: none; padding: 0; margin-block: 0; }
.nav-links a:not(.btn) { font-family: var(--font-ui); font-size: 0.975rem; font-weight: 500; letter-spacing: -0.005em; color: var(--basalt); padding-block: var(--s2); position: relative; white-space: nowrap; }
.nav-links a.btn { font-family: var(--font-ui); font-size: 0.975rem; font-weight: 500; letter-spacing: -0.005em; padding-block: var(--s2); position: relative; white-space: nowrap; } /* fix: no longer overrides .btn-primary's white text with dark --basalt */
.nav-links a:not(.btn):not(.nav-phone)::after { content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: 0; background: var(--turquoise); transition: width 180ms ease-out; border-radius: 1px; }
.nav-links a:not(.btn):not(.nav-phone):hover::after { width: 100%; }
.nav-links a:hover { color: var(--redrock-deep); }
.nav-links a[aria-current="page"] { color: var(--basalt); }
.nav-links a[aria-current="page"]::after { width: 100%; }
/* Phone = quiet text + icon (not a button) */
.nav-phone { display: inline-flex; align-items: center; gap: var(--s2); min-height: 44px; font-family: var(--font-ui); font-weight: 600; color: var(--redrock-deep); white-space: nowrap; font-feature-settings: "tnum"; }
.nav-phone:hover { color: var(--redrock); }
.nav-cta { margin-left: var(--s2); }
.nav-toggle { display: none; }
.nav-close { display: none; }

/* ==========================================================================
   Buttons
   ========================================================================== */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
  font-family: var(--font-ui); font-weight: 600; font-size: 1.05rem; letter-spacing: -0.005em;
  padding: 16px 28px; min-height: 56px; border-radius: var(--r-md);
  border: 1.5px solid transparent; cursor: pointer; text-align: center;
  transition: background-color 160ms ease-out, transform 160ms ease-out, border-color 160ms ease-out, color 160ms ease-out;
}
.btn-primary {
  background: var(--signal); color: #fff; border-color: var(--signal);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.18), var(--shadow-soft);
}
.btn-primary:hover { background: var(--signal-hot); border-color: var(--signal-hot); color: #fff; transform: translateY(-1px); }
.btn-secondary { background: transparent; color: var(--redrock-deep); border-color: var(--redrock); }
.btn-secondary:hover { background: var(--redrock); color: var(--ground); border-color: var(--redrock); transform: translateY(-1px); }
.btn-on-dark { background: var(--ground); color: var(--basalt); border-color: var(--ground); }
.btn-on-dark:hover { background: var(--ground-sunk); color: var(--basalt); transform: translateY(-1px); }
.btn-ghost-dark { background: transparent; color: var(--ground); border-color: var(--line-dim); }
.btn-ghost-dark:hover { background: var(--line-dim); color: var(--basalt); border-color: var(--line-dim); transform: translateY(-1px); }
.btn-block { width: 100%; }
.btn:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .btn:hover { transform: none; } }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--s4); align-items: center; }

.link-inline { color: var(--redrock-deep); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.15em; text-decoration-color: var(--line); }
.link-inline:hover { text-decoration-thickness: 3px; text-decoration-color: var(--redrock); color: var(--redrock); }
.arrow-link { font-family: var(--font-ui); font-weight: 600; color: var(--redrock-deep); display: inline-flex; align-items: center; gap: 6px; }
.arrow-link:hover { gap: 10px; transition: gap 160ms ease-out; color: var(--redrock); }
.section--basalt .arrow-link, .section--basalt-deep .arrow-link { color: var(--turquoise-dim); }

/* ==========================================================================
   Hero — Frame A: full-bleed dawn PHOTO, basalt->dawn-violet scrim on the
   LEFT THIRD only (type stays AA-legible, photo breathes right two-thirds).
   The image is a real dawn-mesa photo (Dex: assets/img/hero-dawn-mesa.jpg);
   until it lands, a basalt->dawn-violet fallback paints the same mood so the
   hero is never a wireframe. Meaningful pre-JS — all copy is in the DOM.
   ========================================================================== */
.hero {
  position: relative; isolation: isolate; overflow: hidden;
  min-height: clamp(560px, 86vh, 820px); display: flex; align-items: center;
  /* Fallback dawn mood under/around the photo (pre-dawn basalt -> dawn-violet) */
  background:
    linear-gradient(120deg, var(--basalt-deep) 0%, var(--dawn-violet) 60%, #2c2740 100%);
}
.hero-bg-slider { position: absolute; inset: 0; z-index: -2; }
.hero-bg-slide {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 70% 45%;
  opacity: 0; transition: opacity 1.2s ease-in-out;
}
.hero-bg-slide.is-active { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .hero-bg-slide { transition: none; }
}
/* Asymmetric scrim: holds >=0.72 alpha across the whole TEXT zone (left ~58%)
   so the 18px lead clears AA (>=4.5:1) even over the brightest dawn sky pixel,
   then clears fast so the photo breathes on the right. Verified worst-case
   contrast: headline >=7:1, lead >=4.7:1. */
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    linear-gradient(96deg,
      rgba(30,26,23,0.94) 0%,
      rgba(30,26,23,0.88) 30%,
      rgba(46,38,46,0.78) 50%,
      rgba(58,47,69,0.40) 64%,
      rgba(58,47,69,0.10) 76%,
      rgba(58,47,69,0) 86%);
}
/* A whisper of warm dawn light bleeding up from the lower-right horizon */
.hero::after {
  content: ""; position: absolute; right: -10%; bottom: -20%; z-index: -1;
  width: 70%; height: 70%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(176,81,46,0.22), rgba(176,81,46,0) 70%);
}
.hero-copy {
  position: relative; max-width: 620px;
  padding-block: clamp(56px, 10vh, 120px);
  color: var(--ground);
}
.hero-rule { display: block; width: 56px; height: 3px; background: var(--turquoise); border: 0; margin: 0 0 var(--s5); border-radius: 2px; }
/* Default welcome beat (interior page-heads, dark text on light ground) */
.welcome-beat {
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(1.05rem, 1.6vw, 1.25rem); letter-spacing: 0.01em;
  color: var(--redrock-deep); margin: 0 0 var(--s4); line-height: 1.4;
}
.welcome-beat .ya { color: var(--turquoise-ink); font-weight: 600; }  /* AA on light ground */
.welcome-beat .en { color: var(--ink-soft); }
/* Hero welcome beat — large, on the dark dawn scrim (the elevated v2 moment) */
.hero .welcome-beat {
  font-size: clamp(2rem, 4.4vw, 3.2rem); letter-spacing: -0.01em;
  line-height: 1.06; color: var(--ground); font-weight: 500;
}
.hero .welcome-beat .ya { color: var(--turquoise-dim); font-weight: 600; }
.hero .welcome-beat .en { color: var(--ground-dim); font-weight: 400; font-size: 0.62em; }
.hero .eyebrow { color: var(--turquoise-dim); }
.hero h1.display { color: var(--ground); margin-bottom: var(--s5); text-wrap: balance; }
.hero .lead { color: var(--ground-dim); margin-bottom: var(--s7); max-width: 46ch; }
.hero .btn-row { align-items: center; }
.hero-call { display: inline-flex; align-items: center; gap: var(--s2); min-height: 44px; padding-block: var(--s2); font-family: var(--font-ui); font-weight: 600; font-size: 1.05rem; color: var(--ground); white-space: nowrap; font-feature-settings: "tnum"; }
.hero-call svg { color: var(--turquoise-dim); flex: 0 0 auto; }
.hero-call:hover { color: var(--ground); text-decoration: underline; text-underline-offset: 3px; }
.hero-microstrip {
  margin-top: var(--s7); padding-top: var(--s5); border-top: 1px solid rgba(228,201,168,0.28);
  font-family: var(--font-ui); font-size: 0.95rem; color: var(--ground-dim);
  font-feature-settings: "tnum"; display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4); align-items: center;
}
.hero-microstrip .sep { color: var(--turquoise-dim); }

/* Mobile: photo 4:5 on top, type below on a basalt->canyon panel */
@media (max-width: 767px) {
  .hero {
    display: block; min-height: 0; overflow: visible;
    background: linear-gradient(180deg, var(--basalt-deep) 0%, var(--dawn-violet) 38%, var(--canyon) 100%);
  }
  .hero .hero-bg-slider { position: relative; inset: auto; z-index: 0; aspect-ratio: 4 / 5; height: auto; }
  .hero .hero-bg-slide { object-position: 50% 45%; }
  .hero::before {
    /* on mobile the scrim only darkens the photo bottom edge for the seam */
    inset: auto 0 0 0; height: 0;
  }
  .hero::after { display: none; }
  .hero-copy {
    padding: clamp(28px, 7vw, 44px) clamp(20px, 5vw, 36px) clamp(40px, 9vw, 56px);
    max-width: none; color: var(--ground);
  }
  /* Allow hero phone link to wrap at narrow viewports so it never overflows. */
  .hero-call { white-space: normal; }
  /* Lower third of the mobile panel is canyon (warm/light) -> dark ink reads there.
     We keep type on the dark upper basalt area, so light type holds. */
}

/* Interior page head */
.page-head { padding-block: clamp(56px, 8vw, 104px) clamp(28px, 4vw, 48px); }
.page-head .eyebrow { color: var(--redrock); }
.page-head .lead { max-width: 56ch; }
.breadcrumb { font-family: var(--font-ui); font-size: 0.875rem; color: var(--ink-soft); margin-bottom: var(--s5); }
.breadcrumb a { color: var(--ink-soft); }
.breadcrumb .sep { color: var(--mist); margin-inline: var(--s2); }

/* Interior banner with real photo (honestly-labeled placeholder landscape) */
.page-banner { position: relative; }
.page-banner .banner-photo { position: relative; aspect-ratio: 21 / 9; max-height: 380px; overflow: hidden; }
.page-banner .banner-photo img { width: 100%; height: 100%; object-fit: cover; }
.page-banner .banner-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(42,38,34,0.28), rgba(42,38,34,0.62)); }
.page-banner .banner-copy { position: absolute; inset: 0; display: flex; align-items: flex-end; }
.page-banner .banner-copy .container { width: 100%; padding-bottom: clamp(24px, 4vw, 48px); }
.page-banner h1, .page-banner .eyebrow, .page-banner .breadcrumb, .page-banner .breadcrumb a { color: var(--ground); }
.page-banner h1 { font-size: clamp(2rem, 3.6vw, 2.8rem); overflow-wrap: break-word; white-space: normal; max-width: 22ch; }
.page-banner .eyebrow { color: var(--line-dim); }
.page-banner .breadcrumb .sep { color: rgba(245,237,224,0.5); }
.page-banner .banner-photo.scrim-deep::after { background: linear-gradient(180deg, rgba(42,38,34,0.34), rgba(42,38,34,0.72)); }

/* ==========================================================================
   IMAGE-LAYOUT SYSTEM (premium editorial, v2)
   Frame A = full-bleed band w/ asymmetric left scrim (hero, ownership, final CTA)
   Frame B = editorial tall 4:5, single turquoise CORNER TICK, no full border
   Frame C = documentary wide 3:2, no border, caption hairline
   No universal 12px inset border anywhere; ratios vary by frame.
   ========================================================================== */

/* Frame B — tall 4:5 with a single turquoise corner tick (top-left) */
.frame-b { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: var(--ground-sunk); }
.frame-b img, .frame-b .ph { width: 100%; height: 100%; object-fit: cover; }
.frame-b::before {
  content: ""; position: absolute; left: 0; top: 0; width: 34px; height: 34px; z-index: 2;
  border-left: 3px solid var(--turquoise); border-top: 3px solid var(--turquoise);
  pointer-events: none;
}

/* Frame C — documentary wide 3:2, no border, hairline caption beneath */
.frame-c { margin: 0; }
.frame-c .shot { position: relative; aspect-ratio: 3 / 2; overflow: hidden; background: var(--ground-sunk); }
.frame-c .shot img, .frame-c .shot .ph { width: 100%; height: 100%; object-fit: cover; }
.frame-c figcaption {
  font-family: var(--font-ui); font-size: 0.8125rem; color: var(--ink-soft); font-style: italic;
  margin-top: var(--s3); padding-top: var(--s3); border-top: 1px solid var(--line);
}

/* ==========================================================================
   Almanac service rows (NOT a card grid) — v2: square thumbs KILLED.
   A 2:3 vertical sliver appears on ALTERNATING rows only (even rows), giving
   an editorial, intentional rhythm instead of a catalog. No inset border.
   ========================================================================== */
.almanac { border-top: 1px solid var(--line); }
.almanac-row {
  display: grid; grid-template-columns: auto 1fr; gap: var(--s4) var(--s6);
  align-items: start; padding-block: var(--s7);
  border-bottom: 1px solid var(--line);
}
/* Even rows carry a vertical sliver image on the right */
.almanac-row.has-sliver { grid-template-columns: auto 1fr auto; }
.almanac-row .numeral { font-family: var(--font-display); font-weight: 400; font-size: 3.8rem; line-height: 0.8; color: var(--redrock); opacity: 0.55; align-self: start; }
.almanac-row .body h3 { margin: 0 0 var(--s2); }
.almanac-row .body p { margin: 0 0 var(--s3); font-family: var(--font-read); color: var(--ink-soft); max-width: 54ch; }
.almanac-row .sliver { width: clamp(96px, 12vw, 150px); aspect-ratio: 2 / 3; flex: 0 0 auto; position: relative; overflow: hidden; background: var(--ground-sunk); align-self: stretch; }
.almanac-row .sliver img, .almanac-row .sliver .ph { width: 100%; height: 100%; object-fit: cover; }
.almanac-row .sliver::before { content: ""; position: absolute; left: 0; top: 0; width: 22px; height: 22px; z-index: 2; border-left: 2px solid var(--turquoise); border-top: 2px solid var(--turquoise); pointer-events: none; }
@media (max-width: 720px) {
  .almanac-row, .almanac-row.has-sliver { grid-template-columns: auto 1fr; }
  .almanac-row .numeral { font-size: 2.6rem; }
  .almanac-row .sliver { grid-column: 1 / -1; grid-row: 1; width: 100%; aspect-ratio: 16 / 9; margin-bottom: var(--s4); }
  .almanac-row .body { grid-column: 1 / -1; }
}

/* ==========================================================================
   Almanac stat strip (dark band) — honest numbers only
   ========================================================================== */
.stat-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s4); }
.stat { text-align: center; padding-inline: var(--s4); position: relative; }
.stat:not(:last-child)::after { content: ""; position: absolute; right: 0; top: 10%; bottom: 10%; width: 1px; background: var(--line-dim); opacity: 0.6; }
.stat .figure { font-family: var(--font-display); font-weight: 600; font-size: clamp(2.1rem, 5vw, 3.3rem); line-height: 1; color: var(--ground); letter-spacing: -0.02em; }
.stat .label { font-family: var(--font-ui); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--line-dim); margin-top: var(--s3); }
@media (max-width: 640px) {
  .stat-strip { grid-template-columns: repeat(2, 1fr); gap: var(--s7) var(--s4); }
  .stat:nth-child(2)::after { display: none; }
}

/* ==========================================================================
   Feature band — photo + copy
   ========================================================================== */
.feature-band { display: grid; gap: var(--s8); align-items: center; }
@media (min-width: 880px) { .feature-band { grid-template-columns: 1fr 1fr; gap: clamp(48px, 6vw, 96px); } .feature-band.reverse .feature-photo { order: -1; } }
/* v2: no universal inset border. Default feature photo is a documentary 4:3.
   Use .feature-photo.is-tall for a Frame-B 4:5 with a turquoise corner tick. */
.feature-photo { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--ground-sunk); }
.feature-photo img, .feature-photo .ph { width: 100%; height: 100%; object-fit: cover; }
.feature-photo.is-tall { aspect-ratio: 4 / 5; }
.feature-photo.is-tall::before { content: ""; position: absolute; left: 0; top: 0; width: 34px; height: 34px; z-index: 2; border-left: 3px solid var(--turquoise); border-top: 3px solid var(--turquoise); pointer-events: none; }
.feature-photo .frame-cap { position: absolute; left: 0; right: 0; bottom: 0; padding: var(--s3) var(--s4); font-family: var(--font-ui); font-size: 0.8125rem; font-style: italic; color: var(--ground); background: linear-gradient(0deg, rgba(30,26,23,0.7), rgba(30,26,23,0)); }
.feature-copy .lead { max-width: 50ch; }

/* ==========================================================================
   How it works — numbered steps
   ========================================================================== */
.steps { display: grid; gap: var(--s7); }
@media (min-width: 760px) { .steps { grid-template-columns: repeat(3, 1fr); gap: var(--s8); } }
.step { position: relative; }
.step .num { font-family: var(--font-display); font-size: 2.9rem; font-weight: 400; color: var(--redrock); line-height: 1; display: block; margin-bottom: var(--s4); }
.step h3 { margin-bottom: var(--s2); }
.step p { margin: 0; font-size: 1.05rem; color: var(--ink-soft); }
@media (min-width: 760px) { .step:not(:last-child)::after { content: ""; position: absolute; top: 8px; right: calc(var(--s8) / -2); bottom: 8px; width: 1px; background: var(--line); opacity: 0.7; } }

/* ==========================================================================
   Testimonials (pull-quotes, not cards)
   ========================================================================== */
.quotes-grid { display: grid; gap: var(--s8); }
@media (min-width: 880px) { .quotes-grid { grid-template-columns: repeat(3, 1fr); gap: var(--s7); } }
.quote-block { position: relative; }
.quote-block .stars { color: var(--redrock); letter-spacing: 2px; font-size: 1rem; margin-bottom: var(--s4); }
.quote-block blockquote { font-family: var(--font-read); font-style: italic; font-size: clamp(1.35rem, 2.4vw, 1.65rem); line-height: 1.42; margin: 0 0 var(--s5); color: var(--ink); }
.quote-block .attr { font-family: var(--font-ui); font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-soft); }
.quote-block .attr::before { content: ""; display: block; width: 32px; height: 1px; background: var(--redrock); margin-bottom: var(--s4); }
.demo-note { font-family: var(--font-ui); font-size: 0.8125rem; color: var(--ink-soft); font-style: italic; text-align: center; margin-top: var(--s8); padding-top: var(--s5); border-top: 1px solid var(--line); }

/* ==========================================================================
   CTA bands
   ========================================================================== */
.cta-band { text-align: center; }
.cta-band h2 { margin-bottom: var(--s6); max-width: 24ch; margin-inline: auto; }
.cta-band .btn-row { justify-content: center; }
.cta-band .or { font-family: var(--font-ui); margin-top: var(--s4); color: var(--ink-soft); }
.cta-band .or a { font-weight: 700; }
.section--basalt .cta-band .or, .section--basalt-deep .cta-band .or { color: var(--ground-dim); }

/* Final CTA band — Frame A: full-bleed dawn image, asymmetric scrim. */
.signal-band { position: relative; color: var(--ground); overflow: hidden; background: linear-gradient(110deg, var(--basalt-deep), var(--dawn-violet) 70%, var(--redrock-deep)); }
.signal-band .bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.signal-band .bg img, .signal-band .bg .ph { width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }
.signal-band .bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, rgba(30,26,23,0.90) 0%, rgba(30,26,23,0.82) 42%, rgba(46,38,46,0.74) 58%, rgba(58,47,69,0.42) 74%, rgba(58,47,69,0.25) 100%); }
.signal-band .container { position: relative; z-index: 1; }
.signal-band h2 { color: var(--ground); }
.signal-band .lead { color: var(--ground-dim); }

/* ==========================================================================
   Service area  (hand-drawn SVG radius map, config-driven)
   ========================================================================== */
.town-index { columns: 2; column-gap: var(--s8); margin-top: var(--s6); }
@media (min-width: 720px) { .town-index { columns: 3; } }
.town-index a, .town-index span { display: block; font-family: var(--font-ui); font-size: 1rem; padding-block: var(--s3); border-bottom: 1px solid var(--mist); break-inside: avoid; color: var(--basalt); }
.town-index a:hover { color: var(--redrock-deep); }

/* Hand-drawn radius map frame (no external iframe — fast, offline-safe) */
.radius-map { position: relative; border: 1px solid var(--line); background: var(--ground-sunk); overflow: hidden; }
.radius-map::after { content: ""; position: absolute; inset: 6px; border: 1px solid var(--line); pointer-events: none; z-index: 3; }
.radius-map svg { width: 100%; height: auto; display: block; }
/* On small screens the town labels overlap and become illegible; hide them and
   let the community index below the map carry the names (also in the SVG <title>). */
@media (max-width: 640px) {
  .radius-map text { display: none; }
}
.map-caption { font-family: var(--font-ui); font-size: 0.8125rem; color: var(--ink-soft); font-style: italic; margin-top: var(--s3); }

.callout { background: var(--sage-pale); border: 1px solid var(--mist); border-top: 2px solid var(--redrock); padding: var(--s6); display: flex; gap: var(--s4); align-items: flex-start; }
.callout .icon { color: var(--redrock); flex: 0 0 auto; }
.callout .icon svg { width: 30px; height: 30px; }
.callout p { margin: 0; }

/* ==========================================================================
   FAQ accordion (flat, no SaaS card)
   ========================================================================== */
.accordion { border-top: 1px solid var(--line); max-width: 820px; }
.accordion details { border-bottom: 1px solid var(--line); }
.accordion summary {
  list-style: none; cursor: pointer; padding: var(--s6) var(--s8) var(--s6) 0;
  font-family: var(--font-display); font-weight: 600; font-size: 1.25rem; letter-spacing: -0.005em;
  position: relative; color: var(--basalt);
}
.accordion summary::-webkit-details-marker { display: none; }
.accordion summary::after { content: "+"; position: absolute; right: 4px; top: 50%; transform: translateY(-50%); font-size: 1.8rem; font-weight: 300; color: var(--redrock); line-height: 1; }
.accordion details[open] summary::after { content: "\2212"; }
.accordion .answer { padding: 0 var(--s7) var(--s6) 0; }
.accordion .answer p { margin: 0 0 var(--s4); color: var(--ink-soft); font-family: var(--font-read); }
.accordion .answer p:last-child { margin-bottom: 0; }

/* ==========================================================================
   Emergency disclaimer (above forms)
   ========================================================================== */
.disclaimer {
  background: oklch(93% 0.04 38); border: 1px solid oklch(82% 0.07 38); border-left: 4px solid var(--signal);
  border-radius: var(--r-sm); padding: var(--s5); display: flex; gap: var(--s4);
  align-items: flex-start; font-family: var(--font-ui); font-size: 1rem; color: var(--basalt);
}
.disclaimer .icon { color: var(--signal); flex: 0 0 auto; }
.disclaimer .icon svg { width: 28px; height: 28px; }
.disclaimer strong { color: var(--basalt); }
.disclaimer a { color: var(--redrock-deep); font-weight: 700; text-decoration: underline; }

/* Big emergency band (safety page) */
.emergency-hero { background: var(--signal); color: #fff; padding-block: var(--s7); }
.emergency-hero .eyebrow { color: #fff; }
.emergency-hero h2 { color: #fff; margin-bottom: var(--s4); }
.emergency-hero .big-phone { color: #fff; }
.emergency-hero .big-phone:hover { color: #fff; }

/* ==========================================================================
   Forms / Quote panel
   ========================================================================== */
.contact-grid { display: grid; gap: var(--s8); }
@media (min-width: 920px) { .contact-grid { grid-template-columns: 1.05fr 0.95fr; gap: clamp(48px, 6vw, 88px); align-items: start; } }
.quote-panel { background: var(--ground); border: 1px solid var(--mist); border-top: 3px solid var(--redrock); box-shadow: var(--shadow-card); padding: clamp(28px, 4vw, 48px); }
.form-row { display: grid; gap: var(--s4); }
@media (min-width: 520px) { .form-row.two { grid-template-columns: 1fr 1fr; } }
.form-field { margin-bottom: var(--s5); }
.form-field label { display: block; font-family: var(--font-ui); font-weight: 600; font-size: 0.875rem; margin-bottom: var(--s2); color: var(--basalt); }
.form-field .req { color: var(--signal); }
.form-field input, .form-field select, .form-field textarea {
  width: 100%; font-family: var(--font-read); font-size: 1.05rem; color: var(--basalt);
  background: var(--ground-sunk); border: 1.5px solid var(--mist); border-radius: var(--r-sm);
  padding: 14px; min-height: 56px;
}
.form-field textarea { min-height: 120px; resize: vertical; }
.form-field input:focus, .form-field select:focus, .form-field textarea:focus { outline: none; border-color: var(--redrock); box-shadow: 0 0 0 3px oklch(54.5% 0.115 45 / 0.18); }
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.aside-block { font-family: var(--font-ui); }
.aside-block h2, .aside-block h3 { font-family: var(--font-display); }
/* Directory elements (address, hours) stay UI-sans by intent; running prose
   sentences use the reading serif to match the site's body voice. */
.aside-block p { font-family: var(--font-read); }
.aside-block .map-caption { font-family: var(--font-ui); }
.big-phone { display: inline-flex; align-items: center; gap: var(--s3); font-family: var(--font-display); font-weight: 600; font-size: clamp(1.9rem, 4vw, 2.6rem); color: var(--signal); margin-bottom: var(--s4); font-feature-settings: "tnum"; letter-spacing: -0.02em; }
.big-phone:hover { color: var(--signal-hot); }
.hours-list { list-style: none; padding: 0; margin: 0; }
.hours-list li { display: flex; justify-content: space-between; gap: var(--s4); padding-block: var(--s3); border-bottom: 1px solid var(--mist); font-size: 1rem; font-feature-settings: "tnum"; }
.hours-list .day { color: var(--ink-soft); }
.nap-line { font-style: normal; line-height: 1.9; }
.nap-line a { font-weight: 600; }

.form-confirm { display: none; text-align: center; padding: var(--s7) var(--s4); }
.form-confirm .check { width: 56px; height: 56px; color: var(--redrock); margin: 0 auto var(--s5); }
.is-submitted .quote-form { display: none; }
.is-submitted .form-confirm { display: block; }

/* ==========================================================================
   Timeline (about) — generic ground geometry only
   ========================================================================== */
.timeline { list-style: none; padding: 0; margin: var(--s7) 0 0; max-width: 56ch; }
.timeline li { position: relative; padding: 0 0 var(--s7) var(--s7); border-left: 1px solid var(--line-dim); }
.timeline li:last-child { padding-bottom: 0; }
.timeline li::before { content: ""; position: absolute; left: -6px; top: 4px; width: 11px; height: 11px; transform: rotate(45deg); background: var(--turquoise); border: 2px solid var(--basalt); }
.timeline .year { font-family: var(--font-display); font-weight: 600; font-size: 1.25rem; color: var(--turquoise-dim); display: block; margin-bottom: 4px; }
.timeline p { margin: 0; color: var(--ground-dim); font-size: 1.05rem; }

/* Safety numbered steps */
.safety-steps { list-style: none; counter-reset: step; padding: 0; margin: var(--s7) 0 0; border-top: 1px solid var(--line); max-width: 820px; }
.safety-steps li { counter-increment: step; display: grid; grid-template-columns: 56px 1fr; gap: var(--s4); padding-block: var(--s6); border-bottom: 1px solid var(--line); align-items: start; }
.safety-steps li::before { content: counter(step); font-family: var(--font-display); font-weight: 600; font-size: 2rem; color: var(--redrock); line-height: 1; }
.safety-steps li p { margin: 0; }
.safety-steps li strong { display: block; font-family: var(--font-ui); margin-bottom: 2px; color: var(--basalt); }

.note-block { background: var(--ground-sunk); border: 1px solid var(--mist); border-top: 2px solid var(--redrock); padding: var(--s6); }
.note-block h3 { margin-top: 0; }
.last-updated { font-family: var(--font-ui); font-size: 0.875rem; color: var(--ink-soft); margin-top: var(--s6); }

/* "Who we serve" list */
.serve-list { list-style: none; padding: 0; margin: var(--s5) 0 0; display: grid; gap: var(--s3); }
@media (min-width: 600px) { .serve-list { grid-template-columns: 1fr 1fr; } }
.serve-list li { display: flex; gap: var(--s3); align-items: flex-start; font-family: var(--font-ui); font-size: 1.05rem; }
.serve-list li::before { content: "\2014"; color: var(--redrock); font-weight: 700; flex: 0 0 auto; }

/* Pricing program rows (NO posted prices — control + certainty framing) */
.programs { border-top: 1px solid var(--line); margin-top: var(--s7); }
.program { display: grid; grid-template-columns: auto 1fr; gap: var(--s4) var(--s6); padding-block: var(--s7); border-bottom: 1px solid var(--line); align-items: start; }
.program .tag { font-family: var(--font-ui); font-weight: 700; font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ground); background: var(--redrock); padding: 6px 12px; border-radius: var(--r-sm); white-space: nowrap; align-self: start; }
.program h3 { margin: 0 0 var(--s2); }
.program p { margin: 0; color: var(--ink-soft); max-width: 58ch; }
@media (max-width: 600px) { .program { grid-template-columns: 1fr; gap: var(--s3); } }

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer { background: var(--basalt-deep); color: var(--ground-dim); padding-block: var(--s9) var(--s6); font-family: var(--font-ui); }
.site-footer h3 { color: var(--line-dim); font-family: var(--font-ui); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.14em; margin-bottom: var(--s5); }
.footer-grid { display: grid; gap: var(--s8); }
@media (min-width: 760px) { .footer-grid { grid-template-columns: 1.5fr 1fr 1fr; } }
.site-footer a { color: var(--ground-dim); }
.site-footer a:hover { color: var(--ground); }
.footer-brand .wm-1 { font-family: var(--font-display); font-weight: 600; font-size: 1.4rem; color: var(--ground); letter-spacing: 0.005em; }
.footer-ownership { font-family: var(--font-display); font-size: 1.02rem; color: var(--turquoise-dim); margin: var(--s3) 0 0; font-style: italic; }
.footer-nap { font-style: normal; line-height: 1.9; font-size: 0.975rem; margin-top: var(--s4); }
.footer-nap .phone { color: var(--ground); font-weight: 700; font-size: 1.1rem; font-feature-settings: "tnum"; }
.footer-links { list-style: none; padding: 0; margin: 0; line-height: 2.2; font-size: 0.975rem; }
.footer-towns { font-size: 0.95rem; line-height: 1.95; }
.footer-emergency { color: var(--ground); font-weight: 600; margin-top: var(--s5); border-top: 1px solid rgba(200,168,118,0.3); padding-top: var(--s4); }
.footer-emergency a { color: var(--signal-hot); text-decoration: underline; font-weight: 700; }
.footer-bottom { border-top: 1px solid rgba(200,168,118,0.22); margin-top: var(--s8); padding-top: var(--s5); font-size: 0.85rem; color: oklch(72% 0.02 76); display: flex; flex-wrap: wrap; gap: var(--s4); justify-content: space-between; }
.footer-bottom a { color: oklch(72% 0.02 76); }
.provenance { font-size: 0.9rem; color: oklch(76% 0.02 76); margin-top: var(--s5); }
.provenance .dot { color: var(--line-dim); margin-inline: 6px; }
.social-row { display: flex; gap: var(--s2); margin-top: var(--s5); }
.social-row a { color: var(--ground-dim); display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; border-radius: var(--r-sm); }
.social-row a:hover { color: var(--ground); }
.social-row svg { width: 22px; height: 22px; }

/* ==========================================================================
   Mobile sticky call bar
   ========================================================================== */
.mobile-callbar { display: none; }
@media (max-width: 759px) {
  .mobile-callbar {
    display: flex; gap: var(--s3); position: fixed; left: 0; right: 0; bottom: 0; z-index: 150;
    background: var(--ground); border-top: 1px solid var(--line); box-shadow: 0 -2px 14px rgba(42,38,34,0.12);
    padding: var(--s3) var(--s4); padding-bottom: max(var(--s3), env(safe-area-inset-bottom));
  }
  .mobile-callbar .btn { flex: 1; min-height: 52px; padding: 12px 14px; font-size: 1rem; }
  body { padding-bottom: 86px; }
}

/* ==========================================================================
   Mobile nav
   ========================================================================== */
@media (max-width: 959px) {
  .nav-toggle {
    display: inline-flex; align-items: center; justify-content: center;
    margin-left: auto; width: 48px; height: 48px; border: 1px solid var(--line);
    border-radius: var(--r-sm); background: var(--ground); color: var(--basalt); cursor: pointer;
  }
  .nav-toggle svg { width: 26px; height: 26px; }
  .nav-phone-mobile { margin-left: auto; }
  /* Full-height CANYON panel: dark header strip, warm 56px item rows,
     call CTA pinned to the bottom. */
  .nav-links {
    position: fixed; inset: 0 0 0 auto; width: min(360px, 90vw);
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--canyon); border-left: 1px solid var(--redrock-deep);
    padding: 0; margin: 0;
    transform: translateX(100%); transition: transform 240ms cubic-bezier(0.22,1,0.36,1);
    box-shadow: var(--shadow-card); z-index: 200; overflow-y: auto;
  }
  .nav-links.open { transform: translateX(0); }
  /* Dark mobile-panel header strip that holds the close (X) button (top-right) */
  .nav-close {
    display: inline-flex; align-items: center; justify-content: center; order: -1;
    align-self: stretch; width: 100%; height: 64px; flex: 0 0 auto;
    background: var(--basalt-deep); color: var(--ground); border: 0; cursor: pointer;
    justify-content: flex-end; padding-inline: var(--s5);
  }
  .nav-close svg { width: 28px; height: 28px; }
  .nav-links li { width: 100%; }
  .nav-links a:not(.btn) { display: flex; align-items: center; width: 100%; min-height: 56px; padding: 0 var(--s6); border-bottom: 1px solid rgba(126,63,38,0.18); font-size: 1.125rem; color: var(--basalt); }
  .nav-links a:not(.btn):not(.nav-phone)::after { display: none; }
  .nav-links a[aria-current="page"] { color: var(--redrock-deep); font-weight: 700; box-shadow: inset 3px 0 0 var(--turquoise); }
  .nav-links .nav-phone { color: var(--redrock-deep); }
  /* Call CTA pinned to the bottom of the panel: the CTA's <li> takes the slack */
  .nav-links li:last-child { margin-top: auto; padding: var(--s6) var(--s5) calc(var(--s6) + env(safe-area-inset-bottom)); }
  .nav-links .nav-cta { width: 100%; }
  .nav-backdrop { position: fixed; inset: 0; background: rgba(30,26,23,0.5); z-index: 190; opacity: 0; visibility: hidden; transition: opacity 200ms ease-out; }
  .nav-backdrop.open { opacity: 1; visibility: visible; }
  /* close (X) button rendered into the dark header strip via JS-free CSS:
     the existing toggle stays in the header; the panel header is decorative. */
}
@media (min-width: 960px) { .nav-phone-mobile { display: none; } .nav-backdrop { display: none; } }

/* ==========================================================================
   Image wiring + graceful fallback (v2)
   Real images ship as <img class="art" ...> with width/height + loading hints.
   The 7 jpgs live in assets/img/. If a file is missing, the broken-image
   never shows raw: the parent frame's warm fallback bg carries the slot.
   No CSS-painted fake landscapes in the elevated build.
   ========================================================================== */
.art { width: 100%; height: 100%; object-fit: cover; display: block; background: var(--ground-sunk); color: transparent; }
/* On dark frames, a missing image falls back to a deeper warm tone */
.arc-violet .art, .arc-predawn .art, .signal-band .art { background: #2c2740; }

/* Interior .ph panel — a neutral warm surface frame the owner can swap for a photo. */
.ph { position: relative; width: 100%; height: 100%; background: var(--ground-sunk); overflow: hidden; }
.ph::before { content: ""; position: absolute; inset: 0; background: linear-gradient(135deg, var(--canyon), var(--ground-sunk) 60%, var(--sage-pale)); opacity: 0.9; }

/* ==========================================================================
   About: cert / values row
   ========================================================================== */
.cert-row { display: flex; flex-wrap: wrap; gap: var(--s4) var(--s6); margin-top: var(--s6); padding-top: var(--s6); border-top: 1px solid var(--line); align-items: center; }
.cert-badge { font-family: var(--font-ui); font-size: 0.85rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-soft); display: inline-flex; align-items: center; gap: var(--s2); }
.cert-badge svg { width: 22px; height: 22px; color: var(--redrock); flex: 0 0 auto; }

/* Answer-first TL;DR block (AEO Speakable target) */
.tldr {
  background: var(--sage-pale); border: 1px solid var(--mist); border-left: 4px solid var(--turquoise);
  border-radius: var(--r-sm); padding: var(--s5) var(--s6); margin: 0 0 var(--s7); max-width: var(--prose);
}
.tldr .tldr-label { font-family: var(--font-ui); font-weight: 700; font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--redrock-deep); display: block; margin-bottom: var(--s2); }
.tldr p { margin: 0; font-size: 1.05rem; }

/* Jump nav (duty-to-warn) */
.jump-nav { display: flex; flex-wrap: wrap; gap: var(--s3) var(--s5); margin: var(--s6) 0 0; padding: var(--s5) 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); font-family: var(--font-ui); }
.jump-nav a { font-size: 0.95rem; font-weight: 600; color: var(--ink-soft); }
.jump-nav a:hover { color: var(--redrock); }

/* Warn / do-dont blocks */
.warn-block { scroll-margin-top: 90px; }
.do-dont { display: grid; gap: var(--s6); margin-top: var(--s5); }
@media (min-width: 760px) { .do-dont { grid-template-columns: 1fr 1fr; } }
.do-col, .dont-col { border: 1px solid var(--mist); border-radius: var(--r-sm); padding: var(--s6); background: var(--ground); }
.do-col { border-top: 3px solid var(--sky); }
.dont-col { border-top: 3px solid var(--signal); }
.do-col h3, .dont-col h3 { font-family: var(--font-ui); font-size: 0.8125rem; letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: var(--s4); }
.do-col h3 { color: var(--sky); }
.dont-col h3 { color: var(--redrock-deep); }
.do-list, .dont-list { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--s4); }
.do-list li, .dont-list li { position: relative; padding-left: 30px; font-family: var(--font-read); font-size: 1.05rem; line-height: 1.5; }
.do-list li::before, .dont-list li::before { position: absolute; left: 0; top: 0; font-weight: 700; }
.do-list li::before { content: "\2713"; color: var(--sky); }
.dont-list li::before { content: "\2715"; color: var(--signal); }
.do-list li strong, .dont-list li strong { display: block; }

/* Safety topics */
.safety-topics { display: grid; gap: 0; border-top: 1px solid var(--line); margin-top: var(--s7); }
.safety-topic { padding-block: var(--s7); border-bottom: 1px solid var(--line); scroll-margin-top: 90px; }
.safety-topic h2 { margin-bottom: var(--s4); }
.safety-topic p, .safety-topic li { color: var(--ink); }
.safety-topic ul { margin: var(--s4) 0 0; padding-left: 1.2em; }
.safety-topic li { margin-bottom: var(--s3); }
.safety-figure { margin: var(--s6) 0 0; }
.safety-figure img, .safety-figure .ph { width: 100%; height: auto; aspect-ratio: 4/3; border: 1px solid var(--line); display: block; }
.safety-figure figcaption { font-family: var(--font-ui); font-size: 0.8125rem; color: var(--ink-soft); margin-top: var(--s2); font-style: italic; }
.safety-split { display: grid; gap: var(--s6); align-items: start; }
@media (min-width: 820px) { .safety-split { grid-template-columns: 1.4fr 1fr; gap: var(--s8); } }
.safety-split .safety-figure { margin-top: 0; }

/* Safety video embeds + PERC gallery (parity with blue-ridge, RH tokens) */
.video-embed { position: relative; aspect-ratio: 16 / 9; margin-top: var(--s5); border-radius: var(--r-md); overflow: hidden; border: 1px solid var(--line); background: var(--ground-sunk); }
.video-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
.media-caption { font-family: var(--font-ui); font-size: 0.8125rem; color: var(--ink-soft); margin-top: var(--s3); }
.video-gallery { margin-top: var(--s8); padding-top: var(--s7); border-top: 1px solid var(--line); }
.video-gallery h2 { margin-bottom: var(--s4); }
.video-grid { display: grid; gap: var(--s6); margin-top: var(--s6); }
@media (min-width: 640px) { .video-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px) { .video-grid { grid-template-columns: repeat(3, 1fr); } }
.video-card { margin: 0; }
.video-card .video-embed { margin-top: 0; }
.video-card figcaption { font-family: var(--font-ui); font-weight: 600; font-size: 1rem; color: var(--ink); margin-top: var(--s3); }

/* Visible page figure for text-led pages (faq / why-propane / pricing) */
.page-figure { margin: 0 0 var(--s7); border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; background: var(--ground-sunk); }
.page-figure picture, .page-figure img { display: block; }
.page-figure img { width: 100%; height: auto; aspect-ratio: 40 / 21; object-fit: cover; }
.page-figure figcaption { font-family: var(--font-ui); font-size: 0.8125rem; color: var(--ink-soft); padding: var(--s3) var(--s4); background: var(--ground); border-top: 1px solid var(--line-soft); }

/* Resource link row */
.resource-links { list-style: none; padding: 0; margin: var(--s5) 0 0; display: grid; gap: var(--s3); }
.resource-links li { display: flex; gap: var(--s3); align-items: baseline; font-family: var(--font-ui); font-size: 1rem; }
.resource-links li::before { content: "\2192"; color: var(--redrock); font-weight: 700; }
.resource-links a { font-weight: 600; }

/* ==========================================================================
   Motion — progressive enhancement ONLY (content visible by default)
   ========================================================================== */
@media (prefers-reduced-motion: no-preference) {
  .js-loaded .reveal { opacity: 0; transform: translateY(12px); transition: opacity 280ms ease-out, transform 280ms ease-out; }
  .js-loaded .reveal.in { opacity: 1; transform: none; }
  .js-loaded .hero-photo img { animation: heroSettle 900ms ease-out both; }
  @keyframes heroSettle { from { transform: scale(1.04); } to { transform: scale(1); } }
}