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

/* ========== CUSTOM PROPERTIES ========== */
:root {
  /* Brand Colors — Greers Ferry Heat & Air (Figma node 36093-991).
     Navy + red direction (Jul 1 design review). Hover tints = base mixed 20% toward white. */
  --color-gf-blue: #022867;          /* Figma Brand/Ocean Blue — primary brand blue */
  --color-gf-blue-hover: #354785;
  --color-gf-red: #b11b1b;           /* Figma Brand/Vampire — brand red */
  --color-gf-red-hover: #c14949;
  --color-lake-blue: #084a7a;        /* Figma Brand/Lake Blue — mid-blue accent */
  --color-midnight: #0f2848;         /* Figma Brand/Abyss — dark section background */
  --color-midnight-hover: #3f536d;
  --color-light: #eeffee;            /* Figma Brand/Light (unchanged) */
  --color-ferry-red: #de2634;        /* Figma Brand/Ferry Red — review stars (brighter than Vampire) */

  /* Brand Gradients — Blue Abyss (Lake Blue → Abyss) */
  --gradient-blue-abyss-0: linear-gradient(0deg, #084a7a, #0f2848);
  --gradient-blue-abyss-45: linear-gradient(45deg, #084a7a, #0f2848);
  --gradient-blue-abyss-90: linear-gradient(90deg, #084a7a, #0f2848);
  --gradient-blue-abyss-135: linear-gradient(135deg, #084a7a, #0f2848);
  --gradient-blue-abyss-180: linear-gradient(180deg, #084a7a, #0f2848);

  /* Brand Gradients — Red vs Blue (Vampire → Ocean Blue) */
  --gradient-red-vs-blue-0: linear-gradient(0deg, #b11b1b, #022867);
  --gradient-red-vs-blue-45: linear-gradient(45deg, #b11b1b, #022867);
  --gradient-red-vs-blue-90: linear-gradient(90deg, #b11b1b, #022867);
  --gradient-red-vs-blue-135: linear-gradient(135deg, #b11b1b, #022867);
  --gradient-red-vs-blue-180: linear-gradient(180deg, #b11b1b, #022867);

  /* 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 — Greers Ferry (Figma node 36093-991).
     Headings + overlines = Arial Black (900), labels = Arial Bold (700), body = Inter.
     Arial Black / Arial are system fonts (no web-font load); Inter loads via the
     existing Adobe Fonts kit <link> in doc-header. Var names kept stable to avoid
     breaking references — values repointed per the fresh brand swap. */
  --font-futura: 'Arial Black', 'Arial Bold', Gadget, sans-serif; /* headings/titles + overlines (Arial Black 900) */
  --font-arial-rounded: Arial, 'Helvetica Neue', Helvetica, sans-serif; /* labels (weight 700) */
  --font-inter: inter-variable, 'Inter', sans-serif; /* body — Inter */
  --font-weight-bold: 700;
  --font-weight-semibold: 600; /* body/inter only — futura & arial-rounded have no 600 (round to 700) */
  --font-weight-medium: 500;
  --font-weight-regular: 400;

  /* 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 — Barlow Condensed SemiBold, Uppercase */
.label-lg,
.label-md,
.label-sm,
.label-xs {
  font-family: var(--font-futura);
  font-weight: var(--font-weight-medium);
  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 — Barlow Condensed SemiBold (sentence case per Figma) */
.overline-lg,
.overline-sm {
  font-family: var(--font-futura);
  font-weight: var(--font-weight-medium);
}
.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 ========== */

/* 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. */
.gf-topbar {
  background: var(--color-white);
}

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

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

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

/* Logo — centered wordmark; scaled by height, width auto (Figma proof 36093-1687) */
.gf-topbar-logo img {
  display: block;
  width: auto;
  height: 150px; /* Figma proof 36093-1687 (215×150) */
  transition: height var(--transition-standard);
}

.shrink-menu .gf-topbar-logo img {
  height: 100px;
}

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

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

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

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

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

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

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

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

.gf-topbar-action-sub {
  font-family: var(--font-arial-rounded);
  font-size: 1rem; /* 16px */
  color: var(--color-gray-500);
}

/* CTA buttons — 8px rounded rectangles (not the global pill .btn) */
.gf-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);
}

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

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

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

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

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

.gf-topbar-cta-blue {
  background: var(--color-lake-blue);
}
.gf-topbar-cta-blue:is(:hover, :focus-visible) {
  background: var(--color-gf-blue);
}

/* Left cluster: Google reviews (star row + "Read Reviews" + trust subline) */
.gf-topbar-reviews {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.gf-topbar-reviews-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-arial-rounded);
  font-weight: var(--font-weight-bold);
  font-size: 0.9375rem; /* 15px — Figma proof 36093-1687 */
  color: var(--color-gray-600); /* Figma Neutral/600 #8D919A — "Read Reviews" (title case) */
  text-decoration: none;
}
.gf-topbar-google {
  display: block;
  width: 16px;
  height: 16px;
}
.gf-topbar-stars {
  color: var(--color-ferry-red); /* Ferry Red stars */
  font-size: 1rem; /* 16px — Figma proof */
  letter-spacing: 0.05em;
}
.gf-topbar-reviews-link:is(:hover, :focus-visible) {
  color: var(--color-gf-red);
}
.gf-topbar-reviews-sub {
  font-family: var(--font-arial-rounded);
  font-weight: var(--font-weight-bold);
  font-size: 0.9375rem; /* 15px — Figma proof */
  color: var(--color-lake-blue); /* Figma Brand/Lake Blue #084A7A — trusted line */
}

/* Right cluster: social icon links + CTA buttons */
.gf-topbar-right {
  flex: 1 1 0;
}
.gf-topbar-social {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  color: var(--color-gf-blue);
  font-size: 1.1rem;
  text-decoration: none;
  transition: color var(--transition-standard);
}
.gf-topbar-social:is(:hover, :focus-visible) {
  color: var(--color-gf-red);
}
/* Google + Facebook sit as a tight pair (Figma 36093-1687) — shrink the box so
   the two glyphs hug instead of the wide 32px hit-areas + row gap. */
.gf-topbar-socials .gf-topbar-social {
  width: auto;
  height: auto;
  padding: 0.2rem;
}

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

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

@media (max-width: 575px) {
  .gf-topbar-inner {
    padding: 0.75rem 1rem;
  }
  .gf-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. */
.gf-subnav {
  background: var(--color-midnight); /* Abyss navy (Figma nav bar) */
}

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

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

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

.gf-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 */
.gf-subnav .gf-subnav-link,
.gf-subnav .gf-subnav-link:is(:hover, :focus, :focus-visible, :active),
.gf-subnav .nav-item.show > .gf-subnav-link {
  color: var(--color-white);
}

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

.gf-subnav .nav-item.show > .gf-subnav-link .gf-subnav-caret {
  transform: rotate(180deg);
}

/* Dropdown panels — white, elevated, rounded, dropped below the dark bar */
.gf-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 */
.gf-subnav .dropdown-menu.gf-mega-wide {
  min-width: 620px;
}

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

.gf-mega-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--color-gf-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;
}

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

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

/* Dropdown links — blue label + trailing chevron, red underline on hover */
.gf-subnav .dropdown-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.375rem 0;
  color: var(--color-gf-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;
}

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

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

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

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

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

/* ========== TOP NAV — mobile actions (hamburger + icon CTAs) ========== */
.gf-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);
}

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

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

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

.gf-offcanvas-body {
  padding: 0; /* full-bleed drawer nav (replaces the banned p-0 utility) */
}
.gf-offcanvas .offcanvas-header {
  background: var(--color-white); /* white header so the color logo reads on the dark drawer */
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  padding: 1rem;
}

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

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

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

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

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

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

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

/* Group pillar heading (red icon + bold label) */
.gf-offcanvas-subnav > .nav-item > .gf-offcanvas-group {
  font-family: var(--font-futura);
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
}

.gf-offcanvas-group i {
  color: var(--color-gf-red);
  margin-right: 0.35rem;
  width: 1.25em;
  text-align: center;
}

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

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

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

/* ========== HERO ========== */
/* Full-bleed background photo (art-directed <picture>) with the gf-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(). */
.gf-hero {
  position: relative;
  width: 100%;
  background: var(--color-midnight); /* Abyss — shows behind the photo while it loads */
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 4rem 1rem; /* content vertically centered over the full-bleed photo */
  min-height: clamp(26rem, 36vw, 37rem); /* Figma hero ≈ 580px */
}

/* Full-bleed background photo (van overlooking Greers Ferry Lake) */
.gf-hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
.gf-hero-bg img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Navy overlay — darker on the text (left) side for legibility, fading right so
   the photo still shows. Replaces the flat 33% which was too light on busy photos. */
.gf-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(15, 40, 72, 0.72) 0%, rgba(15, 40, 72, 0.44) 52%, rgba(15, 40, 72, 0.12) 100%);
}

/* Content sits above photo + overlay. Text-shadow does the legibility work the
   overlay used to, so the scrim can lighten and let the lake photo show through. */
.gf-hero-content {
  position: relative;
  z-index: 2;
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.55);
}

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

/* Subheadline — Figma Arial Bold 24/32 (not the Arial Black display face) */
.gf-hero-subtitle {
  margin: 0;
  font-family: var(--font-arial-rounded); /* Arial */
  font-weight: var(--font-weight-bold);
  font-size: clamp(1.125rem, 1.6vw, 1.5rem); /* → 24px */
  line-height: 1.3;
}

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

/* Contact-form card (Figma: white, gray border, soft shadow, 12px radius) */
.gf-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) */
.gf-hero-form .form-control {
  background-color: var(--color-gray-50);
  border: 1px solid var(--color-gray-100) !important;
  border-radius: 4px;
}
.gf-hero-form .form-control::placeholder {
  color: var(--color-gray-500);
  opacity: 1;
}

/* Submit button — red, auto width (not full-width) */
.gf-hero-form .btn-contact {
  background: var(--color-gf-red);
  border-color: var(--color-gf-red);
  color: var(--color-white);
}
.gf-hero-form .btn-contact:is(:hover, :focus, :active) {
  background: color-mix(in srgb, var(--color-gf-red) 90%, #fff);
  border-color: color-mix(in srgb, var(--color-gf-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,
   gf-red on light bands via the surface-context rule below) */
.gf-overline {
  display: inline-block;
  margin-bottom: 0.75rem;
  color: var(--color-gf-red);
  font-family: var(--font-futura); /* Arial Black (Figma overline) */
  font-weight: var(--font-weight-bold);
  font-size: 1rem; /* 16px (Figma) */
  line-height: 1.25;
  text-transform: uppercase;
}

/* Overline sits on the dark hero photo — red-on-navy fails contrast/reads muddy;
   force white here (light-band overlines keep the red brand accent). */
.gf-hero .gf-overline,
.gf-hero-content .gf-overline {
  color: var(--color-white);
}

/* ========== 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. */
.gf-service-tabs {
  gap: 5px;
  flex-wrap: wrap;
}
.gf-service-tabs .nav-item {
  flex: 1 1 0;
}
.gf-service-tabs .nav-link {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  padding: 0.625rem 1rem 1.25rem; /* 10 / 16 / 20 (Figma) */
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--color-gray-50); /* #eef0f5 on the lake-blue band */
  font-family: var(--font-arial-rounded);
  font-weight: var(--font-weight-bold);
  font-size: 0.875rem; /* 14px */
  line-height: 1.14;
  text-transform: uppercase;
  text-align: center;
}
.gf-service-tabs .nav-link i {
  font-size: 2.25rem; /* 36px */
}
.gf-service-tabs .nav-link:hover {
  color: var(--color-white);
}
/* Active tab = filled Abyss box (Figma) */
.gf-service-tabs .nav-link.active {
  color: var(--color-white);
  background: var(--color-midnight); /* Abyss #0f2848 */
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.05);
}
.gf-service-tabs .nav-link.active i {
  color: var(--color-white);
}

/* Pane = Abyss container holding image + white card (Figma node 36093:1053) */
.gf-service-pane {
  display: flex;
  gap: 40px;
  padding: 28px;
  background: var(--color-midnight); /* Abyss #0f2848 */
  border-radius: 12px;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
}
.gf-service-col {
  flex: 1 1 0;
  min-width: 0;
}
@media (max-width: 1199.98px) {
  .gf-service-pane {
    padding: 16px;
    gap: 0;
  }
}

/* Image — rounded, fills its column height (object-fit cover) */
.gf-service-media {
  position: relative;
  overflow: hidden;
  border-radius: 12px;
  min-height: 280px;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.05);
}
.gf-service-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Commercial callout image — natural aspect, rounded */
.gf-service-media-blue {
  aspect-ratio: 654 / 462;
  min-height: 0;
}

/* White content card (Figma: white, 1px #eef0f5 border, rounded 12) */
.gf-service-panel {
  background: var(--color-white);
  color: var(--color-00dp);
  border: 1px solid var(--color-gray-50);
  border-radius: 12px;
  padding: 2.5rem;
}
.gf-service-copy p:last-child {
  margin-bottom: 0;
}

/* Accordion — white rounded pills, red tier icon, +/− toggle */
.gf-service-accordion .accordion-item {
  background: transparent;
  border: 0;
  margin-bottom: 0.5rem;
}
.gf-service-accordion .accordion-item:last-child {
  margin-bottom: 0;
}
.gf-service-accordion .accordion-button {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  padding: 0.75rem 1.25rem;
  background: var(--color-gray-100);
  border-radius: 8px;
  color: var(--color-black);
  font-family: var(--font-inter);
  font-weight: var(--font-weight-bold);
  font-size: 1.125rem; /* 18px (Figma) */
  box-shadow: none;
}
.gf-service-accordion .accordion-button:not(.collapsed) {
  border-radius: 8px 8px 0 0;
  color: var(--color-black);
  background: var(--color-gray-100);
  box-shadow: none;
}
/* Left tier icon — static (override the global .accordion-button fa- 180° spin) */
.gf-acc-icon {
  color: var(--color-lake-blue);
  font-size: 1.5rem; /* 24px (Figma) */
  width: 1.75rem;
  text-align: center;
}
.gf-service-accordion .accordion-button:not(.collapsed) [class*='fa-'] {
  transform: none;
}
.gf-service-accordion .accordion-button span:not(.gf-acc-toggle) {
  flex: 1 1 auto;
}
/* Hide Bootstrap's default chevron */
.gf-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. */
.gf-acc-toggle {
  position: relative;
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  margin-left: 0.75rem;
  border: 2px solid var(--color-lake-blue);
  border-radius: 50%;
  transition: transform var(--transition-standard);
}
.gf-acc-toggle::before,
.gf-acc-toggle::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  background: var(--color-lake-blue);
  transform: translate(-50%, -50%);
}
.gf-acc-toggle::before {
  width: 10px;
  height: 2px;
}
.gf-acc-toggle::after {
  width: 2px;
  height: 10px;
}
/* Figma keeps the plus-circle in the open state (no +→× rotation). */
.gf-service-accordion .accordion-body {
  padding: 0.75rem 1.25rem 1rem;
  background: var(--color-gray-100);
  border-radius: 0 0 8px 8px;
  color: var(--color-gray-700);
  font-size: 0.9375rem;
  line-height: 1.5;
}
/* Service-page link inside the accordion body — on its own line below the copy */
.gf-acc-link {
  display: block;
  width: fit-content;
  margin-top: 0.75rem;
  color: var(--color-lake-blue);
  font-weight: var(--font-weight-bold);
  text-decoration: none;
}
.gf-acc-link:is(:hover, :focus-visible) {
  color: var(--color-lake-blue);
  text-decoration: underline;
}
/* Pane-level "Learn More" — muted gray uppercase link (Figma) */
.gf-learnmore {
  color: var(--color-gray-600);
  font-family: var(--font-arial-rounded);
  font-weight: var(--font-weight-bold);
  font-size: 0.875rem;
  text-transform: uppercase;
  text-decoration: none;
}
.gf-learnmore:is(:hover, :focus-visible) {
  color: var(--color-gf-red);
}

/* Commercial callout — white card, image + content flex (Figma node 36093:1071) */
.gf-commercial {
  display: flex;
  align-items: center;
  gap: 2.5rem;
  padding: 2rem;
  border-radius: 12px;
  overflow: hidden;
}
.gf-commercial-body {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.gf-commercial-media {
  flex: 1 1 0;
  min-width: 0;
  align-self: stretch;
}
.gf-commercial-media .gf-service-media {
  height: 100%;
  min-height: 240px;
}

/* 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. */
.gf-logos {
  display: flex;
  overflow: hidden;
  margin-top: 3rem;
  user-select: none;
}
.gf-logos-group {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-around;
  min-width: 100%;
  gap: 2rem;
  animation: gf-logos-scroll 40s linear infinite;
}
.gf-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) */
}
.gf-logos:hover .gf-logos-group {
  animation-play-state: paused;
}
@keyframes gf-logos-scroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-100%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .gf-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) */
.gf-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-gf-red) 48%,
    #000 49.5%,
    var(--color-gf-blue) 51%
  );
  color: var(--color-white);
  font-size: 2.5rem;
}

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

