.caseline-nav {
  padding-top: 0.95rem !important;
  padding-bottom: 0.35rem !important;
  background: linear-gradient(180deg, rgba(10, 10, 20, 0.92) 0%, rgba(10, 10, 20, 0.56) 24%, rgba(10, 10, 20, 0.14) 52%, rgba(10, 10, 20, 0) 78%) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.light .caseline-nav {
  background: linear-gradient(180deg, rgba(245, 245, 247, 0.92) 0%, rgba(245, 245, 247, 0.58) 24%, rgba(245, 245, 247, 0.14) 52%, rgba(245, 245, 247, 0) 78%) !important;
}

[data-route-shell] {
  isolation: isolate;
}

[data-route-shell] > section:first-child,
[data-route-shell] > div:first-child {
  padding-top: clamp(7.75rem, 9vw, 9rem) !important;
}

[data-route-shell] > .caseline-hero {
  padding-top: clamp(1.5rem, 2.3vw, 2.2rem) !important;
  padding-bottom: clamp(3rem, 5vw, 4.5rem) !important;
}

[data-route-shell] > .caseline-hero > div:last-child {
  transform: translateY(-1.7rem);
}

[data-route-shell] > .caseline-hero > div:last-child > div:first-child {
  margin-bottom: 0.85rem !important;
}

[data-route-shell] > .caseline-hero > div:last-child > h1 {
  margin-bottom: 0.9rem !important;
}

[data-route-shell] > .caseline-hero > div:last-child > p {
  margin-bottom: 1.35rem !important;
}

[data-route-shell] > .caseline-hero > div:last-child > div:last-child {
  gap: 1rem !important;
}

@media (max-width: 900px) {
  [data-route-shell] > .caseline-hero {
    padding-top: 1.9rem !important;
    padding-bottom: 3.25rem !important;
  }

  [data-route-shell] > .caseline-hero > div:last-child {
    transform: translateY(-1rem);
  }
}

@media (prefers-reduced-motion: no-preference) {
  [data-route-shell] {
    view-transition-name: route-shell;
  }

  ::view-transition-old(route-shell) {
    animation: caseline-route-out 220ms cubic-bezier(0.4, 0, 1, 1) both;
  }

  ::view-transition-new(route-shell) {
    animation: caseline-route-in 420ms cubic-bezier(0.22, 1, 0.36, 1) both;
  }

  @keyframes caseline-route-out {
    from {
      opacity: 1;
      transform: translateY(0) scale(1);
      filter: blur(0);
    }

    to {
      opacity: 0;
      transform: translateY(18px) scale(0.985);
      filter: blur(6px);
    }
  }

  @keyframes caseline-route-in {
    from {
      opacity: 0;
      transform: translateY(26px) scale(0.992);
      filter: blur(8px);
    }

    to {
      opacity: 1;
      transform: translateY(0) scale(1);
      filter: blur(0);
    }
  }
}