:root {
  --paper: #f5f5f0;
  --ink: #020000;
  --teal: #0c3e45;
  --teal-bright: #064f5c;
  --green: #89ca58;
  --button-a: #79a602;
  --button-b: #8aad2d;
  --white: #ffffff;
  --placeholder-light: linear-gradient(135deg, #eef0ea 0%, #d9e1db 48%, #f8f8f4 100%);
  --placeholder-mid: linear-gradient(135deg, #dbe7e2 0%, #b9cec9 48%, #eff2ec 100%);
  --placeholder-dark: linear-gradient(135deg, #0c3e45 0%, #13616b 50%, #e9eee8 100%);
  --hero-image: url("assets/figma-reference/hero-city.webp");
  --services-hero-image: url("assets/figma-reference/services/services-hero.webp");
  --building-image: url("assets/figma-reference/about-solar-city.webp");
  --office-image: url("assets/photos/solar/avantech-solar-panel-construction.webp");
  --install-image: url("assets/figma-reference/about-panel-tech.webp");
  --cta-image: url("assets/figma-reference/cta-solar-panels.webp");
  --solar-image: url("assets/photos/solar/commercial-rooftop-solar.webp");
  --hvac-image: url("assets/figma-reference/hvac/commercial-rooftop-hvac-units.webp");
  --hvac-hero-slide-1: url("assets/photos/hvac/hero/hvac-ductwork-ceiling.webp");
  --hvac-hero-slide-2: url("assets/photos/hvac/hero/hvac-rooftop-ventilation-tokyo.webp");
  --security-image: url("assets/generated/security-control-room.webp");
  --services-card-solar-image: url("assets/figma-reference/services/solar-service-card.webp");
  --services-card-hvac-image: url("assets/figma-reference/services/hvac-service-card.webp");
  --services-card-security-image: url("assets/figma-reference/services/security-service-card.webp");
  --partner-hero-image: url("assets/figma-reference/partner/partner-hero.webp");
  --partner-design-image: url("assets/figma-reference/partner/design-consultation.webp");
  --partner-install-image: url("assets/figma-reference/partner/installation-team.webp");
  --partner-distributor-image: url("assets/figma-reference/partner/distributor-warehouse.webp");
  --partner-corporate-image: url("assets/figma-reference/partner/corporate-project.webp");
  --partner-support-image: url("assets/figma-reference/partner/support-service.webp");
  --partner-empowering-image: url("assets/figma-reference/partner/empowering-business.webp");
  --inverter-image: url("assets/generated/solar-inverter-wall.webp");
  --business-image: url("assets/photos/buildings/blue-business-towers.webp");
  --support-image: url("assets/generated/smart-building-control.webp");
  --contact-hero-image: url("assets/photos/contact/contact-keyboard-wide.webp");
  --about-hero-image: url("assets/figma-reference/about-hero-solar-field.webp");
  --about-who-image: url("assets/photos/hvac/wall-mounted-split-air-conditioner.webp");
  --about-mission-image: url("assets/figma-reference/about-mission-tech.webp");
  --about-vision-image: url("assets/photos/security/three-surveillance-cameras-building.webp");
  --quote-hero-image: url("assets/photos/solar/solar-field-clouds.webp");
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: "Poppins", sans-serif;
  user-select: none;
  -webkit-user-select: none;
}

a {
  color: inherit;
  text-decoration: none;
}

:is(
  a,
  input,
  textarea,
  select,
  .footer-inner > div:nth-child(3),
  .footer-inner > div:nth-child(3) *,
  .contact-info-card,
  .contact-info-card *,
  .contact-address-copy,
  .contact-address-copy *,
  .contact-map-link,
  .contact-map-link *,
  .contact-highlight,
  .contact-highlight *
) {
  user-select: text;
  -webkit-user-select: text;
}

.page-shell {
  width: 100%;
  max-width: none;
  margin: 0 auto;
  overflow: hidden;
  background: var(--paper);
  border: 0;
}

.site-loading .page-shell,
.site-leaving .page-shell {
  pointer-events: none;
}

.site-loaded .page-shell {
  animation: pageReveal 420ms ease both;
}

.site-loader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: stretch;
  justify-content: center;
  padding: clamp(18px, 3vw, 34px);
  background:
    radial-gradient(circle at 12% 12%, rgba(137, 202, 88, 0.18), transparent 28%),
    linear-gradient(135deg, #f6f7f2 0%, #e8eee9 52%, #dbe8e4 100%);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 280ms ease, visibility 280ms ease;
}

.site-leaving .site-loader {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.site-loading .site-loader {
  display: none;
}

.site-loader-shell {
  width: min(1180px, 100%);
  display: flex;
  flex-direction: column;
  gap: clamp(22px, 4vw, 42px);
}

.loader-hero,
.loader-grid {
  width: 100%;
}

.loader-hero {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(320px, 1.1fr);
  align-items: center;
  gap: clamp(24px, 5vw, 70px);
  min-height: min(58vh, 560px);
}

.loader-copy {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.loader-kicker {
  width: 34%;
  height: 18px;
}

.loader-title {
  width: 94%;
  height: clamp(42px, 7vw, 78px);
}

.loader-title-short {
  width: 68%;
}

.loader-line {
  width: 84%;
  height: 18px;
}

.loader-line-short {
  width: 56%;
}

.loader-media {
  width: 100%;
  min-height: min(46vh, 430px);
}

.loader-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(14px, 2vw, 24px);
}

.loader-card {
  height: clamp(120px, 18vw, 210px);
}

.loader-block {
  display: block;
  overflow: hidden;
  position: relative;
  border-radius: 8px;
  background: #d8e1dc;
  box-shadow: 0 16px 50px rgba(12, 62, 69, 0.08);
}

.loader-block::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-105%);
  background: linear-gradient(100deg, transparent 0%, rgba(255, 255, 255, 0.72) 48%, transparent 100%);
  animation: skeletonShimmer 1.35s ease-in-out infinite;
}

@keyframes skeletonShimmer {
  100% {
    transform: translateX(105%);
  }
}

@keyframes pageReveal {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.site-loading {
  --skeleton-page: #f1f4ef;
  --skeleton-surface: #e2e9e4;
  --skeleton-card: #f8faf7;
  --skeleton-base: #d8e1dc;
  --skeleton-shine: rgba(255, 255, 255, 0.82);
  --skeleton-shine-soft: rgba(255, 255, 255, 0.28);
}

.site-loading .navbar {
  display: none;
}

.site-loading,
.site-loading .page-shell {
  background: var(--skeleton-page);
}

.site-loading .partner-hero {
  --skeleton-base: #d8e1dc;
  --skeleton-shine: rgba(255, 255, 255, 0.82);
  --skeleton-shine-soft: rgba(255, 255, 255, 0.28);
}

.site-loading :is(.hero, .hero-video, .photo, .cta, .journey, .legacy-section, .about-page-hero, .services-hero, .services-showcase-hero, .service-cards-section, .solar-hero, .hvac-hero, .contact-hero, .quote-hero, .service-media, .service-card-media, .about-placeholder, .about-office-placeholder, .mission-image, .vision-image, .setup-card, .install-card, .solar-install-types, .hvac-service-card, .hvac-systems-media, .hvac-space-card, .contact-map-shell, .contact-map, .quote-panel, .help-illustration, .partner-hero, .partner-card-media, .partner-empowering, .partner-footer-banner, .footer, .partner-track span, .hvac-brand, .social) {
  background:
    linear-gradient(105deg, transparent 0%, transparent 38%, var(--skeleton-shine-soft) 45%, var(--skeleton-shine) 50%, var(--skeleton-shine-soft) 55%, transparent 62%, transparent 100%),
    var(--skeleton-base) !important;
  background-size: 260% 100%, 100% 100% !important;
  background-position: 120% 0, 0 0 !important;
  animation: skeletonShine 1.45s ease-in-out infinite;
}

.site-loading :is(.hero, .cta, .journey, .legacy-section, .about-page-hero, .services-hero, .services-showcase-hero, .service-cards-section, .solar-hero, .hvac-hero, .contact-hero, .quote-hero, .solar-install-types, .contact-map-shell, .quote-panel, .partner-hero, .partner-empowering, .partner-footer-banner, .footer) {
  background: var(--skeleton-surface) !important;
  box-shadow: none !important;
  animation: none;
}

.site-loading :is(.photo, .service-media, .service-card-media, .about-placeholder, .about-office-placeholder, .mission-image, .vision-image, .hvac-systems-media, .hvac-space-card, .contact-map, .help-illustration, .partner-card-media, .partner-track span, .hvac-brand, .social) {
  box-shadow: none !important;
}

.site-loading :is(.brand img, .partners img, .partner-track img, .hvac-brand img, .contact-card-icon, .contact-address-icon, .setup-card img, .install-card img, .hvac-systems-image, .hvac-space-card img, .help-illustration img, .contact-map iframe) {
  opacity: 0;
}

.site-loading :is(.brand, .nav-links a, .nav-disabled, .contact-pill, h1, h2, h3, p, .eyebrow, .button, .footer-link, .footer-arrow, .socials a, .year, .legacy-items span, .service-number, .process-grid span, .hvac-service-number, label, input, textarea, .quote-form button, .quote-alert, .contact-highlight, .service-card > a, .service-card-disabled, .service-features li, .footer-social-link, .quote-next strong, .quote-next li) {
  color: transparent !important;
  text-shadow: none !important;
  border-color: transparent !important;
  background:
    linear-gradient(105deg, transparent 0%, transparent 38%, var(--skeleton-shine-soft) 45%, var(--skeleton-shine) 50%, var(--skeleton-shine-soft) 55%, transparent 62%, transparent 100%),
    var(--skeleton-base) !important;
  background-size: 260% 100%, 100% 100% !important;
  background-position: 120% 0, 0 0 !important;
  box-shadow: none !important;
  animation: skeletonShine 1.45s ease-in-out infinite;
}

.site-loading :is(.nav-links a, .nav-disabled, .contact-pill, .button, .footer-link, .footer-arrow, .socials a, .service-card > a, .service-card-disabled, label, input, textarea, .quote-form button, .quote-alert, .footer-social-link) {
  border-radius: 8px;
}

.site-loading :is(h1, h2, h3, p, .eyebrow, .year, .legacy-items span, .service-number, .process-grid span, .hvac-service-number, .service-features li, .contact-highlight, .quote-next strong, .quote-next li) {
  border-radius: 6px;
}

.site-loading :is(.service-card, .timeline article, .legacy-items article, .process-grid article, .setup-card, .why-grid article, .install-card, .hvac-service-card, .hvac-space-card, .contact-info-card, .contact-map-shell, .quote-next, .partner-card, .partner-benefits-layout) {
  color: transparent !important;
  border-color: transparent !important;
  background:
    linear-gradient(105deg, transparent 0%, transparent 38%, var(--skeleton-shine-soft) 45%, var(--skeleton-shine) 50%, var(--skeleton-shine-soft) 55%, transparent 62%, transparent 100%),
    var(--skeleton-base) !important;
  background-size: 260% 100%, 100% 100% !important;
  background-position: 120% 0, 0 0 !important;
  box-shadow: none !important;
  animation: skeletonShine 1.45s ease-in-out infinite;
}

.site-loading :is(.service-card, .timeline article, .legacy-items article, .process-grid article, .setup-card, .why-grid article, .install-card, .hvac-service-card, .hvac-space-card, .contact-info-card, .quote-next, .partner-card, .partner-benefits-layout) {
  border-color: rgb(12 62 69 / 0.07) !important;
  background: var(--skeleton-card) !important;
  box-shadow: none !important;
  animation: none;
}

.site-loading :is(.quote-submit-icon, .wave) {
  opacity: 0 !important;
}

.site-loading :is([role="img"] > span, .service-card-media span, .footer-wave) {
  opacity: 0 !important;
}

.site-loading :is(input, textarea)::placeholder {
  color: transparent !important;
  opacity: 0 !important;
}

.site-loading .contact-line {
  position: relative;
}

.site-loading .contact-icon {
  opacity: 0 !important;
}

.site-loading .contact-line::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  background:
    linear-gradient(105deg, transparent 0%, transparent 38%, var(--skeleton-shine-soft) 45%, var(--skeleton-shine) 50%, var(--skeleton-shine-soft) 55%, transparent 62%, transparent 100%),
    var(--skeleton-base) !important;
  background-size: 260% 100%, 100% 100% !important;
  background-position: 120% 0, 0 0 !important;
  animation: skeletonShine 1.45s ease-in-out infinite;
}

.site-loading .footer-arrow::before,
.site-loading .footer-arrow::after,
.site-loading .social::before {
  opacity: 0 !important;
}

.site-loading .hero::after,
.site-loading .about-page-hero::before,
.site-loading .services-hero::after,
.site-loading .partner-hero::before,
.site-loading .partner-hero::after,
.site-loading .service-media::after,
.site-loading .solar-install-types::before,
.site-loading .solar-install-types::after,
.site-loading .hvac-hero::after,
.site-loading .hvac-service-card::after,
.site-loading .hvac-space-card::after,
.site-loading .contact-hero::before,
.site-loading .quote-field::before {
  opacity: 0 !important;
}

.site-loading .services-page .services-showcase-hero {
  background: var(--skeleton-surface) !important;
  animation: none;
}

.site-loading .services-page .services-showcase-copy {
  width: min(840px, 100%);
  text-shadow: none;
}

.site-loading .services-page .services-showcase-copy h1,
.site-loading .services-page .services-showcase-copy p,
.site-loading .services-page .service-card-media,
.site-loading .services-page .service-card h2,
.site-loading .services-page .service-card p,
.site-loading .services-page .service-card > a,
.site-loading .services-page .service-card-disabled {
  position: relative;
  display: block;
  overflow: hidden;
  color: transparent !important;
  border-color: transparent !important;
  background:
    linear-gradient(105deg, transparent 0%, transparent 38%, var(--skeleton-shine-soft) 45%, var(--skeleton-shine) 50%, var(--skeleton-shine-soft) 55%, transparent 62%, transparent 100%),
    var(--skeleton-base) !important;
  background-size: 260% 100%, 100% 100% !important;
  background-position: 120% 0, 0 0 !important;
  box-shadow: none !important;
  text-shadow: none !important;
  animation: skeletonShine 1.45s ease-in-out infinite;
}

.site-loading .services-page .services-showcase-copy h1 {
  width: min(760px, 100%);
  min-height: clamp(202px, 19vw, 278px);
  border-radius: 8px;
}

.site-loading .services-page .services-showcase-copy p {
  width: min(610px, 86%);
  min-height: 54px;
  margin-top: 18px;
  border-radius: 8px;
}

.site-loading .services-page .service-cards-section {
  background: var(--skeleton-page) !important;
  animation: none;
}

.site-loading .services-page .service-card {
  background: rgb(255 255 255 / 0.54) !important;
  border-color: rgb(12 62 69 / 0.08) !important;
  box-shadow: 0 10px 28px rgb(12 62 69 / 0.04) !important;
  animation: none;
}

.site-loading .services-page .service-card-media {
  width: 100%;
  aspect-ratio: 1.52;
  border-radius: 8px;
}

.site-loading .services-page .service-card h2 {
  width: 58%;
  height: 29px;
  margin-top: 16px;
  border-radius: 7px;
}

.site-loading .services-page .service-card p {
  width: 100%;
  height: 88px;
  min-height: 88px;
  margin-top: 12px;
  border-radius: 7px;
}

.site-loading .services-page .service-card > a,
.site-loading .services-page .service-card-disabled {
  width: min(230px, 82%);
  height: 42px;
  margin-top: 18px;
  border-radius: 999px;
}

.site-loading .about-page :is(.about-page-hero, .who-section, .legacy-section, .mission-vision, .footer) {
  background: var(--skeleton-page) !important;
  animation: none;
}

.site-loading .about-page .about-page-hero {
  min-height: 560px;
}

.site-loading .about-page .about-page-hero-content,
.site-loading .about-page .who-copy {
  width: min(620px, 100%);
  text-shadow: none;
}

.site-loading .about-page :is(.about-page-hero h1, .about-page-hero p, .who-copy h2, .who-copy p, .legacy-section h2, .legacy-items span, .legacy-items h3, .legacy-items p, .mv-copy h2, .mv-copy p) {
  display: block;
  overflow: hidden;
  color: transparent !important;
  background:
    linear-gradient(105deg, transparent 0%, transparent 38%, var(--skeleton-shine-soft) 45%, var(--skeleton-shine) 50%, var(--skeleton-shine-soft) 55%, transparent 62%, transparent 100%),
    var(--skeleton-base) !important;
  background-size: 260% 100%, 100% 100% !important;
  background-position: 120% 0, 0 0 !important;
  border-radius: 8px;
  box-shadow: none !important;
  text-shadow: none !important;
  animation: skeletonShine 1.45s ease-in-out infinite;
}

.site-loading .about-page .about-page-hero h1 {
  width: min(560px, 86vw);
  min-height: 150px;
}

.site-loading .about-page .about-page-hero p {
  width: min(520px, 78vw);
  min-height: 54px;
  margin-top: 20px;
}

.site-loading .about-page .who-section {
  background: var(--skeleton-page) !important;
}

.site-loading .about-page .who-copy h2 {
  width: min(300px, 70%);
  height: 48px;
}

.site-loading .about-page .who-copy p {
  width: min(560px, 100%);
  height: 150px;
}

.site-loading .about-page .about-office-placeholder {
  background:
    linear-gradient(90deg, var(--skeleton-page) 0%, rgb(241 244 239 / 0.94) 18%, rgb(241 244 239 / 0.48) 42%, rgb(241 244 239 / 0) 68%),
    var(--skeleton-surface) !important;
  box-shadow: none !important;
  animation: none;
}

.site-loading .about-page .legacy-section {
  background: var(--skeleton-surface) !important;
}

.site-loading .about-page .legacy-section h2 {
  width: min(320px, 100%);
  height: 82px;
}

.site-loading .about-page .legacy-items article {
  min-height: 172px;
  padding: 24px;
  border: 1px solid rgb(12 62 69 / 0.06);
  border-radius: 8px;
  background: var(--skeleton-card) !important;
}

.site-loading .about-page .legacy-items span {
  width: 92px;
  height: 28px;
}

.site-loading .about-page .legacy-items h3 {
  width: min(210px, 82%);
  height: 30px;
  margin-top: 14px;
}

.site-loading .about-page .legacy-items p {
  width: 100%;
  height: 62px;
  margin-top: 14px;
}

.site-loading .about-page .mission-vision {
  background: var(--skeleton-page) !important;
  gap: 1px;
}

.site-loading .about-page .mission-vision .about-placeholder {
  background: var(--skeleton-surface) !important;
  box-shadow: none !important;
  animation: none;
}

.site-loading .about-page .mv-copy {
  background: var(--skeleton-card);
}

.site-loading .about-page .mv-copy h2 {
  width: min(260px, 72%);
  height: 46px;
}

.site-loading .about-page .mv-copy p {
  width: 100%;
  height: 150px;
}

.site-loading .quote-page :is(.quote-hero, .quote-panel, .quote-footer) {
  background: var(--skeleton-page) !important;
  animation: none;
}

.site-loading .quote-page .quote-hero {
  min-height: 520px;
}

.site-loading .quote-page .quote-hero-copy {
  width: min(790px, 100%);
  text-shadow: none;
}

.site-loading .quote-page :is(.quote-hero h1, .quote-form h2, .quote-form label, .quote-field, .quote-form textarea, .quote-form button, .quote-next h2, .quote-next strong, .quote-next p) {
  display: block;
  overflow: hidden;
  color: transparent !important;
  border-color: transparent !important;
  background:
    linear-gradient(105deg, transparent 0%, transparent 38%, var(--skeleton-shine-soft) 45%, var(--skeleton-shine) 50%, var(--skeleton-shine-soft) 55%, transparent 62%, transparent 100%),
    var(--skeleton-base) !important;
  background-size: 260% 100%, 100% 100% !important;
  background-position: 120% 0, 0 0 !important;
  border-radius: 8px;
  box-shadow: none !important;
  text-shadow: none !important;
  animation: skeletonShine 1.45s ease-in-out infinite;
}

.site-loading .quote-page .quote-hero h1 {
  width: min(720px, 88vw);
  min-height: 150px;
}

.site-loading .quote-page .quote-panel {
  border: 1px solid rgb(12 62 69 / 0.07);
  background: var(--skeleton-card) !important;
  box-shadow: none !important;
}

.site-loading .quote-page .quote-form,
.site-loading .quote-page .quote-next {
  background: var(--skeleton-card) !important;
}

.site-loading .quote-page .quote-form h2,
.site-loading .quote-page .quote-next h2 {
  width: min(280px, 70%);
  height: 30px;
}

.site-loading .quote-page .quote-form label {
  width: min(240px, 54%);
  height: 20px;
  margin-top: 20px;
}

.site-loading .quote-page .quote-field {
  width: 100%;
  height: 48px;
}

.site-loading .quote-page .quote-field::before,
.site-loading .quote-page .quote-submit-icon {
  opacity: 0 !important;
}

.site-loading .quote-page .quote-field input {
  opacity: 0;
}

.site-loading .quote-page .quote-form textarea {
  width: 100%;
  min-height: 112px;
}

.site-loading .quote-page .quote-form button {
  width: 100%;
  height: 58px;
  margin-top: 22px;
}

.site-loading .quote-page .quote-next {
  border-left: 1px solid rgb(12 62 69 / 0.07);
}

.site-loading .quote-page .quote-next ol {
  gap: 38px;
  margin-top: 44px;
}

.site-loading .quote-page .quote-next li {
  padding: 24px;
  border: 1px solid rgb(12 62 69 / 0.06);
  border-radius: 8px;
  background: rgb(255 255 255 / 0.42);
}

.site-loading .quote-page .quote-next strong {
  width: min(280px, 82%);
  height: 30px;
  margin-right: auto;
  margin-left: auto;
}

.site-loading .quote-page .quote-next p {
  width: min(360px, 100%);
  height: 58px;
}

.site-loading .solar-page :is(.solar-hero, .energy-setup, .why-solar, .solar-install-types, .partners, .footer) {
  background: var(--skeleton-page) !important;
  animation: none;
}

.site-loading .solar-page .solar-hero {
  min-height: 520px;
}

.site-loading .solar-page .back-link,
.site-loading .solar-page :is(.solar-hero-copy h1, .solar-hero-copy p, .solar-hero-copy .button, .section-heading h2, .section-heading p, .setup-card h3, .setup-card p, .why-grid h3, .why-grid p, .solar-install-copy h2, .solar-install-copy p, .install-card figcaption) {
  display: block;
  overflow: hidden;
  color: transparent !important;
  border-color: transparent !important;
  background:
    linear-gradient(105deg, transparent 0%, transparent 38%, var(--skeleton-shine-soft) 45%, var(--skeleton-shine) 50%, var(--skeleton-shine-soft) 55%, transparent 62%, transparent 100%),
    var(--skeleton-base) !important;
  background-size: 260% 100%, 100% 100% !important;
  background-position: 120% 0, 0 0 !important;
  border-radius: 8px;
  box-shadow: none !important;
  text-shadow: none !important;
  animation: skeletonShine 1.45s ease-in-out infinite;
}

.site-loading .solar-page .back-link {
  width: 172px;
  height: 42px;
}

.site-loading .solar-page .solar-hero-copy {
  width: min(730px, 100%);
  text-shadow: none;
}

.site-loading .solar-page .solar-hero-copy h1 {
  width: min(680px, 88vw);
  min-height: 156px;
}

.site-loading .solar-page .solar-hero-copy p {
  width: min(560px, 78vw);
  min-height: 58px;
}

.site-loading .solar-page .solar-hero-copy .button {
  width: 178px;
  height: 48px;
}

.site-loading .solar-page .section-heading h2 {
  width: min(620px, 78%);
  height: 54px;
}

.site-loading .solar-page .section-heading p {
  width: min(760px, 100%);
  height: 52px;
}

.site-loading .solar-page .setup-card,
.site-loading .solar-page .why-grid article,
.site-loading .solar-page .install-card {
  border: 1px solid rgb(12 62 69 / 0.07);
  background: var(--skeleton-card) !important;
  box-shadow: none !important;
  animation: none;
}

.site-loading .solar-page .setup-card img,
.site-loading .solar-page .install-card img {
  opacity: 0;
}

.site-loading .solar-page .setup-card::before,
.site-loading .solar-page .install-card::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  background:
    linear-gradient(105deg, transparent 0%, transparent 38%, var(--skeleton-shine-soft) 45%, var(--skeleton-shine) 50%, var(--skeleton-shine-soft) 55%, transparent 62%, transparent 100%),
    var(--skeleton-surface);
  background-size: 260% 100%, 100% 100%;
  background-position: 120% 0, 0 0;
  animation: skeletonShine 1.45s ease-in-out infinite;
}

.site-loading .solar-page .setup-card::before {
  bottom: 146px;
}

.site-loading .solar-page .install-card::before {
  bottom: clamp(56px, 3.75vw, 77px);
}

.site-loading .solar-page .setup-card > div,
.site-loading .solar-page .install-card figcaption {
  position: relative;
  z-index: 1;
}

.site-loading .solar-page .setup-card > div {
  background: transparent !important;
}

.site-loading .solar-page .setup-card h3 {
  width: min(190px, 72%);
  height: 38px;
}

.site-loading .solar-page .setup-card p {
  width: 100%;
  height: 50px;
}

.site-loading .solar-page .why-grid article {
  max-width: none;
  min-height: 132px;
  padding: 22px;
  border-radius: 8px;
}

.site-loading .solar-page .why-grid h3 {
  width: min(210px, 78%);
  height: 24px;
}

.site-loading .solar-page .why-grid p {
  width: 100%;
  height: 48px;
}

.site-loading .solar-page .solar-install-types {
  background: var(--skeleton-surface) !important;
}

.site-loading .solar-page .solar-install-copy h2 {
  width: min(430px, 100%);
  height: 112px;
}

.site-loading .solar-page .solar-install-copy p {
  width: min(410px, 100%);
  height: 68px;
}

.site-loading .solar-page .install-card figcaption {
  width: 100%;
  height: clamp(56px, 3.75vw, 77px);
}

.site-loading .solar-page .partners {
  background: var(--skeleton-page) !important;
}

.site-loading .solar-page .partner-track span {
  background: var(--skeleton-card) !important;
  border: 1px solid rgb(12 62 69 / 0.06);
  border-radius: 8px;
  animation: none;
}

.site-loading .partners {
  background: var(--skeleton-surface) !important;
  cursor: default;
}

.site-loading .partner-track,
.site-loading .partner-track span {
  visibility: hidden;
  animation: none !important;
}

.site-loading .hvac-page {
  --skeleton-page: #f2f5f1;
  --skeleton-surface: #dfe8e3;
  --skeleton-card: #f8faf7;
  --skeleton-base: #d3ded8;
  background: var(--skeleton-page) !important;
}

.site-loading .hvac-page :is(.hvac-hero, .hvac-intro, .hvac-spaces, .hvac-brand-carousel, .footer, .help-strip) {
  background: var(--skeleton-page) !important;
}

.site-loading .hvac-page .hvac-hero {
  min-height: 620px;
  overflow: hidden;
  color: transparent !important;
  background: var(--skeleton-surface) !important;
}

.site-loading .hvac-page .hvac-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    linear-gradient(90deg, rgb(242 245 241 / 0.98), rgb(242 245 241 / 0.7) 46%, rgb(242 245 241 / 0.2)),
    var(--skeleton-surface) !important;
  animation: none !important;
}

