/* One pinned viewport; no framed scene selector or automatic camera tour. */
.hero-map { padding-bottom: 24px; }
.story-scroll { position: relative; }
.story-scroll.is-scroll-story { height: 1200svh; }
.story-scroll.is-scroll-story > .hero-stage { position: sticky; top: 0; }
.hero-stage { height: 100svh; min-height: 560px; max-height: none; background: #eef3f7; color: #172b45; }
.hero-stage #workflow-viewport { background: #eef3f7; }
.workflow-viewport { overflow: hidden; }
.workflow-viewport canvas { display: block; width: 100%; height: 100%; }
.journey-fallback { position: absolute; inset: 0; display: grid; align-items: center; }
.journey-fallback svg { width: 100%; height: 100%; }
#workflow-viewport[data-ready="true"] .journey-fallback { display: none; }
.hero-map-heading { left: max(32px,5vw); bottom: 128px; width: 405px; padding: 0; background: none; }
.hero-map-heading,.journey-caption { isolation: isolate; }
.hero-map-heading::before,.journey-caption::before { content: ""; position: absolute; inset: -65px -90px -50px -65px; z-index: -1; background: radial-gradient(ellipse at 38% 50%,rgb(239 243 245 / .96) 0%,rgb(239 243 245 / .93) 36%,rgb(239 243 245 / 0) 73%); pointer-events: none; }
.hero-map-heading h1 { font-size: clamp(30px,3.15vw,46px); line-height: 1.12; font-weight: 500; letter-spacing: -.045em; color: #183251; text-shadow: 0 2px 28px #fff; text-wrap: balance; }
.hero-map-heading p { max-width: 290px; margin-top: 20px; font-size: 15px; color: #405973; }
.hero-map-heading .text-link { margin-top: 20px; color: #3157d5; }
.journey-caption { left: max(32px,5vw); right: auto; top: auto; bottom: 134px; width: 335px; padding: 0; background: none; opacity: 0; pointer-events: none; z-index: 5; }
.journey-caption #journey-scene-title { font-size: clamp(26px,2.5vw,38px); line-height: 1.3; letter-spacing: -.04em; color: #183251; text-shadow: 0 2px 22px #fff; }
.journey-caption p { margin-top: 15px; max-width: 290px; font-size: 15px; line-height: 1.65; color: #405973; text-wrap: pretty; }
.journey-caption::before { inset: -20px -20px -20px -22px; background: rgb(239 243 245 / .98); }
.hero-stage[data-phone="true"] .journey-caption::before { background: none; }
.hero-stage[data-scene="office"] .journey-caption { visibility: hidden !important; }
.phone-focus-backdrop { position: absolute; inset: 0; background: linear-gradient(110deg,#edf2f6 20%,rgb(237 242 246 / .97) 55%,rgb(229 237 243 / .90)); pointer-events: none; opacity: 0; z-index: 3; }
.studio-annotation { position: absolute; width: 310px; padding: 17px 20px 18px; background: rgb(255 255 255 / .95); border-left: 3px solid #3157d5; transform: translateX(-50%); box-shadow: 0 8px 30px rgb(39 61 82 / .06); z-index: 5; pointer-events: none; opacity: 0; visibility: hidden; }
.studio-annotation strong { display: block; font-size: 18px; font-weight: 600; letter-spacing: -.025em; color: #183251; }
.studio-annotation p { margin: 7px 0 0; font-size: 14px; line-height: 1.6; color: #405973; }
.hero-stage[data-phone="true"] .journey-caption { bottom: auto; top: 40%; }
.hero-stage[data-phone="true"] { background: #e7eff7; }
.journey-navigation { left: max(32px,5vw); right: max(32px,5vw); bottom: max(28px,env(safe-area-inset-bottom)); align-items: center; gap: 20px; z-index: 12; }
.story-scroll-hint { display: flex; gap: 14px; align-items: center; color: #405973; font-size: 13px; line-height: 1.5; }
.story-scroll-hint > span:first-child { color: #3157d5; font-size: 26px; }
.story-tools { display: flex; align-items: center; gap: 16px; }
.story-tools select,.story-tools button,.story-skip { border: 0; border-radius: 0; background: rgb(255 255 255 / .9); padding: 10px 12px; color: #334a64; font-size: 12px; min-height: 44px; line-height: 1.5; }
.story-tools select { max-width: 178px; cursor: pointer; }
.story-tools button:hover,.story-skip:hover { color: #2546b6; background: #fff; }
.story-skip { display: inline-flex; align-items: center; background: transparent; text-decoration: underline; text-underline-offset: 4px; }
.story-progress { position: absolute; bottom: 0; left: 0; width: 100%; height: 3px; background: rgb(49 87 213 / .08); pointer-events: none; z-index: 12; }
.story-progress span { display: block; height: 100%; background: #3157d5; transform: scaleX(0); transform-origin: 0 50%; }
.story-landmark { position: absolute; padding: 4px 10px; background: rgb(255 255 255 / .90); color: #37536e; font-size: 11px; white-space: nowrap; transform: translate(-50%,-100%); pointer-events: none; opacity: 0; }
.story-landmark[data-visible="true"] { opacity: 1; }
.story-note { position: absolute; top: 88px; right: max(32px,5vw); font-size: 11px; letter-spacing: .02em; color: #53667c; pointer-events: none; z-index: 5; }
.hero-stage[data-phone="true"] .story-note { visibility: hidden; }
.story-load { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; color: #405973; background: #eef3f7; z-index: 5; font-size: 14px; }
.story-load[hidden] { display: none; }
.hero-stage[data-reduced="true"] .story-scroll-hint { display: none; }
.hero-stage[data-reduced="true"] .story-tools { width: 100%; justify-content: flex-end; }
.static-story { max-width: 700px; padding-block: 12px; }
@media(max-width:1000px) {
  .hero-map-heading { width: 330px; }
  .journey-caption { width: 280px; }
  .story-tools { gap: 6px; }
  .story-skip { padding-inline: 6px; }
}
@media(max-width:767px) {
  .hero-stage { min-height: 580px; height: 100svh; }
  .hero-map-heading { top: 115px; bottom: auto; left: 24px; width: min(340px,calc(100% - 48px)); }
  .hero-map-heading h1 { font-size: 30px; }
  .hero-map-heading::before,.journey-caption::before { inset: -35px -45px -35px; background: radial-gradient(ellipse at 42% 45%,rgb(239 243 245 / .98) 20%,rgb(239 243 245 / .94) 42%,rgb(239 243 245 / 0) 76%); }
  .journey-caption::before { inset: -14px -12px; background: rgb(239 243 245 / .97); }
  .hero-map-heading p { font-size: 13px; max-width: 250px; margin-top: 12px; }
  .hero-map-heading .text-link { margin-top: 9px; font-size: 13px; }
  .journey-caption,.hero-stage[data-phone="true"] .journey-caption { top: 102px; bottom: auto; left: 24px; width: calc(100% - 48px); }
  .journey-caption #journey-scene-title { font-size: 25px; }
  .journey-caption p { font-size: 13px; line-height: 1.7; margin-top: 8px; max-width: 300px; }
  .hero-stage[data-phone="true"] .journey-caption { visibility: hidden !important; }
  .hero-stage[data-phone="true"] .journey-caption p { display: none; }
  .hero-stage[data-phone="true"] .journey-caption #journey-scene-title { font-size: 22px; }
  .hero-stage[data-phone="true"] .story-scroll-hint { display: none; }
  .journey-navigation { left: 18px; right: 18px; bottom: max(16px,env(safe-area-inset-bottom)); flex-wrap: wrap; gap: 10px; }
  .story-scroll-hint { width: 100%; font-size: 12px; }
  .story-scroll-hint > span:first-child { font-size: 19px; }
  .story-tools { width: 100%; justify-content: space-between; gap: 2px; }
  .story-tools select,.story-tools button,.story-skip { font-size: 11px; padding: 9px; }
  .story-tools select { max-width: 140px; }
  .story-note { top: 82px; right: 20px; font-size: 10px; }
  .studio-annotation { width: min(310px,calc(100% - 48px)); padding: 13px 16px; }
  .studio-annotation strong { font-size: 17px; }
  .studio-annotation p { font-size: 13px; }
}
@media(max-width:360px) {
  .hero-map-heading h1 { font-size: 28px; }
  .journey-caption #journey-scene-title { font-size: 22px; }
  .story-tools select { max-width: 118px; }
  .story-tools select,.story-tools button,.story-skip { padding: 8px 6px; font-size: 10px; }
  .hero-stage:has(#workflow-viewport[data-scene="discovery"]) .hero-map-heading { visibility: visible; }
  .hero-stage[data-phone="true"] .journey-caption { visibility: hidden !important; }
}
@media(prefers-reduced-motion:reduce) { .story-progress { display: none; } }