/* Abertura compartilhada das páginas de serviços e aplicações. */
.engineering-page .eng-hero,
.application-page .application-hero {
  position: relative;
  min-height: 590px;
  display: flex;
  align-items: center;
  overflow: hidden;
  isolation: isolate;
  color: #fff;
  background: var(--purple-950);
}

.engineering-page .eng-hero-photo,
.application-page .application-hero > img {
  position: absolute;
  z-index: -3;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: var(--eng-hero-position, center 45%);
}

.engineering-page .eng-hero-picture {
  position: absolute;
  z-index: -3;
  inset: 0;
  width: 100%;
  height: 100%;
}
.engineering-page .eng-hero-picture .eng-hero-photo { position: static; width: 100%; height: 100%; }

.engineering-page .eng-hero::before,
.application-page .application-hero::before {
  position: absolute;
  z-index: -2;
  inset: 0;
  background: linear-gradient(180deg, rgba(29, 13, 47, .6), rgba(22, 5, 31, .74));
  content: "";
}
.engineering-page .eng-hero::after { display: none; }

.engineering-page .eng-hero-inner,
.application-page .application-hero > .container {
  position: relative;
  min-height: 590px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.engineering-page .eng-hero-copy,
.application-page .application-hero-copy {
  width: min(100%, 960px);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 72px 0 80px;
  text-align: center;
}
.engineering-page .eng-hero-copy::after,
.application-page .application-hero-copy::after {
  width: 170px;
  height: 3px;
  display: block;
  margin-top: 30px;
  background: var(--lime);
  content: "";
}

.engineering-page .eng-hero .eng-overline-accent,
.application-page .application-hero .application-kicker {
  display: block;
  padding: 0;
  color: #f1eaf3;
  font-family: var(--font-body);
  font-size: clamp(15px, 1.55vw, 21px);
  font-weight: 700;
  letter-spacing: .3em;
  line-height: 1.3;
  text-transform: uppercase;
}
.engineering-page .eng-hero .eng-overline-accent::before,
.application-page .application-hero .application-kicker::before { display: none; }

.engineering-page .eng-hero h1,
.application-page .application-hero h1 {
  max-width: 960px;
  margin: 25px 0 27px;
  color: #fff;
  font-family: var(--font-display);
  font-size: clamp(62px, 7.2vw, 100px);
  font-weight: 700;
  letter-spacing: -.025em;
  line-height: .84;
  text-shadow: 0 8px 35px rgba(15, 2, 23, .3);
  text-transform: uppercase;
  text-wrap: balance;
}
.engineering-page .eng-hero h1.eng-hero-title-long { font-size: clamp(56px, 6.2vw, 86px); }
.engineering-page .eng-hero h1 em,
.application-page .application-hero h1 em { display: block; color: var(--lime); }

.engineering-page .eng-hero-copy > p,
.application-page .application-hero-copy > p {
  max-width: 820px;
  margin: 0;
  color: #f1eaf3;
  font-family: var(--font-body);
  font-size: clamp(14px, 1.35vw, 18px);
  font-weight: 700;
  letter-spacing: .18em;
  line-height: 1.65;
  text-transform: uppercase;
  text-wrap: balance;
}

@media (max-width: 650px) {
  .engineering-page .eng-hero,
  .application-page .application-hero,
  .engineering-page .eng-hero-inner,
  .application-page .application-hero > .container { min-height: 520px; }

  .engineering-page .eng-hero-photo,
  .application-page .application-hero > img {
    object-position: var(--eng-hero-position-mobile, center 45%);
  }
  .engineering-page .eng-hero::before,
  .application-page .application-hero::before {
    background: linear-gradient(180deg, rgba(29, 13, 47, .63), rgba(22, 5, 31, .75));
  }

  .engineering-page .eng-hero-inner { align-items: center; }
  .engineering-page .eng-hero-copy,
  .application-page .application-hero-copy {
    width: 100%;
    padding: 66px 0 78px;
  }
  .engineering-page .eng-hero-copy::after,
  .application-page .application-hero-copy::after { width: 108px; margin-top: 27px; }

  .engineering-page .eng-hero .eng-overline-accent,
  .application-page .application-hero .application-kicker {
    font-size: 12px;
    letter-spacing: .2em;
  }
  .engineering-page .eng-hero h1,
  .application-page .application-hero h1 {
    max-width: 100%;
    margin: 22px 0 25px;
    font-size: clamp(43px, 11.5vw, 58px);
    line-height: .9;
  }
  .engineering-page .eng-hero h1.eng-hero-title-long { font-size: clamp(35px, 9.2vw, 47px); }
  .engineering-page .eng-hero-copy > p,
  .application-page .application-hero-copy > p {
    max-width: 360px;
    font-size: 12px;
    letter-spacing: .12em;
    line-height: 1.6;
  }
}