/* V217 / Header refinements and completely reworked mobile drawer.
   This stylesheet loads LAST to override old mobile menu skins. */

/* Remove the long blue rule added in the original logo treatment. */
html body header.top .bar > a.logo::before,
html body header.top .bar > a.logo::after,
html body header.top.sc .bar > a.logo::before,
html body header.top.sc .bar > a.logo::after,
html body header.top.scrolled-deep .bar > a.logo::before,
html body header.top.scrolled-deep .bar > a.logo::after {
  content:none!important;display:none!important;
  background:none!important;border:0!important;box-shadow:none!important;
}
html body header.top .bar > a.logo {isolation:isolate!important;}
html body header.top .bar > nav#nav .v217-nav-icon,
html body header.top .bar > nav#nav .v217-nav-chevron,
html body header.top .bar > nav#nav .v217-drawer-header,
html body header.top .bar > nav#nav .v217-drawer-portal,
html body header.top .bar > nav#nav .v217-contact {display:none!important;}

/* Desktop header typography: slightly larger, reduced from bold to medium. */
@media (min-width:981px) {
  html body header.top .bar > nav#nav > ul > li > a,
  html body header.top.sc .bar > nav#nav > ul > li > a {
    font-family:var(--helprite-font-body,sans-serif)!important;
    font-size:clamp(14px,.91vw,17px)!important;
    font-weight:500!important;
    letter-spacing:0!important;
    line-height:1.4!important;
  }
  html body header.top .bar > nav#nav > ul {
    gap:clamp(15px,1.45vw,29px)!important;
  }
  html body header.top .bar > a.portal,
  html body header.top.sc .bar > a.portal {
    background:#2962a2!important;
    border:1px solid #2962a2!important;
    color:#fff!important;
    font-family:var(--helprite-font-body,sans-serif)!important;
    font-size:17px!important;
    font-weight:600!important;
    min-height:54px!important;
    padding:13px 25px!important;
    border-radius:7px!important;
    box-shadow:none!important;
    transition:background-color .2s ease,border-color .2s ease!important;
  }
  html body header.top .bar > a.portal:hover,
  html body header.top .bar > a.portal:focus-visible {
    background:#2a68bd!important;border-color:#2a68bd!important;
    transform:none!important;
  }
}
/* Keep the expanded text without horizontal overflow on narrow desktops. */
@media (min-width:981px) and (max-width:1360px) {
  html body header.top .bar,
  html body header.top.sc .bar {
    grid-template-columns:minmax(145px,.65fr) minmax(0,auto) minmax(160px,.65fr)!important;
    column-gap:clamp(8px,1vw,16px)!important;
  }
  html body header.top .bar > a.logo img {width:162px!important;}
  html body header.top .bar > nav#nav > ul {gap:clamp(8px,.8vw,15px)!important;}
  html body header.top .bar > nav#nav > ul > li > a {font-size:clamp(12.5px,1.03vw,14px)!important;}
  html body header.top .bar > a.portal {font-size:14px!important;padding:11px 15px!important;min-height:48px!important;}
}
@media(min-width:901px) and (max-width:980px) {
  /* The original site enters drawer mode at 980px. */
  html body header.top .bar > nav#nav {position:fixed!important;}
}

