/* Self-hosted (spec E1) -- no runtime font requests. Two families with two
   different shapes: Archivo Black is a STATIC single-weight display face
   (Google serves exactly one file, weight 400 -- there is no range to
   declare and no bolder cut to ask for, so every poster heading here is
   weight 400 and gets its blackness from the typeface, not from the
   browser); Space Grotesk is a VARIABLE family whose 400/500/700 downloads
   were byte-identical (md5 confirmed), so it ships once as a single face
   with a weight RANGE rather than three copies of the same bytes. Latin
   subset only.
   Paths are relative: bradcity_renderer merges this file into the top of
   style.css and writes the result as one token-named stylesheet in the
   build root, copying each woff2 (and LICENSE.txt) beside it under a token
   name too -- so the url() below is rewritten to match at build time. */
@font-face{font-family:'Archivo Black';font-style:normal;font-weight:400;font-display:swap;src:url('archivoblack-400.woff2') format('woff2')}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:400 700;font-display:swap;src:url('spacegrotesk-var.woff2') format('woff2')}

/* quiet-editorial -- "Quiet Editorial" skin for brad_city_service (spec E1
   §5, mockup A + inner-layout option 2). Warm cream base, Fraunces serif
   display with an italic accent phrase, Inter body, photography in soft
   shapes, hairline rules instead of bands.

   Every colour is a CSS variable emitted by _base.html's :root block from
   bradcity_skins.resolve_palette -- nothing is hard-coded except
   transparent/rgba shadows. Where the mockup used a fixed brown for small
   accent TEXT (#8B4513) this uses --accent-ink / --accent-ink-on-surface:
   same intent, but contrast-derived per background, so a brand kit whose
   accent_dark is light can never make the labels unreadable. --accent-dark
   stays what it is elsewhere in the system: the hover fill.

   Fonts are the self-hosted Fraunces/Inter variable woff2 files next to
   this file (see fonts.css); there is no runtime font request. */

/* Measured height of this skin's header (22px padding x2 + the ~44px-tall
   .call-btn pill -- the tallest header child, taller than the 30px brand
   mark): the sticky sidebar offsets itself by it. */
:root { --header-h: 90px; }

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--base);
  color: var(--text);
  font-family: Inter, -apple-system, "Segoe UI", sans-serif;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

.wrap { max-width: 1140px; margin: 0 auto; padding: 0 56px; }

.skip-link {
  position: absolute; left: -999px; top: 0; z-index: 100;
  background: var(--accent); color: var(--text-on-accent); padding: 10px 16px;
}
.skip-link:focus { left: 0; }

a { color: inherit; }
img { display: block; max-width: 100%; }

h1, h2 { font-family: Fraunces, Georgia, serif; margin: 0 0 0.5em; text-wrap: balance; }
h1 {
  font-weight: 300; font-size: clamp(40px, 5.6vw, 64px); line-height: 1.02;
  letter-spacing: -0.02em; font-variation-settings: "opsz" 144;
}
h1 em { font-style: italic; font-weight: 500; color: var(--accent-ink); }
h2 {
  font-weight: 400; font-size: clamp(28px, 3.2vw, 40px); line-height: 1.1;
  letter-spacing: -0.015em; max-width: 24ch;
}
h3 { font-family: Inter, sans-serif; font-weight: 600; font-size: 15px; line-height: 1.3; margin: 0 0 4px; }
p { margin: 0 0 1em; }

/* ---- header: no band, hairline rule, outlined call pill ---- */
.site-header {
  background: var(--base); color: var(--text);
  border-bottom: 1px solid var(--border);
  position: sticky; top: 0; z-index: 20;
}
.header-inner { display: flex; align-items: center; gap: 20px; padding: 22px 56px; flex-wrap: wrap; position: relative; }
.brand {
  display: inline-flex; align-items: center; gap: 12px; margin-right: auto; text-decoration: none;
  font-family: Fraunces, Georgia, serif; font-weight: 500; font-size: 22px; letter-spacing: -0.01em;
}
.brand-mark { width: 30px; height: 30px; flex: none; }
.site-nav { display: flex; gap: 28px; flex-wrap: wrap; }
.site-nav a { text-decoration: none; font-weight: 500; font-size: 14px; color: var(--text-muted); }
.site-nav a:hover { color: var(--accent-ink); }
.call-btn {
  border: 1.5px solid var(--text); border-radius: 999px; padding: 10px 18px;
  font-weight: 500; font-size: 14px; text-decoration: none; white-space: nowrap;
}
.call-btn:hover { background: var(--text); color: var(--base); }
.nav-toggle { color: var(--text); }
.nav-menu { background: var(--base); color: var(--text); border-top-color: var(--border); }
.nav-menu a { border-bottom-color: var(--border); font-weight: 500; }

/* ---- home hero: serif headline beside an arched photo ---- */
.hero { padding: 36px 0 64px; }
.hero-grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: 48px; align-items: center; }
/* Grid items default to a min-width of their content's intrinsic size, so
   without this a long headline can force the track wider than its share
   of the grid and overflow the hero. */
.hero-copy { min-width: 0; }
.eyebrow {
  font-weight: 500; font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--accent-ink); margin: 0 0 18px;
}
.hero h1 { margin-bottom: 22px; }
.dek { font-size: 17px; line-height: 1.6; color: var(--text-muted); max-width: 46ch; margin: 0 0 28px; }
.cta {
  display: inline-flex; align-items: center; gap: 12px; text-decoration: none;
  background: var(--ink); color: var(--text-on-ink); padding: 16px 26px; border-radius: 999px;
  font-weight: 500; font-size: 15px;
}
.cta:hover { background: var(--accent-ink); }
.cta span { color: var(--text-muted-on-ink); font-size: 13px; }
.hero-img { position: relative; }
.hero-photo { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 240px 240px 18px 18px; }

/* ---- inner-page hero: same cream ground, no band ---- */
.page-hero { padding: 34px 0 26px; }
.page-hero h1 { font-size: clamp(32px, 4.4vw, 46px); line-height: 1.05; margin: 6px 0 8px; max-width: 22ch; }
/* Muted, so the crumbs directly above it stay the accent line and the two
   uppercase rows don't read as one doubled label. */
.page-hero .eyebrow { color: var(--text-muted); margin: 8px 0 0; }
.page-hero .dek { margin-top: 12px; }
.crumbs {
  font-weight: 500; font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--accent-ink); margin-bottom: 6px;
}
.crumbs a { text-decoration: none; }
.crumbs a:hover { text-decoration: underline; }
.crumbs span { opacity: 0.5; margin: 0 8px; }

/* ---- sections + the hairline rhythm that replaces ink's bands ---- */
.section { padding: 48px 0 56px; }
.rule-top { border-top: 1px solid var(--border); }
/* A narrow reading measure that stays LEFT-ALIGNED with the page hero and
   the wide sections around it: the cap goes on the CHILDREN, because
   capping .wrap itself (margin: 0 auto) would re-centre the column and
   break the left grid edge every other section sits on. */
.section.narrow .wrap > *, .narrow-col > *, .pos.pos-single .pos-copy { max-width: 800px; }
.lab {
  display: flex; align-items: center; gap: 14px;
  font-weight: 500; font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--accent-ink); margin: 0 0 12px;
}
.lab::after { content: ""; flex: 1; height: 1px; background: var(--border); }
.section-intro { max-width: 62ch; color: var(--text-muted); margin-bottom: 18px; }
.prose > :first-child { margin-top: 0; }
.prose h2, .prose h3 { margin-top: 1.2em; }
.prose.serif p, .serif .prose p, .pos .prose p {
  font-family: Fraunces, Georgia, serif; font-size: 17px; line-height: 1.7;
  font-variation-settings: "opsz" 12;
}
.lede p:first-child { font-size: 19px; }

/* ---- inner-page hero image (spec E2 §2) -- scoped to the <img> element,
   NOT a bare .hero-img class rule: this skin's home hero already uses
   .hero-img as a positioning WRAPPER <div> around .hero-photo (see above),
   and a bare rule here would also apply display/width/aspect-ratio/margin
   to that unrelated div. */
img.hero-img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 18px; margin: 18px 0 26px; }

/* ---- home positioning: serif prose beside a soft-cornered photo ---- */
.pos { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; }
.pos.pos-single { grid-template-columns: 1fr; }
.pos .prose { column-count: 1; }
.pos-img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 18px; }

/* ---- home service list: 3 columns of numbered entries on rule lines ---- */
.service-list {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 0;
  border-top: 1px solid var(--border);
}
.service-list li {
  display: grid; grid-template-columns: 40px 1fr 52px; gap: 14px; align-items: start;
  padding: 24px 24px 24px 0; border-bottom: 1px solid var(--border);
}
.service-list .n { font-family: Fraunces, Georgia, serif; font-weight: 400; font-size: 22px; color: var(--accent-ink); }
.service-list .sl-name { display: block; text-decoration: none; font-weight: 600; font-size: 15px; margin-bottom: 6px; }
.service-list .sl-name:hover { color: var(--accent-ink); }
.service-list .sl-sum { margin: 0; font-size: 14px; line-height: 1.55; color: var(--text-muted); }
.service-list .card-img { width: 52px; height: 52px; object-fit: cover; border-radius: 10px; }

/* ---- inner layout 2: content + sticky sidebar ---- */
.layout-sidebar { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 48px; align-items: start; }
.sidebar { position: sticky; top: calc(var(--header-h) + 20px); display: grid; gap: 14px; }
/* Inner pages run their headings in a ~770px column, so the home page's
   display H2 is too large there (mockup inner-layout 2 sets 26px). */
.layout-sidebar .content h2 { font-size: clamp(24px, 2.2vw, 28px); }
.cta-card { background: var(--ink); color: var(--text-on-ink); border-radius: 16px; padding: 22px; }
.cta-title { font-family: Fraunces, Georgia, serif; font-weight: 400; font-size: 24px; line-height: 1.15; margin: 0 0 6px; }
.cta-sub { font-size: 14px; color: var(--text-muted-on-ink); margin: 0 0 14px; }
.cta-btn {
  display: block; text-align: center; text-decoration: none;
  background: var(--accent); color: var(--text-on-accent);
  padding: 13px 22px; border-radius: 999px; font-weight: 600; font-size: 14px;
}
.cta-btn:hover { background: var(--accent-dark); color: var(--text-on-accent-dark); }
.side-list {
  background: var(--surface); color: var(--text-on-surface);
  border: 1px solid var(--border-on-surface); border-radius: 16px; padding: 18px;
}
.side-list .lab { margin-bottom: 10px; color: var(--accent-ink-on-surface); }
.side-list .lab::after { background: var(--border-on-surface); }
.side-list > a {
  display: block; padding: 8px 0; border-top: 1px solid var(--border-on-surface);
  font-weight: 500; font-size: 14px; text-decoration: none;
}
.side-list > a:first-of-type { border-top: 0; }
.side-list > a:hover { color: var(--accent-ink-on-surface); }
.side-list .chip { background: var(--base); color: var(--text); border-color: var(--border); }

/* ---- benefits / process ---- */
.benefits { list-style: none; margin: 8px 0 1.6em; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.benefits li {
  background: var(--surface); color: var(--text-on-surface);
  border: 1px solid var(--border-on-surface); border-radius: 12px; padding: 14px 16px;
}
.benefits li p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--text-muted-on-surface); }
.process { list-style: none; counter-reset: step; margin: 8px 0 1.6em; padding: 0; }
/* The numeral hangs in the margin rather than taking a grid column: the
   macro emits <strong>title</strong> plus a BARE TEXT NODE, and an
   anonymous text node inside a grid becomes its own grid item -- it would
   drop to the next row in the 34px column and wrap one word per line. */
