/* === Red Barn Media Group — Spencer Heating and Air === */

/* === Self-hosted Fonts ===
   Google Fonts variable woff2, latin subset (same files/ranges Google served).
   Oswald + Outfit are preloaded in doc-header.php — keep those URLs in sync. */
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('/fonts/outfit-latin-var.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: 'Oswald';
  font-style: normal;
  font-weight: 600 700;
  font-display: swap;
  src: url('/fonts/oswald-latin-var.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: 400 600;
  font-display: swap;
  src: url('/fonts/inter-latin-var.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;
}

/* === CSS Custom Properties === */
:root {
  /* Brand Colors */
  --color-blue: #084392;
  --color-dark-ocean: #0F3465;
  --color-rust: #B55A39;
  --color-rust-light: #CD6446;
  --color-pencil: #FEB161;
  --color-palladian: #EDE9DE;

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

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

  /* Gradients */
  --gradient-autumn: linear-gradient(72.5deg, #CD6446 0%, #FEB161 100%);
  --gradient-subtle-blue: linear-gradient(72.5deg, #0F3465 0%, #084392 100%);
  --gradient-soft-trust: linear-gradient(72.5deg, #FEB161 0%, #CD6446 48.56%, #0F3465 100%);

  /* Typography */
  --font-outfit: 'Outfit', sans-serif;
  --font-oswald: 'Oswald', sans-serif;
  --font-inter: 'Inter', sans-serif;
  --font-weight-bold: 700;
  --font-weight-semibold: 600;
  --font-weight-medium: 500;
  --font-weight-regular: 400;

  /* Layout */
  --menu-height: 9rem;
  --menu-height-shrink: 6rem;
  --hero-height: 615px;
  --transition-standard: 0.25s;
  --border-radius-standard: 1rem;
  --box-shadow-dropdown: 0 3rem 3rem rgba(0, 0, 0, 0.175);
}

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

body {
  color: var(--color-black);
  font-family: var(--font-outfit);
  font-weight: 400;
  background-color: var(--color-palladian);
  position: relative;
}

/* === Typography === */
h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 {
  font-family: var(--font-outfit);
  font-weight: var(--font-weight-semibold);
}

.bold { font-weight: var(--font-weight-bold); }
.semibold { font-weight: var(--font-weight-semibold); }
.medium { font-weight: var(--font-weight-medium); }
.regular { font-weight: var(--font-weight-regular); }

p, ul li, ol li, table { font-size: 0.85rem; font-weight: 400; }
.fs-7 { font-size: 0.85rem; }
.fs-8 { font-size: 0.75rem; }
.fs-9 { font-size: 0.5rem; }

/* === Menu Styles === */
.menu-container {
  background: var(--color-white);
  margin-top: 0 !important;
}

.menu-container.shrink-menu {
  border-bottom: 1px solid var(--color-blue);
}

.sha-menu-topper div {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}
.shrink-menu .sha-menu-topper div {
  padding-top: 0.35rem;
  padding-bottom: 0.35rem;
}

.navbar-nav {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: var(--menu-height);
  transition: height var(--transition-standard);
}

.shrink-menu .navbar-nav {
  height: var(--menu-height-shrink);
}

/* Navigation Links */
.menu-container .navbar-light .navbar-nav .nav-link {
  color: var(--color-black);
  font-family: var(--font-outfit);
  font-weight: var(--font-weight-bold);
  font-size: 1rem;
}

.dropdown-toggle:not(.has-dropdown)::after,
.dropend .dropdown-item:not(.has-dropend)::after,
.dropstart .dropdown-toggle:not(.has-dropstart)::before {
  border: 0 !important;
  margin: 0 !important;
}

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

.has-dropdown::after {
  content: '\f107';
  font-family: 'Font Awesome 7 Pro';
  font-weight: 900; /* solid — site uses only solid + brands */
  border: 0;
  margin-left: 0;
  font-size: inherit;
  vertical-align: middle;
}

.dropend .dropdown-item.has-dropend::after {
  content: '\f105';
  font-family: 'Font Awesome 7 Pro';
  font-weight: 900; /* solid — site uses only solid + brands */
  border: 0;
  margin-left: 0.255em;
  font-size: 1em;
  vertical-align: middle;
}

.nav-fill .nav-item .dropdown-item {
  text-align: left !important;
}

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

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

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

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



.sha-mega-dropdown-row {
  background-color: var(--color-palladian);
  border-radius: var(--border-radius-standard);
  transition-duration: var(--transition-standard);
}
.sha-mega-dropdown-row:is(:hover, :focus, :active) {
  background-color: #ddd9ce;
}

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

.navbar-expand-xl .navbar-nav .dropdown-menu.sub-dropdown {
  border-radius: var(--border-radius-standard);
}

.sha-mega-dropdown-group p {
  color: var(--color-black);
  transition-duration: var(--transition-standard);
}
.sha-mega-dropdown-group:is(:hover, :focus, :active) p {
  color: var(--color-blue);
}

/* Logo Styles */
.menu-container .container-fluid.sha-logo-row {
  transition: all var(--transition-standard);
}

.sha-logo-desktop {
  position: absolute;
  width: 240px;
  height: 100px;
  top: -3rem;
  left: 0;
  right: 0;
  margin: 0 auto;
  transition: all var(--transition-standard);
}

.shrink-menu .sha-logo-desktop {
  width: 180px;
  height: 75px;
  top: -2.25rem;
}

.sha-phone-menu {
  font-size: 1.75rem;
  padding: 0;
  font-family: var(--font-outfit);
}

.position-starburst {
  position: fixed;
  transition: transform 0.3s ease;
  bottom: 1rem;
  right: 1rem;
  z-index: 2;
}
.position-starburst.shrunk {
  position: fixed;
  bottom: 0.5rem;
  right: 0.5rem;
  transform: scale(0.6);
  z-index: 2;
}
.starburst-size { width: 150px; height: 150px; }
.starburst-size.shrunk { width: 75px; height: 75px; }

/* === Home Hero Styles === */
.sha-hero-intro {
  margin-top: 156px;
  background-size: cover;
  background-repeat: no-repeat;
  height: var(--hero-height);
  overflow: hidden;
  background-position: center center;
}
.sha-hero-intro .container .row .col-10.col-xl-6 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  background-color: rgba(237, 233, 222, 0.88);
  height: var(--hero-height);
  text-align: center;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}
.sha-hero-intro .container .row .col-10.col-xl-6 .btn {
  width: fit-content;
}

/* Hero Background Images */


.sha-hero-intro h1 { font-size: calc(2rem + 1vw); line-height: 1; font-weight: var(--font-weight-medium); }

/* === Sub Page Styles === */
.sha-hero-intro.sub-page .container h1 { font-size: calc(2rem + 0.75vw); line-height: 1; font-weight: var(--font-weight-bold); }

/* === Button Styles === */
.btn {
  padding: 0.75rem 1.25rem;
  font-family: var(--font-outfit);
  font-weight: var(--font-weight-bold);
  border-radius: 50rem;
  font-size: 1rem;
  margin-bottom: 0.5rem;
}

.btn.btn-menu, .btn.btn-sm { padding: 0.65rem 0.75rem; font-size: 0.85rem; }
.btn.btn-lg { padding: 0.75rem 1.5rem; font-size: 1rem; }
.btn.btn-xl { padding: 1.25rem 1.75rem; font-size: 1.5rem; }

/* Primary — Royal Blue */
.btn-blue {
  color: var(--color-white) !important;
  background: var(--color-blue) !important;
  border-color: var(--color-blue) !important;
}
.btn-blue:is(:hover, :focus, :active) {
  color: var(--color-white) !important;
  background: var(--color-dark-ocean) !important;
  border-color: var(--color-dark-ocean) !important;
}
.btn-outline-blue {
  color: var(--color-blue) !important;
  background: transparent !important;
  border-color: var(--color-blue) !important;
}
.btn-outline-blue:is(:hover, :focus, :active) {
  color: var(--color-dark-ocean) !important;
  background: transparent !important;
  border-color: var(--color-dark-ocean) !important;
}

/* Dark Ocean */
.btn-dark-ocean {
  color: var(--color-white) !important;
  background: var(--color-dark-ocean) !important;
  border-color: var(--color-dark-ocean) !important;
}
.btn-dark-ocean:is(:hover, :focus, :active) {
  color: var(--color-pencil) !important;
  background: var(--color-dark-ocean) !important;
  border-color: var(--color-dark-ocean) !important;
}

/* Rust */
.btn-rust {
  color: var(--color-white) !important;
  background: var(--color-rust) !important;
  border-color: var(--color-rust) !important;
}
.btn-rust:is(:hover, :focus, :active) {
  color: var(--color-white) !important;
  background: #9e4d30 !important;
  border-color: #9e4d30 !important;
}
.btn-outline-rust {
  color: var(--color-rust) !important;
  background: transparent !important;
  border-color: var(--color-rust) !important;
}
.btn-outline-rust:is(:hover, :focus, :active) {
  color: #9e4d30 !important;
  background: transparent !important;
  border-color: #9e4d30 !important;
}

/* Gradient Buttons */
.btn-gradient-autumn {
  color: var(--color-white) !important;
  background: var(--gradient-autumn) !important;
  border-color: transparent !important;
  transition: filter var(--transition-standard);
}
.btn-gradient-autumn:is(:hover, :focus, :active) { filter: brightness(0.88); }
.btn-gradient-subtle-blue {
  color: var(--color-white) !important;
  background: var(--gradient-subtle-blue) !important;
  border-color: transparent !important;
  transition: filter var(--transition-standard);
}
.btn-gradient-subtle-blue:is(:hover, :focus, :active) { filter: brightness(0.88); }

/* Black */
.btn-black {
  color: var(--color-white) !important;
  background: var(--color-black) !important;
  border-color: var(--color-black) !important;
}
.btn-black:is(:hover, :focus, :active) {
  color: var(--color-pencil) !important;
  background: var(--color-black) !important;
  border-color: var(--color-black) !important;
}
.btn-outline-black {
  color: var(--color-black) !important;
  background: transparent !important;
  border-color: var(--color-black) !important;
}
.btn-outline-black:is(:hover, :focus, :active) {
  color: var(--color-blue) !important;
  background: transparent !important;
  border-color: var(--color-blue) !important;
}

/* === Color Utility Classes === */
.text-blue { color: var(--color-blue) !important; }
.bg-blue { background-color: var(--color-blue) !important; }
.border-blue { border-color: var(--color-blue) !important; }

.text-dark-ocean { color: var(--color-dark-ocean) !important; }
.bg-dark-ocean { background-color: var(--color-dark-ocean) !important; }
.border-dark-ocean { border-color: var(--color-dark-ocean) !important; }

.text-rust { color: var(--color-rust) !important; }
.bg-rust { background-color: var(--color-rust) !important; }
.border-rust { border-color: var(--color-rust) !important; }

.text-rust-light { color: var(--color-rust-light) !important; }
.bg-rust-light { background-color: var(--color-rust-light) !important; }
.border-rust-light { border-color: var(--color-rust-light) !important; }

.text-pencil { color: var(--color-pencil) !important; }
.bg-pencil { background-color: var(--color-pencil) !important; }
.border-pencil { border-color: var(--color-pencil) !important; }

.text-palladian { color: var(--color-palladian) !important; }
.bg-palladian { background-color: var(--color-palladian) !important; }
.border-palladian { border-color: var(--color-palladian) !important; }

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

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

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

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

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

/* Gradient Backgrounds */
.bg-gradient-autumn { background: var(--gradient-autumn) !important; }
.bg-gradient-subtle-blue { background: var(--gradient-subtle-blue) !important; }
.bg-gradient-soft-trust { background: var(--gradient-soft-trust) !important; }

/* === Link Utilities === */
a.link-blue { color: var(--color-blue); }
a.link-blue:is(:hover, :focus, :active) { color: var(--color-dark-ocean); }

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

a.link-rust { color: var(--color-rust); }
a.link-rust:is(:hover, :focus, :active) { color: #9e4d30; }

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

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

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

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

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

ul.list-group, ol.list-group, .card, .table-responsive, table.table-bordered {
  border-radius: var(--border-radius-standard) !important;
  margin-bottom: 1.5rem;
}
ul.list-group li.list-group-item {
  background: transparent;
  border-color: var(--color-neutral-200);
}
.list-group-item > .list-group { margin-top: 1rem; }
.card.h-100 { margin-bottom: 0; }
.card .card-body { padding: 1.5rem; }
ul li strong { color: var(--color-blue); }
strong { font-weight: var(--font-weight-bold); }

/* Accordion */
.accordion-button [class*="fa-"] { transition: transform 0.3s ease-in-out; }
.accordion-button:not(.collapsed) [class*="fa-"] { transform: rotate(180deg); }

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

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

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

.accordion.sha-comprehensive-service-accordion .accordion-item {
  background-color: var(--color-neutral-50);
  border-radius: var(--border-radius-standard);
  margin-bottom: 0.75rem;
}

/* Nav Tabs */
.nav-tabs .nav-link {
  color: var(--color-neutral-700);
  font-family: var(--font-outfit);
  font-weight: var(--font-weight-semibold);
}
.nav-tabs .nav-link:is(:hover, :focus) {
  color: var(--color-blue);
  border-color: transparent;
}
.nav-tabs .nav-link.active {
  color: var(--color-blue);
  border-color: var(--color-neutral-500) var(--color-neutral-500) transparent;
}

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

/* === Panel Navigation (Mobile Only) === */
.sha-panel-container { display: none; }

/* === Footer Styles === */
footer h6 {
  color: var(--color-white);
  font-weight: var(--font-weight-semibold);
  margin-bottom: 1rem;
}
footer p { margin-bottom: 0.25rem; }
footer p a {
  color: var(--color-white);
  font-family: var(--font-outfit);
}
footer p a:is(:hover, :active) { color: var(--color-pencil); }

/* === Media Queries === */

@media (min-width: 1201px) {
  .sha-panel-container { display: none !important; }
  .offcanvas-body > .navbar-nav.nav-fill.flex-grow-1 { display: flex !important; }
}

@media (max-width: 1400px) {
  .navbar-light .navbar-nav .nav-link { font-size: 0.85rem; }
  .sha-banner-get-started { display: none; }
}

@media (min-width: 1200px) and (max-width: 1399px) {
  .spencer-menu.menu-container .navbar-light .navbar-nav .nav-link {
    padding-left: 0.45rem;
    padding-right: 0.45rem;
  }
  .sha-menu-phone-num { display: none; }
}

@media (max-width: 1200px) {
  .navbar { height: var(--menu-height); width: auto; }
  .shrink-menu .navbar { height: var(--menu-height-shrink); }
  .navbar-nav {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: fit-content;
    transition: height var(--transition-standard);
  }
  /* Hide the desktop nav UL on mobile — offcanvas handles nav at this breakpoint */
  .menu-container nav.navbar > ul.navbar-nav.flex-grow-1 { display: none !important; }
  /* Scope the dark text-color override to the desktop UL only (not the offcanvas panels) */
  .menu-container .navbar-light .navbar-nav:not(.sha-panel-nav) .nav-link { color: var(--color-black); }
  /* Offcanvas panel nav links: keep white on the dark-blue offcanvas background */
  .spencer-menu.menu-container .offcanvas .sha-panel-nav .nav-link,
  .spencer-menu.menu-container .offcanvas .sha-panel-nav .nav-link span,
  .spencer-menu.menu-container .offcanvas .sha-panel-title,
  .spencer-menu.menu-container .offcanvas .sha-panel-back { color: var(--color-white) !important; }
  .shrink-menu .navbar-nav { height: fit-content; }

  .offcanvas {
    display: flex;
    flex-direction: column;
  }
  .offcanvas-header { flex-shrink: 0; }
  .offcanvas-body {
    background: var(--gradient-subtle-blue);
    padding: 0;
    overflow: hidden;
    position: relative;
    flex: 1;
    display: flex;
    flex-direction: column;
  }

  /* Panel Container */
  .sha-panel-container {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
    display: flex !important;
  }

  .sha-panel {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    width: 100%; height: 100%;
    display: grid;
    grid-template-rows: auto 1fr auto;
    grid-template-columns: 1fr;
    gap: 0;
    padding: 1.25rem;
    box-sizing: border-box;
    transform: translateX(100%);
    transition: transform 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
    opacity: 0;
    pointer-events: none;
    /* Panel scrolls as a whole so the footer CTAs are always reachable
       (they were pinned under iOS Safari's floating toolbar, unscrollable). */
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }

  .sha-panel.sha-panel-active {
    transform: translateX(0);
    opacity: 1;
    pointer-events: all;
  }

  .sha-panel.sha-panel-slide-left {
    transform: translateX(-100%);
    opacity: 0;
  }

  .sha-panel-header {
    grid-row: 1;
    margin-top: 0;
    margin-bottom: 0.75rem;
    padding-bottom: 0.75rem;
    border-bottom: 2px solid rgba(255, 255, 255, 0.2);
    flex-shrink: 0;
  }

  .sha-panel-back {
    background: transparent;
    border: none;
    color: var(--color-white);
    font-family: var(--font-outfit);
    font-weight: var(--font-weight-bold);
    font-size: 1rem;
    padding: 0.35rem 0;
    margin-bottom: 0.5rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    transition: all 0.2s ease;
  }
  .sha-panel-back:hover,
  .sha-panel-back:active {
    color: var(--color-neutral-100);
    transform: translateX(-5px);
  }
  .sha-panel-back i { font-size: 1.1rem; }

  .sha-panel-title {
    color: var(--color-white);
    font-family: var(--font-outfit);
    font-weight: var(--font-weight-bold);
    font-size: 1.25rem;
    margin: 0;
  }

  .sha-panel-nav {
    grid-row: 2;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    margin: 0;
    padding: 1.5rem 0.5rem 1rem 0;
    min-height: auto;
    max-height: none;
    overflow: visible;
    list-style: none;
  }

  .sha-panel-nav .nav-item {
    margin-bottom: 0.5rem;
    position: relative;
    list-style: none;
  }
  .sha-panel-nav .nav-item:first-child { margin-top: 0; }

  .sha-panel-nav .nav-link {
    color: var(--color-white);
    font-family: var(--font-outfit);
    font-weight: var(--font-weight-bold);
    font-size: 1.1rem;
    padding: 0.65rem 1rem;
    background: rgba(255, 255, 255, 0.1);
    border-radius: var(--border-radius-standard);
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: all 0.2s ease;
    min-height: 44px;
  }
  .sha-panel-nav .nav-link:hover,
  .sha-panel-nav .nav-link:active {
    background: rgba(255, 255, 255, 0.2);
    color: var(--color-pencil);
    transform: translateX(5px);
  }

  .sha-panel-link i { font-size: 1rem; transition: transform 0.2s ease; }
  .sha-panel-link:hover i { transform: translateX(5px); }

  .sha-panel-section-title {
    color: var(--color-white);
    font-family: var(--font-outfit);
    font-weight: var(--font-weight-bold);
    font-size: 1rem;
    margin: 0 0 0.65rem 0;
    padding: 0.5rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    position: relative;
    display: block;
  }
  .sha-panel-section-title i { margin-right: 0.5rem; font-size: 0.9rem; }

  .sha-panel-sublinks {
    list-style: none;
    padding: 0;
    margin: 0 0 1rem 0;
    display: block;
    position: relative;
  }
  .sha-panel-sublinks li {
    margin-bottom: 0.5rem;
    position: relative;
    display: block;
  }
  .sha-panel-sublinks a {
    color: var(--color-white);
    font-family: var(--font-outfit);
    font-weight: var(--font-weight-regular);
    font-size: 0.9rem;
    padding: 0.65rem 0.9rem;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 0.5rem;
    display: block;
    transition: all 0.2s ease;
    border-left: 3px solid transparent;
    position: relative;
    min-height: 44px;
  }
  .sha-panel-sublinks a:hover,
  .sha-panel-sublinks a:active {
    background: rgba(255, 255, 255, 0.15);
    border-left-color: var(--color-pencil);
    transform: translateX(5px);
    color: var(--color-white);
  }

  .sha-panel-footer {
    grid-row: 3;
    margin-top: 0.75rem;
    margin-bottom: 0;
    padding-top: 0.75rem;
    padding-bottom: 0;
    border-top: 2px solid rgba(255, 255, 255, 0.2);
    flex-shrink: 0;
  }
  .sha-panel-footer .btn {
    font-size: 0.95rem;
    padding: 0.85rem;
    font-weight: var(--font-weight-bold);
    width: 100%;
    margin-bottom: 0.5rem;
    display: block;
  }
  .sha-panel-footer .btn:last-child { margin-bottom: 0; }
  /* Phone button sits on the same dark blue as the panel — white outline so it reads as a button */
  .sha-panel-footer .btn-dark-ocean { border: 2px solid var(--color-white) !important; }

  /* iOS Safari's bottom toolbar floats over the page — give the panel enough
     bottom room that the footer CTAs scroll clear of it. iOS-only so desktop
     and Android keep the footer flush to the bottom. */
  @supports (-webkit-touch-callout: none) {
    .sha-panel { padding-bottom: calc(6rem + env(safe-area-inset-bottom, 0px)); }
  }

  .offcanvas-body > .navbar-nav.nav-fill.flex-grow-1 { display: none !important; }

  .nav-fill .nav-item, .nav-fill > .nav-link { flex: 1 1 auto; text-align: left; }
  .sha-hero-wave { display: none; }

  .dropend .dropdown-item.has-dropend::after { content: '\f107'; }
  .navbar-light .navbar-nav .nav-link { font-size: 1.25rem; }
}

@media (max-width: 991px) {
  .sha-menu-padding { padding: 0 1rem; }
  .navbar-light .navbar-nav .nav-link { font-size: 1.35rem; }
}

@media (max-width: 767px) {}

@media (max-width: 576px) {}

@media (max-width: 450px) {
  .sha-menu-padding { padding: 0 0.25rem; }
}

/* ============================================================
   Spencer Menu — Brand Overrides
   ============================================================ */

/* Palladian cream background per Figma */
.menu-container.spencer-menu {
  background: var(--color-palladian) !important;
}

/* Nav links — Oswald Bold Dark Ocean per Figma */
.spencer-menu.menu-container .navbar-light .navbar-nav .nav-link {
  color: var(--color-dark-ocean);
  font-family: var(--font-oswald);
  font-weight: 700;
  white-space: nowrap;
}
.spencer-menu.menu-container .navbar-light .navbar-nav .nav-link:is(:hover, :active) {
  color: var(--color-rust);
}

/* Tighten nav-item horizontal padding at xl so the LM menu fits on one line */
@media (min-width: 1200px) {
  .spencer-menu.menu-container .navbar-light .navbar-nav > .nav-item > .nav-link {
    padding-left: 0.6rem;
    padding-right: 0.6rem;
  }
  /* Tighten the desktop CTA buttons (Pay Online + phone) so they don't wrap */
  .spencer-menu.menu-container .navbar-nav > .nav-item > .btn {
    padding: 0.4rem 0.75rem;
    font-size: 0.85rem;
    white-space: nowrap;
  }
}
/* 1200–1399: tighter still, so the longer Lake Martin menu keeps the phone CTA on screen */
@media (min-width: 1200px) and (max-width: 1399px) {
  .spencer-menu.menu-container .navbar-light .navbar-nav > .nav-item > .nav-link {
    padding-left: 0.35rem;
    padding-right: 0.35rem;
  }
  .spencer-menu.menu-container .navbar-nav > .nav-item > .btn {
    padding: 0.4rem 0.6rem;
  }
}

/* ── Logo ────────────────────────────────────────────────── */
/* On xl+: logo is pulled out of the container row and absolutely
   positioned at the top-left corner of the fixed navbar, so it
   sits at the viewport edge regardless of container max-width. */
.sha-logo-corner-wrap {
  position: absolute;
  top: 0;
  left: 1.5rem;
  z-index: 1031;
}

.sha-logo-nav {
  display: block;
  width: 320px;
  height: auto;
  margin-top: 38px;
  transition: width var(--transition-standard), margin-top var(--transition-standard);
}

.shrink-menu .sha-logo-nav {
  width: 240px;
  margin-top: 0;
}

/* Offset the nav row left on xl+ to clear the corner logo */
@media (min-width: 1200px) {
  .sha-nav-logo-offset {
    padding-left: 300px;
  }
}

/* 13" laptop widths (1200–1459px): the full 320px corner logo overlapped the
   first nav items (root menu's Auburn pill by up to 100px). Cap the logo at
   230px here (scrolled state too) and pull the nav offset in to match. */
@media (min-width: 1200px) and (max-width: 1459.98px) {
  .sha-logo-nav,
  .shrink-menu .sha-logo-nav { width: 230px; }
  .sha-nav-logo-offset { padding-left: 240px; }
}

.sha-logo-mobile {
  display: block;
  width: 150px;
  height: auto;
}

/* Hamburger button — dark ocean outline */
.spencer-hamburger {
  background: transparent;
  border: 2px solid var(--color-dark-ocean);
  color: var(--color-dark-ocean);
  border-radius: 0.5rem;
  padding: 0.4rem 0.65rem;
}
.spencer-hamburger:hover {
  background: rgba(15, 52, 101, 0.08);
}

/* Lake Martin location button — rust outline to differentiate from Pay Online */
.btn-lake-martin {
  color: var(--color-rust) !important;
  background: transparent !important;
  border: 2px solid var(--color-rust) !important;
  white-space: nowrap;
}
.btn-lake-martin:is(:hover, :focus, :active) {
  background: var(--color-rust) !important;
  color: var(--color-white) !important;
  border-color: var(--color-rust) !important;
}

/* Pay Online — outlined dark ocean pill (Figma) */
.btn-outline-dark-ocean {
  color: var(--color-dark-ocean) !important;
  background: transparent !important;
  border: 2px solid var(--color-dark-ocean) !important;
}
.btn-outline-dark-ocean:is(:hover, :focus, :active) {
  background: rgba(15, 52, 101, 0.08) !important;
  color: var(--color-dark-ocean) !important;
  border-color: var(--color-dark-ocean) !important;
}

/* Mega dropdown heading color */
.spencer-menu .sha-mega-dropdown-group p.rubik {
  color: var(--color-dark-ocean);
}
.sha-mega-location-switch {
  border-top: 1px solid rgba(15, 52, 101, 0.1);
}
.sha-mega-location-switch .sha-mega-location-dot {
  color: var(--color-rust);
}

.spencer-menu .sha-mega-dropdown-group:is(:hover, :focus, :active) p {
  color: var(--color-rust);
}

/* ── Location Switcher Nav ───────────────────────────────────
   Rust-colored bold toggle; mega-dropdown inherits existing styles.
   Used as the first nav item in both Auburn and Lake Martin menus.
   ─────────────────────────────────────────────────────────── */
.sha-location-nav .sha-location-toggle {
  color: var(--color-rust) !important;
  font-weight: 700;
  white-space: nowrap;
}
.sha-location-nav .sha-location-toggle:hover,
.sha-location-nav .sha-location-toggle:focus,
.sha-location-nav .sha-location-toggle[aria-expanded="true"] {
  color: var(--color-rust) !important;
  opacity: 0.82;
}
.sha-location-nav .sha-mega-location-switch {
  border-top: none;
  border-bottom: 1px solid rgba(15, 52, 101, 0.1);
}

/* Small location-switch dropdown — replaces the old mega-menu */
.sha-location-switch-menu {
  border: 1px solid rgba(15, 52, 101, 0.12);
  border-radius: 10px;
  padding: 0.4rem;
  min-width: 14rem;
  box-shadow: 0 8px 24px rgba(15, 52, 101, 0.12);
}
.sha-location-switch-menu .dropdown-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.55rem 0.85rem;
  font-family: var(--font-outfit);
  font-weight: var(--font-weight-medium);
  color: var(--color-dark-ocean);
  border-radius: 6px;
  white-space: nowrap;
  background: transparent;
  transition: color 0.15s ease;
}
.sha-location-switch-menu .dropdown-item i {
  color: var(--color-dark-ocean);
  width: 1.1rem;
  text-align: center;
  transition: color 0.15s ease;
}
.sha-location-switch-menu .dropdown-item:hover,
.sha-location-switch-menu .dropdown-item:focus,
.sha-location-switch-menu .dropdown-item:active {
  background: transparent;
  color: var(--color-rust);
}
.sha-location-switch-menu .dropdown-item:hover i,
.sha-location-switch-menu .dropdown-item:focus i,
.sha-location-switch-menu .dropdown-item:active i {
  color: var(--color-rust);
}

/* Mobile panel — location switcher item */
.sha-location-panel-item {
  margin-top: 0.5rem;
  padding-top: 0.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
}
.sha-location-panel-link {
  display: flex !important;
  justify-content: space-between;
  align-items: center;
  color: var(--color-rust) !important;
  font-weight: 700 !important;
  border: 1px solid rgba(200, 80, 40, 0.35);
  border-radius: var(--border-radius-standard);
  padding: 0.65rem 1rem !important;
  background: rgba(200, 80, 40, 0.08) !important;
}
.sha-location-panel-link:hover,
.sha-location-panel-link:active {
  background: rgba(200, 80, 40, 0.16) !important;
  color: var(--color-rust) !important;
  transform: none !important;
}

/* Mega dropdown icons — rust */
.spencer-menu .navbar-expand-xl .navbar-nav .dropdown-menu [class*="fa-"] {
  color: var(--color-rust);
}

/* ── Desktop nav — even spread ───────────────────────────────
   Ensure offcanvas-body fills full width on xl+ so that
   justify-content-between distributes the 6 nav items properly.
   ─────────────────────────────────────────────────────────── */
@media (min-width: 1200px) {
  .spencer-menu .navbar-expand-xl .offcanvas .offcanvas-body {
    flex: 1 1 auto;
    width: 100%;
  }
  .spencer-menu.menu-container .navbar-nav {
    flex-direction: row;
    justify-content: space-between;
    height: var(--menu-height);
    align-items: center;
  }
  .spencer-menu.shrink-menu .navbar-nav {
    height: var(--menu-height-shrink);
  }
  /* Keep nav links compact at all desktop sizes to prevent overflow */
  .spencer-menu.menu-container .navbar-light .navbar-nav .nav-link {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    font-size: 0.9rem;
  }
}

/* ── Mobile offcanvas header ─────────────────────────────────
   Pencil background; btn-close-white used in HTML.
   ─────────────────────────────────────────────────────────── */
.sha-offcanvas-header {
  background: var(--color-pencil);
  border-bottom: 1px solid rgba(15, 52, 101, 0.15);
}
.sha-logo-offcanvas {
  display: block;
  width: 200px;
  height: auto;
}

/* ── Mobile panel — Spencer brand overrides ──────────────────
   Replace Kingwood font (Outfit) and pencil-yellow hover with
   Spencer Inter/Oswald + rust/palladian palette.
   ─────────────────────────────────────────────────────────── */
.spencer-menu .sha-panel-back {
  font-family: var(--font-inter);
  font-weight: 600;
}
.spencer-menu .sha-panel-back:hover,
.spencer-menu .sha-panel-back:active {
  color: var(--color-palladian);
}
.spencer-menu .sha-panel-title {
  font-family: var(--font-oswald);
  font-weight: 700;
}
.spencer-menu .sha-panel-nav .nav-link {
  font-family: var(--font-inter);
  font-weight: 600;
  background: transparent;
}
.spencer-menu .sha-panel-nav .nav-link:hover,
.spencer-menu .sha-panel-nav .nav-link:active {
  color: var(--color-palladian);
  background: rgba(255, 255, 255, 0.08);
  transform: none;
}
.spencer-menu .sha-panel-section-title {
  font-family: var(--font-oswald);
  font-weight: 700;
}
.spencer-menu .sha-panel-sublinks a {
  font-family: var(--font-inter);
}
.spencer-menu .sha-panel-sublinks a:hover,
.spencer-menu .sha-panel-sublinks a:active {
  border-left-color: var(--color-rust);
  color: var(--color-palladian);
  transform: none;
}

/* ── Home Hero ───────────────────────────────────────────────
   Palladian outer clears fixed nav via margin-top.
   Rounded card with CSS overlay rgba(9,31,60,0.6) per Figma.
   ─────────────────────────────────────────────────────────── */
.sha-hero-outer {
  background: var(--color-palladian);
  margin-top: var(--menu-height);
  padding: 0 5rem 3rem;
}
.sha-hero {
  position: relative;
  min-height: 665px;
  border-radius: 2.5rem;
  overflow: hidden;
  background-image:
    linear-gradient(rgba(9, 31, 60, 0.6), rgba(9, 31, 60, 0.6)),
    url('../img/sha-hero-1440-615.webp');
  background-size: cover;
  background-position: center;
  padding-top: 5rem;
  padding-bottom: 4rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.sha-hero-content {
  position: relative;
  padding: 0 2.5rem;
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
}
@media (max-width: 1199px) {
  .sha-hero-outer { padding: 0 3rem 3rem; }
  .sha-hero {
    background-image:
      linear-gradient(rgba(9, 31, 60, 0.6), rgba(9, 31, 60, 0.6)),
      url('../img/sha-hero-1040-615.webp');
  }
}
@media (max-width: 767px) {
  .sha-hero-outer { padding: 0; }
  .sha-hero {
    background-image:
      linear-gradient(rgba(9, 31, 60, 0.6), rgba(9, 31, 60, 0.6)),
      url('../img/sha-hero-800-540.webp');
    border-radius: 0;
    min-height: 590px;
    padding-top: 4rem;
    padding-bottom: 3rem;
  }
}

/* Lake Martin hero image override */
.sha-hero--lm {
  background-image:
    linear-gradient(rgba(9, 31, 60, 0.6), rgba(9, 31, 60, 0.6)),
    url('../img/sha-lm-hero-1440-615.webp');
}
@media (max-width: 1199px) {
  .sha-hero--lm {
    background-image:
      linear-gradient(rgba(9, 31, 60, 0.6), rgba(9, 31, 60, 0.6)),
      url('../img/sha-lm-hero-1040-615.webp');
  }
}
@media (max-width: 767px) {
  .sha-hero--lm {
    background-image:
      linear-gradient(rgba(9, 31, 60, 0.6), rgba(9, 31, 60, 0.6)),
      url('../img/sha-lm-hero-800-540.webp');
  }
}

/* Hero heading — Oswald Bold, fluid 40px–64px per breakpoint */
.sha-hero-heading {
  font-family: var(--font-oswald);
  font-weight: 700;
  font-size: 4rem;       /* desktop default */
  line-height: 1.125;
  color: var(--color-white);
  max-width: 960px;
  margin-bottom: 0;
}
@media (max-width: 1399px) {
  .sha-hero-heading { font-size: 3.25rem; }
}
@media (max-width: 991px) {
  .sha-hero-heading { font-size: 2.75rem; }
}
@media (max-width: 767px) {
  .sha-hero-heading { font-size: 2.25rem; }
}

/* Hero body — Inter Medium 16px per Figma */
.sha-hero-body {
  font-family: var(--font-inter);
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.6;
  color: var(--color-white);
  max-width: 596px;
  margin-bottom: 0;
}

/* Hero CTA row */
.sha-hero-actions {
  display: flex;
  align-items: center;
  gap: 1.75rem;
  flex-wrap: wrap;
}

/* "Get a Free Estimate" — pencil bg, blue border per Figma */
.sha-hero-cta {
  display: inline-flex;
  align-items: center;
  background: var(--color-pencil);
  border: 3px solid var(--color-blue);
  color: var(--color-blue);
  font-family: var(--font-oswald);
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.125;
  border-radius: 50px;
  padding: 0.75rem 1.25rem;
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--transition-standard);
}
.sha-hero-cta:hover,
.sha-hero-cta:focus {
  background: #f0a54e;
  border-color: var(--color-blue);
  color: var(--color-blue);
}

/* Ghost location button — rust outline, white text, on dark hero overlay */
.sha-hero-cta--location {
  background: rgba(181, 90, 57, 0.18);
  border-color: var(--color-rust);
  color: var(--color-white);
  gap: 0.4rem;
}
.sha-hero-cta--location:hover,
.sha-hero-cta--location:focus {
  background: rgba(181, 90, 57, 0.32);
  border-color: var(--color-rust);
  color: var(--color-white);
}

/* Google Reviews widget */
.sha-hero-reviews {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.sha-hero-google-icon {
  width: 41px;
  height: 41px;
  flex-shrink: 0;
}
.sha-hero-stars {
  color: var(--color-pencil);
  font-size: 0.9rem;
  line-height: 1;
  margin-bottom: 0.3rem;
  letter-spacing: 0.05em;
}
.sha-hero-reviews-link {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  color: var(--color-white);
  font-family: var(--font-inter);
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
  line-height: 1;
}
.sha-hero-reviews-link:hover { color: var(--color-pencil); }

  /* === Sub-page Breadcrumb — uniform pill chips on Spencer blue bar =========== */
  .sha-sub-breadcrumb {
      background: var(--gradient-subtle-blue);
      padding: 1rem 0;
      border-top: 1px solid rgba(255,255,255,.08);
      border-bottom: 1px solid rgba(0,0,0,.18);
  }

  .sha-sub-breadcrumb .breadcrumb {
      margin: 0;
      padding: 0;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: .5rem;
  }
  .sha-sub-breadcrumb .breadcrumb-item + .breadcrumb-item::before {
      content: none;
      padding: 0;
  }
  .sha-sub-breadcrumb .breadcrumb-item {
      display: inline-flex;
      align-items: center;
  }

  /* One chip style — every item, same size, same shape */
  .sha-sub-breadcrumb .breadcrumb-item > a,
  .sha-sub-breadcrumb .breadcrumb-item.active {
      display: inline-flex;
      align-items: center;
      padding: .5rem 1rem;
      border-radius: 999px;
      font-family: var(--font-outfit);
      font-size: .8rem;
      font-weight: var(--font-weight-semibold);
      letter-spacing: .03em;
      line-height: 1;
      text-decoration: none;
      white-space: nowrap;
      border: 1px solid rgba(255,255,255,.55);
      transition: background-color .18s ease, color .18s ease, border-color .18s ease;
  }

  /* Inactive links — transparent fill, white text */
  .sha-sub-breadcrumb .breadcrumb-item > a {
      color: var(--color-white);
      background: transparent;
  }

  /* Hover/focus — text dims a shade, no background or border change */
  .sha-sub-breadcrumb .breadcrumb-item > a:hover,
  .sha-sub-breadcrumb .breadcrumb-item > a:focus-visible {
      color: var(--color-neutral-300);      /* #CCCED6 — soft off-white */
  }

  /* Active (current page) — solid white, brand-blue text, no hover */
  .sha-sub-breadcrumb .breadcrumb-item.active {
      background: var(--color-pencil);
      color: var(--color-dark-ocean);
      border-color: var(--color-pencil);
  }

  /* Mobile: keep the rhythm but tighten padding so a long trail fits */
  @media (max-width: 575.98px) {
      .sha-sub-breadcrumb { padding: .75rem 0; }
      .sha-sub-breadcrumb .breadcrumb-item > a,
      .sha-sub-breadcrumb .breadcrumb-item.active {
          font-size: .75rem;
          padding: .42rem .8rem;
      }
  }
  
/* ── Accreditation Bar ───────────────────────────────────────
   Palladian outer continues the hero band.
   Inner pill uses same bg color — rounded corners define shape.
   ─────────────────────────────────────────────────────────── */
.sha-accred-outer {
  background: var(--color-palladian);
  padding: 0 5rem 3rem;
}

.sha-accred-bar {
  padding: 1rem 5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}

.sha-accred-item {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  flex-shrink: 0;
}

.sha-accred-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.25rem;
  color: var(--color-rust) !important;
  font-size: 2.25rem;
  line-height: 1;
}

.sha-accred-icon i,
.sha-accred-icon svg {
  color: var(--color-rust) !important;
  fill: var(--color-rust) !important;
  font-size: 2.25rem !important;
  width: 1em;
  height: 1em;
}

.sha-accred-text {
  display: flex;
  flex-direction: column;
  font-family: var(--font-oswald);
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.125rem;
  color: var(--color-dark-ocean);
  white-space: nowrap;
}

.sha-accred-logo {
  flex-shrink: 0;
}

.sha-accred-logo img {
  width: 365px;
  height: 88px;
}

@media (max-width: 1199px) {
  .sha-accred-outer { padding: 0 3rem 3rem; }
  .sha-accred-bar { padding: 1rem 2rem; gap: 1rem; }
  .sha-accred-logo img { width: 260px; height: auto; }
  .sha-accred-text { font-size: 0.875rem; }
  .sha-accred-icon { font-size: 1.875rem; }
  .sha-accred-icon i, .sha-accred-icon svg { font-size: 1.875rem !important; }
  .sha-accred-item { gap: 0.65rem; }
}

@media (max-width: 767px) {
  .sha-accred-outer { padding: 0 1rem 2rem; }
  .sha-accred-bar {
    border-radius: 1rem;
    padding: 1.25rem 1.25rem;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1.25rem;
  }
  .sha-accred-logo { order: -1; width: 100%; text-align: center; }
  .sha-accred-logo img { width: 200px; }
  .sha-accred-item { flex: 0 0 calc(50% - 0.625rem); }
}

/* ── Opening Section ─────────────────────────────────────────
   Full-width three-column layout: image | center | image
   Images bleed edge-to-edge; center holds form + financing.
   ─────────────────────────────────────────────────────────── */
.sha-opening {
  background: var(--color-palladian);
  padding: 3.75rem 0;
  overflow: hidden;
}

.sha-opening .container-fluid {
  padding-left: 0;
  padding-right: 0;
}

/* Image cols: remove Bootstrap col padding so bg bleeds to section edge */
.sha-opening-row > .sha-opening-img {
  padding: 0;
}

/* Side image panels — Bootstrap col handles flex sizing */
.sha-opening-img {
  min-height: 608px;
  position: relative;
  overflow: hidden;
  background-size: cover;
  background-position: center;
}

.sha-opening-img-left {
  border-top-right-radius: 60px;
  background-image: url('../img/sha-opening-left.webp');
}

.sha-opening-img-right {
  border-bottom-left-radius: 60px;
  background-image: url('../img/sha-opening-right.webp');
}

.sha-opening-img-overlay {
  position: absolute;
  inset: 0;
  background: rgba(9, 31, 60, 0.4);
}

/* Center column — Bootstrap col-lg-auto + d-flex flex-column on element */
.sha-opening-center {
  width: 531px;
  padding-left: 2.5rem;
  padding-right: 2.5rem;
}

/* Overline badge — Bootstrap d-inline-flex align-items-center align-self-start on element */
.sha-overline-badge {
  display: inline-flex;
  align-self: flex-start;
  border: 3px solid var(--color-blue);
  border-radius: 20px;
  padding: 0.5rem 1.25rem;
}

.sha-overline-badge span {
  font-family: 'Brush Script MT', cursive;
  font-style: italic;
  font-size: 1rem;
  line-height: 1.25;
  color: var(--color-blue);
  white-space: nowrap;
}

/* Long badge text (e.g. "Schedule Your Heating System Tune-Up Before Winter Arrives")
   overflowed 375px phones — let the badge cap at its column and wrap there. */
@media (max-width: 575.98px) {
  .sha-overline-badge { max-width: 100%; }
  .sha-overline-badge span { white-space: normal; }
}

/* Form card — Bootstrap d-flex flex-column flex-grow-1 on element */
.sha-form-card {
  background: var(--color-palladian);
  border: 3px solid var(--color-blue);
  border-radius: 20px;
  padding: 1.75rem;
  overflow: hidden;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.05);
}

.sha-form-heading {
  font-family: var(--font-oswald);
  font-weight: 700;
  font-size: 2rem;
  line-height: 2.5rem;
  color: var(--color-rust);
}

/* Form inputs inside sha-form-card */
.sha-form-card form {
  margin-bottom: 0;
}

.sha-form-card .row {
  --bs-gutter-x: 0.75rem;
}

.sha-form-card .mb-4 {
  margin-bottom: 0.75rem !important;
}

.sha-form-card .form-control {
  background: var(--color-white);
  border: none;
  border-radius: 4px;
  height: 30px;
  padding: 0.5rem;
  font-family: var(--font-oswald);
  font-weight: 700;
  font-size: 0.75rem;
  line-height: 1;
  color: var(--color-black);
}

.sha-form-card textarea.form-control {
  height: auto;
  min-height: 72px;
}

.sha-form-card .form-control::placeholder {
  color: var(--color-neutral-500);
  font-family: var(--font-oswald);
  font-weight: 700;
}

.sha-form-card .form-control:focus {
  box-shadow: 0 0 0 2px rgba(8, 67, 146, 0.25);
  outline: none;
}

/* Submit button inside sha-form-card */
.sha-form-card #submit-form-button {
  background: var(--color-dark-ocean);
  color: var(--color-palladian);
  font-family: var(--font-oswald);
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.125;
  border: none;
  border-radius: 50px;
  padding: 0.75rem 1rem;
  transition: background var(--transition-standard);
}

.sha-form-card #submit-form-button:hover,
.sha-form-card #submit-form-button:focus {
  background: #0a2a52;
  color: var(--color-palladian);
}

/* Financing callout — Bootstrap d-flex flex-column on element */
.sha-financing-callout {
  border: 3px solid var(--color-blue);
  border-radius: 12px;
  padding: 1.25rem;
}

.sha-financing-heading {
  font-family: var(--font-oswald);
  font-weight: 700;
  font-size: 1.5rem;
  line-height: 2rem;
  color: var(--color-blue);
}

.sha-financing-body {
  font-family: var(--font-inter);
  font-size: 0.875rem;
  line-height: 1.375rem;
  color: var(--color-dark-ocean);
}

/* Phone button extends Bootstrap btn */
.sha-financing-phone {
  background: var(--color-rust);
  color: var(--color-palladian);
  font-family: var(--font-oswald);
  font-weight: 700;
  font-size: 1rem;
  border-radius: 50px;
  padding: 0.5rem 0.75rem;
  transition: background var(--transition-standard);
}

.sha-financing-phone:hover,
.sha-financing-phone:focus {
  background: #a34e30;
  color: var(--color-palladian);
}

@media (max-width: 1199px) {
  .sha-opening-center { width: 420px; padding-left: 1.5rem; padding-right: 1.5rem; }
}

@media (max-width: 991px) {
  .sha-opening-center { width: 100%; padding: 2rem 1.5rem; }
}

/* ── Services Section ────────────────────────────────────────── */
.sha-services-heading {
  font-family: var(--font-oswald);
  font-weight: 700;
  font-size: 2.5rem;
  line-height: 3rem;
  color: var(--color-blue);
}

.sha-services-body {
  font-family: var(--font-inter);
  font-size: 1rem;
  line-height: 1.5rem;
  color: var(--color-dark-ocean);
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}

/* Tabs — top-radius only, flat bottom sits flush on white section below */
.sha-service-tabs {
  gap: 0.75rem;
  flex-wrap: wrap;
}

.sha-service-tab {
  width: 235px;
  max-width: 100%;
  min-height: 52px;
  border-radius: 12px 12px 0 0;
  background: var(--color-neutral-300);
  color: var(--color-blue);
  font-family: var(--font-oswald);
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.15;
  border: none;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.05);
  padding: 0.5rem 0.75rem;
  white-space: normal;
  text-align: center;
  transition: background var(--transition-standard);
}

