/*
 * Service area pages. Loads on top of services.css.
 */

.ar-hero {
  padding: 72px var(--gutter) 60px;
  max-width: 48rem;
  border-bottom: 1px solid var(--rule-soft);
}
.ar-page .ar-hero { padding-top: 34px; }

.ar-crumb {
  padding: 28px var(--gutter) 0;
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 600;
  font-size: 0.88rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.ar-crumb a { color: var(--text-muted); }
.ar-crumb a:hover { color: var(--accent-text); }

.ar-lead {
  margin: 24px 0 0;
  max-width: 56ch;
  font-size: 1.12rem;
  line-height: 1.65;
  color: var(--text-muted);
  text-wrap: pretty;
}

/* The one sentence only FirePro can write. Set apart because it is the part
   that stops these reading as fifteen copies of one page. */
.ar-local {
  margin: 20px 0 0;
  max-width: 56ch;
  padding-left: 18px;
  border-left: 3px solid var(--accent);
  font-size: 1.05rem;
  line-height: 1.6;
  color: var(--ink);
}

/* ---- area grid ---- */

.ar-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
  margin-top: 28px;
}
.ar-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 22px 22px 24px;
  background: var(--bg);
  color: inherit;
  transition: background .15s;
}
.ar-card:hover { background: var(--bg-hover); }
.ar-card-city {
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 700;
  font-size: 1.4rem;
  line-height: 1.05;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.ar-card-county {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.ar-card-more {
  margin-top: auto;
  padding-top: 10px;
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 600;
  font-size: 0.82rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-text);
}

/* ---- service lines on a city page ---- */

.ar-lines {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
  margin-top: 28px;
}
.ar-line {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 26px 24px 28px;
  background: var(--bg);
  color: inherit;
  transition: background .15s;
}
.ar-line:hover { background: var(--bg-hover); }
.ar-line-name {
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 700;
  font-size: 1.35rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.ar-line-blurb { font-size: 0.97rem; line-height: 1.6; color: var(--text-muted); }
.ar-line-more {
  margin-top: auto;
  padding-top: 6px;
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 600;
  font-size: 0.82rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-text);
}

/* ---- questions ---- */

.ar-qa {
  display: grid;
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
  margin: 28px 0 0;
}
.ar-qa > div { padding: 22px 24px 24px; background: var(--bg-raised); }
.ar-qa dt {
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 700;
  font-size: 1.15rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.ar-qa dd {
  margin: 10px 0 0;
  max-width: 74ch;
  font-size: 1rem;
  line-height: 1.65;
  color: var(--text-muted);
}

@media (max-width: 900px) {
  .ar-hero { padding: 48px var(--gutter) 44px; }
  .ar-crumb { padding: 22px var(--gutter) 0; }
}