.services-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: #07101b;
  color: #fff;
}
.services-hero-background {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 55%;
}
.services-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg, rgba(4, 10, 18, .94) 0%, rgba(4, 10, 18, .80) 32%, rgba(4, 10, 18, .25) 65%, rgba(4, 10, 18, .08)), linear-gradient(0deg, rgba(4, 10, 18, .6), transparent 40%);
}
.services-hero-inner {
  min-height: clamp(580px, 48vw, 740px);
  display: flex;
  align-items: center;
  padding-block: 90px;
}
.services-hero-copy { max-width: 560px; }
.services-hero-copy .eyebrow { color: #c6d5e8; }
.services-hero h1 {
  margin: 22px 0 30px;
  font-family: "Barlow Condensed", "Arial Narrow", sans-serif;
  font-size: clamp(5rem, 8vw, 8.5rem);
  font-weight: 600;
  line-height: .95;
  letter-spacing: -.025em;
  text-transform: uppercase;
}
.services-hero-copy > p:not(.eyebrow) {
  max-width: 48ch;
  margin: 0;
  color: #e0e5eb;
  font-size: 1.05rem;
  line-height: 1.8;
}
@media (max-width: 680px) {
  .services-hero-inner { min-height: 690px; align-items: flex-end; padding-block: 64px 48px; }
  .services-hero-background { object-position: 65% center; }
  .services-hero::before { background: linear-gradient(0deg, rgba(4, 10, 18, .98), rgba(4, 10, 18, .83) 45%, rgba(4, 10, 18, .18) 100%); }
  .services-hero h1 { font-size: clamp(4.4rem, 19vw, 6rem); margin-block: 18px 24px; }
  .services-hero-copy > p:not(.eyebrow) { font-size: .98rem; line-height: 1.75; }
}