/* Site header: a floating glass pill (logo, links, Free Assessment) under a slim strip with the phone,
   portal and social links. Restyles the existing header markup on every page; font sizes are unchanged.
   assets/site-header.js adds .is-scrolled once the page scrolls and marks the current page's link. */
body.proper-inspired header{
  --hdr-shift:30px;
  position:sticky;top:0;z-index:60;padding:0 16px 8px;
  background:#0d1012!important;border:0!important;
  -webkit-backdrop-filter:none!important;backdrop-filter:none!important;
  transition:background-color .35s ease,transform .35s ease;
}
/* Scrolled: the header slides up by the strip's height (a transform, so the page layout never shifts)
   and only the pill stays in view, floating over the content. */
body.proper-inspired header.is-scrolled{background:transparent!important;transform:translateY(calc(-1 * var(--hdr-shift)));pointer-events:none}
body.proper-inspired header.is-scrolled .wrap.nav{pointer-events:auto}

/* Top strip: phone, portal, socials, lined up with the pill */
body.proper-inspired header .tech-access{background:transparent!important;border:0!important;transition:opacity .25s ease}
body.proper-inspired header .tech-access .wrap{max-width:1240px;padding-inline:26px}
body.proper-inspired header.is-scrolled .tech-access{opacity:0;visibility:hidden}

/* The pill. Its frosted glass sits on a ::before layer so the menus inside can have their own working glass. */
body.proper-inspired header .wrap.nav{
  position:relative;isolation:isolate;
  max-width:1240px;height:70px;margin:2px auto 0;padding:0 10px 0 26px;gap:18px;
  border-radius:999px;background:transparent;
}
body.proper-inspired header .wrap.nav::before{
  content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;
  border:1px solid rgba(255,255,255,.11);background:rgba(16,19,25,.6);
  box-shadow:0 14px 44px -16px rgba(0,0,0,.75),inset 0 1px 0 rgba(255,255,255,.06);
  -webkit-backdrop-filter:blur(18px) saturate(150%);backdrop-filter:blur(18px) saturate(150%);
  transition:background-color .35s ease,box-shadow .35s ease;
}
body.proper-inspired header.is-scrolled .wrap.nav::before{background:rgba(14,17,22,.84);box-shadow:0 18px 50px -14px rgba(0,0,0,.85),inset 0 1px 0 rgba(255,255,255,.07)}
body.proper-inspired header .wrap.nav .logo img{width:148px}

/* Links: soft pill on hover, red-tinted pill for the current page */
body.proper-inspired header .nav-links{gap:4px}
body.proper-inspired header .nav-links>a,
body.proper-inspired header .nav-links>.has-drop>a,
body.proper-inspired header .nav-links .services-trigger{
  display:inline-flex;align-items:center;gap:6px;padding:10px 15px;border-radius:999px;
  color:#c3c8d2;text-decoration:none!important;background:transparent;transition:background-color .2s ease,color .2s ease;
}
body.proper-inspired header .nav-links>a:hover,
body.proper-inspired header .nav-links>.has-drop>a:hover,
body.proper-inspired header .nav-links .services-trigger:hover,
body.proper-inspired header .nav-links .has-drop.open>:is(a,button){color:#fff;background:rgba(255,255,255,.07)}
body.proper-inspired header .nav-links>[aria-current="page"],
body.proper-inspired header .nav-links .is-current{color:#fff;background:rgba(255,49,49,.13);box-shadow:inset 0 0 0 1px rgba(255,49,49,.28)}

/* Free Assessment: red pill with an arrow */
body.proper-inspired.site-preserved header .nav-cta .btn-primary{border-radius:999px;padding-inline:22px;box-shadow:0 6px 22px -8px rgba(220,38,38,.8)}
body.proper-inspired.site-preserved header .nav-cta .btn-primary::after{content:"\2192";margin-left:8px;transition:transform .2s ease}
body.proper-inspired.site-preserved header .nav-cta .btn-primary:hover::after{transform:translateX(3px)}

/* Menus: frosted glass panels */
body.proper-inspired header .dropdown{
  margin-top:14px;border-radius:20px!important;border:1px solid rgba(255,255,255,.1)!important;
  background:rgba(14,17,22,.94)!important;
  -webkit-backdrop-filter:blur(22px) saturate(150%);backdrop-filter:blur(22px) saturate(150%);
  box-shadow:0 30px 70px -24px rgba(0,0,0,.9),inset 0 1px 0 rgba(255,255,255,.05)!important;
}
body.proper-inspired header .dropdown .menu-column>p{font-family:"Geist Mono",ui-monospace,Consolas,monospace;letter-spacing:.14em;text-transform:uppercase;color:#7d8695}
body.proper-inspired header .dropdown .menu-column>p::before{content:"";display:inline-block;width:6px;height:6px;margin:0 9px 2px 0;border-radius:50%;background:#ff3131;vertical-align:middle}
body.proper-inspired header .nav-links .dropdown a[href]{border-radius:12px!important;transition:background-color .2s ease,color .2s ease}
body.proper-inspired header .nav-links .dropdown a[href]:is(:hover,:focus-visible){background:rgba(255,49,49,.09)!important;color:#fff!important}

/* Hover bridge: the glass menus float 26px below their link, so while a menu is open an invisible strip
   (the full width of the menu) fills that gap. Moving the mouse from the link down to the menu keeps it open. */
@media(min-width:861px){
  body.proper-inspired header .nav-links .has-drop.open::before{content:"";position:absolute;top:100%;left:50%;right:auto;width:300px;height:34px;transform:translateX(-50%)}
  body.proper-inspired header .nav-links .services-industries.open::before{width:760px}
}

/* Phones and small tablets: same pill, menu opens as a glass card under it */
@media(max-width:860px){
  body.proper-inspired header{padding:0 10px 8px}
  body.proper-inspired header .tech-access .wrap{padding-inline:14px}
  body.proper-inspired header .wrap.nav{height:62px;padding:0 8px 0 18px;margin-top:0}
  body.proper-inspired header .wrap.nav .logo img{width:118px}
  body.proper-inspired header .navtoggle{border-radius:999px!important;width:44px;height:44px;background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.14)}
  body.proper-inspired.site-preserved header .nav-cta .btn-primary::after{content:none}
  body.proper-inspired header .nav-links{
    top:calc(100% + 10px)!important;border-radius:22px!important;border:1px solid rgba(255,255,255,.1)!important;
    background:rgba(14,17,22,.96)!important;-webkit-backdrop-filter:blur(22px);backdrop-filter:blur(22px);
    box-shadow:0 30px 70px -20px rgba(0,0,0,.9)!important;padding:8px!important;
  }
  body.proper-inspired header .nav-links>a,
  body.proper-inspired header .nav-links>.has-drop>a,
  body.proper-inspired header .nav-links .services-trigger{border-radius:14px;width:100%;justify-content:space-between}
  body.proper-inspired header .dropdown{margin-top:4px;box-shadow:none!important;background:rgba(255,255,255,.03)!important}
}
@media(max-width:480px){
  body.proper-inspired header .wrap.nav .logo img{width:104px}
  body.proper-inspired header .wrap.nav{padding-left:14px;gap:8px}
}
@media(prefers-reduced-motion:reduce){
  body.proper-inspired header,body.proper-inspired header *,body.proper-inspired header *::before,body.proper-inspired header *::after{transition:none!important}
}