/* === Red Barn Media Group - Combined Optimized Styles - Central PA Spray Foam === */

/* === CSS Custom Properties === */
:root {
  /* Colors — from the Central PA Spray Foam logo */
  --color-black: #000000;
  --color-green: #007f3f; /* brand primary (logo wordmark) — 5.1:1 on white */
  --color-green-dark: #00602f; /* hover-darken for green buttons/links */
  --color-light-green: #4db380; /* DARK SURFACES ONLY — 2.6:1 on white */
  --color-pale-green: #c8ecd7; /* hero eyebrow on scrimmed photo */
  --color-blue: #2042ae; /* brand secondary (logo "SPRAY FOAM") — 8.6:1 on white */
  --color-blue-dark: #172f7c;
  --color-orange: #ff7910; /* brand accent — 2.6:1 on white: dark text or dark surfaces only */
  --color-orange-dark: #c85c05;
  --color-white: #ffffff;
  --color-light: #ededed;
  --color-gray: #333333;
  --color-light-gray: #808080; /* large text / non-text only — 3.5:1 on white */
  --color-gray-666: #666;

  /* Gradient Greens — lightest stop #007f3f keeps white text >= 5:1 across the sweep */
  --color-green-gradient-start: #007f3f;
  --color-green-gradient-mid: #00552a;
  --color-green-gradient-end: #00351b;

  /* Typography */
  --font-purista: purista-web, sans-serif;
  --font-inter: inter-variable, sans-serif;
  --font-weight-bold: 700;
  --font-weight-semibold: 600;

  /* Layout */
  --menu-height: 8rem;
  --menu-height-shrink: 6rem;
  --hero-height: 800px;
  --hero-padding: 3rem;
  --transition-standard: 0.25s;
  --border-radius-standard: 1rem;
  --box-shadow-dropdown: 0 3rem 3rem rgba(0, 0, 0, 0.175);
}

/* === WCAG SAFETY NET :: DEFAULT LINK COLOR BY PARENT BG ===
   Each surface publishes --cpsf-link / --cpsf-link-hover; the nearest surface wins.
   Light surfaces -> brand blue; dark surfaces -> light green / white.
   :where() keeps specificity at (0,0,1) so explicit colors still win. */
:where(body, .bg-white, .bg-light, .bg-light-emerald, .card,
       .dropdown-menu, .card-accordion .accordion-item, .cpsf-faq .accordion-item,
       .cpsf-service-card, .cpsf-subpage-card, .cpsf-trust-card,
       .cpsf-icon-card, .cpsf-step-card, .cpsf-form-card) {
  --cpsf-link: var(--color-blue);
  --cpsf-link-hover: var(--color-blue-dark);
  --cpsf-eyebrow: var(--color-green-dark); /* 7.4:1 white, 6.6:1 bg-light */
}
:where(.bg-black, .bg-green, .bg-blue, .bg-deep-orange, .card-gradient-green,
       .cpsf-rollover, .cpsf-hero-intro, .menu-container, .offcanvas-body) {
  --cpsf-link: var(--color-light-green);
  --cpsf-link-hover: var(--color-white);
  --cpsf-eyebrow: var(--color-pale-green);
}
a:where(:not(.btn)) {
  color: var(--cpsf-link, var(--color-blue));
}
a:where(:not(.btn)):where(:hover, :focus-visible) {
  color: var(--cpsf-link-hover, var(--color-blue-dark));
}

/* === WCAG SAFETY NET :: ACCENT ICON COLOR BY PARENT SURFACE ===
   Same shape as the link system. Use class "cpsf-icon" on accent icons
   (instead of hardcoding .text-green) so they adapt to the surface. */
:where(body, .bg-white, .bg-light, .bg-light-emerald, .card,
       .dropdown-menu, .card-accordion .accordion-item, .cpsf-faq .accordion-item,
       .cpsf-service-card, .cpsf-subpage-card, .cpsf-trust-card,
       .cpsf-icon-card, .cpsf-step-card, .cpsf-form-card) {
  --cpsf-icon: var(--color-green);
}
:where(.bg-black, .bg-green, .bg-blue, .bg-deep-orange, .card-gradient-green,
       .cpsf-rollover, .cpsf-hero-intro, .offcanvas-body) {
  --cpsf-icon: var(--color-white);
}
.cpsf-icon,
.cpsf-step-list li i,
.cpsf-trust-card i {
  color: var(--cpsf-icon, var(--color-green));
}
.cpsf-trust-card i.fa-inverse {
  color: var(--color-pale-green);
}

