/* ============================================================================
 * BBC Rooter & Plumbing — polish.css
 * ----------------------------------------------------------------------------
 * PURELY ADDITIVE refinement layer. Loaded LAST in <head> on every static page
 * so it wins specificity ties against the page-level <style> blocks without
 * needing !important. Nothing here deletes or restructures existing CSS.
 *
 * To revert the entire visual refinement: remove the single
 *   <link rel="stylesheet" href="/assets/polish.css">
 * tag from the static pages. No other change is required.
 *
 * Brand identity is preserved: same red (--primary), same near-black navy
 * (--secondary), same Inter / Roboto Condensed stack, same light-grey page.
 * No CSS imports, no web fonts, no external requests of any kind.
 * ========================================================================== */

/* --- 1. Design tokens ---------------------------------------------------- */
:root {
  /* Brand — sourced from the existing bundle CSS custom properties so the
     hue can never drift from the rest of the site. Fallbacks match the
     hard-coded hex values used on the blog/FAQ pages. */
  --bbc-accent:        hsl(var(--primary, 354 70% 54%));
  --bbc-accent-soft:   hsl(var(--primary, 354 70% 54%) / .10);
  --bbc-accent-line:   hsl(var(--primary, 354 70% 54%) / .28);
  --bbc-ink:           hsl(var(--secondary, 222 47% 11%));

  /* Neutrals — a slightly warmer, higher-contrast ramp than the raw greys
     already in use. Body copy moves from #374151 to a marginally richer tone
     for better sustained reading contrast. */
  --bbc-text:          #39434f;
  --bbc-text-strong:   #232c38;
  --bbc-muted:         #6b7686;
  --bbc-faint:         #93a0b1;
  --bbc-line:          #e3e9f0;
  --bbc-line-soft:     #edf1f6;
  --bbc-surface:       #ffffff;
  --bbc-surface-sunk:  #f6f8fb;

  /* Radii — one step softer and more consistent than the current 8/10/12/14 mix */
  --bbc-r-sm:  10px;
  --bbc-r:     14px;
  --bbc-r-lg:  18px;
  --bbc-r-pill: 999px;

  /* Layered shadows — two-part (contact + ambient) rather than one flat blur */
  --bbc-sh-1: 0 1px 2px rgba(20,28,42,.05), 0 1px 3px rgba(20,28,42,.05);
  --bbc-sh-2: 0 1px 2px rgba(20,28,42,.05), 0 6px 16px -6px rgba(20,28,42,.12);
  --bbc-sh-3: 0 2px 4px rgba(20,28,42,.05), 0 14px 32px -10px rgba(20,28,42,.18);
  --bbc-sh-4: 0 4px 8px rgba(20,28,42,.06), 0 26px 52px -16px rgba(20,28,42,.24);

  /* Motion */
  --bbc-ease: cubic-bezier(.22,.61,.36,1);
  --bbc-dur:  .22s;

  /* Reading measure. 608px lands at ~78 characters in Inter 17px, down from
     the current 121 characters — the single biggest readability win on these
     2,500-word pages. Full-width components are deliberately NOT constrained. */
  --bbc-measure: 38rem;

  /* Vertical rhythm */
  --bbc-space-section: 3.25rem;
}

/* --- 2. Base ------------------------------------------------------------- */
html { -webkit-text-size-adjust: 100%; }

body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Never let a refinement introduce a sideways scroll. `clip` (not `hidden`)
   is used so no scroll container is created and the sticky header keeps
   sticking to the viewport. */
body > .page-content,
body > article,
body > main { overflow-x: clip; }

::selection { background: var(--bbc-accent-soft); color: var(--bbc-text-strong); }

/* --- 3. Typography & reading rhythm -------------------------------------- */

/* 3a. Body copy: larger, looser, with real paragraph separation. */
article.city-article p,
article.bbc-article  p,
article.svc-article  p,
main.faq-main        p {
  font-size: 1.0625rem;      /* 17px */
  line-height: 1.75;
  color: var(--bbc-text);
  margin-bottom: 1.15em;
  text-wrap: pretty;
}

article.city-article li,
article.bbc-article  li,
article.svc-article  li,
main.faq-main        li {
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--bbc-text);
  margin-bottom: .55em;
  padding-left: .15em;
}

