.hero-scene { position: relative; isolation: isolate; }
.hero-scene > .brand-blueprint-stage { transition: opacity 850ms ease; }
.hero-film-trigger {
  position: absolute; inset: 0; z-index: 4; width: 100%; height: 100%;
  padding: 0; border: 0; border-radius: 0; background: transparent; color: #d8e7f3;
  cursor: pointer; text-align: left; -webkit-tap-highlight-color: transparent;
}
.hero-film-trigger span {
  position: absolute; left: 8.8%; bottom: 6.7%; display: grid; place-items: center;
  min-height: 28px; padding: 5px 12px; border: 1px solid #6c8ba7;
  background: rgba(18,35,51,.82); font: 500 clamp(11px,1vw,13px)/1.2 'Segoe UI',sans-serif;
  letter-spacing: .025em; transition: background 200ms ease, border-color 200ms ease;
}
.hero-film-trigger:hover span { background: #24468c; border-color: #a9c7e5; }
.hero-film-trigger:focus-visible { outline: 2px solid #a9c7e5; outline-offset: -5px; }
.hero-film-panel {
  position: absolute; inset: 0; z-index: 5; display: grid; align-items: center;
  grid-template-rows: 1fr auto 1fr;
  overflow: hidden; opacity: 0; visibility: hidden; background: transparent;
  transition: opacity 1000ms ease, visibility 1000ms;
}
.hero-film-panel[hidden], .hero-film-trigger[hidden] { display: none; }
.hero-film-panel video { display:block; width:100%; max-height:100%; aspect-ratio:16/9; object-fit:contain; background:#07111d; }
/* Narrow feather dissolves the image edge, without blurring the picture or text.
   Leave almost all of the bottom intact so native controls remain legible. */
@supports (mask-composite: intersect) {
  .hero-film-panel video {
    mask-image: linear-gradient(to bottom, transparent, #000 7%, #000 98%, transparent),
      linear-gradient(to right, transparent, #000 4%, #000 96%, transparent);
    mask-composite: intersect;
  }
}
.hero-film-heading {
  align-self: end; margin:0 0 16px; padding:0 12px; text-align:center;
  color:#eef2f5; font:400 clamp(21px,2.7vw,40px)/1.15 'Times New Roman',Georgia,serif;
  letter-spacing:-.025em; text-wrap:balance;
}
.hero-film-area {
  align-self:start; display:flex; align-items:baseline; justify-content:center; gap:10px;
  margin:18px 0 0; padding:0 12px; color:#aebfcd;
  font:400 clamp(12px,1.1vw,15px)/1.4 'Segoe UI',sans-serif;
}
.hero-film-area strong { color:#edf3f8; font:400 clamp(23px,2.65vw,38px)/1.15 'Times New Roman',Georgia,serif; }
.hero-film-area strong span { font-size:.65em; }
.hero-scene.is-film-active > .brand-blueprint-stage { opacity: 0; pointer-events: none; }
.hero-scene.is-film-active .hero-film-panel { opacity:1; visibility:visible; }
.hero-film-back {
  position:absolute; top:12px; right:12px; min-height:44px; padding:8px 12px;
  display:flex; align-items:center; gap:12px; border:1px solid rgba(171,199,222,.35);
  border-radius:8px; background:rgba(7,17,29,.75); color:#e7eff5;
  font:500 12px/1.2 'Segoe UI',sans-serif; cursor:pointer;
}
.hero-film-back span { font-size:22px; font-weight:300; }
.hero-film-back:hover { background:#24468c; }
.hero-film-back:focus-visible { outline:2px solid #b8d7f5; outline-offset:3px; }
.hero-film-status { position:absolute; left:8.8%; right:8%; bottom:1%; color:#e2ebf2; font-size:12px; pointer-events:none; }
@media (max-width:600px) {
  .hero-film-trigger span { min-height:28px; padding:5px 8px; }
  .hero-film-back { top:5px; right:5px; }
  .hero-film-heading { margin-bottom:9px; font-size:22px; }
  .hero-film-area { margin-top:12px; gap:7px; }
  .hero-film-back { width:44px; height:44px; min-height:44px; top:0; right:0; padding:0; justify-content:center; gap:0; font-size:0; }
}
@media (prefers-reduced-motion:reduce) {
  .hero-scene > .brand-blueprint-stage, .hero-film-panel, .hero-film-trigger span { transition:none; }
}