.elementor-kit-5{--e-global-color-primary:#6EC1E4;--e-global-color-secondary:#54595F;--e-global-color-text:#7A7A7A;--e-global-color-accent:#61CE70;--e-global-typography-primary-font-family:"Roboto";--e-global-typography-primary-font-weight:600;--e-global-typography-secondary-font-family:"Roboto Slab";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Roboto";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Roboto";--e-global-typography-accent-font-weight:500;}.elementor-kit-5 e-page-transition{background-color:#FFBC7D;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:100%;}.e-con{--container-max-width:100%;--container-default-padding-top:0px;--container-default-padding-right:0px;--container-default-padding-bottom:0px;--container-default-padding-left:0px;}.elementor-widget:not(:last-child){--kit-widget-spacing:0px;}.elementor-element{--widgets-spacing:0px 0px;--widgets-spacing-row:0px;--widgets-spacing-column:0px;}{}h1.entry-title{display:var(--page-title-display);}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}/* Start custom CSS *//* S&T canonical */
.ast-container,.elementor-section .elementor-container{max-width:var(--container-max)}.site-header,.ast-primary-header{z-index:50}.site-nav{z-index:100}body.has-sticky-nav{padding-top:var(--sticky-nav-h,0)}.elementor-section{padding:0}.hero img,.hero source,.about-hero img,.about-hero source,.about-hero__portrait img{loading:eager}

/* S&T Janitorial Service, LLC — v7.1 brand tokens
   Source: Brand Guide (client-supplied, Path A "client_explicit" lock).
   Skill 5 v7.1 — locked at homepage codification kickoff.
   ZERO hardcoded hex outside this :root block. */

:root {
  /* ─── Brand palette ──────────────────────────────────── */
  --brand-primary: #E0247F;       /* PRIMARY PINK — CTAs, highlights, links, accents */
  --brand-darkest: #121212;       /* BLACK — headlines, primary text, hero/footer bg */
  --text-on-dark: #FFFFFF;        /* White text on dark surfaces */
  --text-primary: #121212;        /* Body text on light */
  --text-secondary: #4A4A4A;      /* Body text — softer (Color Usage block) */
  --text-muted: #A3A3A3;          /* Secondary text, icons, placeholders */
  --bg-page: #FFFFFF;             /* White — primary page bg */
  --bg-soft: #F7F7F7;             /* Light gray — alternate sections */
  --bg-dark: #121212;             /* Hero, footer */
  --border-soft: #E5E5E5;         /* Dividers, input outlines */

  /* ─── Typography ─────────────────────────────────────── */
  --font-display: 'Fraunces', Georgia, serif;          /* H1 + H2 ONLY */
  --font-body: 'Inter', system-ui, -apple-system, sans-serif;

  /* Type scale (per Brand Guide §3) */
  --fs-h1: 48px;  --lh-h1: 1.1;  --fw-h1: 700;
  --fs-h2: 36px;  --lh-h2: 1.2;  --fw-h2: 600;
  --fs-h3: 28px;  --lh-h3: 1.3;  --fw-h3: 600;
  --fs-h4: 22px;  --lh-h4: 1.4;  --fw-h4: 500;
  --fs-h5: 18px;  --lh-h5: 1.4;  --fw-h5: 500;
  --fs-h6: 16px;  --lh-h6: 1.4;  --fw-h6: 500;
  --fs-body: 16px;   --lh-body: 1.6;   --fw-body: 400;
  --fs-small: 14px;  --lh-small: 1.5;
  --fs-btn: 16px;    --lh-btn: 1.2;    --fw-btn: 600;

  /* ─── Spacing scale ──────────────────────────────────── */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px;  --space-4: 16px;
  --space-5: 20px; --space-6: 24px; --space-8: 32px;  --space-10: 40px;
  --space-12: 48px; --space-16: 64px; --space-20: 80px; --space-24: 96px;

  /* Locked sitewide gap (Prodigy lesson — Design Build Standards §13) */
  --gap-eyebrow-heading: 12px;

  /* ─── Layout ─────────────────────────────────────────── */
  --container-max: 1240px;
  --container-pad: 24px;
  --section-pad-desktop: 96px;
  --section-pad-mobile: 48px;
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-full: 9999px;

  /* ─── Subcopy max width (Build Standards §13) ──────── */
  --hero-subcopy-max: 88ch;
}

/* ─── Typography rule (display font on H1+H2 ONLY) ──────── */
html, body { font-family: var(--font-body); color: var(--text-primary); font-size: var(--fs-body); line-height: var(--lh-body); }
h1, h2 { font-family: var(--font-display); }
h3, h4, h5, h6 { font-family: var(--font-body); font-weight: 600; }
nav, footer .col-heading, .eyebrow, .btn, .card-title, .label, .breadcrumb, .badge { font-family: var(--font-body); font-weight: 600; }

h1 { font-size: var(--fs-h1); line-height: var(--lh-h1); font-weight: var(--fw-h1); }
h2 { font-size: var(--fs-h2); line-height: var(--lh-h2); font-weight: var(--fw-h2); }
h3 { font-size: var(--fs-h3); line-height: var(--lh-h3); font-weight: var(--fw-h3); }
h4 { font-size: var(--fs-h4); line-height: var(--lh-h4); font-weight: var(--fw-h4); }

/* Eyebrow → heading gap locked sitewide */
.eyebrow + h1, .eyebrow + h2, .eyebrow + h3 { margin-top: var(--gap-eyebrow-heading); }

/* Hero subcopy max-width */
.hero-subcopy { max-width: var(--hero-subcopy-max); }


/* S&T Janitorial — v7.1 component library (Path A brand-first lock)
   Codified section-by-section during the skill 5 v7.1 homepage workflow.
   Reuses across the other 11 templates without per-page reinvention. */



/* ─── Reset + base ─────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
/* Sticky-nav-on-mobile fix: overflow-x:hidden on BODY makes it a scroll container
   which breaks position:sticky on iOS Safari. Keep clip on <html> only. */
html { margin: 0; padding: 0; overflow-x: hidden; }
body { margin: 0; padding: 0; background: var(--bg-page); }
img, svg { display: block; max-width: 100%; height: auto; }
a { color: var(--brand-primary); text-decoration: none; }
a:hover { text-decoration: underline; }
button { font: inherit; cursor: pointer; }

/* ─── Container ────────────────────────────────────────────── */
.container { max-width: var(--container-max); margin: 0 auto; padding: 0 var(--container-pad); }

/* ─── Diagonal section dividers (Rhino Rooter-inspired) ─────
   Slant utility classes — apply to a section's bottom edge.
   The angled clip reveals the next section's bg through the cut.
   Alternate -r / -l between sections for a zigzag rhythm. */
.slant-bottom-r {
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 60px), 0 100%);
  padding-bottom: calc(var(--section-pad-desktop) + 60px) !important;
}
.slant-bottom-l {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - 60px));
  padding-bottom: calc(var(--section-pad-desktop) + 60px) !important;
}
@media (max-width: 768px) {
  .slant-bottom-r {
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 28px), 0 100%);
    padding-bottom: calc(var(--section-pad-mobile) + 28px) !important;
  }
  .slant-bottom-l {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - 28px));
    padding-bottom: calc(var(--section-pad-mobile) + 28px) !important;
  }
}

/* ─── Section ───────────────────────────────────────────────
   Every section uses .section — never a naked div without padding.
   (Build Standards §13 — Prodigy eyebrow-chip-on-seam fix.)         */
.section { padding: var(--section-pad-desktop) 0; }
.section--soft { background: var(--bg-soft); }
.section--dark { background: var(--bg-dark); color: var(--text-on-dark); }
.section--dark h1, .section--dark h2, .section--dark h3, .section--dark h4,
.section--dark h5, .section--dark h6, .section--dark p { color: var(--text-on-dark); }
@media (max-width: 768px) {
  .section { padding: var(--section-pad-mobile) 0; }
  /* QA Round 1 — sweep mobile padding across every section that has its own rule
     (kills the giant Reviews→FAQ and Services→Coverage mobile gaps) */
  .services-overview, .coverage-block, .why-us, .problem-callout,
  .reviews-section, .faq-section { padding: var(--section-pad-mobile) 0; }
  .stat-strip { padding: 36px 0; }
  .cta-band { padding: 48px 0; }
  .site-footer { padding: 48px 0 0; }
  .services-overview__header, .why-us__header, .faq-section__header,
  .reviews-section__header { margin-bottom: 32px; }
}

/* ─── Eyebrow ─────────────────────────────────────────────── */
.eyebrow {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--brand-primary);
  margin: 0;
}
/* High-specificity reset — descendant `.{section}__header p` rules can override
   .eyebrow's font-size + max-width and make the eyebrow render at the wrong
   width or off-center. This rule (specificity 0,2,0) beats those 0,1,1 rules. */
[class*="__header"] > .eyebrow,
[class*="__body"]   > .eyebrow,
[class*="__inner"]  > .eyebrow,
[class*="__card"]   > .eyebrow {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--brand-primary);
  max-width: none;
  margin: 0 0 var(--gap-eyebrow-heading);
  line-height: 1.4;
}

/* ─── Buttons ────────────────────────────────────────────── */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px;
       font: var(--fw-btn) var(--fs-btn)/var(--lh-btn) var(--font-body);
       padding: 14px 26px; border-radius: var(--radius-sm); text-transform: uppercase;
       letter-spacing: 0.04em; text-decoration: none; transition: all 0.18s ease;
       border: 2px solid transparent; }
.btn--primary { background: var(--brand-primary); color: var(--text-on-dark); border-color: var(--brand-primary); }
.btn--primary:hover { background: var(--brand-darkest); border-color: var(--brand-darkest); color: var(--text-on-dark); text-decoration: none; }
.btn--secondary { background: transparent; color: var(--brand-primary); border-color: var(--brand-primary); }
.btn--secondary:hover { background: var(--brand-primary); color: var(--text-on-dark); text-decoration: none; }
.btn--outline { background: transparent; color: var(--brand-darkest); border-color: var(--brand-darkest); }
.btn--outline:hover { background: var(--brand-darkest); color: var(--text-on-dark); text-decoration: none; }
.btn--inverted { background: var(--text-on-dark); color: var(--brand-darkest); border-color: var(--text-on-dark); }
.btn--inverted:hover { background: transparent; color: var(--text-on-dark); border-color: var(--text-on-dark); }

/* ════════════════════════════════════════════════════════════
   SECTION 1 — Sticky nav + microbar (LOCKED via Option A)
   ──────────────────────────────────────────────────────────── */

/* ─── Microbar (top row, hidden on mobile) ───────────────── */
.microbar {
  background: var(--brand-darkest);
  color: var(--text-on-dark);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  height: 40px;
  display: flex;
  align-items: center;
}
.microbar .container { display: flex; align-items: center; justify-content: space-between; gap: 24px; width: 100%; }
.microbar-left, .microbar-center, .microbar-right { display: flex; align-items: center; gap: 16px; }
.microbar-left a { color: var(--text-on-dark); display: inline-flex; align-items: center; gap: 8px; }
.microbar-left a:hover { color: var(--brand-primary); text-decoration: none; }
.microbar-center { color: var(--text-muted); }
.microbar-right a { color: var(--text-muted); display: inline-flex; align-items: center; }
.microbar-right a:hover { color: var(--brand-primary); }
.microbar-right svg { width: 16px; height: 16px; }
@media (max-width: 768px) { .microbar { display: none; } }

/* ─── Sticky nav ─────────────────────────────────────────── */
.site-nav {
  background: var(--bg-page);
  border-bottom: 1px solid var(--border-soft);
  position: -webkit-sticky; /* iOS Safari < 13 */
  position: sticky;
  top: 0;
  z-index: 100;
  height: 88px;
  display: flex;
  align-items: center;
  /* Force nav above any siblings (e.g. clip-path slants) on iOS */
  isolation: isolate;
}
.site-nav .container { display: flex; align-items: center; justify-content: space-between; gap: 24px; width: 100%; flex-wrap: nowrap; }

/* Panel-wrapped logo block (Build Standards §16 — Wooley/S&T pattern) */
.brand-logo-panel-wrap {
  background: var(--brand-darkest);
  padding: 6px 14px;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
}
.brand-logo-panel-wrap img { height: 48px; width: auto; }
@media (max-width: 768px) { .brand-logo-panel-wrap img { height: 36px; } }

.nav-menu { display: flex; align-items: center; gap: 28px; list-style: none; margin: 0; padding: 0; flex-wrap: nowrap; }
.nav-menu li { white-space: nowrap; }
.nav-menu a {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 15px;
  color: var(--text-primary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 8px 0;
  position: relative;
  transition: color 0.18s ease;
  white-space: nowrap;
}
.nav-menu a:hover { color: var(--brand-primary); text-decoration: none; }
.nav-menu a:hover::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--brand-primary);
}

.nav-cta-group { display: flex; align-items: center; gap: 16px; flex-shrink: 0; flex-wrap: nowrap; }
.nav-phone-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 16px;
  color: var(--text-primary);
  white-space: nowrap;
  flex-shrink: 0;
}
.nav-phone-cta:hover { color: var(--brand-primary); text-decoration: none; }
.nav-phone-cta svg { width: 18px; height: 18px; flex-shrink: 0; }
.nav-cta-group .btn { white-space: nowrap; flex-shrink: 0; }

/* Mobile hamburger */
.hamburger {
  display: none;
  width: 32px;
  height: 32px;
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
}
.hamburger span {
  display: block;
  width: 100%;
  height: 2px;
  background: var(--brand-darkest);
  margin: 6px 0;
  transition: transform 0.18s ease, opacity 0.18s ease;
}

/* QA Round 1 — hamburger breakpoint bumped 968 → 1100px to kill the wrapping
   at intermediate widths (Service Areas was wrapping to 2 lines on ~1280px viewport) */
@media (max-width: 1100px) {
  .nav-menu, .nav-cta-group .btn { display: none; }
  .hamburger { display: block; }
  .nav-cta-group { gap: 12px; }
  .nav-cta-group .nav-phone-cta { font-size: 14px; }
}

/* Mobile nav drawer (toggled by .is-open) */
.mobile-drawer {
  position: fixed;
  top: 88px;
  left: 0;
  right: 0;
  background: var(--bg-page);
  border-bottom: 1px solid var(--border-soft);
  z-index: 99;
  padding: 24px;
  transform: translateY(-100%);
  opacity: 0;
  visibility: hidden;
  transition: transform 0.22s ease, opacity 0.22s ease;
}
.mobile-drawer.is-open { transform: translateY(0); opacity: 1; visibility: visible; }
.mobile-drawer ul { list-style: none; padding: 0; margin: 0; }
.mobile-drawer ul li { border-bottom: 1px solid var(--border-soft); }
.mobile-drawer ul li:last-child { border-bottom: none; }
.mobile-drawer ul li a {
  display: block;
  padding: 14px 0;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 16px;
  color: var(--text-primary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.mobile-drawer .btn { margin-top: 20px; width: 100%; }

/* ════════════════════════════════════════════════════════════
   SECTION 2 — Centered hero + before/after card strip (Option B)
   Brand Guide §8 Hero spec: bg #121212, heading white, button pink
   ──────────────────────────────────────────────────────────── */

.hero-centered {
  background: var(--bg-dark);
  color: var(--text-on-dark);
  padding: 88px 0 48px;
  text-align: center;
  position: relative;
}
.hero-centered .eyebrow { color: var(--brand-primary); margin: 0 0 var(--gap-eyebrow-heading); }
.hero-centered h1 {
  font-family: var(--font-display);
  font-size: clamp(40px, 6vw, 64px);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin: 0 auto 20px;
  max-width: 22ch;
  color: var(--text-on-dark);
}
.hero-centered h1 .accent { color: var(--brand-primary); }
.hero-centered .hero-subcopy {
  font-size: 18px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.85);
  max-width: var(--hero-subcopy-max);
  margin: 0 auto 32px;
}
.hero-cta-group {
  display: inline-flex;
  gap: 16px;
  flex-wrap: wrap;
  justify-content: center;
}
@media (max-width: 600px) {
  .hero-cta-group { display: flex; flex-direction: column; width: 100%; max-width: 320px; margin: 0 auto; }
  .hero-cta-group .btn { width: 100%; }
}

/* Before/After strip — horizontal scroll on all viewports */
.before-after-strip {
  background: var(--bg-dark);
  padding: 16px 0 88px;
}
.before-after-strip .container { padding-right: 0; padding-left: 0; max-width: none; }
.before-after-strip-track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 280px;
  gap: 20px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 8px var(--container-pad) 24px;
  scrollbar-color: var(--brand-primary) transparent;
}
.before-after-strip-track::-webkit-scrollbar { height: 6px; }
.before-after-strip-track::-webkit-scrollbar-track { background: rgba(255,255,255,0.05); }
.before-after-strip-track::-webkit-scrollbar-thumb { background: var(--brand-primary); border-radius: 999px; }
@media (min-width: 1300px) {
  .before-after-strip-track {
    justify-content: center;
    grid-auto-columns: 280px;
  }
}

