/* === Red Barn Media Group — 360 Comfort Solutions === */
/* === CSS Custom Properties === */
:root {
  /* Brand Colors — from Figma "Palette" (node 2001:206) */
  --color-brand-heat-red:  #BD1F2F;
  --color-brand-cool-blue: #0553A2;
  --color-brand-dark-red:  #5C121A;
  --color-brand-deep-blue: #242778;

  /* Brand hover tints — 20% white mix of each base, for *-link and btn-*
     hover/focus/active states. Tints (lighter), never shades. */
  --color-brand-heat-red-hover:  color-mix(in srgb, var(--color-brand-heat-red)  80%, #fff);
  --color-brand-cool-blue-hover: color-mix(in srgb, var(--color-brand-cool-blue) 80%, #fff);
  --color-brand-dark-red-hover:  color-mix(in srgb, var(--color-brand-dark-red)  80%, #fff);
  --color-brand-deep-blue-hover: color-mix(in srgb, var(--color-brand-deep-blue) 80%, #fff);

  /* Neutrals */
  --color-neutral-50:  #EEF0F5;
  --color-neutral-100: #E5E7EA;
  --color-neutral-200: #DDDEE1;
  --color-neutral-300: #CCCED6;
  --color-neutral-400: #C1C3CB;
  --color-neutral-500: #A9ABB4;
  --color-neutral-600: #8D919A;
  --color-neutral-700: #656870;

  /* Dark Mode — only the depth levels in use are kept (00dp body text,
     01dp dividers/heavy borders). Figma defines 02–24dp; add when a
     component needs one. White/Black come from Bootstrap. */
  --color-dm-00dp: #121212;
  --color-dm-01dp: #1E1E1E;

  /* Gradients — Cool Blue → Heat Red, one per requested angle */
  --gradient-brand-0:   linear-gradient(0deg,   var(--color-brand-cool-blue), var(--color-brand-heat-red));
  --gradient-brand-45:  linear-gradient(45deg,  var(--color-brand-cool-blue), var(--color-brand-heat-red));
  --gradient-brand-90:  linear-gradient(90deg,  var(--color-brand-cool-blue), var(--color-brand-heat-red));
  --gradient-brand-135: linear-gradient(135deg, var(--color-brand-cool-blue), var(--color-brand-heat-red));
  --gradient-brand-180: linear-gradient(180deg, var(--color-brand-cool-blue), var(--color-brand-heat-red));
  --gradient-brand-270: linear-gradient(270deg, var(--color-brand-cool-blue), var(--color-brand-heat-red)); /* heat-red left → cool-blue right (mirror of -90) */

  /* Typography — Font Families (Adobe Fonts slugs, fed by kit gav6xfe.css) */
  --font-heading: 'oswald', sans-serif;        /* headings, sub-headings, overline */
  --font-body:    'inter-variable', sans-serif; /* body copy */

  /* Typography — Weights (only the loaded weights: Inter 400/500/600, Oswald 600/700) */
  --font-weight-regular:  400;
  --font-weight-medium:   500;
  --font-weight-semibold: 600;
  --font-weight-bold:     700;

  /* Layout */
  --transition-standard: 0.25s;
  --radius-card: 1rem;
  --shadow-card: 0 0 8px rgba(0, 0, 0, 0.05);
  --shadow-dropdown: 0 1.5rem 3rem rgba(0, 0, 0, 0.175);
}

/* === Base / Typography ===
   Family + weight binding only. Font sizes & line-heights ride Bootstrap's
   defaults until the Figma type scale is applied. Bootstrap's .fw-normal/
   .fw-medium/.fw-semibold/.fw-bold cover the four loaded weights, so no
   custom weight utilities are added. */
body {
  font-family: var(--font-body);
  font-weight: var(--font-weight-regular);
  color: var(--color-dm-00dp);
}

h1, .h1,
h2, .h2,
h3, .h3,
h4, .h4,
h5, .h5,
h6, .h6 {
  font-family: var(--font-heading);     /* Oswald — headings & sub-headings */
  font-weight: var(--font-weight-bold);  /* 700; use .fw-semibold for the 600 cut */
}

.fs-7 {font-size: 0.85rem;}
.fs-8 {font-size: 0.75rem;}

/* Oswald (heading family) on non-heading text — overlines, labels, etc.
   Bootstrap has no font-family utility beyond .font-monospace. */
.font-heading {font-family: var(--font-heading);}

/* === Brand Color Utilities ===
   Custom-color counterparts to Bootstrap's .bg-* / .text-* / .border-*
   utilities (Bootstrap has no tokens for these brand colors). !important
   matches Bootstrap's own utility behavior so they compose the same way. */

/* HEAT RED */
.bg-brand-heat-red     { background-color: var(--color-brand-heat-red) !important; }
.text-brand-heat-red   { color: var(--color-brand-heat-red) !important; }
.border-brand-heat-red { border-color: var(--color-brand-heat-red) !important; }

/* COOL BLUE */
.bg-brand-cool-blue     { background-color: var(--color-brand-cool-blue) !important; }
.text-brand-cool-blue   { color: var(--color-brand-cool-blue) !important; }
.border-brand-cool-blue { border-color: var(--color-brand-cool-blue) !important; }

/* DARK RED */
.bg-brand-dark-red     { background-color: var(--color-brand-dark-red) !important; }
.text-brand-dark-red   { color: var(--color-brand-dark-red) !important; }
.border-brand-dark-red { border-color: var(--color-brand-dark-red) !important; }

/* DEEP BLUE */
.bg-brand-deep-blue     { background-color: var(--color-brand-deep-blue) !important; }
.text-brand-deep-blue   { color: var(--color-brand-deep-blue) !important; }
.border-brand-deep-blue { border-color: var(--color-brand-deep-blue) !important; }

/* === Gradient Utilities — Cool Blue → Heat Red === */
.bg-gradient-brand-0   { background: var(--gradient-brand-0)   !important; }
.bg-gradient-brand-45  { background: var(--gradient-brand-45)  !important; }
.bg-gradient-brand-90  { background: var(--gradient-brand-90)  !important; }
.bg-gradient-brand-135 { background: var(--gradient-brand-135) !important; }
.bg-gradient-brand-180 { background: var(--gradient-brand-180) !important; }
.bg-gradient-brand-270 { background: var(--gradient-brand-270) !important; }

/* Neutral surface utility (Bootstrap has no token for the brand neutrals) */
.bg-neutral-50 { background-color: var(--color-neutral-50) !important; }

/* Spacing scale extension — Bootstrap's utilities stop at 5 (3rem). Step 6
   (4.5rem) gives roomier section padding where the design calls for it. */
.py-6 { padding-top: 4.5rem !important; padding-bottom: 4.5rem !important; }
@media (min-width: 992px) {
  .py-lg-6 { padding-top: 4.5rem !important; padding-bottom: 4.5rem !important; }
}

/* === Menu ===
   .menu-container is the structural handle for the fixed nav; custom.js
   toggles .shrink-menu on it past 50px of scroll. Keep both names intact.
   The margin-top reset is applied via the .mt-0 utility in menu.php; the
   sub-nav gradient bar uses .bg-gradient-brand-90 .text-white in markup. */

.cs-subnav-callout,
.cs-subnav-link {
  font-family: var(--font-heading);
  font-weight: var(--font-weight-medium);  /* Oswald Medium 500 (Figma Label) */
  font-size: 0.875rem;
  line-height: 1;
  color: #fff;
}

.cs-subnav-link {
  text-decoration: none;
}
.cs-subnav-link:is(:hover, :focus) {
  color: #fff;
  text-decoration: underline;
}

/* --- Main nav: full-width light bar (edge-to-edge), soft shadow --- */
.cs-mainnav {
  background-color: var(--color-neutral-50);
  box-shadow: var(--shadow-card);
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  transition: padding var(--transition-standard);
}
.shrink-menu .cs-mainnav {
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
}

/* Nav links — Oswald, deep-blue, heat-red on hover */
.menu-container .navbar-nav .nav-link {
  font-family: var(--font-heading);
  font-weight: var(--font-weight-medium);
  font-size: 1rem;
  color: var(--color-brand-deep-blue);
}
.menu-container .navbar-nav .nav-link:is(:hover, :focus, :active) {
  color: var(--color-brand-heat-red);
}

/* Dropdown caret (FA) — only on toggles flagged .has-dropdown */
.has-dropdown {
  display: inline-flex;
  align-items: center;
  gap: 0.25em;
}
.has-dropdown::after {
  content: '\f0d7';
  font: var(--fa-font-solid);
  border: 0;
  margin: 0;
  font-size: inherit;
  vertical-align: middle;
}

/* Centered stacked logo (xl+) — shrinks on scroll */
.cs-logo-desktop {
  display: block;
  height: 92px;
  width: auto;
  transition: height var(--transition-standard);
}
.shrink-menu .cs-logo-desktop {
  height: 64px;
}

/* --- Dropdown panels (shared): light bg, soft shadow --- */
.navbar-expand-xl .navbar-nav .dropdown-menu {
  background-color: var(--color-neutral-50);
  border: 0;
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-dropdown);
  padding: 0.75rem;
}
.navbar-expand-xl .navbar-nav .dropdown-menu.cs-mega-dropdown {
  width: 100%;
}

/* Simple dropdown items (Indoor Air Quality, Commercial) */
.cs-dropdown-item {
  font-family: var(--font-heading);
  font-weight: var(--font-weight-medium);
  font-size: 0.9375rem;
  color: var(--color-brand-deep-blue);
  border-radius: 0.5rem;
}
.cs-dropdown-item:is(:hover, :focus) {
  background-color: var(--color-brand-deep-blue);
  color: #fff;
}

/* Mega-dropdown groups — link sections as cards on the light panel, spaced by
   the row gutter (g-3). Subtle, classy hover: heat-red border + a small lift. */
.cs-mega-group {
  background-color: #fff;
  border: 1px solid var(--color-neutral-200);
  border-radius: 0.75rem;
  padding: 1rem;
  box-shadow: var(--shadow-card);
  transition: border-color var(--transition-standard), transform var(--transition-standard), box-shadow var(--transition-standard);
}
.cs-mega-group:is(:hover, :focus-within) {
  border-color: var(--color-brand-heat-red);
  transform: translateY(-2px);
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.08);
}

/* Layout (flex/gap/mb) + text-decoration come from Bootstrap utilities in
   markup; only Oswald family/weight/size + brand color stay custom. The
   circle icon badge uses the FA <fa-stack> component (no bespoke class). */
.cs-mega-group-title {
  font-family: var(--font-heading);
  font-weight: var(--font-weight-bold);
  font-size: 0.9375rem;
  color: var(--color-brand-deep-blue);
}

.cs-mega-desc {
  font-size: 0.8125rem;
  line-height: 1.4;
  color: var(--color-neutral-700);
}

/* Individual links — heat-red underline scales across on hover */
.cs-mega-link {
  position: relative;
  display: block;
  margin-bottom: 0.25rem;
  padding-bottom: 2px;
  font-size: 0.8125rem;
  color: var(--color-brand-cool-blue);
  text-decoration: none;
}
.cs-mega-link::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  background-color: var(--color-brand-heat-red);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--transition-standard) ease;
}
.cs-mega-link:is(:hover, :focus)::after {
  transform: scaleX(1);
}
.cs-mega-link i {
  margin-right: 0.25rem;
}