/* On tablet, allow tabs to shrink to fit 3-up at common viewports */
@media (max-width: 991px) {
  .sha-service-tab { width: calc((100% - 1.5rem) / 3); font-size: 0.875rem; }
}

/* On mobile, stack tabs full-width */
@media (max-width: 575px) {
  .sha-service-tab { width: 100%; font-size: 1rem; }
}

.sha-service-tab.active {
  background: var(--color-white);
  color: var(--color-blue);
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.05);
}

.sha-service-tab:not(.active):hover {
  background: var(--color-neutral-200);
}

/* Tab content — no bg/shadow/radius, pane content sits on white container-fluid */
.sha-service-tab-content {
  padding: 2.5rem 0 0;
}

/* Service cards inside panes */
.sha-service-card {
  background: var(--color-neutral-50);
  border: 1px solid var(--color-neutral-50);
  border-radius: 16px;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.05);
  overflow: hidden;
}

.sha-service-card-img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  display: block;
}

.sha-service-card-body {
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  flex: 1;
}

.sha-service-card-title {
  font-family: var(--font-oswald);
  font-weight: 500;
  font-size: 2rem;
  line-height: 2.5rem;
  color: var(--color-rust);
  margin: 0;
}

.sha-service-card-text {
  font-family: var(--font-inter);
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.5rem;
  color: var(--color-dark-ocean);
  margin: 0;
}

