/* === Red Barn Media Group - Hobbs Heating & Air === */
/* === Self-hosted Fonts === */
/* Sen (headings) — SIL OFL 1.1, https://github.com/philatype/Sen. Variable 400–800.
   Subsets mirror Google Fonts; the browser only fetches the subset a page needs. */
@font-face {
  font-family: 'Sen';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('/fonts/sen-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Sen';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('/fonts/sen-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Inter (body) — SIL OFL 1.1, https://rsms.me/inter. Variable 100–900. */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/fonts/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/fonts/inter-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Barlow SemiBold (labels/overlines/nav/buttons) — SIL OFL 1.1, https://github.com/jpt/barlow. 600 only. */
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/barlow-600-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/barlow-600-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Metric-matched fallbacks — Arial resized to each web font's width + line metrics (computed
   from the font files with fontTools on the site's own copy), so the font-display:swap moment
   doesn't reflow text and shift layout (CLS). Recompute if a web font file changes. */
@font-face {
  font-family: 'Sen Fallback';
  font-weight: 400 599;
  src: local('Arial'), local('ArialMT');
  size-adjust: 99.33%;
  ascent-override: 94.58%;
  descent-override: 26.55%;
  line-gap-override: 0%;
}
@font-face {
  font-family: 'Sen Fallback';
  font-weight: 600 800;
  src: local('Arial Bold'), local('Arial-BoldMT');
  size-adjust: 99.18%;
  ascent-override: 94.72%;
  descent-override: 26.59%;
  line-gap-override: 0%;
}
@font-face {
  font-family: 'Inter Fallback';
  font-weight: 100 549;
  src: local('Arial'), local('ArialMT');
  size-adjust: 107.18%;
  ascent-override: 90.39%;
  descent-override: 22.51%;
  line-gap-override: 0%;
}
@font-face {
  font-family: 'Inter Fallback';
  font-weight: 550 900;
  src: local('Arial Bold'), local('Arial-BoldMT');
  size-adjust: 103.15%;
  ascent-override: 93.92%;
  descent-override: 23.38%;
  line-gap-override: 0%;
}
@font-face {
  font-family: 'Barlow Fallback';
  font-weight: 100 900;
  src: local('Arial Bold'), local('Arial-BoldMT');
  size-adjust: 87.38%;
  ascent-override: 114.44%;
  descent-override: 22.89%;
  line-gap-override: 0%;
}

/* === CSS Custom Properties === */
:root {
  /* Brand Colors — hover tints are ~20% white mix of the base hex */
  --color-brand-hobbs-red: #D82119;
  --color-brand-hobbs-red-hover: #E04D47;
  --color-brand-rose-red: #8E1813;
  --color-brand-rose-red-hover: #A54642;
  --color-brand-darkest-red: #40070B;
  --color-brand-darkest-red-hover: #66393C;

  /* 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: #333333;

  /* Neutrals — only the variants currently referenced are defined.
     Add back from the Figma palette (200/400) if a future section needs one. */
  --color-neutral-50: #EEF0F5;
  --color-neutral-100: #E5E7EA;
  --color-neutral-300: #CCCED6;
  --color-neutral-500: #A9ABB4;
  --color-neutral-600: #8D919A;
  --color-neutral-700: #656870;

  /* Dark Mode — only the depth levels currently referenced are kept. Add back
     the unused 02/03/04/06/12dp from Figma if needed. */
  --color-dm-00dp: #121212;
  --color-dm-01dp: #1e1e1e;
  --color-dm-08dp: #2e2e2e;        /* Book Service button bg */
  --color-dm-08dp-hover: #595959;  /* ~20% white mix of 08dp */
  --color-dm-16dp: #353535;        /* Heading text on light bg */
  --color-dm-24dp: #383838;        /* Dark form input bg */

  /* Brighter overlay red (#FF2531) for glass icon circles + pills sitting over
     photo backgrounds. Distinct from Hobbs Red (#D82119) — this saturated
     tone reads correctly at 50% opacity on darkened photos. RGB form so it
     can be consumed via rgba() at variable opacity. */
  --color-overlay-red-rgb: 255, 37, 49;

  /* Gradients — two Figma gradient families, each at 5 angles (0/45/90/135/180).
     Edgy Colors: Rose Red → 00dp (dramatic, near-black).
     Lightening Up: Rose Red → Hobbs Red (vibrant red-on-red). */
  --gradient-edgy-colors-0: linear-gradient(
    0deg,
    var(--color-brand-rose-red),
    var(--color-dm-00dp)
  );
  --gradient-edgy-colors-45: linear-gradient(
    45deg,
    var(--color-brand-rose-red),
    var(--color-dm-00dp)
  );
  --gradient-edgy-colors-90: linear-gradient(
    90deg,
    var(--color-brand-rose-red),
    var(--color-dm-00dp)
  );
  --gradient-edgy-colors-135: linear-gradient(
    135deg,
    var(--color-brand-rose-red),
    var(--color-dm-00dp)
  );
  --gradient-edgy-colors-180: linear-gradient(
    180deg,
    var(--color-brand-rose-red),
    var(--color-dm-00dp)
  );
  --gradient-lightening-up-0: linear-gradient(
    0deg,
    var(--color-brand-rose-red),
    var(--color-brand-hobbs-red)
  );
  --gradient-lightening-up-45: linear-gradient(
    45deg,
    var(--color-brand-rose-red),
    var(--color-brand-hobbs-red)
  );
  --gradient-lightening-up-90: linear-gradient(
    90deg,
    var(--color-brand-rose-red),
    var(--color-brand-hobbs-red)
  );
  --gradient-lightening-up-135: linear-gradient(
    135deg,
    var(--color-brand-rose-red),
    var(--color-brand-hobbs-red)
  );
  --gradient-lightening-up-180: linear-gradient(
    180deg,
    var(--color-brand-rose-red),
    var(--color-brand-hobbs-red)
  );

  /* Typography — Font Families (all self-hosted from /fonts/ — see @font-face above) */
  --font-heading: 'Sen', 'Sen Fallback', sans-serif;
  --font-body: 'Inter', 'Inter Fallback', sans-serif;
  --font-label: 'Barlow', 'Barlow Fallback', sans-serif;

  /* Typography — Weights (Figma uses 700/600/500/400; Sen Bold+Medium,
     Barlow SemiBold, Inter Regular/Medium/SemiBold) */
  --font-weight-bold: 700;
  --font-weight-semibold: 600;
  --font-weight-medium: 500;
  --font-weight-regular: 400;

  /* Typography sizing is handled by Bootstrap 5.3 utilities (.fs-1..6,
     .display-1..6, .small, .lead, .h1..h6) — no custom font-size scale. */

  /* 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);
  --shadow-card: 0 0 8px rgba(0, 0, 0, 0.05);
  --border-divider: var(--border-divider);
  --margin-standard: 1rem;
  --font-size-xs: 0.75rem;
}

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

/* In-page anchor targets (e.g. /#services, hub-page "Explore…" buttons) land below the fixed
   menu (~108px mobile / ~130px desktop) instead of underneath it. */
[id] {
  scroll-margin-top: 8.5rem;
}

body {
  color: var(--color-dm-00dp);
  font-family: var(--font-body);
  font-weight: var(--font-weight-regular);
  background-color: var(--color-white);
}

/* Reserve Font Awesome icon boxes before the (non-blocking) kit CSS arrives —
   mirrors the kit's own base rule so icons don't shift text when it loads. */
.fa-solid,
.fa-regular,
.fa-brands {
  display: var(--fa-display, inline-block);
  width: var(--fa-width, 1.25em);
  line-height: 1;
}

/* === 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;
}

/* Lighter-weight heading variant — Figma Medium pair (500) for every level */
h1.regular, .h1.regular,
h2.regular, .h2.regular,
h3.regular, .h3.regular,
h4.regular, .h4.regular,
h5.regular, .h5.regular { font-weight: var(--font-weight-medium); }

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

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

/* === Menu Styles === */
.menu-container {
  background: transparent;
  margin-top: 0 !important;
}
.menu-container.shrink-menu {
  margin-top: 0 !important;
}
/* Navigation Links — Barlow SemiBold 14/16 uppercase (Figma top-nav label spec) */
.menu-container .navbar-nav .nav-link {
  color: var(--color-dm-00dp);
  font-family: var(--font-label);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  letter-spacing: 0;
  white-space: nowrap;
}

.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: '\f078';                          /* fa-chevron-down (FA regular) */
  color: var(--color-brand-hobbs-red);
  font: var(--fa-font-regular);
  border: 0;
  margin-left: 0;
  font-size: 0.85em;
  vertical-align: middle;
  transition: transform var(--transition-standard);
}

.has-dropdown[aria-expanded="true"]::after {
  transform: rotate(180deg);
}

/* Mobile/tablet (xl-) — larger touch targets, allow wrapping, gap items */
@media (max-width: 1199.98px) {
  .menu-container .navbar-nav .nav-link {
    padding: 0.75rem 0.5rem;
    white-space: normal;
  }
}

/* Narrow xl (1200–1279px) — the left link group is ~38px wider than its
   column, sliding "Other Services" under the overhanging logo. Trim the
   side padding just in this band; wider viewports keep the 0.5rem spec. */
@media (min-width: 1200px) and (max-width: 1279.98px) {
  .menu-container .navbar-nav .nav-link {
    padding-left: 0.25rem;
    padding-right: 0.25rem;
  }
}

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

/* Dropdown Styles */
.nav-item .dropdown-item {
  color: var(--color-dm-00dp);
  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-dm-00dp) !important;
}

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

.hha-mega-dropdown-row {
  background-color: var(--color-white);
  border-radius: var(--border-radius-standard);
}

.hha-mega-card {
  background-color: color-mix(in srgb, var(--color-brand-hobbs-red) 8%, white);
  border: 1px solid transparent;
  border-radius: var(--border-radius-standard);
  padding: 1rem;
  height: 100%;
  transition: background-color var(--transition-standard), border-color var(--transition-standard);
}
.hha-mega-card:is(:hover, :focus, :active) {
  background-color: var(--color-neutral-50);
  border-color: var(--color-brand-hobbs-red);
}

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

.hha-mega-dropdown-group p {
  font-family: var(--font-heading);
  color: var(--color-dm-00dp);
  transition-duration: var(--transition-standard);
  font-weight: var(--font-weight-bold);
  margin-bottom: 0rem;
}
.hha-mega-card:is(:hover, :focus, :active) p {
  color: var(--color-brand-rose-red);
}
.hha-mega-dropdown-group a {
  color: var(--color-brand-rose-red);
  text-decoration: none;
  transition: color var(--transition-standard);
}
.hha-mega-dropdown-group a:is(:hover, :focus, :active) {
  color: var(--color-brand-rose-red);
}

/* Logo (desktop) — SVG is taller than the 98px nav row. Anchored at the row's
   top and allowed to overflow downward, the bottom "shape" of the SVG hangs
   over the hero section. The SVG itself contains the framed oval that creates
   the hanging shape; no extra CSS is needed for the frame.
   Sizes tier with viewport so the logo never crowds the side nav at xl. */
.hha-logo-desktop {
  display: block;
  height: 120px;
  width: auto;
  transition: height var(--transition-standard);
  margin-top: -0.75rem;
}

@media (min-width: 1600px) {
  .hha-logo-desktop {
    height: 152px;
    margin-top: -1.35rem;
  }
}

/* Scrolled state — logo shrinks but still overhangs a bit */
.shrink-menu .hha-logo-desktop {
  height: 100px;
}

@media (min-width: 1600px) {
  .shrink-menu .hha-logo-desktop {
    height: 112px;
  }
}

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

/* Sub-nav — edgy-colors 90° gradient (rose-red left → 00dp right), edge-to-edge */
.hha-subnav {
  background: var(--gradient-edgy-colors-90);
  padding: 0.25rem 0;
}
.hha-subnav-link {
  font-family: var(--font-label);
  font-weight: var(--font-weight-semibold);
  color: var(--color-neutral-50);
  text-transform: uppercase;
  text-decoration: none;
  letter-spacing: 0;
}
.hha-subnav-link:is(:hover, :focus, :active) {
  color: var(--color-neutral-50);
  text-decoration: underline;
}
.hha-subnav-callout {
  font-family: var(--font-label);
  font-weight: var(--font-weight-semibold);
  color: var(--color-neutral-50);
  text-transform: uppercase;
  letter-spacing: 0;
}
.hha-subnav-social {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.25rem;
  height: 1.25rem;
  color: var(--color-neutral-50);
  font-size: 0.875rem;
  text-decoration: none;
  transition: opacity var(--transition-standard);
}
.hha-subnav-social:hover,
.hha-subnav-social:focus-visible {
  color: var(--color-neutral-50);
  opacity: 0.75;
  text-decoration: none;
  outline: none;
}

/* Main nav — flat 98px white bar, full-width (no card radius/shadow at xl+).
   At xl+ uses a 3-column layout: left links | center logo (overhangs) | right
   links + CTAs. The logo extends ~54px below the nav bar via overflow: visible. */
.hha-mainnav {
  background-color: var(--color-white);
  position: relative;
  overflow: visible;
  padding: 0.75rem 1.5rem;
}

@media (min-width: 1200px) {
  .hha-mainnav {
    padding: 0.75rem 1.5rem;
    min-height: 98px;
  }
}

@media (min-width: 1600px) {
  .hha-mainnav {
    padding: 0.75rem 5rem;
  }
}

/* xl+ desktop nav row — 3-col flex with the logo wrapper as a fixed-width
   centerpiece. The logo is taller than the row, so it hangs over the bottom.
   Gap tightens at smaller xl widths and opens up at xxl+ for breathing room.
   At xl- the offcanvas-body falls back to default block + Bootstrap's
   .navbar-nav flex-column, stacking items vertically in the slide-in panel. */
@media (min-width: 1200px) {
  .hha-mainnav-row {
    display: flex;
    align-items: center;
    width: 100%;
    gap: 0.75rem;
  }

  .hha-mainnav-side {
    flex: 1 1 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
  }

  .hha-mainnav-side--right {
    justify-content: flex-end;
  }
}

@media (min-width: 1600px) {
  .hha-mainnav-row { gap: 1.6875rem; }
  .hha-mainnav-side { gap: 1.6875rem; }
}

/* Logo wrapper — fixed-width flex item, doesn't push the row taller.
   align-items: flex-start lets the logo extend down past the row.
   Wrapper width tiers with viewport (matches logo size at xl vs 1600+). */
.hha-mainnav-logo-wrapper {
  flex: 0 0 280px;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  align-self: stretch;
  height: 0;
}

@media (min-width: 1600px) {
  .hha-mainnav-logo-wrapper {
    flex: 0 0 354px;
  }
}

/* CTA group — Contact Us + Phone. 8px gap per Figma. flex-shrink: 0 on the
   buttons themselves so their text never wraps under flex pressure. */
.hha-mainnav-cta {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-left: 0.5rem;
  flex-shrink: 0;
}

.hha-mainnav-cta .btn {
  margin-bottom: 0;
  flex-shrink: 0;
  white-space: nowrap;
  padding: 0.5rem 0.75rem;
  font-size: 0.8rem;
}

@media (min-width: 1600px) {
  .hha-mainnav-cta .btn {
    padding: 0.75rem 1rem;
    font-size: 0.875rem;
  }
}

/* xl-down — navbar collapses to padding-based fit-content; padding shrinks on scroll */
@media (max-width: 1199.98px) {
  .navbar-nav,
  .shrink-menu .navbar-nav {
    height: fit-content;
  }
  .navbar-nav {
    width: auto;
  }
  .navbar {
    height: fit-content;
    padding-top: 0.85rem;
    padding-bottom: 1rem;
    transition: padding var(--transition-standard);
  }
  .shrink-menu .navbar {
    height: fit-content;
    padding-top: 0.75rem;
    padding-bottom: 0.65rem;
  }
}

/* === Button Styles ===
   Figma button label spec: Barlow SemiBold 14/16, padding 12px 16px, 8px radius. */
.btn {
  padding: 0.75rem 1rem;
  font-family: var(--font-label);
  font-weight: var(--font-weight-semibold);
  border-radius: 0.5rem;
  margin-bottom: 1rem;
  transition: all var(--transition-standard);
  text-transform: uppercase;
  border-width: 0.125rem;
}

.btn.btn-menu {
  font-size: 0.85rem;
}

/* Brand Buttons — Filled */
.btn-darkest-red {
  background-color: var(--color-brand-darkest-red);
  border-color: var(--color-brand-darkest-red);
  color: var(--color-white);
}
.btn-darkest-red:is(:hover, :focus, :active) {
  background-color: var(--color-brand-darkest-red-hover);
  border-color: var(--color-brand-darkest-red-hover);
  color: var(--color-white);
}

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

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

/* Dark Mode 08dp button — Book Service / dark CTA pair */
.btn-dm-08dp {
  background-color: var(--color-dm-08dp);
  border-color: var(--color-dm-08dp);
  color: var(--color-neutral-50);
}
.btn-dm-08dp:is(:hover, :focus, :active) {
  background-color: var(--color-dm-08dp-hover);
  border-color: var(--color-dm-08dp-hover);
  color: var(--color-neutral-50);
}

/* Brand Buttons — Outline */
.btn-outline-darkest-red {
  background-color: transparent;
  border-color: var(--color-brand-darkest-red);
  color: var(--color-brand-darkest-red);
}
.btn-outline-darkest-red:is(:hover, :focus, :active) {
  background-color: var(--color-brand-darkest-red);
  border-color: var(--color-brand-darkest-red);
  color: var(--color-white);
}

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

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

/* White outline — for secondary CTAs on dark gradient sections (e.g. About) */
.btn-outline-white {
  background-color: transparent;
  border-color: var(--color-neutral-50);
  color: var(--color-neutral-50);
}
.btn-outline-white:is(:hover, :focus, :active) {
  background-color: var(--color-neutral-50);
  border-color: var(--color-neutral-50);
  color: var(--color-brand-rose-red);
}

/* === Brand Link Styles === */
.link-darkest-red {
  color: var(--color-brand-darkest-red);
  text-decoration: none;
  transition: color var(--transition-standard);
}
.link-darkest-red:is(:hover, :focus, :active) {
  color: var(--color-brand-darkest-red-hover);
  text-decoration: underline;
}

.link-hobbs-red {
  color: var(--color-brand-hobbs-red);
  text-decoration: none;
  transition: color var(--transition-standard);
}
.link-hobbs-red:is(:hover, :focus, :active) {
  color: var(--color-brand-hobbs-red-hover);
  text-decoration: underline;
}

.link-rose-red {
  color: var(--color-brand-rose-red);
  text-decoration: none;
  transition: color var(--transition-standard);
}
.link-rose-red:is(:hover, :focus, :active) {
  color: var(--color-brand-rose-red-hover);
  text-decoration: underline;
}

/* Light-on-dark variant — for links sitting on red/dark backgrounds where the
   red link-* variants would fail contrast. Underline is always-on so the link
   is discoverable against same-color surrounding white text. */
.link-white {
  color: var(--color-white);
  text-decoration: underline;
  transition: color var(--transition-standard);
}
.link-white:is(:hover, :focus, :active) {
  color: var(--color-white-hover);
  text-decoration: underline;
}

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

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

/* UNIQUE BLUE */
.bg-brand-hobbs-red {
  background-color: var(--color-brand-hobbs-red) !important;
}
.text-brand-hobbs-red {
  color: var(--color-brand-hobbs-red) !important;
}
.border-brand-hobbs-red {
  border-color: var(--color-brand-hobbs-red) !important;
}

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

/* BACKGROUND BLUE */
.bg-brand-rose-red {
  background-color: var(--color-brand-rose-red) !important;
}
.text-brand-rose-red {
  color: var(--color-brand-rose-red) !important;
}
.border-brand-rose-red {
  border-color: var(--color-brand-rose-red) !important;
}

/* === Gradient Utility Classes === */
.bg-gradient-edgy-colors-0    { background: var(--gradient-edgy-colors-0)    !important; }
.bg-gradient-edgy-colors-45   { background: var(--gradient-edgy-colors-45)   !important; }
.bg-gradient-edgy-colors-90   { background: var(--gradient-edgy-colors-90)   !important; }
.bg-gradient-edgy-colors-135  { background: var(--gradient-edgy-colors-135)  !important; }
.bg-gradient-edgy-colors-180  { background: var(--gradient-edgy-colors-180)  !important; }
.bg-gradient-lightening-up-0   { background: var(--gradient-lightening-up-0)   !important; }
.bg-gradient-lightening-up-45  { background: var(--gradient-lightening-up-45)  !important; }
.bg-gradient-lightening-up-90  { background: var(--gradient-lightening-up-90)  !important; }
.bg-gradient-lightening-up-135 { background: var(--gradient-lightening-up-135) !important; }
.bg-gradient-lightening-up-180 { background: var(--gradient-lightening-up-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-white);
}

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

/* Mega-dropdown tile icons: white icon stays white on the colored circle */
.hha-mega-dropdown-group .icon-stacked {
  color: var(--color-white);
}

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

.icon-stacked.gradient-edgy-colors::before {
  background: var(--gradient-edgy-colors-45);
  -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.hobbs-red-base {
  color: var(--color-white);
  flex-shrink: 0;
}
.icon-stacked.hobbs-red-base::before {
  color: var(--color-brand-hobbs-red);
}

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

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

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

/* Numbered variant — same circle as other variants, but inner content is a digit instead of an FA icon. Markup: <span class="icon-stacked numbered darkest-red-base lg"><span>1</span></span>. Pair with a color-base variant and size modifier. */
.icon-stacked.numbered {
  font-family: var(--font-heading);
  font-weight: var(--font-weight-bold);
  line-height: 1;
}

.icon-stacked.numbered > span {
  position: relative;
  z-index: 1;
  font-size: 1em;
  display: inline-block;
}

/* === Fixed-header clearance ===
   .menu-container is .fixed-top, so page content must reserve its height: ~116px below md,
   ~120px md–lg, and at xl+ the bar is 130px with the logo badge hanging to ~169px. */
:root {
  --hha-header-clearance: 7.5rem;
}
@media (min-width: 1200px) {
  :root {
    --hha-header-clearance: 11.5rem;
  }
}

/* Pages without a hero (contact, thank-you) render platform markup straight into <main> */
main:not(:has(> .hha-hero)) {
  padding-top: calc(var(--hha-header-clearance) + 2rem);
  padding-bottom: 3rem;
}

/* === Hero === */
.hha-hero {
  position: relative;
  padding-top: calc(var(--hha-header-clearance) + 2rem);
  padding-bottom: 5rem;
  overflow: hidden;
  background-color: var(--color-brand-darkest-red);
}
@media (min-width: 1200px) {
  .hha-hero {
    padding-top: 24rem;
    padding-bottom: 14rem;
  }
}

.hha-hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
}
/* Cover rule for every hero's background <img> — sub-page <picture> heroes
   and the home-page video poster alike. */
.hha-hero-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* Home page only: stacked poster + looping video, both filling the hero. */
.hha-hero-poster,
.hha-hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
.hha-hero-video {
  object-fit: cover;
}
.hha-hero-poster {
  z-index: 0;
}
.hha-hero-video {
  z-index: 1;
}
/* Fade the video in once playback actually starts, so the hand-off from the
   static poster is a smooth cross-fade instead of an abrupt flash. JS adds
   .is-playing (custom.js); the <noscript> fallback in hha-hero-bg.php keeps the
   video visible when JS is unavailable. */
.hha-hero-bg--video .hha-hero-video {
  opacity: 0;
  transition: opacity 0.45s ease-in;
}
.hha-hero-bg--video .hha-hero-video.is-playing {
  opacity: 1;
}
/* Dark scrim — scoped to the home-page video hero (hha-hero-bg--video) only, so
   the image-based sub-page heroes keep their original look. */
.hha-hero-bg--video::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.45) 0%, rgba(0, 0, 0, 0.3) 45%, rgba(0, 0, 0, 0.5) 100%);
  pointer-events: none;
}

