/* Keep reading space generous while retaining navigation and live access. */
html { scroll-padding-top: var(--header-offset, 155px); }
body.has-compact-header { padding-bottom: calc(44px + env(safe-area-inset-bottom, 0px)); }
.has-compact-header .site-header { overflow-anchor: none; }
.service-bar-slot { height: var(--service-slot-height, 45px); transition: height 280ms cubic-bezier(.22, .61, .36, 1); }
.site-header.is-compact .service-bar-slot { height: 0; }
.has-compact-header .nav-wrap { transition: min-height 280ms cubic-bezier(.22, .61, .36, 1), gap 280ms ease; }
.has-compact-header .brand img { transition: width 280ms cubic-bezier(.22, .61, .36, 1), max-height 280ms ease; }
.has-compact-header .nav > .button, .has-compact-header .menu-toggle { transition: padding 280ms ease, min-height 280ms ease; }
.has-compact-header .live-service-bar { animation: service-return 280ms ease both; }
.site-header.is-compact .live-service-bar { animation: service-dock 280ms ease both; }
@keyframes service-dock { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes service-return { from { opacity: 0; } to { opacity: 1; } }
.site-header.is-compact { box-shadow: 0 2px 12px #3028340c; }
.site-header.is-compact .nav-wrap { min-height: 56px; gap: 20px; }
.site-header.is-compact .brand img { width: 156px; max-height: 42px; }
.site-header.is-compact .nav > .button { min-height: 40px; padding: 7px 15px; }
.site-header.is-compact .live-service-bar {
  position: fixed; inset: auto 0 0; z-index: 51;
  min-height: 44px; padding: 0 16px env(safe-area-inset-bottom, 0px);
  border-bottom: 0; border-top: 1px solid #e5dccb;
  box-shadow: 0 -2px 12px #3028340a;
}
.site-header.is-compact .live-service-bar a { min-height: 44px; }
.site-header.is-compact .nav summary,
.site-header.is-compact .nav > a:not(.button) { min-height: 44px; display: flex; align-items: center; }
@media (max-width: 920px) {
  .site-header.is-compact .nav-wrap { min-height: 56px; gap: 12px; }
  .site-header.is-compact .menu-toggle { min-height: 44px; padding: 5px 12px; font-size: 16px; }
  .site-header .nav { max-height: calc(100dvh - var(--header-offset, 155px) - 60px - env(safe-area-inset-bottom, 0px)); }
}
@media (max-width: 360px) {
  .site-header.is-compact .live-service-bar a { font-size: 12px; gap: 5px; }
}
@media (prefers-reduced-motion: reduce) {
  .has-compact-header .site-header *, .service-bar-slot { transition: none !important; animation: none !important; }
}