/* Floating Just Data navigation */
.site-header {
  position: fixed;
  top: 18px;
  left: 50%;
  right: auto;
  width: min(1180px, calc(100% - 36px));
  height: 70px;
  padding: 9px 11px 9px 16px;
  transform: translateX(-50%);
  border: 1px solid rgba(41, 48, 43, .12);
  border-radius: 24px;
  background: rgba(250, 248, 242, .9);
  box-shadow: 0 12px 38px rgba(41, 48, 43, .10);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.brand .brand-logo { display: block; width: 180px; height: 46px; }
.site-nav { gap: 1.65rem; }
.site-nav .nav-contact {
  border: 0;
  background: var(--sage);
  color: var(--paper);
  padding: .72rem 1.15rem;
}
.site-nav .nav-contact:hover { border-color: transparent; background: var(--sage-dark); }
.hero { padding-top: clamp(10rem, 16vw, 13rem); }
.footer-brand .brand-logo { width: 180px; }

@media (max-width: 900px) {
  .site-header {
    top: 10px;
    width: calc(100% - 20px);
    height: 62px;
    padding: 7px 12px;
    border-radius: 19px;
  }
  .brand .brand-logo { width: 154px; height: 40px; }
  .site-nav {
    top: 70px;
    left: 0;
    right: 0;
    border: 1px solid rgba(41, 48, 43, .12);
    border-radius: 18px;
  }
}

@media (prefers-reduced-transparency: reduce) {
  .site-header { background: var(--paper); backdrop-filter: none; }
}