.process li {
  counter-increment: step; position: relative;
  padding: 12px 0 12px 46px; border-bottom: 1px solid var(--border);
  font-size: 14px; color: var(--text-muted);
}
.process li::before {
  content: counter(step, decimal-leading-zero); position: absolute; left: 0; top: 12px;
  font-family: Fraunces, Georgia, serif; font-weight: 400; font-size: 20px; color: var(--accent-ink);
}
.process li strong { display: block; font-weight: 600; font-size: 15px; color: var(--text); }

/* ---- FAQ ---- */
.faq-list { display: grid; gap: 10px; margin: 0 0 1.6em; }
.faq {
  background: var(--surface); color: var(--text-on-surface);
  border: 1px solid var(--border-on-surface); border-radius: 12px; padding: 14px 18px;
}
.faq summary { font-weight: 600; font-size: 15px; cursor: pointer; }
.faq .prose { margin-top: 8px; color: var(--text-muted-on-surface); }

/* ---- card grids (service / city cards with an image slot) ---- */
.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 18px; }
.card {
  display: flex; flex-direction: column; overflow: hidden; text-decoration: none;
  background: var(--surface); color: var(--text-on-surface);
  border: 1px solid var(--border-on-surface); border-radius: 18px;
  transition: border-color 0.15s, transform 0.15s;
}
.card:hover { border-color: var(--accent); transform: translateY(-2px); }
.card-img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.card-title { padding: 16px 18px 4px; font-weight: 600; font-size: 16px; }
.card-sub, .card-sum { padding: 0 18px 16px; margin: 0; font-size: 14px; line-height: 1.5; color: var(--text-muted-on-surface); }

/* ---- chips ---- */
.chip-grid { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  display: inline-block; text-decoration: none; padding: 7px 14px; border-radius: 999px;
  background: var(--surface); color: var(--text-on-surface);
  border: 1px solid var(--border-on-surface); font-weight: 500; font-size: 13px;
}
.chip:hover { border-color: var(--accent); color: var(--accent-ink-on-surface); }

/* ---- inline CTA band (home + before the inner chip sections) ---- */
.cta-band { background: var(--ink); color: var(--text-on-ink); padding: 32px 0; margin: 28px 0 0; }
.cta-inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.cta-inner h2 { margin: 0; font-size: clamp(24px, 2.4vw, 30px); max-width: none; }

/* ---- in-body call strip (call-buttons spec §2) ---- */
.call-strip {
  border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
  padding: 28px 0; margin: 32px 0; text-align: center;
}
.call-strip-sub { font-size: 14px; color: var(--text-muted); margin: 16px 0 0; }

/* Every call button on the page carries .call-now beside its own class
   (call-buttons spec §2) -- one hook for the whole conversion path. It sets
   only what the button classes leave alone, so it never fights them: the
   label ends in a phone number, which must not break across lines. */
.call-now { text-decoration: none; white-space: nowrap; }


/* ---- footer ---- */
.site-footer { background: var(--base); color: var(--text); border-top: 1px solid var(--border); padding: 40px 0 80px; }
.footer-inner { display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.footer-brand {
  display: inline-flex; align-items: center; gap: 10px; margin: 0 0 6px;
  font-family: Fraunces, Georgia, serif; font-weight: 500; font-size: 20px;
}
.footer-brand .brand-mark { width: 28px; height: 28px; }
.footer-line { font-size: 14px; color: var(--text-muted); margin: 0 0 6px; }
.footer-tel { color: var(--accent-ink); font-weight: 600; text-decoration: none; }
.footer-nav { display: flex; gap: 18px; flex-wrap: wrap; align-content: flex-start; }
.footer-nav a { text-decoration: none; font-weight: 500; font-size: 14px; color: var(--text-muted); }
.footer-nav a:hover { color: var(--accent-ink); }

/* ---- mobile call bar ---- */
.mobile-call { display: none; }

/* ---- focus visibility ---- */
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 3px solid var(--accent-ink); outline-offset: 3px; }

@media print {
  .site-header, .site-footer, .mobile-call, .sidebar, .link-band, .cta-band, .call-strip, .call-strip-sub, .call-now { display: none !important; }
  .hero, .page-hero { background: none !important; color: var(--text) !important; }
}

@media (max-width: 1080px) {
  .service-list { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 901px) {
  .header-inner { flex-wrap: nowrap; }
  .brand { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 40vw; }
}

@media (max-width: 900px) {
  .wrap { padding: 0 24px; }
  .header-inner { padding: 18px 24px; }
  .hero-grid, .pos, .layout-sidebar { grid-template-columns: 1fr; gap: 32px; }
  .hero { padding-bottom: 40px; }
  .hero-photo { aspect-ratio: 4 / 3; border-radius: 160px 160px 18px 18px; }
  .sidebar { position: static; }
  .benefits { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
  /* The fixed call bar below is the phone CTA at this width. */
  .site-nav, .call-btn { display: none; }
  .service-list { grid-template-columns: 1fr; }
  .service-list li { padding-right: 0; }
  .mobile-call {
    display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
    background: var(--accent); color: var(--text-on-accent); text-align: center;
    font-weight: 600; font-size: 15px; padding: 14px; text-decoration: none;
  }
  .site-footer { padding-bottom: 88px; }
}

/* quiet-editorial (national directory) -- SUPPLEMENTAL rules only.
   render.py's _copy_assets concatenates this file after Brad City's own
   quiet-editorial fonts.css + style.css (read, never edited) into one
   served stylesheet, so everything above this point -- .wrap, .section,
   .rule-top, .page-hero, .hero, .lab, .card, .card-grid, .chip,
   .chip-grid, .cta-band, .cta-card, .layout-sidebar, .sidebar, .prose,
   h1/h2 -- is the real Brad City rule, untouched. This file only styles
   the classes backend/templates/national_directory/_components.html's
   macros emit that Brad City has no equivalent for: the breadcrumb trail,
   facility cards, the map block, FAQ details, grouped related links,
   pagination and the listing-status/helpline-disclosure notes -- using
   the SAME CSS custom properties (--surface/--border-on-surface/
   --text-on-surface/--accent-ink/...) _base.html's :root block emits from
   bradcity_skins.resolve_palette, so a viewer can't tell these are a
   different template family. */

.breadcrumbs { padding: 0 0 10px; }
.breadcrumbs ol {
  list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  margin: 0; padding: 0; font-size: 13px; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--accent-ink);
}
.breadcrumbs li { display: flex; align-items: center; gap: 6px; }
.breadcrumbs li:not(:first-child)::before { content: "\203a"; color: var(--text-muted); }
.breadcrumbs a { text-decoration: none; }
.breadcrumbs a:hover { text-decoration: underline; }

.helpline-disclosure { font-size: 13px; color: var(--text-muted); max-width: 46ch; margin: 14px 0 0; }
.hero .helpline-disclosure, .page-hero .helpline-disclosure { color: var(--text-muted-on-ink, var(--text-muted)); }

/* Item 7 hero polish: the credit line sits directly under the photo, small
   and right-aligned rather than a plain full-width paragraph. */
.nd-hero-credit { font-size: 11px; color: var(--text-muted); text-align: right; margin: 6px 0 0; }

/* Item 7: the hero's call button never wraps its phone number. Scoped to
   the hero only -- other `.nd-btn` uses (process/CTA-band/ghost buttons)
   keep their existing wrapping behaviour. */
.nd-hero .nd-btn-lg.call-now { white-space: nowrap; min-width: max-content; }

/* Item 4: sidebar "On this page" jump-link list, generated from the
   page's own outline headings (each already carries a matching
   id="heading-<slot>" from _components.html's outline_block()). */
.on-this-page { margin: 0 0 4px; }
.on-this-page h2 {
  font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--accent-ink-on-surface, var(--accent-ink)); margin: 0 0 8px;
}
.on-this-page ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.on-this-page a { text-decoration: none; font-size: 13.5px; color: var(--text-muted); }
.on-this-page a:hover { color: var(--accent-ink); text-decoration: underline; }

.content-section, .directory-block, .fallback-block, .map-block, .faq-block,
.related-links, .listing-state {
  padding: 28px 0; border-top: 1px solid var(--border);
}
.content-section:first-child, .directory-block:first-child { border-top: 0; padding-top: 0; }
.listing-state p { color: var(--text-muted); }

/* Owner's layout fix (item 9): column count keyed to the actual card count
   via `data-card-count` (_components.html's facility_grid macro) instead of
   a generic auto-fill grid, which left a single leftover card stranded
   alone in a half-empty final row. Flexbox + `justify-content: center`
   rather than CSS grid: an incomplete last row (5 -> 3+2, 7 -> 4+3, ...)
   centers itself automatically instead of needing separate span/placement
   rules per count. */
.facility-grid, .directory-block .facility-grid {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; margin-top: 16px;
}
.facility-card {
  flex: 1 1 240px; max-width: 320px;
  background: var(--surface); color: var(--text-on-surface);
  border: 1px solid var(--border-on-surface); border-radius: 16px; padding: 18px;
}
.facility-grid[data-card-count="1"] .facility-card { flex-basis: 100%; max-width: 420px; }
.facility-grid[data-card-count="2"] .facility-card,
.facility-grid[data-card-count="4"] .facility-card { flex-basis: calc(50% - 8px); max-width: 340px; }
.facility-grid[data-card-count="3"] .facility-card,
.facility-grid[data-card-count="6"] .facility-card,
.facility-grid[data-card-count="9"] .facility-card { flex-basis: calc(33.333% - 11px); max-width: 300px; }
.facility-grid[data-card-count="7"] .facility-card,
.facility-grid[data-card-count="8"] .facility-card { flex-basis: calc(25% - 12px); max-width: 260px; }
.facility-grid[data-card-count="5"] .facility-card,
.facility-grid[data-card-count="10"] .facility-card { flex-basis: calc(20% - 13px); max-width: 220px; }

/* Tablet: a 4- or 5-across desktop row is too tight -- fall back to 3 (or,
   for an exact 2/4, stay at 2) before the general phone breakpoint below
   collapses everything to 2, then 1. */
@media (max-width: 900px) {
  .facility-grid[data-card-count="5"] .facility-card,
  .facility-grid[data-card-count="7"] .facility-card,
  .facility-grid[data-card-count="8"] .facility-card,
  .facility-grid[data-card-count="9"] .facility-card,
  .facility-grid[data-card-count="10"] .facility-card {
    flex-basis: calc(33.333% - 11px); max-width: 300px;
  }
}
@media (max-width: 700px) {
  .facility-grid .facility-card { flex-basis: calc(50% - 8px) !important; max-width: 340px; }
}
@media (max-width: 480px) {
  .facility-grid .facility-card { flex-basis: 100% !important; max-width: 420px; }
}
.facility-card h3 { margin: 0 0 6px; font-size: 16px; }
.facility-card h3 a { text-decoration: none; }
.facility-card h3 a:hover { color: var(--accent-ink-on-surface); }
/* Item 7 (design-showcase pass): a distance badge, mirroring the
   nd2_facility_card upgrade's own look, sitting beside the name -- only
   rendered when real distance data exists (see _components.html). */
.facility-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.facility-card-top h4 { margin: 0 0 6px; }
.facility-card .nd2-distance-badge { flex: none; margin-top: 2px; }
.facility-card p { margin: 0 0 6px; font-size: 14px; color: var(--text-muted-on-surface); }
.fallback-card .distance { font-weight: 600; color: var(--accent-ink-on-surface); }

.status {
  display: inline-block; font-weight: 600; text-transform: uppercase; font-size: 11px;
  letter-spacing: 0.06em; padding: 3px 10px; border-radius: 999px;
  border: 1px solid var(--border-on-surface); color: var(--text-muted-on-surface);
}
.status-active { border-color: var(--accent); color: var(--accent-ink-on-surface); }

.service-pills { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; padding: 0; margin: 10px 0 0; }
.service-pill {
  font-size: 12px; font-weight: 500; padding: 4px 10px; border-radius: 999px;
  background: var(--base); color: var(--text); border: 1px solid var(--border);
}

