/* Pixels Pinned Scroll Scene v1 – local, declarative and progressively enhanced. */
.pixels-pinned-scroll{
  --pixels-pinned-bg:#08111f;
  --pixels-pinned-fg:#f8fafc;
  --pixels-pinned-accent:#67e8f9;
  --pixels-pinned-progress:0;
  position:relative;
  isolation:isolate;
  min-height:var(--pixels-pinned-length, 260svh);
  color:var(--pixels-pinned-fg);
  background:var(--pixels-pinned-bg);
}
.pixels-pinned-scroll__stage{
  position:sticky;
  top:0;
  min-height:100svh;
  overflow:clip;
  display:grid;
  place-items:center;
}
.pixels-pinned-scroll__visual,
.pixels-pinned-scroll__copy{
  position:absolute;
  inset:0;
}
.pixels-pinned-scroll__visual{z-index:0;pointer-events:none;}
.pixels-pinned-scroll__copy{
  z-index:1;
  width:min(100%, 76rem);
  margin:auto;
  padding:clamp(1.5rem, 5vw, 5rem);
  pointer-events:none;
}
.pixels-pinned-scroll__step{
  position:absolute;
  inset:0;
  display:grid;
  align-content:center;
  max-width:min(100%, 44rem);
  pointer-events:none;
  opacity:0;
  transform:translate3d(0, 1.5rem, 0);
  transition:opacity .28s ease, transform .42s cubic-bezier(.22,1,.36,1);
}
.pixels-pinned-scroll__step.is-active{
  opacity:1;
  transform:translate3d(0, 0, 0);
  pointer-events:auto;
}
.pixels-pinned-scroll__step.is-past{transform:translate3d(0, -1.1rem, 0);}
/* Hidden, stacked steps must never intercept a CTA click from the visible
   story card. Interactive controls are enabled exclusively in the active step. */
