/* multi-import:brand-layer:start - managed by Tools > Multi Import; edits inside are replaced on re-import */
/* Carpet Experts Kingston overrides.css - only documented tokens (see style.md).

   This re-skin is copied verbatim from the Carpet Experts Calgary build (same
   brand network, same phone (343) 459-6868) at the user's explicit request to
   match the network's design exactly - same colors, same fonts, same
   component-level patterns. Only this comment block changed; every token,
   rule, and selector below is unchanged from the Calgary file. Note: the
   Calgary file's own settings.json uses email info@carpetexperts.ca, which
   differs from the info@carpetexpertskingston.ca given for this brand - flagged
   for the user to confirm which email is correct for Kingston.

   Fonts: no override needed. The base "multi" theme's own defaults are already
   'Fraunces' (headings) and 'DM Sans' (body) - see style.md section 6. No font
   files are shipped here; the theme's bundled defaults are used as-is, same as
   the Calgary build.

   Colors: the warm terracotta/rust brand hues below are reused unchanged from
   the Calgary build to keep every Carpet Experts city site on the same visual
   identity, per the user's explicit request to copy logo/fonts/style/colors
   from that reference zip. */

:root{
  /* Brand hues - matched to the live site's two CTA button colors */
  --color-sienna:#A8552F;       /* "Call" button background - also matches the site's scrollbar-thumb color */
  --color-sienna-deep:#732F1E;  /* shared CTA text color / darker hover hue - darker than sienna */
  --color-canadian-red:#962C36; /* "Get a Quote" button background - distinct secondary accent */

  /* Belt-and-braces: pin the semantic roles directly too */
  --color-primary:#A8552F;
  --color-accent:#A8552F;
  --color-accent-hover:#732F1E;
  --color-link-text:#A8552F;
  --color-link-text-hover:#732F1E;

  /* Surface / ink ramp - paper and ink matched directly to the live site;
     tint/deep/rule/ink-soft are reasonable derived values in the same warm
     palette family (not directly observed - the live site did not expose
     these as distinct computed values on the elements inspected). */
  --color-paper:#FAF6F0;
  --color-paper-tint:#FDFBF8;
  --color-paper-deep:#F0E6D8;
  --color-rule:#E8DDCB;
  --color-ink:#1E1A17;
  --color-ink-soft:#5C4F45;

  /* Quote-form "Next" button reads this documented token directly
     (confirmed via DevTools - it was rendering the theme's default
     #334155 slate). Pinned to the brand accent. */
  --color-tertiary-dark:#A75532;
}

