:root { --scroll-nav-height: 66px; }

.scroll-nav {
  z-index: 8;
  min-height: var(--scroll-nav-height);
}
.scroll-nav-home {
  --scroll-nav-height: 64px;
  position: absolute;
  inset: 7px 0 auto;
  gap: clamp(10px, 1.25vw, 24px);
  padding-inline: var(--grid-rail);
}
.scroll-nav[data-ready] {
  position: fixed;
  inset-inline: 0;
  top: 0;
  transition: transform 220ms ease, background-color 180ms ease, box-shadow 180ms ease;
}
.scroll-nav-home[data-ready]:not([data-scrolled]) { top: 7px; }
.scroll-nav.shell[data-ready] {
  width: 100%;
  padding-inline: max(var(--gutter), (100% - var(--shell)) / 2 + var(--gutter));
}
.scroll-nav[data-scrolled] {
  background: var(--bg);
  box-shadow: inset 0 -1px var(--line);
}
.scroll-nav[data-hidden] {
  transform: translateY(calc(-100% - 7px));
  pointer-events: none;
}
.scroll-nav-home .brand img { width: 151px; }
.scroll-nav-home .nav-cta > span { font-size: 8px; }
.scroll-nav .menu nav {
  max-height: calc(100dvh - var(--scroll-nav-height) - 8px);
  overflow-y: auto;
}
.scroll-nav-home .menu nav { inset-inline: var(--grid-rail); }

.scroll-nav-home + main > .hero { padding-top: 64px; }
body:has(.scroll-nav.shell[data-ready]) { padding-top: var(--scroll-nav-height); }
html:has(.scroll-nav[data-ready]) { scroll-padding-top: var(--scroll-nav-height); }

@media (max-width: 809px) {
  :root { --scroll-nav-height: 62px; }
  .scroll-nav-home { gap: 7px; }
  .scroll-nav-home .brand { flex-shrink: 0; }
  .scroll-nav-home .brand img { width: 110px; }
  .scroll-nav-home .nav-cta { gap: 5px; }
  .scroll-nav-home .menu summary { width: 36px; padding: 0; border-radius: 5px; font-size: 19px; }
}