/* === Base Styles === */
html,
body {
  width: 100%;
  height: 100%;
}

body {
  color: var(--color-black);
  font-family: var(--font-inter);
  font-weight: 400;
  background-color: var(--color-white);
}

/* === Typography === */
h1,
.h1,
h2,
.h2,
h3,
.h3,
h4,
.h4,
h5,
.h5,
h6,
.h6 {
  font-family: var(--font-purista);
  text-transform: uppercase;
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.015em;
}

/* === Typographic Hierarchy === */
/* Eyebrow (overline) above section titles — color adapts to the surface. */
.cpsf-eyebrow {
  display: block;
  font-family: var(--font-purista);
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.8rem;
  color: var(--cpsf-eyebrow, var(--color-green-dark));
  margin-bottom: 0.5rem;
}

/* Section title with gradient accent bar. Use on the section's h2. */
.cpsf-section-title {
  font-size: clamp(1.6rem, 1.2rem + 1.8vw, 2.5rem);
  line-height: 1.08;
  margin-bottom: 1rem;
}
.cpsf-section-title::after {
  content: '';
  display: block;
  width: 56px;
  height: 4px;
  margin-top: 0.75rem;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--color-green), var(--color-orange));
}
.text-center .cpsf-section-title::after,
.cpsf-section-title.text-center::after {
  margin-left: auto;
  margin-right: auto;
}

/* Lead paragraph — the first paragraph under a section title. */
.cpsf-lead {
  font-size: 1.05rem;
  line-height: 1.65;
}

.purista {
  font-family: var(--font-purista);
}
.bold {
  font-weight: var(--font-weight-bold);
}
.semibold {
  font-weight: var(--font-weight-semibold);
}

.inter {
  font-family: var(--font-inter);
}
p,
ul li,
ol li,
table {
  font-size: 0.9rem;
  font-weight: 400;
}
.fs-8 {
  font-size: 0.75rem;
}
.fs-9 {
  font-size: 0.5rem;
}

/* Ensure .fs-8 affects descendants overriding base element rules */
.fs-8 p,
.fs-8 li,
.fs-8 table {
  font-size: inherit;
}

/* === Menu Styles === */
.menu-container {
  background: transparent;
  margin-top: 0 !important;
}

.menu-container.shrink-menu {
  /* Scrolled: the bar now overlays the hero/content, so keep it translucent. */
  background: rgba(0, 0, 0, 0.65);
  box-shadow: 0 1px 0 0 var(--color-light-green);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}

.cpsf-menu-padding {
  padding: 0 1.25rem;
  transition: padding var(--transition-standard);
}

.navbar-nav {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: var(--menu-height);
  transition: height var(--transition-standard);
}

.shrink-menu .navbar-nav {
  height: var(--menu-height-shrink);
}

/* Navigation Links */
.menu-container .navbar-light .navbar-nav .nav-link {
  color: var(--color-white);
  font-family: var(--font-purista);
  text-transform: uppercase;
  font-weight: 700;
  font-size: 0.9rem;
}

.nav-fill .nav-item .dropdown-item {
  text-align: left !important;
}

.menu-container .navbar-light .navbar-nav .nav-link:is(:hover, :active, :focus) {
  color: var(--color-light-green);
}

/* Dropdown Styles */
.nav-item .dropdown-item {
  color: var(--color-black);
  font-family: var(--font-purista);
  font-weight: 600;
  font-size: 0.9rem;
}

.nav-item .dropdown-item:is(:hover, :active, :focus) {
  background-color: #eee;
  border-radius: 0.25rem;
  color: var(--color-green) !important;
}

/* Group labels inside the services dropdown ("What We Service" / "Products We Offer") */
.cpsf-dropdown-header {
  color: var(--color-green);
  font-family: var(--font-purista);
  font-weight: 700;
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.35rem 1rem 0.15rem;
  margin-bottom: 0;
}

.navbar-expand-xl .navbar-nav .dropdown-menu {
  background: #fff;
  border: 0;
  box-shadow: var(--box-shadow-dropdown);
  padding: 0.5rem;
}

