/* === Red Barn Media Group - GB Comfort Services === */

/* === CSS Custom Properties === */
:root {
  /* Brand Colors — GB Comfort Services (Figma style guide, Palette node 2001-206) */
  --color-midnight: #000B30;     /* Figma Midnight Blue — darkest / dominant bg */
  --color-azure: #053156;        /* Figma Brand/Navy — primary structural blue */
  --color-sky: #1E9BE0;          /* Figma Brand/Sky — brighter accent blue */
  --color-heat-red: #CD112B;     /* Figma Brand/GB Red — accent / CTA */

  /* Brand Hover Tints (mix base with 20% white: c x 0.8 + 51) */
  --color-midnight-hover: #333C59;
  --color-azure-hover: #375A78;
  --color-sky-hover: #4BAFE6;
  --color-heat-red-hover: #D74155;

  /* Subtle Sky — derived light wash for card backgrounds (not a brand token) */
  --color-sky-subtle: #E9F5FC;
  --color-sky-subtle-opacity-50: rgba(233, 245, 252, 0.5);

  /* Generic */
  --color-white: #FFFFFF;
  --color-white-hover: #F0F0F0; /* pure white cannot be tinted; slight shade */
  --color-white-opacity-15: rgba(255, 255, 255, 0.15);
  --color-white-opacity-60: rgba(255, 255, 255, 0.6);
  --color-white-opacity-80: rgba(255, 255, 255, 0.8);
  --color-black: #000000;
  --color-black-hover: #333333; /* 20% white mix into black */

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

  /* Neutral Hover Tints (mix base with 10% white: c x 0.9 + 25.5) */
  --color-neutral-50-hover: #F0F2F6;
  --color-neutral-100-hover: #E7EBF2;
  --color-neutral-200-hover: #E0E2E9;
  --color-neutral-300-hover: #D1D3DA;
  --color-neutral-400-hover: #C7C9D0;
  --color-neutral-500-hover: #B2B3BB;
  --color-neutral-600-hover: #989CA4;
  --color-neutral-700-hover: #74777E;

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

  /* Gradients — Moment = Figma "Season": Sky -> Navy (the file's only defined gradient) */
  --gradient-moment-0:   linear-gradient(0deg,   var(--color-sky), var(--color-azure));
  --gradient-moment-45:  linear-gradient(45deg,  var(--color-sky), var(--color-azure));
  --gradient-moment-90:  linear-gradient(90deg,  var(--color-sky), var(--color-azure));
  --gradient-moment-135: linear-gradient(135deg, var(--color-sky), var(--color-azure));
  --gradient-moment-180: linear-gradient(180deg, var(--color-sky), var(--color-azure));
  --gradient-moment-270: linear-gradient(270deg, var(--color-sky), var(--color-azure));
  --gradient-moment: var(--gradient-moment-90);

  /* Gradients — Sunset: Azure -> Heat Red */
  --gradient-sunset-0:   linear-gradient(0deg,   var(--color-azure), var(--color-heat-red));
  --gradient-sunset-45:  linear-gradient(45deg,  var(--color-azure), var(--color-heat-red));
  --gradient-sunset-90:  linear-gradient(90deg,  var(--color-azure), var(--color-heat-red));
  --gradient-sunset-135: linear-gradient(135deg, var(--color-azure), var(--color-heat-red));
  --gradient-sunset-180: linear-gradient(180deg, var(--color-azure), var(--color-heat-red));
  --gradient-sunset: var(--gradient-sunset-90);

  /* Typography — Adobe Fonts kit wja7itl (family names exactly as the kit exposes them) */
  --font-heading: "bebas-neue", sans-serif;    /* Display + H1-H5. Ships ONE cut: 400. */
  --font-body: "inter-variable", sans-serif;   /* Body. Variable: font-weight 100-900. */
  --font-overline: "copperplate", serif;       /* Overlines + labels. Cuts: 300 and 700 only. */

  --font-weight-bold: 700;
  --font-weight-semibold: 600;   /* real instance — inter-variable spans 100-900 */
  --font-weight-medium: 500;
  --font-weight-regular: 400;

  /* Family-specific weights — these exist to PREVENT faux-bold/faux-light synthesis.
     Bebas Neue has only a 400 cut, so headings must never ask for 700.
     Copperplate's "Regular" is a 300 cut (Adobe), so labels must ask for 300, not 400.
     Body is variable, so it needs no special-casing — any weight 100-900 is real. */
  --font-weight-heading: 400;
  --font-weight-label: 300;

  /* Layout */
  --hero-height: fit-content;
  --hero-padding-top: 16rem;
  --transition-standard: 0.25s;
  --border-radius-standard: 0.75rem;
  --border-radius-large: 1.25rem;
  --border-radius-card: 1rem;
  --box-shadow-dropdown: 0 3rem 3rem rgba(0, 0, 0, 0.175);
  --margin-standard: 1rem;

  /* Drop Shadows (Figma tokens) */
  --shadow-sm: 0 0 8px rgba(0, 0, 0, 0.05);  /* Figma Drop Shadow/Light + Small */
  --shadow-md: 0 0 8px rgba(0, 0, 0, 0.20);  /* Figma Drop Shadow/Medium */
}

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

body {
  color: var(--color-midnight);
  font-family: var(--font-body);
  font-weight: var(--font-weight-regular);
  background-color: var(--color-neutral-50);
}

/* === Typography === */
h1,
.h1 {
  font-family: var(--font-heading);
  color: var(--color-midnight);
  font-weight: var(--font-weight-heading);
  font-size: 48px;
  line-height: 56px;
}
h2,
.h2 {
  font-family: var(--font-heading);
  color: var(--color-midnight);
  font-weight: var(--font-weight-heading);
  font-size: 40px;
  line-height: 48px;
}
h3,
.h3 {
  font-family: var(--font-heading);
  color: var(--color-midnight);
  font-weight: var(--font-weight-heading);
  font-size: 32px;
  line-height: 40px;
}
h4,
.h4 {
  font-family: var(--font-heading);
  color: var(--color-midnight);
  font-weight: var(--font-weight-heading);
  font-size: 24px;
  line-height: 32px;
}
h5,
.h5 {
  font-family: var(--font-heading);
  color: var(--color-midnight);
  font-weight: var(--font-weight-heading);
  font-size: 20px;
  line-height: 28px;
}
h6,
.h6 {
  font-family: var(--font-heading);
  color: var(--color-midnight);
  font-weight: var(--font-weight-heading);
  font-size: 16px;
  line-height: 18px;
}

/* === Display === */
.display-large {
  font-family: var(--font-heading);
  color: var(--color-midnight);
  font-weight: var(--font-weight-heading);
  font-size: 64px;
  line-height: 72px;
  text-transform: uppercase;
}
.display-small {
  font-family: var(--font-heading);
  color: var(--color-midnight);
  font-weight: var(--font-weight-heading);
  font-size: 56px;
  line-height: 64px;
  text-transform: uppercase;
}
/* Figma fixes Display/Small at 56/64 on a 1600px frame. Real windows are narrower,
   and the text column narrows with them — at 56px the hero H1 rewrapped from 2 lines
   to 3 and blew the hero's height out. Step it down so the ramp holds its line count. */
@media (max-width: 1599px) {
  .display-small {
    font-size: 48px;
    line-height: 56px;
  }
}
@media (max-width: 1399px) {
  .display-small {
    font-size: 42px;
    line-height: 50px;
  }
}
@media (max-width: 1199px) {
  .display-small {
    font-size: 40px;
    line-height: 48px;
  }
}
@media (max-width: 575px) {
  .display-small {
    font-size: 32px;
    line-height: 40px;
  }
}

/* === Overline — Figma Paragraph/Overline/*: Copperplate Bold (700 cut) === */
.overline,
.overline-large {
  font-family: var(--font-overline);
  color: var(--color-midnight);
  font-weight: var(--font-weight-bold);
  font-size: 16px;
  line-height: 20px;
  text-transform: uppercase;
}
.overline-small {
  font-family: var(--font-overline);
  color: var(--color-midnight);
  font-weight: var(--font-weight-bold);
  font-size: 12px;
  line-height: 20px;
  text-transform: uppercase;
}

/* === Label — Figma Label/*: Copperplate Regular (a 300 cut on Adobe, not 400) === */
.label-large {
  font-family: var(--font-overline);
  color: var(--color-midnight);
  font-weight: var(--font-weight-label);
  font-size: 16px;
  line-height: 18px;
  text-transform: uppercase;
}
.label-medium {
  font-family: var(--font-overline);
  color: var(--color-midnight);
  font-weight: var(--font-weight-label);
  font-size: 14px;
  line-height: 16px;
  text-transform: uppercase;
}
.label-small {
  font-family: var(--font-overline);
  color: var(--color-midnight);
  font-weight: var(--font-weight-label);
  font-size: 12px;
  line-height: 14px;
  text-transform: uppercase;
}
.label-xsmall {
  font-family: var(--font-overline);
  color: var(--color-midnight);
  font-weight: var(--font-weight-label);
  font-size: 10px;
  line-height: 12px;
  text-transform: uppercase;
}

.font-heading {
  font-family: var(--font-heading);
}
.font-overline {
  font-family: var(--font-overline);
}
.font-body {
  font-family: var(--font-body);
}
.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);
}
/* Body type scale — Figma Paragraph/*. Base <p> is Paragraph/Medium; the rest are
   utilities so sizes are applied by class, never declared per element. */
p,
ul li,
ol li,
table {
  font-family: var(--font-body);
  font-size: 16px;      /* Paragraph/Medium 16/24 */
  line-height: 24px;
  font-weight: var(--font-weight-regular);
}
/* NOT .fs-6 — Bootstrap already owns .fs-1….fs-6 and declares them !important,
   so a .fs-6 here is silently overridden to 1rem. .fs-7/.fs-8 are safe because
   Bootstrap's scale stops at 6. */
.fs-lg {font-size: 18px; line-height: 26px;}  /* Paragraph/Large  */
.fs-7  {font-size: 14px; line-height: 22px;}  /* Paragraph/Small  */
.fs-8  {font-size: 12px; line-height: 20px;}  /* Paragraph/XSmall */

.icon-button {
  display: inline-flex;
  align-items: center;
  gap: 0.25em;
  justify-content: center;
}
/* === Navigation — GB Comfort Services ===
   Figma: Block/Header/Left Align (32123:2077) + the "Nav Dropdown Open" variants.

   Structure is stock Bootstrap (navbar / offcanvas / nav / navbar-nav /
   dropdown-menu / dropdown-header / dropdown-item / row / col) and the layout
   comes from BS utilities. Everything below is design tokens ONLY — the values
   Bootstrap has no equivalent for: the Figma panel widths, the 32px link gap,
   Copperplate type, and the brand colours. */

.menu-container {
  background: var(--color-neutral-50);
  margin-top: 0 !important;
  z-index: 1030;
  transition: box-shadow var(--transition-standard);
}
/* custom.js toggles .shrink-menu past 50px. The design has no scrolled variant,
   so the bar only lifts off the page with a shadow. */
.menu-container.shrink-menu {
  box-shadow: var(--shadow-md);
}

.gb-nav {
  padding: 16px 0;
}
.gb-nav-container {
  gap: 25px;               /* Figma gap-[25px] */
  padding-inline: 80px;    /* Figma px-[80px] */
}
@media (max-width: 1599px) {
  .gb-nav-container { padding-inline: 32px; }
}
@media (max-width: 1199px) {
  .gb-nav-container { padding-inline: 16px; }
  .gb-nav { padding: 12px 0; }
}

/* The bar is fixed AND opaque — the design reserves a 105px "Nav Space" above the
   hero instead of overlaying it, so the document is offset by the bar's height. */
body { padding-top: 105px; }
@media (max-width: 1199px) {
  body { padding-top: 80px; }
}
/* In-page anchor jumps (#apply, #community) must clear that same fixed bar, or the
   target section's heading lands underneath it. :target only matches the element the
   URL fragment points at, so this is inert until an anchor is actually followed. */
:target { scroll-margin-top: 121px; }
@media (max-width: 1199px) {
  :target { scroll-margin-top: 96px; }
}

/* Logo — Figma 195x73. navbar-brand ships its own padding/margin; the bar's
   spacing comes from the container's gap, so zero it here rather than with
   p-0/m-0 utility classes. */
.gb-nav .navbar-brand {
  padding: 0;
  margin: 0;
  flex-shrink: 0;
}
.gb-logo {
  width: 195px;
  height: 73px;
  object-fit: contain;
}
@media (max-width: 1199px) {
  .navbar-brand .gb-logo { width: 150px; height: 56px; }
}

.gb-nav-toggler {
  border: 2px solid var(--color-azure);
  border-radius: 8px;
  color: var(--color-azure);
  line-height: 1;
}
.gb-nav-toggler:focus { box-shadow: none; }

/* ---- Sub nav (Service Areas / Financing / social) — Figma Label/Small ---- */
.gb-sub-nav {
  gap: 20px;
}
.gb-sub-nav .nav-link {
  padding: 0;
  font-family: var(--font-overline);
  font-weight: var(--font-weight-label);
  font-size: 12px;
  line-height: 14px;
  text-transform: uppercase;
  color: var(--color-azure);
  transition: color var(--transition-standard);
}
.gb-sub-nav .nav-link:is(:hover, :focus) {
  color: var(--color-heat-red);
}
/* Social glyphs are a touch larger than the text links */
.gb-sub-nav .gb-social-icon {
  font-size: 14px;
}

/* === Brand glyphs (Google / Facebook) — inline SVG, not fa-brands ===
   The Font Awesome kit ships fa-solid ONLY, so the two brand marks are inlined from
   img/google-white.svg + img/facebook-white.svg with fill="currentColor". That is
   deliberate: every place they appear is colored by an inherited `color:` and
   transitions on hover (sub-nav azure -> heat-red, footer #000 -> heat-red,
   .gb-sub-chip heat-red, white inside .btn-heat-red). An <img> would be locked to
   one baked-in fill and lose all of it. Sized in `em` so the existing font-size
   rules on the parent keep driving them exactly as they drove the font icons. */
.gb-social-icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  vertical-align: -0.125em;
  flex-shrink: 0;
}

/* ---- Main nav — Figma Label/Medium ---- */
.gb-main-nav {
  gap: 32px;
}
.menu-container .gb-main-nav .nav-link {
  padding: 0;
  font-family: var(--font-overline);
  font-weight: var(--font-weight-label);
  font-size: 14px;
  line-height: 16px;
  text-transform: uppercase;
  color: var(--color-azure);
  transition: color var(--transition-standard);
}
.menu-container .gb-main-nav .nav-link:is(:hover, :focus),
.menu-container .gb-main-nav .nav-link[aria-expanded="true"] {
  color: var(--color-heat-red);
}
/* Bootstrap's ::after caret is replaced by a real FA icon that flips when open */
.menu-container .gb-main-nav .dropdown-toggle::after {
  display: none;
}
.gb-caret {
  font-size: 12px;
  transition: transform var(--transition-standard);
}
.menu-container .gb-main-nav .nav-link[aria-expanded="true"] .gb-caret {
  transform: rotate(180deg);
}
.gb-main-nav .btn {
  font-size: 12px;
  line-height: 16px;
  white-space: nowrap;   /* below 1600 the bar gets tight and the CTA labels were wrapping to 2 lines */
}
/* Tighten the link gap before the nav runs out of room, rather than letting the
   buttons wrap. Figma's 32px only fits at the 1600px design width. */
@media (max-width: 1599px) {
  .gb-main-nav { gap: 22px; }
}
@media (max-width: 1399px) {
  .gb-main-nav { gap: 16px; }
}

