/* Hudoor inline film player */
  .hud-split { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(24px, 4vw, 56px); align-items: center; }
  @media (max-width: 900px) { .hud-split { grid-template-columns: 1fr; } }
  .hud-player { position: relative; margin: 0; border-radius: 14px; overflow: hidden;
    border: 1px solid rgba(255,255,255,.09); background: #0a0d12; box-shadow: 0 30px 80px rgba(0,0,0,.5); }
  .hud-player video { display: block; width: 100%; height: auto; }
  .hud-snd { position: absolute; right: 14px; bottom: 14px; width: 44px; height: 44px; border-radius: 999px;
    border: 1px solid rgba(255,255,255,.18); background: rgba(5,6,7,.62); backdrop-filter: blur(10px);
    color: #F2F1EE; display: grid; place-items: center; cursor: pointer; transition: border-color .2s, background .2s; }
  .hud-snd:hover { border-color: #6FA3FF; }
  .hud-snd svg { width: 20px; height: 20px; }
  .hud-snd .snd-wave { opacity: 0; }
  .hud-snd .snd-slash { opacity: 1; }
  .hud-snd.on { background: #0B5FFF; border-color: #0B5FFF; }
  .hud-snd.on .snd-wave { opacity: 1; }
  .hud-snd.on .snd-slash { opacity: 0; }

  /* ---------- transport, opt-in per player via data-controls ----------
     /products and /ai-solutions deliberately do NOT opt in: their films are
     short ambient loops where a scrubber is noise. This is for the long cut
     on the landing page, which people actually want to pause and replay. */
  .hud-player[data-controls] { --played: 0%; }
  /* the sound button leaves its corner and joins the row — and drops from its
     44px corner size to the 34px the transport buttons use, or it sits proud */
  .hud-player[data-controls] .hud-snd { position: static; width: 34px; height: 34px; margin-left: 2px; }
  .hud-player[data-controls] .hud-snd svg { width: 15px; height: 15px; }
  .hud-ctl {
    position: absolute; left: 0; right: 0; bottom: 0;
    display: flex; align-items: center; gap: 10px; padding: 11px 12px;
    background: linear-gradient(to top, rgba(4,5,7,.94), rgba(4,5,7,.6) 62%, transparent);
    font: 400 11px/1 var(--mono); letter-spacing: .08em; color: var(--muted);
    opacity: 0; transform: translateY(6px); transition: opacity .25s ease, transform .25s ease;
  }
  /* revealed on hover, on keyboard focus, and whenever it is not playing —
     a paused film with no visible way to restart it reads as broken */
  .hud-player:hover .hud-ctl,
  .hud-player:focus-within .hud-ctl,
  .hud-player.is-paused .hud-ctl { opacity: 1; transform: none; }
  .hud-btn {
    flex: none; width: 34px; height: 34px; display: grid; place-items: center;
    border: 1px solid rgba(255,255,255,.18); border-radius: 999px;
    background: rgba(5,6,7,.62); color: #F2F1EE; cursor: pointer; padding: 0;
    transition: border-color .2s, background .2s;
  }
  .hud-btn:hover { border-color: #6FA3FF; }
  .hud-btn:focus-visible { outline: 2px solid #6FA3FF; outline-offset: 2px; }
  .hud-btn svg { width: 15px; height: 15px; pointer-events: none; }
  .hud-seek {
    flex: 1 1 auto; min-width: 0; height: 4px; margin: 0; cursor: pointer;
    -webkit-appearance: none; appearance: none; border-radius: 999px;
    background-color: rgba(255,255,255,.2);
    background-image: linear-gradient(#6FA3FF, #6FA3FF);
    background-repeat: no-repeat; background-size: var(--played) 100%;
  }
  .hud-seek::-webkit-slider-thumb {
    -webkit-appearance: none; width: 12px; height: 12px; border-radius: 50%;
    background: #F2F1EE; border: 0; cursor: pointer;
  }
  .hud-seek::-moz-range-thumb { width: 12px; height: 12px; border: 0; border-radius: 50%; background: #F2F1EE; }
  .hud-seek:focus-visible { outline: 2px solid #6FA3FF; outline-offset: 3px; }
  .hud-time { flex: none; font-variant-numeric: tabular-nums; letter-spacing: .06em; }
  @media (max-width: 560px) { .hud-time { display: none; } .hud-ctl { gap: 8px; } }