.services-page {
  --services-hero-art: url("services-hero-light.png");
  --services-art-blend: multiply;
  --services-art-opacity: 0.52;
}

:root[data-theme="light"] .services-page {
  --services-hero-art: url("services-hero-light.png");
  --services-art-blend: multiply;
  --services-art-opacity: 0.52;
}

:root[data-theme="dark"] .services-page {
  --services-hero-art: url("services-hero-dark.png");
  --services-art-blend: screen;
  --services-art-opacity: 0.56;
}

.services-page .hero.small {
  min-height: clamp(560px, 78vh, 780px);
  padding-bottom: clamp(68px, 8vh, 104px);
  isolation: isolate;
}

.services-page .hero.small .grid-bg {
  opacity: 0.34;
  mask-image: radial-gradient(ellipse at 58% 42%, #000 0%, rgba(0, 0, 0, 0.42) 46%, transparent 74%);
  -webkit-mask-image: radial-gradient(ellipse at 58% 42%, #000 0%, rgba(0, 0, 0, 0.42) 46%, transparent 74%);
}

.services-page .hero.small::before {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 58px -8vw -80px 30vw;
  background-image: var(--services-hero-art);
  background-size: cover;
  background-position: right center;
  background-repeat: no-repeat;
  filter: saturate(0.92) contrast(0.98);
  mix-blend-mode: var(--services-art-blend);
  opacity: var(--services-art-opacity);
  pointer-events: none;
  transform: translate3d(0, 0, 0) scale(1.01);
  animation: services-hero-drift 18s ease-in-out infinite alternate;
  mask-image: radial-gradient(ellipse at 68% 50%, #000 0%, #000 34%, rgba(0, 0, 0, 0.66) 52%, rgba(0, 0, 0, 0.18) 70%, transparent 86%);
  -webkit-mask-image: radial-gradient(ellipse at 68% 50%, #000 0%, #000 34%, rgba(0, 0, 0, 0.66) 52%, rgba(0, 0, 0, 0.18) 70%, transparent 86%);
}

.services-page .hero.small::after {
  content: "";
  position: absolute;
  z-index: 1;
  inset: auto 0 0 0;
  height: 42%;
  background: linear-gradient(180deg, transparent 0%, var(--ink) 86%);
  pointer-events: none;
}

:root[data-theme="dark"] .services-page .hero.small::before {
  filter: saturate(1.08) contrast(1.08);
  opacity: 0.62;
}

.services-page #svc-crm {
  --svc-art: url("services-crm-light.png");
}

.services-page #svc-ai {
  --svc-art: url("services-ai-light.png");
}

.services-page #svc-apps {
  --svc-art: url("services-apps-light.png");
}

.services-page #svc-saas {
  --svc-art: url("services-saas-light.png");
}

.services-page #svc-modern {
  --svc-art: url("services-modernization-light.png");
}

.services-page #svc-retain {
  --svc-art: url("services-retained-bench-light.png");
}

:root[data-theme="light"] .services-page #svc-crm {
  --svc-art: url("services-crm-light.png");
}

:root[data-theme="light"] .services-page #svc-ai {
  --svc-art: url("services-ai-light.png");
}

:root[data-theme="light"] .services-page #svc-apps {
  --svc-art: url("services-apps-light.png");
}

:root[data-theme="light"] .services-page #svc-saas {
  --svc-art: url("services-saas-light.png");
}

:root[data-theme="light"] .services-page #svc-modern {
  --svc-art: url("services-modernization-light.png");
}

:root[data-theme="light"] .services-page #svc-retain {
  --svc-art: url("services-retained-bench-light.png");
}

:root[data-theme="dark"] .services-page #svc-crm {
  --svc-art: url("services-crm-dark.png");
}

:root[data-theme="dark"] .services-page #svc-ai {
  --svc-art: url("services-ai-dark.png");
}

:root[data-theme="dark"] .services-page #svc-apps {
  --svc-art: url("services-apps-dark.png");
}

:root[data-theme="dark"] .services-page #svc-saas {
  --svc-art: url("services-saas-dark.png");
}

:root[data-theme="dark"] .services-page #svc-modern {
  --svc-art: url("services-modernization-dark.png");
}

:root[data-theme="dark"] .services-page #svc-retain {
  --svc-art: url("services-retained-bench-dark.png");
}

.services-page .svc-row {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition: background-color 0.35s ease, border-color 0.35s ease;
}