.ba-card {
  scroll-snap-align: start;
  background: #1A1A1A;
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.4);
  display: flex;
  flex-direction: column;
}
.ba-card-imgs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  height: 200px;
  position: relative;
}
.ba-card-img {
  background-size: cover;
  background-position: center;
  position: relative;
}
/* CSS-gradient placeholders — REPLACED with real photos via image manifest */
.ba-card-img--before {
  background: linear-gradient(135deg, #3a2828 0%, #1A1A1A 100%);
}
.ba-card-img--after {
  background: linear-gradient(135deg, #1f3a3a 0%, #2d5a5a 100%);
}
.ba-card-img-label {
  position: absolute;
  top: 10px;
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 5px 10px;
  border-radius: 4px;
  color: #FFF;
}
.ba-card-img--before .ba-card-img-label { left: 10px; background: rgba(255, 255, 255, 0.18); backdrop-filter: blur(4px); }
.ba-card-img--after .ba-card-img-label { right: 10px; background: var(--brand-primary); }
.ba-card-divider {
  position: absolute;
  top: 0; bottom: 0; left: 50%;
  width: 2px;
  background: var(--brand-primary);
  transform: translateX(-50%);
  box-shadow: 0 0 8px rgba(224, 36, 127, 0.5);
}
.ba-card-body { padding: 16px 18px 18px; }
.ba-card-title {
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 700;
  color: var(--text-on-dark);
  margin: 0 0 4px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.ba-card-desc {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.65);
  margin: 0;
  line-height: 1.5;
}

@media (max-width: 768px) {
  .hero-centered { padding: 56px 0 36px; }
  .hero-centered h1 { font-size: 34px; }
  .hero-centered .hero-subcopy { font-size: 16px; padding: 0 8px; }
  .before-after-strip { padding: 12px 0 52px; }
  .before-after-strip-track { grid-auto-columns: 240px; gap: 14px; }
  .ba-card-imgs { height: 160px; }
}

/* ─── Sticky-bottom phone CTA (mobile, Build Standards §15) ─ */
.sticky-bottom-phone-cta {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--brand-primary);
  color: var(--text-on-dark);
  padding: 14px 20px;
  z-index: 1000;
  display: none;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 16px;
  text-decoration: none;
}
.sticky-bottom-phone-cta:hover { color: var(--text-on-dark); text-decoration: none; }
.sticky-bottom-phone-cta svg { width: 20px; height: 20px; }
@media (max-width: 768px) {
  body { padding-bottom: 60px; }
  .sticky-bottom-phone-cta:not(.cta-hidden) { display: flex; }
}

/* ════════════════════════════════════════════════════════════
   SECTION 3 — Stat bar / trust strip (Option A — pure typography)
   Brand Guide §8 Alternate Section: bg #F7F7F7, heading #121212
   Build Standards §13e: forced 2x2 mobile (.proximity-stats marker)
   ──────────────────────────────────────────────────────────── */
.stat-strip { background: var(--bg-soft); padding: 56px 0; }
.proximity-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  text-align: center;
}
.stat { padding: 8px; }
.stat__num {
  font-family: var(--font-display);
  font-size: clamp(40px, 5vw, 56px);
  font-weight: 700;
  line-height: 1;
  color: var(--brand-primary);
  margin-bottom: 8px;
  letter-spacing: -0.02em;
}
.stat__num--text { font-size: clamp(32px, 4vw, 44px); }
.stat__label {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-secondary);
}
@media (max-width: 768px) {
  .proximity-stats { grid-template-columns: 1fr 1fr; gap: 32px 16px; }
  .stat-strip { padding: 44px 0; }
}

/* ════════════════════════════════════════════════════════════
   SECTION 4 — Services Overview (5-card grid, Brand Guide §7 spec)
   ──────────────────────────────────────────────────────────── */
.services-overview { background: var(--bg-page); padding: var(--section-pad-desktop) 0; }
.services-overview__header { text-align: center; max-width: 760px; margin: 0 auto 56px; }
.services-overview__header .eyebrow { margin-bottom: var(--gap-eyebrow-heading); }
.services-overview__header h2 { color: var(--text-primary); margin: 0 0 16px; }
.services-overview__header p { color: var(--text-secondary); font-size: 18px; margin: 0; }

/* QA Round 2 — Desktop 6-col centered-pair scoped inside min-width 969 so it
   doesn't leak past the mobile breakpoint and push cards off the viewport.
   Mobile default = 2-col grid; the @media (min-width: 969px) below adds the
   desktop 6-col centered-pair layout when there's room. */
.service-card-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

@media (min-width: 969px) {
  .service-card-grid { grid-template-columns: repeat(6, 1fr); }
  .service-card-grid .service-card { grid-column: span 2; }
  /* Row 2 centered pair when total = 5 cards */
  .service-card-grid .service-card:nth-child(4):nth-last-child(2) { grid-column: 2 / span 2; }
  .service-card-grid .service-card:nth-child(5):nth-last-child(1) { grid-column: 4 / span 2; }
  /* Row 3 centered pair when total = 8 cards (Services overview) */
  .service-card-grid .service-card:nth-child(7):nth-last-child(2) { grid-column: 2 / span 2; }
  .service-card-grid .service-card:nth-child(8):nth-last-child(1) { grid-column: 4 / span 2; }
  /* Row 3 single orphan centered when total = 7 cards (Blog Browse Resources) */
  .service-card-grid .service-card:nth-child(7):nth-last-child(1) { grid-column: 3 / span 2; }
  /* Row 1 centered pair when total = 2 cards (Resources Hub Technical / Compliance) */
  .service-card-grid .service-card:nth-child(1):nth-last-child(2) { grid-column: 2 / span 2; }
  .service-card-grid .service-card:nth-child(2):nth-last-child(1) { grid-column: 4 / span 2; }
}

/* ════════════════════════════════════════════════════════════
   DARK 2-up cross-link cards — Resources Hub §7 (FAQ + Blog)
   Two large cards side-by-side on dark background; stacks on mobile.
   ──────────────────────────────────────────────────────────── */
.dark-2up {
  background: var(--bg-dark);
  color: var(--text-on-dark);
  padding: var(--section-pad-desktop) 0;
}
.dark-2up__header {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 40px;
}
.dark-2up__header .eyebrow { color: var(--brand-primary); }
.dark-2up__header h2 { color: var(--text-on-dark); margin: 0 0 12px; }
.dark-2up__header p { color: rgba(255,255,255,0.78); font-size: 17px; line-height: 1.6; margin: 0; }
.dark-2up__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px;
  max-width: 1080px;
  margin: 0 auto;
}
.dark-2up__card {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 16px;
  padding: 36px 32px;
  transition: transform .22s ease, border-color .22s ease, background .22s ease;
}
.dark-2up__card:hover {
  transform: translateY(-4px);
  border-color: var(--brand-primary);
  background: rgba(224, 36, 127, 0.06);
}
.dark-2up__card-icon {
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--brand-primary);
  display: grid; place-items: center;
  margin-bottom: 20px;
}
.dark-2up__card-icon svg { width: 28px; height: 28px; color: #fff; }
.dark-2up__card h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 24px;
  color: var(--text-on-dark);
  margin: 0 0 12px;
}
.dark-2up__card p {
  color: rgba(255,255,255,0.78);
  font-size: 16px;
  line-height: 1.65;
  margin: 0 0 22px;
}
.dark-2up__card-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--brand-primary);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.dark-2up__card-link svg { width: 18px; height: 18px; transition: transform .2s ease; }
.dark-2up__card:hover .dark-2up__card-link svg { transform: translateX(4px); }
@media (max-width: 720px) {
  .dark-2up { padding: var(--section-pad-mobile) 0; }
  .dark-2up__grid { grid-template-columns: 1fr; gap: 18px; }
  .dark-2up__card { padding: 28px 22px; }
  .dark-2up__card h3 { font-size: 20px; }
}

/* ════════════════════════════════════════════════════════════
   RESOURCE PAGE — long-form authority page (Cost Guide, Floor
   Care Schedule, Disinfection Guide, etc.)
   Components: hero w/ eyebrow + last-updated + author microbar,
   sticky-TOC + body 2-col layout, mobile-card-stack tables,
   related-resources grid. Reusable across all 7 evergreen pages.
   ──────────────────────────────────────────────────────────── */

/* Resource hero (centered, white) — used by /resources/{slug}/ pages */
.resource-hero { background: var(--bg-page); padding: 80px 0 56px; text-align: center; }
.resource-hero .eyebrow-meta {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--brand-primary);
  margin: 0 0 18px;
}
.resource-hero .eyebrow-meta span + span::before {
  content: " · ";
  color: var(--text-muted);
  margin: 0 6px;
}
.resource-hero h1 {
  font-family: var(--font-display);
  font-size: clamp(34px, 4.5vw, 52px);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.02em;
  margin: 0 auto 20px;
  max-width: 24ch;
  color: var(--text-primary);
}
.resource-hero__intro {
  font-size: 19px;
  line-height: 1.7;
  color: var(--text-secondary);
  max-width: 70ch;
  margin: 0 auto 24px;
}
.author-credibility-bar {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 14px 24px;
  padding: 14px 24px;
  background: var(--bg-soft);
  border-radius: 999px;
  font-size: 14px;
  color: var(--text-secondary);
  margin: 0 auto 28px;
}
.author-credibility-bar__item { display: inline-flex; align-items: center; gap: 8px; }
.author-credibility-bar__item svg { width: 16px; height: 16px; color: var(--brand-primary); }
.author-credibility-bar__item strong { color: var(--text-primary); font-weight: 700; }
.resource-hero__cta { display: inline-flex; gap: 14px; flex-wrap: wrap; justify-content: center; }
@media (max-width: 600px) {
  .resource-hero { padding: 56px 0 40px; }
  .author-credibility-bar {
    flex-direction: column;
    border-radius: 16px;
    gap: 10px;
    padding: 18px 22px;
  }
  .resource-hero__cta { flex-direction: column; width: 100%; max-width: 320px; margin: 0 auto; }
  .resource-hero__cta .btn { width: 100%; }
}

/* Quick Facts strip — 4-up stat band, reuses hub-stat-strip pattern but tighter */
.quick-facts-strip {
  background: var(--bg-soft);
  padding: 36px 0;
}
.quick-facts-strip__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  max-width: 1080px;
  margin: 0 auto;
}
.quick-facts-strip__stat {
  text-align: center;
  padding: 0 12px;
}
.quick-facts-strip__num {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 26px;
  color: var(--brand-primary);
  line-height: 1.1;
  display: block;
  margin-bottom: 6px;
}
.quick-facts-strip__label {
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.4;
}
@media (max-width: 900px) {
  .quick-facts-strip__grid { grid-template-columns: repeat(2, 1fr); gap: 28px; }
}
@media (max-width: 480px) {
  .quick-facts-strip__grid { grid-template-columns: 1fr; gap: 20px; }
}

/* TOC + Body 2-column layout */
.resource-body-section { background: var(--bg-page); padding: var(--section-pad-desktop) 0; }
.resource-body-grid {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 56px;
  align-items: flex-start;
}
.resource-toc {
  position: sticky;
  top: 96px; /* sits below sticky-nav */
  padding: 24px 0;
  border-left: 3px solid var(--brand-primary);
  padding-left: 22px;
}
.resource-toc__label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--brand-primary);
  margin: 0 0 14px;
}
.resource-toc__list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.resource-toc__list li { margin-bottom: 10px; }
.resource-toc__list a {
  display: block;
  font-size: 14.5px;
  line-height: 1.45;
  color: var(--text-secondary);
  font-weight: 500;
  padding: 6px 10px;
  border-radius: 6px;
  transition: background .15s ease, color .15s ease;
}
.resource-toc__list a:hover {
  text-decoration: none;
  background: var(--bg-soft);
  color: var(--text-primary);
}
.resource-toc__list a.is-active {
  background: var(--brand-primary);
  color: var(--text-on-dark);
  font-weight: 600;
}
.resource-body { min-width: 0; /* prevent grid-blowout from long tables */ }
.resource-body h2 {
  font-family: var(--font-display);
  font-size: 30px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--text-primary);
  margin: 48px 0 16px;
  scroll-margin-top: 96px;
}
.resource-body h2:first-child { margin-top: 0; }
.resource-body p {
  font-size: 17px;
  line-height: 1.7;
  color: var(--text-primary);
  margin: 0 0 18px;
}
.resource-body ul {
  margin: 0 0 20px;
  padding-left: 22px;
}
.resource-body ul li {
  font-size: 17px;
  line-height: 1.7;
  color: var(--text-primary);
  margin-bottom: 10px;
}
.resource-body strong { color: var(--text-primary); font-weight: 700; }

/* Mobile TOC dropdown */
.resource-toc-mobile {
  display: none;
  margin-bottom: 24px;
}
.resource-toc-mobile__btn {
  width: 100%;
  background: var(--bg-soft);
  border: 1px solid var(--border-default);
  border-left: 4px solid var(--brand-primary);
  border-radius: 8px;
  padding: 14px 18px;
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
  text-align: left;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.resource-toc-mobile__btn::after {
  content: "▾";
  color: var(--brand-primary);
  font-size: 18px;
}
.resource-toc-mobile.is-open .resource-toc-mobile__btn::after { content: "▴"; }
.resource-toc-mobile__panel {
  display: none;
  background: #fff;
  border: 1px solid var(--border-default);
  border-radius: 8px;
  margin-top: 6px;
  padding: 8px 0;
}
.resource-toc-mobile.is-open .resource-toc-mobile__panel { display: block; }
.resource-toc-mobile__panel a {
  display: block;
  padding: 10px 18px;
  font-size: 14.5px;
  color: var(--text-secondary);
}
.resource-toc-mobile__panel a:hover { background: var(--bg-soft); color: var(--text-primary); text-decoration: none; }

@media (max-width: 920px) {
  .resource-body-grid { grid-template-columns: 1fr; gap: 0; }
  .resource-toc { display: none; }
  .resource-toc-mobile { display: block; }
  .resource-body h2 { font-size: 26px; margin: 36px 0 12px; }
}
@media (max-width: 600px) {
  .resource-body p, .resource-body ul li { font-size: 16px; }
}

/* Data tables — mobile-card-stack pattern */
.data-table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 28px;
  font-size: 15px;
  line-height: 1.5;
}
.data-table thead { background: var(--bg-soft); }
.data-table th {
  text-align: left;
  padding: 14px 16px;
  font-weight: 700;
  font-size: 13.5px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-secondary);
  border-bottom: 2px solid var(--border-default);
}
.data-table td {
  padding: 14px 16px;
  border-bottom: 1px solid var(--border-default);
  color: var(--text-primary);
  vertical-align: top;
}
.data-table tr:last-child td { border-bottom: none; }
.data-table td:first-child { font-weight: 600; }
@media (max-width: 720px) {
  .data-table thead { display: none; }
  .data-table tr {
    display: block;
    margin-bottom: 14px;
    border: 1px solid var(--border-default);
    border-left: 3px solid var(--brand-primary);
    border-radius: 8px;
    padding: 14px 16px;
    background: #fff;
  }
  .data-table td {
    display: block;
    padding: 6px 0;
    border-bottom: none;
  }
  .data-table td:first-child {
    font-size: 16px;
    color: var(--text-primary);
    border-bottom: 1px solid var(--border-default);
    margin-bottom: 6px;
    padding-bottom: 10px;
  }
  .data-table td:not(:first-child)::before {
    content: attr(data-label);
    display: block;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 2px;
  }
}