.hha-hero-content {
  position: relative;
  z-index: 2;
}

.hha-hero-heading {
  font-family: var(--font-heading);
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  color: var(--color-white);
}

.hha-hero-subheading {
  font-family: var(--font-heading);
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  color: var(--color-white);
}

.hha-hero-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  border-radius: 9999px;
  background-color: color-mix(in srgb, var(--color-brand-hobbs-red) 25%, transparent);
  border: 1px solid rgba(255, 255, 255, 0.4);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  font-family: var(--font-label);
  font-weight: var(--font-weight-semibold);
  color: var(--color-neutral-50);
  text-transform: uppercase;
  transition: background-color var(--transition-standard), border-color var(--transition-standard);
}
.hha-hero-pill:is(:hover, :focus, :active) {
  background-color: var(--color-brand-hobbs-red);
  border-color: var(--color-brand-hobbs-red);
}

.hha-hero-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  background-color: var(--color-white);
  border-radius: 0.5rem;
  text-decoration: none;
  color: var(--color-brand-darkest-red);
  font-family: var(--font-label);
  font-size: 1.25rem;
  line-height: 1.2;
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  transition: background-color var(--transition-standard), color var(--transition-standard);
}
.hha-hero-cta:is(:hover, :focus, :active) {
  background-color: var(--color-neutral-50);
  color: var(--color-brand-darkest-red);
}
.hha-hero-cta-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.625rem;
  height: 1.625rem;
  background-color: var(--color-brand-hobbs-red);
  border-radius: 0.25rem;
  color: var(--color-white);
  font-size: 1rem;
  flex-shrink: 0;
}

