/* DG inline brand film v3.9. Visual edge blending, not alpha-transparent MP4. */
.hero { grid-template-columns: minmax(0, .95fr) minmax(0, 1.3fr); gap: clamp(24px, 3vw, 44px); padding-block: 18px; }
.hero-brand-film { position: relative; isolation: isolate; width: 100%; min-width: 0; margin: 0; justify-self: stretch; display: flex; flex-direction: column; align-items: center; }
/* Shadow tones sampled from the original film; this is visual blending, not transparency. */
.hero-brand-film::before { content: ""; position: absolute; z-index: -1; inset: 0 0 28px; pointer-events: none; background: radial-gradient(ellipse closest-side at 48% 47%, #0e253699, #11152544 68%, transparent); }
.hero-brand-stage { position: relative; isolation: isolate; width: min(calc(100% - 32px), 560px); aspect-ratio: 16 / 9; margin: 0 auto; background: transparent; }
.hero-brand-halo { position: absolute; inset: -8% -8%; z-index: -1; pointer-events: none; background: radial-gradient(ellipse at 35% 50%, #0e2536, transparent 70%), linear-gradient(125deg, #0c232f, #04070e 47%, #111525); -webkit-mask-image: linear-gradient(90deg, transparent, #000 16%, #000 84%, transparent), linear-gradient(0deg, transparent, #000 16%, #000 84%, transparent); mask-image: linear-gradient(90deg, transparent, #000 16%, #000 84%, transparent), linear-gradient(0deg, transparent, #000 16%, #000 84%, transparent); -webkit-mask-composite: source-in; mask-composite: intersect; opacity: 1; }
#hero-brand-video { display: block; width: 100%; height: 100%; position: absolute; inset: 0; object-fit: contain; background: transparent; border: 0; border-radius: 0; outline: none; pointer-events: none; -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent), linear-gradient(0deg, transparent, #000 4%, #000 96%, transparent); mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent), linear-gradient(0deg, transparent, #000 4%, #000 96%, transparent); -webkit-mask-composite: source-in; mask-composite: intersect; }
/* Preserve the whole 16:9 frame. Only the outermost 4% softens; the central 92% remains opaque. */
.hero-brand-caption { position: relative; z-index: 1; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 12px; max-width: 100%; margin-top: 7px; font-size: 10px; }
.hero-brand-toggle { min-height: 36px; max-width: 100%; padding: 6px 12px; border: 1px solid #547c94; border-radius: 999px; background: #102c3d; color: #d9f4ff; font: inherit; font-weight: 650; line-height: 1.5; overflow-wrap: anywhere; }
.hero-brand-toggle:hover { background: #17374c; border-color: #7cbdce; }
.hero-brand-toggle:focus-visible { outline: 3px solid #83e9ff; outline-offset: 3px; }
.hero-brand-toggle:disabled { opacity: 1; cursor: default; color: #bad0e4; border-color: #36526b; background: #101f31; }
.hero-brand-status { color: #bad0e4; max-width: 100%; overflow-wrap: anywhere; }
/* If CSS masks are unavailable, keep the same full frame without inventing transparency. */
@supports not ((mask-composite: intersect) or (-webkit-mask-composite: source-in)) {
  .hero-brand-halo { display: none; }
}
@media (max-width: 1100px) {
  .hero { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 24px; }
  .hero-brand-stage { width: min(calc(100% - 24px), 480px); }
}
@media (max-width: 900px) {
  .hero { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; padding-block: 18px; }
  .hero-brand-film { max-width: 560px; justify-self: center; }
  .hero-brand-stage { width: min(100%, 440px); }
}
@media (max-width: 640px) {
  .hero { gap: 18px; padding-block: 16px; }
  .hero-brand-film { max-width: 380px; }
  .hero-brand-stage { width: calc(100% - 32px); }
  .hero-brand-caption { margin-top: 8px; gap: 7px 10px; font-size: 10px; }
  .hero-brand-toggle { min-height: 44px; padding: 8px 13px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-brand-film, .hero-brand-film * { scroll-behavior: auto; }
}
@media print {
  .hero { display: block; }
  .hero-brand-film { display: none; }
}