/* New mobile drawer, matching the dark-blue reference design. */
@media (max-width:980px) {
  html body header.top .bar {
    min-height:82px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:space-between!important;
  }
  html body header.top .bar > a.logo img {width:174px!important;height:auto!important;}
  html body header.top .bar > a.portal {display:none!important;}
  html body header.top .bar > button.menu#mb {
    display:inline-flex!important;align-items:center!important;justify-content:center!important;
    width:48px!important;height:48px!important;min-width:48px!important;min-height:48px!important;
    position:relative!important;top:auto!important;right:auto!important;
    border:1px solid rgba(194,222,255,.5)!important;
    border-radius:12px!important;
    background:rgba(255,255,255,.07)!important;color:#fff!important;
    z-index:130!important;
  }
  html body header.top button.menu#mb[aria-expanded="true"] {
    background:rgba(255,255,255,.08)!important;
    position:relative!important;top:auto!important;right:auto!important;
  }
  html body header.top .bar > nav#nav,
  html body header.top.sc .bar > nav#nav {
    position:fixed!important;
    inset:0 0 0 auto!important;
    z-index:300!important;
    display:block!important;
    visibility:hidden!important;
    pointer-events:none!important;
    width:min(100vw,490px)!important;max-width:490px!important;
    height:100dvh!important;
    min-height:100vh!important;
    overflow-x:hidden!important;
    overflow-y:auto!important;
    overscroll-behavior:contain!important;
    margin:0!important;
    padding:0 clamp(24px,5.2vw,37px) 68px!important;
    background:
      radial-gradient(ellipse 90% 24% at 77% -10%,rgba(41,102,185,.40),transparent 90%),
      radial-gradient(ellipse 115% 37% at 85% 111%,rgba(27,92,183,.46),transparent 79%),
      linear-gradient(147deg,#081e43 0%,#092655 49%,#061f49 100%)!important;
    border:0!important;
    border-left:1px solid rgba(164,200,255,.2)!important;
    border-radius:0!important;
    box-shadow:-24px 0 75px rgba(3,12,30,.38)!important;
    transform:translateX(103%)!important;
    transition:transform .3s cubic-bezier(.2,.8,.2,1), visibility .3s!important;
    text-align:left!important;
    flex-direction:column!important;
    align-items:stretch!important;
    isolation:isolate!important;
  }
  html body header.top .bar > nav#nav::before,
  html body header.top .bar > nav#nav::after {
    content:""!important;display:block!important;position:absolute!important;
    pointer-events:none!important;z-index:-1!important;
    width:130%!important;height:160px!important;
    background:linear-gradient(160deg,rgba(38,105,196,.22),rgba(73,148,238,.13) 55%,transparent)!important;
    border-radius:50% 50% 35% 35%!important;
    transform:rotate(-13deg)!important;
    left:-22%!important;
  }
  html body header.top .bar > nav#nav::before {top:-92px!important;}
  html body header.top .bar > nav#nav::after {top:auto!important;bottom:-58px!important;}
  html body header.top .bar > nav#nav.open,
  html body header.top .bar > nav#nav.active,
  html body header.top .bar > nav#nav.is-open {
    visibility:visible!important;pointer-events:auto!important;
    transform:translateX(0)!important;
  }
  html body header.top .bar > nav#nav .v217-drawer-header {
    display:flex!important;align-items:center!important;justify-content:space-between!important;
    gap:15px!important;
    min-height:132px!important;margin:0 0 20px!important;padding:25px 0 15px!important;
  }
  html body header.top .bar > nav#nav .v217-drawer-brand {
    display:inline-flex!important;align-items:center!important;max-width:72%!important;
    background:none!important;border:0!important;padding:0!important;
  }
  html body header.top .bar > nav#nav .v217-drawer-brand img {
    display:block!important;object-fit:contain!important;width:205px!important;max-width:100%!important;height:auto!important;
  }
  html body header.top .bar > nav#nav .v217-drawer-close {
    flex:0 0 50px!important;display:grid!important;place-items:center!important;
    width:50px!important;height:50px!important;
    border:1.5px solid #c1dfff!important;border-radius:12px!important;
    background:rgba(7,28,67,.38)!important;color:#fff!important;cursor:pointer!important;
  }
  html body header.top .bar > nav#nav .v217-drawer-close svg {width:26px!important;height:26px!important;stroke:currentColor!important;stroke-width:2.4!important;fill:none!important;stroke-linecap:round!important;}
  html body header.top .bar > nav#nav > ul {
    display:flex!important;flex-direction:column!important;
    align-items:stretch!important;justify-content:flex-start!important;
    gap:0!important;margin:0!important;padding:0!important;
    list-style:none!important;width:100%!important;
  }
  html body header.top .bar > nav#nav > ul > li {
    display:block!important;margin:0!important;padding:0!important;width:100%!important;
    border:0!important;border-bottom:1px solid rgba(184,219,255,.16)!important;
  }
  html body header.top .bar > nav#nav > ul > li > a {
    display:flex!important;align-items:center!important;justify-content:flex-start!important;
    gap:17px!important;min-height:64px!important;width:100%!important;
    box-sizing:border-box!important;
    padding:14px 16px!important;margin:0!important;
    color:#f3f7ff!important;background:transparent!important;border:0!important;border-radius:10px!important;
    font-family:var(--helprite-font-body,sans-serif)!important;
    font-weight:500!important;font-size:clamp(16px,3.7vw,21px)!important;
    letter-spacing:0!important;line-height:1.35!important;
    text-decoration:none!important;white-space:normal!important;
  }
  html body header.top .bar > nav#nav > ul > li > a[aria-current="page"] {
    color:#092958!important;background:#bcdcff!important;font-weight:600!important;
    box-shadow:0 5px 15px rgba(2,15,42,.08)!important;
  }
  html body header.top .bar > nav#nav > ul > li > a:hover,
  html body header.top .bar > nav#nav > ul > li > a:focus-visible {
    color:#092958!important;background:#bcdcff!important;
  }
  html body header.top .bar > nav#nav > ul > li > a::after {display:none!important;content:none!important;}
  html body header.top .bar > nav#nav .v217-nav-icon,
  html body header.top .bar > nav#nav .v217-nav-chevron {
    display:grid!important;place-items:center!important;flex-shrink:0!important;
    color:inherit!important;background:none!important;position:static!important;
    margin:0!important;padding:0!important;
  }
  html body header.top .bar > nav#nav .v217-nav-icon {width:28px!important;height:28px!important;}
  html body header.top .bar > nav#nav .v217-nav-icon svg {width:26px!important;height:26px!important;}
  html body header.top .bar > nav#nav .v217-nav-label {flex:1 1 auto!important;min-width:0!important;color:inherit!important;font-size:inherit!important;font-weight:inherit!important;}
  html body header.top .bar > nav#nav .v217-nav-chevron {width:24px!important;height:24px!important;margin-left:auto!important;}
  html body header.top .bar > nav#nav .v217-nav-chevron svg {width:22px!important;height:22px!important;}
  html body header.top .bar > nav#nav .v217-nav-icon svg,
  html body header.top .bar > nav#nav .v217-nav-chevron svg {
    fill:none!important;stroke:currentColor!important;stroke-width:1.8!important;stroke-linecap:round!important;stroke-linejoin:round!important;
  }
  html body header.top .bar > nav#nav > a.portal.v217-drawer-portal {
    box-sizing:border-box!important;display:flex!important;align-items:center!important;justify-content:flex-start!important;
    gap:18px!important;width:100%!important;min-height:66px!important;
    margin:24px 0 36px!important;padding:14px 19px!important;
    border:1.5px solid #93caff!important;border-radius:12px!important;
    background:rgba(31,83,155,.38)!important;color:#fff!important;
    font-family:var(--helprite-font-body,sans-serif)!important;
    font-size:clamp(17px,3.75vw,21px)!important;font-weight:600!important;
    text-decoration:none!important;box-shadow:inset 0 0 0 1px rgba(110,166,235,.08)!important;
    white-space:normal!important;
  }
  html body header.top .bar > nav#nav .v217-portal-icon {display:grid!important;place-items:center!important;width:29px!important;flex:0 0 29px!important;}
  html body header.top .bar > nav#nav .v217-portal-external {display:grid!important;place-items:center!important;margin-left:auto!important;width:25px!important;flex:0 0 25px!important;color:#b6dcff!important;}
  html body header.top .bar > nav#nav .v217-portal-icon svg,
  html body header.top .bar > nav#nav .v217-portal-external svg {width:26px!important;height:26px!important;stroke:currentColor!important;fill:none!important;stroke-width:1.8!important;stroke-linecap:round!important;stroke-linejoin:round!important;}
  html body header.top .bar > nav#nav .v217-contact {
    display:flex!important;flex-direction:column!important;align-items:stretch!important;
    gap:13px!important;width:100%!important;margin:0!important;
    padding:30px 0 0!important;background:transparent!important;
    border:0!important;border-top:1px solid rgba(190,222,255,.4)!important;
    color:#eaf3ff!important;
  }
  html body header.top .bar > nav#nav .v217-contact h2 {
    margin:0 0 11px!important;color:#fff!important;
    font-size:clamp(21px,4vw,25px)!important;
    line-height:1.2!important;font-weight:700!important;
  }
  html body header.top .bar > nav#nav .v217-contact .v217-contact-line {
    display:flex!important;align-items:center!important;justify-content:flex-start!important;
    gap:16px!important;min-height:45px!important;
    padding:0!important;margin:0!important;width:100%!important;
    color:#eaf3ff!important;background:transparent!important;
    text-decoration:none!important;line-height:1.4!important;font-size:clamp(15px,3.4vw,19px)!important;
    font-weight:400!important;
  }
  html body header.top .bar > nav#nav .v217-contact-icon {
    display:grid!important;place-items:center!important;flex:0 0 41px!important;
    width:41px!important;height:41px!important;
    background:rgba(107,170,242,.22)!important;border-radius:9px!important;
    color:#fff!important;
  }
  html body header.top .bar > nav#nav .v217-contact-icon svg {
    display:block!important;width:23px!important;height:23px!important;
    stroke:currentColor!important;stroke-width:1.8!important;fill:none!important;
  }
  html body header.top .bar > nav#nav .v217-contact .drawer-socials {
    display:flex!important;align-items:center!important;justify-content:flex-start!important;
    flex-wrap:wrap!important;gap:14px!important;margin:33px 0 0!important;padding:0!important;
  }
  html body header.top .bar > nav#nav .v217-contact .drawer-socials a {
    box-sizing:border-box!important;display:grid!important;place-items:center!important;
    width:47px!important;height:47px!important;padding:12px!important;margin:0!important;
    border:1px solid #b7d9ff!important;border-radius:10px!important;
    background:rgba(5,22,52,.25)!important;color:#fff!important;text-decoration:none!important;
  }
  html body header.top .bar > nav#nav .v217-contact .drawer-socials a svg {
    display:block!important;width:23px!important;height:23px!important;
    fill:currentColor!important;max-width:100%!important;
  }
  html body header.top .bar > nav#nav .v217-contact .drawer-socials a:hover {
    background:rgba(87,148,228,.5)!important;
  }
  html body.v217-drawer-open {overflow:hidden!important;}
  html body.v217-drawer-open header.top button.menu#mb {visibility:hidden!important;pointer-events:none!important;}
}
@media (max-width:420px) {
  html body header.top .bar > nav#nav {padding-inline:22px!important;}
  html body header.top .bar > nav#nav .v217-drawer-header {min-height:106px!important;margin-bottom:12px!important;}
  html body header.top .bar > nav#nav .v217-drawer-brand img {width:165px!important;}
  html body header.top .bar > nav#nav > ul > li > a {min-height:57px!important;padding:12px 10px!important;gap:12px!important;}
  html body header.top .bar > nav#nav .v217-nav-icon {width:24px!important;}
  html body header.top .bar > nav#nav .v217-nav-icon svg {width:23px!important;height:23px!important;}
  html body header.top .bar > nav#nav > a.portal.v217-drawer-portal {margin:18px 0 27px!important;}
}
@media(prefers-reduced-motion:reduce) {
  html body header.top .bar > nav#nav {transition:none!important;}
}