@media (max-width: 899px) {
  .side-rail {
    top: 4.75rem;
    display: block;
    width: min(22rem, 86vw);
    transform: translateX(-100%);
    transition: transform var(--transition);
  }

  body.nav-open .side-rail {
    transform: translateX(0);
  }

  .side-rail__logo {
    display: none;
  }

  .side-rail__mark--top {
    margin-top: 2.25rem;
  }

  .primary-nav {
    gap: 1.35rem;
  }

  .primary-nav a {
    font-size: 0.78rem;
  }

  .side-rail__meta {
    margin-top: 2.5rem;
  }
}

@media (max-width: 768px) {
  .hero__media img {
    object-position: 42% 50%;
  }

  .hero__content {
    grid-template-rows: 1fr auto;
    min-height: 100svh;
    padding: 6.75rem 24px 2rem;
  }

  .hero__title {
    width: 100%;
    max-width: 100%;
    margin-top: clamp(2.4rem, 8vh, 4.8rem);
    font-size: clamp(3.2rem, 16vw, 5.8rem);
    line-height: 0.82;
    overflow-wrap: normal;
  }

  .hero__title-desktop {
    display: none !important;
  }

  .hero__title-mobile {
    display: block !important;
    max-width: 100%;
    white-space: nowrap;
  }

  .hero__lower {
    gap: 1.05rem;
    margin-bottom: 0;
  }

  .hero__tagline {
    max-width: min(17rem, 100%);
    font-size: clamp(1.85rem, 8.5vw, 2.65rem);
  }

  .hero__tagline::after {
    width: min(18rem, 100%);
  }

  .hero__cta {
    width: 100%;
    max-width: 22rem;
    min-height: 3.25rem;
    padding: 1rem 1.1rem;
    font-size: clamp(0.62rem, 2.8vw, 0.72rem);
    letter-spacing: 0.13em;
  }
}

@media (max-width: 420px) {
  .hero__title {
    font-size: clamp(3rem, 15.5vw, 4.35rem);
  }

  .hero__cta {
    max-width: none;
    padding-inline: 1rem;
    font-size: 0.62rem;
    letter-spacing: 0.12em;
  }
}