:root { --site-header-height: 98px; }
html { scroll-padding-top: calc(var(--site-header-height) + 18px); }
body > header {
  position: sticky; top: 0; z-index: 100;
  box-shadow: 0 8px 26px #0005;
}
@media (max-width: 700px) {
  body > header { position: sticky; padding-top: max(12px, env(safe-area-inset-top)); }
  .mobile-menu {
    position: fixed; top: var(--site-header-height); left: 0; right: 0; z-index: 99;
    max-height: calc(100dvh - var(--site-header-height) - 70px);
    overflow-y: auto; overscroll-behavior: contain; box-shadow: 0 18px 30px #0006;
  }
  .button, .project button, .mobile-menu-toggle, .quick-nav button, .quick-nav a {
    --button-edge: #75603b;
    border: 1px solid #f5e2b566; border-radius: 12px;
    background: linear-gradient(160deg, #e2c58b 0%, #c3a26a 48%, #a98b54 100%);
    color: #142321;
    box-shadow: inset 0 1px 0 #fff9, inset 0 -1px 0 #72532c40, 0 5px 0 var(--button-edge), 0 9px 16px #0005;
    transform: translateY(0); touch-action: manipulation;
    transition: transform 120ms ease, box-shadow 120ms ease, filter 120ms ease;
    min-height: 48px;
  }
  .button.light { background: linear-gradient(155deg, #fff1d3, #dfc997); }
  .project button { padding: 14px 16px; text-align: left; }
  .request-section .button, .mobile-menu-toggle, .quick-nav button, .quick-nav a {
    --button-edge: #091916;
    background: linear-gradient(155deg, #395a50, #203b34 55%, #172c27);
    color: #f4e3be; border-color: #bfa56b66;
    box-shadow: inset 0 1px 0 #b8d0b94d, inset 0 -1px 0 #0005, 0 5px 0 var(--button-edge), 0 9px 16px #0005;
  }
  .button:active, .project button:active, .mobile-menu-toggle:active, .quick-nav button:active, .quick-nav a:active {
    transform: translateY(4px); filter: brightness(.96);
    box-shadow: inset 0 2px 4px #0003, 0 1px 0 var(--button-edge), 0 3px 7px #0004;
  }
  .quick-nav {
    gap: 8px; padding: 9px 10px max(13px, calc(env(safe-area-inset-bottom) + 9px));
    background: #101d1cf5; border-top: 1px solid #bfa56b55;
  }
  .quick-nav button, .quick-nav a { min-height: 46px; padding: 10px 5px; border-radius: 10px; }
  .mobile-menu-toggle { min-width: 46px; }
  button:disabled { transform: none; filter: saturate(.5); box-shadow: none; }
}
@media (prefers-reduced-motion: reduce) {
  .button, .project button, .mobile-menu-toggle, .quick-nav button, .quick-nav a { transition: none; }
}