/* === Brand Buttons ===
   Filled + outline variants for every brand color. Pair with Bootstrap's .btn
   base + a rounded-* utility. Filled hover uses the lighter -hover tint;
   outline hover fills with the base color. */
.btn-light, .btn-heat-red,  .btn-outline-heat-red,
.btn-cool-blue, .btn-outline-cool-blue,
.btn-dark-red,  .btn-outline-dark-red,
.btn-deep-blue, .btn-outline-deep-blue {
  font-family: var(--font-heading);
  font-weight: var(--font-weight-medium);
  border: 2px solid transparent;
  border-radius: 50rem;
}

/* --- Filled --- */
.btn-heat-red {
  background-color: var(--color-brand-heat-red);
  border-color: var(--color-brand-heat-red);
  color: #fff;
}
.btn-heat-red:is(:hover, :focus, :active) {
  background-color: var(--color-brand-heat-red-hover);
  border-color: var(--color-brand-heat-red-hover);
  color: #fff;
}

.btn-cool-blue {
  background-color: var(--color-brand-cool-blue);
  border-color: var(--color-brand-cool-blue);
  color: #fff;
}
.btn-cool-blue:is(:hover, :focus, :active) {
  background-color: var(--color-brand-cool-blue-hover);
  border-color: var(--color-brand-cool-blue-hover);
  color: #fff;
}

