/* Services Parallax (Horizontal Cinema) — reuses the exact .slideshow /
   .project / .rail markup + styling that ships in main.css (the same
   system portfolio-cinema.html uses) and assets/js/services-cinema.js
   drives it, pinned via GSAP ScrollTrigger instead of slideshow-cinema.js's
   global wheel hijack (which would break scrolling on the rest of this
   page). Any transform on this wrapper gives `.slideshow`'s
   `position: fixed; inset: 0` a containing block scoped to the wrapper
   instead of the real viewport, so it behaves like a normal in-flow
   section outside of the pinned window. */
.services-cinema-wrap {
  position: relative;
  height: 100vh;
  overflow: hidden;
  transform: translateZ(0);
}

/* main.css's default (non-modifier) .slideshow background is
   --at-neutral-50, one shade lighter than the --at-neutral-0 the "Our
   Services" heading above sits on (bg-neutral-0) — visible as a seam
   between the two in dark mode (#141414 vs #0C0C0C). Match it so the
   heading and the slideshow read as one continuous black. */
.services-cinema-wrap .slideshow:not(.is-split):not(.is-stack):not(.is-horizontal) {
  background-color: var(--at-neutral-0);
}

.slideshow .project-desc {
  font-size: 1rem;
  line-height: 1.6;
  opacity: 0.75;
  max-width: 34ch;
}

/* Explore cursor badge — a small pill that trails the pointer while it
   hovers a project card, in place of the (hidden) default cursor. Fixed
   positioning + a translate3d transform driven from JS keeps this off
   the layout/paint path so it can track the mouse every frame. */
.explore-cursor {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 22px;
  border-radius: 999px;
  background: rgba(17, 16, 15, 0.82);
  backdrop-filter: blur(6px);
  color: #fff;
  font-size: 15px;
  font-weight: 500;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transform: translate3d(-50%, -50%, 0) scale(0.7);
  transition: opacity 0.25s ease;
  will-change: transform, opacity;
}
.explore-cursor svg {
  flex: none;
}
.explore-cursor.is-visible {
  opacity: 1;
}
@media (max-width: 991.98px), (hover: none), (pointer: coarse) {
  .explore-cursor {
    display: none !important;
  }
}