.navbar-expand-xl .navbar-nav .dropdown-menu.main-dropdown {
  top: 2rem;
  padding: 0.5rem;
  border-radius: var(--border-radius-standard);
  transition: top var(--transition-standard);
}

.navbar-expand-xl .navbar-nav .dropdown-menu.sub-dropdown {
  border-radius: var(--border-radius-standard);
}

/* Logo Styles */
.menu-container .container-fluid.cpsf-logo-row {
  transition: all var(--transition-standard);
}

.cpsf-logo-desktop {
  position: absolute;
  width: 198px;
  height: 108px;
  top: -2rem;
  left: 0;
  right: 0;
  margin: 0 auto;
  transition: all var(--transition-standard);
}

.shrink-menu .cpsf-logo-desktop {
  width: 135px;
  height: 74px;
  top: -1.5rem;
}

/* === Hero Styles ===
   Pages set their own hero imagery inline via CSS custom properties:
   <div class="cpsf-hero-intro" style="--hero-sm:url('/img/...-800-600.webp');
        --hero-md:url('/img/...-1200-800.webp'); --hero-lg:url('/img/...-2560-1000.webp')">
   Also preload the matching size in <head> (see doc-header LCP preload). */
.cpsf-hero-intro {
  height: var(--hero-height);
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  overflow: hidden;
  margin-top: 0;
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  background-color: var(--color-green-gradient-end); /* paints before image loads */
  background-image: var(--hero-sm, url('../img/cpsf-hero-default-800-600.webp'));
}
@media (min-width: 768px) {
  .cpsf-hero-intro {
    background-image: var(--hero-md, url('../img/cpsf-hero-default-1200-800.webp'));
  }
}
@media (min-width: 1200px) {
  .cpsf-hero-intro {
    background-image: var(--hero-lg, url('../img/cpsf-hero-default-2560-1000.webp'));
  }
}

/* Contrast scrim — spray-foam photos are often near-white; the scrim guarantees
   white hero text holds >= 4.5:1 no matter the photo. Content sits above it. */
.cpsf-hero-intro::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.65);
}
.cpsf-hero-intro > * {
  position: relative;
  z-index: 1;
}

/* Anchor CTA to bottom of hero container */
.cpsf-hero-intro .hero-cta-row {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 3.8rem;
}

.cpsf-hero-intro.cpsf-sub-page {
  height: fit-content;
  padding-top: 16rem;
  padding-bottom: 4rem;
}

.cpsf-hero-intro h1 {
  font-size: calc(1.5rem + 1.25vw);
  line-height: 1;
  color: var(--color-white);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
}
.cpsf-hero-intro h2 {
  font-size: calc(0.75rem + 1vw);
  line-height: 1;
  color: var(--color-pale-green);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
}
.cpsf-hero-intro p {
  color: var(--color-white);
}

.cpsf-hero-intro.cpsf-sub-page h1 {
  font-size: calc(2rem + 0.75vw);
  line-height: 1;
  color: var(--color-white);
  font-weight: var(--font-weight-bold);
}
.cpsf-hero-intro.cpsf-sub-page p {
  color: var(--color-white);
}

/* === Rollover Cards ===
   Photo-backed service cards. Put the photo in data-cpsf-bg, NOT an inline
   style, so custom.js can defer the fetch until the card nears the viewport:
   <div class="card cpsf-rollover" data-cpsf-bg="/img/...">
   The ::before scrim guarantees the white card text passes on any photo.
   background-color below is the pre-load / no-JS fallback. */
.cpsf-rollover {
  position: relative;
  overflow: hidden;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-color: #0e0e0e; /* fallback */
  border: 0;
}
.cpsf-rollover::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.65);
}
.cpsf-rollover .card-body {
  position: relative;
  z-index: 1;
  color: #fff;
}

/* === Button Styles === */
.btn {
  padding: 0.75rem 1rem;
  font-family: var(--font-purista);
  text-transform: uppercase;
  font-weight: var(--font-weight-bold);
  border-radius: 50rem;
  font-size: 1rem;
  margin-bottom: 1rem;
}