.map-block h2, .faq-block h2, .directory-block h2, .related-links h2, .listing-state h2 {
  font-size: clamp(24px, 2.4vw, 30px);
}
.map-block img {
  display: block; width: 100%; height: auto; max-height: 420px; object-fit: cover;
  background: var(--surface); border: 1px solid var(--border-on-surface); border-radius: 18px; margin-top: 12px;
}
.map-blocked p { background: var(--surface); color: var(--text-muted-on-surface); border-radius: 12px; padding: 14px 16px; }

.faq-block details {
  background: var(--surface); color: var(--text-on-surface);
  border: 1px solid var(--border-on-surface); border-radius: 12px; padding: 14px 18px; margin-bottom: 10px;
}
.faq-block summary { font-weight: 600; font-size: 15px; cursor: pointer; }
.faq-block p { margin: 8px 0 0; color: var(--text-muted-on-surface); }

.related-links h3 { font-size: 13px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--accent-ink-on-surface); margin: 0 0 8px; }
.related-links-group { margin-bottom: 20px; }
.related-links-group:last-child { margin-bottom: 0; }
.related-links ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.related-links a { text-decoration: none; font-size: 14px; }
.related-links a:hover { color: var(--accent-ink); }

.content-image { margin: 24px 0; }
.content-image img {
  display: block; width: 100%; height: auto; border-radius: 18px;
  border: 1px solid var(--border-on-surface);
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.08);
}
.content-image figcaption { font-size: 12px; color: var(--text-muted); margin-top: 6px; }

/* Design-showcase pass: in-body pool images alternate a "wide with text"
   float placement on wide columns -- a soft shadow + rounded corners
   (above) instead of a plain full-width stack -- and always fall back to
   the same plain full-width figure below the wrap breakpoint, so the
   reading flow never breaks on a phone. No CSS filters/blur, no
   scroll-driven animation. */
@media (min-width: 780px) {
  .content-image-wrap { max-width: 46%; margin-top: 6px; margin-bottom: 6px; }
  .content-image-wrap-right { float: right; margin-left: 28px; }
  .content-image-wrap-left { float: left; margin-right: 28px; }
}

.link-grid-groups { border: 0; padding: 0; }
.link-grid-groups .chip-grid { margin-top: 8px; }

.pagination { display: flex; gap: 8px; justify-content: center; padding: 32px 0; }
.pagination a, .pagination span {
  min-width: 38px; text-align: center; padding: 8px; border-radius: 8px;
  border: 1px solid var(--border); text-decoration: none;
}
.pagination span[aria-current] { background: var(--ink); color: var(--text-on-ink); border-color: var(--ink); }

@media (max-width: 720px) {
  .layout-sidebar { grid-template-columns: 1fr; }
  /* Item 4: the sidebar (call card, "On this page" jump list, Nearby
     links) collapses entirely on mobile instead of just losing its sticky
     positioning -- design-extra.css's .nd2-mobile-call sticky bar (and,
     on wider phones/tablets, .nd2-floating-call) stands in for its call
     affordance instead. Non-city page kinds only -- city pages no longer
     have a `.sidebar` at all (owner's layout fix, single column). */
  .sidebar { display: none; }
}

/* Item 6: a simple run of question/answer sentences renders as its own
   short list instead of one dense paragraph. */
.nd-qa-list { display: grid; gap: 14px; margin-top: 4px; }
.nd-qa-question { font-weight: 700; margin: 0; }
.nd-qa-answer { margin: 4px 0 0; color: var(--text-muted-on-surface); }

/* ============================================================
   Owner's layout fix: single-column city pages
   ============================================================
   Replaces `.layout-sidebar`/`.sidebar` for city pages only (the other
   page kinds keep the two-column layout above, unchanged). One centered
   column: prose sections keep a comfortable ~740px reading measure, while
   wider components (the facility grid, the map, the two chip rows, the
   ink panel and the "Talk to us" cards) use the full ~1100px column so
   nothing looks stranded in a leftover half-width slot. */
.nd-single-col { display: block; max-width: 1140px; margin: 0 auto; padding: 0 24px; }
.nd-single-col .content { max-width: none; }
.nd-single-col .content-section,
.nd-single-col .faq-block,
.nd-single-col .content-image {
  max-width: 760px; margin-left: auto; margin-right: auto;
}
/* A floated in-body image (.content-image-wrap) must not let the NEXT
   section creep up alongside it -- every subsequent section clears it. */
.nd-single-col .content-section, .nd-single-col .nd2-panel, .nd-single-col .nd2-talk-card {
  clear: both;
}
.nd-single-col .content-section.section-facility_cards,
.nd-single-col .content-section.section-map,
.nd-single-col .section-navigation,
.nd-single-col .section-state_sample,
.nd-single-col .nd2-panel,
.nd-single-col .nd2-talk-card,
.nd-single-col .nd-emergency {
  max-width: 1100px;
}
@media (max-width: 640px) {
  .nd-single-col { padding: 0 16px; }
}

/* Item 5/6: nearby-cities and "more cities" both render as a row of
   button-style chips, visible at every viewport width -- there is no
   longer a sidebar copy to hide the bottom one behind at desktop widths. */
.section-navigation .chip-grid, .section-state_sample .link-grid {
  display: flex; flex-wrap: wrap; gap: 8px;
}
.section-state_sample .link-grid-card {
  display: inline-block; text-decoration: none; padding: 7px 14px; border-radius: 999px;
  background: var(--surface); color: var(--text-on-surface);
  border: 1px solid var(--border-on-surface); font-weight: 500; font-size: 13px;
}
.section-state_sample .link-grid-card:hover { border-color: var(--accent); color: var(--accent-ink-on-surface); }

/* Item 4: FAQ spacing/rhythm -- clean margin under the heading, full-width
   rows separated by real dividers instead of each question being its own
   floating rounded card, and the plus/minus toggle vertically centered on
   the question text. */
.faq-block h2 { margin: 0 0 22px; }
.faq-block details {
  background: none; border: 0; border-top: 1px solid var(--border-on-surface);
  border-radius: 0; padding: 20px 0; margin-bottom: 0;
}
.faq-block details:first-of-type { border-top: 0; padding-top: 0; }
.faq-block summary {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  line-height: 1.4;
}
.faq-block p { margin: 14px 0 0; }

/* Item 8: the photo credit line moves from under the hero into the site
   footer -- `render.py` feeds it through the sealed template's own
   `address_display` hook, which prints as a second `.footer-line`
   paragraph right after the niche/city footer line. Small and muted,
   matching the old under-hero treatment, without needing a class on the
   sealed markup itself. */
.footer-line + .footer-line { font-size: 11px; color: var(--text-muted); margin-top: 2px; }

/* ============================================================
   Alignment fix (2026-09-24): one reading column for every heading and
   paragraph; only grids, maps, chip rows and panels break out wider.
   In-body images are full reading-column figures, never floated.
   ============================================================ */
.nd-single-col h2,
.nd-single-col h2 + p,
.nd-single-col .content-section > p,
.nd-single-col .nd2-panel > * > h2,
.nd-single-col .nd2-panel h2 + p {
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
}
.nd-single-col .content-image,
.nd-single-col .content-image-wrap,
.nd-single-col .content-image-wrap-left,
.nd-single-col .content-image-wrap-right {
  float: none;
  width: 100%;
  max-width: 760px;
  margin: 40px auto;
  clear: both;
}
.nd-single-col .content-image img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

/* ============================================================
   Owner's layout fix (item 4): visual separation between an H3 subsection
   and the paragraph(s) before it -- previously a bare heading with no
   spacing/rule of its own, so a long "what to expect" block with several
   H3 children read as one unbroken wall of text.
   ============================================================ */
.content-section h3 {
  margin-top: 36px;
  padding-top: 22px;
  border-top: 1px solid var(--border);
}
.content-section h3:first-of-type { margin-top: 28px; }

/* ============================================================
   Owner's layout fix (item 8): generous, consistent spacing between major
   sections (72-96px desktop, 48px mobile) plus alternating cream/sage/
   white background bands, so a run of long-text sections is always broken
   up by a visible change of ground rather than one continuous column of
   prose from heading to heading.
   ============================================================ */
.nd-single-col .content-section {
  padding: 88px clamp(20px, 4vw, 40px);
  border-top: 0;
  border-radius: 22px;
  margin-bottom: 8px;
}
.nd-single-col .content-section:first-child { padding-top: 0; border-radius: 0 0 22px 22px; }
.nd-single-col .content-section:nth-of-type(odd) { background: var(--base); }
.nd-single-col .content-section:nth-of-type(even) { background: var(--surface); color: var(--text-on-surface); }
.nd-single-col .content-section:nth-of-type(even) h2,
.nd-single-col .content-section:nth-of-type(even) h3 { color: var(--text-on-surface); }
.nd-single-col .content-section:nth-of-type(even) .status,
.nd-single-col .content-section:nth-of-type(even) .service-pill { background: var(--base); }

@media (max-width: 640px) {
  .nd-single-col .content-section { padding: 48px 20px; border-radius: 16px; }
  .content-section h3 { margin-top: 28px; padding-top: 18px; }
}

/* Alignment fix 2 (2026-09-24): tinted prose bands are wider than the
   reading column and centre it with their own padding, so every heading
   and paragraph shares one left edge; nested wraps add no side padding. */
.nd-single-col .content-section:not(.section-facility_cards):not(.section-map):not(.section-navigation):not(.section-state_sample) {
  max-width: 1092px;
  box-sizing: border-box;
  padding-left: max(24px, calc((100% - 760px) / 2));
  padding-right: max(24px, calc((100% - 760px) / 2));
}
.nd-single-col .content-section .wrap,
.nd-single-col .content-section .nd-section .wrap {
  padding-left: 0;
  padding-right: 0;
  max-width: none;
}
.nd-single-col .content-section .nd-section { max-width: none; }
@media (max-width: 640px) {
  .nd-single-col .content-section:not(.section-facility_cards):not(.section-map):not(.section-navigation):not(.section-state_sample) {
    padding-left: 20px; padding-right: 20px;
  }
}

/* Mobile fixes (2026-09-24): hero content fits the screen, compact header,
   short breadcrumb, even heading edge inside tinted bands. */
@media (max-width: 720px) {
  .nd-hero-inner, .nd-hero .wrap { max-width: 100%; box-sizing: border-box; padding-left: 20px; padding-right: 20px; }
  /* Item 10: the primary call button's own nowrap/fit-content rule (below,
     under "Owner's page-template pass") replaces this generic wrap rule for
     that one button; every other hero button still wraps normally. */
  .header-inner { flex-wrap: nowrap; padding: 14px 20px; }
  .breadcrumbs li { display: none; }
  .breadcrumbs li:nth-last-child(2) { display: flex; }
  .breadcrumbs li:nth-last-child(2)::before { content: "\2039"; }
  .nd-single-col .content-section .nd-section,
  .nd-single-col .content-section .nd-section .wrap { padding-left: 0; padding-right: 0; margin-left: 0; margin-right: 0; }
}

/* One mobile call bar: keep the orange nd2 bar, hide the base dark one. */
.mobile-call { display: none !important; }

/* ============================================================
   Owner's page-template pass (2026-09-24)
   ============================================================ */

/* Items 1/2/6/7: every plain link grid this pass turns into a pill row --
   the state page's "<State> cities with ..." grid, its "Guides to ..."/
   "other services" groups, and the home page's "Find care by location"/
   "Helpful guides" grids -- reuses the SAME pill look the city page's own
   "More cities in <state>" grid already has (`.section-state_sample
   .link-grid-card`), scoped by each section's own class instead of
   touching the shared macro markup (which a couple of existing tests
   assert exact classes on for THAT one block). */