.sha-service-card-read-more {
  font-family: var(--font-inter);
  font-weight: 600;
  font-size: 1rem;
  color: var(--color-black);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0;
}

.sha-service-card-read-more:hover { color: var(--color-rust); }

.sha-service-card-read-more[aria-expanded="true"] [class*="fa-"] {
  transform: rotate(180deg);
  transition: transform 0.25s ease;
}

.sha-service-card-cta {
  background: var(--color-blue);
  color: var(--color-white) !important;
  font-family: var(--font-oswald);
  font-weight: 700;
  font-size: 1rem;
  border-radius: 50px;
  padding: 0.75rem 1.25rem;
  text-decoration: none;
  display: inline-block;
  align-self: flex-start;
  border: none;
  transition: background var(--transition-standard);
}

.sha-service-card-cta:hover { background: var(--color-dark-ocean); }

.sha-service-card-collapse {
  font-family: var(--font-inter);
  font-size: 0.875rem;
  line-height: 1.5rem;
  color: var(--color-dark-ocean);
  padding-top: 0.375rem;
}

.sha-service-card-collapse p {
  margin-bottom: 0;
  color: var(--color-dark-ocean);
}

/* === Service Card Flip === */
.sha-flip-card {
  perspective: 1200px;
}

.sha-flip-card-inner {
  position: relative;
  transition: transform 0.55s cubic-bezier(0.4, 0.2, 0.2, 1);
  transform-style: preserve-3d;
}

