/* One fixed control, with stronger contrast and a continuous burger/X morph. */
html[data-menu-button] body .menu-toggle.architecture-menu[data-menu-option] {
  --menu-ink:#fff;
  position:fixed; top:clamp(18px,2.4svh,32px); right:clamp(20px,2.1vw,42px);
  width:132px; height:52px; padding:0; border:1px solid #ffffff52; border-radius:28px;
  background:#10214870; color:var(--menu-ink); overflow:hidden; transform:none;
  box-shadow:0 2px 12px #00000012;
  -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
  transition:width .42s cubic-bezier(.22,1,.36,1),background .3s,color .3s,border-color .3s,transform .35s cubic-bezier(.22,1,.36,1);
}
html[data-menu-button] body .menu-toggle.architecture-menu[data-menu-option]::before {
  content:'MENU'; display:block; position:absolute; left:20px; top:50%; translate:0 -50%; z-index:1;
  color:currentColor; font:600 11px/1 'DM Sans',Arial,sans-serif; letter-spacing:.14em;
  opacity:1; transition:opacity .16s;
}
html[data-menu-button] body .menu-toggle.architecture-menu[data-menu-option]::after {
  content:''; position:absolute; inset:0; border-radius:inherit; background:#012bba;
  transform:scaleY(0); transform-origin:bottom; transition:transform .35s cubic-bezier(.22,1,.36,1);
}
html[data-menu-button] body .menu-toggle.architecture-menu[data-menu-option] span {
  position:absolute; z-index:1; right:19px; top:21px; width:25px; height:2px;
  background:transparent; transform:none; transform-origin:50% 50%; overflow:hidden;
  transition:top .42s cubic-bezier(.22,1,.36,1),right .42s cubic-bezier(.22,1,.36,1),transform .42s cubic-bezier(.22,1,.36,1);
}
html[data-menu-button] body .menu-toggle.architecture-menu[data-menu-option] span::before {
  content:''; position:absolute; inset:0; border-radius:1px; background:currentColor;
  transform:scaleX(1); transform-origin:right center;
  transition:transform .42s cubic-bezier(.22,1,.36,1),background .3s;
}
html[data-menu-button] body .menu-toggle.architecture-menu[data-menu-option] span:last-child {top:29px; transform:none;}
html[data-menu-button] body .menu-toggle.architecture-menu[data-menu-option] span:last-child::before {transform:scaleX(.76);}
html[data-menu-button][data-menu-surface="light"] body .menu-toggle.architecture-menu[data-menu-option] {
  --menu-ink:#012bba; background:#fffffff0; border-color:#012bba38;
  box-shadow:0 2px 12px #1021480d;
}
html[data-menu-button][data-menu-surface] body .menu-toggle.architecture-menu[data-menu-option]:focus-visible {
  --menu-ink:#fff; border-color:#012bba; outline:2px solid #012bba; outline-offset:4px;
}
html[data-menu-button] body .menu-toggle.architecture-menu[data-menu-option]:focus-visible::after {transform:scaleY(1);}
@media(hover:hover) and (pointer:fine) {
  html[data-menu-button][data-menu-surface] body .menu-toggle.architecture-menu[data-menu-option]:not([aria-expanded="true"]):hover {
    --menu-ink:#fff; border-color:#012bba; transform:translateY(-1px);
  }
  html[data-menu-button] body .menu-toggle.architecture-menu[data-menu-option]:not([aria-expanded="true"]):hover::after {transform:scaleY(1);}
}
/* Retain the small neutral close control; the same two lines become the X. */
html[data-menu-button][data-menu-surface] body .menu-toggle.architecture-menu[data-menu-option][aria-expanded="true"] {
  --menu-ink:#fff; width:52px; background:#102148b8; border-color:#ffffff66; transform:none;
}
html[data-menu-button][data-menu-surface] body .menu-toggle.architecture-menu[data-menu-option][aria-expanded="true"]::before {opacity:0;}
html[data-menu-button][data-menu-surface] body .menu-toggle.architecture-menu[data-menu-option][aria-expanded="true"]::after {transform:scaleY(0);}
html[data-menu-button][data-menu-surface] body .menu-toggle.architecture-menu[data-menu-option][aria-expanded="true"] span {top:25px; right:13px; transform:rotate(45deg);}
html[data-menu-button][data-menu-surface] body .menu-toggle.architecture-menu[data-menu-option][aria-expanded="true"] span:last-child {transform:rotate(-45deg);}
html[data-menu-button][data-menu-surface] body .menu-toggle.architecture-menu[data-menu-option][aria-expanded="true"] span::before {transform:scaleX(1);}
@media(hover:hover) and (pointer:fine) {
  html[data-menu-button][data-menu-surface] body .menu-toggle.architecture-menu[data-menu-option][aria-expanded="true"]:hover {background:#102148e6; border-color:#ffffffa6;}
}
/* JS carries the visible state across the button's move into the modal layer. */
html[data-menu-button] body .menu-toggle.architecture-menu[data-menu-morphing],
html[data-menu-button] body .menu-toggle.architecture-menu[data-menu-morphing]::before,
html[data-menu-button] body .menu-toggle.architecture-menu[data-menu-morphing]::after,
html[data-menu-button] body .menu-toggle.architecture-menu[data-menu-morphing] span,
html[data-menu-button] body .menu-toggle.architecture-menu[data-menu-morphing] span::before {transition:none;}
@media(prefers-reduced-motion:reduce) {
  html[data-menu-button] body .menu-toggle.architecture-menu[data-menu-option],
  html[data-menu-button] body .menu-toggle.architecture-menu[data-menu-option]::before,
  html[data-menu-button] body .menu-toggle.architecture-menu[data-menu-option]::after,
  html[data-menu-button] body .menu-toggle.architecture-menu[data-menu-option] span,
  html[data-menu-button] body .menu-toggle.architecture-menu[data-menu-option] span::before {transition:none;}
  html[data-menu-button] body .menu-toggle.architecture-menu[data-menu-option]:hover,
  html[data-menu-button] body .menu-toggle.architecture-menu[data-menu-option]:not([aria-expanded="true"]):hover span {transform:none;}
}