/* Fixed navigation and an independent, borderless photographic preview. */
.architectural-nav__scene::after { background:linear-gradient(90deg,#16100b30,#16100b50 55%,#16100b30); }
.menu-split {
  position:absolute; top:9dvh; left:50%; transform:translateX(-50%);
  width:85vw; max-width:1800px; height:82dvh;
  display:grid; grid-template-columns:1.06fr 1fr; gap:2vw;
}
.navigation.architectural-nav nav.architectural-nav__panels {
  position:relative; inset:auto; height:100%; width:100%; padding:0;
  display:grid; grid-template-columns:minmax(0,1fr); grid-template-rows:repeat(4,minmax(0,1fr)); gap:10px;
}
.navigation.architectural-nav nav a.menu-panel {
  position:relative; inset:auto; height:100%; width:100%; margin:0; padding:0;
  background:var(--surface); color:var(--ink); opacity:0;
  box-shadow:0 6px 16px #00000015; transform:translateY(20px);
  transition:opacity .4s ease,transform .8s cubic-bezier(.16,1,.3,1);
}
.navigation.architectural-nav.is-open nav a.menu-panel { opacity:1; transform:none; transition-delay:var(--delay); }
.navigation.architectural-nav.is-open nav a.menu-panel:hover,
.navigation.architectural-nav.is-open nav a.menu-panel:focus-visible { transform:none; }
.menu-panel__face { position:absolute; inset:0; display:flex; align-items:center; justify-content:space-between; gap:16px; padding:0 2.4vw; }
.menu-panel__title { font-size:clamp(48px,min(8.2vw,16dvh),160px); line-height:1; letter-spacing:-.03em; }
.menu-panel__arrow { width:clamp(42px,min(6vw,10dvh),88px); flex:none; transition:transform .5s cubic-bezier(.16,1,.3,1); }
.menu-panel.is-selected .menu-panel__arrow {transform:translate(4px,-4px);}
.menu-panel__arrow path {transform-box:view-box;transition:transform .45s cubic-bezier(.22,1,.36,1);}
.menu-arrow__shaft {transform-origin:8px 56px;}
.menu-arrow__head {transform-origin:55px 9px;}
/* The head leads and the shaft stretches, with a small recoil before settling. */
@keyframes menu-arrow-shaft-spring {
  0% {transform:scale(1);}
  20% {transform:scale(.98);}
  65% {transform:scale(1.09);}
  100% {transform:scale(1.07);}
}
@keyframes menu-arrow-head-spring {
  0% {transform:translate(0,0);}
  20% {transform:translate(-.9px,.9px);}
  65% {transform:translate(4.1px,-4.1px);}
  100% {transform:translate(3.2px,-3.2px);}
}
@media(hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference) {
  .menu-panel:hover .menu-arrow__shaft {animation:menu-arrow-shaft-spring .6s cubic-bezier(.22,1,.36,1) both;}
  .menu-panel:hover .menu-arrow__head {animation:menu-arrow-head-spring .6s cubic-bezier(.22,1,.36,1) both;}
}
@media(prefers-reduced-motion:no-preference) {
  .menu-panel:focus-visible .menu-arrow__shaft {animation:menu-arrow-shaft-spring .6s cubic-bezier(.22,1,.36,1) both;}
  .menu-panel:focus-visible .menu-arrow__head {animation:menu-arrow-head-spring .6s cubic-bezier(.22,1,.36,1) both;}
}
@media(prefers-reduced-motion:reduce) {
  .menu-panel__arrow path {animation:none!important;transition:none;transform:none;}
}
.menu-gallery { position:relative; display:block; min-width:0; height:100%; overflow:hidden; background:#281b14; border:0; border-radius:0; box-shadow:0 12px 30px #00000015; opacity:0; transform:translateY(18px); transition:opacity .65s ease,transform 1s cubic-bezier(.16,1,.3,1); }
.navigation.is-open .menu-gallery { opacity:1; transform:none; transition-delay:.12s; }
.menu-gallery__image { position:absolute; inset:0; display:block; opacity:0; transform:scale(1.025); transition:opacity .55s ease,transform 1s cubic-bezier(.16,1,.3,1); pointer-events:none; }
.menu-gallery__image.is-active { opacity:1; transform:scale(1); }
.menu-gallery__image img { display:block; width:100%; height:100%; object-fit:cover; }
.menu-gallery__image--studio img { object-position:50% 35%; }
.menu-gallery:focus-visible { outline:3px solid #f4f1e9; outline-offset:5px; }
@media(max-width:900px) {
  .menu-split { top:9dvh; width:86vw; height:auto; grid-template-columns:minmax(0,1fr); gap:16px; }
  .navigation.architectural-nav nav.architectural-nav__panels { height:48dvh; gap:8px; }
  .menu-panel__face { padding:0 5vw; }
  .menu-panel__title { font-size:clamp(46px,min(17vw,9.5dvh),100px); }
  .menu-panel__arrow { width:clamp(36px,10vw,65px); }
  .menu-gallery { height:auto; aspect-ratio:16/9; }
}
@media(max-height:520px) and (min-width:501px) {
  .menu-split { top:10dvh; width:86vw; height:80dvh; grid-template-columns:1.06fr 1fr; gap:2vw; }
  .navigation.architectural-nav nav.architectural-nav__panels { height:100%; gap:6px; }
  .menu-panel__face { padding:0 2.4vw; gap:10px; }
  .menu-panel__title { font-size:clamp(38px,min(8.2vw,15dvh),80px); }
  .menu-panel__arrow { width:clamp(30px,6vw,50px); }
  .menu-gallery { height:100%; aspect-ratio:auto; }
}
@media(prefers-reduced-motion:reduce) {
  .navigation.architectural-nav nav a.menu-panel,.menu-gallery,.menu-gallery__image,.menu-panel__arrow { transition:none; transform:none; }
}
