/* Sonora Brush Clearing. Tokens and the ground system first; every section
   and box that paints its own background declares data-ground, and text,
   links and buttons take their colours from that attribute only. */

@font-face {
  font-family: "Besley";
  src: url("/fonts/besley-var.woff2") format("woff2");
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Public Sans";
  src: url("/fonts/public-sans-var.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --manzanita: #5C2216;
  --manzanita-deep: #47190F;
  --bark: #2B1C16;
  --straw: #E8B84A;
  --straw-deep: #D9A431;
  --granite: #EEF0EB;
  --granite-line: #D6D9D1;
  --white: #FFFFFF;
  --sage: #4E6B4A;
  --sage-pale: #DCE6D6;
  --ash: #5E544E;
  --on-dark-muted: #E7DCD6;

  --font-head: "Besley", "Rockwell", "Georgia", serif;
  --font-body: "Public Sans", "Helvetica Neue", Arial, system-ui, sans-serif;

  /* Type scale. Text: Public Sans, nothing under 16px. Headings: Besley,
     one size per level, so the same kind of thing is the same size
     everywhere. */
  --fs-sm: 1rem;          /* 16: captions, notes, labels, tags, footer */
  --fs-ui: 1.0625rem;     /* 17: buttons, nav, fields, short card text */
  --fs-body: 1.1875rem;   /* 19: running text */
  --fs-lead: 1.3125rem;   /* 21: lead paragraphs */
  --fs-h4: 1.1875rem;     /* 19: h4, FAQ questions, small Besley labels */
  --fs-h3: 1.375rem;      /* 22 */
  --fs-h3-lg: clamp(1.6rem, 2.6vw, 2rem);
  --fs-h2: clamp(1.95rem, 3.8vw, 2.85rem);
  --fs-h1: clamp(2.05rem, 4.3vw, 3.55rem);

  --wrap: 1200px;
  --gutter: clamp(16px, 4vw, 40px);
  --band: clamp(56px, 8vw, 104px);
  --radius: 6px;
  --radius-photo: 4px;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 88px; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--bark);
  background: var(--white);
  font-variant-numeric: lining-nums;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; height: auto; display: block; }
svg { display: block; }
p, ul, ol, dl, table, figure { margin: 0; }
ul, ol { padding: 0; }
h1, h2, h3, h4 {
  font-family: var(--font-head);
  font-weight: 700;
  margin: 0;
  text-wrap: balance;
  color: inherit;
}
h1 { font-size: var(--fs-h1); line-height: 1.06; font-weight: 800; letter-spacing: -0.012em; }
h2 { font-size: var(--fs-h2); line-height: 1.1; }
h3 { font-size: var(--fs-h3); line-height: 1.2; }
h4 { font-size: var(--fs-h4); line-height: 1.25; }
p, li { text-wrap: pretty; }
strong { font-weight: 700; }
button, input, select, textarea { font: inherit; color: inherit; }

.wrap { width: min(100% - 2 * var(--gutter), var(--wrap)); margin-inline: auto; }
.narrow { max-width: 760px; }
.measure { max-width: 64ch; }
.lead { font-size: var(--fs-lead); line-height: 1.55; max-width: 62ch; }
.band { padding-block: var(--band); }
.band-head { display: grid; gap: 18px; margin-bottom: clamp(32px, 4vw, 52px); max-width: 860px; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 100;
  background: var(--white); color: var(--bark); padding: 10px 16px; border-radius: var(--radius);
  font-weight: 700;
}
.skip-link:focus { top: 12px; }
:focus { outline: none; }
:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }

