/* Final hero background system loaded after the main stylesheet. */
.hero {
  display: flex !important;
  align-items: flex-start !important;
  min-height: 470px !important;
  max-height: none !important;
  height: auto !important;
  overflow: hidden !important;
  background:
    radial-gradient(circle at 20% 20%, rgba(0, 168, 255, 0.18), transparent 30%),
    linear-gradient(135deg, #02070d, #07111f) !important;
}

.hero.hero-compact,
.hero.hero-support {
  min-height: 410px !important;
  max-height: none !important;
  height: auto !important;
}

.hero.contact-hero {
  min-height: 260px !important;
  max-height: 260px !important;
  height: 260px !important;
  margin-bottom: 18px !important;
}

.hero-bg,
.hero-bg-home,
.hero-bg-services,
.hero-bg-service-detail,
.hero-bg-support,
.hero-bg-contact,
.hero-bg-location,
.hero-bg-projects {
  background-image:
    var(--hero-image),
    radial-gradient(circle at 20% 20%, rgba(0, 168, 255, 0.18), transparent 30%),
    linear-gradient(135deg, #02070d, #07111f) !important;
  background-size: cover !important;
  background-position: var(--hero-position, center center) !important;
  background-repeat: no-repeat !important;
  filter: saturate(1.02) contrast(1.04) brightness(0.86) !important;
  transform: none !important;
  animation: none !important;
}

.hero-bg-home { --hero-position: center center; }
.hero-bg-services { --hero-position: center 42%; }
.hero-bg-service-detail,
.hero-bg-support { --hero-position: center 35%; }
.hero-bg-contact { --hero-position: center 45%; }
.hero-bg-location { --hero-position: center 38%; }
.hero-bg-projects { --hero-position: center center; }

.hero-veil {
  background:
    linear-gradient(90deg, rgba(2, 8, 18, 0.92), rgba(2, 8, 18, 0.65) 55%, rgba(2, 8, 18, 0.35)),
    linear-gradient(180deg, rgba(2, 8, 18, 0.12), rgba(2, 8, 18, 0.82) 100%) !important;
}

.hero-copy {
  width: min(var(--max), calc(100% - 48px)) !important;
  max-width: 720px !important;
  margin-right: auto !important;
  margin-left: max(24px, calc((100vw - var(--max)) / 2 + 24px)) !important;
  padding-top: clamp(104px, 11vh, 126px) !important;
  padding-bottom: 48px !important;
  text-align: left !important;
}

.hero-compact .hero-copy,
.hero-support .hero-copy {
  padding-top: clamp(104px, 11vh, 120px) !important;
  padding-bottom: 34px !important;
}

.contact-hero .hero-copy {
  padding-top: 96px !important;
  padding-bottom: 20px !important;
}

.hero h1 {
  width: 100% !important;
  max-width: 720px !important;
  font-size: clamp(34px, 4.1vw, 52px) !important;
  line-height: 1.08 !important;
  overflow-wrap: break-word !important;
  text-wrap: balance;
}

.hero-compact h1,
.hero-support h1 {
  font-size: clamp(30px, 3.6vw, 46px) !important;
}

.contact-hero h1 {
  font-size: clamp(28px, 3vw, 38px) !important;
}

.hero p:not(.eyebrow) {
  max-width: 680px !important;
  color: #c7d2e2 !important;
  font-size: clamp(15.5px, 1.25vw, 17px) !important;
  line-height: 1.62 !important;
}

@media (min-width: 1181px) {
  .hero-copy {
    padding-top: clamp(112px, 11vh, 132px) !important;
  }

  .hero-compact .hero-copy,
  .hero-support .hero-copy {
    padding-top: clamp(112px, 12vh, 128px) !important;
  }
}

@media (min-width: 1181px) and (max-height: 520px) {
  .hero {
    min-height: 460px !important;
  }

  .hero-copy {
    padding-top: 96px !important;
    padding-bottom: 36px !important;
  }

  .hero-compact .hero-copy,
  .hero-support .hero-copy {
    padding-top: 116px !important;
    padding-bottom: 24px !important;
  }
}

.hero-status,
.scroll-indicator {
  display: none !important;
}

.hero + .stat-strip {
  margin-top: 28px !important;
}

.hero + .section,
.hero + .stat-strip + .section {
  padding-top: 46px !important;
}

@media (max-width: 760px) {
  .hero,
  .hero.hero-compact,
  .hero.hero-support,
  .hero.contact-hero {
    min-height: 260px !important;
    max-height: 260px !important;
    height: 260px !important;
  }

  .hero-bg,
  .hero-bg-home,
  .hero-bg-services,
  .hero-bg-service-detail,
  .hero-bg-support,
  .hero-bg-contact,
  .hero-bg-location,
  .hero-bg-projects {
    background-position: center center !important;
  }

  .hero-copy,
  .hero-compact .hero-copy,
  .hero-support .hero-copy,
  .contact-hero .hero-copy {
    width: min(100% - 34px, var(--max)) !important;
    margin-left: 17px !important;
    padding-top: 82px !important;
    padding-bottom: 20px !important;
  }

  .hero h1,
  .hero-compact h1,
  .hero-support h1,
  .contact-hero h1 {
    font-size: clamp(25px, 7.4vw, 31px) !important;
    line-height: 1.1 !important;
  }

  .hero p:not(.eyebrow) {
    display: block !important;
    max-width: 100% !important;
    font-size: 14px !important;
    line-height: 1.45 !important;
  }
}