/* Subpage mobile controls match the homepage dock. */
.mobile-order-button, .mobile-top-button, .midpoint-brand-strip { display:none; }
.mobile-menu-panel { display:none; }
@media (max-width:760px) {
  body { --mobile-button-banner-height:clamp(92px, 25.536vw, 120px); --mobile-dock-bottom:max(12px, env(safe-area-inset-bottom, 0px)); --mobile-dock-width:min(calc(100vw - 16px), 500px); --mobile-dock-control-height:clamp(60px, 15vw, 68px); --mobile-dock-inset:calc((var(--mobile-button-banner-height) - var(--mobile-dock-control-height)) / 2); --mobile-order-fill:#6BCDFD; }
  .site-footer { padding-bottom:calc(var(--mobile-button-banner-height) + var(--mobile-dock-bottom) + 24px); }
  html { scroll-padding-top:128px; }
  .site-header { background:transparent; pointer-events:none; }
  .site-header .brand { pointer-events:auto; }
  .header-logo { object-fit:contain; }
      .mobile-menu { display: block; position: fixed; z-index: 31; top: auto; bottom: calc(var(--mobile-button-banner-height) / 2); left: 16px; width: calc(25vw - 17px); margin: 0;
        opacity: 0; transform: translateY(calc(50% + 14px)) scale(.9); transform-origin: center;
        visibility: hidden; pointer-events: none;
        transition: opacity 160ms ease, transform 220ms ease, visibility 0s linear 220ms; }
      .site-header.show-mobile-menu ~ .mobile-dock-controls .mobile-menu { opacity: 1; transform: translateY(50%) scale(1);
        visibility: visible; pointer-events: auto;
        transition: opacity 270ms ease, transform 540ms cubic-bezier(.16,1,.3,1), visibility 0s; }
      .mobile-order-button { display: flex; position: fixed; top: auto; bottom: calc(var(--mobile-button-banner-height) / 2); right: auto; left: calc(25vw + 11px); z-index: 31;
        width: calc(50vw - 22px); height: 56px; padding-inline: 12px; align-items: center; justify-content: center;
        font-size: 13px; font-weight: 700; line-height: 1.25; text-align: center;
        border: 2px solid var(--paper); border-radius: 999px; background: var(--mobile-order-fill); color: var(--ink);
        box-shadow: 1px 1px 0 #222A2E, 2px 2px 0 #222A2E, 3px 3px 0 #222A2E, 4px 4px 0 #222A2E;
        opacity: 0; transform: translateY(calc(50% + 14px)) scale(.9); transform-origin: center;
        visibility: hidden; pointer-events: none; text-decoration: none;
        transition: opacity 160ms ease, transform 220ms ease, box-shadow 140ms ease, visibility 0s linear 220ms; }
      .site-header.show-mobile-menu ~ .mobile-dock-controls .mobile-order-button { opacity: 1; transform: translateY(50%) scale(1);
        visibility: visible; pointer-events: auto;
        transition: opacity 270ms ease, transform 540ms cubic-bezier(.16,1,.3,1), box-shadow 140ms ease, visibility 0s; }
      @media (hover: hover) { .mobile-order-button:hover { translate: -1px -1px;
        box-shadow: 1px 1px 0 #222A2E, 2px 2px 0 #222A2E, 3px 3px 0 #222A2E, 4px 4px 0 #222A2E, 5px 5px 0 #222A2E; } }
      .mobile-order-button:active { translate: 2px 2px; scale: .96; box-shadow: 1px 1px 0 #222A2E, 2px 2px 0 #222A2E; }
      .mobile-top-button { display: flex; position: fixed; top: auto; bottom: calc(var(--mobile-button-banner-height) / 2); right: 16px; left: auto; z-index: 31;
        width: calc(25vw - 17px); height: 56px; align-items: center; justify-content: center;
        border: 2px solid var(--paper); border-radius: 999px; background: var(--mobile-order-fill); color: var(--ink);
        box-shadow: 1px 1px 0 #222A2E, 2px 2px 0 #222A2E, 3px 3px 0 #222A2E, 4px 4px 0 #222A2E;
        opacity: 0; transform: translateY(calc(50% + 14px)) scale(.9); transform-origin: center;
        visibility: hidden; pointer-events: none; text-decoration: none;
        transition: opacity 160ms ease, transform 220ms ease, box-shadow 140ms ease, visibility 0s linear 220ms; }
      .site-header.show-mobile-menu ~ .mobile-dock-controls .mobile-top-button { opacity: 1; transform: translateY(50%) scale(1);
        visibility: visible; pointer-events: auto;
        transition: opacity 270ms ease, transform 540ms cubic-bezier(.16,1,.3,1), box-shadow 140ms ease, visibility 0s; }
      .mobile-top-button img { display: block; width: 31px; height: 31px; aspect-ratio: 1; object-fit: contain; flex: 0 0 auto; filter: brightness(0) saturate(100%); }
      @media (hover: hover) { .mobile-top-button:hover { translate: -1px -1px;
        box-shadow: 1px 1px 0 #222A2E, 2px 2px 0 #222A2E, 3px 3px 0 #222A2E, 4px 4px 0 #222A2E, 5px 5px 0 #222A2E; } }
      .mobile-top-button:active { translate: 2px 2px; scale: .96; box-shadow: 1px 1px 0 #222A2E, 2px 2px 0 #222A2E; }
      .mobile-dock-controls :is(.mobile-order-button, .mobile-top-button) {
        transition: opacity 160ms ease, transform 220ms ease, translate 140ms ease, scale 140ms ease, box-shadow 140ms ease, visibility 0s linear 220ms;
      }
      .site-header.show-mobile-menu ~ .mobile-dock-controls :is(.mobile-order-button, .mobile-top-button) {
        transition: opacity 270ms ease, transform 540ms cubic-bezier(.16,1,.3,1), translate 140ms ease, scale 140ms ease, box-shadow 140ms ease, visibility 0s;
      }
      .site-header.show-mobile-menu ~ .mobile-dock-controls :is(.mobile-order-button, .mobile-top-button, .mobile-menu summary):focus-visible { outline-color: var(--paper); }
      .mobile-menu summary { width: 100%; height: 56px; min-width: 0; min-height: 56px; padding: 0;
        border: 2px solid var(--paper); border-radius: 999px; background: #6BCDFD; color: var(--ink);
        box-shadow: 1px 1px 0 #222A2E, 2px 2px 0 #222A2E, 3px 3px 0 #222A2E, 4px 4px 0 #222A2E;
        transition: transform 140ms ease, scale 140ms ease, box-shadow 140ms ease; }
      .mobile-menu[open] summary { color: var(--ink); }
      @media (hover: hover) { .mobile-menu summary:hover { transform: translate(-1px, -1px);
        box-shadow: 1px 1px 0 #222A2E, 2px 2px 0 #222A2E, 3px 3px 0 #222A2E, 4px 4px 0 #222A2E, 5px 5px 0 #222A2E; } }
      .mobile-menu summary:active { transform: translate(2px, 2px); scale: .96; box-shadow: 1px 1px 0 #222A2E, 2px 2px 0 #222A2E; }
      .mobile-menu nav { top: auto; bottom: calc(100% + 14px); right: auto; left: 0; width: calc(100vw - 32px);
        max-height: calc(100vh - 126px); max-height: calc(100dvh - 126px); overflow-y: auto; }
      .mobile-menu[open] nav { transform-origin: bottom left; animation: mobile-menu-panel-in 220ms cubic-bezier(.16,1,.3,1) both; }
      .mobile-menu-panel { position: fixed; inset: 0 0 calc(var(--mobile-button-banner-height) + var(--mobile-dock-bottom)); z-index: 29;
        overflow-y: auto; padding: 0 24px; background: var(--canvas); }
      .mobile-menu[open] ~ .mobile-menu-panel { display: flex; align-items: center; justify-content: center;
        animation: mobile-menu-panel-in 220ms cubic-bezier(.16,1,.3,1) both; }
      .mobile-menu-panel nav { display: flex; flex-direction: column; align-items: center; justify-content: center;
        gap: clamp(12px, 3vh, 28px); width: 100%; max-width: 440px; margin: auto; text-align: center; }
      .mobile-menu-panel nav a { display: flex; align-items: center; justify-content: center; min-height: 48px;
        width: 100%; padding: 8px 0; border: 0; color: var(--ink); text-decoration: none;
        font: 600 clamp(1.25rem, 5vw, 1.75rem)/1.25 var(--body); }
      .mobile-menu-panel nav a:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }
      @keyframes mobile-menu-panel-in {
        from { opacity: 0; transform: translateY(-8px) scale(.96); }
        to { opacity: 1; transform: translateY(0) scale(1); }
      }
      .menu-lines::before { top: -12px; }
      .menu-lines::after { top: 12px; }
      .midpoint-brand-strip { display: flex; position: fixed; top: auto; right: auto; bottom: var(--mobile-dock-bottom); left: calc((100vw - var(--mobile-dock-width)) / 2); width: var(--mobile-dock-width);
        z-index: 29; align-items: center; justify-content: center; height: var(--mobile-button-banner-height); padding: 0;
        background: var(--red); border: 0; border-radius: calc(var(--mobile-button-banner-height) / 2);
        opacity: 0; transform: translateY(14px) scale(.9); transform-origin: bottom center;
        visibility: hidden; pointer-events: none;
        transition: opacity 160ms ease, transform 220ms ease, visibility 0s linear 220ms; }
      .mobile-menu, .mobile-order-button, .mobile-top-button { bottom: calc(var(--mobile-button-banner-height) / 2 + var(--mobile-dock-bottom)); }
      .mobile-menu { left: calc((100vw - var(--mobile-dock-width)) / 2 + var(--mobile-dock-inset)); width: var(--mobile-dock-control-height); }
      .mobile-order-button { left: calc((100vw - var(--mobile-dock-width)) / 2 + var(--mobile-dock-inset) + var(--mobile-dock-control-height) + 12px); width: calc(var(--mobile-dock-width) - var(--mobile-dock-inset) - var(--mobile-dock-inset) - var(--mobile-dock-control-height) - var(--mobile-dock-control-height) - 24px); height: var(--mobile-dock-control-height); font-size: clamp(16px, 4.3vw, 18px); }
      .mobile-top-button { right: calc((100vw - var(--mobile-dock-width)) / 2 + var(--mobile-dock-inset)); width: var(--mobile-dock-control-height); height: var(--mobile-dock-control-height); }
      .mobile-menu summary { height: var(--mobile-dock-control-height); min-height: var(--mobile-dock-control-height); }
      .menu-lines, .menu-lines::before, .menu-lines::after { width: clamp(30px, 7.5vw, 34px); height: 3px; }
      .menu-lines::before { top: -10px; }
      .menu-lines::after { top: 10px; }
      .mobile-top-button img { width: clamp(35px, 9vw, 41px); height: clamp(35px, 9vw, 41px); }
      .site-header.show-mobile-menu ~ .midpoint-brand-strip { opacity: 1; transform: translateY(0) scale(1);
        visibility: visible; transition: opacity 270ms ease, transform 540ms cubic-bezier(.16,1,.3,1), visibility 0s; }

}
@media (prefers-reduced-motion:reduce) {
  .site-header *, .mobile-dock-controls *, .midpoint-brand-strip { animation:none !important; transition:none !important; }
}
@media print {
  .mobile-order-button, .mobile-top-button, .mobile-menu, .mobile-menu-panel, .midpoint-brand-strip { display:none !important; }
  body { padding-bottom:0; }
}