.hha-hero-accreditations {
  margin-top: 0.5rem;
}
/* Height comes from each <img>'s height attribute (width follows its aspect ratio), so the
   accreditation row reserves its space before the logos load — `height: auto` here collapsed the
   row to 0px until download and shifted everything below the hero (CLS). */
.hha-hero-logo {
  max-height: 4rem;
  width: auto;
}

.hha-hero-arch {
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 100%;
  height: auto;
  pointer-events: none;
  z-index: 1;
  display: block;
}

/* === Company Video Embed ===
   Responsive 16:9 click-to-play eLocalLink player (see hha-video-embed.php).
   Reused on the home page, About Us, and Meet the Team. */
.hha-video-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background-color: #000;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.22);
}
.hha-video-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* === Customer Reviews ===
   White section: rose-red tab-underline overline + dark 16dp heading, Elfsight
   Google Reviews widget (cards rendered by Elfsight), CTA pair underneath. */
.hha-reviews {
  padding: 4rem 0 5rem;
}

/* Tab-style overline — text with a 4px rose-red underline. Different from the
   filled-pill overlines used in services/opening. */
.hha-reviews-overline {
  display: inline-block;
  padding: 0.625rem 1.25rem;
  border-bottom: 4px solid var(--color-brand-rose-red);
  font-family: var(--font-label);
  font-weight: var(--font-weight-semibold);
  font-size: var(--fs-overline-lg);
  line-height: var(--lh-overline-lg);
  color: var(--color-brand-rose-red);
  text-transform: uppercase;
  letter-spacing: 0;
}

