html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

/* Heavy heading/button weight, sitewide — hero titles, section headings, blurb/card/panel
   titles, and buttons all read as 800 rather than Bootstrap's default 700/600 mix. Bootstrap's
   own .fw-bold and .display-* utilities carry `!important` (700 / 300 respectively), which beats
   any plain-specificity override regardless of source order or selector weight — so this MUST
   be !important too, or classes like the hero's `display-5 fw-bold` silently stay at Bootstrap's
   weight no matter what h1/.fw-bold rules say elsewhere. */
h1, h2, h3, h4, h5, h6, .btn, .fw-bold,
h2.areas-panel-title, .header-cta,
.cards-panel h2, .faq-panel h2, .blurb-grid h2 {
  font-weight: 800 !important;
}

html {
  position: relative;
  min-height: 100%;
  /* Offset in-page anchor jumps (#quote, #find, etc.) so targets land BELOW the sticky
     header instead of hiding under it. Applies to every anchor on every page. */
  scroll-padding-top: calc(var(--header-h, 64px) + 12px);
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
  color: var(--bs-secondary-color);
  text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
  text-align: start;
}

/* ============================================================
   Header group — the header, plus (on LOCAL pages only) the black
   "network strip" above it. Stickiness lives on the WRAPPER so the
   strip and header scroll-pin together as one unit regardless of
   whether the strip is present.
   ============================================================ */
.site-header-wrap { position: sticky; top: 0; z-index: 1030; }

/* Network strip — black bar above the header, LOCAL (city) pages only.
   On those pages the main header logo becomes the disclosed partner's
   logo, so this strip is what keeps the owned brand ("part of the X
   network") visible. */
.network-strip {
  background: #222;
  padding: .5rem 0;
}
/* Same width + left/right padding as the header's navbar (.site-header .navbar: width 100%, 2.5% side padding).
   Logo on the far left, then the provider text — always one row, nothing pinned to the right. */