/* Content card — translucent panel with a colored top-accent bar */
.gf-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) */
}
.gf-finance-card-blue {
  box-shadow: 0 -10px 0 0 var(--color-gf-blue);
}
.gf-finance-card-red {
  box-shadow: 0 -10px 0 0 var(--color-gf-red);
}

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

/* Advantage-v2 tile (financing benefits) — translucent, left-aligned */
.gf-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;
}
.gf-adv-v2-icon {
  color: var(--color-white);
  font-size: 1.5rem;
}
.gf-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;
}
.gf-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) {
  .gf-finance-icon {
    width: 64px;
    height: 64px;
    font-size: 1.75rem;
    border-width: 4px;
    box-shadow: 0 0 0 4px var(--color-white);
  }
  .gf-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) */
.gf-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. */
.gf-values {
  max-width: 1284px;
  margin: 4rem auto 0;
}
/* White band bg = the 6px frame (padding) + the 6px diagonal dividers (gap) */
.gf-values-band {
  display: flex;
  gap: 6px;
  padding: 6px;
  transform: skewX(-20deg);
  background: var(--color-white);
  border-radius: 24px;
}
.gf-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 */
}
.gf-value-seg:first-child {
  border-radius: 20px 0 0 20px;
}
.gf-value-seg:last-child {
  border-radius: 0 20px 20px 0;
}
.gf-value-red {
  background: var(--color-gf-red);
}
.gf-value-dark {
  background: var(--color-02dp);
}
.gf-value-blue {
  background: var(--color-gf-blue);
}
.gf-value-inner {
  transform: skewX(20deg); /* counter-skew content upright */
  padding: 0.5rem 2.5rem 2.25rem;
  text-align: center;
  color: var(--color-white);
}
.gf-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-gf-red) 48%,
    #000 49.5%,
    var(--color-gf-blue) 51%
  );
  color: var(--color-white);
  font-size: 1.5rem;
}
.gf-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;
}
.gf-value-seg:hover .gf-value-title {
  /* designer note: underline on hover */
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}
.gf-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) {
  .gf-values-band {
    flex-direction: column;
    transform: none;
    border-radius: 20px;
  }
  .gf-value-inner {
    transform: none;
    padding-top: 0.5rem;
  }
  .gf-value-icon {
    margin-top: -2.5rem;
  }
  .gf-value-seg:first-child {
    border-radius: 18px 18px 0 0;
  }
  .gf-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). */
