/* === Red Barn Media Group - J&G Heating & Air Conditioning === */

/* === CSS Custom Properties === */
:root {
  /* Brand Colors */
  --color-brand-deep-blue: #292D78;
  --color-brand-deep-blue-hover: #212460;
  --color-brand-cobalt: #0067A5;
  --color-brand-cobalt-hover: #005284;
  --color-brand-cloud-blue: #7FB3D3;
  --color-brand-cloud-blue-hover: #668FA9;
  --color-brand-maroon: #B33239;
  --color-brand-maroon-hover: #8F282E;
  --color-brand-midnight: #0C0F40;
  --color-brand-midnight-hover: #0A0C33;

  /* Generic */
  --color-white: #ffffff;
  --color-white-hover: #f0f0f0;
  --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-gray-666: #666;
  --color-black: #000000;
  --color-black-hover: #1a1a1a;

  /* Neutrals */
  --color-neutral-50: #eef0f5;
  --color-neutral-50-hover: #d6d8dc;
  --color-neutral-100: #e5e7ea;
  --color-neutral-100-hover: #ced0d3;
  --color-neutral-200: #dddee1;
  --color-neutral-200-hover: #c7c8ca;
  --color-neutral-300: #ccced6;
  --color-neutral-300-hover: #b8b9c1;
  --color-neutral-400: #c1c3cb;
  --color-neutral-400-hover: #aeb0b7;
  --color-neutral-500: #a9abb4;
  --color-neutral-500-hover: #989aa2;
  --color-neutral-600: #8d919a;
  --color-neutral-600-hover: #7f838b;
  --color-neutral-700: #656870;
  --color-neutral-700-hover: #5b5e65;

  /* 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 */
  --gradient-abyss-0: linear-gradient(
    0deg,
    var(--color-brand-midnight),
    var(--color-dm-00dp)
  );
  --gradient-abyss-45: linear-gradient(
    45deg,
    var(--color-brand-midnight),
    var(--color-dm-00dp)
  );
  --gradient-abyss-90: linear-gradient(
    90deg,
    var(--color-brand-midnight),
    var(--color-dm-00dp)
  );
  --gradient-abyss-180: linear-gradient(
    180deg,
    var(--color-brand-midnight),
    var(--color-dm-00dp)
  );
  --gradient-summer-night-0: linear-gradient(
    0deg,
    var(--color-brand-cloud-blue),
    var(--color-brand-maroon)
  );
  --gradient-summer-night-45: linear-gradient(
    45deg,
    var(--color-brand-cloud-blue),
    var(--color-brand-maroon)
  );
  --gradient-summer-night-90: linear-gradient(
    90deg,
    var(--color-brand-cloud-blue),
    var(--color-brand-maroon)
  );
  --gradient-summer-night-180: linear-gradient(
    180deg,
    var(--color-brand-cloud-blue),
    var(--color-brand-maroon)
  );
  --gradient-blues-0: linear-gradient(
    0deg,
    var(--color-brand-cloud-blue),
    var(--color-brand-deep-blue)
  );
  --gradient-blues-45: linear-gradient(
    45deg,
    var(--color-brand-cloud-blue),
    var(--color-brand-deep-blue)
  );
  --gradient-blues-90: linear-gradient(
    90deg,
    var(--color-brand-cloud-blue),
    var(--color-brand-deep-blue)
  );
  --gradient-blues-180: linear-gradient(
    180deg,
    var(--color-brand-cloud-blue),
    var(--color-brand-deep-blue)
  );

  /* Typography — Font Families */
  --font-heading: 'Roboto Condensed', sans-serif;
  --font-body: 'Inter', sans-serif;
  --font-label: 'Barlow Semi Condensed', sans-serif;

  /* Typography — Weights */
  --font-weight-bold: 700;
  --font-weight-semibold: 600;
  --font-weight-medium: 500;
  --font-weight-regular: 400;

  /* Typography — Type Scale (per Figma) */
  --fs-display-lg: 4rem;       /* 64px */
  --lh-display-lg: 1.125;      /* 72px */
  --fs-display-sm: 3.5rem;     /* 56px */
  --lh-display-sm: 1.143;      /* 64px */
  --fs-h1: 3rem;               /* 48px */
  --lh-h1: 1.167;              /* 56px */
  --fs-h2: 2.5rem;             /* 40px */
  --lh-h2: 1.2;                /* 48px */
  --fs-h3: 2rem;               /* 32px */
  --lh-h3: 1.25;               /* 40px */
  --fs-h4: 1.5rem;             /* 24px */
  --lh-h4: 1.333;              /* 32px */
  --fs-h5: 1.25rem;            /* 20px */
  --lh-h5: 1.4;                /* 28px */
  --fs-p-lg: 1.125rem;         /* 18px */
  --lh-p-lg: 1.444;            /* 26px */
  --fs-p-md: 1rem;             /* 16px */
  --lh-p-md: 1.5;              /* 24px */
  --fs-p-sm: 0.875rem;         /* 14px */
  --lh-p-sm: 1.571;            /* 22px */
  --fs-p-xs: 0.75rem;          /* 12px */
  --lh-p-xs: 1.667;            /* 20px */
  --fs-label-lg: 1rem;         /* 16px */
  --lh-label-lg: 1.125;        /* 18px */
  --fs-label-md: 0.875rem;     /* 14px */
  --lh-label-md: 1.143;        /* 16px */
  --fs-label-sm: 0.75rem;      /* 12px */
  --lh-label-sm: 1.167;        /* 14px */
  --fs-overline-lg: 0.875rem;  /* 14px */
  --lh-overline-lg: 1.429;     /* 20px */
  --fs-overline-sm: 0.75rem;   /* 12px */
  --lh-overline-sm: 1.667;     /* 20px */

  /* Layout */
  --hero-height: 750px;
  --hero-padding: 3rem;
  --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;
  --font-size-xs: 0.75rem;
}

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

body {
  color: var(--color-dm-00dp);
  font-family: var(--font-body);
  font-weight: var(--font-weight-regular);
  font-size: var(--fs-p-md);
  line-height: var(--lh-p-md);
  background-color: var(--color-brand-midnight);
}

/* === Typography === */
h1,
.h1,
h2,
.h2,
h3,
.h3,
h4,
.h4,
h5,
.h5,
h6,
.h6 {
  font-family: var(--font-heading);
  color: var(--color-dm-00dp);
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  letter-spacing: 0;
  margin-bottom: 0.5rem;
}

h1, .h1 { font-size: var(--fs-h1);  line-height: var(--lh-h1); }
h2, .h2 { font-size: var(--fs-h2);  line-height: var(--lh-h2); }
h3, .h3 { font-size: var(--fs-h3);  line-height: var(--lh-h3); font-weight: var(--font-weight-bold); }
h4, .h4 { font-size: var(--fs-h4);  line-height: var(--lh-h4); font-weight: var(--font-weight-bold); }
h5, .h5 { font-size: var(--fs-h5);  line-height: var(--lh-h5); font-weight: var(--font-weight-bold); }
h6, .h6 { font-size: var(--fs-h5);  line-height: var(--lh-h5); font-weight: var(--font-weight-semibold); }

/* Lighter-weight heading variants (per Figma alt styles) */
h1.regular, .h1.regular,
h2.regular, .h2.regular { font-weight: var(--font-weight-regular); }
h3.regular, .h3.regular,
h4.regular, .h4.regular,
h5.regular, .h5.regular { font-weight: var(--font-weight-semibold); }

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

/* Default body copy sizing */
p,
ul li,
ol li,
table {
  font-size: var(--fs-p-md);
  line-height: var(--lh-p-md);
  font-weight: var(--font-weight-regular);
}

/* Bootstrap-style extended size utilities */
.fs-7 {
  font-size: var(--fs-p-sm);
  line-height: var(--lh-p-sm);
}
.fs-8 {
  font-size: var(--fs-p-xs);
  line-height: var(--lh-p-xs);
}

/* === Menu Styles === */
.menu-container {
  background: transparent;
  margin-top: 0 !important;
  padding-left: 1%;
  padding-right: 1%;
}
.menu-container.shrink-menu {
  margin-top: 0 !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
}
.navbar-nav {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 4.5rem;
  transition: height var(--transition-standard);
}

.shrink-menu .navbar-nav {
  height: 3.5rem;
}

/* Navigation Links */
.menu-container .navbar-nav .nav-link {
  color: var(--color-brand-midnight);
  font-family: var(--font-heading);
  font-weight: var(--font-weight-bold);
  font-size: 0.9rem;
  text-transform: uppercase;
}
.menu-container.shrink-menu .navbar-nav .nav-link {
  font-size: 0.85rem;
}

.dropdown-toggle:not(.has-dropdown)::after {
  /* Removes the border-based triangle and prevents empty-space artifacts */
  border: 0 !important;
  margin: 0 !important;
}