.site-loading .hvac-page .hvac-hero::after {
  display: none !important;
}

.site-loading .hvac-page .hvac-hero-copy,
.site-loading .hvac-page .back-link {
  position: relative;
  z-index: 1;
}

.site-loading .hvac-page .back-link {
  width: 178px;
  height: 42px;
  border-color: transparent;
  color: transparent;
  background:
    linear-gradient(105deg, transparent 0%, transparent 38%, var(--skeleton-shine-soft) 45%, var(--skeleton-shine) 50%, var(--skeleton-shine-soft) 55%, transparent 62%, transparent 100%),
    var(--skeleton-base) !important;
  background-size: 220% 100%, auto;
  box-shadow: none;
  animation: skeletonShine 1.45s ease-in-out infinite;
}

.site-loading .hvac-page .hvac-hero-copy {
  max-width: min(620px, 72vw);
}

.site-loading .hvac-page .hvac-hero-copy h1 {
  width: min(600px, 76vw);
  height: clamp(54px, 7vw, 86px);
  border-radius: 8px;
}

.site-loading .hvac-page .hvac-hero-copy p {
  width: min(520px, 68vw);
  height: 56px;
  border-radius: 8px;
}

.site-loading .hvac-page .hvac-hero-copy .button {
  width: 190px;
  height: 50px;
  border-radius: 999px;
}

.site-loading .hvac-page .hvac-intro {
  display: grid;
  grid-template-columns: minmax(240px, 0.8fr) minmax(0, 1.4fr);
  gap: clamp(28px, 5vw, 72px);
  min-height: 390px;
  align-items: center;
  padding: 64px clamp(42px, 6vw, 96px);
}

.site-loading .hvac-page .hvac-intro-heading h2 {
  width: min(320px, 48vw);
  height: 112px;
  border-radius: 8px;
}

.site-loading .hvac-page .hvac-intro-heading p {
  width: 180px;
  height: 20px;
  border-radius: 8px;
}

.site-loading .hvac-page .hvac-service-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(150px, 1fr));
  gap: 22px;
  width: 100%;
  max-width: 620px;
}

.site-loading .hvac-page .hvac-service-card {
  min-height: 138px;
  border-radius: 8px;
  background:
    linear-gradient(105deg, transparent 0%, transparent 38%, var(--skeleton-shine-soft) 45%, var(--skeleton-shine) 50%, var(--skeleton-shine-soft) 55%, transparent 62%, transparent 100%),
    var(--skeleton-card) !important;
  background-size: 220% 100%, auto;
  box-shadow: 0 16px 36px rgb(12 62 69 / 0.08);
  animation: skeletonShine 1.45s ease-in-out infinite;
}

.site-loading .hvac-page .hvac-service-card::after {
  display: none;
}

.site-loading .hvac-page .hvac-service-card :is(h3, p) {
  visibility: hidden;
}

.site-loading .hvac-page .hvac-spaces {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(320px, 1.05fr);
  min-height: 430px;
  gap: 0;
  padding: 0;
  background: var(--skeleton-surface) !important;
}

.site-loading .hvac-page .hvac-spaces::before {
  display: none;
}

.site-loading .hvac-page .hvac-spaces-copy {
  align-self: center;
  padding: clamp(42px, 6vw, 88px);
}

.site-loading .hvac-page .hvac-spaces-copy h2 {
  width: min(420px, 42vw);
  height: 92px;
  border-radius: 8px;
}

.site-loading .hvac-page .hvac-spaces-copy p {
  width: min(390px, 38vw);
  height: 58px;
  border-radius: 8px;
}

.site-loading .hvac-page .hvac-systems-media {
  min-height: 430px;
  border-radius: 0;
  background:
    linear-gradient(105deg, transparent 0%, transparent 38%, var(--skeleton-shine-soft) 45%, var(--skeleton-shine) 50%, var(--skeleton-shine-soft) 55%, transparent 62%, transparent 100%),
    var(--skeleton-base) !important;
  background-size: 220% 100%, auto;
  animation: skeletonShine 1.45s ease-in-out infinite;
}

.site-loading .hvac-page .hvac-brand-carousel {
  min-height: 150px;
  background: var(--skeleton-page) !important;
}

.site-loading .hvac-page .hvac-brand-track {
  animation: slide-hvac-brands 34s linear infinite;
}

.site-loading .hvac-page .hvac-brand {
  width: 188px;
  min-height: 72px;
  border-radius: 8px;
  color: transparent;
  background:
    linear-gradient(105deg, transparent 0%, transparent 38%, var(--skeleton-shine-soft) 45%, var(--skeleton-shine) 50%, var(--skeleton-shine-soft) 55%, transparent 62%, transparent 100%),
    var(--skeleton-card) !important;
  background-size: 220% 100%, auto;
  animation: skeletonShine 1.45s ease-in-out infinite;
}

.site-loading .hvac-page .hvac-brand img {
  visibility: hidden;
}

@media (max-width: 799px) {
  .site-loading .hvac-page .hvac-hero {
    min-height: 620px;
    padding: 118px 20px 72px;
  }

  .site-loading .hvac-page .back-link {
    width: 150px;
    height: 38px;
    margin-top: 10px;
  }

  .site-loading .hvac-page .hvac-hero-copy {
    max-width: 335px;
    margin-top: 250px;
  }

  .site-loading .hvac-page .hvac-hero-copy h1 {
    width: 315px;
    max-width: 100%;
    height: 78px;
  }

  .site-loading .hvac-page .hvac-hero-copy p {
    width: 300px;
    max-width: 100%;
    height: 54px;
  }

  .site-loading .hvac-page .hvac-hero-copy .button {
    width: 176px;
    height: 46px;
  }

  .site-loading .hvac-page .hvac-intro {
    grid-template-columns: 1fr;
    gap: 24px;
    min-height: 0;
    padding: 42px 20px;
  }

  .site-loading .hvac-page .hvac-intro-heading {
    width: 100%;
  }

  .site-loading .hvac-page .hvac-intro-heading h2 {
    width: 245px;
    height: 82px;
  }

  .site-loading .hvac-page .hvac-intro-heading p {
    width: 140px;
  }

  .site-loading .hvac-page .hvac-service-grid {
    grid-template-columns: 1fr;
    gap: 14px;
    max-width: none;
    margin-top: 0;
    padding-left: 0;
  }

  .site-loading .hvac-page .hvac-service-card {
    min-height: 76px;
  }

  .site-loading .hvac-page .hvac-spaces {
    grid-template-columns: 1fr;
    min-height: 0;
  }

  .site-loading .hvac-page .hvac-spaces-copy {
    padding: 42px 20px 28px;
  }

  .site-loading .hvac-page .hvac-spaces-copy h2 {
    width: 300px;
    max-width: 100%;
    height: 58px;
  }

  .site-loading .hvac-page .hvac-spaces-copy p {
    width: 290px;
    max-width: 100%;
    height: 48px;
  }

  .site-loading .hvac-page .hvac-systems-media {
    min-height: 210px;
    height: 210px;
  }

  .site-loading .hvac-page .hvac-brand-carousel {
    min-height: 104px;
  }

  .site-loading .hvac-page .hvac-brand {
    width: 126px;
    min-height: 52px;
  }
}

@keyframes skeletonShine {
  0% {
    background-position: 120% 0, 0 0;
  }

  100% {
    background-position: -120% 0, 0 0;
  }
}

.hero,
.about-page-hero,
.services-showcase-hero,
.journey,
.legacy-section,
.solutions-section,
.service-process,
.footer {
  width: 100%;
}

.hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 680px;
  padding: 210px 40px 82px 100px;
  color: var(--white);
  overflow: hidden;
  background: #173233;
}

.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgb(0 0 0 / 0.35);
  pointer-events: none;
}

.hero-video {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}

.hero-video::-webkit-media-controls,
.hero-video::-webkit-media-controls-panel,
.hero-video::-webkit-media-controls-play-button,
.hero-video::-webkit-media-controls-start-playback-button {
  display: none !important;
  -webkit-appearance: none;
}

.navbar {
  position: absolute;
  z-index: 1000;
  top: 36px;
  left: clamp(14px, 5.208vw, 75px);
  right: clamp(14px, 5.208vw, 75px);
  height: 73px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: clamp(24px, 11.667vw, 168px);
  padding: 15px;
  overflow: hidden;
  border: 1px solid rgb(255 255 255 / 0.38);
  border-radius: 54px;
  background:
    linear-gradient(180deg, rgb(255 255 255 / 0.04), rgb(255 255 255 / 0)),
    rgb(255 255 255 / 0.2);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.32),
    inset 0 -1px 0 rgb(255 255 255 / 0.18),
    0 16px 45px rgb(0 0 0 / 0.16);
  backdrop-filter: blur(22px) saturate(1.55);
  -webkit-backdrop-filter: blur(22px) saturate(1.55);
}

.navbar::before,
.navbar::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.navbar::before {
  inset: 1px;
  border-radius: inherit;
  background:
    linear-gradient(90deg, rgb(255 255 255 / 0.08) 0%, rgb(255 255 255 / 0.055) 18%, rgb(255 255 255 / 0.018) 40%, rgb(255 255 255 / 0.018) 60%, rgb(255 255 255 / 0.055) 82%, rgb(255 255 255 / 0.08) 100%),
    linear-gradient(180deg, rgb(255 255 255 / 0.065) 0%, rgb(255 255 255 / 0.025) 46%, rgb(255 255 255 / 0.045) 100%);
  mix-blend-mode: screen;
}

.navbar::after {
  inset: 0;
  border-radius: inherit;
  box-shadow:
    inset 10px 0 18px rgb(255 255 255 / 0.08),
    inset -10px 0 18px rgb(255 255 255 / 0.08);
}

.brand {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  flex: 0 0 auto;
  width: 173px;
  height: 43px;
  overflow: hidden;
}

.brand img {
  display: block;
  width: 173px;
  height: 43px;
  object-fit: cover;
  object-position: center;
}

.nav-menu {
  position: relative;
  z-index: 1;
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
  align-items: center;
  gap: clamp(24px, 11.667vw, 168px);
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 24px;
  font-size: 15px;
  color: var(--white);
}

.nav-center {
  flex: 1 1 0;
  justify-content: center;
  min-width: 0;
}

.nav-right {
  flex: 1 1 0;
  justify-content: flex-end;
  min-width: 0;
}

