.network-superpower {
  --ns-ink: #101014;
  --ns-paper: #f7f5ef;
  --ns-orange: #ef4823;
  --ns-muted: #66635e;
  position: relative;
  width: 100%;
  scroll-margin-top: 88px;
  padding: 48px 48px 56px;
  box-sizing: border-box;
  overflow: clip;
  background: var(--ns-paper);
  color: var(--ns-ink);
  isolation: isolate;
}

.ns-scroll-track { position: relative; background: #f7f5ef; }
.ns-pin-shell {
  position: fixed;
  inset: 0 0 auto;
  width: 100%;
  z-index: 20;
  background: #f7f5ef;
  opacity: 0;
  overflow: clip;
  pointer-events: none;
}
.ns-pin-shell .network-superpower { position: absolute; transform-origin: top left; }
.ns-pin-complete .ns-role-copy, .ns-pin-complete .ns-astro { transition: none; }
body.ns-network-reading .gv-cta-bubble { opacity: 0; visibility: hidden; pointer-events: none; }
.ns-scene { position: relative; height: 740px; }
.ns-watermark {
  position: absolute;
  inset: 27% 0 auto;
  text-align: center;
  font: 400 260px/1.2 'Boldonse', sans-serif;
  letter-spacing: 0;
  color: transparent;
  -webkit-text-stroke: 1px rgba(55, 49, 40, .065);
  pointer-events: none;
}
.ns-orbits {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}
.ns-orbit-lines { color: rgba(50, 43, 34, .18); }
.ns-orbit-markers { fill: var(--ns-orange); }
.ns-orbit-markers circle:nth-child(odd) { fill: #f9bd25; }
.ns-orbit-lines path { vector-effect: non-scaling-stroke; }
/* Keep the markers circular while the responsive orbit stretches vertically. */
.ns-orbit-markers circle { r: .5px; stroke: var(--ns-orange); stroke-width: 7px; vector-effect: non-scaling-stroke; }
.ns-orbit-markers circle:nth-child(odd) { stroke: #f9bd25; }

/* Title and description travel together, so the pair is positioned as one
   block. The title keeps its own type; only the placement moved out. */
.ns-headline {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 43%;
  width: 690px;
  transform: translate(-50%, -50%);
}
:is(#scaler, .ns-pin-shell) .network-superpower .ns-title {
  width: 660px;
  max-width: 100%;
  margin: 0 auto;
  font-family: 'Boldonse', sans-serif;
  font-size: 48px !important;
  line-height: 1.35 !important;
  letter-spacing: 0;
  color: var(--ns-ink);
  text-align: center;
}
.ns-title > span { display: block; }
.ns-title { text-transform: uppercase; font-weight: 400; }
.ns-title strong { color: var(--ns-orange); font-weight: inherit; }
.ns-roles { list-style: none; margin: 0; padding: 0; }
.ns-role {
  position: absolute;
  top: var(--ns-y);
  left: var(--ns-x);
  z-index: 3;
  width: var(--ns-width, 290px);
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
}
.ns-astro {
  display: block;
  flex: 0 0 64px;
  width: 64px;
  height: 80px;
  object-fit: contain;
}
.ns-role-copy { min-width: 0; }
:is(#scaler, .ns-pin-shell) .network-superpower .ns-role-name {
  margin: 0;
  font-family: 'Boldonse', sans-serif;
  font-size: var(--ns-size, 28px) !important;
  line-height: 1.38 !important;
  letter-spacing: 0;
  color: var(--ns-ink);
  text-transform: uppercase;
}
.ns-role-name > span { color: var(--ns-orange); }
.network-superpower .ns-role-sub {
  margin: 5px 0 0;
  font: 500 10px/1.6 'Archivo', sans-serif;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--ns-muted);
}
.network-superpower .ns-description {
  max-width: 100%;
  margin: 24px auto 0;
  font: 400 17px/1.65 'Archivo', sans-serif;
  letter-spacing: 0;
  text-align: center;
  color: var(--ns-muted);
}

.ns-role--directors { --ns-x: 7%; --ns-y: 8%; }
.ns-role--producers { --ns-x: 40%; --ns-y: 15%; --ns-width: 320px; }
.ns-role--creatives { --ns-x: 75%; --ns-y: 8%; }
.ns-role--designers { --ns-x: 0%; --ns-y: 32%; }
.ns-role--animators { --ns-x: 77%; --ns-y: 33%; }
.ns-role--editors { --ns-x: 2%; --ns-y: 61%; }
.ns-role--dops { --ns-x: 81%; --ns-y: 58%; --ns-width: 230px; }
.ns-role--developers { --ns-x: 31%; --ns-y: 67%; --ns-size: 26px; --ns-width: 320px; }
.ns-role--production { --ns-x: 20%; --ns-y: 84%; --ns-size: 22px; --ns-width: 460px; }
.ns-role--ai { --ns-x: 64%; --ns-y: 83%; --ns-size: 22px; --ns-width: 420px; }

/* Reveal only after initialization, so content stays visible without JavaScript. */
.ns-enhanced .ns-watermark { opacity: 0; transition: opacity 900ms ease; }
.ns-enhanced .ns-orbit-lines path { stroke-dasharray: 100; stroke-dashoffset: 100; transition: stroke-dashoffset 1600ms ease 140ms; }
.ns-enhanced .ns-orbit-markers { opacity: 0; transition: opacity 900ms ease 300ms; }
.ns-enhanced.is-assembled .ns-watermark,
.ns-enhanced.is-assembled .ns-orbit-markers { opacity: 1; }
.ns-enhanced.is-assembled .ns-orbit-lines path { stroke-dashoffset: 0; }
.ns-enhanced [data-ns-reveal] { opacity: 0; }
.ns-enhanced .ns-title { transition: opacity 700ms ease 200ms; }
.ns-enhanced .ns-title > span { translate: 0 12px; transition: translate 700ms ease 200ms; }
.ns-enhanced .ns-title strong { display: inline-block; opacity: 0; translate: 0 6px; transition: opacity 650ms ease 360ms, translate 650ms ease 360ms; }
.ns-enhanced .ns-role { opacity: 1; }
.ns-enhanced .ns-role-copy { opacity: 0; translate: 0 8px; transition: opacity 360ms ease, translate 360ms ease; }
.ns-enhanced .ns-astro { opacity: 0; translate: 0 7px; transition: opacity 360ms ease 150ms, translate 360ms ease 150ms; }
.ns-enhanced .ns-description { translate: 0 10px; transition: opacity 700ms ease 300ms, translate 700ms ease 300ms; }
.ns-enhanced .is-visible,
.ns-enhanced .is-visible strong,
.ns-enhanced .is-visible .ns-role-copy,
.ns-enhanced .is-visible .ns-astro { opacity: 1; }
.ns-enhanced .is-visible,
.ns-enhanced .is-visible > span,
.ns-enhanced .is-visible strong,
.ns-enhanced .is-visible .ns-role-copy,
.ns-enhanced .is-visible .ns-astro { translate: 0 0; }

@media (min-width: 600px) and (max-width: 1199px) {
  .network-superpower { width: 100%; padding: 42px 28px 48px; }
  .ns-scene { height: 860px; }
  .ns-watermark { top: 34%; font-size: 140px; }
  .ns-headline { top: 47%; width: 92%; max-width: 570px; }
  :is(#scaler, .ns-pin-shell) .network-superpower .ns-title { width: 100%; font-size: 38px !important; }
  .ns-astro { flex-basis: 48px; width: 48px; height: 64px; }
  .ns-role { --ns-width: 230px; gap: 8px; }
  :is(#scaler, .ns-pin-shell) .network-superpower .ns-role-name { font-size: 22px !important; }
  .network-superpower .ns-role-sub { font-size: 10px; }
  .ns-role--directors { --ns-x: 0%; --ns-y: 3%; }
  .ns-role--creatives { left: auto; right: 0; --ns-y: 7%; }
  .ns-role--producers { --ns-x: 31%; --ns-y: 17%; }
  .ns-role--designers { --ns-x: 0%; --ns-y: 25%; }
  .ns-role--animators { left: auto; right: 0; --ns-y: 24%; }
  .ns-role--editors { --ns-x: 0%; --ns-y: 59%; }
  .ns-role--dops { left: auto; right: 0; --ns-y: 61%; --ns-width: 200px; }
  .ns-role--developers { --ns-x: 31%; --ns-y: 71%; }
  .ns-role--production { --ns-x: 0%; --ns-y: 85%; --ns-width: 48%; }
  .ns-role--ai { left: auto; right: 0; --ns-y: 85%; --ns-width: 46%; }
}

@media (max-width: 599px) {
  .network-superpower { width: 100%; padding: 32px 20px 48px; }
  .ns-scene { height: 1120px; }
  .ns-watermark { top: 35%; font-size: 75px; }
  .ns-orbit-lines path:nth-child(3) { display: none; }
  .ns-orbit-lines { opacity: .65; }
  .ns-headline { top: 43%; width: 100%; }
  :is(#scaler, .ns-pin-shell) .network-superpower .ns-title { width: 100%; font-size: 28px !important; line-height: 1.42 !important; }
  .ns-role { width: 240px; gap: 9px; }
  .ns-astro { flex-basis: 46px; width: 46px; height: 60px; }
  :is(#scaler, .ns-pin-shell) .network-superpower .ns-role-name { font-size: 23px !important; }
  .network-superpower .ns-role-sub { font-size: 10px; }
  .ns-role--directors { left: 0; top: 20px; }
  .ns-role--creatives { left: auto; right: 0; top: 115px; }
  .ns-role--producers { left: 30px; top: 215px; }
  .ns-role--designers { left: 0; top: 308px; }
  .ns-role--editors { left: 0; top: 602px; }
  .ns-role--animators { left: auto; right: 0; top: 680px; }
  .ns-role--developers { left: 0; top: 775px; }
  .ns-role--dops { left: auto; right: 0; top: 860px; width: 190px; }
  .ns-role--production { left: 0; top: 955px; width: 100%; }
  .ns-role--ai { left: 18px; top: 1040px; width: calc(100% - 18px); }
  :is(#scaler, .ns-pin-shell) .network-superpower .ns-role--production .ns-role-name,
  :is(#scaler, .ns-pin-shell) .network-superpower .ns-role--ai .ns-role-name { font-size: 20px !important; }
  .network-superpower .ns-description { margin-top: 18px; max-width: 350px; font-size: 14px; line-height: 1.7; }
  .ns-enhanced .ns-description { transition-delay: 300ms; }
}

@media (max-width: 359px) {
  :is(#scaler, .ns-pin-shell) .network-superpower .ns-title { font-size: 24px !important; }
  :is(#scaler, .ns-pin-shell) .network-superpower .ns-role--production .ns-role-name,
  :is(#scaler, .ns-pin-shell) .network-superpower .ns-role--ai .ns-role-name { font-size: 18px !important; }
  .ns-role--producers { left: 16px; }
}

@media (max-width: 1199px) {
  body.ns-network-reading .gv-cta-bubble { opacity: 0; visibility: hidden; pointer-events: none; }
}
@media (prefers-reduced-motion: reduce) {
  .network-superpower *, .network-superpower *::before { transition: none !important; animation: none !important; }
  .ns-enhanced [data-ns-reveal], .ns-enhanced .ns-watermark, .ns-enhanced .ns-orbit-markers,
  .ns-enhanced .ns-title strong, .ns-enhanced .ns-role-copy, .ns-enhanced .ns-astro { opacity: 1; translate: none; }
  .ns-enhanced .ns-orbit-lines path { stroke-dashoffset: 0; }
}

/* A compact constellation keeps all ten roles readable in a pinned phone viewport. */
@media (min-width: 600px) and (max-width: 1199px) {
  .ns-pin-shell .ns-role--editors { --ns-y: 64%; }
  .ns-pin-shell .ns-role--dops { --ns-y: 65%; }
  .ns-pin-shell .ns-role--developers { --ns-y: 75%; }
}
@media (max-width: 599px) {
  .ns-pin-shell .network-superpower { padding: 64px 16px 20px; }
  .ns-pin-shell .ns-scene { height: min(640px, calc(var(--ns-vh) - 84px)); }
  .ns-pin-shell .ns-headline { top: 41%; width: 100%; }
  :is(#scaler, .ns-pin-shell) .network-superpower.ns-pinned-content .ns-title { font-size: 24px !important; }
  :is(#scaler, .ns-pin-shell) .network-superpower.ns-pinned-content .ns-description { font-size: 12px; line-height: 1.45; margin-top: 12px; }
  .ns-pin-shell .ns-role { width: 47%; gap: 5px; }
  .ns-pin-shell .ns-astro { flex-basis: 28px; width: 28px; height: 38px; }
  :is(#scaler, .ns-pin-shell) .network-superpower.ns-pinned-content .ns-role .ns-role-name { font-size: 15px !important; }
  .ns-pin-shell .ns-role--directors { left: 0; top: 0; }
  .ns-pin-shell .ns-role--creatives { right: 0; left: auto; top: 3%; }
  .ns-pin-shell .ns-role--designers { left: 0; top: 15%; }
  .ns-pin-shell .ns-role--animators { right: 0; left: auto; top: 17%; }
  .ns-pin-shell .ns-role--editors { left: 0; top: 61%; }
  .ns-pin-shell .ns-role--production { right: 0; left: auto; top: 61%; }
  .ns-pin-shell .ns-role--developers { left: 0; top: 77%; }
  .ns-pin-shell .ns-role--dops { right: 0; left: auto; top: 76%; }
  .ns-pin-shell .ns-role--producers { left: 0; top: auto; bottom: 0; }
  .ns-pin-shell .ns-role--ai { right: 0; left: auto; top: auto; bottom: 0; }
}
@media (max-width: 359px) {
  :is(#scaler, .ns-pin-shell) .network-superpower.ns-pinned-content .ns-title { font-size: 22px !important; }
  :is(#scaler, .ns-pin-shell) .network-superpower.ns-pinned-content .ns-role .ns-role-name { font-size: 13px !important; }
  .ns-pin-shell .ns-astro { flex-basis: 24px; width: 24px; }
}