.has-dropdown {
  align-items: center;
  gap: 0.25em;
}

.has-dropdown::after {
  content: '\f0d7';
  color: var(--color-brand-deep-blue);
  font: var(--fa-font-solid);
  border: 0;
  margin-left: 0;
  font-size: inherit;
  vertical-align: middle;
}

.menu-container .navbar-nav .nav-link:is(:hover, :active) {
  color: var(--color-brand-midnight-hover);
}

/* Dropdown Styles */
.nav-item .dropdown-item {
  color: var(--color-brand-midnight);
  font-family: var(--font-heading);
  font-weight: var(--font-weight-medium);
  font-size: 1rem;
}

.nav-item .dropdown-item:is(:hover, :active) {
  background-color: var(--color-neutral-100);
  border-radius: var(--border-radius-standard);
  color: var(--color-brand-midnight) !important;
}

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

.jgha-mega-dropdown-row {
  background-color: var(--color-white);
  border-radius: var(--border-radius-standard);
  transition-duration: var(--transition-standard);
}
.jgha-mega-dropdown-row:is(:hover, :focus, :active) {
  background-color: var(--color-neutral-50);
}

.navbar-expand-xl .navbar-nav .dropdown-menu.mega-dropdown {
  top: 4rem;
  padding: 0.5rem;
  border-radius: var(--border-radius-standard);
  transition: top var(--transition-standard);
  width: 100%;
}

.jgha-mega-dropdown-group p {
  font-family: var(--font-heading);
  font-size: 0.9rem;
  color: var(--color-brand-midnight);
  transition-duration: var(--transition-standard);
  font-weight: var(--font-weight-medium);
  margin-bottom: 0rem;
}
.jgha-mega-dropdown-group:is(:hover, :focus, :active) p {
  color: var(--color-brand-deep-blue);
}

/* Logo Styles */
.jgha-logo-desktop {
  display: block;
  height: 86px;
  width: auto;
  transition: height var(--transition-standard);
}

.shrink-menu .jgha-logo-desktop {
  height: 64px;
}

/* === J&G Two-Tier Nav (Sub-nav + Main nav) === */

/* Sub-nav (top maroon bar) */
.jgha-subnav {
  background: rgba(179, 50, 57, 0.8);
  padding: 1rem 5rem;
  transition: background var(--transition-standard);
}
.jgha-subnav-link {
  font-family: var(--font-label);
  font-weight: var(--font-weight-bold);
  font-size: var(--fs-label-md);
  line-height: var(--lh-label-md);
  color: var(--color-white);
  text-transform: uppercase;
  text-decoration: none;
  letter-spacing: 0;
}
.jgha-subnav-link:is(:hover, :focus, :active) {
  color: var(--color-white);
  text-decoration: underline;
}
.menu-container.shrink-menu .jgha-subnav {
  background: var(--color-brand-maroon);
}

/* Main nav (deep blue, maroon bottom border, rounded bottom) */
.jgha-mainnav {
  background: rgba(41, 45, 120, 0.8);
  border-bottom: 4px solid var(--color-brand-maroon);
  border-bottom-left-radius: var(--border-radius-large);
  border-bottom-right-radius: var(--border-radius-large);
  padding: 0.5rem 3rem;
  transition: background var(--transition-standard);
}
.menu-container.shrink-menu .jgha-mainnav {
  background: var(--color-brand-deep-blue);
}

/* Main nav layout — 3-column grid keeps logo viewport-centered regardless of
   side-content width. Side groups flex within their own columns. */
@media (min-width: 1200px) {
  .jgha-mainnav .navbar-nav.jgha-nav {
    height: auto;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 1rem;
  }
  .shrink-menu .jgha-mainnav .navbar-nav.jgha-nav {
    height: auto;
  }
  .jgha-nav-group .jgha-nav-subgroup {
    display: flex;
    align-items: center;
    gap: 1rem;
    width: 100%;
  }
  .jgha-nav-group-start .jgha-nav-subgroup { justify-content: flex-start; }
  .jgha-nav-group-end .jgha-nav-subgroup { justify-content: flex-end; }
}

/* Below xl, flatten the grouping wrappers so dropdowns stack normally in the
   offcanvas — children become direct flex children of the outer nav-list. */
@media (max-width: 1199.98px) {
  .jgha-nav-group,
  .jgha-nav-subgroup {
    display: contents;
  }
}

/* Mobile navbar: absolutely center the brand logo between the hamburger
   (left) and the phone CTA (right), regardless of either icon's width. */
@media (max-width: 1199.98px) {
  .jgha-mainnav .container-fluid { position: relative; }
  .jgha-mainnav .navbar-brand.d-xl-none {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    margin: 0 !important;
  }
  .jgha-mainnav .container-fluid > a.btn.btn-maroon.d-xl-none {
    margin-left: auto;
  }
}

/* Main nav links (white on deep blue) */
.jgha-mainnav .navbar-nav .nav-link {
  color: var(--color-white);
  font-family: var(--font-label);
  font-weight: var(--font-weight-bold);
  font-size: var(--fs-label-lg);
  line-height: var(--lh-label-lg);
  text-transform: uppercase;
  letter-spacing: 0;
}
.jgha-mainnav .navbar-nav .nav-link:is(:hover, :focus, :active) {
  color: var(--color-white-hover);
}

/* Suppress the auto-injected pseudo-arrow inside the main nav (we use explicit FA icons) */
.jgha-mainnav .has-dropdown::after {
  display: none;
}

/* Mobile offcanvas (deep blue panel, white text) */
.jgha-offcanvas {
  background: var(--color-brand-deep-blue);
  color: var(--color-white);
}
.jgha-offcanvas .navbar-nav .nav-link {
  color: var(--color-white);
  font-family: var(--font-label);
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
}
/* In-dropdown link colour — replaces obsidian-purple in the J&G theme */
a.link-cobalt {
  color: var(--color-brand-cobalt);
  text-decoration: none;
  transition: color var(--transition-standard);
}
a.link-cobalt:is(:hover, :focus, :active) {
  color: var(--color-brand-cobalt-hover);
}

/* Inline-copy link variants — underlined for in-paragraph use; pick by parent bg */
a.link-cloud-blue {
  color: var(--color-brand-cloud-blue);
  text-decoration: underline;
  text-underline-offset: 0.15em;
  transition: color var(--transition-standard);
}
a.link-cloud-blue:is(:hover, :focus, :active) {
  color: var(--color-brand-cloud-blue-hover);
}

a.link-maroon {
  color: var(--color-brand-maroon);
  text-decoration: underline;
  text-underline-offset: 0.15em;
  transition: color var(--transition-standard);
}
a.link-maroon:is(:hover, :focus, :active) {
  color: var(--color-brand-maroon-hover);
}

/* === Brand Buttons (J&G) === */
.btn-cobalt {
  background-color: var(--color-brand-cobalt);
  border-color: var(--color-brand-cobalt);
  color: var(--color-white);
  font-family: var(--font-label);
  font-weight: var(--font-weight-bold);
  font-size: var(--fs-label-lg);
  line-height: var(--lh-label-lg);
  text-transform: uppercase;
  letter-spacing: 0;
  padding: 0.75rem 1rem;
  transition: background-color var(--transition-standard), border-color var(--transition-standard);
}
.btn-cobalt:is(:hover, :focus, :active) {
  background-color: var(--color-brand-cobalt-hover);
  border-color: var(--color-brand-cobalt-hover);
  color: var(--color-white);
}

.btn-maroon {
  background-color: var(--color-brand-maroon);
  border-color: var(--color-brand-maroon);
  color: var(--color-white);
  font-family: var(--font-label);
  font-weight: var(--font-weight-bold);
  font-size: var(--fs-label-lg);
  line-height: var(--lh-label-lg);
  text-transform: uppercase;
  letter-spacing: 0;
  padding: 0.75rem 1rem;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  transition: background-color var(--transition-standard), border-color var(--transition-standard);
}
.btn-maroon:is(:hover, :focus, :active) {
  background-color: var(--color-brand-maroon-hover);
  border-color: var(--color-brand-maroon-hover);
  color: var(--color-white);
}

.btn-outline-neutral {
  background: transparent;
  border: 1px solid var(--color-neutral-50);
  color: var(--color-neutral-50);
  font-family: var(--font-label);
  font-weight: var(--font-weight-bold);
  font-size: var(--fs-label-lg);
  line-height: var(--lh-label-lg);
  text-transform: uppercase;
  letter-spacing: 0;
  padding: 0.75rem 1rem;
  transition: background-color var(--transition-standard), color var(--transition-standard);
}
.btn-outline-neutral:is(:hover, :focus, :active) {
  background-color: var(--color-neutral-50);
  border-color: var(--color-neutral-50);
  color: var(--color-brand-deep-blue);
}

