/* Homepage hero: align the three stripes with the slanted photo boundary. */
@media (min-width: 761px) {
  .hero { --hero-plane-width: clamp(560px, 56vw, 980px); }
  .hero-copy { clip-path: polygon(0 0, 88% 0, 74% 100%, 0 100%); }
  .hero > .speed-lines {
    left: auto;
    right: auto;
    top: 0;
    bottom: 0;
    height: 100%;
    width: 100%;
    transform: none;
    z-index: 4;
  }
  .hero > .speed-lines span {
    top: 0;
    bottom: 0;
    width: 7px;
    transform: none;
    clip-path: polygon(0 0, 100% 0, calc(100% - 14vw) 100%, calc(0% - 14vw) 100%);
  }
  /* Use the same percentage-based diagonal as the dark panel. */
  .hero > .speed-lines span:first-child,
  .hero > .speed-lines span:nth-child(2),
  .hero > .speed-lines span:nth-child(3) {
    left: auto;
    width: var(--hero-plane-width);
    clip-path: none;
    background: transparent;
  }
  .hero > .speed-lines span:first-child { background: linear-gradient(104deg, transparent 0 77%, #fff 77% 78%, transparent 78%); }
  .hero > .speed-lines span:nth-child(2) { background: linear-gradient(104deg, transparent 0 79.5%, var(--performance-blue) 79.5% 80.5%, transparent 80.5%); }
  .hero > .speed-lines span:nth-child(3) { background: linear-gradient(104deg, transparent 0 82%, var(--mission-gold) 82% 83%, transparent 83%); }
  .hero-copy__inner { margin-right: clamp(8rem, 16vw, 14rem); }
  .hero-summary { max-width: 440px; }
}
@media (min-width: 761px) and (max-width: 1180px) {
  .hero { --hero-plane-width: clamp(540px, 66vw, 740px); }
  .hero-copy__inner { margin-right: clamp(8rem, 17vw, 12rem); }
  .hero-summary { max-width: 360px; }
}