.neural-globe{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none}
.hero-orbit.neural-orbit{opacity:.95;right:4%;top:12%;transform:translateY(calc(var(--hero-p)*-85px)) scale(calc(1 + var(--hero-p)*.12))}
.neural-orbit:before{content:"";position:absolute;inset:20%;border-radius:50%;background:radial-gradient(circle,#b9d6cc08,transparent 68%);border:1px solid #bed8d00a}
.neural-orbit .orbit-label{background:#0a0d0de0;border-color:#bed8d02c;color:#c0d0ca;z-index:1;font-size:9px;padding:8px 10px}
.neural-orbit .orbit-label-a{top:20%;left:20%}.neural-orbit .orbit-label-b{top:45%;right:4%}.neural-orbit .orbit-label-c{bottom:20%;left:25%}.neural-orbit .orbit-label-d{top:50%;left:2%}
.hero-grid{opacity:.3}.hero-copy{position:relative;z-index:2}
.story .connection-map.neural-map{aspect-ratio:1/1;filter:none!important;max-height:650px;overflow:hidden;overflow:clip}
.neural-map .neural-globe{inset:-8%;width:116%;height:116%}
.story .neural-map .map-node{font-size:12px;line-height:1.4;width:31%;padding:12px;background:#0b0e0df2;border-color:#94b1a444;z-index:1}
.story .neural-map .map-node span{font-size:11px;line-height:1.5;color:#a9b7b1}
.story .neural-map .node-one{top:9%;left:2%}.story .neural-map .node-two{top:9%;right:2%}.story .neural-map .node-three{bottom:9%;left:2%}.story .neural-map .node-four{bottom:9%;right:2%}
.globe-center-word{position:absolute;inset:0;display:grid;place-items:center;font:400 clamp(19px,2.6vw,36px)/1 Arial,sans-serif;letter-spacing:.12em;color:#d9ebe3;text-shadow:0 0 25px #b5ddce55;pointer-events:none;opacity:var(--globe-word,1);transform:scale(calc(.85 + var(--globe-word,1)*.15))}
.story .neural-map .map-node{animation:none!important}
@media(max-width:1100px) and (min-width:761px){.hero-orbit.neural-orbit{right:3%;top:19%;opacity:.7}}
@media(max-width:760px){.hero-orbit.neural-orbit{width:calc(100vw + 100px);height:calc(100vw + 100px);right:-50px;top:110px;opacity:.5}.neural-orbit .orbit-label{font-size:8px}.neural-orbit .orbit-label-a{top:12%;left:18%}.neural-orbit .orbit-label-b{top:12%;right:18%}.neural-orbit .orbit-label-d{top:24%;left:18%}.neural-orbit .orbit-label-c{top:24%;right:18%;left:auto;bottom:auto}.story .connection-map.neural-map{aspect-ratio:1/1}.story .story-visual{width:min(440px,100%)}.story .neural-map .map-node{font-size:10px;padding:9px;width:33%}.story .neural-map .map-node span{font-size:9px}.globe-center-word{font-size:24px}}
@media(prefers-reduced-motion:reduce){.hero-orbit.neural-orbit{transform:none}.neural-orbit *{animation:none!important}}
/* When the globe turns into a chart, the source cards step back so values and labels stay readable. */
.story .neural-map .map-node{opacity:calc(.22 + var(--globe-word,1)*.78);transition:opacity .35s,transform .5s,background .5s}
/* Large screens: the story and the banner grow with the window instead of stopping at laptop size. */
@media(min-width:1700px){.story .container{width:min(1840px,calc(100% - 140px))}.story .connection-map.neural-map{max-height:min(940px,calc(100svh - 250px))}.hero-orbit.neural-orbit{width:50vw;height:50vw;max-width:min(1200px,calc(100svh - 120px));max-height:min(1200px,calc(100svh - 120px))}.story .neural-map .map-node{font-size:clamp(12px,.75vw,18px)}.story .neural-map .map-node span{font-size:clamp(11px,.62vw,15px)}.globe-center-word{font-size:clamp(36px,2vw,54px)}}
/* Phones: the banner chart gets its own block under the button (never behind the text), and the story cards become small corner tags. */
@media(max-width:760px){
 .hero,.world-ready .hero{height:auto;min-height:0}
 .hero-sticky{position:relative;height:auto;min-height:100svh;display:flex;flex-direction:column;overflow:hidden}
 .hero-copy,.world-ready .hero-copy{order:1;transform:none;opacity:1}
 .hero-orbit.neural-orbit{order:2;position:relative;inset:auto;flex:none;width:100%;height:min(360px,86vw);min-width:0;min-height:0;max-width:none;max-height:none;margin:28px 0 8px;opacity:1;transform:none}
 .hero-bottom{order:3;position:relative;inset:auto;margin-top:auto;padding-top:12px}
 .neural-orbit:before,.neural-orbit .orbit-label{display:none}
 /* The story chart stays pinned under the header while texts 01, 02 and 03 scroll beneath it; the shape follows the text being read. */
 .story .story-grid,.motion-scenes .story .story-grid{display:block}
 .story .story-panels{margin-top:20px}
 .story .story-visual{position:-webkit-sticky;position:sticky;top:70px;z-index:3;align-self:start;width:100%;max-width:none;margin:0;padding-bottom:6px;background:#0b0b0b;box-shadow:0 18px 22px -6px #0b0b0b}
 .story .story-visual .neural-map{width:min(100%,calc(100vh - 370px),440px);width:min(100%,calc(100svh - 370px),440px);min-width:220px;margin:0 auto}
 .story .story-visual .visual-caption{padding:8px 0}
 .story .neural-map .neural-globe{inset:0;width:100%;height:100%}
 .story .connection-map.neural-map{display:block;height:auto;min-height:0;padding:0}
 .story .neural-map .map-node,.motion-scenes .story .neural-map .map-node{position:absolute;inset:auto;min-height:0;display:block;width:auto;min-width:0;padding:6px 8px;font-size:9px;line-height:1.2;letter-spacing:.06em;white-space:nowrap}
 .story .neural-map .map-node span{display:none}
 .story .neural-map .node-one,.story .neural-map .node-three{left:0}.story .neural-map .node-two,.story .neural-map .node-four{right:0}
 .story .neural-map .node-one,.story .neural-map .node-two{top:0}.story .neural-map .node-three,.story .neural-map .node-four{bottom:0}
}