.gf-adv-card {
  padding: 0.75rem 1rem;
  border-radius: 20px;
  transition: background-color var(--transition-standard), box-shadow var(--transition-standard);
}
.gf-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). */
.gf-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-gf-red) 48%,
    #000 49.5%,
    var(--color-gf-blue) 51%
  );
  color: var(--color-white);
  font-size: 1.5rem;
}
.gf-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;
}
.gf-adv-text {
  font-size: 0.75rem;
  line-height: 1.5;
  color: var(--color-24dp);
}
/* ========== END ABOUT US SECTION ========== */

/* ========== OPENER // CLOSER 2-COL — Figma node 36093:1001 ========== */
/* Gray-50 band. Left: overline/H2/subhead/body/CTAs + 6 advantage cards.
   Right: tall photo. Below: white "Reach out to our Team" contact card. */
.gf-opener {
  background: var(--color-gray-50);
}

/* Section subhead — Arial Bold 24/32 uppercase (Figma H4) */
.gf-subhead {
  font-family: var(--font-arial-rounded);
  font-weight: var(--font-weight-bold);
  font-size: clamp(1.25rem, 1.6vw, 1.5rem); /* → 24px */
  line-height: 1.33;
  text-transform: uppercase;
}

/* Advantage cards — white, rounded, soft shadow; red icon + red label */
.gf-opener-adv {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  height: 100%;
  padding: 1.25rem;
  background: var(--color-white);
  border-radius: 12px;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.05);
  text-align: center;
  transition: background-color var(--transition-standard), box-shadow var(--transition-standard);
}
/* Hover: card fills navy (Abyss), icon + label turn white (Figma prototype) */
.gf-opener-adv:hover {
  background: var(--color-midnight);
  box-shadow: 0 0.5rem 1.25rem rgba(0, 0, 0, 0.18);
}
.gf-opener-adv-icon {
  color: var(--color-gf-red);
  font-size: 1.5rem;
  transition: color var(--transition-standard);
}
.gf-opener-adv-label {
  margin: 0;
  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-gf-red);
  transition: color var(--transition-standard);
}
.gf-opener-adv:hover .gf-opener-adv-icon,
.gf-opener-adv:hover .gf-opener-adv-label {
  color: var(--color-white);
}

/* Right photo — fills the column, rounded, soft shadow */
.gf-opener-img {
  width: 100%;
  height: 100%;
  min-height: 320px;
  object-fit: cover;
  border-radius: 20px;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.2);
}

/* Photo wrapper — image fills the column height (matches the text beside it)
   without its portrait aspect ratio driving the row taller. */