.sha-flip-card-inner.is-flipped {
  transform: rotateY(180deg);
}

.sha-flip-card-front {
  position: relative;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.sha-flip-card-back {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transform: rotateY(180deg);
  background: var(--color-dark-ocean);
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.sha-flip-card-back-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  padding: 2rem 1.5rem;
  text-align: center;
  width: 100%;
}

.sha-flip-icon {
  font-size: 2rem;
  color: var(--color-rust);
}

.sha-flip-prompt {
  font-family: var(--font-oswald);
  font-weight: 700;
  font-size: 1.375rem;
  line-height: 1.75rem;
  color: var(--color-white);
  margin: 0;
}

.sha-flip-location-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 0.875rem 1.25rem;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 50px;
  font-family: var(--font-oswald);
  font-weight: 700;
  font-size: 1rem;
  color: var(--color-white) !important;
  text-decoration: none;
  transition: background 0.2s ease, border-color 0.2s ease;
}

.sha-flip-location-btn:hover {
  background: var(--color-rust);
  border-color: var(--color-rust);
  color: var(--color-white) !important;
}

.sha-flip-back-btn {
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.5);
  font-family: var(--font-inter);
  font-weight: 500;
  font-size: 0.875rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0;
  transition: color 0.2s ease;
}

.sha-flip-back-btn:hover {
  color: var(--color-palladian);
}

/* ── Why Choose Section ─────────────────────────────────── */
.sha-why-choose {
  background: var(--color-palladian);
  padding: 5rem 0;
}

.sha-why-photo-col {
  width: 411px;
}

.sha-why-photo-wrap {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  height: 100%;
  min-height: 400px;
}

.sha-why-photo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sha-why-photo-overlay {
  position: absolute;
  inset: 0;
  background: rgba(9, 31, 60, 0.4);
}

.sha-why-heading {
  font-family: var(--font-oswald);
  font-weight: 700;
  font-size: 2.5rem;
  line-height: 3rem;
  color: var(--color-blue);
  margin: 0;
}

.sha-why-body {
  font-family: var(--font-inter);
  font-size: 1rem;
  line-height: 1.5rem;
  color: var(--color-dark-ocean);
}

.sha-why-body p:last-child { margin-bottom: 0; }

.sha-why-cta-phone {
  background: var(--color-dark-ocean);
  color: var(--color-palladian) !important;
  font-family: var(--font-oswald);
  font-weight: 700;
  font-size: 1rem;
  border-radius: 50px;
  padding: 0.75rem 1rem;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  transition: background var(--transition-standard);
}