.section-eligible_cities .link-grid,
.section-geographic_coverage .link-grid,
.section-supporting_articles .link-grid,
.section-locations-group .chip-grid,
.section-popular-cities .chip-grid,
.section-locations-intro .chip-grid {
  display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px;
}
.section-eligible_cities .link-grid-card,
.section-geographic_coverage .link-grid-card,
.section-supporting_articles .link-grid-card {
  display: inline-block; text-decoration: none; padding: 7px 14px; border-radius: 999px;
  background: var(--surface); color: var(--text-on-surface);
  border: 1px solid var(--border-on-surface); font-weight: 500; font-size: 13px;
}
.section-eligible_cities .link-grid-card:hover,
.section-geographic_coverage .link-grid-card:hover,
.section-supporting_articles .link-grid-card:hover { border-color: var(--accent); color: var(--accent-ink-on-surface); }

/* Item 7 (state page): "Guides to ..." and "other service hubs" groups
   render as pill rows too, each under its own h3 sub-heading. */
.section-related_guides .related-links-group ul {
  list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px;
}
.section-related_guides .related-links-group li { display: contents; }
.section-related_guides .related-links-group a {
  display: inline-block; text-decoration: none; padding: 7px 14px; border-radius: 999px;
  background: var(--surface); color: var(--text-on-surface);
  border: 1px solid var(--border-on-surface); font-weight: 500; font-size: 13px;
}
.section-related_guides .related-links-group a:hover { border-color: var(--accent); color: var(--accent-ink-on-surface); }

/* Items 5/8/14: state-page in-body image, popular-cities/locations pill
   rows, and the "/guides/" card grid all sit in the same calm single
   column as a city page. */
.section-locations-intro,
.section-locations-group,
.section-guides-intro,
.section-guides-list,
.section-popular-cities {
  padding: 40px 0; border-top: 1px solid var(--border);
}
.section-locations-intro:first-child,
.section-guides-intro:first-child { border-top: 0; padding-top: 0; }
.sr-only-heading {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.nd-guide-card {
  text-decoration: none; color: inherit; display: block;
}
.nd-guide-card h3 { color: var(--text); }
.nd-guide-card p { color: var(--text-muted-on-surface); }
.nd-guide-card:hover { border-color: var(--accent); }

/* Items 9/12: compact inline call buttons above in-body images/sections. */
.nd-inline-call { display: inline-flex; margin: 18px 0; }

/* Item 4 (home): a single-column home page reuses the exact same reading-
   column/section-band treatment as a city page. */
.section-popular-cities h2, .section-locations-intro h2, .section-guides-intro h2 { max-width: none; }

/* Item 10: the hero call button must never wrap or shrink, even alongside
   a longer H1/trust-badge row on a narrow phone -- the badges wrap onto
   their own line instead (already flex-wrap: wrap). A previous mobile rule
   forced `white-space: normal` on every hero button, which is what let the
   phone number wrap and squash the pill on a long-H1 page (e.g. the
   Adelanto rehab page); this now excludes the primary call button from
   that rule and gives it an explicit fit-content floor. */
.nd-hero .nd-btn-lg.call-now {
  white-space: nowrap; min-width: -moz-fit-content; min-width: fit-content;
  flex: none; align-self: flex-start;
}
@media (max-width: 720px) {
  .nd-hero .nd-btn:not(.nd-btn-lg.call-now), .nd-hero .call-now:not(.nd-btn-lg) {
    max-width: 100%; box-sizing: border-box; white-space: normal;
  }
  .nd-hero .nd-btn-lg.call-now {
    max-width: 100%; box-sizing: border-box; white-space: nowrap;
    min-width: -moz-fit-content; min-width: fit-content;
  }
}

/* State pages: guides and services links as pills. */
.section-related_guides ul { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.section-related_guides li a {
  display: inline-block; padding: 9px 16px; border-radius: 999px; text-decoration: none; font-size: 14px;
  border: 1px solid var(--border-on-surface, var(--border)); background: var(--surface, #fff); color: var(--text);
}
.section-related_guides li a:hover { border-color: var(--accent); color: var(--accent-dark, var(--accent)); }
.section-related_guides h3 { font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); margin: 18px 0 0; }

/* ============================================================
   Owner's fix pass (2026-09-24), item 1: header never overlaps the logo
   ============================================================
   The sealed bradcity/quiet-editorial header goes `flex-wrap: nowrap`
   at >=901px with NO extra breathing room -- fine with short nav labels,
   but this directory's nav previously carried full page titles ("Alcohol
   Rehab Centers", "Find Care by Location") that, combined with the call
   button, ran wider than the space left after the logo and either
   clipped the brand text (`.brand`'s own `text-overflow: ellipsis`) or
   forced the row to overflow. render.py's nav_links now supply short
   labels ("Detox"/"Rehab"/"Locations"/"Guides"); these rules make the
   row itself layout cleanly with them: brand/nav/call sit in one clean
   flex row (logo left, nav+call right) at 901-1440px+, and the hamburger
   menu -- previously only below 720px -- now takes over below 901px, so
   the row is never asked to squeeze a full nav in at all in that gap. */
@media (min-width: 901px) {
  .header-inner { justify-content: space-between; gap: 24px; }
  .brand { max-width: 34vw; margin-right: 0; }
  .site-nav { gap: 18px; flex: none; }
  .site-nav a { font-size: 13px; white-space: nowrap; }
  .call-btn { flex: none; }
}

/* Extend the mobile hamburger menu up to ~900px (was 720px): between
   720-900px the sealed header had no toggle at all and simply wrapped the
   full nav row onto extra lines right under the logo. */
@media (max-width: 900px) {
  .site-nav, .call-btn { display: none; }
  .nav-toggle { display: block; }
}
@media (min-width: 901px) {
  .nav-toggle { display: none; }
}

.nd-hero-inner .nd-btn-lg.call-now { margin-top: 4px; }

/* Footer: copyright / 911 line as a full-width bar at the very bottom. */
.site-footer .footer-inner { display: grid; grid-template-columns: 1fr auto; column-gap: 40px; row-gap: 8px; align-items: start; }
.site-footer .footer-inner > div { display: contents; }
.site-footer .footer-brand { grid-column: 1; }
.site-footer .footer-inner > div > p:nth-of-type(2) { grid-column: 1; font-size: 12px; color: var(--text-muted); }
.site-footer .footer-inner > div > .footer-line:empty { display: none; }
.site-footer .footer-tel { grid-column: 1; }
.site-footer .footer-nav { grid-column: 2; grid-row: 1 / span 3; }
.site-footer .footer-inner > div > p:last-of-type {
  grid-column: 1 / -1; order: 99; margin-top: 20px; padding-top: 16px;
  border-top: 1px solid var(--border-on-ink, rgba(255,255,255,.15)); font-size: 13px; color: var(--text-muted);
}
@media (max-width: 720px) {
  .site-footer .footer-inner { grid-template-columns: 1fr; }
  .site-footer .footer-nav { grid-column: 1; grid-row: auto; }
}

/* National Directory -- premium visual components (design add-on).
   ADDITIVE ONLY: loads after quiet-editorial's own style.css (fonts.css +
   Brad City style.css + national style.css, see that file's header
   comment) in the same served stylesheet. Every rule here targets a new
   `.nd-*` class from national_directory/_design.html's macros, so nothing
   in the existing cascade is touched or overridden. Colours are exclusively
   the CSS custom properties _base.html's :root emits from
   bradcity_skins.resolve_palette (--base/--surface/--ink/--accent/--text/
   ...) plus Fraunces/Inter from the sealed fonts.css -- no new fonts, no
   external assets, no JS. Icons are inline SVG (see icons/_icons.html),
   stroke="currentColor", so `color` alone recolours every glyph. */

/* ---- shared icon + button primitives ---- */
.nd-icon { display: block; flex: none; }

.nd-btn {
  display: inline-flex; align-items: center; gap: 10px; text-decoration: none;
  font-weight: 600; font-size: 15px; padding: 14px 24px; border-radius: 999px;
  border: 1.5px solid transparent; line-height: 1.2; white-space: normal;
  transition: background-color 0.15s, border-color 0.15s, color 0.15s, transform 0.1s;
}
.nd-btn .nd-icon { color: inherit; }
.nd-btn:active { transform: translateY(1px); }
.nd-btn-sub { display: block; width: 100%; font-weight: 500; font-size: 12px; opacity: 0.8; margin-top: 2px; }
.nd-btn-lg { padding: 17px 28px; font-size: 16px; }

/* Owner's layout fix (items 1 + 5): every primary CTA (hero call button,
   the "Talk to us" card, the CTA band, the gradient card) uses the skin's
   dominant accent colour, not the plain ink treatment every ghost/secondary
   button already reads as muted next to -- a call button is the single most
   important action on the page and needs to look like it. */
.nd-btn-primary { background: var(--accent); color: var(--text-on-accent); }
.nd-btn-primary:hover { background: var(--accent-dark); color: var(--text-on-accent-dark); }

/* The hero's own call button gets extra visual weight on top of the shared
   accent treatment above: a stronger shadow so it reads clearly against a
   busy photo, and an outline colour with enough contrast against both the
   photo overlay and a plain fallback ground. */
.nd-hero .call-now.nd-btn-lg {
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.32);
}
.nd-hero .call-now.nd-btn-lg:focus-visible {
  outline: 3px solid var(--base);
  outline-offset: 3px;
}

.nd-btn-secondary { background: var(--accent); color: var(--text-on-accent); }
.nd-btn-secondary:hover { background: var(--accent-dark); color: var(--text-on-accent-dark); }

.nd-btn-ghost { background: transparent; color: var(--text); border-color: var(--border); }
.nd-btn-ghost:hover { border-color: var(--accent-ink); color: var(--accent-ink); }

.nd-btn:focus-visible { outline: 3px solid var(--accent-ink); outline-offset: 3px; }

/* ---- 1. hero with photo ---- */
.nd-hero { position: relative; padding: 56px 0 64px; overflow: hidden; }
.nd-hero-inner { position: relative; z-index: 2; max-width: 680px; }
.nd-hero-eyebrow { color: var(--text-muted); }
.nd-hero-h1 { margin: 4px 0 16px; }
.nd-hero-lede { margin-bottom: 26px; }

.nd-hero-photo { color: var(--text-on-ink); min-height: 420px; display: flex; align-items: flex-end; }
.nd-hero-photo .nd-hero-inner { padding-bottom: 8px; }
.nd-hero-media { position: absolute; inset: 0; z-index: 0; }
.nd-hero-media img { width: 100%; height: 100%; object-fit: cover; }
/* Item 7 hero polish: a stronger, more bottom-weighted wash. Text (the
   headline, the italic accent, the CTA/disclosure block near the bottom
   of the hero) sits mostly in the lower half of a photo hero, so the
   gradient now stays lighter near the top (where a photo's own sky/
   background usually is) and ramps up more steeply, and darker overall,
   toward the bottom -- more contrast exactly where the text lives, on a
   busy photo, than the previous even 20/45/68% ramp gave it. */
.nd-hero-scrim {
  position: absolute; inset: 0;
  /* Item 10: a bottom-weighted vertical wash (unchanged in spirit) PLUS a
     left-weighted radial wash layered on top, centred behind the text
     column (nd-hero-inner sits left-aligned in the wrap) so the darkest,
     ~75-80%-opacity ink sits directly behind the headline/lede regardless
     of how bright that patch of photo is, fading out toward the right and
     top where there is no text to protect. */
  background:
    radial-gradient(ellipse 70% 90% at 15% 100%,
      color-mix(in srgb, var(--ink) 78%, transparent) 0%,
      color-mix(in srgb, var(--ink) 40%, transparent) 55%,
      transparent 100%),
    linear-gradient(180deg,
      color-mix(in srgb, var(--ink) 12%, transparent) 0%,
      color-mix(in srgb, var(--ink) 30%, transparent) 35%,
      color-mix(in srgb, var(--ink) 62%, transparent) 65%,
      color-mix(in srgb, var(--ink) 82%, transparent) 100%);
}
.nd-hero-photo .nd-hero-eyebrow { color: var(--text-muted-on-ink); }
/* A solid, light accent colour for the photo hero's italic accent span
   (the plain --accent token is tuned for legibility on the flat
   --surface/--base fallback ground, not against a busy photo behind a
   dark scrim) -- previously targeted ".nd-hero-h1 em", a class the h1
   markup never actually carries (nd_hero() renders a bare `<h1>`), so this
   rule never matched anything and the accent span kept whatever
   low-contrast colour it inherited. Fixed to the real "h1 em" selector and
   given the site's own solid cream/base tone (not a translucent mix)
   so it stays legible over any photo, busy or not. The line-art fallback
   hero keeps the original --accent, unchanged. */
.nd-hero-photo h1 em { color: var(--base); font-style: italic; }
.nd-hero-photo .nd-hero-lede { color: var(--text-muted-on-ink); }

/* Let long city and facility headings wrap fully. The photo hero grows with
   its content, so clipping to two lines hides the locality on real pages. */
.nd-hero-photo h1 {
  font-size: clamp(2rem, 5.5vw, 4rem);
  line-height: 1.08;
  max-width: 20ch;
  overflow-wrap: break-word;
}

/* Fallback: no photo supplied -- a quiet repeating line-art ground instead
   of a bare colour field, kept faint so text stays the focal point. */
.nd-hero-fallback { background: var(--surface); color: var(--text-on-surface); }
.nd-hero-fallback::before {
  content: ""; position: absolute; inset: 0; z-index: 0; opacity: 0.5;
  background-image:
    radial-gradient(circle at 6px 6px, var(--border-on-surface) 1.4px, transparent 1.6px);
  background-size: 28px 28px;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 55%, transparent);
  mask-image: linear-gradient(180deg, transparent, #000 55%, transparent);
}
.nd-hero-fallback .nd-hero-lede { color: var(--text-muted-on-surface); }

.nd-reassurance {
  list-style: none; display: flex; flex-wrap: wrap; gap: 22px; margin: 24px 0 0; padding: 0;
}
.nd-reassurance li { display: flex; align-items: center; gap: 8px; font-weight: 500; font-size: 13px; }
.nd-hero-photo .nd-reassurance { color: var(--text-muted-on-ink); }
.nd-hero-fallback .nd-reassurance { color: var(--text-muted-on-surface); }

@media (max-width: 640px) {
  .nd-hero { padding: 40px 0 44px; }
  .nd-hero-photo { min-height: 340px; }
}

/* ---- 2. process steps ---- */
.nd-process-section { padding-bottom: 8px; }
.nd-process {
  list-style: none; margin: 32px 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; counter-reset: nd-step;
}
.nd-process-step { position: relative; padding: 0 26px 0 0; text-align: left; }
.nd-process-step::after {
  content: ""; position: absolute; top: 26px; left: calc(50% + 26px); right: -26px; height: 1px;
  background: var(--border);
}
.nd-process-step:last-child::after { display: none; }
.nd-process-node { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; }
.nd-process-icon {
  display: flex; align-items: center; justify-content: center; width: 52px; height: 52px;
  border-radius: 999px; border: 1.5px solid var(--border); background: var(--base); color: var(--accent-ink);
}
.nd-process-num {
  position: absolute; top: -6px; right: -6px; width: 20px; height: 20px; border-radius: 999px;
  background: var(--accent-ink); color: var(--base);
  font-family: Inter, sans-serif; font-weight: 700; font-size: 10px; display: flex; align-items: center; justify-content: center;
}
.nd-process-body { display: block; margin-top: 14px; }
.nd-process-body strong { display: block; font-weight: 600; font-size: 15px; margin-bottom: 4px; }
.nd-process-body span { display: block; font-size: 13.5px; line-height: 1.55; color: var(--text-muted); max-width: 24ch; }

@media (max-width: 780px) {
  .nd-process { grid-template-columns: 1fr; gap: 22px; }
  .nd-process-step { display: grid; grid-template-columns: 52px 1fr; gap: 16px; padding: 0; }
  .nd-process-step::after { top: 52px; bottom: -22px; left: 26px; right: auto; width: 1px; height: auto; }
  .nd-process-step:last-child::after { display: none; }
  .nd-process-body { margin-top: 2px; }
  .nd-process-body span { max-width: none; }
}

/* ---- 3. icon feature grid ---- */
.nd-feature-grid { display: grid; gap: 16px; margin-top: 22px; }
.nd-feature-grid-3 { grid-template-columns: repeat(3, 1fr); }
.nd-feature-grid-4 { grid-template-columns: repeat(4, 1fr); }
.nd-feature-card {
  background: var(--surface); color: var(--text-on-surface);
  border: 1px solid var(--border-on-surface); border-radius: 18px; padding: 22px;
}
.nd-feature-icon {
  display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px;
  border-radius: 12px; background: var(--base); color: var(--accent-ink-on-surface); margin-bottom: 14px;
}
.nd-feature-card h3 { font-family: Inter, sans-serif; font-weight: 600; font-size: 15px; margin: 0 0 6px; }
.nd-feature-card p { margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--text-muted-on-surface); }

