/* city.css -- FAMILY stylesheet for the 8 area pages (plano [template], frisco, mckinney,
   allen, richardson, carrollton, garland, denton). Tokens only, no raw sizes/colours.
   Built after reading all 8 v3 city pages. Every v3 city page shares this skeleton:
     1. page-head: mono label (city + a short "where we are" phrase) + h1 + lead, all CITY-SPECIFIC wording.
     2. "the problem" section: 2-3 prose paragraphs, CITY-SPECIFIC (this is the section v3 deliberately
        wrote differently per city: never reuse one city's paragraphs on another).
     3. "what we run here" ledger: ALWAYS the same 4 rows (Get found / Get chosen / Get the lead / Stay in
        front) linking to local-seo.html / website-design.html / lead-generation.html / social-media.html,
        but the row heading + body copy is reworded per city (still verbatim v3 for that city).
     4. a "proof" / build-reference section: ALWAYS points at Jackson Roofing (Plano). Some cities carry a
        real per-city outreach-list count (Frisco 53, McKinney 45, Allen 37, Richardson 43, Garland 22);
        Plano and a couple of others have no number, just prose. NEVER invent a count for a city that has none.
     5. FAQ: 3 or 4 Qs, CITY-SPECIFIC questions and answers.
     6. cta-strip: "Request a free consultation" closing block, CITY-SPECIFIC headline/lead wording.
   Section ORDER varies city to city in v3 (e.g. Frisco puts proof before FAQ, Allen puts FAQ before
   proof, Denton opens FAQ second) -- that ordering is free per page, not part of this shared skeleton.
   NEW in v4 (not in v3, common to all 8, added per the wave-2 city-page assignment): a quiet "nearby
   cities" link row between the proof section and the FAQ, linking the other pages in this family. */

.gap-4{margin-top:var(--space-4)}

/* ---------- 1. page head: hero state, v3's exact per-city h1/lead ---------- */
.city-head{
  position:relative; z-index:1;
  min-height:100svh;
  display:flex; align-items:center;
  padding:calc(var(--nav-h) + var(--space-7)) 0 var(--space-8);
}
.city-head h1{margin-top:var(--space-4)}
.city-head h1 + .lead{margin-top:var(--space-5)}
@media (max-width:640px){ .city-head{padding-top:calc(var(--nav-h) + var(--space-5))} }

/* ---------- 3. "what we run here": whole-row links, one per service, same 4 across every city ---------- */
.city-ledger{margin-top:var(--space-7); border-bottom:1px solid var(--hair)}
.crow{
  position:relative; display:block; padding:var(--space-7) 0; border-top:1px solid var(--hair);
  text-decoration:none; color:inherit;
}
.crow:first-child{padding-top:0; border-top:none}
.crow h3{margin-top:var(--space-2); transition:color .2s ease}
.crow .body p{margin-top:var(--space-4)}
.crow .ar{display:inline-block; margin-top:var(--space-4); color:var(--blue-light); font-size:var(--step-1); line-height:1; transition:transform .2s ease}
.crow:hover h3, .crow:focus-visible h3{color:var(--blue-light)}
.crow:hover .ar{transform:translateX(var(--space-2))}
.crow:focus-visible{outline:2px solid var(--blue-light); outline-offset:-2px; border-radius:var(--radius-1)}
@media (prefers-reduced-motion: reduce){ .crow h3, .crow .ar{transition:none} }
@media (min-width:820px){
  .crow{display:grid; grid-template-columns:14rem 1fr; column-gap:var(--space-6); grid-template-rows:auto auto 1fr}
  .crow .n{grid-column:1; grid-row:1}
  .crow h3{grid-column:1; grid-row:2 / span 2}
  .crow .body{grid-column:2; grid-row:1 / span 2}
  .crow .body p:first-child{margin-top:0}
  .crow .ar{grid-column:2; grid-row:3; justify-self:start}
}

/* ---------- 4. proof / build reference: optional pull-figure for cities with a real outreach count.
   Available for reuse (Frisco/McKinney/Allen/Richardson/Garland carry a real number); pages with no
   number for their city (Plano, Carrollton, Denton) simply do not use .fig-pull and stay plain prose. ---------- */
.fig-pull{
  display:block; margin:var(--space-5) 0 0;
  font-size:var(--step-4); font-weight:500; line-height:1; letter-spacing:-.02em; color:var(--brass);
}
.fig-pull + p{margin-top:var(--space-4)}

/* ---------- new in v4: quiet nearby-cities link row ---------- */
.frame-block--nearby{padding-top:var(--space-7); padding-bottom:var(--space-7)}
.nearby-row{
  display:flex; flex-wrap:wrap; gap:var(--space-2) var(--space-5); margin-top:var(--space-4);
}
.nearby-row a{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:var(--target); min-width:var(--target); padding:0 var(--space-2);
  font-size:var(--step--1); text-decoration:none; color:var(--muted); transition:color .2s ease;
}
.nearby-row a:hover, .nearby-row a:focus-visible{color:var(--blue-light)}
@media (prefers-reduced-motion: reduce){ .nearby-row a{transition:none} }