/* Parix site header - built from the approved parix-header.html.
   Every rule is scoped to #px-sticky-header (the header) or #pxDrawer (the mobile menu), so it cannot
   touch anything else on the page, and the id outranks theme / Elementor kit styles for a/button/img.
   The design file's page-level resets (*, body, a) are applied only inside the header. */
#px-sticky-header,#pxDrawer{--navy:#1f1c6b; --navy-2:#2b2790; --orange:#f05a1a; --orange-2:#ff7a3d; --ink:#1b1b2f; --muted:#6b6b85; --line:#ececf3; --bg:#ffffff; --soft:#f6f6fb;}
#px-sticky-header,#px-sticky-header *,#px-sticky-header *::before,#px-sticky-header *::after,
#pxDrawer,#pxDrawer *,#pxDrawer *::before,#pxDrawer *::after{box-sizing:border-box;margin:0;padding:0}
#px-sticky-header,#pxDrawer{font-family:Inter,system-ui,sans-serif;color:var(--ink);line-height:normal;letter-spacing:normal;text-transform:none}
/* low-specificity like the design's a{} rule, so component colours (e.g. the white CTA text) still win */
:where(#px-sticky-header,#pxDrawer) a{color:inherit;text-decoration:none}
#px-sticky-header a,#pxDrawer a{text-decoration:none}
#px-sticky-header.px-header{position:sticky;top:0;z-index:100;transition:background .3s,box-shadow .3s,backdrop-filter .3s;background:rgba(255,255,255,1)}
#px-sticky-header.px-header.scrolled{background:rgba(255,255,255,.82);backdrop-filter:saturate(180%) blur(14px);-webkit-backdrop-filter:saturate(180%) blur(14px);box-shadow:0 6px 30px rgba(31,28,107,.08)}
#px-sticky-header .px-wrap{max-width:1480px;margin:0 auto;padding:0 32px;height:84px;display:flex;align-items:center;justify-content:space-between;gap:24px;transition:height .3s}
#px-sticky-header.px-header.scrolled .px-wrap{height:66px}
#px-sticky-header .px-logo{display:inline-flex;align-items:center;flex-shrink:0}
#px-sticky-header .px-brand,#px-sticky-header .px-actions{flex:1 1 0}
#px-sticky-header .px-actions{justify-content:flex-end}
#px-sticky-header .px-logo img{height:clamp(40px,2vw + 14px,52px);width:auto;display:block;transition:height .3s,transform .25s}
#px-sticky-header .px-logo:hover img{transform:translateY(-1px)}
#px-sticky-header.px-header.scrolled .px-logo img{height:40px}
#px-sticky-header .px-nav{display:flex;align-items:center;gap:clamp(0px,0.6vw - 6px,10px)}
#px-sticky-header .px-nav > a,#px-sticky-header .px-nav > .px-dd > a{position:relative;font:500 clamp(15px,0.55vw + 8px,18px) Inter,sans-serif;color:#3a3a52;background:none;border:0;cursor:pointer;
  padding:10px 16px;display:flex;align-items:center;gap:6px;transition:color .2s}
#px-sticky-header .px-nav > a::after,#px-sticky-header .px-nav > .px-dd > a::after{content:"";position:absolute;left:16px;right:16px;bottom:4px;height:2px;
  border-radius:2px;background:var(--orange);transform:scaleX(0);transform-origin:left;transition:transform .25s ease}
#px-sticky-header .px-nav > a:hover,#px-sticky-header .px-nav > .px-dd > a:hover,#px-sticky-header .px-dd.open > a,#px-sticky-header .px-nav > a.active{color:var(--navy)}
#px-sticky-header .px-nav > a:hover::after,#px-sticky-header .px-nav > .px-dd > a:hover::after,#px-sticky-header .px-dd.open > a::after,#px-sticky-header .px-nav > a.active::after{transform:scaleX(1)}
#px-sticky-header .px-nav > a.active{color:var(--orange)}
#px-sticky-header .px-chev,#pxDrawer .px-chev{width:14px;height:14px;transition:transform .25s}
#px-sticky-header .px-dd.open .px-chev{transform:rotate(180deg)}
#px-sticky-header .px-dd{position:relative}
#px-sticky-header .px-mega{position:absolute;top:calc(100% + 14px);left:50%;transform:translate(-50%,6px);width:290px;
  background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:0 18px 40px rgba(31,28,107,.10);padding:8px;
  opacity:0;visibility:hidden;transition:opacity .2s,transform .2s,visibility .2s}
#px-sticky-header .px-mega::before{content:"";position:absolute;top:-16px;left:0;right:0;height:16px}
#px-sticky-header .px-dd.open .px-mega{opacity:1;visibility:visible;transform:translate(-50%,0)}
#px-sticky-header .px-item{display:block;padding:11px 14px;border-radius:10px;transition:background .15s}
#px-sticky-header .px-item span{display:block;font-size:15px;font-weight:500;color:var(--ink);transition:color .15s}
#px-sticky-header .px-item small{display:block;font-size:13px;color:var(--muted);margin-top:2px}
#px-sticky-header .px-item:hover{background:var(--soft)}
#px-sticky-header .px-item:hover span{color:var(--orange)}
#px-sticky-header .px-actions{display:flex;align-items:center;gap:10px}
#px-sticky-header .px-cta,#pxDrawer .px-cta{display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:clamp(15px,0.5vw + 8px,17px);color:#fff;
  padding:clamp(12px,0.4vw + 6px,14px) clamp(20px,1vw + 6px,26px);border-radius:12px;background:var(--orange);
  box-shadow:0 1px 0 rgba(255,255,255,.25) inset,0 6px 16px rgba(240,90,26,.28);transition:background .2s,transform .2s,box-shadow .2s}
