/* =============================================================
   SIERRA VISTA MOBILE MECHANIC — design system #11 "High Desert Dusk"
   Palette: dusk indigo #2b2140 · caliche sand #efe9e0 · ocotillo
   #b8432e · agave #5f7a58 · storm gray #7d8595
   Type: Archivo (display, semi-condensed caps) / system sans body
   Signature: the "miles from help" distance strip
   ============================================================= */
@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@500;700;800&display=swap');

:root {
  --dusk: #2b2140;
  --dusk-deep: #1f1830;
  --sand: #efe9e0;
  --sand-card: #f7f3ec;
  --ocotillo: #b8432e;
  --ocotillo-dark: #93321f;
  --agave: #5f7a58;
  --storm: #7d8595;
  --ink: #262330;
  --line: #d9d1c4;
  --display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --body: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  font-family: var(--body);
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--ink);
  background: var(--sand);
}

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

.wrap { max-width: 62rem; margin: 0 auto; padding: 0 1.25rem; }

/* ---------- header / nav ---------- */
.site-header {
  background: var(--dusk);
  color: var(--sand);
  border-bottom: 4px solid var(--ocotillo);
}
.masthead {
  display: flex; flex-wrap: wrap; gap: .75rem 1.5rem;
  align-items: center; justify-content: space-between;
  padding: .9rem 0;
}
.brand { display: flex; align-items: center; gap: .65rem; text-decoration: none; color: var(--sand); }
.brand svg { flex: none; }
.brand-name {
  font-family: var(--display); font-weight: 800; font-size: 1.05rem;
  letter-spacing: .04em; text-transform: uppercase; line-height: 1.15;
}
.brand-name small { display: block; font-weight: 500; font-size: .68rem; letter-spacing: .18em; color: var(--storm); }
.call-btn {
  font-family: var(--display); font-weight: 700; font-size: 1rem;
  background: var(--ocotillo); color: #fff; text-decoration: none;
  padding: .6rem 1.1rem; border-radius: .4rem; white-space: nowrap;
}
.call-btn:hover, .call-btn:focus-visible { background: var(--ocotillo-dark); }
.site-nav { background: var(--dusk-deep); }
.site-nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; }
.site-nav a {
  display: block; padding: .55rem .9rem; color: var(--sand); text-decoration: none;
  font-family: var(--display); font-weight: 500; font-size: .85rem;
  letter-spacing: .08em; text-transform: uppercase;
}
.site-nav a:hover, .site-nav a:focus-visible, .site-nav a[aria-current="page"] { background: var(--dusk); color: #fff; }

/* ---------- hero ---------- */
.hero { background: linear-gradient(175deg, var(--dusk) 62%, var(--dusk-deep)); color: var(--sand); padding: 3rem 0 0; }
.hero h1 {
  font-family: var(--display); font-weight: 800; font-size: clamp(1.9rem, 4.5vw, 3rem);
  line-height: 1.08; letter-spacing: .01em; margin: 0 0 1rem; max-width: 21ch;
}
.hero h1 em { font-style: normal; color: #e8a08f; }
.hero p.lede { max-width: 46ch; font-size: 1.15rem; color: #d8d2e2; margin: 0 0 1.5rem; }
.hero .cta-row { display: flex; flex-wrap: wrap; gap: .8rem; margin-bottom: 2.25rem; }
.btn-ghost {
  font-family: var(--display); font-weight: 700; color: var(--sand);
  border: 2px solid var(--storm); text-decoration: none;
  padding: .55rem 1.05rem; border-radius: .4rem;
}
.btn-ghost:hover, .btn-ghost:focus-visible { border-color: var(--sand); }

/* ---------- signature: distance strip ---------- */
.distance-strip {
  background: var(--sand); color: var(--ink);
  border-top: 1px solid var(--line);
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
.distance-strip > div { padding: 1rem 1.25rem; border-right: 1px solid var(--line); }
.distance-strip > div:last-child { border-right: none; background: var(--sand-card); }
.distance-strip .num {
  font-family: var(--display); font-weight: 800; font-size: 1.7rem;
  font-variant-numeric: tabular-nums; color: var(--dusk); line-height: 1;
}
.distance-strip .num.accent { color: var(--ocotillo); }
.distance-strip .lbl { font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: var(--storm); margin-top: .3rem; }

/* ---------- sections ---------- */
main { padding: 2.5rem 0 0; }
section.band { padding: 1.75rem 0; }
h2 {
  font-family: var(--display); font-weight: 800; font-size: 1.55rem;
  line-height: 1.2; color: var(--dusk); margin: 2rem 0 .75rem;
}
h3 { font-family: var(--display); font-weight: 700; font-size: 1.12rem; color: var(--dusk); margin: 1.5rem 0 .5rem; }
.eyebrow {
  font-family: var(--display); font-weight: 700; font-size: .74rem;
  letter-spacing: .22em; text-transform: uppercase; color: var(--ocotillo); margin: 0 0 .35rem;
}
a { color: var(--ocotillo-dark); }
a:hover { color: var(--ocotillo); }

.answer-first {
  background: var(--sand-card); border-left: 4px solid var(--agave);
  padding: 1rem 1.25rem; margin: 1.25rem 0; font-size: 1.08rem;
}

/* ---------- cards ---------- */
.card-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); margin: 1.25rem 0; }
.card {
  background: var(--sand-card); border: 1px solid var(--line); border-radius: .5rem;
  padding: 1.15rem 1.25rem;
}
.card h3 { margin-top: 0; }
.card h3 a { color: var(--dusk); text-decoration: none; }
.card h3 a:hover { color: var(--ocotillo); text-decoration: underline; }
.card p { margin: .4rem 0 0; font-size: .97rem; }
.card .icon { color: var(--agave); margin-bottom: .5rem; }

/* ---------- tables ---------- */
table { border-collapse: collapse; width: 100%; margin: 1.25rem 0; background: var(--sand-card); font-size: .98rem; }
caption { caption-side: top; text-align: left; font-family: var(--display); font-weight: 700; color: var(--dusk); padding: 0 0 .5rem; }
th, td { border: 1px solid var(--line); padding: .6rem .8rem; text-align: left; vertical-align: top; }
th { background: var(--dusk); color: var(--sand); font-family: var(--display); font-weight: 700; font-size: .85rem; letter-spacing: .05em; }
td.num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.range-note { font-size: .85rem; color: var(--storm); }

/* ---------- FAQ ---------- */
details { background: var(--sand-card); border: 1px solid var(--line); border-radius: .4rem; margin: .6rem 0; padding: .2rem 1rem; }
summary { font-family: var(--display); font-weight: 700; color: var(--dusk); cursor: pointer; padding: .6rem 0; }
details[open] summary { color: var(--ocotillo); }

/* ---------- CTA band ---------- */
.cta-band {
  background: var(--dusk); color: var(--sand); border-radius: .6rem;
  padding: 1.75rem 1.5rem; margin: 2.5rem 0; text-align: center;
}
.cta-band h2 { color: #fff; margin-top: 0; }
.cta-band p { max-width: 52ch; margin: .5rem auto 1.1rem; color: #d8d2e2; }

/* ---------- breadcrumb ---------- */
.crumbs { font-size: .85rem; color: var(--storm); margin: 0 0 1rem; }
.crumbs a { color: var(--storm); }

/* ---------- footer ---------- */
.site-footer { background: var(--dusk-deep); color: #b9b3c7; margin-top: 3.5rem; padding: 2.25rem 0 2.5rem; font-size: .92rem; }
.site-footer a { color: var(--sand); }
.footer-cols { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.site-footer h4 { font-family: var(--display); font-weight: 700; font-size: .8rem; letter-spacing: .15em; text-transform: uppercase; color: var(--storm); margin: 0 0 .6rem; }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin: .3rem 0; }
.fineprint { border-top: 1px solid #3a3152; margin-top: 1.75rem; padding-top: 1.25rem; font-size: .82rem; color: #8f88a3; }

:focus-visible { outline: 3px solid var(--ocotillo); outline-offset: 2px; }

@media (max-width: 640px) {
  .distance-strip { grid-template-columns: 1fr 1fr; }
  .distance-strip > div:nth-child(2n) { border-right: none; }
}