/* VE NAV v10. Deliberately AFTER site.css, which contains several older rules.
   Remove all native cross-document snapshots: they crossfade asynchronously,
   so incoming content can appear while the previous content is disappearing. */
@view-transition { navigation: none; }

/* The header, its logo, menu, controls and theme never participate. */
html.ve-managed-nav.ve-nav-leaving .site-page {
  position: static !important;
  inset: auto !important;
  width: auto !important;
  opacity: 0 !important;
  filter: none !important;
  transform: none !important;
  animation: none !important;
  transition: opacity 700ms cubic-bezier(.45, 0, .55, 1) !important;
  pointer-events: none;
  will-change: opacity;
}
html.ve-managed-nav.ve-nav-arriving .site-page {
  position: static !important;
  opacity: 0 !important;
  filter: none !important;
  transform: none !important;
  animation: none !important;
  transition: none !important;
  pointer-events: none;
}
html.ve-managed-nav.ve-nav-arriving.ve-nav-revealing .site-page {
  opacity: 1 !important;
  transition: opacity 700ms cubic-bezier(.45, 0, .55, 1) !important;
  pointer-events: auto;
  will-change: opacity;
}
html.ve-managed-nav.ve-nav-reset .site-page {
  opacity: 1 !important;
  transition: none !important;
  animation: none !important;
  filter: none !important;
  position: static !important;
  transform: none !important;
}
@media (prefers-reduced-motion: reduce) {
  html.ve-managed-nav.ve-nav-leaving .site-page,
  html.ve-managed-nav.ve-nav-arriving .site-page,
  html.ve-managed-nav.ve-nav-arriving.ve-nav-revealing .site-page {
    opacity: 1 !important;
    animation: none !important;
    transition: none !important;
    filter: none !important;
  }
}

/* VE HEADER v10: symmetric content inset on wide viewports.
   A desktop Logout button is 76 CSS pixels wide, so 76px is used as the
   target whitespace from either edge. Keep the existing grid, alignment,
   logo proportions, buttons, header position and mobile menu behavior. */
@media (min-width:1280px) {
  .site-header .head {
    padding-left:76px !important;
    padding-right:76px !important;
  }
}
@media (min-width:641px) and (max-width:1279px) {
  .site-header .head {
    padding-left:clamp(24px, 5vw, 64px) !important;
    padding-right:clamp(24px, 5vw, 64px) !important;
  }
}
@media (max-width:640px) {
  /* Only a small inset on phones: preserve the room needed for contacts
     and the company logotype; do not push the settings/menu off screen. */
  .site-header .head {
    padding-left:clamp(10px, 3vw, 16px) !important;
    padding-right:clamp(10px, 3vw, 16px) !important;
  }
}