@media (max-width: 900px) { .nd-feature-grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .nd-feature-grid-3, .nd-feature-grid-4 { grid-template-columns: 1fr; } }

/* ---- 4. callout / pull-quote ---- */
.nd-callout {
  display: flex; gap: 16px; align-items: flex-start; margin: 32px 0;
  padding: 22px 26px; border-left: 3px solid var(--accent); border-radius: 4px 16px 16px 4px;
  background: var(--surface); color: var(--text-on-surface);
}
.nd-callout-icon { color: var(--accent-ink-on-surface); flex: none; margin-top: 2px; }
.nd-callout-text {
  margin: 0; font-family: Fraunces, Georgia, serif; font-weight: 400; font-size: 20px; line-height: 1.45;
  font-variation-settings: "opsz" 20;
}
.nd-callout-cite { margin: 8px 0 0; font-size: 13px; color: var(--text-muted-on-surface); }
.nd-callout-ink { background: var(--ink); color: var(--text-on-ink); border-left-color: var(--accent); }
.nd-callout-ink .nd-callout-icon { color: var(--accent); }
.nd-callout-ink .nd-callout-cite { color: var(--text-muted-on-ink); }

/* ---- 5. emergency panel ---- */
.nd-emergency {
  background: var(--surface); color: var(--text-on-surface);
  border: 1.5px solid var(--accent-dark); border-radius: 18px; margin: 32px 0; padding: 28px 30px;
}
.nd-emergency-inner { display: block; }
/* Owner's page-template pass (item 11): icon + heading text on one line. */
.nd-emergency-heading {
  display: flex; align-items: center; gap: 14px;
  font-size: clamp(20px, 2vw, 24px); margin: 0 0 14px;
}
.nd-emergency-icon {
  flex: none; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px;
  border-radius: 999px; background: var(--accent-dark); color: var(--text-on-accent-dark);
}
.nd-emergency-body p { margin: 0 0 12px; line-height: 1.6; }
.nd-emergency-signs { list-style: none; margin: 4px 0 16px; padding: 0; display: grid; gap: 8px; }
.nd-emergency-signs li { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--text-muted-on-surface); }
.nd-emergency-signs .nd-icon { color: var(--accent-dark); }
.nd-emergency-911 {
  font-weight: 700; font-size: 15px; margin: 0 0 16px; padding: 10px 14px;
  background: var(--base); border-radius: 10px; display: inline-block;
}

@media (max-width: 640px) {
  .nd-emergency { padding: 22px 20px; }
  .nd-emergency-heading { align-items: flex-start; }
}

/* ---- 6. cta band (two column, decorative line art) ---- */
.nd-cta-band { background: var(--ink); color: var(--text-on-ink); padding: 48px 0; margin: 32px 0 0; overflow: hidden; }
.nd-cta-band-inner { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 32px; }
.nd-cta-band-copy h2 { margin: 0 0 8px; max-width: none; }
.nd-cta-band-copy p { color: var(--text-muted-on-ink); margin: 0 0 20px; max-width: 46ch; }
.nd-cta-band-art { color: var(--text-muted-on-ink); opacity: 0.35; }
.nd-cta-band-art .nd-icon { width: 96px; height: 96px; }
.nd-trust-row { list-style: none; display: flex; flex-wrap: wrap; gap: 18px; margin: 16px 0 0; padding: 0; }
.nd-trust-row li { display: flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 500; color: var(--text-muted-on-ink); }

@media (max-width: 720px) {
  .nd-cta-band-inner { grid-template-columns: 1fr; text-align: left; }
  .nd-cta-band-art { display: none; }
}

/* ---- 7. stat strip ---- */
.nd-stat-strip { border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: 30px 0; margin: 32px 0; }
/* Owner's layout fix (item 3): flex + `justify-content: center` instead of
   a fixed 3-column grid -- the column count now always matches the ACTUAL
   number of stats (2 -> 2 centered columns, 3 -> 3, ...) instead of a 2-item
   page leaving an empty-looking third column. */
.nd-stat-strip-inner { display: flex; flex-wrap: wrap; justify-content: center; gap: 20px 40px; text-align: center; }
.nd-stat { display: flex; flex-direction: column; gap: 4px; flex: 0 1 180px; }
.nd-stat-value {
  font-family: Fraunces, Georgia, serif; font-weight: 400; font-size: clamp(28px, 3.6vw, 40px);
  color: var(--accent-ink); font-variation-settings: "opsz" 40; line-height: 1;
}
.nd-stat-label { font-size: 13px; color: var(--text-muted); }

@media (max-width: 640px) { .nd-stat-strip-inner { flex-direction: column; align-items: center; gap: 18px; } .nd-stat { flex-basis: auto; } }

/* ---- 8. dividers + illustrations ---- */
.nd-divider {
  display: flex; align-items: center; gap: 14px; margin: 40px 0; color: var(--accent-ink);
}
.nd-divider::before, .nd-divider::after { content: ""; flex: 1; height: 1px; background: var(--border); }
.nd-illustration { display: inline-flex; color: var(--border-on-surface); opacity: 0.7; }

/* ---- 9. buttons: covered above (shared primitives) ---- */

/* ---- 10. FAQ accordion (icon-lead heading + plus/minus toggle) ---- */
.nd-faq-list { display: grid; gap: 10px; margin: 22px 0 0; }
.nd-faq {
  background: var(--surface); color: var(--text-on-surface);
  border: 1px solid var(--border-on-surface); border-radius: 12px; padding: 16px 20px;
}
.nd-faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  font-weight: 600; font-size: 15px; cursor: pointer; list-style: none;
}
.nd-faq summary::-webkit-details-marker { display: none; }
.nd-faq-toggle { flex: none; color: var(--accent-ink-on-surface); }
.nd-faq-toggle .nd-faq-minus { display: none; }
.nd-faq[open] .nd-faq-toggle .nd-faq-plus { display: none; }
.nd-faq[open] .nd-faq-toggle .nd-faq-minus { display: block; }
.nd-faq .prose { margin-top: 10px; color: var(--text-muted-on-surface); }

/* Progressive enhancement for the SITE'S EXISTING faq markup
   (_components.html's plain <details><summary>): a plus/minus glyph drawn
   in pure CSS (two crossed bars in a fixed-size box on the right), so
   pages that have not yet adopted the nd_faq() macro still get the icon
   once this stylesheet loads -- no markup change required. */