article.city-article ul,
article.city-article ol,
article.bbc-article  ul,
article.bbc-article  ol,
article.svc-article  ul,
article.svc-article  ol {
  margin-bottom: 1.35em;
  padding-left: .35em;
}

article.city-article strong,
article.bbc-article  strong,
article.svc-article  strong,
main.faq-main        strong { color: var(--bbc-text-strong); font-weight: 650; }

/* 3b. Reading measure — applied to prose only, never to layout components,
   so cards/grids/heroes keep the full column width. Below ~700px viewports
   the column is already narrower than the measure, so this is a no-op on
   mobile and cannot cause a reflow there. */
article.city-article > p,
article.city-article > ul,
article.city-article > ol,
article.city-article > h2,
article.city-article > h3,
article.bbc-article  > p,
article.bbc-article  > ul,
article.bbc-article  > ol,
article.bbc-article  > h2,
article.bbc-article  > h3,
article.svc-article  > p,
article.svc-article  > ul,
article.svc-article  > ol,
article.svc-article  > h2,
article.svc-article  > h3,
.faq-section > p,
.faq-section > h3,
main.faq-main > p,
main.faq-main > .lede,
.faq-item > p { max-width: var(--bbc-measure); }

/* 3c. Heading hierarchy — tighter tracking, better optical weight, and
   H2s promoted into genuine section breaks with a short brand rule. */
article.city-article h1,
article.bbc-article  h1,
article.svc-article  h1,
main.faq-main        h1 {
  letter-spacing: -.018em;
  text-wrap: balance;
  color: var(--bbc-ink);
}

article.city-article h2,
article.bbc-article  h2,
article.svc-article  h2,
main.faq-main        h2 {
  letter-spacing: -.012em;
  text-wrap: balance;
  font-weight: 700;
}

/* Section-break treatment: a compact accent rule above each top-level H2.
   Explicitly excluded from H2s that live inside coloured or boxed components
   (CTA panels, FAQ cards, hero blocks) where a rule would be wrong. */
article.city-article > h2::before,
article.bbc-article  > h2::before,
article.svc-article  > h2::before {
  content: "";
  display: block;
  width: 34px;
  height: 3px;
  border-radius: 2px;
  background: var(--bbc-accent);
  margin: 0 0 .8rem;
}

article.city-article > h2,
article.bbc-article  > h2,
article.svc-article  > h2 {
  margin-top: var(--bbc-space-section);
  font-size: 1.7rem;
  line-height: 1.22;
  padding-top: 0;
}

article.city-article > h3,
article.bbc-article  > h3,
article.svc-article  > h3 {
  margin-top: 2rem;
  font-size: 1.2rem;
  line-height: 1.3;
  letter-spacing: -.008em;
  color: var(--bbc-text-strong);
}

/* 3d. Lead paragraph — the first paragraph after the hero / meta line gets a
   slightly larger, calmer setting so the article opens with intent. */
article.city-article > .city-quickfacts + p,
article.bbc-article  > .meta + p,
article.bbc-article  > h1 + p,
article.svc-article  > .meta + p,
article.svc-article  > .svc-hero + p,
article.svc-article  > h1 + p {
  font-size: 1.1875rem;    /* 19px */
  line-height: 1.65;
  color: var(--bbc-text-strong);
  letter-spacing: -.004em;
  margin-bottom: 1.4em;
}

main.faq-main .lede {
  font-size: 1.1875rem;
  line-height: 1.65;
  color: var(--bbc-muted);
}

/* 3e. Small-caps labels — consistent tracking and weight across every
   eyebrow / label / meta element on the site. */
.city-quickfacts .fact-label,
.city-card-meta,
.blog-card-date,
.hub-hero .eyebrow,
.city-hero-eyebrow {
  font-size: .6875rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  font-weight: 700;
  line-height: 1.4;
}

.city-quickfacts .fact-label { color: var(--bbc-faint); }

article.bbc-article .meta,
article.svc-article .meta {
  font-size: .8125rem;
  letter-spacing: .04em;
  color: var(--bbc-faint);
  font-weight: 500;
}

/* --- 4. Section structure & whitespace ----------------------------------- */

/* More generous, more consistent breathing room around the major components
   inside the article column. */