.sha-why-cta-phone:hover { background: var(--color-blue); }

.sha-why-cta-talk {
  background: var(--color-rust);
  color: var(--color-palladian) !important;
  font-family: var(--font-oswald);
  font-weight: 700;
  font-size: 1rem;
  border-radius: 50px;
  padding: 0.75rem 1rem;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  transition: background var(--transition-standard);
}

.sha-why-cta-talk:hover { background: var(--color-rust-light); }

.sha-advantage-card {
  background: var(--color-dark-ocean);
  border: 2px solid transparent;
  border-radius: 12px;
  padding: 1.25rem;
  height: 100%;
  gap: 1.75rem;
  cursor: default;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.sha-advantage-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 28px rgba(8, 67, 146, 0.45);
  border-color: var(--color-pencil);
}

.sha-advantage-icon {
  color: var(--color-pencil);
  font-size: 1.5rem;
  width: 2.5rem;
  height: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border-radius: 50%;
  transition: background 0.25s ease;
}

.sha-advantage-card:hover .sha-advantage-icon {
  background: rgba(254, 177, 97, 0.15);
}

.sha-advantage-title {
  font-family: var(--font-oswald);
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.125rem;
  color: var(--color-white);
  margin: 0;
}

.sha-advantage-text {
  font-family: var(--font-inter);
  font-size: 0.875rem;
  line-height: 1.375rem;
  color: var(--color-white);
  margin: 0;
}

/* ── Maintenance Plan Section ───────────────────────────── */
.sha-maintenance {
  background: var(--color-palladian);
  margin-top: 3.75rem;
}

.sha-maintenance .container-fluid {
  padding-left: 0;
  padding-right: 0;
}

.sha-maintenance .row {
  --bs-gutter-x: 0;
}

.sha-maint-img-col {
  padding-left: 0;
  padding-right: 0;
}

.sha-maint-img-wrap {
  position: relative;
  height: 100%;
  min-height: 480px;
  overflow: hidden;
  border-radius: 0 80px 0 0;
}

.sha-maint-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sha-maint-img-overlay {
  position: absolute;
  inset: 0;
  background: rgba(30, 44, 85, 0.2);
}

.sha-maint-content {
  padding: 3.75rem 3.5rem 3.75rem 3rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.sha-maint-heading {
  font-family: var(--font-oswald);
  font-weight: 700;
  font-size: 2.5rem;
  line-height: 3rem;
  color: var(--color-blue);
  margin: 0;
}

.sha-maint-body {
  font-family: var(--font-inter);
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.5rem;
  color: var(--color-dark-ocean);
  margin: 0;
}

.sha-maint-sub {
  font-family: var(--font-oswald);
  font-weight: 500;
  font-size: 1.25rem;
  line-height: 1.75rem;
  color: var(--color-dark-ocean);
  margin: 0;
}

.sha-benefit-chip {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  background: var(--color-neutral-50);
  border: 2px solid var(--color-dark-ocean);
  border-radius: 8px;
  padding: 0.5rem 0.75rem;
  cursor: default;
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.sha-benefit-chip:hover {
  background: var(--color-dark-ocean);
  border-color: var(--color-dark-ocean);
  transform: translateY(-2px);
}

.sha-benefit-check {
  color: var(--color-rust);
  font-size: 1rem;
  flex-shrink: 0;
  transition: color 0.2s ease;
}

.sha-benefit-chip:hover .sha-benefit-check {
  color: var(--color-pencil);
}

.sha-benefit-chip span {
  font-family: var(--font-inter);
  font-weight: 600;
  font-size: 0.875rem;
  line-height: 1.375rem;
  color: var(--color-dark-ocean);
  transition: color 0.2s ease;
}

.sha-benefit-chip:hover span {
  color: var(--color-white);
}

.sha-maint-cta-phone {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  border: 3px solid var(--color-blue);
  color: var(--color-blue) !important;
  font-family: var(--font-oswald);
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.125rem;
  border-radius: 50px;
  padding: 0.75rem 1rem;
  text-decoration: none;
  transition: background var(--transition-standard), color var(--transition-standard);
}

.sha-maint-cta-phone:hover {
  background: var(--color-blue);
  color: var(--color-palladian) !important;
}

.sha-maint-cta-learn {
  display: inline-flex;
  align-items: center;
  background: var(--color-rust);
  color: var(--color-palladian) !important;
  font-family: var(--font-oswald);
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.125rem;
  border-radius: 50px;
  padding: 0.75rem 1rem;
  text-decoration: none;
  transition: background var(--transition-standard);
}

.sha-maint-cta-learn:hover {
  background: var(--color-dark-ocean);
}

@media (max-width: 991px) {
  .sha-maint-img-wrap {
    min-height: 320px;
    border-radius: 0;
  }
  .sha-maint-content {
    padding: 2.5rem 1.5rem;
  }
}

/* ── Financing Section ──────────────────────────────────── */
.sha-financing {
  background: var(--color-palladian);
  margin-top: 3.75rem;
}

.sha-financing .container-fluid {
  padding-left: 0;
  padding-right: 0;
}

.sha-financing .row {
  --bs-gutter-x: 0;
}

.sha-finance-img-col {
  padding-left: 0;
  padding-right: 0;
}

.sha-finance-content {
  padding: 3.75rem 3rem 3.75rem 3.5rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.sha-finance-img-wrap {
  position: relative;
  height: 100%;
  min-height: 480px;
  overflow: hidden;
  border-radius: 0 0 0 80px;
}

.sha-finance-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sha-finance-img-overlay {
  position: absolute;
  inset: 0;
  background: rgba(30, 44, 85, 0.4);
}

@media (max-width: 991px) {
  .sha-finance-img-wrap {
    min-height: 320px;
    border-radius: 0;
  }
  .sha-finance-content {
    padding: 2.5rem 1.5rem;
  }
  /* Stacked on mobile, maintenance text runs straight into financing text
     (same background) — drop the section margin so the padding alone separates them. */
  .sha-maintenance + .sha-financing {
    margin-top: 0;
  }
}

/* === Sister Business Section === */
.sha-sister-biz {
  background: var(--color-palladian);
  padding: 5rem 0;
}

.sha-sister-heading {
  font-family: var(--font-oswald);
  font-weight: 700;
  font-size: 2.5rem;
  line-height: 3rem;
  color: var(--color-blue);
  margin: 0;
}

.sha-sister-body {
  font-family: var(--font-inter);
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.5rem;
  color: var(--color-blue);
  margin: 0;
}

.sha-sister-btn-blue {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--color-blue);
  color: var(--color-palladian) !important;
  font-family: var(--font-oswald);
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.125rem;
  border-radius: 50px;
  padding: 0.75rem 1.25rem;
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--transition-standard);
}
.sha-sister-btn-blue:is(:hover, :focus) { background: var(--color-dark-ocean); }

.sha-sister-card-outer {
  position: relative;
}

.sha-sister-card {
  background: var(--color-dark-ocean);
  border-radius: 20px;
  padding: 1.875rem;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.2);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 13.875rem;
}

.sha-sister-card-inner {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  max-width: calc(100% - 323px);
}

.sha-sister-card-text {
  font-family: var(--font-inter);
  font-weight: 400;
  font-size: 0.875rem;
  line-height: 1.375rem;
  color: var(--color-white);
  margin: 0;
}

.sha-sister-btn-rust {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--color-rust);
  color: var(--color-palladian) !important;
  font-family: var(--font-oswald);
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.125rem;
  border-radius: 50px;
  padding: 0.75rem 1.25rem;
  text-decoration: none;
  white-space: nowrap;
  align-self: flex-start;
  transition: background var(--transition-standard);
}
.sha-sister-btn-rust:is(:hover, :focus) { background: #9e4d30; }

.sha-sister-logo {
  position: absolute;
  top: -5rem;
  right: -1rem;
  width: 323px;
  height: 207px;
}

@media (max-width: 991px) {
  .sha-sister-logo {
    display: none;
  }
  .sha-sister-card-inner {
    max-width: 100%;
  }
  .sha-sister-btn-blue {
    white-space: normal;
  }
}

/* === Trust Closer Section === */
.sha-trust-closer {
  padding: 3.75rem 0;
}

.sha-trust-card {
  background: var(--color-neutral-50);
  border-radius: 2.5rem;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.05);
  padding: 2.5rem 5rem;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
}

.sha-trust-heading {
  font-family: var(--font-oswald);
  font-weight: 700;
  font-size: 2.5rem;
  line-height: 3rem;
  color: var(--color-dark-ocean);
  margin: 0;
}

.sha-trust-btn-phone {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--color-rust);
  color: var(--color-palladian) !important;
  font-family: var(--font-oswald);
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.125rem;
  border-radius: 50px;
  padding: 0.75rem 1rem;
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--transition-standard);
}
.sha-trust-btn-phone:is(:hover, :focus) { background: #9e4d30; }

.sha-trust-btn-book {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--color-pencil);
  color: var(--color-dark-ocean) !important;
  border: 3px solid var(--color-dark-ocean);
  font-family: var(--font-oswald);
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.125rem;
  border-radius: 50px;
  padding: 0.75rem 1rem;
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--transition-standard), color var(--transition-standard), border-color var(--transition-standard);
}
.sha-trust-btn-book:is(:hover, :focus) {
  background: var(--color-dark-ocean);
  color: var(--color-palladian) !important;
  border-color: var(--color-dark-ocean);
}

.sha-trust-body {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.sha-trust-body p {
  font-family: var(--font-inter);
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.5rem;
  color: var(--color-dark-ocean);
  margin: 0;
}

.sha-trust-chips {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.sha-trust-chip {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  border: 3px solid var(--color-dark-ocean);
  border-radius: 20px;
  padding: 1rem;
  flex-shrink: 0;
  cursor: default;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.sha-trust-chip:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(15, 52, 101, 0.18);
  border-color: var(--color-rust);
}

.sha-trust-chip-icon {
  font-size: 1.5rem;
  width: 2rem;
  height: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border-radius: 50%;
  color: var(--color-rust);
  transition: background 0.25s ease;
}

.sha-trust-chip:hover .sha-trust-chip-icon {
  background: rgba(205, 100, 70, 0.12);
}

.sha-trust-chip-text {
  display: flex;
  flex-direction: column;
  font-family: var(--font-oswald);
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.125rem;
  color: var(--color-dark-ocean);
  white-space: nowrap;
}

@media (max-width: 991px) {
  .sha-trust-card {
    padding: 2rem 1.5rem;
    border-radius: 1.5rem;
  }
  .sha-trust-chips {
    justify-content: flex-start;
  }
}

@media (min-width: 992px) {
  .sha-trust-chips {
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
  }
  .sha-trust-chips .sha-trust-chip {
    flex: 1 1 0;
    min-width: 0;
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }
  .sha-trust-chips .sha-trust-chip-text {
    min-width: 0;
  }
  .sha-trust-chips .sha-trust-chip-text span {
    white-space: normal;
    overflow-wrap: anywhere;
    font-size: 0.85rem;
    line-height: 1.2;
  }
}

/* === FAQ Section === */
.sha-faq {
  background: var(--color-palladian);
  padding: 5rem 0;
}

.sha-faq-heading {
  font-family: var(--font-oswald);
  font-weight: 700;
  font-size: 2.5rem;
  line-height: 3rem;
  color: var(--color-blue);
  margin: 0;
}

.sha-faq-item {
  border-bottom: 1px solid var(--color-dark-ocean);
  padding-bottom: 0.5rem;
}

.sha-faq-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  background: none;
  border: none;
  padding: 0.5rem 0;
  gap: 1rem;
  cursor: pointer;
  text-align: left;
}

.sha-faq-question {
  font-family: var(--font-inter);
  font-weight: 600;
  font-size: 1.125rem;
  line-height: 1.625rem;
  color: var(--color-blue);
  flex: 1;
}

.sha-faq-icon {
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--color-blue);
  font-size: 1rem;
  transition: transform 0.25s ease;
}

.sha-faq-btn[aria-expanded="true"] .sha-faq-icon {
  transform: rotate(45deg);
}

.sha-faq-answer {
  font-family: var(--font-inter);
  font-size: 1rem;
  line-height: 1.5rem;
  color: var(--color-dark-ocean);
  padding: 0.25rem 0 0.75rem;
  margin: 0;
}

/* === Service Area Section === */
.sha-service-area {
  background: var(--color-palladian);
  padding: 5rem 0;
}

.sha-service-area-heading {
  font-family: var(--font-oswald);
  font-weight: 700;
  font-size: 2.5rem;
  line-height: 3rem;
  color: var(--color-blue);
  margin: 0;
}

.sha-service-area-body {
  font-family: var(--font-inter);
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.5rem;
  color: var(--color-dark-ocean);
  margin: 0;
}

.sha-service-map-wrap {
  border-radius: 20px;
  overflow: hidden;
  display: block;
}

.sha-service-map-img {
  display: block;
  width: 100%;
  height: auto;
}

.sha-location-col-heading {
  font-family: var(--font-oswald);
  font-weight: 700;
  font-size: 1.5rem;
  line-height: 2rem;
  color: var(--color-blue);
  margin: 0 0 0.75rem 0;
}