.btn-deep-blue {
  background-color: var(--color-brand-deep-blue);
  border-color: var(--color-brand-deep-blue);
  color: var(--color-white);
  font-family: var(--font-label);
  font-weight: var(--font-weight-bold);
  font-size: var(--fs-label-lg);
  line-height: var(--lh-label-lg);
  text-transform: uppercase;
  letter-spacing: 0;
  padding: 0.75rem 1rem;
  transition: background-color var(--transition-standard), border-color var(--transition-standard);
}
.btn-deep-blue:is(:hover, :focus, :active) {
  background-color: var(--color-brand-deep-blue-hover);
  border-color: var(--color-brand-deep-blue-hover);
  color: var(--color-white);
}

/* === Home Hero Styles === */
.jgha-hero-intro {
  color: var(--color-neutral-50);
  width: 100%;
  position: relative;
  overflow: hidden;
  padding-top: 16rem;
  padding-bottom: 3rem;
  min-height: 32rem;
  background: var(--gradient-abyss-0);
}
.jgha-hero-star {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: auto;
  z-index: 0;
  pointer-events: none;
}

/* Right-side hero image with gradient fade into dark background.
   Source image is set via .jgha-hero-image--<slug> modifier classes below.
   Base class handles positioning + the left-edge soft-fade mask. */
.jgha-hero-image {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 60%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  -webkit-mask-image: linear-gradient(
    90deg,
    transparent 0%,
    rgba(0, 0, 0, 0.15) 18%,
    rgba(0, 0, 0, 0.55) 32%,
    rgba(0, 0, 0, 0.9) 45%,
    #000 55%,
    #000 100%
  );
          mask-image: linear-gradient(
    90deg,
    transparent 0%,
    rgba(0, 0, 0, 0.15) 18%,
    rgba(0, 0, 0, 0.55) 32%,
    rgba(0, 0, 0, 0.9) 45%,
    #000 55%,
    #000 100%
  );
}
@media (max-width: 1199px) {
  /* On smaller screens, image goes full width and text overlays it; drop the
     edge-fade mask and add a dark scrim so the text stays readable. */
  .jgha-hero-image {
    width: 100%;
    -webkit-mask-image: none;
            mask-image: none;
  }
  .jgha-hero-image::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
      90deg,
      rgba(8, 14, 44, 0.85) 0%,
      rgba(8, 14, 44, 0.7) 50%,
      rgba(8, 14, 44, 0.55) 100%
    );
    z-index: 1;
    pointer-events: none;
  }
}

/* Per-page hero image source — pick one modifier per page.
   Stock variants: 800/1200/1600 widths. Client variants: 600/900/1320 widths. */
.jgha-hero-image--home            { background-image: url("/img/jgha-hero-home-LG-800.webp"); }
.jgha-hero-image--ac              { background-image: url("/img/jgha-hero-ac-LG-800.webp"); }
.jgha-hero-image--mini-split      { background-image: url("/img/jgha-hero-mini-split-LG-800.webp"); }
.jgha-hero-image--tank            { background-image: url("/img/jgha-hero-tank-LG-800.webp"); }
.jgha-hero-image--tankless        { background-image: url("/img/jgha-hero-tankless-LG-800.webp"); }
.jgha-hero-image--geothermal      { background-image: url("/img/jgha-hero-geothermal-LG-800.webp"); }
.jgha-hero-image--generator       { background-image: url("/img/jgha-hero-generator-LG-800.webp"); }
.jgha-hero-image--commercial      { background-image: url("/img/jgha-hero-commercial-LG-800.webp"); }
.jgha-hero-image--iaq             { background-image: url("/img/jgha-hero-iaq-LG-800.webp"); }
.jgha-hero-image--furnace-client  { background-image: url("/img/jgha-hero-furnace-client-LG-600.webp"); }
.jgha-hero-image--boiler-client   { background-image: url("/img/jgha-hero-boiler-client-LG-600.webp"); }
.jgha-hero-image--tank-client     { background-image: url("/img/jgha-hero-tank-client-LG-600.webp"); }

@media (min-width: 1200px) {
  .jgha-hero-image--home            { background-image: url("/img/jgha-hero-home-XL-1200.webp"); }
  .jgha-hero-image--ac              { background-image: url("/img/jgha-hero-ac-XL-1200.webp"); }
  .jgha-hero-image--mini-split      { background-image: url("/img/jgha-hero-mini-split-XL-1200.webp"); }
  .jgha-hero-image--tank            { background-image: url("/img/jgha-hero-tank-XL-1200.webp"); }
  .jgha-hero-image--tankless        { background-image: url("/img/jgha-hero-tankless-XL-1200.webp"); }
  .jgha-hero-image--geothermal      { background-image: url("/img/jgha-hero-geothermal-XL-1200.webp"); }
  .jgha-hero-image--generator       { background-image: url("/img/jgha-hero-generator-XL-1200.webp"); }
  .jgha-hero-image--commercial      { background-image: url("/img/jgha-hero-commercial-XL-1200.webp"); }
  .jgha-hero-image--iaq             { background-image: url("/img/jgha-hero-iaq-XL-1200.webp"); }
  .jgha-hero-image--furnace-client  { background-image: url("/img/jgha-hero-furnace-client-XL-900.webp"); }
  .jgha-hero-image--boiler-client   { background-image: url("/img/jgha-hero-boiler-client-XL-900.webp"); }
  .jgha-hero-image--tank-client     { background-image: url("/img/jgha-hero-tank-client-XL-900.webp"); }
}
@media (min-width: 1400px) {
  .jgha-hero-image--home            { background-image: url("/img/jgha-hero-home-XXL-1600.webp"); }
  .jgha-hero-image--ac              { background-image: url("/img/jgha-hero-ac-XXL-1600.webp"); }
  .jgha-hero-image--mini-split      { background-image: url("/img/jgha-hero-mini-split-XXL-1600.webp"); }
  .jgha-hero-image--tank            { background-image: url("/img/jgha-hero-tank-XXL-1600.webp"); }
  .jgha-hero-image--tankless        { background-image: url("/img/jgha-hero-tankless-XXL-1600.webp"); }
  .jgha-hero-image--geothermal      { background-image: url("/img/jgha-hero-geothermal-XXL-1600.webp"); }
  .jgha-hero-image--generator       { background-image: url("/img/jgha-hero-generator-XXL-1600.webp"); }
  .jgha-hero-image--commercial      { background-image: url("/img/jgha-hero-commercial-XXL-1600.webp"); }
  .jgha-hero-image--iaq             { background-image: url("/img/jgha-hero-iaq-XXL-1600.webp"); }
  .jgha-hero-image--furnace-client  { background-image: url("/img/jgha-hero-furnace-client-XXL-1320.webp"); }
  .jgha-hero-image--boiler-client   { background-image: url("/img/jgha-hero-boiler-client-XXL-1320.webp"); }
  .jgha-hero-image--tank-client     { background-image: url("/img/jgha-hero-tank-client-XXL-1320.webp"); }
}
@media (max-width: 1199px) {
  .jgha-hero-intro::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    background: rgba(0, 0, 0, 0.18);
    pointer-events: none;
  }
}
@media (min-width: 1200px) {
  .jgha-hero-intro {
    padding-top: 16rem;
    padding-bottom: 5rem;
    min-height: 42rem;
  }
}

/* Hero heading (Roboto Condensed Regular per Figma alt H1) */
.jgha-hero-heading {
  font-family: var(--font-heading);
  font-weight: var(--font-weight-regular);
  font-size: var(--fs-h1);
  line-height: var(--lh-h1);
  color: var(--color-neutral-50);
  text-transform: uppercase;
  letter-spacing: 0;
  margin-bottom: 1.5rem;
}
.jgha-hero-heading em {
  font-style: normal;
  color: var(--color-brand-cloud-blue);
}
@media (max-width: 991.98px) {
  .jgha-hero-heading {
    font-size: var(--fs-h2);
    line-height: var(--lh-h2);
  }
}
@media (max-width: 575.98px) {
  .jgha-hero-heading {
    font-size: var(--fs-h3);
    line-height: var(--lh-h3);
  }
}

/* Trust signals row */
.jgha-hero-trust {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 1.25rem 1.5rem;
}
.jgha-hero-trust-img {
  height: 40px;
  width: auto;
  display: block;
}
.jgha-hero-trust-img-tall {
  height: 54px;
}

/* === Opening Section === */
.jgha-opening {
  background: var(--gradient-abyss-180);
  color: var(--color-neutral-50);
  padding: 3.75rem 1rem 5rem;
}
@media (min-width: 1200px) {
  .jgha-opening {
    padding: 3.75rem 5rem 5rem;
  }
}

.jgha-opening-trust {
  margin-bottom: 3.75rem;
  padding: 0;
}

