/* Oversized, staggered navigation ribbons over the architectural scene. */
.navigation.architectural-nav {
  position: fixed; inset: 0; width: 100%; height: 100dvh; max-height: none;
  margin: 0; padding: 0; border: 0; overflow: hidden; background: #251911;
  translate: none; opacity: 0; transition: opacity .5s ease;
}
.navigation.architectural-nav.is-open { translate: none; opacity: 1; }
.navigation.architectural-nav::before { display: none; }
.navigation.architectural-nav::backdrop { background: #171310; }
.architectural-nav__scene { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.architectural-nav__scene > img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; transform: scale(1.055); transition: transform 1.4s cubic-bezier(.16,1,.3,1); }
.architectural-nav.is-open .architectural-nav__scene > img { transform: scale(1); }
.architectural-nav__scene::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg,#110d090d,#110d0914); }
.navigation.architectural-nav nav.architectural-nav__panels {
  position: absolute; inset: 5dvh 0 auto; height: 90dvh; width: 100%; padding: 0;
  display: grid; grid-template-rows: repeat(4,minmax(0,1fr)); gap: 0;
}
.navigation.architectural-nav nav a.menu-panel {
  --surface: #f4f1e9; --ink: #191a1d; --offset: 27vw; --width: 64vw; --delay: 0s;
  position: relative; display: block; min-width: 0; height: 100%; width: var(--width); margin-left: var(--offset); padding: 0;
  color: var(--ink); background: var(--surface); opacity: 0;
  transform: translate3d(8vw,4dvh,0); box-shadow: -5px 12px 24px #00000025;
  transition: transform .8s cubic-bezier(.16,1,.3,1), opacity .4s ease, box-shadow .5s ease;
  transition-delay: 0s; text-decoration: none; -webkit-tap-highlight-color: transparent;
}
.navigation.architectural-nav nav a.menu-panel--studio { --surface: #012bba; --ink: #fff; --offset: 35vw; --width: 63vw; --delay: .065s; }
.navigation.architectural-nav nav a.menu-panel--pricing { --offset: 31.5vw; --width: 61vw; --delay: .13s; }
.navigation.architectural-nav nav a.menu-panel--contact { --surface: #012bba; --ink: #fff; --offset: 39vw; --width: 59vw; --delay: .195s; }
.navigation.architectural-nav.is-open nav a.menu-panel { opacity: 1; transform: none; transition-delay: var(--delay); }
.navigation.architectural-nav nav a.menu-panel::before { display: none; }
.menu-panel__face { position: absolute; inset: 0; display: flex; align-items: center; justify-content: space-between; gap: 3vw; padding: 0 3vw; overflow: hidden; }
.menu-panel__title { display: block; font-family: Impact,'Arial Narrow',sans-serif; font-weight: 400; font-size: clamp(60px,min(13.5vw,18dvh),210px); letter-spacing: -.025em; line-height: 1; }
.menu-panel__arrow { display: block; flex: 0 0 auto; width: clamp(44px,min(8vw,12dvh),144px); height: auto; transition: transform .55s cubic-bezier(.16,1,.3,1); }
@media(hover:hover) and (pointer:fine) {
  .navigation.architectural-nav.is-open nav a.menu-panel:hover { transform: translateX(-1.2vw); transition-delay: 0s; box-shadow: -10px 18px 36px #00000038; z-index: 2; }
  .menu-panel:hover .menu-panel__arrow { transform: translate(5px,-5px); }
}
.navigation.architectural-nav.is-open nav a.menu-panel:focus-visible { outline: 3px solid var(--ink); outline-offset: -8px; transition-delay: 0s; z-index: 2; }
.navigation.architectural-nav > .menu-toggle.architecture-menu {
  position: absolute; top: 12px; right: 12px; width: 48px; height: 48px; padding: 0;
  background: #191a1d55; border: 0; border-radius: 50%; color: #fff;
  opacity: 1; visibility: visible; scale: 1; transform: none;
}
.navigation.architectural-nav > .menu-toggle.architecture-menu::before { display: none; }
.navigation.architectural-nav > .menu-toggle.architecture-menu span { top: 23px; right: 9px; width: 30px; height: 1px; transform: rotate(45deg); }
.navigation.architectural-nav > .menu-toggle.architecture-menu span:last-child { top: 23px; transform: rotate(-45deg); }
.navigation.architectural-nav > .menu-toggle.architecture-menu:hover { background: var(--blue); }
@media(max-width:720px) {
  .navigation.architectural-nav nav.architectural-nav__panels { top: 14dvh; height: 72dvh; }
  .navigation.architectural-nav nav a.menu-panel { --offset: 5vw; --width: 87vw; }
  .navigation.architectural-nav nav a.menu-panel--studio { --offset: 11vw; --width: 87vw; }
  .navigation.architectural-nav nav a.menu-panel--pricing { --offset: 7vw; --width: 87vw; }
  .navigation.architectural-nav nav a.menu-panel--contact { --offset: 12vw; --width: 86vw; }
  .menu-panel__face { padding: 0 5vw; gap: 4vw; }
  .menu-panel__title { font-size: clamp(48px,min(17.5vw,13dvh),120px); }
  .menu-panel__arrow { width: clamp(36px,11vw,70px); }
}
@media(max-height:500px) and (min-width:721px) {
  .navigation.architectural-nav nav.architectural-nav__panels { top: 10dvh; height: 85dvh; }
  .menu-panel__title { font-size: 17dvh; }
  .menu-panel__arrow { width: 10dvh; }
}
@media(prefers-reduced-motion:reduce) {
  .navigation.architectural-nav,
  .navigation.architectural-nav nav a.menu-panel,
  .architectural-nav__scene > img,
  .menu-panel__arrow { transition: none; }
  .navigation.architectural-nav.is-open nav a.menu-panel:hover,
  .architectural-nav__scene > img,
  .menu-panel:hover .menu-panel__arrow { transform: none; }
}