/* ════════════════════════════════════════════════════════════
   FEATURED RESOURCE SPOTLIGHT — DARK section with stat tiles
   Resources Hub §3 — Cost Guide flagship
   ──────────────────────────────────────────────────────────── */
.feat-spotlight {
  background: var(--bg-dark);
  color: var(--text-on-dark);
  padding: var(--section-pad-desktop) 0;
  text-align: center;
}
.feat-spotlight .eyebrow { color: var(--brand-primary); }
.feat-spotlight h2 {
  color: var(--text-on-dark);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(30px, 4vw, 44px);
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin: 0 auto 18px;
  max-width: 22ch;
}
.feat-spotlight__lede {
  color: rgba(255,255,255,0.85);
  font-size: 18px;
  line-height: 1.6;
  max-width: 64ch;
  margin: 0 auto 36px;
}
.feat-spotlight__stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  max-width: 880px;
  margin: 0 auto 36px;
}
.feat-spotlight__stat {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 12px;
  padding: 22px 18px;
}
.feat-spotlight__stat-num {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 28px;
  color: var(--brand-primary);
  display: block;
  line-height: 1;
  margin-bottom: 8px;
}
.feat-spotlight__stat-label {
  font-size: 13px;
  color: rgba(255,255,255,0.8);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.feat-spotlight__cta { display: inline-flex; gap: 14px; flex-wrap: wrap; justify-content: center; }
@media (max-width: 720px) {
  .feat-spotlight { padding: var(--section-pad-mobile) 0; }
  .feat-spotlight__stats { grid-template-columns: 1fr; gap: 12px; }
  .feat-spotlight__cta { flex-direction: column; width: 100%; max-width: 320px; margin: 0 auto; }
  .feat-spotlight__cta .btn { width: 100%; }
}

/* ════════════════════════════════════════════════════════════
   SERVICE HUB — hero stat strip (4-up full-width band, soft bg)
   ──────────────────────────────────────────────────────────── */
.hub-stat-strip {
  background: var(--bg-soft);
  padding: 36px 0;
}
.hub-stat-strip__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
.hub-stat {
  display: flex;
  align-items: center;
  gap: 14px;
}
.hub-stat__icon {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: rgba(224, 36, 127, 0.10);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.hub-stat__icon svg { width: 22px; height: 22px; color: var(--brand-primary); }
.hub-stat__title {
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 2px;
  line-height: 1.3;
}
.hub-stat__sub { font-size: 13px; color: var(--text-secondary); }
@media (max-width: 968px) { .hub-stat-strip__grid { grid-template-columns: 1fr 1fr; gap: 20px 16px; } }
@media (max-width: 480px) { .hub-stat-strip__grid { grid-template-columns: 1fr; } }

/* ════════════════════════════════════════════════════════════
   VECTOR FLOW — vertical numbered flow w/ pink connector line
   Reusable for any page that wants a numbered "deep dive" section.
   Used on Service Hub for the 7-vector Koray Gürbüz treatment.
   ──────────────────────────────────────────────────────────── */
.vector-flow {
  background: var(--bg-dark);
  color: var(--text-on-dark);
  padding: var(--section-pad-desktop) 0;
}
.vector-flow__header { text-align: center; max-width: 760px; margin: 0 auto 64px; }
.vector-flow__header .eyebrow { color: var(--brand-primary); margin: 0 0 var(--gap-eyebrow-heading); }
.vector-flow__header h2 { color: var(--text-on-dark); margin: 0 0 12px; }
.vector-flow__header p { color: rgba(255,255,255,0.65); margin: 0; font-size: 16px; line-height: 1.6; }

.vector-flow__list {
  max-width: 920px;
  margin: 0 auto;
  position: relative;
}
.vector-flow__list::before {
  content: '';
  position: absolute;
  top: 28px;
  bottom: 28px;
  left: 36px;
  width: 2px;
  background: linear-gradient(180deg, transparent 0%, var(--brand-primary) 5%, var(--brand-primary) 95%, transparent 100%);
  box-shadow: 0 0 12px rgba(224,36,127,0.4);
}

.vector-flow__item {
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: 32px;
  padding: 8px 0 56px;
  position: relative;
}
.vector-flow__item:last-child { padding-bottom: 12px; }
.vector-flow__node {
  font-family: var(--font-display);
  font-size: 36px;
  font-weight: 700;
  color: var(--brand-primary);
  line-height: 1;
  text-align: center;
  background: var(--bg-dark);
  padding: 6px 0 10px;
  z-index: 1;
  position: relative;
  letter-spacing: -0.02em;
}
.vector-flow__content {
  padding-top: 2px;
}
.vector-flow__title {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brand-primary);
  margin: 0 0 12px;
}
.vector-flow__body {
  font-size: 16px;
  line-height: 1.75;
  color: rgba(255,255,255,0.85);
}
.vector-flow__body p { margin: 0 0 12px; }
.vector-flow__body p:last-child { margin-bottom: 0; }
.vector-flow__body strong { color: var(--text-on-dark); font-weight: 600; }
.vector-flow__body a {
  color: var(--brand-primary);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: rgba(224,36,127,0.4);
  text-underline-offset: 3px;
}
.vector-flow__body a:hover { text-decoration-color: var(--brand-primary); }

@media (max-width: 768px) {
  .vector-flow__list::before { left: 22px; }
  .vector-flow__item { grid-template-columns: 48px 1fr; gap: 18px; padding-bottom: 44px; }
  .vector-flow__node { font-size: 26px; }
}

/* ════════════════════════════════════════════════════════════
   DIFFERENTIATOR GRID — 2-col x 2-row card layout (Service Hub §4)
   ──────────────────────────────────────────────────────────── */
.diff-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  max-width: 1080px;
  margin: 0 auto;
}
.diff-card-x {
  background: var(--bg-page);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  padding: 28px 32px;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.diff-card-x:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(18,18,18,0.06); border-color: transparent; }
.diff-card-x__icon {
  width: 52px; height: 52px;
  border-radius: 50%;
  background: var(--brand-primary);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 18px;
}
.diff-card-x__icon svg { width: 24px; height: 24px; color: var(--text-on-dark); }
.diff-card-x h4 {
  font-family: var(--font-body);
  font-size: 20px;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 10px;
}
.diff-card-x p { font-size: 15px; line-height: 1.65; color: var(--text-secondary); margin: 0; }
.diff-card-x p a { color: var(--brand-primary); font-weight: 600; }
@media (max-width: 768px) { .diff-grid { grid-template-columns: 1fr; } }

/* Account-count add-on for coverage block city pills */
.city-pill .count {
  font-weight: 500;
  color: var(--brand-primary);
  margin-left: 4px;
}

/* ════════════════════════════════════════════════════════════
   PARENT-HUB MODULE — for Service Spoke pages ("How This Fits")
   Left: dark parent-hub card · Right: sibling + cross-cluster pills
   ──────────────────────────────────────────────────────────── */
.parent-hub-module { background: var(--bg-soft); padding: var(--section-pad-desktop) 0; }
.parent-hub-module__header { text-align: center; max-width: 720px; margin: 0 auto 40px; }
.parent-hub-module__header .eyebrow { color: var(--brand-primary); margin: 0 0 var(--gap-eyebrow-heading); }
.parent-hub-module__header h2 { color: var(--text-primary); margin: 0 0 16px; }
.parent-hub-module__header p { font-size: 17px; line-height: 1.7; color: var(--text-secondary); margin: 0 auto; max-width: 64ch; }

.parent-hub-grid {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 28px;
  max-width: 1080px;
  margin: 0 auto;
  align-items: stretch;
}
.parent-hub-card {
  background: var(--brand-darkest);
  color: var(--text-on-dark);
  border-radius: var(--radius-md);
  padding: 32px 28px;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: transform 0.2s ease, background 0.2s ease;
}
.parent-hub-card:hover {
  transform: translateY(-3px);
  background: var(--brand-primary);
  text-decoration: none;
}
.parent-hub-card__eyebrow {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--brand-primary);
  transition: color 0.2s ease;
}
.parent-hub-card:hover .parent-hub-card__eyebrow { color: var(--text-on-dark); }
.parent-hub-card__name {
  font-family: var(--font-body);
  font-size: 22px;
  font-weight: 700;
  color: var(--text-on-dark);
  line-height: 1.25;
}
.parent-hub-card__desc {
  font-size: 14px;
  line-height: 1.6;
  color: rgba(255,255,255,0.78);
  flex: 1;
}
.parent-hub-card__arrow {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-on-dark);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
}
.parent-hub-card__arrow svg { width: 16px; height: 16px; }

.parent-hub-related { display: flex; flex-direction: column; gap: 28px; }
.parent-hub-related__group {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-left: 16px;
  border-left: 3px solid var(--brand-primary);
}
.parent-hub-related__label {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brand-primary);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.parent-hub-related__pills { display: flex; flex-wrap: wrap; gap: 9px; }
.parent-hub-related__pill {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 10px 18px 10px 14px;
  background: var(--bg-page);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-full);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  text-decoration: none;
  transition: transform 0.18s ease, border-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
  box-shadow: 0 1px 0 rgba(18,18,18,0.04);
}
.parent-hub-related__pill::before {
  content: '→';
  font-size: 13px;
  font-weight: 700;
  color: var(--brand-primary);
  transition: transform 0.18s ease;
  line-height: 1;
}
.parent-hub-related__pill:hover {
  border-color: var(--brand-primary);
  color: var(--brand-primary);
  background: var(--bg-page);
  text-decoration: none;
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(224, 36, 127, 0.14);
}
.parent-hub-related__pill:hover::before {
  transform: translateX(3px);
}

@media (max-width: 768px) {
  .parent-hub-grid { grid-template-columns: 1fr; gap: 20px; }
}

/* ════════════════════════════════════════════════════════════
   LOCATION HUB — local context (neighborhoods + landmarks pills)
   ──────────────────────────────────────────────────────────── */
.local-context { background: var(--bg-soft); padding: var(--section-pad-desktop) 0; }
.local-context__inner { max-width: 980px; margin: 0 auto; }
.local-context__header { text-align: center; margin-bottom: 40px; }
.local-context__header .eyebrow { color: var(--brand-primary); margin: 0 0 var(--gap-eyebrow-heading); }
.local-context__header h2 { color: var(--text-primary); margin: 0 0 16px; }
.local-context__header p { font-size: 17px; line-height: 1.7; color: var(--text-secondary); margin: 0 auto; max-width: 64ch; }

.local-context__group { margin-top: 32px; text-align: center; }
.local-context__group-label {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin: 0 0 14px;
  text-align: center;
}
/* 2-column centered grid — keeps the neighborhood/landmark cluster tidy
   and balanced. Max-width caps the row so pills don't stretch on wide viewports. */
.local-context__pills {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  max-width: 720px;
  margin: 0 auto;
  justify-items: stretch;
}
@media (max-width: 580px) {
  .local-context__pills { grid-template-columns: 1fr; max-width: 360px; }
}
.local-context__pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 18px 10px 14px;
  background: var(--bg-page);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-full);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  box-shadow: 0 1px 0 rgba(18,18,18,0.04), 0 4px 12px rgba(18,18,18,0.03);
  position: relative;
  letter-spacing: 0.01em;
}
.local-context__pill::before {
  content: '';
  display: inline-block;
  width: 7px;
  height: 7px;
  background: var(--brand-primary);
  border-radius: 50%;
  flex-shrink: 0;
  box-shadow: 0 0 0 3px rgba(224, 36, 127, 0.14);
}

/* ════════════════════════════════════════════════════════════
   MARKET CONTEXT — 2-col Infrastructure + Regulatory layout
   ──────────────────────────────────────────────────────────── */
.market-context { background: var(--bg-page); padding: var(--section-pad-desktop) 0; }
.market-context__header { text-align: center; max-width: 720px; margin: 0 auto 40px; }
.market-context__header .eyebrow { color: var(--brand-primary); margin: 0 0 var(--gap-eyebrow-heading); }
.market-context__header h2 { color: var(--text-primary); margin: 0; }
.market-context-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  max-width: 980px;
  margin: 0 auto;
}
.market-context-card {
  background: var(--bg-soft);
  border-radius: var(--radius-md);
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.market-context-card__icon {
  width: 48px; height: 48px;
  background: rgba(224, 36, 127, 0.10);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
}
.market-context-card__icon svg { width: 22px; height: 22px; color: var(--brand-primary); }
.market-context-card h3 {
  font-family: var(--font-body);
  font-size: 20px;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
}
.market-context-card p {
  font-size: 15px;
  line-height: 1.7;
  color: var(--text-secondary);
  margin: 0;
}
.market-context-card p a { color: var(--brand-primary); font-weight: 600; }
@media (max-width: 768px) { .market-context-grid { grid-template-columns: 1fr; } }

/* ════════════════════════════════════════════════════════════
   SERVICE AREAS — Tier 1 city cards (active/built) + Tier 2/3 pills (planned)
   ──────────────────────────────────────────────────────────── */
.tier-section { padding: var(--section-pad-desktop) 0; }
.tier-section__header { text-align: center; max-width: 720px; margin: 0 auto 48px; }
.tier-section__header .eyebrow { color: var(--brand-primary); margin: 0 0 var(--gap-eyebrow-heading); }
.tier-section__header h2 { color: var(--text-primary); margin: 0 0 12px; }
.tier-section__header p { font-size: 16px; line-height: 1.7; color: var(--text-secondary); margin: 0; }

/* Tier 1 — clickable city cards */
.tier-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  max-width: 1080px;
  margin: 0 auto;
}
.tier-card {
  background: var(--bg-page);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  padding: 28px 28px 24px;
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.tier-card:hover {
  transform: translateY(-3px);
  border-color: var(--brand-primary);
  box-shadow: 0 10px 28px rgba(18, 18, 18, 0.08);
  text-decoration: none;
  color: inherit;
}
.tier-card__status {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 5px 11px;
  border-radius: var(--radius-full);
  background: rgba(34, 197, 94, 0.12);
  color: #16a34a;
  align-self: flex-start;
}
.tier-card__status::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.20);
}
.tier-card__city {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--text-primary);
  margin: 0;
}
.tier-card__accounts {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--brand-primary);
  margin: 0;
}
.tier-card__desc {
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-secondary);
  margin: 0;
  flex: 1;
}
.tier-card__arrow {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--brand-primary);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
}
.tier-card__arrow svg { width: 14px; height: 14px; transition: transform 0.18s ease; }
.tier-card:hover .tier-card__arrow svg { transform: translateX(3px); }
@media (max-width: 968px) { .tier-grid { grid-template-columns: 1fr; max-width: 480px; } }

/* Tier 2 + Tier 3 — non-clickable planned-city pills (nav-link gate enforced) */
.tier-planned-section { padding: var(--section-pad-desktop) 0; background: var(--bg-soft); }
.tier-planned-section__header { text-align: center; max-width: 720px; margin: 0 auto 40px; }
.tier-planned-section__header .eyebrow { color: var(--brand-primary); margin: 0 0 var(--gap-eyebrow-heading); }
.tier-planned-section__header h2 { color: var(--text-primary); margin: 0 0 16px; }
.tier-planned-section__header p { font-size: 17px; line-height: 1.7; color: var(--text-secondary); margin: 0 auto; max-width: 64ch; }

.tier-subgroup { margin-bottom: 36px; }
.tier-subgroup:last-child { margin-bottom: 0; }
.tier-subgroup__label {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--brand-primary);
  margin: 0 0 18px;
  text-align: center;
}
/* Flex with center justify — works for any pill count.
   4 pills = full row, 3 pills = centered, 2 pills = centered, etc. */