.btn-dark-red {
  background-color: var(--color-brand-dark-red);
  border-color: var(--color-brand-dark-red);
  color: #fff;
}
.btn-dark-red:is(:hover, :focus, :active) {
  background-color: var(--color-brand-dark-red-hover);
  border-color: var(--color-brand-dark-red-hover);
  color: #fff;
}

.btn-deep-blue {
  background-color: var(--color-brand-deep-blue);
  border-color: var(--color-brand-deep-blue);
  color: #fff;
}
.btn-deep-blue:is(:hover, :focus, :active) {
  background-color: var(--color-brand-deep-blue-hover);
  border-color: var(--color-brand-deep-blue-hover);
  color: #fff;
}

/* --- Outline --- */
.btn-outline-heat-red {
  background-color: transparent;
  border-color: var(--color-brand-heat-red);
  color: var(--color-brand-heat-red);
}
.btn-outline-heat-red:is(:hover, :focus, :active) {
  background-color: var(--color-brand-heat-red);
  border-color: var(--color-brand-heat-red);
  color: #fff;
}

.btn-outline-cool-blue {
  background-color: transparent;
  border-color: var(--color-brand-cool-blue);
  color: var(--color-brand-cool-blue);
}
.btn-outline-cool-blue:is(:hover, :focus, :active) {
  background-color: var(--color-brand-cool-blue);
  border-color: var(--color-brand-cool-blue);
  color: #fff;
}