/* Section heading — lighter than the default --color-dm-00dp per Figma 16dp. */
.hha-reviews-heading {
  color: var(--color-dm-16dp);
}

/* === Financing / Maintenance Plans ===
   Two-tab section: Bootstrap nav-tabs toggle between Flexible Financing and
   Preventative Care Maintenance Plans. Shared header (overline + h2 + intro)
   sits between the tab row and the active pane. Each pane = banner image
   (col-lg-4) + dark gradient content panel (col-lg-8) with overline + heading
   + intro + 2×2 benefit grid + phone callout + CTA pair. */
.hha-finance {
  padding: 5rem 0 4rem;
}

/* Tab row — 2 equal-width segments. Bootstrap nav-tabs base reset (no
   underline, no border-bottom). */
.hha-finance-tabs {
  --bs-nav-tabs-border-width: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  list-style: none;
  padding: 0;
  margin: 0;
}

.hha-finance-tabs .nav-item {
  flex: 1 1 0;
  min-width: 0;
}

.hha-finance-tab {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.625rem;
  width: 100%;
  height: 100%;
  padding: 0.75rem 1rem;
  border-radius: 0.5rem;
  border: 2px solid var(--color-neutral-300);
  background-color: transparent;
  color: var(--color-neutral-700);
  font-family: var(--font-heading);
  font-weight: var(--font-weight-medium);
  font-size: var(--fs-h5);
  line-height: var(--lh-h5);
  text-transform: uppercase;
  text-align: left;
  cursor: pointer;
  transition: background-color var(--transition-standard),
              border-color var(--transition-standard),
              color var(--transition-standard);
}

.hha-finance-tab:hover:not(.active) {
  border-color: var(--color-brand-hobbs-red);
  color: var(--color-brand-rose-red);
}

.hha-finance-tab.active {
  background-color: var(--color-brand-rose-red);
  border-color: var(--color-brand-rose-red);
  color: var(--color-neutral-50);
  font-weight: var(--font-weight-bold);
  font-size: var(--fs-h4);
  line-height: var(--lh-h4);
}

.hha-finance-tab-label {
  flex: 1 0 0;
  min-width: 0;
}

/* Icon button on the right of each tab — themed glyph (piggy-bank for
   financing, toolbox for maintenance). Stays on a light neutral-50 chip in
   both states; the glyph swaps from fa-regular rose-red to fa-solid bright
   overlay-red on activation, signaling the selected pane. */
.hha-finance-tab-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 0.25rem;
  background-color: var(--color-neutral-50);
  color: var(--color-brand-rose-red);
  font-size: 1rem;
  flex-shrink: 0;
  transition: color var(--transition-standard);
}

.hha-finance-tab.active .hha-finance-tab-icon {
  color: rgb(var(--color-overlay-red-rgb));
}

/* fa-regular (weight 400) when inactive → fa-solid (weight 900) when active */
.hha-finance-tab i.fa-regular {
  font-weight: 400;
  transition: font-weight var(--transition-standard);
}

.hha-finance-tab.active i.fa-regular {
  font-weight: 900;
}

/* Banner image col — fills col height at lg+ via object-fit cover */
.hha-finance-image {
  height: 100%;
  min-height: 18rem;
  border-radius: 1.25rem;
  overflow: hidden;
}

.hha-finance-image picture,
.hha-finance-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Content panel — vertical edgy-colors gradient (rose-red → 00dp) */
.hha-finance-panel {
  background: var(--gradient-edgy-colors-180);
  border-radius: 1.25rem;
  padding: 1.75rem;
  color: var(--color-neutral-50);
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.hha-finance-panel-overline {
  display: inline-block;
  font-family: var(--font-label);
  font-weight: var(--font-weight-semibold);
  font-size: var(--fs-overline-lg);
  line-height: var(--lh-overline-lg);
  text-transform: uppercase;
  letter-spacing: 0;
  color: var(--color-neutral-100);
}

.hha-finance-panel-title {
  font-family: var(--font-heading);
  font-weight: var(--font-weight-bold);
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  text-transform: uppercase;
  color: var(--color-neutral-50);
  margin: 0.25rem 0 0.75rem 0;
}

.hha-finance-panel-desc {
  font-family: var(--font-body);
  font-size: var(--fs-p-md);
  line-height: var(--lh-p-md);
  color: var(--color-neutral-50);
  margin: 0;
}

.hha-finance-panel-cta-text {
  font-family: var(--font-body);
  font-size: var(--fs-p-md);
  line-height: var(--lh-p-md);
  color: var(--color-neutral-50);
  margin: 0;
}

.hha-finance-phone {
  color: var(--color-neutral-50);
  font-weight: var(--font-weight-bold);
  text-decoration: underline;
  transition: opacity var(--transition-standard);
}

.hha-finance-phone:hover,
.hha-finance-phone:focus {
  color: var(--color-neutral-50);
  opacity: 0.85;
}

/* Benefit card — light neutral-50 card inside the dark panel */
.hha-finance-benefit {
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 0.75rem;
  background-color: var(--color-neutral-50);
  border-radius: 0.75rem;
}

.hha-finance-benefit-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  color: var(--color-brand-hobbs-red);
  font-size: 1.5rem;
  flex-shrink: 0;
}

.hha-finance-benefit-title {
  font-family: var(--font-label);
  font-weight: var(--font-weight-semibold);
  font-size: var(--fs-label-lg);
  line-height: var(--lh-label-lg);
  text-transform: uppercase;
  color: var(--color-dm-00dp);
  margin: 0;
}

.hha-finance-benefit-desc {
  font-family: var(--font-body);
  font-weight: var(--font-weight-regular);
  font-size: var(--fs-p-xs);
  line-height: var(--lh-p-xs);
  color: var(--color-dm-00dp);
  margin: 0;
}

/* Joined "Apply" button (rounded-left) + Wells Fargo co-brand tile (rounded-
   right). Wrapper uses Bootstrap utilities (d-inline-flex align-items-stretch
   in HTML); only the corner overrides + co-brand tile styling live here. */
.hha-finance-cta-btn {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  margin-bottom: 0;
}

.hha-finance-cta-logo {
  display: inline-flex;
  align-items: center;
  padding: 0 1rem;
  border: 2px solid var(--color-brand-hobbs-red);
  border-left: 0;
  border-top-right-radius: 0.5rem;
  border-bottom-right-radius: 0.5rem;
  background-color: transparent;
}

.hha-finance-cta-logo img {
  display: block;
  height: 1rem;
  width: auto;
}

/* === Banner ===
   Full-bleed shop photo. Sits as a visual break between the finance/maintenance
   section (white bg) above and the About section (rose-red gradient) below.
   The arch SVG overlays the top edge to create the curved cut from the white
   section above. A rose-red → 00dp gradient overlay tints the image and
   visually blends into the About section's gradient bg. */
.hha-banner {
  position: relative;
  overflow: hidden;
  background-color: var(--color-brand-rose-red);
}

.hha-banner-arch {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
  z-index: 2;
  pointer-events: none;
  user-select: none;
}

.hha-banner::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 0%, var(--color-brand-rose-red) 100%);
  pointer-events: none;
  z-index: 1;
}

