/* ==========================================================================
   Hero — "Elevating Global Aviation"
   The background is the Figma 1440×800 canvas reproduced layer by layer
   (photo, haze shape, wave shape) with the exact Figma transforms.
   ========================================================================== */
.hero {
  position: relative;
  height: 680px;
  overflow: hidden;
  background: var(--white);
  container-type: inline-size;
}
@media (min-width: 768px) {
  .hero { height: 800px; }
}

/* ---- Background stage ---- */
.hero__stage {
  position: absolute;
  top: 0;
  right: -520px;
  width: 1440px;
  height: 800px;
  /* Above 1440px, scale up to always cover the full width: section width ÷ 1440 (min 1). */
  scale: max(1, tan(atan2(100cqw, 1440px)));
}
@media (min-width: 768px) {
  .hero__stage { right: -300px; }
}
@media (min-width: 1280px) {
  .hero__stage {
    right: auto;
    left: 50%;
    translate: -50% 0;
  }
}
.hero__stage-inner {
  width: 1440px;
  height: 800px;
  transform-origin: top center;
  will-change: transform;
}
.hero__flip {
  position: relative;
  width: 1440px;
  height: 800px;
  overflow: clip;
  scale: 1 -1;
}
.hero__photo {
  position: absolute;
  top: -344px;
  left: -562px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2174px;
  height: 1602px;
}
.hero__photo-img {
  position: relative;
  width: 2174px;
  height: 1602px;
  scale: 1 -1;
}
.hero__photo-img img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
}
.hero__haze {
  position: absolute;
  top: -603.44px;
  left: -907px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2170.987px;
  height: 1483.026px;
}
.hero__haze-shape {
  flex: none;
  rotate: -147.59deg;
  scale: 1 -0.93;
  transform: skewX(-21.37deg);
}
.hero__haze-box {
  position: relative;
  width: 1299.095px;
  height: 1331.536px;
  opacity: 0.9;
}
.hero__haze-img {
  position: absolute;
  inset: -7.51% -7.7%;
}
.hero__wave {
  position: absolute;
  top: -603px;
  left: -303.82px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3034.789px;
  height: 1228.929px;
}
.hero__wave-shape {
  flex: none;
  rotate: 164.44deg;
  scale: 1 -0.97;
  transform: skewX(13.46deg);
}
.hero__wave-box {
  position: relative;
  width: 2888.904px;
  height: 519.074px;
  opacity: 0.9;
}
.hero__wave-img {
  position: absolute;
  inset: -19.27% -3.46%;
}
.hero__haze-img img,
.hero__wave-img img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
}

/* Mobile wash so the copy stays legible over the photo */
.hero__wash {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.4), transparent);
}
@media (min-width: 768px) {
  .hero__wash { display: none; }
}

/* ---- Copy ---- */
.hero__content {
  position: relative;
  height: 100%;
}
@media (min-width: 1280px) {
  .hero__content { padding-inline: 60px; }
}
.hero__former {
  position: absolute;
  top: 100px;
  font-size: 12px;
  line-height: 16px;
  color: var(--light);
  text-transform: uppercase;
}
.hero__former strong {
  font-weight: var(--fw-extrabold);
}
.hero__copy {
  position: absolute;
  top: 180px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-width: 511px;
  padding-right: 20px;
}
.hero__title {
  font-weight: var(--fw-news);
  font-size: 44px;
  line-height: 1.1;
  letter-spacing: -0.04em;
  color: var(--navy);
}
.hero__line {
  display: block;
  overflow: hidden;
  padding-bottom: 4px;
}
.hero__line > span {
  display: block;
}
.hero__text {
  max-width: 400px;
  font-size: 16px;
  line-height: 20px;
  color: var(--grey);
}
.hero__actions {
  position: absolute;
  top: 440px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.hero__fleet-btn {
  width: 184px;
}
.hero__scroll {
  position: absolute;
  bottom: 16px;
  left: 50%;
  display: none;
  translate: -50% 0;
  animation: hero-scroll 1.8s ease-in-out infinite;
}
@keyframes hero-scroll {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(6px); }
}

@media (min-width: 640px) {
  .hero__title { font-size: 56px; }
}
@media (min-width: 768px) {
  .hero__former { top: 132px; }
  .hero__copy { top: 261px; }
  .hero__title {
    font-size: 72px;
    line-height: 80px;
  }
  .hero__actions { top: 582px; }
  .hero__scroll { display: block; }
}
@media (min-width: 1280px) {
  .hero__former { left: 68px; }
}

/* Load-in states (animated by hero.js) */
.js .hero [data-hero-in] {
  opacity: 0;
}
.js .hero__line > span {
  transform: translateY(110%);
}