.tier-pill-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  max-width: 1080px;
  margin: 0 auto;
}
.tier-pill-grid > .tier-pill--planned {
  flex: 0 0 240px;
}
@media (max-width: 580px) {
  .tier-pill-grid > .tier-pill--planned { flex: 0 0 100%; max-width: 320px; }
}

/* Status spans removed in QA Round 1 — pills now hold only the city name, centered */
.tier-pill--planned {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px 20px;
  background: var(--bg-page);
  border: 1.5px dashed var(--border-soft);
  border-radius: var(--radius-md);
  color: var(--text-muted);
  text-align: center;
}
.tier-pill--planned__city {
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 700;
  color: var(--text-secondary);
  line-height: 1.2;
}

.tier-planned-section__plan-note {
  max-width: 720px;
  margin: 32px auto 0;
  padding: 20px 24px;
  background: var(--bg-page);
  border-left: 3px solid var(--brand-primary);
  border-radius: var(--radius-md);
  font-size: 15px;
  line-height: 1.7;
  color: var(--text-secondary);
}
.tier-planned-section__plan-note strong { color: var(--text-primary); font-weight: 600; }

/* Hero map slot variant — for Location Hub hero where right slot is a map not a portrait */
.about-hero__portrait--map { padding: 0; border: 1px solid var(--border-soft); }
.about-hero__portrait--map iframe {
  width: 100%; height: 100%; border: 0; display: block;
}

/* ════════════════════════════════════════════════════════════
   LSP — Parent-hub-grid variant w/ TWO parent cards above pills
   (Service hub + City hub side-by-side at top; related pills below)
   ──────────────────────────────────────────────────────────── */
.parent-hub-grid-lsp { max-width: 1080px; margin: 0 auto; }
.parent-hub-grid-lsp__parents {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 32px;
}
.parent-hub-grid-lsp__related { /* uses .parent-hub-related */ }
@media (max-width: 768px) {
  .parent-hub-grid-lsp__parents { grid-template-columns: 1fr; }
}

/* ════════════════════════════════════════════════════════════
   LSP — Long-form prose section + Local Cost Factors callout
   ──────────────────────────────────────────────────────────── */
.lsp-prose-section { background: var(--bg-page); padding: var(--section-pad-desktop) 0; }
.lsp-prose-section__inner { max-width: 820px; margin: 0 auto; }
.lsp-prose-section__header { text-align: center; margin-bottom: 32px; }
.lsp-prose-section__header .eyebrow { color: var(--brand-primary); margin: 0 0 var(--gap-eyebrow-heading); }
.lsp-prose-section__header h2 { color: var(--text-primary); margin: 0; }
.lsp-prose-section__body p {
  font-size: 17px;
  line-height: 1.75;
  color: var(--text-secondary);
  margin: 0 0 16px;
}
.lsp-prose-section__body p:last-child { margin-bottom: 0; }
.lsp-prose-section__body p a { color: var(--brand-primary); font-weight: 600; }
.lsp-prose-section__body strong { color: var(--text-primary); font-weight: 600; }

.lsp-cost-callout {
  margin-top: 32px;
  background: var(--bg-soft);
  border-left: 4px solid var(--brand-primary);
  border-radius: var(--radius-md);
  padding: 24px 28px;
}
.lsp-cost-callout__label {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--brand-primary);
  margin: 0 0 8px;
}
.lsp-cost-callout h3 {
  font-family: var(--font-body);
  font-size: 19px;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 12px;
}
.lsp-cost-callout p {
  font-size: 15px;
  line-height: 1.7;
  color: var(--text-secondary);
  margin: 0;
}
.lsp-cost-callout p a { color: var(--brand-primary); font-weight: 600; }

/* Eyebrow taxonomy breadcrumb — used on spoke / lsp / resource pages */
.eyebrow--breadcrumb a {
  color: var(--brand-primary);
  text-decoration: none;
  font-weight: 600;
}
.eyebrow--breadcrumb a:hover { text-decoration: underline; }
.eyebrow--breadcrumb .sep {
  color: var(--text-muted);
  margin: 0 6px;
  font-weight: 400;
}

/* ════════════════════════════════════════════════════════════
   FACILITY GALLERY — dark-bg section with image-placeholder tiles
   Reusable across templates that want a "facilities we serve" or
   "before/after gallery" moment with a strong dark visual break.
   ──────────────────────────────────────────────────────────── */
.facility-gallery {
  background: var(--bg-dark);
  color: var(--text-on-dark);
  padding: var(--section-pad-desktop) 0;
}
.facility-gallery__header { text-align: center; max-width: 720px; margin: 0 auto 48px; }
.facility-gallery__header .eyebrow { color: var(--brand-primary); margin: 0 0 var(--gap-eyebrow-heading); }
.facility-gallery__header h2 { color: var(--text-on-dark); margin: 0 0 12px; }
.facility-gallery__header p { color: rgba(255,255,255,0.7); margin: 0; font-size: 16px; line-height: 1.6; }

.facility-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
@media (max-width: 968px) { .facility-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 580px) { .facility-grid { grid-template-columns: 1fr; } }

.facility-tile {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: #1A1A1A;
  border: 1px solid #2A2A2A;
  transition: transform 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease;
  cursor: pointer;
}
.facility-tile:hover {
  transform: translateY(-3px);
  border-color: var(--brand-primary);
  box-shadow: 0 10px 32px rgba(224, 36, 127, 0.18);
}
.facility-tile img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* G14-style image placeholder when real photo not supplied yet */
.facility-tile__placeholder {
  width: 100%; height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 12px;
  background:
    radial-gradient(circle at 25% 25%, rgba(224,36,127,0.12) 0%, transparent 45%),
    linear-gradient(135deg, #1f1f1f 0%, #2a2a2a 100%);
  color: rgba(255,255,255,0.35);
  padding: 24px;
  text-align: center;
}
.facility-tile__placeholder-icon {
  width: 48px;
  height: 48px;
  opacity: 0.85;
  color: rgba(255,255,255,0.5);
}
.facility-tile__placeholder-icon svg { width: 100%; height: 100%; }
.facility-tile__placeholder-label {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.4);
}

/* Bottom-gradient overlay with facility-type label */
.facility-tile__overlay {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 24px 20px 18px;
  background: linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.92) 100%);
  z-index: 2;
}
.facility-tile__overlay-eyebrow {
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brand-primary);
  margin: 0 0 4px;
}
.facility-tile__overlay-title {
  font-family: var(--font-body);
  font-size: 17px;
  font-weight: 700;
  color: var(--text-on-dark);
  margin: 0;
  line-height: 1.3;
}

/* PRIMARY chip — sits in top-right corner of a featured service card */
.service-card { position: relative; }
.service-card__chip-primary {
  position: absolute;
  top: 16px;
  right: 16px;
  background: var(--brand-primary);
  color: var(--text-on-dark);
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 5px 10px;
  border-radius: var(--radius-full);
  box-shadow: 0 2px 8px rgba(224, 36, 127, 0.3);
}

.service-card {
  background: var(--bg-page);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  padding: 32px;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
  display: flex;
  flex-direction: column;
}
.service-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(18, 18, 18, 0.08);
  border-color: transparent;
}
.service-card__icon {
  width: 56px;
  height: 56px;
  background: var(--brand-primary);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
}
.service-card__icon svg { width: 26px; height: 26px; color: var(--text-on-dark); }
.service-card h3.card-title {
  font-family: var(--font-body);
  font-size: var(--fs-h4);
  line-height: var(--lh-h4);
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 12px;
}
.service-card__desc {
  color: var(--text-secondary);
  font-size: 15px;
  line-height: 1.6;
  margin: 0 0 20px;
  flex: 1;
}
.service-card__link {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--brand-primary);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
}
.service-card__link:hover { color: var(--brand-darkest); text-decoration: none; gap: 10px; }
.service-card__link svg { width: 16px; height: 16px; transition: transform 0.18s ease; }

@media (max-width: 968px) {
  /* Mobile = 2-col base. Last orphan (5th card) spans full width centered. */
  .service-card-grid .service-card:last-child:nth-child(odd) {
    grid-column: 1 / -1;
    justify-self: center;
    max-width: 360px;
    width: 100%;
  }
}
@media (max-width: 580px) {
  .service-card-grid { grid-template-columns: 1fr; }
  .service-card-grid .service-card:last-child:nth-child(odd) { max-width: none; }
}

/* ════════════════════════════════════════════════════════════
   SECTION 5 — Service Areas / coverage block
   ──────────────────────────────────────────────────────────── */
/* QA Round 2 — coverage flipped white → soft to alternate against Services (white) and Why-Us (white) */
.coverage-block { background: var(--bg-soft); padding: var(--section-pad-desktop) 0; }
.coverage-block__row {
  display: grid;
  grid-template-columns: 55% 45%;
  gap: 56px;
  align-items: center;
}
.coverage-block__map {
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--bg-page);
  border: 1px solid var(--border-soft);
}
.coverage-block__map iframe { width: 100%; height: 100%; border: 0; }
.coverage-block__body { color: var(--text-secondary); }
.coverage-block__body .eyebrow { margin-bottom: var(--gap-eyebrow-heading); }
.coverage-block__body h2 { color: var(--text-primary); margin: 0 0 16px; }
.coverage-block__body p { color: var(--text-secondary); font-size: 17px; line-height: 1.6; margin: 0 0 24px; }
.city-pill-grid { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 24px; }
.city-pill {
  display: inline-flex;
  align-items: center;
  padding: 10px 18px;
  border: 1.5px solid var(--border-soft);
  border-radius: var(--radius-full);
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  text-decoration: none;
  background: var(--bg-page);
  transition: all 0.16s ease;
  box-shadow: 0 1px 0 rgba(18,18,18,0.04);
}
.city-pill:hover { border-color: var(--brand-primary); color: var(--brand-primary); text-decoration: none; }
.city-pill--more {
  border-color: var(--brand-primary);
  color: var(--brand-primary);
  background: rgba(224, 36, 127, 0.06);
}
@media (max-width: 968px) {
  .coverage-block__row { grid-template-columns: 1fr; gap: 32px; }
}

/* ════════════════════════════════════════════════════════════
   SECTION 6 — Why Choose Us (3-column comparison on soft bg)
   ──────────────────────────────────────────────────────────── */
/* QA Round 2 — Why-Us flipped soft → white to alternate against Coverage (soft) and Problem (dark) */
.why-us { background: var(--bg-page); padding: var(--section-pad-desktop) 0; }
.why-us__header { text-align: center; max-width: 720px; margin: 0 auto 56px; }
.why-us__header .eyebrow { margin-bottom: var(--gap-eyebrow-heading); }
.why-us__header h2 { color: var(--text-primary); margin: 0 0 12px; }
.why-us__row {
  display: grid;
  grid-template-columns: 1fr 80px 1fr;
  gap: 32px;
  align-items: stretch;
}
.why-us__col {
  background: var(--bg-soft);
  padding: 32px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-soft);
}
.why-us__col h3 {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin: 0 0 20px;
}
.why-us__col--bad h3 { color: var(--text-secondary); }
.why-us__col--good h3 { color: var(--brand-primary); }
.why-us__list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 16px; }
.why-us__list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 15px;
  line-height: 1.55;
}
/* QA Round 1 — bumped --bad text from --text-muted to --text-secondary for readability;
   X-icon stays muted gray as the visual differentiator from the --good column */
.why-us__col--bad .why-us__list li { color: var(--text-secondary); }
.why-us__col--good .why-us__list li { color: var(--text-primary); font-weight: 500; }
.why-us__list svg { flex-shrink: 0; width: 20px; height: 20px; margin-top: 1px; }
.why-us__col--bad .why-us__list svg { color: var(--text-muted); }
.why-us__col--good .why-us__list svg { color: var(--brand-primary); }
.why-us__divider {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.why-us__divider::before {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  left: 50%;
  width: 2px;
  background: linear-gradient(180deg, transparent, var(--brand-primary), transparent);
  transform: translateX(-50%);
}
.why-us__divider-mark {
  position: relative;
  background: var(--bg-page);
  padding: 12px;
  font-family: var(--font-body);
  font-weight: 800;
  font-size: 28px;
  color: var(--brand-primary);
  z-index: 1;
}
@media (max-width: 968px) {
  .why-us__row { grid-template-columns: 1fr; gap: 16px; }
  .why-us__divider { display: none; }
}

/* ════════════════════════════════════════════════════════════
   SECTION 7 — Problem-state callout (dark, centered)
   ──────────────────────────────────────────────────────────── */
.problem-callout { background: var(--bg-dark); padding: var(--section-pad-desktop) 0; }
.problem-callout__card {
  background: #1A1A1A;
  border: 1px solid #2A2A2A;
  border-radius: var(--radius-lg);
  padding: 64px 48px;
  max-width: 880px;
  margin: 0 auto;
  text-align: center;
}
.problem-callout__card .eyebrow { color: var(--brand-primary); margin: 0 0 var(--gap-eyebrow-heading); }
.problem-callout__card h2 {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--text-on-dark);
  margin: 0 0 16px;
}
.problem-callout__card p {
  font-size: 17px;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.85);
  max-width: 64ch;
  margin: 0 auto 16px;
}
.problem-callout__card p:last-of-type { margin-bottom: 28px; }
.problem-callout__cta { display: inline-flex; gap: 16px; flex-wrap: wrap; justify-content: center; }
@media (max-width: 600px) {
  .problem-callout__card { padding: 44px 24px; }
  .problem-callout__cta { flex-direction: column; width: 100%; }
  .problem-callout__cta .btn { width: 100%; }
}

/* ════════════════════════════════════════════════════════════
   SECTION 8 — Reviews / testimonials (3-up grid)
   ──────────────────────────────────────────────────────────── */
