.custom-build-page {
  --custom-build-hero-art: url("custom-build-hero-light.webp");
  --custom-build-workbench-art: url("custom-build-workbench-light.webp");
  --custom-build-engagement-art: url("custom-build-engagement-light.webp");
  --custom-build-art-blend: multiply;
  --custom-build-hero-opacity: 0.74;
  --custom-build-row-opacity: 0.32;
  --custom-build-callout-opacity: 0.34;
}

:root[data-theme="light"] .custom-build-page {
  --custom-build-hero-art: url("custom-build-hero-light.webp");
  --custom-build-workbench-art: url("custom-build-workbench-light.webp");
  --custom-build-engagement-art: url("custom-build-engagement-light.webp");
  --custom-build-art-blend: multiply;
  --custom-build-hero-opacity: 0.74;
  --custom-build-row-opacity: 0.32;
  --custom-build-callout-opacity: 0.34;
}

:root[data-theme="dark"] .custom-build-page {
  --custom-build-hero-art: url("custom-build-hero-dark.webp");
  --custom-build-workbench-art: url("custom-build-workbench-dark.webp");
  --custom-build-engagement-art: url("custom-build-engagement-dark.webp");
  --custom-build-art-blend: screen;
  --custom-build-hero-opacity: 0.66;
  --custom-build-row-opacity: 0.38;
  --custom-build-callout-opacity: 0.42;
}

.custom-build-page main {
  overflow: clip;
}

.custom-build-page .custom-build-hero {
  min-height: clamp(560px, 78vh, 780px);
  padding-bottom: clamp(72px, 8vh, 108px);
  isolation: isolate;
}

