/* A quiet, edge-to-edge glass navigation bar. Its dimensions never change on scroll. */
.header,
.header.scrolled,
.solid-header .header,
.solid-header .header.scrolled {
  position: fixed;
  inset: 0 0 auto;
  width: 100%;
  height: 78px;
  padding-inline: clamp(24px, 5vw, 88px);
  border: 0;
  border-bottom: 1px solid rgba(255,255,255,.28);
  border-radius: 0;
  box-shadow: none;
  animation: none;
  transform: translate3d(0,0,0);
  -webkit-backdrop-filter: blur(18px) saturate(135%);
  backdrop-filter: blur(18px) saturate(135%);
  transition: transform .42s cubic-bezier(.22,1,.36,1),
    background-color .28s ease, color .28s ease, border-color .28s ease;
}
.header { background: rgba(35,23,30,.35); }
.header.scrolled,
.solid-header .header,
.solid-header .header.scrolled {
  background: rgba(249,247,245,.88);
  border-bottom-color: rgba(71,17,35,.12);
}
.header.is-hidden,
.header.scrolled.is-hidden,
.solid-header .header.is-hidden,
.solid-header .header.scrolled.is-hidden {
  transform: translate3d(0,-105%,0);
}
.header .brand,
.header.scrolled .brand,
.solid-header .header .brand {
  width: 137px;
  flex: 0 0 137px;
  transition: none;
}
.header .brand img { height: auto; }
.header .desktop-nav { align-items: center; }
.header .menu-toggle { align-items: center; min-height: 44px; }
.header .desktop-nav a { transition: opacity .22s ease; }
.header .desktop-nav a:hover { opacity: 1; }
.header.scrolled :where(a, button):focus-visible,
.solid-header .header :where(a, button):focus-visible {
  outline-color: #793b51;
  outline-offset: 4px;
}
.project-subnav { top: 90px; }
body.header-hidden.detail-page .project-subnav { top: 14px; }

/* The dialog stays in the top layer while it closes so the exit remains visible. */
.menu-dialog,
.menu-dialog[open] {
  background: radial-gradient(circle at 85% 15%, #6a2940 0, transparent 36%), #471123;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.menu-dialog[open] {
  opacity: 0;
  transform: translate3d(0,-22px,0);
  pointer-events: none;
  transition: opacity .34s ease, transform .42s cubic-bezier(.22,1,.36,1);
}
.menu-dialog[open].is-open {
  opacity: 1;
  transform: translate3d(0,0,0);
  pointer-events: auto;
}
.menu-dialog[open].is-closing { pointer-events: none; }
.menu-dialog::backdrop { background: rgba(21,8,15,.2); }
.menu-dialog nav a {
  opacity: 0;
  transform: translate3d(0,18px,0);
  transition: opacity .32s ease, transform .45s cubic-bezier(.22,1,.36,1), color .2s ease;
}
.menu-dialog.is-open nav a { opacity: 1; transform: none; }
.menu-dialog.is-open nav a:nth-child(1) { transition-delay: .06s; }
.menu-dialog.is-open nav a:nth-child(2) { transition-delay: .11s; }
.menu-dialog.is-open nav a:nth-child(3) { transition-delay: .16s; }
.menu-dialog.is-open nav a:nth-child(4) { transition-delay: .21s; }
.menu-dialog.is-closing nav a { transition-delay: 0s; }
.menu-dialog .menu-top,
.menu-dialog > p { opacity: .72; }
.menu-dialog .menu-top { opacity: 1; }
.menu-dialog .menu-top > span {
  display: block;
  width: clamp(128px, 30vw, 160px);
  height: 44px;
  overflow: hidden;
  font-size: 0;
  background: url('/assets/primoc.svg') left center / contain no-repeat;
  filter: brightness(0) invert(1);
}
.menu-dialog .menu-close { min-width: 44px; min-height: 44px; }
.mobile-contact-dock { display: none; }

@media (max-width: 800px) {
  .header,
  .header.scrolled,
  .solid-header .header,
  .solid-header .header.scrolled {
    inset: 0 0 auto;
    height: 70px;
    padding-inline: 6%;
  }
  .header .brand,
  .header.scrolled .brand,
  .solid-header .header .brand { width: 116px; flex-basis: 116px; }
  .menu-dialog { padding: max(27px, env(safe-area-inset-top)) 8% max(24px, env(safe-area-inset-bottom)); }
  .menu-dialog nav { gap: clamp(20px, 4.2vh, 32px); }
  .menu-dialog nav a { width: fit-content; }
  .project-subnav { top: 82px; scroll-margin-top: 88px; }
  body.header-hidden.detail-page .project-subnav { top: 8px; }

  .mobile-contact-dock {
    position: fixed;
    z-index: 55;
    right: max(17px, env(safe-area-inset-right));
    bottom: max(18px, env(safe-area-inset-bottom));
    display: grid;
    place-items: center;
    width: 58px;
    height: 58px;
    border: 1px solid rgba(255,255,255,.65);
    border-radius: 50%;
    color: #fff;
    background: #471123;
    box-shadow: 0 10px 26px rgba(38,12,27,.28), inset 0 1px rgba(255,255,255,.3);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(12px) scale(.86);
    transition: opacity .32s ease, transform .42s cubic-bezier(.2,.8,.2,1), visibility 0s .42s;
    touch-action: manipulation;
  }
  .mobile-contact-dock.is-visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: none;
    transition: opacity .32s ease, transform .42s cubic-bezier(.2,.8,.2,1), visibility 0s;
  }
  .mobile-contact-dock .whatsapp-mark { width: 25px; height: 25px; filter: brightness(0) invert(1); }
  .mobile-contact-dock:active { transform: scale(.93); }
  .mobile-contact-dock:focus-visible { outline: 2px solid #a4667a; outline-offset: 4px; }
  body:has(.menu-dialog[open]) .mobile-contact-dock,
  body:has(.lightbox[open]) .mobile-contact-dock { visibility: hidden; pointer-events: none; }
  .site-footer { padding-bottom: calc(95px + env(safe-area-inset-bottom)); }
}
@media (min-width: 801px) and (max-width: 1000px) {
  .header .brand,
  .header.scrolled .brand,
  .solid-header .header .brand { width: 122px; flex-basis: 122px; }
  .header .desktop-nav { gap: 18px; }
}
@media (prefers-reduced-transparency: reduce) {
  .header,
  .header.scrolled,
  .solid-header .header { -webkit-backdrop-filter: none; backdrop-filter: none; }
}
@media (prefers-reduced-motion: reduce) {
  .header,
  .header.scrolled,
  .solid-header .header,
  .menu-dialog[open],
  .menu-dialog nav a,
  .mobile-contact-dock { transition: none; }
  .menu-dialog[open] { opacity: 1; transform: none; pointer-events: auto; }
  .menu-dialog nav a { opacity: 1; transform: none; }
}