.sha-location-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  background: var(--color-white);
  border: 3px solid var(--color-dark-ocean);
  border-radius: 12px;
  padding: 0.75rem;
  text-decoration: none;
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.sha-location-item:hover {
  background: var(--color-dark-ocean);
  border-color: var(--color-dark-ocean);
  transform: translateY(-2px);
}

.sha-location-item:hover .sha-location-name {
  color: var(--color-palladian);
}

.sha-location-item:hover .sha-location-icon {
  background: var(--color-pencil);
}


.sha-location-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--color-blue);
  flex-shrink: 0;
  color: #fff;
  font-size: 1rem;
  transition: background 0.2s ease;
}

.sha-location-icon--hq {
  background: var(--color-pencil);
}

.sha-location-name {
  font-family: var(--font-oswald);
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.125rem;
  color: var(--color-blue);
  transition: color 0.2s ease;
}

@media (max-width: 991px) {
  .sha-service-area {
    padding: 3rem 0;
  }
}

/* === Spencer Footer === */
.sha-footer {
  background: var(--color-palladian);
  padding: 3.75rem 0 5rem;
  border-top: 1px solid rgba(15, 52, 101, 0.15);
}

.sha-footer-col-heading {
  font-family: var(--font-oswald);
  font-weight: 700;
  font-size: 1.25rem;
  line-height: 1.75rem;
  color: var(--color-rust);
  margin: 0 0 0.75rem;
}

.sha-footer-group {
  display: flex;
  flex-direction: column;
  margin-bottom: 2rem;
}

.sha-footer-group:last-child {
  margin-bottom: 0;
}

.sha-footer-links {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.sha-footer-link {
  font-family: var(--font-inter);
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.5rem;
  color: var(--color-dark-ocean);
  text-decoration: none;
}

.sha-footer-link:hover {
  color: var(--color-rust);
}

.sha-footer-contact-item {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  margin-bottom: 0.5rem;
}

.sha-footer-contact-item:last-child {
  margin-bottom: 0;
}

.sha-footer-contact-label {
  font-family: var(--font-oswald);
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.125rem;
  color: var(--color-dark-ocean);
}

.sha-footer-contact-text {
  font-family: var(--font-inter);
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.5rem;
  color: var(--color-dark-ocean);
  text-decoration: none;
}

a.sha-footer-contact-text:hover {
  color: var(--color-rust);
}

.sha-footer-socials {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

/* === Reviews Section === */
.sha-reviews {
  background: var(--color-white);
  padding: 5rem 0;
}

.sha-reviews-heading {
  font-family: var(--font-oswald);
  font-weight: 700;
  font-size: 2.5rem;
  line-height: 3rem;
  color: var(--color-blue);
  margin: 0;
}

.sha-reviews-ctas {
  flex-wrap: wrap;
}

.sha-reviews-btn-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 3px solid var(--color-dark-ocean);
  border-radius: 50px;
  padding: 0.75rem 1.5rem;
  font-family: var(--font-oswald);
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.125rem;
  color: var(--color-dark-ocean);
  text-decoration: none;
  transition: background var(--transition-standard), color var(--transition-standard);
  white-space: nowrap;
}

.sha-reviews-btn-outline:hover {
  background: var(--color-dark-ocean);
  color: var(--color-white);
}

.sha-reviews-btn-solid {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--color-rust);
  border-radius: 50px;
  padding: 0.75rem 1.5rem;
  font-family: var(--font-oswald);
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.125rem;
  color: var(--color-white);
  text-decoration: none;
  transition: background var(--transition-standard);
  white-space: nowrap;
}

.sha-reviews-btn-solid:hover {
  background: var(--color-rust-light);
  color: var(--color-white);
}

@media (max-width: 991.98px) {
  .sha-reviews {
    padding: 3rem 0;
  }

  .sha-reviews-heading {
    font-size: 2rem;
    line-height: 2.5rem;
  }
}

/* === Footer Styles === */
.sha-footer-social-link {
  font-size: 1.125rem;
  color: var(--color-dark-ocean);
  text-decoration: none;
  line-height: 1;
  transition: color 0.2s ease;
}

.sha-footer-social-link:hover {
  color: var(--color-rust);
}

.sha-footer-bbb-link {
  display: flex;
  align-items: center;
  transition: opacity 0.2s ease;
}

.sha-footer-bbb-link:hover {
  opacity: 0.7;
}

.sha-footer-bar {
  background: var(--color-dark-ocean);
  padding: 1rem 0;
}

.sha-footer-bar-text {
  font-family: var(--font-inter);
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.6);
  margin: 0;
}

/* ── Sub-Page Template Components ───────────────────────────
   Used by all service sub-pages. Opening section reuses the
   homepage sha-opening layout; images are overridden via
   inline style on each page.
   ─────────────────────────────────────────────────────────── */

/* Quick trust chips inside sha-financing-callout on sub-pages */
.sha-quick-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
}

.sha-quick-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-family: var(--font-inter);
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--color-dark-ocean);
  background: rgba(15, 52, 101, 0.07);
  border-radius: 20px;
  padding: 0.25rem 0.625rem;
  white-space: nowrap;
}

.sha-quick-chip i {
  color: var(--color-rust);
  font-size: 0.65rem;
}

/* Main white body section */
.sha-subpage-body {
  background: var(--color-white);
  padding: 4rem 0 3rem;
}

.sha-page-h1 {
  font-family: var(--font-oswald);
  font-weight: 700;
  font-size: 2.25rem;
  line-height: 2.75rem;
  color: var(--color-dark-ocean);
  margin-bottom: 1.25rem;
}

.sha-page-lead {
  font-family: var(--font-inter);
  font-size: 1rem;
  line-height: 1.625rem;
  color: var(--color-dark-ocean);
  margin-bottom: 1.25rem;
}

.sha-page-body p, .sha-page-body ul li {
  font-family: var(--font-inter);
  font-size: 0.9rem;
  line-height: 1.55rem;
  color: var(--color-black);
}

.sha-page-body ul {
  padding-left: 1.25rem;
}

.sha-page-body ul li {
  margin-bottom: 0.4rem;
}

/* Right-column feature card */
.sha-page-feature-card {
  background: var(--color-neutral-50);
  border-left: 5px solid var(--color-rust);
  border-radius: 0 12px 12px 0;
  padding: 1.75rem 1.75rem 1.75rem 1.5rem;
  margin-bottom: 1.5rem;
}

.sha-page-feature-card-heading {
  font-family: var(--font-oswald);
  font-weight: 700;
  font-size: 1.25rem;
  line-height: 1.625rem;
  color: var(--color-dark-ocean);
  margin-bottom: 1rem;
}

/* Right-column CTA card */
.sha-page-cta-card {
  background: var(--color-dark-ocean);
  border-radius: 12px;
  padding: 1.75rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.sha-page-cta-card-heading {
  font-family: var(--font-oswald);
  font-weight: 700;
  font-size: 1.25rem;
  color: var(--color-white);
  margin: 0;
}

.sha-page-cta-card p {
  font-family: var(--font-inter);
  font-size: 0.85rem;
  line-height: 1.45rem;
  color: rgba(255, 255, 255, 0.8);
  margin: 0;
}

.sha-page-cta-phone {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--color-rust);
  color: var(--color-white) !important;
  font-family: var(--font-oswald);
  font-weight: 700;
  font-size: 1rem;
  border-radius: 50px;
  padding: 0.65rem 1.25rem;
  text-decoration: none;
  transition: background var(--transition-standard);
  align-self: flex-start;
}

.sha-page-cta-phone:hover { background: var(--color-rust-light); }

.sha-page-cta-schedule {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: transparent;
  color: var(--color-palladian) !important;
  border: 2px solid rgba(237, 233, 222, 0.4);
  font-family: var(--font-oswald);
  font-weight: 700;
  font-size: 1rem;
  border-radius: 50px;
  padding: 0.6rem 1.25rem;
  text-decoration: none;
  transition: border-color var(--transition-standard), background var(--transition-standard);
  align-self: flex-start;
}

.sha-page-cta-schedule:hover {
  background: rgba(237, 233, 222, 0.1);
  border-color: rgba(237, 233, 222, 0.7);
}

/* FAQ section */
.sha-faq-section {
  background: var(--color-neutral-50);
  padding: 4rem 0;
}

.sha-faq-heading {
  font-family: var(--font-oswald);
  font-weight: 700;
  font-size: 2rem;
  line-height: 2.5rem;
  color: var(--color-blue);
  margin: 0;
}

/* Related services section */
.sha-related-services {
  background: var(--color-dark-ocean);
  padding: 3.75rem 0;
}

.sha-related-heading {
  font-family: var(--font-oswald);
  font-weight: 700;
  font-size: 1.875rem;
  line-height: 2.375rem;
  color: var(--color-white);
  margin: 0;
}

.sha-related-card {
  display: flex;
  flex-direction: column;
  background: var(--color-dark-ocean);
  border: 2px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  overflow: hidden;
  height: 100%;
  text-decoration: none;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.sha-related-card-photo {
  position: relative;
  aspect-ratio: 32 / 15;
  overflow: hidden;
}

.sha-related-card-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}

.sha-related-card-body {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.125rem 1.25rem;
}

.sha-related-card-title {
  font-family: var(--font-oswald);
  font-weight: 700;
  font-size: 1.125rem;
  line-height: 1.375rem;
  color: var(--color-white);
  margin: 0;
}

.sha-related-card-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  color: var(--color-pencil);
  font-size: 0.875rem;
  flex-shrink: 0;
  transition: background 0.25s ease, transform 0.25s ease;
}

.sha-related-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 28px rgba(8, 67, 146, 0.45);
  border-color: var(--color-pencil);
}

.sha-related-card:hover .sha-related-card-photo img {
  transform: scale(1.04);
}

.sha-related-card:hover .sha-related-card-arrow {
  background: rgba(254, 177, 97, 0.15);
  transform: translateX(2px);
}

@media (max-width: 991px) {
  .sha-page-h1 {
    font-size: 1.875rem;
    line-height: 2.375rem;
  }

  .sha-subpage-body {
    padding: 2.5rem 0 2rem;
  }

  .sha-page-feature-card {
    border-radius: 12px;
    border-left: 5px solid var(--color-rust);
  }
}

/* ════════════════════════════════════════════════════════════
   SUB-PAGE INTERACTIVE COMPONENTS
   Used by all service sub-pages (air-conditioner/repair, etc.)
   ════════════════════════════════════════════════════════════ */

/* Breadcrumb (sits between Opening and Why Trust) */
.sha-sub-breadcrumb {
  background: var(--color-palladian);
  border-top: 1px solid rgba(15, 52, 101, 0.08);
  border-bottom: 1px solid rgba(15, 52, 101, 0.08);
  padding: 0.75rem 0;
}

.sha-sub-breadcrumb .breadcrumb {
  margin: 0;
  font-family: var(--font-inter);
  font-size: 0.85rem;
  --bs-breadcrumb-divider-color: var(--color-neutral-500);
  --bs-breadcrumb-item-padding-x: 0.5rem;
}

.sha-sub-breadcrumb .breadcrumb-item a {
  color: var(--color-rust);
  font-weight: 600;
  text-decoration: none;
  transition: color 0.2s ease;
}

.sha-sub-breadcrumb .breadcrumb-item a:hover {
  color: var(--color-rust-light);
  text-decoration: underline;
}

.sha-sub-breadcrumb .breadcrumb-item.active {
  color: var(--color-dark-ocean);
  font-weight: 700;
}

.sha-sub-breadcrumb .breadcrumb-item + .breadcrumb-item::before {
  color: var(--color-neutral-500);
  content: "›";
  font-weight: 700;
}

/* Hero inline link (rust underline pattern) */
.sha-hero-inline-link {
  color: var(--color-pencil);
  font-weight: 700;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color 0.2s ease;
}

.sha-hero-inline-link:hover,
.sha-hero-inline-link:focus {
  color: var(--color-white);
}

/* Section heading shared by all sub-page sections */
.sha-sub-section-h2 {
  font-family: var(--font-oswald);
  font-weight: 700;
  font-size: 2.25rem;
  line-height: 2.625rem;
  color: var(--color-dark-ocean);
  margin: 0 0 0.5rem;
}

.sha-sub-section-h2--light {
  color: var(--color-white);
}

.sha-sub-section-intro {
  font-family: var(--font-inter);
  font-size: 1rem;
  line-height: 1.625rem;
  color: var(--color-neutral-700);
  max-width: 640px;
  margin: 0 auto;
}

.sha-overline-badge--light {
  border-color: var(--color-pencil);
}

.sha-overline-badge--light span {
  color: var(--color-pencil);
}

/* ── Why Trust Cards (collapsible) ───────────────────────── */
.sha-sub-why {
  background: var(--color-palladian);
  padding: 4.5rem 0;
}

.sha-sub-why-card {
  background: var(--color-white);
  border: 1px solid var(--color-neutral-100);
  border-radius: 16px;
  padding: 1.75rem 1.5rem 1.25rem;
  height: 100%;
  display: flex;
  flex-direction: column;
  text-align: center;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.sha-sub-why-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 28px rgba(15, 52, 101, 0.12);
  border-color: var(--color-rust);
}