.network-strip .container-fluid {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: nowrap;
  gap: 1rem;
  width: 100%;
  padding-left: 2.5%;
  padding-right: 2.5%;
}
.network-strip-provider {
  color: #fff;
  font-size: .75em;
  line-height: 1.4;
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.network-strip-provider strong { font-weight: 700; }
.network-strip-provider-facts { color: rgba(255, 255, 255, .75); }
.network-strip-brand {
  display: flex;
  align-items: center;
  flex: none;
  color: #fff;
  font-weight: 600;
  font-size: .75em;
  letter-spacing: .02em;
  text-decoration: none;
}
.network-strip-logo { display: block; height: 30px; width: auto; }

/* Tablet + mobile: stack instead of the one-line left-aligned layout — logo centered on top, then the
   "Service by [Partner]" line underneath. License/certification facts drop here — they're already in
   the footer (_ProviderStrip), so this avoids showing them twice on a short screen. */
@media (max-width: 991.98px) {
  .network-strip .container-fluid {
    flex-direction: column;
    justify-content: center;
    gap: .35rem;
  }
  .network-strip-provider {
    flex: none;
    width: 100%;
    text-align: center;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
  }
  .network-strip-provider-by { display: block; }
  .network-strip-provider-facts { display: none; }
}

/* ============================================================
   Header — frosted-solid, stands out above the hero
   ============================================================ */
:root { --header-h: 78px; }

.site-header {
  min-height: var(--header-h);
  width: 100%;
  display: flex;
  align-items: center;
  background: rgba(255, 255, 255, .9);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
          backdrop-filter: saturate(180%) blur(12px);
  box-shadow: 0 1px 0 rgba(15, 23, 42, .06), 0 8px 24px -18px rgba(15, 23, 42, .55);
  transition: box-shadow .25s ease, background-color .25s ease;
}
.site-header .navbar { width: 100%; padding: 7px 2.5%; }
.site-header .navbar-brand { color: var(--brand-primary); font-size: 1.18rem; }
.site-header .brand-mark { border-radius: 8px; flex: none; }
.site-header .brand-logo { max-height: 44px; width: auto; }
.site-header .nav-link { color: #334155; font-weight: 500; }
.site-header .nav-link:hover, .site-header .nav-link:focus { color: var(--brand-primary); }
.site-header .dropdown-item:hover, .site-header .dropdown-item:focus {
  color: var(--brand-primary);
  background-color: color-mix(in srgb, var(--brand-primary) 8%, #fff);
}
.site-header .nav-phone { color: var(--brand-primary); padding: .4rem 0; }
.site-header .nav-phone:hover { opacity: .7; }
.site-header .header-cta { border: 0; }
.site-header .navbar-toggler { border-color: rgba(15, 23, 42, .2); }
.site-header .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(30,41,59,0.85)' stroke-linecap='round' stroke-width='2' d='M4 8h22M4 15h22M4 22h22'/%3e%3c/svg%3e");
}

/* deepen the shadow slightly once the page scrolls under it */
.site-header.scrolled {
  background: rgba(255, 255, 255, .96);
  box-shadow: 0 1px 0 rgba(15, 23, 42, .08), 0 12px 30px -18px rgba(15, 23, 42, .6);
}

/* mobile: keep the bar off the screen edges + a solid dropdown panel when the menu opens */
@media (max-width: 767.98px) {
  .site-header .navbar-collapse.show, .site-header .navbar-collapse.collapsing {
    background: #fff;
    border-radius: 12px;
    padding: .5rem .85rem;
    margin-top: .5rem;
    box-shadow: 0 12px 30px -12px rgba(15, 23, 42, .4);
  }
  /* the lead form stacks under the hero copy on mobile — give it a little breathing room */
  .hero #quote { margin-top: 1.5rem; }
}

/* ============================================================
   Iteration 1 — Hero
   ============================================================ */
.hero {
  position: relative;
  color: #fff;
  overflow: hidden;
  display: flex;
  align-items: center;
  /* The hero's own box is 60% of the viewport tall (a min so long copy never clips), with
     fluid top/bottom padding that scales down on short viewports and up on tall ones instead
     of a fixed py-* utility fighting the min-height. */
  min-height: 60vh;
  padding-top: clamp(2rem, 8vh, 4.5rem);
  padding-bottom: clamp(2rem, 8vh, 4.5rem);
  background:
    radial-gradient(1100px 480px at 12% -20%, rgba(255, 255, 255, .22), transparent 60%),
    linear-gradient(135deg, var(--brand-primary), var(--brand-accent));
}
/* faint dotted texture, faded toward the bottom, for depth without noise */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, .12) 1px, transparent 1.4px);
  background-size: 22px 22px;
  -webkit-mask-image: linear-gradient(to bottom, #000, transparent 75%);
          mask-image: linear-gradient(to bottom, #000, transparent 75%);
  pointer-events: none;
}
/* Optional hero background photo: a flat dark overlay keeps text readable. */
.hero.has-image {
  background:
    linear-gradient(rgba(0, 0, 0, .5), rgba(0, 0, 0, .5)),
    var(--hero-img) center / cover no-repeat;
}
.hero > * { position: relative; z-index: 1; }
.hero h1 {
  font-size: clamp(2.1rem, 4.6vw, 3.4rem);
  line-height: 1.06;
  letter-spacing: -.02em;
  text-wrap: balance;
}
/* One emphasized word within a heading, set in the lighter brand accent so it still reads
   clearly against white/dark-overlay hero text. Content marks the word with **stars**. */
.text-accent { color: var(--brand-accent); }
.hero .lead {
  color: rgba(255, 255, 255, .92);
  max-width: 46ch;
  font-size: clamp(1.05rem, 1.6vw, 1.3rem);
}

/* Final CTA banner — the page's closing call-to-action, right before the footer. Same full-width
   background-photo + dark-overlay treatment as the hero (reuses the SAME image via --hero-img),
   so the page opens and closes on the same photo; falls back to the brand gradient when the site
   has no hero image set. */
.final-cta {
  position: relative;
  color: #fff;
  overflow: hidden;
  padding-top: 8%;
  padding-bottom: 8%;
  border-top: 1px solid #fff;
  background: linear-gradient(135deg, var(--brand-primary), var(--brand-accent));
}
.final-cta.has-image {
  background:
    linear-gradient(rgba(0, 0, 0, .55), rgba(0, 0, 0, .55)),
    var(--hero-img) center / cover no-repeat;
}
.final-cta h2 {
  font-size: clamp(1.8rem, 3.4vw, 2.6rem);
  font-weight: 800;
  letter-spacing: -.01em;
}
.final-cta .lead {
  color: rgba(255, 255, 255, .92);
  max-width: 46ch;
  margin-left: auto;
  margin-right: auto;
}
.final-cta-form { width: 50%; margin-top: 2rem; }
@media (max-width: 991.98px) {
  .final-cta-form { width: 75%; }
}
@media (max-width: 767.98px) {
  .final-cta-form { width: 100%; }
}

/* Call Today panel — dark green backdrop, a short bright green label, then the phone number itself
   as the real headline: large, bright green, bold, with the phone icon riding alongside it. */
.call-today-panel {
  background: var(--brand-primary);
  padding-top: 5%;
  padding-bottom: 5%;
}
.call-today-label {
  color: var(--brand-accent);
  text-transform: uppercase;
  font-size: 2em;
  font-weight: 600;
  margin-bottom: .5rem;
}
.call-today-number {
  display: inline-flex;
  align-items: center;
  gap: .3em;
  color: var(--brand-accent);
  font-size: 3.5em;
  font-weight: 800;
  text-decoration: none;
  line-height: 1;
}
.call-today-number .ico { font-size: 1em; color: var(--brand-accent); }
.call-today-areas { margin-top: 2rem; }

/* Media section — a big relevant photo on one side, heading + copy on the other; stacks on
   tablet/mobile (image above text, via normal source order + col-lg-6 collapsing below lg). */
.media-section { padding-top: 5%; padding-bottom: 5%; }
.media-section--tight-top { padding-top: 1%; }
.media-section--tight-bottom { padding-bottom: 1%; }
.media-section-img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 14px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .08);
}
.media-section h2 { color: var(--brand-primary); font-weight: 800; }