/* ---- Dropdown panels ---- */
/* Popper anchors the panel to the toggle, which sits ~28px above the bar's
   bottom edge (105px tall bar). Pushing the panel down by that 28px lands its top
   flush against the bar; square top corners make it read as a drawer off the bar. */
.menu-container .gb-dropdown {
  margin-top: 28px;
  padding: 10px;
  border: 0;
  border-radius: 0 0 10px 10px;
  background: var(--color-white);
  box-shadow: var(--box-shadow-dropdown);
}
/* Widths come straight from the Figma open-state frames */
.gb-dropdown-hc       { width: 486px; }  /* Heating & Cooling — 6 groups, 2 cols */
.gb-dropdown-plumbing { width: 583px; }  /* Plumbing — 4 groups, 2 cols */
.gb-dropdown-iaq      { width: 254px; }  /* Indoor Air Quality — 1 group */
.gb-dropdown-company  { width: 250px; }  /* About Us — 1 group */

/* Bootstrap's default 1.5rem row gutter is far wider than the Figma spacing.
   Set it on the panel rather than reaching for a g-* utility. */
.gb-dropdown > .row {
  --bs-gutter-x: 0.5rem;
}

/* Group header — Figma sets this in Outfit SemiBold; Outfit is a 4th font absent
   from both the style guide and Adobe Fonts, so per Brendan it uses Inter 600
   (a real cut of the variable body font) at the same size and colour. */
.gb-dropdown .dropdown-header {
  padding: 10px 0 4px;
  font-family: var(--font-body);
  font-weight: var(--font-weight-semibold);
  font-size: 14px;
  line-height: 16px;
  color: var(--color-sky);
}
.gb-dropdown .dropdown-header a {
  color: inherit;
  text-decoration: none;
  transition: color var(--transition-standard);
}
.gb-dropdown .dropdown-header a:is(:hover, :focus) {
  color: var(--color-heat-red);
}
.gb-dropdown-icon {
  flex: 0 0 28px;
  width: 28px;
  font-size: 16px;
  text-align: center;
  color: var(--color-heat-red);
}

/* Items line up under the header text: 28px icon + the 4px (gap-1) beside it. */
.gb-dropdown .dropdown-item {
  gap: 8px;
  padding: 4px 4px 4px 36px;
  border-radius: 4px;
  font-family: var(--font-body);
  font-weight: var(--font-weight-regular);
  font-size: 12px;
  line-height: 20px;
  color: var(--color-azure);
  white-space: normal;
}
.gb-dropdown .dropdown-item i {
  font-size: 10px;
  flex-shrink: 0;
}
.gb-dropdown .dropdown-item:is(:hover, :focus) {
  background: var(--color-neutral-50);
  color: var(--color-heat-red);
}

/* ---- Below xl: everything lives in the offcanvas ---- */
@media (max-width: 1199px) {
  .gb-sub-nav {
    flex-wrap: wrap;
    gap: 16px;
    order: 2;
  }
  .gb-main-nav {
    gap: 4px;
    order: 1;
    width: 100%;
  }
  .menu-container .gb-main-nav .nav-link {
    justify-content: space-between;
    padding: 12px 0;
    border-bottom: 1px solid var(--color-neutral-200);
  }
  /* Panels are fixed-width on desktop; in the offcanvas they must flow full-width */
  .menu-container .gb-dropdown,
  .gb-dropdown-hc,
  .gb-dropdown-plumbing,
  .gb-dropdown-iaq,
  .gb-dropdown-company {
    width: 100%;
    margin-top: 0;
    padding: 0 0 8px;
    box-shadow: none;
  }
  .gb-main-nav .btn {
    width: 100%;
  }
  .gb-main-nav .nav-item:last-child {
    flex-direction: column;
    align-items: stretch !important;
    width: 100%;
    margin-top: 8px;
  }
  .offcanvas-header {
    background: var(--color-neutral-50);
    border-bottom: 1px solid var(--color-neutral-200);
  }
}

/* Responsive hero image swaps (matches /img/gb-hero-*.webp sizes) */
@media (max-width: 575px) {
}
@media (min-width: 1600px) {
}

/* Hero Responsive */
@media (max-width: 1199px) {
}
@media (max-width: 575px) {
}

/* === Hero — GB Comfort Services (Figma 32123:1481) ===
   Full-bleed diagonal gradient (Gradient/Reverse: Sky -> Navy at -82.29deg), copy
   on the left, service van on the right. The van PNG carries a transparent
   diagonal left edge, so the gradient — and the red bar behind it — show through.
   Structure is Bootstrap (container-fluid / row / col + utilities); everything
   here is design tokens only. */

.gb-hero-home {
  /* Drives the van AND the red divider: the van is height:100% width:auto, so its
     rendered width is always height x (815/661). Scale this one value and the whole
     right-hand composition scales with it. */
  position: relative;
  overflow: hidden;
  background: linear-gradient(-82.29deg, var(--color-sky) 2.69%, var(--color-azure) 75.32%);
}
/* The van must bleed to the right edge — container-fluid's 12px inline padding was
   shaving 24px off the column, which object-fit then trimmed off the van's LEFT.
   That is the transparent wedge, so cropping it made the image opaque and hid the
   red divider behind it. */
.gb-hero-home > .container-fluid {
  padding-inline: 0;
}

.gb-hero-home-row {
  --bs-gutter-x: 0;
  align-items: stretch;   /* both columns equal height so the van is flush top-to-bottom */
}
.gb-hero-home-content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;                 /* copy stays vertically centered as the van sets the height */
  padding: 48px 40px 48px 80px;            /* left edge tracks the shared section gutter scale */
}
@media (max-width: 1399px) {
  .gb-hero-home-content { padding-left: 56px; }
}
@media (max-width: 991px) {
  .gb-hero-home-content { padding: 40px 32px; }
}
@media (max-width: 575px) {
  .gb-hero-home-content { padding: 40px 20px; }
}

/* --- Accreditations row ---
   Three fixed-size badges (~599px total) that must stay on ONE line. On columns
   narrower than the 1600px design width they don't fit, so the badges + the reviews
   block scale down together via --accred-scale, holding the Figma layout at every
   width instead of wrapping to a second line and pushing the hero taller.
   flex-nowrap makes the intent explicit. */
.gb-hero-home-accred {
  --accred-scale: 1;
  flex-wrap: nowrap !important;
  gap: calc(28px * var(--accred-scale));
  margin-bottom: 12px;
}
.gb-hero-home-accred > img {
  flex-shrink: 0;
  width: auto;
}
.gb-hero-home-accred > img[alt*="Diamond"]  { height: calc(51px * var(--accred-scale)); }
.gb-hero-home-accred > img[alt*="Armstrong"] { height: calc(53px * var(--accred-scale)); }
.gb-hero-home-reviews {
  flex-shrink: 0;
  gap: calc(12px * var(--accred-scale));
  text-decoration: none;
}
.gb-hero-home-reviews img { height: calc(42px * var(--accred-scale)); width: auto; }
@media (max-width: 1365px) { .gb-hero-home-accred { --accred-scale: 0.80; } }
@media (max-width: 1199px) { .gb-hero-home-accred { --accred-scale: 0.66; } }
@media (max-width: 991px)  { .gb-hero-home-accred { --accred-scale: 1; flex-wrap: wrap !important; } }  /* stacked: allow the badge row to wrap so it never overflows narrow phones */
@media (max-width: 575px)  { .gb-hero-home-accred { --accred-scale: 0.7; gap: 14px; } }  /* small phones: shrink badges so the two logos fit one line, reviews wrap below */
.gb-hero-home-stars {
  gap: 4px;
  color: var(--color-heat-red);
  font-size: calc(15px * var(--accred-scale, 1));
  line-height: 16px;
}
.gb-hero-home-reviews-tag {
  gap: 4px;
  font-family: var(--font-body);
  font-weight: var(--font-weight-bold);
  font-size: calc(14px * var(--accred-scale, 1));
  line-height: 22px;
  color: var(--color-white);
  transition: color var(--transition-standard);
}
.gb-hero-home-reviews:is(:hover, :focus) .gb-hero-home-reviews-tag {
  color: var(--color-heat-red);
}

/* --- Copy --- */
.gb-hero-home-subheading {
  margin-top: 7px;                         /* Figma heading stack gap */
  margin-bottom: 20px;
}
.gb-hero-home-body {
  max-width: 814px;                        /* Figma max-w-[814px] */
  margin-bottom: 20px;
  /* Figma spec is Paragraph/Large (18px), but at the narrower live column that
     runs tall and pushes the hero out. Held to 16px on the two-column (lg+) layout;
     the shared .fs-lg scale is untouched. */
  font-size: 16px;
  line-height: 24px;
}
@media (max-width: 991px) {
  .gb-hero-home-body { font-size: 18px; line-height: 26px; }  /* full width when stacked */
}
.gb-hero-home-ctas {
  gap: 20px;                               /* Figma gap-[20px] */
}

/* --- Van + red divider ---
   Figma: the van image is h-full and fills the hero top-to-bottom, bleeding
   horizontally. So the van COVERS its column (width/height 100%, object-fit:cover)
   with object-position pinned LEFT — that keeps the transparent diagonal wedge (the
   image's left ~24%) flush to the column's left edge so the red bar shows through it,
   while any cover-crop is taken off the van's right/rear where it bleeds off anyway.
   The column is physically the right half (col-lg-6), so the van can never reach the
   text column — overlap is structurally impossible.
   The row stretches both columns to equal height and the media column carries a
   responsive min-height, so the van is always flush to the TOP of the hero. */
.gb-hero-home-media {
  align-self: stretch;
  position: relative;
  z-index: 2;
  min-height: 640px;          /* van floor; Figma hero is 661 */
  padding: 0;
  overflow: hidden;
}
@media (max-width: 1365px) { .gb-hero-home-media { min-height: 560px; } }
.gb-hero-home-van {
  position: absolute;
  /* Bleed a hair past every edge (media is overflow:hidden). Guards against a
     sub-pixel gradient line showing under the baked-in red bar on fractional
     display scaling — the antialiased image edge is pushed just off-screen. */
  inset: -1px;
}
.gb-hero-home-img {
  display: block;
  width: calc(100% + 2px);
  height: calc(100% + 2px);
  object-fit: cover;
  object-position: left bottom;   /* pin the asset's solid bottom edge to the box bottom; crop off the top/right */
}
@media (max-width: 991px) {
  /* stacked: the van goes back to a natural-height banner, wedge irrelevant */
  .gb-hero-home-media { min-height: 0; overflow: visible; }
  .gb-hero-home-van { position: relative; inset: auto; }
  .gb-hero-home-img { height: auto; object-fit: contain; }
}

/* === Intro (blue) + overlapping cards (Figma 32123:1528 / 1550 / 1564) ===
   Sky background with the GB watermark baked in. The contact + financing cards sit
   at the top of this section and overlap the hero above via a negative margin;
   below them is the About/Our-Story content. Structure is Bootstrap
   (container-fluid / row / col + card); gb-* carries Figma tokens only. */
.gb-intro {
  position: relative;
  display: flow-root;             /* BFC — the cards' negative margin can't collapse the section top */
  background-color: var(--color-sky);
  padding-bottom: 80px;           /* Figma pb-80 */
}
/* GB-mark watermark. A clipped absolute layer (not overflow:hidden on the section,
   which would clip the cards' hero overlap). Figma: top-left at x=376 y=168 of the
   1600x722 section, size 528x564 — i.e. 23.5% from the left, 168px down. */
.gb-intro-bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 0;
  pointer-events: none;
}
.gb-intro-mark {
  position: absolute;
  left: 23.5%;                    /* 376 / 1600 */
  top: 168px;
  width: 528px;
  height: auto;
}
.gb-intro-container {
  position: relative;
  z-index: 2;
  padding-inline: 80px;           /* Figma px-80 */
}
@media (max-width: 1599px) { .gb-intro-container { padding-inline: 32px; } }
@media (max-width: 991px)  { .gb-intro-container { padding-inline: 16px; } }

/* Cards row — overlaps the hero bottom on lg+ */
.gb-cards-row {
  position: relative;
  z-index: 3;
  margin-top: -72px;
}
@media (max-width: 991px) {
  .gb-cards-row { margin-top: 24px; }   /* hero is stacked — no overlap */
}

/* About / Our Story */
.gb-intro-content {
  position: relative;
  z-index: 2;
  margin-top: 60px;               /* Figma gap-60 between cards and content */
}
.gb-intro-overline { margin-bottom: 12px; }
/* Column gap. A Bootstrap row's gutter becomes negative side-margins, so the gutter
   must never exceed 2x the container's inline padding or the row overflows the
   viewport. Step it down with the padding at each breakpoint. */
.gb-intro-cols { --bs-gutter-x: 80px; }    /* Figma gap-84; container pad 80 */
@media (max-width: 1599px) { .gb-intro-cols { --bs-gutter-x: 48px; } }  /* pad 32 */
@media (max-width: 991px)  { .gb-intro-cols { --bs-gutter-x: 24px; row-gap: 40px; } } /* pad 16 */
.gb-intro-heading { margin-bottom: 8px; }
.gb-intro-subhead { margin-bottom: 30px; } /* Figma advantages gap-30 */

/* Accolade list */
.gb-accolades {
  display: flex;
  flex-direction: column;
  gap: 20px;                      /* Figma rows gap-20 */
}
.gb-accolade { gap: 18px; }       /* Figma icon→text gap-18 */
.gb-accolade-icon {
  flex: 0 0 28px;
  width: 28px;
  font-size: 24px;
  line-height: 24px;
  text-align: center;
  color: var(--color-white);
}
.gb-accolade-text {
  font-family: var(--font-overline);
  font-weight: var(--font-weight-label);
  font-size: 14px;                /* Figma Label/Large 16px, trimmed for the larger URW Copperplate cut */
  line-height: 18px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--color-white);
}

/* Our-story column: body + CTAs */
.gb-intro-story .btn { margin-bottom: 0; }
.gb-intro-ctas {
  gap: 20px;                      /* Figma CTA gap-20 */
  margin-top: 20px;
}

.gb-card {
  border: 0;
  border-radius: 12px;
  background: var(--color-white);
  box-shadow: var(--shadow-sm);   /* Figma Drop Shadow/Light: 0 0 8px rgba(0,0,0,.05) */
}
.gb-card .card-body {
  padding: 24px 28px;
}
.gb-card-icon {
  font-size: 24px;
  line-height: 24px;
  color: var(--color-heat-red);
}
.gb-card-title {
  font-family: var(--font-heading);
  font-weight: var(--font-weight-heading);
  font-size: 32px;
  line-height: 40px;
  text-transform: uppercase;
  color: var(--color-dm-00dp);    /* Figma #121212 */
}

/* --- Form card --- */
.gb-form-card {
  border: 1px solid var(--color-neutral-50);
}
.gb-form-card .card-body > form { margin-top: 20px; }   /* Figma header→fields gap */
/* Style the shared short_form() output to the Figma field spec */
.gb-form-card .form-control {
  background: var(--color-neutral-50);       /* #EEF0F5 */
  border: 1px solid var(--color-neutral-100);/* #E4E9F0 */
  border-radius: 8px;
  padding: 8px;
  font-family: var(--font-overline);
  font-size: 12px;
  line-height: 14px;
  color: var(--color-azure);
}
.gb-form-card .form-control::placeholder {
  font-family: var(--font-overline);
  font-weight: var(--font-weight-label);
  font-size: 12px;
  line-height: 14px;
  text-transform: uppercase;
  color: var(--color-neutral-500);           /* #A9ABB4 */
  opacity: 1;
}
.gb-form-card .form-control:focus {
  background: var(--color-white);
  border-color: var(--color-sky);
  box-shadow: none;
}

