/* Deliberate final-fit rules; kept separate so breakpoints remain auditable. */
@media(min-width:1101px){
  .motion-button{bottom:12%}
}
@media(max-width:599px){
  .scene-coordinate{right:max(3%,calc((100% - 100vw)/2 + 16px))}
  .contact-band-row{flex-wrap:wrap}
  .contact-band h2{flex:1 1 190px}
  .round-link{margin-left:auto}
  .motion .scene-product{top:5%}
  .motion .scene-product-mask{aspect-ratio:1.08}
}
/* Short landscape retains the readable flowing fallback; portrait keeps its story. */
@media(max-height:739px) and (orientation:landscape){
  .motion .scene{height:auto}
  .motion .scene-pin{position:relative;top:auto;height:auto;min-height:0;overflow:visible}
  .motion .scene-inner{height:auto;min-height:0;padding-block:36px;grid-template-rows:auto auto auto}
  .motion .scene-copies{display:block;height:auto}
  .motion .scene-copy{position:relative;inset:auto;visibility:visible;pointer-events:auto;transform:none;padding-block:28px;border-bottom:1px solid var(--line)}
  .motion .scene-visual{max-height:none;height:auto;width:100%}
  .motion .scene-product{visibility:hidden}
}
@media(max-height:739px) and (orientation:landscape) and (max-width:599px){
  .motion .scene-inner{display:flex}
  .motion .scene-top{order:0}
  .motion .scene-visual{order:1}
  .motion .scene-copies{order:2}
  .motion .scene-bottom{order:3}
}
/* The same three stations, with a smaller visual and unchanged readable copy/CTAs. */
@media(max-width:599px) and (max-height:739px) and (orientation:portrait){
  .motion .scene-pin{min-height:0}
  .motion .scene-inner{padding-block:12px;gap:8px;grid-template-rows:56px minmax(100px,1fr) 252px 20px}
  .motion .scene-visual{max-height:240px;max-width:100%}
  .motion .scene-coordinate{top:0;bottom:auto}
}