/* Floating navigation stays above the page effects and below the welcome. */
html { scroll-padding-top: 130px; }
.header {
  position: sticky;
  top: 20px;
  z-index: 70;
  width: calc(100% - 48px);
  max-width: 1200px;
  height: auto;
  min-height: 82px;
  margin: 20px auto 0;
  padding: 14px 20px 14px 26px;
  gap: 24px;
  border: 1px solid #ffffff;
  border-radius: 999px;
  background: #fffaf7ed;
  box-shadow: 0 12px 38px #8f4d6814, 0 2px 8px #8f4d6808, inset 0 0 0 1px #f3dce755;
  -webkit-backdrop-filter: blur(22px) saturate(145%);
  backdrop-filter: blur(22px) saturate(145%);
}
.header .brand img { width: 43px; }
.header .brand > span { font-size: 24px; }
.header nav { gap: 30px; }
.header .nav-cta { background: #f8e0e9; border-color: #edc7d6; padding: 12px 22px; }
.header .nav-cta:hover { background: #f3cbdc; }
@media (min-width: 761px) and (max-width: 1000px) {
  .header { gap: 18px; padding-left: 20px; }
  .header nav { gap: 20px; }
  .header .nav-cta { padding: 12px 18px; }
}
@media (max-width: 760px) {
  html { scroll-padding-top: 110px; }
  .header { top: 12px; width: calc(100% - 24px); min-height: 72px; margin-top: 12px; padding: 10px 14px 10px 18px; gap: 12px; }
  .header .brand { gap: 9px; }
  .header .brand img { width: 37px; }
  .header .brand > span { font-size: 22px; }
  .header .brand small { font-size: 9px; }
  .header .menu-toggle { flex-shrink: 0; border-radius: 50%; background: #f8e0e9; }
  .header nav { top: calc(100% + 12px); left: 0; right: 0; padding: 20px; gap: 10px; border-radius: 25px; background: #fffaf7fa; border: 1px solid #f0dbe4; box-shadow: 0 18px 45px #8f4d6826; max-height: calc(100dvh - 120px); overflow-y: auto; overscroll-behavior: contain; }
  .header nav a { min-height: 44px; }
  .header nav .nav-cta { padding: 13px 18px; }
}