/* --- Financing card --- */
.gb-financing-card {
  border-radius: 20px;
}
.gb-financing-body {
  margin: 20px 0;
  font-size: 14px;                /* Paragraph/Small — trimmed from Figma's 16 per Brendan */
  line-height: 22px;
  color: var(--color-dm-06dp);    /* Figma #2C2C2C */
}
.gb-financing-card .card-body { padding: 24px 40px; }

/* Message textarea keeps a sensible floor when it stretches to the column height */
.gb-form-card textarea.form-control {
  min-height: 96px;
  resize: none;
}

/* === Services — vertical tabs (Figma 32123:1571) ===
   Header + a 10-item Bootstrap pill tab rail (left) driving a detail card (right),
   then a brand-logo row. Bootstrap: nav.flex-column pills + tab-content/tab-pane,
   container-fluid / row / col + card. gb-* carries Figma tokens only. */
.gb-services2 {
  padding: 80px 0;
}
.gb-services2-container {
  padding-inline: 80px;
}
@media (max-width: 1599px) { .gb-services2-container { padding-inline: 32px; } }
@media (max-width: 991px)  { .gb-services2-container { padding-inline: 16px; } }

.gb-services2-header {
  max-width: 750px;
  margin: 0 auto 60px;
}
.gb-services2-header h2 { margin: 12px 0 20px; }

/* Tabs + panel share a row height so the rail's tabs distribute down the panel */
.gb-services2-body { --bs-gutter-x: 64px; }   /* Figma gap-64 */
@media (max-width: 1599px) { .gb-services2-body { --bs-gutter-x: 40px; } }
@media (max-width: 991px)  { .gb-services2-body { --bs-gutter-x: 24px; row-gap: 32px; } }

/* --- Tab rail --- */
.gb-vtab-tabs {
  gap: 16px;
  height: 100%;
  justify-content: space-between;   /* fills the panel height on lg+ */
}
.gb-vtab-tab {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 14px 16px;
  border: 0;
  border-radius: 12px;
  background: var(--color-neutral-200);   /* Figma inactive #DCDFE7 */
  color: var(--color-sky);
  text-align: left;
  transition: background-color var(--transition-standard), color var(--transition-standard);
}
.gb-vtab-tab .gb-vtab-tab-icon {
  flex: 0 0 28px;
  width: 28px;
  font-size: 24px;
  line-height: 24px;
  text-align: center;
}
.gb-vtab-tab .gb-vtab-tab-label {
  flex: 1 1 auto;
  font-family: var(--font-heading);
  font-weight: var(--font-weight-heading);
  font-size: 20px;
  line-height: 28px;
  text-transform: uppercase;
}
.gb-vtab-tab .gb-vtab-tab-arrow {
  flex: 0 0 auto;
  font-size: 22px;
  line-height: 24px;
}
.gb-vtab-tab:is(:hover, :focus-visible) {
  background: var(--color-neutral-300);
}
.gb-vtab-tab.active {
  background: var(--color-sky);          /* Figma active */
  color: var(--color-white);
}

/* --- Detail card --- */
.gb-vtab-panels { height: 100%; }
.gb-vtab-panels > .tab-pane { height: 100%; }
.gb-vtab-card {
  height: 100%;
  border: 0;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.gb-vtab-card-img {
  width: 100%;
  height: 291px;                          /* Figma image height */
  object-fit: cover;
}
.gb-vtab-card .card-body {
  padding: 40px;
  display: flex;
  flex-direction: column;
  gap: 32px;                              /* Figma content gap-32 */
}
.gb-vtab-card-heading { margin: 0 0 20px; }
.gb-vtab-card-title {
  font-family: var(--font-heading);
  font-weight: var(--font-weight-heading);
  font-size: 32px;
  line-height: 40px;
  text-transform: uppercase;
  color: var(--color-midnight);          /* Figma #092345 -> GB midnight */
  margin-bottom: 20px;
}
.gb-vtab-card-body {
  color: var(--color-azure);             /* Figma #1A315E -> GB azure */
  margin-bottom: 0;
}
.gb-vtab-include {
  font-family: var(--font-heading);
  font-weight: var(--font-weight-heading);
  font-size: 20px;
  line-height: 28px;
  text-transform: uppercase;
  color: var(--color-azure);
  margin-bottom: 12px;
}
.gb-vtab-list { display: flex; flex-direction: column; gap: 12px; margin: 0; }
.gb-vtab-list li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
.gb-vtab-list-icon {
  flex: 0 0 24px;
  font-size: 24px;
  line-height: 24px;
  color: var(--color-sky);
}
.gb-vtab-list p {
  margin: 0;
  font-size: 16px;
  line-height: 24px;
  color: var(--color-azure);
}
.gb-vtab-list a {
  font-weight: var(--font-weight-semibold);
  color: var(--color-sky);
  text-decoration: none;
}
.gb-vtab-list a:is(:hover, :focus) { text-decoration: underline; }
.gb-vtab-card-ctas { display: flex; flex-wrap: wrap; gap: 20px; }
.gb-vtab-card-ctas .btn { margin-bottom: 0; }

/* --- Brand logos row --- */
.gb-vtab-brands {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  margin-top: 60px;
}
.gb-vtab-brands img {
  /* Each logo renders at its EXACT Figma box (the img width/height attributes:
     152x44 armstrong, 182x48 diamond, 181x55 reme, 176x54 bradford, 193x43 aprilaire,
     192x34 honeywell). flex:0 0 auto stops flex from shrinking the width while the
     height stays fixed (which was the "stretched" look); it wraps instead.
     object-fit:contain letterboxes if a source aspect is slightly off — never stretch. */
  flex: 0 0 auto;
  max-width: 100%;
  object-fit: contain;
}
/* Tighten the gap before the row runs out of width so the six stay on one line
   down to typical laptops; below lg they scale down and wrap. */
@media (max-width: 1365px) { .gb-vtab-brands { gap: 20px 24px; } }
@media (max-width: 991px) {
  .gb-vtab-brands { justify-content: center; gap: 20px 28px; }
  .gb-vtab-brands img { height: auto; max-width: 40%; }   /* ~2 per row, scaled, aspect preserved */
}

/* Mobile: rail is a natural stack, panel below */
@media (max-width: 991px) {
  .gb-vtab-tabs { height: auto; justify-content: flex-start; }
  .gb-vtab-card-img { height: 220px; }
}

/* === Why Choose Us (Figma 32123:1745) === */
.gb-why {
  background: var(--color-neutral-50);
  padding-block: 80px;
}
.gb-why-container { padding-inline: 80px; }
@media (max-width: 1599px) { .gb-why-container { padding-inline: 32px; } }
@media (max-width: 991px)  {
  .gb-why-container { padding-inline: 16px; }
  .gb-why { padding-block: 48px; }
}

/* --- Intro: copy + photo --- */
.gb-why-intro { margin-bottom: 50px; }
.gb-why-overline { margin-bottom: 8px; }
.gb-why-heading  { font-size: 40px; line-height: 48px; margin: 0 0 8px; }
.gb-why-subhead  { font-size: 24px; line-height: 32px; margin: 0 0 20px; }
.gb-why-body     { margin-bottom: 32px; }
.gb-why-body p {
  font-size: 16px;
  line-height: 24px;
  color: #121212;
  margin-bottom: 16px;
}
.gb-why-body p:last-child { margin-bottom: 0; }
.gb-why-ctas { gap: 8px; }
/* Photo fills the column height (Figma: self-stretch), rounded like the design */
.gb-why-photo { display: flex; min-height: 320px; }
.gb-why-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 20px;
}
@media (max-width: 991px) {
  .gb-why-heading { font-size: 34px; line-height: 40px; }
  .gb-why-photo   { min-height: 260px; }
}

/* --- Advantages row (5 icon cards) --- */
.gb-why-advantages { margin-bottom: 50px; }
.gb-why-adv {
  display: flex;
  flex-direction: column;
  align-items: center;   /* center the icon (a block element text-align can't touch) over the copy */
  padding: 10px 12px;
}
.gb-why-adv-icon {
  font-size: 36px;
  line-height: 1;
  color: var(--color-heat-red);
  margin-bottom: 16px;
}
.gb-why-adv-title,
.gb-why-adv-text { width: 100%; }   /* full width so the centered text still wraps in the column */
.gb-why-adv-title { color: #383838; margin: 0 0 12px; }
.gb-why-adv-text {
  font-size: 12px;
  line-height: 20px;
  color: #383838;
  margin: 0;
}

/* Prototype hover: the flat item lifts into a white rounded card with a soft
   shadow, and the icon shifts from heat-red to sky. Scoped to the --interactive
   row so any static usage stays flat. */
.gb-why-advantages--interactive .gb-why-adv {
  padding: 28px 20px;
  border-radius: 20px;
  transition: background var(--transition-standard), box-shadow var(--transition-standard), transform var(--transition-standard);
}
.gb-why-advantages--interactive .gb-why-adv-icon {
  transition: color var(--transition-standard);
}
.gb-why-advantages--interactive .gb-why-adv:hover {
  background: var(--color-white);
  transform: translateY(-4px);
  box-shadow: 0 12px 28px rgba(5, 49, 86, 0.12);
}
.gb-why-advantages--interactive .gb-why-adv:hover .gb-why-adv-icon {
  color: var(--color-sky);
}

/* --- Mitsubishi Diamond callout --- */
.gb-why-diamond {
  border: 0;
  border-radius: 20px;
  overflow: hidden;
  background: var(--color-neutral-50);
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.2);
}
.gb-why-diamond-media { flex: 1 1 50%; }
.gb-why-diamond-media img {
  width: 100%;
  height: 100%;
  min-height: 260px;
  object-fit: cover;
  display: block;
}
.gb-why-diamond-col { flex: 1 1 50%; }
.gb-why-diamond-body { padding: 28px; }
.gb-why-diamond-heading { font-size: 32px; line-height: 40px; margin: 0 0 8px; }
.gb-why-diamond-intro {
  font-size: 14px;
  line-height: 22px;
  color: #121212;
  margin: 0 0 22px;
}
.gb-why-diamond-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0 0 22px;
}
.gb-why-diamond-list li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  font-size: 16px;
  line-height: 24px;
  color: #121212;
}
.gb-why-diamond-list li i {
  color: var(--color-heat-red);
  margin-top: 4px;
  flex-shrink: 0;
}
.gb-why-diamond-cta { margin: 0; }

/* === Financing & Specials (Figma 32123:1782) === */
.gb-financing {
  background: var(--color-azure);
  padding-block: 80px;
}
.gb-financing-container { padding-inline: 80px; }
@media (max-width: 1599px) { .gb-financing-container { padding-inline: 32px; } }
@media (max-width: 991px)  {
  .gb-financing-container { padding-inline: 16px; }
  .gb-financing { padding-block: 48px; }
}
.gb-financing-header { max-width: 880px; margin: 0 auto 40px; }
.gb-financing-title  { font-size: 40px; line-height: 48px; margin: 0 auto 24px; max-width: 700px; }
.gb-financing-intro  { font-size: 16px; line-height: 24px; margin: 0 auto; max-width: 840px; }
@media (max-width: 991px) { .gb-financing-title { font-size: 32px; line-height: 38px; } }

/* Program cards */
.gb-fin-grid { margin-bottom: 30px; }
.gb-fin-col  { gap: 18px; }
.gb-fin-card {
  background: var(--color-neutral-50);
  border: 0;
  border-radius: 10px;
}
.gb-fin-body {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 20px;
  height: 100%;
}
.gb-fin-logo { display: flex; align-items: center; min-height: 60px; }
.gb-fin-logo img {
  max-width: 100%;
  max-height: 56px;
  width: auto;
  height: auto;
  object-fit: contain;
}
.gb-fin-logo-lg { min-height: 98px; }
.gb-fin-logo-lg img { max-height: 92px; }
/* Synchrony sits smaller than the other partner logos in the Figma (212x46) */
.gb-fin-logo-sync img {
  width: 212px;
  height: 46px;
  max-height: none;
  object-fit: contain;
  object-position: left center;
}
.gb-fin-text {
  font-size: 14px;
  line-height: 22px;
  color: #121212;
  margin: 0;
}
.gb-fin-ctas { display: flex; flex-direction: column; gap: 12px; }
/* Uniform CTA buttons: stretch = identical width in every card; the reduced
   padding-block + min-height make a wrapped two-line label (unavoidable at the
   ~237px card width between 992-1200px) exactly as tall as a one-line one. */
.gb-fin-ctas .btn {
  align-self: stretch;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding-block: 8px;
  min-height: 56px;
}

/* Specials callout */
.gb-fin-callout {
  background: var(--color-neutral-50);
  border-radius: 20px;
  padding: 32px;
}
.gb-fin-promo { display: flex; flex-direction: column; }
.gb-fin-promo-img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  border-radius: 20px;
  margin-bottom: 16px;
}
.gb-fin-promo-title {
  font-size: 32px;
  line-height: 40px;
  color: #121212;
  margin: 0 0 8px;
}
.gb-fin-promo-text {
  font-size: 14px;
  line-height: 22px;
  color: #121212;
  margin: 0 0 16px;
}
@media (max-width: 991px) { .gb-fin-callout { padding: 20px; } }

/* === Service Areas (Figma 32123:1850) === */
.gb-sa {
  background: var(--color-neutral-50);
  padding-block: 80px;
}
.gb-sa-container { padding-inline: 80px; }
@media (max-width: 1599px) { .gb-sa-container { padding-inline: 32px; } }
@media (max-width: 991px)  {
  .gb-sa-container { padding-inline: 16px; }
  .gb-sa { padding-block: 48px; }
}
.gb-sa-primary { margin-bottom: 40px; }

/* Left: heading + copy + location list */
.gb-sa-info { display: flex; flex-direction: column; gap: 32px; }
.gb-sa-title { font-size: 40px; line-height: 48px; margin: 0 0 8px; }
.gb-sa-copy  { font-size: 16px; line-height: 24px; color: #2c2c2c; margin: 0; }
@media (max-width: 991px) { .gb-sa-title { font-size: 32px; line-height: 38px; } }

.gb-sa-loc-col { gap: 28px; }
.gb-sa-loc-col + .gb-sa-loc-col { margin-top: 0; }
.gb-sa-loc { gap: 12px; }
.gb-sa-loc-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--color-sky);
  color: var(--color-white);
  font-size: 16px;
  flex-shrink: 0;
}
.gb-sa-loc-icon--primary { background: var(--color-heat-red); }
.gb-sa-loc-label { color: #121212; }
/* Town links: plain until hover, then heat-red text with a red underline. */
.gb-sa-loc-link {
  text-decoration: none;
  text-underline-offset: 3px;
  transition: color var(--transition-standard);
}
.gb-sa-loc-link:is(:hover, :focus) {
  color: var(--color-heat-red);
  text-decoration: underline;
}
@media (max-width: 575px) { .gb-sa-loc-col + .gb-sa-loc-col { margin-top: 28px; } }

/* Right: map with GB pin overlay */
.gb-sa-map-col { display: flex; }
.gb-sa-map {
  position: relative;
  width: 100%;
  min-height: 420px;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.05);
}
.gb-sa-map-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.gb-sa-map-pin {
  position: absolute;
  left: 48%;
  top: 76%;
  width: 56px;
  height: auto;
  transform: translate(-50%, -100%);
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.3));
}

