.service-detail-page .hero.small {
  position: relative;
  overflow: hidden;
  min-height: 78vh;
}

.service-detail-page .hero-inner {
  position: relative;
  z-index: 2;
}

.service-detail-art {
  position: absolute;
  z-index: 1;
  inset: 86px -9vw auto auto;
  width: min(930px, 68vw);
  height: min(610px, 66vh);
  pointer-events: none;
  opacity: 0.92;
}

.service-detail-art::after {
  content: "";
  position: absolute;
  inset: -1px;
  background:
    linear-gradient(90deg, var(--ink) 0%, transparent 33%, transparent 100%),
    linear-gradient(180deg, var(--ink) 0%, transparent 18%, transparent 78%, var(--ink) 100%);
  opacity: 0.58;
}

.service-detail-art img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: right center;
  -webkit-mask-image: radial-gradient(ellipse at 67% 50%, #000 0%, #000 34%, rgba(0,0,0,0.62) 52%, rgba(0,0,0,0.2) 70%, transparent 86%);
  mask-image: radial-gradient(ellipse at 67% 50%, #000 0%, #000 34%, rgba(0,0,0,0.62) 52%, rgba(0,0,0,0.2) 70%, transparent 86%);
}

.service-art-light {
  display: block;
  opacity: 0.76;
  mix-blend-mode: multiply;
  filter: saturate(0.92) contrast(0.98) brightness(1.04);
}

.service-art-dark {
  display: none;
}

:root[data-theme="dark"] .service-detail-art::after {
  background:
    linear-gradient(90deg, var(--ink) 0%, transparent 40%, transparent 100%),
    linear-gradient(180deg, var(--ink) 0%, transparent 18%, transparent 78%, var(--ink) 100%);
  opacity: 0.46;
}

:root[data-theme="dark"] .service-art-light {
  display: none;
}

:root[data-theme="dark"] .service-art-dark {
  display: block;
  opacity: 0.9;
  mix-blend-mode: screen;
  filter: saturate(1.05) contrast(1.08);
}

@media (prefers-reduced-motion: no-preference) {
  .service-detail-art img {
    animation: service-detail-drift 22s ease-in-out infinite alternate;
  }
}

@keyframes service-detail-drift {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to { transform: translate3d(-16px, 8px, 0) scale(1.026); }
}

@media (max-width: 860px) {
  .service-detail-page .hero.small {
    min-height: auto;
  }

  .service-detail-art {
    inset: 94px -42vw auto auto;
    width: 138vw;
    height: 390px;
    opacity: 0.6;
  }
}

@media (max-width: 560px) {
  .service-detail-art {
    inset: 112px -92vw auto auto;
    width: 214vw;
    height: 350px;
    opacity: 0.46;
  }
}
/* AI page now uses the shared blended service hero artwork. */
.service-ai-page .ai-hero-field {
  display: none;
}