.nav-links a {
  position: relative;
  line-height: 1;
  white-space: nowrap;
}

.nav-disabled {
  color: rgb(255 255 255 / 0.58);
  line-height: 1;
  white-space: nowrap;
  cursor: not-allowed;
}

.nav-links a:not(.contact-pill) {
  padding-block: 8px;
}

.nav-links a:not(.contact-pill)::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 2px;
  width: 100%;
  height: 2px;
  border-radius: 999px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 180ms ease;
}

.nav-links a:not(.contact-pill):hover::after,
.nav-links a:not(.contact-pill):focus-visible::after,
.nav-links a:not(.contact-pill):active::after,
.nav-links a.active:not(.contact-pill)::after,
.nav-links a[aria-current="page"]:not(.contact-pill)::after {
  transform: scaleX(1);
}

.nav-links a:not(.contact-pill):active {
  transform: translateY(1px);
}

.nav-links a.active,
.nav-links a[aria-current="page"] {
  font-weight: 600;
}

.contact-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 43px;
  padding: 10px 16px;
  border-radius: 22px;
  background: var(--white);
  color: #020000;
  box-shadow: 0 4px 4px rgb(0 0 0 / 0.25);
  transition: transform 160ms ease, box-shadow 160ms ease, background-color 160ms ease;
}

.contact-pill:hover,
.contact-pill:focus-visible {
  background: rgb(255 255 255 / 0.94);
  box-shadow: 0 7px 16px rgb(0 0 0 / 0.2);
  transform: translateY(-1px);
}

.contact-pill:active,
.contact-pill.active,
.contact-pill[aria-current="page"] {
  background: rgb(246 248 248 / 0.96);
  box-shadow:
    inset 0 3px 8px rgb(0 0 0 / 0.26),
    inset 0 -1px 0 rgb(255 255 255 / 0.72),
    0 1px 3px rgb(0 0 0 / 0.14);
  transform: translateY(1px) scale(0.985);
}

.nav-toggle,
.hamburger {
  display: none;
}

.hero-content {
  position: relative;
  z-index: 2;
  max-width: 1300px;
  text-shadow: 2.5px 1.7px 3.4px rgb(0 0 0 / 0.25);
}

h1,
h2,
h3,
.year {
  margin: 0;
  font-family: "Montserrat", sans-serif;
  font-weight: 700;
  letter-spacing: 0;
}

.hero h1 {
  max-width: 950px;
  font-family: "Montserrat", sans-serif;
  font-size: 85px;
  font-weight: 700;
  line-height: 0.94;
}

.hero p {
  margin: 0 0 20px;
  font-family: "Poppins", sans-serif;
  font-size: 20px;
  line-height: 1.5;
}

.button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 9px 12px 8px 14px;
  overflow: hidden;
  border-radius: 8px;
  background: linear-gradient(90deg, var(--button-a), var(--button-b));
  color: var(--white);
  font-family: "Poppins", sans-serif;
  font-size: 15px;
  font-weight: 700;
  box-shadow: 0 10px 24px rgb(0 0 0 / 0.12);
  isolation: isolate;
  transform: translateY(0) scale(1);
  transition:
    transform 180ms ease,
    box-shadow 180ms ease,
    filter 180ms ease;
  --hover-x: 50%;
  --hover-y: 50%;
}

.button::before,
.service-card > a::before {
  content: "";
  position: absolute;
  inset: -2px;
  z-index: 0;
  border-radius: inherit;
  background:
    radial-gradient(circle at var(--hover-x, 50%) var(--hover-y, 50%), rgb(255 255 255 / 0.32), rgb(255 255 255 / 0.14) 30%, transparent 68%);
  opacity: 0;
  pointer-events: none;
  transform: scale(0.55);
  transition:
    opacity 180ms ease,
    transform 180ms ease;
}

.button:hover,
.button:focus-visible,
.service-card > a:hover,
.service-card > a:focus-visible {
  box-shadow:
    0 14px 32px rgb(12 62 69 / 0.2),
    0 0 0 1px rgb(255 255 255 / 0.18),
    0 0 22px rgb(255 255 255 / 0.16);
  filter: saturate(1.1) brightness(1.04);
  transform: translateY(-2px) scale(1.045);
}

.button:hover::before,
.button:focus-visible::before,
.service-card > a:hover::before,
.service-card > a:focus-visible::before {
  opacity: 1;
  transform: scale(1);
}

.button:active,
.service-card > a:active {
  transform: translateY(0) scale(1.015);
}

.button span {
  position: relative;
  z-index: 1;
  font-size: 24px;
  line-height: 1;
}

.about {
  display: grid;
  grid-template-columns: minmax(400px, 475px) minmax(0, 1fr);
  justify-content: stretch;
  align-items: center;
  gap: clamp(32px, 4vw, 72px);
  padding: 70px 100px;
}

.about-copy {
  padding-top: 3px;
}

.about h2 {
  margin-bottom: 30px;
  color: var(--teal);
  font-family: "Montserrat", sans-serif;
  font-size: 40px;
  letter-spacing: -2.4px;
  line-height: 1.22;
}

.about p {
  max-width: 475px;
  margin: 0 0 18px;
  font-size: 18px;
  line-height: 1.45;
}

.about .button {
  margin-top: 5px;
  background: var(--teal);
  box-shadow: none;
}

.photo-grid {
  display: grid;
  width: 100%;
  max-width: none;
  min-width: 349px;
  height: clamp(370px, 27vw, 500px);
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: 14px;
  justify-self: stretch;
}

.photo {
  position: relative;
  min-width: 0;
  overflow: hidden;
  border-radius: 20px;
  box-shadow: 0 4px 80px rgb(0 0 0 / 0.25);
  background-color: #30524e;
}

.photo::before {
  content: none;
}

.photo::after {
  content: none;
}

.photo span {
  display: none;
}

.photo-large {
  grid-row: 1 / span 2;
  background: var(--building-image) center / cover;
}

.photo-office {
  background: var(--office-image) center / cover;
}

.photo-install {
  background: var(--install-image) center / cover;
}

.journey {
  position: relative;
  min-height: 347px;
  padding: 32px 20px 77px;
  overflow: hidden;
  color: var(--white);
  text-align: center;
  background: linear-gradient(106deg, #064f5c, #0b3f47 51%, #236c78);
}

.wave,
.footer-wave {
  position: absolute;
  width: 520px;
  height: 520px;
  pointer-events: none;
}

.wave {
  width: 560px;
  height: 440px;
  background: url("assets/patterns/wavy-line-large.webp") center / contain no-repeat;
  filter: brightness(0) invert(1);
  opacity: 0.2;
}

.footer-wave {
  width: 560px;
  height: 440px;
  background: url("assets/patterns/wavy-line-large.webp") center / contain no-repeat;
  filter: brightness(0) invert(1);
  opacity: 0.16;
  mask-image: radial-gradient(ellipse at center, #000 0%, #000 54%, rgb(0 0 0 / 0.55) 74%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse at center, #000 0%, #000 54%, rgb(0 0 0 / 0.55) 74%, transparent 100%);
}

.wave-left {
  left: -305px;
  top: -82px;
  transform: rotate(108deg) scale(1.12);
}

.wave-right {
  right: -285px;
  top: -108px;
  transform: rotate(-72deg) scale(1.18);
}

.eyebrow {
  margin: 0;
  color: var(--green);
  font-family: "Montserrat", sans-serif;
  font-size: 15px;
  font-weight: 700;
}

.journey h2,
.cta h2 {
  font-size: 35px;
  line-height: 1.23;
}

.timeline {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 68px;
  max-width: 1376px;
  margin: 25px auto 0;
  text-align: center;
}

.timeline article {
  position: relative;
  max-width: 320px;
  justify-self: center;
}

.year {
  color: var(--green);
  font-size: 25px;
  line-height: 1.2;
}

.timeline h3 {
  font-size: 25px;
  line-height: 1.2;
}

.timeline p {
  margin: 0;
  font-size: 15px;
  line-height: 1.52;
}

.partners {
  --partner-distance: 2304px;
  height: 226px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  overflow: hidden;
  cursor: grab;
  user-select: none;
  touch-action: pan-y;
}

.partner-track {
  display: flex;
  align-items: center;
  gap: 24px;
  padding-left: 56px;
  min-width: max-content;
  animation: slide-partners 28s linear infinite;
  will-change: transform;
}

.partner-track span {
  display: grid;
  width: 360px;
  height: 132px;
  place-items: center;
  overflow: visible;
}

.partner-track img {
  display: block;
  max-width: 100%;
  max-height: 130px;
  object-fit: contain;
  transform: scale(2);
  transform-origin: center;
  pointer-events: none;
  -webkit-user-drag: none;
  user-select: none;
}

.partner-track img.partner-logo-wide {
  width: 250px;
  max-height: 74px;
  transform: none;
}

.partners.is-dragging {
  cursor: grabbing;
}

.partner-footer-banner {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(280px, 0.72fr);
  min-height: 198px;
  margin-bottom: 34px;
  padding: 50px 40px 38px 56px;
  overflow: hidden;
  color: var(--white);
  background:
    linear-gradient(180deg, rgb(21 61 69 / 0.72), rgb(15 58 66 / 0.72)),
    linear-gradient(90deg, rgb(117 138 148 / 0.52), rgb(77 96 109 / 0.52) 48%, rgb(40 58 70 / 0.52)),
    radial-gradient(circle at 48% 42%, rgb(255 255 255 / 0.1), transparent 30%),
    linear-gradient(180deg, #5f7681 0%, #3f5562 60%, #24323d 100%);
}

.partner-footer-banner::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgb(255 255 255 / 0.06), transparent 28%),
    linear-gradient(0deg, transparent 0 72%, rgb(0 0 0 / 0.08) 72% 100%),
    radial-gradient(circle at 22% 92%, rgb(87 126 71 / 0.2), transparent 16%),
    radial-gradient(circle at 58% 72%, rgb(255 255 255 / 0.08), transparent 18%),
    linear-gradient(180deg, transparent 0 46%, rgb(255 255 255 / 0.05) 46% 47%, transparent 47% 100%);
  pointer-events: none;
}

.partner-footer-banner-copy {
  position: relative;
  z-index: 1;
}

.partner-footer-banner h2 {
  max-width: 430px;
  font-size: 42px;
  line-height: 1.08;
}

.partner-footer-banner p {
  position: relative;
  z-index: 1;
  align-self: start;
  justify-self: end;
  max-width: 375px;
  margin: 0;
  padding-top: 4px;
  color: rgb(255 255 255 / 0.92);
  font-size: 16px;
  line-height: 1.35;
  text-align: left;
}

.partner-footer .footer-inner {
  position: relative;
  z-index: 1;
  align-items: end;
}

@keyframes slide-partners {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(calc(-1 * var(--partner-distance)));
  }
}

.cta {
  min-height: 308px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px;
  color: var(--white);
  text-align: center;
  background:
    linear-gradient(rgb(0 0 0 / 0.62), rgb(0 0 0 / 0.62)),
    var(--cta-image) center / cover;
}

.cta > * {
  align-self: center;
  width: min(100%, 900px);
  margin-right: auto;
  margin-left: auto;
  text-align: center;
}

.cta .eyebrow {
  width: auto;
}

.cta h2 {
  margin-top: 5px;
  margin-bottom: 0;
  max-width: 850px;
  color: var(--white);
  font-size: 40px;
  line-height: 1.28;
}

.cta p:not(.eyebrow) {
  max-width: 560px;
  margin: 8px 0 20px;
  color: var(--white);
  font-size: 16px;
  line-height: 1.38;
}

.cta .button {
  width: auto;
  min-width: 165px;
  min-height: 48px;
  padding: 9px 14px;
  border-radius: 8px;
  font-size: 15px;
}

.about-page-hero {
  position: relative;
  min-height: 610px;
  padding: 310px 100px 90px;
  overflow: hidden;
  color: var(--white);
  background:
    linear-gradient(rgb(0 0 0 / 0.42), rgb(0 0 0 / 0.42)),
    var(--about-hero-image) center / cover;
}

.about-page-hero::before {
  content: none;
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 78% 28%, rgb(255 255 255 / 0.14), transparent 18%),
    linear-gradient(14deg, transparent 0 42%, rgb(14 62 69 / 0.28) 42% 46%, transparent 46% 100%);
  opacity: 0.9;
}

.about-page-hero-content {
  position: relative;
  z-index: 1;
  text-shadow: 2px 2px 4px rgb(0 0 0 / 0.22);
}

.about-page-hero h1 {
  max-width: 770px;
  font-size: 78px;
  line-height: 0.98;
}

.about-page-hero p {
  max-width: 590px;
  margin: 13px 0 0;
  font-size: 18px;
  line-height: 1.48;
}

.who-section {
  position: relative;
  display: block;
  min-height: 398px;
  padding: 70px 100px 64px;
  overflow: hidden;
  background: var(--paper);
}

.who-copy {
  position: relative;
  z-index: 1;
  max-width: 560px;
}

.who-copy h2,
.mv-copy h2 {
  margin-bottom: 18px;
  color: var(--teal);
  font-size: 40px;
  line-height: 1.15;
}

.who-copy p,
.mv-copy p {
  margin: 0;
  font-size: 15px;
  line-height: 1.5;
}

.about-placeholder {
  width: 100%;
  min-height: 240px;
  overflow: hidden;
  background-position: center;
  background-size: cover;
}

.about-office-placeholder {
  position: absolute;
  inset: 0 0 0 auto;
  width: min(66vw, 990px);
  min-height: 0;
  background:
    linear-gradient(90deg, var(--paper) 0%, rgb(245 245 240 / 0.88) 16%, rgb(245 245 240 / 0.42) 32%, rgb(245 245 240 / 0.04) 48%, rgb(245 245 240 / 0) 100%),
    var(--about-who-image) center / cover no-repeat;
  pointer-events: none;
}

.mission-image {
  background:
    var(--about-mission-image) center / cover;
}

.vision-image {
  background:
    linear-gradient(90deg, rgb(12 62 69 / 0.14), rgb(12 62 69 / 0)),
    var(--about-vision-image) center / cover;
}

.legacy-section,
.solutions-section {
  position: relative;
  overflow: hidden;
  color: var(--white);
  background: var(--teal);
}

.legacy-section {
  display: grid;
  min-height: 326px;
  grid-template-columns: minmax(260px, 0.34fr) minmax(0, 1fr);
  gap: 44px;
  padding: 82px 100px 64px;
}

.legacy-section h2 {
  position: relative;
  z-index: 1;
  align-self: start;
  font-size: 33px;
  line-height: 1.22;
}

.legacy-items {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: start;
  gap: 64px;
}

.legacy-items article {
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
}

.legacy-mark {
  display: none;
  width: 96px;
  height: 96px;
  margin: 0 auto 25px;
  place-items: center;
  overflow: hidden;
  border-radius: 50%;
  background: #eef0eb;
}

.legacy-mark-hpb {
  position: relative;
  border: 9px solid #f6f6f0;
  background: #8e8d7f;
  box-shadow: inset 0 0 0 8px #d33535;
}

.legacy-mark-hpb::before {
  content: "";
  width: 49px;
  height: 49px;
  border: 10px solid #ffffff;
  border-right-color: transparent;
  border-bottom-color: transparent;
  transform: rotate(-45deg);
}

.legacy-mark-green {
  background: var(--green);
}

.legacy-mark-avantech img {
  width: 94px;
  height: 94px;
  object-fit: cover;
  object-position: left center;
}

.legacy-items span {
  color: var(--green);
  font-family: "Montserrat", sans-serif;
  font-size: 25px;
  font-weight: 700;
  line-height: 1.1;
}

.legacy-items h3 {
  font-size: 24px;
  line-height: 1.1;
}

.legacy-items p,
.solution-cards p {
  margin: 4px 0 0;
  font-size: 15px;
  line-height: 1.42;
}

/* Services page */
.services-hero {
  position: relative;
  min-height: 620px;
  overflow: hidden;
  padding: 215px 100px 80px;
  color: var(--white);
  background:
    linear-gradient(90deg, rgb(3 35 40 / 0.94), rgb(5 63 71 / 0.76) 54%, rgb(91 139 75 / 0.42)),
    var(--services-hero-image) center / cover;
}

.services-hero::after {
  content: "";
  position: absolute;
  right: -150px;
  bottom: -280px;
  width: 650px;
  height: 650px;
  border: 1px solid rgb(255 255 255 / 0.12);
  border-radius: 50%;
  box-shadow: 0 0 0 70px rgb(255 255 255 / 0.035), 0 0 0 140px rgb(255 255 255 / 0.025);
}

.services-hero-content {
  position: relative;
  z-index: 1;
  max-width: 930px;
}

.services-hero h1 {
  margin-top: 8px;
  font-size: clamp(58px, 6vw, 86px);
  line-height: 0.98;
}

.services-hero-content > p:not(.eyebrow) {
  max-width: 620px;
  margin: 22px 0 26px;
  font-size: 19px;
  line-height: 1.55;
}

.services-intro {
  display: grid;
  grid-template-columns: 190px minmax(320px, 1fr) minmax(320px, 0.9fr);
  gap: 42px;
  align-items: start;
  padding: 84px 100px;
}

.services-intro h2 {
  color: var(--teal);
  font-size: 44px;
  line-height: 1.1;
}

.services-intro > p:last-child {
  margin: 4px 0 0;
  font-size: 17px;
  line-height: 1.65;
}

.service-detail {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(420px, 0.95fr);
  min-height: 610px;
  background: #fff;
}

.service-detail-reverse .service-media {
  order: 2;
}

.service-detail-reverse .service-copy {
  order: 1;
  background: #eef2eb;
}

.service-media {
  position: relative;
  display: grid;
  min-height: 610px;
  place-items: center;
  overflow: hidden;
  background:
    linear-gradient(135deg, rgb(12 62 69 / 0.44), rgb(6 79 92 / 0.12)),
    var(--solar-image) center / cover;
}

.service-media::after {
  content: "";
  position: absolute;
  inset: 24px;
  border: 1px solid rgb(255 255 255 / 0.24);
  border-radius: 24px;
}

.service-media span {
  display: none;
}

.service-media-hvac {
  background:
    linear-gradient(135deg, rgb(15 49 54 / 0.44), rgb(97 128 120 / 0.12)),
    var(--hvac-image) center / cover;
}

.service-media-security {
  background:
    linear-gradient(135deg, rgb(6 45 53 / 0.52), rgb(93 135 68 / 0.18)),
    var(--security-image) center / cover;
}

.service-copy {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 74px clamp(48px, 6.9vw, 100px);
  background: var(--paper);
}

.service-number {
  position: absolute;
  top: 42px;
  right: 55px;
  color: rgb(12 62 69 / 0.08);
  font-family: "Montserrat", sans-serif;
  font-size: 104px;
  font-weight: 700;
  line-height: 1;
}

.service-copy h2 {
  margin: 6px 0 18px;
  color: var(--teal);
  font-size: 46px;
  line-height: 1.08;
}