/* ---------------------------------------------------------------- grounds */
[data-ground="white"] { background: var(--white); color: var(--bark); --muted: var(--ash); --link: var(--manzanita); --rule: var(--granite-line); }
[data-ground="light"] { background: var(--granite); color: var(--bark); --muted: var(--ash); --link: var(--manzanita); --rule: #CDD1C7; }
[data-ground="dark"]  { background: var(--manzanita); color: var(--white); --muted: var(--on-dark-muted); --link: var(--straw); --rule: rgba(255,255,255,.22); }
[data-ground="accent"] { background: var(--straw); color: var(--bark); --muted: var(--bark); --link: var(--manzanita-deep); --rule: rgba(43,28,22,.25); }
.muted { color: var(--muted); }

main a:not(.btn) {
  color: var(--link);
  font-weight: 700;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}
main a:not(.btn):hover { text-decoration-thickness: 3px; }
main a[aria-disabled="true"] { cursor: default; }

/* ---------------------------------------------------------------- buttons */
.btn {
  --bg: var(--manzanita); --fg: var(--white); --bd: var(--manzanita);
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 12px 22px;
  background: var(--bg); color: var(--fg); border: 2px solid var(--bd); border-radius: var(--radius);
  font-family: var(--font-body); font-weight: 700; font-size: var(--fs-ui); line-height: 1.2;
  text-decoration: none; cursor: pointer; text-align: center;
  transition: background-color .15s, color .15s, border-color .15s, transform .15s;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: none; }
.btn .icon { width: 20px; height: 20px; flex: none; }
.btn-small { min-height: 44px; padding: 8px 16px; font-size: var(--fs-sm); }
.btn-large { min-height: 58px; padding: 14px 26px; font-size: var(--fs-body); }

/* Button colours come from custom properties set on each ground, so the
   nearest ground wins (a white form card inside a dark band gets pale-ground
   buttons). */
[data-ground="white"], [data-ground="light"] {
  --p-bg: var(--manzanita); --p-fg: var(--white); --p-hover: var(--manzanita-deep);
  --s-fg: var(--manzanita); --s-bd: var(--manzanita); --s-hover: rgba(92,34,22,.08); --tick: var(--sage); --focus: var(--bark);
}
[data-ground="dark"] {
  --p-bg: var(--straw); --p-fg: var(--bark); --p-hover: #F0C764;
  --s-fg: var(--white); --s-bd: rgba(255,255,255,.85); --s-hover: rgba(255,255,255,.1); --tick: var(--straw); --focus: var(--straw);
}
[data-ground="accent"] {
  --p-bg: var(--bark); --p-fg: var(--white); --p-hover: #000000;
  --s-fg: var(--bark); --s-bd: var(--bark); --s-hover: rgba(43,28,22,.08); --tick: var(--bark); --focus: var(--bark);
}
.btn-primary { --bg: var(--p-bg); --fg: var(--p-fg); --bd: var(--p-bg); }
.btn-primary:hover { --bg: var(--p-hover); --bd: var(--p-hover); }
.btn-secondary, .btn-ghost { --bg: transparent; --fg: var(--s-fg); --bd: var(--s-bd); }
.btn-secondary:hover, .btn-ghost:hover { --bg: var(--s-hover); }

.actions { display: flex; flex-wrap: wrap; gap: 12px; }
.icon { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ---------------------------------------------------------------- header */
/* Six links: two open a panel (every service, every town) so each page gets
   a descriptive link from every page without crowding the row. Panels read
   as the header growing down: deep manzanita, straw top rule. */
.site-header { position: sticky; top: 0; z-index: 50; border-bottom: 1px solid rgba(0,0,0,.25); }
.header-row { display: flex; align-items: center; gap: 24px; min-height: 76px; }
.wordmark { display: flex; align-items: center; gap: 12px; color: var(--white); text-decoration: none; margin-right: auto; flex: none; }
.wordmark-mark { width: auto; height: 50px; flex: none; }
.wordmark-text { display: grid; font-family: var(--font-head); line-height: 1; }
.wordmark-text span:first-child { font-size: .95rem; font-weight: 600; color: var(--straw); letter-spacing: .02em; }
.wordmark-text span:last-child { font-size: 1.35rem; font-weight: 800; }
.site-nav { align-self: stretch; }
.site-nav a { color: var(--white); text-decoration: none; }
.site-nav a[aria-disabled="true"] { cursor: default; }
.nav-list { display: flex; gap: 22px; height: 100%; list-style: none; }
.nav-list > li { position: relative; display: flex; align-items: center; }
/* Every menu link: Public Sans 500, one size. Besley stays in the logo only. */
:where(.site-nav) a { font-weight: 500; font-size: var(--fs-sm); letter-spacing: .01em; }
.nav-top { padding-block: 6px; white-space: nowrap; }
.nav-top:hover, .nav-group.open > .nav-top { color: var(--straw); }
.nav-sub-toggle {
  display: inline-grid; place-items: center; width: 26px; height: 32px; margin-left: 2px; padding: 0;
  background: none; border: 0; border-radius: 4px; color: var(--on-dark-muted); cursor: pointer;
}
.nav-sub-toggle svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .15s; }
.nav-group.open .nav-sub-toggle { color: var(--straw); }
.nav-group.open .nav-sub-toggle svg { transform: rotate(180deg); }
.nav-panel {
  display: none; position: absolute; top: 100%; left: -20px; padding-block: 8px;
  background: var(--manzanita-deep); border-top: 3px solid var(--straw); border-radius: 0 0 var(--radius) var(--radius);
  box-shadow: 0 22px 40px -12px rgba(43,28,22,.55);
}
.nav-group.open .nav-panel { display: block; }
.nav-services { width: 460px; list-style: none; }
.nav-services li { position: relative; display: grid; gap: 2px; padding: 12px 20px; }
.nav-services li + li { border-top: 1px solid var(--rule); }
.nav-services a { line-height: 1.3; }
.nav-services a::after { content: ""; position: absolute; inset: 0; }
.nav-services span { color: var(--muted); font-size: var(--fs-sm); line-height: 1.4; }
.nav-services li:hover { background: rgba(255,255,255,.06); }
.nav-services li:hover a { color: var(--straw); }
.nav-services a:focus-visible { outline: none; }
.nav-services a:focus-visible::after { outline: 2px solid var(--straw); outline-offset: -4px; border-radius: 4px; }
.nav-towns { display: grid; grid-template-columns: repeat(2, minmax(150px, 1fr)); padding-inline: 8px; list-style: none; }
.nav-towns a { display: block; padding: 9px 12px; border-radius: 4px; white-space: nowrap; }
.nav-towns a:hover { color: var(--straw); background: rgba(255,255,255,.06); }
.header-actions { display: flex; gap: 10px; margin-left: 4px; flex: none; }
.menu-toggle { display: none; }

/* The logo is 1.8 times as wide as it is tall; just above the hamburger the
   full row runs about 25px too wide, so the nav gaps and the logo tighten. */
@media (min-width: 1241px) and (max-width: 1320px) {
  .nav-list { gap: 16px; }
  .wordmark-mark { height: 44px; }
}
@media (max-width: 1240px) {
  .menu-toggle {
    display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 12px;
    background: transparent; color: var(--white); border: 2px solid rgba(255,255,255,.6); border-radius: var(--radius);
    font-weight: 700; cursor: pointer; order: 3;
  }
  .menu-toggle .icon path { transition: opacity .15s, transform .15s; transform-origin: center; }
  .menu-toggle[aria-expanded="true"] .bar-mid { opacity: 0; }
  .menu-toggle[aria-expanded="true"] .bar-top { transform: translateY(5px) rotate(45deg); }
  .menu-toggle[aria-expanded="true"] .bar-bot { transform: translateY(-5px) rotate(-45deg); }
  .header-actions { order: 2; }
  .site-nav {
    display: none; position: fixed; inset: 76px 0 0 0;
    padding: 12px var(--gutter) 120px; overflow-y: auto; background: var(--manzanita);
  }
  body.menu-open { overflow: hidden; }
  body.menu-open .site-nav { display: block; }
  .nav-list { flex-direction: column; gap: 0; height: auto; max-width: 640px; }
  .nav-list > li { display: grid; grid-template-columns: 1fr auto; align-items: center; border-bottom: 1px solid var(--rule); }
  .nav-top { display: flex; align-items: center; min-height: 56px; font-size: var(--fs-lead); padding-block: 0; }
  .nav-sub-toggle { width: 48px; height: 48px; margin: 0; border: 1px solid var(--rule); border-radius: var(--radius); color: var(--white); }
  .nav-sub-toggle svg { width: 20px; height: 20px; }
  .nav-panel { position: static; grid-column: 1 / -1; padding: 0 0 12px; background: none; border: 0; border-radius: 0; box-shadow: none; }
  .nav-services { width: auto; }
  .nav-services li { padding: 0; }
  .nav-services li + li { border-top: 0; }
  .nav-services li:hover { background: none; }
  .nav-services a { display: flex; align-items: center; min-height: 48px; padding-left: 16px; font-size: var(--fs-body); }
  .nav-services a::after { content: none; }
  .nav-services a:focus-visible { outline: 2px solid var(--straw); outline-offset: -2px; }
  .nav-services span { display: none; }
  .nav-towns { grid-template-columns: repeat(2, minmax(0, 1fr)); padding-inline: 0; }
  .nav-towns a { display: flex; align-items: center; min-height: 48px; padding: 0 0 0 16px; font-size: var(--fs-body); white-space: normal; }
}
/* The sticky bar carries Call from 760 down, so the header drops its button. */
@media (max-width: 760px) { .header-actions { display: none; } }
@media (max-width: 560px) {
  .header-row { gap: 10px; min-height: 68px; }
  .site-nav { inset: 68px 0 0 0; }
  .wordmark { gap: 8px; }
  .wordmark-mark { height: 34px; }
  .wordmark-text span:last-child { font-size: 1.18rem; }
}
/* Under 390 the logo keeps its size and "Menu" is read to screen readers only. */
@media (max-width: 389px) {
  .menu-toggle { padding-inline: 11px; }
  .menu-toggle span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
@media (max-width: 340px) { .wordmark-mark { height: 30px; } }

/* ---------------------------------------------------------------- compare slider */
.compare {
  --pos: 50%;
  position: relative; overflow: hidden; border-radius: var(--radius-photo);
  aspect-ratio: 4 / 3; background: var(--bark); isolation: isolate;
  touch-action: pan-y;
}
.compare img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.compare .compare-before { clip-path: inset(0 calc(100% - var(--pos)) 0 0); z-index: 1; }
.compare input[type="range"] {
  position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; z-index: 4;
  opacity: 0; -webkit-appearance: none; appearance: none; pointer-events: none;
}
.compare { cursor: ew-resize; }
.compare-handle {
  position: absolute; top: 0; bottom: 0; left: var(--pos); z-index: 3; width: 3px; margin-left: -1.5px;
  background: var(--white); box-shadow: 0 0 0 1px rgba(43,28,22,.35); pointer-events: none;
}
.compare-handle::after {
  content: ""; position: absolute; top: 50%; left: 50%; width: 28px; height: 28px; margin: -14px 0 0 -14px;
  border-radius: 50%; background: var(--white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232B1C16' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l-6 6 6 6M15 6l6 6-6 6'/%3E%3C/svg%3E") center / 17px no-repeat;
  box-shadow: 0 1px 6px rgba(0,0,0,.3);
}
.compare-tag {
  position: absolute; top: 12px; z-index: 2; padding: 4px 10px; border-radius: 3px;
  font-size: var(--fs-sm); font-weight: 700; line-height: 1.3; pointer-events: none;
  transition: opacity .15s ease;
}
.reduce-motion .compare-tag { transition: none; }
.compare-tag-before { left: 12px; background: var(--manzanita); color: var(--white); }
.compare-tag-after { right: 12px; background: var(--straw); color: var(--bark); }
.compare:focus-within { outline: 3px solid var(--focus); outline-offset: 3px; }

/* ---------------------------------------------------------------- hero */
.hero { padding-block: clamp(28px, 5vw, 72px) clamp(48px, 6vw, 88px); }
.hero-grid {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr); column-gap: clamp(28px, 4vw, 64px); row-gap: 24px;
  grid-template-areas: "head visual" "text visual" "facts facts"; grid-template-rows: auto 1fr auto; align-items: start;
}
.hero-grid > h1 { grid-area: head; }
.hero-text { grid-area: text; }
.hero-visual { grid-area: visual; }
.hero-facts { grid-area: facts; }
.hero-visual { margin-top: 6px; }
.hero-text { display: grid; gap: 20px; }
.hero-sub { font-size: var(--fs-lead); max-width: 56ch; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.hero-rating { display: flex; align-items: center; gap: 10px; font-weight: 700; flex-wrap: wrap; }
.stars { display: inline-flex; gap: 2px; color: var(--manzanita); }
.stars svg { width: 20px; height: 20px; fill: currentColor; }
.hero-facts { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px 24px; border-top: 2px solid var(--bark); padding-top: 18px; margin-top: 12px; }
.hero-facts li { display: flex; gap: 10px; align-items: flex-start; font-weight: 500; font-size: var(--fs-ui); line-height: 1.4; }
.hero-facts .icon { width: 22px; height: 22px; color: var(--sage); flex: none; margin-top: 1px; stroke-width: 2.6; }
.hero-visual { display: grid; gap: 12px; }
.hero-visual .compare { box-shadow: 0 1px 0 var(--bark); }.hero-caption { display: flex; justify-content: space-between; gap: 16px; font-size: var(--fs-sm); color: var(--muted); }
.hero-caption strong { color: var(--bark); }

@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; grid-template-areas: "head" "visual" "text" "facts"; grid-template-rows: auto; row-gap: 20px; }
  .hero-visual { margin-top: 0; }
  .hero-facts { grid-template-columns: 1fr 1fr; margin-top: 0; }
}
@media (max-width: 560px) {
  .hero-facts { grid-template-columns: 1fr; }
  .hero-actions .btn { flex: 1 1 100%; }
  .hero-caption { flex-direction: column; gap: 2px; }
}

/* ---------------------------------------------------------------- answer */
.answer-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 72px); align-items: start; }
.answer-text { display: grid; gap: 20px; }
.answer-text p { max-width: 64ch; }
.facts-panel { border-radius: var(--radius); padding: clamp(24px, 3vw, 36px); display: grid; gap: 18px; }
.facts-panel h3 { font-size: var(--fs-h3); }
.facts-list { display: grid; gap: 14px; }
.facts-list div { display: grid; gap: 2px; padding-bottom: 14px; border-bottom: 1px solid var(--rule); }
.facts-list div:last-child { border-bottom: 0; padding-bottom: 0; }
.facts-list dt { font-weight: 700; }
.facts-list dd { margin: 0; color: var(--muted); font-size: var(--fs-ui); }
@media (max-width: 900px) { .answer-grid { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------- proof: before and after jobs */
/* Without scripts every job shows as a list, slider then caption. With them,
   .is-ready turns it into one large slider with the job picker, the caption
   and the button beside it (Bramwell-McKay's residential carousel). The stage
   and each job are subgrids, so a job's caption sits in the side column under
   the picker while staying inside its own figure. */
.jobs-stage { display: grid; gap: clamp(28px, 3.5vw, 44px); }
.jobs-item { margin: 0; display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: clamp(18px, 3vw, 44px); align-items: center; }
.jobs-caption { display: grid; gap: 8px; align-content: start; }
.jobs-caption h3 { font-size: var(--fs-h3); }
.jobs-caption p { color: var(--muted); max-width: 40ch; }
.jobs-caption .jobs-where { font-size: var(--fs-sm); font-weight: 700; color: var(--straw); }
.jobs-cta { margin-top: 32px; justify-self: start; }

.jobs.is-ready {
  display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); grid-template-rows: auto auto 1fr;
  column-gap: clamp(24px, 3.5vw, 44px);
}
.jobs.is-ready .jobs-stage, .jobs.is-ready .jobs-item {
  grid-column: 1 / -1; grid-row: 1 / -1; display: grid; gap: normal;
  grid-template-columns: subgrid; grid-template-rows: subgrid;
}
.jobs.is-ready .compare { grid-column: 1; grid-row: 1 / -1; align-self: start; }
/* The picker comes first in the markup (tab to a job, then into its slider)
   and would sit under the stage's box, so it is lifted above it. */
.jobs.is-ready .jobs-pick { grid-column: 2; grid-row: 1; position: relative; z-index: 1; }
.jobs.is-ready .jobs-caption { grid-column: 2; grid-row: 2; margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--rule); }
.jobs.is-ready .jobs-caption p:not(.jobs-where) { font-size: var(--fs-ui); }
.jobs.is-ready .jobs-cta { grid-column: 2; grid-row: 3; align-self: end; margin-top: 24px; }