.faq-block summary, .faq-list .faq summary {
  list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  cursor: pointer; position: relative; padding-right: 26px;
}
.faq-block summary::-webkit-details-marker, .faq-list .faq summary::-webkit-details-marker { display: none; }
.faq-block summary::marker, .faq-list .faq summary::marker { content: ""; }
.faq-block summary::before, .faq-block summary::after,
.faq-list .faq summary::before, .faq-list .faq summary::after {
  content: ""; position: absolute; right: 0; top: 50%; width: 13px; height: 1.5px;
  background: var(--accent-ink-on-surface); transition: transform 0.15s, opacity 0.15s;
}
.faq-block summary::before, .faq-list .faq summary::before { transform: translateY(-50%); }
.faq-block summary::after, .faq-list .faq summary::after { transform: translateY(-50%) rotate(90deg); }
.faq-block details[open] summary::after, .faq-list .faq[open] summary::after { opacity: 0; transform: translateY(-50%) rotate(0deg); }

/* ---- print: keep the emergency panel, drop decorative art ---- */
@media print {
  .nd-hero-media, .nd-cta-band-art, .nd-illustration, .nd-divider { display: none !important; }
}

/* National Directory -- design pass 2 ("more design fancies"). ADDITIVE
   ONLY, a sibling to design.css: loads after fonts.css + Brad City
   style.css + national style.css + design.css in the concatenated skin
   stylesheet. Every rule targets a new `.nd2-*` class from
   national_directory/_design_extra.html's macros, so nothing in the
   existing cascade (including design.css's `.nd-*` rules) is touched.
   Colours are exclusively the CSS custom properties _base.html's :root
   emits (--base/--surface/--ink/--accent/--accent-dark/--accent-ink/
   --text/--border/... -- see bradcity_skins.resolve_palette) plus
   Fraunces/Inter from the sealed fonts.css. No new fonts, no external
   assets, no required JS. */

/* ============================================================
   1. Tinted panels with depth (blobs + grain + wave dividers)
   ============================================================ */
/* Owner's layout fix (item 3): the panel previously had no internal
   padding at all -- `.nd2-panel-content` carried no padding rule, so text
   sat flush against the panel's own edges once the sidebar layout that
   used to bound it was removed. Generous padding, rounded corners
   consistent with the rest of the skin (`.card`/`.facility-card` use the
   same 16-18px radius), and a predictable vertical rhythm against
   neighbouring sections. */
.nd2-panel { position: relative; overflow: hidden; border-radius: 24px; margin: 40px 0; }
.nd2-panel-content { position: relative; z-index: 2; padding: 56px clamp(24px, 5vw, 56px); }
.nd2-panel-cream { background: var(--base); color: var(--text); }
.nd2-panel-sage { background: var(--surface); color: var(--text-on-surface); }
.nd2-panel-ink { background: var(--ink); color: var(--text-on-ink); }
/* Correct, readable text/link/icon colours on the ink ground -- headings
   and body copy already inherit `color` from `.nd2-panel-ink`, but the
   process-step cards inside it (`.nd2-expect-card`/`.nd-process-icon`)
   render as light `--surface` cards regardless of panel tint, so their own
   icon colour needs to switch to the ink-safe accent explicitly. */
.nd2-panel-ink a { color: var(--text-on-ink); }
.nd2-panel-ink .nd2-expect-card, .nd2-panel-ink .nd-process-icon {
  background: color-mix(in srgb, var(--text-on-ink) 10%, transparent);
  border-color: color-mix(in srgb, var(--text-on-ink) 22%, transparent);
  color: var(--text-on-ink);
}
.nd2-panel-ink .nd2-expect-card h3, .nd2-panel-ink .nd-process-body strong { color: var(--text-on-ink); }
.nd2-panel-ink .nd2-expect-card p, .nd2-panel-ink .nd-process-body span { color: var(--text-muted-on-ink); }
.nd2-panel-ink .nd2-expect-icon, .nd2-panel-ink .nd-process-icon { color: var(--accent); }
.nd2-panel-ink .nd2-expect-h, .nd2-panel-ink h2 { color: var(--text-on-ink); }

@media (max-width: 640px) {
  .nd2-panel { border-radius: 18px; margin: 28px 0; }
  .nd2-panel-content { padding: 24px; }
}

.nd2-panel-blobs { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.nd2-blob { position: absolute; opacity: 0.08; }
.nd2-panel-ink .nd2-blob { opacity: 0.14; }
.nd2-blob-tr { top: -8%; right: -6%; color: var(--accent); }
.nd2-blob-bl { bottom: -12%; left: -8%; color: var(--accent-dark); transform: rotate(35deg); }

/* Cheap CSS-only "grain": three offset radial-gradient dot fields at low
   opacity rather than an SVG turbulence filter or a raster texture --
   stays crisp at any zoom and costs nothing to decode. */
.nd2-panel-grain {
  position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0.5;
  background-image:
    radial-gradient(circle at 3px 3px, currentColor 0.6px, transparent 0.8px),
    radial-gradient(circle at 11px 7px, currentColor 0.5px, transparent 0.7px),
    radial-gradient(circle at 7px 15px, currentColor 0.5px, transparent 0.7px);
  background-size: 18px 18px, 22px 22px, 26px 26px;
  color: var(--border-on-surface);
  mix-blend-mode: multiply;
}
.nd2-panel-ink .nd2-panel-grain { color: var(--text-muted-on-ink); mix-blend-mode: screen; opacity: 0.08; }

/* A gentle accent crest, not a solid colour block: low opacity so it reads
   as a soft curved seam between panels rather than a heavy band. Colour
   comes from --accent (a calm, on-brand tint) at 10% opacity on light
   panels; the ink panel dims it further so it never fights the darker
   ground. */
.nd2-panel-wave { position: absolute; left: 0; right: 0; height: 40px; z-index: 1; line-height: 0; color: var(--accent); opacity: 0.16; }
.nd2-panel-wave-top { top: -1px; }
.nd2-panel-wave-bottom { bottom: -1px; }
.nd2-panel-ink .nd2-panel-wave { color: var(--text-muted-on-ink); opacity: 0.12; }
.nd2-wave { width: 100%; height: 40px; display: block; }
.nd2-wave-flip { transform: scaleY(-1); }

@media (max-width: 640px) {
  .nd2-blob { opacity: 0.05; }
  .nd2-panel-ink .nd2-blob { opacity: 0.1; }
}

/* ============================================================
   2. Entrance reveal (CSS-only, one-shot)
   ============================================================
   Default state: fully visible, no motion. A `view()` scroll-driven timeline
   previously ran this continuously as the whole page scrolled -- cheap in
   isolation, but with dozens of `.nd2-reveal`-wrapped
   sections on one long page it kept re-triggering style/layout work on
   every scroll frame, which is what made Chrome hang while screenshotting
   this page. Replaced with a single, one-shot fade-in that plays once on
   load and never re-runs on scroll. */
.nd2-reveal { opacity: 1; transform: none; }

@media (prefers-reduced-motion: no-preference) {
  .nd2-reveal {
    opacity: 0; transform: translateY(16px);
    animation: nd2-reveal-in 0.5s ease-out both;
  }
  .nd2-reveal-1 { animation-delay: 0.05s; }
  .nd2-reveal-2 { animation-delay: 0.1s; }
  .nd2-reveal-3 { animation-delay: 0.15s; }
}
@keyframes nd2-reveal-in { to { opacity: 1; transform: none; } }

/* ============================================================
   3. Landscape illustration + hand-drawn underline
   ============================================================ */
.nd2-landscape { color: var(--border-on-surface); opacity: 0.6; line-height: 0; }
.nd2-landscape svg { width: 100%; height: auto; display: block; }
.nd-hero-photo .nd2-landscape, .nd2-panel-ink .nd2-landscape { color: var(--text-muted-on-ink); opacity: 0.22; }

.nd2-underline { position: relative; display: inline-block; }
.nd2-scribble-mark {
  display: block; width: 100%; height: 0.28em; margin-top: 0.02em;
  color: var(--accent); overflow: visible;
}
h1 .nd2-underline .nd2-scribble-mark, h2 .nd2-underline .nd2-scribble-mark { color: var(--accent-ink); }

/* ============================================================
   4. Trust badge row
   ============================================================ */
.nd2-trust-badges {
  list-style: none; display: flex; flex-wrap: wrap; gap: 10px; margin: 20px 0 0; padding: 0;
}
.nd2-trust-badge {
  display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px 8px 12px;
  border-radius: 999px; background: var(--surface); color: var(--text-on-surface);
  border: 1px solid var(--border-on-surface); font-weight: 600; font-size: 12.5px; white-space: nowrap;
}
.nd2-trust-badge .nd-icon { color: var(--accent-ink-on-surface); }
.nd-hero-photo .nd2-trust-badges .nd2-trust-badge,
.nd2-panel-ink .nd2-trust-badges .nd2-trust-badge {
  background: color-mix(in srgb, var(--text-on-ink) 12%, transparent);
  color: var(--text-on-ink); border-color: color-mix(in srgb, var(--text-on-ink) 24%, transparent);
}
.nd-hero-photo .nd2-trust-badges .nd-icon, .nd2-panel-ink .nd2-trust-badges .nd-icon { color: var(--accent); }

@media (max-width: 480px) { .nd2-trust-badges { gap: 8px; } .nd2-trust-badge { font-size: 12px; padding: 7px 13px 7px 10px; } }

/* ============================================================
   5. Sticky mobile call bar upgrade + floating desktop call pill
   ============================================================ */
.nd2-mobile-call { display: none; }
@media (max-width: 720px) {
  .nd2-mobile-call {
    display: flex; align-items: center; justify-content: center; gap: 10px;
    position: sticky; bottom: 0; left: 0; right: 0; z-index: 30;
    background: var(--ink); color: var(--text-on-ink); text-decoration: none;
    font-weight: 600; font-size: 15px; padding: 15px 18px;
    box-shadow: 0 -6px 20px rgba(0,0,0,0.12);
  }
  .nd2-mobile-call .nd-icon { color: var(--accent); }
  .nd2-mobile-call:active { background: var(--accent-dark); }
}

/* Owner's layout fix (item 2): the desktop floating call pill is removed
   entirely -- the hero's own call button (now visually dominant, see
   design.css items 1/5) is the desktop call affordance; the sticky bar
   above remains mobile-only. `nd2_floating_call()` (_design_extra.html) is
   no longer called from skins/quiet-editorial/page.html, but this rule
   stays as a defence-in-depth "never render" in case anything else still
   calls the macro. */
.nd2-floating-call-rail { display: none !important; }
@media print { .nd2-mobile-call, .nd2-floating-call-rail { display: none !important; } }

/* ============================================================
   6. Facility card upgrade
   ============================================================ */
.nd2-facility-card {
  display: flex; flex-direction: column; position: relative; overflow: hidden;
  text-decoration: none; background: var(--surface); color: var(--text-on-surface);
  border: 1px solid var(--border-on-surface); border-radius: 18px;
  transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
}
.nd2-facility-card::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 5px; z-index: 1;
}
.nd2-facility-card--detox::before { background: var(--accent-ink); }
.nd2-facility-card--residential::before { background: var(--accent); }
.nd2-facility-card--outpatient::before { background: var(--accent-dark); }
.nd2-facility-card:hover {
  transform: translateY(-4px); border-color: var(--accent);
  box-shadow: 0 16px 32px rgba(0,0,0,0.1);
}
.nd2-facility-card-img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.nd2-facility-card-body { padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.nd2-facility-card-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.nd2-care-chip {
  display: inline-block; padding: 4px 11px; border-radius: 999px; font-weight: 600; font-size: 11px;
  letter-spacing: 0.03em; text-transform: uppercase; background: var(--base); color: var(--text);
}
.nd2-care-chip--detox { color: var(--accent-ink-on-surface); }
.nd2-care-chip--residential { color: var(--accent-dark); }
.nd2-care-chip--outpatient { color: var(--text-muted-on-surface); }
.nd2-distance-badge {
  display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; font-weight: 600;
  color: var(--text-muted-on-surface); flex: none;
}
.nd2-distance-badge svg { color: var(--accent-ink-on-surface); }
.nd2-facility-card-name { font-family: Inter, sans-serif; font-weight: 600; font-size: 16px; margin: 2px 0 0; }
.nd2-facility-card-sum { margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--text-muted-on-surface); flex: 1; }
.nd2-facility-card-cta { margin-top: 6px; align-self: flex-start; padding: 9px 16px; font-size: 13px; }

