/* Xpertspro desktop mega-menu (Capabilities / Solutions) — scoped to desktop navigation.
   Rewritten: consolidated the scattered/overriding rules from earlier passes into one
   source of truth per breakpoint, dropped CSS for markup that no longer exists
   (xpOSLead, xpOSStackCard, xpOSFlow, xpOSNode, xpOSChips, xpOSTerminal(variants),
   xpOSContact, xpOSQuickAside — none of these classes are in index.html any more), fixed the panel
   so it sits a clean 14px below the real header (measured 69px) instead of overlapping
   it, and swapped the terracotta accent for a monochrome/chrome "shine" treatment to
   match the brand's black-and-white direction. The green/blue flow-stage colors on the
   related-capability nodes are left alone — they're a stage indicator, not the brand
   accent, same as the rest of the site. */

@media(min-width:1025px){
  /* ---- Panel shell: fixed, centered on the viewport, anchored below the header ---- */
  body.xpertspro-site .nav .navMenuCapabilities,
  body.xpertspro-site .nav .navMenuSolutions{position:relative}
  body.xpertspro-site .nav,
  body.xpertspro-site .nav.scrolled,
  body.xpertspro-site .nav.geoScrolled{-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
  body.xpertspro-site .nav .navInner{position:static!important}

  body.xpertspro-site .nav .xpMenuOS{
    position:fixed!important;
    top:83px!important; /* real header height (69px) + 14px breathing room — do not overlap the nav */
    left:50%!important;
    right:auto!important;
    width:min(1420px,calc(100vw - 88px))!important;
    max-height:calc(100svh - 110px);
    overflow:auto;
    overscroll-behavior:contain;
    display:block!important;
    padding:0!important;
    border:1px solid rgba(255,255,255,.15)!important;
    border-radius:21px!important;
    color:#f4f2ef;
    background:
      radial-gradient(ellipse at 78% 0%,rgba(255,255,255,.08),transparent 37%),
      linear-gradient(145deg,rgba(17,17,17,.985),rgba(7,7,7,.99))!important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.09),0 30px 90px rgba(0,0,0,.72)!important;
    opacity:0;visibility:hidden;pointer-events:none;
    transform:translate(-50%,6px)!important;
    transition:opacity .2s ease,transform .24s cubic-bezier(.2,.75,.2,1),visibility 0s linear .2s;
    z-index:95!important;
  }
  body.xpertspro-site .navMenuCapabilities:hover>.xpMenuOS,
  body.xpertspro-site .navMenuCapabilities:focus-within>.xpMenuOS,
  body.xpertspro-site .navMenuCapabilities.menuOpen>.xpMenuOS,
  body.xpertspro-site .navMenuSolutions:hover>.xpMenuOS,
  body.xpertspro-site .navMenuSolutions:focus-within>.xpMenuOS,
  body.xpertspro-site .navMenuSolutions.menuOpen>.xpMenuOS{
    opacity:1;visibility:visible;pointer-events:auto;
    transform:translate(-50%,0)!important;
    transition-delay:0s;
  }

  /* ---- Frame grid ---- */
  body.xpertspro-site .xpOSFrame--quick{grid-template-columns:220px minmax(0,1fr) 450px;grid-template-rows:minmax(0,1fr) 42px;min-height:350px;display:grid}

  /* ---- Rail (left: numbered capability list) ---- */
  body.xpertspro-site .xpOSRail{display:flex;flex-direction:column;padding:23px 14px 17px;border-right:1px solid rgba(255,255,255,.09);background:linear-gradient(160deg,rgba(255,255,255,.025),transparent 65%)}
  body.xpertspro-site .xpOSRailLabel{font-size:8px;letter-spacing:.16em;text-transform:uppercase;color:#8c837c;padding:0 8px 15px}
  body.xpertspro-site .xpOSItem{display:grid!important;grid-template-columns:25px minmax(0,1fr) 12px;align-items:center;gap:7px;min-height:39px;margin:2px 0;padding:8px!important;border:1px solid transparent!important;border-radius:9px!important;background:transparent!important;transition:background .2s,border-color .2s,transform .2s}
  body.xpertspro-site .xpOSItem>span{font-size:8px;color:#77716b;font-variant-numeric:tabular-nums}
  body.xpertspro-site .xpOSItem>b{font-size:10px;font-weight:520;color:#aaa49f}
  body.xpertspro-site .xpOSItem>i{font-size:10px;font-style:normal;color:#8c837c;opacity:0;transform:translateX(-3px);transition:.2s}
  body.xpertspro-site .xpOSItem:hover,
  body.xpertspro-site .xpOSItem:focus-visible,
  body.xpertspro-site .xpOSItem.isActive{
    background:linear-gradient(100deg,rgba(255,255,255,.1),rgba(255,255,255,.025))!important;
    border-color:rgba(255,255,255,.2)!important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.07);
    transform:translateX(2px);
  }
  body.xpertspro-site .xpOSItem.isActive>span{color:#f1eeea}
  body.xpertspro-site .xpOSItem.isActive>b,
  body.xpertspro-site .xpOSItem:hover>b{color:#f1eeea}
  body.xpertspro-site .xpOSItem:hover>i,
  body.xpertspro-site .xpOSItem:focus-visible>i,
  body.xpertspro-site .xpOSItem.isActive>i{opacity:1;transform:none;color:#f5f5f2}
  body.xpertspro-site .xpOSRailFoot{display:flex;align-items:center;gap:7px;margin-top:auto;padding:15px 7px 0;border-top:1px solid rgba(255,255,255,.08);color:#77716b;font-size:7px;line-height:1.45;letter-spacing:.1em}
  body.xpertspro-site .xpOSDot{width:5px;height:5px;flex:0 0 5px;border-radius:50%;background:#b9d37a;box-shadow:0 0 11px rgba(185,211,122,.65)}

  /* ---- Main (center: headline, meta, CTA) ---- */
  body.xpertspro-site .xpOSQuickMain{display:flex;flex-direction:column;justify-content:center;position:relative;padding:30px 30px 28px}
  body.xpertspro-site .xpOSMainHead{display:flex;align-items:flex-start;justify-content:space-between;gap:18px}
  body.xpertspro-site .xpOSKicker{font-size:8px;letter-spacing:.16em;text-transform:uppercase;color:#cfcfc9}
  body.xpertspro-site .xpOSQuickMain .xpOSMainHead h2{margin:14px 0 10px;color:#f5f2ef;font-size:clamp(30px,3vw,43px);line-height:1.04;letter-spacing:-.06em;font-weight:620}
  body.xpertspro-site .xpOSQuickMain .xpOSMainHead p{max-width:510px;margin:0;color:#9c9690;font-size:13px;line-height:1.65}
  body.xpertspro-site .xpOSQuickMeta{display:flex;align-items:center;gap:14px;width:100%;max-width:460px;margin-top:27px;padding-top:17px;border-top:1px solid rgba(255,255,255,.1)}
  body.xpertspro-site .xpOSQuickMetaLabel{font-size:8px;letter-spacing:.15em;text-transform:uppercase;color:#cfcfc9}
  body.xpertspro-site .xpOSQuickMeta [data-menu-context]{color:#a7a099;font-size:11px}
  body.xpertspro-site .xpOSQuickAction{display:flex!important;align-items:center;justify-content:space-between;gap:12px;width:100%;max-width:460px;margin-top:20px;padding:12px 0!important;border:0!important;border-bottom:1px solid rgba(255,255,255,.35)!important;border-radius:0!important;background:transparent!important;font-size:11px;transition:border-color .25s}
  body.xpertspro-site .xpOSQuickAction [data-menu-action-label],
  body.xpertspro-site .xpOSQuickAction b{
    background-image:linear-gradient(100deg,#9c9690 0%,#ffffff 28%,#f5f5f2 42%,#9c9690 58%,#ffffff 80%,#9c9690 100%);
    background-size:240% 100%;
    background-position:0 0;
    -webkit-background-clip:text;background-clip:text;color:transparent;
    transition:background-position .7s ease;
  }
  body.xpertspro-site .xpOSQuickAction b{font-size:15px}
  body.xpertspro-site .xpOSQuickAction:hover{border-bottom-color:#fff!important}
  body.xpertspro-site .xpOSQuickAction:hover [data-menu-action-label],
  body.xpertspro-site .xpOSQuickAction:hover b{background-position:100% 0}

  /* ---- Related aside (right: connected-flow diagram) ---- */
  body.xpertspro-site .xpOSRelatedAside{
    display:flex;flex-direction:column;justify-content:center;min-width:0;
    margin-left:28px;padding:24px 22px;
    border-left:0;position:relative;
    background:radial-gradient(ellipse at 100% 0%,rgba(255,255,255,.07),transparent 56%),linear-gradient(160deg,rgba(255,255,255,.022),rgba(0,0,0,.16));
  }
  body.xpertspro-site .xpOSRelatedAside::before{content:"";position:absolute;top:24px;bottom:24px;left:-14px;width:1px;background:rgba(255,255,255,.12);pointer-events:none}
  body.xpertspro-site .xpOSRelatedHead{display:flex;align-items:center;justify-content:space-between;gap:8px}
  body.xpertspro-site .xpOSQuickEyebrow{display:flex;align-items:center;gap:8px;color:#9c9690;font-size:7px;letter-spacing:.13em;text-transform:uppercase}
  body.xpertspro-site .xpOSQuickEyebrow i{width:6px;height:6px;border-radius:50%;background:#b9d37a;box-shadow:0 0 10px rgba(185,211,122,.6)}
  body.xpertspro-site .xpOSRelatedNumber{color:#77716b;font-size:7px;letter-spacing:.1em;font-variant-numeric:tabular-nums}
  body.xpertspro-site .xpOSRelatedIntro{max-width:280px;margin:18px 0 0;color:#aaa39d;font-size:10px;line-height:1.6}

  body.xpertspro-site .xpOSRelatedFlow{display:flex;align-items:center;justify-content:space-between;gap:5px;margin:19px 0 17px}
  body.xpertspro-site .xpOSRelatedNode{min-width:64px;height:57px;flex:0 1 auto;padding:0 8px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;text-align:center;border-radius:11px;border:1px solid rgba(255,255,255,.3);background:linear-gradient(145deg,rgba(255,255,255,.07),rgba(15,14,13,.9))}
  body.xpertspro-site .xpOSRelatedNode b{max-width:none;overflow:visible;text-overflow:clip;color:#e9e9e6;font-size:7px;letter-spacing:.02em;white-space:nowrap}
  body.xpertspro-site .xpOSRelatedNode small{color:#807971;font-size:5px;letter-spacing:.04em}
  body.xpertspro-site .xpOSRelatedNode--green{border-color:rgba(185,211,122,.4);background:linear-gradient(145deg,rgba(185,211,122,.07),rgba(15,14,13,.9))}
  body.xpertspro-site .xpOSRelatedNode--green b{color:#c3d98d}
  body.xpertspro-site .xpOSRelatedNode--blue{border-color:rgba(136,190,196,.38);background:linear-gradient(145deg,rgba(136,190,196,.07),rgba(15,14,13,.9))}
  body.xpertspro-site .xpOSRelatedNode--blue b{color:#9dcbd0}
  body.xpertspro-site .xpOSRelatedLine{height:1px;min-width:8px;flex:1;background:linear-gradient(90deg,rgba(255,255,255,.55),rgba(185,211,122,.7));box-shadow:0 0 8px rgba(255,255,255,.13)}

  body.xpertspro-site .xpOSRelatedServices{padding-top:13px;border-top:1px solid rgba(255,255,255,.09)}
  body.xpertspro-site .xpOSRelatedServicesLabel{color:#8c837c;font-size:7px;letter-spacing:.13em;text-transform:uppercase}
  body.xpertspro-site .xpOSRelatedServices [data-related-tags]{display:flex;flex-wrap:wrap;gap:5px;margin-top:9px}
  body.xpertspro-site .xpOSRelatedServices [data-related-tags] span{padding:5px 7px;border:1px solid rgba(255,255,255,.1);border-radius:999px;background:rgba(255,255,255,.025);color:#aaa39d;font-size:7px}

  /* ---- Footer ---- */
  body.xpertspro-site .xpOSFooter{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:14px;padding:0 22px;border-top:1px solid rgba(255,255,255,.09);background:rgba(255,255,255,.018);color:#77716b;font-size:7px;letter-spacing:.16em;text-transform:uppercase}
  body.xpertspro-site .xpOSFooter a{display:inline-flex;align-items:center;color:#cfcfc9;font-size:7px;letter-spacing:.08em}
  body.xpertspro-site .xpOSFooter a b{margin-left:5px;font-size:10px;font-weight:400}
}

@media(prefers-reduced-motion:reduce){
  body.xpertspro-site .nav .xpMenuOS,
  body.xpertspro-site .xpOSItem,
  body.xpertspro-site .xpOSQuickAction [data-menu-action-label],
  body.xpertspro-site .xpOSQuickAction b{transition:none!important}
}

/* ---- Compact desktop (narrower laptop widths) ---- */
@media(min-width:1025px) and (max-width:1260px){
  body.xpertspro-site .nav .xpMenuOS{width:calc(100vw - 48px)!important}
  body.xpertspro-site .xpOSFrame--quick{grid-template-columns:190px minmax(0,1fr) 380px;min-height:340px}
  body.xpertspro-site .xpOSQuickMain{padding:26px 24px 24px}
  body.xpertspro-site .xpOSQuickMain .xpOSMainHead h2{font-size:29px}
  body.xpertspro-site .xpOSQuickMeta,
  body.xpertspro-site .xpOSQuickAction{max-width:400px}
  body.xpertspro-site .xpOSRelatedAside{margin-left:24px;padding-inline:17px}
  body.xpertspro-site .xpOSRelatedAside::before{left:-12px}
  body.xpertspro-site .xpOSRelatedIntro{font-size:9px}
  body.xpertspro-site .xpOSRelatedNode{min-width:56px;padding:0 6px}
  body.xpertspro-site .xpOSRelatedNode b{font-size:6px}
}

/* ---- Fallback: below the breakpoint the desktop trigger can show, the nav collapses
   into the mobile drawer (site.css hides .navMenuItem at max-width:1050px), so this
   mega panel never renders there. No stacked layout needed. ---- */

/* ════════════════════════════════════════════════════════════════
   Hero — headline → lead → buttons spacing
   The gap between the lead paragraph and the two buttons was too big:
   the lead's margin-bottom and the .actions margin-top were stacking
   (~60px on a laptop, up to ~84px on tall screens), far more than the
   eyebrow → headline (~20-25px) and headline → lead (~22-28px) gaps,
   so the buttons floated away from the copy they belong to.
   Now there is a single source for that gap: the lead has no bottom
   margin and .actions sits 28-36px below it (tablet: 28px). The
   rhythm grows slightly toward the CTA (22 → 28 → 36), which keeps the
   copy and its buttons visually grouped. Mobile (<=720px) is untouched.
   ════════════════════════════════════════════════════════════════ */
@media(min-width:721px){
  body.xpertspro-site .hero .heroCopy .heroLead{margin-bottom:0!important}
}
@media(min-width:721px) and (max-width:1024px){
  body.xpertspro-site .hero .heroCopy .actions{margin-top:28px!important}
}
@media(min-width:1025px){
  body.xpertspro-site .hero .heroCopy .actions{margin-top:clamp(28px,4vh,36px)!important}
}

/* ════════════════════════════════════════════════════════════════
   Footer social icons — box tiles + sleek monochrome gradient hover
   (overrides the circular style in site.css; this file loads after it).
   Stays inside the site's black / grey palette (same language as the
   mega-menu rail hover), no colour accents.
   ════════════════════════════════════════════════════════════════ */
body.xpertspro-site .footer .footerSocial{gap:12px}
body.xpertspro-site .footer .footerSocial a{
  position:relative;isolation:isolate;
  display:inline-flex;align-items:center;justify-content:center;
  width:42px;height:42px;
  border:1px solid rgba(255,255,255,.12);border-radius:9px;
  color:#a9aaa6;background:rgba(255,255,255,.025);text-decoration:none;
  transition:color .25s,border-color .25s,box-shadow .25s,transform .25s cubic-bezier(.2,.8,.2,1);
}
/* graphite gradient fill (grey → black), fades in on hover / focus */
body.xpertspro-site .footer .footerSocial a::before{
  content:"";position:absolute;inset:0;border-radius:inherit;
  background:linear-gradient(145deg,#3b3b3d 0%,#1d1d1f 48%,#0b0b0c 100%);
  background-size:180% 180%;background-position:0% 0%;
  opacity:0;transition:opacity .25s,background-position .6s ease;
  pointer-events:none;z-index:-1;
}
/* very faint white halo behind the tile */
body.xpertspro-site .footer .footerSocial a::after{
  content:"";position:absolute;inset:-2px;border-radius:12px;
  background:linear-gradient(135deg,rgba(255,255,255,.2),rgba(255,255,255,.03));
  filter:blur(12px);opacity:0;transition:opacity .3s;
  pointer-events:none;z-index:-2;
}
body.xpertspro-site .footer .footerSocial a:hover,
body.xpertspro-site .footer .footerSocial a:focus-visible{
  color:#f5f5f2;border-color:rgba(255,255,255,.3);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14);
  transform:translateY(-2px);
}
body.xpertspro-site .footer .footerSocial a:hover::before,
body.xpertspro-site .footer .footerSocial a:focus-visible::before{opacity:1;background-position:100% 100%}
body.xpertspro-site .footer .footerSocial a:hover::after,
body.xpertspro-site .footer .footerSocial a:focus-visible::after{opacity:.6}
@media(prefers-reduced-motion:reduce){
  body.xpertspro-site .footer .footerSocial a,
  body.xpertspro-site .footer .footerSocial a::before{transition:none}
}