/* The lead-capture card sitting in the hero (city hub / spoke pages): dark-green card, white type,
   a white border to separate it from the hero photo/gradient behind it. */
.card.lead-form-card {
  background: var(--brand-primary);
  border: 2px solid #fff;
}
.lead-form-card .card-body { color: #fff; padding: 30px; }
.lead-form-card h3 { color: #fff; text-align: center; font-weight: 800; font-size: 2em; }
.lead-form-card .free-accent { color: var(--brand-accent); }

/* Unsplash attribution — required but kept deliberately faint and small. */
.photo-credit { font-size: .66rem; opacity: .5; margin-top: .15rem; }

/* Disclosed-provider trust strip (sits directly under the hero on city/service pages) */
/* Site footer — dark backdrop; the provider block lives here now, so both share this palette. */
.site-footer { background: #222222; color: #fff; border-top: 1px solid #fff; padding-bottom: 50px; }
.site-footer .container.small { text-align: center; }
.site-footer a, .site-footer .container.small a { color: #fff; }
.site-footer .photo-credit { color: rgba(255, 255, 255, .6); text-align: center; margin-top: 1rem; }
.site-footer .photo-credit a { color: rgba(255, 255, 255, .6); }
.provider-strip {
  padding: 1.5rem 0;
  font-size: .95rem;
}
.provider-strip strong { color: #fff; }
.provider-ico { display: flex; justify-content: center; color: var(--brand-accent); margin-bottom: .5rem; }
.provider-ico .ico { font-size: 32px; }
/* Footer sits on a dark background but the partner logo is designed for the light header — a small white
   chip keeps ANY logo (dark, colored, or light) legible here without inverting/recoloring it. Smaller than
   the header mark since this is a supporting "service provided by" disclosure. */
.provider-logo { display: block; height: 32px; width: auto; max-width: 170px; object-fit: contain;
  margin: 0 auto .85rem; background: #fff; padding: 6px 10px; border-radius: 8px; }
.provider-line { margin-bottom: .25rem; }
.provider-line:last-child { margin-bottom: 0; }
.provider-line-muted { color: rgba(255, 255, 255, .7); font-size: .85em; }

/* ============================================================
   Buttons — every variant shares the one brand-button color scheme.
   Bootstrap's own :hover/:active/:focus-visible rules read from these
   --bs-btn-* custom properties, so overriding them here (instead of
   fighting Bootstrap on background-color specificity) makes every
   state resolve to the brand color automatically.
   ============================================================ */
.btn-primary,
.btn-success,
.site-header .header-cta {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--brand-button);
  --bs-btn-border-color: var(--brand-button);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--brand-button);
  --bs-btn-hover-border-color: var(--brand-button);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--brand-button);
  --bs-btn-active-border-color: var(--brand-button);
}
.btn-outline-secondary {
  --bs-btn-color: var(--brand-button);
  --bs-btn-border-color: var(--brand-button);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--brand-button);
  --bs-btn-hover-border-color: var(--brand-button);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--brand-button);
  --bs-btn-active-border-color: var(--brand-button);
}
.btn-light {
  --bs-btn-color: var(--brand-button);
  --bs-btn-hover-color: var(--brand-button);
  --bs-btn-active-color: var(--brand-button);
}
/* Rollover: every button variant fades to the same color at 70% opacity on hover. */
.btn:hover {
  opacity: .7;
}
/* Mobile: every button fills the width of its container — bigger, easier tap targets, and it
   reads as the single obvious action instead of a small inline control. Same for form fields —
   the ZIP/city finder rows (hero, mini-cta, footer CTA) lay their input + button out side by side
   at desktop (form.d-flex); at mobile that row stacks to a column so the now-full-width button
   isn't fighting the input for horizontal space, and every field/control is full width too. */
@media (max-width: 767.98px) {
  .btn { display: block; width: 100%; }
  form.d-flex { flex-direction: column; }
  .form-control, .form-select { width: 100%; }
  .service-area-pin { display: flex; width: 100%; }
}

/* ============================================================
   Iteration 2 — Color rhythm + icons
   ============================================================ */
/* Section headings: consistent weight + a short accent underline so the brand color
   threads through a clean white canvas (instead of repeating the full gradient). */
main section.container > h2 {
  font-weight: 800;
  letter-spacing: -.01em;
  margin-bottom: 1rem;
}
main section.container > h2::after {
  content: "";
  display: block;
  width: 42px;
  height: 3px;
  border-radius: 3px;
  background: var(--brand-accent);
  margin-top: .55rem;
}

/* Cards: softer, lifted; link-cards get a subtle hover. */
.card {
  border-color: rgba(15, 23, 42, .08);
  border-radius: 14px;
}
a.card {
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
a.card:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--brand-accent) 40%, transparent);
  box-shadow: 0 14px 28px -14px rgba(15, 23, 42, .28);
}

