/* Home / Services immersive sequence.
   The Hero selectors remain untouched: this file only reuses their visual values. */
.immersive-services {
  position: relative;
  z-index: 20;
  width: 100%;
  overflow: clip;
  isolation: isolate;
  color: var(--ink);
  background:
    radial-gradient(circle at 58% 42%, rgba(28, 55, 66, 0.52), transparent 36%),
    linear-gradient(135deg, var(--black) 0%, #071919 42%, #071b21 100%);
}

.immersive-services__anchor {
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}

.immersive-services__sticky {
  position: relative;
  min-height: 100svh;
  padding: clamp(132px, 14vw, 220px) clamp(22px, 8vw, 150px);
  overflow: hidden;
}

.immersive-services__media-stage {
  position: absolute;
  z-index: 1;
  top: 50%;
  left: 50%;
  width: min(94vw, calc(94svh * 16 / 9), 1760px);
  max-width: 1760px;
  max-height: 990px;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  isolation: isolate;
  background: var(--black);
  transform: translate3d(-50%, -50%, 0);
  box-shadow:
    inset 0 0 110px rgba(var(--black-rgb), 0.90),
    inset 0 0 210px rgba(var(--black-rgb), 0.62),
    0 0 160px rgba(var(--black-rgb), 0.98);
}

.immersive-services__video {
  position: absolute;
  z-index: 1;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: var(--black);
  opacity: 0;
  visibility: hidden;
  transform: scale(1.018);
  transform-origin: center;
  pointer-events: none;
  will-change: opacity;
  -webkit-mask-image: radial-gradient(ellipse at center,
    #000 0%,
    #000 55%,
    rgba(0, 0, 0, 0.86) 68%,
    rgba(0, 0, 0, 0.46) 84%,
    rgba(0, 0, 0, 0) 100%);
  mask-image: radial-gradient(ellipse at center,
    #000 0%,
    #000 55%,
    rgba(0, 0, 0, 0.86) 68%,
    rgba(0, 0, 0, 0.46) 84%,
    rgba(0, 0, 0, 0) 100%);
}

.immersive-services__video--intro {
  opacity: 0.68;
  visibility: visible;
}

.immersive-services__media-stage::before {
  content: '';
  position: absolute;
  z-index: 3;
  inset: -138px;
  pointer-events: none;
  background: radial-gradient(
    ellipse at center,
    rgba(var(--black-rgb), 0) 28%,
    rgba(var(--black-rgb), 0.10) 42%,
    rgba(var(--black-rgb), 0.50) 62%,
    rgba(var(--black-rgb), 0.88) 80%,
    rgba(var(--black-rgb), 1) 100%
  );
  filter: blur(88px);
}

.immersive-services__media-stage::after {
  content: '';
  position: absolute;
  z-index: 4;
  inset: -34px;
  pointer-events: none;
  background:
    linear-gradient(to bottom,
      rgba(var(--black-rgb), 1) 0%,
      rgba(var(--black-rgb), 1) 5%,
      rgba(var(--black-rgb), 0.86) 13%,
      rgba(var(--black-rgb), 0.52) 24%,
      rgba(var(--black-rgb), 0.16) 37%,
      rgba(var(--black-rgb), 0) 47%,
      rgba(var(--black-rgb), 0) 53%,
      rgba(var(--black-rgb), 0.16) 63%,
      rgba(var(--black-rgb), 0.52) 76%,
      rgba(var(--black-rgb), 0.86) 87%,
      rgba(var(--black-rgb), 1) 95%,
      rgba(var(--black-rgb), 1) 100%),
    linear-gradient(to right,
      rgba(var(--black-rgb), 1) 0%,
      rgba(var(--black-rgb), 0.96) 6%,
      rgba(var(--black-rgb), 0.66) 16%,
      rgba(var(--black-rgb), 0.22) 30%,
      rgba(var(--black-rgb), 0) 43%,
      rgba(var(--black-rgb), 0) 57%,
      rgba(var(--black-rgb), 0.22) 70%,
      rgba(var(--black-rgb), 0.66) 84%,
      rgba(var(--black-rgb), 0.96) 94%,
      rgba(var(--black-rgb), 1) 100%);
  filter: blur(30px);
}

.immersive-services__overlay {
  position: absolute;
  z-index: 3;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 56% 38%, rgba(31, 63, 72, 0.34), transparent 38%),
    linear-gradient(180deg, rgba(var(--black-rgb), 0.56) 0%, rgba(6, 18, 20, 0.18) 46%, rgba(var(--black-rgb), 0.64) 100%);
}

