/* NPI Studios — Services cinematic concept */
.services-cinematic-page { background:#090a0b; }
.services-cinematic-page .site-header { background:rgba(9,10,11,.84); backdrop-filter:blur(12px); }
.services-cinematic-page .site-header.scrolled { background:rgba(9,10,11,.96); }

.services-hero {
  position:relative;
  min-height:760px;
  display:flex;
  align-items:center;
  overflow:hidden;
  padding:180px 0 110px;
  border-bottom:1px solid var(--line);
  background:#090a0b;
}
.services-hero::after {
  content:'';
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(90deg,rgba(7,8,9,.98) 0%,rgba(7,8,9,.92) 38%,rgba(7,8,9,.5) 62%,rgba(7,8,9,.18) 100%);
}
.services-hero-inner { position:relative; z-index:3; }
.services-hero h1 { margin:.08em 0 .24em; font-size:clamp(5.2rem,11vw,10.8rem); line-height:.82; max-width:7.5ch; }
.services-hero-lead { max-width:570px; margin:0 0 32px; color:#c5c0b8; font-size:clamp(1rem,1.45vw,1.2rem); line-height:1.7; }
.services-hero-link { color:var(--copper-soft); }
.services-hero-filmstrip {
  position:absolute;
  z-index:1;
  top:122px;
  right:4vw;
  width:min(62vw,1080px);
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
  padding:10px;
  opacity:.24;
  transform:rotate(1.5deg);
  filter:saturate(.5) contrast(1.04);
}
.hero-film-frame { aspect-ratio:16/9; background-position:center; background-size:cover; border:1px solid rgba(241,237,230,.11); }
.hero-film-frame::after { content:''; display:block; width:100%; height:100%; background:rgba(0,0,0,.34); }
.hero-film-1 { background-image:url('../images/about/nise-bts-bryce-01.webp'); }
.hero-film-2 { background-image:url('../images/work/arn-work-v1.webp'); }
.hero-film-3 { background-image:url('../images/work/producing-under-pressure-thumb-v3.webp'); }
.hero-film-4 { background-image:url('../images/about/nise-bts-bryce-02.webp'); }
.hero-film-5 { background-image:url('../images/work/arn-edit-workflow-v2.jpg'); }
.hero-film-6 { background-image:url('../images/work/nisekabuki-poster-static.webp'); background-position:center 30%; }

.services-cards-section { padding:0 0 clamp(80px,9vw,130px); background:#090a0b; }
.services-cinematic-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; transform:translateY(-22px); position:relative; z-index:4; }
.service-cinematic {
  min-height:500px;
  position:relative;
  overflow:hidden;
  border:1px solid rgba(241,237,230,.16);
  background:#101214;
  isolation:isolate;
}
.service-cinematic-bg { position:absolute; inset:0; z-index:0; background-position:center; background-size:cover; opacity:.34; filter:saturate(.65) contrast(1.05); transform:scale(1.03); transition:transform .7s cubic-bezier(.2,.7,.2,1),opacity .4s ease,filter .4s ease; }
.service-cinematic-01 .service-cinematic-bg { background-image:url('../images/about/nise-bts-bryce-01.webp'); background-position:58% center; }
.service-cinematic-02 .service-cinematic-bg { background-image:url('../images/about/nise-bts-bryce-02.webp'); background-position:center 42%; }
.service-cinematic-03 .service-cinematic-bg { background-image:url('../images/about/nise-bts-bryce-video-poster.webp'); background-position:center; }
.service-cinematic-04 .service-cinematic-bg { background-image:url('../images/work/arn-edit-workflow-v2.jpg'); background-position:center; }
.service-cinematic-shade { position:absolute; inset:0; z-index:1; background:linear-gradient(to top,rgba(8,9,10,.98) 0%,rgba(8,9,10,.78) 48%,rgba(8,9,10,.28) 100%); transition:background .4s ease; }
.service-cinematic-content { position:absolute; z-index:2; inset:auto 26px 30px; }
.service-cinematic-index { position:absolute; left:0; bottom:calc(100% + 165px); color:var(--copper-soft); font:600 1.18rem/1 var(--display); }
.service-cinematic h2 { margin:0; max-width:8ch; font:600 clamp(2.15rem,2.65vw,3.25rem)/.92 var(--display); text-transform:uppercase; }
.service-cinematic-rule { width:28px; height:2px; display:block; background:var(--copper); margin:24px 0 18px; }
.service-cinematic p { margin:0; color:#c7c2ba; font-size:.9rem; line-height:1.65; }
@media (hover:hover) and (pointer:fine) {
  .service-cinematic:hover .service-cinematic-bg { transform:scale(1); opacity:.68; filter:saturate(.95) contrast(1.07); }
  .service-cinematic:hover .service-cinematic-shade { background:linear-gradient(to top,rgba(8,9,10,.96) 0%,rgba(8,9,10,.54) 53%,rgba(8,9,10,.14) 100%); }
}

.services-aerial-band { min-height:590px; position:relative; overflow:hidden; display:flex; align-items:center; border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:#101112; }
.services-aerial-video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
.services-aerial-shade { position:absolute; inset:0; background:linear-gradient(90deg,rgba(7,8,9,.93) 0%,rgba(7,8,9,.72) 34%,rgba(7,8,9,.18) 67%,rgba(7,8,9,.1) 100%); }
.services-aerial-content { position:relative; z-index:2; padding-top:80px; padding-bottom:80px; }
.services-aerial-content h2 { font-size:clamp(3.8rem,7vw,7rem); line-height:.88; max-width:7.6ch; margin:.14em 0 .28em; }
.services-aerial-content > p:not(.eyebrow) { max-width:470px; color:#d0cbc3; font-size:1rem; line-height:1.7; }
.services-aerial-tags { display:flex; flex-wrap:wrap; gap:8px; margin-top:28px; }
.services-aerial-tags span { padding:8px 10px; border:1px solid rgba(241,237,230,.28); background:rgba(7,8,9,.28); backdrop-filter:blur(6px); color:#e2ddd5; font-size:.64rem; letter-spacing:.12em; text-transform:uppercase; }

.services-accountability-section { padding:clamp(90px,10vw,150px) 0; background:#0d0f11; }
.services-accountability-grid { display:grid; grid-template-columns:minmax(0,1.15fr) minmax(420px,.85fr); gap:clamp(42px,5vw,84px); align-items:start; }
.services-accountability-copy { position:relative; z-index:2; }
.services-accountability-copy h2 { margin:.12em 0 .25em; font-size:clamp(3.6rem,6.5vw,6.9rem); line-height:.84; max-width:7.2ch; }
.services-accountability-copy > p:not(.eyebrow) { max-width:610px; color:#bdb8b0; font-size:1rem; line-height:1.75; }
.services-copper-rule { display:block; width:34px; height:2px; background:var(--copper); margin:28px 0 32px; }
.services-accountability-photo { position:relative; justify-self:start; width:min(100%,510px); margin:96px 0 0 -26px; min-height:560px; overflow:hidden; border:1px solid rgba(241,237,230,.14); }
.services-accountability-photo img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; filter:saturate(.82) contrast(1.03); transition:transform .8s cubic-bezier(.2,.7,.2,1); }
.services-accountability-photo::after { content:''; position:absolute; inset:0; background:linear-gradient(to top,rgba(6,7,9,.65),transparent 42%); }
.services-accountability-photo figcaption { position:absolute; z-index:2; left:22px; bottom:20px; color:#e7e2da; font-size:.65rem; letter-spacing:.15em; text-transform:uppercase; }
@media (hover:hover) and (pointer:fine) { .services-accountability-photo:hover img { transform:scale(1.025); } }

.services-process-section { padding:clamp(90px,9vw,135px) 0; background:#090a0b; border-top:1px solid var(--line); }
.services-process-track { position:relative; height:1px; background:rgba(241,237,230,.18); margin:48px 0 -1px; overflow:visible; }
.services-process-fill { position:absolute; left:0; top:-1px; height:2px; width:0; background:var(--copper-soft); transition:width 1.55s cubic-bezier(.2,.7,.2,1); }
.services-process-section.is-running .services-process-fill { width:100%; }
.services-process-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:0; }
.services-process-step { position:relative; padding:30px 30px 0 0; min-height:245px; opacity:.42; transform:translateY(9px); transition:opacity .5s ease,transform .5s ease; }
.services-process-step + .services-process-step { padding-left:30px; }
.services-process-step.is-active { opacity:1; transform:translateY(0); }
.services-process-number { display:block; color:var(--copper-soft); font:600 2rem/1 var(--display); margin-bottom:25px; }
.services-process-dot { position:absolute; top:-5px; left:0; width:10px; height:10px; border-radius:50%; border:1px solid var(--copper-soft); background:#090a0b; transition:background .3s ease,box-shadow .3s ease; }
.services-process-step + .services-process-step .services-process-dot { left:30px; }
.services-process-step.is-active .services-process-dot { background:var(--copper-soft); box-shadow:0 0 16px rgba(219,145,92,.72); }
.services-process-step h2 { margin:0 0 13px; font:600 clamp(2rem,3.3vw,3rem)/.94 var(--display); text-transform:uppercase; }
.services-process-step p { margin:0; color:#9f9b94; max-width:260px; font-size:.9rem; line-height:1.65; }

.services-final-cta { padding:clamp(75px,8vw,115px) 0; border-top:1px solid var(--line); background:linear-gradient(135deg,#131518,#0c0d0f 70%); }
.services-final-cta-grid { display:grid; grid-template-columns:1.15fr .75fr auto; gap:clamp(35px,6vw,95px); align-items:center; }
.services-final-cta h2 { margin:.12em 0 0; font-size:clamp(4rem,7.5vw,7rem); line-height:.84; max-width:7.5ch; }
.services-final-cta-copy p { color:#bcb7af; line-height:1.7; margin:0 0 28px; max-width:440px; }
.services-final-mark { width:110px; height:110px; border:1px solid var(--copper); border-radius:50%; display:grid; place-items:center; color:var(--copper-soft); letter-spacing:.22em; font-weight:700; }

@media (max-width:1050px) {
  .services-cinematic-grid { grid-template-columns:repeat(2,1fr); }
  .service-cinematic { min-height:430px; }
  .services-hero-filmstrip { right:-4vw; width:72vw; opacity:.2; }
  .services-accountability-grid { grid-template-columns:1fr; }
  .services-accountability-photo { width:100%; min-height:520px; margin:24px 0 0; }
  .services-final-cta-grid { grid-template-columns:1fr 1fr; }
  .services-final-mark { display:none; }
}
@media (max-width:720px) {
  .services-hero { min-height:auto; padding:150px 0 85px; }
  .services-hero h1 { font-size:clamp(4.7rem,22vw,7rem); }
  .services-hero-filmstrip { right:-20vw; width:118vw; grid-template-columns:repeat(2,1fr); opacity:.14; }
  .services-cinematic-grid { grid-template-columns:1fr; transform:translateY(-12px); }
  .service-cinematic { min-height:420px; }
  .service-cinematic-index { bottom:calc(100% + 128px); }
  .services-aerial-band { min-height:560px; }
  .services-aerial-shade { background:linear-gradient(to top,rgba(7,8,9,.88) 0%,rgba(7,8,9,.52) 62%,rgba(7,8,9,.16) 100%); }
  .services-aerial-content { align-self:flex-end; }
  .services-accountability-photo { width:100%; min-height:430px; margin:18px 0 0; }
  .services-process-track { display:none; }
  .services-process-grid { grid-template-columns:1fr; }
  .services-process-step,.services-process-step + .services-process-step { padding:28px 0; border-top:1px solid rgba(241,237,230,.12); min-height:0; opacity:1; transform:none; }
  .services-process-step:first-child { border-top:0; }
  .services-process-dot { display:none; }
  .services-final-cta-grid { grid-template-columns:1fr; }
}
@media (prefers-reduced-motion:reduce) {
  .services-process-fill { width:100%; transition:none; }
  .services-process-step { opacity:1; transform:none; transition:none; }
  .service-cinematic-bg,.services-accountability-photo img { transition:none; }
}