.pixels-pinned-scroll__step.is-active :is(a,button,input,select,textarea){pointer-events:auto;}
.pixels-pinned-scroll [data-pixels-pinned-layer]{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  opacity:var(--pixels-layer-opacity, 1);
  transform:var(--pixels-layer-transform, none);
  will-change:transform,opacity;
}
.pixels-pinned-scroll[data-pixels-pinned-ready="true"] [data-pixels-pinned-layer]{
  transition:transform .12s linear, opacity .12s linear;
}
@media (max-width:991.98px), (prefers-reduced-motion:reduce){
  /* A scroll story becomes normal, readable content on compact screens.
     !important is intentionally limited to the module's own structural API:
     it prevents desktop scene modifiers from collapsing the fallback. */
  .pixels-pinned-scroll[data-pixels-pinned-static="true"]{min-height:auto!important;}
  .pixels-pinned-scroll[data-pixels-pinned-static="true"] .pixels-pinned-scroll__stage{position:relative!important;top:auto!important;min-height:0!important;height:auto!important;display:block!important;padding:clamp(3rem,9vw,5rem) 0!important;overflow:visible!important;}
  .pixels-pinned-scroll[data-pixels-pinned-static="true"] .pixels-pinned-scroll__visual{opacity:.22;}
  .pixels-pinned-scroll[data-pixels-pinned-static="true"] .pixels-pinned-scroll__copy{position:relative!important;inset:auto!important;width:auto!important;height:auto!important;padding:clamp(1.5rem,6vw,3rem)!important;}
  .pixels-pinned-scroll[data-pixels-pinned-static="true"] .pixels-pinned-scroll__step{position:relative!important;inset:auto!important;display:block!important;max-width:none!important;opacity:1!important;transform:none!important;margin-top:1.25rem!important;pointer-events:auto!important;}
  .pixels-pinned-scroll__step:first-child{margin-top:0;}
  .pixels-pinned-scroll [data-pixels-pinned-layer]{transition:none!important;transform:none!important;}
}
@media (max-width:991.98px) and (prefers-reduced-motion:no-preference){
  /* Optional compact scene: one active card in a full-height scroll story.
     `data-pixels-pinned-mobile="true"` opts in explicitly. */
  .pixels-pinned-scroll[data-pixels-pinned-mobile="true"]{min-height:420svh!important;}
  .pixels-pinned-scroll[data-pixels-pinned-mobile="true"] .pixels-pinned-scroll__stage{position:sticky!important;top:0!important;height:100svh!important;min-height:100svh!important;display:block!important;padding:0!important;overflow:hidden!important;}
  /* A compact scene can contain its actual foreground UI in `__visual`.
     Fading the whole container also fades headings, controls and text, which
     makes an opted-in mobile story look like it has a translucent overlay.
     Scene authors own any decorative background layers; the runtime keeps the
     visual layer fully opaque and only provides the sticky/phase mechanics. */
  .pixels-pinned-scroll[data-pixels-pinned-mobile="true"] .pixels-pinned-scroll__visual{opacity:1;}
  .pixels-pinned-scroll.services-pinned[data-pixels-pinned-mobile="true"] .services-pinned__inner{position:relative!important;width:min(100% - 2rem,34rem)!important;height:calc(100svh - 4.5rem)!important;margin:auto!important;display:block!important;}
  .pixels-pinned-scroll.services-pinned[data-pixels-pinned-mobile="true"] .services-pinned__intro{position:absolute!important;top:clamp(7rem,16svh,9rem)!important;left:0!important;width:100%!important;margin:0!important;text-align:center!important;}
  .pixels-pinned-scroll.services-pinned[data-pixels-pinned-mobile="true"] .services-pinned__title{font-size:clamp(3rem,13vw,4rem)!important;}
  .pixels-pinned-scroll.services-pinned[data-pixels-pinned-mobile="true"] .services-pinned__hint{margin-top:.75rem!important;font-size:1rem!important;line-height:1.45!important;}
  .pixels-pinned-scroll.services-pinned[data-pixels-pinned-mobile="true"] .services-pinned__scroll-cue{margin-top:.9rem!important;}
  .pixels-pinned-scroll[data-pixels-pinned-mobile="true"] .pixels-pinned-scroll__copy{position:absolute!important;top:clamp(20rem,40svh,25rem)!important;right:0!important;bottom:auto!important;left:0!important;width:100%!important;height:calc(60svh - 1rem)!important;margin:0!important;padding:0!important;transform:translateY(clamp(5rem,10svh,6.5rem))!important;}
  .pixels-pinned-scroll[data-pixels-pinned-mobile="true"] .pixels-pinned-scroll__step{position:absolute!important;inset:0!important;display:grid!important;align-content:start!important;max-width:none!important;opacity:0!important;transform:translate3d(0,1.25rem,0)!important;margin:0!important;pointer-events:none!important;}
  .pixels-pinned-scroll[data-pixels-pinned-mobile="true"] .pixels-pinned-scroll__step.is-active{opacity:1!important;transform:none!important;pointer-events:auto!important;}
  .pixels-pinned-scroll[data-pixels-pinned-mobile="true"] .pixels-pinned-scroll__step.is-past{transform:translate3d(0,-1rem,0)!important;}
  .pixels-pinned-scroll.services-pinned[data-pixels-pinned-mobile="true"] .services-pinned__card{width:100%!important;padding:1.35rem!important;border-radius:1.5rem!important;}
  .pixels-pinned-scroll.services-pinned[data-pixels-pinned-mobile="true"] .services-pinned__card h2{font-size:clamp(2.1rem,10vw,3rem)!important;}
  .pixels-pinned-scroll.services-pinned[data-pixels-pinned-mobile="true"] .services-pinned__card p{margin-bottom:1.25rem!important;font-size:1rem!important;line-height:1.45!important;}
  .pixels-pinned-scroll.services-pinned[data-pixels-pinned-mobile="true"] .services-pinned__progress{display:none!important;}
}