.immersive-services__grain {
  position: absolute;
  z-index: 4;
  inset: 0;
  pointer-events: none;
  opacity: 0.35;
  mix-blend-mode: plus-lighter;
  background: url('../images/home/hero-overlay.webp') center / cover no-repeat;
}

.immersive-services__intro-title,
.immersive-services__copy,
.immersive-services__cta {
  position: relative;
  z-index: 6;
}

.immersive-services__intro-title {
  max-width: 14ch;
  margin: 0 auto clamp(116px, 13vw, 210px);
  font-family: 'PP Eiko', Georgia, serif;
  font-size: clamp(3rem, 6.15vw, 7.4rem);
  font-weight: 500;
  line-height: 0.98;
  letter-spacing: -0.052em;
  text-align: center;
  text-wrap: balance;
  color: var(--ink);
}

.immersive-services__copy {
  width: min(100%, 520px);
  margin: 0 0 clamp(96px, 12vw, 180px);
  text-wrap: balance;
}

.immersive-services__copy--right {
  margin-left: auto;
}

.immersive-services__copy h3 {
  margin: 0;
  font-family: 'PP Eiko', Georgia, serif;
  font-size: clamp(2.35rem, 4.05vw, 5rem);
  font-weight: 500;
  line-height: 0.96;
  letter-spacing: -0.052em;
  color: var(--ink);
}

.immersive-services__copy > p {
  max-width: 34ch;
  margin: clamp(18px, 2vw, 30px) 0 0;
  font-family: 'Satoshi', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: clamp(1rem, 1.15vw, 1.28rem);
  font-weight: 450;
  line-height: 1.48;
  letter-spacing: -0.018em;
  color: rgba(var(--ink-rgb), 0.78);
}

.immersive-services__copy--right > p {
  margin-left: auto;
}

.immersive-services__cta {
  display: flex;
  align-items: center;
  gap: 26px;
  width: max-content;
  margin: 0 auto;
  padding: 0 0 11px;
  font-family: 'Satoshi', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: clamp(0.76rem, 0.82vw, 0.9rem);
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
}

html.services-enhanced .immersive-services {
  height: 800svh;
  min-height: 5600px;
  margin-top: -100svh;
  padding: 0;
  --services-stage-y: -100svh;
}

html.services-enhanced .immersive-services__anchor {
  top: 100svh;
}

html.services-enhanced .immersive-services__sticky {
  position: sticky;
  top: 0;
  width: 100%;
  height: 100svh;
  min-height: 680px;
  padding: 0;
  overflow: hidden;
}

html.services-enhanced .immersive-services__media-stage {
  transform: translate3d(-50%, calc(-50% + var(--services-stage-y)), 0);
  will-change: transform;
}

html.services-enhanced .immersive-services__video--intro {
  opacity: 0;
}

html.services-enhanced .immersive-services__intro-title {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(84vw, 1060px);
  max-width: 14ch;
  margin: 0;
  opacity: 0;
  transform: translate3d(-50%, calc(-50% + var(--services-title-y, 34px)), 0);
  will-change: opacity, transform;
}

html.services-enhanced .immersive-services__copy {
  position: absolute;
  top: 50%;
  width: min(32vw, 520px);
  margin: 0;
  opacity: 0;
  transform: translate3d(var(--services-copy-x, 0px), calc(-50% + var(--services-copy-y, 0px)), 0);
  will-change: opacity, transform;
}

html.services-enhanced .immersive-services__copy--left {
  left: clamp(34px, 7.8vw, 150px);
}

html.services-enhanced .immersive-services__copy--right {
  right: clamp(34px, 7.8vw, 150px);
  left: auto;
}

html.services-enhanced .immersive-services__copy--right h3,
html.services-enhanced .immersive-services__copy--right > p {
  text-align: left;
}

html.services-enhanced .immersive-services__cta {
  /* The sticky viewport makes this a fixed bottom control for the final state.
     !important is required because the shared CTA system defaults to relative. */
  position: absolute !important;
  z-index: 7;
  right: auto;
  bottom: clamp(38px, 6.4svh, 76px);
  left: 50%;
  margin: 0;
  opacity: 0;
  pointer-events: none;
  transform: translate3d(-50%, var(--services-cta-y, 28px), 0);
  will-change: opacity, transform;
}

html.services-enhanced .immersive-services__cta > .button-arrow {
  display: inline-block;
  flex: 0 0 auto;
  margin-left: 0;
  font-size: 1.05em;
  transition: transform 0.32s var(--ease-out);
}

html.services-enhanced .immersive-services__cta:hover > .button-arrow,
html.services-enhanced .immersive-services__cta:focus-visible > .button-arrow {
  transform: translateX(5px);
}

html.services-enhanced .immersive-services__cta.is-interactive {
  pointer-events: auto;
}