.jobs-pick-head { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.jobs-count { margin: 0 auto 0 0; font-size: var(--fs-sm); font-weight: 700; color: var(--straw); font-variant-numeric: tabular-nums; }
.jobs-step {
  display: inline-grid; place-items: center; width: 44px; height: 44px; padding: 0; border-radius: 50%;
  border: 2px solid var(--s-bd); background: transparent; color: var(--s-fg); cursor: pointer;
  transition: background-color .15s;
}
.jobs-step .icon { width: 20px; height: 20px; stroke-width: 2.4; }
.jobs-rail { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.jobs-thumb {
  position: relative; display: block; padding: 0; border: 0; border-radius: var(--radius-photo); overflow: hidden;
  background: var(--bark); cursor: pointer; opacity: .65; transition: opacity .15s;
}
.jobs-thumb img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.jobs-thumb::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 3px var(--straw); opacity: 0; }
@media (hover: hover) {
  .jobs-step:hover { background: var(--s-hover); }
  .jobs-thumb:hover { opacity: .9; }
}
.jobs-thumb[aria-selected="true"] { opacity: 1; }
.jobs-thumb[aria-selected="true"]::after { opacity: 1; }
.jobs-thumb:focus-visible, .jobs-step:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.reduce-motion .jobs-thumb, .reduce-motion .jobs-step { transition: none; }

@media (max-width: 860px) {
  .jobs-item { grid-template-columns: 1fr; gap: 12px; }
  /* Phones: slider, picker, caption, button. The picker sits straight under
     the photo so tapping a job never moves the thumbnails. */
  .jobs.is-ready { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto auto auto; }
  .jobs.is-ready .jobs-stage, .jobs.is-ready .jobs-item { grid-row: 1 / 4; }
  .jobs.is-ready .compare { grid-row: 1; }
  .jobs.is-ready .jobs-pick { grid-column: 1; grid-row: 2; margin-top: 16px; }
  .jobs.is-ready .jobs-caption { grid-column: 1; grid-row: 3; margin-top: 18px; padding-top: 18px; }
  .jobs.is-ready .jobs-cta { grid-column: 1; grid-row: 4; }
}
@media (max-width: 560px) {
  .jobs.is-ready .jobs-cta { justify-self: stretch; }
}

/* ---------------------------------------------------------------- services */
.service-rows { display: grid; gap: clamp(40px, 6vw, 80px); }
.service-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(24px, 4vw, 56px); align-items: center; }
.service-row:nth-child(even) .service-photo { order: 2; }
.service-photo { position: relative; }
.service-photo img { border-radius: var(--radius-photo); width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.service-body { display: grid; gap: 16px; }
.service-body h3 { font-size: var(--fs-h3-lg); }
.service-terms { color: var(--muted); font-size: var(--fs-sm); }
.check-list { list-style: none; display: grid; gap: 8px; }
.check-list li { position: relative; padding-left: 30px; }
.check-list li::before {
  content: ""; position: absolute; left: 2px; top: .45em; width: 16px; height: 9px;
  border-left: 3px solid var(--tick); border-bottom: 3px solid var(--tick); transform: rotate(-45deg);
}
.service-links { display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: center; }
.also { margin-top: clamp(40px, 6vw, 72px); padding-top: 28px; border-top: 2px solid var(--bark); display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: 24px; }
.also h3 { font-size: var(--fs-h3); }
.also-list { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 32px; }
.also-list strong { display: block; }
.also-list span { color: var(--muted); font-size: var(--fs-sm); }
@media (max-width: 860px) {
  .service-row { grid-template-columns: 1fr; }
  .service-row:nth-child(even) .service-photo { order: 0; }
  .also { grid-template-columns: 1fr; }
}
@media (max-width: 560px) { .also-list { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------- zones */
.zones-wrap { display: grid; gap: 28px; }
.zone-figure { border-radius: var(--radius); padding: clamp(12px, 2vw, 24px); }
.zone-svg { width: 100%; height: auto; }
.zone-svg text { font-family: var(--font-body); fill: var(--bark); }
.zone-svg .dim text { font-weight: 700; font-size: 26px; }
.zone-svg .dim-sub { font-weight: 500; font-size: 21px; fill: var(--ash); }
.zone-svg .line { stroke: var(--bark); stroke-width: 3; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.zone-svg .thin { stroke: var(--bark); stroke-width: 2; fill: none; stroke-linecap: round; }
.zone-svg .house-fill { fill: var(--white); }
.zone-svg .roof-fill { fill: var(--manzanita); }
.zone-svg .grass-tall { stroke: var(--straw-deep); stroke-width: 3; fill: none; stroke-linecap: round; }
.zone-svg .grass-cut { stroke: var(--sage); stroke-width: 3; stroke-linecap: round; }
.zone-svg .shrub { fill: var(--sage); }
.zone-svg .brush { fill: #8A6A2E; }
.zone-svg .canopy { fill: var(--sage); }
.zone-svg .canopy-wild { fill: #6E7D4F; }
.zone-svg .trunk { stroke: var(--bark); stroke-width: 6; stroke-linecap: round; }
.zone-svg .gravel { fill: var(--ash); }
.zone-svg .ground { fill: #E3DCCB; }
.zone-svg .ground-wild { fill: #E9D7A6; }
.zone-svg .band { fill: transparent; cursor: pointer; transition: fill .2s; }
.zone-svg .band:hover { fill: rgba(232,184,74,.16); }
.zone-svg .band.is-on { fill: rgba(232,184,74,.42); }
.zone-svg .band-edge { stroke: var(--bark); stroke-width: 2; stroke-dasharray: 6 8; }
.zone-svg .callout text { font-weight: 700; font-size: 22px; }
.zone-tabs { display: flex; flex-wrap: wrap; gap: 10px; }
.zone-tab {
  display: grid; gap: 2px; text-align: left; min-height: 56px; padding: 10px 18px;
  background: var(--white); color: var(--bark); border: 2px solid var(--bark); border-radius: var(--radius); cursor: pointer;
}
.zone-tab strong { font-family: var(--font-head); font-size: var(--fs-h4); line-height: 1.15; }
.zone-tab span { font-size: var(--fs-sm); color: var(--ash); }
.zone-tab[aria-selected="true"] { background: var(--bark); color: var(--white); }
.zone-tab[aria-selected="true"] span { color: var(--on-dark-muted); }
.zone-panel { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 48px); align-items: start; }
.zone-panel-text { display: grid; gap: 16px; }
.zone-panel-text h3 { font-size: var(--fs-h3-lg); }
.zone-panel-text h4 { margin-top: 4px; }
.zone-panel figure img { border-radius: var(--radius-photo); aspect-ratio: 4 / 3; object-fit: cover; width: 100%; }
.zone-panel figcaption { font-size: var(--fs-sm); color: var(--muted); margin-top: 8px; }
.zone-source { font-size: var(--fs-sm); color: var(--muted); }
.local-rules { border-radius: var(--radius); padding: clamp(22px, 3vw, 32px); display: grid; gap: 18px; border-left: 6px solid var(--manzanita); }
.local-rules h3 { font-size: var(--fs-h3); }
.local-rules-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px, 3vw, 40px); }
.local-rules-grid > div { display: grid; gap: 8px; align-content: start; }
.local-rules h4 { font-size: var(--fs-h4); }
@media (max-width: 760px) { .local-rules-grid { grid-template-columns: 1fr; } }
.zone-note { border-left: 4px solid var(--straw-deep); padding: 4px 0 4px 16px; max-width: 70ch; }
@media (max-width: 860px) {
  .zone-panel { grid-template-columns: 1fr; }
  .zone-svg .dim text { font-size: 44px; }
  .zone-svg .dim-sub { display: none; }
  .zone-svg .callout text { font-size: 36px; }
  .zone-tab { flex: 1 1 140px; }
}

/* ---------------------------------------------------------------- prices */
.price-ways { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(18px, 2.5vw, 28px); }
.price-way { border-radius: var(--radius); padding: clamp(22px, 3vw, 32px); display: grid; gap: 14px; align-content: start; }
.price-way h3 { font-size: var(--fs-h3); }
.price-way-tag { justify-self: start; padding: 4px 10px; border-radius: 3px; font-size: var(--fs-sm); font-weight: 700; line-height: 1.3; }
.price-way-note { color: var(--muted); font-size: var(--fs-sm); }
.price-foot { margin-top: clamp(36px, 5vw, 56px); display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 64px); align-items: start; }
.price-foot h3 { font-size: var(--fs-h3); margin-bottom: 12px; }
.price-call p { margin-bottom: 18px; }
@media (max-width: 900px) { .price-ways, .price-foot { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------- steps */
.steps { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(20px, 3vw, 36px); counter-reset: step; }
.steps li { display: grid; gap: 10px; align-content: start; padding-top: 18px; border-top: 3px solid var(--bark); }
.step-num { font-family: var(--font-head); font-size: 2.6rem; font-weight: 800; line-height: 1; }
.steps h3 { font-size: var(--fs-h3); }
.steps-actions { margin-top: 36px; }
@media (max-width: 960px) { .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .steps { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------- work mosaic */
.work-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.work-item { position: relative; display: block; overflow: hidden; border-radius: var(--radius-photo); background: var(--bark); }
.work-item img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; transition: transform .3s; }
.work-item:hover img { transform: scale(1.025); }
.work-item .work-caption {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 36px 14px 12px;
  /* Solid bark under the text line, fading only above it, so white reads 4.5:1 over any photo. */
  background: linear-gradient(to top, rgba(43,28,22,.96) 0, rgba(43,28,22,.96) 60%, rgba(43,28,22,0));
  color: var(--white); font-size: var(--fs-sm); line-height: 1.35;
}
.work-item:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
/* A tile is a photo link, not a text link: no body-link underline on its caption. */
.work-grid .work-item { text-decoration: none; }
.work-foot { margin-top: 28px; display: flex; flex-wrap: wrap; gap: 16px; align-items: center; justify-content: space-between; }
@media (max-width: 1100px) { .work-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 960px) { .work-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px) {
  .work-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  /* Under the photo on phones: over a small photo the caption hid most of it. */
  .work-item .work-caption { position: static; display: block; padding: 10px 10px 12px; background: var(--bark); }
}

/* ---------------------------------------------------------------- reviews */
.reviews-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 20px; align-items: end; margin-bottom: clamp(28px, 4vw, 44px); }
.reviews-head .band-head { margin: 0; }
.review-grid { columns: 2 340px; column-gap: clamp(20px, 3vw, 32px); }
.review {
  break-inside: avoid; margin: 0 0 clamp(20px, 3vw, 32px); padding: 26px 26px 22px;
  border-radius: var(--radius); display: grid; gap: 14px;
}
.review blockquote { margin: 0; font-size: var(--fs-body); line-height: 1.55; }
.review figcaption { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: center; font-size: var(--fs-sm); }
.review figcaption strong { font-size: var(--fs-ui); }
.review .job { color: var(--muted); }
/* The reviewer's town, marked with the same ring as the service-area cards. */
.review figcaption strong + span:not(.job) { display: inline-flex; align-items: center; gap: 7px; font-weight: 600; }
.review figcaption strong + span:not(.job)::before { content: ""; width: 10px; height: 10px; flex: none; border: 2.5px solid var(--manzanita); border-radius: 50%; }
.reviews-note { font-size: var(--fs-sm); color: var(--muted); max-width: 70ch; }

/* ---------------------------------------------------------------- who */
.who-grid { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(28px, 5vw, 72px); align-items: center; }
.who-photo img { border-radius: var(--radius-photo); aspect-ratio: 3 / 4; object-fit: cover; width: 100%; }
.who-photo figcaption { font-size: var(--fs-sm); color: var(--muted); margin-top: 10px; }
.who-text { display: grid; gap: 18px; }
.who-text p { max-width: 62ch; }
.promises { list-style: none; display: grid; gap: 0; border-top: 2px solid var(--bark); }
.promises li { padding: 14px 0; border-bottom: 1px solid var(--rule); display: grid; gap: 2px; }
.promises strong { font-family: var(--font-head); font-size: var(--fs-h4); }
.partner-line { font-size: var(--fs-ui); }
@media (max-width: 860px) {
  .who-grid { grid-template-columns: 1fr; }
  .who-photo { max-width: 460px; }
}

/* ---------------------------------------------------------------- season */
/* Dark band: the late-May deadline and CAL FIRE's fire figure on the left with
   the calls to act, the four periods as rows on the right. The period to act in
   (May to early June) is a straw card that covers the rules above and below it. */
.season-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 48px 64px; align-items: start; }
.season-side { display: grid; gap: 32px; }
.season-deadline {
  border-top: 3px solid var(--straw); padding-top: 22px;
  font-family: var(--font-head); font-size: var(--fs-h3-lg); font-weight: 800; line-height: 1.15; color: var(--straw); text-wrap: balance;
}
.season-stat { display: grid; gap: 8px; border-top: 1px solid var(--rule); padding-top: 22px; }
.season-figure { font-family: var(--font-head); font-size: var(--fs-h1); font-weight: 800; line-height: 1; }
.season-stat .muted { font-size: var(--fs-sm); }
.season { list-style: none; border-top: 1px solid var(--rule); }
.season li { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 8px 28px; padding: 24px 0; border-bottom: 1px solid var(--rule); }
.season li > div { display: grid; gap: 6px; }
.season .months { font-family: var(--font-head); font-size: var(--fs-h3); font-weight: 800; line-height: 1.25; }
/* The months are the row's heading; the h3 beside them is a short subtitle, set as a bold text label. */
.season h3 { font-family: var(--font-body); font-size: var(--fs-body); font-weight: 700; line-height: 1.35; }
.season p { font-size: var(--fs-ui); color: var(--muted); }
.season li[data-ground="accent"] { margin: -1px -22px 0; padding-inline: 22px; border-bottom: 0; border-radius: var(--radius); }
@media (max-width: 960px) {
  .season-grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .season li { grid-template-columns: 1fr; }
  .season li[data-ground="accent"] { margin-inline: -12px; padding-inline: 12px; }
}

/* ---------------------------------------------------------------- areas */
.areas-link { justify-self: start; font-weight: 700; }
.areas-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: clamp(28px, 5vw, 64px); align-items: start; }
.town-list { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 32px; }
.town-list li { padding: 14px 0; border-bottom: 1px solid var(--rule); display: grid; gap: 2px; }
.town-list strong { font-family: var(--font-head); font-size: var(--fs-h4); }
.town-list span { color: var(--muted); font-size: var(--fs-sm); }
@media (max-width: 860px) { .areas-grid { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .town-list { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------- faq */
.faq-grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(28px, 5vw, 64px); align-items: start; }
.faq-side { display: grid; gap: 18px; position: sticky; top: 100px; }
.faq-side img { border-radius: var(--radius-photo); aspect-ratio: 4 / 3; object-fit: cover; width: 100%; }
.faq-list { border-top: 2px solid var(--bark); }
.faq-list details { border-bottom: 1px solid var(--rule); }
.faq-list summary {
  list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 18px; align-items: center;
  padding: 20px 0; font-family: var(--font-head); font-weight: 700; font-size: var(--fs-h4); line-height: 1.3;
}
.faq-list summary::-webkit-details-marker { display: none; }
.faq-icon { position: relative; width: 22px; height: 22px; flex: none; }
.faq-icon::before, .faq-icon::after { content: ""; position: absolute; background: currentColor; border-radius: 2px; }
.faq-icon::before { left: 0; right: 0; top: 50%; height: 3px; margin-top: -1.5px; }
.faq-icon::after { top: 0; bottom: 0; left: 50%; width: 3px; margin-left: -1.5px; transition: opacity .15s; }
details[open] .faq-icon::after { opacity: 0; }
.faq-list .faq-a { padding: 0 0 22px; display: grid; gap: 10px; max-width: 64ch; }
@media (max-width: 860px) {
  .faq-grid { grid-template-columns: 1fr; }
  .faq-side { position: static; }
  .faq-side img { display: none; }
}

/* ---------------------------------------------------------------- estimate */
.estimate-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: clamp(28px, 5vw, 72px); align-items: start; }
.estimate-side { display: grid; gap: 20px; }
.estimate-side p { max-width: 52ch; }
.contact-lines { list-style: none; display: grid; gap: 12px; }
.contact-lines a { color: var(--white); font-weight: 700; font-size: var(--fs-lead); text-decoration: none; }
.contact-lines span { display: block; color: var(--muted); font-size: var(--fs-sm); }
.next-steps { border-top: 1px solid var(--rule); padding-top: 20px; display: grid; gap: 12px; }
.next-steps h3 { font-size: var(--fs-h3); }
.next-steps ol { padding-left: 1.3em; display: grid; gap: 8px; }
.next-steps li::marker { font-family: var(--font-head); font-weight: 700; color: var(--straw); }
.estimate-form { border-radius: var(--radius); padding: clamp(22px, 3vw, 36px); display: grid; gap: 18px; }
.estimate-form h3 { font-size: var(--fs-h3); }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.field { display: grid; gap: 6px; }
.field label { font-weight: 700; font-size: var(--fs-sm); }
.field input, .field select, .field textarea {
  width: 100%; min-height: 52px; padding: 12px 14px; border: 2px solid #8C807A; border-radius: var(--radius);
  background: var(--white); color: var(--bark); font-size: var(--fs-ui);
}
.field textarea { min-height: 110px; resize: vertical; }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { outline: 3px solid var(--straw-deep); outline-offset: 1px; border-color: var(--bark); }
.form-trust { font-size: var(--fs-sm); color: var(--muted); }
.form-status { font-weight: 700; }
.form-status:empty { display: none; }
.form-status.is-error { color: #8A1F0E; }
.form-status.is-ok { color: var(--sage); }
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
@media (max-width: 900px) { .estimate-grid { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .field-row { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------- footer */
.site-footer { background: var(--bark); padding-block: 64px 0; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1.2fr 1fr 1.3fr; gap: 32px; padding-bottom: 48px; }
.footer-brand { display: grid; gap: 16px; align-content: start; }
.footer-name { font-family: var(--font-head); font-size: var(--fs-h3); font-weight: 800; }
.footer-brand .btn { justify-self: start; }
.footer-logo { justify-self: start; width: auto; height: 64px; }
.footer-head { font-weight: 700; color: var(--straw); margin-bottom: 12px; }
.footer-col ul { list-style: none; display: grid; gap: 8px; }
.site-footer a:not(.btn) { color: var(--white); text-decoration: none; }
.site-footer a:not(.btn):hover { color: var(--straw); }
/* No specificity, so .footer-name keeps its heading size. */
:where(.site-footer) :where(p, li) { font-size: var(--fs-sm); }
.footer-contact p + p { margin-top: 12px; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,.18); padding-block: 22px 28px; display: flex; flex-wrap: wrap; gap: 8px 28px; justify-content: space-between; color: var(--on-dark-muted); }
.footer-bottom p { font-size: var(--fs-sm); }
.footer-bottom a:not(.btn) { color: var(--on-dark-muted); }
.footer-bottom a + a { margin-left: 16px; }
.footer-credit { flex-basis: 100%; }
@media (max-width: 1000px) { .footer-grid { grid-template-columns: 1fr 1fr; } .footer-brand { grid-column: 1 / -1; } }
@media (max-width: 560px) { .footer-grid { grid-template-columns: 1fr 1fr; gap: 28px 20px; } .footer-contact { grid-column: 1 / -1; } }

/* ---------------------------------------------------------------- mobile bar */
.mobile-bar { display: none; }
@media (max-width: 760px) {
  .mobile-bar {
    display: grid; grid-template-columns: 1fr 1fr; position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    border-top: 1px solid rgba(255,255,255,.2); padding-bottom: env(safe-area-inset-bottom);
  }
  .mobile-bar a {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 62px;
    color: var(--white); text-decoration: none; font-weight: 700; font-size: var(--fs-sm);
  }
  .mobile-bar a + a { border-left: 1px solid rgba(255,255,255,.18); }
  .mobile-bar .mb-call { background: var(--straw); color: var(--bark); }
  .mobile-bar .icon { width: 22px; height: 22px; }
  body { padding-bottom: 64px; }
}

/* ---------------------------------------------------------------- viewer */
.viewer { width: min(1100px, 100vw - 24px); max-height: calc(100vh - 24px); padding: 0; border: 0; border-radius: var(--radius); background: var(--bark); color: var(--white); }
.viewer::backdrop { background: rgba(20,12,9,.85); }
.viewer-frame img { width: 100%; max-height: calc(100vh - 170px); object-fit: contain; background: #140c09; }
.viewer-bar { display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center; padding: 14px 18px; }
.viewer-caption { flex: 1 1 320px; }
.viewer-count { color: var(--on-dark-muted); font-size: var(--fs-sm); }
.viewer-buttons { display: flex; gap: 8px; }
.viewer .btn-primary { --bg: var(--straw); --fg: var(--bark); --bd: var(--straw); }
.viewer .btn-ghost { --bg: transparent; --fg: var(--white); --bd: rgba(255,255,255,.8); }

/* ---------------------------------------------------------------- service areas hub */
/* The hub reads like a road atlas index: every town and community named up
   top and linked to its card, then the cards county by county, each tagged
   with the road it sits on out of Sonora. */
.hub-hero { padding-block: clamp(32px, 5vw, 64px) var(--band); }
.hub-hero-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(28px, 5vw, 64px); align-items: center; }
.hub-hero-text { display: grid; gap: 22px; }
.hub-hero-photo { display: grid; gap: 10px; }
.hub-hero-photo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius-photo); }
.hub-hero-photo figcaption { color: var(--muted); font-size: var(--fs-sm); }
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 4px 0; font-size: var(--fs-sm); color: var(--muted); }
.crumbs li + li::before { content: "/"; margin-inline: 10px; color: var(--muted); }
main .crumbs a:not(.btn) { font-weight: 500; text-decoration-thickness: 1px; }

.area-index {
  margin-top: clamp(40px, 5vw, 64px); padding: clamp(22px, 3vw, 36px);
  border-top: 4px solid var(--straw); border-radius: var(--radius);
  box-shadow: 0 18px 40px -24px rgba(43,28,22,.45);
}
.area-index-title { font-size: var(--fs-h3); margin-bottom: 20px; }
.area-index-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px clamp(28px, 4vw, 56px); }
.area-index-county + .area-index-county { border-left: 1px solid var(--rule); padding-left: clamp(28px, 4vw, 56px); }
.area-index-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; padding-bottom: 12px; margin-bottom: 12px; border-bottom: 2px solid var(--bark); }
main .area-index-head a:not(.btn) { font-family: var(--font-head); font-size: var(--fs-h4); color: var(--bark); text-decoration: none; }
.area-index-head span { color: var(--muted); font-size: var(--fs-sm); }
.area-index ul { list-style: none; columns: 3 150px; column-gap: 24px; }
.area-index li { break-inside: avoid; padding-block: 5px; font-size: var(--fs-ui); line-height: 1.35; }
main .area-index li a:not(.btn) { font-weight: 500; text-decoration-thickness: 1px; }

.county-head.has-photo { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: clamp(28px, 5vw, 64px); align-items: center; margin-bottom: clamp(32px, 4vw, 52px); }
.county-head.has-photo .band-head { margin-bottom: 0; }
.county-photo { display: grid; gap: 10px; }
.county-photo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius-photo); }
.county-photo figcaption { color: var(--muted); font-size: var(--fs-sm); }
.town-cards { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px 36px; }
.town-card { display: grid; gap: 8px; align-content: start; padding: 20px 0 30px; border-top: 2px solid var(--bark); scroll-margin-top: 96px; }
.town-route { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: var(--fs-sm); font-weight: 600; }
.town-route::before { content: ""; width: 12px; height: 12px; flex: none; border: 3px solid var(--manzanita); border-radius: 50%; }
.town-also { color: var(--muted); font-size: var(--fs-sm); }
.town-card > p:last-child { font-size: var(--fs-ui); }

.table-scroll { overflow-x: auto; }
.rules-table { width: 100%; border-collapse: collapse; font-size: var(--fs-ui); }
.rules-table th, .rules-table td { text-align: left; vertical-align: top; padding: 16px 18px 16px 0; border-bottom: 1px solid var(--rule); }
.rules-table thead th { font-size: var(--fs-sm); color: var(--muted); border-bottom: 2px solid var(--bark); padding-block: 0 12px; }
.rules-table tbody th { font-family: var(--font-head); font-size: var(--fs-h4); width: 22%; }
.rules-table td:last-child { width: 30%; }

@media (max-width: 1000px) { .town-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 860px) {
  .hub-hero-grid, .county-head.has-photo { grid-template-columns: 1fr; }
  .area-index-grid { grid-template-columns: 1fr; }
  .area-index-county + .area-index-county { border-left: 0; padding-left: 0; }
}
@media (max-width: 700px) {
  /* Each cell carries its column name (data-label), so the header row goes. */
  .rules-table thead { display: none; }
  .rules-table tr { display: grid; gap: 8px; padding-block: 18px; border-bottom: 1px solid var(--rule); }
  .rules-table th, .rules-table td { display: block; width: auto !important; padding: 0; border: 0; }
  .rules-table td::before { content: attr(data-label); display: block; font-size: var(--fs-sm); font-weight: 700; color: var(--muted); }
}
@media (max-width: 600px) {
  .town-cards { grid-template-columns: 1fr; }
  .area-index ul { columns: 2; }
  .area-index li { padding-block: 0; }
  main .area-index li a:not(.btn) { display: inline-block; padding-block: 10px; }
}

/* ---------------------------------------------------------------- error */
.error-band { min-height: 50vh; }
.error-band .wrap { display: grid; gap: 20px; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}