/* Care-level accent stripe applied directly to the EXISTING plain
   `.facility-card` article (_components.html's facility_grid macro) --
   reusing the same tokens/logic as `.nd2-facility-card`'s own stripe --
   rather than swapping the whole card over to the `nd2_facility_card`
   macro, which has no slot for the full address/status/services list this
   directory's QA and content requirements need on every listed facility.
   `data-care-level` is written by render.py's `_care_level()`. */
.facility-card { position: relative; overflow: hidden; }
.facility-card[data-care-level]::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; z-index: 1;
}
.facility-card[data-care-level="detox"]::before { background: var(--accent-ink); }
.facility-card[data-care-level="residential"]::before { background: var(--accent); }
.facility-card[data-care-level="outpatient"]::before { background: var(--accent-dark); }

/* ============================================================
   7. "What to expect on your first call" scroller
   ============================================================ */
.nd2-expect { padding: 48px 0 12px; }
/* Owner's layout fix (item 6): a CSS grid that fits the container width
   instead of a horizontally-scrolling row -- "How getting help works" (this
   component, when the page's variant picks it) must never show a
   scrollbar at any breakpoint. Cards wrap onto a second row on a narrower
   desktop/tablet width rather than overflowing sideways, and stack one per
   row on mobile via the existing max-width: 900px query below. */
.nd2-expect-row {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px; padding: 22px 0 8px; margin: 0; overflow: visible;
}
.nd2-expect-card {
  background: var(--surface); color: var(--text-on-surface);
  border: 1px solid var(--border-on-surface); border-radius: 18px; padding: 22px;
}
.nd2-expect-icon {
  display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px;
  border-radius: 12px; background: var(--base); color: var(--accent-ink-on-surface); margin-bottom: 12px;
}
.nd2-expect-card h3 { font-family: Inter, sans-serif; font-weight: 600; font-size: 15px; margin: 0 0 6px; }
.nd2-expect-card p { margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--text-muted-on-surface); }
.nd2-expect-dots { display: flex; gap: 6px; padding-top: 14px; }
.nd2-expect-dot { width: 6px; height: 6px; border-radius: 999px; background: var(--border); }
.nd2-expect-dot.is-active { background: var(--accent-ink); }

@media (max-width: 640px) { .nd2-expect-row { grid-template-columns: 1fr; } }

/* ============================================================
   8. Pull-quote typography + drop cap
   ============================================================ */
.nd2-pullquote { position: relative; margin: 40px 0; padding: 8px 8px 8px 64px; max-width: 62ch; }
.nd2-pullquote-mark { position: absolute; left: -6px; top: -14px; color: var(--accent); opacity: 0.35; }
.nd2-pullquote-text { margin: 0; }
.nd2-pullquote-text p {
  font-family: Fraunces, Georgia, serif; font-style: italic; font-weight: 400;
  font-size: clamp(22px, 3vw, 30px); line-height: 1.35; margin: 0;
  font-variation-settings: "opsz" 30;
}
.nd2-pullquote-cite { margin: 10px 0 0; font-size: 13px; font-style: normal; color: var(--text-muted); }
@media (max-width: 640px) { .nd2-pullquote { padding-left: 44px; } .nd2-pullquote-mark { width: 36px; height: 36px; left: -4px; top: -8px; } }

.nd2-dropcap > :first-child::first-letter {
  font-family: Fraunces, Georgia, serif; font-weight: 500; font-size: 3.6em; line-height: 0.85;
  float: left; padding: 0.04em 0.08em 0 0; color: var(--accent-ink);
  font-variation-settings: "opsz" 40;
}

/* Applied directly to an outline_block() <section> (via its extra_class
   param) rather than the caller-content nd2_dropcap() macro above: a
   section already contains its own <h2>, so the plain-macro's
   `:first-child::first-letter` would land on the heading, not the prose.
   Targeting the section's first <p> instead gets the same drop-cap effect
   without needing to split the section's own markup. */
.content-section.nd2-dropcap-section p:first-of-type::first-letter {
  font-family: Fraunces, Georgia, serif; font-weight: 500; font-size: 3.6em; line-height: 0.85;
  float: left; padding: 0.04em 0.08em 0 0; color: var(--accent-ink);
  font-variation-settings: "opsz" 40;
}

/* ============================================================
   Owner's layout fix: full-width "Talk to us" call card
   ============================================================
   Replaces the old sidebar-only cta_card/nd2_gradient_cta widget for city
   pages, which only ever looked "thin" because of the narrow sidebar
   column it sat in, not its own CSS. This is an intentionally bigger,
   standalone card: a real icon badge, a heading, one line of copy and a
   full call button, laid out full content width. */
/* Owner's layout fix (item 5): a tinted background + accent border make the
   card visually distinct from a plain content section, instead of reading
   as just another bordered box the same colour as everything else. */
.nd2-talk-card {
  display: flex; align-items: center; gap: 22px; flex-wrap: wrap;
  margin: 40px 0; padding: 32px clamp(20px, 4vw, 40px);
  background: color-mix(in srgb, var(--accent) 10%, var(--surface));
  color: var(--text-on-surface);
  border: 2px solid var(--accent); border-radius: 24px;
}
.nd2-talk-card-icon {
  flex: none; display: flex; align-items: center; justify-content: center;
  width: 56px; height: 56px; border-radius: 999px;
  background: var(--accent); color: var(--text-on-accent);
}
.nd2-talk-card-body { flex: 1 1 260px; min-width: 200px; }
.nd2-talk-card-body h3 { font-family: Fraunces, Georgia, serif; font-weight: 400; font-size: 22px; margin: 0 0 4px; }
.nd2-talk-card-body p { margin: 0; color: var(--text-muted-on-surface); font-size: 14.5px; }
.nd2-talk-card > .nd-btn { flex: none; margin-left: auto; }

@media (max-width: 640px) {
  .nd2-talk-card { padding: 24px; gap: 16px; }
  .nd2-talk-card > .nd-btn { margin-left: 0; width: 100%; justify-content: center; }
}

/* ============================================================
   9. Gradient-border CTA card + glassmorphism-lite panel
   ============================================================ */
.nd2-gradient-cta {
  border-radius: 20px; padding: 2px;
  background: linear-gradient(135deg, var(--accent), var(--accent-dark), var(--accent-ink));
}
.nd2-gradient-cta-inner {
  background: var(--base); color: var(--text); border-radius: 18px; padding: 26px 28px;
}
.nd2-gradient-cta-inner h3 { font-family: Fraunces, Georgia, serif; font-weight: 400; font-size: 22px; margin: 0 0 8px; }
.nd2-gradient-cta-inner p { color: var(--text-muted); margin: 0 0 18px; font-size: 14px; }

/* A CSS backdrop blur filter is expensive to keep repainting behind a
   panel that can sit over other content (a real cause of the janky/hung
   scrolling this page needed fixing) -- replaced with a solid translucent
   background so the panel still reads as "glass-lite" without asking the
   compositor to continuously blur everything behind it. */
.nd2-glass-panel {
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  color: var(--text-on-surface);
  border: 1px solid var(--border-on-surface); border-radius: 18px; padding: 24px;
}

/* ============================================================
   10. Number counter stat strip (typographic variant)
   ============================================================ */
.nd2-counters { border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: 34px 0; margin: 32px 0; }
/* Owner's layout fix (item 3): same fix as `.nd-stat-strip-inner` in
   design.css -- flex + centering instead of a fixed 3-column grid, so a
   2-stat page gets 2 centered columns, not an empty-looking third. */
.nd2-counters-inner { display: flex; flex-wrap: wrap; justify-content: center; gap: 24px; text-align: center; }
.nd2-counter { display: flex; flex-direction: column; align-items: center; gap: 6px; flex: 0 1 160px; }
.nd2-counter-tick { width: 28px; height: 2px; background: var(--accent-ink); border-radius: 2px; }
.nd2-counter-value {
  font-family: Fraunces, Georgia, serif; font-weight: 400; font-size: clamp(32px, 4.2vw, 46px);
  line-height: 1; color: var(--text); font-variation-settings: "opsz" 46;
}
.nd2-counter-label {
  font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
  font-variant: small-caps; color: var(--text-muted);
}
@media (max-width: 640px) { .nd2-counters-inner { flex-direction: column; align-items: center; gap: 20px; } .nd2-counter { flex-basis: auto; } }

/* ============================================================
   Print + reduced motion safety net
   ============================================================ */
@media print {
  .nd2-panel-blobs, .nd2-panel-grain, .nd2-panel-wave, .nd2-landscape,
  .nd2-scribble-mark, .nd2-pullquote-mark { display: none !important; }
}
@media (prefers-reduced-motion: reduce) {
  .nd2-reveal { animation: none !important; opacity: 1 !important; transform: none !important; }
  .nd2-facility-card, .nd2-floating-call { transition: none !important; }
}

/* ============================================================
   Owner's fix pass (2026-09-24), item 5: hero trust badges never crowd
   the call button -- more generous gap/padding, and clear separation
   from the call button whichever side of it they render on.
   ============================================================ */
.nd2-trust-badges { gap: 12px; margin: 18px 0 20px; }
.nd2-trust-badge { padding: 9px 17px 9px 13px; }

/* ============================================================
   Owner's fix pass (2026-09-24), item 2: "How getting help works"
   spacing, on every page that has it (home and city).
   ============================================================
   `.nd-process-section`/`.nd2-expect` previously carried almost no
   padding of their own (design.css/this file's earlier rules), which
   looked fine ONLY when a page happened to wrap the section in
   `nd2_panel` (whose own `.nd2-panel-content` padding did the real work)
   -- the home page renders `nd_process`/`nd2_call_expect` un-wrapped, so
   it had almost no breathing room at all. Both now carry generous
   padding of their own; when nested inside a panel, the panel's own
   padding is enough and this section's own is removed to avoid doubling
   up. */
.nd-process-section { padding: 48px 0 56px; }
.nd2-expect { padding: 48px 0 56px; }
.nd2-panel-content .nd-process-section,
.nd2-panel-content .nd2-expect { padding: 0; }
.nd-process { margin-top: 40px; }
.nd2-expect .wrap + .nd2-expect-row,
.nd2-expect-row { margin-top: 8px; }

/* Facility hero, map first: the page's street map behind a card with the
   name, address, facts tiles and the call / directions actions. */
