/* Keep the four service controls and their detail panels futuristic, but crisp. */
.services .service-list article[role="button"] {
  background: linear-gradient(102deg, rgba(14, 32, 45, .56), rgba(5, 10, 15, .18)) !important;
  border-color: rgba(128, 204, 244, .26) !important;
  box-shadow: inset 1px 0 0 rgba(196, 238, 255, .15), 0 10px 24px rgba(0, 0, 0, .22) !important;
  filter: none !important;
}

.services .service-list article[role="button"]:hover,
.services .service-list article[role="button"]:focus-visible {
  box-shadow: inset 1px 0 0 rgba(207, 244, 255, .26), 0 12px 28px rgba(23, 121, 180, .18) !important;
}

.services .service-list article[role="button"] h3,
.services .service-list article[role="button"] span,
.services .service-list article[role="button"] b {
  color: #e9f8ff !important;
  filter: none !important;
  text-shadow: 0 1px 1px rgba(0, 0, 0, .86), 0 0 5px rgba(72, 183, 242, .32) !important;
}

.services .service-list article[role="button"] p {
  color: #c8dce7 !important;
  filter: none !important;
  text-shadow: 0 1px 1px rgba(0, 0, 0, .82), 0 0 4px rgba(85, 183, 235, .18) !important;
}

.service-modal {
  backdrop-filter: blur(7px) !important;
}

.service-panel {
  border-color: rgba(142, 216, 251, .34) !important;
  box-shadow: 0 18px 46px rgba(0, 0, 0, .52), 0 0 24px rgba(36, 151, 223, .16) !important;
  filter: none !important;
}

.service-panel .eyebrow,
.service-panel h2,
.service-panel h2 em,
.service-panel .service-intro,
.service-panel .service-options strong,
.service-panel .service-options span,
.service-panel .service-support {
  filter: none !important;
}

.service-panel .eyebrow,
.service-panel h2,
.service-panel h2 em {
  text-shadow: 0 1px 1px rgba(0, 0, 0, .92), 0 0 6px rgba(74, 187, 245, .42), 0 0 13px rgba(39, 138, 211, .20) !important;
}

.service-panel .service-intro,
.service-panel .service-options strong,
.service-panel .service-options span,
.service-panel .service-support {
  text-shadow: 0 1px 1px rgba(0, 0, 0, .85), 0 0 4px rgba(78, 180, 232, .18) !important;
}

/* These selectors intentionally outrank the older highlighted-heading rules. */
#service-modal .service-panel h2,
#service-modal .service-panel h2 em,
#brand-modal .service-panel h2,
#brand-modal .service-panel h2 em,
#growth-modal .service-panel h2,
#growth-modal .service-panel h2 em,
#advertising-modal .service-panel h2,
#advertising-modal .service-panel h2 em {
  text-shadow: 0 1px 1px rgba(0, 0, 0, .92), 0 0 6px rgba(74, 187, 245, .42), 0 0 13px rgba(39, 138, 211, .20) !important;
}