article.city-article .city-quickfacts { margin-bottom: 2.75rem; }
article.city-article .issue-grid,
article.city-article .services-list  { margin: 1.5rem 0 .5rem; gap: 1.125rem; }
article.city-article .info-strip,
article.city-article .map-wrap,
article.city-article .twocol         { margin: 2rem 0; }
article.city-article .cta-box,
article.bbc-article  .cta-box,
article.svc-article  .cta-box        { margin: 3.25rem 0; }
article.city-article .faq-section,
article.bbc-article  .faq-section,
article.svc-article  .faq-section    { margin: 3rem 0; }

/* --- 5. Fact / stat strip ------------------------------------------------ */
.city-quickfacts { gap: 1rem; }

.city-quickfacts .fact {
  background: var(--bbc-surface);
  border: 1px solid var(--bbc-line);
  border-radius: var(--bbc-r);
  padding: 1.125rem .875rem 1.25rem;
  box-shadow: var(--bbc-sh-1);
  transition: border-color var(--bbc-dur) var(--bbc-ease),
              box-shadow var(--bbc-dur) var(--bbc-ease),
              transform var(--bbc-dur) var(--bbc-ease);
}

.city-quickfacts .fact:hover {
  border-color: var(--bbc-accent-line);
  box-shadow: var(--bbc-sh-2);
  transform: translateY(-2px);
}

.city-quickfacts .fact-label { margin-bottom: .5rem; }

.city-quickfacts .fact-value {
  font-size: 1.0625rem;
  line-height: 1.3;
  letter-spacing: -.005em;
}

/* --- 6. Grey callout / info strip ---------------------------------------- */
.info-strip {
  background: var(--bbc-surface-sunk);
  border: 1px solid var(--bbc-line-soft);
  border-left: 3px solid var(--bbc-accent);
  border-radius: var(--bbc-r);
  padding: 1.375rem 1.5rem;
  gap: 1.125rem 1.75rem;
  box-shadow: none;
}

.info-strip .label {
  letter-spacing: .01em;
  font-size: .9rem;
  color: var(--bbc-ink);
}

.info-strip .value { color: var(--bbc-text); font-size: .9375rem; line-height: 1.5; }

/* Generic boxed callouts used on a handful of blog posts. */
.comparison,
.tip-box,
.warn-box {
  border-radius: var(--bbc-r);
  box-shadow: var(--bbc-sh-1);
  padding: 1.5rem 1.625rem;
}

/* --- 7. Issue / service cards ------------------------------------------- */
.issue-card {
  border: 1px solid var(--bbc-line);
  border-left: 3px solid var(--bbc-accent);
  border-radius: var(--bbc-r);
  padding: 1.375rem 1.5rem;
  box-shadow: var(--bbc-sh-1);
  transition: box-shadow var(--bbc-dur) var(--bbc-ease),
              transform var(--bbc-dur) var(--bbc-ease);
}

.issue-card:hover { box-shadow: var(--bbc-sh-2); transform: translateY(-2px); }

.issue-card h3 {
  font-size: 1.075rem;
  line-height: 1.3;
  letter-spacing: -.008em;
  margin-bottom: .5rem;
}

.issue-card p { font-size: .9375rem; line-height: 1.65; color: var(--bbc-text); }

/* Linked service cards ("Sewer Camera Inspection", etc.) */
.services-list a {
  border: 1px solid var(--bbc-line);
  border-radius: var(--bbc-r);
  padding: 1.125rem 1.25rem 1.0625rem;
  box-shadow: var(--bbc-sh-1);
  transition: border-color var(--bbc-dur) var(--bbc-ease),
              box-shadow var(--bbc-dur) var(--bbc-ease),
              transform var(--bbc-dur) var(--bbc-ease);
}

.services-list a:hover {
  border-color: var(--bbc-accent-line);
  box-shadow: var(--bbc-sh-2);
  transform: translateY(-2px);
}

.services-list a strong { letter-spacing: -.008em; line-height: 1.25; margin-bottom: .3rem; }
.services-list a span   { color: var(--bbc-muted); line-height: 1.5; }

/* --- 8. FAQ blocks ------------------------------------------------------- */
.faq-section,
main.faq-main .faq-item {
  border: 1px solid var(--bbc-line);
  border-radius: var(--bbc-r-lg);
  box-shadow: var(--bbc-sh-1);
}

.faq-section { padding: 2rem 2.125rem 1.75rem; }

.faq-section h3 {
  font-size: 1.075rem;
  line-height: 1.35;
  letter-spacing: -.008em;
  color: var(--bbc-text-strong);
  margin-top: 1.75rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--bbc-line-soft);
}

