/* Official Skyway logo system. The supplied artwork is used unchanged. */
.logo{
  display:flex!important;
  align-items:center!important;
  justify-content:flex-start!important;
  width:auto!important;
  height:auto!important;
  min-width:0!important;
  line-height:0!important;
  overflow:visible!important;
}
.logo .official-logo{
  display:block!important;
  width:clamp(180px,18vw,305px)!important;
  max-width:min(305px,42vw)!important;
  height:auto!important;
  max-height:68px!important;
  object-fit:contain!important;
  object-position:left center!important;
  filter:none!important;
}

.hero-logo .official-logo,
.hero-logo img[src*="skyway-logo-official"]{
  width:100%!important;
  height:auto!important;
  object-fit:contain!important;
  filter:none!important;
}

/* Large hero mark: a pale background watermark behind the flame, imagery and sales copy. */
.hero .hero-video{
  z-index:0!important;
  filter:none!important;
}
.hero .hero-logo{
  display:none!important;
  z-index:1!important;
  left:50%!important;
  top:27%!important;
  width:min(64vw,920px)!important;
  max-width:none!important;
  transform:translate(-50%,-50%)!important;
  opacity:.115!important;
  filter:brightness(2.15) saturate(.72)!important;
  mix-blend-mode:screen!important;
  pointer-events:none!important;
}
.hero .hero-overlay{
  z-index:2!important;
  background:
    linear-gradient(90deg,rgba(5,8,12,.25),rgba(5,8,12,.38) 50%,rgba(5,8,12,.25)),
    linear-gradient(0deg,rgba(5,8,12,.56),rgba(5,8,12,.02) 58%,rgba(5,8,12,.12))!important;
}
.hero .luxury-visual,
.hero .vehicle-visual{
  z-index:3!important;
}
.hero .luxury-visual{
  top:18%!important;
  opacity:.94!important;
  filter:brightness(1.48) saturate(1.02) contrast(1.04)!important;
}
.hero .vehicle-visual{
  top:17%!important;
  opacity:.76!important;
  filter:brightness(1.42) saturate(.94) contrast(1.06) drop-shadow(0 14px 28px rgba(0,0,0,.3))!important;
}
.hero .wrap,
.hero .scroll-cue{
  z-index:4!important;
}
.hero .hero-copy{
  position:relative!important;
  z-index:5!important;
}
.hero .hero-copy .eyebrow,
.hero .hero-copy .hero-tagline,
.hero .hero-copy .lede{
  color:#fff7ed!important;
  text-shadow:0 3px 18px rgba(0,0,0,.95),0 1px 3px rgba(0,0,0,1)!important;
}

/* The supplied logo now carries the business name, so the old decorative wordmark stays in the document for SEO/accessibility without appearing twice. */
.hero-brand{
  position:absolute!important;
  width:1px!important;
  height:1px!important;
  padding:0!important;
  margin:-1px!important;
  overflow:hidden!important;
  clip:rect(0,0,0,0)!important;
  white-space:nowrap!important;
  border:0!important;
}

/* The quote area keeps the logo visible as a very light watermark over the flame. */
.quote{
  position:relative!important;
  isolation:isolate;
  overflow:hidden;
}
.quote::before{
  content:"";
  position:absolute;
  z-index:-1;
  inset:4% 2%;
  background-image:url("../brand/final/skyway-logo-official.webp");
  background-repeat:no-repeat;
  background-position:center;
  background-size:min(92%,980px) auto;
  opacity:.06;
  filter:brightness(1.55) saturate(.82);
  mix-blend-mode:screen;
  pointer-events:none;
}
.quote > *{position:relative;z-index:1}

.official-footer-mark{
  width:min(1120px,calc(100% - 48px));
  margin:0 auto 24px;
  text-align:center;
  pointer-events:none;
}
.official-footer-mark img{
  display:block;
  width:min(330px,72vw);
  height:auto;
  margin:0 auto;
  opacity:.5;
}

@media(max-width:760px){
  .logo .official-logo{
    width:clamp(145px,45vw,205px)!important;
    max-width:50vw!important;
    max-height:54px!important;
  }
  .quote::before{
    inset:12% -18%;
    background-size:128% auto;
    opacity:.05;
  }
  .hero .hero-logo{
    top:20%!important;
    width:112vw!important;
    opacity:.10!important;
  }
  .hero .luxury-visual{top:10%!important;opacity:.84!important;filter:brightness(1.42) saturate(1.02)!important}
  .hero .vehicle-visual{top:12%!important;opacity:.68!important;filter:brightness(1.38) saturate(.92) contrast(1.05)!important}
  .official-footer-mark{width:calc(100% - 32px)}
  .official-footer-mark img{width:min(280px,78vw)}
}