.btn-outline-dark-red {
  background-color: transparent;
  border-color: var(--color-brand-dark-red);
  color: var(--color-brand-dark-red);
}
.btn-outline-dark-red:is(:hover, :focus, :active) {
  background-color: var(--color-brand-dark-red);
  border-color: var(--color-brand-dark-red);
  color: #fff;
}

.btn-outline-deep-blue {
  background-color: transparent;
  border-color: var(--color-brand-deep-blue);
  color: var(--color-brand-deep-blue);
}
.btn-outline-deep-blue:is(:hover, :focus, :active) {
  background-color: var(--color-brand-deep-blue);
  border-color: var(--color-brand-deep-blue);
  color: #fff;
}

/* Bootstrap's white outline button (used on gradient panels) — match the
   brand buttons' Oswald Medium type. Border/colors stay Bootstrap's. */
.btn-outline-light {
  font-family: var(--font-heading);
  font-weight: var(--font-weight-medium);
}

/* === Breadcrumbs ===
   A white bar tucked BEHIND the hero card that slides out below it — its flat
   top hides behind the card while its rounded bottom (matching the card's
   radius) emerges into the hero's cool-blue gradient base. Layering: the card
   (z-index:2) paints over the bar; the bar (z-index:1) paints over the hero
   gradient. .cs-hero / .container must NOT create stacking contexts for this
   cross-element z-order to hold (they don't — no z-index/transform on them).
   cs-icon.svg anchors the left as a brand mark. */
.cs-breadcrumb-bar {
  --bs-breadcrumb-divider: '\203A'; /* › */
  position: relative;
  z-index: 1;                     /* under the hero card, over the hero gradient */
  margin-top: -5.5rem;            /* tuck the flat top up behind the hero card */
  margin-bottom: 0.75rem;         /* < the tuck overshoot, so the next section overlaps
                                     the hero bottom by a few px (same cool-blue) and no
                                     white hairline leaks through the seam */
  background: transparent;        /* let the hero gradient show behind */
}
.cs-breadcrumb-inner {
  display: flex;
  align-items: flex-end;          /* text hugs the bottom; the 2rem top pad hides behind the card */
  gap: 0.85rem;
  background-color: #fff;
  border-radius: 0 0 1.25rem 1.25rem;   /* round bottom = hero card radius */
  padding: 2rem 1.5rem 0.7rem;          /* extra top pad tucks behind the card */
  /* shadow weighted to the emerging bottom edge so it reads as sliding out */
  box-shadow: 0 6px 10px rgba(0, 0, 0, 0.07);
}
.cs-breadcrumb-icon {
  height: 1.6rem;
  width: auto;
  flex-shrink: 0;
}
.cs-breadcrumb-bar .breadcrumb {
  margin-bottom: 0;
  font-family: var(--font-heading);
  font-size: 0.85rem;
  letter-spacing: 0.01em;       /* title case (no uppercase transform) */
}
.cs-breadcrumb-bar .breadcrumb-item a {
  color: var(--color-brand-deep-blue);   /* other crumbs = blue */
  text-decoration: none;
  transition: color var(--transition-standard);
}
.cs-breadcrumb-bar .breadcrumb-item a:is(:hover, :focus) {
  color: var(--color-brand-heat-red);
  text-decoration: underline;
}
.cs-breadcrumb-bar .breadcrumb-item.active {
  color: var(--color-brand-heat-red);    /* current page = red */
  font-weight: var(--font-weight-medium);
}
.cs-breadcrumb-bar .breadcrumb-item + .breadcrumb-item::before {
  color: var(--color-neutral-400);
}