/* QA Round 2 — Reviews flipped white → soft to alternate against Problem (dark) and FAQ (white) */
.reviews-section { background: var(--bg-soft); padding: var(--section-pad-desktop) 0; }
.reviews-section__header { text-align: center; max-width: 720px; margin: 0 auto 48px; }
.reviews-summary { display: inline-flex; align-items: center; gap: 16px; margin-bottom: 16px; }
.reviews-summary__stars { color: #FBBC04; font-size: 22px; letter-spacing: 2px; }
.reviews-summary__big {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 700;
  color: var(--text-primary);
}
.reviews-summary__across { color: var(--text-secondary); font-size: 15px; }
.reviews-section__header h2 { color: var(--text-primary); margin: 0 0 12px; }
.reviews-section__header p { color: var(--text-secondary); font-size: 16px; margin: 0; }
.reviews-section__header a { color: var(--brand-primary); font-weight: 600; }

.reviews-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.review-card {
  background: var(--bg-page);
  border-radius: var(--radius-md);
  padding: 28px;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border-soft);
  box-shadow: 0 1px 0 rgba(18,18,18,0.04);
}
.review-card__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.review-card__stars { color: #FBBC04; font-size: 18px; letter-spacing: 2px; }
.review-card__google { color: var(--text-muted); }
.review-card__google svg { width: 22px; height: 22px; }
.review-card__quote {
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.6;
  color: var(--text-primary);
  margin: 0 0 20px;
  flex: 1;
  font-style: italic;
}
.review-card__attr { border-top: 1px solid var(--border-soft); padding-top: 16px; }
.review-card__name {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 15px;
  color: var(--text-primary);
}
.review-card__role { font-size: 13px; color: var(--text-secondary); margin-top: 2px; }
@media (max-width: 968px) { .reviews-grid { grid-template-columns: 1fr; } }

/* ════════════════════════════════════════════════════════════
   SECTION 9 — FAQ accordion (single-open default, Build Standards §13)
   ──────────────────────────────────────────────────────────── */
.faq-section { background: var(--bg-page); padding: var(--section-pad-desktop) 0; }
.faq-section__header { text-align: center; max-width: 680px; margin: 0 auto 48px; }
.faq-section__header .eyebrow { margin-bottom: var(--gap-eyebrow-heading); }
.faq-section__header h2 { color: var(--text-primary); margin: 0 0 12px; }
.faq-section__header p { color: var(--text-secondary); font-size: 16px; margin: 0; }
.faq-list { max-width: 880px; margin: 0 auto; }
.faq-item { border-bottom: 1px solid var(--border-soft); }
.faq-item:first-child { border-top: 1px solid var(--border-soft); }
.faq-item summary {
  list-style: none;
  cursor: pointer;
  padding: 22px 0;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 17px;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  transition: color 0.16s ease;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover { color: var(--brand-primary); }
.faq-item summary svg {
  width: 22px;
  height: 22px;
  color: var(--brand-primary);
  flex-shrink: 0;
  transition: transform 0.18s ease;
}
.faq-item[open] summary svg { transform: rotate(180deg); }
.faq-item__answer {
  padding: 0 0 22px;
  color: var(--text-secondary);
  font-size: 15px;
  line-height: 1.65;
  max-width: 880px;
}

/* ════════════════════════════════════════════════════════════
   SECTION 10 — CTA band (pink full-bleed, inverted buttons)
   Brand Guide §13: CTA band = accent color + inverted (white) buttons
   ──────────────────────────────────────────────────────────── */
.cta-band {
  background: var(--brand-primary);
  padding: 80px 0;
  text-align: center;
}
.cta-band h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(36px, 5vw, 52px);
  line-height: 1.1;
  color: var(--text-on-dark);
  margin: 0 0 28px;
  max-width: 22ch;
  margin-left: auto;
  margin-right: auto;
}
.cta-band__buttons { display: inline-flex; gap: 16px; flex-wrap: wrap; justify-content: center; }
.cta-band .btn--inverted { background: var(--text-on-dark); color: var(--brand-darkest); border-color: var(--text-on-dark); }
.cta-band .btn--inverted:hover { background: transparent; color: var(--text-on-dark); border-color: var(--text-on-dark); }
.cta-band .btn--outline-white {
  background: transparent;
  color: var(--text-on-dark);
  border-color: var(--text-on-dark);
}
.cta-band .btn--outline-white:hover { background: var(--text-on-dark); color: var(--brand-primary); }
@media (max-width: 600px) {
  .cta-band__buttons { flex-direction: column; width: 100%; max-width: 320px; margin: 0 auto; }
  .cta-band__buttons .btn { width: 100%; }
}

/* ════════════════════════════════════════════════════════════
   SECTION 11 — Footer (global, locked to ALL templates)
   ──────────────────────────────────────────────────────────── */
.site-footer { background: var(--bg-dark); color: var(--text-on-dark); padding: 72px 0 0; }
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
  gap: 48px;
  margin-bottom: 56px;
}
/* QA Round 2 — footer logo: no panel, direct on dark bg.
   Current SVG is the Brand Guide §1 "LOGO ON DARK" variant (light/ghosted text)
   designed for placement on dark surfaces. A white panel would hide the text.
   Once the user drops the PRIMARY (dark-text) variant as snt-logo-primary.svg,
   swap to a white panel-wrap here for full §16 panel-wrap consistency. */
.footer-col__brand .brand-logo-panel-wrap {
  background: transparent;
  padding: 0;
  border-radius: 0;
  display: inline-flex;
  align-items: center;
  margin-bottom: 20px;
}
.footer-col__brand .brand-logo-panel-wrap img {
  height: 56px;
  width: auto;
  filter: none;
}
.footer-col__brand p {
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-muted);
  margin: 0 0 20px;
  max-width: 32ch;
}
.footer-col__brand .btn--primary { background: var(--brand-primary); border-color: var(--brand-primary); }

.footer-col .col-heading {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-on-dark);
  margin: 0 0 18px;
}
.footer-col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.footer-col ul a {
  font-size: 14px;
  color: var(--text-muted);
  text-decoration: none;
  transition: color 0.16s ease;
}
.footer-col ul a:hover { color: var(--brand-primary); text-decoration: none; }
.footer-col__contact address {
  font-style: normal;
  font-size: 14px;
  color: var(--text-muted);
  line-height: 1.6;
}
.footer-col__contact a { color: var(--text-muted); display: block; }
.footer-col__contact a:hover { color: var(--brand-primary); text-decoration: none; }

.footer-hours { padding: 24px 0; border-top: 1px solid #2A2A2A; border-bottom: 1px solid #2A2A2A; margin-bottom: 24px; }
.footer-hours-row { display: flex; flex-wrap: wrap; gap: 24px 48px; align-items: center; justify-content: space-between; }
.footer-hours__block { display: flex; gap: 16px; flex-wrap: wrap; }
.footer-hours__item { font-size: 13px; color: var(--text-muted); }
.footer-hours__item strong { color: var(--text-on-dark); margin-right: 6px; }
.footer-social { display: flex; gap: 14px; }
.footer-social a {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #1A1A1A;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  transition: all 0.18s ease;
}
.footer-social a:hover { background: var(--brand-primary); color: var(--text-on-dark); text-decoration: none; }
.footer-social svg { width: 16px; height: 16px; }

.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  padding: 20px 0;
  border-top: 1px solid #2A2A2A;
  font-size: 12px;
  color: var(--text-muted);
}
.footer-bottom-links { display: flex; gap: 20px; flex-wrap: wrap; }
.footer-bottom-links a { color: var(--text-muted); }
.footer-bottom-links a:hover { color: var(--brand-primary); text-decoration: none; }
.footer-eb-badge { font-size: 11px; color: var(--text-muted); }
.footer-eb-badge a { color: var(--brand-primary); font-weight: 600; }
@media (max-width: 1100px) {
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 36px; }
  .footer-col__brand { grid-column: 1 / -1; }
  .footer-hours-row { flex-direction: column; align-items: flex-start; gap: 20px; }
}
@media (max-width: 580px) {
  .footer-grid { grid-template-columns: 1fr; }
  .footer-bottom { flex-direction: column; text-align: center; }
}

@media (max-width: 600px) {
  }

/* ════════════════════════════════════════════════════════════
   ABOUT PAGE — Split hero (55/45 with founder portrait right)
   Codified during About template build (2026-06-18)
   ──────────────────────────────────────────────────────────── */
.about-hero { background: var(--bg-page); padding: 80px 0; }
.about-hero__row {
  display: grid;
  grid-template-columns: 55% 45%;
  gap: 56px;
  align-items: center;
}
.about-hero__body .eyebrow { color: var(--brand-primary); margin: 0 0 var(--gap-eyebrow-heading); }
.about-hero__body h1 {
  font-family: var(--font-display);
  font-size: clamp(36px, 5vw, 56px);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 0 0 8px;
  color: var(--text-primary);
}
.about-hero__byline {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 24px;
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--text-secondary);
}
.about-hero__byline-chip {
  background: var(--brand-primary);
  color: var(--text-on-dark);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: var(--radius-full);
}
.about-hero__intro {
  font-size: 18px;
  line-height: 1.6;
  color: var(--text-secondary);
  margin: 0 0 28px;
  max-width: 56ch;
}
.about-hero__cta { display: inline-flex; gap: 16px; flex-wrap: wrap; }

/* Portrait frame w/ pink corner accent */
.about-hero__portrait {
  position: relative;
  aspect-ratio: 4 / 5;
  background: var(--bg-soft);
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--border-soft);
}
.about-hero__portrait::before {
  content: '';
  position: absolute;
  top: -10px;
  right: -10px;
  width: 80px;
  height: 80px;
  background: var(--brand-primary);
  border-radius: var(--radius-md);
  z-index: -1;
}
.about-hero__portrait-wrap { position: relative; }
.about-hero__portrait img { width: 100%; height: 100%; object-fit: cover; }

/* G14 placeholder — initials in pink circle */
.portrait-placeholder {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  flex-direction: column;
  background: linear-gradient(135deg, var(--bg-soft) 0%, #eaeaea 100%);
  color: var(--text-secondary);
  text-align: center;
  padding: 24px;
}
.portrait-placeholder__initials {
  width: 120px; height: 120px;
  border-radius: 50%;
  background: var(--brand-primary);
  color: var(--text-on-dark);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display);
  font-size: 48px;
  font-weight: 700;
  margin-bottom: 16px;
  border: 4px dashed rgba(255,255,255,0.4);
}
.portrait-placeholder__label {
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
}
.portrait-placeholder__name {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 600;
  color: var(--text-primary);
  margin-top: 8px;
}

@media (max-width: 968px) {
  .about-hero__row { grid-template-columns: 1fr; gap: 32px; }
  .about-hero__portrait { max-width: 360px; margin: 0 auto; }
}

/* ════════════════════════════════════════════════════════════
   ABOUT — Founder story (long-form prose w/ pullquote)
   ──────────────────────────────────────────────────────────── */
.founder-story { background: var(--bg-soft); padding: var(--section-pad-desktop) 0; }
.founder-story__inner { max-width: 720px; margin: 0 auto; }
.founder-story__eyebrow { color: var(--brand-primary); margin: 0 0 var(--gap-eyebrow-heading); }
.founder-story__inner .eyebrow { color: var(--brand-primary); margin: 0 0 var(--gap-eyebrow-heading); }
.founder-story h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(28px, 4vw, 40px);
  line-height: 1.2;
  color: var(--text-primary);
  margin: 0 0 32px;
}
.founder-story p {
  font-size: 18px;
  line-height: 1.7;
  color: var(--text-secondary);
  margin: 0 0 24px;
}
.founder-story p a { color: var(--brand-primary); font-weight: 600; }

.pullquote {
  border-left: 4px solid var(--brand-primary);
  padding: 8px 0 8px 24px;
  margin: 32px 0;
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 500;
  font-style: italic;
  line-height: 1.4;
  color: var(--text-primary);
}
.pullquote cite {
  display: block;
  font-family: var(--font-body);
  font-style: normal;
  font-size: 14px;
  font-weight: 600;
  color: var(--brand-primary);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-top: 12px;
}

/* ════════════════════════════════════════════════════════════
   ABOUT — Differentiators 3-up (Consistency / Demanding / One-Stop)
   ──────────────────────────────────────────────────────────── */
.differentiators { background: var(--bg-page); padding: var(--section-pad-desktop) 0; }
.differentiators__header { text-align: center; max-width: 720px; margin: 0 auto 56px; }
.differentiators__header .eyebrow { margin-bottom: var(--gap-eyebrow-heading); }
.differentiators__header h2 { color: var(--text-primary); margin: 0; }
.differentiators__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}
.diff-card { text-align: left; }
.diff-card__icon {
  width: 56px; height: 56px;
  background: var(--brand-primary);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 20px;
}
.diff-card__icon svg { width: 26px; height: 26px; color: var(--text-on-dark); }
.diff-card h4 {
  font-family: var(--font-body);
  font-size: 20px;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 12px;
}
.diff-card p { font-size: 15px; line-height: 1.6; color: var(--text-secondary); margin: 0; }
@media (max-width: 968px) { .differentiators__grid { grid-template-columns: 1fr; gap: 36px; } }

/* ════════════════════════════════════════════════════════════
   ABOUT — Faith callout card (pink left-border block)
   ──────────────────────────────────────────────────────────── */
.faith-callout { background: var(--bg-soft); padding: var(--section-pad-desktop) 0; }
.faith-callout__card {
  background: var(--bg-page);
  border-left: 4px solid var(--brand-primary);
  border-radius: var(--radius-md);
  padding: 40px 44px;
  max-width: 720px;
  margin: 0 auto;
  box-shadow: 0 4px 20px rgba(18,18,18,0.04);
}
.faith-callout__eyebrow { color: var(--brand-primary); margin: 0 0 var(--gap-eyebrow-heading); }
.faith-callout__card .eyebrow { color: var(--brand-primary); margin: 0 0 var(--gap-eyebrow-heading); }
.faith-callout__card h3 {
  font-family: var(--font-body);
  font-size: 24px;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 16px;
}
.faith-callout__card p {
  font-size: 16px;
  line-height: 1.7;
  color: var(--text-secondary);
  margin: 0 0 16px;
}
.faith-callout__card p:last-child { margin-bottom: 0; }
.faith-callout__card a { color: var(--brand-primary); font-weight: 600; }

/* ════════════════════════════════════════════════════════════
   ABOUT — Protection / insurance icon-prefixed checklist
   ──────────────────────────────────────────────────────────── */
.protection-block { background: var(--bg-page); padding: var(--section-pad-desktop) 0; }
.protection-block__header { text-align: center; max-width: 720px; margin: 0 auto 40px; }
.protection-block__header .eyebrow { margin-bottom: var(--gap-eyebrow-heading); }
.protection-block__header h3 {
  font-family: var(--font-body);
  font-size: 24px;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 12px;
}
.protection-block__header p { color: var(--text-secondary); margin: 0; font-size: 16px; line-height: 1.6; }

.protection-list {
  list-style: none; padding: 0;
  max-width: 720px; margin: 0 auto;
  display: flex; flex-direction: column; gap: 18px;
}
.protection-list li {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 16px 0;
  border-bottom: 1px solid var(--border-soft);
}
.protection-list li:last-child { border-bottom: none; }
.protection-list .icon {
  width: 40px; height: 40px;
  background: rgba(224, 36, 127, 0.08);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.protection-list .icon svg { width: 20px; height: 20px; color: var(--brand-primary); }
.protection-list .label {
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 4px;
}
.protection-list .detail {
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.5;
}
.protection-list .detail a { color: var(--brand-primary); font-weight: 600; }

/* ════════════════════════════════════════════════════════════
   ABOUT — Credentials 6-card grid (each clickable, external link)
   ──────────────────────────────────────────────────────────── */
.credentials-grid-section { background: var(--bg-soft); padding: var(--section-pad-desktop) 0; }
.credentials-grid-section__header { text-align: center; max-width: 720px; margin: 0 auto 48px; }
.credentials-grid-section__header .eyebrow { margin-bottom: var(--gap-eyebrow-heading); }
.credentials-grid-section__header h2 { color: var(--text-primary); margin: 0 0 12px; }
.credentials-grid-section__header p { color: var(--text-secondary); margin: 0; font-size: 16px; }

.credentials-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.cred-card {
  background: var(--bg-page);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  padding: 24px;
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: all 0.18s ease;
  position: relative;
}
.cred-card:hover {
  border-color: var(--brand-primary);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(18,18,18,0.06);
  text-decoration: none;
}
.cred-card__chip {
  align-self: flex-start;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 5px 10px;
  border-radius: 4px;
  background: var(--brand-darkest);
  color: var(--text-on-dark);
}
.cred-card__name {
  font-family: var(--font-body);
  font-size: 17px;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.3;
}
.cred-card__id {
  font-size: 13px;
  color: var(--text-secondary);
  font-family: var(--font-body);
}
.cred-card__id strong { color: var(--text-primary); font-weight: 600; }

.cred-card__verify {
  margin-top: auto;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--brand-primary);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.cred-card__verify svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  transition: transform 0.18s ease;
}
.cred-card:hover .cred-card__verify svg { transform: translate(2px, -2px); }

@media (max-width: 920px) {
  .credentials-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 580px) {
  .credentials-grid { grid-template-columns: 1fr; }
}

