/* v1.7: no player chrome; video and surrounding lime ambience fade into the next section. */
#hero.vve-hero-has-video { --uxc-hero-blend: #000; }
#hero .vve-hero-video-shell { position: relative; z-index: 2; width: 100%; max-width: 1376px; margin: 0 auto; padding: 6px 6px 0; border: 1px solid rgba(243,254,0,.42); border-bottom: 0; border-radius: 20px 20px 0 0; background: rgba(243,254,0,.055); box-shadow: 0 -10px 32px rgba(243,254,0,.07); overflow: hidden; }
#hero .vve-hero-video-frame { position: relative; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 13px 13px 0 0; background: #000; isolation: isolate; }
#hero video.vve-hero-video { display: block; width: 100%; height: 100%; aspect-ratio: 16 / 9; object-fit: contain; background: #000; pointer-events: none; user-select: none; }
#hero .vve-hero-video-shell::after { content: ''; position: absolute; z-index: 5; pointer-events: none; inset: auto -2px -2px; height: var(--uxc-video-fade,36%); background: linear-gradient(to bottom, transparent 0%, color-mix(in srgb,var(--uxc-hero-blend) 45%,transparent) 43%, color-mix(in srgb,var(--uxc-hero-blend) 88%,transparent) 77%, var(--uxc-hero-blend) 100%); }
#hero.vve-hero-has-video::after { content: ''; position: absolute; z-index: 6; pointer-events: none; bottom: -1px; left: 0; right: 0; height: clamp(28px,6vw,90px); background: linear-gradient(to bottom, transparent, var(--uxc-hero-blend)); }
#hero.vve-hero-has-video > .hh-blob { -webkit-mask-image: linear-gradient(to bottom,#000 0%,#000 45%,transparent 100%); mask-image: linear-gradient(to bottom,#000 0%,#000 45%,transparent 100%); }
#hero video.vve-hero-video::-webkit-media-controls,
#hero video.vve-hero-video::-webkit-media-controls-enclosure,
#hero video.vve-hero-video::-webkit-media-controls-panel,
#hero video.vve-hero-video::-webkit-media-controls-start-playback-button { display: none !important; -webkit-appearance: none; }
/* Hide any stale v1.6 control markup in a partially cached Elementor render too. */
#hero .vve-hero-video-toggle, #hero .vve-hero-video-error { display: none !important; }
html[data-theme="light"] #hero.vve-hero-has-video { --uxc-hero-blend: var(--vv-bg,#fff); }
@media(max-width:639px) { #hero .vve-hero-video-shell { padding: 3px 3px 0; border-radius: 13px 13px 0 0; } #hero .vve-hero-video-frame { border-radius: 9px 9px 0 0; } }
/* A short mobile video must end the hero, not expose a lime-filled min-height gap. */
.vve-page #hero.vve-hero-has-video { min-height: 0; }