.sha-sub-why-icon {
  width: 64px;
  height: 64px;
  margin: 0 auto 1rem;
  border-radius: 50%;
  background: var(--gradient-autumn);
  color: var(--color-white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.625rem;
  flex-shrink: 0;
}

.sha-sub-why-heading {
  font-family: var(--font-oswald);
  font-weight: 700;
  font-size: 1.125rem;
  line-height: 1.4;
  color: var(--color-dark-ocean);
  margin-bottom: 0.65rem;
}

.sha-sub-why-body {
  font-family: var(--font-inter);
  font-size: 0.875rem;
  line-height: 1.45rem;
  color: var(--color-neutral-700);
  margin-bottom: 0.75rem;
  flex-grow: 1;
}

.sha-sub-why-collapse {
  font-family: var(--font-inter);
  font-size: 0.85rem;
  line-height: 1.4rem;
  color: var(--color-dark-ocean);
  background: var(--color-palladian);
  padding: 0.85rem 1rem;
  border-radius: 8px;
  margin: 0.25rem 0 0.85rem;
  text-align: left;
}

.sha-sub-why-toggle {
  background: transparent;
  border: 2px solid var(--color-rust);
  border-radius: 50px;
  color: var(--color-rust);
  font-family: var(--font-oswald);
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0.45rem 1rem;
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  align-self: center;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}

.sha-sub-why-toggle:hover {
  background: var(--color-rust);
  color: var(--color-white);
}

.sha-sub-why-toggle .sha-sub-why-toggle-open { display: none; }
.sha-sub-why-toggle:not(.collapsed) .sha-sub-why-toggle-closed { display: none; }
.sha-sub-why-toggle:not(.collapsed) .sha-sub-why-toggle-open { display: inline; }

.sha-sub-why-chevron {
  font-size: 0.7rem;
  transition: transform 0.25s ease;
}

.sha-sub-why-toggle:not(.collapsed) .sha-sub-why-chevron {
  transform: rotate(180deg);
}

/* ── Common Problems (Pill Tabs) ─────────────────────────── */
.sha-sub-problems {
  background: var(--color-white);
  padding: 4.5rem 0;
}

.sha-sub-prob-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding-left: 0;
  list-style: none;
}

.sha-sub-prob-pill {
  background: var(--color-palladian);
  border: 2px solid var(--color-neutral-100);
  border-radius: 50px;
  padding: 0.6rem 1.1rem;
  font-family: var(--font-oswald);
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--color-dark-ocean);
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  transition: all 0.2s ease;
}

.sha-sub-prob-pill i {
  font-size: 0.875rem;
  color: var(--color-rust);
  transition: color 0.2s ease;
}

.sha-sub-prob-pill:hover {
  border-color: var(--color-rust);
  color: var(--color-rust);
}

.sha-sub-prob-pill.active {
  background: var(--color-rust) !important;
  border-color: var(--color-rust);
  color: var(--color-white) !important;
  box-shadow: 0 6px 16px rgba(181, 90, 57, 0.35);
}

.sha-sub-prob-pill.active i {
  color: var(--color-white);
}

.sha-sub-prob-content {
  background: var(--color-palladian);
  border-radius: 20px;
  padding: 2.5rem 2rem;
  margin-top: 1rem;
}

.sha-sub-prob-heading {
  font-family: var(--font-oswald);
  font-weight: 700;
  font-size: 1.625rem;
  line-height: 1.25;
  color: var(--color-dark-ocean);
  margin-bottom: 1rem;
}

.sha-sub-prob-content p {
  font-family: var(--font-inter);
  font-size: 0.95rem;
  line-height: 1.55rem;
  color: var(--color-dark-ocean);
}

.sha-sub-prob-card {
  background: var(--color-dark-ocean);
  border-left: 5px solid var(--color-rust);
  border-radius: 0 12px 12px 0;
  padding: 1.75rem 1.5rem 1.5rem 1.25rem;
  text-align: center;
  color: var(--color-white);
  box-shadow: 0 12px 24px rgba(15, 52, 101, 0.18);
}

.sha-sub-prob-card-icon {
  width: 56px;
  height: 56px;
  margin: 0 auto 0.85rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
  color: var(--color-white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.375rem;
}

.sha-sub-prob-card .sha-sub-prob-card-label {
  font-family: var(--font-inter);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-white);
  margin: 0 0 0.25rem;
}

.sha-sub-prob-card .sha-sub-prob-card-value {
  font-family: var(--font-oswald);
  font-weight: 700;
  font-size: 1.5rem;
  line-height: 1.875rem;
  color: var(--color-white);
  margin: 0 0 0.5rem;
}

.sha-sub-prob-card .sha-sub-prob-card-note {
  font-family: var(--font-inter);
  font-size: 0.8rem;
  line-height: 1.25rem;
  color: var(--color-white);
  margin: 0;
}

/* ── Repair Process (Numbered Timeline, Dark Band) ───────── */
.sha-sub-process {
  background: var(--color-dark-ocean);
  padding: 5rem 0;
  color: var(--color-white);
}

.sha-sub-process .sha-overline-badge {
  border-color: var(--color-pencil);
}

.sha-sub-process .sha-overline-badge span {
  color: var(--color-pencil);
}

.sha-sub-process-intro {
  font-family: var(--font-inter);
  font-size: 1rem;
  line-height: 1.625rem;
  color: rgba(255, 255, 255, 0.85);
  margin-bottom: 1.75rem;
}

.sha-sub-process-stats {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.sha-sub-process-stat {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}

.sha-sub-process-stat-icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(254, 177, 97, 0.15);
  color: var(--color-pencil);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.125rem;
  flex-shrink: 0;
}

.sha-sub-process-stat strong {
  display: block;
  font-family: var(--font-oswald);
  font-weight: 700;
  font-size: 1rem;
  color: var(--color-white);
  margin-bottom: 0.15rem;
}

.sha-sub-process-stat span {
  font-family: var(--font-inter);
  font-size: 0.85rem;
  line-height: 1.25rem;
  color: rgba(255, 255, 255, 0.75);
}

.sha-sub-cta-phone {
  background: var(--color-rust);
  color: var(--color-white) !important;
  font-family: var(--font-oswald);
  font-weight: 700;
  font-size: 1rem;
  border-radius: 50px;
  padding: 0.7rem 1.25rem;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  transition: background 0.2s ease, transform 0.2s ease;
}

.sha-sub-cta-phone:hover {
  background: var(--color-rust-light);
  transform: translateY(-2px);
}

.sha-sub-cta-ghost {
  background: transparent;
  color: var(--color-white) !important;
  border: 2px solid rgba(255, 255, 255, 0.4);
  font-family: var(--font-oswald);
  font-weight: 700;
  font-size: 1rem;
  border-radius: 50px;
  padding: 0.6rem 1.25rem;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  transition: all 0.2s ease;
}

.sha-sub-cta-ghost:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: var(--color-white);
}

.sha-sub-step-grid {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.sha-sub-step {
  display: flex;
  gap: 1.25rem;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(254, 177, 97, 0.2);
  border-radius: 14px;
  padding: 1.25rem 1.25rem 1.25rem 1rem;
  transition: background 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}

.sha-sub-step:hover {
  background: rgba(254, 177, 97, 0.08);
  border-color: var(--color-pencil);
  transform: translateX(4px);
}

.sha-sub-step-num {
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--gradient-autumn);
  color: var(--color-white);
  font-family: var(--font-oswald);
  font-weight: 700;
  font-size: 1.625rem;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 16px rgba(181, 90, 57, 0.35);
}

.sha-sub-step-heading {
  font-family: var(--font-oswald);
  font-weight: 700;
  font-size: 1.125rem;
  color: var(--color-pencil);
  margin: 0 0 0.35rem;
}

.sha-sub-step-body {
  font-family: var(--font-inter);
  font-size: 0.875rem;
  line-height: 1.4rem;
  color: rgba(255, 255, 255, 0.85);
  margin: 0;
}

.sha-sub-step-body a {
  color: var(--color-pencil);
}

/* ── Repair Scenarios (Card Grid) ────────────────────────── */
.sha-sub-scenarios {
  background: var(--color-palladian);
  padding: 4.5rem 0;
}

/* Fog reveal: cards 2-8 are fogged until the user hovers the section */
.sha-sub-scenarios .row > .col {
  transition: filter 0.7s ease, opacity 0.7s ease, transform 0.5s ease;
}

.sha-sub-scenarios .row > .col:not(:first-child) {
  filter: blur(6px) saturate(0.85);
  opacity: 0.4;
  transform: scale(0.97);
}

.sha-sub-scenarios:hover .row > .col,
.sha-sub-scenarios:focus-within .row > .col,
.sha-sub-scenarios.sha-sub-scenarios--revealed .row > .col {
  filter: none;
  opacity: 1;
  transform: scale(1);
}

/* Touch devices — show everything clear (no hover trigger) */
@media (hover: none) {
  .sha-sub-scenarios .row > .col:not(:first-child) {
    filter: none;
    opacity: 1;
    transform: scale(1);
  }
}

.sha-sub-scenario-card {
  background: var(--color-white);
  border: 1px solid var(--color-neutral-100);
  border-radius: 14px;
  padding: 1.5rem 1.25rem 1.25rem;
  height: 100%;
  text-align: center;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.sha-sub-scenario-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 28px rgba(15, 52, 101, 0.15);
  border-color: var(--color-rust);
}

/* First card always full strength + subtle pulse to invite the hover */
.sha-sub-scenarios .row > .col:first-child .sha-sub-scenario-card {
  border-color: var(--color-rust);
  box-shadow: 0 12px 28px rgba(181, 90, 57, 0.18);
  animation: shaScenarioPulse 2.4s ease-in-out infinite;
}

.sha-sub-scenarios:hover .row > .col:first-child .sha-sub-scenario-card,
.sha-sub-scenarios:focus-within .row > .col:first-child .sha-sub-scenario-card,
.sha-sub-scenarios.sha-sub-scenarios--revealed .row > .col:first-child .sha-sub-scenario-card {
  animation: none;
}

@keyframes shaScenarioPulse {
  0%, 100% { box-shadow: 0 12px 28px rgba(181, 90, 57, 0.18); }
  50%      { box-shadow: 0 16px 36px rgba(181, 90, 57, 0.32); }
}

.sha-sub-scenario-icon {
  width: 56px;
  height: 56px;
  margin: 0 auto 0.85rem;
  border-radius: 14px;
  background: rgba(181, 90, 57, 0.1);
  color: var(--color-rust);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.375rem;
  transition: all 0.25s ease;
}

.sha-sub-scenario-card:hover .sha-sub-scenario-icon {
  background: var(--color-rust);
  color: var(--color-white);
  transform: scale(1.05);
}

.sha-sub-scenario-heading {
  font-family: var(--font-oswald);
  font-weight: 700;
  font-size: 1.0625rem;
  color: var(--color-dark-ocean);
  margin: 0 0 0.5rem;
}

.sha-sub-scenario-body {
  font-family: var(--font-inter);
  font-size: 0.85rem;
  line-height: 1.35rem;
  color: var(--color-neutral-700);
  margin: 0;
}

/* ── FAQ (Custom +/× Toggles) ─────────────────────────────── */
.sha-sub-faq {
  background: var(--color-white);
  padding: 4.5rem 0;
}

.sha-sub-faq-item {
  border-bottom: 1px solid var(--color-neutral-100);
  margin-bottom: 0.5rem;
}

.sha-sub-faq-btn {
  width: 100%;
  background: transparent;
  border: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 0;
  cursor: pointer;
  text-align: left;
  transition: color 0.2s ease;
}

.sha-sub-faq-btn:hover .sha-sub-faq-q { color: var(--color-rust); }

.sha-sub-faq-q {
  font-family: var(--font-oswald);
  font-weight: 700;
  font-size: 1.0625rem;
  line-height: 1.4;
  color: var(--color-dark-ocean);
  flex: 1;
  transition: color 0.2s ease;
}

.sha-sub-faq-icon {
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--color-blue);
  font-size: 1rem;
  transition: transform 0.25s ease;
}

.sha-sub-faq-btn:not(.collapsed) .sha-sub-faq-icon {
  transform: rotate(45deg);
}

.sha-sub-faq-btn:not(.collapsed) .sha-sub-faq-q {
  color: var(--color-rust);
}

.sha-sub-faq-answer {
  font-family: var(--font-inter);
  font-size: 0.9rem;
  line-height: 1.5rem;
  color: var(--color-dark-ocean);
  padding: 0.25rem 0 1rem;
  margin: 0;
}

/* ── Final CTA Band ──────────────────────────────────────── */
.sha-sub-final-cta {
  background-image:
    linear-gradient(rgba(9, 31, 60, 0.82), rgba(9, 31, 60, 0.82)),
    url('../img/sha-hero-1440-615.webp');
  background-size: cover;
  background-position: center;
  padding: 4rem 0;
  color: var(--color-white);
}

.sha-sub-final-heading {
  font-family: var(--font-oswald);
  font-weight: 700;
  font-size: 2.375rem;
  line-height: 1.15;
  color: var(--color-white);
  margin: 0 0 1rem;
}

.sha-sub-final-body {
  font-family: var(--font-inter);
  font-size: 1rem;
  line-height: 1.625rem;
  color: rgba(255, 255, 255, 0.92);
  margin: 0 0 1.25rem;
}

.sha-sub-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.sha-sub-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 50px;
  padding: 0.5rem 1rem;
  font-family: var(--font-oswald);
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--color-white);
}