.custom-build-page .custom-build-hero .grid-bg {
  opacity: 0.28;
  mask-image: radial-gradient(ellipse at 64% 42%, #000 0%, rgba(0, 0, 0, 0.52) 45%, transparent 74%);
  -webkit-mask-image: radial-gradient(ellipse at 64% 42%, #000 0%, rgba(0, 0, 0, 0.52) 45%, transparent 74%);
}

.custom-build-page .custom-build-hero::before {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 54px -8vw -92px 24vw;
  background-image: var(--custom-build-hero-art);
  background-position: right center;
  background-repeat: no-repeat;
  background-size: cover;
  filter: saturate(0.96) contrast(0.98);
  mix-blend-mode: var(--custom-build-art-blend);
  opacity: var(--custom-build-hero-opacity);
  pointer-events: none;
  transform: translate3d(0, 0, 0) scale(1.01);
  animation: custom-build-hero-drift 22s ease-in-out infinite alternate;
  mask-image: radial-gradient(ellipse at 72% 50%, #000 0%, #000 34%, rgba(0, 0, 0, 0.62) 54%, rgba(0, 0, 0, 0.18) 72%, transparent 88%);
  -webkit-mask-image: radial-gradient(ellipse at 72% 50%, #000 0%, #000 34%, rgba(0, 0, 0, 0.62) 54%, rgba(0, 0, 0, 0.18) 72%, transparent 88%);
}

.custom-build-page .custom-build-hero::after {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  background:
    linear-gradient(90deg, var(--ink) 0%, color-mix(in oklab, var(--ink) 90%, transparent) 28%, color-mix(in oklab, var(--ink) 36%, transparent) 57%, transparent 76%),
    linear-gradient(180deg, transparent 0%, transparent 62%, var(--ink) 96%);
  pointer-events: none;
}

.custom-build-page .custom-build-hero .hero-inner {
  position: relative;
  z-index: 2;
  max-width: min(var(--max), 100%);
}

.custom-build-page .custom-build-hero .display {
  width: min(1220px, calc(100vw - var(--gutter) - var(--gutter) - var(--gutter) - var(--gutter)));
  max-width: 100%;
}

.custom-build-page .custom-build-hero .lead {
  width: min(62ch, calc(100vw - var(--gutter) - var(--gutter) - var(--gutter) - var(--gutter)));
  max-width: 100%;
  overflow-wrap: break-word;
}

.custom-build-page .custom-build-section {
  padding-top: clamp(88px, 9vw, 128px);
  isolation: isolate;
}

.custom-build-page .custom-build-services {
  position: relative;
  z-index: 1;
}

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

.custom-build-page .svc-row::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: -58px;
  right: max(-9vw, -150px);
  bottom: -58px;
  width: min(780px, 50vw);
  background-image: var(--custom-build-workbench-art);
  background-position: right center;
  background-repeat: no-repeat;
  background-size: cover;
  filter: saturate(0.92) contrast(0.98);
  mix-blend-mode: var(--custom-build-art-blend);
  opacity: var(--custom-build-row-opacity);
  pointer-events: none;
  transform: translate3d(18px, 0, 0) scale(1.02);
  transition: opacity 0.45s ease, transform 0.55s ease;
  mask-image: radial-gradient(ellipse at 72% 50%, #000 0%, rgba(0, 0, 0, 0.74) 38%, rgba(0, 0, 0, 0.2) 64%, transparent 84%);
  -webkit-mask-image: radial-gradient(ellipse at 72% 50%, #000 0%, rgba(0, 0, 0, 0.74) 38%, rgba(0, 0, 0, 0.2) 64%, transparent 84%);
}

.custom-build-page .svc-row:nth-child(even)::before {
  background-image: var(--custom-build-engagement-art);
  right: max(-7vw, -120px);
  opacity: calc(var(--custom-build-row-opacity) + 0.02);
}

.custom-build-page .svc-row::after {
  content: "";
  position: absolute;
  z-index: 1;
  top: 26px;
  right: -5vw;
  width: min(620px, 44vw);
  height: 1px;
  background: linear-gradient(90deg, transparent, color-mix(in oklab, var(--amber) 48%, transparent), color-mix(in oklab, var(--cyan) 24%, transparent), transparent);
  opacity: 0.34;
  pointer-events: none;
  transform: translateX(12%);
  animation: custom-build-sweep 10s ease-in-out infinite alternate;
}

.custom-build-page .svc-row:hover::before,
.custom-build-page .svc-row:focus-within::before {
  opacity: calc(var(--custom-build-row-opacity) + 0.12);
  transform: translate3d(2px, 0, 0) scale(1.035);
}

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

.custom-build-page .pricing-callout {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  border-color: color-mix(in oklab, var(--line) 78%, var(--amber)) !important;
}

.custom-build-page .pricing-callout::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: -130px -18vw -120px 34%;
  background-image: var(--custom-build-engagement-art);
  background-position: right center;
  background-repeat: no-repeat;
  background-size: cover;
  filter: saturate(0.96) contrast(1);
  mix-blend-mode: var(--custom-build-art-blend);
  opacity: var(--custom-build-callout-opacity);
  pointer-events: none;
  transform: translate3d(0, 0, 0) scale(1.02);
  animation: custom-build-callout-drift 20s ease-in-out infinite alternate;
  mask-image: radial-gradient(ellipse at 68% 50%, #000 0%, rgba(0, 0, 0, 0.7) 42%, rgba(0, 0, 0, 0.16) 68%, transparent 86%);
  -webkit-mask-image: radial-gradient(ellipse at 68% 50%, #000 0%, rgba(0, 0, 0, 0.7) 42%, rgba(0, 0, 0, 0.16) 68%, transparent 86%);
}

.custom-build-page .pricing-callout::after {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  background:
    linear-gradient(90deg, color-mix(in oklab, var(--ink-2) 98%, transparent) 0%, color-mix(in oklab, var(--ink-2) 88%, transparent) 48%, transparent 100%),
    linear-gradient(180deg, transparent 0%, transparent 70%, color-mix(in oklab, var(--ink-2) 92%, transparent) 100%);
  pointer-events: none;
}

.custom-build-page .pricing-callout > * {
  position: relative;
  z-index: 2;
}

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

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

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

  to {
    opacity: 0.46;
    transform: translateX(-9%);
  }
}

@keyframes custom-build-callout-drift {
  from {
    transform: translate3d(0, 0, 0) scale(1.02);
  }

  to {
    transform: translate3d(14px, -8px, 0) scale(1.045);
  }
}

@media (max-width: 900px) {
  .custom-build-page .custom-build-hero {
    min-height: 640px;
    padding-bottom: 76px;
  }

  .custom-build-page .custom-build-hero::before {
    inset: 92px -72vw auto 8vw;
    height: 470px;
    opacity: calc(var(--custom-build-hero-opacity) - 0.26);
    mask-image: radial-gradient(ellipse at 72% 44%, #000 0%, rgba(0, 0, 0, 0.62) 42%, rgba(0, 0, 0, 0.14) 64%, transparent 84%);
    -webkit-mask-image: radial-gradient(ellipse at 72% 44%, #000 0%, rgba(0, 0, 0, 0.62) 42%, rgba(0, 0, 0, 0.14) 64%, transparent 84%);
  }

  .custom-build-page .custom-build-hero::after {
    background:
      linear-gradient(90deg, color-mix(in oklab, var(--ink) 98%, transparent) 0%, color-mix(in oklab, var(--ink) 88%, transparent) 46%, transparent 100%),
      linear-gradient(180deg, color-mix(in oklab, var(--ink) 64%, transparent) 0%, transparent 34%, var(--ink) 96%);
  }

  .custom-build-page .custom-build-hero .hero-inner {
    width: calc(100vw - 40px) !important;
    max-width: calc(100vw - 40px) !important;
    margin-left: 0;
    margin-right: 0;
    padding-left: 20px;
    padding-right: 20px;
  }

  .custom-build-page .custom-build-hero .display,
  .custom-build-page .custom-build-hero .lead {
    width: 100% !important;
    max-width: 100% !important;
  }

  .custom-build-page .svc-row {
    padding-bottom: 144px;
  }

  .custom-build-page .svc-row::before {
    top: auto;
    right: -32vw;
    bottom: -24px;
    width: min(760px, 128vw);
    height: 220px;
    opacity: calc(var(--custom-build-row-opacity) - 0.02);
    background-position: right bottom;
    mask-image: radial-gradient(ellipse at 70% 70%, #000 0%, rgba(0, 0, 0, 0.64) 42%, rgba(0, 0, 0, 0.14) 66%, transparent 86%);
    -webkit-mask-image: radial-gradient(ellipse at 70% 70%, #000 0%, rgba(0, 0, 0, 0.64) 42%, rgba(0, 0, 0, 0.14) 66%, transparent 86%);
  }

  .custom-build-page .svc-row::after {
    top: auto;
    right: -12vw;
    bottom: 116px;
    width: 88vw;
  }

  .custom-build-page .pricing-callout::before {
    inset: auto -48vw -70px -6vw;
    height: 260px;
    opacity: calc(var(--custom-build-callout-opacity) - 0.04);
  }

  .custom-build-page .pricing-callout::after {
    background:
      linear-gradient(180deg, color-mix(in oklab, var(--ink-2) 98%, transparent) 0%, color-mix(in oklab, var(--ink-2) 92%, transparent) 58%, transparent 100%);
  }
}

@media (max-width: 520px) {
  .custom-build-page .custom-build-hero {
    min-height: 600px;
  }

  .custom-build-page .custom-build-hero::before {
    inset: 110px -104vw auto 16vw;
    height: 410px;
  }

  .custom-build-page .svc-row {
    padding-bottom: 128px;
  }

  .custom-build-page .svc-row::before {
    right: -56vw;
    height: 190px;
  }

  .custom-build-page .pricing-callout {
    padding: 32px 24px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .custom-build-page .custom-build-hero::before,
  .custom-build-page .svc-row::after,
  .custom-build-page .pricing-callout::before {
    animation: none;
  }

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