.gf-opener-media {
  position: relative;
  height: 100%;
  min-height: 340px;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.2);
}
.gf-opener-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* "Reach out to our Team" contact card + light theme for small_contact() */
.gf-reachout {
  background: var(--color-white);
  border-radius: 20px;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.05);
  padding: 2.5rem;
}
.gf-reachout .form-control {
  background: var(--color-gray-50);
  border: 1px solid var(--color-gray-100);
  color: var(--color-00dp);
}
.gf-reachout .form-control::placeholder {
  color: var(--color-gray-500);
  text-transform: uppercase;
  font-size: 0.75rem;
}
.gf-reachout .btn-contact {
  color: var(--color-white);
  background: var(--color-gf-red);
  border-color: var(--color-gf-red);
}
.gf-reachout .btn-contact:is(:hover, :focus, :active) {
  color: var(--color-white);
  background: var(--color-gf-red-hover);
  border-color: var(--color-gf-red-hover);
}
/* Reach-out form — Figma 36093:1023: 3 field columns (names / email+phone /
   message) + submit button in the right column, single row on desktop. */
.gf-reachout-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr minmax(150px, auto);
  gap: 0.75rem 1rem;
  align-items: stretch;
}
.gf-reachout-col {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.gf-reachout-msg { }
.gf-reachout-msg textarea {
  flex: 1 1 auto;
  min-height: 100%;
  resize: vertical;
}
.gf-reachout-actions {
  display: flex;
}
.gf-reachout-actions .btn-contact {
  flex: 1 1 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding-inline: 1.25rem;
  white-space: nowrap;
}
@media (max-width: 991.98px) {
  .gf-reachout-grid { grid-template-columns: 1fr; }
  .gf-reachout-actions .btn-contact { width: 100%; }
}
/* ========== END OPENER 2-COL ========== */

/* ========== RUUD PRO PARTNER BAND — Figma node 36093:1079 ========== */
.gf-brand {
  background: var(--color-gray-50);
}
.gf-brand-logo {
  display: block;
  height: 60px;
  width: auto;
  margin: 0.5rem 0 1rem;
}
/* Feature cards (Comfort / Warranty / Efficiency / Reliability) */
.gf-feature-card {
  height: 100%;
  padding: 1.5rem;
  background: var(--color-white);
  border-radius: 12px;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.05);
}
.gf-feature-card-icon {
  color: var(--color-gf-red);
  font-size: 1.25rem;
}
.gf-feature-card-title {
  margin: 0;
  font-family: var(--font-futura);
  font-weight: var(--font-weight-bold);
  font-size: 1.125rem;
  text-transform: uppercase;
  color: var(--color-midnight);
}
.gf-feature-card-text {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--color-gray-700);
}
/* ========== END RUUD PRO PARTNER BAND ========== */

/* ========== MAINTENANCE PLANS — Figma node 36093:1129 ========== */
/* Horizontal plan card: image (left) + lake-blue content panel (right). */
.gf-plan-card {
  display: flex;
  align-items: stretch;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.1);
  min-height: 320px;
}
.gf-plan-media {
  flex: 1 1 0;
  min-width: 0;
  position: relative;
}
.gf-plan-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.gf-plan-body {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2rem;
  padding: 2.5rem;
  background: var(--color-lake-blue);
  color: var(--color-white);
}
.gf-plan-icon {
  color: var(--color-white);
  font-size: 2.25rem; /* 36px */
}
.gf-plan-title {
  margin: 0;
  font-family: var(--font-arial-rounded); /* Arial Bold (Figma H3 Semibold) */
  font-weight: var(--font-weight-bold);
  font-size: clamp(1.5rem, 2.2vw, 2rem); /* → 32px */
  line-height: 1.25;
  text-transform: uppercase;
  color: var(--color-white);
}
@media (max-width: 767px) {
  .gf-plan-card {
    flex-direction: column;
  }
  .gf-plan-media {
    min-height: 220px;
  }
}
/* ========== END MAINTENANCE PLANS ========== */

/* ========== FINANCING — Figma node 36093:1153 ========== */
.gf-financing {
  background: var(--color-midnight); /* Abyss */
}
.gf-fin-card {
  background: var(--color-gray-50);
  border-radius: 20px;
  padding: 2.5rem;
}
.gf-fin-logo {
  height: 44px;
  width: auto;
}
.gf-fin-wordmark {
  margin: 0;
  font-family: var(--font-arial-rounded); /* Arial Bold (Figma) */
  font-weight: var(--font-weight-bold);
  font-size: clamp(1.75rem, 3vw, 2.5rem); /* → 40px */
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--color-black);
}
.gf-fin-text {
  font-size: 0.875rem;
  line-height: 1.57;
  color: var(--color-00dp);
}
.gf-fin-image {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  min-height: 240px;
}
.gf-fin-image img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* ========== END FINANCING ========== */

/* ========== SERVICE AREAS — Figma node 36093:1185 ========== */
/* Live CARTO Voyager map (custom.js initServiceMap). Flat water-ish panel until tiles
   arrive / if the library is blocked. Same ~2:1 frame as the old composited image. */
.gf-areas-map {
  position: relative;
  width: 100%;
  aspect-ratio: 2 / 1;
  min-height: 360px;
  border-radius: 20px;
  overflow: hidden;
  background: #e9eef2;
  font-family: var(--font-inter);
}
/* lg+ shows pin labels (custom.js) — the frame's HEIGHT sets the zoom, and at a 2:1
   ratio a ~1000px screen dropped to 468px tall, too zoomed-out for the labels around
   Greers Ferry to fit. A taller floor keeps every label on down to 992px. */
@media (min-width: 992px) {
  .gf-areas-map { min-height: 560px; }
}
/* HQ pin — large brand-red location dot (name via popup on click/tap) */
.gf-map-hq {
  padding: 0;
  border: 0;
  background: none;
  color: var(--color-gf-red);
  line-height: 1;
  cursor: pointer;
}
.gf-map-hq i {
  font-size: 2.5rem;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.35));
}
.gf-map-hq:focus-visible {
  outline: 2px solid var(--color-midnight);
  outline-offset: 2px;
}
/* Town pins — small Lake Blue dots; name on hover/focus/tap via popup */
.gf-map-pin {
  width: 14px;
  height: 14px;
  padding: 0;
  border: 2px solid var(--color-white);
  border-radius: 50%;
  background: var(--color-lake-blue);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
  cursor: pointer;
  z-index: 2; /* above the HQ pin — Turkey Creek sits right under its head at small widths */
}
.gf-map-pin:focus-visible {
  outline: 2px solid var(--color-gf-red);
  outline-offset: 2px;
}
.gf-areas-map .maplibregl-popup-content {
  padding: 0.375rem 0.625rem;
  border-radius: 6px;
  font-family: var(--font-arial-rounded);
  font-weight: var(--font-weight-bold);
  font-size: 0.8125rem;
  color: var(--color-midnight);
}
/* Location chips (Abyss; Greers Ferry = red + star) */
.gf-loc-chip {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  height: 100%;
  padding: 0.625rem;
  border-radius: 14px;
  background: var(--color-midnight);
  color: var(--color-white);
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.05);
}
.gf-loc-chip i {
  font-size: 1.125rem;
  width: 1.375rem;
  text-align: center;
}
.gf-loc-chip span {
  font-family: var(--font-arial-rounded);
  font-weight: var(--font-weight-bold);
  font-size: 1rem;
  line-height: 1.125;
  text-transform: uppercase;
}
.gf-loc-chip-primary {
  background: var(--color-gf-red);
}

/* Service-area chips are links — invert to a white/outline on hover like the buttons.
   Base border matches the fill (invisible) so there's no layout shift on hover. */
.gf-loc-chip {
  border: 2px solid var(--color-midnight);
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
  text-decoration: none;
}
.gf-loc-chip-primary {
  border-color: var(--color-gf-red);
}
a.gf-loc-chip:is(:hover, :focus-visible) {
  background: var(--color-white);
  color: var(--color-midnight);
  border-color: var(--color-midnight);
}
a.gf-loc-chip-primary:is(:hover, :focus-visible) {
  color: var(--color-gf-red);
  border-color: var(--color-gf-red);
}