.service-copy > p:not(.eyebrow) {
  margin: 0;
  font-size: 16px;
  line-height: 1.62;
}

.service-features {
  display: grid;
  gap: 10px;
  margin: 24px 0 30px;
  padding: 0;
  list-style: none;
}

.service-features li {
  position: relative;
  padding-left: 25px;
  font-size: 15px;
  line-height: 1.45;
}

.service-features li::before {
  content: "";
  position: absolute;
  top: 7px;
  left: 0;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 0 4px rgb(137 202 88 / 0.18);
}

.service-copy .button {
  align-self: flex-start;
}

.service-process {
  position: relative;
  overflow: hidden;
  padding: 72px 100px 84px;
  color: var(--white);
  text-align: center;
  background: var(--teal);
}

.service-process h2,
.services-cta h2 {
  position: relative;
  z-index: 1;
  margin: 5px 0 40px;
  font-size: 40px;
  line-height: 1.16;
}

.process-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 28px;
  max-width: 1240px;
  margin: 0 auto;
}

.process-grid article {
  min-height: 210px;
  padding: 30px 24px;
  border: 1px solid rgb(255 255 255 / 0.17);
  border-radius: 20px;
  background: rgb(255 255 255 / 0.06);
  backdrop-filter: blur(10px);
}

.process-grid span {
  color: var(--green);
  font-family: "Montserrat", sans-serif;
  font-size: 18px;
  font-weight: 700;
}

.process-grid h3 {
  margin-top: 16px;
  font-size: 23px;
}

.process-grid p {
  margin: 10px 0 0;
  font-size: 14px;
  line-height: 1.55;
}

.services-cta {
  padding: 78px 32px;
  color: var(--teal);
  text-align: center;
  background: var(--paper);
}

.services-cta h2 {
  margin-bottom: 10px;
}

.services-cta > p:not(.eyebrow) {
  margin: 0 0 24px;
  font-size: 16px;
}

/* Compact services dashboard from the approved reference */
.services-showcase-hero {
  position: relative;
  min-height: 805px;
  overflow: hidden;
  padding: 263px 100px 70px;
  color: var(--white);
  background:
    linear-gradient(90deg, rgb(0 0 0 / 0.48), rgb(0 0 0 / 0.18)),
    var(--services-hero-image) center / cover;
}

.services-showcase-copy {
  position: relative;
  z-index: 1;
  max-width: 840px;
  text-shadow: 1px 2px 5px rgb(0 0 0 / 0.32);
}

.services-showcase-copy h1 {
  font-size: clamp(58px, 5.5vw, 80px);
  line-height: 1.16;
}

.services-showcase-copy p {
  margin: 10px 0 0;
  font-size: 18px;
  line-height: 1.45;
}

.service-cards-section {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
  padding: 40px 100px 46px;
  background: var(--paper);
}

.service-card {
  min-width: 0;
  padding: 14px 14px 18px;
  border: 1px solid rgb(12 62 69 / 0.13);
  border-radius: 8px;
  background: rgb(255 255 255 / 0.46);
  box-shadow: 0 10px 28px rgb(12 62 69 / 0.06);
  transform: translateY(0) scale(1);
  transform-origin: center;
  transition:
    transform 180ms ease,
    border-color 180ms ease,
    box-shadow 180ms ease,
    background-color 180ms ease;
  will-change: transform;
}

.service-card:hover,
.service-card:focus-within {
  border-color: rgb(12 62 69 / 0.22);
  background: rgb(255 255 255 / 0.68);
  box-shadow: 0 18px 42px rgb(12 62 69 / 0.14);
  transform: translateY(-4px) scale(1.025);
}

.site-loading .service-card {
  transform: none;
  transition: none;
  will-change: auto;
}

.service-card-media {
  display: grid;
  width: 100%;
  aspect-ratio: 1.52;
  place-items: center;
  overflow: hidden;
  border-radius: 8px;
  background-position: center;
  background-size: cover;
}

.service-card-media span {
  display: none;
}

.card-solar {
  background-image: var(--services-card-solar-image);
}

.card-hvac {
  background: var(--services-card-hvac-image) center / cover;
}

.card-security {
  background: var(--services-card-security-image) center / cover;
}

.service-card h2 {
  margin: 14px 0 6px;
  color: var(--teal);
  font-size: 24px;
  line-height: 1.2;
}

.service-card p {
  min-height: 98px;
  margin: 0;
  color: #535353;
  font-size: 15px;
  line-height: 1.5;
}

.service-card > a,
.service-card-disabled {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 42px;
  margin-top: 14px;
  padding: 10px 18px;
  overflow: hidden;
  border: 1px solid rgb(12 62 69 / 0.18);
  border-radius: 999px;
  color: var(--white);
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
}

.service-card > a {
  background: var(--teal);
  box-shadow: 0 8px 20px rgb(12 62 69 / 0.14);
  isolation: isolate;
  transform: translateY(0) scale(1);
  transition:
    transform 180ms ease,
    border-color 180ms ease,
    box-shadow 180ms ease,
    filter 180ms ease;
  --hover-x: 50%;
  --hover-y: 50%;
}

.service-card-disabled {
  border: 1px solid rgb(12 62 69 / 0.12);
  color: rgb(12 62 69 / 0.48);
  background: rgb(12 62 69 / 0.06);
  cursor: not-allowed;
}

.service-card > a span {
  position: relative;
  z-index: 1;
  font-size: 22px;
  line-height: 1;
}

.site-loading :is(.button, .service-card > a) {
  transform: none;
  transition: none;
  filter: none;
}

.site-loading :is(.button, .service-card > a)::before {
  opacity: 0;
}

.hvac-brand-carousel {
  --hvac-brand-distance: 3944px;
  display: flex;
  min-height: 190px;
  align-items: center;
  overflow: hidden;
  border-top: 1px solid rgb(12 62 69 / 0.06);
  border-bottom: 1px solid rgb(12 62 69 / 0.06);
  background: var(--paper);
  cursor: grab;
  user-select: none;
  touch-action: pan-y;
}

.hvac-brand-track {
  display: flex;
  min-width: max-content;
  align-items: center;
  gap: 28px;
  padding-left: 48px;
  animation: slide-hvac-brands 34s linear infinite;
  will-change: transform;
}

.hvac-brand {
  display: inline-flex;
  width: 246px;
  min-height: 96px;
  align-items: center;
  justify-content: center;
  padding: 8px 12px;
  border-radius: 8px;
  color: #123a3f;
  font-family: "Montserrat", sans-serif;
  font-size: 29px;
  font-weight: 700;
  line-height: 1;
  text-align: center;
  text-transform: uppercase;
  background: transparent;
  box-shadow: none;
  white-space: normal;
}

.hvac-brand img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 184px;
  max-height: 56px;
  object-fit: contain;
  pointer-events: none;
  -webkit-user-drag: none;
  user-select: none;
}

.hvac-brand-carousel.is-dragging {
  cursor: grabbing;
}

.hvac-brand.panasonic,
.hvac-brand.samsung {
  text-transform: none;
}

.hvac-brand.mitsubishi,
.hvac-brand.condura {
  width: 314px;
  font-size: 17px;
  line-height: 1.15;
}

.hvac-brand.mitsubishi img,
.hvac-brand.condura img {
  max-width: 268px;
}

.hvac-brand.midea,
.hvac-brand.daikin,
.hvac-brand.gree,
.hvac-brand.carrier,
.hvac-brand.koppel {
  text-transform: none;
}

.hvac-brand.panasonic,
.hvac-brand.samsung,
.hvac-brand.toshiba {
  color: #020000;
}

.hvac-brand.tosot,
.hvac-brand.condura,
.hvac-brand.tcl {
  color: #df2727;
}

.hvac-brand.lg {
  color: #b51252;
}

.hvac-brand.mitsubishi {
  color: #d71920;
}

.hvac-brand.daikin,
.hvac-brand.gree {
  color: #1682c4;
}

.hvac-brand.midea {
  color: #0b94c8;
}

.hvac-brand.aux {
  color: #1c6eba;
}

.hvac-brand.carrier,
.hvac-brand.koppel {
  color: #1f5dae;
}

@keyframes slide-hvac-brands {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(calc(-1 * var(--hvac-brand-distance)));
  }
}

.services-footer {
  min-height: 292px;
  padding-top: 42px;
  padding-bottom: 38px;
}

/* Solar solutions page */
.solar-page {
  background: var(--paper);
}

.solar-hero {
  position: relative;
  min-height: 545px;
  overflow: hidden;
  padding: 118px clamp(64px, 6.9vw, 100px) 64px;
  color: var(--white);
  background:
    linear-gradient(90deg, rgb(0 0 0 / 0.62), rgb(0 0 0 / 0.32) 48%, rgb(0 0 0 / 0.08)),
    url("assets/photos/solar/solar-farm-wide.webp") center 54% / cover;
}

.back-link {
  position: relative;
  z-index: 1;
  display: inline-flex;
  min-height: 42px;
  align-items: center;
  gap: 8px;
  margin-top: 18px;
  padding: 0 18px;
  border: 1px solid rgb(255 255 255 / 0.58);
  border-radius: 999px;
  color: var(--white);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.1;
  background: rgb(4 54 60 / 0.38);
  box-shadow: 0 12px 26px rgb(0 0 0 / 0.18);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: transform 160ms ease, border-color 160ms ease, background-color 160ms ease;
}

.back-link:hover,
.back-link:focus-visible {
  border-color: rgb(255 255 255 / 0.9);
  background: rgb(4 54 60 / 0.58);
  transform: translateY(-1px);
}

.solar-hero-copy {
  position: relative;
  z-index: 1;
  max-width: 730px;
  margin-top: 78px;
  text-shadow: 1px 2px 5px rgb(0 0 0 / 0.32);
}

.solar-hero-copy h1 {
  color: var(--white);
  font-size: clamp(48px, 5.05vw, 72px);
  line-height: 1.08;
}

.solar-hero-copy p {
  max-width: 590px;
  margin: 18px 0 28px;
  color: var(--white);
  font-size: 20px;
  line-height: 1.42;
}

.energy-setup,
.why-solar {
  padding: 56px clamp(64px, 6.9vw, 100px) 0;
  background: var(--paper);
}

.section-heading {
  max-width: 1040px;
}

.section-heading h2 {
  color: var(--teal);
  font-size: clamp(36px, 3.3vw, 48px);
  line-height: 1.06;
}

.section-heading p {
  max-width: 800px;
  margin: 8px 0 0;
  color: #3e3e3b;
  font-size: 18px;
  line-height: 1.45;
}

.setup-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  margin-top: 28px;
}

.setup-card {
  position: relative;
  display: grid;
  min-height: 382px;
  grid-template-rows: minmax(0, 1fr) auto;
  overflow: hidden;
  border-radius: 22px;
  background: var(--teal);
  box-shadow: 0 22px 38px rgb(12 62 69 / 0.2);
}

.setup-card img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 218px;
  object-fit: cover;
}

.setup-card > div {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 146px;
  padding: 24px 28px 28px;
  color: var(--white);
  background: #07535c;
}

.setup-card h3 {
  color: var(--white);
  font-family: "Poppins", sans-serif;
  font-size: clamp(26px, 2.4vw, 34px);
  font-weight: 600;
  line-height: 1.05;
}

.setup-card p {
  max-width: 360px;
  margin: 10px 0 0;
  color: var(--white);
  font-size: 18px;
  line-height: 1.32;
}

.why-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(28px, 4vw, 72px);
  margin-top: 34px;
  padding-bottom: 68px;
}

.why-grid article {
  max-width: 255px;
}

.why-grid h3 {
  color: var(--teal);
  font-family: "Poppins", sans-serif;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.22;
}

.why-grid p {
  margin: 10px 0 0;
  color: #252525;
  font-size: 15px;
  line-height: 1.45;
}

.solar-install-types {
  position: relative;
  display: grid;
  grid-template-columns: minmax(280px, 0.95fr) repeat(2, minmax(0, 1fr));
  grid-template-rows: clamp(300px, 23.9vw, 490px) clamp(300px, 23.9vw, 490px);
  gap: clamp(18px, 1.38vw, 28px);
  align-items: stretch;
  padding: clamp(42px, 5.8vw, 92px) clamp(48px, 5.86vw, 120px);
  overflow: hidden;
  color: var(--white);
  background:
    radial-gradient(circle at 35% 31%, rgb(34 125 133 / 0.72) 0 18%, rgb(18 91 99 / 0.5) 36%, rgb(7 65 72 / 0) 58%),
    linear-gradient(180deg, #247980 0%, #0c555d 45%, #073f46 100%);
}

.solar-install-types::before,
.solar-install-types::after {
  content: "";
  position: absolute;
  width: 560px;
  height: 440px;
  background: url("assets/patterns/wavy-line-large.webp") center / contain no-repeat;
  filter: brightness(0) invert(1);
  opacity: 0.12;
  pointer-events: none;
}

.solar-install-types::before {
  left: -285px;
  bottom: -135px;
  transform: rotate(115deg);
}

.solar-install-types::after {
  right: -250px;
  top: -120px;
  transform: rotate(-55deg);
}

.solar-install-copy,
.install-gallery {
  position: relative;
  z-index: 1;
}

.solar-install-copy {
  align-self: center;
  padding-right: clamp(12px, 2vw, 30px);
}

.solar-install-copy h2 {
  max-width: 520px;
  color: var(--white);
  font-size: clamp(36px, 3.1vw, 52px);
  line-height: 1.1;
}

.solar-install-copy p {
  max-width: 480px;
  margin: 18px 0 0;
  font-size: clamp(18px, 1.35vw, 26px);
  font-weight: 400;
  line-height: 1.22;
}

.install-gallery {
  display: contents;
}

.install-card {
  position: relative;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  margin: 0;
  overflow: hidden;
  border-radius: 12px;
  background: #d8ded8;
  box-shadow: 0 22px 42px rgb(0 0 0 / 0.18);
}

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

.install-card::before {
  content: none;
}

.install-card figcaption {
  display: grid;
  min-height: clamp(56px, 3.75vw, 77px);
  place-items: center;
  padding: 12px 18px;
  color: var(--white);
  font-size: clamp(18px, 1.28vw, 26px);
  font-weight: 400;
  line-height: 1.2;
  text-align: center;
  background: rgb(4 54 60 / 0.96);
}

.install-roof {
  grid-column: 2;
  grid-row: 1;
}

.install-ground {
  grid-column: 3;
  grid-row: 1;
}

.install-deck {
  grid-column: 1 / span 2;
  grid-row: 2;
}

.install-floating {
  grid-column: 3;
  grid-row: 2;
}

/* HVAC solutions page */
.hvac-page {
  background: var(--paper);
}

.hvac-hero {
  position: relative;
  min-height: 676px;
  overflow: hidden;
  padding: 118px clamp(64px, 6.9vw, 100px) 92px;
  color: var(--white);
  background:
    linear-gradient(90deg, rgb(0 0 0 / 0.68), rgb(0 0 0 / 0.38) 50%, rgb(0 0 0 / 0.08)),
    url("assets/figma-reference/hvac/commercial-rooftop-hvac-units.webp") center / cover;
}

.hvac-hero::after {
  content: "";
  position: absolute;
  inset: auto -170px -220px auto;
  width: 560px;
  height: 440px;
  background: url("assets/patterns/wavy-line-large.webp") center / contain no-repeat;
  filter: brightness(0) invert(1);
  opacity: 0.16;
  pointer-events: none;
}

.hvac-hero-copy {
  position: relative;
  z-index: 1;
  max-width: 760px;
  margin-top: 96px;
  text-shadow: 1px 2px 5px rgb(0 0 0 / 0.34);
}

.hvac-hero-copy .eyebrow {
  margin-bottom: 14px;
  color: var(--white);
}

.hvac-hero-copy h1 {
  color: var(--white);
  font-size: clamp(48px, 5.05vw, 72px);
  line-height: 1.05;
}

.hvac-hero-copy p:not(.eyebrow) {
  max-width: 620px;
  margin: 18px 0 28px;
  color: var(--white);
  font-size: 20px;
  line-height: 1.42;
}

.hvac-intro {
  padding: 64px clamp(64px, 6.9vw, 100px) 78px;
  background: var(--paper);
}

.hvac-intro .section-heading {
  max-width: 980px;
}

.hvac-intro .eyebrow,
.hvac-spaces .eyebrow {
  color: var(--olive);
}

.hvac-service-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
  margin-top: 34px;
}

.hvac-service-card {
  position: relative;
  min-height: 305px;
  overflow: hidden;
  padding: 34px 30px 32px;
  border-radius: 18px;
  color: var(--white);
  background:
    linear-gradient(150deg, rgb(6 67 75 / 0.97), rgb(12 62 69 / 0.88)),
    var(--hvac-image) center / cover;
  box-shadow: 0 24px 42px rgb(12 62 69 / 0.18);
}

.hvac-service-card::after {
  content: "";
  position: absolute;
  inset: auto -72px -76px auto;
  width: 190px;
  height: 150px;
  background: url("assets/patterns/wavy-line-large.webp") center / contain no-repeat;
  filter: brightness(0) invert(1);
  opacity: 0.13;
}

.hvac-service-number {
  display: inline-block;
  margin-bottom: 58px;
  color: rgb(255 255 255 / 0.62);
  font-family: "Montserrat", sans-serif;
  font-size: 48px;
  font-weight: 700;
  line-height: 1;
}

.hvac-service-card h3,
.hvac-service-card p {
  position: relative;
  z-index: 1;
}

.hvac-service-card h3 {
  max-width: 320px;
  color: var(--white);
  font-family: "Poppins", sans-serif;
  font-size: clamp(22px, 1.75vw, 30px);
  font-weight: 600;
  line-height: 1.15;
}

.hvac-service-card p {
  margin: 14px 0 0;
  color: rgb(255 255 255 / 0.88);
  font-size: 15px;
  line-height: 1.48;
}

.hvac-spaces {
  display: grid;
  grid-template-columns: minmax(300px, 0.38fr) minmax(0, 0.62fr);
  gap: clamp(36px, 4vw, 72px);
  align-items: center;
  padding: clamp(60px, 6.1vw, 96px) clamp(64px, 6.9vw, 100px);
  background: var(--white);
}

.hvac-spaces-copy h2 {
  max-width: 540px;
  color: var(--teal);
  font-size: clamp(36px, 3.15vw, 52px);
  line-height: 1.08;
}

.hvac-spaces-copy p:not(.eyebrow) {
  max-width: 520px;
  margin: 18px 0 0;
  color: #303431;
  font-size: 18px;
  line-height: 1.5;
}

.hvac-space-gallery {
  display: grid;
  grid-template-columns: 1.12fr 0.88fr;
  grid-template-rows: repeat(2, minmax(210px, 1fr));
  gap: 20px;
  min-height: 560px;
}