/* Additional communities callout */
.gb-sa-callout {
  background: var(--color-azure);
  border-radius: 20px;
  overflow: hidden;
}
/* Image is absolutely positioned so it crops (object-cover) to the callout height
   instead of dictating it via its 4:3 natural aspect. Figma callout height = 288px. */
.gb-sa-callout-media {
  flex: 1 1 50%;
  position: relative;
  min-height: 220px;
}
.gb-sa-callout-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
@media (min-width: 992px) { .gb-sa-callout-media { min-height: 308px; } }
.gb-sa-callout-body {
  flex: 1 1 50%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 16px;
  padding: 28px;
}
.gb-sa-callout-title { font-size: 32px; line-height: 40px; margin: 0; }
.gb-sa-callout-text  { font-size: 14px; line-height: 22px; margin: 0; }

/* === Closer / Trust (Figma 32123:1881) === */
.gb-closer { background: var(--color-azure); position: relative; overflow: hidden; }
.gb-closer-container { padding-inline: 80px; position: relative; z-index: 1; }
@media (max-width: 1599px) { .gb-closer-container { padding-inline: 32px; } }
@media (max-width: 991px)  { .gb-closer-container { padding-inline: 16px; } }

/* --- Shared section gutters: keep a roomy horizontal gutter through laptop widths.
   The per-section rules above collapse to 32px below 1600, which reads edge-to-edge on
   a laptop. This single block holds 80px down to 1400, then steps down gently. Full-bleed
   (no max-width) so every section — and the hero (.gb-hero-home-content), which matches
   these breakpoints — aligns at the same left edge at every width. Declared last so it
   wins the cascade over the per-section rules above. --- */
:is(.gb-nav-container, .gb-intro-container, .gb-services2-container, .gb-why-container,
    .gb-financing-container, .gb-sa-container, .gb-closer-container, .gb-faq-container, .gb-footer-container, .gb-reviews-container) {
  padding-inline: 80px;
}
@media (max-width: 1399px) {
  :is(.gb-nav-container, .gb-intro-container, .gb-services2-container, .gb-why-container,
      .gb-financing-container, .gb-sa-container, .gb-closer-container, .gb-faq-container, .gb-footer-container, .gb-reviews-container) { padding-inline: 56px; }
}
@media (max-width: 991px) {
  :is(.gb-nav-container, .gb-intro-container, .gb-services2-container, .gb-why-container,
      .gb-financing-container, .gb-sa-container, .gb-closer-container, .gb-faq-container, .gb-footer-container, .gb-reviews-container) { padding-inline: 32px; }
}
@media (max-width: 575px) {
  :is(.gb-nav-container, .gb-intro-container, .gb-services2-container, .gb-why-container,
      .gb-financing-container, .gb-sa-container, .gb-closer-container, .gb-faq-container, .gb-footer-container, .gb-reviews-container) { padding-inline: 20px; }
}

/* Navy trust block + watermark */
.gb-closer-top {
  position: relative;
  z-index: 1;
  padding-top: 80px;
  margin-bottom: 80px;
}
.gb-closer-mark {
  position: absolute;
  top: -29px;
  right: 54px;
  width: 555px;
  height: auto;
  z-index: 0;
  pointer-events: none;
}
@media (max-width: 991px) {
  .gb-closer-top { padding-top: 48px; margin-bottom: 48px; }
  .gb-closer-mark { width: 340px; right: 24px; }
}
.gb-closer-content { position: relative; z-index: 1; }

.gb-closer-lead { display: flex; flex-direction: column; gap: 30px; }
.gb-closer-headwrap { display: flex; flex-direction: column; gap: 10px; }
.gb-closer-title { font-size: 40px; line-height: 48px; margin: 0; }
@media (max-width: 991px) { .gb-closer-title { font-size: 32px; line-height: 38px; } }
.gb-closer-points { display: flex; flex-direction: column; gap: 14px; margin: 0; }
.gb-closer-points li { display: flex; align-items: center; gap: 18px; }
.gb-closer-points li i {
  font-size: 24px;
  color: var(--color-white);
  width: 28px;
  text-align: center;
  flex-shrink: 0;
}
.gb-closer-points .label-large { color: var(--color-white); }

.gb-closer-story {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 14px;
}
.gb-closer-story-title { font-size: 20px; line-height: 28px; margin: 0; }
.gb-closer-story-body p {
  font-size: 16px;
  line-height: 24px;
  color: var(--color-white);
  margin-bottom: 16px;
}
.gb-closer-story-body p:last-child { margin-bottom: 0; }

/* Community involvement callout */
.gb-closer-callout {
  position: relative;
  z-index: 1;
  background: var(--color-neutral-50);
  padding-block: 80px;
  overflow: hidden;
}
@media (max-width: 991px) { .gb-closer-callout { padding-block: 48px; } }
.gb-closer-community { margin-bottom: 35px; }
.gb-closer-community-lead { display: flex; flex-direction: column; gap: 10px; }
.gb-closer-community-title { font-size: 32px; line-height: 40px; margin: 0; }
.gb-closer-community-text { font-size: 16px; line-height: 24px; color: #121212; }
.gb-closer-gallery img {
  width: 100%;
  height: 244px;
  object-fit: cover;
  border-radius: 20px;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.05);
}

/* === FAQ (Figma 32123:1914) === */
.gb-faq {
  background: var(--color-sky);
  padding-block: 80px;
}
@media (max-width: 991px) { .gb-faq { padding-block: 48px; } }
.gb-faq-header { max-width: 920px; margin: 0 auto 40px; }
.gb-faq-title  { font-size: 40px; line-height: 48px; margin: 0; }
@media (max-width: 991px) { .gb-faq-title { font-size: 32px; line-height: 38px; } }

/* Accordion: transparent rows, white text, #DCDFE7 divider, plus→× toggle */
.gb-faq-accordion {
  --bs-accordion-bg: transparent;
  --bs-accordion-border-color: transparent;
  --bs-accordion-active-bg: transparent;
  --bs-accordion-btn-focus-box-shadow: none;
}
.gb-faq-accordion .accordion-item {
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--color-neutral-200);
}
.gb-faq-btn.accordion-button {
  background: transparent;
  color: var(--color-white);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 18px;
  line-height: 26px;
  padding: 14px 0;
  gap: 16px;
  box-shadow: none;
}
.gb-faq-btn.accordion-button:not(.collapsed) {
  background: transparent;
  color: var(--color-white);
  box-shadow: none;
}
.gb-faq-btn.accordion-button:focus { box-shadow: none; outline: none; }
.gb-faq-btn.accordion-button::after { display: none; }   /* Bootstrap chevron off — we use the + icon */
.gb-faq-q { flex: 1 1 auto; text-align: left; }
.gb-faq-icon {
  flex-shrink: 0;
  font-size: 16px;
  color: var(--color-white);
  transition: transform 0.2s ease;
}
.gb-faq-btn.accordion-button:not(.collapsed) .gb-faq-icon { transform: rotate(45deg); }
.gb-faq-accordion .accordion-body {
  color: var(--color-white);
  font-size: 16px;
  line-height: 24px;
  padding: 0 32px 16px 0;
}

.gb-sub-section { padding-block: 80px; }
@media (max-width: 991px) { .gb-sub-section { padding-block: 48px; } }
.gb-sub-header { max-width: 840px; margin: 0 auto 40px; }

/* Section on the sky-blue GB-graphic background (matches the homepage intro:
   sky bg + gb-watermark.svg, white header copy). White cards pop against it. */
.gb-sub-section--sky {
  position: relative;
  overflow: hidden;
  background: var(--color-sky);
}
.gb-sub-sky-bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 0;
  pointer-events: none;
}
/* GB-mark: top-left, smaller, more apparent (solid navy svg + CSS opacity). */
.gb-sub-sky-mark {
  position: absolute;
  top: -30px;
  left: -30px;
  width: 320px;
  height: auto;
  opacity: 0.25;
}
.gb-sub-section--sky > .container { position: relative; z-index: 1; }
@media (max-width: 991px) {
  .gb-sub-sky-mark { width: 220px; top: -20px; left: -20px; }
}

/* Sub-page hero variant: real photo in the right column + red diagonal accent
   (scoped so the homepage van hero is untouched) */
/* Straight vertical red bar at the photo's left edge (was an angled parallelogram). */
.gb-hero-home--photo .gb-hero-home-img {
  object-position: center;
}
.gb-hero-home--photo .gb-hero-home-media::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 40px;   /* match the homepage van's red strip (~40px rendered at desktop) */
  background: var(--color-heat-red);
  z-index: 3;
  pointer-events: none;
}
@media (max-width: 991px) {
  .gb-hero-home--photo .gb-hero-home-img { height: 320px; object-fit: cover; clip-path: none; }
  .gb-hero-home--photo .gb-hero-home-media::before { display: none; }
}

/* Quick-links band (related cooling services) — light icon chips on brand-navy */
.gb-sub-quicklinks {
  background: var(--color-azure);
  padding-block: 18px;
}
.gb-quicklinks-label {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-right: 4px;
  font-family: var(--font-overline);
  font-weight: var(--font-weight-label);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-white);
  font-size: 13px;
}
.gb-quicklinks-label i { color: var(--color-white); }
.gb-quicklink {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 18px;
  border-radius: 100px;
  border: 1px solid var(--color-neutral-200);
  background: var(--color-white);
  color: var(--color-azure);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: background var(--transition-standard), color var(--transition-standard),
              border-color var(--transition-standard), transform var(--transition-standard),
              box-shadow var(--transition-standard);
}
.gb-quicklink i { color: var(--color-sky); font-size: 13px; transition: color var(--transition-standard); }
.gb-quicklink:is(:hover, :focus) {
  background: var(--color-sky);
  border-color: var(--color-sky);
  color: var(--color-white);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.28);
}
.gb-quicklink:is(:hover, :focus) i { color: var(--color-white); }
.gb-quicklink--cta {
  background: var(--color-heat-red);
  border-color: var(--color-heat-red);
  color: var(--color-white);
}
.gb-quicklink--cta i { color: var(--color-white); }
.gb-quicklink--cta:is(:hover, :focus) {
  background: #a80f24;
  border-color: #a80f24;
  color: var(--color-white);
  box-shadow: 0 6px 16px rgba(205, 17, 43, 0.25);
}

/* Related-services card (opener intro column, holds the .gb-quicklink chips on navy) */
.gb-related-card {
  border: 0;
  border-radius: 16px;
  background: var(--color-azure);
  box-shadow: 0 0 14px rgba(0, 0, 0, 0.06);
}
.gb-related-card .card-body { padding: 24px; }
.gb-related-label {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 14px;
  font-family: var(--font-overline);
  font-weight: var(--font-weight-label);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 13px;
  color: var(--color-white);
}
.gb-related-label i { color: var(--color-heat-red); }
.gb-related-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 3px 0;
  color: var(--color-white);
  text-decoration: none;
  font-family: var(--font-body);
  font-weight: var(--font-weight-semibold);
  font-size: 14px;
}
.gb-related-link i { flex-shrink: 0; color: var(--color-sky); font-size: 13px; }
.gb-related-link span { text-underline-offset: 4px; }
.gb-related-link:is(:hover, :focus) span { text-decoration: underline; }

/* Products hub — brand logo cards: a consistent logo band so the cards line up
   regardless of each manufacturer logo's aspect ratio. */
.gb-brand-card { border-radius: 16px; }
.gb-brand-card-logo { min-height: 72px; }
.gb-brand-card-logo img { max-width: 100%; height: auto; }
/* Top brand cards: normalize logo height so the row reads evenly regardless of each logo's intrinsic dimensions */
.gb-brand-card .gb-brand-card-logo img { max-height: 56px; width: auto; }

/* Product-lineup cards (brand pages: Armstrong / Bradford White) — product render + spec */
.gb-product-media {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 200px;
  padding: 20px 16px;
  background: var(--color-neutral-50);
}
.gb-product-media img { max-height: 178px; width: auto; max-width: 100%; }
.gb-product-spec {
  color: var(--color-heat-red);
  font-family: var(--font-body);
  font-weight: var(--font-weight-semibold);
  font-size: 12px;
  letter-spacing: 0.02em;
}
/* Brand technology strip — feature + trust badges */
.gb-brand-tech { background: var(--color-neutral-50); border-radius: 16px; }
.gb-brand-tech-badges img { height: 56px; width: auto; }

/* Contact-form card (opener left column) */
.gb-sub-formcard {
  background: var(--color-white);
  border-radius: 16px;
  padding: 28px;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.06);
}

/* Circular icon chip */
.gb-sub-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(205, 17, 43, 0.1);
  color: var(--color-heat-red);
  font-size: 22px;
  flex-shrink: 0;
  transition: background var(--transition-standard), color var(--transition-standard);
}

/* Advantage / why cards */
.gb-sub-advcard,
.gb-sub-whycard {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 20px 16px;
  background: var(--color-white);
  border-radius: 12px;
  box-shadow: 0 0 12px rgba(0, 0, 0, 0.05);
}
.gb-sub-whycard { align-items: flex-start; text-align: left; }
.gb-sub-advcard .label-large,
.gb-sub-whycard .label-large { color: var(--color-azure); }

/* Financing partner-card "apply" links — bottom-aligned across the row */
.gb-fin-apply-group {
  margin-top: auto;
  padding-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-start;
}
.gb-fin-apply {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-body);
  font-weight: var(--font-weight-semibold);
  font-size: 13px;
  line-height: 1.3;
  color: var(--color-heat-red);
  text-decoration: none;
  transition: color var(--transition-standard);
}
.gb-fin-apply i { font-size: 11px; }
.gb-fin-apply:is(:hover, :focus) {
  color: var(--color-azure);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Collapsible reason cards — the heading is a toggle button that opens the
   paragraph (Bootstrap collapse); chevron flips when expanded. */
.gb-sub-whytoggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  text-align: left;
  cursor: pointer;
}
.gb-sub-whychev {
  flex-shrink: 0;
  color: var(--color-heat-red);
  font-size: 13px;
  transition: transform var(--transition-standard);
}
.gb-sub-whytoggle[aria-expanded="true"] .gb-sub-whychev { transform: rotate(180deg); }
/* Reserve two lines of the heading (label-large = 18px line-height) so one- and
   two-line reason cards collapse to the same height. */
.gb-sub-whytoggle > span { min-height: 36px; }
/* Center the collapsible reason cards. Explicit modifier class (not :has()) so
   it works in every browser; Warning-Signs cards omit it and stay left-aligned. */
.gb-sub-whycard--center { align-items: center; text-align: center; }
.gb-sub-whycard--center .gb-sub-whytoggle { flex-direction: column; gap: 8px; text-align: center; }

/* Google review badge (e.g. under the contact form) */
.gb-review-badge {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--color-neutral-200);
  text-decoration: none;
}
.gb-review-badge-g { flex-shrink: 0; width: 30px; height: 30px; }
.gb-review-badge-body { display: flex; flex-direction: column; }
.gb-review-badge-stars { color: #fbbc04; font-size: 15px; letter-spacing: 2px; line-height: 1; }
.gb-review-badge-label {
  margin-top: 4px;
  font-family: var(--font-body);
  font-weight: var(--font-weight-semibold);
  font-size: 13px;
  color: var(--color-azure);
}
.gb-review-badge-label i { transition: transform var(--transition-standard); }
.gb-review-badge:is(:hover, :focus) .gb-review-badge-label i { transform: translateX(3px); }

/* Credentials row under the review badge (form card) */
.gb-form-accred {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--color-neutral-200);
}
.gb-form-accred-label {
  margin: 0 0 10px;
  font-family: var(--font-overline);
  font-weight: var(--font-weight-label);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 12px;
  color: #656870;
}
.gb-form-accred-logos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 22px;
}
.gb-form-accred-logos img { height: 34px; width: auto; }