/* === About Us ===
   Vertical gradient panel (rose-red → 00dp) following the banner. Two-col at
   lg+: heading + sub-heading + accolade card on the left, three-paragraph
   story + CTA pair on the right. White text throughout. */
.hha-about {
  background: var(--gradient-edgy-colors-180);
  padding: 4rem 0 5rem;
  color: var(--color-neutral-50);
}

@media (min-width: 992px) {
  .hha-about {
    padding: 5rem 0;
  }
}

/* Tab-underline overline (same pattern as .hha-reviews-overline) but with
   white text for the dark gradient bg. */
.hha-about-overline {
  display: inline-block;
  padding: 0.625rem 1.25rem;
  border-bottom: 4px solid var(--color-brand-rose-red);
  font-family: var(--font-label);
  font-weight: var(--font-weight-semibold);
  font-size: var(--fs-overline-lg);
  line-height: var(--lh-overline-lg);
  color: var(--color-neutral-50);
  text-transform: uppercase;
  letter-spacing: 0;
}

/* Accolade card — light card with hand-heart icon left + paragraph right */
.hha-about-accolade-card {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  background-color: var(--color-neutral-50);
  border-radius: 0.75rem;
  padding: 1.25rem;
  color: var(--color-dm-00dp);
}

.hha-about-accolade-card p {
  font-size: var(--fs-p-xs);
  line-height: var(--lh-p-xs);
  color: var(--color-dm-00dp);
}

.hha-about-accolade-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 2.25rem;
  height: 2.25rem;
  color: var(--color-brand-hobbs-red);
  font-size: 2rem;
}

/* === Service Area ===
   Dark gradient (00dp top → rose-red bottom) bridging from the About section's
   gradient (rose-red → 00dp) into the truck-banner card below. Layout: 2-col
   at lg+ — left holds the heading + intro + 2×3 location-pill grid; right
   holds the map (col-lg-6 widths match Appendix A: LG 456 / XL 546 / XXL 636).
   The truck-banner row sits flush below. */
.hha-service-area {
  background: linear-gradient(0deg, var(--color-brand-rose-red) 0%, var(--color-dm-00dp) 82%);
  padding: 4rem 0;
  color: var(--color-neutral-50);
}

@media (min-width: 992px) {
  .hha-service-area {
    padding: 5rem 0;
  }
}

/* Location pill — small flex card. Inactive: neutral-50 fill, hobbs-red
   circle icon + darkest-red label. Featured (Azle): hobbs-red fill, darker
   icon, white label. Anchor variant lifts on hover/focus. */
.hha-location-pill {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  height: 100%;
  background-color: var(--color-neutral-50);
  border: 2px solid var(--color-neutral-50);
  border-radius: 0.5rem;
  padding: 0.75rem;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.05);
  text-decoration: none;
  transition: box-shadow var(--transition-standard), transform var(--transition-standard);
}

a.hha-location-pill:is(:hover, :focus) {
  box-shadow: 0 0 12px rgba(0, 0, 0, 0.12);
  transform: translateY(-1px);
}

.hha-location-pill-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  flex-shrink: 0;
  border-radius: 50%;
  background-color: var(--color-brand-hobbs-red);
  color: var(--color-white);
  font-size: 0.875rem;
}

.hha-location-pill-label {
  margin: 0;
  font-family: var(--font-label);
  font-weight: var(--font-weight-semibold);
  font-size: var(--fs-label-lg);
  line-height: var(--lh-label-lg);
  text-transform: uppercase;
  color: var(--color-brand-darkest-red);
}

/* Featured (home base — Azle) — hobbs-red fill on the pill, darkest-red
   icon backdrop, white label. */
.hha-location-pill.featured {
  background-color: var(--color-brand-hobbs-red);
  border-color: var(--color-brand-hobbs-red);
}

.hha-location-pill.featured .hha-location-pill-icon {
  background-color: var(--color-brand-darkest-red);
}

.hha-location-pill.featured .hha-location-pill-label {
  color: var(--color-white);
}

/* Map — col-md-6 sized image, rounded corners. */
.hha-service-area-map {
  border-radius: 1.25rem;
  overflow: hidden;
}

/* === Truck Banner ("Additional Communities Served") ===
   Full-width card sitting flush below the service-area row. Truck photo
   (col-lg-5) bleeds to the card's left edge with a red→transparent overlay
   so its right edge blends into the card's hobbs-red ↔ rose-red gradient.
   Content (col-lg-7) holds the H3, intro, and CTA pair. Image hides below
   lg; content takes full width on mobile. */
.hha-truck-banner {
  background: linear-gradient(224deg, var(--color-brand-hobbs-red) 33%, var(--color-brand-rose-red) 67%);
  border-radius: 1.25rem;
  overflow: hidden;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.05);
}

.hha-truck-banner-image {
  position: relative;
  overflow: hidden;
  height: 100%;
  min-height: 18rem;
}

.hha-truck-banner-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Red→transparent fade so the photo blends into the card's gradient on its
   right edge (image col sits flush with the content col at lg+). */
.hha-truck-banner-image::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(-89deg, rgba(167, 27, 21, 0.59) 0%, rgba(255, 255, 255, 0) 100%);
  pointer-events: none;
}

.hha-truck-banner-content {
  padding: 1.75rem;
  color: var(--color-neutral-50);
}

/* === Trust Closer ===
   Gradient panel + 5 advantage cards + hero-base arch divider. Cards lift and
   gain a 2px hobbs-red border on hover; title color shifts to hobbs-red. */
.hha-trust-closer {
  padding-top: 5rem;
  padding-bottom: 11.25rem;  /* 180px — clears the 88px arch with room above */
}

.hha-trust-card {
  background-color: var(--color-neutral-50);
  color: var(--color-dm-00dp);
  border: 2px solid transparent;
  border-radius: var(--border-radius-standard);
  text-decoration: none;
  transition: transform var(--transition-standard),
              border-color var(--transition-standard);
}

.hha-trust-card:hover,
.hha-trust-card:focus-visible {
  transform: translateY(-4px);
  border-color: var(--color-brand-hobbs-red);
  color: var(--color-dm-00dp);
  text-decoration: none;
}

.hha-trust-card-title {
  font-family: var(--font-label);
  line-height: 1.125;
  transition: color var(--transition-standard);
}

.hha-trust-card:hover .hha-trust-card-title,
.hha-trust-card:focus-visible .hha-trust-card-title {
  color: var(--color-brand-hobbs-red);
}

.hha-trust-arch {
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 100%;
  height: auto;
  pointer-events: none;
  display: block;
}

/* === FAQ ===
   Bootstrap accordion restyled per Figma: no item box / no chevron. Each item
   is a question with a bottom rule and a hobbs-red arrow icon that rotates on
   expand. Single-open behavior via shared data-bs-parent in HTML.
   Section bg = body bg (neutral-50) by transparency — don't set explicitly. */
.hha-faq {
  padding-bottom: 5rem;
}

.hha-faq .accordion-item {
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--color-neutral-300);
}

.hha-faq .accordion-button {
  background: transparent;
  font-family: var(--font-paragraph);
  font-size: 1.125rem;
  line-height: 1.444;
  padding: 1rem 0 0.5rem;
}

.hha-faq .accordion-button:not(.collapsed) {
  background: transparent;
  color: inherit;
}

.hha-faq .accordion-button::after {
  display: none;
}

.hha-faq-icon {
  transition: transform var(--transition-standard);
}

.hha-faq .accordion-button:not(.collapsed) .hha-faq-icon {
  transform: rotate(180deg);
}

.hha-faq .accordion-body {
  padding: 0 0 1rem;
}


/* === Brand Logo Strip ===
   Full-bleed endless horizontal scroller inside the .hha-services dark gradient,
   directly under the commercial callout. The track holds the logo set twice;
   @keyframes translates -50% (one full set's width) so the seam between sets is
   invisible — seamless loop. Edge mask fades logos into the dark gradient at the
   viewport edges. Pauses on hover/focus-within; respects prefers-reduced-motion. */
