/* The mobile film is composed at 4:5; controls stay outside its picture. */
@media (max-width: 767px) {
  .home .cinema #brand-film {
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
    object-position: center;
  }
  @media (orientation: portrait) {
    .home .cinema #brand-film { aspect-ratio: 4 / 5; }
    .home .cinema .film-stage:after { height: 125vw; }
  }
  .home .cinema .film-sound { transform: translateY(var(--film-sound-offset, 0px)); }
  .home .cinema.is-film-controls-obscured .film-sound { visibility: hidden; }
  .home .cinema .film-bottom,
  .home .cinema[data-active-chapter] .film-bottom {
    gap: 12px;
    padding: 12px 20px 20px;
  }
  .home #film-chapters { gap: 0 18px; }
  .home #film-chapters button { font-size: 16px; min-width: 44px; min-height: 44px; gap: 7px; }
  .home .site-header .menu-toggle,
  .home .site-header.is-over-video .menu-toggle,
  .home .cinema .film-content-link,
  .home .cinema .story-playback,
  .home .cinema .story-restart,
  .home .cinema .film-continue { font-size: 16px; min-height: 44px; }
  .home .cinema .film-playback { gap: 10px 14px; }
  .home .cinema .film-ending {
    position: relative;
    inset: auto;
    width: auto;
    margin: 0;
    padding: 16px 20px 0;
    align-items: flex-start;
    justify-content: flex-start;
  }
  .home .cinema .film-chapter-ending { margin: 16px 20px 4px; }
}

/* One swipeable chapter rail and one compact row of controls on phones. */
@media(max-width:767px){
 .home .cinema .film-bottom,.home .cinema[data-active-chapter] .film-bottom{display:flex;flex-direction:column;align-items:stretch;gap:4px;padding:8px 16px 12px}
 .home #film-chapters{display:flex;flex-wrap:nowrap;width:100%;max-width:100%;overflow-x:auto;overscroll-behavior-x:contain;gap:20px;scrollbar-width:thin;scrollbar-color:#ffffff40 transparent;scroll-padding-inline:8px}
 .home #film-chapters button{flex:0 0 auto;justify-content:center;white-space:nowrap;padding:8px 0;min-height:44px;border-bottom:1px solid transparent}
 .home #film-chapters button.is-active{border-bottom-color:currentColor}
 .home #film-chapters .chapter-dot{display:none}
 .home .cinema .film-playback{display:flex;flex-wrap:nowrap;align-items:center;justify-content:space-between;width:100%;gap:8px;margin:0;border-top:1px solid #ffffff25;padding-top:4px}
 .home .cinema .film-content-link{display:none}
 .home .cinema .story-restart{gap:8px;padding:8px 0;min-width:44px;border:0;font-size:16px;white-space:nowrap}
 .home .cinema .story-restart>span:last-child{position:static;width:auto;height:auto;margin:0;overflow:visible;clip-path:none}
 .home .cinema .story-playback{margin:0;gap:6px;border:0}
}

/* Bound decorative transforms to the page; keep native vertical scrolling and the chapter rail. */
@media(max-width:767px){
 body.home{overflow-x:clip;overscroll-behavior-x:none}
 .home .cinema,.home .cinema .film-bottom,.home .cinema .film-playback,.home #film-chapters{min-width:0;max-width:100%}
 .home .site-header{clip-path:inset(0 -0.01px -200vh)}
}

@media(max-width:767px){
 .home .cinema .story-sound{border:0;flex:none}
}
@media(max-width:359px){
 .home .cinema .film-playback{display:grid;grid-template-columns:1fr 1fr;gap:0 12px}
 .home .cinema .story-sound{grid-column:1/-1;grid-row:1;justify-self:start}
 .home .cinema .story-restart{grid-column:1;grid-row:2;justify-self:start}
 .home .cinema .story-playback{grid-column:2;grid-row:2;justify-self:end}
}