/* Shared floating glass navigation for the portfolio and every case. */
.header {
  position: sticky;
  top: 16px;
  z-index: 30;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  height: 72px;
  gap: 20px;
  margin-top: 16px;
  padding: 10px 18px;
  border: 1px solid rgba(0,0,0,.07);
  border-radius: 20px;
  background: rgba(255,255,255,.72);
  -webkit-backdrop-filter: blur(22px) saturate(120%);
  backdrop-filter: blur(22px) saturate(120%);
  box-shadow: 0 4px 24px rgba(0,0,0,.045), inset 0 1px 0 rgba(255,255,255,.85);
}
.header::before { content: none; }
.header .wordmark { justify-self: start; }
.header .wordmark img { width: 122px; }
.header nav { gap: 5px; }
.header nav a, .header-contact {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 10px 17px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: -.01em;
  white-space: nowrap;
  transition: background-color .2s ease, color .2s ease;
}
.header nav a { color: #555; background: rgba(241,246,251,.55); }
.header nav a:hover { background: rgba(226,231,236,.8); color: #161616; }
.header-contact { justify-self: end; gap: 14px; background: #191919; color: #fff; }
.header-contact:hover { background: #353535; text-decoration: none; }
.header-contact span { font-size: 18px; }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .header { background: rgba(255,255,255,.97); }
}
.header-menu { display: contents; }
.menu-toggle { display: none; }
@media (max-width: 650px) {
  html { scroll-padding-top: 92px; }
  .header { top: 10px; margin-top: 10px; width: calc(100% - 24px); padding: 8px 12px; gap: 0; min-height: 62px; height: auto; border-radius: 17px; grid-template-columns: 1fr auto; }
  .header .wordmark img { width: 106px; }
  .menu-toggle { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 6px; width: 44px; height: 44px; padding: 10px; border: 0; border-radius: 12px; background: #edf1f5; color: #202020; cursor: pointer; }
  .menu-toggle span { display: block; width: 20px; height: 1.5px; border-radius: 2px; background: currentColor; transition: transform .18s ease; }
  .menu-toggle[aria-expanded="true"] span:first-child { transform: translateY(3.75px) rotate(45deg); }
  .menu-toggle[aria-expanded="true"] span:last-child { transform: translateY(-3.75px) rotate(-45deg); }
  .header-menu { display: none; grid-column: 1 / -1; padding: 12px 0 4px; margin-top: 8px; border-top: 1px solid #e3e9ee; }
  .header.menu-open .header-menu { display: grid; gap: 8px; }
  .header nav { display: grid; gap: 8px; }
  .header nav a, .header-contact { width: 100%; min-height: 48px; padding: 12px 16px; font-size: 15px; justify-content: space-between; }
  .header nav a { background: #f0f3f6; }
  .header-contact { justify-self: stretch; }
}
@media (prefers-reduced-motion: reduce) {
  .header nav a, .header-contact, .menu-toggle span { transition: none; }
}