/* === Hero === */
.cs-hero {
  position: relative;
  overflow: hidden;
  background: var(--gradient-brand-0);   /* heat-red top → cool-blue bottom */
  padding-top: 9rem;                     /* clears the fixed nav — tune to live nav height */
  padding-bottom: 4rem;
}

/* Above 1700px the hero breaks out of the capped .container to span the full
   page minus a 5rem gutter each side. Scoped to the hero's direct-child
   container so other sections keep Bootstrap's max-width. The card, overlay and
   object-fit-cover photo all fill this wider wrapper automatically. */
@media (min-width: 1700px) {
  .cs-hero > .container {
    max-width: none;
    padding-left: 5rem;
    padding-right: 5rem;
  }
}

/* Top angular pattern band (full-bleed); the card overlaps its lower edge */
.cs-hero-pattern {
  height: 7.5rem;
  margin-bottom: -2.5rem;
  background: url('/img/cs-banner-divider.svg') no-repeat top center;
  background-size: cover;
}

/* Hero photo card */
.cs-hero-card {
  position: relative;
  z-index: 2;            /* paints over the breadcrumb bar tucked behind it */
  overflow: hidden;
  border: 2px solid #fff;
  border-radius: 1.25rem;
  padding: 2rem;
}
@media (min-width: 992px) {
  .cs-hero-card { padding:4.5rem 3.75rem; }
}

/* Image + overlay both fill the card. The <img> additionally carries
   .w-100 .h-100 .object-fit-cover utilities in markup. The content row sits
   above them via .position-relative .z-1; left copy uses .text-white. */
.cs-hero-img,
.cs-hero-img-el,
.cs-hero-overlay {
  position: absolute;
  inset: 0;
}
.cs-hero-overlay {
  background-color: rgba(35, 14, 83, 0.42);   /* deep-purple scrim for text legibility */
}

/* Right form card — white, matching Figma. short_form() ships white-on-dark
   utility classes (text-white labels, bg-white inputs) for colored sections,
   so its fields are recolored here to read on the white card. !important is
   required only to beat those Bootstrap utilities (.text-white/.bg-white). */
.cs-hero-form {
  background-color: #fff;
  border: 1px solid var(--color-neutral-50);
  border-radius: 0.75rem;
  padding: 1.75rem;
  box-shadow: var(--shadow-card);
}
.cs-hero-form label {
  color: var(--color-neutral-700) !important;            /* beats short_form's .text-white */
}
.cs-hero-form .form-control {
  background-color: var(--color-neutral-50) !important;  /* beats short_form's .bg-white */
  border: 1px solid var(--color-neutral-100);
  color: var(--color-dm-00dp);
}
.cs-hero-form .form-control::placeholder {
  color: var(--color-neutral-500);
}
.cs-hero-form button {
  background-color: var(--color-brand-deep-blue);
  border-color: var(--color-brand-deep-blue);
  color: #fff;
}

/* === Opening / Why Choose Us ===
   Section bg = .bg-gradient-brand-180 utility; layout via Bootstrap grid +
   utilities. Only the bottom divider, translucent card, and icon badge
   need custom rules. */

/* Bottom angular divider — same SVG as the hero top band. Pulled up 1/3 of
   its height so the cards (lifted via .position-relative .z-1 on the
   container) overlap its top third. */
.cs-opening-divider {
  height: 7.5rem;
  margin-top: -2.5rem;
  background: url('/img/cs-banner-divider.svg') no-repeat bottom center;
  background-size: cover;
}

/* Translucent dark-red value-prop card (border via .border utilities) */
.cs-feature-card {
  background-color: color-mix(in srgb, var(--color-brand-dark-red) 90%, transparent);
  border-radius: 0.75rem;
  padding: 1.25rem;
}

/* Rose-red icon badge; FA glyph swaps solid → regular on card hover */
.cs-feature-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background-color: var(--color-brand-heat-red);
  border: 4px solid color-mix(in srgb, var(--color-brand-heat-red) 50%, transparent);
  color: #fff;
}
/* Hover behavior shared by every icon-badge card (Opening, Maintenance, Trust
   Closer): the FA glyph swaps solid → regular and the heat-red border emits a
   pulsing ring. To opt a new card type in, add its class to the :is() lists. */
.cs-feature-icon .fa-regular { display: none; }

/* Oversized confirmation badge (thank-you page) — same heat-red disc, larger. */
.cs-thankyou-icon {
  width: 5rem;
  height: 5rem;
  font-size: 2.25rem;
  border-width: 6px;
}
:is(.cs-feature-card, .cs-benefit-card, .cs-subpage-card, .cs-why-item):hover .cs-feature-icon .fa-solid { display: none; }
:is(.cs-feature-card, .cs-benefit-card, .cs-subpage-card, .cs-why-item):hover .cs-feature-icon .fa-regular { display: inline-block; }