.hha-brand-strip-viewport {
  position: relative;
  width: 100%;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 5rem, #000 calc(100% - 5rem), transparent 100%);
          mask-image: linear-gradient(to right, transparent 0, #000 5rem, #000 calc(100% - 5rem), transparent 100%);
}

.hha-brand-strip-track {
  display: flex;
  flex-wrap: nowrap;
  flex-direction: row;
  align-items: center;
  gap: 3rem;
  width: max-content;
  padding-left: 0;
  margin: 0;
  list-style: none;
  animation: hha-brand-scroll 30s linear infinite;
}

.hha-brand-strip-viewport:hover .hha-brand-strip-track,
.hha-brand-strip-viewport:focus-within .hha-brand-strip-track {
  animation-play-state: paused;
}

/* Equal-sized slot per logo so visual weight is consistent regardless of the
   SVG's natural aspect. Logo scales inside via object-fit: contain. */
.hha-brand-strip-item {
  flex: 0 0 10rem;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 10rem;
  height: 3.5rem;
}

.hha-brand-strip-item img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

/* Carrier wordmark is a wide aspect ratio — at the default slot it reads
   smaller than the other marks. Widen its slot so the rendered height bumps
   up proportionally. */
.hha-brand-strip-item:has(img[src*="carrier-logo"]) {
  flex: 0 0 12rem;
  width: 12rem;
}

@keyframes hha-brand-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  .hha-brand-strip-track {
    animation: none;
    transform: none;
    flex-wrap: wrap;
    justify-content: center;
    width: auto;
  }
}

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

/* === Footer ===
   Dark dm-01dp panel, 4 columns (logo / H&C + IAQ / Light Comm + Other + Resources / Contact).
   All links inherit footer text color (neutral-50) and shift to hobbs-red on
   hover. RBMG attribution bar below uses the darker dm-00dp for layering. */
.hha-footer {
  background-color: var(--color-dm-01dp);
  color: var(--color-neutral-50);
  padding: 3rem 1rem;
}

@media (min-width: 992px) {
  .hha-footer {
    padding: 5rem;
  }
}

.hha-footer a {
  color: var(--color-neutral-50);
  text-decoration: none;
  transition: color var(--transition-standard);
}

.hha-footer a:hover,
.hha-footer a:focus-visible {
  color: var(--color-brand-hobbs-red);
}

.hha-footer-logo {
  display: block;
  width: 100%;
  max-width: 397px;
  height: auto;
}

.hha-footer-rbmg {
  background-color: var(--color-dm-00dp);
}

/* === Opening (About Us + 6 advantage cards w/ popovers + estimate form + emergency callout) === */
.hha-opening {
  padding-top: 5rem;
  padding-bottom: 5rem;
}
@media (max-width: 767.98px) {
  .hha-opening {
    padding-top: 3rem;
    padding-bottom: 3rem;
  }
}

/* Overline pill — rose-red border on white bg, hobbs-red text */
.hha-opening-overline {
  display: inline-block;
  padding: 0.625rem 1.25rem;
  border-bottom: 4px solid var(--color-brand-rose-red);
  font-family: var(--font-label);
  font-weight: var(--font-weight-semibold);
  color: var(--color-brand-hobbs-red);
  text-transform: uppercase;
}

/* Advantage Card — button reset, popover trigger, hover-swap fa-regular → fa-solid */
.hha-advantage-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  height: 100%;
  padding: 0.75rem;
  background-color: transparent;
  border: 0;
  border-radius: 0.75rem;
  text-align: center;
  cursor: pointer;
  transition: background-color var(--transition-standard);
}
.hha-advantage-card:hover {
  background-color: color-mix(in srgb, var(--color-brand-hobbs-red) 6%, white);
}
.hha-advantage-card:focus-visible {
  outline: 2px solid var(--color-brand-hobbs-red);
  outline-offset: 2px;
}

/* Icon circle — 40px (24px glyph + 8px padding each side per Figma) */
.hha-advantage-icon {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  background-color: var(--color-brand-hobbs-red);
  border-radius: 50%;
  color: var(--color-white);
}
.hha-advantage-icon > i {
  font-size: 1.25rem;
  line-height: 1;
}
/* Hover swap: same element, swap FA weight 400 (regular) → 900 (solid).
   FA 7 Pro loads both weights under the same font-family, so the glyph
   re-renders in place with no layout shift. */
.hha-advantage-card:is(:hover, :focus-visible) .hha-advantage-icon > i {
  font-weight: 900;
}

.hha-advantage-title {
  font-family: var(--font-label);
  font-weight: var(--font-weight-semibold);
  color: var(--color-brand-rose-red);
  text-transform: uppercase;
  line-height: 1.125;
}

/* Popover branding (scoped via data-bs-custom-class="hha-advantage-popover") */
.hha-advantage-popover {
  max-width: 22rem;
}
.hha-advantage-popover .popover-header {
  background-color: var(--color-brand-rose-red);
  color: var(--color-white);
  font-family: var(--font-heading);
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  border-bottom: 0;
  border-top-left-radius: calc(var(--bs-popover-border-radius) - var(--bs-popover-border-width));
  border-top-right-radius: calc(var(--bs-popover-border-radius) - var(--bs-popover-border-width));
}
.hha-advantage-popover .popover-body {
  color: var(--color-dm-00dp);
}

/* === Right column: Gradient-framed stack (form + emergency callout) === */
.hha-opening-stack {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  height: 100%;
  background: linear-gradient(180deg, var(--color-brand-rose-red) 0%, var(--color-dm-00dp) 100%);
  border: 8px solid var(--color-brand-rose-red);
  border-radius: 1.25rem;
}

/* Dark form card */
.hha-form-card {
  background-color: var(--color-dm-01dp);
  border-radius: 1.25rem;
  padding: 1.75rem;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.05);
  flex: 1 0 auto;
}

/* Style overrides for short-form.php inputs to match the Figma dark form */
.hha-form-card #small-contact-form label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.hha-form-card #small-contact-form .form-control {
  background-color: var(--color-dm-24dp);
  color: var(--color-white);
  border: 0;
  border-radius: 0.25rem;
  padding: 0.5rem;
  font-family: var(--font-label);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
}
.hha-form-card #small-contact-form .form-control::placeholder {
  color: var(--color-neutral-500);
  font-family: var(--font-label);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  opacity: 1;
}
.hha-form-card #small-contact-form .form-control:focus {
  background-color: var(--color-dm-24dp);
  color: var(--color-white);
  box-shadow: 0 0 0 2px var(--color-brand-hobbs-red);
}
.hha-form-card #small-contact-form textarea.form-control {
  min-height: 5rem;
}

/* Submit button — override the short-form.php default "btn-background-blue" to hobbs-red w/ trailing arrow */
.hha-form-card #small-contact-form #submit-form,
.hha-form-card #small-contact-form .btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background-color: var(--color-brand-hobbs-red) !important;
  border-color: var(--color-brand-hobbs-red) !important;
  color: var(--color-white) !important;
  border-radius: 0.5rem;
  padding: 0.75rem 1rem;
  font-family: var(--font-label);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  margin: 0;
}
.hha-form-card #small-contact-form #submit-form::after {
  content: "\f178"; /* FA 7 Pro: fa-arrow-right-long */
  font-family: "Font Awesome 7 Pro";
  font-weight: 900;
  margin-left: 0.5rem;
}

/* Emergency callout — rose-red panel with dark phone button */
.hha-emergency-callout {
  background-color: var(--color-brand-rose-red);
  border-radius: 0.75rem;
  padding: 1.75rem;
}
.hha-emergency-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
}

/* === Services (8 service cards in a 4×2 → 2×4 → stacked grid + commercial banner callout) ===
   Section uses padding-top + padding-bottom for internal breathing room.
   Gradient bg is applied via .bg-gradient-edgy-colors-180 utility class in HTML. */
.hha-services {
  color: var(--color-white);
  padding-top: 5rem;
  padding-bottom: 5rem;
}
@media (max-width: 767.98px) {
  .hha-services {
    padding-top: 3rem;
    padding-bottom: 3rem;
  }
}

/* Overline on dark gradient — rose-red underline blends with the bg start;
   intentional per Figma (the overline pill is white text on the dark gradient). */
.hha-services-overline {
  display: inline-block;
  padding: 0.625rem 1.25rem;
  border-bottom: 4px solid var(--color-brand-rose-red);
  font-family: var(--font-label);
  font-weight: var(--font-weight-semibold);
  color: var(--color-white);
  text-transform: uppercase;
}

/* Service Card — composes Bootstrap `.card h-100` (gives bg-white, flex-column,
   height:100%) + project's `.card.h-100` (gives margin-bottom: 0). This rule
   only adds: no border, larger radius per Figma. No overflow:clip here —
   image wrapper handles its own rounded corners, and clipping the card would
   trap the dropdown-menu inside it. */
.hha-service-card {
  border: 0;
  border-radius: 1.25rem;
}

/* Image wrapper — relative for icon positioning; ::after adds a dark gradient
   overlay so the icon reads against any underlying photo. Rounds its own top
   corners so the image clips to the card's radius without needing overflow on
   the card itself (which would trap the dropdown menu). */
.hha-service-card-image {
  position: relative;
  height: 180px;
  overflow: clip;
  border-top-left-radius: 1.25rem;
  border-top-right-radius: 1.25rem;
}
.hha-service-card-image picture,
.hha-service-card-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hha-service-card-image::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(18, 18, 18, 0.2) 0%, rgba(18, 18, 18, 0.5) 100%);
  pointer-events: none;
}