.sha-sub-badge i {
  color: var(--color-pencil);
  font-size: 0.875rem;
}

.sha-sub-final-phone {
  background: var(--color-white);
  color: var(--color-rust) !important;
  font-family: var(--font-oswald);
  font-weight: 700;
  font-size: 1.125rem;
  border-radius: 50px;
  padding: 0.85rem 1.5rem;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  transition: all 0.2s ease;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

.sha-sub-final-phone:hover {
  transform: translateY(-2px);
  background: var(--color-palladian);
  color: var(--color-rust) !important;
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.2);
}

.sha-sub-final-book {
  background: transparent;
  border: 2px solid var(--color-white);
  color: var(--color-white) !important;
  font-family: var(--font-oswald);
  font-weight: 700;
  font-size: 1rem;
  border-radius: 50px;
  padding: 0.7rem 1.5rem;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  transition: all 0.2s ease;
}

.sha-sub-final-book:hover {
  background: var(--color-white);
  color: var(--color-rust) !important;
}

.sha-sub-final-link {
  color: var(--color-white) !important;
  font-family: var(--font-oswald);
  font-weight: 700;
  font-size: 0.875rem;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.4);
  transition: border-color 0.2s ease, color 0.2s ease;
  align-self: flex-start;
}

.sha-sub-final-link:hover {
  border-color: var(--color-pencil);
  color: var(--color-pencil) !important;
}

@media (max-width: 991px) {
  .sha-sub-section-h2 { font-size: 1.875rem; line-height: 2.25rem; }
  .sha-sub-final-heading { font-size: 1.875rem; }
  .sha-sub-prob-content { padding: 1.75rem 1.25rem; }
  .sha-sub-prob-pill { font-size: 0.8rem; padding: 0.5rem 0.85rem; }
  .sha-sub-step-num { width: 44px; height: 44px; font-size: 1.25rem; }
}

/* ════════════════════════════════════════════════════════════
   ICON-STACKED — supports the <fa-stack> web component
   Renders as: rust icon centered over a palladian circle.
   Sized via font-size on the wrapper (xs / sm / md / lg / xl / xxl).
   ════════════════════════════════════════════════════════════ */
fa-stack {
  display: inline-block;
  line-height: 1;
}

.icon-stacked {
  display: inline-flex;
  position: relative;
  width: 2em;
  height: 2em;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  border-radius: 50%;
  color: var(--color-rust);
}

.icon-stacked::before {
  font-family: 'Font Awesome 7 Pro', 'Font Awesome 6 Pro', 'Font Awesome 7 Free', 'Font Awesome 6 Free';
  font-weight: 900;
  content: '\f111';
  font-size: 2em;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: var(--color-palladian);
  z-index: 0;
}

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

/* Light variant — for use on dark backgrounds (dark-ocean sections) */
.icon-stacked.light-base {
  color: var(--color-white);
}
.icon-stacked.light-base::before {
  color: rgba(255, 255, 255, 0.15);
}

/* Size scale (font-size on the wrapper drives everything via em units) */
.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; }

/* Drop shadow on the circle (does not chain with Bootstrap's .shadow box-shadow) */
.icon-stacked.shadow::before {
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
}

/* Hoverable: scale-on-hover, scale-down-on-active */
.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); }

/* ===========================================================
   Opening section background-image variants (replaces inline
   style="background-image: url(...)" that was on every page)
   =========================================================== */
.sha-opening-img--ac-left        { background-image: url('/img/sha-opening-ac-left.webp'); }
.sha-opening-img--ac-right       { background-image: url('/img/sha-opening-ac-right.webp'); }
.sha-opening-img--commercial-left  { background-image: url('/img/sha-opening-commercial-left.webp'); }
.sha-opening-img--commercial-right { background-image: url('/img/sha-opening-commercial-right.webp'); }
.sha-opening-img--ductwork-left  { background-image: url('/img/sha-opening-ductwork-left.webp'); }
.sha-opening-img--ductwork-right { background-image: url('/img/sha-opening-ductwork-right.webp'); }
.sha-opening-img--furnace-left   { background-image: url('/img/sha-opening-furnace-left.webp'); }
.sha-opening-img--furnace-right  { background-image: url('/img/sha-opening-furnace-right.webp'); }
.sha-opening-img--general-left   { background-image: url('/img/sha-opening-general-left.webp'); }
.sha-opening-img--general-right  { background-image: url('/img/sha-opening-general-right.webp'); }
.sha-opening-img--heat-pump-left  { background-image: url('/img/sha-opening-heat-pump-left.webp'); }
.sha-opening-img--heat-pump-right { background-image: url('/img/sha-opening-heat-pump-right.webp'); }
.sha-opening-img--iaq-left       { background-image: url('/img/sha-opening-iaq-left.webp'); }
.sha-opening-img--iaq-right      { background-image: url('/img/sha-opening-iaq-right.webp'); }
.sha-opening-img--mini-split-left  { background-image: url('/img/sha-opening-mini-split-left.webp'); }
.sha-opening-img--mini-split-right { background-image: url('/img/sha-opening-mini-split-right.webp'); }
.sha-opening-img--packaged-left   { background-image: url('/img/sha-opening-packaged-left.webp'); }
.sha-opening-img--packaged-right  { background-image: url('/img/sha-opening-packaged-right.webp'); }

/* Image utility classes (replaces a few stray inline styles) */
.sha-img-cover  { object-fit: cover; }
.sha-icon-60    { width: 60px; height: 60px; }

/* === Homepage Landing Hero + Branch Cards (moved from inline index.php) === */
.sha-hero--landing { padding-top: 6rem; padding-bottom: 3.25rem; justify-content: flex-start; }
.sha-hero-branch-row { margin-top: .5rem; }
@media (max-width: 991px) { .sha-hero-branch-row { margin-top: 0; } }
.sha-branch-card {
    background: var(--color-white);
    border-radius: 2rem;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(15, 52, 101, 0.08);
    display: flex;
    flex-direction: column;
    height: 100%;
    transition: transform .25s ease, box-shadow .25s ease;
    border: 2px solid transparent;
}
.sha-branch-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 32px rgba(15, 52, 101, 0.14);
    border-color: var(--color-rust);
}
.sha-branch-card-map {
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: var(--color-neutral-50);
}
.sha-branch-card-map-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}
.sha-branch-card-map-pill {
    position: absolute;
    top: 1rem;
    left: 1rem;
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .5rem 1rem;
    background: var(--color-white);
    color: var(--color-dark-ocean);
    font-family: var(--font-oswald);
    font-weight: 700;
    font-size: .85rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    border-radius: 999px;
    box-shadow: 0 2px 8px rgba(0,0,0,.15);
}
.sha-branch-card-map-pill i { color: var(--color-rust); }
.sha-branch-card-body {
    padding: 1.75rem 2rem 2rem;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}
.sha-branch-card-heading {
    font-family: var(--font-oswald);
    font-weight: 700;
    font-size: 2rem;
    line-height: 2.25rem;
    color: var(--color-dark-ocean);
    margin: 0 0 .75rem;
}
.sha-branch-card-desc {
    font-family: var(--font-inter);
    font-size: 1rem;
    line-height: 1.5rem;
    color: var(--color-neutral-700);
    margin: 0 0 1.5rem;
}
.sha-branch-card-info {
    display: flex;
    flex-direction: column;
    gap: .85rem;
    margin: 0 0 1.75rem;
    padding: 0;
    list-style: none;
}
.sha-branch-card-info-item {
    display: flex;
    align-items: flex-start;
    gap: .85rem;
    font-family: var(--font-inter);
    font-size: .95rem;
    line-height: 1.4rem;
    color: var(--color-dark-ocean);
    text-decoration: none;
    transition: color .15s ease;
}
.sha-branch-card-info-item i {
    flex-shrink: 0;
    width: 1.25rem;
    margin-top: .15rem;
    color: var(--color-rust);
    font-size: 1rem;
    text-align: center;
}
a.sha-branch-card-info-item:hover,
a.sha-branch-card-info-item:focus { color: var(--color-rust); }
a.sha-branch-card-info-item:hover span,
a.sha-branch-card-info-item:focus span { text-decoration: underline; }
.sha-branch-card-cta-wrap { margin-top: auto; }
.sha-branch-card-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    width: 100%;
    padding: 1rem 1.5rem;
    background: var(--color-dark-ocean);
    color: var(--color-palladian) !important;
    font-family: var(--font-oswald);
    font-weight: 700;
    font-size: 1.05rem;
    line-height: 1.125rem;
    border-radius: 999px;
    text-decoration: none;
    transition: background .15s ease, transform .15s ease;
}
.sha-branch-card-cta:hover,
.sha-branch-card-cta:focus {
    background: var(--color-rust);
    color: var(--color-palladian) !important;
    transform: translateY(-1px);
}
@media (max-width: 575px) {
    .sha-branch-card-body { padding: 1.25rem 1.25rem 1.5rem; }
    .sha-branch-card-heading { font-size: 1.6rem; line-height: 1.8rem; }
}

/* ===========================================================
   Moved from inline <style> blocks (QA F-011, 2026-09-30).
   Kept at the end of the file to preserve their original
   cascade position (they previously loaded after globals.css).
   =========================================================== */

/* Landing menu — branch pills + phone (from includes/menu.php) */
.sha-nav-phone-sep {
    width: 1px;
    height: 1.75rem;
    background: var(--color-neutral-300);
    align-self: center;
    margin: 0 .25rem;
}
.sha-nav-branch-pill {
    display: inline-flex !important;
    align-items: center;
    gap: .4rem;
    padding: .4rem .95rem !important;
    font-size: .9rem;
    line-height: 1;
    margin-bottom: 0 !important;
}
.sha-nav-branch-pill i { font-size: .78rem; line-height: 1; }
.sha-nav-phone-link {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .15rem;
    color: var(--color-dark-ocean) !important;
    text-decoration: none;
    line-height: 1.1;
    transition: color .15s ease;
}
.sha-nav-phone-link:hover,
.sha-nav-phone-link:focus { color: var(--color-rust) !important; }
.sha-nav-phone-link:hover .sha-nav-phone-top i,
.sha-nav-phone-link:focus .sha-nav-phone-top i { color: var(--color-dark-ocean); }
.sha-nav-phone-top {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    font-family: var(--font-oswald);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
    font-size: .78rem;
    color: var(--color-rust);
}
.sha-nav-phone-top i {
    color: var(--color-rust);
    font-size: .75rem;
    transition: color .15s ease;
}
.sha-nav-phone-num {
    font-family: var(--font-inter);
    font-weight: 600;
    font-size: .95rem;
    white-space: nowrap;
}

/* Trust closer chips, desktop (from sha-trust-closer-block.php) */
@media (min-width: 992px){
    .sha-trust-chips{
        display: flex;
        flex-wrap: nowrap;
        align-items: stretch;
    }
    .sha-trust-chips .sha-trust-chip{
        flex: 1 1 0;
        min-width: 0;
        padding-left: .75rem;
        padding-right: .75rem;
    }
    .sha-trust-chips .sha-trust-chip-text{
        min-width: 0;
    }
    .sha-trust-chips .sha-trust-chip-text span{
        white-space: normal;
        overflow-wrap: anywhere;
        font-size: .85rem;
        line-height: 1.2;
    }
}

/* Legal pages — privacy-policy.php + terms-and-conditions.php */
.sha-terms .terms-date {
    font-family: var(--font-inter);
    font-size: 0.95rem;
    color: var(--color-neutral-700);
    margin-bottom: 1.75rem;
    padding-bottom: 1rem;
    border-bottom: 2px solid var(--color-rust);
    display: inline-block;
}
.sha-terms .terms-section { margin-top: 2.5rem; }
.sha-terms h2 {
    font-family: var(--font-oswald);
    color: var(--color-dark-ocean);
    font-size: 1.5rem;
    font-weight: var(--font-weight-bold);
    margin-bottom: 1rem;
}
.sha-terms h4 {
    font-family: var(--font-outfit);
    font-weight: var(--font-weight-semibold);
    color: var(--color-rust);
    font-size: 1.1rem;
    margin-top: 1.5rem;
    margin-bottom: 0.5rem;
}
.sha-terms p,
.sha-terms li {
    font-family: var(--font-inter);
    line-height: 1.7;
}
.sha-terms a { color: var(--color-blue); }
.sha-terms a:hover { color: var(--color-rust); }

/* Thank-you page form layout (scoped; was a bare `label` rule) */
.sha-thankyou label { display: none; }
.sha-thankyou .form-row {
    --bs-gutter-x: 1.5rem;
    --bs-gutter-y: 0;
    display: flex;
    flex-wrap: wrap;
    margin-top: calc(-1 * var(--bs-gutter-y));
    margin-right: calc(-.5 * var(--bs-gutter-x));
    margin-left: calc(-.5 * var(--bs-gutter-x));
}
.sha-thankyou .form-row > .col {
    padding-right: calc(var(--bs-gutter-x) * .5);
    padding-left: calc(var(--bs-gutter-x) * .5);
    margin-top: var(--bs-gutter-y);
}

/* Utilities replacing inline style="" attributes */
.sha-mw-640 { max-width: 640px; }
.sha-jotform-iframe { min-width: 100%; max-width: 100%; height: 539px; border: none; }