/* First question in a card gets no divider above it. */
.faq-section h3:first-of-type { border-top: 0; padding-top: 0; margin-top: .75rem; }

.faq-section p { color: var(--bbc-text); line-height: 1.72; }

main.faq-main .faq-item {
  padding: 1.375rem 1.5rem;
  margin-bottom: 1rem;
  transition: border-color var(--bbc-dur) var(--bbc-ease),
              box-shadow var(--bbc-dur) var(--bbc-ease);
}

main.faq-main .faq-item:hover { border-color: var(--bbc-line); box-shadow: var(--bbc-sh-2); }

/* --- 9. CTA panels ------------------------------------------------------- */
.cta-box,
.blog-cta,
.hub-cta,
main.faq-main .cta-block {
  border-radius: var(--bbc-r-lg);
  box-shadow: var(--bbc-sh-3);
  background-image: linear-gradient(160deg, rgba(255,255,255,.10) 0%, rgba(0,0,0,.08) 100%);
}

.cta-box h2, .blog-cta h2, .hub-cta h2 { letter-spacing: -.015em; text-wrap: balance; }
.cta-box p,  .blog-cta p,  .hub-cta p  { text-wrap: pretty; }

.cta-box a,
.blog-cta a,
.hub-cta a.btn,
main.faq-main .cta-block a {
  border-radius: var(--bbc-r-sm);
  box-shadow: 0 1px 2px rgba(20,28,42,.10), 0 6px 16px -6px rgba(20,28,42,.30);
  letter-spacing: .005em;
  transition: transform var(--bbc-dur) var(--bbc-ease),
              box-shadow var(--bbc-dur) var(--bbc-ease),
              background-color var(--bbc-dur) var(--bbc-ease);
}

.cta-box a:hover,
.blog-cta a:hover,
.hub-cta a.btn:hover,
main.faq-main .cta-block a:hover {
  transform: translateY(-2px);
  box-shadow: 0 2px 4px rgba(20,28,42,.12), 0 12px 26px -8px rgba(20,28,42,.36);
}

/* --- 10. Blog & city index cards ---------------------------------------- */
.blog-card {
  border: 1px solid var(--bbc-line);
  border-radius: var(--bbc-r);
  box-shadow: var(--bbc-sh-1);
  transition: transform var(--bbc-dur) var(--bbc-ease),
              box-shadow var(--bbc-dur) var(--bbc-ease),
              border-color var(--bbc-dur) var(--bbc-ease);
}

.blog-card:hover {
  box-shadow: var(--bbc-sh-3);
  border-color: var(--bbc-line);
}

.blog-card-body { padding: 1.5rem 1.5rem 1.625rem; }
.blog-card-date { color: var(--bbc-faint); }
.blog-card h2   { letter-spacing: -.012em; line-height: 1.28; }
.blog-card p    { color: var(--bbc-text); line-height: 1.6; }

.blog-card .read-more { letter-spacing: .005em; }

.city-card {
  border: 1px solid var(--bbc-line);
  border-radius: var(--bbc-r);
  box-shadow: var(--bbc-sh-1);
  transition: transform var(--bbc-dur) var(--bbc-ease),
              box-shadow var(--bbc-dur) var(--bbc-ease);
}

.city-card:hover { box-shadow: var(--bbc-sh-3); }
.city-card-body  { padding: 1.25rem 1.375rem 1.375rem; }
.city-card-body h3 { letter-spacing: -.014em; line-height: 1.2; }
.city-card-meta  { color: var(--bbc-faint); margin-bottom: .625rem; }
.city-card-body p { color: var(--bbc-text); line-height: 1.6; }

/* Section label on the service-areas hub: replace the heavy 2px full-width
   underline with a hairline plus a short brand accent. */
.section-label {
  border-bottom: 1px solid var(--bbc-line);
  padding-bottom: .625rem;
  letter-spacing: -.012em;
  position: relative;
}

.section-label::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 44px;
  height: 2px;
  background: var(--bbc-accent);
  border-radius: 2px;
}

/* --- 11. Media frames ---------------------------------------------------- */
.map-wrap,
.valley-map {
  border: 1px solid var(--bbc-line);
  border-radius: var(--bbc-r);
  box-shadow: var(--bbc-sh-2);
}