.btn.btn-menu,
.btn.btn-sm {
  padding: 0.65rem 0.75rem;
  font-size: 0.85rem;
}
.btn.btn-lg {
  padding: 0.75rem 1.5rem;
  font-size: 1rem;
}
.btn.btn-xl {
  padding: 1.25rem 1.75rem;
  font-size: 1.5rem;
}

/* Hovers DARKEN — a lighter fill can't hold >= 4.5:1 with a white label. */
.btn-green,
.btn-252454 {
  color: var(--color-white);
  background: var(--color-green);
  border-color: var(--color-green);
}
.btn-green:is(:hover, :active, :focus),
.btn-252454:is(:hover, :active, :focus) {
  color: var(--color-white);
  background: var(--color-green-dark);
  border-color: var(--color-green-dark);
}

.btn-blue {
  color: var(--color-white);
  background: var(--color-blue);
  border-color: var(--color-blue);
}
.btn-blue:is(:hover, :active, :focus) {
  color: var(--color-white);
  background: var(--color-blue-dark);
  border-color: var(--color-blue-dark);
}

/* Orange CTA carries a BLACK label — white on #ff7910 is 2.6:1 and fails. */
.btn-orange {
  color: var(--color-black);
  background: var(--color-orange);
  border-color: var(--color-orange);
}
.btn-orange:is(:hover, :active, :focus) {
  color: var(--color-black);
  background: var(--color-orange-dark);
  border-color: var(--color-orange-dark);
}

.btn-black {
  color: var(--color-white);
  background: var(--color-black);
  border-color: var(--color-black);
}
.btn-black:is(:hover, :active, :focus) {
  color: var(--color-white);
  background: var(--color-gray-666);
  border-color: var(--color-gray-666);
}
.btn-outline-black {
  color: var(--color-black);
  background: transparent;
  border-color: var(--color-black);
}
.btn-outline-black:is(:hover, :active, :focus) {
  color: var(--color-gray-666);
  background: transparent;
  border-color: var(--color-gray-666);
}

/* === Color Utility Classes === */
/* NOTE: !important is generally acceptable for utility classes to ensure they override component styles. */
.text-black {
  color: var(--color-black) !important;
}
.bg-black {
  background-color: var(--color-black) !important;
}
.border-black {
  border-color: var(--color-black) !important;
}

.text-green {
  color: var(--color-green) !important; /* 5.1:1 on white; headings/large text only on .bg-light */
}
.bg-green {
  background-color: var(--color-green) !important;
}
.border-green {
  border-color: var(--color-green) !important;
}

.text-blue {
  color: var(--color-blue) !important;
}
.bg-blue {
  background-color: var(--color-blue) !important;
}
.border-blue {
  border-color: var(--color-blue) !important;
}

.text-orange {
  color: var(--color-orange) !important; /* DARK SURFACES ONLY — 2.6:1 on white */
}
.bg-orange {
  background-color: var(--color-orange) !important; /* pair with black text */
}
.border-orange {
  border-color: var(--color-orange) !important;
}

.bg-light-emerald {
  background-color: #e6f4ec !important; /* pale green tint (menu buttons) */
}
.bg-deep-orange {
  background-color: var(--color-orange-dark) !important;
}

/* Gradient card background (dark green sweep, white text safe at every stop) */
.card-gradient-green {
  background: linear-gradient(
    135deg,
    var(--color-green-gradient-end) 0%,
    var(--color-green-gradient-end) 65%,
    var(--color-green-gradient-mid) 80%,
    var(--color-green-gradient-start) 100%
  );
  color: var(--color-white);
  box-shadow: 0 0.5rem 1.25rem rgba(0, 0, 0, 0.25);
}

.text-light {
  color: var(--color-light) !important;
}
.bg-light {
  background-color: var(--color-light) !important;
}
.border-light {
  border-color: var(--color-light) !important;
}

.text-light-gray {
  color: var(--color-light-gray) !important; /* large text / non-text only on light */
}

.text-gray {
  color: var(--color-gray) !important;
}
.border-gray {
  border: 1px solid var(--color-gray) !important;
}

.text-666 {
  color: var(--color-gray-666) !important;
}

/* === Component Styles === */
.img-fluid {
  margin-bottom: 2rem;
}

