.caseline-nav {
  padding-top: calc(0.95rem + env(safe-area-inset-top, 0px)) !important;
  padding-bottom: 1.7rem !important;
  background: linear-gradient(180deg, rgba(10, 10, 20, 1) 0%, rgba(10, 10, 20, 0.98) 42%, rgba(10, 10, 20, 0.72) 76%, rgba(10, 10, 20, 0) 100%) !important;
  position: relative;
  overflow: visible;
}

.light .caseline-nav {
  background: linear-gradient(180deg, rgba(245, 245, 247, 1) 0%, rgba(245, 245, 247, 0.99) 42%, rgba(245, 245, 247, 0.84) 76%, rgba(245, 245, 247, 0) 100%) !important;
}

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

[data-route-shell] > section:first-child,
[data-route-shell] > div:first-child {
  padding-top: clamp(8.45rem, 9.6vw, 9.75rem) !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) {
  .caseline-nav {
    padding-top: calc(1rem + env(safe-area-inset-top, 0px)) !important;
    padding-bottom: 3.4rem !important;
    background: linear-gradient(180deg, rgba(10, 10, 20, 1) 0%, rgba(10, 10, 20, 1) 54%, rgba(10, 10, 20, 0.86) 78%, rgba(10, 10, 20, 0) 100%) !important;
    position: relative;
    z-index: 10010 !important;
  }

  .caseline-nav::before {
    content: "";
    position: fixed;
    inset: 0 0 auto 0;
    height: calc(env(safe-area-inset-top, 0px) + 6.55rem);
    background: linear-gradient(180deg, rgba(10, 10, 20, 1) 0%, rgba(10, 10, 20, 0.98) 52%, rgba(10, 10, 20, 0.72) 76%, rgba(10, 10, 20, 0.28) 90%, rgba(10, 10, 20, 0) 100%);
    pointer-events: none;
    z-index: -1;
  }

  .light .caseline-nav {
    background: linear-gradient(180deg, rgba(245, 245, 247, 1) 0%, rgba(245, 245, 247, 1) 54%, rgba(245, 245, 247, 0.92) 78%, rgba(245, 245, 247, 0) 100%) !important;
  }

  .light .caseline-nav::before {
    background: linear-gradient(180deg, rgba(245, 245, 247, 1) 0%, rgba(245, 245, 247, 0.99) 52%, rgba(245, 245, 247, 0.8) 76%, rgba(245, 245, 247, 0.36) 90%, rgba(245, 245, 247, 0) 100%) !important;
  }

  [data-route-shell] > .caseline-hero {
    min-height: calc(100dvh + 5.5rem) !important;
    padding-top: calc(6.9rem + env(safe-area-inset-top, 0px)) !important;
    padding-bottom: max(3.25rem, calc(env(safe-area-inset-bottom, 0px) + 2rem)) !important;
    display: flex !important;
    align-items: center !important;
  }

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

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

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

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

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

@supports not (height: 100dvh) {
  @media (max-width: 900px) {
    [data-route-shell] > .caseline-hero {
      min-height: calc(100svh + 5.5rem) !important;
    }
  }
}

@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);
    }
  }
}