.final-cta {
  position: relative;
  isolation: isolate;
  display: flex;
  min-height: 620px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  overflow: hidden;
  background: url('/assets/dirt-orbit-v2-community-v1.webp') center 48% / cover no-repeat;
}

.final-cta::before {
  position: absolute;
  inset: 0;
  z-index: -1;
  content: "";
  background:
    linear-gradient(180deg, rgba(12, 14, 12, .1), rgba(12, 14, 12, .4)),
    linear-gradient(90deg, rgba(12, 14, 12, .14), transparent 35%, transparent 65%, rgba(12, 14, 12, .14));
}

.final-cta .eyebrow {
  color: var(--yellow);
  text-shadow: 0 2px 16px rgba(0, 0, 0, .5);
}

.final-cta h2 {
  text-shadow: 0 3px 28px rgba(0, 0, 0, .6);
}

.final-cta .button {
  box-shadow: 0 8px 24px rgba(0, 0, 0, .28);
}

@media (max-width: 720px) {
  .final-cta {
    min-height: 560px;
    background-position: 54% center;
  }

  .final-cta::before {
    background: linear-gradient(180deg, rgba(12, 14, 12, .12), rgba(12, 14, 12, .48));
  }
}

.feature-grid > .feature-card:first-child {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  color: var(--chalk);
  background: url('/assets/dirt-orbit-riders-coast-feature-v1.webp') center / cover no-repeat;
}

.feature-grid > .feature-card:first-child::before {
  position: absolute;
  inset: 0;
  z-index: -1;
  content: "";
  background:
    linear-gradient(180deg, rgba(10, 13, 12, .08), rgba(10, 13, 12, .48)),
    linear-gradient(90deg, rgba(10, 13, 12, .42), rgba(10, 13, 12, .04) 85%);
}

.feature-grid > .feature-card:first-child p {
  color: rgba(255, 250, 240, .9);
  text-shadow: 0 2px 12px rgba(0, 0, 0, .4);
}

.feature-grid > .feature-card:first-child .feature-points,
.feature-grid > .feature-card:first-child .feature-points li {
  border-color: rgba(255, 250, 240, .3);
}

.feature-grid > .feature-card:first-child .feature-points li {
  text-shadow: 0 2px 10px rgba(0, 0, 0, .5);
}

.feature-grid > .feature-card:first-child .feature-points li::before {
  color: var(--yellow);
}

.feature-grid > .feature-wide:last-child {
  position: relative;
  isolation: isolate;
  min-height: 500px;
  overflow: hidden;
  color: var(--chalk);
  background: url('/assets/dirt-orbit-buggy-quad-drift-curve-v1.webp') right center / cover no-repeat;
}

.feature-grid > .feature-wide:last-child::before {
  position: absolute;
  inset: 0;
  z-index: -1;
  content: "";
  background:
    linear-gradient(90deg, rgba(9, 11, 10, .7) 0%, rgba(9, 11, 10, .48) 36%, rgba(9, 11, 10, .08) 68%, transparent 100%),
    linear-gradient(180deg, rgba(9, 11, 10, .06), rgba(9, 11, 10, .24));
}

.feature-grid > .feature-wide:last-child .card-kicker {
  color: var(--yellow);
}

.feature-grid > .feature-wide:last-child h3,
.feature-grid > .feature-wide:last-child p {
  max-width: 48%;
  text-shadow: 0 3px 18px rgba(0, 0, 0, .62);
}

.feature-grid > .feature-wide:last-child p {
  color: rgba(255, 250, 240, .88);
}

.feature-grid > .feature-wide:last-child .route-strip {
  width: 50%;
}

.feature-grid > .feature-wide:last-child .route-strip i {
  border-color: var(--chalk);
  color: var(--chalk);
  background: rgba(9, 11, 10, .36);
  backdrop-filter: blur(4px);
}

.feature-grid > .feature-wide:last-child .route-strip b {
  border-color: var(--yellow);
}

@media (max-width: 720px) {
  .feature-grid > .feature-wide:last-child {
    min-height: 590px;
    background-position: 64% center;
  }

  .feature-grid > .feature-wide:last-child::before {
    background: linear-gradient(180deg, rgba(9, 11, 10, .62) 0%, rgba(9, 11, 10, .42) 56%, rgba(9, 11, 10, .08) 100%);
  }

  .feature-grid > .feature-wide:last-child h3,
  .feature-grid > .feature-wide:last-child p,
  .feature-grid > .feature-wide:last-child .route-strip {
    max-width: 100%;
    width: 100%;
  }

  .feature-grid > .feature-wide:last-child .route-strip i {
    min-width: 56px;
    width: 56px;
    height: 56px;
    font-size: 7px;
  }
}

.audience-note {
  isolation: isolate;
  background: url('/assets/dirt-orbit-riders-dunes-meetup-v1.webp') center / cover no-repeat;
}

.audience-note::before {
  inset: 0;
  z-index: 0;
  width: auto;
  height: auto;
  border: 0;
  border-radius: 0;
  background:
    linear-gradient(90deg, rgba(9, 11, 10, .5), rgba(9, 11, 10, .08) 88%),
    linear-gradient(180deg, rgba(9, 11, 10, .05), rgba(9, 11, 10, .34));
}

.audience-note::after {
  display: none;
}

.audience-note span,
.audience-note strong {
  text-shadow: 0 3px 20px rgba(0, 0, 0, .72);
}

.principles {
  position: relative;
  isolation: isolate;
  display: flex;
  min-height: 780px;
  justify-content: space-between;
  flex-direction: column;
  overflow: hidden;
  background: url('/assets/dirt-orbit-mountain-restaurant-riders-v1.webp') right center / cover no-repeat;
}

.principles::before {
  position: absolute;
  inset: 0;
  z-index: -1;
  content: "";
  background: linear-gradient(90deg, rgba(9, 11, 10, .34) 0%, rgba(9, 11, 10, .12) 44%, transparent 72%);
}

.principles .section-heading {
  max-width: 48%;
  text-shadow: 0 3px 22px rgba(0, 0, 0, .72);
}

.principles .principle-grid {
  background: rgba(255, 255, 255, .16);
}

.principles .principle-grid article {
  background: rgba(16, 18, 16, .58);
  backdrop-filter: blur(5px);
}

.principles .principle-grid p {
  color: rgba(255, 250, 240, .82);
}

@media (max-width: 980px) {
  .principles {
    min-height: 900px;
    background-position: 64% center;
  }

  .principles .section-heading {
    max-width: 70%;
  }
}

@media (max-width: 720px) {
  .principles {
    min-height: 980px;
    background-position: 69% center;
  }

  .principles::before {
    background: linear-gradient(180deg, rgba(9, 11, 10, .32) 0%, rgba(9, 11, 10, .08) 48%, rgba(9, 11, 10, .28) 100%);
  }

  .principles .section-heading {
    max-width: 100%;
  }

  .principles .principle-grid article {
    background: rgba(16, 18, 16, .66);
  }
}