.hvac-space-card {
  position: relative;
  min-height: 0;
  margin: 0;
  overflow: hidden;
  border-radius: 12px;
  background: #d8ded8;
  box-shadow: 0 24px 48px rgb(12 62 69 / 0.16);
}

.hvac-space-large {
  grid-row: 1 / span 2;
}

.hvac-space-card img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hvac-space-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 42%, rgb(0 0 0 / 0.66));
}

.hvac-space-card figcaption {
  position: absolute;
  right: 20px;
  bottom: 18px;
  left: 20px;
  z-index: 1;
  color: var(--white);
  font-family: "Poppins", sans-serif;
  font-size: clamp(18px, 1.25vw, 24px);
  font-weight: 600;
  line-height: 1.2;
}

/* Contact page */
.contact-page {
  background: var(--paper);
}

.contact-hero {
  position: relative;
  min-height: clamp(420px, 31vw, 486px);
  overflow: hidden;
  padding: 40px clamp(64px, 7vw, 100px) 54px;
  color: var(--white);
  background:
    linear-gradient(90deg, rgb(25 33 20 / 0.6), rgb(30 39 24 / 0.32)),
    linear-gradient(180deg, rgb(7 26 28 / 0.1), rgb(7 26 28 / 0.24)),
    var(--contact-hero-image) center 46% / cover;
}

.contact-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 0 62%, rgb(245 245 240 / 0.05) 100%);
  pointer-events: none;
}

.contact-hero-content {
  position: relative;
  z-index: 1;
  max-width: 640px;
  padding-top: clamp(118px, 9vw, 142px);
}

.contact-hero h1 {
  max-width: 575px;
  color: var(--white);
  font-size: clamp(42px, 3.9vw, 58px);
  line-height: 1.1;
  text-shadow: 1px 2px 5px rgb(0 0 0 / 0.28);
}

.contact-hero p {
  max-width: 555px;
  margin: 28px 0 0;
  color: var(--white);
  font-size: 18px;
  line-height: 1.42;
}

.contact-info-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 576px));
  gap: clamp(36px, 2.45vw, 48px);
  justify-content: center;
  max-width: 1900px;
  margin: 0 auto;
  padding: 90px clamp(56px, 5.2vw, 106px) 86px;
  background: var(--paper);
}

.contact-info-card {
  display: grid;
  grid-template-columns: 108px minmax(0, 1fr);
  grid-template-rows: auto 1fr;
  column-gap: 24px;
  row-gap: 22px;
  align-items: center;
  min-height: 306px;
  padding: 24px 24px 28px;
  border-radius: 24px;
  background: #ffffff;
  box-shadow: 0 26px 66px rgb(12 62 69 / 0.1);
}

.contact-info-card-wide {
  grid-column: auto;
  justify-self: stretch;
  width: auto;
}

.contact-card-icon {
  position: relative;
  display: grid;
  width: 108px;
  height: 108px;
  place-items: center;
  border-radius: 50%;
  background: var(--teal);
  color: var(--white);
  box-shadow: 0 10px 18px rgb(12 62 69 / 0.15);
}

.contact-card-icon::before {
  content: "";
  width: 54px;
  height: 54px;
  background: var(--white);
  mask: var(--contact-icon) center / contain no-repeat;
  -webkit-mask: var(--contact-icon) center / contain no-repeat;
}

.contact-card-phone {
  --contact-icon: url("assets/icons/contact/phone-call.svg");
}

.contact-card-mail {
  --contact-icon: url("assets/icons/contact/email-envelope.svg");
}

.contact-card-clock {
  --contact-icon: url("assets/icons/contact/clock.svg");
}

.contact-info-card > h2 {
  color: var(--teal);
  font-size: clamp(28px, 1.55vw, 32px);
  line-height: 1.08;
  user-select: none !important;
  -webkit-user-select: none !important;
}

.hvac-page .back-link {
  z-index: 3;
}

.contact-card-body {
  grid-column: 1 / -1;
  align-self: end;
}

.contact-highlight {
  margin: 0 0 12px;
  color: var(--teal);
  font-size: clamp(16px, 1vw, 20px);
  font-weight: 700;
  line-height: 1.42;
}

.contact-info-card p {
  margin: 0;
  color: var(--ink);
  font-size: clamp(18px, 1.22vw, 24px);
  line-height: 1.35;
}

.contact-map-section {
  display: grid;
  grid-template-columns: minmax(320px, 0.43fr) minmax(420px, 0.57fr);
  align-items: stretch;
  background: var(--white);
}

.contact-address-copy {
  display: grid;
  grid-template-columns: clamp(58px, 5vw, 76px) minmax(0, 900px);
  gap: clamp(18px, 2.4vw, 34px);
  align-items: start;
  padding: clamp(58px, 6vw, 92px) clamp(42px, 5vw, 88px) clamp(56px, 5.4vw, 78px) clamp(64px, 6.4vw, 92px);
  background: var(--white);
}

.contact-address-icon {
  position: relative;
  display: grid;
  width: clamp(58px, 5vw, 76px);
  height: clamp(58px, 5vw, 76px);
  place-items: center;
  border-radius: 50%;
  background: var(--teal);
}

.contact-address-icon::before {
  content: "";
  width: clamp(30px, 2.5vw, 38px);
  height: clamp(30px, 2.5vw, 38px);
  background: var(--white);
  mask: url("assets/icons/contact/map-pin.svg") center / contain no-repeat;
  -webkit-mask: url("assets/icons/contact/map-pin.svg") center / contain no-repeat;
}

.contact-address-copy h2 {
  max-width: 860px;
  color: var(--teal);
  font-family: "Poppins", sans-serif;
  font-size: clamp(20px, 1.55vw, 28px);
  font-weight: 600;
  line-height: 1.35;
}

.contact-address-copy p {
  grid-column: 2;
  max-width: 820px;
  margin: clamp(28px, 3.8vw, 54px) 0 0;
  color: var(--ink);
  font-size: clamp(17px, 1.3vw, 22px);
  line-height: 1.48;
}

.contact-map-shell {
  position: relative;
  display: block;
  width: 100%;
  min-height: 330px;
}

.contact-map-link {
  position: absolute;
  right: 14px;
  bottom: 14px;
  z-index: 2;
  display: inline-flex;
  min-height: 38px;
  align-items: center;
  justify-content: center;
  padding: 9px 13px;
  border-radius: 8px;
  color: var(--teal);
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  background: rgb(255 255 255 / 0.94);
  box-shadow: 0 8px 22px rgb(0 0 0 / 0.18);
  cursor: pointer;
}

.contact-map {
  display: block;
  width: 100%;
  height: 100%;
  min-height: inherit;
  border: 0;
  pointer-events: auto;
}

/* Quote page */
.quote-page {
  background: var(--white);
}

.quote-hero {
  position: relative;
  min-height: 610px;
  padding: 320px 100px 78px;
  overflow: hidden;
  color: var(--white);
  background:
    linear-gradient(rgb(0 0 0 / 0.36), rgb(0 0 0 / 0.36)),
    var(--quote-hero-image) center 44% / cover no-repeat;
}

.quote-hero-copy {
  position: relative;
  z-index: 1;
  max-width: 790px;
}

.quote-hero h1 {
  font-size: 42px;
  line-height: 1.18;
}

.quote-panel {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(360px, 0.92fr);
  max-width: 1240px;
  margin: -50px auto 0;
  overflow: hidden;
  border-radius: 8px 8px 0 0;
  background: var(--white);
  box-shadow: 0 18px 52px rgb(0 0 0 / 0.12);
}

.quote-form {
  padding: 24px 50px 40px;
}

.quote-form h2,
.quote-next h2 {
  margin: 0 0 24px;
  color: var(--ink);
  font-family: "Poppins", sans-serif;
  font-size: 24px;
  font-weight: 600;
  line-height: 1.18;
}

.quote-alert {
  margin: -8px 0 18px;
  border-radius: 6px;
  padding: 12px 14px;
  font-size: 14px;
  line-height: 1.45;
}

.quote-alert-success {
  border: 1px solid rgb(4 154 61 / 0.28);
  color: #08612b;
  background: rgb(4 154 61 / 0.1);
}

.quote-alert-error {
  border: 1px solid rgb(180 35 24 / 0.24);
  color: #9f1f15;
  background: rgb(180 35 24 / 0.08);
}

.quote-form label {
  display: block;
  margin: 18px 0 7px;
  color: var(--ink);
  font-size: 18px;
  line-height: 1.2;
}

.quote-field {
  position: relative;
}

.quote-field::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 14px;
  width: 24px;
  height: 24px;
  background: var(--ink);
  transform: translateY(-50%);
  mask: var(--quote-icon) center / contain no-repeat;
  -webkit-mask: var(--quote-icon) center / contain no-repeat;
}

.quote-field-user {
  --quote-icon: url("assets/icons/contact/phone-call.svg");
}

.quote-field-phone {
  --quote-icon: url("assets/icons/contact/phone-call.svg");
}

.quote-field-mail {
  --quote-icon: url("assets/icons/contact/email-envelope.svg");
}

.quote-field-location {
  --quote-icon: url("assets/icons/contact/map-pin.svg");
}

.quote-field-bill {
  --quote-icon: url("assets/icons/solar-panel.svg");
}

.quote-form input,
.quote-form textarea {
  width: 100%;
  border: 1px solid rgb(0 0 0 / 0.36);
  border-radius: 3px;
  color: var(--ink);
  font: inherit;
  font-size: 16px;
  background: var(--white);
}

.quote-form input {
  height: 48px;
  padding: 10px 14px 10px 50px;
}

.quote-form textarea {
  min-height: 112px;
  resize: vertical;
  padding: 12px;
}

.quote-form input::placeholder,
.quote-form textarea::placeholder {
  color: rgb(0 0 0 / 0.36);
}

.quote-error {
  margin: 6px 0 0;
  color: #9f1f15;
  font-size: 13px;
  line-height: 1.35;
}

.quote-form button {
  display: flex;
  width: 100%;
  min-height: 58px;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin-top: 20px;
  border: 0;
  border-radius: 6px;
  color: var(--white);
  font-family: "Poppins", sans-serif;
  font-size: 18px;
  font-weight: 600;
  cursor: pointer;
  background: linear-gradient(90deg, var(--teal) 0%, #0a4f58 64%, #0b646b 100%);
  box-shadow: 0 10px 24px rgb(12 62 69 / 0.16);
  transition:
    background 180ms ease,
    box-shadow 180ms ease,
    transform 180ms ease;
}

.quote-form button:hover {
  background: linear-gradient(90deg, #0e4b53 0%, #0d626b 58%, #12808a 100%);
  box-shadow: 0 16px 34px rgb(12 62 69 / 0.24);
  transform: translateY(-2px);
}

.quote-form button:active {
  background: linear-gradient(90deg, #08363d 0%, #094b54 62%, #0a5b63 100%);
  box-shadow: 0 7px 16px rgb(12 62 69 / 0.2);
  transform: translateY(1px);
}

.quote-form button:disabled {
  cursor: progress;
  opacity: 0.76;
  transform: none;
}

.quote-submit-icon {
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
  fill: currentColor;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.quote-toast-region {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 10050;
  display: grid;
  width: min(360px, calc(100vw - 32px));
  gap: 10px;
  pointer-events: none;
}

.quote-toast {
  border-radius: 8px;
  padding: 14px 16px;
  color: var(--white);
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  line-height: 1.45;
  box-shadow: 0 18px 38px rgb(0 0 0 / 0.2);
  animation: quote-toast-in 220ms ease-out;
}

.quote-toast-success {
  background: #08703a;
}

.quote-toast-error {
  background: #a12a22;
}

.quote-toast.is-leaving {
  animation: quote-toast-out 220ms ease-in forwards;
}

@keyframes quote-toast-in {
  from {
    opacity: 0;
    transform: translateY(12px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes quote-toast-out {
  to {
    opacity: 0;
    transform: translateY(12px);
  }
}

.quote-next {
  padding: 24px 50px 44px;
  background: #f1f1f1;
}

.quote-next ol {
  display: grid;
  gap: 82px;
  margin: 60px 0 0;
  padding: 0;
  list-style: none;
}

.quote-next li {
  color: var(--ink);
  text-align: center;
}

.quote-next strong {
  display: block;
  margin-bottom: 18px;
  font-size: 26px;
  line-height: 1.2;
}

.quote-next p {
  max-width: 430px;
  margin: 0 auto;
  font-size: 24px;
  line-height: 1.25;
}

.quote-footer {
  padding-top: 48px;
}

/* Partner page */
.partner-hero {
  position: relative;
  min-height: 720px;
  overflow: hidden;
  padding: 46px 100px 78px;
  color: var(--white);
  background:
    linear-gradient(180deg, rgb(13 22 27 / 0.16) 0%, rgb(13 22 27 / 0.32) 54%, rgb(13 22 27 / 0.48) 100%),
    var(--partner-hero-image) center / cover no-repeat;
}

.partner-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 28% 54%, rgb(5 16 20 / 0.26) 0%, rgb(5 16 20 / 0.14) 34%, transparent 68%),
    linear-gradient(90deg, rgb(12 24 30 / 0.44) 0%, rgb(12 24 30 / 0.24) 36%, rgb(12 24 30 / 0.12) 58%, rgb(12 24 30 / 0.2) 78%, rgb(12 24 30 / 0.3) 100%);
  pointer-events: none;
}

.partner-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgb(17 25 31 / 0.04) 0%, rgb(17 25 31 / 0.12) 46%, rgb(17 25 31 / 0.34) 100%);
  pointer-events: none;
}

.partner-hero-content {
  position: relative;
  z-index: 1;
  max-width: 720px;
  padding-top: 250px;
  text-shadow: 1px 2px 5px rgb(0 0 0 / 0.32);
}

.partner-hero h1 {
  font-size: clamp(58px, 5.9vw, 82px);
  line-height: 0.98;
}

.partner-hero p {
  max-width: 650px;
  margin: 14px 0 0;
  font-size: 18px;
  line-height: 1.5;
}

.partner-benefits {
  position: relative;
  overflow: hidden;
  padding: 72px 0 74px;
  background: var(--paper);
}

.partner-benefits::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    repeating-radial-gradient(circle at 0 0, rgb(12 62 69 / 0.05) 0 1px, transparent 1px 18px),
    linear-gradient(180deg, rgb(255 255 255 / 0.5), transparent 52%);
  pointer-events: none;
}

.partner-benefits-layout {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  gap: 34px;
  align-items: start;
  padding: 0 100px;
}

.partner-intro {
  padding-top: 36px;
}

.partner-intro h2 {
  max-width: 260px;
  color: var(--teal);
  font-size: 38px;
  line-height: 1.08;
  letter-spacing: -1.4px;
}

.partner-intro p {
  max-width: 260px;
  margin: 12px 0 0;
  color: #6c7170;
  font-size: 15px;
  line-height: 1.45;
}

.partner-card-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.partner-card {
  overflow: hidden;
  border-radius: 8px;
  background: #f7f5ef;
  box-shadow: 0 10px 28px rgb(0 0 0 / 0.08);
}

.partner-card-media {
  position: relative;
  aspect-ratio: 1.48;
  overflow: hidden;
  background-position: center;
  background-size: cover;
}

.partner-card-media::before {
  content: "";
  position: absolute;
  inset: 0;
  background: none;
}

.partner-card-media-1 {
  background-image: var(--partner-design-image);
}

.partner-card-media-2 {
  background-image: var(--partner-install-image);
}

.partner-card-media-3 {
  background-image: var(--partner-distributor-image);
}

.partner-card-media-4 {
  background-image: var(--partner-corporate-image);
}

.partner-card-media-5 {
  background-image: var(--partner-support-image);
}

.partner-card-copy {
  padding: 11px 12px 15px;
}

.partner-card h3 {
  color: #254f55;
  font-family: "Poppins", sans-serif;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.25;
}

.partner-card p {
  margin: 4px 0 0;
  color: #7c7f7d;
  font-size: 13px;
  line-height: 1.45;
}

.partner-empowering {
  position: relative;
  min-height: 285px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 390px);
  align-items: center;
  gap: 64px;
  padding: 72px 86px 58px;
  overflow: hidden;
  color: var(--white);
  background:
    linear-gradient(90deg, rgb(10 48 57 / 0.74) 0%, rgb(10 48 57 / 0.66) 46%, rgb(10 48 57 / 0.74) 100%),
    var(--partner-empowering-image) center 64% / cover no-repeat;
}

.partner-empowering::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgb(255 255 255 / 0.04) 0%, transparent 38%, rgb(2 25 29 / 0.2) 100%),
    linear-gradient(90deg, rgb(2 25 29 / 0.08) 0%, transparent 20%, transparent 76%, rgb(2 25 29 / 0.12) 100%);
  pointer-events: none;
}

.partner-empowering-copy {
  position: relative;
  z-index: 1;
}

.partner-empowering h2 {
  max-width: 600px;
  font-size: 30px;
  font-weight: 500;
  line-height: 1.08;
  white-space: nowrap;
}

.partner-empowering p {
  position: relative;
  z-index: 1;
  max-width: 455px;
  margin: 0;
  justify-self: end;
  color: rgb(255 255 255 / 0.95);
  font-size: 18px;
  line-height: 1.22;
}

.partner-footer {
  position: relative;
  min-height: 315px;
  padding: 40px 100px;
  background:
    radial-gradient(ellipse at 6% 24%, rgb(30 111 119 / 0.24) 0%, transparent 40%),
    radial-gradient(ellipse at 92% 18%, rgb(47 126 134 / 0.2) 0%, transparent 42%),
    linear-gradient(100deg, #0a444b 0%, #0c4b53 45%, #084149 100%);
}

.partner-footer::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 50% 18%, rgb(255 255 255 / 0.08) 0%, rgb(255 255 255 / 0.025) 30%, transparent 58%),
    linear-gradient(180deg, transparent 0%, rgb(0 0 0 / 0.035) 70%, rgb(0 0 0 / 0.08) 100%);
  pointer-events: none;
}

.partner-footer .footer-inner {
  position: relative;
  z-index: 1;
  align-items: end;
}

.help-strip {
  display: grid;
  min-height: 185px;
  grid-template-columns: auto minmax(320px, 520px) auto;
  align-items: center;
  justify-content: center;
  gap: 48px;
  padding: 30px 170px;
  background: var(--paper);
}

.help-illustration {
  width: 118px;
}

.help-illustration img {
  display: block;
  width: 100%;
  height: auto;
}

.help-copy h2 {
  color: var(--ink);
  font-family: "Poppins", sans-serif;
  font-size: 18px;
  font-weight: 600;
}

.help-copy p {
  margin: 5px 0 0;
  font-size: 15px;
  line-height: 1.35;
}

.help-strip .button {
  background: var(--teal);
  white-space: nowrap;
}

.mission-vision {
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: var(--paper);
}

.mission-vision .about-placeholder {
  min-height: 384px;
}

.mv-copy {
  display: flex;
  min-height: 384px;
  flex-direction: column;
  justify-content: center;
  padding: 64px 100px 64px 40px;
}