/* Trust card — wrapper around BS Collapse trigger + content (one-at-a-time accordion) */
.jgha-trust-card {
  background: var(--color-brand-deep-blue);
  color: var(--color-white);
  display: flex;
  flex-direction: column;
  width: 100%;
  min-height: 76px;
  padding: 1.25rem;
  border-radius: 0;
  transition: background-color var(--transition-standard), box-shadow var(--transition-standard), border-radius var(--transition-standard);
}
.jgha-trust-card:hover {
  background: var(--color-brand-cobalt);
}
.jgha-trust-card:has(.jgha-trust-trigger[aria-expanded="true"]) {
  background: var(--color-brand-maroon);
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.2);
}
.jgha-trust-card:has(.jgha-trust-trigger[aria-expanded="true"]):hover {
  background: var(--color-brand-maroon);
}

.jgha-trust-trigger {
  background: transparent;
  color: inherit;
  border: none;
  padding: 0;
  width: 100%;
  text-align: left;
  cursor: pointer;
}
.jgha-trust-trigger:focus-visible {
  outline: 2px solid var(--color-brand-cloud-blue);
  outline-offset: 2px;
}

/* On mobile, every card is its own rounded pill */
@media (max-width: 1199.98px) {
  .jgha-trust-card {
    border-radius: var(--border-radius-standard);
  }
}

/* On xl+, the row reads as a continuous bar */
@media (min-width: 1200px) {
  /* Inactive bar: first card rounds left edge, last card rounds right edge */
  .jgha-opening-trust .col-xl-3:first-child .jgha-trust-card {
    border-top-left-radius: 12px;
    border-bottom-left-radius: 12px;
  }
  .jgha-opening-trust .col-xl-3:last-child .jgha-trust-card {
    border-top-right-radius: 12px;
    border-bottom-right-radius: 12px;
  }

  /* Active card: top corners always rounded (it lifts out of the bar) */
  .jgha-opening-trust .jgha-trust-card:has(.jgha-trust-trigger[aria-expanded="true"]) {
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
  }
  /* Active in first column: keep BL rounded, drop BR (joins bar on right) */
  .jgha-opening-trust .col-xl-3:first-child .jgha-trust-card:has(.jgha-trust-trigger[aria-expanded="true"]) {
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 0;
  }
  /* Active in last column: keep BR rounded, drop BL (joins bar on left) */
  .jgha-opening-trust .col-xl-3:last-child .jgha-trust-card:has(.jgha-trust-trigger[aria-expanded="true"]) {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 12px;
  }
  /* Active in a middle column: no bottom rounding (joins bar both sides) */
  .jgha-opening-trust .col-xl-3:not(:first-child):not(:last-child) .jgha-trust-card:has(.jgha-trust-trigger[aria-expanded="true"]) {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
  }

  /* Active column aligns top; inactive columns bottom-align under the lifted card */
  .jgha-opening-trust .col-xl-3 {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding-top: 1.75rem;
  }
  .jgha-opening-trust .col-xl-3:has(.jgha-trust-trigger[aria-expanded="true"]) {
    justify-content: flex-start;
    padding-top: 0;
  }
}

/* Icon: bare white icon when inactive; deep-blue circle when active */
.jgha-trust-icon-circle {
  background: transparent;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-white);
  flex-shrink: 0;
  font-size: 1.5rem;
  transition: background-color var(--transition-standard), width var(--transition-standard), height var(--transition-standard);
}
.jgha-trust-card:has(.jgha-trust-trigger[aria-expanded="true"]) .jgha-trust-icon-circle {
  background: var(--color-brand-deep-blue);
  border-radius: 50%;
  width: 40px;
  height: 40px;
  font-size: 1.25rem;
}

.jgha-trust-title {
  font-family: var(--font-label);
  font-weight: var(--font-weight-bold);
  font-size: var(--fs-label-lg);
  line-height: var(--lh-label-lg);
  text-transform: uppercase;
  color: var(--color-white);
  letter-spacing: 0;
}

.jgha-trust-desc {
  font-family: var(--font-body);
  font-size: var(--fs-p-sm);
  line-height: var(--lh-p-sm);
  color: var(--color-white);
  margin-top: 0.5rem;
}
.jgha-trust-desc em {
  font-style: normal;
  color: var(--color-brand-cloud-blue);
}

/* Subheader pill (Why Choose Us) */
.jgha-overline-pill {
  display: inline-block;
  border: 2px solid var(--color-brand-maroon);
  border-radius: 4px;
  padding: 4px 8px;
  font-family: var(--font-label);
  font-weight: var(--font-weight-bold);
  font-size: var(--fs-overline-lg);
  line-height: var(--lh-overline-lg);
  color: var(--color-white);
  text-transform: uppercase;
  letter-spacing: 0;
  margin-bottom: 0.75rem;
}

/* Opening heading (H2 Regular per Figma) */
.jgha-opening-heading {
  font-family: var(--font-heading);
  font-weight: var(--font-weight-regular);
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
  color: var(--color-neutral-50);
  text-transform: uppercase;
  letter-spacing: 0;
  margin-bottom: 1.25rem;
}
.jgha-opening-heading em {
  font-style: normal;
  color: var(--color-brand-cloud-blue);
}
@media (max-width: 575.98px) {
  .jgha-opening-heading {
    font-size: var(--fs-h3);
    line-height: var(--lh-h3);
  }
}

.jgha-opening p {
  color: var(--color-neutral-50);
  margin-bottom: 1.25rem;
}

/* Form card */
.jgha-form-card {
  background: linear-gradient(83deg, rgba(156, 198, 227, 0.8) 0%, rgba(41, 45, 120, 0.8) 100%);
  padding: 1.75rem;
  border-radius: 12px;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.05);
}
.jgha-form-heading {
  font-family: var(--font-heading);
  font-weight: var(--font-weight-semibold);
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  color: var(--color-neutral-50);
  text-transform: uppercase;
  letter-spacing: 0;
  margin-bottom: 1rem;
}

/* === Services Section === */
.jgha-services {
  background: var(--gradient-abyss-0);
  color: var(--color-white);
  padding: 3.75rem 1rem 5rem;
}
@media (min-width: 1200px) {
  .jgha-services {
    padding: 3.75rem 5rem 5rem;
  }
}

.jgha-services-heading-wrapper {
  margin-bottom: 2.5rem;
}
.jgha-services-heading {
  font-family: var(--font-heading);
  font-weight: var(--font-weight-regular);
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
  color: var(--color-white);
  text-transform: uppercase;
  letter-spacing: 0;
  margin: 0.75rem auto 1rem;
  max-width: 50rem;
}
.jgha-services-heading em {
  font-style: normal;
  color: var(--color-brand-cloud-blue);
}
@media (max-width: 575.98px) {
  .jgha-services-heading {
    font-size: var(--fs-h3);
    line-height: var(--lh-h3);
  }
}
.jgha-services-intro {
  color: var(--color-white);
  max-width: 48rem;
  margin: 0 auto;
}

/* Tab nav (5 tabs in a single bar; first rounds left, last rounds right) */
.jgha-services-tabs {
  display: flex;
  flex-wrap: wrap;
  border: 0;
  margin-bottom: 1.75rem;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.05);
}
.jgha-services-tab {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  background: var(--color-brand-deep-blue);
  border: 2px solid transparent;
  color: var(--color-neutral-50);
  padding: 1rem;
  width: 100%;
  cursor: pointer;
  font-family: var(--font-label);
  font-weight: var(--font-weight-bold);
  font-size: var(--fs-label-lg);
  line-height: var(--lh-label-lg);
  text-transform: uppercase;
  text-align: center;
  letter-spacing: 0;
  transition: background-color var(--transition-standard), color var(--transition-standard);
}
.jgha-services-tab-icon {
  font-size: 2rem;
  line-height: 1;
}
.jgha-services-tab:hover {
  background: var(--color-brand-cobalt);
  color: var(--color-white);
}
.jgha-services-tab.active {
  background: var(--color-brand-maroon);
  border-color: var(--color-brand-deep-blue);
  color: var(--color-white);
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.1);
}
.jgha-services-tab:focus-visible {
  outline: 2px solid var(--color-brand-cloud-blue);
  outline-offset: 2px;
}
@media (min-width: 768px) {
  .jgha-services-tabs .nav-item:first-child .jgha-services-tab {
    border-top-left-radius: 12px;
    border-bottom-left-radius: 12px;
  }
  .jgha-services-tabs .nav-item:last-child .jgha-services-tab {
    border-top-right-radius: 12px;
    border-bottom-right-radius: 12px;
  }
}
@media (max-width: 767.98px) {
  .jgha-services-tabs .nav-item {
    flex: 1 0 50%;
  }
  .jgha-services-tab {
    border-radius: 8px;
  }
}

