/* Home film section (apple.com pattern): big rounded player that plays muted in view.
   The visitor decides on sound with one small speaker button; clicking the film pauses it. Logic in film.js. */
.film{padding:clamp(40px,6vw,88px) 0 clamp(48px,7vw,96px)}
.film-frame{position:relative;width:min(1320px,100% - 40px,(100svh - 180px) * 16 / 9);margin-inline:auto;aspect-ratio:16/9;border-radius:var(--r-lg);overflow:hidden;background:#f3f0eb;box-shadow:0 40px 80px -40px rgba(17,17,17,.35)}
.film-frame video{display:block;width:100%;height:100%;object-fit:cover;cursor:pointer}
.film-frame video:focus-visible{outline:3px solid var(--orange);outline-offset:-3px}
.film-sound{position:absolute;right:16px;bottom:16px;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;color:#111;background:rgba(255,255,255,.7);box-shadow:0 2px 10px rgba(17,17,17,.12);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);opacity:.75;transition:opacity .2s var(--ease),background .2s var(--ease)}
.film-sound:hover,.film-sound:focus-visible,.film-sound[aria-pressed=true]{opacity:1;background:rgba(255,255,255,.9)}
.film-sound svg{width:18px;height:18px}
.film-play{position:absolute;left:50%;top:50%;width:72px;height:72px;margin:-36px 0 0 -36px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.75);box-shadow:0 8px 30px rgba(17,17,17,.15);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);opacity:0;transform:scale(.9);transition:opacity .25s var(--ease),transform .25s var(--ease);pointer-events:none}
.film-play svg{width:26px;height:26px;margin-left:3px;fill:#111}
.film-frame.is-paused .film-play{opacity:1;transform:none}
@media(max-width:760px){
  .film-frame{aspect-ratio:9/16;width:min(440px,100% - 40px)}
  .film-sound{right:12px;bottom:12px}
}