/* Modifier — 4-column variant for Contact page credentials */
.credentials-grid--4 { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 1100px) {
  .credentials-grid--4 { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 580px) {
  .credentials-grid--4 { grid-template-columns: 1fr; }
}

/* ════════════════════════════════════════════════════════════
   TEAM SECTION — About page §8 (white bg)
   Founder + team cards with photo / placeholder initials block
   ──────────────────────────────────────────────────────────── */
.team-section {
  background: var(--bg-page);
  padding: var(--section-pad-desktop) 0;
}
.team-section__header {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 48px;
}
.team-section__header .eyebrow { margin-bottom: var(--gap-eyebrow-heading); }
.team-section__header h2 { color: var(--text-primary); margin: 0 0 12px; }
.team-section__header p { color: var(--text-secondary); margin: 0; font-size: 16px; }

.team-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
.team-card {
  background: #fff;
  border: 1px solid var(--border-default);
  border-radius: 14px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease;
}
.team-card:hover {
  transform: translateY(-3px);
  border-color: var(--brand-primary);
  box-shadow: 0 12px 28px -16px rgba(224, 36, 127, 0.25);
}
.team-card__photo {
  width: 100%;
  aspect-ratio: 4 / 3;
  background: var(--bg-soft);
  display: grid;
  place-items: center;
  overflow: hidden;
}
.team-card__photo--placeholder {
  background: linear-gradient(135deg, var(--bg-soft) 0%, #f0f0f0 100%);
  position: relative;
}
.team-card__photo--placeholder::after {
  content: "Photo coming soon";
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  white-space: nowrap;
}
.team-card__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.team-card__initials {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 56px;
  color: var(--brand-primary);
  letter-spacing: -0.02em;
  line-height: 1;
}
.team-card__body {
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.team-card__name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 22px;
  line-height: 1.2;
  color: var(--text-primary);
  margin: 0;
}
.team-card__role {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--brand-primary);
}
.team-card__bio {
  font-size: 15px;
  line-height: 1.6;
  color: var(--text-secondary);
  margin: 6px 0 0;
}
.team-card__bio a { color: var(--brand-primary); font-weight: 600; }

@media (max-width: 920px) {
  .team-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 580px) {
  .team-grid { grid-template-columns: 1fr; }
}

/* ════════════════════════════════════════════════════════════
   TIMELINE — About page §9 (dark variant)
   Numbered milestones with pink vertical connector line
   ──────────────────────────────────────────────────────────── */
.timeline-section {
  background: var(--bg-dark);
  color: var(--text-on-dark);
  padding: var(--section-pad-desktop) 0;
}
.timeline-section__header {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 48px;
}
.timeline-section__header .eyebrow { color: var(--brand-primary); margin-bottom: var(--gap-eyebrow-heading); }
.timeline-section__header h2 { color: var(--text-on-dark); margin: 0; }

.timeline {
  list-style: none;
  margin: 0 auto;
  padding: 0 0 0 80px;
  max-width: 900px;
  position: relative;
  counter-reset: timeline;
}
/* Pink vertical connector line */
.timeline::before {
  content: "";
  position: absolute;
  left: 27px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--brand-primary);
  opacity: 0.4;
}
.timeline__item {
  position: relative;
  padding-bottom: 28px;
  counter-increment: timeline;
}
.timeline__item:last-child { padding-bottom: 0; }

/* Circular pink badge with the year inside */
.timeline__node {
  position: absolute;
  left: -80px;
  top: -2px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--brand-primary);
  color: var(--text-on-dark);
  display: grid;
  place-items: center;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.02em;
  box-shadow: 0 0 0 4px var(--bg-dark);
  z-index: 1;
}
.timeline__milestone {
  color: rgba(255, 255, 255, 0.88);
  font-size: 16px;
  line-height: 1.65;
  padding-top: 14px;
}
.timeline__milestone strong { color: var(--text-on-dark); font-weight: 700; }

@media (max-width: 580px) {
  .timeline { padding-left: 60px; }
  .timeline::before { left: 21px; }
  .timeline__node {
    left: -60px;
    width: 44px;
    height: 44px;
    font-size: 11px;
  }
  .timeline__milestone { font-size: 15px; padding-top: 10px; }
}

/* ════════════════════════════════════════════════════════════
   CONTACT GRID — Contact page §3 (info card + GHL form embed)
   ──────────────────────────────────────────────────────────── */
.contact-grid-section {
  background: var(--bg-page);
  padding: var(--section-pad-desktop) 0;
}
.contact-grid-section__header {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 48px;
}
.contact-grid-section__header .eyebrow { margin-bottom: var(--gap-eyebrow-heading); }
.contact-grid-section__header h2 { color: var(--text-primary); margin: 0; }

.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 32px;
  max-width: 1140px;
  margin: 0 auto;
  align-items: stretch;
}

/* Left: info card */
.contact-card {
  background: var(--bg-soft);
  border: 1px solid var(--border-default);
  border-radius: 16px;
  padding: 36px 32px;
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.contact-card__block {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}
.contact-card__icon {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border-radius: 10px;
  background: var(--brand-primary);
  display: grid;
  place-items: center;
}
.contact-card__icon svg {
  width: 22px;
  height: 22px;
  color: #fff;
  flex-shrink: 0;
}
.contact-card__label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 4px;
}
.contact-card__value {
  font-size: 16px;
  line-height: 1.5;
  color: var(--text-primary);
  font-weight: 500;
}
.contact-card__value a { color: var(--text-primary); font-weight: 600; }
.contact-card__value a:hover { color: var(--brand-primary); }

.contact-card__hours {
  margin-top: 8px;
  padding-top: 22px;
  border-top: 1px solid var(--border-default);
}
.contact-card__hours h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18px;
  color: var(--text-primary);
  margin: 0 0 12px;
}
.contact-card__hours-row {
  display: flex;
  justify-content: space-between;
  font-size: 15px;
  color: var(--text-secondary);
  padding: 6px 0;
}
.contact-card__hours-row .day { font-weight: 600; color: var(--text-primary); }
.contact-card__hours-row .time { color: var(--text-secondary); }
.contact-card__hours-note {
  margin-top: 12px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-muted);
  font-style: italic;
}

/* Right: GHL form embed slot */
.ghl-form-slot {
  background: #fff;
  border: 1px solid var(--border-default);
  border-radius: 16px;
  padding: 36px 32px;
}
.ghl-form-slot__head { margin-bottom: 22px; }
.ghl-form-slot__head h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 24px;
  color: var(--text-primary);
  margin: 0 0 8px;
}
.ghl-form-slot__head p {
  font-size: 15px;
  line-height: 1.55;
  color: var(--text-secondary);
  margin: 0;
}

.ghl-form-mock {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.ghl-form-mock label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 6px;
}
.ghl-form-mock input,
.ghl-form-mock select,
.ghl-form-mock textarea {
  width: 100%;
  padding: 12px 14px;
  font-family: var(--font-body);
  font-size: 15px;
  border: 1px solid var(--border-default);
  border-radius: 8px;
  background: #fff;
  color: var(--text-primary);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.ghl-form-mock input:focus,
.ghl-form-mock select:focus,
.ghl-form-mock textarea:focus {
  outline: none;
  border-color: var(--brand-primary);
  box-shadow: 0 0 0 3px rgba(224, 36, 127, 0.12);
}
.ghl-form-mock textarea { resize: vertical; min-height: 90px; }
.form-row-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.ghl-form-mock button[type="submit"] {
  background: var(--brand-primary);
  color: var(--text-on-dark);
  border: none;
  border-radius: 8px;
  padding: 14px 24px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: background 0.15s ease;
  margin-top: 6px;
}
.ghl-form-mock button[type="submit"]:hover { background: var(--brand-darkest); }
.ghl-form-slot__embed-note {
  margin-top: 16px;
  padding: 12px 14px;
  background: var(--bg-soft);
  border-left: 3px solid var(--brand-primary);
  border-radius: 4px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--text-muted);
}

@media (max-width: 900px) {
  .contact-grid { grid-template-columns: 1fr; gap: 22px; }
  .contact-card, .ghl-form-slot { padding: 28px 24px; }
  .form-row-2 { grid-template-columns: 1fr; gap: 16px; }
}

/* ════════════════════════════════════════════════════════════
   FAQ BOLD QUESTION RULE (locked global per saved memory)
   Source Serif 4 weight 700 across all template pages.
   Applied to <summary class="faq-bold-question"> elements.
   ──────────────────────────────────────────────────────────── */
.faq-bold-question {
  font-family: 'Source Serif 4', var(--font-display), serif;
  font-weight: 700;
  font-size: 17px;
  line-height: 1.4;
  color: var(--text-primary);
  cursor: pointer;
  padding: 22px 24px 22px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  list-style: none;
}
.faq-bold-question::-webkit-details-marker { display: none; }
.faq-bold-question svg {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  color: var(--brand-primary);
  transition: transform 0.22s ease;
}
.faq-item[open] .faq-bold-question svg { transform: rotate(180deg); }

/* faq-section__list — alias container used on resource-cost-guide.html */
.faq-section__list {
  max-width: 880px;
  margin: 0 auto;
}

/* coverage-block--info-only — semantic marker (same layout as base) */
.coverage-block--info-only { /* layout identical to .coverage-block; class is semantic only */ }

/* form-submit — wrapper around the GHL form's submit button */
.form-submit {
  margin-top: 8px;
  display: flex;
  justify-content: flex-end;
}
.form-submit button[type="submit"] {
  background: var(--brand-primary);
  color: var(--text-on-dark);
  border: none;
  border-radius: 8px;
  padding: 14px 28px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: background 0.15s ease;
}
.form-submit button[type="submit"]:hover { background: var(--brand-darkest); }

/* ════════════════════════════════════════════════════════════
   MEGA-MENU NAV — Services + Service Areas + About + Resources
   Hover-to-open desktop (200ms delay) · click accordion mobile
   ──────────────────────────────────────────────────────────── */

/* Each top-level <li> with a dropdown */
.nav-menu .has-dropdown {
  position: relative;
}
.nav-menu .has-dropdown > a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}
.nav-menu .has-dropdown > a::after {
  content: "";
  display: inline-block;
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid currentColor;
  margin-left: 4px;
  transition: transform 0.2s ease;
  opacity: 0.7;
}
.nav-menu .has-dropdown.is-open > a::after,
.nav-menu .has-dropdown:hover > a::after {
  transform: rotate(180deg);
}

/* Dropdown panel — hidden by default, shows on hover or .is-open */
.dropdown-panel {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  background: #fff;
  border: 1px solid var(--border-default);
  border-radius: 12px;
  box-shadow: 0 18px 48px -16px rgba(18, 18, 18, 0.18);
  padding: 24px;
  min-width: 280px;
  max-width: 92vw;
  z-index: 200;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s ease;
}
.nav-menu .has-dropdown:hover > .dropdown-panel,
.nav-menu .has-dropdown.is-open > .dropdown-panel {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition-delay: 100ms; /* hover delay */
}

/* Mega-menu variant — multi-column grid */
.dropdown-panel--mega {
  width: 880px;
  max-width: 92vw;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  left: 0;
}
.dropdown-panel--mega .dropdown-col {
  min-width: 0;
}
.dropdown-col__heading {
  display: block;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--brand-primary);
  padding: 0 0 10px;
  margin: 0 0 8px;
  border-bottom: 1px solid var(--border-default);
}
.dropdown-col__heading a {
  color: var(--brand-primary);
  text-decoration: none;
}
.dropdown-col__heading a:hover {
  text-decoration: underline;
}

/* Standard (single column) dropdown — for Service Areas / About / Resources */
.dropdown-panel--standard {
  width: 280px;
}

/* Dropdown items */
.dropdown-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.dropdown-list li { margin: 0; }
.dropdown-list a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 10px;
  font-size: 14.5px;
  line-height: 1.4;
  color: var(--text-primary);
  text-decoration: none;
  border-radius: 6px;
  font-weight: 500;
  transition: background 0.12s ease, color 0.12s ease;
}
.dropdown-list a:hover {
  background: var(--bg-soft);
  color: var(--brand-primary);
  text-decoration: none;
}
.dropdown-list a.is-built::after {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #22c55e; /* green dot for built */
  flex-shrink: 0;
}

/* Planned-page badge */
.dropdown-list a.is-planned {
  color: var(--text-secondary);
}
.dropdown-list a.is-planned::after {
  content: "soon";
  background: rgba(224, 36, 127, 0.1);
  color: var(--brand-primary);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 999px;
  flex-shrink: 0;
}

/* Dropdown footer (sub-section link) */
.dropdown-footer {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--border-default);
  text-align: left;
}
.dropdown-footer a {
  font-size: 13px;
  font-weight: 700;
  color: var(--brand-primary);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* Mega-menu mobile fallback */
@media (max-width: 1100px) {
  .dropdown-panel--mega { width: 720px; grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 1023px) {
  /* Hide desktop dropdowns on mobile — replaced by drawer accordion */
  .dropdown-panel { display: none !important; }
  .nav-menu .has-dropdown > a::after { display: none; }
}

/* ─── MOBILE DRAWER ACCORDION ─────────────────────────────── */
.mobile-drawer {
  /* base styles already exist — extend with accordion below */
}
.mobile-drawer__group {
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.mobile-drawer__group:last-of-type { border-bottom: none; }
.mobile-drawer__toggle {
  width: 100%;
  background: transparent;
  border: none;
  color: var(--text-on-dark);
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 16px 4px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  text-align: left;
}
.mobile-drawer__toggle::after {
  content: "";
  display: block;
  width: 8px;
  height: 8px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform 0.2s ease;
  flex-shrink: 0;
  margin-right: 4px;
}
.mobile-drawer__group.is-open .mobile-drawer__toggle::after {
  transform: rotate(-135deg);
}
.mobile-drawer__panel {
  display: none;
  padding: 4px 8px 14px;
}
.mobile-drawer__group.is-open .mobile-drawer__panel {
  display: block;
}
.mobile-drawer__panel .dropdown-col__heading {
  color: var(--brand-primary);
  border-bottom-color: rgba(255, 255, 255, 0.15);
  margin-top: 10px;
}
.mobile-drawer__panel .dropdown-list a {
  color: rgba(255, 255, 255, 0.88);
  padding: 10px 8px;
  font-size: 15px;
}
.mobile-drawer__panel .dropdown-list a:hover {
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-on-dark);
}
.mobile-drawer__panel .dropdown-list a.is-planned { color: rgba(255, 255, 255, 0.6); }
.mobile-drawer__panel .dropdown-footer { border-top-color: rgba(255, 255, 255, 0.15); }
.mobile-drawer__direct {
  display: block;
  color: var(--text-on-dark);
  font-size: 16px;
  font-weight: 600;
  padding: 16px 4px;
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.mobile-drawer__direct:hover { color: var(--brand-primary); text-decoration: none; }

/* ════════════════════════════════════════════════════════════
   IMAGE PLACEHOLDER — Odessa hero (replaces Google Maps iframe)
   Branded gradient + camera icon + caption — drop a real photo
   here at WordPress import.
   ──────────────────────────────────────────────────────────── */
.about-hero__portrait--placeholder {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: 14px;
  overflow: hidden;
  background: linear-gradient(135deg, var(--bg-soft) 0%, #e8d5dd 60%, #f6dde7 100%);
  display: grid;
  place-items: center;
  border: 1px dashed var(--brand-primary);
}
.about-hero__portrait--placeholder::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 30% 20%, rgba(224, 36, 127, 0.08) 0%, transparent 30%),
    radial-gradient(circle at 70% 80%, rgba(224, 36, 127, 0.05) 0%, transparent 40%);
}
.about-hero__portrait--placeholder svg {
  width: 56px;
  height: 56px;
  color: var(--brand-primary);
  opacity: 0.55;
}
.about-hero__portrait--placeholder .placeholder-caption {
  position: absolute;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--brand-primary);
  background: rgba(255, 255, 255, 0.85);
  padding: 6px 14px;
  border-radius: 999px;
  white-space: nowrap;
  z-index: 1;
}

/* ════════════════════════════════════════════════════════════
   SERVICE-CARD MEDIA ZONE — image strip at top of each card
   Used on Resources Hub for behind-the-card imagery
   ──────────────────────────────────────────────────────────── */
.service-card__media {
  position: relative;
  width: calc(100% + 48px);
  margin: -24px -24px 18px;  /* extends edge-to-edge over card padding */
  aspect-ratio: 16 / 9;
  background: linear-gradient(135deg, var(--bg-soft) 0%, #f0e1ea 100%);
  overflow: hidden;
  border-bottom: 1px solid var(--border-default);
  display: grid;
  place-items: center;
}
.service-card__media::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 25% 30%, rgba(224, 36, 127, 0.08) 0%, transparent 35%),
    radial-gradient(circle at 75% 70%, rgba(18, 18, 18, 0.04) 0%, transparent 35%);
}
.service-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.service-card__media-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.6);
  display: grid;
  place-items: center;
  z-index: 1;
  backdrop-filter: blur(4px);
}
.service-card__media-icon svg {
  width: 28px;
  height: 28px;
  color: var(--brand-primary);
}
.service-card__media-caption {
  position: absolute;
  bottom: 10px;
  left: 14px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-secondary);
  background: rgba(255, 255, 255, 0.85);
  padding: 4px 10px;
  border-radius: 999px;
  z-index: 1;
}

