.tile .frame { position: relative; overflow: hidden; }
.io-preview { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; object-fit: cover; pointer-events: none; opacity: 0; }
.io-preview.playing { opacity: 1; }
/* Cadillac's 16:9 master contains a ~2.4:1 letterboxed picture. Crop the
   silent tile preview to that picture, with a little overscan for clean edges. */
.io-preview[src*="player.vimeo.com/video/978482078?"] { transform: scale(1.37); transform-origin: center; }
/* GAP's 776:540 picture needs a 1.25x crop to fill the 16:9 hover tile. */
.io-preview[src*="player.vimeo.com/video/1111401600?"] { transform: scale(1.25); transform-origin: center; }
.tile:focus-visible { outline: 2px solid var(--turquoise); outline-offset: 8px; }
body.io-player-open { overflow: hidden; }
.io-player { position: fixed; inset: 0; z-index: 500; width: 100%; max-width: none; height: 100dvh; max-height: none; margin: 0; border: 0; padding: clamp(20px, 2.2vw, 40px); background: #121212; background-image: radial-gradient(ellipse clamp(210px, 26vw, 380px) 110px at 50% calc(clamp(20px, 2.2vw, 40px) + 72px), rgb(10 10 10 / .32), transparent 80%), radial-gradient(ellipse 100vw 100dvh at 0 0, #3a3a3a 0%, #272727 20%, #1b1b1b 43%, #151515 72%, #121212 110%); background-attachment: fixed; color: #fff; overflow: auto; }
.io-player::backdrop { background: #121212; }
.io-player[open] { display: flex; flex-direction: column; gap: 24px; }
.io-player-header, .io-player-footer { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex: 0 0 auto; min-height: 44px; }
.io-player-header { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 0; }
.io-player a { color: inherit; text-decoration: none; }
.io-player .io-player-brand { position: relative; display: block; width: clamp(155px, 15vw, 220px); aspect-ratio: 4 / 1; min-height: 44px; grid-column: 2; }
/* Ease out only empty image margins. Every glyph and its highlights remain
   inside the fully opaque 10.5–89.5% / 31–70% center of the native framing. */
.io-player-brand .io-pop-scene, .io-landing-brand .io-pop-scene {
  mask-image:
    linear-gradient(to right, transparent 2%, rgb(0 0 0 / .15) 5%, rgb(0 0 0 / .6) 8%, #000 10.5% 89.5%, rgb(0 0 0 / .6) 92%, rgb(0 0 0 / .15) 95%, transparent 98%),
    linear-gradient(to bottom, transparent 12%, rgb(0 0 0 / .15) 20%, rgb(0 0 0 / .6) 27%, #000 31% 70%, rgb(0 0 0 / .6) 76%, rgb(0 0 0 / .15) 84%, transparent 91%);
  mask-composite: intersect;
}
.io-player button { color: inherit; font: inherit; border: 0; background: none; cursor: pointer; }
.io-player button:hover, .io-player a:hover { color: var(--turquoise); }
.io-player button:disabled { opacity: .3; cursor: default; }
.io-player button:focus-visible, .io-player input:focus-visible, .io-player a:focus-visible { outline: 2px solid var(--turquoise); outline-offset: 3px; }
.io-player .io-close { display: flex; align-items: center; gap: 14px; padding: 10px 0 10px 14px; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; grid-column: 3; justify-self: end; }
.io-close span { font-size: 25px; font-weight: 400; line-height: 1; }
.io-player-stage { position: relative; width: min(78vw, 1350px, calc((100dvh - 190px) * 16 / 9)); aspect-ratio: 16 / 9; margin: auto; background: #000; flex-shrink: 0; outline: none; }
.io-player-screen, .io-film-media { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; object-fit: contain; }
.io-player-hit { position: absolute; inset: 0; z-index: 1; cursor: pointer; }
.io-player-stage:not(.ui-on) .io-player-hit { cursor: none; }
.io-player-message { position: absolute; inset: 0; z-index: 2; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 18px; pointer-events: none; padding: 25px; text-align: center; font-size: 12px; }
.io-player-message [role=status]:not(:empty) { padding: 10px 14px; background: rgba(0,0,0,.75); }
.io-player [hidden] { display: none !important; }
.io-controls { position: absolute; z-index: 3; left: 0; bottom: 0; right: 0; display: flex; align-items: center; gap: 4px; padding: 38px 18px 10px; background: linear-gradient(transparent, rgba(0,0,0,.72)); opacity: 0; transition: opacity .2s ease; }
.ui-on .io-controls, .io-controls:focus-within { opacity: 1; }
.io-controls button { display: grid; place-items: center; width: 40px; height: 44px; padding: 10px; flex-shrink: 0; }
.io-controls svg { width: 17px; height: 17px; fill: currentColor; }
.io-controls [data-full] svg { fill: none; }
.io-time { font-size: 10px; font-variant-numeric: tabular-nums; white-space: nowrap; margin: 0 8px; }
.io-controls input { appearance: none; -webkit-appearance: none; height: 32px; padding: 0; margin: 0; border: 0; border-radius: 0; cursor: pointer; background: transparent; color: #fff; }
.io-controls input::-webkit-slider-runnable-track { height: 2px; background: rgba(255,255,255,.35); }
.io-controls input::-moz-range-track { height: 2px; background: rgba(255,255,255,.35); }
.io-controls .io-progress::-webkit-slider-runnable-track { background: linear-gradient(to right, #fff var(--progress,0%), rgba(255,255,255,.35) var(--progress,0%)); }
.io-controls input::-moz-range-progress { height: 2px; background: #fff; }
.io-controls input::-webkit-slider-thumb { appearance: none; -webkit-appearance: none; width: 7px; height: 7px; border: 0; border-radius: 50%; background: #fff; margin-top: -2.5px; }
.io-controls input::-moz-range-thumb { width: 7px; height: 7px; border: 0; border-radius: 50%; background: #fff; }
.io-controls input:hover::-webkit-slider-thumb { background: var(--turquoise); }
.io-progress { flex: 1; min-width: 30px; }
.io-volume { display: flex; align-items: center; }
.io-volume input { width: 55px; margin-right: 8px; }
.io-volume .io-slash, .io-volume.is-muted .io-waves { display: none; }
.io-volume.is-muted .io-slash { display: block; }
.io-player-caption { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; max-width: 100%; }
.io-player-caption h2 { margin: 0; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; }
.io-player-caption p { margin: 0; color: #b7b7ba; font-size: 14px; line-height: 1.5; white-space: pre-line; }
.io-player .io-full-exit { display: none; position: absolute; top: 16px; right: 20px; z-index: 4; width: 44px; height: 44px; font-size: 27px; text-shadow: 0 1px 8px #000; }
.io-player-stage:fullscreen, .io-player-stage.is-expanded { width: 100vw; height: 100dvh; max-width: none; aspect-ratio: auto; background: #000; }
.io-player-stage.is-expanded { position: fixed; inset: 0; z-index: 10; }
.io-player-stage:fullscreen .io-full-exit, .io-player-stage.is-expanded .io-full-exit { display: block; }
@media (max-width: 700px) {
  .io-player[open] { gap: 16px; }
  .io-player-stage { width: 100%; }
  .io-controls { gap: 0; padding: 28px 6px 3px; }
  .io-controls button { width: 32px; padding: 7px; }
  .io-time { font-size: 9px; margin: 0 4px; }
  .io-volume input { display: none; }
  .io-player-footer { align-items: flex-start; }
  .io-player-caption { display: block; }
  .io-player-caption p { font-size: 12px; margin-top: 8px; }
}
@media (max-height: 500px) and (orientation: landscape) {
  .io-player { padding: 10px 18px; }
  .io-player[open] { gap: 8px; }
  .io-player-header, .io-player-footer { min-height: 26px; }
  .io-player-stage { width: min(75vw, calc((100dvh - 104px) * 16 / 9)); }
}
@media (max-width: 400px) {
  .io-player .io-close { width: 44px; height: 44px; justify-content: center; padding: 0; gap: 0; font-size: 0; }
}
@media (prefers-reduced-motion: reduce) { .io-controls { transition: none; } }