/* Site header, modelled on a full-width "glass" bar: logo left, links right in
   spaced caps, then Log in + Apply. A translucent ink bar with a strong blur;
   on pages whose top is a dark hero (.velo-header--hero) it sits over the hero
   and is fully transparent until the page scrolls (tools-nav.js toggles
   .is-scrolled). Below 1100px the links and buttons give way to a menu button
   that opens the side drawer (built by tools-nav.js).
   Linked in <head> so the header is in its final shape on first paint. */

.velo-header {
  position: sticky !important;
  top: 0;
  z-index: 100;
  padding: 0 !important;
}
.velo-header--hero {
  position: fixed !important;
  left: 0;
  right: 0;
  transition: top .35s ease, left .35s ease, right .35s ease;
}
/* At the top the transparent bar sits inside the hero box (inset 14px like
   the box), so the white logo and links never fall on the light page edge;
   on scroll it widens to the full-width glass bar. */
.velo-header--hero:not(.is-scrolled) {
  top: 14px !important;   /* the wrapper's inline style says top:0 */
  left: 14px;
  right: 14px;
}

.velo-header > nav {
  max-width: none !important;
  margin: 0 !important;
  border-radius: 0 !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(255,255,255,.1) !important;
  background: rgba(9,25,62,.62) !important;
  -webkit-backdrop-filter: blur(24px) saturate(140%);
  backdrop-filter: blur(24px) saturate(140%);
  box-shadow: 0 8px 30px rgba(0,0,0,.22) !important;
  padding: 14px 40px !important;
  display: grid !important;
  grid-template-columns: auto 1fr auto !important;
  gap: 32px !important;
  transition: background-color .35s ease, border-color .35s ease, box-shadow .35s ease, -webkit-backdrop-filter .35s ease, backdrop-filter .35s ease;
}
.velo-header--hero:not(.is-scrolled) > nav {
  background: transparent !important;
  border-bottom-color: transparent !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

/* Links: right-aligned, small spaced caps. */
.velo-header [data-velo-nav="baked"]:not(.velo-navactions) {
  justify-self: end !important;
  gap: 30px !important;
}
.velo-header [data-velo-nav="baked"] > a,
.velo-header [data-velo-nav="baked"] .vr-trig {
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: .14em !important;
  text-transform: uppercase;
}
.velo-header .velo-navactions { gap: 12px !important; }

/* Menu button: hidden on wide screens. */
.velo-header .velo-burger,
.velo-header .velo-menu-btn {
  display: none !important;
  align-items: center; justify-content: center;
  width: 40px; height: 40px; padding: 0; cursor: pointer;
  background: transparent !important; border: 0 !important; color: #fff;
}
.velo-header :is(.velo-burger, .velo-menu-btn) svg { stroke: currentColor; }
#veloMenu, .velo-menu { display: none !important; }

@media (max-width: 1100px) {
  .velo-header > nav {
    grid-template-columns: auto 1fr !important;
    padding: 12px 20px !important;
  }
  .velo-header [data-velo-nav="baked"]:not(.velo-navactions) { display: none !important; }
  .velo-header .velo-navactions { justify-self: end !important; }
  .velo-header .velo-navactions > a { display: none !important; }
  .velo-header .velo-burger,
  .velo-header .velo-menu-btn { display: inline-flex !important; }
  .velo-header :is(.velo-burger, .velo-menu-btn) { width: 44px !important; height: 44px !important; }
}

/* Side drawer (markup from tools-nav.js). */
.velo-drawer-scrim {
  position: fixed; inset: 0; z-index: 10000;
  background: rgba(0,7,25,.55);
  opacity: 0; visibility: hidden;
  transition: opacity .3s ease, visibility 0s linear .3s;
}
.velo-drawer {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 10001;
  width: min(320px, 88vw);
  background: #05102E; color: #fff;
  display: flex; flex-direction: column;
  padding: 22px 26px 26px;
  transform: translateX(100%);
  transition: transform .35s cubic-bezier(.22,.61,.36,1), box-shadow .35s ease;
  font-family: 'Hanken Grotesk', -apple-system, BlinkMacSystemFont, sans-serif;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  scrollbar-gutter: stable;
}
.velo-drawer > * { flex-shrink: 0; }
html.velo-drawer-open .velo-drawer-scrim { opacity: 1; visibility: visible; transition: opacity .3s ease; }
html.velo-drawer-open .velo-drawer { transform: none; box-shadow: -20px 0 50px rgba(0,0,0,.35); }
html.velo-drawer-open { overflow: hidden; }
.velo-drawer-top { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; justify-content: space-between; padding-bottom: 12px; margin-bottom: 18px; background: #05102E; }
.velo-drawer-top img { width: 105px; height: auto; display: block; }
.velo-drawer-close { width: 44px; height: 44px; border: 0; background: transparent; color: #fff; cursor: pointer; font-size: 26px; line-height: 1; }
.velo-drawer-links { display: flex; flex-direction: column; }
.velo-drawer-links a {
  display: block; padding: 16px 0;
  border-bottom: 1px solid rgba(255,255,255,.1);
  color: rgba(255,255,255,.86); text-decoration: none;
  font-size: 12.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  transition: color .15s ease;
}
.velo-drawer-links a:hover, .velo-drawer-links a[aria-current="page"] { color: #fff; }
.velo-drawer-links .velo-drawer-sub { padding-left: 14px; font-size: 11.5px; color: rgba(255,255,255,.66); }
.velo-drawer-actions { display: flex; gap: 10px; margin-top: 26px; }
.velo-drawer-actions a { flex: 1; min-height: 44px; display: flex; align-items: center; justify-content: center; text-align: center; text-decoration: none; font-weight: 700; font-size: 14px; padding: 11px 14px; border-radius: 100px; }
.velo-drawer-actions .login { background: #fff; color: #09193E; }
.velo-drawer-actions .apply { background: #52525B; color: #fff; }
.velo-drawer-actions .apply:hover { background: #7FAEF0; color: #09193E; }   /* grey buttons turn sky on hover */
.velo-drawer-foot { margin-top: auto; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.45); }