/* Panel = the boxed items in a "cards" section — stays white even though its host section
   (cards-panel) is dark green, so the cards read as cards against that backdrop. */
.panel {
  background: #fff;
  border: 1px solid rgba(15, 23, 42, .08);
  border-radius: 14px;
  padding: 1.5rem;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
}
.cards-panel { background: var(--brand-primary); }
.cards-panel h2, .cards-panel > .container > p { color: #fff; }
.cards-panel-icon { flex-shrink: 0; color: var(--brand-primary); font-size: 1.75em; line-height: 1; }
.cards-panel-icon .ico { font-size: 1em; }
.cards-panel .panel h3, .cards-panel .panel h3 a { color: var(--brand-primary); }

/* Icons */
.ico { font-size: 24px; line-height: 1; display: inline-block; }
.ico-sm { font-size: 18px; }
.ico-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 12px;
  color: var(--brand-accent);
  background: color-mix(in srgb, var(--brand-accent) 12%, #fff);
}

/* Trust-signal strip — credibility band directly under the hero, one row of 3 even columns
   at desktop; each column goes full-width (stacked) at tablet and below. */
.trust-strip {
  background: var(--brand-primary);
  border-top: 1px solid rgba(255, 255, 255, .9);
  padding-top: 40px;
  padding-bottom: 40px;
  color: #fff;
}
.trust-item {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .65rem;
  color: #fff;
  font-size: 1.15rem;
  font-weight: 600;
  text-align: center;
}
.trust-item strong { color: var(--brand-accent); font-size: 1.3em; }
.trust-ico { display: inline-flex; color: var(--brand-accent); }
.trust-ico .ico { font-size: 28px; }

/* Services grid — icon-forward: a white FontAwesome icon in a solid accent circle,
   the service name centered underneath. 4-up at desktop, 2-up at tablet, 1-up at mobile. */
.services-grid {
  padding-top: 5%;
  padding-bottom: 5%;
}
/* 2-across holds all the way down through small phones; only below 320px (narrower than any
   Bootstrap breakpoint) does a single icon+label no longer fit two to a row. */
@media (max-width: 319.98px) {
  .services-grid .row-cols-2 > * { width: 100%; }
}
/* Bootstrap's .row is already flex + wrap, so this centers each wrapped row independently — a
   ragged last row (e.g. 4 leftover items in a 5-col grid) sits centered instead of hugging the left. */
.services-grid .row { justify-content: center; }
.services-grid h2 {
  font-size: 2.25em;
  font-weight: 900;
  color: #000;
  margin-bottom: 50px !important;
}
.services-grid h2::after { margin-left: auto; margin-right: auto; background: currentColor !important; }
.services-grid .service-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 1rem;
  text-decoration: none;
  color: inherit;
}
.services-grid .service-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 110px;
  height: 110px;
  border-radius: 50%;
  background: var(--brand-primary);
  transition: transform .18s ease-out;
}
.services-grid .service-badge .ico { font-size: 3em; color: #fff; }
.services-grid .service-name {
  font-size: 1.3em;
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--brand-primary);
}
.services-grid .service-block:hover .service-badge { transform: translateY(-4px); }