/* Service cards (decorative image top) */
.gb-sub-svc-card {
  border: 0;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 0 14px rgba(0, 0, 0, 0.06);
}
.gb-sub-svc-img {
  height: 200px;
  background: linear-gradient(135deg, var(--color-sky), var(--color-azure));
}
.gb-sub-svc-card .card-body { padding: 24px; }
/* Tighter body copy for the narrow equipment cards (base p is 16/24; .small is
   14px but keeps the loose 24px line-height, which reads big in a small card). */
.gb-sub-svc-card .card-body p { font-size: 13px; line-height: 1.5; }
/* Real photo top (image variant of the gradient .gb-sub-svc-img).
   aspect-ratio (not a fixed height) keeps the photo proportional at any card
   width — a fixed height stretches/over-crops wide cards. */
.gb-sub-svc-photo {
  width: 100%;
  height: auto;          /* override the img height="390" attr so aspect-ratio governs */
  aspect-ratio: 16 / 10;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}
.gb-sub-svc-card:hover .gb-sub-svc-photo { transform: scale(1.06); }

/* Closer decorative photo (replaces the gb-sub-imgph placeholder) */
.gb-sub-closer-img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 20px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.12);
}

/* Icon-row feature list (Common Repairs) — chip + title + text rows, hairline dividers */
.gb-svc-row {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  padding: 20px 0;
}
.gb-svc-row + .gb-svc-row { border-top: 1px solid var(--color-neutral-200); }
.gb-svc-row-body { flex: 1 1 auto; }
.gb-svc-row .gb-sub-chip { transition: background var(--transition-standard), color var(--transition-standard); }
.gb-svc-row:hover .gb-sub-chip { background: var(--color-heat-red); color: var(--color-white); }

/* Photo carousel — snapping horizontal gallery (small crisp tiles + arrow nav) */
.gb-gallery { position: relative; }
.gb-gallery-track {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding-bottom: 6px;
  scrollbar-width: none;
}
.gb-gallery-track::-webkit-scrollbar { display: none; }
.gb-gallery-item {
  flex: 0 0 auto;
  width: 320px;
  margin: 0;
  scroll-snap-align: center;
}
.gb-gallery-item img {
  display: block;
  width: 320px;
  height: 210px;
  object-fit: cover;
  border-radius: 16px;
  box-shadow: 0 0 14px rgba(0, 0, 0, 0.06);
}
.gb-gallery-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border: 0;
  border-radius: 50%;
  background: var(--color-heat-red);
  color: var(--color-white);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
  cursor: pointer;
  z-index: 2;
  transition: background var(--transition-standard);
}
.gb-gallery-nav:is(:hover, :focus) { background: #a80f24; }
.gb-gallery-prev { left: -16px; }
.gb-gallery-next { right: -16px; }
@media (max-width: 575px) {
  .gb-gallery-item, .gb-gallery-item img { width: 82vw; }
  .gb-gallery-item img { height: 54vw; }
  .gb-gallery-prev { left: 4px; }
  .gb-gallery-next { right: 4px; }
}

/* White strip with a straight vertical red bar at the left edge (matches the hero) */
.gb-carousel-strip {
  position: relative;
  overflow: hidden;               /* clips the off-right GB watermark */
  background: var(--color-white);
}
.gb-carousel-strip::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 20px;
  background: var(--color-heat-red);
  z-index: 1;
}
/* Large GB monogram watermark, off to the right (navy @10% → soft blue-grey on white) */
.gb-carousel-bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 0;
  pointer-events: none;
}
.gb-carousel-mark {
  position: absolute;
  top: 50%;
  right: -170px;
  transform: translateY(-50%);
  width: 720px;
  height: auto;
  opacity: 0.35;  /* navy, more see-through */
}
.gb-carousel-strip > .container { position: relative; z-index: 1; }
@media (max-width: 991px) {
  .gb-carousel-mark { width: 480px; right: -150px; }
}

/* Review cards (placeholder) */
.gb-sub-review {
  display: flex;
  flex-direction: column;
  background: var(--color-white);
  border-radius: 16px;
  padding: 28px;
  box-shadow: 0 0 14px rgba(0, 0, 0, 0.05);
}
.gb-sub-review-stars { font-size: 14px; letter-spacing: 2px; margin-bottom: 12px; }
.gb-sub-review-quote { color: #383838; margin-bottom: 16px; flex: 1 1 auto; }
.gb-sub-review-name {
  font-family: var(--font-overline);
  font-weight: var(--font-weight-label);
  text-transform: uppercase;
  color: var(--color-azure);
  font-size: 14px;
}

/* Decorative image placeholder (closer) */
.gb-sub-imgph {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 320px;
  border-radius: 20px;
  background: linear-gradient(135deg, var(--color-sky), var(--color-azure));
  color: rgba(255, 255, 255, 0.6);
}

/* Sub-page card hover interactions (match the homepage's interactive polish) */
.gb-sub-advcard,
.gb-sub-whycard,
.gb-sub-svc-card,
.gb-sub-review {
  transition: transform var(--transition-standard), box-shadow var(--transition-standard);
}
.gb-sub-advcard:hover,
.gb-sub-whycard:hover,
.gb-sub-svc-card:hover,
.gb-sub-review:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.12);
}
/* Service-card image zooms on hover (card clips it via overflow:hidden) */
.gb-sub-svc-img { transition: transform 0.4s ease; }
.gb-sub-svc-card:hover .gb-sub-svc-img { transform: scale(1.06); }
/* Icon chip fills red when its card is hovered */
.gb-sub-advcard:hover .gb-sub-chip,
.gb-sub-whycard:hover .gb-sub-chip,
.gb-sub-svc-card:hover .gb-sub-chip {
  background: var(--color-heat-red);
  color: var(--color-white);
}

/* Common-repair card link */
.gb-sub-cardlink {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 12px;
  font-family: var(--font-body);
  font-weight: var(--font-weight-semibold);
  font-size: 14px;
  color: var(--color-heat-red);
  text-decoration: none;
}
.gb-sub-cardlink i { transition: transform var(--transition-standard); }
.gb-sub-cardlink:is(:hover, :focus) i { transform: translateX(4px); }

/* Process steps (numbered, "How We Repair") — 2-column grid */
/* Process steps fill the full section container (was capped at 1040px, narrower than every other section) */
.gb-sub-steps { margin-inline: auto; }
.gb-sub-step {
  display: flex;
  gap: 20px;
  height: 100%;
  background: var(--color-white);
  border-radius: 16px;
  padding: 28px;
  box-shadow: 0 0 14px rgba(0, 0, 0, 0.06);
}
.gb-sub-step-num {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 2px solid var(--color-heat-red);
  background: var(--color-heat-red);
  color: var(--color-white);
  font-family: var(--font-heading);
  font-weight: var(--font-weight-heading);
  font-size: 26px;
  line-height: 1;
  transition: background var(--transition-standard), color var(--transition-standard);
}
/* Flip the number circle's colors on step hover */
.gb-sub-step:hover .gb-sub-step-num {
  background: var(--color-white);
  color: var(--color-heat-red);
}
.gb-sub-step-body { flex: 1 1 auto; }
.gb-sub-step-body h3 { color: var(--color-azure); }
.gb-sub-step-list { margin: 12px 0 0; padding: 0; list-style: none; }
.gb-sub-step-list li {
  position: relative;
  padding-left: 26px;
  margin-bottom: 6px;
  color: #383838;
}
.gb-sub-step-list li::before {
  content: "\f00c";
  font-family: "Font Awesome 7 Pro";
  font-weight: 900;
  position: absolute;
  left: 0;
  top: 3px;
  color: var(--color-heat-red);
  font-size: 12px;
}
/* Scroll-reveal (reusable): items fade/rise in as they enter the viewport.
   Visible by default; JS adds .gb-steps-armed to the group to hide, then
   .is-visible per item to reveal — so no-JS / reduced-motion users see everything. */
.gb-reveal {
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.gb-steps-armed .gb-reveal {
  opacity: 0;
  transform: translateY(28px);
}
.gb-steps-armed .gb-reveal.is-visible {
  opacity: 1;
  transform: none;
}
/* Within each 2-col row, the right (even) step trails the left so they reveal
   one at a time (1 → 2 → 3 → 4 → 5) as the row scrolls in. */
.gb-sub-steps .col:nth-child(even) .gb-reveal {
  transition-delay: 0.15s;
}

/* === Brand Accreditation Bar (below hero) === */
.gb-accred .row { row-gap: 0.5rem; }
.gb-accred-item {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.625rem;
  padding: 0.875rem 0.75rem;
}
@media (min-width: 992px) {
  .gb-accred-item + .gb-accred-item {
    border-left: 1px solid rgba(255, 255, 255, 0.15);
  }
}
.gb-accred-icon {
  font-size: 28px;
  color: var(--color-white);
  flex-shrink: 0;
}
.gb-accred-label {
  font-family: var(--font-heading);
  font-weight: var(--font-weight-heading);
  text-transform: uppercase;
  font-size: 14px;
  line-height: 1.15;
}
.gb-accred-stars {
  color: var(--color-heat-red);
  font-size: 14px;
  letter-spacing: 2px;
}
.gb-accred-link {
  font-family: var(--font-body);
  font-weight: var(--font-weight-semibold);
  font-size: 13px;
  color: var(--color-white);
  text-decoration: none;
  white-space: nowrap;
}
.gb-accred-link:is(:hover, :focus) { color: var(--color-sky); }
.gb-accred-brand { max-width: 100%; height: auto; }

/* === Opening Section (below hero) === */
.gb-opening {
  background-color: var(--color-neutral-100);
  padding-block: 3.75rem;
}
.gb-opening-img {
  width: 100%;
  height: auto;
  max-width: 717px;          /* Figma xxl image width */
  aspect-ratio: 717 / 494;   /* Figma xxl ratio — fixed, never stretched */
  object-fit: cover;
  border-radius: var(--border-radius-large);
  box-shadow: var(--shadow-sm);
}

/* === About / Our Story === */
.gb-about {
  background-color: var(--color-neutral-50);
  padding-top: 5rem;
  padding-bottom: 3.75rem;
}
.gb-about-img {
  width: 100%;
  height: auto;
  max-width: 717px;          /* Figma xxl image width */
  aspect-ratio: 717 / 680;   /* Figma xxl ratio */
  object-fit: cover;
  border-radius: var(--border-radius-card);
  box-shadow: var(--shadow-sm);
}

/* === Financing (Service Finance) === */
.gb-financing-card {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 20px;
  padding: 20px 28px;
  border-radius: 12px;
  box-shadow: var(--shadow-sm);
}
.gb-financing-logo {
  width: 191px;
  height: auto;
  max-width: 100%;
}
.gb-financing-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.gb-financing-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px;
  border-bottom: 1px solid var(--color-sky);
  color: var(--color-white);
}
.gb-financing-item i {
  width: 24px;
  font-size: 24px;
  text-align: center;
  flex-shrink: 0;
}
.gb-financing-item span {
  font-size: 18px;
  line-height: 26px;
}

/* === Maintenance Plan + Trust Closer (navy + stars + gradient) === */
.gb-mplan,
.gb-trust {
  background-image: url('/img/gb-stars-bg.svg'), linear-gradient(180deg, var(--color-midnight) 0%, #172E59 100%);
  background-repeat: repeat, no-repeat;
  background-size: auto, cover;
  background-position: center center;
}
.gb-mplan-card {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
  padding: 20px;
  background-color: var(--color-azure);
  border: 1px solid transparent;
  border-radius: 12px;
  transition: transform var(--transition-standard), box-shadow var(--transition-standard),
              background-color var(--transition-standard), border-color var(--transition-standard);
}
.gb-mplan-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
.gb-mplan-icon {
  color: var(--color-heat-red);
  font-size: 32px;
  line-height: 1;
  transition: transform var(--transition-standard);
}
.gb-mplan-title {
  font-family: var(--font-heading);
  font-weight: var(--font-weight-heading);
  font-size: 14px;
  line-height: 16px;
  color: var(--color-white);
  text-align: center;
  text-transform: uppercase;
}
.gb-mplan-desc {
  font-size: 12px;
  line-height: 20px;
  color: rgba(255, 255, 255, 0.72);
  text-align: center;
}
/* Maintenance-plan benefit cards — hover (lift + heat-red top bar + icon pop) */
.gb-mplan-card::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  background-color: var(--color-heat-red);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--transition-standard);
}
.gb-mplan-card:hover {
  transform: translateY(-5px);
  background-color: var(--color-azure-hover);
  border-color: var(--color-heat-red);
  box-shadow: 0 0.75rem 1.5rem rgba(0, 0, 0, 0.35);
}
.gb-mplan-card:hover::before { transform: scaleX(1); }
.gb-mplan-card:hover .gb-mplan-icon { transform: scale(1.15); }
@media (prefers-reduced-motion: reduce) {
  .gb-mplan-card, .gb-mplan-card::before, .gb-mplan-icon { transition: none; }
  .gb-mplan-card:hover { transform: none; }
  .gb-mplan-card:hover::before { transform: scaleX(1); }
  .gb-mplan-card:hover .gb-mplan-icon { transform: none; }
}

/* === Specials & Promos (Veterans discount coupon) === */
.gb-specials-card {
  position: relative;
  overflow: hidden;
  padding: 40px 28px;
  border: 4px dashed var(--color-heat-red);
  border-radius: var(--border-radius-large);
  box-shadow: var(--shadow-sm);
}
.gb-specials-inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  text-align: center;
}
.gb-specials-text {
  max-width: 650px;
}
.gb-specials-flag {
  position: absolute;
  top: 0;
  right: 0;
  width: clamp(240px, 30%, 460px);
  height: auto;
  z-index: 0;
  pointer-events: none;
}
@media (max-width: 575px) {
  .gb-specials .display-large {
    font-size: 44px;
    line-height: 52px;
  }
}

/* === Service Areas (navy + map) === */
.gb-loc-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px;
  text-decoration: none;
  color: var(--color-white); /* was inheriting Bootstrap blue → made the icon blue on the dark map section */
}
.gb-loc-item i {
  width: 28px;
  font-size: 24px;
  text-align: center;
  flex-shrink: 0;
  transition: color var(--transition-standard);
}
.gb-loc-item span {
  font-family: var(--font-heading);
  font-weight: var(--font-weight-heading);
  font-size: 14px;
  line-height: 16px;
  color: var(--color-white);
  text-transform: uppercase;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  transition: text-decoration-color var(--transition-standard);
}
/* Service-area links — icon turns red + underline fades in on hover (no motion) */
.gb-loc-item:hover i,
.gb-loc-item:focus-visible i {
  color: var(--color-heat-red) !important;
}
.gb-loc-item:hover span,
.gb-loc-item:focus-visible span {
  text-decoration-color: var(--color-heat-red);
}
/* Light-background variant: location chips as small white cards (under the service-area page map) */
.gb-loc-grid-light .gb-loc-item {
  background: var(--color-white);
  border: 1px solid var(--color-neutral-200);
  border-radius: var(--border-radius-standard);
  padding: 10px 16px;
  justify-content: center; /* center icon+label inside the equal-width grid cards */
  transition: border-color var(--transition-standard);
}
.gb-loc-grid-light .gb-loc-item span { color: var(--color-azure); }
.gb-loc-grid-light .gb-loc-item:hover,
.gb-loc-grid-light .gb-loc-item:focus-visible { border-color: var(--color-heat-red); }
.gb-loc-callout {
  padding: 20px;
  border-radius: var(--border-radius-large);
}
.gb-service-area-map {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  border-radius: var(--border-radius-large);
  box-shadow: var(--shadow-md);
}