.mission-vision .mv-copy:nth-child(3) {
  padding: 62px 40px 62px 100px;
}

.solutions-section {
  min-height: 322px;
  padding: 62px 100px 46px;
  border-bottom: 1px solid rgb(255 255 255 / 0.72);
  text-align: center;
}

.solutions-section h2 {
  position: relative;
  z-index: 1;
  margin-bottom: 38px;
  font-size: 38px;
  line-height: 1.2;
}

.solution-cards {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 70px;
  max-width: 1120px;
  margin: 0 auto;
  text-align: center;
}

.solution-cards h3 {
  font-family: "Poppins", sans-serif;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.25;
}

.solution-cards a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 17px;
  color: var(--white);
  font-size: 16px;
  font-weight: 600;
}

.solution-cards a span {
  font-size: 24px;
  line-height: 1;
}

.solutions-section + .footer {
  padding-top: 32px;
}

.footer {
  position: relative;
  min-height: 315px;
  overflow: hidden;
  padding: 40px 100px;
  color: var(--white);
  background:
    radial-gradient(ellipse at 6% 24%, rgb(30 111 119 / 0.24) 0%, transparent 40%),
    radial-gradient(ellipse at 92% 18%, rgb(47 126 134 / 0.2) 0%, transparent 42%),
    linear-gradient(100deg, #0a444b 0%, #0c4b53 45%, #084149 100%);
}

.home-footer {
  min-height: 315px;
}

.home-footer .footer-solutions {
  display: none;
}

.footer-solutions {
  position: relative;
  z-index: 1;
  max-width: 1160px;
  margin: 0 auto 40px;
  padding-bottom: 40px;
  border-bottom: 1px solid rgb(255 255 255 / 0.72);
  text-align: center;
}

.footer .footer-solutions h2 {
  margin: 20px 0 32px;
  color: var(--white);
  font-family: "Montserrat", sans-serif;
  font-size: 40px;
  line-height: 1.22;
}

.footer-solutions-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  text-align: center;
}

.footer-solutions article {
  display: flex;
  min-height: 214px;
  min-width: 0;
  flex-direction: column;
  align-items: center;
  padding: 26px 24px 24px;
  border: 1px solid rgb(255 255 255 / 0.32);
  border-radius: 8px;
  background:
    linear-gradient(145deg, rgb(255 255 255 / 0.24), rgb(255 255 255 / 0.11)),
    rgb(255 255 255 / 0.09);
  box-shadow: 0 16px 36px rgb(0 0 0 / 0.13);
  backdrop-filter: blur(9px);
}

.footer .footer-solutions h3 {
  margin-bottom: 9px;
  color: var(--white);
  font-family: "Poppins", sans-serif;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.2;
}

.footer .footer-solutions p {
  margin: 0 0 18px;
  color: rgb(255 255 255 / 0.88);
  font-size: 16px;
  line-height: 1.43;
}

.footer .footer-solutions a,
.footer .footer-solutions .service-card-disabled {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: 40px;
  margin: auto 0 0;
  padding: 10px 17px;
  border: 1px solid rgb(255 255 255 / 0.44);
  border-radius: 999px;
  color: var(--white);
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  background: rgb(255 255 255 / 0.12);
  transition:
    background 180ms ease,
    border-color 180ms ease,
    transform 180ms ease;
}

.footer .footer-solutions a:hover,
.footer .footer-solutions a:focus-visible {
  border-color: rgb(255 255 255 / 0.68);
  background: rgb(255 255 255 / 0.2);
  transform: translateY(-1px);
}

.footer .footer-solutions a span {
  font-size: 22px;
}

.footer .footer-solutions .service-card-disabled span {
  font-size: 22px;
  line-height: 1;
}

.footer .footer-solutions .service-card-disabled {
  border-color: rgb(255 255 255 / 0.24);
  color: rgb(255 255 255 / 0.64);
  background: rgb(255 255 255 / 0.08);
}

.footer-wave-left {
  left: -315px;
  top: -96px;
  transform: rotate(122deg) scale(1.16);
}

.footer-wave-right {
  right: -285px;
  top: -118px;
  transform: rotate(-58deg) scale(1.2);
}

.footer-inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 255px 255px minmax(440px, 520px);
  align-items: start;
  justify-content: center;
  gap: 92px;
  max-width: 1120px;
  margin: 0 auto;
}

.footer-inner > div:nth-child(2) {
  align-self: start;
  padding-top: 41px;
}

.footer h2,
.footer h3 {
  margin: 0 0 18px;
  font-family: "Poppins", sans-serif;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.15;
}

.footer a,
.footer p,
.footer .footer-link-disabled {
  display: block;
  margin: 0 0 13px;
  font-size: 20px;
  line-height: 1.32;
}

.footer .footer-link {
  position: relative;
  display: flex;
  width: 255px;
  align-items: center;
  justify-content: flex-start;
  gap: 0;
  text-decoration: none;
  text-underline-offset: 5px;
}

.footer .footer-link-text {
  display: block;
  flex: 0 0 225px;
  width: 225px;
  min-width: 225px;
  max-width: 225px;
}

.footer .footer-arrow {
  position: relative;
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
  min-width: 24px;
}

.footer .footer-arrow::before,
.footer .footer-arrow::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 9px;
  width: 8px;
  height: 2px;
  border-radius: 2px;
  background: var(--white);
  transform-origin: right center;
}

.footer .footer-arrow::before {
  transform: translateY(-50%) rotate(45deg);
}

.footer .footer-arrow::after {
  transform: translateY(-50%) rotate(-45deg);
}

.footer .footer-link:hover {
  text-decoration: underline;
}

.footer .footer-link-disabled {
  color: rgb(255 255 255 / 0.52);
  cursor: not-allowed;
}

.footer .footer-link-disabled .footer-arrow {
  opacity: 0.42;
}

.footer .footer-link-disabled:hover {
  text-decoration: none;
}

.footer .contact-line {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}

.footer .contact-line span {
  display: block;
  flex: 1 1 auto;
  min-width: 0;
}

.footer .contact-icon {
  flex: 0 0 28px;
  width: 28px;
  height: 28px;
  margin-top: 0;
  object-fit: contain;
  filter: brightness(0) invert(1);
}

.footer .contact-icon.location-icon {
  align-self: flex-start;
  margin-top: 0.08em;
}

.socials {
  display: flex;
  gap: 12px;
}

.socials a {
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  border: 0;
  border-radius: 0;
  color: var(--white);
}

.social::before {
  content: "";
  width: 32px;
  height: 32px;
  background: var(--social-icon) center / contain no-repeat;
}

.facebook::before {
  --social-icon: url("assets/icons/facebook.svg");
}

.tiktok::before {
  --social-icon: url("assets/icons/tiktok.svg");
}

.youtube::before {
  width: 38px;
  --social-icon: url("assets/icons/youtube.svg");
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

@media (max-width: 1279px) {
  .hero,
  .about-page-hero,
  .services-hero,
  .services-showcase-hero,
  .solar-hero,
  .contact-hero,
  .partner-hero {
    overflow: visible;
  }

  .navbar {
    height: 73px;
    align-items: center;
    overflow: visible;
    border-color: rgb(255 255 255 / 0.5);
    border-radius: 999px;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 18px;
  }

  .quote-hero {
    min-height: 560px;
    padding: 270px 64px 78px;
  }

  .quote-hero h1 {
    font-size: 36px;
  }

  .quote-panel {
    max-width: calc(100% - 80px);
    grid-template-columns: 1fr 0.92fr;
  }

  .quote-form,
  .quote-next {
    padding-right: 36px;
    padding-left: 36px;
  }

  .partner-empowering {
    min-height: 285px;
    grid-template-columns: minmax(0, 1fr) minmax(300px, 0.95fr);
    gap: 32px;
    padding: 70px 48px 54px;
    background-position: center 66%;
  }

  .partner-empowering h2 {
    max-width: none;
    font-size: 26px;
    font-weight: 500;
    line-height: 1.08;
  }

  .partner-empowering p {
    max-width: 470px;
    font-size: 18px;
    line-height: 1.22;
  }

  .navbar::before,
  .navbar::after {
    border-radius: 999px;
  }

  .hamburger {
    position: relative;
    z-index: 1;
    display: inline-flex;
    width: 54px;
    height: 54px;
    margin-left: auto;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border-radius: 0;
    background: transparent;
    cursor: pointer;
  }

  .hamburger span {
    display: block;
    width: 34px;
    height: 2px;
    border-radius: 2px;
    background: var(--white);
    transition: transform 180ms ease, opacity 180ms ease;
  }

  .nav-toggle:checked + .hamburger span:nth-child(1) {
    transform: translateY(10px) rotate(45deg);
  }

  .nav-toggle:checked + .hamburger span:nth-child(2) {
    opacity: 0;
  }

  .nav-toggle:checked + .hamburger span:nth-child(3) {
    transform: translateY(-10px) rotate(-45deg);
  }

  .nav-menu {
    display: none;
    position: absolute;
    z-index: 1001;
    top: calc(100% + 12px);
    left: auto;
    right: 0;
    width: min(440px, calc(100vw - 48px));
    max-height: calc(100dvh - 125px);
    padding: 22px 28px;
    overflow-y: auto;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    border: 1px solid rgb(12 62 69 / 0.08);
    border-radius: 10px;
    background: var(--white);
    box-shadow: 0 18px 42px rgb(0 0 0 / 0.14);
  }

  .nav-toggle:checked ~ .nav-menu {
    display: flex;
  }

  .nav-links {
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    color: var(--ink);
  }

  .nav-links a {
    display: flex;
    width: 100%;
    min-height: 48px;
    align-items: center;
    justify-content: center;
    padding: 12px 18px;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 600;
    text-align: center;
    background: transparent;
  }

  .nav-links a:not(.contact-pill)::after {
    display: none;
  }

  .nav-links a:hover {
    background: rgb(12 62 69 / 0.07);
  }

  .contact-pill {
    width: 100%;
    min-height: 48px;
    margin-top: 0;
    color: var(--ink);
    background: transparent;
    box-shadow: none;
    transform: none;
  }

  .contact-pill:hover,
  .contact-pill:focus-visible {
    color: var(--ink);
    background: rgb(12 62 69 / 0.07);
    box-shadow: none;
    transform: none;
  }

  .contact-pill:active,
  .contact-pill.active,
  .contact-pill[aria-current="page"] {
    background: rgb(12 62 69 / 0.1);
    box-shadow: inset 0 3px 8px rgb(12 62 69 / 0.16);
    transform: translateY(1px);
  }

  .nav-links a.active:not(.contact-pill),
  .nav-links a[aria-current="page"]:not(.contact-pill) {
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 6px;
  }

  .timeline {
    gap: 24px;
  }

  .footer-inner {
    grid-template-columns: repeat(2, 340px);
    justify-content: center;
    align-items: start;
    column-gap: 96px;
    row-gap: 96px;
    max-width: 820px;
    margin: 0 auto;
  }

  .footer-inner > div:nth-child(3) {
    grid-column: 1 / -1;
    width: min(100%, 620px);
    justify-self: center;
  }

  .footer-solutions-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 34px;
  }
}

@media (max-width: 1279px) {
  .services-showcase-hero {
    min-height: 650px;
    padding-right: 64px;
    padding-left: 64px;
  }
  .contact-hero {
    min-height: 500px;
    padding-right: 64px;
    padding-left: 64px;
  }

  .contact-hero-content {
    max-width: 560px;
    padding-top: 135px;
  }

  .contact-info-grid {
    grid-template-columns: minmax(0, 520px);
    gap: 28px;
    padding-right: 64px;
    padding-left: 64px;
  }

  .contact-info-card-wide {
    width: 100%;
  }

  .contact-map-section {
    grid-template-columns: 1fr;
  }

  .contact-address-copy {
    grid-template-columns: 58px minmax(0, 1fr);
    gap: 20px;
    padding-top: 36px;
    padding-bottom: 28px;
    padding-right: 64px;
    padding-left: 64px;
  }

  .contact-map-shell,
  .contact-map {
    min-height: 390px;
  }

  .solar-hero {
    min-height: 510px;
    padding-right: 64px;
    padding-left: 64px;
    background-position: 54% center;
  }

  .solar-hero-copy {
    max-width: 620px;
    margin-top: 78px;
  }

  .energy-setup,
  .why-solar {
    padding-right: 64px;
    padding-left: 64px;
  }

  .setup-card {
    min-height: 320px;
  }

  .setup-card > div {
    min-height: 132px;
    padding: 22px 24px 24px;
  }

  .why-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .solar-install-types {
    grid-template-columns: minmax(210px, 0.9fr) repeat(2, minmax(0, 1fr));
    grid-template-rows: clamp(230px, 24vw, 300px) clamp(230px, 24vw, 300px);
    gap: 18px;
    padding-right: 64px;
    padding-left: 64px;
  }

  .solar-install-copy h2 {
    font-size: 32px;
  }

  .solar-install-copy p {
    font-size: 16px;
    line-height: 1.32;
  }

  .install-card figcaption {
    font-size: 16px;
  }

  .service-cards-section {
    padding-right: 64px;
    padding-left: 64px;
  }

  .service-card p {
    min-height: 130px;
  }

  .hvac-brand-carousel {
    --hvac-brand-distance: 3158px;
    min-height: 158px;
  }

  .hvac-brand-track {
    gap: 22px;
    padding-left: 36px;
  }

  .hvac-brand {
    width: 198px;
    min-height: 78px;
    font-size: 24px;
  }

  .hvac-brand.mitsubishi {
    font-size: 14px;
  }

  .help-strip {
    padding-right: 64px;
    padding-left: 64px;
  }

  .services-hero {
    padding-right: 64px;
    padding-left: 64px;
  }

  .services-intro {
    grid-template-columns: 1fr 1fr;
    padding-right: 64px;
    padding-left: 64px;
  }

  .services-intro .eyebrow {
    grid-column: 1 / -1;
  }

  .service-detail {
    grid-template-columns: 1fr;
  }

  .service-detail-reverse .service-media,
  .service-detail-reverse .service-copy {
    order: initial;
  }

  .service-media {
    min-height: 430px;
  }

  .service-copy {
    min-height: 530px;
    padding: 72px 64px;
  }

  .service-process {
    padding-right: 64px;
    padding-left: 64px;
  }

  .process-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .about {
    display: block;
    padding: 80px 100px;
  }

  .about-copy,
  .about p {
    max-width: none;
  }

  .photo-grid {
    width: 100%;
    height: clamp(360px, 50vw, 520px);
    margin-top: 44px;
    min-width: 0;
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    grid-template-rows: repeat(2, minmax(0, 1fr));
  }

  .photo-large {
    grid-row: 1 / span 2;
  }

  .about-page-hero,
  .who-section,
  .legacy-section,
  .solutions-section {
    padding-right: 100px;
    padding-left: 100px;
  }

  .who-section {
    display: block;
    min-height: 410px;
    padding-top: 80px;
    padding-bottom: 80px;
  }

  .about-office-placeholder {
    display: block;
    width: min(54vw, 660px);
    background:
      linear-gradient(90deg, var(--paper) 0%, rgb(245 245 240 / 0.86) 20%, rgb(245 245 240 / 0.34) 40%, rgb(245 245 240 / 0.03) 58%, rgb(245 245 240 / 0) 100%),
      var(--about-who-image) center / cover no-repeat;
  }

  .legacy-section {
    min-height: 760px;
    grid-template-columns: minmax(0, 0.52fr) minmax(0, 0.48fr);
    gap: 52px;
    align-items: start;
    padding-top: 90px;
    padding-bottom: 80px;
  }

  .legacy-items {
    grid-template-columns: 1fr;
    gap: 46px;
  }

  .mission-vision {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .mission-vision .about-placeholder,
  .mv-copy {
    min-height: 390px;
  }

  .mv-copy,
  .mission-vision .mv-copy:nth-child(3) {
    padding: 56px 48px;
  }

  .solution-cards {
    gap: 32px;
  }

  .partner-benefits {
    padding-top: 64px;
    padding-bottom: 64px;
  }

  .partner-benefits-layout {
    grid-template-columns: 1fr;
    gap: 34px;
    padding-right: 64px;
    padding-left: 64px;
  }

  .partner-intro {
    padding-top: 0;
  }

  .partner-intro h2 {
    max-width: 620px;
    font-size: 42px;
    line-height: 1.08;
  }

  .partner-intro p {
    max-width: 620px;
    font-size: 18px;
    line-height: 1.45;
  }

  .partner-card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
  }

  .partner-card-copy {
    padding: 14px 16px 18px;
  }

  .partner-card h3 {
    font-size: 18px;
  }

  .partner-card p {
    font-size: 14px;
  }

  .hvac-hero {
    min-height: 620px;
    padding-right: 64px;
    padding-left: 64px;
  }

  .hvac-intro {
    padding-right: 64px;
    padding-left: 64px;
  }

  .hvac-service-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
  }

  .hvac-service-card {
    padding: 30px 24px 28px;
  }

  .hvac-service-number {
    margin-bottom: 44px;
    font-size: 42px;
  }

  .hvac-spaces {
    grid-template-columns: 1fr;
    padding-right: 64px;
    padding-left: 64px;
  }

  .hvac-spaces-copy h2,
  .hvac-spaces-copy p:not(.eyebrow) {
    max-width: 720px;
  }

  .hvac-space-gallery {
    min-height: 500px;
  }
}