/* V11 — the final CTA belongs to the IA copy and settles directly beneath it. */
html.services-enhanced [data-services-copy="3"] .immersive-services__cta {
  position: relative !important;
  inset: auto !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  margin: clamp(28px, 3.2svh, 38px) 0 0 !important;
  transform: translate3d(0, var(--services-cta-y, 16px), 0) !important;
}

@media (min-width: 1800px) and (min-height: 900px) {
  .immersive-services__media-stage {
    width: min(100vw, 192svh, 2240px);
    max-width: 2240px;
    max-height: 1260px;
    overflow: visible;
    background: transparent;
  }
}

/* Desktop overscan keeps every edge outside the viewport, so the composited
   media reads as one continuous surface rather than a framed 16:9 panel. */
@media (min-width: 901px) {
  .immersive-services__media-stage,
  html.services-enhanced .immersive-services__media-stage {
    width: max(106vw, calc(106svh * 16 / 9));
    max-width: none;
    max-height: none;
    overflow: visible;
    background: transparent;
    box-shadow: none;
  }
}

@media (max-width: 1180px) {
  html.services-enhanced .immersive-services__copy {
    width: min(36vw, 440px);
  }

  html.services-enhanced .immersive-services__copy--left {
    left: clamp(30px, 5vw, 64px);
  }

  html.services-enhanced .immersive-services__copy--right {
    right: clamp(30px, 5vw, 64px);
  }
}

@media (max-width: 900px) {
  html.services-enhanced .immersive-services {
    height: 720svh;
    min-height: 4700px;
    margin-top: 0;
  }

  html.services-enhanced .immersive-services__anchor {
    top: 0;
  }

  html.services-enhanced .immersive-services__sticky {
    min-height: 560px;
  }

  html.services-enhanced .immersive-services__media-stage {
    width: min(124vw, calc(96svh * 16 / 9));
  }

  html.services-enhanced .immersive-services__intro-title {
    width: min(88vw, 700px);
    font-size: clamp(2.7rem, 9.2vw, 5.2rem);
  }

  html.services-enhanced .immersive-services__copy {
    width: min(72vw, 460px);
  }

  html.services-enhanced .immersive-services__copy--left {
    left: clamp(24px, 7vw, 60px);
  }

  html.services-enhanced .immersive-services__copy--right {
    right: clamp(24px, 7vw, 60px);
  }

  .immersive-services__copy h3 {
    font-size: clamp(2.25rem, 7.7vw, 4.5rem);
  }

  .immersive-services__copy > p {
    font-size: clamp(0.98rem, 2.1vw, 1.18rem);
  }
}

@media (max-width: 640px) {
  html.services-enhanced .immersive-services {
    height: 690svh;
    min-height: 3900px;
  }

  html.services-enhanced .immersive-services__sticky {
    min-height: 500px;
  }

  html.services-enhanced .immersive-services__media-stage {
    width: 146vw;
  }

  html.services-enhanced .immersive-services__intro-title {
    width: 88vw;
    font-size: clamp(2.35rem, 11vw, 4.1rem);
    line-height: 1;
  }

  html.services-enhanced .immersive-services__copy {
    width: min(78vw, 380px);
  }

  html.services-enhanced .immersive-services__copy--left {
    left: 7vw;
  }

  html.services-enhanced .immersive-services__copy--right {
    right: 7vw;
  }

  .immersive-services__copy h3 {
    font-size: clamp(2rem, 10.2vw, 3.25rem);
  }

  .immersive-services__copy > p {
    max-width: 30ch;
    margin-top: 16px;
    font-size: 0.98rem;
    line-height: 1.42;
  }

  html.services-enhanced .immersive-services__cta {
    bottom: max(32px, env(safe-area-inset-bottom));
  }
}

@media (prefers-reduced-motion: reduce) {
  .immersive-services {
    height: auto !important;
    min-height: 0 !important;
    margin-top: 0 !important;
  }

  .immersive-services__sticky {
    min-height: 0;
    padding: clamp(112px, 14vw, 190px) clamp(22px, 8vw, 150px);
  }

  .immersive-services__media-stage {
    position: absolute;
    top: min(34svh, 320px);
    width: min(112vw, 1120px);
    opacity: 0.62;
  }

  .immersive-services__video,
  .immersive-services__video--intro {
    opacity: 0 !important;
    visibility: hidden !important;
  }

  .immersive-services__video--intro {
    opacity: 1 !important;
    visibility: visible !important;
  }

  .immersive-services__intro-title,
  .immersive-services__copy,
  .immersive-services__cta {
    opacity: 1 !important;
    transform: none !important;
  }

  .immersive-services__cta {
    pointer-events: auto !important;
  }
}