/* === Trust Closer (photo gallery + trust strip) === */
.gb-trust-photo {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: 8px;
  box-shadow: var(--shadow-sm);
}
.gb-trust-gallery > [class*="col-"]:nth-child(2) {
  margin-top: 24px; /* staggered middle photo (Figma offset) */
}
.gb-trust-strip {
  background-color: var(--color-midnight);
  border-radius: var(--border-radius-large);
  padding-inline: 10px;
}
.gb-trust-item {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 8px;
  height: 100%;
  padding: 20px 10px;
}

/* === Footer === */
/* === Footer (Figma 32123:1963) === */
.gb-footer { background: var(--color-neutral-50); color: #000; }
.gb-footer-container { padding-top: 60px; padding-bottom: 80px; }

/* Top: logo + info items */
.gb-footer-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 40px 70px;
  margin-bottom: 60px;
}
.gb-footer-logo { width: 380px; max-width: 100%; height: auto; }
.gb-footer-info {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 24px 40px;
  flex: 1 1 480px;
}
.gb-footer-info-item { display: flex; align-items: center; gap: 12px; }
.gb-footer-info-icon { font-size: 24px; color: var(--color-heat-red); flex-shrink: 0; }
.gb-footer-info-text { display: flex; flex-direction: column; }
.gb-footer-info-label {
  font-family: var(--font-overline);
  font-weight: var(--font-weight-label);
  font-size: 14px;
  line-height: 16px;
  text-transform: uppercase;
  color: #656870;
}
.gb-footer-info-value {
  font-family: var(--font-overline);
  font-weight: var(--font-weight-label);
  font-size: 16px;
  line-height: 18px;
  text-transform: uppercase;
  color: var(--color-sky);
  text-decoration: none;
}
a.gb-footer-info-value:is(:hover, :focus) { color: var(--color-azure); }

/* Link columns */
.gb-footer-colgroup { display: flex; flex-direction: column; gap: 32px; }
.gb-footer-heading {
  font-family: var(--font-heading);
  font-weight: var(--font-weight-heading);
  font-size: 20px;
  line-height: 28px;
  color: var(--color-heat-red);
  text-transform: uppercase;
  margin-bottom: 12px;
}
.gb-footer-links li { margin-bottom: 4px; }
.gb-footer-links li:last-child { margin-bottom: 0; }
.gb-footer-link {
  color: #000;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 24px;
  text-decoration: none;
  transition: color var(--transition-standard);
}
.gb-footer-link:is(:hover, :focus) { color: var(--color-heat-red); }

.gb-footer-connect {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 24px;
  color: #000;
}
.gb-footer-social { display: inline-flex; align-items: center; gap: 12px; }
.gb-footer-social a {
  color: #000;
  font-size: 16px;
  line-height: 1;
  text-decoration: none;
  transition: color var(--transition-standard);
}
.gb-footer-social a:is(:hover, :focus) { color: var(--color-heat-red); }

/* === Star Pattern Divider Strip === */
.gb-star-strip {
  height: 42px;
  background-image: url('/img/gb-stars.svg'), var(--gradient-moment-0);
  background-repeat: repeat-x, no-repeat;
  background-size: auto 42px, cover;
  background-position: center center;
}

/* === Services Rollover (left rail + right detail panel) === */
.gb-services { padding-block: 5rem; position: relative; overflow: hidden; }
.gb-services > .container { position: relative; z-index: 1; }
.gb-services-waves {
  position: absolute;
  top: 60px;
  right: 0;
  width: clamp(280px, 30vw, 420px);
  height: auto;
  z-index: 0;
  pointer-events: none;
}
.gb-services-intro { max-width: 717px; }
.gb-svc-rail { display: flex; flex-direction: column; }
.gb-svc-rail .gb-svc-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  padding: 0.875rem 1rem;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--color-azure);
  border-radius: 0;
  font-family: var(--font-heading);
  font-weight: var(--font-weight-heading);
  font-size: 20px;
  line-height: 28px;
  text-transform: uppercase;
  color: var(--color-white);
  text-align: left;
  cursor: pointer;
  transition: background var(--transition-standard), color var(--transition-standard);
}
.gb-svc-rail .gb-svc-item > i:first-child { font-size: 24px; width: 28px; text-align: center; flex-shrink: 0; }
.gb-svc-rail .gb-svc-item .gb-svc-rail-arrow { margin-left: auto; font-size: 20px; }
.gb-svc-rail .gb-svc-item.active {
  background: var(--color-neutral-200);
  border-radius: 12px;
  border-bottom-color: transparent;
  color: var(--color-heat-red);
}
.gb-svc-rail .gb-svc-item.active i { color: var(--color-heat-red); }
.gb-svc-rail .gb-svc-item:not(.active):hover,
.gb-svc-rail .gb-svc-item:not(.active):hover i { color: var(--color-sky); }

/* Right detail panel card */
.gb-svc-panel-card {
  border-radius: var(--border-radius-large);
  overflow: hidden;
  box-shadow: var(--shadow-md);
}
.gb-svc-panel-img { display: block; width: 100%; height: 300px; object-fit: cover; }
.gb-svc-panel-body { background: var(--color-neutral-100); padding: 2rem; }
/* Service-rollover dropdown — FA chevron only (button has no .dropdown-toggle class, so Bootstrap renders no caret) */
.gb-svc-panel-body .gb-caret {
  font-size: 0.8em; margin-left: 0.4em; vertical-align: middle; display: inline-block;
  transition: transform var(--transition-standard);
}
.gb-svc-panel-body [aria-expanded="true"] .gb-caret { transform: rotate(180deg); }
.gb-svc-checklist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.75rem; }
.gb-svc-checklist li { display: flex; gap: 0.5rem; align-items: flex-start; color: var(--color-azure); font-size: 16px; line-height: 24px; }
.gb-svc-checklist li > i { color: var(--color-heat-red); font-size: 22px; line-height: 24px; flex-shrink: 0; }
.gb-svc-checklist li b { color: var(--color-heat-red); font-weight: var(--font-weight-semibold); }

/* === Reviews — navy star background (Elfsight widget unchanged) === */
/* === Customer Reviews (Figma 32123:1732) === */
.gb-reviews {
  background: var(--color-azure);
  padding-block: 80px;
}
.gb-reviews-container { padding-inline: 80px; }
.gb-reviews-header { max-width: 920px; margin: 0 auto 32px; }
.gb-reviews-title { font-size: 40px; line-height: 48px; margin: 0; }
.gb-reviews-widget { margin-bottom: 32px; }
@media (max-width: 991px) {
  .gb-reviews { padding-block: 48px; }
  .gb-reviews-title { font-size: 32px; line-height: 38px; }
}

/* === QAM Services Section — Tabbed Rollover === */

/* Tab nav (top — Heating & Cooling / Commercial / Indoor Air Quality) */
.gb-svc-tabs.nav-tabs {
  border-bottom: 0;
  gap: 1.875rem;
}
.gb-svc-tabs.nav-tabs .nav-link {
  width: 100%;
  background: transparent;
  border: 0;
  border-bottom: 5px solid var(--color-white);
  border-radius: var(--border-radius-large) var(--border-radius-large) 0 0;
  color: var(--color-white);
  padding: 1rem;
  text-align: center;
  font-family: var(--font-heading);
  font-weight: var(--font-weight-heading);
  font-size: 16px;
  line-height: 18px;
  text-transform: uppercase;
  transition: border-color var(--transition-standard);
}
.gb-svc-tabs.nav-tabs .nav-link.active {
  background: transparent;
  color: var(--color-white);
  border-bottom-color: var(--color-heat-red);
}

/* Tab icon — regular by default, swap to solid on hover or when tab is active */
.gb-svc-tabs.nav-tabs .nav-link .gb-svc-tab-icon {
  display: block;
  font-size: 32px;
  line-height: 1;
  margin-bottom: 0.5rem;
  color: var(--color-white);
}
.gb-svc-tabs.nav-tabs .nav-link .gb-svc-tab-icon-regular {
  display: inline-block;
}
.gb-svc-tabs.nav-tabs .nav-link .gb-svc-tab-icon-solid {
  display: none;
}
.gb-svc-tabs.nav-tabs .nav-link:hover .gb-svc-tab-icon-regular,
.gb-svc-tabs.nav-tabs .nav-link.active .gb-svc-tab-icon-regular {
  display: none;
}
.gb-svc-tabs.nav-tabs .nav-link:hover .gb-svc-tab-icon-solid,
.gb-svc-tabs.nav-tabs .nav-link.active .gb-svc-tab-icon-solid {
  display: inline-block;
}

/* Sub-service list (left column accordion-style) */
.gb-svc-item {
  border-bottom: 2px solid var(--color-white);
  transition: background var(--transition-standard);
}
.gb-svc-item .gb-svc-btn {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.75rem 1.25rem;
  background: transparent;
  border: 0;
  text-align: left;
  font-family: var(--font-heading);
  font-weight: var(--font-weight-heading);
  font-size: 20px;
  line-height: 28px;
  text-transform: uppercase;
  color: var(--color-white);
  cursor: pointer;
}
.gb-svc-item .gb-svc-btn > i:first-child {
  font-size: 18px;
}
.gb-svc-item .gb-svc-toggle {
  margin-left: auto;
  font-size: 16px;
}
.gb-svc-item .gb-svc-toggle-close { display: none; }
.gb-svc-item.active {
  background: var(--color-neutral-50);
  border-bottom-color: transparent;
  border-radius: var(--border-radius-standard);
}
.gb-svc-item:has(+ .gb-svc-item.active) {
  border-bottom-color: transparent;
}
.gb-svc-item.active .gb-svc-btn,
.gb-svc-item.active .gb-svc-btn > i {
  color: var(--color-midnight);
}
.gb-svc-item.active .gb-svc-toggle-open { display: none; }
.gb-svc-item.active .gb-svc-toggle-close { display: inline-block; }
.gb-svc-desc {
  display: none;
  padding: 0 1.25rem 0.75rem;
  color: var(--color-midnight);
  font-size: 14px;
  line-height: 22px;
}
.gb-svc-item.active .gb-svc-desc {
  display: block;
}

/* Sub-service icon — regular by default, swap to solid on hover or when item is active */
.gb-svc-item .gb-svc-icon {
  display: inline-flex;
  align-items: center;
  font-size: 18px;
  line-height: 1;
}
.gb-svc-item .gb-svc-icon-solid {
  display: none;
}
.gb-svc-item .gb-svc-btn:hover .gb-svc-icon-regular,
.gb-svc-item.active .gb-svc-icon-regular {
  display: none;
}
.gb-svc-item .gb-svc-btn:hover .gb-svc-icon-solid,
.gb-svc-item.active .gb-svc-icon-solid {
  display: inline-block;
}

/* Right detail panel — image with overlaid action cards */
.gb-svc-card {
  position: relative;
  height: 100%;
  min-height: 600px;
  background-image: var(--gb-svc-bg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: var(--border-radius-standard);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 2rem;
}
.gb-svc-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.15) 60%, transparent 100%);
  pointer-events: none;
}
.gb-svc-card > * {
  position: relative;
  z-index: 1;
}

/* Smaller image variants below xxl */
@media (max-width: 1599px) {
}
@media (max-width: 575px) {
}

/* On mobile, drop the image and gradient so action cards render plainly */
@media (max-width: 991px) {
  .gb-svc-card {
    background-image: none;
    min-height: 0;
    padding: 0;
  }
  .gb-svc-card::before { display: none; }
}

/* Action card row (Install / Maintenance / Repair) */
.gb-svc-action-row {
  display: flex;
  gap: 1.25rem;
  flex-wrap: wrap;
  align-items: flex-start;
}
.gb-svc-action-card {
  flex: 1 1 0;
  min-width: 220px;
  background: var(--color-neutral-100);
  border-radius: var(--border-radius-standard);
  padding: 0.75rem 1.25rem;
}
.gb-svc-action-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}
.gb-svc-action-header > h5 {
  flex: 1 1 0;
  min-width: 0;
}
.gb-svc-action-title-link {
  display: block;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}
.gb-svc-action-title-link:hover,
.gb-svc-action-header:hover .gb-svc-action-title-link {
  color: var(--color-midnight-hover);
}
.gb-svc-action-header > p {
  font-family: var(--font-heading);
  font-weight: var(--font-weight-heading);
  font-size: 16px;
  line-height: 18px;
  text-transform: uppercase;
  color: var(--color-midnight);
  margin: 0;
}
.gb-svc-action-toggle {
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  color: var(--color-midnight);
  font-size: 16px;
}
.gb-svc-action-toggle .gb-svc-action-toggle-close { display: none; }
.gb-svc-action-toggle[aria-expanded="true"] .gb-svc-action-toggle-open { display: none; }
.gb-svc-action-toggle[aria-expanded="true"] .gb-svc-action-toggle-close { display: inline-block; }

/* Toggle icon weight — regular by default; on header hover (collapsed cards) swap + to solid; when expanded keep the solid x. */
.gb-svc-action-toggle .gb-svc-action-toggle-icon-solid {
  display: none;
}
.gb-svc-action-header:hover .gb-svc-action-toggle:not([aria-expanded="true"]) .gb-svc-action-toggle-open.gb-svc-action-toggle-icon-regular {
  display: none;
}
.gb-svc-action-header:hover .gb-svc-action-toggle:not([aria-expanded="true"]) .gb-svc-action-toggle-open.gb-svc-action-toggle-icon-solid {
  display: inline-block;
}
.gb-svc-action-toggle[aria-expanded="true"] .gb-svc-action-toggle-close.gb-svc-action-toggle-icon-regular {
  display: none;
}
.gb-svc-action-card ul {
  list-style: disc;
  padding-left: 1.5rem;
  margin: 0.5rem 0 0;
  color: var(--color-midnight);
  font-size: 14px;
  line-height: 22px;
}
.gb-svc-action-card ul li + li {
  margin-top: 0.25rem;
}
.gb-svc-read-more {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  color: var(--color-neutral-700);
  font-size: 12px;
  line-height: 20px;
  text-decoration: none;
  cursor: pointer;
  margin-top: 0.5rem;
}
.gb-svc-read-more:hover {
  color: var(--color-midnight);
}

/* === QAM Equipment Brands — Marquee === */
.gb-marquee {
  overflow: hidden;
}
.gb-marquee-track {
  display: flex;
  width: max-content;
  align-items: center;
  gap: 3rem;
  animation: gb-marquee-scroll 30s linear infinite;
}
.gb-marquee-track > img {
  flex-shrink: 0;
}
.gb-marquee:hover .gb-marquee-track {
  animation-play-state: paused;
}
@keyframes gb-marquee-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .gb-marquee-track {
    animation: none;
  }
}

/* === Button Styles === */
/* Figma Button (26001:665) — Copperplate Label/Large, uppercase, 8px radius.
   Figma's default has no border and its hover adds a 2px one, which would shift
   layout by 4px. Carrying a transparent 2px border at rest and reducing padding
   by the same 2px reproduces BOTH states at an identical 42px box height:
   2 + 10 + 18 + 10 + 2 = 42, the same as Figma's borderless 12 + 18 + 12. */
.btn {
  padding: 10px 14px;
  border: 2px solid transparent;
  font-family: var(--font-overline);
  font-weight: var(--font-weight-label);
  border-radius: 8px;
  /* Figma spec is Copperplate 16/18, but that's Apple's system Copperplate. The
     Adobe kit serves URW Copperplate, whose glyphs render markedly larger/heavier
     at the same px. Compensate down to 13px + the tracked letter-spacing Apple's
     cut carries built-in, so the button label matches the comp's visual size. */
  font-size: 13px;
  line-height: 18px;
  letter-spacing: 0.5px;
  gap: 8px;
  margin-bottom: 1rem;
  transition: all var(--transition-standard);
  text-transform: uppercase;
}