@media (max-width: 799px) {
  .navbar {
    top: 20px;
    left: 24px;
    right: 24px;
    width: auto;
    height: 66px;
    padding: 11px 18px;
    transform: none;
  }

  .brand {
    width: 181px;
    height: 43px;
  }

  .brand img {
    width: 181px;
    height: 43px;
  }

  .hamburger {
    width: 50px;
    height: 44px;
    gap: 8px;
  }

  .hamburger span {
    width: 34px;
    height: 2px;
  }

  .nav-toggle:checked + .hamburger span:nth-child(1) {
    transform: translateY(10px) rotate(45deg);
  }

  .nav-toggle:checked + .hamburger span:nth-child(3) {
    transform: translateY(-10px) rotate(-45deg);
  }

  .nav-menu {
    left: auto;
    right: 0;
    width: min(320px, calc(100vw - 48px));
    padding: 18px;
  }

  .services-showcase-hero {
    min-height: 650px;
    padding: 205px 32px 60px;
  }

  .services-showcase-copy h1 {
    font-size: clamp(46px, 13vw, 60px);
    line-height: 1.06;
  }

  .services-showcase-copy p {
    font-size: 16px;
  }

  .service-cards-section {
    grid-template-columns: 1fr;
    gap: 24px;
    padding: 40px 28px 56px;
  }

  .service-card {
    padding: 12px 12px 16px;
  }

  .service-card p {
    min-height: 0;
  }

  .service-card > a,
  .service-card-disabled {
    width: 100%;
  }

  .site-loading .services-page .services-showcase-copy h1 {
    min-height: clamp(146px, 42vw, 190px);
  }

  .site-loading .services-page .services-showcase-copy p {
    width: 100%;
    min-height: 70px;
  }

  .site-loading .services-page .service-card h2 {
    width: 66%;
    height: 26px;
  }

  .site-loading .services-page .service-card p {
    height: 78px;
    min-height: 78px;
  }

  .site-loading .services-page .service-card > a,
  .site-loading .services-page .service-card-disabled {
    width: 100%;
  }

  .cta h2 {
    font-size: 32px;
    line-height: 1.2;
  }

  .hvac-brand-carousel {
    --hvac-brand-distance: 2460px;
    min-height: 122px;
  }

  .hvac-brand-track {
    gap: 17px;
    padding-left: 24px;
    animation-duration: 30s;
  }

  .hvac-brand {
    width: 153px;
    min-height: 64px;
    padding: 10px 12px;
    font-size: 19px;
  }

  .hvac-brand.mitsubishi {
    font-size: 11px;
  }

  .hvac-hero {
    min-height: 650px;
    padding: 190px 32px 64px;
    background-position: 58% 50%;
  }

  .hvac-hero::after {
    right: -260px;
    bottom: -250px;
  }

  .hvac-hero-copy {
    margin-top: 36px;
  }

  .hvac-hero-copy h1 {
    font-size: clamp(46px, 13vw, 62px);
  }

  .hvac-hero-copy p:not(.eyebrow) {
    font-size: 17px;
  }

  .hvac-intro {
    padding: 58px 32px 62px;
  }

  .hvac-service-grid {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .hvac-service-card {
    min-height: 250px;
    padding: 28px 24px 26px;
    border-radius: 14px;
  }

  .hvac-service-number {
    margin-bottom: 34px;
    font-size: 38px;
  }

  .hvac-spaces {
    grid-template-columns: 1fr;
    gap: 30px;
    padding: 58px 32px;
  }

  .hvac-spaces-copy h2 {
    font-size: 38px;
  }

  .hvac-spaces-copy p:not(.eyebrow) {
    font-size: 16px;
  }

  .hvac-space-gallery {
    grid-template-columns: 1fr;
    grid-template-rows: none;
    gap: 18px;
    min-height: 0;
  }

  .hvac-space-large {
    grid-row: auto;
  }

  .hvac-space-card {
    min-height: 260px;
  }

  .services-footer {
    padding: 42px 24px;
  }

  .quote-hero {
    min-height: 500px;
    padding: 168px 28px 94px;
  }

  .quote-hero h1 {
    max-width: 100%;
    font-size: clamp(24px, 6.6vw, 34px);
    line-height: 1.24;
  }

  .quote-panel {
    max-width: calc(100% - 32px);
    grid-template-columns: 1fr;
    margin-top: -56px;
  }

  .quote-form,
  .quote-next {
    padding: 24px 22px 32px;
  }

  .quote-form h2,
  .quote-next h2 {
    font-size: 20px;
  }

  .quote-form label {
    font-size: 15px;
  }

  .quote-form input {
    height: 44px;
    font-size: 14px;
  }

  .quote-form textarea {
    min-height: 104px;
    font-size: 14px;
  }

  .quote-form button {
    min-height: 52px;
    font-size: 15px;
  }

  .quote-next ol {
    gap: 34px;
    margin-top: 28px;
  }

  .quote-next li {
    text-align: left;
  }

  .quote-next strong {
    margin-bottom: 8px;
    font-size: 18px;
  }

  .quote-next p {
    max-width: none;
    font-size: 15px;
    line-height: 1.38;
  }

  .quote-footer {
    padding-top: 42px;
  }

  .site-loading .quote-page .quote-hero {
    min-height: 500px;
  }

  .site-loading .quote-page .quote-hero h1 {
    min-height: 118px;
  }

  .site-loading .quote-page .quote-panel {
    border-radius: 8px 8px 0 0;
  }

  .site-loading .quote-page .quote-form h2,
  .site-loading .quote-page .quote-next h2 {
    width: min(240px, 78%);
    height: 26px;
  }

  .site-loading .quote-page .quote-form label {
    width: min(210px, 62%);
    height: 18px;
  }

  .site-loading .quote-page .quote-field {
    height: 44px;
  }

  .site-loading .quote-page .quote-form textarea {
    min-height: 104px;
  }

  .site-loading .quote-page .quote-form button {
    height: 52px;
  }

  .site-loading .quote-page .quote-next {
    border-left: 0;
    border-top: 1px solid rgb(12 62 69 / 0.07);
  }

  .site-loading .quote-page .quote-next ol {
    gap: 18px;
    margin-top: 28px;
  }

  .site-loading .quote-page .quote-next li {
    padding: 18px;
  }

  .site-loading .quote-page .quote-next strong {
    width: min(240px, 78%);
    height: 24px;
    margin-left: 0;
  }

  .site-loading .quote-page .quote-next p {
    height: 46px;
  }

  .site-loading .solar-page .solar-hero {
    min-height: 500px;
  }

  .site-loading .solar-page .back-link {
    width: 150px;
    height: 38px;
  }

  .site-loading .solar-page .solar-hero-copy h1 {
    min-height: 132px;
  }

  .site-loading .solar-page .solar-hero-copy p {
    width: 100%;
    min-height: 56px;
  }

  .site-loading .solar-page .solar-hero-copy .button {
    width: 100%;
    height: 48px;
  }

  .site-loading .solar-page .section-heading h2 {
    width: 100%;
    height: 44px;
  }

  .site-loading .solar-page .section-heading p {
    height: 66px;
  }

  .site-loading .solar-page .setup-card::before {
    bottom: 132px;
  }

  .site-loading .solar-page .setup-card h3 {
    width: min(170px, 70%);
    height: 32px;
  }

  .site-loading .solar-page .setup-card p {
    height: 44px;
  }

  .site-loading .solar-page .why-grid article {
    min-height: 116px;
    padding: 18px;
  }

  .site-loading .solar-page .solar-install-copy h2 {
    height: 86px;
  }

  .site-loading .solar-page .solar-install-copy p {
    height: 56px;
  }

  .help-strip {
    grid-template-columns: 1fr;
    justify-items: center;
    padding: 42px 32px;
    text-align: center;
  }

  .partner-hero {
    min-height: 640px;
    padding: 190px 32px 60px;
  }

  .partner-hero-content {
    padding-top: 0;
  }

  .partner-hero h1 {
    font-size: clamp(46px, 13vw, 60px);
    line-height: 1.04;
  }

  .partner-hero p {
    font-size: 16px;
  }

  .partner-benefits {
    padding: 46px 0 56px;
  }

  .partner-benefits-layout {
    padding-right: 32px;
    padding-left: 32px;
  }

  .partner-card-grid {
    grid-template-columns: 1fr;
  }

  .partner-intro h2 {
    font-size: 34px;
  }

  .partner-empowering {
    min-height: 260px;
    grid-template-columns: 44% 48%;
    align-content: center;
    gap: 8%;
    padding: 42px 24px 36px;
    background-position: center 68%;
  }

  .partner-empowering h2 {
    width: 100%;
    max-width: 100%;
    font-size: clamp(13px, 4vw, 22px);
    font-weight: 500;
    line-height: 1.1;
  }

  .partner-empowering p {
    max-width: 100%;
    justify-self: end;
    font-family: "Poppins", sans-serif;
    font-size: clamp(10px, 2.8vw, 15px);
    line-height: 1.28;
  }

  .partner-footer {
    min-height: 0;
    padding: 46px 32px 38px;
  }

  @media (max-width: 520px) {
    .partner-empowering {
      grid-template-columns: 41% 51%;
      gap: 8%;
      padding-right: 18px;
      padding-left: 18px;
    }

    .partner-empowering h2 {
      font-size: clamp(12px, 3.8vw, 18px);
    }

    .partner-empowering p {
      font-size: clamp(9px, 2.75vw, 13px);
    }
  }
  .contact-hero {
    min-height: 306px;
    padding: 104px 24px 38px;
    background-position: center top;
  }

  .contact-hero-content {
    max-width: 320px;
    padding-top: 0;
  }

  .contact-hero h1 {
    max-width: 310px;
    font-size: clamp(27px, 8.7vw, 38px);
    line-height: 1.08;
  }

  .contact-hero p {
    max-width: 280px;
    margin-top: 24px;
    font-size: 9px;
    line-height: 1.45;
  }

  .contact-info-grid {
    grid-template-columns: 1fr;
    gap: 18px;
    padding: 24px 20px 26px;
  }

  .contact-info-card,
  .contact-info-card-wide {
    width: 100%;
    min-height: 132px;
  }

  .contact-info-card {
    grid-template-columns: 46px minmax(0, 1fr);
    gap: 15px;
    align-items: start;
    padding: 18px 16px;
    border-radius: 14px;
  }

  .contact-card-icon {
    width: 46px;
    height: 46px;
  }

  .contact-card-icon::before {
    width: 22px;
    height: 22px;
  }

  .contact-info-card h2 {
    font-size: 20px;
  }

  .contact-highlight {
    margin: 16px 0 6px;
    font-size: 11px;
    line-height: 1.25;
  }

  .contact-info-card p {
    font-size: 12px;
    line-height: 1.38;
  }

  .contact-map-section {
    grid-template-columns: 1fr;
  }

  .contact-address-copy {
    grid-template-columns: 46px minmax(0, 1fr);
    gap: 16px;
    padding: 30px 22px 28px;
  }

  .contact-address-icon {
    width: 46px;
    height: 46px;
  }

  .contact-address-icon::before {
    width: 23px;
    height: 23px;
  }

  .contact-address-copy h2 {
    font-size: clamp(16px, 4.2vw, 20px);
    line-height: 1.35;
  }

  .contact-address-copy p {
    grid-column: 1 / -1;
    max-width: 560px;
    margin-top: 20px;
    font-size: clamp(14px, 3.7vw, 17px);
    line-height: 1.45;
  }

  .contact-map-shell,
  .contact-map {
    min-height: 184px;
  }

  .solar-hero {
    min-height: 470px;
    padding: 106px 22px 44px;
    background-position: 48% center;
  }

  .back-link {
    margin-top: 0;
    min-height: 40px;
    padding: 0 16px;
    font-size: 15px;
  }

  .solar-hero-copy {
    max-width: 320px;
    margin-top: 74px;
  }

  .solar-hero-copy h1 {
    font-size: clamp(34px, 10.2vw, 46px);
    line-height: 1.06;
  }

  .solar-hero-copy p {
    max-width: 300px;
    margin: 12px 0 18px;
    font-size: 14px;
    line-height: 1.4;
  }

  .solar-hero-copy .button {
    min-height: 40px;
    padding: 10px 14px;
    border-radius: 8px;
    font-size: 13px;
  }

  .energy-setup,
  .why-solar {
    padding: 38px 22px 0;
  }

  .section-heading h2 {
    font-size: 28px;
  }

  .section-heading p {
    margin-top: 8px;
    font-size: 14px;
    line-height: 1.42;
  }

  .setup-cards {
    grid-template-columns: 1fr;
    gap: 18px;
    margin-top: 14px;
  }

  .setup-card {
    min-height: 290px;
    border-radius: 18px;
  }

  .setup-card img {
    min-height: 170px;
  }

  .setup-card > div {
    min-height: 118px;
    padding: 20px;
  }

  .setup-card h3 {
    font-size: 24px;
  }

  .setup-card p {
    max-width: none;
    font-size: 14px;
    line-height: 1.32;
  }

  .why-grid {
    grid-template-columns: 1fr;
    gap: 24px;
    padding-bottom: 40px;
  }

  .why-grid article {
    max-width: 420px;
  }

  .why-grid h3 {
    font-size: 18px;
  }

  .why-grid p {
    margin-top: 8px;
    font-size: 14px;
  }

  .solar-install-types {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    gap: 26px;
    padding: 38px 22px 42px;
  }

  .solar-install-copy h2 {
    max-width: 320px;
    font-size: 30px;
  }

  .solar-install-copy p {
    max-width: 360px;
    margin-top: 10px;
    font-size: 14px;
    line-height: 1.42;
  }

  .install-roof,
  .install-ground,
  .install-deck,
  .install-floating {
    grid-column: 1;
    grid-row: auto;
  }

  .install-card {
    min-height: 210px;
  }

  .install-roof {
    min-height: 260px;
  }

  .install-card figcaption {
    font-size: 16px;
  }

  .help-copy p br {
    display: none;
  }

  .services-hero {
    min-height: 660px;
    padding: 190px 32px 64px;
  }

  .services-hero h1 {
    font-size: clamp(48px, 13.5vw, 62px);
  }

  .services-hero-content > p:not(.eyebrow) {
    font-size: 17px;
  }

  .services-intro {
    grid-template-columns: 1fr;
    gap: 24px;
    padding: 64px 32px;
  }

  .services-intro h2 {
    font-size: 38px;
  }

  .service-media {
    min-height: 320px;
  }

  .service-copy {
    min-height: 0;
    padding: 68px 32px;
  }

  .service-number {
    top: 30px;
    right: 22px;
    font-size: 82px;
  }

  .service-copy h2 {
    font-size: 39px;
  }

  .service-process {
    padding: 64px 32px;
  }

  .service-process h2,
  .services-cta h2 {
    font-size: 34px;
  }

  .process-grid {
    grid-template-columns: 1fr;
  }

  .hero {
    min-height: 760px;
    padding: 190px 32px 82px;
  }

  .hero h1 {
    max-width: 100%;
    font-size: clamp(50px, 14.5vw, 66px);
    line-height: 0.98;
  }

  .hero p {
    margin-top: 18px;
    font-size: 17px;
  }

  .about {
    padding: 64px 32px;
  }

  .about h2 {
    font-size: 38px;
    letter-spacing: -1.8px;
  }

  .about p {
    max-width: none;
    margin-bottom: 22px;
    font-size: 16px;
  }

  .photo-grid {
    height: clamp(220px, 56vw, 300px);
    margin-top: 30px;
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    grid-template-rows: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .photo {
    border-radius: 14px;
  }

  .photo-large {
    grid-row: 1 / span 2;
  }

  .about-page-hero {
    min-height: 500px;
    padding: 218px 28px 56px;
  }

  .about-page-hero h1 {
    font-size: clamp(38px, 10vw, 52px);
    line-height: 1;
  }

  .about-page-hero p {
    max-width: min(470px, 88vw);
    margin-top: 10px;
    font-size: clamp(13px, 3.4vw, 16px);
    line-height: 1.4;
  }

  .who-section,
  .legacy-section,
  .solutions-section,
  .mv-copy,
  .mission-vision .mv-copy:nth-child(3) {
    padding-right: 32px;
    padding-left: 32px;
  }

  .who-section {
    min-height: 0;
    padding: 54px 28px 46px;
  }

  .who-copy {
    max-width: min(84vw, 680px);
  }

  .who-copy h2 {
    font-size: clamp(36px, 8vw, 46px);
    line-height: 1.12;
  }

  .who-copy p {
    font-size: clamp(14px, 3.2vw, 17px);
    line-height: 1.46;
  }

  .about-office-placeholder {
    display: block;
    position: absolute;
    inset: 0 0 0 auto;
    width: min(82vw, 760px);
    height: 100%;
    margin: 0;
    background:
      linear-gradient(90deg, var(--paper) 0%, rgb(245 245 240 / 0.9) 38%, rgb(245 245 240 / 0.46) 62%, rgb(245 245 240 / 0.08) 82%, rgb(245 245 240 / 0) 100%),
      var(--about-who-image) center / cover no-repeat;
  }

  .legacy-section {
    display: block;
    padding: 72px 28px 76px;
  }

  .legacy-section h2 {
    max-width: 360px;
    margin: 0 auto 48px;
    font-size: clamp(30px, 7.4vw, 38px);
    text-align: center;
  }

  .legacy-items {
    max-width: min(100%, 430px);
    margin: 0 auto;
    gap: 42px;
  }

  .legacy-items,
  .solution-cards {
    grid-template-columns: 1fr;
  }

  .legacy-items article {
    align-items: flex-start;
    text-align: left;
  }

  .legacy-items span {
    font-size: 24px;
  }

  .legacy-items h3 {
    font-size: 22px;
  }

  .legacy-items p {
    font-size: 14px;
    line-height: 1.45;
  }

  .mission-vision {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .mission-vision .about-placeholder,
  .mv-copy {
    min-height: 330px;
  }

  .mv-copy,
  .mission-vision .mv-copy:nth-child(3) {
    padding: 28px 20px;
  }

  .site-loading .about-page .about-page-hero {
    min-height: 500px;
  }

  .site-loading .about-page .about-page-hero h1 {
    min-height: 104px;
  }

  .site-loading .about-page .about-page-hero p {
    width: min(430px, 88vw);
    min-height: 58px;
  }

  .site-loading .about-page .who-copy h2 {
    width: min(260px, 76%);
    height: 42px;
  }

  .site-loading .about-page .who-copy p {
    height: 188px;
  }

  .site-loading .about-page .about-office-placeholder {
    background:
      linear-gradient(90deg, var(--skeleton-page) 0%, rgb(241 244 239 / 0.94) 34%, rgb(241 244 239 / 0.54) 66%, rgb(241 244 239 / 0) 100%),
      var(--skeleton-surface) !important;
  }

  .site-loading .about-page .legacy-section h2 {
    width: min(320px, 100%);
    height: 82px;
    margin-right: auto;
    margin-left: auto;
  }

  .site-loading .about-page .legacy-items article {
    min-height: 160px;
    padding: 20px;
  }

  .site-loading .about-page .mission-vision {
    grid-template-columns: 1fr;
  }

  .site-loading .about-page .mission-vision .about-placeholder {
    min-height: 220px;
  }

  .site-loading .about-page .mv-copy p {
    height: 164px;
  }

  .mv-copy h2 {
    margin-bottom: 12px;
    font-size: clamp(22px, 6vw, 28px);
  }

  .mv-copy p {
    font-size: 12px;
    line-height: 1.48;
  }

  .timeline {
    grid-template-columns: 1fr;
  }

  .timeline article {
    max-width: none;
  }

  .partners {
    --partner-distance: 1920px;
    height: 180px;
  }

  .partner-track {
    gap: 20px;
  }

  .partner-track span {
    width: 300px;
    height: 104px;
  }

  .partner-track img {
    max-height: 104px;
  }

  .partner-track img.partner-logo-wide {
    width: 220px;
    max-height: 64px;
  }

  .footer {
    min-height: 0;
    padding: 32px 28px 42px;
  }

  .home-footer {
    min-height: 0;
  }

  .footer-solutions {
    max-width: 330px;
    margin-bottom: 34px;
    padding-bottom: 28px;
    text-align: left;
  }

  .footer .footer-solutions h2 {
    margin: 0 0 22px;
    font-size: 24px;
    line-height: 1.18;
  }

  .footer-solutions-grid {
    grid-template-columns: 1fr;
    gap: 22px;
  }

  .footer-solutions article {
    min-height: 0;
    align-items: flex-start;
    padding: 20px 18px;
    text-align: left;
  }

  .footer .footer-solutions h3 {
    margin-bottom: 6px;
    font-size: 16px;
  }

  .footer .footer-solutions p {
    margin-bottom: 8px;
    font-size: 13px;
    line-height: 1.35;
  }

  .footer .footer-solutions a,
  .footer .footer-solutions .service-card-disabled {
    font-size: 13px;
  }

  .footer-inner {
    display: block;
    max-width: 330px;
    margin: 0 auto;
  }

  .footer a,
  .footer p,
  .footer .footer-link-disabled {
    font-size: 16px;
    line-height: 1.32;
  }

  .footer h2,
  .footer h3 {
    margin-bottom: 10px;
    font-size: 18px;
    line-height: 1.15;
  }

  .footer .footer-link {
    width: 100%;
    max-width: 285px;
    margin-bottom: 10px;
  }

  .footer .footer-link-text {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
    max-width: none;
  }

  .footer .footer-arrow {
    margin-left: auto;
  }

  .footer-inner > div:nth-child(2) {
    padding-top: 0;
  }

  .footer-inner > div:nth-child(3) {
    margin-top: 34px;
  }

  .footer .contact-line {
    gap: 8px;
    margin-bottom: 9px;
  }

  .footer .contact-icon {
    flex-basis: 22px;
    width: 22px;
    height: 22px;
    margin-top: 0;
  }

  .footer .contact-icon.location-icon {
    margin-top: 0.08em;
  }

  .footer h3 {
    margin-top: 18px;
  }

  .socials {
    gap: 10px;
  }

  .socials a {
    width: 28px;
    height: 28px;
    border: 0;
    background: transparent;
    color: var(--white);
  }

  .social::before {
    width: 28px;
    height: 28px;
    filter: none;
  }

  .youtube {
    width: 34px;
    border-radius: 0;
  }

  .youtube::before {
    width: 34px;
  }
}

/* HVAC page refinements from the published Figma reference */
.hvac-page .hvac-hero {
  min-height: 676px;
  padding: 118px clamp(20px, 7.8vw, 100px) 100px;
  background: #192224;
}

.hvac-page .hvac-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgb(0 0 0 / 0.56), rgb(0 0 0 / 0.28) 55%, rgb(0 0 0 / 0.04)),
    var(--hvac-hero-slide-1) center / cover;
  animation: hvac-hero-slideshow 14s infinite;
}

.hvac-page .hvac-hero::after {
  z-index: 1;
}

.hvac-page .hvac-hero-copy {
  max-width: 550px;
  margin-top: 128px;
}

.hvac-page .hvac-hero-copy h1 {
  max-width: 550px;
  font-size: clamp(30px, 3.9vw, 50px);
  line-height: 1.08;
}

.hvac-page .hvac-hero-copy p:not(.eyebrow) {
  max-width: 420px;
  margin: 20px 0 26px;
  font-size: 15px;
  line-height: 1.45;
}

.hvac-page .hvac-intro {
  display: grid;
  grid-template-columns: 316px minmax(0, 700px);
  align-items: start;
  min-height: 242px;
  padding: 40px clamp(20px, 7.8vw, 100px);
  background: var(--paper);
}

.hvac-intro-heading {
  width: 223px;
}

.hvac-intro-heading h2 {
  color: var(--teal);
  font-size: 40px;
  line-height: 0.92;
}

.hvac-intro-heading p {
  margin-top: 12px;
  color: #252525;
  font-size: 16px;
  line-height: 1.35;
}

.hvac-page .hvac-service-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 309px));
  gap: 42px;
  margin-top: 0;
  padding-top: 0;
}