/* Service card */
.jgha-service-card {
  display: flex;
  flex-direction: column;
  background: linear-gradient(84.4249deg, rgba(80, 101, 138, 0.3) 0%, rgba(179, 50, 57, 0.3) 99.953%);
  border: 2px solid var(--color-brand-maroon);
  border-radius: 12px;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.05);
  color: var(--color-white);
  height: 100%;
}
.jgha-service-card-img-wrapper {
  padding: 0.75rem;
}
.jgha-service-card-img {
  display: block;
  width: 100%;
  height: 200px;
  object-fit: cover;
  border-radius: 12px;
}
.jgha-service-card-body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.25rem;
  padding: 0.75rem 1.5rem 1.5rem;
}
.jgha-service-card-title {
  font-family: var(--font-heading);
  font-weight: var(--font-weight-semibold);
  font-size: var(--fs-h4);
  line-height: var(--lh-h4);
  text-transform: uppercase;
  color: var(--color-white);
  letter-spacing: 0;
  margin: 0;
}
.jgha-service-card-desc {
  font-family: var(--font-body);
  font-size: var(--fs-p-md);
  line-height: var(--lh-p-md);
  color: var(--color-white);
  margin: 0;
}
.jgha-service-card-desc em {
  font-style: normal;
  color: var(--color-brand-cloud-blue);
}
/* Read More toggle (cloud blue with diagonal arrow) */
.jgha-service-card-readmore {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-body);
  font-weight: var(--font-weight-semibold);
  font-size: var(--fs-p-md);
  line-height: var(--lh-p-md);
  color: var(--color-brand-cloud-blue);
  text-decoration: none;
  cursor: pointer;
}
.jgha-service-card-readmore:is(:hover, :focus, :active) {
  color: var(--color-brand-cloud-blue-hover);
  text-decoration: underline;
}
.jgha-service-card-readmore[aria-expanded="true"] .fa-arrow-down-right {
  transform: rotate(180deg);
  transition: transform var(--transition-standard);
}
.jgha-service-card-readmore .fa-arrow-down-right {
  transition: transform var(--transition-standard);
}
.jgha-service-card-readmore [data-readmore-text]::before {
  content: 'Read More';
}
.jgha-service-card-readmore[aria-expanded="true"] [data-readmore-text]::before {
  content: 'Read Less';
}

/* Dropdown CTA — keep btn-maroon styling, just fix layout for icon */
.jgha-service-card-cta .btn-maroon.dropdown-toggle::after {
  display: none; /* hide Bootstrap's default caret; we use FA chevron */
}
.jgha-service-card-cta .dropdown-menu {
  border: 0;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
  border-radius: 8px;
  padding: 0.5rem;
}
.jgha-service-card-cta .dropdown-item {
  font-family: var(--font-label);
  font-weight: var(--font-weight-bold);
  font-size: var(--fs-label-md);
  line-height: var(--lh-label-md);
  text-transform: uppercase;
  color: var(--color-brand-deep-blue);
  border-radius: 4px;
  padding: 0.5rem 0.75rem;
}
.jgha-service-card-cta .dropdown-item:is(:hover, :focus, :active) {
  background: var(--color-brand-cloud-blue);
  color: var(--color-brand-deep-blue);
}

/* === Financing Section === */
.jgha-financing {
  background: var(--gradient-abyss-180);
  color: var(--color-white);
  padding: 3.75rem 1rem 5rem;
}
@media (min-width: 1200px) {
  .jgha-financing {
    padding: 5rem;
  }
}
.jgha-financing-heading {
  font-family: var(--font-heading);
  font-weight: var(--font-weight-regular);
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
  color: var(--color-white);
  text-transform: uppercase;
  letter-spacing: 0;
  margin: 0.75rem 0 1.25rem;
}
@media (max-width: 575.98px) {
  .jgha-financing-heading {
    font-size: var(--fs-h3);
    line-height: var(--lh-h3);
  }
}
.jgha-financing p {
  color: var(--color-white);
  margin-bottom: 1.25rem;
}

/* Benefits accordion */
.jgha-finance-benefits-heading {
  font-family: var(--font-heading);
  font-weight: var(--font-weight-bold);
  font-size: var(--fs-h5);
  line-height: var(--lh-h5);
  color: var(--color-white);
  text-transform: uppercase;
  letter-spacing: 0;
  margin: 1rem 0 0.75rem;
}
.jgha-finance-benefits {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  width: 100%;
}
.jgha-finance-benefit {
  display: flex;
  flex-direction: column;
  background: transparent;
  border-radius: 12px;
  width: 100%;
  transition: background-color var(--transition-standard), padding var(--transition-standard);
}
.jgha-finance-benefit:has(.jgha-finance-benefit-trigger[aria-expanded="true"]) {
  background-color: var(--color-brand-deep-blue);
  padding: 0.75rem;
}
.jgha-finance-benefit-trigger {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: transparent;
  color: var(--color-white);
  border: none;
  padding: 0;
  width: 100%;
  text-align: left;
  cursor: pointer;
}
.jgha-finance-benefit-trigger[aria-expanded="true"] {
  align-items: flex-start;
}
.jgha-finance-benefit-trigger:focus-visible {
  outline: 2px solid var(--color-brand-cloud-blue);
  outline-offset: 2px;
}
/* Banner: portrait family photo, sits in column at natural width to match maintenance image */
.jgha-finance-banner {
  display: block;
  width: 100%;
  height: auto;
}

/* Financing partner cards */
.jgha-finance-card {
  background: var(--color-neutral-100);
  border: 1px solid var(--color-neutral-50);
  border-radius: 16px;
  padding: 1.5rem;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.05);
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  align-items: flex-start;
}
.jgha-finance-card-title {
  font-family: var(--font-label);
  font-weight: var(--font-weight-bold);
  font-size: 2rem;
  line-height: 1;
  color: var(--color-dm-00dp);
  text-transform: uppercase;
  letter-spacing: 0;
  margin: 0;
}
.jgha-finance-card-logo {
  display: block;
  height: 45px;
  width: auto;
  max-width: 100%;
}
.jgha-financing .jgha-finance-card-desc {
  font-family: var(--font-body);
  font-weight: var(--font-weight-regular);
  font-size: var(--fs-p-md);
  line-height: var(--lh-p-md);
  color: var(--color-black);
  flex: 1;
  margin: 0;
}
.jgha-financing .jgha-finance-card-desc em {
  font-style: normal;
  color: var(--color-brand-cobalt);
}
/* === Maintenance Plan Section === */
.jgha-maintenance {
  background: var(--gradient-abyss-45);
  color: var(--color-neutral-50);
  padding: 3.125rem 1rem 5rem;
  box-shadow: 0 11px 0 0 var(--color-brand-maroon);
}
@media (min-width: 1200px) {
  .jgha-maintenance {
    padding: 3.125rem 5rem 5rem;
  }
}
.jgha-maintenance-heading {
  font-family: var(--font-heading);
  font-weight: var(--font-weight-regular);
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
  color: var(--color-neutral-50);
  text-transform: uppercase;
  letter-spacing: 0;
  margin: 0.75rem 0 1.25rem;
}
@media (max-width: 575.98px) {
  .jgha-maintenance-heading {
    font-size: var(--fs-h3);
    line-height: var(--lh-h3);
  }
}
.jgha-maintenance p {
  color: var(--color-neutral-50);
  margin-bottom: 1.25rem;
}

/* Benefits accordion (cobalt active bg, deep-blue icon bg) */
.jgha-maintenance-benefits-heading {
  font-family: var(--font-heading);
  font-weight: var(--font-weight-bold);
  font-size: var(--fs-h5);
  line-height: var(--lh-h5);
  color: var(--color-neutral-50);
  text-transform: uppercase;
  letter-spacing: 0;
  margin: 1rem 0 0.75rem;
}
.jgha-maintenance-benefits {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  width: 100%;
}
.jgha-maintenance-benefit {
  display: flex;
  flex-direction: column;
  background: transparent;
  border-radius: 12px;
  width: 100%;
  transition: background-color var(--transition-standard), padding var(--transition-standard);
}
.jgha-maintenance-benefit:has(.jgha-maintenance-benefit-trigger[aria-expanded="true"]) {
  background-color: var(--color-brand-cobalt);
  padding: 0.75rem;
}
.jgha-maintenance-benefit-trigger {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: transparent;
  color: var(--color-white);
  border: none;
  padding: 0;
  width: 100%;
  text-align: left;
  cursor: pointer;
}
.jgha-maintenance-benefit-trigger[aria-expanded="true"] {
  align-items: flex-start;
}
.jgha-maintenance-benefit-trigger:focus-visible {
  outline: 2px solid var(--color-brand-cloud-blue);
  outline-offset: 2px;
}
/* Primary CTAs row */
.jgha-maintenance-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 1.5rem 0 2rem;
}