ul.list-group,
ol.list-group,
.card,
.table-responsive,
table.table-bordered {
  border-radius: var(--border-radius-standard) !important;
  margin-bottom: 1.5rem;
}
.card.h-100 {
  margin-bottom: 0;
}
.card .card-body {
  padding: 1.5rem;
}
.card.calculator .form-label {
  font-size: 0.85rem;
}
ul li strong {
  color: inherit;
}

.accordion-button i {
  transition: transform 0.3s ease-in-out;
}

.accordion-button:not(.collapsed) i {
  transform: rotate(45deg);
}

.accordion {
  background: transparent;
  border: none;
  color: var(--color-black);
}
.accordion-item,
.accordion-header,
.accordion-button {
  background: transparent;
  border: none;
  color: var(--color-black);
}
.accordion-item {
  border-bottom: 0.25px solid #d8dfe5;
}
.accordion-button {
  font-size: 0.9rem;
}
.accordion-body {
  font-size: 0.8rem;
}

/* OPTIMIZED: Grouped accordion radius resets */
.accordion-item:last-of-type,
.accordion-item:last-of-type .accordion-button,
.accordion-item:last-of-type .accordion-collapse {
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}

/* Ensure first accordion button is not rounded on the top */
.accordion-item:first-of-type .accordion-header .accordion-button {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

.accordion-button:not(.collapsed) {
  color: var(--color-light-green); /* on black: 8.1:1 (brand green fails at 4.2) */
  box-shadow: none;
  background: black;
}
.accordion-button::after {
  display: none !important;
}

/* === CPSF FAQ Accordion ===
   One accordion per page: <div class="accordion cpsf-faq" id="pageFaq"> with every
   .accordion-collapse pointing data-bs-parent="#pageFaq" → one item open at a time.
   Button icon markup: <i class="fa-sharp fa-solid fa-plus ms-auto"></i> (rotates to ×). */
.cpsf-faq .accordion-item {
  background: var(--color-white);
  border: 1px solid #e3e8e5;
  border-bottom: 1px solid #e3e8e5;
  border-radius: var(--border-radius-standard);
  margin-bottom: 0.85rem;
  box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.05);
  overflow: hidden;
  transition: box-shadow var(--transition-standard), border-color var(--transition-standard);
}
.cpsf-faq .accordion-item:has(.accordion-button:not(.collapsed)) {
  border-color: var(--color-green);
  box-shadow: 0 0.5rem 1.25rem rgba(0, 127, 63, 0.12);
}
.cpsf-faq .accordion-item:last-of-type,
.cpsf-faq .accordion-item:last-of-type .accordion-button,
.cpsf-faq .accordion-item:last-of-type .accordion-collapse,
.cpsf-faq .accordion-item:first-of-type .accordion-header .accordion-button {
  border-radius: var(--border-radius-standard);
}
.cpsf-faq .accordion-button {
  background: var(--color-white);
  color: var(--color-black);
  font-family: var(--font-purista);
  font-weight: var(--font-weight-semibold);
  font-size: 1rem;
  text-align: left;
  padding: 1.1rem 1.25rem;
  display: flex;
  align-items: center;
  gap: 0.85rem;
}
.cpsf-faq .accordion-button i {
  flex: 0 0 auto;
  width: 1.9rem;
  height: 1.9rem;
  border-radius: 50%;
  background: #e6f4ec;
  color: var(--color-green-dark);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  transition: transform 0.3s ease-in-out, background var(--transition-standard),
    color var(--transition-standard);
}
.cpsf-faq .accordion-button:not(.collapsed) {
  background: #e6f4ec;
  color: var(--color-green-dark); /* 6.6:1 on the tint */
  box-shadow: none;
}
.cpsf-faq .accordion-button:not(.collapsed) i {
  background: var(--color-green);
  color: var(--color-white); /* 5.1:1 */
}
.cpsf-faq .accordion-button:focus-visible {
  outline: 3px solid var(--color-blue);
  outline-offset: -3px;
}
.cpsf-faq .accordion-body {
  padding: 0.5rem 1.25rem 1.25rem;
  font-size: 0.875rem;
  color: var(--color-gray);
}

/* Card Accordion Variant */
.card-accordion {
  background: transparent;
}

.card-accordion .accordion-item {
  background-color: var(--color-light);
  border: 0;
  border-bottom: 0;
  margin-bottom: 0.75rem;
  border-radius: var(--border-radius-standard);
}