/* Closer "Explore More Services" quick links (on the Abyss band) */
.gf-closer-links {
  border-top: 1px solid rgba(255, 255, 255, 0.15);
}
.gf-closer-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--color-white);
  text-decoration: none;
  font-family: var(--font-arial-rounded);
  font-weight: var(--font-weight-bold);
}
.gf-closer-link i {
  color: var(--color-gf-red);
  font-size: 0.8em;
  transition: transform 0.2s ease;
}
.gf-closer-link:is(:hover, :focus-visible) {
  color: var(--color-white);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.gf-closer-link:is(:hover, :focus-visible) i {
  transform: translateX(4px);
}
/* Additional communities callout */
.gf-areas-callout {
  display: flex;
  align-items: stretch;
  background: var(--color-gray-50);
  border-radius: 20px;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.2);
  overflow: hidden;
}
.gf-areas-callout-media {
  flex: 1 1 0;
  min-width: 0;
  position: relative;
  background: var(--color-white);
  align-items: center;
  justify-content: center;
  padding: 0;
}
/* Single combined topo + lake graphic (Figma "Service Areas- Half" export) —
   replaces the old two-layer gf-topo + gf-lake overlay (duplicated/mismatched lake). */
.gf-areas-callout-media .gf-areas-topo-lake {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.gf-areas-callout-body {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1.25rem;
  padding: 2rem;
}
.gf-areas-callout-title {
  margin: 0;
  font-family: var(--font-arial-rounded);
  font-weight: var(--font-weight-bold);
  font-size: clamp(1.5rem, 2.2vw, 2rem); /* → 32px */
  line-height: 1.25;
  text-transform: uppercase;
  color: var(--color-00dp);
}
@media (max-width: 767px) {
  .gf-areas-callout {
    flex-direction: column;
  }
  .gf-areas-callout-media {
    min-height: 200px;
  }
}
/* ========== END SERVICE AREAS ========== */

/* ========== CLOSER — Figma node 36093:1543 ========== */
/* Trust tile: red frame + white icon (left) + white inner card (right). */
.gf-closer-tile {
  display: flex;
  align-items: stretch;
  gap: 17px;
  height: 100%;
  padding: 20px;
  background: var(--color-gf-red);
  border-radius: 12px;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.2);
}
.gf-closer-tile-icon {
  flex: 0 0 84px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-white);
  font-size: 3rem; /* 48px */
}
.gf-closer-tile-card {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.25rem;
  padding: 20px;
  background: var(--color-white);
  border-radius: 12px;
}
.gf-closer-tile-title {
  margin: 0;
  font-family: var(--font-futura); /* Arial Black */
  font-weight: var(--font-weight-bold);
  font-size: 1.25rem; /* 20px */
  line-height: 1.4;
  text-transform: uppercase;
  color: var(--color-lake-blue);
}
.gf-closer-tile-text {
  margin: 0;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--color-black);
}
/* Bottom CTA card */
.gf-closer-cta {
  background: var(--color-white);
  border-radius: 20px;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.2);
  padding: 2rem;
}
.gf-closer-cta-title {
  margin: 0;
  font-family: var(--font-futura); /* Arial Black */
  font-weight: var(--font-weight-bold);
  font-size: clamp(1.25rem, 2vw, 1.5rem); /* → 24px */
  line-height: 1.33;
  text-transform: uppercase;
  color: var(--color-gf-blue); /* Ocean Blue */
}
/* ========== END CLOSER ========== */

/* ========== 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. */

.gf-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. */
.gf-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) {
  .gf-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. */
.gf-location {
  gap: 0.75rem;
  padding: 0.25rem;
  border-radius: 8px;
}
a.gf-location-link {
  text-decoration: none;
  transition: background-color var(--transition-standard);
}
a.gf-location-link:is(:hover, :focus-visible) {
  background-color: rgba(255, 255, 255, 0.08);
}
.gf-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);
}
.gf-location-icon-red {
  background-color: var(--color-gf-red);
}
.gf-location-icon-blue {
  background-color: var(--color-gf-blue);
}
.gf-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. */
.gf-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. */

.gf-faq-item {
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--color-gray-200); /* Figma #dcdfe7 divider on the Abyss band */
}

/* Question row = full-width collapse toggle */
.gf-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);
}
.gf-faq-q:is(:hover, :focus-visible) {
  color: var(--color-gf-red);
}
.gf-faq-q i {
  flex: 0 0 auto;
  color: var(--color-white);
  font-size: 1rem;
  transition: transform var(--transition-standard);
}
.gf-faq-q[aria-expanded='true'] i {
  transform: rotate(45deg); /* plus → × */
}

/* Answer */
.gf-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 */
.gf-faq-a a {
  color: var(--color-white);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.gf-faq-a a:is(:hover, :focus-visible) {
  color: var(--color-gf-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;
  transition: color var(--transition-standard), background-color var(--transition-standard), border-color var(--transition-standard);
}

.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-gf-blue,
.btn-252455 {
  color: var(--color-white);
  background: var(--color-gf-blue);
  border-color: var(--color-gf-blue);
}
.btn-gf-blue:is(:hover, :focus, :active),
.btn-252455:is(:hover, :focus, :active) {
  color: var(--color-gf-blue);
  background: var(--color-white);
  border-color: var(--color-gf-blue);
}
.btn-outline-gf-blue {
  color: var(--color-gf-blue);
  background: transparent;
  border-color: var(--color-gf-blue);
}
.btn-outline-gf-blue:is(:hover, :focus, :active) {
  color: var(--color-gf-blue-hover);
  background: transparent;
  border-color: var(--color-gf-blue);
}

/* Superior Red */
.btn-gf-red {
  color: var(--color-white);
  background: var(--color-gf-red);
  border-color: var(--color-gf-red);
}
.btn-gf-red:is(:hover, :focus, :active) {
  color: var(--color-gf-red);
  background: var(--color-white);
  border-color: var(--color-gf-red);
}
.btn-outline-gf-red {
  color: var(--color-gf-red);
  background: transparent;
  border-color: var(--color-gf-red);
}
.btn-outline-gf-red:is(:hover, :focus, :active) {
  color: var(--color-gf-red-hover);
  background: transparent;
  border-color: var(--color-gf-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-midnight);
  background: var(--color-white);
  border-color: var(--color-midnight);
}
.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);
}

/* Lake Blue (Figma Brand/Lake Blue — hero phone CTA, mid-blue accent) */
.btn-lake-blue {
  color: var(--color-white);
  background: var(--color-lake-blue);
  border-color: var(--color-lake-blue);
}
.btn-lake-blue:is(:hover, :focus, :active) {
  color: var(--color-lake-blue);
  background: var(--color-white);
  border-color: var(--color-lake-blue);
}
/* Hero secondary CTA — white stroke / no fill so it pops on the navy hero photo
   (lake-blue-on-navy was muddy). Scoped to .gf-hero, so closer/mid-page
   btn-lake-blue keeps its solid fill. #7 */
.gf-hero .btn-lake-blue {
  color: var(--color-white);
  background: transparent; /* white stroke, no fill — pops on the navy hero */
  border-color: var(--color-white);
  border-width: 2px;
}
.gf-hero .btn-lake-blue:is(:hover, :focus, :active) {
  color: var(--color-lake-blue);
  background: var(--color-white);
  border-color: var(--color-white);
}
.btn-outline-lake-blue {
  color: var(--color-lake-blue);
  background: transparent;
  border-color: var(--color-lake-blue);
}
.btn-outline-lake-blue:is(:hover, :focus, :active) {
  color: var(--color-white);
  background: var(--color-lake-blue);
  border-color: var(--color-lake-blue);
}

