/* Home-only compact service previews. Originals and their service text are retained. */
.p-index .service-peek{gap:10px;max-width:350px;overflow:visible;padding-bottom:18px}.p-index .service-peek figure{flex:0 1 104px;max-width:104px;border-radius:10px}.p-index .service-peek img{aspect-ratio:4/3;height:auto;object-fit:cover}
/* Larger doorway, same original hero content/order and sharp 540x960 full clip.
   Flow the phone introduction before the arch: making an absolutely bottom-
   anchored arch taller would otherwise cover the address and hours. */
@media(max-width:1023px){
.p-index #step .st-arch{width:calc(100% - 32px);max-width:700px}
.mo .p-index #step .st-stage{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto;height:auto;min-height:100svh;align-content:start}
.mo .p-index #step .st-intro{grid-column:1;grid-row:1;position:relative;inset:auto;max-width:none}
.mo .p-index #step .st-arch{grid-column:1;grid-row:2;position:relative;left:auto;right:auto;bottom:auto;justify-self:center;translate:none;margin:24px 0 0;height:auto;aspect-ratio:540/960}
.mo .p-index #step .st-pic{inset:0;left:0;bottom:0;margin:0;width:100%;height:100%;transform:none!important}
.mo .p-index #step .st-pic .vwrap img,.mo .p-index #step .st-pic .vwrap video{object-fit:cover;object-position:50% 50%}
}
@media(min-width:1024px){
.p-index #step .st-stage{--door-height:clamp(650px,82svh,850px);grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);column-gap:clamp(28px,3.4vw,48px)}
.p-index #step .st-arch{width:100%;height:var(--door-height)}
}
/* The larger tablet stage may exceed one screen; keep the end-band copy in
   the viewport, not at the bottom of that taller frame. */
@media(max-width:1023px){.mo .p-index #step .st-b1{height:100svh;bottom:auto}}
/* Static face-safe framing removes the small neighboring advertising portrait
   at the far-right end of the source; no blur, new frames or time trimming. */
.p-index #step .hero-v video,.p-index #step .hero-v img{transform:scale(1.12);transform-origin:0% 50%}