/* === Red Barn Media Group - Superior Heating & Cooling === */


/* ========== SELF-HOSTED FONTS ==========
   Replaces the Adobe Fonts (Typekit kit ddn3hrp) CDN. Static instances cut from
   the variable sources in /fonts/src/, subset to Latin + typography punctuation,
   shipped as WOFF2. Only the weights the site actually renders are built — see
   the audit note on each family. Rebuild with scripts/build-fonts.py. */
@font-face {
  font-family: "Jost";
  src: url("/fonts/Jost-SemiBold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Jost";
  src: url("/fonts/Jost-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("/fonts/Inter-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("/fonts/Inter-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("/fonts/Inter-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Nunito";
  src: url("/fonts/Nunito-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
/* ========== END SELF-HOSTED FONTS ========== */


/* ========== CUSTOM PROPERTIES ========== */
:root {
  /* Brand Colors — Superior Heating & Cooling (Figma palette node 2001-205).
     Hover tints = base mixed 20% toward white (matches the template's
     original hover-tint ratio). */
  --color-superior-blue:        #17329E;
  --color-superior-blue-hover:  #455BB1;
  --color-superior-red:         #D92526;
  --color-superior-red-hover:   #E15151;
  --color-midnight:             #0F1D55;
  --color-midnight-hover:       #3F4A77;
  --color-light:                #EEFFEE;

  /* Brand Gradients — Blue Abyss (Superior Blue → Midnight) */
  --gradient-blue-abyss-0:   linear-gradient(0deg,   #17329E, #0F1D55);
  --gradient-blue-abyss-45:  linear-gradient(45deg,  #17329E, #0F1D55);
  --gradient-blue-abyss-90:  linear-gradient(90deg,  #17329E, #0F1D55);
  --gradient-blue-abyss-135: linear-gradient(135deg, #17329E, #0F1D55);
  --gradient-blue-abyss-180: linear-gradient(180deg, #17329E, #0F1D55);

  /* Brand Gradients — Red vs Blue (Superior Red → Superior Blue) */
  --gradient-red-vs-blue-0:   linear-gradient(0deg,   #D92526, #17329E);
  --gradient-red-vs-blue-45:  linear-gradient(45deg,  #D92526, #17329E);
  --gradient-red-vs-blue-90:  linear-gradient(90deg,  #D92526, #17329E);
  --gradient-red-vs-blue-135: linear-gradient(135deg, #D92526, #17329E);
  --gradient-red-vs-blue-180: linear-gradient(180deg, #D92526, #17329E);

  /* Brand Gradients — Bullet Metal (charcoal → steel → charcoal) */
  --gradient-bullet-metal-0:   linear-gradient(0deg,   #424242, #686868, #424242);
  --gradient-bullet-metal-45:  linear-gradient(45deg,  #424242, #686868, #424242);
  --gradient-bullet-metal-90:  linear-gradient(90deg,  #424242, #686868, #424242);
  --gradient-bullet-metal-135: linear-gradient(135deg, #424242, #686868, #424242);
  --gradient-bullet-metal-180: linear-gradient(180deg, #424242, #686868, #424242);

  /* Generic */
  --color-white: #ffffff;
  --color-black: #000000;

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

  /* Dark Mode */
  --color-00dp: #121212;
  --color-01dp: #1E1E1E;
  --color-02dp: #191C20;
  --color-03dp: #252525;
  --color-04dp: #272727;
  --color-06dp: #2C2C2C;
  --color-08dp: #2E2E2E;
  --color-12dp: #333333;
  --color-16dp: #353535;
  --color-24dp: #383838;

  /* Typography — Superior (self-hosted WOFF2, see @font-face block above).
     Token names are kept from the Figma/Typekit build so the 30+ call sites below
     stay untouched; the faces they resolve to have changed:
       --font-futura        -> Jost   (was futura-100)          weights 600, 700
       --font-arial-rounded -> Nunito (was arial-rounded-mt-pro) weight  700
       --font-inter         -> Inter  (was inter-variable)       weights 400, 500, 700
     Only those weights are built. A weight requested outside the shipped set is
     resolved by the CSS font-matching algorithm to the nearest heavier face, so
     keep new rules on the values below. */
  --font-futura: "Jost", "Futura", sans-serif;                              /* headings/titles */
  --font-arial-rounded: "Nunito", "Arial Rounded MT Bold", sans-serif;      /* overlines/labels */
  --font-inter: "Inter", sans-serif;                                        /* body */
  --font-weight-bold: 700;
  --font-weight-semibold: 600; /* Jost + Inter only — Nunito ships 700 only (600 resolves to 700) */
  --font-weight-medium: 500;   /* Inter only — Jost/Nunito have no 500 (resolves to 600/700) */
  --font-weight-regular: 400;  /* Inter only */

  /* Layout */
  --menu-height: 7.5rem;
  --menu-height-shrink: 6rem;
  --hero-height: 500px;
  --transition-standard: 0.25s;
  --border-radius-standard: 1rem;
  --box-shadow-dropdown: 0 3rem 3rem rgba(0, 0, 0, 0.175);
  --overlay-opacity: 0.3;
  --overlay-opacity-sub: 0.75;
}
/* ========== END CUSTOM PROPERTIES ========== */


/* ========== BASE STYLES ========== */
html, body {
  width: 100%;
  height: 100%;
  overflow-x: clip;
}

body {
  color: var(--color-00dp);
  font-family: var(--font-inter);
  font-weight: var(--font-weight-regular);
  font-size: 0.9375rem;   /* 15px base body copy (site-wide) */
  line-height: 1.6;
  background-color: var(--color-white);
  position: relative;
}
/* ========== END BASE STYLES ========== */


/* ========== TYPOGRAPHY ========== */
/* Fluid type scale: sizes scale with viewport width.
   Reference viewport = 1600px (where 1vw = 16px = 1rem),
   so each Xrem target is paired with Xvw as the clamp preferred value.
   Line-heights are unitless ratios so they scale with the font-size. */

/* Heading Defaults — DM Sans (no uppercase) */
h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 {
  font-family: var(--font-futura);
  font-weight: var(--font-weight-bold);
}
/* Figma uses Futura Demibold (600) for the H3 & H5 type styles (H1/H2/H4 = Bold 700).
   Class-based so element-only headings and .h4 keep 700. */
.h3, .h5 { font-weight: var(--font-weight-semibold); }

/* Heading Sizes — Figma H1=48/56, H2=40/48, H3=32/40, H4=24/32, H5=20/28 */
h1, .h1 { font-size: clamp(1.5rem,   3vw,    3rem);    line-height: 1.167; } /* 24→48 / 56 */
h2, .h2 { font-size: clamp(1.5rem,   2.5vw,  2.5rem);  line-height: 1.2;   } /* 24→40 / 48 */
h3, .h3 { font-size: clamp(1.5rem,   2vw,    2rem);    line-height: 1.25;  } /* 24→32 / 40 */
h4, .h4 { font-size: clamp(1.25rem,  1.5vw,  1.5rem);  line-height: 1.333; } /* 20→24 / 32 */
h5, .h5 { font-size: clamp(1.125rem, 1.25vw, 1.25rem); line-height: 1.4;   } /* 18→20 / 28 */
h6, .h6 { font-size: clamp(1rem,     1vw,    1rem);    line-height: 1.5;   } /* 16/24 — inherits p-md scale */

/* Body Defaults — Inter */
p, ul li, ol li, table {
  font-family: var(--font-inter);
  font-size: clamp(0.8125rem, 0.95vw, 0.9375rem);   /* 13→15 (site-wide body copy) */
  line-height: 1.6;
  font-weight: var(--font-weight-regular);
}

/* Display Utilities — DM Sans (Figma defines lg=64/72 and sm=56/64) */
.display-lg, .display-sm {
  font-family: var(--font-futura);
  font-weight: var(--font-weight-bold);
}
.display-lg { font-size: clamp(2rem,    4vw,   4rem);   line-height: 1.125; } /* 32→64 / 72 */
.display-sm { font-size: clamp(1.75rem, 3.5vw, 3.5rem); line-height: 1.143; } /* 28→56 / 64 */

/* Paragraph Size Utilities — Inter */
.p-lg { font-size: clamp(1rem,      1.125vw, 1.125rem); line-height: 1.444; } /* 16→18 / 26 */
.p-md { font-size: clamp(0.875rem,  1vw,     1rem);     line-height: 1.5;   } /* 14→16 / 24 */
.p-sm { font-size: clamp(0.8125rem, 0.875vw, 0.875rem); line-height: 1.571; } /* 13→14 / 22 */
.p-xs { font-size: clamp(0.6875rem, 0.75vw,  0.75rem);  line-height: 1.667; } /* 11→12 / 20 */

/* Legacy Size Utilities */
.fs-7 { font-size: clamp(0.8125rem, 0.875vw, 0.875rem); }
.fs-8 { font-size: clamp(0.6875rem, 0.75vw,  0.75rem);  }

/* Label Utilities — Uppercase. Weight was --font-weight-medium (500) against the
   old Typekit Futura; Jost ships 600/700 only, so this is pinned to the shipped
   600 rather than letting font-matching pick it. No markup uses these today. */
.label-lg, .label-md, .label-sm, .label-xs {
  font-family: var(--font-futura);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
}
.label-lg { font-size: clamp(0.875rem,  1vw,     1rem);     line-height: 1.125; } /* 14→16 / 18 */
.label-md { font-size: clamp(0.75rem,   0.875vw, 0.875rem); line-height: 1.143; } /* 12→14 / 16 */
.label-sm { font-size: clamp(0.6875rem, 0.75vw,  0.75rem);  line-height: 1.167; } /* 11→12 / 14 */
.label-xs { font-size: clamp(0.5625rem, 0.625vw, 0.625rem); line-height: 1.2;   } /*  9→10 / 12 */

/* Overline Utilities — sentence case per Figma. Weight pinned to 600 for the same
   reason as the label utilities above. No markup uses these today. */
.overline-lg, .overline-sm {
  font-family: var(--font-futura);
  font-weight: var(--font-weight-semibold);
}
.overline-lg { font-size: clamp(0.75rem,   0.875vw, 0.875rem); line-height: 1.429; } /* 12→14 / 20 */
.overline-sm { font-size: clamp(0.6875rem, 0.75vw,  0.75rem);  line-height: 1.667; } /* 11→12 / 20 */

/* Font Family Utilities */
.helvetica-neue   { font-family: var(--font-futura); }
.inter            { font-family: var(--font-inter); }

/* Weight Utilities */
.bold     { font-weight: var(--font-weight-bold); }
.semibold { font-weight: var(--font-weight-semibold); }
.medium   { font-weight: var(--font-weight-medium); }
.regular  { font-weight: var(--font-weight-regular); }

strong { font-weight: var(--font-weight-bold); }
/* ========== END TYPOGRAPHY ========== */


/* ========== MENU & NAVIGATION ========== */

/* Height of the fixed menu, reserved in CSS so the hero clears it on the FIRST
   paint. This offset used to come only from syncHeroMargin() in custom.js,
   which runs at DOMContentLoaded — the hero (the LCP element) rendered under
   the menu and then jumped down by the full menu height.
   Values are the authored heights of .shc-topbar (+ .shc-subnav at xl) and are
   measured to match exactly: 192 / 132 / 112 / 104. custom.js re-measures and
   overrides this on :root if real layout ever disagrees. */
:root { --shc-menu-h: 192px; }                                  /* topbar 150 + subnav 42 */
@media (max-width: 1199px) { :root { --shc-menu-h: 132px; } }   /* logo 100 + 32 padding, no subnav */
@media (max-width: 767px)  { :root { --shc-menu-h: 112px; } }   /* logo  80 + 32 padding */
@media (max-width: 575px)  { :root { --shc-menu-h: 104px; } }   /* logo  80 + 24 padding */

/* Menu Container — wraps the upper nav (Phase 1) + main menu (Phase 2). */
.menu-container {
  background: var(--color-white);
  margin-top: 0 !important;
}

.menu-container.shrink-menu {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

/* ========== TOP NAV (upper bar) — Figma node 30154:475 ==========
   White bar: logo (left) · "Father & Son…" tagline · Google/Facebook/Yelp
   socials · Book Service + phone CTAs (right).
   NOTE: Figma specifies Helvetica Neue *Black* (900); the Adobe kit currently
   loads 500 & 700 only, so the black text renders at 700 (bold). Add a 900
   weight to the kit for exact fidelity. */
.shc-topbar {
  background: var(--color-white);
}

.shc-topbar-inner {
  gap: 2rem;                 /* 32px — logo ↔ nav items */
  padding: 1.25rem 5rem;     /* 20px / 80px (design) */
  transition: padding var(--transition-standard);
}

.shrink-menu .shc-topbar-inner {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

/* 3-part layout: left action ↔ centered logo ↔ right action */
.shc-topbar-inner > .shc-topbar-action { flex: 1 1 0; }
.shc-topbar-inner > .shc-topbar-action-end { justify-content: flex-end; }
.shc-topbar-logo { flex: 0 0 auto; }

/* Logo — centered wordmark; scaled by height, width auto */
.shc-topbar-logo img {
  display: block;
  width: auto;
  height: 110px;
  transition: height var(--transition-standard);
}

.shrink-menu .shc-topbar-logo img {
  height: 74px;
}

/* Action blocks (Schedule a Service / Phone) — icon circle + two-line label */
.shc-topbar-action {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem;
  text-decoration: none;
}

.shc-topbar-action-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  border: 3px solid var(--color-black);
  border-radius: 50%;
  color: var(--color-white);
  font-size: 1.25rem;
  transition: background-color var(--transition-standard), color var(--transition-standard);
}

.shc-topbar-action-icon-red  { background: var(--color-superior-red); }
.shc-topbar-action-icon-blue { background: var(--color-superior-blue); }

/* Hover: circles become outline-only, icon + title turn red */
.shc-topbar-action:is(:hover, :focus-visible) .shc-topbar-action-icon {
  background: transparent;
  color: var(--color-superior-red);
}

.shc-topbar-action:is(:hover, :focus-visible) .shc-topbar-action-title,
.shc-topbar-action:is(:hover, :focus-visible) .shc-topbar-action-title-blue {
  color: var(--color-superior-red);
}

.shc-topbar-action-text {
  display: flex;
  flex-direction: column;
  text-transform: uppercase;
  line-height: 1.15;
}

.shc-topbar-action-title {
  font-family: var(--font-futura);
  font-weight: var(--font-weight-bold);
  font-size: 1.25rem;                       /* 20px */
  color: #27282c;
  transition: color var(--transition-standard);
}

.shc-topbar-action-title-blue { color: var(--color-superior-blue); }

.shc-topbar-action-sub {
  font-family: var(--font-arial-rounded);
  font-weight: var(--font-weight-bold);     /* explicit: Nunito ships 700 only. Was
                                               inheriting 400 and being resolved to the
                                               single 700 Typekit face — pinned so the
                                               rendering can't drift. */
  font-size: 1rem;                          /* 16px */
  color: var(--color-gray-500);
}

/* CTA buttons — 8px rounded rectangles (not the global pill .btn) */
.shc-topbar-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1rem;                    /* 12px / 16px */
  border-radius: 0.5rem;                    /* 8px */
  font-family: var(--font-futura);
  font-weight: var(--font-weight-bold);     /* design = Black 900 */
  font-size: 1rem;
  line-height: 1.125;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--color-gray-50);
  text-decoration: none;
  transition: background-color var(--transition-standard), color var(--transition-standard);
}

.shc-topbar-cta:is(:hover, :focus-visible) {
  color: var(--color-white);
}

.shc-topbar-cta-dark {
  background: var(--color-08dp);
}

.shc-topbar-cta-dark:is(:hover, :focus-visible) {
  background: var(--color-12dp);
}

.shc-topbar-cta-phone {
  background: var(--color-superior-red);
}

.shc-topbar-cta-phone:is(:hover, :focus-visible) {
  background: var(--color-superior-red-hover);
}

/* Top nav responsive */
@media (max-width: 1199px) {
  .shc-topbar-inner { padding: 1rem 1.5rem; gap: 1rem; }
  .shc-topbar-logo img { height: 100px; }
}

@media (max-width: 767px) {
  .shc-topbar-logo img { height: 80px; }
}

@media (max-width: 575px) {
  .shc-topbar-inner { padding: 0.75rem 1rem; }
  .shc-topbar-cta { padding: 0.625rem 0.75rem; font-size: 0.875rem; }
}
/* ========== END TOP NAV ========== */

/* Bootstrap dropdown-toggle caret reset (we use real <i> carets) */
.dropdown-toggle.has-dropdown::after { display: none; }

/* ========== SUB NAV (main menu bar) — Figma node 30154:486 ==========
   Full-width Superior-red bar; 7 centered uppercase links, 4 with dropdowns.
   Desktop only (xl+) — below xl the links move into the offcanvas drawer.
   NOTE: Figma text is Helvetica Neue Black (900); kit loads 500/700, so
   rendered at 700. */
.shc-subnav {
  background: var(--color-04dp);
}

.shc-subnav-inner {
  position: relative;               /* offset parent for the full-width mega panel */
  padding: 0 5rem;
}

.shc-subnav .navbar-nav {
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;   /* links spread across the full bar (design) */
  gap: 1.5rem;
  width: 100%;
}

.shc-subnav .nav-item {
  display: flex;
  align-items: center;
}

.shc-subnav-link {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.8125rem 0;            /* ~13px vertical (design) */
  font-family: var(--font-arial-rounded);
  font-weight: var(--font-weight-bold);
  font-size: 0.875rem;             /* 14px */
  line-height: 1.143;              /* 16px */
  text-transform: uppercase;
  white-space: nowrap;
}

/* White in every state — no hover underline; beats Bootstrap .nav-link:hover/:focus.
   BS5 puts .show/.active on the link itself (not the li), and its
   .navbar-nav .nav-link.show rule resolves to near-black outside a .navbar. */
.shc-subnav .shc-subnav-link,
.shc-subnav .shc-subnav-link:is(:hover, :focus, :focus-visible, :active),
.shc-subnav .shc-subnav-link:is(.show, .active) {
  color: var(--color-white);
}

.shc-subnav-caret {
  font-size: 0.8em;
  transition: transform var(--transition-standard);
}

.shc-subnav .shc-subnav-link.show .shc-subnav-caret {
  transform: rotate(180deg);
}

/* Dropdown panels — white, elevated, rounded, dropped below the dark bar */
.shc-subnav .dropdown-menu {
  min-width: 280px;
  margin-top: 0.5rem;
  background: var(--color-white);
  border: 0;
  border-radius: var(--border-radius-standard);
  box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.18);
  padding: 1.25rem 1.5rem;
}

/* Wide mega panel (Heating & Cooling) — two columns of category groups */
.shc-subnav .dropdown-menu.shc-mega-wide {
  min-width: 620px;
}

/* Category group: red-icon + blue title, then its links */
.shc-mega-group + .shc-mega-group { margin-top: 1.25rem; }

.shc-mega-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--color-superior-blue);
  font-family: var(--font-futura);
  font-weight: var(--font-weight-bold);
  font-size: 1rem;
  text-transform: none;
  text-decoration: none;
  margin-bottom: 0.375rem;
}

.shc-mega-title i { color: var(--color-superior-red); }

.shc-mega-title:is(:hover, :focus-visible) { color: var(--color-midnight); }

/* Dropdown links — blue label + trailing chevron, red underline on hover */
.shc-subnav .dropdown-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.375rem 0;
  color: var(--color-superior-blue);
  font-family: var(--font-inter);
  font-weight: var(--font-weight-medium);
  font-size: 0.9375rem;
  line-height: 1.4;
  background: transparent;
  white-space: normal;
}

.shc-subnav .dropdown-item i { color: var(--color-gray-400); font-size: 0.8em; }

.shc-subnav .dropdown-item span {
  border-bottom: 2px solid transparent;
  transition: border-color var(--transition-standard);
}

.shc-subnav .dropdown-item:is(:hover, :focus-visible) {
  background: transparent;
  color: var(--color-superior-blue);
}

.shc-subnav .dropdown-item:is(:hover, :focus-visible) span {
  border-bottom-color: var(--color-superior-red);
}

/* Sub nav responsive — tighten link gap on the xl breakpoint */
@media (max-width: 1399px) {
  .shc-subnav-inner { padding: 0 2rem; }
  .shc-subnav .navbar-nav { gap: 1rem; }
  .shc-subnav-link { font-size: 0.8125rem; gap: 0.375rem; }
}

/* ========== TOP NAV — mobile actions (hamburger + icon CTAs) ========== */
.shc-topbar-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 0;
  border-radius: 0.5rem;
  background: var(--color-08dp);
  color: var(--color-white);
  font-size: 1.25rem;
  transition: background-color var(--transition-standard);
}

.shc-topbar-toggle:is(:hover, :focus-visible) {
  background: var(--color-12dp);
  color: var(--color-white);
}

/* Icon-only CTA variant (mobile contact + phone) */
.shc-topbar-cta-icon {
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  font-size: 1.125rem;
}

/* ========== MOBILE OFFCANVAS ========== */
.shc-offcanvas {
  background: var(--color-midnight);
  max-width: 88vw;
  width: 380px;
}

.shc-offcanvas .offcanvas-header {
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  padding: 1rem;
}

.shc-offcanvas-logo img {
  display: block;
  height: 64px;
  width: auto;
}

.shc-offcanvas-nav .nav-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  color: var(--color-gray-50);
  font-family: var(--font-futura);
  font-weight: var(--font-weight-bold);
  font-size: 1rem;
  line-height: 1.2;
  text-transform: uppercase;
  padding: 0.9rem 1.25rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  transition: background var(--transition-standard), color var(--transition-standard);
}

.shc-offcanvas-nav .nav-link:hover,
.shc-offcanvas-nav .nav-link:focus,
.shc-offcanvas-nav .nav-link[aria-expanded="true"] {
  color: var(--color-superior-red);
  background: rgba(255, 255, 255, 0.05);
}

.shc-oc-chevron {
  font-size: 0.75rem;
  transition: transform var(--transition-standard);
}

.shc-offcanvas-nav .nav-link[aria-expanded="true"] .shc-oc-chevron {
  transform: rotate(180deg);
}

.shc-offcanvas-subnav {
  background: rgba(0, 0, 0, 0.2);
}

.shc-offcanvas-subnav > .nav-item > .nav-link {
  padding-left: 2.25rem;
  font-size: 0.9rem;
}

/* Group pillar heading (red icon + bold label) */
.shc-offcanvas-subnav > .nav-item > .shc-offcanvas-group {
  font-family: var(--font-futura);
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  justify-content: flex-start;
  gap: 0.5rem;
}

.shc-offcanvas-group i {
  color: var(--color-superior-red);
  flex: 0 0 1.25em;
  text-align: center;
}

/* Deepest service-tier links */
.shc-offcanvas-subnav > .nav-item > .shc-offcanvas-subnav-inner {
  padding-left: 3.25rem;
  font-size: 0.85rem;
  opacity: 0.9;
}

.shc-offcanvas-footer {
  padding: 1rem;
  background: var(--color-midnight-hover);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.shc-offcanvas-footer .shc-topbar-cta {
  width: 100%;
  justify-content: center;
}
/* ========== END MOBILE OFFCANVAS ========== */
/* ========== END MENU & NAVIGATION ========== */


/* ========== HERO ========== */
/* Full-bleed background photo (art-directed <picture>) with the superior-blue→dark
   gradient overlaid in CSS — the gradient is intentionally NOT composited into
   the webp files for this build. Centered content column sits above both.
   Top margin is set to the fixed menu height at runtime by syncHeroMargin(). */
.shc-hero {
  position: relative;
  width: 100%;
  margin-top: var(--shc-menu-h); /* clears the fixed menu at first paint — see --shc-menu-h */
  background: var(--color-02dp); /* #191C20 — shows in the right inset strip behind the form */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4rem 1rem; /* Figma vertical rhythm; split content is vertically centered */
  min-height: clamp(33rem, 42vw, 44rem);
}

/* Background photo layer */
/* Photo is inset on the right (aligned to the subnav's 5rem padding / the
   "Our Company" edge) so the #191C20 section bg shows through on the right. */
.shc-hero-bg {
  position: absolute;
  inset: 0 5rem 0 0;
  z-index: 0;
  overflow: hidden;
  border-bottom-right-radius: 40px; /* Figma rounded-br-40 on the photo */
  pointer-events: none;
}
.shc-hero-bg img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Flat dark overlay (Figma: rgba(23,23,23,0.67)) — matches the inset photo */
.shc-hero::after {
  content: '';
  position: absolute;
  inset: 0 5rem 0 0;
  z-index: 1;
  pointer-events: none;
  background: rgba(23, 23, 23, 0.67);
  border-bottom-right-radius: 40px;
}

/* Photo inset tracks the subnav padding; full-bleed once the subnav hides (below xl) */
@media (max-width: 1399px) {
  .shc-hero-bg, .shc-hero::after { inset: 0 2rem 0 0; }
}
@media (max-width: 1199.98px) {
  .shc-hero-bg, .shc-hero::after { inset: 0; border-bottom-right-radius: 0; }
}

/* Content sits above photo + overlay */
.shc-hero-content {
  position: relative;
  z-index: 2;
}

/* Headline — left-aligned in the split hero column, sized to the Figma H1 (48px) */
.shc-hero-title {
  margin: 0;
  font-size: clamp(1.875rem, 3.2vw, 3rem); /* 30 → 48px (smaller than display-lg's 64) */
  line-height: 1.1;
}

/* Accreditation badges (Trane Comfort Specialist, Mitsubishi Diamond Contractor) */
.shc-hero-badge {
  height: 3.5rem;
  width: auto;
}

/* Elfsight Google-review badge in the hero accreditation row. platform.js
   injects it after load, so its box is reserved here (measured 186x24) to stop
   the hero copy shifting. The min-width matters most: below xl the badge wraps
   to its own line, and without the reservation that wrap happened only after
   the widget loaded — growing the row 56px -> 96px and pushing the h1 and CTAs
   down. Min-, not fixed-, so a wider badge still fits. */
.shc-accred-reviews {
  min-width: 186px;
  min-height: 24px;
}

/* Contact-form card (Figma: white, gray border, soft shadow, 12px radius) */
.shc-hero-form {
  border: 1px solid var(--color-gray-50);
  border-radius: 12px;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.05);
}

/* Figma fields: gray fill + subtle border (override the form's Bootstrap border-0) */
.shc-hero-form .form-control {
  background-color: var(--color-gray-50);
  border: 1px solid var(--color-gray-100) !important;
  border-radius: 4px;
}
.shc-hero-form .form-control::placeholder {
  color: var(--color-gray-500);
  opacity: 1;
}

/* Submit button — red, auto width (not full-width) */
.shc-hero-form .btn-contact {
  background: var(--color-superior-red);
  border-color: var(--color-superior-red);
  color: var(--color-white);
}
.shc-hero-form .btn-contact:is(:hover, :focus, :active) {
  background: color-mix(in srgb, var(--color-superior-red) 90%, #fff);
  border-color: color-mix(in srgb, var(--color-superior-red) 90%, #fff);
  color: var(--color-white);
}

/* ========== END HERO ========== */


/* ========== SECTION OVERLINE (reusable) ========== */
/* Section overline pill — reusable across section headers (Opening, Services…).
   The bullet-metal gradient fill comes from a .bg-gradient-bullet-metal-* utility. */
/* Overline — plain uppercase Arial Rounded label (white on dark bands,
   superior-red on light bands via the surface-context rule below) */
.shc-overline {
  display: inline-block;
  margin-bottom: 0.75rem;
  color: var(--color-superior-red);
  font-family: var(--font-arial-rounded);
  font-weight: var(--font-weight-bold);
  font-size: 0.875rem;
  line-height: 1.429;
  text-transform: uppercase;
}


/* ========== SERVICES SECTION — Figma node 30154:664 ========== */
/* Dark Blue Abyss-gradient band (bg comes from the .bg-gradient-blue-abyss-180 utility).
   A colored band, so it carries top + bottom padding; the contrasting bg is
   what marks the boundary with the section above. */

/* Tab selector — icon + 2-line label; active tab gets a dark icon/label and a
   red|blue split underline bar. */
.shc-service-tabs {
  gap: 0.5rem 1.75rem;
  flex-wrap: wrap;
}
.shc-service-tabs .nav-link {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.25rem 0.9rem;
  border: 0;
  background: transparent;
  color: var(--color-gray-500);
  font-family: var(--font-arial-rounded);
  font-weight: var(--font-weight-bold);
  font-size: 0.75rem;
  line-height: 1.2;
  text-transform: uppercase;
  text-align: center;
}
.shc-service-tabs .nav-link i { font-size: 1.75rem; }
.shc-service-tabs .nav-link span { max-width: 7rem; }
.shc-service-tabs .nav-link:hover { color: var(--color-gray-700); }
.shc-service-tabs .nav-link.active {
  color: var(--color-midnight);
  background: transparent;        /* no white tab background (override Bootstrap) */
  border-color: transparent;
}
.shc-service-tabs .nav-link.active i { color: var(--color-superior-blue); }
.shc-service-tabs .nav-link.active::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 9px;                    /* Figma underline thickness (square, no radius) */
  background: linear-gradient(90deg, var(--color-superior-red) 50%, var(--color-superior-blue) 50%);
}

/* Image with a colored edge accent facing the content card. The image stretches
   (object-fit cover) to match the content card's height beside it. */
.shc-service-media {
  position: relative;
  overflow: hidden;
  border-radius: 20px;
  min-height: 280px;
}
.shc-service-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.shc-service-media-red::after,
.shc-service-media-blue::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  width: 6px;
}
.shc-service-media-red::after  { right: 0; background: var(--color-superior-red); }
.shc-service-media-blue::after { left: 0;  background: var(--color-superior-blue); }

/* Commercial callout image — natural aspect (not full-height), square left edge */
.shc-service-media-blue {
  aspect-ratio: 654 / 462;
  min-height: 0;
  border-radius: 0 20px 20px 0;
}

/* At xl+ the pane photo (left) meets the card (right): square the image's facing corners */
@media (min-width: 1200px) {
  .shc-service-media-red { border-radius: 20px 0 0 20px; }
}

/* Dark content card with a blue accent on its left edge (facing the photo) */
.shc-service-panel {
  position: relative;
  overflow: hidden;
  background: var(--color-04dp);
  color: var(--color-white);
  border-radius: 20px;
  padding: 2rem;
}
.shc-service-panel::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 6px;
  background: var(--color-superior-blue);
}
/* Placed after the base so the squared left edge wins at xl+ */
@media (min-width: 1200px) {
  .shc-service-panel { padding: 2.5rem; border-radius: 0 20px 20px 0; }
}
.shc-service-copy p:last-child { margin-bottom: 0; }

/* Accordion — white rounded pills, red tier icon, +/− toggle */
.shc-service-accordion .accordion-item {
  background: transparent;
  border: 0;
  margin-bottom: 0.5rem;
}
.shc-service-accordion .accordion-item:last-child { margin-bottom: 0; }
.shc-service-accordion .accordion-button {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.75rem 1rem;
  background: var(--color-white);
  border-radius: 8px;
  color: var(--color-00dp);
  font-family: var(--font-inter);
  font-weight: var(--font-weight-bold);
  font-size: 0.9375rem;
  box-shadow: none;
}
.shc-service-accordion .accordion-button:not(.collapsed) {
  border-radius: 8px 8px 0 0;
  color: var(--color-00dp);
  background: var(--color-white);
  box-shadow: none;
}
/* Left tier icon — static (override the global .accordion-button fa- 180° spin) */
.shc-acc-icon { color: var(--color-superior-red); font-size: 1rem; width: 1.25rem; text-align: center; }
.shc-service-accordion .accordion-button:not(.collapsed) [class*="fa-"] { transform: none; }
.shc-service-accordion .accordion-button span:not(.shc-acc-toggle) { flex: 1 1 auto; }
/* Hide Bootstrap's default chevron */
.shc-service-accordion .accordion-button::after { display: none; }
/* Right toggle — pure-CSS black ⊕ (circle + plus) drawn in CSS so the FA
   JS-kit can't re-render or hide it. Rotates 45° into an ⊗ when the row opens. */
.shc-acc-toggle {
  position: relative;
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  margin-left: 0.75rem;
  border: 2px solid var(--color-black);
  border-radius: 50%;
  transition: transform var(--transition-standard);
}
.shc-acc-toggle::before,
.shc-acc-toggle::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  background: var(--color-black);
  transform: translate(-50%, -50%);
}
.shc-acc-toggle::before { width: 10px; height: 2px; }
.shc-acc-toggle::after  { width: 2px; height: 10px; }
.shc-service-accordion .accordion-button:not(.collapsed) .shc-acc-toggle {
  transform: rotate(45deg);
}
.shc-service-accordion .accordion-body {
  padding: 0.75rem 1rem 1rem;
  background: var(--color-white);
  border-radius: 0 0 8px 8px;
  color: var(--color-gray-700);
  font-size: 0.875rem;
  line-height: 1.5;
}
/* Service-page link inside the accordion body — on its own line below the copy */
.shc-acc-link {
  display: block;
  width: fit-content;
  margin-top: 0.75rem;
  color: var(--color-superior-blue);
  font-weight: var(--font-weight-bold);
  text-decoration: none;
}
.shc-acc-link:is(:hover, :focus-visible) {
  color: var(--color-superior-blue);
  text-decoration: underline;
}

/* Light-commercial callout — light gray card */
.shc-commercial {
  border-radius: 24px;
  overflow: hidden;
}
.shc-commercial-body { padding: 2rem; }
@media (min-width: 992px) {
  .shc-commercial-body { padding: 2.5rem 3rem; }
}

/* Brand-logo marquee — full-bleed, edge-to-edge infinite scroll. Each colored
   OEM SVG is forced to solid white with a filter. Two identical groups (each
   min-width:100%) scroll -100% so the loop is seamless at any viewport width;
   space-around keeps spacing even across the seam. Pauses on hover. */
.shc-logos {
  display: flex;
  overflow: hidden;
  margin-top: 3rem;
  user-select: none;
}
.shc-logos-group {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-around;
  min-width: 100%;
  gap: 2rem;
  animation: shc-logos-scroll 40s linear infinite;
}
.shc-logos-group img {
  flex: 0 0 auto;
  height: 48px;
  width: auto;
  max-width: 170px;
  object-fit: contain;
  /* Superior OEM logos are full-color (no white filter, unlike the AccuMax build) */
}
.shc-logos:hover .shc-logos-group { animation-play-state: paused; }
@keyframes shc-logos-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-100%); }
}

@media (prefers-reduced-motion: reduce) {
  .shc-logos-group { animation: none; flex-wrap: wrap; justify-content: center; }
}
/* ========== END SERVICES SECTION ========== */


/* ========== REVIEWS SECTION — Figma node 30154:927 ========== */
/* Red band (Red vs Blue gradient utility supplies the fill). Holds a centered
   header, the Elfsight full-review widget, and the two review CTAs. */
/* ========== END REVIEWS SECTION ========== */


/* ========== FINANCING + MAINTENANCE SECTION — Figma node 30107:1418 ==========
   Each sub-block: an icon + wide banner row sitting flush on a translucent card
   with a colored top-accent bar; the card body holds two columns. */

/* Gradient icon circle (red→black→blue diagonal, black border + white ring) */
.shc-finance-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 92px;
  height: 92px;
  border: 6px solid var(--color-black);
  border-radius: 50%;
  box-shadow: 0 0 0 5px var(--color-white);
  background: linear-gradient(158deg, var(--color-superior-red) 48%, #000 49.5%, var(--color-superior-blue) 51%);
  color: var(--color-white);
  font-size: 2.5rem;
}

/* Wide banner — 210px tall, rounded top, subtle white border */
.shc-finance-banner {
  height: 210px;
  overflow: hidden;
  border: 2px solid rgba(255, 255, 255, 0.4);
  border-radius: 40px 40px 0 0;
}
.shc-finance-banner img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Content card — translucent panel with a colored top-accent bar */
.shc-finance-card {
  position: relative;
  margin-top: 10px;
  padding: 1.875rem;                       /* 30px */
  background: rgba(92, 100, 121, 0.2);
  border: 2px solid rgba(255, 255, 255, 0.4);
  border-radius: 20px 0 20px 20px;   /* top-right square (Figma) */
}
.shc-finance-card-blue { box-shadow: 0 -10px 0 0 var(--color-superior-blue); }
.shc-finance-card-red  { box-shadow: 0 -10px 0 0 var(--color-superior-red); }

/* General card — the finance-card surface promoted for global reuse on dark
   bands: translucent panel + white border, even corners, no accent bar.
   (Used by the maintenance-plans cards and the icon-list rows on dark bands.) */
.shc-card {
  background: rgba(92, 100, 121, 0.2);
  border: 2px solid rgba(255, 255, 255, 0.4);
  border-radius: 20px;
  padding: 1.875rem;
}

/* Acorn logo beside the Apply button */
.shc-finance-logo { height: 42px; width: auto; }

/* Advantage-v2 tile (financing benefits) — translucent, left-aligned */
.shc-adv-v2 {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  padding: 1.25rem;
  background: rgba(229, 231, 234, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 12px;
}
.shc-adv-v2-icon { color: var(--color-white); font-size: 1.5rem; }
.shc-adv-v2-title {
  font-family: var(--font-futura);
  font-weight: var(--font-weight-bold);
  font-size: 1.25rem;                      /* 20px */
  line-height: 1.4;
  text-transform: uppercase;
  color: var(--color-white);
  margin-bottom: 0.5rem;
}
.shc-adv-v2-text { font-size: 0.875rem; line-height: 1.57; color: var(--color-white); }

/* Below md: shrink the icon + shorten the banner */
@media (max-width: 767.98px) {
  .shc-finance-icon { width: 64px; height: 64px; font-size: 1.75rem; border-width: 4px; box-shadow: 0 0 0 4px var(--color-white); }
  .shc-finance-banner { height: 140px; border-radius: 24px 24px 0 0; }
}
/* ========== END FINANCING + MAINTENANCE SECTION ========== */


/* ========== ABOUT US SECTION — Figma node 30154:1036 ========== */
/* Light gray-50 band (bg from the .bg-gray-50 utility; distinct from the white
   body). Two columns: advantages (left) + Our Story narrative & CTAs (right). */

/* Advantage row icon — white circle w/ blue glyph (bg/color from utilities) */
.shc-about-icon {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  font-size: 1.5rem;
}

/* Core Values chevron ribbon — 3 skewed segments (red / dark / blue) inside a
   white outline, with gradient icon circles lifting above each segment. */
.shc-values {
  max-width: 1284px;
  margin: 4rem auto 0;
}
/* White band bg = the 6px frame (padding) + the 6px diagonal dividers (gap) */
.shc-values-band {
  display: flex;
  gap: 6px;
  padding: 6px;
  transform: skewX(-20deg);
  background: var(--color-white);
  border-radius: 24px;
}
.shc-value-seg {
  flex: 1 1 0;
  display: flex;
  justify-content: center;
  border: 4px solid var(--color-02dp);   /* dark inset gap between the white frame/dividers and the color */
}
.shc-value-seg:first-child { border-radius: 20px 0 0 20px; }
.shc-value-seg:last-child  { border-radius: 0 20px 20px 0; }
.shc-value-red  { background: var(--color-superior-red); }
.shc-value-dark { background: var(--color-02dp); }
.shc-value-blue { background: var(--color-superior-blue); }
.shc-value-inner {
  transform: skewX(20deg);       /* counter-skew content upright */
  padding: 0.5rem 2.5rem 2.25rem;
  text-align: center;
  color: var(--color-white);
}
.shc-value-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  margin-top: -5.25rem;          /* overflow above the band top edge */
  margin-bottom: 0.75rem;
  border: 3px solid var(--color-black);
  border-radius: 50%;
  box-shadow: 0 0 0 6px var(--color-white);
  background: linear-gradient(158deg, var(--color-superior-red) 48%, #000 49.5%, var(--color-superior-blue) 51%);
  color: var(--color-white);
  font-size: 1.5rem;
}
.shc-value-title {
  font-family: var(--font-futura);
  font-weight: var(--font-weight-bold);
  font-size: 1.5rem;
  color: var(--color-white);
  margin-bottom: 0.75rem;
}
.shc-value-seg:hover .shc-value-title {   /* designer note: underline on hover */
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}
.shc-value-text { font-size: 1rem; line-height: 1.5; }

/* Stack the ribbon below lg (un-skew into full-width segments) */
@media (max-width: 991.98px) {
  .shc-values-band { flex-direction: column; transform: none; border-radius: 20px; }
  .shc-value-inner { transform: none; padding-top: 0.5rem; }
  .shc-value-icon { margin-top: -2.5rem; }
  .shc-value-seg:first-child { border-radius: 18px 18px 0 0; }
  .shc-value-seg:last-child  { border-radius: 0 0 18px 18px; }
}

/* About Us advantage card — transparent by default; lifts to a white rounded
   card with a soft shadow on hover (Figma hover state). */
.shc-adv-card {
  padding: 0.75rem 1rem;
  border-radius: 20px;
  transition: background-color var(--transition-standard), box-shadow var(--transition-standard);
}
.shc-adv-card:hover {
  background: var(--color-white);
  box-shadow: 0 0.75rem 2rem rgba(0, 0, 0, 0.12);
}

/* About Us advantage — gradient icon circle (black border, no white ring) +
   centered Arial-Rounded title & small text (both #383838 / 24dp). */
.shc-adv-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  margin-bottom: 1rem;
  border: 3px solid var(--color-black);
  border-radius: 50%;
  background: linear-gradient(158deg, var(--color-superior-red) 48%, #000 49.5%, var(--color-superior-blue) 51%);
  color: var(--color-white);
  font-size: 1.5rem;
}
.shc-adv-title {
  font-family: var(--font-arial-rounded);
  font-weight: var(--font-weight-bold);
  font-size: 1rem;
  line-height: 1.125;
  text-transform: uppercase;
  color: var(--color-24dp);
  margin-bottom: 0.5rem;
}
.shc-adv-text {
  font-size: 0.75rem;
  line-height: 1.5;
  color: var(--color-24dp);
}
/* ========== END ABOUT US SECTION ========== */


/* ========== SERVICE AREA SECTION — Figma node 30107:1476 ========== */
/* Midnight band. Left column carries all the content (header, two-column city
   list, callout); the map is a right-anchored background image that bleeds past
   the container to the section's right edge, so we sidestep grid col-sizing.
   It shrinks with the viewport and drops out below lg for mobile performance. */

.shc-service-area {
  position: relative;
  overflow: hidden;
}

/* Map — right-anchored, vertically centered (translateY) so it sits inside the
   section's py-5 padding rather than bleeding to the edges. Width-driven so it
   shrinks with the viewport; height:auto keeps the 798:832 aspect (srcset serves
   the matching resolution). rounded-left corners match Figma. Hidden below lg. */
.shc-map {
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  width: clamp(340px, 42vw, 600px);
  height: auto;
  border-radius: 20px 0 0 20px;
  pointer-events: none;
}
@media (max-width: 1199.98px) {
  .shc-map { display: none; }
}

/* City list item — colored icon disc + uppercase label (no card fill). The five
   cities with dedicated pages render as links with a subtle hover highlight;
   mx-n1 on the column cancels the padding so every row's left edge stays flush. */
.shc-location {
  gap: 0.75rem;
  padding: 0.25rem;
  border-radius: 8px;
}
a.shc-location-link {
  text-decoration: none;
  transition: background-color var(--transition-standard);
}
a.shc-location-link:is(:hover, :focus-visible) {
  background-color: rgba(255, 255, 255, 0.08);
}
.shc-location-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  color: var(--color-white);
  font-size: 1rem;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.05);
}
.shc-location-icon-red  { background-color: var(--color-superior-red); }
.shc-location-icon-blue { background-color: var(--color-superior-blue); }
.shc-location-label {
  font-family: var(--font-arial-rounded);
  font-weight: var(--font-weight-bold);
  font-size: 1rem;
  line-height: 1.125;
  text-transform: uppercase;
  color: var(--color-white);
}

/* Additional-communities callout — translucent blue glass card. */
.shc-location-callout {
  padding: 1.75rem;
  background-color: rgba(80, 96, 159, 0.7);
  border: 2px solid rgba(255, 255, 255, 0.4);
  border-radius: 20px;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.05);
}
/* ========== END SERVICE AREA SECTION ========== */


/* ========== FAQ SECTION — Figma node 30107:1512 ========== */
/* Dark #272727 (04dp) band. Centered header + two columns of collapsible FAQ
   items (Bootstrap collapse). Each row: white question + white plus icon over a
   gray-700 (#656870) rule; the plus rotates 45° to an × when open, answer below. */

.shc-faq-item {
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--color-gray-700);
}

/* Question row = full-width collapse toggle */
.shc-faq-q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  text-align: left;
  color: var(--color-white);
  font-family: var(--font-inter);
  font-weight: var(--font-weight-bold);   /* Figma type style = Inter 700 */
  font-size: 1.125rem;          /* 18px */
  line-height: 1.444;           /* 26px */
  cursor: pointer;
  transition: color var(--transition-standard);
}
.shc-faq-q:is(:hover, :focus-visible) {
  color: var(--color-superior-red);
}
.shc-faq-q i {
  flex: 0 0 auto;
  color: var(--color-white);
  font-size: 1rem;
  transition: transform var(--transition-standard);
}
.shc-faq-q[aria-expanded="true"] i {
  transform: rotate(45deg);     /* plus → × */
}

/* Answer */
.shc-faq-a {
  margin: 0.75rem 0 0;
  color: var(--color-gray-400);
}
/* Inline links in answers (e.g. click-to-call) — white + underline for contrast on the dark band */
.shc-faq-a a {
  color: var(--color-white);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.shc-faq-a a:is(:hover, :focus-visible) {
  color: var(--color-superior-red);
}
/* ========== END FAQ SECTION ========== */


/* ========== BUTTONS ========== */
.btn {
  padding: 0.5rem 0.75rem;
  font-size: 0.85rem;
  font-family: var(--font-arial-rounded);
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  border-radius: 0.5rem;
  margin-bottom: 0.5rem;
}

.btn.btn-lg { padding: 0.75rem 1.5rem; font-size: 1rem; }
.btn.btn-xl { padding: 1.25rem 1.75rem; font-size: 1.5rem; }

/* Superior Blue */
.btn-superior-blue {
  color: var(--color-white);
  background: var(--color-superior-blue);
  border-color: var(--color-superior-blue);
}
.btn-superior-blue:is(:hover, :focus, :active) {
  color: var(--color-white);
  background: color-mix(in srgb, var(--color-superior-blue) 90%, #fff);
  border-color: color-mix(in srgb, var(--color-superior-blue) 90%, #fff);
}
.btn-outline-superior-blue {
  color: var(--color-superior-blue);
  background: transparent;
  border-color: var(--color-superior-blue);
}
.btn-outline-superior-blue:is(:hover, :focus, :active) {
  color: var(--color-superior-blue-hover);
  background: transparent;
  border-color: var(--color-superior-blue);
}

/* Superior Red */
.btn-superior-red {
  color: var(--color-white);
  background: var(--color-superior-red);
  border-color: var(--color-superior-red);
}
.btn-superior-red:is(:hover, :focus, :active) {
  color: var(--color-white);
  background: color-mix(in srgb, var(--color-superior-red) 90%, #fff);
  border-color: color-mix(in srgb, var(--color-superior-red) 90%, #fff);
}
.btn-outline-superior-red {
  color: var(--color-superior-red);
  background: transparent;
  border-color: var(--color-superior-red);
}
.btn-outline-superior-red:is(:hover, :focus, :active) {
  color: var(--color-superior-red-hover);
  background: transparent;
  border-color: var(--color-superior-red);
}

/* Midnight */
.btn-midnight {
  color: var(--color-white);
  background: var(--color-midnight);
  border-color: var(--color-midnight);
}
.btn-midnight:is(:hover, :focus, :active) {
  color: var(--color-white);
  background: color-mix(in srgb, var(--color-midnight) 90%, #fff);
  border-color: color-mix(in srgb, var(--color-midnight) 90%, #fff);
}
.btn-outline-midnight {
  color: var(--color-midnight);
  background: transparent;
  border-color: var(--color-midnight);
}
.btn-outline-midnight:is(:hover, :focus, :active) {
  color: var(--color-midnight-hover);
  background: transparent;
  border-color: var(--color-midnight);
}

/* White */
.btn-white {
  color: var(--color-midnight);
  background: var(--color-white);
  border-color: var(--color-white);
}
.btn-white:is(:hover, :focus, :active) {
  color: var(--color-midnight);
  background: var(--color-gray-50);
  border-color: var(--color-white);
}
.btn-outline-white {
  color: var(--color-white);
  background: transparent;
  border-color: var(--color-white);
}
.btn-outline-white:is(:hover, :focus, :active) {
  color: var(--color-gray-50);
  background: transparent;
  border-color: var(--color-white);
}

/* 00dp (Dark) */
.btn-00dp {
  color: var(--color-white);
  background: var(--color-00dp);
  border-color: var(--color-00dp);
}
.btn-00dp:is(:hover, :focus, :active) {
  color: var(--color-white);
  background: color-mix(in srgb, var(--color-00dp) 90%, #fff);
  border-color: color-mix(in srgb, var(--color-00dp) 90%, #fff);
}
.btn-outline-00dp {
  color: var(--color-00dp);
  background: transparent;
  border-color: var(--color-00dp);
}
.btn-outline-00dp:is(:hover, :focus, :active) {
  color: var(--color-01dp);
  background: transparent;
  border-color: var(--color-00dp);
}
/* ========== END BUTTONS ========== */


/* ========== COLOR UTILITIES ========== */

/* Superior Blue */
.text-superior-blue { color: var(--color-superior-blue); }
.bg-superior-blue { background-color: var(--color-superior-blue); }
.bg-superior-blue-hover { background-color: var(--color-superior-blue-hover); }
.border-superior-blue { border-color: var(--color-superior-blue); }

/* Superior Red */
.text-superior-red { color: var(--color-superior-red); }
.bg-superior-red { background-color: var(--color-superior-red); }
.bg-superior-red-hover { background-color: var(--color-superior-red-hover); }
.border-superior-red { border-color: var(--color-superior-red); }

/* Midnight */
.text-midnight { color: var(--color-midnight); }
.text-01dp { color: var(--color-01dp); }
.bg-midnight { background-color: var(--color-midnight); }
.bg-midnight-hover { background-color: var(--color-midnight-hover); }
.border-midnight { border-color: var(--color-midnight); }

/* Brand Gradients — Blue Abyss */
.bg-gradient-blue-abyss-0   { background: var(--gradient-blue-abyss-0); }
.bg-gradient-blue-abyss-45  { background: var(--gradient-blue-abyss-45); }
.bg-gradient-blue-abyss-90  { background: var(--gradient-blue-abyss-90); }
.bg-gradient-blue-abyss-135 { background: var(--gradient-blue-abyss-135); }
.bg-gradient-blue-abyss-180 { background: var(--gradient-blue-abyss-180); }

/* Brand Gradients — Red vs Blue */
.bg-gradient-red-vs-blue-0   { background: var(--gradient-red-vs-blue-0); }
.bg-gradient-red-vs-blue-45  { background: var(--gradient-red-vs-blue-45); }
.bg-gradient-red-vs-blue-90  { background: var(--gradient-red-vs-blue-90); }
.bg-gradient-red-vs-blue-135 { background: var(--gradient-red-vs-blue-135); }
.bg-gradient-red-vs-blue-180 { background: var(--gradient-red-vs-blue-180); }

/* Brand Gradients — Bullet Metal */
.bg-gradient-bullet-metal-0   { background: var(--gradient-bullet-metal-0); }
.bg-gradient-bullet-metal-45  { background: var(--gradient-bullet-metal-45); }
.bg-gradient-bullet-metal-90  { background: var(--gradient-bullet-metal-90); }
.bg-gradient-bullet-metal-135 { background: var(--gradient-bullet-metal-135); }
.bg-gradient-bullet-metal-180 { background: var(--gradient-bullet-metal-180); }

/* White / Black */
.text-white { color: var(--color-white); }
.bg-white { background-color: var(--color-white); }
.border-white { border-color: var(--color-white); }
.text-black { color: var(--color-black); }
.bg-black { background-color: var(--color-black); }
.border-black { border-color: var(--color-black); }

/* Gray 50 */
.text-gray-50 { color: var(--color-gray-50); }
.bg-gray-50 { background-color: var(--color-gray-50); }
.border-gray-50 { border-color: var(--color-gray-50); }

/* Gray 500 */
.text-gray-500 { color: var(--color-gray-500); }
.bg-gray-500 { background-color: var(--color-gray-500); }
.border-gray-500 { border-color: var(--color-gray-500); }

/* Gray 600 */
.text-gray-600 { color: var(--color-gray-600); }
.bg-gray-600 { background-color: var(--color-gray-600); }
.border-gray-600 { border-color: var(--color-gray-600); }

/* Gray 100 */
.text-gray-100 { color: var(--color-gray-100); }
.bg-gray-100 { background-color: var(--color-gray-100); }
.bg-gray-300 { background-color: var(--color-gray-300); }
.border-gray-100 { border-color: var(--color-gray-100); }

/* Gray 700 */
.text-gray-700 { color: var(--color-gray-700); }
.bg-gray-700 { background-color: var(--color-gray-700); }
.border-gray-700 { border-color: var(--color-gray-700); }

/* Dark Mode */
.text-00dp { color: var(--color-00dp); }
.bg-00dp { background-color: var(--color-00dp); }
.bg-02dp { background-color: var(--color-02dp); }
.bg-04dp { background-color: var(--color-04dp); }
.border-00dp { border-color: var(--color-00dp); }

.text-24dp { color: var(--color-24dp); }
.bg-24dp { background-color: var(--color-24dp); }
.border-24dp { border-color: var(--color-24dp); }

.text-16dp { color: var(--color-16dp); }
.bg-16dp { background-color: var(--color-16dp); }
.border-16dp { border-color: var(--color-16dp); }

/* Misc Utilities */
.text-666 { color: #666666; }
/* ========== END COLOR UTILITIES ========== */


/* ========== COMPONENTS ========== */

ul li strong {
  color: var(--color-midnight);
}

/* Accordion */
.accordion-button [class*="fa-"] {
  transition: transform 0.3s ease-in-out;
}

.accordion-button:not(.collapsed) [class*="fa-"] {
  transform: rotate(180deg);
}

.accordion-item, .accordion-header, .accordion-button {
  background: transparent;
  border: none;
  color: var(--color-midnight);
}

.accordion-item {
  border-bottom: 0.25px solid var(--color-midnight-hover);
}

.accordion-button { font-size: 1rem; }
.accordion-body { font-size: 0.8rem; }

.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;
}

.accordion-button:not(.collapsed) {
  color: var(--color-midnight);
  box-shadow: none;
}

.accordion-button::after {
  display: none !important;
}

/* Accordion Icon Toggle — collapsed: show plus, hide minus */
.accordion-button .fa-circle-minus,
.accordion-button.collapsed .fa-circle-minus {
  display: none !important;
}

.accordion-button .fa-circle-plus,
.accordion-button.collapsed .fa-circle-plus {
  display: inline-block !important;
}

/* Accordion Icon Toggle — expanded: show minus, hide plus */
.accordion-button:not(.collapsed) .fa-circle-minus {
  display: inline-block !important;
}

.accordion-button:not(.collapsed) .fa-circle-plus {
  display: none !important;
}

/* Icon Stacked */
.icon-stacked {
  display: inline-flex;
  position: relative;
  width: 2em;
  height: 2em;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  border-radius: 50%;
  transition: box-shadow var(--transition-standard);
  /* Backdrop is a native CSS background, NOT a Font Awesome glyph. Pseudo-element
     FA icons render unreliably in Safari with the SVG+JS kit, so the circle/square
     is drawn here; the actual icon is the <i>/<svg> child. */
  background-color: var(--color-midnight);
  color: var(--color-white);
}

.icon-stacked > i,
.icon-stacked > svg {
  position: relative;
  z-index: 1;
  font-size: 1em;
}

/* Light base — slate icon on white circle */
.icon-stacked.light-base {
  color: var(--color-midnight);
  background-color: var(--color-white);
}

/* Warm base — white icon on light-orange circle */
.icon-stacked.warm-base {
  color: var(--color-white);
  background-color: var(--color-superior-red);
}

/* Square shape — square backdrop (the CSS background fills the box) */
.icon-stacked.square {
  border-radius: 0;
}

/* Sizes */
.icon-stacked.xs  { font-size: 0.5rem; }
.icon-stacked.sm  { font-size: 0.75rem; }
.icon-stacked.md  { font-size: 1rem; }
.icon-stacked.lg  { font-size: 1.5rem; }
.icon-stacked.xl  { font-size: 2rem; }
.icon-stacked.xxl { font-size: 3rem; }

.icon-stacked.shadow {
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.icon-stacked.hoverable {
  cursor: pointer;
  transition: transform 0.15s ease;
}

.icon-stacked.hoverable:hover {
  transform: scale(1.1);
}

.icon-stacked.hoverable:active {
  transform: scale(0.95);
}

.isolate {
  isolation: isolate;
}

/* ========== END COMPONENTS ========== */

/* ========== LINK UTILITIES ========== */
em, u {
  font-style: inherit !important;
  text-decoration: inherit !important;
}

a { text-decoration: none; }
.dashed { border-style: dashed !important; }

/* Brand Links */
a.link-superior-blue { color: var(--color-superior-blue); }
a.link-superior-blue:is(:hover, :focus, :active) { color: var(--color-superior-blue-hover); }

a.link-superior-red { color: var(--color-superior-red); }
a.link-superior-red:is(:hover, :focus, :active) { color: var(--color-superior-red-hover); }

a.link-midnight { color: var(--color-midnight); }
a.link-midnight:is(:hover, :focus, :active) { color: var(--color-midnight-hover); }

/* Generic Links */
a.link-white { color: var(--color-white); }
a.link-white:is(:hover, :focus, :active) { color: var(--color-gray-50); }

/* Neutral Links */
a.link-gray-50 { color: var(--color-gray-50); }
a.link-gray-50:is(:hover, :focus, :active) { color: var(--color-gray-100); }

a.link-gray-500 { color: var(--color-gray-500); }
a.link-gray-500:is(:hover, :focus, :active) { color: var(--color-gray-600); }

/* Dark Mode Links */
a.link-00dp { color: var(--color-00dp); }
a.link-00dp:is(:hover, :focus, :active) { color: var(--color-01dp); }

[id] {
  scroll-margin-top: 200px; /* based on menu height */
}


/* ========== MEDIA QUERIES ========== */

/* --- Tablet / Mobile (max-width: 1200px) --- */
@media (max-width: 1200px) {
  .shc-hero { padding-top: 3.5rem; padding-bottom: 4rem; }
}
/* ========== END MEDIA QUERIES ========== */


/* ========== WCAG AA CONTRAST GUARD ==========
   Superior Blue (#17329E) and Midnight (#0F1D55) clear 4.5:1 on every light
   surface in the palette. Superior Red (#D92526) passes on white / gray-50 /
   gray-100 but dips below 4.5:1 on the darker gray-200 / gray-300 fills — so
   swap .text-superior-red / .border-superior-red to Superior Blue there. :where()
   keeps this at specificity (0,1,0) so a .btn-* modifier on the same element
   still wins. */
:where(.bg-gray-200, .bg-gray-300) :is(.text-superior-red) {
  color: var(--color-superior-blue);
}
:where(.bg-gray-200, .bg-gray-300) :is(.border-superior-red) {
  border-color: var(--color-superior-blue);
}
/* ========== END WCAG AA CONTRAST GUARD ========== */


/* ========== DEFAULT LINK COLOR BY PARENT BG ==========
   Link contrast follows the NEAREST background-bearing ancestor — the direct
   parent relationship — not whichever section rule happens to fall last in
   the cascade. Each surface publishes an inherited context pair
   (--shc-link / --shc-link-hover); anchors simply consume it. Because
   custom properties inherit, the closest ancestor that sets the context wins,
   so a link inside a white card on a dark section correctly picks the card's
   light pair instead of the section's white (the failure the flat descendant
   selectors used to produce: white-on-white until hover). Component surfaces
   that paint their own light background (e.g. .shc-subpage-card) are
   registered here too — a bg-* utility class isn't the only way to create a
   surface. The consuming rule uses :where() to stay at (0,0,1) so any explicit
   .link-* / component / .btn color already on the anchor still wins. */

/* Light surfaces — superior-blue link, midnight on hover. Includes the light
   Gold gradient, the menu/mega dropdowns, and light component cards that can
   nest inside a dark section. */
:where(
  body,
  .bg-white, .bg-gray-50, .bg-gray-100, .bg-gray-200, .bg-gray-300,
  .menu-container,
  .navbar-expand-xl .navbar-nav .dropdown-menu,
  .shc-mega,
  .shc-subpage-card,
  .shc-service-accordion .accordion-body
) {
  --shc-link: var(--color-superior-blue);
  --shc-link-hover: var(--color-midnight);
  --shc-link-decoration: none;
}

/* Mid surfaces (gray-500/600/700) — white link, gray-100 on hover */
:where(.bg-gray-500, .bg-gray-600, .bg-gray-700) {
  --shc-link: var(--color-white);
  --shc-link-hover: var(--color-gray-100);
  --shc-link-decoration: underline;
}

/* Dark / brand-red surfaces — white link, gray-300 on hover. Includes the
   dark brand gradients (Blue Abyss, Red vs Blue, Bullet Metal). */
:where(
  .bg-superior-blue, .bg-superior-red, .bg-midnight,
  .bg-00dp, .bg-02dp, .bg-04dp, .bg-16dp, .bg-24dp, .bg-black,
  .bg-gradient-blue-abyss-0, .bg-gradient-blue-abyss-45, .bg-gradient-blue-abyss-90, .bg-gradient-blue-abyss-135, .bg-gradient-blue-abyss-180,
  .bg-gradient-red-vs-blue-0, .bg-gradient-red-vs-blue-45, .bg-gradient-red-vs-blue-90, .bg-gradient-red-vs-blue-135, .bg-gradient-red-vs-blue-180,
  .bg-gradient-bullet-metal-0, .bg-gradient-bullet-metal-45, .bg-gradient-bullet-metal-90, .bg-gradient-bullet-metal-135, .bg-gradient-bullet-metal-180
) {
  --shc-link: var(--color-white);
  --shc-link-hover: var(--color-gray-300);
  --shc-link-decoration: underline;
}

/* Anchors consume the nearest surface's pair. Fallback = light default so a
   link outside every registered surface still lands on brand superior-blue. */
a:where(:not(.btn)) {
  color: var(--shc-link, var(--color-superior-blue));
}
/* Prose links additionally consume the surface's decoration: on dark/mid
   bands the link is white inside white body copy, so it needs a non-color
   affordance to read as a link (same treatment the FAQ answers already use).
   Scoped to p a so nav, footer columns, and card-wrapping anchors keep the
   site-wide no-underline style. */
p a:where(:not(.btn)) {
  text-decoration: var(--shc-link-decoration, none);
  text-underline-offset: 2px;
}
a:where(:not(.btn)):where(:hover, :focus-visible) {
  color: var(--shc-link-hover, var(--color-midnight));
}
/* ========== END DEFAULT LINK COLOR BY PARENT BG ========== */

/* ========== ACCENT ICON COLOR BY PARENT SURFACE ==========
   The icon analogue of the link system above. Brand accent glyphs (check
   marks, advantage icons, the process "Step N of N" eyebrow) are superior-red
   — correct on light surfaces but low-contrast on dark/gray bands (red-on-
   dark-red drops to ~1.9:1). Each surface publishes an inherited --shc-icon
   that clears >=3:1 for graphics (and >=4.5:1 white for the small step label);
   the accent components consume it, so an icon auto-adapts to the NEAREST
   surface — including a red icon inside a white card on a dark band. Same
   surface set as the link system. :where() keeps the consuming rules
   overridable by any explicit color on the element. */
:where(
  body,
  .bg-white, .bg-gray-50, .bg-gray-100, .bg-gray-200, .bg-gray-300,
  .menu-container,
  .navbar-expand-xl .navbar-nav .dropdown-menu,
  .shc-mega,
  .shc-subpage-card,
  .shc-service-accordion .accordion-body
) {
  --shc-icon: var(--color-superior-red);
}
:where(
  .bg-superior-blue, .bg-superior-red, .bg-midnight,
  .bg-00dp, .bg-02dp, .bg-04dp, .bg-16dp, .bg-24dp, .bg-black,
  .bg-gradient-blue-abyss-0, .bg-gradient-blue-abyss-45, .bg-gradient-blue-abyss-90, .bg-gradient-blue-abyss-135, .bg-gradient-blue-abyss-180,
  .bg-gradient-red-vs-blue-0, .bg-gradient-red-vs-blue-45, .bg-gradient-red-vs-blue-90, .bg-gradient-red-vs-blue-135, .bg-gradient-red-vs-blue-180,
  .bg-gradient-bullet-metal-0, .bg-gradient-bullet-metal-45, .bg-gradient-bullet-metal-90, .bg-gradient-bullet-metal-135, .bg-gradient-bullet-metal-180
) {
  --shc-icon: var(--color-white);
}
/* ========== END ACCENT ICON COLOR BY PARENT SURFACE ========== */

/* ============================================================
   FOOTER — Figma nodes 30107:1580 (logo bar) + 30107:1640 (link columns)
   Full-bleed logo bar continues the closer's gray-50 band (midnight logo box +
   contact chips), then the midnight link-column footer + RBMG copyright bar.
   Column headings are Superior-red Futura 20; links are white Inter that warm
   to red on hover. HVAC service links mirror site-architecture.md slugs.
   ============================================================ */
.shc-footer {
  padding-top: 3.75rem;
  padding-bottom: 2.5rem;
}

.shc-footer-heading {
  margin-bottom: 0.75rem;
  color: var(--color-superior-red);
  font-family: var(--font-futura);
  font-weight: var(--font-weight-bold);
  font-size: 1.25rem;                        /* 20px */
  line-height: 1.4;
  text-transform: uppercase;
}

.shc-footer-links {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  margin-bottom: 0;
}

.shc-footer-link {
  color: var(--color-white);
  font-family: var(--font-inter);
  font-size: 1rem;
  line-height: 1.5;
  text-decoration: none;
  transition: color var(--transition-standard);
}
a.shc-footer-link:is(:hover, :focus-visible) {
  color: var(--color-superior-red);
  text-decoration: underline;
}

/* Brand icons — CSS-masked SVGs that replaced the Font Awesome Brands webfont
   (37.7 KB for two glyphs; these are ~1.3 KB). background-color: currentColor is
   what makes them inherit link colour and hover exactly like the glyphs did, so
   .shc-footer-socials a:hover still recolours them. The box is 1.25em x 1em to
   match the advance width of the fa-brands glyphs, keeping footer spacing
   pixel-identical. Masks need the -webkit- prefix for older Safari. */
.shc-brand-icon {
  display: inline-block;
  width: 1.25em;
  height: 1em;
  background-color: currentColor;
  vertical-align: -0.125em;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-size: contain;
          mask-size: contain;
}
.shc-brand-icon-google {
  -webkit-mask-image: url("/img/google-mono.svg");
          mask-image: url("/img/google-mono.svg");
}
.shc-brand-icon-facebook {
  -webkit-mask-image: url("/img/facebook.svg");
          mask-image: url("/img/facebook.svg");
}
/* No mask support: fall back to the colour logo rather than painting a solid
   currentColor block. */
@supports not ((-webkit-mask-image: url("/img/facebook.svg")) or (mask-image: url("/img/facebook.svg"))) {
  .shc-brand-icon {
    background-color: transparent;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
  }
  .shc-brand-icon-google   { background-image: url("/img/google-color.svg"); }
  .shc-brand-icon-facebook { background-image: url("/img/facebook.svg"); }
}

.shc-footer-socials a {
  display: inline-flex;
  padding: 0.25rem;
  font-size: 1rem;
  line-height: 1;
  color: var(--color-white);
  transition: color var(--transition-standard);
}
.shc-footer-socials a:is(:hover, :focus-visible) {
  color: var(--color-superior-red);
}

.shc-footer-copyright {
  margin-top: 3rem;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  color: var(--color-gray-400);
}
/* RBMG credit mark is a single-tone #666 grey (2.76:1 on the midnight footer —
   under the 3:1 graphic minimum). Lift it to ~#A3A3A3 (≈6.4:1) so it clears AA
   without editing the shared vendor SVG. */
.shc-footer-copyright img {
  filter: brightness(1.6);
}

@media (min-width: 992px) {
  .shc-footer {
    padding-top: 3.75rem;
    padding-bottom: 3.5rem;
  }
}

/* --- Footer logo bar (full-bleed) — continues the closer's gray-50 band. The
   midnight logo box bleeds to the left edge (rounded top-right) and visually
   connects into the midnight footer below; contact chips sit on the right. --- */
.shc-footer-logobar {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  background-color: var(--color-gray-50);
}
.shc-footer-logobox {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-midnight);
  border-top-right-radius: 60px;
  /* symmetric padding centers the logo; box sizes to the logo (no container
     alignment — the logo doesn't track the columns below) */
  padding: 1.75rem 3.5rem 1.5rem;
}
.shc-footer-logo-img {
  width: clamp(200px, 26vw, 420px);
  height: auto;
}

/* Contact chips — base layout; --bar sits on the gray-50 logo bar (desktop),
   --dark sits on the midnight band above the columns (mobile). */
.shc-footer-contact {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.5rem;
}
.shc-footer-contact--bar {
  flex: 1 1 340px;
  justify-content: space-evenly;
  padding: 1.25rem 2rem;
  padding-right: max(1.5rem, calc((100vw - 1320px) / 2 + 0.75rem));
}
.shc-footer-contact--dark {
  justify-content: flex-start;
  gap: 1.25rem 2rem;
  margin-bottom: 1.75rem;
  padding-bottom: 1.75rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}
.shc-footer-contact-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.shc-footer-contact-icon {
  flex-shrink: 0;
  color: var(--color-superior-red);
  font-size: 1.5rem;                         /* 24px */
  line-height: 1;
}
.shc-footer-contact-text {
  display: flex;
  flex-direction: column;
}
.shc-footer-contact-label {
  font-family: var(--font-arial-rounded);
  font-weight: var(--font-weight-bold);      /* explicit — see .shc-topbar-action-sub */
  font-size: 0.875rem;                       /* 14px */
  line-height: 1.143;
  text-transform: uppercase;
  color: var(--color-gray-500);              /* light default — clears 4.5:1 on the midnight --dark band (6.9:1) */
}
/* On the light gray-50 logo bar (--bar, desktop), gray-500 label drops to ~2:1 —
   darken to gray-700 (4.9:1 on gray-50) to clear AA. */
.shc-footer-contact--bar .shc-footer-contact-label {
  color: var(--color-gray-700);
}
.shc-footer-contact-value {
  font-family: var(--font-arial-rounded);
  font-weight: var(--font-weight-bold);      /* explicit — see .shc-topbar-action-sub */
  font-size: 1rem;                           /* 16px */
  line-height: 1.125;
  text-transform: uppercase;
  color: var(--color-superior-blue);         /* 9.3:1 on the gray-50 --bar */
  text-decoration: none;
}
/* On the midnight --dark band (mobile), superior-blue value drops to ~1.5:1 —
   flip to white (15.8:1). */
.shc-footer-contact--dark .shc-footer-contact-value {
  color: var(--color-white);
}
a.shc-footer-contact-value:is(:hover, :focus-visible) {
  text-decoration: underline;
}
/* Hover color per surface (brand-red fails 4.5:1 on BOTH footer surfaces, so
   darken-on-light / dim-on-dark instead). */
.shc-footer-contact--bar a.shc-footer-contact-value:is(:hover, :focus-visible) {
  color: var(--color-midnight);              /* 13.9:1 on gray-50 */
}
.shc-footer-contact--dark a.shc-footer-contact-value:is(:hover, :focus-visible) {
  color: var(--color-gray-300);              /* 10.1:1 on midnight */
}
/* On the midnight --dark band the gray label goes lighter (gray-400, 9:1) for
   contrast. (Value → white and hover → gray-300 are set above; brand-red hover
   was removed — it only cleared 3.2:1 on midnight.) */
.shc-footer-contact--dark .shc-footer-contact-label { color: var(--color-gray-400); }

/* Below lg: the logo box goes full-width midnight (no gray-50 gutter beside it),
   flowing straight into the midnight footer; contact chips render on that band. */
@media (max-width: 991.98px) {
  .shc-footer-logobox {
    width: 100%;
    justify-content: center;
    border-top-right-radius: 0;
    padding: 2rem 1.5rem;
  }
}

/* ============================================================
   OVERLINE CONTRAST — WCAG 2.1 AA on dark / gradient sections
   The default overline pill (bullet-metal gradient + white text) blends
   into dark or gradient section backgrounds. When the overline's parent
   section carries a dark or brand-gradient background, flip the pill to
   solid white with superior-blue text: the white pill clears 3:1 non-text
   contrast against the dark section, and superior-blue on white clears 4.5:1
   text contrast (superior-red on white would fail). Appended last so it
   wins the source-order tie with the .bg-gradient-* utilities.
   ============================================================ */
:where(
  .bg-superior-blue, .bg-superior-red, .bg-midnight, .bg-00dp, .bg-02dp, .bg-04dp, .bg-black,
  .bg-gradient-blue-abyss-0, .bg-gradient-blue-abyss-45, .bg-gradient-blue-abyss-90, .bg-gradient-blue-abyss-135, .bg-gradient-blue-abyss-180,
  .bg-gradient-red-vs-blue-0, .bg-gradient-red-vs-blue-45, .bg-gradient-red-vs-blue-90, .bg-gradient-red-vs-blue-135, .bg-gradient-red-vs-blue-180,
  .bg-gradient-bullet-metal-0, .bg-gradient-bullet-metal-45, .bg-gradient-bullet-metal-90, .bg-gradient-bullet-metal-135, .bg-gradient-bullet-metal-180
) .shc-overline {
  color: var(--color-white);
}

/* ============================================================
   SUB-PAGE TEMPLATE (page_template.php) — shared interior-page
   components. Section padding matches the home page (4rem top/bottom).
   ============================================================ */
.shc-why,
.shc-process,
.shc-other {
  padding-top: 4rem;
  padding-bottom: 4rem;
}

/* Breadcrumb bar (Bootstrap .breadcrumb supplies the list + "/" divider) */
.shc-breadcrumb {
  padding: 0.75rem 0;
  background: var(--color-gray-50);
  border-bottom: 1px solid var(--color-gray-200);
}
.shc-breadcrumb .breadcrumb {
  font-size: 0.875rem;
}
.shc-breadcrumb .breadcrumb-item,
.shc-breadcrumb .breadcrumb-item a {
  color: var(--color-16dp);
  text-decoration: none;
}
.shc-breadcrumb .breadcrumb-item a:is(:hover, :focus-visible) {
  color: var(--color-superior-red);
}
.shc-breadcrumb .breadcrumb-item.active {
  color: var(--color-gray-700);              /* gray-600 was 2.77:1 on gray-50; gray-700 clears 4.5:1 */
}
/* Dark variant — matches a dark (bg-02dp) section directly below so the hero
   flows seamlessly through the breadcrumb into that section. */
.shc-breadcrumb-dark {
  background: var(--color-02dp);
  border-bottom-color: rgba(255, 255, 255, 0.1);
}
.shc-breadcrumb-dark .breadcrumb {
  --bs-breadcrumb-divider-color: var(--color-gray-500);
}
.shc-breadcrumb-dark .breadcrumb-item,
.shc-breadcrumb-dark .breadcrumb-item a {
  color: var(--color-gray-300);
}
.shc-breadcrumb-dark .breadcrumb-item a:is(:hover, :focus-visible) {
  color: var(--color-white);
}
.shc-breadcrumb-dark .breadcrumb-item.active {
  color: var(--color-white);
}

/* Reusable sub-page card — 2px border that warms to red and lifts on hover.
   Project-wide interior-page card spec (related-service link grids). */
.shc-subpage-card {
  display: block;
  height: 100%;
  overflow: hidden;                 /* clip the flush media image to the radius */
  background: var(--color-white);
  border: 2px solid var(--color-gray-200);
  border-radius: 16px;
  color: var(--color-16dp);
  text-decoration: none;
  transition: border-color var(--transition-standard), transform var(--transition-standard), box-shadow var(--transition-standard);
}
.shc-subpage-card:is(:hover, :focus-visible) {
  border-color: var(--color-superior-red);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
}
/* Optional flush image at the card top (wide/short service photos) */
.shc-subpage-card-media img {
  display: block;
  width: 100%;
  height: auto;
}
.shc-subpage-card-body {
  padding: 1.5rem;
}
.shc-subpage-card-icon {
  display: inline-flex;
  margin-bottom: 0.75rem;
  color: var(--color-superior-red);
  font-size: 2rem;
  line-height: 1;
}
.shc-subpage-card-title {
  font-family: var(--font-futura);
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  color: var(--color-16dp);
}

/* Process — elevated numbered chip tabs (Bootstrap tabs) on the dark band */
.shc-process-tabs {
  gap: 0.5rem;
  margin-bottom: 1.5rem;
  border-bottom: 0;
}
.shc-process-tabs .nav-link {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  color: var(--color-gray-300);
  font-family: var(--font-futura);
  font-weight: var(--font-weight-bold);
  font-size: 0.875rem;
  text-transform: uppercase;
  transition: color var(--transition-standard), border-color var(--transition-standard), background-color var(--transition-standard);
}
.shc-process-tabs .nav-link:is(:hover, :focus-visible) {
  color: var(--color-white);
  border-color: rgba(255, 255, 255, 0.4);
}
.shc-process-tabs .nav-link.active {
  color: var(--color-white);
  background: rgba(255, 255, 255, 0.08);
  border-color: var(--color-superior-red);
}
/* Numbered badge inside each tab — fills red when the tab is active */
.shc-process-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
  color: var(--color-white);
  font-size: 0.8125rem;
  line-height: 1;
  transition: background-color var(--transition-standard);
}
.shc-process-tabs .nav-link.active .shc-process-num {
  background: var(--color-superior-red);
}
/* Elevated glass pane holding the active step */
.shc-process-pane {
  padding: 1.75rem;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}
.shc-process-pane-step {
  display: inline-block;
  color: var(--shc-icon, var(--color-superior-red));
  font-family: var(--font-futura);
  font-weight: var(--font-weight-bold);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.shc-process-step-title {
  font-family: var(--font-futura);
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  color: var(--color-white);
}

/* Step checklist — red checks, one item per line */
.shc-step-list {
  list-style: none;
  padding-left: 0;
  margin-bottom: 0;
}
.shc-step-list li {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}
.shc-step-list li i {
  margin-top: 0.25rem;
  color: var(--shc-icon, var(--color-superior-red));
}