/* 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-gf-blue {
  color: var(--color-gf-blue);
}
.text-lake-blue {
  color: var(--color-lake-blue);
}
.bg-lake-blue {
  background-color: var(--color-lake-blue);
}
.bg-gf-blue {
  background-color: var(--color-gf-blue);
}
.bg-gf-blue-hover {
  background-color: var(--color-gf-blue-hover);
}
.border-gf-blue {
  border-color: var(--color-gf-blue);
}

/* Superior Red */
.text-gf-red {
  color: var(--color-gf-red);
}
.bg-gf-red {
  background-color: var(--color-gf-red);
}
.bg-gf-red-hover {
  background-color: var(--color-gf-red-hover);
}
.border-gf-red {
  border-color: var(--color-gf-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-gf-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-gf-blue {
  color: var(--color-gf-blue);
}
a.link-gf-blue:is(:hover, :focus, :active) {
  color: var(--color-gf-blue-hover);
}

a.link-gf-red {
  color: var(--color-gf-red);
}
a.link-gf-red:is(:hover, :focus, :active) {
  color: var(--color-gf-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) {
  .gf-hero {
    padding-top: 3.5rem;
    padding-bottom: 4rem;
  }
}
/* ========== END MEDIA QUERIES ========== */

/* ========== WCAG AA CONTRAST GUARD ==========
   Ocean Blue (#022867) and Abyss/Midnight (#0F2848) clear 4.5:1 on every light
   surface in the palette. Vampire Red (#B11B1B) passes on white / gray-50 /
   gray-100 but is guarded on the darker gray-200 / gray-300 fills — so
   swap .text-gf-red / .border-gf-red to Ocean 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-gf-red) {
  color: var(--color-gf-blue);
}
:where(.bg-gray-200, .bg-gray-300) :is(.border-gf-red) {
  border-color: var(--color-gf-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
   (--gf-link / --gf-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. .gf-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 — gf-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,
    .gf-mega,
    .gf-subpage-card,
    .gf-service-accordion .accordion-body
  ) {
  --gf-link: var(--color-gf-blue);
  --gf-link-hover: var(--color-midnight);
  --gf-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) {
  --gf-link: var(--color-white);
  --gf-link-hover: var(--color-gray-100);
  --gf-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-gf-blue,
    .bg-gf-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
  ) {
  --gf-link: var(--color-white);
  --gf-link-hover: var(--color-gray-300);
  --gf-link-decoration: underline;
}

/* Hero is a dark surface (navy overlay over the photo) — register it so hero prose
   links read white + underline, not the default gf-blue (unreadable on navy). */
:where(.gf-hero, .gf-hero-content) {
  --gf-link: var(--color-white);
  --gf-link-hover: var(--color-gray-300);
  --gf-link-decoration: underline;
}

/* Anchors consume the nearest surface's pair. Fallback = light default so a
   link outside every registered surface still lands on brand gf-blue. */
a:where(:not(.btn)) {
  color: var(--gf-link, var(--color-gf-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(--gf-link-decoration, none);
  text-underline-offset: 2px;
}
a:where(:not(.btn)):where(:hover, :focus-visible) {
  color: var(--gf-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 gf-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 --gf-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,
    .gf-mega,
    .gf-subpage-card,
    .gf-service-accordion .accordion-body
  ) {
  --gf-icon: var(--color-gf-red);
}
:where(
    .bg-gf-blue,
    .bg-gf-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
  ) {
  --gf-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.
   ============================================================ */
.gf-footer {
  padding-top: 3.75rem;
  padding-bottom: 2.5rem;
}

/* Top row: logo + contact/experience chips */
.gf-footer-logo img {
  display: block;
  height: 196px; /* Figma proof 36093-1567 (280×196) */
  width: auto;
}
@media (max-width: 575px) {
  .gf-footer-logo img { height: 150px; } /* guard: keep auto-width under viewport on small phones */
}
.gf-footer-adv {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  text-decoration: none;
}
.gf-footer-adv-text {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  text-transform: uppercase;
  line-height: 1.4;
}
.gf-footer-adv-label {
  font-family: var(--font-arial-rounded);
  font-weight: var(--font-weight-bold);
  font-size: 1.125rem; /* 20px */
  color: var(--color-gray-700);
}
.gf-footer-adv-value {
  font-family: var(--font-futura); /* Arial Black */
  font-weight: var(--font-weight-bold);
  font-size: 1.125rem;
  color: var(--color-gf-red);
}
.gf-footer-adv-icon {
  color: var(--color-lake-blue);
  font-size: 2.25rem; /* 48px-ish */
}
.gf-footer-adv:is(:hover, :focus-visible) .gf-footer-adv-value {
  color: var(--color-gf-red-hover);
}

.gf-footer-cols {
  margin-top: 3.75rem;
}
.gf-footer-heading {
  margin-bottom: 0.75rem;
  color: var(--color-lake-blue); /* Figma lake-blue heading */
  font-family: var(--font-futura);
  font-weight: var(--font-weight-bold);
  font-size: 1.25rem; /* 20px */
  line-height: 1.4;
  text-transform: uppercase;
}

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

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

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

.gf-footer-copyright {
  margin-top: 3rem;
  border-top: 1px solid var(--color-gray-200);
  color: var(--color-gray-700);
}

@media (min-width: 992px) {
  .gf-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. --- */
.gf-footer-logobar {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  background-color: var(--color-gray-50);
}
.gf-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;
}
.gf-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). */
.gf-footer-contact {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.5rem;
}
.gf-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));
}
.gf-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);
}
.gf-footer-contact-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.gf-footer-contact-icon {
  flex-shrink: 0;
  color: var(--color-gf-red);
  font-size: 1.5rem; /* 24px */
  line-height: 1;
}
.gf-footer-contact-text {
  display: flex;
  flex-direction: column;
}
.gf-footer-contact-label {
  font-family: var(--font-arial-rounded);
  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. */
.gf-footer-contact--bar .gf-footer-contact-label {
  color: var(--color-gray-700);
}
.gf-footer-contact-value {
  font-family: var(--font-arial-rounded);
  font-size: 1rem; /* 16px */
  line-height: 1.125;
  text-transform: uppercase;
  color: var(--color-gf-blue); /* 9.3:1 on the gray-50 --bar */
  text-decoration: none;
}
/* On the midnight --dark band (mobile), gf-blue value drops to ~1.5:1 —
   flip to white (15.8:1). */
.gf-footer-contact--dark .gf-footer-contact-value {
  color: var(--color-white);
}
a.gf-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). */
.gf-footer-contact--bar a.gf-footer-contact-value:is(:hover, :focus-visible) {
  color: var(--color-midnight); /* 13.9:1 on gray-50 */
}
.gf-footer-contact--dark a.gf-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.) */
.gf-footer-contact--dark .gf-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) {
  .gf-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 gf-blue text: the white pill clears 3:1 non-text
   contrast against the dark section, and gf-blue on white clears 4.5:1
   text contrast (gf-red on white would fail). Appended last so it
   wins the source-order tie with the .bg-gradient-* utilities.
   ============================================================ */
:where(
    .bg-gf-blue,
    .bg-gf-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
  )
  .gf-overline {
  color: var(--color-white);
}

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

/* Breadcrumb bar (Bootstrap .breadcrumb supplies the list + "/" divider) */
.gf-breadcrumb {
  padding: 0.85rem 0;
  background: var(--color-gray-50);
  border-bottom: 1px solid var(--color-gray-200);
}
.gf-breadcrumb .breadcrumb {
  margin: 0;
  font-size: 0.8125rem;
  font-weight: var(--font-weight-medium);
  letter-spacing: 0.01em;
  --bs-breadcrumb-divider: '\203A'; /* › — lighter, nicer than the default slash */
}
.gf-breadcrumb .breadcrumb-item,
.gf-breadcrumb .breadcrumb-item a {
  color: var(--color-lake-blue);
  text-decoration: none;
  transition: color 0.15s ease;
}
.gf-breadcrumb .breadcrumb-item a i { font-size: 0.9em; margin-right: 0.15rem; }
.gf-breadcrumb .breadcrumb-item a:is(:hover, :focus-visible) {
  color: var(--color-gf-red);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.gf-breadcrumb .breadcrumb-item + .breadcrumb-item::before {
  color: var(--color-gray-500);
}
.gf-breadcrumb .breadcrumb-item.active {
  color: var(--color-midnight);
  font-weight: var(--font-weight-bold);
}
/* Dark variant — matches a dark (bg-02dp) section directly below so the hero
   flows seamlessly through the breadcrumb into that section. */
.gf-breadcrumb-dark {
  background: var(--color-02dp);
  border-bottom-color: rgba(255, 255, 255, 0.1);
}
.gf-breadcrumb-dark .breadcrumb {
  --bs-breadcrumb-divider-color: var(--color-gray-500);
}
.gf-breadcrumb-dark .breadcrumb-item,
.gf-breadcrumb-dark .breadcrumb-item a {
  color: var(--color-gray-300);
}
.gf-breadcrumb-dark .breadcrumb-item a:is(:hover, :focus-visible) {
  color: var(--color-white);
}
.gf-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). */
.gf-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);
}
.gf-subpage-card:is(:hover, :focus-visible) {
  border-color: var(--color-gf-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) */
.gf-subpage-card-media img {
  display: block;
  width: 100%;
  height: auto;
}
.gf-subpage-card-body {
  padding: 1.5rem;
}
.gf-subpage-card-icon {
  display: inline-flex;
  margin-bottom: 0.75rem;
  color: var(--color-gf-red);
  font-size: 2rem;
  line-height: 1;
}
.gf-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 */
.gf-process-tabs {
  gap: 0.5rem;
  margin-bottom: 1.5rem;
  border-bottom: 0;
}
.gf-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);
}
.gf-process-tabs .nav-link:is(:hover, :focus-visible) {
  color: var(--color-white);
  border-color: rgba(255, 255, 255, 0.4);
}
.gf-process-tabs .nav-link.active {
  color: var(--color-white);
  background: rgba(255, 255, 255, 0.08);
  border-color: var(--color-gf-red);
}
/* Numbered badge inside each tab — fills red when the tab is active */
.gf-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);
}
.gf-process-tabs .nav-link.active .gf-process-num {
  background: var(--color-gf-red);
}
/* Elevated glass pane holding the active step */
.gf-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);
}
.gf-process-pane-step {
  display: inline-block;
  color: var(--gf-icon, var(--color-gf-red));
  font-family: var(--font-futura);
  font-weight: var(--font-weight-bold);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.gf-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 */
.gf-step-list {
  list-style: none;
  padding-left: 0;
  margin-bottom: 0;
}
.gf-step-list li {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}
.gf-step-list li i {
  margin-top: 0.25rem;
  color: var(--gf-icon, var(--color-gf-red));
}

/* Classic-sidebar layout (AC Repair sub-page) — the contact-form aside sticks
   below the fixed menu as the long main column scrolls. Layout-only rule (no
   color tokens); lg+ only so the column stacks normally on mobile. */
@media (min-width: 992px) {
  /* Sticky contact sidebar. Order: form card FIRST, review badge BELOW it
     (mobile keeps the badge above the form via markup order for social proof).
     max-height + overflow-y let the card scroll INTERNALLY when the viewport is
     too short to show the whole form (13" laptops), so Submit stays reachable
     while the card remains pinned. Taller screens never trigger the scrollbar. */
  .gf-repair-aside {
    position: sticky;
    top: 9rem; /* clears the ~138px fixed header (shrink state) */
    display: flex;
    flex-direction: column;
  }
  .gf-repair-aside .gf-formcard { order: 1; }
  .gf-repair-aside .gf-repair-badge { order: 2; margin: 1rem 0 0; }
}

/* AC Repair sub-page — feature-card rollover (lift + deepen shadow, red icon pop),
   matching the site's hover language (see .gf-adv-card / .gf-opener-adv). */
.gf-feature-card {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.gf-feature-card:is(:hover, :focus-within) {
  transform: translateY(-4px);
  box-shadow: 0 0.75rem 2rem rgba(0, 0, 0, 0.12);
}
.gf-feature-card:is(:hover, :focus-within) .gf-feature-card-icon {
  transform: scale(1.08);
}
.gf-feature-card-icon {
  transition: transform 0.2s ease;
}

/* AC Repair — Warning Signs rows get the same rollover as the feature cards
   (lift + shadow + icon pop) so they feel interactive like the home page. */
.gf-warning-item {
  padding: 1rem 1.25rem;
  border-radius: 12px;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}
.gf-warning-item:is(:hover, :focus-within) {
  background: var(--color-gray-50);
  transform: translateY(-4px);
  box-shadow: 0 0.75rem 2rem rgba(0, 0, 0, 0.12);
}
.gf-warning-item .gf-about-icon {
  transition: transform 0.2s ease;
}
.gf-warning-item:is(:hover, :focus-within) .gf-about-icon {
  transform: scale(1.08);
}

/* AC Repair — process steps fill navy on hover (like the home page .gf-opener-adv cards):
   gray-50 default -> Abyss background + white text, red number circle stays. */
.gf-process-step {
  background: var(--color-gray-50);
  transition: background-color 0.25s ease, box-shadow 0.25s ease;
}
.gf-process-step:is(:hover, :focus-within) {
  background: var(--color-midnight);
  box-shadow: 0 0.5rem 1.25rem rgba(0, 0, 0, 0.18);
  /* dark on hover — flip the link context so inline links read white, not invisible blue */
  --gf-link: var(--color-white);
  --gf-link-hover: var(--color-gray-300);
  --gf-link-decoration: underline;
}
.gf-process-step:is(:hover, :focus-within) p {
  color: var(--color-white) !important;
}
.gf-process-step:is(:hover, :focus-within) a:where(:not(.btn)) {
  color: var(--color-white) !important;
  text-decoration: underline;
}

/* AC Repair sub-page — the sidebar form sits on the dark navy card; light the
   inputs (they ship with the dark bg-24dp utility) so they don't read as black.
   Mirrors the .gf-hero-form input treatment. */
.gf-repair-aside .form-control {
  background-color: var(--color-gray-50) !important;
  border: 1px solid var(--color-gray-100) !important;
  color: var(--color-midnight);
  border-radius: 6px;
}
.gf-repair-aside .form-control::placeholder {
  color: var(--color-gray-500);
  opacity: 1;
}

/* AC Repair — contact-form card given real prominence (was a flat bg-midnight box).
   Navy gradient for depth, a hairline edge, and an elevated shadow (offset + blur,
   not a flat halo) so the sticky action panel lifts off the page. */
.gf-formcard {
  position: relative;
  background: linear-gradient(158deg, var(--color-lake-blue) 0%, var(--color-midnight) 62%);
  border: 1px solid rgba(255, 255, 255, 0.09);
  box-shadow: 0 22px 48px -16px rgba(15, 40, 72, 0.6), 0 4px 14px -6px rgba(15, 40, 72, 0.45);
}
/* Brighter accent eyebrow so it reads and pops on the navy gradient */
.gf-formcard .gf-overline {
  color: var(--color-white); /* was ferry-red — red-on-navy fails; white reads on the dark card */
}
/* Primary CTA anchors the card: full-width, centered, weightier */
.gf-formcard #submit-form {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding-block: 0.75rem;
  font-size: 1.0625rem;
  font-weight: var(--font-weight-bold);
}
/* Phone link in the card body reads white + underlined on the navy gradient */
.gf-formcard p a {
  color: var(--color-white);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.gf-formcard p a:is(:hover, :focus) {
  color: var(--color-white);
  text-decoration-thickness: 2px;
}

/* AC Repair — INTRO-WHY editorial split: a lead column beside the reasons rendered
   as a divided list (reuses .gf-feature-card markup but drops the box). */
.gf-reason-grid {
  --bs-gutter-x: 0;
  --bs-gutter-y: 0;
}
.gf-reason-grid > .col .gf-feature-card {
  background: transparent;
  border: 0;
  border-top: 1px solid var(--color-gray-200);
  border-radius: 0;
  box-shadow: none;
  padding: 1.25rem 0;
}
.gf-reason-grid > .col:first-child .gf-feature-card {
  border-top: 0;
  padding-top: 0;
}
.gf-reason-grid .gf-feature-card-icon {
  color: var(--color-lake-blue); /* lake-blue here vs red boxed cards — reads as a distinct section */
}
@media (min-width: 992px) {
  .gf-intro-lead {
    position: sticky;
    top: 6.5rem; /* clears the fixed menu while the reasons scroll */
  }
}

/* AC Repair — "Common Problems" as vertical tab panes (pills left, pane right).
   Mobile: the pills become a horizontal scroll strip above the pane. */
.gf-probtabs-nav {
  gap: 0.5rem;
  overflow-x: auto;
}
.gf-probtabs-nav .nav-link {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  width: 100%;
  white-space: normal;
  text-align: left;
  background: var(--color-gray-50);
  color: var(--color-midnight);
  border: 1px solid var(--color-gray-100);
  border-radius: 8px;
  padding: 0.75rem 1rem;
  font-weight: var(--font-weight-bold);
  font-size: 0.9375rem;
}
.gf-probtabs-nav .nav-link i {
  color: var(--color-gf-red);
  font-size: 1rem;
}
.gf-probtabs-nav .nav-link:hover {
  background: var(--color-gray-100);
}
.gf-probtabs-nav .nav-link.active {
  background: var(--color-lake-blue);
  color: var(--color-white);
  border-color: var(--color-lake-blue);
}
.gf-probtabs-nav .nav-link.active i {
  color: var(--color-white);
}
.gf-probtabs-content {
  background: var(--color-gray-50);
  border-radius: 12px;
  padding: 1.75rem;
}
@media (min-width: 992px) {
  .gf-probtabs-nav {
    overflow-x: visible;
  }
  .gf-probtabs-nav .nav-link {
    width: 100%;
    white-space: normal;
  }
  .gf-probtabs-content {
    height: 100%;
  }
}

/* AC Repair — hero brand-credibility trust chips (on the dark hero) */
.gf-trust-row { row-gap: 0.5rem; }
.gf-trust-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.85rem;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 50rem;
  background: rgba(255, 255, 255, 0.2);
  color: var(--color-white);
  font-family: var(--font-arial-rounded);
  font-weight: var(--font-weight-bold);
  font-size: 0.8125rem;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.gf-trust-chip i { color: var(--color-white); font-size: 0.95rem; }
.gf-trust-google { color: var(--color-white) !important; }
/* Keep the Google-review stars ferry-red (the chip-icon white rule above is more
   specific than .gf-trust-stars, so restore red explicitly). */
.gf-trust-chip .gf-trust-stars i { color: var(--color-ferry-red); }

/* AC Repair — intro brand-credibility microcopy line */
.gf-cred-note {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  color: var(--color-gray-700);
}
.gf-cred-note i { color: var(--color-gf-red); }

/* Financing intro — partner logo (Wells Fargo) */
.gf-fin-partners { gap: 1.25rem 1.75rem; }
.gf-fin-partner-logo { display: block; }
/* Careers — the Jotform application runs ~2,300px tall, so the "Why Work With Us" card
   keeps its own height and rides alongside it instead of stretching into a gray void.
   Offset = shrunk fixed menu (158px measured) + 1.5rem. Only on screens tall enough to
   show the whole ~700px card below the menu — shorter ones just scroll it normally. */
@media (min-width: 992px) and (min-height: 900px) {
  .gf-careers-aside { position: sticky; top: calc(158px + 1.5rem); }
}

/* Financing intro photo — cropped wider at xxl (1400+) so the lead column matches the
   (now 5-card) reasons column after the Synchrony card was dropped. Measured: only the
   widest container came out lopsided (974 vs 820); at 1200 the columns already match
   uncropped, and cropping there made the reasons column the long one. */
@media (min-width: 1400px) {
  .gf-fin-lead-img { width: 100%; aspect-ratio: 2 / 1; object-fit: cover; object-position: center 20%; }
}

/* AC Repair — hero Ruud Pro Partner accreditation badge (white pill on the dark hero) */
.gf-trust-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.35rem 0.8rem;
  background: var(--color-white);
  border-radius: 50rem;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18);
}
.gf-trust-badge img { height: 28px; width: auto; display: block; }

