/* One continuous scroll-scrubbed video backdrop across the full home page. */
.scrub-video-section {
  position: relative;
  isolation: isolate;
  background: #f2f0ec;
}

.scrub-video-section > :not(.intro-video-stage):not(.intro-video-meter) {
  position: relative;
  z-index: 2;
}

.intro-video-stage {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background: #f2f0ec;
  pointer-events: none;
}

/* One pinned backdrop spans the full home page; the clip continues through every section. */
.full-page-scrub > .intro-video-stage {
  position: sticky;
  inset: auto;
  top: 88px;
  width: 100%;
  height: calc(100vh - 88px);
  margin-bottom: calc(-100vh + 88px);
}

.full-page-scrub > main > .hero-home,
.full-page-scrub > main > .intro-section#intro,
.full-page-scrub > main > .services-preview {
  position: relative;
  z-index: 2;
  background: transparent;
}

.intro-video-stage video {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  transform: translate(-50%, -50%) scale(1.02);
  object-fit: cover;
  filter: contrast(1.02);
  will-change: transform;
}

.intro-video-veil {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to bottom, rgba(242, 240, 236, .62) 0%, rgba(242, 240, 236, .12) 22%, rgba(242, 240, 236, .12) 78%, rgba(242, 240, 236, .66) 100%),
    radial-gradient(100% 80% at 50% 48%, rgba(242, 240, 236, 0) 0%, rgba(242, 240, 236, .34) 100%),
    rgba(242, 240, 236, .20);
}

.intro-video-grain {
  position: absolute;
  inset: -50%;
  opacity: .13;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/></filter><rect width='140' height='140' filter='url(%23n)' opacity='.5'/></svg>");
}

.intro-video-meter {
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 3;
  display: block;
  width: 100%;
  height: 2px;
  transform: scaleX(0);
  transform-origin: 0 50%;
  background: currentColor;
  opacity: .42;
  pointer-events: none;
}

html.dark .full-page-scrub > main > .hero-home,
html.dark .full-page-scrub > main > .intro-section#intro,
html.dark .full-page-scrub > main > .services-preview {
  background: transparent;
}

html.dark .intro-video-stage {
  background: #171b17;
}

html.dark .intro-video-veil {
  background:
    linear-gradient(to bottom, rgba(17, 20, 17, .68) 0%, rgba(17, 20, 17, .20) 22%, rgba(17, 20, 17, .20) 78%, rgba(17, 20, 17, .72) 100%),
    radial-gradient(100% 80% at 50% 48%, rgba(17, 20, 17, 0) 0%, rgba(17, 20, 17, .42) 100%),
    rgba(17, 20, 17, .24);
}

html.dark .intro-video-grain {
  opacity: .09;
  mix-blend-mode: screen;
}

/* Let the same full-section footage read through the service tiles while keeping their text clear. */
.full-page-scrub .services-preview .service-card-1,
.full-page-scrub .services-preview .service-card-2,
.full-page-scrub .services-preview .service-card-3 {
  background: transparent;
  box-shadow: none;
}

.full-page-scrub .services-preview .card-num,
.full-page-scrub .services-preview .card-symbol {
  display: none;
}

html.dark .full-page-scrub .services-preview .service-card-1,
html.dark .full-page-scrub .services-preview .service-card-2,
html.dark .full-page-scrub .services-preview .service-card-3 {
  background: transparent;
}

.agency-band {
  background: transparent;
  color: var(--ink);
}

.agency-band .eyebrow {
  color: var(--muted);
}

.agency-band .band-sheen {
  display: none;
}

html.dark .agency-band {
  background: transparent;
  color: var(--ink);
}

@media (max-width: 900px) {
  .intro-video-veil {
    background:
      linear-gradient(to bottom, rgba(242, 240, 236, .72) 0%, rgba(242, 240, 236, .18) 24%, rgba(242, 240, 236, .18) 76%, rgba(242, 240, 236, .74) 100%),
      radial-gradient(100% 80% at 50% 48%, rgba(242, 240, 236, 0) 0%, rgba(242, 240, 236, .40) 100%),
      rgba(242, 240, 236, .24);
  }

  html.dark .intro-video-veil {
    background:
      linear-gradient(to bottom, rgba(17, 20, 17, .76) 0%, rgba(17, 20, 17, .25) 24%, rgba(17, 20, 17, .25) 76%, rgba(17, 20, 17, .78) 100%),
      radial-gradient(100% 80% at 50% 48%, rgba(17, 20, 17, 0) 0%, rgba(17, 20, 17, .48) 100%),
      rgba(17, 20, 17, .28);
  }
}

@media (max-width: 760px) {
  .full-page-scrub > .intro-video-stage {
    top: 72px;
    height: calc(100vh - 72px);
    height: calc(100svh - 72px);
    margin-bottom: calc(-100vh + 72px);
    margin-bottom: calc(-100svh + 72px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .intro-video-stage video {
    will-change: auto;
  }
}

.full-page-scrub > main,
.full-page-scrub > .site-footer{position:relative;z-index:2;background:transparent}
.full-page-scrub > main > .hero-home{background:transparent}
.full-page-scrub > main > .agency-band{background:transparent}
.full-page-scrub > main > .closing-cta{background:transparent}
.full-page-scrub > .site-footer{background:rgba(28,33,30,.84)}

html.dark .full-page-scrub > main > .closing-cta{
  background:transparent;
  color:#efeee6!important;
}
html.dark .full-page-scrub > main > .closing-cta .section-index{color:var(--muted)}
html.dark .full-page-scrub > main > .closing-cta .round-link{border-color:rgba(239,238,230,.72);color:#efeee6}