#px-sticky-header .px-cta:hover,#pxDrawer .px-cta:hover{background:#e04e10;transform:translateY(-1px);box-shadow:0 1px 0 rgba(255,255,255,.25) inset,0 10px 22px rgba(240,90,26,.36)}
#px-sticky-header .px-cta svg,#pxDrawer .px-cta svg{width:16px;height:16px;transition:transform .2s}
#px-sticky-header .px-cta:hover svg,#pxDrawer .px-cta:hover svg{transform:translateX(3px)}
#px-sticky-header .px-burger{display:none;width:44px;height:44px;border-radius:12px;border:1px solid var(--line);background:#fff;cursor:pointer;position:relative}
#px-sticky-header .px-burger span{position:absolute;left:12px;right:12px;height:2px;background:var(--navy);border-radius:2px;transition:.3s}
#px-sticky-header .px-burger span:nth-child(1){top:15px}
#px-sticky-header .px-burger span:nth-child(2){top:21px}
#px-sticky-header .px-burger span:nth-child(3){top:27px}
body.px-menu-open #px-sticky-header .px-burger span:nth-child(1){top:21px;transform:rotate(45deg)}
body.px-menu-open #px-sticky-header .px-burger span:nth-child(2){opacity:0}
body.px-menu-open #px-sticky-header .px-burger span:nth-child(3){top:21px;transform:rotate(-45deg)}
#pxDrawer.px-drawer{position:fixed;inset:0;top:0;background:#fff;z-index:99;padding:100px 20px 30px;overflow-y:auto;
  transform:translateY(-100%);transition:transform .35s cubic-bezier(.4,0,.2,1)}
body.px-menu-open #pxDrawer.px-drawer{transform:none}
#pxDrawer.px-drawer > a,#pxDrawer .px-acc > button{display:flex;justify-content:space-between;align-items:center;width:100%;
  font:600 18px Inter,sans-serif;color:var(--ink);padding:16px 4px;border:0;border-bottom:1px solid var(--line);background:none;cursor:pointer;text-align:left}
#pxDrawer .px-acc-panel{max-height:0;overflow:hidden;transition:max-height .3s}
#pxDrawer .px-acc.open .px-acc-panel{max-height:600px}
#pxDrawer .px-acc.open .px-chev{transform:rotate(180deg)}
#pxDrawer .px-acc-panel a{display:block;padding:12px 4px 12px 14px;font-size:15px;color:var(--muted)}
#pxDrawer.px-drawer .px-cta{width:100%;justify-content:center;margin-top:24px;padding:15px}
@media (max-width:1280px){
#px-sticky-header .px-nav > a,#px-sticky-header .px-nav > .px-dd > a{padding:10px 11px;font-size:15px}
#px-sticky-header .px-nav > a::after,#px-sticky-header .px-nav > .px-dd > a::after{left:11px;right:11px}
}
@media (max-width:1100px){
#px-sticky-header .px-nav,#px-sticky-header .px-actions .px-cta{display:none}
#px-sticky-header .px-burger{display:block}
#px-sticky-header .px-wrap{padding:0 16px}
}
@media (min-width:1101px){
#pxDrawer.px-drawer{display:none}
}

/* ---- additions needed on the live site (not in the design file) ---- */
/* Services shows active on any /services/ page: the same look the design gives an active link */
#px-sticky-header .px-nav > .px-dd > a.active{color:var(--orange)}
#px-sticky-header .px-nav > .px-dd > a.active::after{transform:scaleX(1)}
#pxDrawer > a.active,#pxDrawer .px-acc > button.active,#pxDrawer .px-acc-panel a.active{color:var(--orange)}
/* theme / kit button defaults that the design file never had to fight */
#px-sticky-header .px-nav > .px-dd > a,#pxDrawer .px-acc > button,#px-sticky-header .px-burger{box-shadow:none;text-transform:none;letter-spacing:normal;min-height:0;line-height:normal}
#px-sticky-header svg,#pxDrawer svg{display:inline-block;flex-shrink:0}
/* logged-in admin bar sits above the sticky header */
body.admin-bar #px-sticky-header{top:32px}
@media (max-width:782px){body.admin-bar #px-sticky-header{top:46px}}
@media (max-width:600px){body.admin-bar #px-sticky-header{top:0}}
/* The theme puts overflow-x:hidden / overflow-y:auto on html and body, which turns body into a
   scroll container and stops position:sticky from working. clip keeps the same horizontal
   clipping without creating a scroll container. */
html,body{overflow-x:clip!important;overflow-y:visible!important}
/* mobile menu open: lock page scroll (the design did this with an inline body style) */
html:has(body.px-menu-open.px-menu-open){overflow:hidden!important}
/* Sticky header height for page elements that pin below it. The Web Development and Mobile App
   pages already offset their sticky panels by var(--px-header-h); 66px = header height once scrolled. */
html{--px-header-h:66px}
/* in-page anchor links land below the sticky header instead of under it */
html{scroll-padding-top:80px}