.nd-fhero { position: relative; min-height: 470px; display: flex; align-items: center; overflow: hidden; background: #E6EDEA; }
.nd-fhero-map { position: absolute; inset: 0; }
.nd-fhero-map img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; display: block; }
.nd-fhero-wrap { position: relative; width: 100%; padding-top: 48px; padding-bottom: 48px; }
.nd-fhero-card { max-width: 520px; box-sizing: border-box; background: var(--base); color: var(--text); border-radius: 28px; padding: 34px 36px; box-shadow: 0 30px 60px -32px rgba(15, 23, 42, 0.45); display: flex; flex-direction: column; gap: 14px; }
.nd-fhero-eyebrow { margin: 0; color: var(--accent-ink); }
.nd-fhero-card h1 { margin: 0; font-size: clamp(32px, 3.6vw, 46px); line-height: 1.04; color: var(--text); }
.nd-fhero-address { margin: 0; display: flex; gap: 8px; align-items: flex-start; font-size: 15px; color: var(--text-muted); }
.nd-fhero-address .nd-icon { flex: none; margin-top: 2px; color: var(--accent-ink); }
.nd-fhero-facts { margin: 4px 0 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(88px, 1fr)); gap: 10px; }
.nd-fhero-fact { margin: 0; padding: 12px 14px; border-radius: 16px; background: var(--surface); }
.nd-fhero-fact dt { font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted-on-surface, var(--text-muted)); }
.nd-fhero-fact dd { margin: 4px 0 0; font-size: 15px; font-weight: 700; color: var(--text-on-surface, var(--text)); }
.nd-fhero-actions, .nd-location-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 6px; }
.nd-fhero-actions .nd-btn { flex: 1 1 auto; justify-content: center; white-space: nowrap; }
.nd-fhero-credit { position: absolute; right: 10px; bottom: 6px; margin: 0; font-size: 11px; color: #475569; }
.nd-btn.nd-directions { background: transparent; color: var(--accent-ink); box-shadow: none; border: 2px solid currentColor; }
.nd-btn.nd-directions:hover { background: var(--surface); color: var(--accent-ink); }
.nd-fhero .helpline-disclosure { margin: 0; font-size: 12.5px; color: var(--text-muted); }
@media (max-width: 720px) {
  .nd-fhero { display: block; min-height: 0; background: none; }
  .nd-fhero-map { position: relative; height: 230px; }
  .nd-fhero-wrap { padding-top: 0; padding-bottom: 24px; margin-top: -36px; }
  .nd-fhero-card { padding: 24px 20px; border-radius: 24px; }
}

/* Grouped services on a facility page, replacing the long pill list. */
.service-groups { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; margin-top: 12px; }
.service-group { background: var(--surface); color: var(--text-on-surface, var(--text)); border-radius: 20px; padding: 20px 22px; }
.content-section .service-group h3 { margin: 0 0 10px; padding: 0; border: 0; font-size: 16px; }
.content-section .service-group h3::before, .content-section .service-group h3::after { content: none; display: none; }
.facility-card .service-more { margin: 8px 0 0; font-size: 13px; font-weight: 600; }
.service-note { margin: 12px 0 0; font-size: 14px; color: var(--text-muted); }
.service-group ul { margin: 0; padding-left: 18px; display: grid; gap: 6px; font-size: 15px; line-height: 1.4; }

/* City pages without a real city photo: title card and street map side by
   side (stacked on phones) instead of a generic landscape behind the card. */
.nd-hero.nd-hero-map { display: flex; flex-wrap: wrap; align-items: center; gap: 32px; min-height: 0 !important; padding: 40px max(24px, calc((100% - 1180px) / 2)) 48px; background: var(--surface); }
.nd-hero.nd-hero-map .nd-hero-inner { flex: 1 1 440px; max-width: 560px; margin: 0 !important; padding-left: 0; padding-right: 0; }
.nd-hero-mapcard { flex: 1 1 460px; margin: 0; border-radius: 24px; overflow: hidden; background: #E6EDEA; box-shadow: 0 24px 50px -34px rgba(15, 23, 42, 0.5); }
.nd-hero-mapcard img { display: block; width: 100%; height: auto; }
.nd-hero-mapcard figcaption { padding: 10px 16px; font-size: 12px; color: var(--text-muted-on-surface, var(--text-muted)); background: var(--base); }
@media (max-width: 720px) {
  .nd-hero.nd-hero-map { padding: 24px 16px 32px; gap: 20px; }
  .nd-hero-mapcard { flex-basis: 100%; }
}
.nd-hero.nd-hero-map .nd-hero-inner .helpline-disclosure { color: var(--text-muted) !important; }
.nd-hero.nd-hero-map h1 em, .nd-hero.nd-hero-map h1 .nd2-underline { color: var(--accent-ink) !important; }
.map-block .map-credit { margin: 6px 0 0; font-size: 12px; color: var(--text-muted); }

/* Signal: energetic and modern. Heavy display type, a gradient hero with an
   angled edge, glowing gradient cards and a dotted-grid backdrop. Built on
   the quiet-editorial component layer; colours come from the palette. */
@font-face { font-family: Fraunces; src: url("archivoblack-400.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: Inter; src: url("spacegrotesk-var.woff2") format("woff2"); font-weight: 300 700; font-display: swap; }

body {
  --sig-glow: color-mix(in srgb, var(--accent) 50%, #ffffff);
  --sig-grad: linear-gradient(120deg, var(--accent) 0%, color-mix(in srgb, var(--accent) 55%, var(--ink)) 100%);
  --sig-text-grad: linear-gradient(120deg, var(--accent-ink) 0%, color-mix(in srgb, var(--accent-ink) 50%, var(--ink)) 100%);
  background: var(--base) radial-gradient(color-mix(in srgb, var(--accent) 14%, transparent) 1.2px, transparent 1.4px) 0 0 / 22px 22px;
}
h1, h2 { font-weight: 400; letter-spacing: -0.02em; line-height: 1.02; }
h3 { font-weight: 700; }

.site-header { background: color-mix(in srgb, var(--base) 86%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--border); }
.site-header a[href^="tel:"], .nd-btn, .call-now { border-radius: 999px !important; background: var(--sig-grad) !important; color: var(--text-on-accent) !important; border: 0 !important; font-weight: 700; box-shadow: 0 10px 28px -10px color-mix(in srgb, var(--accent) 80%, transparent); }

/* Hero: gradient wash over the photo, angled bottom edge */
.nd-hero { clip-path: polygon(0 0, 100% 0, 100% 88%, 0 100%); padding-bottom: 72px; min-height: 560px; }
.nd-hero-scrim { background: linear-gradient(115deg, color-mix(in srgb, var(--ink) 92%, transparent) 0%, color-mix(in srgb, var(--accent) 70%, transparent) 60%, color-mix(in srgb, var(--accent) 35%, transparent) 100%) !important; }
.nd-hero-inner { text-align: left; align-items: flex-start; }
.nd-hero-inner > * { margin-left: 0; margin-right: auto; }
.nd-hero h1 { font-size: clamp(46px, 6.4vw, 92px); max-width: 13ch; }
.page-hero h1, .nd-hero:not(.hero) h1 { font-size: clamp(36px, 4.6vw, 64px); max-width: 20ch; }
.nd-hero h1 em, .nd-hero h1 .nd2-underline { color: var(--sig-glow); font-style: normal; }
.nd-hero .nd-btn { background: #ffffff !important; color: var(--accent-ink) !important; }

/* Stat tiles with gradient numbers */
.nd2-counters { border: 0; margin-top: -40px; position: relative; z-index: 2; }
.nd2-counters-inner { gap: 18px; }
.nd2-counter { background: var(--base); border-radius: 22px; padding: 26px 34px; box-shadow: 0 24px 48px -24px color-mix(in srgb, var(--ink) 45%, transparent); border: 1px solid var(--border); }
.nd2-counter-tick { display: none !important; }
.nd2-counter-value { font-size: clamp(44px, 5vw, 68px); background: var(--sig-text-grad); -webkit-background-clip: text; background-clip: text; color: transparent !important; }
.nd2-counter-label { letter-spacing: 0.12em; font-weight: 700; }

/* Cards: rounded, gradient top edge, glow on hover */
.nd2-panel, .content-section, .nd2-talk-card, .map-block, .sidebar { border-radius: 26px !important; }
.nd2-panel-grain { display: none; }
.nd2-expect-card, .nd-feature-card, .facility-card { border-radius: 20px !important; border: 1px solid var(--border); position: relative; overflow: hidden; background: var(--base); transition: transform .18s ease, box-shadow .18s ease; }
.nd2-expect-card::before, .nd-feature-card::before, .facility-card::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 5px; background: var(--sig-grad); }
.nd2-expect-card:hover, .nd-feature-card:hover, .facility-card:hover { transform: translateY(-4px); box-shadow: 0 26px 50px -22px color-mix(in srgb, var(--accent) 70%, transparent); }
.nd-feature-card svg, .nd2-expect-card svg { color: var(--accent); }

.content-section h2, .nd2-panel h2 { background: var(--sig-text-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.nd-feature-card p::first-letter, .nd2-expect-card p::first-letter, .facility-card p::first-letter,
.nd2-talk-card p::first-letter { float: none; font-size: inherit; line-height: inherit; margin: 0; padding: 0; color: inherit; font-family: inherit; }

.chip-grid a, .link-grid a { border-radius: 999px !important; border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent) !important; background: color-mix(in srgb, var(--accent) 7%, var(--base)) !important; font-weight: 600; transition: all .15s ease; }
.chip-grid a:hover, .link-grid a:hover { background: var(--sig-grad) !important; color: var(--text-on-accent) !important; }

.nd2-pullquote { border: 0; padding: 28px 32px; border-radius: 22px; background: color-mix(in srgb, var(--accent) 8%, var(--base)); font-family: Fraunces, sans-serif; font-size: clamp(22px, 2.6vw, 32px); position: relative; }
.nd2-pullquote::before { content: "\201C"; position: absolute; top: -18px; left: 22px; font-size: 96px; line-height: 1; color: var(--accent); font-family: Fraunces, sans-serif; }

/* Call bands: vivid gradient with angled edges and light rings */
.nd-cta-band, .nd2-gradient-cta { background: radial-gradient(circle at 88% 20%, rgba(255,255,255,.22) 0 70px, transparent 71px), radial-gradient(circle at 8% 90%, rgba(255,255,255,.14) 0 110px, transparent 111px), var(--sig-grad) !important; color: var(--text-on-accent); border-radius: 30px !important; clip-path: polygon(0 6%, 100% 0, 100% 94%, 0 100%); }
.nd-cta-band h2, .nd2-gradient-cta h2, .nd-cta-band .cta-title, .nd-cta-band p, .nd2-gradient-cta p { color: var(--text-on-accent); background: none; -webkit-text-fill-color: currentColor; }
.nd-cta-band .nd-btn, .nd2-gradient-cta .nd-btn { background: #ffffff !important; color: var(--accent-ink) !important; }

.nd-emergency { border-radius: 22px !important; border: 2px solid var(--accent); }
.site-footer { background: var(--ink); color: var(--text-on-ink); }
.site-footer a { color: var(--text-on-ink); }

/* Drop caps belong to long prose only, never inside cards (beats the
   quiet-editorial .nd2-dropcap-section rule). */
.nd-feature-card p::first-letter, .nd2-expect-card p::first-letter, .facility-card p::first-letter,
.nd2-talk-card p::first-letter { float: none !important; font-size: inherit !important; line-height: inherit !important; margin: 0 !important; padding: 0 !important; color: inherit !important; font-family: inherit !important; font-weight: inherit !important; font-style: inherit !important; initial-letter: normal !important; }
/* Phones: the hero call button wraps instead of overflowing. */
@media (max-width: 640px) {
  .nd-hero .nd-btn { flex-wrap: wrap; max-width: 100%; white-space: normal; justify-content: center; text-align: center; row-gap: 2px; }
  .nd-hero .nd-btn-sub { flex-basis: 100%; }
  .nd-hero-inner { padding-left: 22px !important; padding-right: 22px !important; }
}
/* The white "Talk to Us" card sits inside the call band: keep its copy and
   button on the card's own colours, not the band's white-on-accent ones. */
.nd2-gradient-cta .nd2-gradient-cta-inner p { color: var(--text-muted); }
.nd2-gradient-cta .nd2-gradient-cta-inner .nd-btn { background: var(--accent) !important; color: var(--text-on-accent) !important; }
/* Dark footer: the copyright/address lines need the on-ink muted colour. */
.site-footer .footer-inner > div > p.footer-line { color: var(--text-muted-on-ink); }

h1,h2,h3,h4,h5,h6,h1 *,h2 *,h3 *,h4 *,h5 *,h6 *{text-transform:none!important;}