/* Page background (set in theme.json; overridden here per style.md section 3) */
body{ background:#FAF6F0; }

/* ---------------------------------------------------------------------
   Component-level color fixes (2026-08-13) - client-specified exact hex
   (#A75532) for four specific UI elements on the live site that render
   with hardcoded colors NOT driven by any documented token (confirmed
   via DevTools Computed - the quote-form step indicator and back-to-top
   button showed #E1315C, matching none of the tokens above). Per
   style.md section 1 ("add normal CSS rules targeting theme classes")
   these are targeted directly as plain class rules rather than tokens.
   Per section 10, undocumented classes may change on a theme update -
   re-check these four rules after upgrading the base theme.
   ------------------------------------------------------------------- */

/* Quote-form step indicator - a soft tan for not-yet-reached steps,
   brand accent for the current step AND any step already passed.
   (Selectors cover several likely state-class/attribute names since the
   exact one isn't fully visible in DevTools' truncated class list.) */
.quote-form-step-indicator-bar{ background:#EADDD2; }
.quote-form-step-indicator.is-current .quote-form-step-indicator-bar,
.quote-form-step-indicator.is-complete .quote-form-step-indicator-bar,
.quote-form-step-indicator.is-completed .quote-form-step-indicator-bar,
.quote-form-step-indicator.is-active .quote-form-step-indicator-bar,
.quote-form-step-indicator.is-done .quote-form-step-indicator-bar,
.quote-form-step-indicator[data-current="true"] .quote-form-step-indicator-bar,
li.is-current .quote-form-step-indicator-bar,
li.is-complete .quote-form-step-indicator-bar,
li.is-completed .quote-form-step-indicator-bar{ background:#A75532; }

/* Quote-form Back button - white background (reverted from a solid fill),
   only the border/text use the brand accent, same on hover. */
.quote-form-back{
  background:#FFFFFF;
  border-color:#A75532;
  color:#A75532;
}
.quote-form-back:hover,
.quote-form-back:focus{
  background:#FFFFFF;
  border-color:#A75532;
  color:#A75532;
}

/* Quote-form Next button - direct class override (the --color-tertiary-dark
   token above did not end up controlling this button in practice). Border
   color added 2026-08-14 - DevTools showed the button's background already
   correct (#A75532) but its border still rendering the theme's default red. */
.quote-form-next{ background:#A75532; border-color:#A75532; }
.quote-form-next:hover,
.quote-form-next:focus{ background:#5E3F37; border-color:#5E3F37; }

/* Quote-form "Select an area" field underline, active/focus state */
.quote-form-select:focus,
.quote-form-select:active,
.quote-form-field:focus-within .quote-form-select{ border-bottom-color:#A75532; }

/* Pricing table "Ask about..." CTA buttons */
.pricing-card-cta{ background:#A75532; }

/* "Most Popular" pricing card border and badge */
.pricing-card.is-popular{ border-color:#A75532; }
.pricing-card-badge{ background:#A75532; }

/* Pricing card price text */
.pricing-card-price{ color:#A75532; }

/* Back-to-top button */
#top.top{ background:#A75532; }

/* Feature-card icon color (circular icons in feature-cards blocks
   sitewide - "What Every Service Shares", "Why Choose ... Toronto",
   etc.) - was rendering the theme's hardcoded default pink, not a brand
   hue. Broadened 2026-08-13: the exact wrapper class wasn't fully
   visible in DevTools, so this matches on class names containing both
   "feature" and "tile" rather than one guessed exact class. */
.feature-tile,
.feature-tile i,
[class*="feature"][class*="tile"],
[class*="feature"][class*="tile"] i{ color:#A75532; }

/* ============================================================
   CTA banner - carpet-themed re-skin (2026-08-14). Scoped to
   .cta-banner and its descendants only; wording, links, and the
   block's own HTML/class names are untouched.

   Assumption flagged: the real markup does not emit a
   `.cta-banner-fringe` element (confirmed via DevTools on this
   build), so the top/bottom fringe is built with `::before`/
   `::after` pseudo-elements on `.cta-banner` itself instead - no
   HTML change needed. The two buttons are targeted structurally
   (`:nth-of-type`) rather than by a guessed class name, since
   their exact classes weren't visible in DevTools; if the wrong
   button ends up styled as "primary", swap the two nth-of-type
   blocks below.
   ============================================================ */

.cta-banner{
  position:relative;
  overflow:visible;
  box-sizing:border-box;
  margin-block:3rem;
  padding-block:110px;
  padding-inline:2rem;
  border:10px solid #6E2430;
  outline:3px solid #C99A6C;
  outline-offset:-18px;
  box-shadow:0 18px 32px -12px rgba(30,20,14,0.45);
  background-color:#A75532;
  background-image:
    repeating-linear-gradient(45deg, rgba(0,0,0,0.10) 0, rgba(0,0,0,0.10) 2px, transparent 2px, transparent 10px),
    repeating-linear-gradient(-45deg, rgba(0,0,0,0.10) 0, rgba(0,0,0,0.10) 2px, transparent 2px, transparent 10px);
}

/* Carpet fringe, top and bottom (2026-08-24, client request; #982d3a band
   removed same day per follow-up) - evenly spaced, thin vertical white
   lines reading as the tassels of a traditional rug, on a transparent band
   (no solid color behind them) rather than a colored strip. Positioned
   with the same negative top/bottom offset trick as before, so the fringe
   sits just outside the banner's own border rather than flush against it.
   Full-width via left:0/right:0 plus a repeating pattern, so it tiles
   cleanly at any viewport width without extra media queries; the mobile
   block below only scales the tassel size/spacing down to match the
   banner's smaller padding at that breakpoint. */
.cta-banner::before,
.cta-banner::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  height:22px;
  background-color:transparent;
  background-image:repeating-linear-gradient(90deg, #FFFFFF 0, #FFFFFF 2px, transparent 2px, transparent 10px);
  background-repeat:repeat-x;
  pointer-events:none;
}
.cta-banner::before{ top:-22px; }
.cta-banner::after{ bottom:-22px; }

/* Heading - large, centered, off-white vintage serif + small divider.
   Sized/spaced to match the client's reference screenshot at ~2047px
   viewport width: 80px font, 0.95 line-height, wraps naturally onto two
   lines, max-width 1600px. clamp() scales it down on narrower screens. */
.cta-banner :is(h1,h2,h3,h4,.cta-banner-heading){
  position:relative;
  color:#FBF3E7;
  font-family:var(--typography-family-heading);
  font-weight:700;
  text-align:center;
  font-size:clamp(48px,4vw,80px);
  line-height:0.95;
  max-width:1600px;
  margin-inline:auto;
  padding-bottom:1.75rem;
  margin-bottom:1.5rem;
}
.cta-banner :is(h1,h2,h3,h4,.cta-banner-heading)::after{
  content:"";
  position:absolute;
  bottom:0;
  left:50%;
  transform:translateX(-50%);
  width:85px;
  height:2px;
  background:#FBF3E7;
  opacity:0.7;
}

/* Description - centered, light cream, sans-serif. 26px/1.5 at desktop,
   max-width 820px, scales down with clamp() on narrower screens. */
.cta-banner p{
  color:#F3E7D6;
  text-align:center;
  font-family:var(--typography-family-main);
  font-size:clamp(18px,2vw,26px);
  line-height:1.5;
  max-width:820px;
  margin-inline:auto;
  margin-bottom:2.75rem;
}

/* Buttons - shared pill shape. ~80px tall / 22px text at desktop; the
   second button gets a 20px gap from the first (buttons sit inline,
   so margin does the job of a flex gap). */
.cta-banner a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  box-sizing:border-box;
  border-radius:999px;
  height:80px;
  padding-inline:2.75rem;
  font-size:22px;
  font-weight:700;
  text-decoration:none;
  transition:background-color .2s ease, color .2s ease, box-shadow .2s ease;
}
.cta-banner a:nth-of-type(2){ margin-left:20px; }

/* Primary - ivory pill, dark text */
.cta-banner a:nth-of-type(1){
  background:#FBF3E7;
  color:#3A241C;
  border:2px solid #FBF3E7;
}
.cta-banner a:nth-of-type(1):hover{ background:#EFE1CB; }
.cta-banner a:nth-of-type(1):focus-visible{ outline:3px solid #3A241C; outline-offset:2px; }

/* Secondary - transparent, ivory outline + text */
.cta-banner a:nth-of-type(2){
  background:transparent;
  color:#FBF3E7;
  border:2px solid #FBF3E7;
}
.cta-banner a:nth-of-type(2):hover{ background:rgba(251,243,231,0.15); }
.cta-banner a:nth-of-type(2):focus-visible{ outline:3px solid #FBF3E7; outline-offset:2px; }

/* Mobile - stack buttons vertically (display:flex on the link itself
   makes it a full-width block without needing the wrapper's class) */
@media (max-width:600px){
  .cta-banner{ padding-block:64px; padding-inline:1.25rem; }
  .cta-banner a{
    display:flex;
    width:100%;
    max-width:320px;
    height:64px;
    font-size:18px;
    margin-inline:auto;
  }
  .cta-banner a + a{ margin-top:0.75rem; margin-left:0; }
  .cta-banner::before,
  .cta-banner::after{
    height:14px;
    background-image:repeating-linear-gradient(90deg, #FFFFFF 0, #FFFFFF 1.5px, transparent 1.5px, transparent 7px);
  }
  .cta-banner::before{ top:-14px; }
  .cta-banner::after{ bottom:-14px; }
}

/* ---------------------------------------------------------------------
   Footer contact column icons + hide the auto-rendered NAP row
   (2026-08-14). The "Contact" footer column has three lines - phone,
   email, address - each gets an icon via ::before. Icons are matched by
   href scheme (tel:/mailto:) which is reliable regardless of the
   theme's exact class names; the address line has no href, so it's
   matched structurally as the last link in that column instead.
   ------------------------------------------------------------------- */
#colophon a[href^="tel:"],
#colophon a[href^="mailto:"],
#colophon li:last-child:not(:has(a[href])){
  display:inline-flex;
  align-items:center;
  gap:0.5rem;
}
#colophon a[href^="tel:"]::before{
  content:"\f095"; /* fa-phone */
  font-family:"Font Awesome 6 Free","Font Awesome 6 Pro";
  font-weight:900;
}
#colophon a[href^="mailto:"]::before{
  content:"\f0e0"; /* fa-envelope */
  font-family:"Font Awesome 6 Free","Font Awesome 6 Pro";
  font-weight:900;
}
#colophon li:last-child:not(:has(a[href]))::before{
  content:"\f3c5"; /* fa-location-dot */
  font-family:"Font Awesome 6 Free","Font Awesome 6 Pro";
  font-weight:900;
}

/* The theme's own auto-rendered footer NAP row - confirmed via DevTools
   (2026-08-14) to be `div.footer-contact-row` (a direct child of
   `.footer-inner`, sibling to `.footer-columns` and `.footer-bottom`,
   containing a `tel:` link + `span.footer-address`) - duplicated the
   Contact column above, hidden here. The earlier guessed class names
   (.footer-bottom/.site-info/.footer-meta/.footer-contact-bar/.footer-nap)
   didn't match the real markup, which is why it was still showing;
   this is the confirmed real selector. */
#colophon .footer-contact-row{
  display:none;
}

/* ---------------------------------------------------------------------
   Mobile nav toggle (hamburger) icon color (2026-08-14). The theme
   documents --hamburger-color (defaults to var(--color-primary)) for
   this, but DevTools showed the live toggle still rendering the
   theme's hardcoded pink (#E1315C) rather than following that token -
   same pattern as the quote-form Next button earlier - so both the
   token AND a direct class override are set here for reliability.
   ------------------------------------------------------------------- */
:root{
  --hamburger-color:#A75532;
  --hamburger-color-active:#A75532;
}
#nav-toggle,
#nav-toggle.nav-toggle,
.nav-toggle{
  color:#A75532;
}

/* Real markup confirmed via the client's DevTools screenshots (2026-08-14,
   round 4): the icon is NOT bars directly on the button. It's a single
   `<span class="hamburger" aria-hidden="true">` inside `#nav-toggle`, and
   the three bars are: the span's own background (middle bar), plus its
   ::before and ::after pseudo-elements (top/bottom bars, which rotate to
   form the X on open). Every previous round targeted `#nav-toggle span`,
   `#nav-toggle::before/::after` (the BUTTON's own pseudo-elements, which
   don't exist here) and never reached `.hamburger::before/::after` (the
   SPAN's pseudo-elements, which is where the theme's hardcoded #E1315C
   actually lives) - confirmed directly in the Computed panel on both the
   closed-state and open-state screenshots. That's why nothing worked
   across three rounds: the selectors simply never matched the real
   elements. This replaces all of that guessing with the confirmed target.
   The middle bar (the span's own background) already correctly disappears
   on open per the client's screenshots (clean X, no extra line) - so its
   color is only forced in the closed state, to avoid fighting whatever
   opacity/transform the theme uses to hide it when open. The ::before/
   ::after bars are the same two elements in both states (just rotated),
   so one unconditional rule covers the hamburger AND the X. */
.nav-toggle:not([aria-expanded="true"]) .hamburger{
  background-color:#A75532 !important;
}
.nav-toggle .hamburger::before,
.nav-toggle .hamburger::after{
  background-color:#A75532 !important;
}

/* ---------------------------------------------------------------------
   FAQ accordion question text - hover/focus color (2026-08-14). Real
   class confirmed via DevTools: `summary.faq-question` (inside
   `details.faq-item` > `div.faq-list`, used by every faq-section block
   sitewide - about, contact, home, cost-calculator, etc.).
   ------------------------------------------------------------------- */
.faq-question:hover,
.faq-question:focus-visible{
  color:#A75532;
}

/* ---------------------------------------------------------------------
   Mobile sticky bottom CTA bar - "Call" button background (2026-08-14).
   Assumption flagged: this bar's exact class name wasn't visible in the
   screenshot provided (only its rendered appearance - a fixed bottom
   bar with a "Call" pill and a "Get a Quote" pill). Matched here by the
   `tel:` link's href scheme, scoped to a handful of likely wrapper
   class names for this kind of mobile CTA bar, plus a fixed-position
   fallback via `[class*="sticky"]`/`[class*="mobile-cta"]`. If it
   doesn't pick up the color, a DevTools Styles/Computed screenshot of
   that specific "Call" button will confirm the real class to target.
   ------------------------------------------------------------------- */
.sticky-cta a[href^="tel:"],
.sticky-cta-bar a[href^="tel:"],
.mobile-cta-bar a[href^="tel:"],
.mobile-sticky-cta a[href^="tel:"],
.cta-sticky-bar a[href^="tel:"],
[class*="sticky"][class*="cta"] a[href^="tel:"],
[class*="mobile"][class*="cta"] a[href^="tel:"]{
  background-color:#A75532;
}

/* ---------------------------------------------------------------------
   Areas dropdown submenu - underline under a menu item (2026-08-14).
   DevTools screenshot showed the element path `a.dropdown-item.nav-link`
   > `span` for a submenu item ("CARPET INSTALLATION AJAX") rendering an
   underline in the theme's default pink. The base theme documents
   `--color-current-dropdown` (the "current item" indicator colour inside
   an open dropdown) as the token that drives this, so that's set first;
   a direct rule is layered on top covering the two ways a themed
   underline is typically built (text-decoration on the link/span itself,
   or a ::after border/background) - same reliability pattern used for
   the nav-toggle hamburger above, since token coverage alone wasn't
   sufficient for that case either.
   ------------------------------------------------------------------- */
:root{
  --color-current-dropdown:#A75532;
  --color-current:#A75532;
}
.dropdown-item.nav-link,
.dropdown-item.nav-link span,
.dropdown-menu .nav-link,
.dropdown-menu .dropdown-item{
  text-decoration-color:#A75532;
}
.dropdown-item.nav-link::after,
.dropdown-item.nav-link span::after,
.dropdown-menu .nav-link::after{
  background-color:#A75532;
  border-color:#A75532;
}

/* ---------------------------------------------------------------------
   Cost-calculator page - accent red swapped to brand colour (2026-08-14,
   round 4). Rounds 1-3 chased individual "kicker" classes one at a time
   as new screenshots turned up more of them - `panel-kicker`,
   `results-kicker`, and now a THIRD, page-top one confirmed via DevTools:
   `span.local-calculator-kicker` ("INSTANT LOCAL ESTIMATE", above the
   H1). Rather than keep whack-a-moling individual kicker class names as
   more turn up, this round adds a wildcard catch-all -
   `[class^="local-calculator-"][class*="kicker"]` - that covers every
   kicker variant on the page (present and, if the theme has more not yet
   screenshotted, future) in one rule, on top of the specific classes
   already confirmed:
   - `p.local-calculator-step-label` ("1. SELECT CARPET GRADE", "2.
     PROJECT SIZE" - shared by every numbered step)
   - `strong[data-result-type]` (classless result values in the
     breakdown panel - "Mid-Grade (Nylon, Berber)", "200 sq ft", "Remove
     old carpet")
   - `button.local-calculator-preset` (the "Bedroom" / "Living room" /
     "Whole floor (avg)" quick-preset buttons)
   - `span.local-calculator-input-unit` (the "sq ft" unit label next to
     the exact-size input)
   The client confirmed round 3's fixes (steps 1 and 2) DID take effect
   after reimport, so the pipeline is working - this round-4 kicker is a
   genuinely new element, not a re-import/caching repeat.
   ------------------------------------------------------------------- */
.local-calculator-step-label,
[class^="local-calculator-"][class*="kicker"],
.local-calculator-preset:not(.is-selected),
.local-calculator-input-unit{
  color:#A75532 !important;
}

/* ---------------------------------------------------------------------
   Result-row values ("Mid-Grade (Nylon, Berber)", "200 sq ft", "Remove
   old carpet") - round 6, ROOT CAUSE FOUND. Rounds 2-5 targeted
   `strong[data-result-type]` and kept escalating specificity, but it
   never took effect no matter how specific the selector got - because
   the attribute was wrong the whole time. A full DevTools Styles-panel
   scroll (not just Computed) on the actual live element showed the real
   markup is `<strong data-result-row="project_type">`, not
   `data-result-type` - a different attribute name entirely, so every
   prior round's selector never matched this element at all (confirmed:
   none of them appeared in the cascade, not even struck through). The
   rule that was actually winning is the theme's own
   `.local-calculator-breakdown strong{color:var(--color-primary)}`.
   Fixed by targeting the real attribute, qualified with the real
   container class so this beats that theme rule on specificity alone
   (kept !important too, as a safety margin).
   ------------------------------------------------------------------- */
.local-calculator-breakdown strong[data-result-row],
[class*="local-calculator"] strong[data-result-row],
strong[data-result-row]{
  color:#A75532 !important;
}

/* ---------------------------------------------------------------------
   Root-cause fix, round 7: the "Exact size" number input (step 2) was
   still showing red after round 6, confirmed via DevTools - the winning
   rule was `.local-calculator-input-wrap input{color:var(--color-primary)}`.
   The site's global `:root{--color-primary:#A8552F}` (top of this file)
   is already correct brand color - but that value clearly isn't what's
   reaching elements inside the calculator widget, since this input (and
   every other calculator element chased in rounds 2-6) rendered the
   theme's default red instead. That only happens if something scoped to
   the calculator widget re-declares `--color-primary` locally (a widget
   accent default, separate from the site brand, that the global :root
   value can't reach because a more specific rule inside the widget wins
   for that custom property). Rather than keep adding one more
   `color:...!important` per element every time a new one turns up,
   fixing the custom property itself at the widget's container level
   fixes every current AND future element inside it that reads
   var(--color-primary) - including this input, in one rule. */
[class*="local-calculator"]{
  --color-primary:#A75532;
}
.local-calculator-input-wrap input{
  color:#A75532 !important;
}

/* ---------------------------------------------------------------------
   "Master Bedroom" / preset-size selected state - matches the reference
   site's filled brown-gradient + white-text treatment for the active
   size preset, vs. the plain outlined look for unselected presets
   (already handled by .local-calculator-preset above).
   ------------------------------------------------------------------- */
.local-calculator-preset.is-selected{
  background:linear-gradient(135deg,#A75532,#732F1E) !important;
  border-color:#732F1E !important;
  color:#fff !important;
}

/* ---------------------------------------------------------------------
   FAQ archive & single templates - accent red swapped to brand colour
   (round 8). These are the auto-generated FAQ post-type archive
   (/faq/) and single (/faq/<slug>/) templates - a different template
   from the faq-section ACF block used on service/area/home pages (that
   one was already fixed above, "FAQ accordion question text"). Five
   elements confirmed via DevTools still rendering the theme's default
   #E1315C instead of the brand brown, even though the global :root
   --color-primary above is already correct - the same "locally
   re-declared custom property" root cause found for the calculator
   widget (round 7). Fixed the same way: override --color-primary at
   the FAQ archive/single container level first (covers every current
   and future element inside that reads the token), then direct
   !important rules on the five confirmed elements as a belt-and-braces
   backup, matching this file's established pattern:
   - .faq-question-link:hover / :focus-visible - question link in the
     archive list ("01 Do I need a permit...")
   - .faq-archive-count span - the "8" in "8 answers"
   - .faq-single-eyebrow-num - "Question No. 01" on a single FAQ page
   - .faq-related-item a:hover / :focus-visible - "Adjacent questions"
     card background on a single FAQ page
   - .faq-cta - the full-width "Talk to a real human, today" banner
     background at the bottom of the archive page
   ------------------------------------------------------------------- */
.faq-archive,
.faq-single{
  --color-primary:#A75532;
}
.faq-question-link:hover,
.faq-question-link:focus-visible{
  color:#A75532 !important;
}
.faq-archive-count span{
  color:#A75532 !important;
}
.faq-single-eyebrow-num{
  color:#A75532 !important;
}
.faq-related-item a:hover,
.faq-related-item a:focus-visible{
  background:#A75532 !important;
  color:#FFFFFF !important;
}
.faq-cta{
  background-color:#A75532 !important;
}

/* ---------------------------------------------------------------------
   stats-bar numbers - changed from accent red to black (client request,
   confirmed via DevTools on a stats-bar instance: `span.stat-number`
   reads `color: var(--color-primary)`, rendering the theme's default
   #E1315C). Set to the site's own ink token (near-black, matches every
   other heading/strong-text color sitewide, e.g. the stat labels right
   below these numbers) rather than a literal #000 so it stays visually
   consistent with the rest of the page. Applies everywhere stats-bar is
   used (area pages, home, cost-calculator, etc.) since it's the same
   class sitewide.
   ------------------------------------------------------------------- */
.stat-number{
  color:var(--color-ink) !important;
}

/* ---------------------------------------------------------------------
   stats-bar icons - changed to #A8552F (client-specified exact hex,
   confirmed via DevTools: `i.fa-solid.fa-sun.stat-icon::before` and its
   siblings - thermometer, up/down arrows - were still rendering the
   theme's default pink/red, unaffected by the .stat-number fix above
   since the icon glyph color is a separate element). #A8552F is
   already this file's --color-sienna brand hue (see :root at the top),
   so this reuses the same token value rather than introducing a new
   one. Applies everywhere stats-bar is used sitewide.
   ------------------------------------------------------------------- */
.stat-icon,
.stat-icon::before{
  color:#A8552F !important;
}
/* multi-import:brand-layer:end */