/* Commercial maintenance callout card */
.jgha-maintenance-callout {
  background: linear-gradient(81.67deg, rgba(156, 198, 227, 0.7) 0%, rgba(41, 45, 120, 0.7) 100%);
  border-radius: 20px;
  padding: 1.75rem;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
  color: var(--color-white);
}
.jgha-maintenance-callout-heading {
  font-family: var(--font-heading);
  font-weight: var(--font-weight-bold);
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  color: var(--color-white);
  text-transform: uppercase;
  letter-spacing: 0;
  margin: 0 0 1.25rem;
}
.jgha-maintenance-callout-desc {
  color: var(--color-white);
  margin: 0 0 1.25rem;
}
/* === About Section === */
.jgha-about {
  position: relative;
  border-bottom-left-radius: 40px;
  border-bottom-right-radius: 40px;
  overflow: hidden;
  color: var(--color-white);
  padding: 3.75rem 1rem;
}
@media (min-width: 1200px) {
  .jgha-about {
    padding: 5rem;
  }
}
.jgha-about-bg,
.jgha-about-bg img,
.jgha-about-overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.jgha-about-bg img {
  object-fit: cover;
  display: block;
}
.jgha-about-overlay {
  background-color: rgba(20, 19, 33, 0.75);
}
.jgha-about-heading {
  font-family: var(--font-heading);
  font-weight: var(--font-weight-regular);
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
  color: var(--color-white);
  text-transform: uppercase;
  letter-spacing: 0;
  margin: 0.75rem 0 1.25rem;
}
@media (max-width: 575.98px) {
  .jgha-about-heading {
    font-size: var(--fs-h3);
    line-height: var(--lh-h3);
  }
}
.jgha-about p {
  color: var(--color-white);
  margin-bottom: 1.25rem;
}
.jgha-about-advantages-heading {
  font-family: var(--font-heading);
  font-weight: var(--font-weight-bold);
  font-size: var(--fs-h5);
  line-height: var(--lh-h5);
  color: var(--color-white);
  text-transform: uppercase;
  letter-spacing: 0;
  margin: 0 0 1.25rem;
}

/* Advantages accordion (cobalt default, cloud-blue active with maroon icon circle) */
.jgha-advantage {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  background-color: var(--color-brand-cobalt);
  color: var(--color-neutral-50);
  border-radius: 20px;
  padding: 1.25rem;
  width: 100%;
  transition: background-color var(--transition-standard), color var(--transition-standard);
}
.jgha-advantage:has(.jgha-advantage-trigger[aria-expanded="true"]) {
  background-color: var(--color-brand-cloud-blue);
  color: var(--color-dm-00dp);
}
.jgha-advantage-trigger {
  background: transparent;
  color: inherit;
  border: none;
  padding: 0;
  width: 100%;
  text-align: left;
  cursor: pointer;
}
.jgha-advantage-trigger:focus-visible {
  outline: 2px solid var(--color-brand-cloud-blue);
  outline-offset: 2px;
}
.jgha-advantage-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  color: var(--color-white);
  font-size: 1.5rem;
  flex-shrink: 0;
  border-radius: 50%;
  transition: background-color var(--transition-standard), padding var(--transition-standard), width var(--transition-standard), height var(--transition-standard);
}
.jgha-advantage-trigger[aria-expanded="true"] .jgha-advantage-icon {
  background-color: var(--color-brand-maroon);
  width: 40px;
  height: 40px;
  padding: 8px;
  color: var(--color-white);
}
.jgha-advantage-title {
  font-family: var(--font-heading);
  font-weight: var(--font-weight-semibold);
  font-size: var(--fs-h5);
  line-height: var(--lh-h5);
  text-transform: uppercase;
  letter-spacing: 0;
  color: inherit;
}
/* === Service Area Section === */
.jgha-service-area {
  background: var(--gradient-abyss-45);
  color: var(--color-neutral-50);
  padding: 3.75rem 1rem;
}
@media (min-width: 1200px) {
  .jgha-service-area {
    padding: 5rem;
  }
}
.jgha-service-area-heading {
  font-family: var(--font-heading);
  font-weight: var(--font-weight-regular);
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
  color: var(--color-neutral-50);
  text-transform: uppercase;
  letter-spacing: 0;
  margin: 0.75rem 0 1.25rem;
}
@media (max-width: 575.98px) {
  .jgha-service-area-heading {
    font-size: var(--fs-h3);
    line-height: var(--lh-h3);
  }
}
.jgha-service-area-heading em,
.jgha-service-area p em {
  font-style: normal;
  color: var(--color-brand-cloud-blue);
}
.jgha-service-area p {
  color: var(--color-neutral-50);
  margin-bottom: 1.25rem;
}

/* Map */
.jgha-service-area-map {
  border-radius: 20px;
  overflow: hidden;
  margin-bottom: 1.5rem;
}
/* "Don't see your area listed?" callout */
.jgha-service-area-callout {
  background: linear-gradient(66.4deg, rgba(156, 198, 227, 0.7) 0%, rgba(41, 45, 120, 0.7) 100%);
  border-radius: 12px;
  padding: 1.375rem 2rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  color: var(--color-white);
}
.jgha-service-area-callout-heading {
  font-family: var(--font-heading);
  font-weight: var(--font-weight-bold);
  font-size: var(--fs-h5);
  line-height: var(--lh-h5);
  color: var(--color-white);
  text-transform: uppercase;
  margin: 0 0 0.75rem;
}
/* Locations grid + accordion */
.jgha-service-locations-heading {
  font-family: var(--font-heading);
  font-weight: var(--font-weight-bold);
  font-size: var(--fs-h5);
  line-height: var(--lh-h5);
  color: var(--color-neutral-50);
  text-transform: uppercase;
  letter-spacing: 0;
  margin: 1rem 0 1.25rem;
}
.jgha-service-locations {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.75rem 1rem;
}
@media (min-width: 576px) {
  .jgha-service-locations {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 1200px) {
  .jgha-service-locations {
    grid-template-columns: repeat(3, 1fr);
  }
}
.jgha-service-location {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  background: transparent;
  color: var(--color-neutral-50);
  border-radius: 12px;
  width: 100%;
  transition: background-color var(--transition-standard), padding var(--transition-standard);
}
.jgha-service-location:has(.jgha-service-location-trigger[aria-expanded="true"]) {
  background-color: var(--color-brand-cobalt);
  padding: 0.75rem 0.5rem;
}
.jgha-service-location-trigger {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  background: transparent;
  color: var(--color-neutral-50);
  border: none;
  padding: 0;
  text-align: left;
  cursor: pointer;
}
.jgha-service-location-trigger:focus-visible {
  outline: 2px solid var(--color-brand-cloud-blue);
  outline-offset: 2px;
}
.jgha-service-location-name {
  flex: 1;
  min-width: 0;
  font-family: var(--font-label);
  font-weight: var(--font-weight-bold);
  font-size: 0.875rem;
  line-height: 1rem;
  color: var(--color-neutral-50);
  text-transform: uppercase;
}
.jgha-service-location-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  color: var(--color-white);
  font-size: 0.75rem;
  flex-shrink: 0;
  transition: transform var(--transition-standard);
}
.jgha-service-location-trigger[aria-expanded="true"] .jgha-service-location-toggle {
  transform: rotate(45deg);
}
/* Rebates callout (deep-blue 75% bg with maroon border + overflowing star) */
.jgha-rebates-callout {
  position: relative;
  background-color: rgba(41, 45, 120, 0.75);
  border: 2px solid var(--color-brand-maroon);
  border-radius: 20px;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
  padding: 1.75rem;
  margin-top: 5rem;
  overflow: hidden;
  display: flex;
  align-items: center;
  gap: 1.5rem;
  color: var(--color-white);
}
.jgha-rebates-callout-content {
  position: relative;
  z-index: 1;
  width: 100%;
}
.jgha-rebates-callout-heading {
  font-family: var(--font-heading);
  font-weight: var(--font-weight-bold);
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  color: var(--color-white);
  text-transform: uppercase;
  margin: 0 0 1.25rem;
}
.jgha-rebates-callout p {
  color: var(--color-white);
  margin: 0 0 1.25rem;
}
/* === FAQs Section === */
.jgha-faqs {
  background: var(--gradient-abyss-45);
  color: var(--color-neutral-50);
  padding: 3.75rem 1rem 5rem;
}
@media (min-width: 1200px) {
  .jgha-faqs {
    padding: 3.75rem 5rem 5rem;
  }
}
.jgha-faqs-header {
  margin-bottom: 2rem;
}
.jgha-faqs-heading {
  font-family: var(--font-heading);
  font-weight: var(--font-weight-regular);
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
  color: var(--color-neutral-50);
  text-transform: uppercase;
  letter-spacing: 0;
  margin: 0.5rem 0 0;
}
@media (max-width: 575.98px) {
  .jgha-faqs-heading {
    font-size: var(--fs-h3);
    line-height: var(--lh-h3);
  }
}

