/* A single, centered composition over the existing orbital lattice. */
.stage--cinematic#main {
  isolation: isolate;
  height: auto;
  min-height: calc(100svh - var(--nav));
  display: grid;
  place-items: center;
  background: #0a1622;
}
.hero-backdrop {
  position: absolute;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background: radial-gradient(ellipse at 50% 44%, rgba(233,205,169,.11), transparent 64%);
}
.hero-backdrop canvas { display: block; width: 100%; height: 100%; opacity: .8; }
.hero-labels { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 3; pointer-events: none; }
.stage--cinematic::after {
  content: "";
  display: block;
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(ellipse 38% 64% at 50% 48%, rgba(10,22,34,.88), rgba(10,22,34,.4) 72%, transparent 100%),
    linear-gradient(180deg, rgba(10,22,34,.25), transparent 24%, transparent 70%, #0a1622);
}
.stage--cinematic#main > .cinematic-content {
  flex: none;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: clamp(96px, 12svh, 140px) 24px;
}
.cinematic-content h1 {
  margin: 0;
  max-width: 100%;
  font-size: clamp(3.5rem, 7.8vw, 7.5rem);
  line-height: 1.02;
  letter-spacing: -.035em;
  text-shadow: 0 4px 48px rgba(10,22,34,.45);
}
.cinematic-content h1 .accent { padding: 0 .12em .2em; margin: 0 -.12em -.2em; }
.cinematic-lede {
  max-width: 35rem;
  margin: 32px auto 0;
  font-size: clamp(1.05rem, 1.4vw, 1.2rem);
  line-height: 1.65;
  color: #e2ded6;
  text-wrap: pretty;
}
.cinematic-actions { display: flex; flex-direction: column; align-items: center; gap: 24px; margin-top: 36px; }
.cinematic-actions .btn-primary { padding: 19px 44px; font-size: 1.06rem; }
.cinematic-actions .hero-more { margin: 0; }
@media (max-width: 860px) {
  .stage--cinematic#main > .cinematic-content { padding: 100px 24px; }
  .cinematic-content h1 { font-size: clamp(2.8rem, 10.5vw, 5.5rem); }
  .cinematic-lede { max-width: 30rem; margin-top: 28px; }
  .hero-backdrop canvas { opacity: 1; filter: brightness(1.45); }
  .stage--cinematic::after { background: radial-gradient(ellipse 65% 57% at 50% 47%, rgba(10,22,34,.62), rgba(10,22,34,.12) 80%, transparent), linear-gradient(180deg, transparent 70%, #0a1622); }
}
@media (max-width: 380px) {
  .stage--cinematic#main > .cinematic-content { padding: 96px 20px; }
  .cinematic-content h1 { font-size: 2.65rem; }
  .cinematic-actions .btn-primary { padding: 18px 32px; }
}

/* Match the approved hero while retaining the shared production navigation. */
.stage--cinematic#main { overflow: hidden; }
.stage--cinematic .hero-more { display:flex; flex-direction:column; gap:12px; color:var(--paper-dim); font-size:.94rem; text-decoration:none; }
.stage--cinematic .hero-more:hover { color:var(--paper); }
.stage--cinematic .fix-more-arrow { width:9px; height:9px; border-right:1px solid currentColor; border-bottom:1px solid currentColor; transform:rotate(45deg); }
.stage--cinematic :focus-visible { outline:2px solid var(--champ); outline-offset:6px; }

/* Name the service above the brand line without crowding the hero. */
.hero-service{font-family:var(--mono);font-size:.74rem;line-height:1.6;letter-spacing:.08em;color:var(--champ);margin:0 0 24px;max-width:32rem;text-wrap:balance}
@media(max-width:860px){.hero-service{font-size:.68rem;max-width:22rem;margin-bottom:20px}}