/* Hero Google-reviews chip (replaces the licensed-technicians chip): links to
   Google reviews, shows a 5/5 star strip. */
.gf-trust-reviews {
  text-decoration: none;
}
.gf-trust-reviews:is(:hover, :focus-visible) {
  background: rgba(255, 255, 255, 0.16);
  color: var(--color-white);
}
.gf-trust-reviews img { display: block; }
.gf-trust-stars {
  display: inline-flex;
  gap: 0.08rem;
  color: var(--color-ferry-red);
  font-size: 0.85em;
}

/* AC Repair — "Based right here in Greers Ferry" locate badge (above the intro header) */
.gf-locate-badge {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.6rem;
  padding: 0.4rem 0.4rem 0.4rem 0.55rem;
  background: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-radius: 50rem;
  box-shadow: 0 2px 10px rgba(15, 40, 72, 0.06);
  font-size: 0.875rem;
  color: var(--color-midnight);
  line-height: 1.2;
}
.gf-locate-badge-pin {
  display: inline-grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  background: var(--color-gf-red);
  color: var(--color-white);
  font-size: 0.85rem;
  flex: none;
}
.gf-locate-badge-link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.3rem 0.8rem;
  background: var(--color-gray-50);
  border-radius: 50rem;
  color: var(--color-lake-blue);
  font-weight: var(--font-weight-bold);
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.gf-locate-badge-link:is(:hover, :focus-visible) {
  background: var(--color-lake-blue);
  color: var(--color-white);
}
.gf-locate-badge-link i { font-size: 0.8em; }

/* Locate badge on phones: full-width rounded card, and the "see how close" link
   becomes a full-width tap target instead of a cramped wrapping pill. */
@media (max-width: 767.98px) {
  .gf-locate-badge {
    display: flex;
    width: 100%;
    border-radius: 14px;
    padding: 0.6rem 0.75rem;
  }
  .gf-locate-badge-link {
    width: 100%;
    justify-content: center;
  }
}