.jgha-faq-trigger {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  background: transparent;
  border: none;
  padding: 0;
  width: 100%;
  text-align: left;
  cursor: pointer;
  color: var(--color-neutral-50);
}
.jgha-faq-trigger:focus-visible {
  outline: 2px solid var(--color-brand-cloud-blue);
  outline-offset: 2px;
}
.jgha-faq-question {
  flex: 1;
  min-width: 0;
  font-family: var(--font-label);
  font-weight: var(--font-weight-bold);
  font-size: var(--fs-label-lg);
  line-height: 1.125rem;
  color: var(--color-neutral-50);
  text-transform: uppercase;
}
.jgha-faq-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  color: var(--color-brand-cloud-blue);
  font-size: 1rem;
  flex-shrink: 0;
  transition: transform var(--transition-standard);
}
.jgha-faq-trigger:not(.collapsed) .jgha-faq-icon {
  transform: rotate(180deg);
}
.jgha-faq-answer {
  font-family: var(--font-body);
  font-weight: var(--font-weight-regular);
  font-size: var(--fs-p-md);
  line-height: var(--lh-p-md);
  color: var(--color-neutral-50);
  padding-top: 0.5rem;
}
.jgha-faq-answer em {
  font-style: normal;
  color: var(--color-brand-cloud-blue);
}

/* === Conclusion (Trust Closer) Section === */
.jgha-conclusion {
  background: linear-gradient(85.26deg, rgba(156, 198, 227, 0.7) 0%, rgba(41, 45, 120, 0.7) 112.18%);
  color: var(--color-neutral-50);
  padding: 3.6875rem 1rem 5rem;
}
@media (min-width: 1200px) {
  .jgha-conclusion {
    padding: 3.6875rem 5rem 5rem;
  }
}

/* Top content (centered header + 2-col body + CTAs + legacy line) */
.jgha-conclusion-top {
  margin-bottom: 3.75rem;
}
.jgha-conclusion-heading {
  font-family: var(--font-heading);
  font-weight: var(--font-weight-regular);
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
  color: var(--color-white);
  text-transform: uppercase;
  letter-spacing: 0;
  margin: 0.5rem auto 1.25rem;
  max-width: 814px;
}
@media (max-width: 575.98px) {
  .jgha-conclusion-heading {
    font-size: var(--fs-h3);
    line-height: var(--lh-h3);
  }
}
.jgha-conclusion-paragraphs p {
  color: var(--color-neutral-50);
  margin: 0;
}
.jgha-conclusion-paragraphs em,
.jgha-conclusion-legacy em {
  font-style: normal;
  color: var(--color-white);
}
.jgha-conclusion-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: center;
  margin-top: 1.25rem;
}
.jgha-conclusion-legacy {
  font-family: var(--font-heading);
  font-weight: var(--font-weight-bold);
  font-size: var(--fs-h5);
  line-height: var(--lh-h5);
  color: var(--color-white);
  text-transform: uppercase;
  letter-spacing: 0;
  margin: 2.5rem 0 0;
}

/* Advantages grid (4 cols × 2 rows on xl, 2×4 on md, 1×8 on xs) */
.jgha-conclusion-advantages {
  background-color: var(--color-brand-deep-blue);
  border-radius: 20px;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.2);
  display: grid;
  grid-template-columns: 1fr;
  height: 100%;
  overflow: hidden;
}
@media (min-width: 768px) {
  .jgha-conclusion-advantages {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 1200px) {
  .jgha-conclusion-advantages {
    grid-template-columns: repeat(4, 1fr);
  }
}
.jgha-conclusion-advantage {
  background-color: var(--color-brand-deep-blue);
  border: 2px solid var(--color-brand-deep-blue);
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  color: var(--color-neutral-50);
  transition: background-color var(--transition-standard), color var(--transition-standard), border-radius var(--transition-standard);
}
.jgha-conclusion-advantage:hover,
.jgha-conclusion-advantage:focus-within {
  background-color: var(--color-brand-cloud-blue);
  color: var(--color-dm-00dp);
  border-radius: 20px 0;
}
.jgha-conclusion-advantage-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  color: var(--color-white);
  font-size: 1.5rem;
  flex-shrink: 0;
  border-radius: 50%;
  margin-bottom: 0.75rem;
  transition: background-color var(--transition-standard), padding var(--transition-standard), width var(--transition-standard), height var(--transition-standard), color var(--transition-standard);
}
.jgha-conclusion-advantage:hover .jgha-conclusion-advantage-icon,
.jgha-conclusion-advantage:focus-within .jgha-conclusion-advantage-icon {
  background-color: var(--color-brand-deep-blue);
  width: 40px;
  height: 40px;
  padding: 8px;
  color: var(--color-white);
}
.jgha-conclusion-advantage-title {
  font-family: var(--font-label);
  font-weight: var(--font-weight-bold);
  font-size: var(--fs-label-lg);
  line-height: 1.125rem;
  color: inherit;
  text-transform: uppercase;
  letter-spacing: 0;
  margin: 0;
}
/* === Footer === */
.jgha-footer {
  background: var(--gradient-abyss-45);
  color: var(--color-neutral-50);
  padding: 3.75rem 1rem;
}
@media (min-width: 1200px) {
  .jgha-footer {
    padding: 5rem;
  }
}
.jgha-footer-logo {
  display: block;
  width: 100%;
  max-width: 315px;
  height: auto;
  margin-bottom: 2rem;
}
.jgha-footer-badges img {
  display: block;
  height: auto;
  max-width: 175px;
}
.jgha-footer-group + .jgha-footer-group {
  margin-top: 2rem;
}
.jgha-footer-heading {
  font-family: var(--font-label);
  font-weight: var(--font-weight-bold);
  font-size: var(--fs-h5);
  line-height: var(--lh-h5);
  color: var(--color-brand-maroon);
  text-transform: uppercase;
  letter-spacing: 0;
  margin: 0 0 0.75rem;
}
.jgha-footer-link {
  font-family: var(--font-body);
  font-weight: var(--font-weight-regular);
  font-size: var(--fs-p-md);
  line-height: var(--lh-p-md);
  color: var(--color-neutral-50);
  text-decoration: none;
  transition: color var(--transition-standard);
}
.jgha-footer-link:hover,
.jgha-footer-link:focus {
  color: var(--color-neutral-50-hover);
  text-decoration: none;
}

/* Contact column */
.jgha-footer-contact-item {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}
.jgha-footer-contact-label {
  font-family: var(--font-label);
  font-weight: var(--font-weight-bold);
  font-size: var(--fs-label-lg);
  line-height: 1.125rem;
  color: var(--color-neutral-50);
  text-transform: uppercase;
  margin: 0;
}
.jgha-footer-contact-value {
  font-family: var(--font-body);
  font-weight: var(--font-weight-regular);
  font-size: var(--fs-p-md);
  line-height: var(--lh-p-md);
  color: var(--color-neutral-50);
  font-style: normal;
  margin: 0;
}
.jgha-footer-contact-license {
  font-family: var(--font-body);
  font-size: var(--fs-p-md);
  line-height: var(--lh-p-md);
  color: var(--color-neutral-50);
  margin: 0;
}
.jgha-footer-social-label {
  font-family: var(--font-body);
  font-size: var(--fs-p-md);
  color: var(--color-neutral-50);
  margin-right: 0.5rem;
}
.jgha-footer-social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  color: var(--color-neutral-50);
  font-size: 1rem;
  transition: color var(--transition-standard);
}
.jgha-footer-social-link:hover,
.jgha-footer-social-link:focus {
  color: var(--color-neutral-50-hover);
}

/* === Customer Reviews Section === */
.jgha-reviews {
  color: var(--color-neutral-50);
  padding: 3.5rem 1rem;
}
@media (min-width: 1200px) {
  .jgha-reviews {
    padding: 3.5rem;
  }
}
.jgha-reviews-heading {
  color: var(--color-neutral-50);
  margin-bottom: 2rem;
}
@media (max-width: 575.98px) {
  .jgha-reviews-heading {
    font-size: var(--fs-h3);
    line-height: var(--lh-h3);
  }
}

/* === Brands Heading Strip === */
.jgha-brands-heading {
  color: var(--color-neutral-50);
  padding: 1.875rem 1rem;
}
@media (min-width: 1200px) {
  .jgha-brands-heading {
    padding: 1.875rem 5rem;
  }
}
.jgha-brands-heading h4 {
  color: var(--color-neutral-50);
}