.card-accordion .accordion-header {
  background: transparent;
  border: 0;
}

.card-accordion .accordion-button {
  background-color: var(--color-light);
  color: var(--color-black);
  border: 0;
  box-shadow: none;
}

.card-accordion .accordion-button:not(.collapsed) {
  background-color: var(--color-light);
  color: var(--color-black);
  box-shadow: none;
}

.card-accordion .accordion-body {
  background-color: var(--color-light);
  color: var(--color-black);
  border: 0;
  padding-top: 0;
}
.card-accordion .accordion-body a {
  font-weight: var(--font-weight-bold); /* color comes from the link context system */
}

/* === CPSF Card Family ===
   Light component cards — all registered in the link/icon context systems above. */
.cpsf-lift {
  transition: transform var(--transition-standard) ease, box-shadow var(--transition-standard) ease;
}
.cpsf-lift:hover {
  transform: translateY(-4px);
  box-shadow: 0 0.9rem 1.75rem rgba(0, 0, 0, 0.12);
}

/* Trust card — used by the cpsf-trust-row universal block */
.cpsf-trust-card {
  background: var(--color-white);
  border: 1px solid #e3e8e5;
  border-top: 4px solid var(--color-green);
  border-radius: var(--border-radius-standard);
  padding: 1.25rem 1rem;
  height: 100%;
  text-align: center;
}
.cpsf-trust-card .fa-stack {
  margin-bottom: 0.25rem;
}

/* Icon card — for benefit/feature grids (3-6 parallel points) */
.cpsf-icon-card {
  background: var(--color-white);
  border: 1px solid #e3e8e5;
  border-radius: var(--border-radius-standard);
  padding: 1.5rem;
  height: 100%;
}
.cpsf-icon-badge {
  width: 3rem;
  height: 3rem;
  border-radius: 0.75rem;
  background: #e6f4ec;
  color: var(--cpsf-icon, var(--color-green));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  margin-bottom: 0.85rem;
}

/* Step card — for numbered process grids */
.cpsf-step-card {
  background: var(--color-white);
  border: 1px solid #e3e8e5;
  border-radius: var(--border-radius-standard);
  padding: 1.5rem;
  height: 100%;
}
.cpsf-step-num {
  font-family: var(--font-purista);
  font-weight: var(--font-weight-bold);
  font-size: 2.25rem;
  line-height: 1;
  color: var(--color-green);
  display: block;
  margin-bottom: 0.5rem;
}

/* Form card — contact-form wrapper with branded header band */
.cpsf-form-card {
  border: 0;
  box-shadow: 0 0.75rem 2rem rgba(0, 0, 0, 0.12);
  overflow: hidden;
}
.cpsf-form-card .card-header {
  background: linear-gradient(
    135deg,
    var(--color-green-gradient-end),
    var(--color-green-gradient-start)
  );
  color: var(--color-white);
  border: 0;
  padding: 1.1rem 1.5rem;
}
.cpsf-form-card .card-header :is(h2, h3, .h2, .h3) {
  color: var(--color-white);
  margin-bottom: 0;
}

/* === Stat Strip ===
   Interactive count-up figures. Markup carries the final value as text (no-JS safe);
   custom.js animates from 0 when the strip scrolls into view. Figures must be factual —
   never fabricate counts. */
.cpsf-stat-strip {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: #e3e8e5; /* shows through as hairline dividers */
  border: 1px solid #e3e8e5;
  border-radius: var(--border-radius-standard);
  overflow: hidden;
  box-shadow: 0 0.5rem 1.25rem rgba(0, 0, 0, 0.06);
}
@media (min-width: 768px) {
  .cpsf-stat-strip {
    grid-template-columns: repeat(4, 1fr);
  }
}
.cpsf-stat {
  background: var(--color-white);
  padding: 1.5rem 1rem;
  text-align: center;
}
.cpsf-stat-num {
  display: block;
  font-family: var(--font-purista);
  font-weight: var(--font-weight-bold);
  font-size: clamp(1.9rem, 1.4rem + 1.6vw, 2.75rem);
  line-height: 1;
  color: var(--color-green);
  font-variant-numeric: tabular-nums;
}
.cpsf-stat-label {
  display: block;
  margin-top: 0.5rem;
  font-size: 0.8rem;
  line-height: 1.35;
  color: var(--color-gray);
}