/* Icon circle — translucent bright-red bg by default, fully opaque on card
   hover/focus. Light-gray border. FA glyph weight swaps regular → solid via
   font-weight (FA 7 Pro loads both weights under the same family). */
.hha-service-card-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 86px;
  height: 86px;
  border-radius: 50%;
  background-color: rgba(var(--color-overlay-red-rgb), 0.5);
  border: 3px solid var(--color-neutral-300);
  color: var(--color-white);
  line-height: 1;
  transition: background-color var(--transition-standard);
}
.hha-service-card-icon > i {
  font-size: 2.25rem;
}
.hha-service-card:is(:hover, :focus-within) .hha-service-card-icon {
  background-color: rgb(var(--color-overlay-red-rgb));
}

/* Body — composes Bootstrap `.card-body` (gives flex:1 1 auto, padding).
   Padding-bottom reduced because the .card-footer takes the bottom area. */
.hha-service-card-body {
  padding: 1.75rem 1.75rem 1rem;
}

/* Footer — overrides Bootstrap `.card-footer` defaults (gray bg + top border)
   to a transparent continuation of the card. Houses the CTA so buttons align
   horizontally across cards regardless of varied body content height. */
.hha-service-card-footer {
  background-color: transparent;
  border-top: 0;
  padding: 0 1.75rem 1.75rem;
}

/* Tag chips — Barlow SemiBold uppercase 10px on Neutral-100 pills.
   10px is a one-off chip size (not part of any typography system). */
.hha-service-card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  margin: 0;
  padding: 0;
}
.hha-service-tag {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.5rem;
  border-radius: 300px;
  background-color: var(--color-neutral-100);
  color: var(--color-dm-16dp);
  font-family: var(--font-label);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  white-space: nowrap;
  font-size: 0.625rem;
  line-height: 1.2;
}

/* CTA (button or dropdown wrapper) — left-aligned, pushed to bottom of card */
.hha-service-card-cta {
  align-self: flex-start;
  margin-top: auto;
}
.hha-service-card-cta > .btn,
.hha-service-card-cta.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
}
/* Override the project default red has-dropdown chevron — needs to be white
   on the red button background */
.hha-service-card-cta .dropdown-toggle.has-dropdown::after {
  color: var(--color-white);
}
.hha-service-card-cta .dropdown-menu {
  border-radius: 0.5rem;
  border: 1px solid var(--color-neutral-100);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  padding: 0.5rem;
}
.hha-service-card-cta .dropdown-item {
  font-family: var(--font-label);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  color: var(--color-dm-16dp);
  border-radius: 0.375rem;
  padding: 0.5rem 0.75rem;
}
.hha-service-card-cta .dropdown-item:is(:hover, :focus, :active) {
  background-color: var(--color-neutral-100);
  color: var(--color-brand-hobbs-red);
}

/* === Below lg: image hides, icon moves above title (left-aligned), card
   becomes a vertical icon → title → tags → desc → CTA stack. Hover state
   (icon bg opacity swap) is preserved because we only change positioning. */
@media (max-width: 991.98px) {
  .hha-service-card-image {
    height: auto;
    padding: 1.75rem 1.75rem 0;
    overflow: visible;
  }
  .hha-service-card-image picture {
    display: none;
  }
  .hha-service-card-image::after {
    display: none;
  }
  .hha-service-card-icon {
    position: static;
    transform: none;
    margin: 0;
  }
}

/* === Light Commercial Callout ===
   At lg+: 2-col (text left, banner card right).
   Below lg: text-only column, banner hides, fa-building icon shows above title. */
.hha-light-commercial {
  background-color: var(--color-brand-hobbs-red);
  border-radius: 1.25rem;
  overflow: clip;
  color: var(--color-white);
  padding: 2rem;
}

.hha-light-commercial-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.hha-light-commercial-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 86px;
  height: 86px;
  margin-bottom: 1rem;
  border-radius: 50%;
  background-color: rgba(var(--color-overlay-red-rgb), 0.5);
  border: 3px solid var(--color-neutral-300);
  color: var(--color-white);
  transition: background-color var(--transition-standard);
}
.hha-light-commercial-icon > i {
  font-size: 2.25rem;
  line-height: 1;
}
.hha-light-commercial:is(:hover, :focus-within) .hha-light-commercial-icon {
  background-color: rgb(var(--color-overlay-red-rgb));
}

.hha-light-commercial-btn {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
}

/* Read More expanded content area — separated from the row above via top margin. */
.hha-light-commercial-more {
  color: var(--color-white);
}
.hha-light-commercial-more p {
  border-top: 1px solid rgba(255, 255, 255, 0.25);
  padding-top: 1rem;
}

/* Rooftop Units sub-card — banner image with content overlay + glass pill */
.hha-rooftop-card {
  position: relative;
  display: block;
  height: 100%;
  min-height: 244px;
  border-radius: 1.25rem;
  overflow: clip;
  background-color: var(--color-dm-00dp);
}
.hha-rooftop-card-bg,
.hha-rooftop-card-bg img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}
.hha-rooftop-card-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 0.5rem;
  height: 100%;
  padding: 1.25rem;
  background: linear-gradient(180deg, rgba(18, 18, 18, 0) 0%, var(--color-dm-16dp) 88%);
}

/* Glass "Read More" pill — overlay-red @ 25%. Also serves as the Bootstrap
   collapse trigger button for the expandable card content. */
.hha-rooftop-card-link {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.25rem 0.5rem;
  border-radius: 300px;
  background-color: rgba(var(--color-overlay-red-rgb), 0.25);
  border: 1px solid rgba(255, 255, 255, 0.4);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  color: var(--color-white);
  font-family: var(--font-label);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  text-decoration: none;
  font-size: 0.75rem;
  line-height: 1.4;
  cursor: pointer;
  transition: background-color var(--transition-standard);
}
.hha-rooftop-card-link:is(:hover, :focus, :active) {
  background-color: rgba(var(--color-overlay-red-rgb), 0.5);
  color: var(--color-white);
}

/* Toggle visible label + icon rotation based on aria-expanded (Bootstrap
   collapse manages aria-expanded on the trigger automatically) */
.hha-rooftop-card-link[aria-expanded="false"] .hha-rooftop-card-link-expanded,
.hha-rooftop-card-link[aria-expanded="true"] .hha-rooftop-card-link-collapsed {
  display: none;
}
.hha-rooftop-card-link i {
  transition: transform var(--transition-standard);
}
.hha-rooftop-card-link[aria-expanded="true"] i {
  transform: rotate(45deg); /* plus → × */
}

/* ============================================================================
   SUB-PAGE SECTIONS
   ----------------------------------------------------------------------------
   Conventions on this sub-page:
   - Links: only .link-* helpers or .btn-* classes — never bare default-blue <a>.
   - Cards: where a sub-page card already maps to an existing pattern on the
     homepage (e.g. Other Services → .hha-trust-card), reuse the homepage class
     directly so hover UX stays consistent across the project.
   ============================================================================ */

/* --- Form section (sub-page FORM-SECTION block) ----------------------------- */
.hha-form-section {
  padding-bottom: 5rem;
}
.hha-form-section-links li + li {
  margin-top: 0.75rem;
}
.hha-form-section-links i {
  color: var(--color-brand-hobbs-red);
  margin-right: 0.5rem;
}

/* --- Process steps (sub-page PROCESS-STEPS block) ---------------------------
   Dark gradient section. Steps are a Bootstrap accordion (single-open via
   shared data-bs-parent). Icon shifts from fa-regular → font-weight 900 (visual
   solid) on hover and when expanded, and rotates 180° when expanded.
   Body text overridden to white for legibility on the dark gradient. */
.hha-process {
  color: var(--color-white);
  margin-top: 3rem;
  padding-top: 7rem;
  padding-bottom: 7rem;
}

