/* Approved desktop collage and tablet single-quote composition. */
.hero.hero-native {
  display: block;
  min-height: 0;
  padding: 0;
  background: #07080d;
  color: var(--butter);
}

.hero-native::after { display: none; }

.hero-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

.hero-artwork {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.native-logo {
  position: absolute;
  left: 5.6875%;
  top: 67.444444%;
  width: 18.1875%;
  height: 25.666667%;
}

.native-logo img { width: 100%; height: 100%; }

.review-wall,
.hero-tablet-quotes {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  fill: currentColor;
  stroke: none;
  overflow: visible;
  font-kerning: normal;
  font-variant-ligatures: none;
}

.hero-word,
.hero-citation {
  opacity: 0;
  transition: none;
}

.hero-word.is-visible,
.hero-citation.is-visible { opacity: 1; }

.hero-mobile-quotes { display: none; }
.hero-tablet-quotes { display: none; }
.hero-tablet-quote { visibility: hidden; }
.hero-tablet-quote.is-active { visibility: visible; }

body[data-page="home"] .site-nav {
  inset: clamp(.75rem, 1.5vw, 1.5rem) max(1.5rem, 5.5vw) auto max(1.5rem, 5.625vw);
  font-size: clamp(.875rem, 1vw, 1rem);
}

body[data-page="home"] .nav-left {
  gap: clamp(1.75rem, 3.75vw, 3.75rem);
}

@media (max-width: 900px) {
  .review-wall { display: none; }
  .hero-tablet-quotes { display: block; }
  .hero-tablet-quote { transform: translateX(13px); }
}

@media (max-width: 1100px) {
  body[data-page="home"] .site-nav { left: var(--gutter); right: var(--gutter); }
  .native-logo { left: var(--gutter); }
}

@media (max-width: 700px) {
  .hero-stage {
    height: 32rem;
    aspect-ratio: auto;
  }

  .hero-artwork {
    object-position: 83% center;
  }

  .native-logo {
    left: var(--gutter);
    top: auto;
    bottom: 2rem;
    width: clamp(9rem, 40vw, 13rem);
    height: auto;
  }

  .native-logo img { height: auto; }
  .review-wall { display: none; }
  .hero-tablet-quotes { display: none; }

  .hero-mobile-quotes {
    display: grid;
    padding: 1.75rem var(--gutter) 3rem;
    align-items: center;
  }

  .hero-mobile-quote {
    grid-area: 1 / 1;
    min-width: 0;
    visibility: hidden;
  }

  .hero-mobile-quote.is-active { visibility: visible; }

  .hero-mobile-quote p {
    font: 500 var(--quote-size, 1.75rem) / 1.2 var(--display);
    text-wrap: pretty;
  }

  .hero-mobile-quote cite {
    margin-top: 1rem;
    font: 400 1.125rem / 1.4 var(--body);
  }

}

@media (prefers-reduced-motion: reduce) {
  .hero-word, .hero-citation { opacity: 1; }
}