/* Compact variant: more than 2 rows of icons at desktop, so the panel's height stays reasonable
   for a long service catalog. */
.services-grid-compact .service-block { gap: .5rem; }
.services-grid-compact .service-badge { width: 74px; height: 74px; }
.services-grid-compact .service-badge .ico { font-size: 2em; }
.services-grid-compact .service-name { font-size: 1.05em; }

.areas-panel { background: var(--brand-accent); padding-top: 2%; padding-bottom: 2%; }
.areas-panel-title { color: var(--brand-primary); }
.areas-panel .container > p { color: var(--brand-primary); }
/* This panel's own bright-green background is the opposite of .service-area-pin's usual dark-green
   backdrop, so its pin icon needs to flip to dark green here too, scoped so the shared class's
   other (dark-green-panel) usages are untouched. */
.areas-panel .service-area-pin .ico { color: var(--brand-primary); }
.service-area-pin {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  background: #fff;
  color: var(--brand-primary);
  font-size: 1em;
  font-weight: 700;
  padding: .6rem 1.1rem;
  border-radius: 12px;
  border: 2px solid var(--brand-accent);
}
.service-area-pin .ico { color: var(--brand-accent); font-size: 1em; }

/* "How it works" — full-bleed bright-green panel, dark-green circular step badges with
   white icons, dark-green type throughout. */