.services-page .svc-row::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: -34px;
  right: max(-10vw, -150px);
  bottom: -34px;
  width: min(700px, 48vw);
  background-image: var(--svc-art);
  background-size: cover;
  background-position: right center;
  background-repeat: no-repeat;
  filter: saturate(0.88) contrast(0.96);
  mix-blend-mode: var(--services-art-blend);
  opacity: 0.38;
  pointer-events: none;
  transform: translate3d(14px, 0, 0) scale(1.02);
  transition: opacity 0.45s ease, transform 0.55s ease;
  mask-image: radial-gradient(ellipse at 68% 50%, #000 0%, rgba(0, 0, 0, 0.78) 42%, rgba(0, 0, 0, 0.22) 64%, transparent 82%);
  -webkit-mask-image: radial-gradient(ellipse at 68% 50%, #000 0%, rgba(0, 0, 0, 0.78) 42%, rgba(0, 0, 0, 0.22) 64%, transparent 82%);
}

.services-page .svc-row::after {
  content: "";
  position: absolute;
  z-index: 1;
  top: 24px;
  right: 0;
  width: min(540px, 42vw);
  height: 1px;
  background: linear-gradient(90deg, transparent, color-mix(in oklab, var(--amber) 42%, transparent), color-mix(in oklab, var(--cyan) 22%, transparent), transparent);
  opacity: 0.36;
  pointer-events: none;
  transform: translateX(12%);
  animation: services-row-sweep 9s ease-in-out infinite alternate;
}

.services-page .svc-row:hover::before,
.services-page .svc-row:focus-within::before {
  opacity: 0.48;
  transform: translate3d(0, 0, 0) scale(1.03);
}

:root[data-theme="dark"] .services-page .svc-row::before {
  filter: saturate(1.04) contrast(1.08);
  opacity: 0.42;
}

:root[data-theme="dark"] .services-page .svc-row:hover::before,
:root[data-theme="dark"] .services-page .svc-row:focus-within::before {
  opacity: 0.54;
}

.services-page .svc-num,
.services-page .svc-main,
.services-page .svc-points {
  position: relative;
  z-index: 2;
}

@keyframes services-hero-drift {
  from {
    transform: translate3d(0, 0, 0) scale(1.01);
  }

  to {
    transform: translate3d(18px, -8px, 0) scale(1.035);
  }
}

@keyframes services-row-sweep {
  from {
    opacity: 0.18;
    transform: translateX(18%);
  }

  to {
    opacity: 0.42;
    transform: translateX(-8%);
  }
}

@media (max-width: 900px) {
  .services-page .hero.small {
    min-height: 620px;
    padding-bottom: 72px;
  }

  .services-page .hero.small::before {
    inset: 84px -68vw auto 5vw;
    height: 430px;
    opacity: 0.46;
    mask-image: radial-gradient(ellipse at 70% 44%, #000 0%, rgba(0, 0, 0, 0.68) 40%, rgba(0, 0, 0, 0.16) 62%, transparent 82%);
    -webkit-mask-image: radial-gradient(ellipse at 70% 44%, #000 0%, rgba(0, 0, 0, 0.68) 40%, rgba(0, 0, 0, 0.16) 62%, transparent 82%);
  }

  :root[data-theme="dark"] .services-page .hero.small::before {
    opacity: 0.52;
  }

  .services-page .svc-row {
    padding-bottom: 148px;
  }

  .services-page .svc-row::before {
    inset: auto -24vw -18px auto;
    width: min(720px, 126vw);
    height: 214px;
    opacity: 0.34;
    background-position: right bottom;
    mask-image: radial-gradient(ellipse at 72% 68%, #000 0%, rgba(0, 0, 0, 0.66) 42%, rgba(0, 0, 0, 0.16) 64%, transparent 84%);
    -webkit-mask-image: radial-gradient(ellipse at 72% 68%, #000 0%, rgba(0, 0, 0, 0.66) 42%, rgba(0, 0, 0, 0.16) 64%, transparent 84%);
  }

  .services-page .svc-row::after {
    top: auto;
    right: -10vw;
    bottom: 112px;
    width: 84vw;
  }
}

@media (max-width: 520px) {
  .services-page .hero.small {
    min-height: 590px;
  }

  .services-page .hero.small::before {
    inset: 98px -92vw auto -4vw;
    height: 390px;
  }

  .services-page .svc-row {
    padding-bottom: 132px;
  }

  .services-page .svc-row::before {
    right: -42vw;
    height: 188px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .services-page .hero.small::before,
  .services-page .svc-row::after {
    animation: none;
  }

  .services-page .svc-row,
  .services-page .svc-row::before {
    transition: none;
  }
}