@media (prefers-reduced-motion: no-preference) {
  :is(.cs-feature-card, .cs-benefit-card, .cs-subpage-card, .cs-why-item):hover .cs-feature-icon {
    animation: cs-icon-pulse 1.4s ease-out infinite;
  }
}
/* Ring color matches the icon's heat-red border (50% → 0% alpha as it expands) */
@keyframes cs-icon-pulse {
  0%   { box-shadow: 0 0 0 0       color-mix(in srgb, var(--color-brand-heat-red) 50%, transparent); }
  70%  { box-shadow: 0 0 0 0.85rem color-mix(in srgb, var(--color-brand-heat-red) 0%, transparent); }
  100% { box-shadow: 0 0 0 0       color-mix(in srgb, var(--color-brand-heat-red) 0%, transparent); }
}

/* === Services: tabbed switcher ===
   Bootstrap tabs + accordion, restyled. The tab rail scrolls horizontally
   below xl; custom.js toggles .is-start/.is-end for the edge fades and
   scrolls the active tab into view. */
.cs-services-tab-rail { position: relative; }

.cs-services-tabs {
  display: flex;
  flex-wrap: nowrap;
  gap: 0.25rem;
  padding: 0.25rem;
  border-radius: 0.75rem;
  background-color: var(--color-neutral-200);
  overflow-x: auto;
  scrollbar-width: none;
}
.cs-services-tabs::-webkit-scrollbar { display: none; }

.cs-services-tabs .nav-link {
  flex: 0 0 auto;
  width: 8rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.75rem 0.5rem;
  border: 2px solid transparent;
  border-radius: 0.625rem;
  font-family: var(--font-heading);
  font-weight: var(--font-weight-medium);
  font-size: 0.9rem;
  line-height: 1.15;
  text-align: center;
  color: var(--color-neutral-600);
  transition: background-color var(--transition-standard), color var(--transition-standard);
}
.cs-services-tabs .nav-link i { font-size: 1.75rem; }
.cs-services-tabs .nav-link:hover { color: var(--color-brand-deep-blue); }
.cs-services-tabs .nav-link.active {
  background-color: var(--color-brand-heat-red);
  border-color: var(--color-brand-dark-red);
  color: #fff;
  box-shadow: var(--shadow-card);
}
@media (min-width: 1200px) {
  .cs-services-tabs { overflow-x: visible; }
  .cs-services-tabs .nav-link { flex: 1 1 0; width: auto; }
}

/* Steps variant — only a handful of tabs, so stretch them edge-to-edge from lg
   up (instead of waiting for xl) so they fill the row rather than bunching left.
   The flex items are the .nav-item <li> wrappers, so they take flex-grow; the
   button then fills its item (overriding the base fixed 8rem width). */
@media (min-width: 992px) {
  .cs-steps-tabs { overflow-x: visible; }
  .cs-steps-tabs .nav-item { flex: 1 1 0; }
  .cs-steps-tabs .nav-link { width: 100%; }
}

/* Edge fades while the rail scrolls (mobile) */
.cs-services-tab-rail::before,
.cs-services-tab-rail::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2.5rem;
  z-index: 2;
  pointer-events: none;
  transition: opacity var(--transition-standard);
}
.cs-services-tab-rail::before {
  left: 0;
  border-radius: 0.75rem 0 0 0.75rem;
  background: linear-gradient(to right, var(--color-neutral-200), transparent);
}
.cs-services-tab-rail::after {
  right: 0;
  border-radius: 0 0.75rem 0.75rem 0;
  background: linear-gradient(to left, var(--color-neutral-200), transparent);
}
.cs-services-tab-rail.is-start::before { opacity: 0; }
.cs-services-tab-rail.is-end::after { opacity: 0; }
@media (min-width: 1200px) {
  .cs-services-tab-rail::before,
  .cs-services-tab-rail::after { display: none; }
}

/* Red info panel (right half of each tab) */
.cs-service-panel {
  background-color: var(--color-brand-heat-red);
  padding: 1.75rem;
}

/* Accordion sub-services — collapsed = neutral track, open = light card with
   a dark-red frame; plus/minus FA glyph replaces Bootstrap's chevron. */
