/* Header dropdowns, desktop: one shared backdrop panel (see nav.js) that
   morphs between menus instead of each menu drawing its own box. */
.nav-backdrop{display:none}
@media(min-width:761px){
  .cosmic .header .nav-backdrop{display:block;position:absolute;left:0;right:0;top:calc(100% - 14px);height:0;opacity:0;pointer-events:none;background:radial-gradient(ellipse at 75% 120%,#211632,#030304 70%);border-top:1px solid #ffffff25;border-bottom:1px solid #ffffff20;box-shadow:0 25px 50px #0008;z-index:0;transition:opacity .16s ease}
  .cosmic .header.nav-open .nav-backdrop{opacity:1}
  /* Only animate the height when moving from one open menu to another. */
  .cosmic .header.nav-switching .nav-backdrop{transition:opacity .16s ease,height .28s cubic-bezier(.2,.8,.2,1)}
  .cosmic .header #customers-menu.help-mega,.cosmic .header #trading-menu.solutions-mega{top:calc(100% - 14px);background:transparent;border-color:transparent;box-shadow:none;z-index:1;transition:opacity .16s ease}
  .cosmic .header:not(.nav-open) .industry-menu{opacity:0}
  .cosmic .header .industry-menu.nav-enter>*{animation:nav-content-in .26s ease both}
  .cosmic .header.nav-switching .industry-menu.nav-enter>*{animation-delay:.05s}
  /* Keep the pointer's path from trigger to panel inside the dropdown. */
  .cosmic .header .industry-menu:before{content:'';position:absolute;left:0;right:0;top:-14px;height:14px}
}
@keyframes nav-content-in{from{opacity:0;transform:translateY(-6px)}}
@media(prefers-reduced-motion:reduce){
  .cosmic .header .nav-backdrop,.cosmic .header .industry-menu{transition:none!important}
  .cosmic .header .industry-menu.nav-enter>*{animation:none}
}

/* Plain text links in the menus: no arrow glyphs. */
.cosmic .header .help-column h2 span,.cosmic .header .help-column a b,.cosmic .header .help-side a b,.cosmic .header .solution-menu-grid>a>span{display:none}
/* Case Studies / About Us: show they're clickable on hover. */
.cosmic .header nav>a:hover,.cosmic .header nav>a:focus-visible{color:#c7a4fb}
/* A second category heading further down the same Who We Help column. */
.cosmic .header .help-column h2.help-next{margin-top:34px}
/* HYPESONIC wordmark beside the globe mark, as on hypesoniclegal.com. */
.header .brand{display:inline-flex;align-items:center;gap:12px;color:inherit}
.header .brand svg.brand-wordmark{display:block;height:15px;width:auto;flex:none;fill:currentColor}
@media(max-width:760px){.header .brand{gap:9px}.header .brand svg.brand-wordmark{height:12px}}
/* "Get in Touch" is the primary header action: solid purple; "Sign In" stays an outline. */
.cosmic .header-right .get-in-touch{background:#915ad9;border:1px solid #915ad9;color:#fff;transition:background .2s,border-color .2s}
.cosmic .header-right .get-in-touch:hover{background:#a775e8;border-color:#a775e8;color:#fff}

/* Brands precedes the existing industry columns on every shared menu. */
.cosmic .header #customers-menu .help-main{grid-template-columns:repeat(4,minmax(0,1fr))}
.cosmic .header #customers-menu.help-mega{grid-template-columns:minmax(0,5fr) minmax(150px,1fr);gap:28px}
@media(max-width:1100px){
  .cosmic .header #customers-menu .help-main{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cosmic .header #customers-menu .help-column:first-child{grid-row:auto}
}
@media(max-width:760px){
  .cosmic .header #customers-menu.help-mega{grid-template-columns:1fr}
}
@media(max-width:480px){
  .cosmic .header #customers-menu .help-main{grid-template-columns:1fr}
}