/* City pages and the Areas & Services hub only (body.cp, set by src/build.py). Typography and layout polish, Oct 3 (seo-cities).
   Separate file so it never collides with site.css changes on other branches; nothing here applies to other pages. */
/* 1. essential text stays together: phone numbers never wrap */
.cp a[href^="tel:"],.cp .tel{white-space:nowrap}
/* 2. intentional breaks: balanced eyebrows, no one-word last lines in running text */
.cp .eyebrow{text-wrap:balance}
.cp .lead,.cp .prose p,.cp .detail p,.cp .warr p,.cp .systems p,.cp .svc p,.cp .steps p,.cp .note{text-wrap:pretty}
/* 3. hierarchy: card headings sit tight to their own text */
.cp .systems h3,.cp .warr h3{margin-bottom:10px}
.cp .warr p{margin-top:0}
/* 4. narrow phones: content cards in one column so headings and text have room */
@media (max-width:480px){
  .cp .systems{grid-template-columns:1fr}
  .cp .systems div{padding:24px 20px 22px}
}
/* buttons: centered labels; on very narrow screens a long label wraps between phrases, never inside the phone number */
.cp .btn{text-align:center}
@media (max-width:400px){
  .cp .btn{flex-wrap:wrap;justify-content:center;row-gap:4px;column-gap:10px;padding:12px 16px;line-height:1.3;letter-spacing:.09em}
}
/* headings: balanced lines so a heading never ends on one stranded word */
.cp h1,.cp h2,.cp h3{text-wrap:balance}
/* smallest phones: a touch less H1 size and card padding so city names and credential titles keep their phrases */
@media (max-width:400px){
  .cp .cred{padding:26px 20px}
}
@media (max-width:360px){
  .cp .city-intro h1{font-size:39px}
}
/* source notes on light sections: darker grey for readable contrast (about 5.5:1 on bone; was 3.45:1) */
.cp .light .note{color:#5d6268}