/* CloudTen R1.8.10 — Static Shell + Services Mega Menu Stabilization
   Base global-header geometry remains R1.8.6.
   This file only controls the Services mega menu and its responsive presentation. */

/* Stable dropdown anchor under the complete sticky header (top bar + navigation row). */
header.cloudten-global-header.sticky > .site-container,
body.cloudten-global-header-r185 > header.sticky > .site-container{position:relative}
header.cloudten-global-header.sticky nav[aria-label="Primary navigation"] > .group,
body.cloudten-global-header-r185 > header.sticky nav[aria-label="Primary navigation"] > .group{position:relative!important}

/* Generous invisible hover corridor between Services and the fixed dropdown. */
header.cloudten-global-header.sticky nav[aria-label="Primary navigation"] > .group::after,
body.cloudten-global-header-r185 > header.sticky nav[aria-label="Primary navigation"] > .group::after{
  content:"";position:absolute;left:-2.25rem;right:-2.25rem;top:calc(100% - 3px);height:2.2rem;background:transparent;pointer-events:auto
}

/* Desktop: 70% viewport width, centered on the page, directly below the header. */
header.cloudten-global-header.sticky nav[aria-label="Primary navigation"] > .group > div,
body.cloudten-global-header-r185 > header.sticky nav[aria-label="Primary navigation"] > .group > div{
  position:fixed!important;left:50%!important;right:auto!important;top:6.72rem!important;
  width:70vw!important;max-width:1260px!important;min-width:780px!important;padding-top:.55rem!important;
  transform:translate(-50%,-5px)!important;visibility:hidden!important;opacity:0!important;pointer-events:none!important;
  z-index:150!important;transition:opacity .18s ease,transform .18s ease,visibility 0s linear .95s!important
}
header.cloudten-global-header.sticky nav[aria-label="Primary navigation"] > .group:hover > div,
header.cloudten-global-header.sticky nav[aria-label="Primary navigation"] > .group:focus-within > div,
header.cloudten-global-header.sticky nav[aria-label="Primary navigation"] > .group.cloudten-mega-open > div,
body.cloudten-global-header-r185 > header.sticky nav[aria-label="Primary navigation"] > .group:hover > div,
body.cloudten-global-header-r185 > header.sticky nav[aria-label="Primary navigation"] > .group:focus-within > div,
body.cloudten-global-header-r185 > header.sticky nav[aria-label="Primary navigation"] > .group.cloudten-mega-open > div{
  visibility:visible!important;opacity:1!important;pointer-events:auto!important;transform:translate(-50%,0)!important;transition-delay:0s!important
}

/* One container: mini hero followed by the 4 x 2 card grid. */
header.cloudten-global-header.sticky nav[aria-label="Primary navigation"] > .group > div > div,
body.cloudten-global-header-r185 > header.sticky nav[aria-label="Primary navigation"] > .group > div > div{
  display:grid!important;grid-template-columns:1fr!important;gap:.65rem!important;
  max-height:calc(100vh - 7.55rem)!important;overflow-y:auto!important;overflow-x:hidden!important;overscroll-behavior:contain;
  padding:.75rem!important;border:1px solid #d4e9f4!important;border-radius:1.25rem!important;background:#fff!important;
  box-shadow:0 30px 80px rgba(4,42,78,.24)!important;scrollbar-width:thin;scrollbar-color:#b9dff1 transparent
}