.btn.btn-menu {
  padding: 0.5rem;
  font-size: 0.85rem;
}
.btn.btn-lg {
  padding: 0.75rem 1.5rem;
  font-size: 1rem;
}

/* AZURE BTN (primary) */
.btn-azure {
  color: var(--color-white);
  background: var(--color-azure);
  border-color: var(--color-azure);
}
.btn-azure:is(:hover, :active, :focus) {
  color: var(--color-white);
  background: var(--color-azure-hover);
  border-color: var(--color-azure-hover);
}
.btn-outline-azure {
  color: var(--color-azure);
  background: transparent;
  border-color: var(--color-azure);
}
.btn-outline-azure:is(:hover, :active, :focus) {
  color: var(--color-white);
  background: var(--color-azure-hover);
  border-color: var(--color-azure-hover);
}

/* SKY BTN — Figma Button "Design=Secondary".
   Hover inverts to a neutral fill with a navy border + navy label. */
.btn-sky {
  color: var(--color-white);
  background: var(--color-sky);
  border-color: var(--color-sky);
}
.btn-sky:is(:hover, :active, :focus) {
  color: var(--color-azure);
  background: var(--color-neutral-200);
  border-color: var(--color-azure);
}
.btn-outline-sky {
  color: var(--color-sky);
  background: transparent;
  border-color: var(--color-sky);
}
.btn-outline-sky:is(:hover, :active, :focus) {
  color: var(--color-midnight);
  background: var(--color-sky-hover);
  border-color: var(--color-sky-hover);
}

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

/* HEAT RED BTN (accent/CTA) — Figma Button "Design=Primary".
   Hover inverts to a neutral fill with a red border + red label. */
.btn-heat-red {
  color: var(--color-white);
  background: var(--color-heat-red);
  border-color: var(--color-heat-red);
}
.btn-heat-red:is(:hover, :active, :focus) {
  color: var(--color-heat-red);
  background: var(--color-neutral-200);
  border-color: var(--color-heat-red);
}
.btn-outline-heat-red {
  color: var(--color-heat-red);
  background: transparent;
  border-color: var(--color-heat-red);
}
.btn-outline-heat-red:is(:hover, :active, :focus) {
  color: var(--color-white);
  background: var(--color-heat-red-hover);
  border-color: var(--color-heat-red-hover);
}

/* TRANSLUCENT WHITE BTN */
.btn-white {
  color: var(--color-white);
  background: var(--color-white-opacity-15);
  border-color: var(--color-white);
}
.btn-white:is(:hover, :active, :focus) {
  color: var(--color-white-hover);
  background: var(--color-white-opacity-60);
  border-color: var(--color-white-hover);
}

/* NEUTRAL 50 BTN — light on dark backgrounds */
.btn-neutral-50 {
  color: var(--color-midnight);
  background: var(--color-neutral-50);
  border-color: var(--color-neutral-50);
}
.btn-neutral-50:is(:hover, :active, :focus) {
  color: var(--color-midnight);
  background: var(--color-neutral-50-hover);
  border-color: var(--color-neutral-50-hover);
}
.btn-outline-neutral-50 {
  color: var(--color-neutral-50);
  background: transparent;
  border-color: var(--color-neutral-50);
}
.btn-outline-neutral-50:is(:hover, :active, :focus) {
  color: var(--color-midnight);
  background: var(--color-neutral-50-hover);
  border-color: var(--color-neutral-50-hover);
}

/* NEUTRAL 500 BTN */
.btn-neutral-500 {
  color: var(--color-white);
  background: var(--color-neutral-500);
  border-color: var(--color-neutral-500);
}
.btn-neutral-500:is(:hover, :active, :focus) {
  color: var(--color-white);
  background: var(--color-neutral-500-hover);
  border-color: var(--color-neutral-500-hover);
}
.btn-outline-neutral-500 {
  color: var(--color-neutral-500);
  background: transparent;
  border-color: var(--color-neutral-500);
}
.btn-outline-neutral-500:is(:hover, :active, :focus) {
  color: var(--color-white);
  background: var(--color-neutral-500-hover);
  border-color: var(--color-neutral-500-hover);
}

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

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

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

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

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

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

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

.nzt-hover-effect-01 {
    box-shadow: 0 0 0 rgba(0,0,0,.15);
    transition: var(--transition-standard)
}

.nzt-hover-effect-01:is(:hover,:focus,:active) {
    box-shadow: 0 .25rem .5rem rgba(0,0,0,.15)
}

.nzt-hover-effect-02 {
    box-shadow: 0 .125rem .5rem rgba(0,0,0,.15);
    transition: var(--transition-standard)
}

.nzt-hover-effect-02:is(:hover,:focus,:active) {
    box-shadow: 0 .5rem 1rem rgba(0,0,0,.15)
}

/* === Color Utility Classes === */

/* AZURE */
.border-azure { border-color: var(--color-azure) !important; }
.text-azure { color: var(--color-azure) !important; }
.bg-azure { background-color: var(--color-azure) !important; }

/* SKY */
.border-sky { border-color: var(--color-sky) !important; }
.text-sky { color: var(--color-sky) !important; }
.bg-sky { background-color: var(--color-sky) !important; }

/* MIDNIGHT */
.border-midnight { border-color: var(--color-midnight) !important; }
.text-midnight { color: var(--color-midnight) !important; }
.bg-midnight { background-color: var(--color-midnight) !important; }

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

/* WHITE */
.border-white { border-color: var(--color-white) !important; }
.text-white { color: var(--color-white) !important; }
.bg-white { background-color: var(--color-white) !important; }

/* WHITE OPACITY 15 */
.border-white-opacity-15 { border-color: var(--color-white-opacity-15) !important; }
.text-white-opacity-15 { color: var(--color-white-opacity-15) !important; }
.bg-white-opacity-15 { background-color: var(--color-white-opacity-15) !important; }

/* WHITE OPACITY 60 */
.border-white-opacity-60 { border-color: var(--color-white-opacity-60) !important; }
.text-white-opacity-60 { color: var(--color-white-opacity-60) !important; }
.bg-white-opacity-60 { background-color: var(--color-white-opacity-60) !important; }

/* WHITE OPACITY 80 */
.border-white-opacity-80 { border-color: var(--color-white-opacity-80) !important; }
.text-white-opacity-80 { color: var(--color-white-opacity-80) !important; }
.bg-white-opacity-80 { background-color: var(--color-white-opacity-80) !important; }
.text-white-opacity-80:is(:hover, :active, :focus) { color: var(--color-white); transition: var(--transition-standard); }

/* NEUTRAL 600 (replaces gray-666) */
.border-666 { border-color: var(--color-neutral-600) !important; }
.text-666 { color: var(--color-neutral-600) !important; }
.bg-666 { background-color: var(--color-neutral-600) !important; }

/* BLACK */
.border-black { border-color: var(--color-black) !important; }
.text-black { color: var(--color-black) !important; }
.bg-black { background-color: var(--color-black) !important; }

/* NEUTRAL 50 */
.border-neutral-50 { border-color: var(--color-neutral-50) !important; }
.text-neutral-50 { color: var(--color-neutral-50) !important; }
.bg-neutral-50 { background-color: var(--color-neutral-50) !important; }

/* NEUTRAL 100 */
.border-neutral-100 { border-color: var(--color-neutral-100) !important; }
.text-neutral-100 { color: var(--color-neutral-100) !important; }
.bg-neutral-100 { background-color: var(--color-neutral-100) !important; }

/* NEUTRAL 200 */
.border-neutral-200 { border-color: var(--color-neutral-200) !important; }
.text-neutral-200 { color: var(--color-neutral-200) !important; }
.bg-neutral-200 { background-color: var(--color-neutral-200) !important; }

/* NEUTRAL 300 */
.border-neutral-300 { border-color: var(--color-neutral-300) !important; }
.text-neutral-300 { color: var(--color-neutral-300) !important; }
.bg-neutral-300 { background-color: var(--color-neutral-300) !important; }

/* NEUTRAL 400 */
.border-neutral-400 { border-color: var(--color-neutral-400) !important; }
.text-neutral-400 { color: var(--color-neutral-400) !important; }
.bg-neutral-400 { background-color: var(--color-neutral-400) !important; }

/* NEUTRAL 500 */
.border-neutral-500 { border-color: var(--color-neutral-500) !important; }
.text-neutral-500 { color: var(--color-neutral-500) !important; }
.bg-neutral-500 { background-color: var(--color-neutral-500) !important; }

/* NEUTRAL 600 */
.border-neutral-600 { border-color: var(--color-neutral-600) !important; }
.text-neutral-600 { color: var(--color-neutral-600) !important; }
.bg-neutral-600 { background-color: var(--color-neutral-600) !important; }

/* NEUTRAL 700 */
.border-neutral-700 { border-color: var(--color-neutral-700) !important; }
.text-neutral-700 { color: var(--color-neutral-700) !important; }
.bg-neutral-700 { background-color: var(--color-neutral-700) !important; }

/* DARK MODE 00DP */
.border-dm-00dp { border-color: var(--color-dm-00dp) !important; }
.text-dm-00dp { color: var(--color-dm-00dp) !important; }
.bg-dm-00dp { background-color: var(--color-dm-00dp) !important; }

/* DARK MODE 01DP */
.border-dm-01dp { border-color: var(--color-dm-01dp) !important; }
.text-dm-01dp { color: var(--color-dm-01dp) !important; }
.bg-dm-01dp { background-color: var(--color-dm-01dp) !important; }

/* DARK MODE 02DP */
.border-dm-02dp { border-color: var(--color-dm-02dp) !important; }
.text-dm-02dp { color: var(--color-dm-02dp) !important; }
.bg-dm-02dp { background-color: var(--color-dm-02dp) !important; }

/* DARK MODE 03DP */
.border-dm-03dp { border-color: var(--color-dm-03dp) !important; }
.text-dm-03dp { color: var(--color-dm-03dp) !important; }
.bg-dm-03dp { background-color: var(--color-dm-03dp) !important; }

/* DARK MODE 04DP */
.border-dm-04dp { border-color: var(--color-dm-04dp) !important; }
.text-dm-04dp { color: var(--color-dm-04dp) !important; }
.bg-dm-04dp { background-color: var(--color-dm-04dp) !important; }

/* DARK MODE 06DP */
.border-dm-06dp { border-color: var(--color-dm-06dp) !important; }
.text-dm-06dp { color: var(--color-dm-06dp) !important; }
.bg-dm-06dp { background-color: var(--color-dm-06dp) !important; }

/* DARK MODE 08DP */
.border-dm-08dp { border-color: var(--color-dm-08dp) !important; }
.text-dm-08dp { color: var(--color-dm-08dp) !important; }
.bg-dm-08dp { background-color: var(--color-dm-08dp) !important; }

/* DARK MODE 12DP */
.border-dm-12dp { border-color: var(--color-dm-12dp) !important; }
.text-dm-12dp { color: var(--color-dm-12dp) !important; }
.bg-dm-12dp { background-color: var(--color-dm-12dp) !important; }

/* DARK MODE 16DP */
.border-dm-16dp { border-color: var(--color-dm-16dp) !important; }
.text-dm-16dp { color: var(--color-dm-16dp) !important; }
.bg-dm-16dp { background-color: var(--color-dm-16dp) !important; }

/* DARK MODE 24DP */
.border-dm-24dp { border-color: var(--color-dm-24dp) !important; }
.text-dm-24dp { color: var(--color-dm-24dp) !important; }
.bg-dm-24dp { background-color: var(--color-dm-24dp) !important; }

/* GRADIENTS — Moment (Azure -> Midnight) */
.bg-gradient-moment     { background: var(--gradient-moment)     !important; }
.bg-gradient-moment-0   { background: var(--gradient-moment-0)   !important; }
.bg-gradient-moment-45  { background: var(--gradient-moment-45)  !important; }
.bg-gradient-moment-135 { background: var(--gradient-moment-135) !important; }
.bg-gradient-moment-180 { background: var(--gradient-moment-180) !important; }
.gradient-moment-icon {
  background: var(--gradient-moment);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* GRADIENTS — Sunset (Azure -> Heat Red) */
.bg-gradient-sunset     { background: var(--gradient-sunset)     !important; }
.bg-gradient-sunset-0   { background: var(--gradient-sunset-0)   !important; }
.bg-gradient-sunset-45  { background: var(--gradient-sunset-45)  !important; }
.bg-gradient-sunset-90  { background: var(--gradient-sunset-90)  !important; }
.bg-gradient-sunset-135 { background: var(--gradient-sunset-135) !important; }
.bg-gradient-sunset-180 { background: var(--gradient-sunset-180) !important; }
.gradient-sunset-icon {
  background: var(--gradient-sunset);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* Extra border width — Bootstrap's border-{1..5} caps at 5px */
.border-10 { border-width: 10px !important; }

/* Rebate-card logo cap (Amana / ENERGY STAR on the rebates page) */
.gb-logo-cap {
  max-height: 60px;
  width: auto;
}

/* Step-list circle badge (32x32, used on maintenance-plans How to Join list) */
.gb-step-badge {
  width: 32px;
  height: 32px;
}

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

ul.list-group,
ol.list-group,
.card,
.table-responsive,
table.table-bordered {
  border-radius: var(--border-radius-card);
  margin-bottom: 1.5rem;
}
.card.h-100 {
  margin-bottom: 0;
}
.card .card-body {
  padding: 1.5rem;
}
.bg-dm-00dp ul li strong, .accordion ul li strong {
  color: var(--color-sky);
}
.accordion-button .fa-solid {
  transition: transform 0.3s ease-in-out;
}
.accordion-button:not(.collapsed) .faq-icon {
  transform: rotate(45deg);
}

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

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

.accordion-button:not(.collapsed) {
  color: var(--color-azure);
  box-shadow: none;
  background: transparent;
}
.accordion-button::after {
  display: none !important;
}

/* (Removed dead TAP `.gb-faq` accordion overrides — the homepage FAQ now uses
   `.gb-faq-accordion` on a sky-blue section; the section itself is `.gb-faq`.) */

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

.icon-stacked::before {
    font-family: "Font Awesome 7 Pro";
    font-weight: 900;
    content: "\f111";
    font-size: 2em;
    position: absolute;
    line-height: 1
}

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

.icon-stacked {
    color: var(--color-sky)
}

.icon-stacked::before {
    color: var(--color-midnight)
}

.icon-stacked.light-base {
    color: var(--color-midnight)
}

.icon-stacked.light-base::before {
    color: var(--color-sky)
}

.icon-stacked.gradient-red {
    color: var(--color-white);
    box-shadow: 0 0 0 2px var(--color-dm-00dp)
}

.icon-stacked.gradient-moment::before {
    background: var(--gradient-moment);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent
}

.icon-stacked.xs {
    font-size: .5rem
}

.icon-stacked.sm {
    font-size: .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::before {
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .2))
}

.nzt-hover-effect-02:is(:hover,:focus,:active) .icon-stacked {
    box-shadow: 0 0 0 2px var(--color-sky);
    border-radius: 50%
}

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

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

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

.isolate {
    isolation: isolate
}

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

/* === Links: brand colors only — never Bootstrap default blue (client directive) ===
   Bootstrap 5.3 colors bare <a> via --bs-link-color-rgb; re-point it to brand azure so
   any un-classed content link is brand-colored, not #0d6efd blue. Buttons, nav, and the
   .link-* helpers set their own color and are unaffected. */
:root {
  --bs-link-color: var(--color-azure);
  --bs-link-color-rgb: 5, 49, 86;           /* #053156 azure (GB Navy) */
  --bs-link-hover-color: var(--color-heat-red);
  --bs-link-hover-color-rgb: 205, 17, 43;   /* #CD112B heat-red (GB Red) */
}
/* Inline prose links (inside a paragraph) get an underline for affordance.
   Scoped to <p> only so card/grid links that wrap a whole block (<a> inside <li>) stay un-underlined. */
p a:not([class]):not(.menu-container a) {
  text-decoration: underline;
  text-underline-offset: 2px;
}
/* On dark sections a brand-azure link is invisible — flip un-classed links to white.
   Exclude the nav (.menu-container a): the mega-dropdown sits inside a .bg-midnight wrapper
   but the panel itself is light, so these must NOT whiten/underline the dropdown category
   headers (class-less <a> in <p>, color inherited from the azure <p>). */
:is(.bg-midnight, .bg-azure, footer, .gb-footer) a:not([class]):not(.menu-container a) {
  color: var(--color-white);
}
:is(.bg-midnight, .bg-azure, footer, .gb-footer) a:not([class]):not(.menu-container a):is(:hover, :focus) {
  color: var(--color-heat-red);
}

/* === QAM Breadcrumb (sub-page) === */
.gb-breadcrumb {
  --bs-breadcrumb-divider: '\203A'; /* › chevron */
  margin-bottom: 0;
}
.gb-breadcrumb .breadcrumb-item + .breadcrumb-item::before {
  color: var(--color-white);
}
.gb-breadcrumb .breadcrumb-item.active {
  color: var(--color-sky);
}

/* Sub-page breadcrumb — sits at the top of the first content run (dark azure bg) */
.gb-crumb {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem;
  margin: 0; font-size: 12px; line-height: 1.2;
}
.gb-crumb a {
  display: inline-flex; align-items: center; gap: 0.4rem;
  color: #fff; font-weight: var(--font-weight-bold);
  text-decoration: none; transition: color var(--transition-standard);
}
.gb-crumb a:hover, .gb-crumb a:focus { color: var(--color-heat-red); }
.gb-crumb-sep { display: inline-flex; color: rgba(255, 255, 255, 0.4); font-size: 10px; }
.gb-crumb-current { color: rgba(255, 255, 255, 0.65); font-weight: var(--font-weight-bold); }
/* Light-background variant (e.g. privacy/terms body sections) */
.gb-crumb-light a { color: var(--color-azure); }
.gb-crumb-light a:hover, .gb-crumb-light a:focus { color: var(--color-heat-red); }
.gb-crumb-light .gb-crumb-sep { color: var(--color-neutral-400); }
.gb-crumb-light .gb-crumb-current { color: var(--color-neutral-700); }

/* === Service sub-page sections (AC Repair, etc.) === */

/* Why-choose feature cards (light) */
.gb-why-card {
  padding: 28px;
  background-color: var(--color-white);
  border-radius: var(--border-radius-card);
  box-shadow: var(--shadow-sm);
}
.gb-why-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background-color: var(--color-sky-subtle);
  color: var(--color-heat-red);
  font-size: 24px;
  line-height: 1;
  margin-bottom: 16px;
}
.gb-why-title {
  font-family: var(--font-heading);
  font-weight: var(--font-weight-heading);
  font-size: 18px;
  line-height: 24px;
  color: var(--color-azure);
  text-transform: uppercase;
  margin-bottom: 8px;
}

