/* NPI Studios — pinned Services scrollytelling prototype */
.services-scroll-story {
  position:relative;
  height:340svh;
  min-height:2300px;
  background:#070809;
  border-bottom:1px solid var(--line);
}
.services-scroll-stage {
  position:sticky;
  top:0;
  height:100svh;
  min-height:690px;
  overflow:hidden;
  background:#070809;
}
.services-story-media,
.services-story-layer,
.services-story-vignette {
  position:absolute;
  inset:0;
}
.services-story-media { z-index:0; background:#070809; }
.services-story-layer {
  opacity:0;
  transform:scale(1.035);
  will-change:opacity, transform;
  transition:opacity .08s linear;
}
.services-story-layer.is-active { opacity:1; }
.services-story-photo {
  background-position:center;
  background-size:cover;
}
.story-define { background-image:url('../images/about/nise-bts-bryce-01.webp'); background-position:center 45%; }
.story-assemble { background-image:url('../images/about/nise-bts-bryce-02.webp'); background-position:center 48%; }
.services-story-video-layer { background:#090a0b; }
.services-story-video {
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  display:block;
  filter:saturate(.82) contrast(1.04) brightness(.83);
}
.story-produce .services-story-video { object-position:center 45%; }
.story-finish .services-story-video { object-position:center; }
.services-story-vignette {
  z-index:6;
  pointer-events:none;
  background:
    linear-gradient(90deg,rgba(5,6,8,.98) 0%,rgba(5,6,8,.91) 28%,rgba(5,6,8,.54) 52%,rgba(5,6,8,.2) 76%,rgba(5,6,8,.34) 100%),
    linear-gradient(to top,rgba(5,6,8,.66),transparent 44%);
}

.services-story-intro { background:#08090a; }
.services-story-filmstrip {
  position:absolute;
  width:min(1040px,64vw);
  right:2.5vw;
  top:50%;
  transform:translateY(-48%) rotate(1.2deg) scale(1.05);
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
  opacity:.38;
  filter:saturate(.62) contrast(1.05);
}
.story-film-frame {
  position:relative;
  display:block;
  aspect-ratio:16/9;
  background-position:center;
  background-size:cover;
  border:1px solid rgba(241,237,230,.12);
  overflow:hidden;
}
.story-film-frame::after { content:''; position:absolute; inset:0; background:rgba(0,0,0,.22); }
.story-film-1 { background-image:url('../images/about/nise-bts-bryce-01.webp'); }
.story-film-2 { background-image:url('../images/work/arn-work-v1.webp'); }
.story-film-3 { background-image:url('../images/work/producing-under-pressure-thumb-v3.webp'); }
.story-film-4 { background-image:url('../images/about/nise-bts-bryce-02.webp'); }
.story-film-5 { background-image:url('../images/work/arn-edit-workflow-v2.jpg'); }
.story-film-6 { background-image:url('../images/work/nisekabuki-poster-static.webp'); background-position:center 30%; }

.services-story-shell {
  position:relative;
  z-index:10;
  height:100%;
  padding-top:clamp(125px,13svh,165px);
  padding-bottom:58px;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
}
.services-story-copy {
  position:relative;
  width:min(720px,58vw);
  min-height:550px;
}
.services-story-card {
  position:absolute;
  inset:50% auto auto 0;
  transform:translateY(calc(-50% + 30px));
  opacity:0;
  width:100%;
  pointer-events:none;
  will-change:opacity, transform;
}
.services-story-card.is-active { pointer-events:auto; }
.services-story-card .eyebrow,
.services-story-step {
  margin:0 0 26px;
  color:var(--copper-soft);
  text-transform:uppercase;
  letter-spacing:.16em;
  font-size:.72rem;
  font-weight:700;
}
.services-story-card h1,
.services-story-card h2 {
  margin:0 0 30px;
  max-width:7.2ch;
  font-size:clamp(5rem,10.5vw,10.5rem);
  line-height:.82;
}
.services-story-card h2 { font-size:clamp(4.6rem,8.5vw,8.4rem); max-width:8.2ch; }
.services-story-card > p:last-child,
.services-story-lead {
  max-width:570px;
  margin:0;
  color:#d0cbc4;
  font-size:clamp(1rem,1.25vw,1.16rem);
  line-height:1.7;
}
.services-story-progress {
  align-self:center;
  justify-self:end;
  width:126px;
  color:#a6a19a;
}
.services-story-progress-line {
  display:block;
  position:relative;
  width:1px;
  height:210px;
  margin:0 0 22px 7px;
  background:rgba(241,237,230,.18);
  overflow:hidden;
}
.services-story-progress-line i {
  position:absolute;
  left:0;
  top:0;
  width:1px;
  height:0;
  background:var(--copper-soft);
}
.services-story-progress ol { list-style:none; padding:0; margin:0; display:grid; gap:9px; }
.services-story-progress li {
  font-size:.61rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  opacity:.35;
  transition:opacity .25s ease,color .25s ease;
}
.services-story-progress li.is-active { opacity:1; color:#eee9e1; }
.services-story-scrollcue {
  position:absolute;
  left:0;
  bottom:34px;
  display:flex;
  align-items:center;
  gap:13px;
  color:#aaa59d;
  font-size:.59rem;
  letter-spacing:.15em;
  text-transform:uppercase;
  opacity:.88;
}
.services-story-scrollcue i { display:block; width:42px; height:1px; background:var(--copper-soft); position:relative; overflow:hidden; }
.services-story-scrollcue i::after { content:''; position:absolute; inset:0 auto 0 -50%; width:50%; background:#f2ede5; animation:npiStoryCue 1.7s ease-in-out infinite; }
@keyframes npiStoryCue { 0%{transform:translateX(0)} 100%{transform:translateX(300%)} }

/* Let the service cards arrive directly after the pinned story. */
.services-cards-section { padding-top:clamp(70px,7vw,110px); }
.services-cinematic-grid { transform:none; }

@media (max-width:1050px) {
  .services-story-filmstrip { width:76vw; right:-10vw; opacity:.28; }
  .services-story-copy { width:min(670px,72vw); }
  .services-story-card h1 { font-size:clamp(5rem,13vw,8.6rem); }
  .services-story-card h2 { font-size:clamp(4.4rem,11vw,7.2rem); }
}
@media (max-width:760px) {
  .services-scroll-story { height:auto; min-height:0; }
  .services-scroll-stage { position:relative; height:auto; min-height:760px; }
  .services-story-shell { min-height:760px; padding-top:145px; padding-bottom:80px; display:block; }
  .services-story-media .services-story-layer:not(.services-story-intro) { display:none; }
  .services-story-filmstrip { width:118vw; right:-54vw; top:45%; grid-template-columns:repeat(2,1fr); opacity:.18; }
  .services-story-copy { width:100%; min-height:520px; }
  .services-story-card { display:none; position:relative; inset:auto; transform:none!important; opacity:0!important; }
  .services-story-card:first-child { display:block; opacity:1!important; }
  .services-story-card h1 { font-size:clamp(4.6rem,21vw,7rem); }
  .services-story-card > p:last-child,.services-story-lead { max-width:34rem; }
  .services-story-progress { display:none; }
  .services-story-scrollcue { display:none; }
  .services-story-vignette { background:linear-gradient(90deg,rgba(5,6,8,.98),rgba(5,6,8,.67) 74%,rgba(5,6,8,.46)); }
}
@media (prefers-reduced-motion:reduce) {
  .services-scroll-story { height:auto; min-height:0; }
  .services-scroll-stage { position:relative; height:auto; min-height:760px; }
  .services-story-card { display:none; }
  .services-story-card:first-child { display:block; position:relative; inset:auto; transform:none; opacity:1!important; }
  .services-story-media .services-story-layer:not(.services-story-intro) { display:none; }
  .services-story-scrollcue { display:none; }
}