/* Refinements: stronger readability, a persistent navigation and a richer D365 orbit. */
body { font-size: 17px; }

.site-header {
  position: fixed;
  height: 82px;
  background: rgba(7, 21, 37, .88);
  backdrop-filter: blur(14px);
  border-bottom-color: rgba(255,255,255,.14);
}
.site-header nav, .header-cta { font-size: 13px; }
.brand { font-size: 13px; }
.brand span { font-size: 23px; }
.hero { padding-top: 136px; }
.section-label, .eyebrow { font-size: 12px; }
.hero-side p, .intro-copy > p:last-child, .capability-head p, .cases-heading p, .insights-head p { font-size: 16px; }
.services p, .case p, .role, .about-text { font-size: 14px; }
.services ul, .case-note, .hero-footer, .availability { font-size: 11px; }

/* The lime accent is reserved for dark surfaces. On this pale section, teal has enough contrast. */
.capability-head em { color: #067a86; }
.capabilities .section-label { color: #345766; }
.tags span { color: #17344a; font-size: 12px; }

.services article {
  position: relative;
  transition: transform .28s ease, background-color .28s ease, box-shadow .28s ease;
}
.services article:hover {
  background: var(--ink);
  color: white;
  transform: translateY(-12px);
  box-shadow: 0 18px 32px rgba(7,21,37,.18);
}
.services article:hover p { color: #c5d0d9; }
.services article:hover .number { color: var(--aqua); }
.services article:hover h2 i { color: var(--lime); }
.services article:hover ul { color: #d2e0e7; }
.services article:hover li:before { color: var(--lime); }

.hero-orbit { height: 270px; margin-top: 8px; position: relative; }
.hero-orbit:before { display: none; }
.orbit { position: absolute; border: 1px solid rgba(255,255,255,.24); border-radius: 50%; transform: rotate(-10deg); }
.orbit-one { inset: 12px 4% -70px 17%; }
.orbit-two { inset: 43px 15% -34px 30%; transform: rotate(12deg); border-color: rgba(104,234,215,.26); }
.orbit-three { inset: 76px 30% -3px 40%; transform: rotate(-22deg); border-color: rgba(201,255,74,.25); }
.orbit-core { left: 51%; top: 37%; width: 122px; height: 122px; z-index: 3; box-shadow: 0 0 0 12px rgba(104,234,215,.08), 0 0 36px rgba(104,234,215,.35); }
.orbit-core small { font: 8px "DM Mono", monospace; letter-spacing: 1.2px; margin-bottom: 4px; }
.planet { position: absolute; z-index: 2; display: grid; place-items: center; border-radius: 50%; font: 9px "DM Mono", monospace; letter-spacing: .6px; color: var(--ink); box-shadow: 0 7px 19px rgba(0,0,0,.25); }
.planet:after { content: ""; position: absolute; border: 1px solid rgba(255,255,255,.6); inset: 5px; border-radius: 50%; }
.planet span { z-index: 1; font-weight: 500; }
.planet-azure { width: 42px; height: 42px; left: 28%; top: 38%; background: #5d9df4; }
.planet-ai { width: 62px; height: 62px; right: 15%; top: 11%; background: var(--lime); font-size: 13px; }
.planet-data { width: 35px; height: 35px; right: 7%; bottom: 9%; background: #d4a9ef; }
.planet-devops { width: 46px; height: 46px; left: 42%; bottom: 3%; background: #ffb85c; font-size: 8px; }
.planet-xpp { width: 32px; height: 32px; right: 34%; top: 29%; background: #ff8f8f; }
.planet-power { width: 38px; height: 38px; left: 72%; bottom: 29%; background: #8fe1ce; font-size: 8px; }

@media (max-width: 760px) {
  .site-header { height: 68px; }
  .site-header.menu-open nav { top: 68px; background: rgba(7,21,37,.98); }
  .hero { padding-top: 103px; }
  .hero-orbit { height: 230px; margin-top: 12px; }
  .orbit-core { left: 43%; top: 35%; width: 92px; height: 92px; }
  .orbit-core b { font-size: 22px; }
  .orbit-one { inset: 12px -20% -20px 5%; }
  .orbit-two { inset: 40px 2% 0 22%; }
  .orbit-three { inset: 75px 18% 21px 35%; }
  .planet-ai { right: 4%; top: 12%; width: 48px; height: 48px; }
  .planet-azure { left: 8%; top: 40%; }
  .planet-data { right: 2%; bottom: 12%; }
  .planet-devops { left: 33%; bottom: 2%; }
  .planet-xpp { right: 35%; top: 19%; }
  .planet-power { left: 70%; bottom: 31%; }
  .services article:hover { transform: none; }
}