/* === Brands Bar === */
.jgha-brands-bar-section {
  background-color: var(--color-brand-midnight);
  padding: 0 1rem 3.75rem;
}
@media (min-width: 1200px) {
  .jgha-brands-bar-section {
    padding: 0 5rem 3.75rem;
  }
}
.jgha-brands-bar {
  background-color: var(--color-neutral-100);
  border-radius: 2.5rem;
  padding: 1.25rem 0;
  overflow: hidden;
  position: relative;
  -webkit-mask-image: linear-gradient(
    90deg,
    transparent 0%,
    #000 6%,
    #000 94%,
    transparent 100%
  );
          mask-image: linear-gradient(
    90deg,
    transparent 0%,
    #000 6%,
    #000 94%,
    transparent 100%
  );
}
.jgha-brands-track {
  display: flex;
  align-items: center;
  gap: 2.5rem;
  width: max-content;
  animation: jgha-brands-scroll 50s linear infinite;
  will-change: transform;
}
.jgha-brand-cell {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 120px;
  padding: 0 0.5rem;
}
.jgha-brands-bar:hover .jgha-brands-track {
  animation-play-state: paused;
}
@keyframes jgha-brands-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .jgha-brands-track {
    animation: none;
    transform: translateX(0);
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
  }
}
/* === Button Styles === */
.btn {
  padding: 0.35rem 0.85rem;
  font-family: var(--font-heading);
  font-weight: var(--font-weight-semibold);
  border-radius: 50rem;
  font-size: 0.9rem;
  margin-bottom: 1rem;
  transition: all var(--transition-standard);
  text-transform: uppercase;
  border-width: 0.125rem;
}

.btn.btn-menu {
  font-size: 0.85rem;
}
/* === Color Utility Classes === */

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

.border-white-opacity-15 {
  border-color: var(--color-white-opacity-15) !important;
}

.bg-neutral-200 {
  background-color: var(--color-neutral-200) !important;
}
.text-neutral-600 {
  color: var(--color-neutral-600) !important;
}
.text-neutral-700 {
  color: var(--color-neutral-700) !important;
}

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

/* COBALT */
.bg-brand-cobalt {
  background-color: var(--color-brand-cobalt) !important;
}
.text-brand-cobalt {
  color: var(--color-brand-cobalt) !important;
}
.border-brand-cobalt {
  border-color: var(--color-brand-cobalt) !important;
}

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

/* MAROON */
.bg-brand-maroon {
  background-color: var(--color-brand-maroon) !important;
}
.text-brand-maroon {
  color: var(--color-brand-maroon) !important;
}
.border-brand-maroon {
  border-color: var(--color-brand-maroon) !important;
}

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

/* === Gradient Utility Classes === */
.bg-gradient-abyss-0          { background: var(--gradient-abyss-0)          !important; }
.bg-gradient-abyss-45         { background: var(--gradient-abyss-45)         !important; }
.bg-gradient-abyss-90         { background: var(--gradient-abyss-90)         !important; }
.bg-gradient-abyss-180        { background: var(--gradient-abyss-180)        !important; }
.bg-gradient-summer-night-0   { background: var(--gradient-summer-night-0)   !important; }
.bg-gradient-summer-night-45  { background: var(--gradient-summer-night-45)  !important; }
.bg-gradient-summer-night-90  { background: var(--gradient-summer-night-90)  !important; }
.bg-gradient-summer-night-180 { background: var(--gradient-summer-night-180) !important; }
.bg-gradient-blues-0          { background: var(--gradient-blues-0)          !important; }
.bg-gradient-blues-45         { background: var(--gradient-blues-45)         !important; }
.bg-gradient-blues-90         { background: var(--gradient-blues-90)         !important; }
.bg-gradient-blues-180        { background: var(--gradient-blues-180)        !important; }

/* === Component Styles === */
.card {
  border-radius: var(--border-radius-card);
  margin-bottom: 1.5rem;
}
.card.h-100 {
  margin-bottom: 0;
}
.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;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  line-height: 1;
}

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

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

.icon-stacked::before {
  color: var(--color-brand-cobalt);
}

/* Mega-dropdown tile icons: white icon on highlight-purple circle for contrast */
.jgha-mega-dropdown-group .icon-stacked {
  color: var(--color-white);
}

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

.icon-stacked.light-base::before {
  color: rgba(165, 42, 255, 0.25);
}

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

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

.icon-stacked.square {
  border-radius: 0;
}
.icon-stacked.square::before {
  font-family: 'Font Awesome 7 Sharp';
  content: '\f0c8';
}

.icon-stacked.purple-base {
  color: var(--color-brand-deep-blue);
}
.icon-stacked.purple-base::before {
  color: var(--color-brand-cobalt);
}

.icon-stacked.maroon-base {
  color: var(--color-white);
  flex-shrink: 0;
}
.icon-stacked.maroon-base::before {
  color: var(--color-brand-maroon);
}

.icon-stacked.deep-blue-base {
  color: var(--color-neutral-50);
  flex-shrink: 0;
}
.icon-stacked.deep-blue-base::before {
  color: var(--color-brand-deep-blue);
}

.icon-stacked.cloud-blue-base {
  color: var(--color-white);
  flex-shrink: 0;
}
.icon-stacked.cloud-blue-base::before {
  color: var(--color-brand-cloud-blue);
}

.icon-stacked.cobalt-base {
  color: var(--color-white);
  flex-shrink: 0;
}
.icon-stacked.cobalt-base::before {
  color: var(--color-brand-cobalt);
}

.icon-stacked.xs {
  font-size: 0.5rem;
}

.icon-stacked.sm {
  font-size: 0.75rem;
}

.icon-stacked.md {
  font-size: 1rem;
}

.icon-stacked.lg {
  font-size: 1.5rem;
}

.icon-stacked.xl {
  font-size: 2rem;
}

.icon-stacked.xxl {
  font-size: 3rem;
}

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

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

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

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

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

/* Service Area Callout */
.jgha-service-area-callout {
  position: relative;
  overflow: hidden;
  border-radius: var(--border-radius-large);
  background: linear-gradient(
    to bottom,
    var(--color-brand-deep-blue),
    var(--color-brand-cobalt)
  );
}
/* === Footer Styles === */
footer > .container {
  padding-top: 80px;
  padding-bottom: 80px;
}
footer h6 {
  font-family: var(--font-heading);
  font-weight: var(--font-weight-bold);
  font-size: 20px;
  line-height: 28px;
  color: var(--color-brand-cobalt);
  margin-bottom: 12px;
}
footer p {
  margin-bottom: 4px;
  color: var(--color-white);
  font-size: 16px;
  line-height: 24px;
}
footer p a {
  color: var(--color-white);
  font-family: var(--font-body);
  font-weight: var(--font-weight-regular);
}
footer p a:is(:hover, :active, :focus) {
  color: var(--color-brand-cobalt);
}
/* === Media Queries === */
@media (max-width: 1200px) {
  .navbar-nav,
  .shrink-menu .navbar-nav {
    height: fit-content;
  }
  .navbar-nav {
    width: auto;
  }
  .navbar {
    height: 80px;
    transition: height var(--transition-standard);
  }
  .shrink-menu .navbar {
    height: 65px;
  }
}

@media (max-width: 1200px) {
  .jgha-hero-intro {
    padding-top: 10rem;
    padding-bottom: 2rem;
  }
}

/* === Breadcrumbs ===
   Themed via Bootstrap 5.3 --bs-breadcrumb-* CSS variables. Vars must be set
   on the .breadcrumb element itself (BS declares them there with empty values
   that would otherwise shadow any parent-level overrides). */
.jgha-breadcrumbs .breadcrumb {
  --bs-breadcrumb-bg: var(--color-brand-cobalt);
  --bs-breadcrumb-border-radius: 0 0 20px 20px;
  --bs-breadcrumb-padding-x: 1.25rem;
  --bs-breadcrumb-padding-y: 0.875rem;
  --bs-breadcrumb-divider-color: var(--color-brand-cloud-blue);
  --bs-breadcrumb-item-padding-x: 0;
  --bs-breadcrumb-item-active-color: rgba(255, 255, 255, 0.85);
  --bs-breadcrumb-margin-bottom: 0;
  gap: 0.6rem;
  align-items: center;
  font-family: "Barlow Semi Condensed", sans-serif;
  font-weight: 400;
  font-size: 0.95rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.jgha-breadcrumbs .breadcrumb-item,
.jgha-breadcrumbs .breadcrumb-item a {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
}
.jgha-breadcrumbs .breadcrumb-item a {
  color: #fff;
  text-decoration: none;
  transition: color 0.15s ease;
}
.jgha-breadcrumbs .breadcrumb-item a:hover,
.jgha-breadcrumbs .breadcrumb-item a:focus {
  color: #fff;
  text-decoration: underline;
}
/* FA chevron-right divider (overrides BS default "/" content) */
.jgha-breadcrumbs .breadcrumb-item + .breadcrumb-item::before {
  font-family: "Font Awesome 7 Pro";
  font-weight: 900;
  content: "\f054";
  font-size: 0.7rem;
}
@media (max-width: 575.98px) {
  .jgha-breadcrumbs {
    --bs-breadcrumb-padding-x: 1rem;
    --bs-breadcrumb-padding-y: 0.75rem;
  }
  .jgha-breadcrumbs .breadcrumb {
    font-size: 0.85rem;
  }
}