/* Full-width photographic heroes. Movement is restricted to the background. */
.hero {
  --hero-focus: 65% 52%;
  --drift-duration: 26s;
  --drift-origin: 63% 50%;
}
.hero-scene,
.hero-motion {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.hero-scene {
  z-index: -2;
  overflow: hidden;
  pointer-events: none;
}
.hero-motion {
  transform: scale(1.04);
  transform-origin: var(--drift-origin);
  animation: hero-camera-drift var(--drift-duration) ease-in-out infinite alternate;
  animation-play-state: paused;
}
.hero[data-hero-ready]:not(.is-motion-paused) .hero-motion {
  animation-play-state: running;
}
.hero .hero-image {
  z-index: auto;
  object-position: var(--hero-focus);
  animation: none;
}
.hero .hero-shade {
  background:
    linear-gradient(90deg, rgba(8, 20, 27, .9) 0%, rgba(8, 20, 27, .68) 34%, rgba(8, 20, 27, .2) 70%, rgba(8, 20, 27, .08)),
    linear-gradient(0deg, rgba(8, 20, 27, .75), transparent 37%);
}
.hero-interior {
  min-height: clamp(620px, calc(100svh - 94px), 870px);
  display: flex;
  align-items: center;
}
.hero-interior .hero-content {
  padding-top: 84px;
  padding-bottom: 142px;
}
.hero-interior h1 {
  font-size: clamp(3.25rem, 6.3vw, 6.5rem);
  max-width: 1120px;
  line-height: 1.02;
  letter-spacing: -.045em;
  text-wrap: balance;
}
.hero-interior .hero-lead {
  max-width: 525px;
  margin-top: 32px;
}
.hero-interior .hero-lead > p {
  color: #eef0ed;
  font-size: clamp(1.125rem, 1.5vw, 1.375rem);
  line-height: 1.55;
}
.hero-services {
  --hero-focus: 60% 54%;
  --drift-origin: 58% 45%;
}
.hero-technology {
  --hero-focus: 58% 58%;
  --drift-duration: 30s;
  --drift-origin: 70% 55%;
}
.hero-company {
  --hero-focus: 65% 43%;
  --drift-duration: 28s;
  --drift-origin: 76% 45%;
}
.hero-company .hero-shade {
  background:
    linear-gradient(90deg, rgba(8, 20, 27, .94), rgba(8, 20, 27, .72) 37%, rgba(8, 20, 27, .18) 78%),
    linear-gradient(0deg, rgba(8, 20, 27, .72), transparent 38%);
}
.hero-tools {
  display: flex;
  align-items: center;
  gap: 32px;
}
.hero-tools > a {
  display: inline-flex;
  align-items: center;
  gap: 20px;
  min-height: 44px;
  text-transform: uppercase;
}
.hero-tools > a:hover {
  color: #fff;
}
.hero-tools svg {
  width: 18px;
  height: 18px;
}
.motion-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 44px;
  padding: 10px 14px;
  border: 1px solid rgba(228, 234, 235, .43);
  background: rgba(8, 20, 27, .4);
  color: #f0f4f3;
  font-family: Arial, Helvetica, sans-serif;
  font-size: .8125rem;
  line-height: 1.4;
  letter-spacing: 0;
  transition: background .2s, border-color .2s;
}
.motion-toggle[hidden] {
  display: none;
}
.motion-toggle:hover {
  background: rgba(8, 20, 27, .76);
  border-color: #f0f4f3;
}
.motion-toggle .play-icon,
.motion-toggle.is-user-paused .pause-icon {
  display: none;
}
.motion-toggle.is-user-paused .play-icon {
  display: block;
}
.hero-bottom {
  gap: 24px;
}
.hero-tools > a,
.hero-bottom > span {
  font-size: .75rem;
}
@keyframes hero-camera-drift {
  from { transform: scale(1.04) translate3d(.35%, .15%, 0); }
  to { transform: scale(1.125) translate3d(-.65%, -.35%, 0); }
}
@media (max-width: 1000px) {
  .hero-bottom > span { display: none; }
  .hero-bottom { justify-content: flex-end; }
  .hero-interior h1 { font-size: clamp(3.1rem, 7.6vw, 5.1rem); }
}
@media (max-width: 650px) {
  .hero { --hero-focus: 64% 50%; }
  .hero-interior {
    min-height: clamp(590px, calc(100svh - 78px), 800px);
  }
  .hero-interior .hero-content {
    padding-top: 76px;
    padding-bottom: 140px;
  }
  .hero-interior h1 {
    font-size: clamp(2.55rem, 8.8vw, 3.7rem);
    line-height: 1.07;
    max-width: 540px;
    text-wrap: initial;
  }
  .hero-interior .hero-lead { margin-top: 25px; max-width: 370px; }
  .hero-interior .hero-lead > p { font-size: 1.125rem; }
  .hero .hero-shade {
    background:
      linear-gradient(90deg, rgba(8, 20, 27, .84), rgba(8, 20, 27, .5)),
      linear-gradient(0deg, rgba(8, 20, 27, .75), transparent 55%);
  }
  .hero-company { --hero-focus: 65% 45%; }
  .hero .hero-bottom {
    bottom: 24px;
    justify-content: flex-start;
  }
  .hero-tools {
    width: 100%;
    justify-content: space-between;
    gap: 14px;
  }
  .hero-tools > a {
    max-width: 170px;
    gap: 10px;
    font-size: .75rem;
    letter-spacing: .05em;
    line-height: 1.45;
  }
  .motion-toggle { flex: none; padding: 10px; font-size: .75rem; }
  .hero-tools svg { width: 16px; height: 16px; }
}
@media (max-width: 370px) {
  .hero-interior h1 { font-size: 2.45rem; }
  .hero-tools { gap: 10px; }
  .hero-tools > a { max-width: 145px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-motion { animation: none !important; transform: none; }
  .motion-toggle { display: none; }
}