.twocol img,
.svc-hero {
  border-radius: var(--bbc-r);
  box-shadow: var(--bbc-sh-2);
}

/* --- 12. "Other cities" link strip -------------------------------------- */
.other-cities { gap: .5rem; }

.other-cities a {
  border: 1px solid var(--bbc-line);
  border-radius: var(--bbc-r-pill);
  padding: .5rem .9375rem;
  box-shadow: var(--bbc-sh-1);
  letter-spacing: .002em;
  transition: background-color var(--bbc-dur) var(--bbc-ease),
              border-color var(--bbc-dur) var(--bbc-ease),
              color var(--bbc-dur) var(--bbc-ease),
              box-shadow var(--bbc-dur) var(--bbc-ease),
              transform var(--bbc-dur) var(--bbc-ease);
}

.other-cities a:hover { box-shadow: var(--bbc-sh-2); transform: translateY(-1px); }

/* --- 13. Breadcrumbs ----------------------------------------------------- */
.breadcrumb {
  font-size: .8125rem;
  letter-spacing: .012em;
  color: var(--bbc-faint);
  padding-top: 1.25rem;
}

.breadcrumb a {
  color: var(--bbc-muted);
  text-decoration: none;
  transition: color var(--bbc-dur) var(--bbc-ease);
}

.breadcrumb a:hover {
  color: var(--bbc-accent);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

/* --- 14. Hero refinement ------------------------------------------------- */
.city-hero {
  border-radius: var(--bbc-r-lg);
  box-shadow: var(--bbc-sh-3);
  margin-bottom: 2.25rem;
}

/* NOTE: the page-level "PATCH" <style> block sets this gradient with
   !important, so this single override must match it. It is the only
   !important in this file that exists purely to win a specificity war —
   everything else relies on load order. Three stops instead of two keeps the
   top of the image clean while making the headline area genuinely legible. */
.city-hero > .city-hero-overlay {
  background: linear-gradient(
    to bottom,
    rgba(15, 23, 38, 0)    0%,
    rgba(15, 23, 38, .18) 38%,
    rgba(15, 23, 38, .62) 68%,
    rgba(15, 23, 38, .90) 100%
  ) !important;
  padding: 2.25rem 2.25rem 2rem;
}

.city-hero-eyebrow { margin-bottom: .5rem; }

.city-hero h1 {
  font-size: 2.55rem;
  line-height: 1.08;
  letter-spacing: -.02em;
  margin-bottom: .625rem;
  text-wrap: balance;
  text-shadow: 0 1px 20px rgba(10, 16, 28, .45);
}

.city-hero p {
  font-size: 1.0625rem;
  line-height: 1.55;
  max-width: 42rem;
  text-shadow: 0 1px 14px rgba(10, 16, 28, .40);
}

/* Blog + hub heroes */
.blog-hero, .hub-hero { padding-top: 4.25rem; padding-bottom: 3.5rem; }

.blog-hero h1, .hub-hero h1 {
  letter-spacing: -.022em;
  line-height: 1.1;
  text-wrap: balance;
}

.blog-hero p, .hub-hero p { text-wrap: pretty; }

/* --- 15. Links & interaction -------------------------------------------- */

/* In-prose links: a soft brand underline at rest that firms up on hover.
   Deliberately scoped to paragraphs and list items so buttons, cards, pills
   and nav links are untouched. */
article.city-article p a, article.city-article li a,
article.bbc-article  p a, article.bbc-article  li a,
article.svc-article  p a, article.svc-article  li a,
main.faq-main        p a, main.faq-main        li a {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2.5px;
  text-decoration-color: var(--bbc-accent-line);
  transition: text-decoration-color var(--bbc-dur) var(--bbc-ease),
              color var(--bbc-dur) var(--bbc-ease);
}

article.city-article p a:hover, article.city-article li a:hover,
article.bbc-article  p a:hover, article.bbc-article  li a:hover,
article.svc-article  p a:hover, article.svc-article  li a:hover,
main.faq-main        p a:hover, main.faq-main        li a:hover {
  text-decoration-color: currentColor;
  text-decoration-thickness: 2px;
}

/* Accessible focus ring — visible for keyboard users, invisible for mouse. */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--bbc-accent);
  outline-offset: 3px;
}

