/* A single arrival from the logo to the finished city. Copy is available immediately; motion is optional. */
.hero-story .copy,.hero-story .nav--intro{opacity:1;transform:none;transition:none}
.hero-story .copy-wrap{padding-bottom:110px}
.hero-story .copy{max-width:min(48vw,620px);gap:24px}
.hero-story .copy h1{font-size:clamp(38px,4.65vw,67px)}
.hero-story .copy .lede{max-width:44ch;font-size:17px;line-height:1.65}
.hero-story .hero-steps{display:none}
.hero-story .marks{opacity:0;transition:none}
.hero-story[data-places-visible="true"] .marks{opacity:.75}
.hero-story .mk{transition:none}
.hero-story .mk .dot,.hero-story .mk .rule,.hero-story .mk .mk-lbl{opacity:var(--place-reveal,0)}
.hero-story .mk .rule{transform:scaleX(var(--place-reveal,0));transform-origin:left}
.hero-story .mk.flip .rule{transform-origin:right}
.hero-story .mk .mk-lbl{transform:translateY(calc((1 - var(--place-reveal,0))*6px))}
.hero-story .mk .s{display:none}
.hero-story .hero-scrim{background:linear-gradient(90deg,#07080e 0%,rgba(7,8,14,.96) 23%,rgba(7,8,14,.77) 37%,rgba(7,8,14,.18) 54%,transparent 69%),linear-gradient(0deg,#07080e 0%,rgba(7,8,14,.75) 13%,transparent 33%),linear-gradient(180deg,#07080e 0%,transparent 19%)}
.hero-story .scene-caption{top:110px;bottom:auto;font-size:10px;color:#9390a6}
.hero-story .rail{position:absolute;right:var(--gutter);bottom:153px;width:39%;padding:0;gap:9px;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .4s}
.hero-story[data-city-controls="true"] .rail{opacity:1;visibility:visible;pointer-events:auto}
.hero-story .rail .live{font-size:9px;line-height:1.6;letter-spacing:.06em}
.hero-story .rail .live #state{max-width:40ch}
.hero-motion-controls{position:absolute;right:var(--gutter);bottom:30px;z-index:8;display:flex;gap:18px;flex-shrink:0}
.hero-motion-controls button{font:11px var(--mono);color:#b9b4c8;display:inline-flex;gap:8px;align-items:center;padding:8px 0;min-height:36px}
.hero-motion-controls button[hidden]{display:none}
.hero-motion-controls button:hover{color:#fff}
.hero-motion-controls svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:1.4}
@media(max-width:1100px) and (min-width:901px){
 .hero-story .copy{max-width:54vw;gap:20px}.hero-story .copy .lede{font-size:15px}.hero-story .copy h1{font-size:4.8vw}
 .hero-story .rail{width:36%}.hero-story .rail .live #state{display:none}
}
@media(max-width:900px){
 .hero-story{min-height:900px;height:100svh}
 .hero-story .copy-wrap{align-items:flex-end;min-height:0;padding-top:0;padding-bottom:160px}
 .hero-story .copy{max-width:600px;gap:17px}
 .hero-story .copy h1{font-size:clamp(34px,6vw,50px)}
 .hero-story .copy .lede{font-size:15px;line-height:1.55;max-width:53ch}
 .hero-story .hero-scrim{background:linear-gradient(180deg,#07080e 0%,transparent 12%,transparent 24%,rgba(7,8,14,.88) 38%,#07080e 50%)}
 .hero-story .scene-caption{top:94px;right:var(--gutter);font-size:8px}
 .hero-motion-controls{gap:12px}.hero-motion-controls button{font-size:9px;padding-top:0}
 .hero-motion-controls button span{display:none}
 .hero-motion-controls svg{width:15px;height:15px}
 .hero-story .rail{right:auto;left:var(--gutter);top:244px;bottom:auto;width:calc(100% - var(--gutter)*2);max-width:500px;gap:2px}
 .hero-story .rail .live{display:none}
}
@media(max-width:420px){
 .hero-story{min-height:900px}
 .hero-story .copy-wrap{padding-top:0;padding-bottom:160px}
 .hero-story .copy h1{font-size:37px}
 .hero-story .copy .cta{gap:16px;flex-wrap:wrap}
 .hero-story .copy .lede{font-size:15px}
}
@media(max-width:350px){
 .hero-story{min-height:960px}.hero-story .copy h1{font-size:32px}
 .hero-story .copy-wrap{padding-top:0;padding-bottom:228px}
}
@media(prefers-reduced-motion:reduce){
 .hero-story *{transition:none!important;animation:none!important}
}