/* Compact full-width mini hero. */
header.cloudten-global-header.sticky nav[aria-label="Primary navigation"] > .group > div > div > div:first-child,
body.cloudten-global-header-r185 > header.sticky nav[aria-label="Primary navigation"] > .group > div > div > div:first-child{
  grid-column:1/-1!important;display:grid!important;grid-template-columns:auto minmax(0,1fr) auto!important;
  align-items:center!important;gap:.85rem!important;min-height:58px!important;padding:.68rem .9rem!important;border-radius:.9rem!important;color:#fff!important;
  background:linear-gradient(90deg,rgba(4,26,51,.98),rgba(5,74,123,.91) 58%,rgba(7,87,166,.78)),url('/cloudten-innovation.webp') center 43%/cover no-repeat!important
}
header.cloudten-global-header.sticky nav[aria-label="Primary navigation"] > .group > div > div > div:first-child p:first-child,
body.cloudten-global-header-r185 > header.sticky nav[aria-label="Primary navigation"] > .group > div > div > div:first-child p:first-child{
  margin:0!important;color:#8beaff!important;font-size:.64rem!important;font-weight:850!important;letter-spacing:.15em!important;white-space:nowrap!important;text-transform:uppercase!important
}
header.cloudten-global-header.sticky nav[aria-label="Primary navigation"] > .group > div > div > div:first-child p:nth-child(2),
body.cloudten-global-header-r185 > header.sticky nav[aria-label="Primary navigation"] > .group > div > div > div:first-child p:nth-child(2){
  margin:0!important;color:#fff!important;font-size:.91rem!important;line-height:1.3!important;font-weight:800!important
}
header.cloudten-global-header.sticky nav[aria-label="Primary navigation"] > .group > div > div > div:first-child p:nth-child(3),
body.cloudten-global-header-r185 > header.sticky nav[aria-label="Primary navigation"] > .group > div > div > div:first-child p:nth-child(3){display:none!important}
header.cloudten-global-header.sticky nav[aria-label="Primary navigation"] > .group > div > div > div:first-child a,
body.cloudten-global-header-r185 > header.sticky nav[aria-label="Primary navigation"] > .group > div > div > div:first-child a{
  display:inline-flex!important;align-items:center!important;margin:0!important;padding:.48rem .72rem!important;border:1px solid rgba(255,255,255,.35)!important;
  border-radius:999px!important;background:rgba(255,255,255,.11)!important;color:#e7faff!important;text-decoration:none!important;font-size:.69rem!important;font-weight:800!important;white-space:nowrap!important
}

/* Exactly 4 columns x 2 rows on standard wide desktop. */
header.cloudten-global-header.sticky nav[aria-label="Primary navigation"] > .group > div > div > div:nth-child(2),
body.cloudten-global-header-r185 > header.sticky nav[aria-label="Primary navigation"] > .group > div > div > div:nth-child(2),
header.cloudten-global-header.sticky .cloudten-mega-card-grid,
body.cloudten-global-header-r185 > header.sticky .cloudten-mega-card-grid{
  display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:.6rem!important;width:100%!important;align-items:stretch!important
}

/* Legacy visible-HTML anchors become robust visual cards without changing DOM/RSC. */
header.cloudten-global-header.sticky nav[aria-label="Primary navigation"] > .group > div > div > div:nth-child(2) > a,
body.cloudten-global-header-r185 > header.sticky nav[aria-label="Primary navigation"] > .group > div > div > div:nth-child(2) > a{
  display:flex!important;flex-direction:column!important;align-items:stretch!important;justify-content:flex-start!important;gap:.35rem!important;
  min-width:0!important;min-height:136px!important;height:auto!important;overflow:hidden!important;padding:0 .65rem .65rem!important;
  border:1px solid #d8eaf4!important;border-radius:.85rem!important;background:#fff!important;color:#23415f!important;text-decoration:none!important;
  font-size:.75rem!important;font-weight:850!important;line-height:1.26!important;box-shadow:0 7px 18px rgba(7,54,94,.055)!important;
  transition:transform .17s ease,box-shadow .17s ease,border-color .17s ease!important
}
header.cloudten-global-header.sticky nav[aria-label="Primary navigation"] > .group > div > div > div:nth-child(2) > a:hover,
body.cloudten-global-header-r185 > header.sticky nav[aria-label="Primary navigation"] > .group > div > div > div:nth-child(2) > a:hover{
  transform:translateY(-2px)!important;border-color:#9dd9f3!important;box-shadow:0 13px 26px rgba(7,54,94,.12)!important;color:#0757a6!important
}
header.cloudten-global-header.sticky nav[aria-label="Primary navigation"] > .group > div > div > div:nth-child(2) > a > span:first-child,
body.cloudten-global-header-r185 > header.sticky nav[aria-label="Primary navigation"] > .group > div > div > div:nth-child(2) > a > span:first-child{
  display:block!important;width:calc(100% + 1.3rem)!important;height:54px!important;min-height:54px!important;flex:0 0 54px!important;margin:0 -.65rem!important;
  border-radius:0!important;background-position:center!important;background-size:cover!important;background-repeat:no-repeat!important;color:transparent!important
}
header.cloudten-global-header.sticky nav[aria-label="Primary navigation"] > .group > div > div > div:nth-child(2) > a > span:first-child svg,
body.cloudten-global-header-r185 > header.sticky nav[aria-label="Primary navigation"] > .group > div > div > div:nth-child(2) > a > span:first-child svg{opacity:0!important}

