/* Banner v6: editorial capability stage with open composition and image-led hierarchy. */
.services-page .services-hero {
  min-height: min(720px, calc(100vh - 86px)) !important;
  grid-template-columns: minmax(360px, .84fr) minmax(520px, 1.16fr) !important;
  gap: clamp(48px, 7vw, 120px) !important;
  padding: clamp(76px, 8vw, 126px) 7vw !important;
  background:
    radial-gradient(circle at 80% 30%, rgb(83 185 230 / 15%), transparent 25%),
    linear-gradient(122deg, #fff 0%, #f7fbff 58%, #edf8fd 100%) !important;
}

.services-page .services-hero-copy {
  max-width: 630px !important;
}

.services-page .services-hero-copy::before {
  margin-bottom: 28px !important;
  padding-left: 0 !important;
  color: #2587bc !important;
  border-left: 0 !important;
  font-size: 11px !important;
  letter-spacing: .2em !important;
}

.services-page .services-hero-copy h1 {
  max-width: 590px !important;
  color: #132c4a !important;
  font-size: clamp(54px, 6vw, 92px) !important;
  font-weight: 900 !important;
  line-height: 1.03 !important;
  letter-spacing: -.055em !important;
}

.services-page .services-hero-copy h1 em {
  color: transparent !important;
  background: linear-gradient(110deg, #126fe5 8%, #2c9ee3 52%, #5b65e9 100%) !important;
  background-clip: text !important;
  -webkit-background-clip: text !important;
}

.services-page .services-hero-copy p {
  max-width: 540px !important;
  margin-top: 28px !important;
  color: #627b95 !important;
  font-size: clamp(16px, 1.3vw, 20px) !important;
  line-height: 1.9 !important;
}

.services-page .services-hero-capabilities {
  gap: 12px 26px !important;
  margin-top: 30px !important;
}

.services-page .services-hero-capabilities span {
  color: #376b91 !important;
  font-size: 14px !important;
  font-weight: 800 !important;
}

.services-page .services-hero-action {
  min-height: 54px !important;
  margin-top: 38px !important;
  padding: 0 28px !important;
  border-radius: 10px !important;
  background: linear-gradient(135deg, #1476e8, #15a5d0) !important;
  box-shadow: 0 18px 34px rgb(20 118 232 / 24%) !important;
  font-size: 16px !important;
}

.services-page .services-hero-visual.services-hero-capability-visual {
  width: min(640px, 100%) !important;
  min-height: 520px !important;
  justify-self: end !important;
  background: transparent !important;
}

.services-capability-stage {
  position: relative !important;
  display: block !important;
  min-height: 520px !important;
  overflow: visible !important;
}

.services-capability-stage::before {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 68%;
  height: 34%;
  content: "";
  border-radius: 50%;
  background: linear-gradient(90deg, rgb(212 239 251 / 0%), rgb(203 237 251 / 70%), rgb(212 239 251 / 0%));
  filter: blur(24px);
  transform: translate(-50%, -50%) rotate(-8deg);
}

.services-capability-core {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  z-index: 1 !important;
  display: grid !important;
  width: 172px !important;
  height: 172px !important;
  place-content: center !important;
  gap: 8px !important;
  border: 0 !important;
  border-radius: 38px !important;
  background: linear-gradient(145deg, #fff, #eaf7fd) !important;
  box-shadow: 0 26px 58px rgb(35 113 163 / 18%), inset 0 0 0 1px rgb(255 255 255 / 90%) !important;
  transform: translate(-50%, -50%) rotate(-6deg) !important;
}

.services-capability-core::before {
  content: "DIGITAL";
  color: #76a8c3;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .2em;
  text-align: center;
}

.services-capability-core span {
  color: #146fcb !important;
  font-size: 42px !important;
  font-weight: 900 !important;
  line-height: .9 !important;
  text-align: center !important;
}

.services-capability-core small {
  color: #4c7a99 !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  text-align: center !important;
}

.services-capability-module {
  position: absolute !important;
  z-index: 2 !important;
  display: grid !important;
  grid-template-columns: 78px 1fr !important;
  width: 220px !important;
  min-height: 110px !important;
  align-items: center !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  transform: none !important;
}

.services-capability-module.module-ai { top: 26px !important; left: 0 !important; }
.services-capability-module.module-vision { top: 118px !important; right: 0 !important; }
.services-capability-module.module-software { bottom: 82px !important; left: 12px !important; }
.services-capability-module.module-data { right: 10px !important; bottom: 12px !important; }

.services-capability-module:hover,
.services-capability-module:focus-visible { transform: translateY(-5px) !important; }

.services-capability-module img {
  width: 78px !important;
  height: 82px !important;
  filter: drop-shadow(0 16px 18px rgb(20 118 232 / 18%)) !important;
}

.services-capability-module .module-index {
  top: -2px !important;
  right: auto !important;
  left: 86px !important;
  color: #99b8cb !important;
  font-size: 9px !important;
}

.services-capability-module strong {
  align-self: end !important;
  color: #1c4e71 !important;
  font-size: 16px !important;
  font-weight: 900 !important;
}

.services-capability-module small {
  align-self: start !important;
  margin-top: 5px !important;
  color: #7897ac !important;
  font-size: 11px !important;
  line-height: 1.5 !important;
}

@media (max-width: 900px) {
  .services-page .services-hero { gap: 20px !important; }
  .services-page .services-hero-visual.services-hero-capability-visual { justify-self: center !important; }
}

@media (max-width: 560px) {
  .services-page .services-hero-copy h1 { font-size: clamp(44px, 14vw, 64px) !important; }
  .services-page .services-hero-capabilities { gap: 10px 18px !important; }
  .services-page .services-hero-visual.services-hero-capability-visual { min-height: 420px !important; }
  .services-capability-stage { min-height: 420px !important; }
  .services-capability-core { width: 124px !important; height: 124px !important; border-radius: 28px !important; }
  .services-capability-core span { font-size: 30px !important; }
  .services-capability-core small { font-size: 10px !important; }
  .services-capability-module { grid-template-columns: 52px 1fr !important; width: 152px !important; min-height: 82px !important; }
  .services-capability-module img { width: 52px !important; height: 56px !important; }
  .services-capability-module .module-index { left: 58px !important; font-size: 8px !important; }
  .services-capability-module strong { font-size: 12px !important; }
  .services-capability-module small { font-size: 9px !important; }
  .services-capability-module.module-ai { top: 18px !important; left: 0 !important; }
  .services-capability-module.module-vision { top: 80px !important; right: 0 !important; }
  .services-capability-module.module-software { bottom: 72px !important; left: 0 !important; }
  .services-capability-module.module-data { right: 0 !important; bottom: 8px !important; }
}