/* dubaivisatour.com — maps the shared scroll-story kit onto the site's tokens (homepage v2) */
.gd-stage{--st-bg:#f8ecdc;--st-fg:var(--navy);--st-muted:#4E5B6B;--st-accent:var(--gold-ink);--st-line:rgba(15,36,64,.16);
  --st-maxw:1160px;--st-gutter:clamp(18px,4vw,36px);--st-nav:71px;--st-display:var(--font-h);--st-display-weight:700;
  margin-top:-71px} /* start under the sticky header so the pin begins at scroll 0 */
.gd-stage .st-poster-start{background-image:url(skyline-start.jpg)}
.gd-stage .st-poster-end{background-image:url(skyline-end.jpg)}
.gd-stage .st-poster{background-size:auto 72%;background-position:92% 55%} /* matches data-fit=contain zoom .8 */
.gd-stage .st-story{max-width:min(540px,44vw)}
.gd-stage .st-title{font-size:clamp(2rem,3.9vw,3.3rem);line-height:1.1;letter-spacing:-.01em;color:var(--navy)}
html[lang="ru"] .gd-stage .st-title{font-size:clamp(1.85rem,3.3vw,2.8rem)}
.gd-stage .st-title em{font-style:normal;color:var(--gold-ink)}
.gd-stage .st-kicker{font-weight:800;letter-spacing:.12em;text-transform:uppercase;font-size:.74rem}
.gd-stage .st-lede{color:var(--st-muted)}
.gd-stage .st-actions{gap:14px}
.gd-stage .btn.ghost{border-color:var(--navy);color:var(--navy)}
.gd-stage .btn.ghost:hover{background:var(--navy);border-color:var(--navy);color:#fff}
.gd-stage .st-steps span{font-weight:700;letter-spacing:.1em;text-transform:uppercase;font-size:.7rem;white-space:nowrap}
@media (max-width:820px){.gd-stage{--st-bottom:calc(69px + env(safe-area-inset-bottom,0px))}}
@media (max-width:760px){
  .gd-stage .st-story{max-width:none}
  .gd-stage .st-title{font-size:clamp(1.65rem,7.4vw,2.3rem)}
  html[lang="ru"] .gd-stage .st-title{font-size:clamp(1.5rem,6.6vw,2.05rem)}
  .gd-stage .st-kicker{font-size:.66rem;letter-spacing:.1em}
  .gd-stage .st-actions{gap:10px}
  .gd-stage .st-actions .btn{padding:10px 13px;font-size:.86rem;min-block-size:44px}
  .gd-stage .st-poster{background-size:auto 64%;background-position:115% 50%}
}
/* small phones: the finished scene keeps headline + buttons on one row */
@media (max-width:400px){.gd-stage .st-title{font-size:1.5rem}html[lang="ru"] .gd-stage .st-title{font-size:1.38rem}.gd-stage .st-actions .btn{padding:9px 11px;font-size:.8rem}.gd-stage .st-rail{flex-basis:36px}.gd-stage .st-steps{gap:9px}.gd-stage .st-steps span{letter-spacing:.04em;font-size:.62rem}}
@media (max-width:760px) and (max-height:700px){.gd-stage .st-final .st-kicker{display:none}}
/* the rest of the old hero, kept directly after the stage (original markup + app.js stamp/tilt) */
.hero-recap .hero-grid{padding-block:clamp(44px,6vw,80px);grid-template-columns:1.1fr .9fr}
.hero-recap .badge{margin-block-end:22px}
.hero-recap .checks{margin-block-start:0!important}
.hero-recap .trust{margin-block-start:26px}
@media (max-width:1020px){.hero-recap .hero-grid{grid-template-columns:1fr}}
/* portrait tablets (761–1100px, portrait): stack picture over copy like phones; canvas placement from data-t-* via tablet.js */
@media (min-width:761px) and (max-width:1100px) and (orientation:portrait){
  .gd-stage .st-media{bottom:auto;height:56%}
  .gd-stage .st-media::after{background:linear-gradient(0deg,var(--st-bg) 0%,color-mix(in srgb,var(--st-bg) 30%,transparent) 30%,transparent 55%),
    linear-gradient(180deg,color-mix(in srgb,var(--st-bg) 70%,transparent) 0%,transparent 22%)}
  .gd-stage .st-copy{align-items:flex-end;padding:0 0 calc(84px + var(--st-bottom))}
  .gd-stage .st-story{max-width:640px}
  .gd-stage .st-poster{background-size:auto 85%;background-position:161% 52%}
}

/* phones: lighter start poster (LCP) */
@media (max-width:760px){.gd-stage .st-poster-start{background-image:url(skyline-start-m.jpg)}}