header.cloudten-global-header.sticky nav[aria-label="Primary navigation"] > .group > div > div > div:nth-child(2) > a::after,
body.cloudten-global-header-r185 > header.sticky nav[aria-label="Primary navigation"] > .group > div > div > div:nth-child(2) > a::after{
  display:block!important;margin-top:auto!important;font-size:.61rem!important;line-height:1.38!important;font-weight:550!important;color:#687e92!important
}
/* Card imagery + concise descriptions. */
header.cloudten-global-header.sticky nav[aria-label="Primary navigation"] > .group > div > div > div:nth-child(2) > a:nth-child(1) > span:first-child,body.cloudten-global-header-r185 > header.sticky nav[aria-label="Primary navigation"] > .group > div > div > div:nth-child(2) > a:nth-child(1) > span:first-child{background-image:url('/cloudten-connectivity.webp')!important}
header.cloudten-global-header.sticky nav[aria-label="Primary navigation"] > .group > div > div > div:nth-child(2) > a:nth-child(2) > span:first-child,body.cloudten-global-header-r185 > header.sticky nav[aria-label="Primary navigation"] > .group > div > div > div:nth-child(2) > a:nth-child(2) > span:first-child{background-image:url('/cloudten-facilities.webp')!important}
header.cloudten-global-header.sticky nav[aria-label="Primary navigation"] > .group > div > div > div:nth-child(2) > a:nth-child(3) > span:first-child,body.cloudten-global-header-r185 > header.sticky nav[aria-label="Primary navigation"] > .group > div > div > div:nth-child(2) > a:nth-child(3) > span:first-child{background-image:url('/cloudten-cybersecurity.webp')!important}
header.cloudten-global-header.sticky nav[aria-label="Primary navigation"] > .group > div > div > div:nth-child(2) > a:nth-child(4) > span:first-child,body.cloudten-global-header-r185 > header.sticky nav[aria-label="Primary navigation"] > .group > div > div > div:nth-child(2) > a:nth-child(4) > span:first-child{background-image:url('/cloudten-green-energy-solutions-r1-8-10-20260919.svg')!important}
header.cloudten-global-header.sticky nav[aria-label="Primary navigation"] > .group > div > div > div:nth-child(2) > a:nth-child(5) > span:first-child,body.cloudten-global-header-r185 > header.sticky nav[aria-label="Primary navigation"] > .group > div > div > div:nth-child(2) > a:nth-child(5) > span:first-child{background-image:url('/cloudten-keyboard.webp')!important}
header.cloudten-global-header.sticky nav[aria-label="Primary navigation"] > .group > div > div > div:nth-child(2) > a:nth-child(6) > span:first-child,body.cloudten-global-header-r185 > header.sticky nav[aria-label="Primary navigation"] > .group > div > div > div:nth-child(2) > a:nth-child(6) > span:first-child{background-image:url('/cloudten-collaboration.webp')!important}
header.cloudten-global-header.sticky nav[aria-label="Primary navigation"] > .group > div > div > div:nth-child(2) > a:nth-child(7) > span:first-child,body.cloudten-global-header-r185 > header.sticky nav[aria-label="Primary navigation"] > .group > div > div > div:nth-child(2) > a:nth-child(7) > span:first-child{background-image:url('/cloudten-hardware-repair.webp')!important}
header.cloudten-global-header.sticky nav[aria-label="Primary navigation"] > .group > div > div > div:nth-child(2) > a:nth-child(8) > span:first-child,body.cloudten-global-header-r185 > header.sticky nav[aria-label="Primary navigation"] > .group > div > div > div:nth-child(2) > a:nth-child(8) > span:first-child{background-image:url('/cloudten-innovation.webp')!important}
header.cloudten-global-header.sticky nav[aria-label="Primary navigation"] > .group > div > div > div:nth-child(2) > a:nth-child(1)::after,body.cloudten-global-header-r185 > header.sticky nav[aria-label="Primary navigation"] > .group > div > div > div:nth-child(2) > a:nth-child(1)::after{content:'Campus, branch, wireless and voice connectivity.'}
header.cloudten-global-header.sticky nav[aria-label="Primary navigation"] > .group > div > div > div:nth-child(2) > a:nth-child(2)::after,body.cloudten-global-header-r185 > header.sticky nav[aria-label="Primary navigation"] > .group > div > div > div:nth-child(2) > a:nth-child(2)::after{content:'Cloud platforms, hosting, backup and resilient infrastructure.'}
header.cloudten-global-header.sticky nav[aria-label="Primary navigation"] > .group > div > div > div:nth-child(2) > a:nth-child(3)::after,body.cloudten-global-header-r185 > header.sticky nav[aria-label="Primary navigation"] > .group > div > div > div:nth-child(2) > a:nth-child(3)::after{content:'Risk reduction, monitoring, assurance and incident readiness.'}
header.cloudten-global-header.sticky nav[aria-label="Primary navigation"] > .group > div > div > div:nth-child(2) > a:nth-child(4)::after,body.cloudten-global-header-r185 > header.sticky nav[aria-label="Primary navigation"] > .group > div > div > div:nth-child(2) > a:nth-child(4)::after{content:'Solar, power backup and energy-efficient operational systems.'}
header.cloudten-global-header.sticky nav[aria-label="Primary navigation"] > .group > div > div > div:nth-child(2) > a:nth-child(5)::after,body.cloudten-global-header-r185 > header.sticky nav[aria-label="Primary navigation"] > .group > div > div > div:nth-child(2) > a:nth-child(5)::after{content:'Custom software, portals, automation and integrations.'}
header.cloudten-global-header.sticky nav[aria-label="Primary navigation"] > .group > div > div > div:nth-child(2) > a:nth-child(6)::after,body.cloudten-global-header-r185 > header.sticky nav[aria-label="Primary navigation"] > .group > div > div > div:nth-child(2) > a:nth-child(6)::after{content:'Advisory, helpdesk, procurement and managed IT support.'}
header.cloudten-global-header.sticky nav[aria-label="Primary navigation"] > .group > div > div > div:nth-child(2) > a:nth-child(7)::after,body.cloudten-global-header-r185 > header.sticky nav[aria-label="Primary navigation"] > .group > div > div > div:nth-child(2) > a:nth-child(7)::after{content:'Device supply, repair, maintenance and lifecycle services.'}
header.cloudten-global-header.sticky nav[aria-label="Primary navigation"] > .group > div > div > div:nth-child(2) > a:nth-child(8)::after,body.cloudten-global-header-r185 > header.sticky nav[aria-label="Primary navigation"] > .group > div > div > div:nth-child(2) > a:nth-child(8)::after{content:'Cross-sector digital solutions built around institutional growth.'}

/* Mid-size desktops remain usable; wide desktop above stays 4 x 2 exactly. */
@media(max-width:1180px) and (min-width:921px){
  header.cloudten-global-header.sticky nav[aria-label="Primary navigation"] > .group > div,
  body.cloudten-global-header-r185 > header.sticky nav[aria-label="Primary navigation"] > .group > div{width:88vw!important;min-width:0!important}
  header.cloudten-global-header.sticky nav[aria-label="Primary navigation"] > .group > div > div > div:nth-child(2),
  body.cloudten-global-header-r185 > header.sticky nav[aria-label="Primary navigation"] > .group > div > div > div:nth-child(2){grid-template-columns:repeat(2,minmax(0,1fr))!important}
}
@media(max-width:920px){
  header.cloudten-global-header.sticky nav[aria-label="Primary navigation"] > .group > div,
  body.cloudten-global-header-r185 > header.sticky nav[aria-label="Primary navigation"] > .group > div{display:none!important}
}