/* Phase 3 — Hero A+C+D+E (Shah). Easy revert.
   A: doorway + lit aisle fill lower ~2/3; big awning letters mostly out of frame.
   C: Step Inside BELOW the arch and visible in the fold (arch size unchanged).
   D: Pause moved to quiet dark spot (never removed).
   E: no dissolve. NO B (arch box size unchanged). Eyebrow off. */

.p-index #step .st-arch{ position:relative !important; }

/* Let Step Inside sit below the arch without being clipped */
.p-index #step .st-arch{ overflow:visible !important; }
.p-index #step .st-pic,
.p-index #step .st-pic .vwrap,
.p-index #step .hero-v{
  overflow:hidden !important;
  border-radius:inherit;
}


/* A: push crop into doorway — same arch size */
.p-index #step .hero-v video,
.p-index #step .hero-v img,
.p-index #step .hero-v .vposter,
.p-index #step .hero-v .hero-last,
.p-index #step .st-pic .vwrap img,
.p-index #step .st-pic .vwrap video,
.mo .p-index #step .st-pic .vwrap img,
.mo .p-index #step .st-pic .vwrap video{
  object-fit:cover !important;
  object-position:48% 90% !important;
  transform:scale(1.88) !important;
  transform-origin:48% 88% !important;
}

.p-index #step .hero-v video{ transition:none !important; }
.p-index #step .hero-v.film-playing video,
.p-index .step.mo .hero-v video{ opacity:1; }

/* C: Step Inside BELOW the arch */
.p-index #step .st-arch > a.hint.door-cue,
.mo .p-index #step .st-arch > a.hint.door-cue{
  position:absolute !important;
  top:100% !important;
  left:50% !important;
  right:auto !important;
  bottom:auto !important;
  transform:translateX(-50%) translateY(10px) !important;
  translate:none !important;
  margin:0 !important;
  z-index:7 !important;
  display:inline-flex !important;
  visibility:visible !important;
  opacity:1 !important;
  grid-area:unset !important;
  width:max-content !important;
  max-width:90% !important;
}

/* D: Pause on quiet upper-right (dark awning band), never removed */
.p-index #step .st-arch > .motion-btn.icon-btn{
  position:absolute !important;
  top:8% !important;
  left:auto !important;
  right:12px !important;
  bottom:auto !important;
  inset:8% 12px auto auto !important;
  margin:0 !important;
  z-index:8 !important;
}

/* Mobile: keep arch size; seat arch+cue inside the fold */
@media (max-width:899px){
  .p-index #step .st-stage{
    height:100svh !important;
    min-height:100svh !important;
    max-height:100svh !important;
    overflow:visible !important;
  }
  .p-index #step .st-arch{
    position:absolute !important;
    left:50% !important;
    right:auto !important;
    /* leave ~56px under arch for Step Inside */
    bottom:64px !important;
    top:auto !important;
    margin:0 !important;
    translate:-50% 0 !important;
    transform:none !important;
  }
  .p-index #step .st-arch > a.hint.door-cue{
    /* below arch, still inside the 56px band → in fold */
    top:100% !important;
    left:50% !important;
    transform:translateX(-50%) translateY(8px) !important;
  }
  .p-index #step .hero-v video,
  .p-index #step .hero-v img,
  .p-index #step .hero-v .vposter,
  .p-index #step .hero-v .hero-last{
    object-position:48% 90% !important;
    transform:scale(1.88) !important;
    transform-origin:48% 88% !important;
  }
}

@media (min-width:900px){
  /* Short desktop fold: shrink arch via max-height/svh so Step Inside fits under it.
     Does NOT apply below 900px (390/768 keep current mobile arch). Pause stays top-right. */
  .p-index #step .st-stage{
    --door-height: clamp(400px, calc(100svh - 210px), 620px) !important;
    padding-bottom: 72px !important;
    overflow: visible !important;
  }
  .p-index #step .st-arch,
  .mo .p-index #step .st-arch{
    height: var(--door-height) !important;
    max-height: min(620px, calc(100svh - 200px), calc(100dvh - 200px)) !important;
    width: calc(var(--door-height) * .98) !important;
    max-width: 100% !important;
  }
  .p-index #step .st-arch > a.hint.door-cue{
    left:50% !important;
    transform:translateX(-50%) translateY(12px) !important;
  }
  .p-index #step .st-arch > .motion-btn.icon-btn{
    top:8% !important; right:16px !important;
  }
  .p-index #step .hero-v video,
  .p-index #step .hero-v img,
  .p-index #step .hero-v .vposter,
  .p-index #step .hero-v .hero-last{
    object-position:50% 90% !important;
    transform:scale(1.75) !important;
    transform-origin:50% 90% !important;
  }
}
/* Extra-short desktop (≤800px tall): tighter arch so cue clears fold */
@media (min-width:900px) and (max-height:800px){
  .p-index #step .st-stage{
    --door-height: clamp(360px, calc(100svh - 190px), 520px) !important;
    padding-bottom: 68px !important;
  }
}
@media (min-width:900px) and (max-height:700px){
  .p-index #step .st-stage{
    --door-height: clamp(300px, calc(100svh - 170px), 440px) !important;
    padding-bottom: 64px !important;
  }
}

/* v6n17 — Reduced motion (no scroll film, html without .mo), phones/tablets:
   the "Welcome in. / So much to discover." copy sat on top of the arch photo.
   Keep intro + arch exactly as in motion mode (same 100svh band, same arch size,
   Step Inside under the arch) and flow the copy below that band. */
@media (max-width:899px){
  html:not(.mo) .p-index #step .st-stage{
    display:grid !important;
    grid-template-columns:100%;
    grid-template-rows:100svh auto;
    height:auto !important;
    max-height:none !important;
    min-height:0 !important;
  }
  html:not(.mo) .p-index #step .st-intro{grid-area:1/1;align-self:start;position:relative;z-index:4}
  html:not(.mo) .p-index #step .st-arch{
    grid-area:1/1;
    position:relative !important;
    left:auto !important;
    bottom:auto !important;
    translate:none !important;
    align-self:end;
    justify-self:center;
    margin:0 0 64px !important;
  }
  html:not(.mo) .p-index #step .st-b1{grid-area:2/1}
}