/* =========================================================
   NETWORK+ · INTEGRATED FILM EXPERIENCE
   Scene 1 → V25 Network → Partner response → normal website
========================================================= */

.np-film {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100svh;
  min-height: 680px;
  overflow: hidden;
  color: #f8fbff;
  background:
    radial-gradient(ellipse at 65% 46%, rgba(50, 151, 199, 0.14), transparent 34%),
    radial-gradient(ellipse at 86% 8%, rgba(23, 61, 116, 0.18), transparent 34%),
    radial-gradient(ellipse at 19% 91%, rgba(13, 31, 83, 0.22), transparent 42%),
    linear-gradient(138deg, #061225 0%, #07162c 52%, #030a17 100%);
  isolation: isolate;
}

.np-film::after {
  position: absolute;
  inset: 0;
  z-index: 30;
  content: "";
  pointer-events: none;
  box-shadow:
    inset 0 0 190px rgba(0, 0, 0, 0.42),
    inset 0 -105px 150px rgba(2, 7, 18, 0.34),
    inset 0 70px 120px rgba(2, 7, 18, 0.16);
}

.np-film__stage,
.np-film__ambient,
.np-film__grain,
.np-film__vignette,
.np-film__visual,
.np-scene-one-svg,
.np-partner-svg {
  position: absolute;
  inset: 0;
}

.np-film__stage { z-index: 2; overflow: hidden; }
.np-film__ambient,
.np-film__grain,
.np-film__vignette { pointer-events: none; }

.np-film__ambient {
  z-index: 0;
  background:
    radial-gradient(circle at 65% 48%, rgba(83, 203, 241, 0.05), transparent 24%),
    radial-gradient(circle at 65% 48%, transparent 0 34%, rgba(50, 148, 196, 0.022) 34.3%, transparent 35.2%),
    radial-gradient(circle at 74% 53%, rgba(7, 33, 76, 0.16), transparent 58%);
}

.np-film__grain {
  z-index: 1;
  opacity: 0.018;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.44'/%3E%3C/svg%3E");
  mix-blend-mode: soft-light;
}

.np-film__vignette {
  z-index: 20;
  background:
    radial-gradient(ellipse at 66% 49%, transparent 35%, rgba(2, 7, 18, 0.12) 68%, rgba(2, 7, 18, 0.46) 100%),
    linear-gradient(90deg, rgba(3, 10, 24, 0.16), transparent 24%, transparent 80%, rgba(3, 10, 24, 0.22));
}

.np-film__visual { z-index: 4; }
.np-scene-one-svg,
.np-partner-svg {
  z-index: 5;
  width: 100%;
  height: 100%;
  max-width: none;
  overflow: visible;
  pointer-events: none;
}
.np-partner-svg { z-index: 8; opacity: 0; }

/* Copy -------------------------------------------------------------- */
.np-film__copy {
  position: absolute;
  z-index: 18;
  inset: 0;
  pointer-events: none;
}

.np-film-copy {
  position: absolute;
  top: 50%;
  left: clamp(28px, 4.1vw, 72px);
  display: flex;
  width: min(530px, 36.5vw);
  min-height: 420px;
  flex-direction: column;
  justify-content: center;
  visibility: hidden;
  opacity: 0;
  transform: translate3d(0, 22px, 0);
  translate: 0 -44%;
  transition: opacity 480ms ease, transform 620ms cubic-bezier(.22,1,.36,1);
}

.np-film-copy.is-current {
  visibility: visible;
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

.np-film-copy--network {
  top: clamp(104px, 12vh, 132px);
  width: min(410px, 31vw);
  min-height: 0;
  justify-content: flex-start;
  translate: 0 0;
}

.np-film-copy--result {
  top: clamp(92px, 10vh, 114px);
  right: clamp(34px, 3.5vw, 62px);
  left: auto;
  width: min(430px, 31vw);
  min-height: 0;
  justify-content: flex-start;
  translate: 0 0;
}

.np-film-copy__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
  color: #8fe7ff;
  font-size: 10px;
  font-weight: 780;
  line-height: 1.2;
  letter-spacing: 0.23em;
  text-transform: uppercase;
}

.np-film-copy__eyebrow::before {
  width: 28px;
  height: 1px;
  content: "";
  background: linear-gradient(90deg, transparent, rgba(143, 231, 255, 0.9));
  box-shadow: 0 0 8px rgba(102, 215, 250, 0.28);
}

.np-film-copy h1,
.np-film-copy h2 {
  max-width: 455px;
  margin: 0;
  color: #fff;
  font-size: clamp(42px, 3.55vw, 56px);
  font-weight: 755;
  line-height: 1.01;
  letter-spacing: -0.058em;
  text-wrap: balance;
}

.np-film-copy--network h2,
.np-film-copy--result h2 {
  font-size: clamp(34px, 2.8vw, 46px);
  line-height: 1.02;
}

.np-film-copy p {
  max-width: 365px;
  margin-top: 24px;
  color: rgba(214, 230, 243, 0.70);
  font-size: clamp(14px, 1.02vw, 17px);
  line-height: 1.70;
}

.np-film-copy__rule {
  display: block;
  width: min(290px, 78%);
  height: 1px;
  margin-top: 30px;
  background: linear-gradient(90deg, rgba(125, 226, 255, 0.62), transparent);
}

/* Scroll hint ------------------------------------------------------- */
.np-film__hint {
  position: absolute;
  z-index: 28;
  right: 0;
  bottom: clamp(22px, 3vh, 36px);
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  color: rgba(190, 218, 233, 0.52);
  font-size: 9px;
  font-weight: 760;
  line-height: 1;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  pointer-events: none;
  transition: opacity 260ms ease, color 260ms ease;
}
.np-film__hint.is-running { opacity: 0; }
.np-film__hint-icon {
  position: relative;
  display: inline-block;
  width: 17px;
  height: 27px;
  border: 1px solid rgba(157, 226, 250, 0.32);
  border-radius: 999px;
}
.np-film__hint-icon::before {
  position: absolute;
  top: 5px;
  left: 50%;
  width: 3px;
  height: 6px;
  border-radius: 999px;
  content: "";
  background: #a8eeff;
  box-shadow: 0 0 8px rgba(111, 221, 255, 0.62);
  transform: translateX(-50%);
  animation: np-wheel 1.9s ease-in-out infinite;
}
@keyframes np-wheel {
  0%, 100% { transform: translate(-50%, 0); opacity: 0.24; }
  40% { transform: translate(-50%, 7px); opacity: 0.90; }
  70% { transform: translate(-50%, 7px); opacity: 0; }
}

/* Scene 1 SVG ------------------------------------------------------- */
.np-s1-line {
  fill: none;
  stroke: rgba(112, 214, 246, 0.46);
  stroke-width: 1.15;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}
.np-s1-node { filter: url(#np-s1-node-glow); }
.np-s1-node__halo { fill: rgba(83, 198, 235, 0.09); }
.np-s1-node__ring { fill: rgba(51, 149, 193, 0.045); stroke: rgba(115, 222, 251, 0.50); stroke-width: 0.95; vector-effect: non-scaling-stroke; }
.np-s1-node__core { fill: #ecfbff; stroke: rgba(255,255,255,0.86); stroke-width: 0.65; vector-effect: non-scaling-stroke; }
.np-s1-label { fill: rgba(244, 251, 255, 0.96); font-size: 15px; font-weight: 730; letter-spacing: 0.08em; }
.np-s1-core-field { fill: rgba(31, 105, 147, 0.07); }
.np-s1-core-orbit { fill: none; stroke: rgba(103, 210, 244, 0.20); stroke-width: 0.9; vector-effect: non-scaling-stroke; }
.np-s1-core-disc { fill: rgba(4, 18, 35, 0.985); stroke: rgba(105, 215, 246, 0.54); stroke-width: 1.1; vector-effect: non-scaling-stroke; }
.np-s1-core-title { fill: #fff; font-size: 40px; font-weight: 760; letter-spacing: -0.052em; }
.np-s1-core-plus { fill: #6ed8f4; }

/* Partner scene ----------------------------------------------------- */
.np-partner-path,
.np-partner-active {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
.np-partner-path { stroke: rgba(91, 185, 218, 0.31); stroke-width: 1.10; }
.np-partner-active { stroke: rgba(181, 241, 255, 0.92); stroke-width: 2.0; filter: url(#np-partner-glow); }
.np-partner-node { filter: url(#np-partner-glow); }
.np-partner-node__halo { fill: rgba(93, 207, 242, 0.07); }
.np-partner-node__diamond { fill: rgba(8, 31, 54, 0.92); stroke: rgba(128, 225, 252, 0.66); stroke-width: 1.0; vector-effect: non-scaling-stroke; }
.np-partner-node__core { fill: #dff8ff; }
.np-partner-label__title { fill: rgba(244, 251, 255, 0.96); font-size: 14px; font-weight: 760; letter-spacing: 0.08em; }
.np-partner-label__sub { fill: rgba(190, 225, 238, 0.58); font-size: 10px; font-weight: 520; }
.np-partner-impulse { fill: #f6fdff; filter: url(#np-partner-glow); }

/* Mobile fallback --------------------------------------------------- */
.np-film-mobile { display: none; }

@media (max-width: 1100px) {
  .np-film-copy { width: min(440px, 38vw); }
  .np-film-copy h1 { font-size: clamp(38px, 4.3vw, 48px); }
  .np-film-copy--result { width: min(360px, 33vw); }
}

@media (max-width: 899px) {
  .np-film {
    height: auto;
    min-height: 0;
    padding: 118px 0 72px;
    overflow: visible;
  }
  .np-film__stage { display: none; }
  .np-film-mobile {
    position: relative;
    z-index: 4;
    display: block;
    width: min(calc(100% - 36px), 720px);
    margin-inline: auto;
  }
  .np-film-mobile__intro h1 {
    margin-top: 22px;
    font-size: clamp(34px, 9.4vw, 48px);
    line-height: 1.00;
    overflow-wrap: normal;
    word-break: normal;
    letter-spacing: -0.06em;
  }
  .np-film-mobile__intro > p:last-child {
    max-width: 34rem;
    margin-top: 24px;
    color: var(--np-muted);
    font-size: 17px;
  }
  .np-film-mobile__network {
    height: min(78vw, 560px);
    margin: 40px -18px 16px;
  }
  .np-film-mobile__svg { width: 100%; height: 100%; }
  .np-film-mobile__steps { display: grid; gap: 12px; }
  .np-film-mobile__steps article {
    padding: 24px;
    border: 1px solid rgba(126, 219, 250, 0.13);
    border-radius: 20px;
    background: rgba(255,255,255,0.025);
  }
  .np-film-mobile__steps small {
    color: #86ddf8;
    font-size: 10px;
    font-weight: 760;
    letter-spacing: 0.18em;
    text-transform: uppercase;
  }
  .np-film-mobile__steps h2 {
    margin-top: 10px;
    font-size: 22px;
    line-height: 1.2;
    letter-spacing: -0.035em;
  }
}

@media (prefers-reduced-motion: reduce) {
  .np-film-copy,
  .np-network-wrap,
  .np-partner-svg { transition: none !important; }
}

/* ==========================================================
   NETWORK+ HYBRID V26 – visual bridge back to original project
   ========================================================== */
.np-film__copy .np-film-copy__eyebrow{letter-spacing:.22em;text-transform:uppercase}
.np-film-copy--story h1{max-width:600px}
.hybrid-build-note{position:absolute;left:18px;bottom:18px;z-index:50;font:600 9px/1.2 system-ui,sans-serif;letter-spacing:.18em;text-transform:uppercase;color:rgba(170,220,240,.45);pointer-events:none}
.np-film__visual{background:radial-gradient(circle at 68% 48%,rgba(80,184,228,.075),transparent 55%)}

/* Scene 3 – demand aggregation ------------------------------------------------ */
.np-demand-path,
.np-demand-active,
.np-demand-trunk,
.np-demand-trunk-active,
.np-demand-bus {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
.np-demand-path { stroke: rgba(87, 180, 215, 0.25); stroke-width: 1.0; }
.np-demand-active { stroke: rgba(180, 240, 255, 0.86); stroke-width: 1.65; filter: url(#np-partner-glow); }
.np-demand-trunk { stroke: rgba(92, 193, 227, 0.42); stroke-width: 1.2; }
.np-demand-trunk-active { stroke: rgba(193, 246, 255, 0.94); stroke-width: 2.0; filter: url(#np-partner-glow); }
.np-demand-bus { stroke: rgba(91, 185, 218, 0.34); stroke-width: 1.05; }
.np-demand-hub { filter: url(#np-partner-glow); }
.np-demand-hub__halo { fill: rgba(93, 207, 242, 0.08); }
.np-demand-hub__ring { fill: rgba(7, 25, 44, 0.92); stroke: rgba(128, 225, 252, 0.72); stroke-width: 1.05; vector-effect: non-scaling-stroke; }
.np-demand-hub__core { fill: #e8fbff; }
.np-demand-hub__title { fill: rgba(244, 251, 255, 0.94); font-size: 10px; font-weight: 760; letter-spacing: 0.12em; }
.np-demand-hub__sub { fill: rgba(190, 225, 238, 0.58); font-size: 9px; font-weight: 540; letter-spacing: 0.02em; }


/* ==========================================================
   MOBILE FINAL — native scrolling, no scene/input lock
========================================================== */
@media (max-width: 899px) {
  html { overflow-x: hidden; overscroll-behavior-y: auto; }
  body { overflow-x: hidden; overflow-y: auto; touch-action: pan-y pinch-zoom; }
  .np-film { min-height: 0 !important; height: auto !important; padding: 92px 0 48px !important; overflow: visible !important; }
  .np-film__stage { display: none !important; }
  .np-film-mobile { display: block !important; position: relative; width: min(calc(100% - 32px), 680px); margin: 0 auto; }
  .np-film-mobile__intro { position: relative; z-index: 2; }
  .np-film-mobile__intro h1 { margin: 16px 0 0; max-width: 11ch; color: #fff; font-size: clamp(40px, 11vw, 58px); line-height: .98; letter-spacing: -.065em; }
  .np-film-mobile__intro h1 span { color: #50B8E4; }
  .np-film-mobile__intro p { margin: 22px 0 0; max-width: 35rem; color: rgba(235,245,252,.68); font-size: 16px; line-height: 1.7; }
  .np-film-mobile__actions { display: grid; grid-template-columns: 1fr; gap: 10px; margin-top: 24px; }
  .np-film-mobile__actions a { display: flex; align-items: center; justify-content: space-between; min-height: 48px; padding: 0 17px; border: 1px solid rgba(143,231,255,.22); border-radius: 999px; color: #eef8ff; background: rgba(255,255,255,.035); text-decoration: none; font-size: 13px; font-weight: 800; }
  .np-film-mobile__actions a:first-child { color: #061225; background: #50B8E4; border-color: #50B8E4; }
  .np-film-mobile__network { height: min(86vw, 520px); min-height: 330px; margin: 26px -16px 20px; }
  .np-film-mobile__svg { display: block; width: 100%; height: 100%; }
  .np-film-mobile__steps { display: grid; gap: 10px; }
  .np-film-mobile__steps article { padding: 20px; border: 1px solid rgba(126,219,250,.13); border-radius: 18px; background: rgba(255,255,255,.025); }
  .np-film-mobile__steps small { color: #86ddf8; font-size: 9px; font-weight: 800; letter-spacing: .17em; text-transform: uppercase; }
  .np-film-mobile__steps h2 { margin: 9px 0 0; color: #fff; font-size: 19px; line-height: 1.28; letter-spacing: -.035em; }
}



/* ==========================================================
   MOBILE OPENING — portrait composition built from the same
   network IDs and edges, not a scaled desktop canvas.
========================================================== */
@media (max-width: 899px) {
  html {
    overflow-x: hidden;
    overscroll-behavior-y: auto;
  }

  body {
    overflow-x: hidden;
    overflow-y: auto;
    touch-action: pan-y pinch-zoom;
  }

  .np-film {
    height: auto !important;
    min-height: 0 !important;
    padding: max(54px, env(safe-area-inset-top)) 0 54px !important;
    overflow: visible !important;
  }

  /* The desktop scene keeps its original geometry and is never squeezed
     into the portrait viewport. */
  .np-film__stage {
    display: none !important;
  }

  .np-film-mobile {
    display: block !important;
    position: relative;
    width: min(calc(100% - 32px), 680px);
    margin: 0 auto;
  }

  .np-film-mobile__intro {
    position: relative;
    z-index: 2;
  }

  .np-film-mobile__intro h1 {
    max-width: 8.6ch;
    margin: 14px 0 0;
    color: #fff;
    font-size: clamp(38px, 10vw, 50px);
    line-height: .98;
    letter-spacing: -.065em;
  }

  .np-film-mobile__intro h1 span {
    color: #50B8E4;
  }

  /* 720 × 960 viewBox and a matching 3:4 box remove the old letterboxing.
     No negative margins, no desktop crop and no horizontal overflow. */
  .np-film-mobile__network {
    position: relative;
    width: 100%;
    max-width: 440px;
    height: auto;
    min-height: 0;
    aspect-ratio: 3 / 4;
    margin: 22px auto 14px;
    overflow: visible;
  }

  .np-film-mobile__svg {
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
  }

  .np-film-mobile__details {
    position: relative;
    z-index: 2;
  }

  .np-film-mobile__details > p {
    margin: 0;
    max-width: 35rem;
    color: rgba(235,245,252,.68);
    font-size: 16px;
    line-height: 1.7;
  }

  .np-film-mobile__actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    margin-top: 24px;
  }

  .np-film-mobile__actions a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 48px;
    padding: 0 17px;
    border: 1px solid rgba(143,231,255,.22);
    border-radius: 999px;
    color: #eef8ff;
    background: rgba(255,255,255,.035);
    text-decoration: none;
    font-size: 13px;
    font-weight: 800;
  }

  .np-film-mobile__actions a:first-child {
    color: #061225;
    background: #50B8E4;
    border-color: #50B8E4;
  }

  /* Mobile SVG hierarchy. The desktop V25 styles are untouched. */
  .np-mobile-edge {
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
    animation: none !important;
  }

  .np-mobile-edge--backbone {
    stroke: rgba(112,214,246,.58);
    stroke-width: 1.55;
  }

  .np-mobile-edge--local {
    stroke: rgba(91,181,215,.34);
    stroke-width: 1.05;
  }

  .np-mobile-edge--growth {
    stroke: rgba(80,158,193,.26);
    stroke-width: .86;
  }

  .np-mobile-node {
    filter: url(#np-mobile-node-glow);
    transform-box: fill-box;
    transform-origin: center;
    animation: none !important;
  }

  .np-mobile-node__halo {
    fill: rgba(88,201,237,.075);
  }

  .np-mobile-node__ring {
    fill: rgba(65,174,215,.045);
    stroke: rgba(104,214,246,.40);
    stroke-width: .85;
    vector-effect: non-scaling-stroke;
  }

  .np-mobile-node__core {
    fill: #eafbff;
    stroke: rgba(255,255,255,.78);
    stroke-width: .62;
    vector-effect: non-scaling-stroke;
  }

  .np-mobile-node--primary .np-mobile-node__halo {
    fill: rgba(91,208,243,.12);
  }

  .np-mobile-node--primary .np-mobile-node__ring {
    stroke: rgba(111,220,249,.58);
    stroke-width: 1;
  }

  .np-mobile-node--growth .np-mobile-node__ring {
    stroke: rgba(94,192,224,.30);
  }

  .np-mobile-core__field {
    fill: rgba(31,105,147,.065);
  }

  .np-mobile-core__orbit {
    fill: none;
    stroke: rgba(103,210,244,.20);
    stroke-width: .95;
    vector-effect: non-scaling-stroke;
  }

  .np-mobile-core__disc {
    fill: rgba(4,18,35,.985);
    stroke: rgba(105,215,246,.55);
    stroke-width: 1.1;
    vector-effect: non-scaling-stroke;
  }

  .np-mobile-core__title {
    fill: #fff;
    font-size: 42px;
    font-weight: 760;
    letter-spacing: -.052em;
  }

  .np-mobile-core__plus {
    fill: #6ed8f4;
  }

  .np-mobile-company-label {
    fill: rgba(244,251,255,.96);
    font-size: 20px;
    font-weight: 760;
    letter-spacing: .11em;
    text-transform: uppercase;
  }

  .np-film-mobile__steps {
    display: grid;
    gap: 10px;
  }

  .np-film-mobile__steps article {
    padding: 20px;
    border: 1px solid rgba(126,219,250,.13);
    border-radius: 18px;
    background: rgba(255,255,255,.025);
  }

  .np-film-mobile__steps small {
    color: #86ddf8;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .17em;
    text-transform: uppercase;
  }

  .np-film-mobile__steps h2 {
    margin: 9px 0 0;
    color: #fff;
    font-size: 19px;
    line-height: 1.28;
    letter-spacing: -.035em;
  }
}

@media (max-width: 380px) {
  .np-film-mobile {
    width: min(calc(100% - 28px), 680px);
  }

  .np-film-mobile__intro h1 {
    font-size: clamp(38px, 10.4vw, 50px);
  }

  .np-film-mobile__network {
    margin-top: 12px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .np-mobile-edge,
  .np-mobile-node,
  .np-mobile-core {
    animation: none !important;
    transition: none !important;
  }
}

/* ==========================================================
   MOBILE SCENE ORDER FIX
   Scene 1 and Scene 2 are now separate user-triggered beats.
   Desktop rules above remain untouched.
========================================================== */
@media (max-width: 899px) {
  /* The desktop sticky header sits after the film in the DOM. On mobile it
     therefore looked like an accidental footer between the hero and the
     first content section. The real footer at the end of the page remains. */
  .np-site-header {
    display: none !important;
  }

  .np-mobile-seed-edge {
    fill: none;
    stroke: rgba(105, 207, 241, .46);
    stroke-width: 1.15;
    stroke-linecap: round;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
  }

  .np-mobile-company-label {
    fill: rgba(235, 247, 253, .82);
    font-size: 13px;
    font-weight: 740;
    letter-spacing: .075em;
    text-transform: uppercase;
  }

  .np-mobile-company-label--featured {
    fill: rgba(249, 253, 255, .98);
    font-size: 18px;
    font-weight: 800;
    letter-spacing: .095em;
  }

  .np-film-mobile__svg.is-mobile-story-playing {
    will-change: contents;
  }

  .np-film-mobile__svg.is-scene-one-complete .np-mobile-seed-edge {
    filter: drop-shadow(0 0 3px rgba(88, 204, 241, .22));
  }
}

/* ==========================================================
   MOBILE THREE-SCENE CONTROLLER
   One fresh swipe/wheel gesture triggers one complete beat:
   companies -> network -> partners -> normal page.
   Desktop selectors and desktop composition remain untouched.
========================================================== */
@media (max-width: 899px) {
  html.np-mobile-story-captured,
  body.np-mobile-story-captured {
    height: 100%;
    overflow: hidden !important;
    overscroll-behavior: none;
  }

  body.np-mobile-story-captured .np-film {
    height: 100dvh !important;
    min-height: 100svh !important;
    padding: max(16px, env(safe-area-inset-top)) 0 max(10px, env(safe-area-inset-bottom)) !important;
    overflow: hidden !important;
  }

  body.np-mobile-story-captured .np-film-mobile {
    display: grid !important;
    grid-template-rows: auto minmax(0, 1fr);
    align-content: stretch;
    width: min(calc(100% - 32px), 680px);
    height: 100%;
    touch-action: none;
  }

  body.np-mobile-story-captured .np-film-mobile__details,
  body.np-mobile-story-captured .np-film-mobile__steps {
    display: none !important;
  }

  body.np-mobile-story-captured .np-film-mobile__intro {
    max-height: 240px;
    padding-bottom: 10px;
    overflow: hidden;
    opacity: 1;
    transform: translateY(0);
    transform-origin: top center;
    will-change: max-height, opacity, transform, padding-bottom;
  }

  body.np-mobile-story-captured .np-film-mobile__intro h1 {
    margin-top: 12px;
    max-width: 10.6ch;
    font-size: clamp(33px, 9.2vw, 44px);
  }

  body.np-mobile-story-captured .np-film-mobile__network {
    align-self: center;
    width: min(100%, calc((100dvh - 210px) * .72));
    max-width: 410px;
    height: auto;
    max-height: none;
    min-height: 0;
    aspect-ratio: 3 / 4;
    margin: 0 auto;
    overflow: visible;
    transform: translate3d(0, var(--np-mobile-diagram-lift, 0px), 0);
    will-change: transform;
  }

  .np-mobile-network-camera {
    transform-box: view-box;
    transform-origin: 0 0;
  }

  .np-mobile-demand-path,
  .np-mobile-demand-active,
  .np-mobile-partner-path,
  .np-mobile-partner-active {
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
  }

  .np-mobile-demand-path,
  .np-mobile-partner-path {
    stroke: rgba(91, 185, 218, .31);
    stroke-width: 1.05;
  }

  .np-mobile-demand-active,
  .np-mobile-partner-active {
    stroke: rgba(190, 244, 255, .92);
    stroke-width: 1.75;
    filter: url(#np-mobile-node-glow);
  }

  .np-mobile-partner-impulse {
    fill: #f5fdff;
    filter: url(#np-mobile-node-glow);
  }

  .np-mobile-demand-hub,
  .np-mobile-partner-node {
    filter: url(#np-mobile-node-glow);
  }

  .np-mobile-demand-hub__halo,
  .np-mobile-partner-node__halo {
    fill: rgba(93, 207, 242, .09);
  }

  .np-mobile-demand-hub__ring {
    fill: rgba(7, 25, 44, .94);
    stroke: rgba(128, 225, 252, .72);
    stroke-width: 1;
    vector-effect: non-scaling-stroke;
  }

  .np-mobile-demand-hub__core,
  .np-mobile-partner-node__core {
    fill: #e8fbff;
  }

  .np-mobile-demand-hub__title {
    fill: rgba(244, 251, 255, .90);
    font-size: 11px;
    font-weight: 790;
    letter-spacing: .10em;
  }

  .np-mobile-partner-node__diamond {
    fill: rgba(8, 31, 54, .94);
    stroke: rgba(128, 225, 252, .70);
    stroke-width: 1;
    vector-effect: non-scaling-stroke;
  }

  .np-mobile-partner-label__title {
    fill: rgba(244, 251, 255, .96);
    font-size: 16px;
    font-weight: 780;
    letter-spacing: .055em;
  }

  .np-mobile-partner-label__sub {
    fill: rgba(190, 225, 238, .62);
    font-size: 10px;
    font-weight: 540;
  }

  .np-film-mobile__svg.is-partner-building,
  .np-film-mobile__svg.is-partner-complete {
    overflow: visible;
  }
}

@media (max-width: 380px) and (max-height: 650px) {
  body.np-mobile-story-captured .np-film-mobile__intro h1 {
    font-size: clamp(34px, 10vw, 42px);
  }


  body.np-mobile-story-captured .np-film-mobile__network {
    width: min(100%, calc((100dvh - 148px) * .75));
  }
}