/* Homepage scroll-section video backgrounds */
.scroll-video-section{
  position:relative!important;
  isolation:isolate;
  overflow:hidden!important;
  min-height:100svh;
  display:flex;
  align-items:center;
  background:#07080a!important;
}
.scroll-video-section > :not(.scroll-video-bg){
  position:relative;
  z-index:2;
  width:100%;
}
.scroll-video-bg{
  position:absolute;
  inset:0;
  z-index:0;
  overflow:hidden;
  pointer-events:none;
  background:#07080a;
}
.scroll-video-bg video{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  display:block;
  filter:brightness(.72) saturate(.98) contrast(1.03);
  transform:scale(1.015);
}
.scroll-video-bg::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(180deg,rgba(7,8,10,.38) 0%,rgba(7,8,10,.20) 34%,rgba(7,8,10,.22) 68%,rgba(7,8,10,.50) 100%),
    linear-gradient(90deg,rgba(7,8,10,.32),rgba(7,8,10,.12),rgba(7,8,10,.30));
}

/* Visual breathing room between consecutive video screens */
.scroll-video-section::before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:56px;
  z-index:4;
  pointer-events:none;
  background:#07080a;
  box-shadow:0 1px 0 rgba(255,255,255,.035),0 14px 26px rgba(0,0,0,.26);
}

#works-preview.scroll-video-section .project-showcase-media{display:none!important}
#works-preview.scroll-video-section .scroll-video-bg video{filter:brightness(.76) saturate(1.00) contrast(1.03)}
#services.scroll-video-section .scroll-video-bg video{object-position:center 45%}
#process.scroll-video-section .scroll-video-bg video{object-position:center}
#pricing.scroll-video-section .scroll-video-bg video{object-position:center}
#faq.scroll-video-section .scroll-video-bg video{object-position:center}

/* Brighten the first hero background without sacrificing text contrast */
.hero-bg-video{
  filter:brightness(1.08) saturate(1.03) contrast(1.01)!important;
}
.hero-shade{
  background:linear-gradient(90deg,rgba(5,6,8,.68) 0%,rgba(5,6,8,.48) 37%,rgba(5,6,8,.18) 70%,rgba(5,6,8,.25) 100%)!important;
}
.hero-vignette{
  background:linear-gradient(to bottom,rgba(5,6,8,.38) 0%,transparent 24%,transparent 68%,rgba(5,6,8,.58) 100%)!important;
}

/* Keep floating Syntx mascot visible for the whole page */
.syntx-ref{
  position:fixed!important;
  right:18px!important;
  bottom:18px!important;
  z-index:9999!important;
  visibility:visible!important;
  opacity:1!important;
}

/* Left hero reel is always an interactive native-vertical video */
.hero-feature{
  pointer-events:auto!important;
  cursor:pointer!important;
}

@media(max-width:900px){
  .syntx-ref{right:10px!important;bottom:76px!important}
}
@media(max-width:760px){
  .scroll-video-section{min-height:100svh}
  .scroll-video-section::before{height:32px}
  .scroll-video-bg video{filter:brightness(.62) saturate(.94) contrast(1.03)}
  .hero-bg-video{filter:brightness(1.02) saturate(1.02) contrast(1.02)!important}
}