.cs-service-accordion .accordion-item {
  margin-bottom: 0.5rem;
  border: 2px solid var(--color-neutral-400);   /* matches collapsed bg; turns dark-red when open */
  border-radius: 0.5rem;
  overflow: hidden;                               /* clips button + body to one consistent radius */
  background: transparent;
}
.cs-service-accordion .accordion-item:last-child { margin-bottom: 0; }
.cs-service-accordion .accordion-item:has(.accordion-button:not(.collapsed)) {
  border-color: var(--color-brand-dark-red);
}

.cs-service-accordion .accordion-button {
  padding: 0.75rem 1.25rem;
  border: 0;
  border-radius: 0;
  background-color: var(--color-neutral-400);
  color: var(--color-brand-deep-blue);
  font-family: var(--font-heading);
  font-weight: var(--font-weight-medium);
  box-shadow: none;
}
.cs-service-accordion .accordion-button:not(.collapsed) {
  background-color: var(--color-neutral-50);
  color: var(--color-brand-dark-red);
  box-shadow: none;
}
.cs-service-accordion .accordion-button:focus { box-shadow: none; }

.cs-service-accordion .accordion-button::after {
  flex-shrink: 0;
  width: 1rem;
  height: 1rem;
  background-image: none;
  content: '\f055';                 /* fa-circle-plus */
  font: var(--fa-font-solid);
  font-size: 1rem;
  line-height: 1;
  text-align: center;
  color: var(--color-brand-deep-blue);
  transform: none;
}
.cs-service-accordion .accordion-button:not(.collapsed)::after {
  content: '\f056';                 /* fa-circle-minus */
  color: var(--color-brand-dark-red);
}

.cs-service-accordion .accordion-body {
  padding: 0 1.25rem 1rem;
  border: 0;
  background-color: var(--color-neutral-50);
  color: var(--color-brand-dark-red);
}

/* Generator banner — angular SVG bleeds in from the right behind the unit */
.cs-generator-bg {
  position: absolute;
  inset: 0 0 0 auto;
  width: 65%;
  border-radius: 0 1rem 1rem 0;        /* matches the banner's rounded-4 corners */
  background: url('/img/cs-banner-generator-bg.svg') no-repeat right center;
  background-size: cover;
  pointer-events: none;
}

/* Generac unit pops out above & below the banner. Sized by height so it
   overhangs both edges; horizontal placement may need a nudge once the real
   PNG (with its own transparent margins) is in. */
.cs-generator-img {
  position: absolute;
  z-index: 1;
  top: 50%;
  right: 4%;
  transform: translateY(-50%);
  height: calc(100% + 3rem);     /* overhangs top & bottom — pops out */
  width: auto;
  pointer-events: none;
}

/* === Brands marquee ===
   Full-bleed endless scroll. The logo set is duplicated in markup; the track
   animates to -50% so it loops seamlessly. Margin-right (not flex gap) keeps
   each half exactly equal width so there's no seam jump. */
.cs-logo-scroll {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}
.cs-logo-track {
  display: flex;
  align-items: center;
  width: max-content;
  animation: cs-logo-scroll 40s linear infinite;
}
.cs-logo {
  flex-shrink: 0;
  height: 2.5rem;
  width: auto;
  margin-right: 3.5rem;
  filter: grayscale(1);
  opacity: 0.6;
}
@keyframes cs-logo-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .cs-logo-track { animation: none; }
  .cs-logo-scroll { overflow-x: auto; }
}

/* Top angular divider (hero band) — caps a gradient section transitioning
   in from a lighter section above. Reused across sections. */
.cs-section-divider {
  height: 7.5rem;
  background: url('/img/cs-banner-divider.svg') no-repeat top center;
  background-size: cover;
}

/* About-Us accordion — round icon badge per header; recolors + swaps the FA
   glyph solid/regular with the open state. Reuses .cs-service-accordion for
   the panel colors and plus/minus toggle. */
.cs-about-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 2rem;
  height: 2rem;
  margin-right: 0.5rem;
  border-radius: 50%;
  font-size: 1rem;
}
.cs-service-accordion .accordion-button.collapsed .cs-about-icon {
  background-color: #fff;
  color: var(--color-brand-deep-blue);
}
.cs-service-accordion .accordion-button:not(.collapsed) .cs-about-icon {
  background-color: var(--color-brand-heat-red);
  color: #fff;
}
.cs-about-icon .fa-solid { display: none; }
.cs-service-accordion .accordion-button:not(.collapsed) .cs-about-icon .fa-solid { display: inline; }
.cs-service-accordion .accordion-button:not(.collapsed) .cs-about-icon .fa-regular { display: none; }