.hvac-page .hvac-service-card {
  min-height: 60px;
  padding: 0;
  border-radius: 0;
  color: var(--ink);
  background: transparent;
  box-shadow: none;
}

.hvac-page .hvac-service-card::after,
.hvac-page .hvac-service-number {
  display: none;
}

.hvac-page .hvac-service-card h3 {
  max-width: none;
  color: var(--teal);
  font-size: clamp(19px, 1.45vw, 22px);
  line-height: 1.18;
}

.hvac-page .hvac-service-card p {
  margin-top: 10px;
  color: #333;
  font-size: clamp(15px, 1.05vw, 17px);
  line-height: 1.45;
}

.hvac-page .hvac-spaces {
  position: relative;
  grid-template-columns: 59.1% 40.9%;
  gap: 0;
  align-items: stretch;
  min-height: clamp(360px, 26.85vw, 550px);
  overflow: hidden;
  padding: 0;
  color: var(--white);
  background:
    radial-gradient(circle at 43% 37%, rgb(24 113 124 / 0.72) 0 18%, rgb(15 81 89 / 0.54) 36%, rgb(7 65 72 / 0) 58%),
    linear-gradient(180deg, #247980 0%, #0c555d 44%, #073f46 100%);
}

.hvac-page .hvac-spaces::before {
  content: "";
  position: absolute;
  top: -101px;
  left: -277px;
  width: 1742px;
  height: 1051px;
  background: url("assets/figma-reference/hvac/hvac-gradient-wave-pattern.webp") center / contain no-repeat;
  opacity: 0.22;
  pointer-events: none;
}

.hvac-page .hvac-spaces-copy {
  position: relative;
  z-index: 1;
  align-self: center;
  padding: 0 clamp(60px, 5.9vw, 120px);
}

.hvac-page .hvac-spaces-copy h2 {
  max-width: 520px;
  color: var(--white);
  font-family: "Montserrat", sans-serif;
  font-size: clamp(40px, 2.35vw, 48px);
  font-weight: 600;
  line-height: 1.23;
  letter-spacing: 0;
}

.hvac-page .hvac-spaces-copy p:not(.eyebrow) {
  max-width: 560px;
  margin-top: clamp(26px, 2.15vw, 44px);
  color: var(--white);
  font-family: "Poppins", sans-serif;
  font-size: clamp(20px, 1.37vw, 28px);
  font-weight: 400;
  line-height: 1.14;
  letter-spacing: 0;
}

.hvac-systems-media {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  max-width: none;
  height: 100%;
  min-height: clamp(360px, 26.85vw, 550px);
  overflow: hidden;
}

.hvac-systems-image {
  display: block;
  width: 100%;
  max-width: none;
  height: 100%;
  min-height: inherit;
  object-fit: cover;
}

.hvac-page .hvac-brand-carousel {
  min-height: 250px;
  background: var(--paper);
}

@media (max-width: 1279px) {
  .hvac-page .hvac-intro {
    grid-template-columns: 253px minmax(0, 477px);
    min-height: 338px;
    padding-right: 50px;
    padding-left: 50px;
  }

  .hvac-page .hvac-service-grid {
    grid-template-columns: repeat(2, minmax(0, 198px));
    gap: 42px;
  }

  .hvac-page .hvac-spaces {
    grid-template-columns: minmax(0, 59.1%) minmax(0, 40.9%);
    padding-right: 0;
    padding-left: 0;
  }

  .hvac-page .hvac-spaces-copy {
    padding: 0 50px;
  }

  .hvac-systems-media {
    max-width: none;
  }
}

@media (max-width: 799px) {
  .site-loader {
    padding: 16px;
  }

  .site-loader-shell {
    gap: 24px;
  }

  .loader-hero {
    grid-template-columns: 1fr;
    align-content: center;
    min-height: 58vh;
    gap: 22px;
  }

  .loader-media {
    min-height: 220px;
  }

  .loader-grid {
    grid-template-columns: 1fr;
  }

  .loader-card {
    height: 86px;
  }

  .hvac-page .navbar {
    top: 20px;
    left: 20px;
    right: auto;
    width: calc(100vw - 40px);
    max-width: calc(100vw - 40px);
    height: 66px;
    box-sizing: border-box;
    padding: 11px 18px;
    gap: 0;
    justify-content: space-between;
    overflow: hidden;
    transform: none;
  }

  .hvac-page .brand,
  .hvac-page .brand img {
    width: 181px;
    height: 43px;
  }

  .hvac-page .hamburger {
    width: 50px;
    height: 44px;
    gap: 8px;
  }

  .hvac-page .hamburger span {
    width: 34px;
    height: 2px;
  }

  .hvac-page .nav-toggle:checked + .hamburger span:nth-child(1) {
    transform: translateY(10px) rotate(45deg);
  }

  .hvac-page .nav-toggle:checked + .hamburger span:nth-child(3) {
    transform: translateY(-10px) rotate(-45deg);
  }

  .hvac-page .hamburger {
    display: flex;
  }

  .hvac-page .nav-menu {
    display: none;
  }

  .hvac-page .nav-toggle:checked ~ .nav-menu {
    display: flex;
  }

  .hvac-page .hvac-hero {
    min-height: 676px;
    padding: 118px 20px 100px;
  }

  .hvac-page .hvac-hero-copy {
    max-width: 335px;
    margin-top: 276px;
  }

  .hvac-page .hvac-hero-copy h1 {
    font-size: 30px;
  }

  .hvac-page .hvac-hero-copy p:not(.eyebrow) {
    max-width: 335px;
    font-size: 15px;
  }

  .hvac-page .hvac-intro {
    grid-template-columns: 1fr;
    min-height: 420px;
    padding: 40px 20px;
  }

  .hvac-intro-heading {
    width: 335px;
  }

  .hvac-intro-heading h2 {
    font-size: 40px;
    line-height: 0.92;
  }

  .hvac-intro-heading p {
    font-size: 15px;
  }

  .hvac-page .hvac-service-grid {
    grid-template-columns: repeat(2, minmax(0, 126px));
    gap: 42px 43px;
    margin-top: 20px;
    padding-left: 20px;
  }

  .hvac-page .hvac-service-card {
    min-height: 112px;
  }

  .hvac-page .hvac-service-card h3 {
    font-size: 18px;
    line-height: 1.18;
  }

  .hvac-page .hvac-service-card p {
    margin-top: 8px;
    font-size: 14px;
    line-height: 1.42;
  }

  .hvac-page .hvac-spaces {
    grid-template-columns: minmax(0, 59.1%) minmax(0, 40.9%);
    gap: 0;
    min-height: 216px;
    padding: 0;
  }

  .hvac-page .hvac-spaces::before {
    top: -101px;
    left: -729px;
  }

  .hvac-page .hvac-spaces-copy {
    padding: 0 20px;
  }

  .hvac-page .hvac-spaces-copy h2 {
    max-width: 178px;
    font-size: 15px;
    line-height: 1.2;
  }

  .hvac-page .hvac-spaces-copy p:not(.eyebrow) {
    max-width: 178px;
    margin-top: 20px;
    font-size: 12px;
    line-height: 1.25;
  }

  .hvac-systems-media {
    width: 100%;
    height: 216px;
    min-height: 216px;
  }

  .hvac-page .hvac-brand-carousel {
    min-height: 120px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .button,
  .service-card > a {
    transition: none;
  }

  .button:hover,
  .button:focus-visible,
  .service-card > a:hover,
  .service-card > a:focus-visible,
  .button:active,
  .service-card > a:active {
    transform: none;
  }

  .button::before,
  .service-card > a::before {
    transition: none;
  }

  .service-card {
    transition: none;
    will-change: auto;
  }

  .service-card:hover,
  .service-card:focus-within {
    transform: none;
  }

  .loader-block::after,
  .site-loaded .page-shell,
  .site-loading .contact-line::before,
  .site-loading :is(.hero, .photo, .cta, .journey, .legacy-section, .about-page-hero, .services-hero, .services-showcase-hero, .service-cards-section, .solar-hero, .hvac-hero, .contact-hero, .quote-hero, .service-media, .service-card-media, .about-placeholder, .about-office-placeholder, .mission-image, .vision-image, .setup-card, .install-card, .solar-install-types, .hvac-service-card, .hvac-systems-media, .hvac-space-card, .contact-map-shell, .contact-map, .quote-panel, .help-illustration, .partner-hero, .partner-card-media, .partner-empowering, .partner-footer-banner, .footer, .partner-track span, .hvac-brand, .social, .brand, .nav-links a, .nav-disabled, .contact-pill, h1, h2, h3, p, .eyebrow, .year, .legacy-items span, .button, .footer-link, .footer-arrow, .socials a, .service-number, .process-grid span, .hvac-service-number, label, input, textarea, .quote-form button, .quote-alert, .contact-highlight, .service-card > a, .service-card-disabled, .service-features li, .footer-social-link, .quote-next strong, .quote-next li, .service-card, .timeline article, .legacy-items article, .process-grid article, .why-grid article, .contact-info-card, .quote-next, .partner-card, .partner-benefits-layout) {
    animation: none;
  }
}

@keyframes hvac-hero-slideshow {
  0%,
  42% {
    background:
      linear-gradient(90deg, rgb(0 0 0 / 0.56), rgb(0 0 0 / 0.28) 55%, rgb(0 0 0 / 0.04)),
      var(--hvac-hero-slide-1) center / cover;
  }

  50%,
  92% {
    background:
      linear-gradient(90deg, rgb(0 0 0 / 0.56), rgb(0 0 0 / 0.28) 55%, rgb(0 0 0 / 0.04)),
      var(--hvac-hero-slide-2) center / cover;
  }

  100% {
    background:
      linear-gradient(90deg, rgb(0 0 0 / 0.56), rgb(0 0 0 / 0.28) 55%, rgb(0 0 0 / 0.04)),
      var(--hvac-hero-slide-1) center / cover;
  }
}

/* Fixed site-wide type scale: typography no longer changes by viewport size. */
:root {
  --type-page-title: 40px;
  --type-section-title: 30px;
  --type-card-title: 21px;
  --type-body: 16px;
  --type-control: 15px;
  --type-supporting: 14px;
  --type-caption: 13px;
}

body {
  font-size: var(--type-body) !important;
}

body * {
  font-size: inherit !important;
}

body h1 {
  font-size: var(--type-page-title) !important;
  line-height: 1.08 !important;
  letter-spacing: -1.1px;
}

body h2 {
  font-size: var(--type-section-title) !important;
  line-height: 1.16 !important;
  letter-spacing: -0.6px;
}

body h3 {
  font-size: var(--type-card-title) !important;
  line-height: 1.24 !important;
  letter-spacing: -0.2px;
}

body p,
body li {
  font-size: var(--type-body) !important;
}

body :is(.button, .nav-links a, .nav-disabled, .contact-pill, .back-link, .service-card > a, .service-card-disabled, .quote-form button) {
  font-size: var(--type-control) !important;
}

body :is(.eyebrow, label, .contact-highlight, .service-features li) {
  font-size: var(--type-supporting) !important;
}

body :is(input, textarea, select) {
  font-size: var(--type-body) !important;
}

body :is(.service-card h2, .setup-card h3, .install-card figcaption, .why-grid h3, .hvac-service-card h3, .hvac-space-card h3, .partner-card h2, .process-grid h3, .timeline h3, .legacy-items h3, .footer-solutions h3) {
  font-size: var(--type-card-title) !important;
}

body :is(.service-number, .hvac-service-number) {
  font-size: var(--type-page-title) !important;
}

body .year {
  font-size: var(--type-section-title) !important;
}

body .footer h2 {
  font-size: 20px !important;
}

body .footer h3,
body .footer :is(.footer-link, .footer-link-disabled) {
  font-size: var(--type-body) !important;
}

body .footer-solutions h2 {
  font-size: var(--type-section-title) !important;
}

body .footer :is(p, .contact-line) {
  font-size: var(--type-supporting) !important;
}

body :is(.quote-alert, .quote-next strong, .partner-benefit-label, .service-card-kicker) {
  font-size: var(--type-caption) !important;
}

body .services-showcase-copy h1 span {
  display: block;
}

/* Keep every page hero's content anchored to the bottom-left. */
body :is(.hero, .about-page-hero, .services-showcase-hero, .solar-hero, .hvac-hero, .contact-hero, .quote-hero, .partner-hero) {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
}

body :is(.contact-hero-content, .partner-hero-content) {
  padding-top: 0;
}

body :is(.solar-hero-copy, .hvac-hero-copy) {
  margin-top: 28px;
}

@media (max-width: 799px) {
  body .services-showcase-hero {
    min-height: 600px;
    padding: 170px 24px 40px;
  }

  body .services-showcase-copy {
    max-width: 100%;
  }

  body .services-showcase-copy h1 {
    line-height: 1.08 !important;
  }

  body .services-showcase-copy p {
    max-width: 34rem;
    margin-top: 16px;
    line-height: 1.5;
  }

  body :is(.hero-content, .about-page-hero-content, .services-showcase-copy, .solar-hero-copy, .hvac-hero-copy, .contact-hero-content, .quote-hero-copy, .partner-hero-content) h1 {
    max-width: 100%;
    margin: 0;
  }

  body :is(.hero-content, .about-page-hero-content, .services-showcase-copy, .solar-hero-copy, .hvac-hero-copy, .contact-hero-content, .partner-hero-content) h1 + p {
    margin-top: 12px;
  }

  body :is(.about-copy, .who-copy, .section-heading, .solar-install-copy, .hvac-intro-heading, .hvac-spaces-copy, .partner-intro, .help-copy) h2 {
    margin-bottom: 12px;
  }

  body :is(.service-card, .setup-card, .why-grid article, .hvac-service-card, .hvac-space-card, .partner-card, .timeline article, .legacy-items article) h3 {
    margin-bottom: 8px;
  }

  body .mission-vision {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    padding: 28px 20px 44px;
  }

  body .mission-vision .about-placeholder {
    min-height: 0;
    aspect-ratio: 16 / 10;
    border-radius: 20px 20px 0 0;
  }

  body .mission-vision .mission-image {
    order: 1;
  }

  body .mission-vision .mv-copy:nth-child(2) {
    order: 2;
  }

  body .mission-vision .vision-image {
    order: 3;
    background-position: center 30%;
  }

  body .mission-vision .mv-copy:nth-child(3) {
    order: 4;
  }

  body .mission-vision .mv-copy,
  body .mission-vision .mv-copy:nth-child(3) {
    min-height: 0;
    margin-bottom: 24px;
    padding: 26px 24px 30px;
    border-radius: 0 0 20px 20px;
    background: #fff;
    box-shadow: 0 12px 30px rgb(12 62 69 / 0.08);
  }

  body .mission-vision .mv-copy h2 {
    margin-bottom: 12px;
  }

  body .mission-vision .mv-copy p {
    line-height: 1.6;
  }

  body .photo-grid {
    min-width: 0;
    height: auto;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: clamp(190px, 60vw, 260px) clamp(120px, 38vw, 170px);
    gap: 10px;
  }

  body .photo-grid .photo {
    border-radius: 16px;
    box-shadow: 0 12px 34px rgb(0 0 0 / 0.16);
  }

  body .photo-grid .photo-large {
    grid-column: 1 / -1;
    grid-row: 1;
    background-position: center 58%;
  }

  body .photo-grid .photo-office,
  body .photo-grid .photo-install {
    grid-row: 2;
  }
}