/* If a card has a media zone, the original svg-circle icon is hidden — media takes its place */
.service-card:has(.service-card__media) > .service-card__icon { display: none; }

/* ════════════════════════════════════════════════════════════
   RESOURCE PAGE — tighten body-section padding before FAQ
   Removes the dead vertical space between the last bulleted
   list and the FAQ section.
   ──────────────────────────────────────────────────────────── */
.resource-body-section {
  padding-top: 56px;
  padding-bottom: 40px;
}
.resource-body-section.slant-bottom-r {
  padding-bottom: 96px !important; /* was section-pad-desktop + 60 — about 156px */
}
.resource-body > *:last-child { margin-bottom: 0; }

/* ════════════════════════════════════════════════════════════
   DROPDOWN section-heading spacing fix
   Section headings stacked too close to the list above them.
   Add breathing room to any heading that isn't the first child.
   ──────────────────────────────────────────────────────────── */
.dropdown-panel .dropdown-col__heading + * + .dropdown-col__heading,
.dropdown-panel .dropdown-list + .dropdown-col__heading {
  margin-top: 22px;
}
.dropdown-panel--standard .dropdown-list { margin-bottom: 4px; }
.dropdown-panel--standard .dropdown-list:last-of-type { margin-bottom: 0; }

/* Same fix for mobile drawer accordion */
.mobile-drawer__panel .dropdown-list + .dropdown-col__heading {
  margin-top: 18px;
}

/* ════════════════════════════════════════════════════════════
   PREVIEW QA OVERRIDE — hide "soon" badges in nav dropdowns
   .is-planned class stays on the HTML so re-enabling is a
   one-line CSS toggle when launch-ready.
   ──────────────────────────────────────────────────────────── */
.dropdown-list a.is-planned::after,
.mobile-drawer__panel .dropdown-list a.is-planned::after {
  content: none !important;   /* badge hidden — class preserved */
}
.dropdown-list a.is-planned,
.mobile-drawer__panel .dropdown-list a.is-planned {
  color: var(--text-primary);  /* match built items (no muted treatment in preview) */
}
.mobile-drawer__panel .dropdown-list a.is-planned {
  color: rgba(255, 255, 255, 0.88);
}

/* Also hide the green built-dot for visual consistency in preview;
   re-enable with: .dropdown-list a.is-built::after { content: ""; } */
.dropdown-list a.is-built::after,
.mobile-drawer__panel .dropdown-list a.is-built::after {
  content: none !important;
}

/* ════════════════════════════════════════════════════════════
   DROPDOWN text-overflow fix — long labels must wrap cleanly
   inside the 280px standard panel / 280px mega-menu column.
   ──────────────────────────────────────────────────────────── */
.dropdown-list a {
  word-break: break-word;        /* allow long labels to wrap */
  overflow-wrap: anywhere;
  white-space: normal;           /* override flex default */
  line-height: 1.35;
  align-items: flex-start;       /* if a badge is added later, keep it top-aligned */
}
.dropdown-panel {
  max-width: 92vw;
  box-sizing: border-box;
}
.dropdown-panel--standard {
  width: 300px;                  /* widened from 280 for headroom */
}
.dropdown-col {
  min-width: 0;                  /* prevents grid blowout on long labels */
}

/* ════════════════════════════════════════════════════════════
   MOBILE DRAWER v2 — full-screen DARK overlay (Apex Pros-style)
   Replaces white-bg drawer that rendered blank on tap.
   ──────────────────────────────────────────────────────────── */