/* --- 16. Responsive: comfortable rhythm on small screens ---------------- */
@media (max-width: 900px) {
  article.city-article > h2,
  article.bbc-article  > h2,
  article.svc-article  > h2 { margin-top: 2.5rem; font-size: 1.5rem; }

  .faq-section { padding: 1.5rem 1.5rem 1.25rem; }
}

@media (max-width: 768px) {
  :root { --bbc-space-section: 2.5rem; }

  article.city-article p,
  article.bbc-article  p,
  article.svc-article  p,
  main.faq-main        p { font-size: 1.03125rem; line-height: 1.72; }

  article.city-article > .city-quickfacts + p,
  article.bbc-article  > .meta + p,
  article.bbc-article  > h1 + p,
  article.svc-article  > .meta + p,
  article.svc-article  > .svc-hero + p,
  article.svc-article  > h1 + p,
  main.faq-main .lede { font-size: 1.09375rem; line-height: 1.6; }

  .city-hero > .city-hero-overlay { padding: 1.375rem 1.25rem 1.375rem; }
  .city-hero h1 { font-size: 1.75rem; line-height: 1.14; }
  .city-hero p  { font-size: .96875rem; line-height: 1.5; }

  .city-quickfacts { gap: .75rem; margin-bottom: 2rem; }
  .city-quickfacts .fact { padding: .875rem .625rem 1rem; }

  .blog-hero, .hub-hero { padding-top: 3rem; padding-bottom: 2.5rem; }

  .info-strip { padding: 1.125rem 1.125rem 1.125rem 1.25rem; }
  .issue-card { padding: 1.125rem 1.25rem; }
}

@media (max-width: 420px) {
  article.city-article > h2,
  article.bbc-article  > h2,
  article.svc-article  > h2 { font-size: 1.375rem; }

  .city-hero h1 { font-size: 1.5rem; }
  .city-quickfacts .fact-value { font-size: .96875rem; }
  .faq-section { padding: 1.25rem 1.25rem 1rem; }
}

/* --- 17. Reduced motion -------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .city-quickfacts .fact,
  .issue-card,
  .services-list a,
  .other-cities a,
  .blog-card,
  .city-card,
  .cta-box a,
  .blog-cta a,
  .hub-cta a.btn,
  main.faq-main .cta-block a,
  main.faq-main .faq-item {
    transition: none;
  }

  .city-quickfacts .fact:hover,
  .issue-card:hover,
  .services-list a:hover,
  .other-cities a:hover,
  .blog-card:hover,
  .city-card:hover,
  .cta-box a:hover,
  .blog-cta a:hover,
  .hub-cta a.btn:hover,
  main.faq-main .cta-block a:hover {
    transform: none;
  }
}

/* --- 18. Sticky mobile call bar (already shipped by bbc-call-cta.js) -----
 * The bar itself is NOT re-implemented here — assets/bbc-call-cta.js already
 * renders it, handles the matching body padding, and wires call tracking.
 * These rules only refine its finish. The `body` prefix raises specificity so
 * they win against the runtime-injected <style>, which is appended to <head>
 * after this stylesheet. Height is deliberately unchanged so the 76px body
 * padding-bottom reserved by that script stays exactly correct. */
body #bbc-sticky-call {
  background-image: linear-gradient(180deg, rgba(255,255,255,.10) 0%, rgba(0,0,0,.10) 100%);
  box-shadow: 0 -1px 0 rgba(255,255,255,.14), 0 -8px 26px rgba(15,23,38,.26);
}

body #bbc-sticky-call .bbc-call-text .lbl { letter-spacing: .085em; opacity: .92; }
body #bbc-sticky-call .bbc-call-text .num { letter-spacing: .01em; }
body #bbc-sticky-call .bbc-tag { letter-spacing: .06em; background: rgba(255,255,255,.22); }

/* --- 19. Print ----------------------------------------------------------- */
@media print {
  .city-quickfacts .fact,
  .issue-card,
  .services-list a,
  .faq-section,
  .blog-card,
  .city-card,
  .map-wrap { box-shadow: none; }

  article.city-article > p,
  article.city-article > ul,
  article.city-article > ol,
  article.bbc-article  > p,
  article.svc-article  > p { max-width: none; }
}

/* NOTE ON DARK MODE: intentionally not implemented. Every page hard-codes
 * white surfaces (and the footer chrome-lock block uses !important), so a
 * prefers-color-scheme layer could only be partial. A half-working dark mode
 * is worse than none, so this file stays light-only by design. */