/* === Scroll Reveal ===
   custom.js adds .cpsf-js to <html> (only when IntersectionObserver exists) and
   .is-visible to each .cpsf-reveal as it enters the viewport. Without JS, content
   renders normally. Stagger siblings with .cpsf-reveal-2/-3/-4. */
.cpsf-js .cpsf-reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.cpsf-js .cpsf-reveal.is-visible {
  opacity: 1;
  transform: none;
}
.cpsf-js .cpsf-reveal-2 { transition-delay: 0.12s; }
.cpsf-js .cpsf-reveal-3 { transition-delay: 0.24s; }
.cpsf-js .cpsf-reveal-4 { transition-delay: 0.36s; }

@media (prefers-reduced-motion: reduce) {
  .cpsf-js .cpsf-reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .cpsf-lift,
  .cpsf-lift:hover {
    transform: none;
    transition: none;
  }
}

/* === Image Scroller Classes === */
.img-scroller {
  max-width: 100vw;
  margin: auto;
  /* Hides the overflowing content (the logos that are off-screen) */
  overflow: hidden;
  /* Optional: adds a faded-out effect to the edges */
  -webkit-mask: linear-gradient(90deg, transparent, white 20%, white 80%, transparent);
  mask: linear-gradient(90deg, transparent, white 20%, white 80%, transparent);
}

.scroller__inner {
  display: flex;
  align-items: center !important;
  gap: 3rem;
  padding-block: 1rem;
  animation: scroll 20s linear infinite;
}

/* The Keyframes */
@keyframes scroll {
  /* Move from original position */
  from {
    transform: translateX(0);
  }
  /* Move to the position where the first set of logos is off-screen */
  to {
    transform: translateX(calc(-100% - 1rem)); /* -100% of the content and the gap */
  }
}

/* === List Bullet Replacement (FA Caret Right) === */
/* Use on ul/ol: class="list-caret-right" */
ul.list-caret-right,
ol.list-caret-right {
  list-style: none;
  padding-left: 0;
  margin-left: 0;
}

.list-caret-right li {
  position: relative;
  padding-left: 1.25rem; /* space for icon */
}

.list-caret-right li::before {
  content: '\f0da'; /* caret-right */
  position: absolute;
  left: 0;
  top: 0.15em;
  color: currentColor;
  /* Font Awesome fallbacks: Sharp Solid -> Free Solid -> FA5 Solid */
  font-family: 'Font Awesome 6 Sharp', 'Font Awesome 6 Free', 'Font Awesome 5 Free';
  font-weight: 900;
  font-size: 0.95em;
}

/* === Utility Classes === */
u {
  font-style: inherit !important;
  text-decoration: inherit !important;
}
a {
  text-decoration: none;
}
.dashed {
  border-style: dashed !important;
}

p a {
  font-weight: var(--font-weight-bold); /* color comes from the link context system */
}

.cpsf-service-area-link h4 {
  color: var(--color-white) !important;
  text-decoration: none;
  transition: var(--transition-standard) !important;
}
.cpsf-service-area-link h4:is(:hover, :active, :focus) {
  color: var(--color-light-green) !important;
  transition: var(--transition-standard) !important;
}

/* === Sub Page Styles === */

/* Service-area map graphic — caps the SVG at its intended render width
   (was an inline style on service-area.php). */
.cpsf-area-graphic {
  max-width: 420px;
}

/* === Footer Styles === */
footer h6 {
  color: var(--color-black);
  font-weight: 700;
  margin-bottom: 1rem;
}
footer p {
  margin-bottom: 0.25rem;
}
footer p a {
  color: var(--color-black) !important;
  font-family: var(--font-inter);
  font-weight: 400 !important;
}
footer p a:is(:hover, :active, :focus) {
  color: var(--color-green-dark) !important; /* 6.2:1 on .bg-light */
}

/* ---------------------------------------------------------------
   Current page — rendered as a <span>, not an <a>, by nav_link()
   in includes/config.php so no page ever links to itself.
   Styled to read as "you are here" without looking clickable.
   --------------------------------------------------------------- */
.is-current-page {
  cursor: default;
}