.how-it-works {
  background: var(--brand-accent);
  padding-top: 5%;
  padding-bottom: 5%;
}
.how-it-works h2 {
  font-size: 2.25em;
  font-weight: 900;
  text-transform: capitalize;
  color: var(--brand-primary);
}
.how-it-works h2::after {
  content: "";
  display: block;
  width: 42px;
  height: 3px;
  border-radius: 3px;
  background: currentColor;
  margin: .55rem auto 0;
}
.how-it-works h3 {
  font-size: 1.5em;
  font-weight: 900;
  color: var(--brand-primary);
}
.how-it-works p { color: var(--brand-primary); }
.how-it-works .hiw-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  color: #fff;
  background: var(--brand-primary);
}
.how-it-works .hiw-badge .ico { font-size: 28px; color: #fff; }

/* Mini estimate/finder CTA — a boxed, dark-green panel so the white input + button stand out;
   50% wide at desktop, 75% at tablet, full width at mobile. Repeated under each content panel
   on the home page as a recurring call-to-action. */
.mini-cta-box {
  background: var(--brand-primary);
  border: 2px solid #fff;
  border-radius: 10px;
  padding: 1.5rem;
  width: 50%;
}
@media (max-width: 991.98px) {
  .mini-cta-box { width: 75%; }
}
@media (max-width: 767.98px) {
  .mini-cta-box { width: 100%; }
}
/* Every content panel (services grid, how-it-works, blurbs, service-area, stats, faq, pricing,
   media, cards, prose, checklist, areas directory — everything except hero/trust-strip/header/
   footer/cta) shares this 5% top+bottom rhythm, so panels read consistently as you scroll. */
.content-panel { padding-top: 5%; padding-bottom: 5%; }
/* Same panel set, plus the ones with their own dedicated class (badges-panel already sets its own
   padding rather than using .content-panel) — a thin white seam at the top of every one, whether
   the panel above/below it is colored or white, so panel boundaries always read clearly. */
.content-panel,
.services-grid,
.how-it-works,
.blurb-grid,
.stats-grid,
.faq-panel,
.pricing-grid,
.media-section,
.cards-panel,
.badges-panel,
.areas-panel {
  border-top: 1px solid #fff;
}
/* The recurring "Get a FREE Estimate" row lives INSIDE each panel (same background, no seam) as
   its last child. It only needs a top gap — the panel's own padding-bottom (5%, same rule as
   above) becomes the matching gap after it, since the CTA is always the last thing in the panel. */
.panel-cta-gap { margin-top: 5%; text-align: center; }
.mini-cta-box .mini-cta-heading {
  color: #fff;
  font-size: 2em;
  font-weight: 900;
  text-align: center;
  margin-bottom: 1rem;
}
/* Reversed scheme for when the host panel is already dark green (blurb-grid, service-area-panel,
   faq-panel) — a dark-green box would disappear into that backdrop, so flip to a bright-green
   box with a dark-green heading instead. Declared after the base heading rule above so it wins
   the (equal-specificity) cascade. */
.mini-cta-box--accent { background: var(--brand-accent); }
.mini-cta-box--accent .mini-cta-heading { color: var(--brand-primary); }

/* Blurb grid — dark-green panel, N-up square images above bright-green titles + white body copy.
   Same column logic (and ragged-last-row centering) as the services grid. */
.blurb-grid { background: var(--brand-primary); padding-top: 5%; padding-bottom: 5%; }
.blurb-grid .row { justify-content: center; }
.blurb-grid h2 { color: #fff; margin-bottom: 50px; }
.blurb-grid h2::after {
  content: "";
  display: block;
  width: 42px;
  height: 3px;
  border-radius: 3px;
  background: currentColor;
  margin: .55rem auto 0;
}
.blurb-item { display: flex; flex-direction: column; align-items: center; text-align: center; }
.blurb-img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 0;
  border: 1px solid #fff;
  margin-bottom: 1rem;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .08);
}
.blurb-item h3 {
  font-size: 1.75em;
  font-weight: 700;
  color: var(--brand-accent);
  text-align: center;
  margin-bottom: .4rem;
}
.blurb-item p { color: #fff; font-size: .875em; text-align: center; }

/* Pricing grid — a real pricing-chart look: one card per line item, same column logic as the
   other grids, instead of a plain table. */
.pricing-grid { background: #222222; padding-top: 5%; padding-bottom: 5%; }
.pricing-grid .row > * { margin-top: 0; }
.pricing-grid .row { justify-content: center; }
.pricing-grid h2 { color: #fff; margin-bottom: 50px; }
.pricing-grid-intro { color: rgba(255, 255, 255, .75); }
/* The trust-badges row folded into this panel keeps its icon + title on mobile, but drops the
   body copy — otherwise 4 stacked badges push the price table too far down the screen. */
@media (max-width: 767.98px) {
  .pricing-grid .badge-body { display: none; }
}
.pricing-grid h2::after {
  content: "";
  display: block;
  width: 42px;
  height: 3px;
  border-radius: 3px;
  background: currentColor;
  margin: .55rem auto 0;
}

/* FAQ panel — dark-green backdrop matching the other panels; the accordion cards themselves
   stay Bootstrap's default white so the Q/A content stays easy to read. */
.faq-panel {
  background: var(--brand-primary);
  padding-top: 5%;
  padding-bottom: 5%;
}
.faq-panel .accordion {
  --bs-accordion-border-width: 2px;
  --bs-accordion-border-color: var(--brand-primary);
  --bs-accordion-border-radius: 0;
  --bs-accordion-inner-border-radius: 0;
  --bs-accordion-active-color: var(--brand-primary);
  --bs-accordion-active-bg: #fff;
  --bs-accordion-btn-focus-border-color: var(--brand-primary);
  --bs-accordion-btn-focus-box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--brand-primary) 25%, transparent);
}
.faq-panel .accordion-button { font-weight: 800; color: var(--brand-primary); }
.faq-panel .accordion-body {
  background: var(--brand-primary);
  color: #fff;
  border-left: 1px solid #fff;
  border-right: 1px solid #fff;
}
/* Bootstrap's chevron is a CSS-variable SVG with a hardcoded fill color, so it can't just be
   recolored with `color` — swap to a mask instead, which CAN be tinted with background-color
   (and stays theme-correct per brand, not a hardcoded hex). Sized up a bit for a bolder look. */
.faq-panel .accordion-button::after {
  background-image: none;
  -webkit-mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
  mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  background-color: var(--brand-primary);
  width: 1.5rem;
  height: 1.5rem;
}

/* Stats grid — same column logic as the other grids, centered instead of the old left-border list. */
.stats-grid { background: var(--brand-accent); padding-top: 5%; padding-bottom: 5%; }
.stats-grid .row { justify-content: center; }
.stats-grid h2 { color: var(--brand-primary); }
.stats-grid h2::after {
  content: "";
  display: block;
  width: 42px;
  height: 3px;
  border-radius: 3px;
  background: currentColor;
  margin: .55rem auto 0;
}
.stat-item { text-align: center; }
.stat-icon { display: block; color: var(--brand-primary); font-size: 3em; margin-bottom: .5rem; }
.stat-icon .ico { font-size: 1em; }
.stat-title { font-weight: 800; font-size: 1.3em; color: var(--brand-primary); margin-bottom: .35rem; }

/* Trust badges (e.g. "Licensed Professionals") — same bright-green/dark-green recipe as the stats
   grid, plus a dark-green outline on each box since these are individual bordered cards rather
   than a plain centered list. Tighter 2% top/bottom than the standard 5% content-panel rhythm
   (this panel is a quick trust-signal strip, not a full section). Icon sits to the left of the
   title/body instead of stacked above it. */
.badges-panel { background: #222222; padding-top: 1%; padding-bottom: 1%; }
.badge-item {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  text-align: left;
  border-radius: 10px;
  padding: .85rem .75rem;
}
.badge-icon { flex-shrink: 0; color: var(--brand-accent); font-size: 1.75em; line-height: 1; }
.badge-icon .ico { font-size: 1em; }
.badge-title { font-weight: 800; color: var(--brand-accent); margin-bottom: .35rem; }
.badge-body { color: #fff; font-size: .75em; }
.stat-body { color: var(--brand-primary); font-size: .9em; }
.faq-panel h2 {
  color: #fff;
  text-align: center;
  margin-bottom: 50px;
}
.faq-panel h2::after {
  content: "";
  display: block;
  width: 42px;
  height: 3px;
  border-radius: 3px;
  background: currentColor;
  margin: .55rem auto 0;
}
.pricing-card {
  container-type: inline-size;
  display: flex;
  flex-direction: column;
  background: var(--brand-primary);
  border-left: 1px solid var(--brand-accent);
  border-right: 1px solid var(--brand-accent);
  border-radius: 0;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .06);
  text-align: center;
  overflow: hidden;
}
/* The price + its detail line together, as one block: a generous fixed minimum height with
   everything vertically centered inside it, so every card's price block is the same height and
   the content below (icon/title/description) all starts top-aligned across the whole row —
   regardless of how much detail text any one item happens to have. */
.pricing-price-row {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 140px;
  background: var(--brand-accent);
  border-left: 1px solid var(--brand-primary);
  border-right: 1px solid var(--brand-primary);
  border-bottom: 4px double var(--brand-primary);
}
/* Full-width header bar (not a floating badge) so every card's price sits at the same top
   position and the same height — reads as one cohesive table across the whole row. The font-size
   here (fluid via cqw — % of the CARD's own width, not the viewport) is the one source of truth
   both spans below scale from, so the price never overflows a narrow column and the prefix stays
   locked at exactly 1/4 of the price no matter how it resizes. */
.pricing-price {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  padding: .5rem 1rem;
  color: var(--brand-primary);
  line-height: 1.1;
  font-size: clamp(1.1rem, 13cqw, 2.4em);
}
.pricing-price-prefix { font-size: .5em; font-weight: 700; margin-bottom: .2em; }
.pricing-price-amount {
  font-size: 1em;
  font-weight: 900;
}
.pricing-price-value { white-space: nowrap; }
.pricing-card .pricing-price-detail {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  flex-shrink: 0;
  text-align: center;
  font-size: .75em;
  line-height: 1.4;
  color: var(--brand-primary);
  padding: .25rem 1rem 1rem;
}
.pricing-card-body { padding: 30px 20px; }
.pricing-card-icon { display: block; color: var(--brand-accent); font-size: 3.5em; margin-bottom: .5rem; }
.pricing-card-icon .ico { font-size: 1em; }
.pricing-card h3 {
  color: var(--brand-accent);
  font-weight: 800;
  font-size: 1.3em;
  margin-bottom: .5rem;
}
.pricing-card p { color: #fff; font-size: .85em; }