.cloud-foundation-page .service-detail-hero h1 em {
  color: #23835e;
  background: none;
}

[data-theme="cloud"] .cloud-foundation-page .service-detail-hero h1 em {
  color: #8bd5ae;
  background: none;
}

.cloud-foundation-page .service-detail-content {
  border-color: color-mix(in srgb, #23835e 20%, var(--line));
  background: linear-gradient(145deg, color-mix(in srgb, #23835e 4%, var(--surface)), var(--surface) 48%);
  position: relative;
  overflow: hidden;
  transition: transform 200ms ease, border-color 200ms ease, background-color 200ms ease, box-shadow 200ms ease;
}

.cloud-foundation-page .service-detail-content::before {
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: #23835e;
  content: "";
  opacity: 1;
  transform: scaleX(1);
  transform-origin: left;
  transition: opacity 200ms ease, transform 200ms ease, height 200ms ease;
}

.cloud-foundation-page .service-detail-content:is(:hover, :focus-within) {
  transform: translateY(-5px);
  border-color: #23835e;
  background: linear-gradient(145deg, color-mix(in srgb, #23835e 12%, var(--surface)), color-mix(in srgb, #23835e 4%, var(--surface)) 62%);
  box-shadow: 0 16px 34px color-mix(in srgb, #23835e 18%, transparent);
}

.cloud-foundation-page .service-detail-content:is(:hover, :focus-within)::before {
  height: 5px;
  transform: scaleX(1);
}

.cloud-foundation-page .service-card-heading { color: color-mix(in srgb, #23835e 76%, var(--ink)); }
.cloud-foundation-page .service-card-icon {
  width: 52px;
  height: 52px;
  flex-basis: 52px;
  padding: 13px;
  border-color: color-mix(in srgb, #23835e 18%, var(--line));
  border-radius: 14px;
  color: #23835e;
  background: #e7f4ec;
}
.service-detail-main.cloud-foundation-page .service-detail-content:is(:hover, :focus-within) .service-card-icon {
  border-color: transparent;
  color: #fff;
  background: #23835e;
  box-shadow: 0 5px 12px color-mix(in srgb, #23835e 26%, transparent);
}

[data-theme="cloud"] .cloud-foundation-page .service-detail-content {
  border-color: color-mix(in srgb, #8bd5ae 20%, var(--line));
  background: linear-gradient(145deg, color-mix(in srgb, #8bd5ae 6%, var(--surface)), var(--surface) 52%);
}
[data-theme="cloud"] .cloud-foundation-page .service-detail-content::before { background: #8bd5ae; }
[data-theme="cloud"] .cloud-foundation-page .service-detail-content:is(:hover, :focus-within) {
  border-color: #8bd5ae;
  background: linear-gradient(145deg, color-mix(in srgb, #8bd5ae 15%, var(--surface)), color-mix(in srgb, #8bd5ae 6%, var(--surface)) 62%);
  box-shadow: 0 16px 34px color-mix(in srgb, #8bd5ae 16%, transparent);
}
[data-theme="cloud"] .cloud-foundation-page .service-card-heading { color: #8bd5ae; }
[data-theme="cloud"] .cloud-foundation-page .service-card-icon { border-color: color-mix(in srgb, #8bd5ae 20%, var(--line)); color: #8bd5ae; background: #1d382d; }
[data-theme="cloud"] .service-detail-main.cloud-foundation-page .service-detail-content:is(:hover, :focus-within) .service-card-icon { border-color: transparent; color: #fff; background: #8bd5ae; box-shadow: 0 5px 12px color-mix(in srgb, #8bd5ae 22%, transparent); }

@media (prefers-reduced-motion: reduce) {
  .cloud-foundation-page .service-detail-content,
  .cloud-foundation-page .service-detail-content::before {
    transition: none;
  }

  .cloud-foundation-page .service-detail-content:is(:hover, :focus-within) {
    transform: none;
  }
}