/* === Maintenance Plans === */
/* Translucent dark-red benefit card (border via .border utilities). Its icon
   badge is the shared .cs-feature-icon (swap + pulse handled above). */
.cs-benefit-card {
  background-color: color-mix(in srgb, var(--color-brand-dark-red) 90%, transparent);
  border-radius: 0.5rem;
  padding: 1rem;
}
/* Deep-purple scrim over the maintenance box photo */
.cs-maintenance-overlay {
  background-color: rgba(53, 16, 77, 0.7);
}

/* === FAQ accordion ===
   Flat list (not Bootstrap's default card): each row separated by a bottom
   rule, question in Inter semibold dark-red, with a diagonal arrow that rotates
   on open. One opens at a time via data-bs-parent in markup. */
.cs-faq .accordion-item {
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--color-neutral-400);
  border-radius: 0;
}
.cs-faq .accordion-button {
  gap: 0.75rem;
  padding: 1rem 0;
  background: transparent;
  box-shadow: none;
  font-family: var(--font-body);
  font-weight: var(--font-weight-semibold);
  font-size: 1.125rem;
  line-height: 1.45;
  color: var(--color-brand-dark-red);
}
.cs-faq .accordion-button:not(.collapsed) {
  background: transparent;
  box-shadow: none;
  color: var(--color-brand-dark-red);
}
.cs-faq .accordion-button:focus {
  box-shadow: none;
}
/* Diagonal arrow (FA) replaces Bootstrap's chevron; rotates up-right on open */
.cs-faq .accordion-button::after { display: none; }
.cs-faq .cs-faq-icon {
  margin-left: auto;
  flex-shrink: 0;
  font-size: 1rem;
  color: var(--color-brand-dark-red);
  transition: transform var(--transition-standard);
}
.cs-faq .accordion-button:not(.collapsed) .cs-faq-icon {
  transform: rotate(-90deg);
}
.cs-faq .accordion-body {
  padding: 0 0 1rem;
}

/* === Service Area ===
   Primary location cards (.bg-brand-heat-red + utilities in markup). The five
   cards that link to a city page are anchors — they lift slightly on hover.
   Card color/padding/text all ride Bootstrap + brand utilities. */
a.cs-area-card {
  transition: transform var(--transition-standard), box-shadow var(--transition-standard);
}
a.cs-area-card:is(:hover, :focus) {
  transform: translateY(-2px);
  box-shadow: var(--shadow-card);
}

/* === Sub-page cards & process steps ===
   Project-wide sub-page card: white surface, 2px deep-blue border that turns
   heat-red with a small lift on hover (mirrors the mega-dropdown card and the
   .cs-feature-icon opt-in above so card icons swap + pulse too). */
.cs-subpage-card {
  background-color: #fff;
  color: var(--color-dm-00dp);   /* white card may sit on a dark (gradient) section — keep body copy dark */
  border: 2px solid var(--color-brand-deep-blue);
  border-radius: 0.75rem;
  transition: border-color var(--transition-standard), transform var(--transition-standard), box-shadow var(--transition-standard);
}
.cs-subpage-card:is(:hover, :focus-within) {
  border-color: var(--color-brand-heat-red);
  transform: translateY(-2px);
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.08);
}

/* Step panel is a white card that may sit on a dark (gradient) section, so pin
   its copy to the default dark text color — otherwise it inherits the section's
   .text-white and the description + bullet text vanish against the white card. */
.cs-step-panel {
  color: var(--color-dm-00dp);
}

/* Numbered step badge (process stepper) — deep-blue circle, white numeral.
   Pulses (heat-red ring, matching the panel border) while its panel is hovered. */
.cs-step-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background-color: var(--color-brand-deep-blue);
  color: #fff;
  font-family: var(--font-heading);
  font-weight: var(--font-weight-semibold);
}
@media (prefers-reduced-motion: no-preference) {
  .cs-step-panel:hover .cs-step-number {
    animation: cs-icon-pulse 1.4s ease-out infinite;
  }
}

/* === Footer ===
   Logo scales within a max box (preserves aspect ratio). Link list = body
   color, heat-red + underline on hover. Headers/labels use Bootstrap heading
   + brand-color utilities in markup. */
.cs-footer-logo {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 5.25rem;
}
.cs-footer-link {
  color: var(--color-dm-00dp);
  text-decoration: none;
}
.cs-footer-link:is(:hover, :focus) {
  color: var(--color-brand-heat-red);
  text-decoration: underline;
}