/* Keep all baked-in captions visible; controls have their own rows. */
.intro-boot body::before{content:"";position:fixed;inset:0;z-index:999;background:#0a2132;pointer-events:none}
html.intro-active{overflow:hidden}
.site-intro{position:fixed;inset:0;width:100%;height:100%;height:100dvh;max-width:none;max-height:none;margin:0;padding:0;border:0;background:#091c2a;color:#fff;overflow:hidden;opacity:1;transition:opacity .6s ease;overscroll-behavior:contain}
.site-intro[open]{display:grid;grid-template-rows:auto minmax(0,1fr) auto}
.site-intro:not([open]){display:none}
.site-intro::backdrop{background:#0a2132;transition:background-color .6s ease}
.site-intro.is-leaving{opacity:0;pointer-events:none}
.site-intro.is-leaving::backdrop{background:transparent}
.intro-ambient{position:absolute;inset:0;background:radial-gradient(ellipse at center,#23404d,#091c2a 75%);pointer-events:none}
.intro-video{position:relative;grid-row:2;z-index:1;width:100%;height:100%;min-width:0;min-height:0;max-width:none;object-fit:contain;background:transparent}
.intro-top{position:relative;grid-row:1;z-index:1;padding:max(22px,env(safe-area-inset-top)) 4vw 18px;display:flex;justify-content:space-between;align-items:center;gap:16px;font-size:11px;letter-spacing:.16em}
.intro-top span:first-child{font-size:21px;letter-spacing:.19em;font-weight:600}
.intro-bottom{position:relative;grid-row:3;z-index:1;padding:18px 4vw max(22px,env(safe-area-inset-bottom));background:#091c2a;display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}
.intro-bottom p{margin:0;font-size:14px;line-height:1.6;letter-spacing:.06em}
.intro-actions{display:flex;gap:8px;flex-wrap:wrap}
.intro-actions button,.opening-replay button{min-height:44px;padding:10px 18px;border:1px solid #ffffff80;background:#091c2a65;color:white;cursor:pointer;backdrop-filter:blur(12px);font:inherit;font-size:14px;letter-spacing:.03em}
.intro-actions button{white-space:nowrap}
.intro-actions button:hover,.opening-replay button:hover{background:#ffffff24}
.intro-actions button:focus-visible,.opening-replay button:focus-visible{outline:2px solid #d6f68c;outline-offset:4px}
.intro-actions [data-intro-audio][aria-pressed="true"]{border-color:#d6f68c;color:#d6f68c}
.intro-actions [data-intro-skip]{background:#f3f5f1;color:#0a2132;border-color:#f3f5f1;display:flex;gap:12px;align-items:center}
.intro-progress{width:100%;height:2px;background:#ffffff40}
.intro-progress span{display:block;height:100%;background:#d6f68c;transform:scaleX(0);transform-origin:left;transition:transform .25s linear}
.intro-description{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.opening-replay{position:absolute;right:6%;bottom:130px;z-index:5}
.opening-replay button{display:flex;align-items:center;gap:12px}
.opening-replay button[hidden]{display:none}
.opening-replay button span{font-size:20px;line-height:1}
.opening-replay small{font-size:10px;opacity:.6;letter-spacing:.12em}
.hero-city .city-photo{object-position:55% 50%}
@media(max-width:760px){
  .intro-top{padding:max(22px,env(safe-area-inset-top)) 6vw 16px;font-size:10px}
  .intro-top span:first-child{font-size:18px}
  .intro-bottom{padding:16px 6vw max(24px,env(safe-area-inset-bottom));gap:16px}
  .intro-bottom p{width:100%}
  .intro-actions{width:100%;justify-content:space-between}
  .intro-actions button{padding:10px}
  .opening-replay{right:6%;bottom:107px}
  .opening-replay button{padding:8px 12px;gap:9px}
  .hero-city .city-photo{object-position:52% 50%}
}
@media(max-height:480px){
  .intro-top{padding:8px max(4vw,env(safe-area-inset-right))}
  .intro-top span:first-child{font-size:17px}
  .intro-bottom{padding:8px max(4vw,env(safe-area-inset-right)) max(8px,env(safe-area-inset-bottom));gap:8px;justify-content:flex-end}
  .intro-bottom p{display:none}
  .intro-actions{width:auto}
}
@media(prefers-reduced-motion:reduce){.site-intro,.site-intro::backdrop,.intro-progress span{transition:none}}