/* Accordion shell (override Bootstrap's default light-on-light styles) */
.hha-process-accordion {
  --bs-accordion-bg: transparent;
  --bs-accordion-color: var(--color-white);
  --bs-accordion-border-color: transparent;
  --bs-accordion-active-bg: transparent;
  --bs-accordion-active-color: var(--color-white);
  --bs-accordion-btn-color: var(--color-white);
  --bs-accordion-btn-focus-box-shadow: none;
}
.hha-process-accordion .hha-process-step {
  background: rgba(255, 255, 255, 0.04);
  border: 2px solid var(--color-neutral-300);
  border-radius: 0.5rem;
  transition: border-color var(--transition-standard), transform var(--transition-standard);
}
.hha-process-accordion .hha-process-step + .hha-process-step {
  margin-top: 0.75rem;
}
.hha-process-accordion .hha-process-step:hover,
.hha-process-accordion .hha-process-step:focus-within {
  border-color: var(--color-brand-hobbs-red);
  transform: translateY(-2px);
}
.hha-process-accordion .accordion-header {
  margin-bottom: 0;
}
.hha-process-step-btn {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.25rem;
  width: 100%;
  background: transparent;
  color: var(--color-white);
  font-family: var(--font-label, inherit);
  font-weight: 600;
  text-align: left;
  border: 0;
}
.hha-process-step-btn:hover,
.hha-process-step-btn:focus-visible {
  background: transparent;
  color: var(--color-white);
  box-shadow: none;
}
/* Hide Bootstrap's default chevron pseudo-element — we use our own icon */
.hha-process-step-btn::after {
  display: none;
}
.hha-process-step-num {
  flex: 0 0 auto;
  min-width: 2.5rem;
  font-size: 1.75rem;
  line-height: 1;
  font-weight: 700;
  color: var(--color-brand-hobbs-red);
}
.hha-process-step-title {
  flex: 1 1 auto;
  font-size: 1rem;
  line-height: 1.3;
  letter-spacing: 0.02em;
  color: var(--color-white);
}
.hha-process-step-icon {
  flex: 0 0 auto;
  color: var(--color-brand-hobbs-red);
  font-size: 1rem;
  transition: transform var(--transition-standard), font-weight var(--transition-standard);
}
/* Icon weight shift: regular (400) → solid-equivalent (900) on hover OR expanded */
.hha-process-step:hover .hha-process-step-icon,
.hha-process-step:focus-within .hha-process-step-icon,
.hha-process-step-btn[aria-expanded="true"] .hha-process-step-icon {
  font-weight: 900;
}
/* Icon rotation: chevron flips up when expanded */
.hha-process-step-btn[aria-expanded="true"] .hha-process-step-icon {
  transform: rotate(180deg);
}
.hha-process-accordion .accordion-body {
  padding: 0 1.25rem 1.25rem;
  /* offset for the step number column so body copy aligns under the title */
  padding-left: 4.75rem;
}
.hha-process-accordion .accordion-body p {
  color: var(--color-white);
}
/* When the process accordion sits on a light section instead of the dark
   gradient, flip the step labels and body copy to dark so they stay legible. */
.bg-light .hha-process-step-btn,
.bg-light .hha-process-step-btn:hover,
.bg-light .hha-process-step-btn:focus-visible,
.bg-light .hha-process-step-title,
.bg-light .hha-process-accordion .accordion-body p {
  color: var(--color-dm-00dp);
}

/* Leading service icon for the city-page services accordion. Replaces the
   numbered badge; occupies the same 2.5rem lead column so accordion-body copy
   stays aligned. Swaps fa-regular -> fa-solid (font-weight 400 -> 900) on
   hover/open, mirroring the chevron + advantage-card behavior. */
.hha-process-step-icon-lead {
  flex: 0 0 auto;
  min-width: 2.5rem;
  text-align: center;
  color: var(--color-brand-hobbs-red);
}
.hha-process-step-icon-lead > i {
  font-size: 1.5rem;
  line-height: 1;
  transition: font-weight var(--transition-standard);
}
.hha-process-step:hover .hha-process-step-icon-lead > i,
.hha-process-step:focus-within .hha-process-step-icon-lead > i,
.hha-process-step-btn[aria-expanded="true"] .hha-process-step-icon-lead > i {
  font-weight: 900;
}

/* Service-category links inside the accordion body */
.hha-service-links li + li {
  margin-top: 0.5rem;
}
.hha-service-links a {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9375rem;
}
.hha-service-links a > i {
  font-size: 0.75rem;
  flex: 0 0 auto;
}

/* --- Other services / related (sub-page OTHER-SERVICES block) ---------------
   Cards in this section are NOT full-card links — they are visual containers.
   Keyword links live inside the description copy (.link-hobbs-red).
   Hover state still fires on the card itself (lift + bg darken + brand border)
   to give the row visual life on hover, even though the card is not clickable. */
.hha-related {
  padding-top: 5rem;
  padding-bottom: 5rem;
}
.hha-related-card {
  background-color: var(--color-neutral-50);
  color: var(--color-dm-00dp);
  border: 2px solid transparent;
  border-radius: var(--border-radius-standard);
  transition: transform var(--transition-standard),
              border-color var(--transition-standard),
              background-color var(--transition-standard);
}
.hha-related-card:hover {
  transform: translateY(-4px);
  border-color: var(--color-brand-hobbs-red);
  background-color: var(--color-neutral-100);
}
.hha-related-card-title {
  font-family: var(--font-label);
  line-height: 1.125;
}
/* Inline body links sit on the card's light neutral background; hobbs-red only
   reaches 4.44:1 there, so use the darker rose-red for WCAG AA compliance. */
.hha-related-card .link-hobbs-red {
  color: var(--color-brand-rose-red);
}
.hha-related-card .link-hobbs-red:is(:hover, :focus, :active) {
  color: var(--color-brand-rose-red-hover);
}

/* --- Service-area override (sub-page AREAS list inside intro) ---------------
   Each city is a small accent-bordered tile with name + descriptor — lifts the
   bulleted list out of plain-text territory. White copy on the section's dark
   gradient. */
.hha-service-area-cities {
  margin-bottom: 0;
}
.hha-service-area-city {
  padding: 0.625rem 0.875rem;
  margin-bottom: 0.625rem;
  background: rgba(255, 255, 255, 0.04);
  border-left: 3px solid var(--color-brand-hobbs-red);
  border-radius: 0 0.25rem 0.25rem 0;
}
.hha-service-area-city:last-child {
  margin-bottom: 0;
}
.hha-service-area-city-name {
  display: block;
  font-weight: 700;
  color: var(--color-white);
  letter-spacing: 0.02em;
  margin-bottom: 0.125rem;
}
.hha-service-area-city-desc {
  display: block;
  font-size: 0.875rem;
  line-height: 1.4;
  color: var(--color-white);
  opacity: 0.85;
}

/* ============================================================================
   BREADCRUMB SYSTEM (sub-page)
   ----------------------------------------------------------------------------
   Rendered by hha_breadcrumb() from /hha-breadcrumb.php (included in
   doc-header.php so it's globally available). Container-width pill-bar with
   the Hobbs brand icon on the left and Font-Awesome chevron-right dividers.
   Border: darkest-red by default → hobbs-red on hover.
   ============================================================================ */
.hha-breadcrumb {
  padding: 1.25rem 0;
}
/* When the breadcrumb sits directly above a why-us / opening section,
   tighten that section's top padding so the spacing doesn't double up. */
.hha-breadcrumb + .hha-opening {
  padding-top: 2rem;
}
.hha-breadcrumb-bar {
  gap: 0.875rem;
  padding: 0.625rem 1rem;
  border: 2px solid var(--color-brand-darkest-red);
  border-radius: var(--border-radius-standard);
  background-color: var(--color-white);
  transition: border-color var(--transition-standard);
}
.hha-breadcrumb-bar:hover,
.hha-breadcrumb-bar:focus-within {
  border-color: var(--color-brand-hobbs-red);
}
.hha-breadcrumb-icon {
  width: 1.5rem;
  height: 1.5rem;
}
.hha-breadcrumb .breadcrumb {
  --bs-breadcrumb-divider: none;
  margin-bottom: 0;
  font-size: 0.875rem;
  flex-wrap: wrap;
}
.hha-breadcrumb .breadcrumb-item + .breadcrumb-item {
  padding-left: 0;
}
.hha-breadcrumb .breadcrumb-item + .breadcrumb-item::before {
  font-family: "Font Awesome 7 Pro";
  font-weight: 400;
  content: "\f054"; /* fa-chevron-right */
  color: var(--color-neutral-500);
  padding-right: 0.5rem;
  padding-left: 0.25rem;
  font-size: 0.75rem;
  align-self: center;
}
.hha-breadcrumb .breadcrumb-item.active {
  color: var(--color-dm-16dp);
  font-weight: 600;
}


/* Bootstrap .shadow utility — not in the trimmed bootstrap-custom build; same value as
   Bootstrap 5.3's default (--bs-box-shadow). Used on the /contact form card. */
.shadow {
  box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .15) !important;
}

/* Hero CTA row: outline buttons sit level with .hha-hero-cta, so drop the global
   .btn bottom margin here instead of a zero-margin utility on each button. */
.hha-hero .btn-outline-white {
  margin-bottom: 0;
}

/* Service card body copy is the last element in the card body — no trailing margin. */
.hha-service-card-body > p:last-child {
  margin-bottom: 0;
}