/* Warning-sign cards (light, heat-red accent) */
.gb-warn-card {
  padding: 28px;
  background-color: var(--color-white);
  border-radius: var(--border-radius-card);
  border-left: 4px solid var(--color-heat-red);
  box-shadow: var(--shadow-sm);
}
.gb-warn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background-color: var(--color-sky-subtle);
  color: var(--color-heat-red);
  font-size: 24px;
  line-height: 1;
  margin-bottom: 16px;
}
.gb-warn-title {
  font-family: var(--font-heading);
  font-weight: var(--font-weight-heading);
  font-size: 18px;
  line-height: 24px;
  color: var(--color-azure);
  text-transform: uppercase;
  margin-bottom: 8px;
}

/* Repair process steps (azure cards — sit on the light run background) */
.gb-step {
  display: flex;
  gap: 1rem;
  padding: 24px;
  background-color: var(--color-azure);
  border-radius: var(--border-radius-card);
}
.gb-step-num {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background-color: var(--color-heat-red);
  color: var(--color-white);
  font-family: var(--font-heading);
  font-weight: var(--font-weight-heading);
  font-size: 20px;
  line-height: 1;
}
.gb-step-title {
  font-family: var(--font-heading);
  font-weight: var(--font-weight-heading);
  font-size: 18px;
  line-height: 24px;
  color: var(--color-white);
  text-transform: uppercase;
  margin-bottom: 8px;
}
.gb-step-desc {
  font-size: 14px;
  line-height: 22px;
  color: var(--color-white-opacity-80);
}

/* Common-repair cards (light, CTA link) */
.gb-repair-card {
  display: flex;
  flex-direction: column;
  padding: 28px;
  background-color: var(--color-azure);
  border: 1px solid transparent;
  border-radius: var(--border-radius-card);
  box-shadow: var(--shadow-sm);
}
.gb-repair-title {
  font-family: var(--font-heading);
  font-weight: var(--font-weight-heading);
  font-size: 18px;
  line-height: 24px;
  color: var(--color-white);
  text-transform: uppercase;
  margin-bottom: 12px;
}
.gb-repair-desc { margin-bottom: 16px; color: rgba(255, 255, 255, 0.85); }
.gb-repair-link {
  margin-top: auto;
  font-family: var(--font-heading);
  font-weight: var(--font-weight-heading);
  font-size: 14px;
  text-transform: uppercase;
  color: var(--color-heat-red);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: gap var(--transition-standard), color var(--transition-standard);
}
.gb-repair-link:hover { color: var(--color-heat-red-hover); gap: 12px; }

/* Other-services link cards (light) */
.gb-other-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 24px;
  background-color: var(--color-neutral-50);
  border-radius: var(--border-radius-card);
  text-decoration: none;
  transition: background-color var(--transition-standard), transform var(--transition-standard);
}
.gb-other-card:hover {
  background-color: var(--color-sky-subtle);
  transform: translateY(-4px);
}
.gb-other-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background-color: var(--color-sky-subtle);
  color: var(--color-heat-red);
  font-size: 22px;
  line-height: 1;
}
.gb-other-title {
  font-family: var(--font-heading);
  font-weight: var(--font-weight-heading);
  font-size: 18px;
  line-height: 24px;
  color: var(--color-azure);
  text-transform: uppercase;
}
.gb-other-desc { font-size: 14px; line-height: 22px; color: var(--color-neutral-700); }

/* Final CTA band */
.gb-cta-final {
  padding-block: 4rem;
  background: var(--gradient-moment-135);
  border-bottom: 6px solid var(--color-heat-red);
}

/* Icon checklist (Why-Trust) — white text on the dark run */
.gb-checklist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1.25rem; }
.gb-checklist > li { display: flex; gap: 1rem; align-items: flex-start; }
.gb-checklist > li > i {
  flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 50%;
  background-color: var(--color-heat-red); color: var(--color-white);
  font-size: 18px; line-height: 1;
}
.gb-checklist p { color: var(--color-white-opacity-80); }
.gb-checklist strong { color: var(--color-white); }

/* Numbered process list (Process) — white text on the dark run */
.gb-steps-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1.5rem; }
.gb-steps-list > li { display: flex; gap: 1.25rem; align-items: flex-start; }
.gb-steps-list-title {
  font-family: var(--font-heading); font-weight: var(--font-weight-heading);
  font-size: 18px; line-height: 24px; color: var(--color-azure);
  text-transform: uppercase; margin-bottom: 6px;
}
.gb-steps-list-desc { font-size: 14px; line-height: 22px; color: var(--color-neutral-700); }

/* Related-services link list (Other Services) — on the light run */
.gb-link-list { list-style: none; margin: 0; padding: 0; }
.gb-link-list > li { border-top: 1px solid var(--color-neutral-200); }
.gb-link-list > li:first-child { border-top: 0; }
.gb-link-list a {
  display: flex; align-items: center; gap: 1rem; padding: 1rem 0;
  text-decoration: none; transition: padding-left var(--transition-standard);
}
.gb-link-list a:hover { padding-left: 0.5rem; }
.gb-link-list-icon {
  flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 50%;
  background-color: var(--color-sky-subtle); color: var(--color-heat-red);
  font-size: 18px; line-height: 1;
  transition: background-color var(--transition-standard), color var(--transition-standard);
}
.gb-link-list a:hover .gb-link-list-icon { background-color: var(--color-heat-red); color: var(--color-white); }
.gb-link-list-text { flex: 1 1 auto; min-width: 0; }
.gb-link-list-text strong {
  display: block; font-family: var(--font-heading); font-weight: var(--font-weight-heading);
  font-size: 16px; line-height: 22px; color: var(--color-azure); text-transform: uppercase;
}
.gb-link-list-desc { display: block; font-size: 14px; line-height: 20px; color: var(--color-neutral-700); }
.gb-link-list-arrow { color: var(--color-heat-red); flex-shrink: 0; transition: transform var(--transition-standard); }
.gb-link-list a:hover .gb-link-list-arrow { transform: translateX(4px); }
@media (prefers-reduced-motion: reduce) {
  .gb-link-list a, .gb-link-list-icon, .gb-link-list-arrow { transition: none; }
  .gb-link-list a:hover { padding-left: 0; }
  .gb-link-list a:hover .gb-link-list-arrow { transform: none; }
}
@media (max-width: 575px) {
}
@media (min-width: 1600px) {
}
@media (max-width: 575px) {
}
@media (min-width: 1600px) {
}
@media (max-width: 575px) {
}
@media (min-width: 1600px) {
}
@media (max-width: 575px) {
}
@media (min-width: 1600px) {
}
@media (max-width: 575px) {
}
@media (min-width: 1600px) {
}
@media (max-width: 575px) {
}
@media (min-width: 1600px) {
}

/* Sticky sidebar — the 1/3 column on the 2/3 + 1/3 service-page runs.
   Sticky on lg+, static (stacks) below lg. */
.gb-aside { position: sticky; top: 10rem; } /* clears the fixed nav (~148px) + small gap */
@media (max-width: 991.98px) {
  .gb-aside { position: static; }
}
.gb-aside-card {
  background-color: var(--color-sky);
  border-radius: var(--border-radius-card);
  padding: 24px;
}
/* Technician graphic + speech-bubble callout at the bottom of Run 1 (xl+).
   In-flow side-by-side (col-auto img + col callout) so they stay together at any width. */
.gb-tech-img {
  display: block;
  width: clamp(320px, 30vw, 460px);
  height: auto;
}
/* Tech column sits on the section's bottom edge (bleeds through the py-5 bottom padding) */
.gb-tech-col {
  align-self: flex-end;
  margin-bottom: -3rem;
}
.gb-tech-callout {
  position: relative;
  max-width: 460px;
  background: var(--color-white);
  border-radius: var(--border-radius-card);
  box-shadow: var(--shadow-md);
  padding: 28px;
}
.gb-tech-callout::before {
  content: '';
  position: absolute;
  left: -15px;
  top: 50%;
  transform: translateY(-50%);
  border-style: solid;
  border-width: 14px 15px 14px 0;
  border-color: transparent var(--color-white) transparent transparent;
}

/* Small technician mascot peeking from the bottom-right of the call-now card (xl+) */
.gb-aside-card.gb-has-mascot { position: relative; overflow: hidden; }
.gb-aside-mascot {
  position: absolute;
  right: -6px;
  bottom: -4px;
  width: 116px;
  height: auto;
  pointer-events: none;
  z-index: 0;
}
@media (min-width: 1200px) {
  .gb-aside-card.gb-has-mascot { padding-bottom: 104px; }
}
.gb-aside-icon {
  color: var(--color-heat-red);
  font-size: 36px;
  line-height: 1;
  margin-bottom: 12px;
}
.gb-aside-list { list-style: none; margin: 0; padding: 0; }
.gb-aside-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-top: 1px solid var(--color-white-opacity-15);
  color: var(--color-white);
  font-size: 14px;
  line-height: 20px;
}
.gb-aside-list li i {
  color: var(--color-heat-red);
  width: 20px;
  text-align: center;
  flex-shrink: 0;
}
.gb-aside-list a { color: var(--color-white); text-decoration: none; }
.gb-aside-list a:hover { text-decoration: underline; }

/* Secondary sidebar widgets (hours / rating / discount) — light cards for variety */
.gb-aside-mini {
  background-color: var(--color-white);
  border: 1px solid var(--color-neutral-200);
  border-radius: var(--border-radius-card);
  padding: 20px;
  margin-top: 1.5rem;
  box-shadow: var(--shadow-sm);
}
.gb-aside-hours > div {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 6px 0;
  border-top: 1px solid var(--color-neutral-200);
  font-size: 14px;
}
.gb-aside-hours > div:first-child { border-top: 0; }
.gb-aside-hours strong { color: var(--color-azure); }
.gb-aside-stars { color: var(--color-heat-red); letter-spacing: 2px; }
.gb-aside-pct {
  font-family: var(--font-heading);
  font-weight: var(--font-weight-heading);
  font-size: 48px;
  line-height: 1;
  color: var(--color-heat-red);
}

/* === Card rollover / hover effects (service sub-page cards) === */
.gb-why-card,
.gb-warn-card,
.gb-repair-card,
.gb-step {
  transition: transform var(--transition-standard), box-shadow var(--transition-standard);
}
.gb-why-card:hover,
.gb-warn-card:hover,
.gb-repair-card:hover,
.gb-step:hover {
  transform: translateY(-5px);
  box-shadow: 0 0.75rem 1.5rem rgba(9, 35, 69, 0.22);
}
/* Icon badge fills heat-red (icon turns white) on hover */
.gb-why-icon,
.gb-warn-icon,
.gb-other-icon {
  transition: background-color var(--transition-standard), color var(--transition-standard), transform var(--transition-standard);
}
.gb-why-card:hover .gb-why-icon,
.gb-warn-card:hover .gb-warn-icon,
.gb-other-card:hover .gb-other-icon {
  background-color: var(--color-heat-red);
  color: var(--color-white);
  transform: scale(1.08);
}
/* Repair cards (blue): bg lightens + heat-red accent bar draws across the top */
.gb-repair-card { position: relative; overflow: hidden; transition: transform var(--transition-standard), box-shadow var(--transition-standard), background-color var(--transition-standard); }
.gb-repair-card::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  background-color: var(--color-heat-red);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--transition-standard);
}
.gb-repair-card:hover { background-color: var(--color-azure-hover); }
.gb-repair-card:hover::before { transform: scaleX(1); }
.gb-repair-card:hover .gb-repair-link { gap: 12px; }
@media (prefers-reduced-motion: reduce) {
  .gb-why-card, .gb-warn-card, .gb-repair-card, .gb-step,
  .gb-why-icon, .gb-warn-icon, .gb-other-icon, .gb-repair-title, .gb-repair-card::before { transition: none; }
  .gb-why-card:hover, .gb-warn-card:hover, .gb-repair-card:hover, .gb-step:hover { transform: none; }
  .gb-why-card:hover .gb-why-icon, .gb-warn-card:hover .gb-warn-icon, .gb-other-card:hover .gb-other-icon { transform: none; }
  .gb-repair-card:hover::before { transform: scaleX(1); }
}