/* Shared background slideshow: headings and links stay stationary. */
.hero, .about-hero { overflow: hidden; }
.hero-slides { position: absolute; inset: 0; z-index: -2; pointer-events: none; }
.hero-slides .hero-slide { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; opacity: 0; transition: opacity 2.8s ease-in-out; }
.hero-slides .hero-slide.is-active { opacity: 1; }
.slideshow-toggle { position: absolute; right: 7%; bottom: 100px; z-index: 2; border: 1px solid #ffffff70; border-radius: 24px; padding: 10px 16px; min-height: 44px; color: #fff; background: #102632b8; font: 500 11px/1.4 'DM Sans', Arial, sans-serif; letter-spacing: .4px; cursor: pointer; }
.slideshow-toggle:hover { background: #102632; }
.slideshow-toggle[hidden] { display: none; }
@media (max-width: 800px) {
  /* On narrow screens, give the photograph its own uncropped landscape area.
     A shared footer geometry keeps both circular controls on the same baseline. */
  .home-page .hero,
  .about-page .about-hero {
    display: flex;
    flex-direction: column;
    height: auto;
    min-height: 0;
    background: #102632;
  }
  .hero .hero-content,
  .about-page .about-hero-inner {
    order: 0;
    padding: 26px 7%;
    width: 100%;
  }
  .hero .hero-content h1 { margin-bottom: 18px; }
  .about-hero .about-hero-inner h1 { margin: 0 0 18px; }
  .hero .hero-slides,
  .about-hero .hero-slides {
    order: 1;
    position: relative;
    inset: auto;
    z-index: 0;
    width: 100%;
    aspect-ratio: 16 / 9;
    flex: none;
  }
  .hero .hero-bottom,
  .about-hero .about-scroll {
    order: 2;
    position: relative;
    inset: auto;
    margin: 0 7%;
    padding: 20px 0;
    height: 79px;
    flex: none;
    align-items: center;
  }
  .hero .hero-bottom > span { padding-right: 96px; letter-spacing: .3px; }
  .hero .hero-bottom > a,
  .about-hero .about-scroll > a { flex: 0 0 38px; }
  .hero .hero-shade,
  .about-hero:after { display: none; }

  /* Home keeps the full landscape slide, with a compact desktop-style message
     placed over its left edge instead of using a separate text block. */
  .home-page .hero:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 68%;
    height: calc(100vw * .5625);
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(90deg,rgba(5,20,28,.88),rgba(5,20,28,.67) 68%,rgba(5,20,28,0));
  }
  .home-page .hero .hero-content {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 3;
    width: 100%;
    height: calc(100vw * .5625);
    padding: clamp(18px,5vw,36px) 7%;
    pointer-events: none;
  }
  .home-page .hero .hero-content .button { pointer-events: auto; }
  .home-page .hero .eyebrow { margin-bottom: 8px; font-size: 8px; letter-spacing: 1.7px; }
  .home-page .hero h1 { font-size: clamp(29px,8.5vw,50px); line-height: 1.03; letter-spacing: -1.8px; margin-bottom: 13px; }
  .home-page .hero .button { gap: 28px; padding: 11px 15px; font-size: 9px; letter-spacing: 1.1px; }

  /* Use the same compact overlay arrangement for the inner-page heroes. */
  .about-page .about-hero:after {
    display: block;
    top: 0;
    left: 0;
    width: 68%;
    height: calc(100vw * .5625);
    z-index: 1;
    background: linear-gradient(90deg,rgba(5,20,28,.88),rgba(5,20,28,.67) 68%,rgba(5,20,28,0));
  }
  .about-page .about-hero-inner {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 3;
    width: 100%;
    height: calc(100vw * .5625);
    padding: clamp(24px,6vw,44px) 7%;
    pointer-events: none;
  }
  .about-page .about-hero-inner h1 {
    margin: 0 0 12px;
    font-size: clamp(30px,8.5vw,52px);
    line-height: 1.03;
    letter-spacing: -1.8px;
  }
  .about-page .about-hero-inner .hero-rule { width: 45px; margin-bottom: 10px; }
  .about-page .about-hero-inner > p { font-size: 9px; letter-spacing: 1.3px; }
  /* Keep aircraft noses and other right-side subjects visible. Any required
     horizontal crop is taken from the left edge of the photograph. */
  .hero-slides .hero-slide { object-position: right center; }
  .hero .hero-shade {
    background:
      linear-gradient(90deg,rgba(5,18,26,.97) 0%,rgba(6,21,29,.91) 58%,rgba(7,23,31,.65) 78%,rgba(7,23,31,.30) 100%),
      linear-gradient(0deg,rgba(5,17,24,.90),transparent 66%);
  }
  .about-hero:after {
    background: linear-gradient(90deg,rgba(6,25,34,.96) 0%,rgba(8,28,37,.88) 60%,rgba(9,29,38,.58) 82%,rgba(9,29,38,.28) 100%);
  }
  .slideshow-toggle { right: calc(7% + 50px); bottom: 20px; width: 38px; min-height: 38px; height: 38px; padding: 0; border-radius: 50%; font-size: 0; position: absolute; }
  .slideshow-toggle:before,
  .slideshow-toggle:after { content: ""; position: absolute; top: 50%; width: 2px; height: 12px; background: currentColor; transform: translate(-50%,-50%); }
  .slideshow-toggle[data-state="playing"]:before { left: calc(50% - 3px); }
  .slideshow-toggle[data-state="playing"]:after { left: calc(50% + 3px); }
  .slideshow-toggle[data-state="paused"]:before { left: calc(50% + 1px); width: 0; height: 0; background: transparent; border-top: 6px solid transparent; border-bottom: 6px solid transparent; border-left: 9px solid currentColor; transform: translate(-50%,-50%); }
  .slideshow-toggle[data-state="paused"]:after { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-slides .hero-slide { transition: none; }
}