.mobile-drawer {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  background: var(--bg-dark) !important; /* dark #121212 */
  border-bottom: none !important;
  z-index: 9999 !important;
  padding: 80px 20px 28px !important;
  overflow-y: auto !important;
  transform: translateY(-100%) !important;
  opacity: 0 !important;
  visibility: hidden !important;
  transition: transform 0.28s ease, opacity 0.28s ease, visibility 0.28s ease !important;
  -webkit-overflow-scrolling: touch;
}
.mobile-drawer.is-open {
  transform: translateY(0) !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* Close (X) button — top-right of overlay */
.mobile-drawer::before {
  content: "✕";
  position: absolute;
  top: 22px;
  right: 22px;
  font-size: 26px;
  color: rgba(255,255,255,0.7);
  cursor: pointer;
  font-weight: 300;
  line-height: 1;
}

/* Wipe legacy <ul><li><a> styles inside the drawer — accordion sections only */
.mobile-drawer > ul { display: none !important; }

/* Accordion sections */
.mobile-drawer__group {
  border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
  background: transparent !important;
}
.mobile-drawer__group:first-of-type { border-top: 1px solid rgba(255, 255, 255, 0.1); }
.mobile-drawer__group:last-of-type { border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important; }

.mobile-drawer__toggle {
  width: 100% !important;
  background: transparent !important;
  border: none !important;
  color: var(--text-on-dark) !important;
  font-family: var(--font-body) !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  padding: 20px 4px !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  cursor: pointer !important;
  text-align: left !important;
  min-height: 56px;
}
.mobile-drawer__toggle::after {
  content: "";
  display: block;
  width: 9px;
  height: 9px;
  border-right: 2px solid var(--text-on-dark);
  border-bottom: 2px solid var(--text-on-dark);
  transform: rotate(45deg);
  transition: transform 0.2s ease;
  flex-shrink: 0;
  margin-right: 6px;
  opacity: 0.9;
}
.mobile-drawer__group.is-open .mobile-drawer__toggle {
  background: var(--brand-primary) !important;
}
.mobile-drawer__group.is-open .mobile-drawer__toggle::after {
  transform: rotate(-135deg);
}

.mobile-drawer__panel {
  display: none !important;
  padding: 6px 0 18px !important;
  background: rgba(255,255,255,0.03);
}
.mobile-drawer__group.is-open .mobile-drawer__panel {
  display: block !important;
}

/* Panel section headings (cluster labels like "Commercial Janitorial") */
.mobile-drawer__panel .dropdown-col__heading {
  display: block !important;
  color: var(--brand-primary) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  padding: 14px 20px 8px !important;
  margin: 0 !important;
  border-bottom: 1px solid rgba(255,255,255,0.08) !important;
  background: transparent !important;
}
.mobile-drawer__panel .dropdown-col__heading a {
  color: var(--brand-primary) !important;
  text-decoration: none;
}

/* Panel link rows */
.mobile-drawer__panel .dropdown-list {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: block !important;
}
.mobile-drawer__panel .dropdown-list li {
  border-bottom: 1px solid rgba(255,255,255,0.05) !important;
}
.mobile-drawer__panel .dropdown-list li:last-child {
  border-bottom: none !important;
}
.mobile-drawer__panel .dropdown-list a {
  display: block !important;
  padding: 14px 20px !important;
  color: rgba(255,255,255,0.85) !important;
  font-size: 14.5px !important;
  font-weight: 500 !important;
  letter-spacing: 0.02em !important;
  text-transform: none !important;
  border: none !important;
  background: transparent !important;
  min-height: 48px;
  text-decoration: none;
}
.mobile-drawer__panel .dropdown-list a:hover,
.mobile-drawer__panel .dropdown-list a:active {
  background: rgba(255,255,255,0.05) !important;
  color: var(--text-on-dark) !important;
}

.mobile-drawer__panel .dropdown-footer {
  padding: 12px 20px !important;
  border-top: 1px solid rgba(255,255,255,0.1) !important;
  margin-top: 0 !important;
}
.mobile-drawer__panel .dropdown-footer a {
  color: var(--brand-primary) !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  text-decoration: none;
}

/* Direct top-level link (Contact) */
.mobile-drawer__direct {
  display: block !important;
  color: var(--text-on-dark) !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  padding: 20px 4px !important;
  text-decoration: none !important;
  border-bottom: 1px solid rgba(255,255,255,0.1) !important;
  min-height: 56px;
}
.mobile-drawer__direct:hover {
  color: var(--brand-primary) !important;
  text-decoration: none !important;
}

/* CTA at bottom of drawer */
.mobile-drawer .btn--primary {
  margin-top: 24px !important;
  width: 100% !important;
  padding: 18px 24px !important;
  font-size: 16px !important;
  letter-spacing: 0.04em !important;
}

/* Hide brand-logo-panel and other chrome inside drawer */
.mobile-drawer .brand-logo-panel-wrap { display: none; }

/* ════════════════════════════════════════════════════════════
   DESKTOP MEGA-MENU — restructure Services dropdown
   - 5-column main grid (was 6-column with Specialty stacked)
   - Specialty Services moves to a smaller horizontal FOOTER strip
     below the grid with "View All Services →" link on the right
   ──────────────────────────────────────────────────────────── */

/* Main grid: 5 columns instead of 6 */
.dropdown-panel--mega {
  grid-template-columns: repeat(5, 1fr) !important;
  display: grid !important;
  gap: 24px;
  width: 980px !important;
  max-width: 92vw !important;
}

/* Wrap children into a grid container if needed — keep structure */
.dropdown-panel--mega .dropdown-col {
  min-width: 0;
}

/* The Specialty Services column is now a FULL-WIDTH footer strip */
.dropdown-panel--mega .dropdown-col--specialty {
  grid-column: 1 / -1; /* span full width */
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
  padding-top: 18px;
  margin-top: 4px;
  border-top: 1px solid var(--border-default);
}
.dropdown-panel--mega .dropdown-col--specialty .dropdown-col__heading {
  font-size: 11px !important;  /* smaller than the other headings */
  letter-spacing: 0.12em;
  padding-bottom: 0;
  margin-bottom: 0;
  border-bottom: none;
  white-space: nowrap;
  flex-shrink: 0;
}
.dropdown-panel--mega .dropdown-col--specialty .dropdown-list {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 4px 12px;
  flex: 1 1 auto;
  min-width: 0;
}
.dropdown-panel--mega .dropdown-col--specialty .dropdown-list li::after {
  content: "·";
  margin-left: 12px;
  color: var(--text-muted);
}
.dropdown-panel--mega .dropdown-col--specialty .dropdown-list li:last-child::after {
  content: none;
}
.dropdown-panel--mega .dropdown-col--specialty .dropdown-list a {
  padding: 4px 0;
  font-size: 13.5px;
  white-space: nowrap;
}
.dropdown-panel--mega .dropdown-col--specialty .dropdown-footer {
  margin: 0;
  padding-top: 0;
  border-top: none;
  flex-shrink: 0;
}
.dropdown-panel--mega .dropdown-col--specialty .dropdown-footer a {
  font-size: 13px;
  white-space: nowrap;
}

/* Tablet behavior — 5-col may be too tight, fall to 3-col + specialty full-width */
@media (max-width: 1100px) {
  .dropdown-panel--mega {
    grid-template-columns: repeat(3, 1fr) !important;
    width: 700px !important;
  }
}

/* ════════════════════════════════════════════════════════════
   DESKTOP MEGA-MENU OVERFLOW FIX (Services dropdown)
   - 5 columns need ~1140px to render cleanly
   - Center the panel under the nav (transform: translateX) so it
     never spills past the viewport's right edge
   - Tighter gap + min-width:0 on columns to prevent text-driven
     column-blowout from "Disinfection & Sanitization" heading
   ──────────────────────────────────────────────────────────── */
.dropdown-panel--mega {
  width: 1140px !important;
  max-width: 96vw !important;
  left: 50% !important;
  transform: translateX(-50%) translateY(-6px) !important;
  gap: 20px !important;
  padding: 28px 28px 22px !important;
}
.nav-menu .has-dropdown:hover > .dropdown-panel--mega,
.nav-menu .has-dropdown.is-open > .dropdown-panel--mega {
  transform: translateX(-50%) translateY(0) !important;
}

/* Column headings — allow 2-line wrap, tighter line height */
.dropdown-panel--mega .dropdown-col__heading {
  white-space: normal !important;
  line-height: 1.25 !important;
  word-break: normal;
  hyphens: none;
  min-height: 2.5em; /* equalize heights so item lists align across columns */
  display: flex;
  align-items: flex-end;
}
.dropdown-panel--mega .dropdown-col {
  min-width: 0;
  flex-direction: column;
  display: flex;
}

/* Specialty Services strip — keep "View all services →" inside the panel */
.dropdown-panel--mega .dropdown-col--specialty {
  flex-wrap: nowrap;
}
@media (max-width: 1100px) {
  .dropdown-panel--mega .dropdown-col--specialty {
    flex-wrap: wrap;
  }
}

/* Sticky-nav anchor needed so transform-positioning works */
.has-dropdown { position: relative; }
.nav-menu { position: static; }       /* allow .dropdown-panel--mega to position relative to nav container */
.has-dropdown > .dropdown-panel--standard {
  /* standard dropdowns stay positioned next to their trigger */
  left: 0 !important;
  transform: translateY(-6px) !important;
}
.nav-menu .has-dropdown:hover > .dropdown-panel--standard,
.nav-menu .has-dropdown.is-open > .dropdown-panel--standard {
  transform: translateY(0) !important;
}

/* Tablet fallback — 3 columns at 700-1100px */
@media (max-width: 1100px) {
  .dropdown-panel--mega {
    width: 92vw !important;
    grid-template-columns: repeat(3, 1fr) !important;
  }
}
@media (max-width: 720px) {
  .dropdown-panel--mega {
    display: none !important; /* fall back to mobile drawer */
  }
}

/* ════════════════════════════════════════════════════════════
   DESKTOP MEGA-MENU — overflow fix v2
   Previous attempt anchored the panel under the small Services
   <li>, causing left-edge overflow. Re-anchor to the nav header
   container so it centers to the full nav width.
   ──────────────────────────────────────────────────────────── */

/* Anchor the panel to the .site-nav container, not the <li> */
.site-nav { position: relative !important; }
.site-nav .container { position: relative; }

/* When the menu item contains a mega panel, make it position:static
   so the absolute positioning resolves to .site-nav instead of the <li>.
   Standard dropdowns keep their per-li relative positioning. */
.has-dropdown:has(> .dropdown-panel--mega) { position: static !important; }

.dropdown-panel--mega {
  position: absolute !important;
  top: calc(100% + 8px) !important;
  left: 50% !important;
  right: auto !important;
  transform: translateX(-50%) translateY(-6px) !important;
  width: min(1140px, calc(100vw - 32px)) !important;
  max-width: none !important;
  box-sizing: border-box;
}
.nav-menu .has-dropdown:hover > .dropdown-panel--mega,
.nav-menu .has-dropdown.is-open > .dropdown-panel--mega {
  transform: translateX(-50%) translateY(0) !important;
}

/* Column heading overlap fix — force wrap of long headings */
.dropdown-panel--mega .dropdown-col__heading {
  white-space: normal !important;
  overflow-wrap: break-word !important;
  word-break: break-word;
  hyphens: auto;
  font-size: 11.5px !important;
  letter-spacing: 0.08em !important;
  line-height: 1.3 !important;
  padding-right: 4px;
  min-height: 2.5em;
  display: flex !important;
  align-items: flex-end !important;
}

/* Slightly tighter column item font so longer labels fit cleanly */
.dropdown-panel--mega .dropdown-list a {
  font-size: 13.5px !important;
  padding: 6px 8px !important;
  line-height: 1.4 !important;
}

/* Ensure columns don't blow each other out */
.dropdown-panel--mega > .dropdown-col {
  min-width: 0 !important;
  overflow: hidden;
}

/* Specialty Services strip — same constraint */
.dropdown-panel--mega .dropdown-col--specialty {
  overflow: visible !important; /* let the View All link breathe */
}

/* Tablet (≤1100px) — drop to 3 columns */
@media (max-width: 1100px) {
  .dropdown-panel--mega {
    width: calc(100vw - 32px) !important;
    grid-template-columns: repeat(3, 1fr) !important;
  }
}

/* ════════════════════════════════════════════════════════════
   MEGA-MENU v3 — 6 equal columns (Specialty back to column form)
   - Panel widened to 1200px to fit 6 columns
   - Drop overflow:hidden on columns (it was clipping headings)
   - Force heading text to wrap with hyphenation
   - Specialty Services renders as the 6th column same as others;
     "View all services →" is the dropdown-footer inside that column
   ──────────────────────────────────────────────────────────── */
.dropdown-panel--mega {
  grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  gap: 16px !important;
  width: min(1200px, calc(100vw - 24px)) !important;
  padding: 28px 24px 24px !important;
}

/* Reset Specialty Services back to column-form (overriding the
   horizontal strip rules that were added earlier) */
.dropdown-panel--mega .dropdown-col--specialty {
  grid-column: auto !important;
  display: flex !important;
  flex-direction: column !important;
  border-top: none !important;
  padding-top: 0 !important;
  margin-top: 0 !important;
  align-items: stretch !important;
  flex-wrap: nowrap !important;
  overflow: visible !important;
  gap: 0 !important;
}
.dropdown-panel--mega .dropdown-col--specialty .dropdown-col__heading {
  font-size: 11.5px !important;
  letter-spacing: 0.08em !important;
  white-space: normal !important;
  border-bottom: 1px solid var(--border-default) !important;
  padding: 0 0 10px !important;
  margin: 0 0 8px !important;
  min-height: 2.5em;
}
.dropdown-panel--mega .dropdown-col--specialty .dropdown-list {
  display: flex !important;
  flex-direction: column !important;
  flex-wrap: nowrap !important;
  gap: 2px !important;
  flex: 0 0 auto;
}
.dropdown-panel--mega .dropdown-col--specialty .dropdown-list li::after {
  content: none !important;
}
.dropdown-panel--mega .dropdown-col--specialty .dropdown-list li {
  margin: 0;
}
.dropdown-panel--mega .dropdown-col--specialty .dropdown-list a {
  padding: 6px 8px !important;
  font-size: 13.5px !important;
  white-space: normal !important;
  line-height: 1.4 !important;
}
.dropdown-panel--mega .dropdown-col--specialty .dropdown-footer {
  margin-top: 14px !important;
  padding-top: 12px !important;
  border-top: 1px solid var(--border-default) !important;
  text-align: left !important;
}

/* Drop the column-clipping overflow:hidden (it was cutting headings) */
.dropdown-panel--mega > .dropdown-col {
  overflow: visible !important;
  min-width: 0 !important;
}

/* Heading wrap — allow long category names to break to 2 lines */
.dropdown-panel--mega .dropdown-col__heading {
  white-space: normal !important;
  overflow-wrap: break-word !important;
  word-break: break-word !important;
  hyphens: auto !important;
  font-size: 11.5px !important;
  line-height: 1.3 !important;
  padding-right: 0 !important;
  max-width: 100%;
  display: block !important; /* simpler than flex for wrap behavior */
  min-height: 2.5em;
}

/* Tablet (≤1100px) — 3 columns × 2 rows */
@media (max-width: 1100px) {
  .dropdown-panel--mega {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    width: calc(100vw - 32px) !important;
  }
}
@media (max-width: 720px) {
  .dropdown-panel--mega { display: none !important; }
}

/* ════════════════════════════════════════════════════════════
   MEGA-MENU v4 — shrink everything to fit 6 columns cleanly
   - Heading 10.5px (was 11.5)
   - Force wrap with overflow-wrap: anywhere
   - Explicit display: block + max-width: 100% (kill any implicit
     max-content sizing that's letting headings overflow)
   - Tighter gap (12px) + tighter column padding
   ──────────────────────────────────────────────────────────── */
.dropdown-panel--mega {
  gap: 12px !important;
  padding: 24px 20px 20px !important;
}

.dropdown-panel--mega .dropdown-col__heading,
.dropdown-panel--mega .dropdown-col--specialty .dropdown-col__heading {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  font-size: 10.5px !important;
  letter-spacing: 0.06em !important;
  line-height: 1.35 !important;
  font-weight: 700 !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  word-break: normal !important;
  hyphens: auto !important;
  text-transform: uppercase !important;
  color: var(--brand-primary) !important;
  padding: 0 0 8px !important;
  margin: 0 0 8px !important;
  border-bottom: 1px solid var(--border-default) !important;
  min-height: 2.5em;
}

/* Item text — slightly smaller for column-fit */
.dropdown-panel--mega .dropdown-list a {
  font-size: 12.5px !important;
  padding: 5px 6px !important;
  line-height: 1.4 !important;
  letter-spacing: 0 !important;
}

/* Dropdown-footer (View all services) — keep readable */
.dropdown-panel--mega .dropdown-footer a {
  font-size: 11.5px !important;
  letter-spacing: 0.06em !important;
}

/* Final guard — force the columns to use their grid track width
   and never expand beyond it */
.dropdown-panel--mega > .dropdown-col {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* ════════════════════════════════════════════════════════════
   LOGO FIX — header uses transparent panel (logo has dark text);
   footer uses the white-on-dark variant.
   ──────────────────────────────────────────────────────────── */
.site-nav .brand-logo-panel-wrap {
  background: transparent !important;
  padding: 4px 0 !important;
  border-radius: 0 !important;
}
.site-nav .brand-logo-panel-wrap img,
.site-nav .brand-logo-panel-wrap picture img {
  height: 52px !important;
  width: auto !important;
  display: block !important;
}
@media (max-width: 768px) {
  .site-nav .brand-logo-panel-wrap img,
  .site-nav .brand-logo-panel-wrap picture img {
    height: 40px !important;
  }
}

/* Footer logo — use the white-on-dark footer variant */
.footer-col__brand .brand-logo-panel-wrap img,
.footer-col__brand .brand-logo-panel-wrap picture img {
  height: 64px !important;
  width: auto !important;
  display: block !important;
  filter: none !important;
}

/* ════════════════════════════════════════════════════════════
   SPECIALTY SERVICES heading — force EXACT same size as other 5
   columns (ultra-specificity to defeat any leftover override)
   ──────────────────────────────────────────────────────────── */
.dropdown-panel.dropdown-panel--mega .dropdown-col.dropdown-col--specialty span.dropdown-col__heading,
.dropdown-panel.dropdown-panel--mega .dropdown-col.dropdown-col--specialty .dropdown-col__heading {
  font-size: 10.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  line-height: 1.35 !important;
  text-transform: uppercase !important;
  color: var(--brand-primary) !important;
  padding: 0 0 8px !important;
  margin: 0 0 8px !important;
  border-bottom: 1px solid var(--border-default) !important;
  min-height: 2.5em !important;
  display: block !important;
}

/* ════════════════════════════════════════════════════════════
   FINAL HEADING SIZE LOCK (overrides all prior conflicting rules)
   All 6 mega-menu column headings rendered at EXACTLY 12px.
   Bumped from 10.5 → 12 to be more legible per visual feedback.
   ──────────────────────────────────────────────────────────── */
nav .dropdown-panel--mega .dropdown-col .dropdown-col__heading,
nav .dropdown-panel--mega .dropdown-col--specialty .dropdown-col__heading,
nav .dropdown-panel.dropdown-panel--mega .dropdown-col.dropdown-col--specialty .dropdown-col__heading,
nav .dropdown-panel.dropdown-panel--mega .dropdown-col.dropdown-col--specialty span.dropdown-col__heading {
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  line-height: 1.3 !important;
  text-transform: uppercase !important;
  color: var(--brand-primary) !important;
  padding: 0 0 10px !important;
  margin: 0 0 10px !important;
  border-bottom: 1px solid var(--border-default) !important;
  border-top: none !important;
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  min-height: 2.6em !important;
  white-space: normal !important;
  overflow-wrap: break-word !important;
  word-break: normal !important;
  hyphens: auto !important;
  box-sizing: border-box !important;
}

/* Heading anchor inherits all the above (forces same size for the <a> tag inside) */
nav .dropdown-panel--mega .dropdown-col__heading a {
  font-size: inherit !important;
  font-weight: inherit !important;
  letter-spacing: inherit !important;
  text-transform: inherit !important;
  color: inherit !important;
}

/* ════════════════════════════════════════════════════════════
   POWERED-BY-EB badge — now uses inline SVG logo (was text link)
   ──────────────────────────────────────────────────────────── */
.footer-eb-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.footer-eb-badge__label {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.65);
  letter-spacing: 0.02em;
}
.footer-eb-badge a {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  transition: transform 0.18s ease;
}
.footer-eb-badge a:hover {
  transform: translateY(-1px);
  text-decoration: none;
}
.footer-eb-badge__logo {
  width: 32px;
  height: 36px;
  display: block;
}


/* ╔═══════════════════════════════════════════════════════════════╗
   ║  POST-QA POLISH PACK (v1 + v2 + v3 + FINAL OVERRIDE)         ║
   ║  ────────────────────────────────────────────────────────────  ║
   ║  These rules are already baked inline into every page-body.  ║
   ║  html. They live here too so Elementor editor previews +      ║
   ║  any Astra fallback rendering match the live pages.          ║
   ╚═══════════════════════════════════════════════════════════════╝ */

/* ── PHONE ICON — SVG (replaces color emoji, inherits currentColor) ──
   Buttons render as: <a class="btn btn--outline"><svg .../>Text</a>
   No CSS needed for the SVG itself — it inherits color from parent.  */

/* ── OUTLINED BUTTONS ON PINK/DARK — white icon + border + text ── */
.cta-band .btn.btn--outline,
section[style*="background: var(--brand-primary)"] .btn.btn--outline,
section[style*="background:var(--brand-primary)"] .btn.btn--outline,
section[style*="background: #E0247F"] .btn.btn--outline,
.cta-band__ctas .btn.btn--outline,
section[style*="background-image"] .btn.btn--outline {
  color: #ffffff !important;
  border-color: #ffffff !important;
  background: transparent !important;
}
.cta-band .btn.btn--outline:hover,
.cta-band__ctas .btn.btn--outline:hover {
  background: #ffffff !important;
  color: var(--brand-primary) !important;
}
.cta-band .btn.btn--outline,
.cta-band .btn.btn--outline * { color: #ffffff !important; }

/* ── FAQ +/− indicator (works across all details/summary patterns) ── */
details.faq-item summary,
details summary {
  position: relative !important;
  cursor: pointer !important;
  list-style: none !important;
  padding-right: 44px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px !important;
}
details.faq-item summary::-webkit-details-marker,
details summary::-webkit-details-marker { display: none !important; }
details.faq-item summary::marker,
details summary::marker { content: '' !important; display: none !important; }
details.faq-item summary::after,
details summary::after {
  content: '+' !important;
  position: absolute !important;
  right: 12px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  font-size: 26px !important;
  font-weight: 300 !important;
  line-height: 1 !important;
  color: var(--brand-primary) !important;
  transition: transform 0.2s ease !important;
  width: 24px !important;
  height: 24px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
details.faq-item[open] summary::after,
details[open] summary::after { content: '−' !important; }

/* ── CAREERS + generic content-section bullet visibility on soft-gray card ── */
section.content-section ul,
section.content-section ul li,
section.content-section div[style*="background: var(--bg-soft)"] ul,
section.content-section div[style*="background: var(--bg-soft)"] ul li,
section.content-section div[style*="background: var(--bg-soft)"] {
  color: var(--text-primary) !important;
}

/* ── CTA BANNER — white text + centered h2 (defeats inline margin: 0 0 16px) ── */
.cta-band { text-align: center !important; color: #ffffff !important; }
.cta-band h2,
.cta-band p,
.cta-band .cta-band__ctas,
.cta-band > .container { text-align: center !important; }
.cta-band h2,
section.cta-band h2,
section[style*="background: var(--brand-primary)"] h2,
section[style*="background:var(--brand-primary)"] h2 {
  text-align: center !important;
  max-width: none !important;
  margin-left: auto !important;
  margin-right: auto !important;
  width: auto !important;
  display: block !important;
  color: #ffffff !important;
}
.cta-band p,
section.cta-band p,
section[style*="background: var(--brand-primary)"] p,
section[style*="background:var(--brand-primary)"] p {
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
  color: #ffffff !important;
}
.cta-band .cta-band__ctas {
  display: flex !important;
  justify-content: center !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
}
.cta-band .btn.btn--inverted {
  background: #ffffff !important;
  color: var(--text-primary) !important;
  border-color: #ffffff !important;
}
.cta-band .btn.btn--inverted:hover {
  background: transparent !important;
  color: #ffffff !important;
  border-color: #ffffff !important;
}

/* ── FAQ SECTION — centered headline + max-width ── */
.faq-section h2,
.faq-section > .container > h2:first-of-type { text-align: center !important; }
.faq-section h2 {
  margin-left: auto !important;
  margin-right: auto !important;
  max-width: 900px !important;
}
.faq-section .faq-section__intro {
  max-width: 720px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  margin-bottom: 32px !important;
  text-align: center !important;
}
.faq-list { max-width: 820px !important; margin: 0 auto !important; }

/* ── SIBLING-RESOURCES cards — 3-col grid on desktop, 2-col tablet, 1-col mobile ── */
section.services-overview .service-grid,
section.services-overview .service-grid--3col {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 24px !important;
  align-items: stretch !important;
}
section.services-overview .service-card {
  display: flex !important;
  flex-direction: column !important;
  padding: 28px !important;
  background: #ffffff !important;
  border: 1px solid var(--border-default) !important;
  border-radius: 12px !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease !important;
  text-decoration: none !important;
  min-height: 180px !important;
}
section.services-overview .service-card:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 12px 24px rgba(0,0,0,0.08) !important;
  text-decoration: none !important;
}
section.services-overview .service-card h3 {
  color: var(--brand-primary) !important;
  font-size: 20px !important;
  font-weight: 700 !important;
  margin: 0 0 12px !important;
}
section.services-overview .service-card p {
  color: var(--text-secondary) !important;
  font-size: 15px !important;
  line-height: 1.5 !important;
  margin: 0 0 auto !important;
  padding-bottom: 16px !important;
}
section.services-overview .service-card__cta {
  color: var(--brand-primary) !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  margin-top: auto !important;
}
section.services-overview .eyebrow,
section.services-overview h2 { text-align: center !important; }
section.services-overview h2 { max-width: 720px !important; margin: 0 auto 32px !important; }

@media (max-width: 640px) {
  section.services-overview .service-grid,
  section.services-overview .service-grid--3col { grid-template-columns: 1fr !important; }
}
@media (min-width: 641px) and (max-width: 1024px) {
  section.services-overview .service-grid,
  section.services-overview .service-grid--3col { grid-template-columns: repeat(2, 1fr) !important; }
}

/* ── STAT-STRIP + DIFFERENTIATORS FINAL OVERRIDE ── */
section.hub-stat-strip {
  background: var(--brand-primary) !important;
  background-color: #E0247F !important;
  color: #ffffff !important;
}
section.hub-stat-strip .hub-stat,
section.hub-stat-strip .hub-stat-strip__item {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
}
section.hub-stat-strip .hub-stat__title,
section.hub-stat-strip .hub-stat-strip__num { font-size: 42px !important; }
section.differentiators .differentiators__grid {
  grid-template-columns: repeat(2, 1fr) !important;
}

/* ── FAQ PAGE grouped-sections styling (Odessa FAQ page rebuild) ── */
.faq-group-heading {
  color: var(--brand-primary) !important;
  font-family: var(--font-display) !important;
  font-size: 32px !important;
  font-weight: 700 !important;
  text-align: center !important;
  padding-bottom: 14px !important;
  border-bottom: 2px solid rgba(224, 36, 127, 0.2) !important;
  margin: 0 auto 32px !important;
  max-width: 720px !important;
}/* End custom CSS */