/* Homeowners page, phones only (Hudson approved the phone-fit preview 2026-10-10): on phones the homeowners page shows each picture whole,
   centred in the middle of the screen on a dark ground, with its caption underneath. Desktop untouched. */
@media (max-width: 899px) {
  /* the design process: whole renders, no sideways slide */
  .layers-shade > .layer { background: var(--cacao); }
  .layers-shade > .layer img { inset: 0 !important; width: 100% !important; height: 100% !important; max-width: none; object-fit: contain !important; object-position: 50% 50% !important; transform: none !important; }
  .layers-shade::after { display: none; }
  .layers-shade .layers-cap { top: calc(50% + 37.4vw + 24px); bottom: auto; }
  .layers-shade .ticks { top: calc(50% - 37.4vw - 34px); }

  /* "Step inside one room.": the words hold in the middle of the screen (on computers they sit high, above the
     window that opens beneath them; phones fade the photo in instead, so there is nothing to make room for) */
  .open-ground > .intro-text { align-content: center; padding-top: 72px; padding-bottom: 72px; }

  /* the opening, the Alder & Tweed way: the bedroom panel holds, and the fabric box film slides up over it
     at the speed of the finger (it used to lift away at ~2.6x scroll speed) */
  .scene[data-scene="reveal"] { height: auto !important; }
  .scene[data-scene="reveal"] > .scene-stage { position: relative !important; top: auto; height: auto; overflow: visible; display: flex; flex-direction: column; transform: none !important; }
  .scene[data-scene="reveal"] .reveal-panel { order: 0; position: sticky !important; inset: auto; top: 0; height: 100vh; height: 100svh; transform: none !important; z-index: 0; }
  .scene[data-scene="reveal"] .reveal-film { order: 1; position: relative !important; inset: auto; height: 100vh; height: 100svh; z-index: 1; background: var(--cacao); }
  .scene[data-scene="reveal"] .scene-shade { display: none; }
  /* the film whole, centred, caption underneath */
  .reveal-film > video { object-fit: contain !important; object-position: 50% 50%; }
  .reveal-film::before, .reveal-film::after { display: none; }
  .scene[data-scene="reveal"] .cap { order: 2; position: absolute !important; z-index: 2; top: calc(150svh + 28.13vw + 24px); bottom: auto; opacity: 1 !important; transform: translate(-50%, 0) !important; }
}