/* Footer nav columns */
footer p .is-current-page {
  color: var(--color-green-dark); /* 6.2:1 on .bg-light */
  font-family: var(--font-inter);
  font-weight: 700;
}

/* Services dropdown */
.nav-item .dropdown-item.is-current-page,
.nav-item .dropdown-item.is-current-page:is(:hover, :active, :focus) {
  background-color: transparent;
  color: var(--color-green) !important;
  font-weight: 700;
}

/* Top-level nav (About Us / Service Area) — sits on the dark menu bar */
.menu-container .navbar-light .navbar-nav .nav-link.is-current-page,
.menu-container .navbar-light .navbar-nav .nav-link.is-current-page:is(:hover, :active, :focus) {
  color: var(--color-light-green); /* dark surface only */
}

/* === Media Queries === */
/* OPTIMIZED: Each media query now only contains the styles that need to change at that breakpoint. */
@media (max-width: 1400px) {
  .menu-container .navbar-light .navbar-nav .nav-link {
    color: var(--color-white);
    font-family: var(--font-purista);
    text-transform: uppercase;
    font-weight: 700;
    font-size: 0.76rem;
  }
}

@media (max-width: 1200px) {
  .offcanvas-body {
    background: var(--color-black);
  }
  .navbar {
    height: var(--menu-height);
    width: auto;
  }
  .shrink-menu .navbar {
    height: var(--menu-height-shrink);
  }

  /* Mobile logo — left-aligned in the top bar (see markup in menu.php) */
  .cpsf-logo-mobile img {
    width: 150px;
    height: auto;
    transition: width var(--transition-standard);
  }
  .shrink-menu .cpsf-logo-mobile img {
    width: 122px;
  }

  .nav-fill .nav-item,
  .nav-fill > .nav-link {
    flex: 1 1 auto;
    text-align: left;
  }
  .dropend .dropdown-item.has-dropend::after {
    content: 'expand_more'; /* This is the "angle down" icon */
  }
  .navbar-light .navbar-nav .nav-link {
    font-size: 1.25rem;
  }

  /* Mobile Offcanvas Dropdown Flow Fix */
  /* Allow nav to grow with its content inside offcanvas */
  .offcanvas-nav .navbar-nav {
    height: auto;
  }

  /* Make dropdown menus part of normal flow (no overlap under header) */
  .offcanvas-nav .navbar-nav .dropdown-menu {
    position: static;
    top: auto !important;
    left: auto !important;
    transform: none !important;
    float: none;
    width: 100%;
    margin: 0.35rem 0 0.5rem;
    box-shadow: none;
    border-radius: 0.5rem;
    padding: 0.25rem 0;
  }

  /* Remove desktop-specific offset */
  .offcanvas-nav .navbar-nav .dropdown-menu.main-dropdown {
    top: auto;
  }

  /* Optional: improve touch targets inside mobile dropdowns */
  .offcanvas-nav .navbar-nav .dropdown-item {
    padding: 0.6rem 1rem;
  }
}

@media (max-width: 991px) {
  /* Mobile bar sits ABOVE the hero (hero has margin-top), not over it —
     so it gets the brand green gradient with an orange bottom border. */
  .menu-container,
  .menu-container.shrink-menu {
    background: linear-gradient(
      180deg,
      var(--color-green-gradient-start) 0%,
      var(--color-green-gradient-mid) 55%,
      var(--color-green-gradient-end) 100%
    );
    border-bottom: 4px solid var(--color-orange);
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  .cpsf-menu-padding {
    padding: 0 1.5rem;
  }
  .navbar-light .navbar-nav .nav-link {
    font-size: 1.35rem;
  }
  .cpsf-hero-intro {
    margin-top: 128px;
    height: fit-content;
    padding-top: 4rem;
    padding-bottom: 5rem;
  }
  .cpsf-hero-intro .hero-cta-row {
    bottom: 1rem;
  }
}

@media (max-width: 767px) {
  .cpsf-logo-mobile img {
    width: 132px;
  }
  .shrink-menu .cpsf-logo-mobile img {
    width: 112px;
  }
}

@media (max-width: 450px) {
  .cpsf-menu-padding {
    padding: 0 0.5rem;
  }
  .cpsf-logo-mobile img {
    width: 112px;
  }
  .cpsf-mobile-actions {
    gap: 0.35rem !important;
  }
}