/* Preserve legible project steps when a visitor enlarges text independently. */
.immersive-home #inquiry .form-progress > span{
 min-width:0;
 white-space:normal;
 overflow-wrap:anywhere;
}

/* Film navigation remains outside the chapter's scrollable reading area. */
.immersive-home #film-dialog{
 width:min(1100px,calc(100vw - 32px));
 height:min(650px,calc(100svh - 32px));
 max-height:calc(100svh - 32px);
}
.immersive-home #film-dialog .film-scene{height:100%;max-height:none}
.immersive-home #film-dialog .film-copy{
 left:24px;
 right:24px;
 top:72px;
 bottom:148px;
 max-width:none;
 overflow-y:auto;
 overscroll-behavior:contain;
 scroll-padding-block:10px;
 padding-right:5px;
 padding-bottom:10px;
}
.immersive-home #film-dialog .film-controls{
 position:absolute;
 left:24px;
 right:24px;
 bottom:24px;
 display:grid;
 grid-template-columns:minmax(0,1.4fr) minmax(0,1.5fr) minmax(0,1fr) auto;
 gap:8px;
 align-items:center;
 max-width:440px;
}
.immersive-home #film-dialog .film-controls button{
 position:static;
 min-width:0;
 min-height:42px;
 padding:10px;
 border:1px solid #ffffff4a;
 border-radius:3px;
 background:#10151ad9;
 color:#f5f4ef;
 font-size:11px;
 line-height:1.4;
 white-space:normal;
}
.immersive-home #film-dialog #film-pause{position:static;inset:auto}
.immersive-home #film-dialog .film-controls output{
 font-size:11px;
 line-height:1.5;
 color:#e0e4dd;
 white-space:nowrap;
}
.immersive-home #film-dialog .film-note{
 left:24px;
 right:24px;
 bottom:86px;
 max-width:none;
 font-size:10px;
 line-height:1.5;
}
.immersive-home #film-dialog .film-copy .image-retry{scroll-margin-block:10px}
@media(max-width:760px), (max-height:550px){
 .immersive-home #film-dialog .film-copy h2{font-size:32px;line-height:1.1;margin:14px 0}
 .immersive-home #film-dialog #film-description{font-size:12px;line-height:1.7}
 .immersive-home #film-dialog .film-note{font-size:9px}
}
@media(max-height:400px){
 .immersive-home #film-dialog .film-copy{top:64px;bottom:132px}
 .immersive-home #film-dialog .film-note{bottom:79px}
}

/* This query also drives direct chapter selection in immersive.js.
   Short screens use an ordinary scrollable study rather than a crowded pin. */
@media (max-width:760px) and (max-height:550px){
 .immersive-home .product-scroll-story{
  height:auto!important;
  min-height:0!important;
 }
 .immersive-home .product-story-pin{
  position:relative!important;
  top:0!important;
  height:760px!important;
  min-height:760px!important;
 }
 .immersive-home .story-family-select{
  top:24px;
  left:24px;
  right:24px;
  width:auto;
  max-width:none;
 }
 .immersive-home .story-family-select > span{display:none}
 .immersive-home .story-family-select select{
  width:100%;
  max-width:none;
  min-height:40px;
  font-size:12px;
 }
 .immersive-home .story-resume{
  top:76px;
  left:24px;
  right:auto;
  max-width:calc(100% - 48px);
  min-height:38px;
  padding:9px 12px;
  font-size:11px;
 }
 .immersive-home .story-copy{
  top:92px;
  left:24px;
  right:24px;
  width:auto;
  max-width:none;
  transform:none;
 }
 .immersive-home .product-story-pin[data-story-manual=true] .story-copy{top:136px}
 .immersive-home .story-copy .eyebrow{font-size:9px;line-height:1.5;margin-bottom:12px}
 .immersive-home .story-copy h2{font-size:32px;line-height:1.1;max-width:16ch}
 .immersive-home .story-copy > p:not(.eyebrow){
  display:block;
  font-size:12px;
  line-height:1.7;
  max-width:42ch;
  margin-top:16px;
 }
 .immersive-home .story-detail{display:none}
 .immersive-home .story-canvas,
 .immersive-home .story-fallback{
  top:310px;
  bottom:170px;
  left:0;
  right:0;
 }
 .immersive-home .product-story-pin[data-story-manual=true] .story-canvas,
 .immersive-home .product-story-pin[data-story-manual=true] .story-fallback{top:350px}
 .immersive-home .story-caption{
  top:600px;
  bottom:auto;
  left:24px;
  right:24px;
  max-width:none;
  text-align:left;
  font-size:9px;
  line-height:1.5;
 }
 .immersive-home .story-controls{
  left:24px;
  right:24px;
  top:638px;
  bottom:auto;
  grid-template-columns:1fr;
  gap:12px;
 }
 .immersive-home .story-chapters{padding-top:12px}
 .immersive-home .story-chapters button{font-size:11px;min-height:40px}
 .immersive-home .story-chapters button span{font-size:9px}
 .immersive-home .story-controls .story-open{
  justify-self:start;
  min-height:40px;
  font-size:11px;
  padding:10px 14px;
  line-height:1.4;
  white-space:normal;
  max-width:100%;
  text-align:left;
 }
}