.mdi-hero{position:relative;isolation:isolate;overflow:hidden;background:#010101;width:100%;height:100vh;height:100svh;min-height:0;margin:0}
.mdi-hero video,.hero-video-poster{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover}
.mdi-hero::after{content:'';position:absolute;inset:auto 0 0;height:clamp(80px,11vw,160px);background:var(--brand-background);background-size:100vw 100%;background-position:center top;-webkit-mask-image:linear-gradient(to bottom,transparent,#000);mask-image:linear-gradient(to bottom,transparent,#000);pointer-events:none;z-index:1}
.mdi-main-content > #advantages{position:relative;padding-top:clamp(80px,7vw,112px)}
.mdi-main-content > #advantages::before{content:'';position:absolute;top:clamp(32px,3vw,48px);left:0;right:0;height:1px;background:linear-gradient(to right,transparent,rgba(255,255,255,.28) 18%,rgba(255,255,255,.28) calc(50% - 22px),transparent calc(50% - 22px),transparent calc(50% + 22px),rgba(255,255,255,.28) calc(50% + 22px),rgba(255,255,255,.28) 82%,transparent);pointer-events:none}
.mdi-main-content > #advantages::after{content:'';position:absolute;top:calc(clamp(32px,3vw,48px) - 4px);left:calc(50% - 4.5px);width:9px;height:9px;border:1px solid rgba(255,255,255,.65);transform:rotate(45deg);pointer-events:none}
.mdi-main-content > #advantages > .section-label{padding-top:0}
.mdi-hero-title{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.hero-video-controls{position:absolute;left:clamp(20px,3vw,48px);right:clamp(20px,3vw,48px);bottom:max(32px,env(safe-area-inset-bottom));display:flex;align-items:center;justify-content:flex-end;gap:16px;z-index:2}
.hero-video-controls [hidden],.hero-video-status[hidden],.mdi-hero video[hidden]{display:none}

.hero-video-controls button{min-height:44px;padding:10px 14px;border:1px solid #ffffff66;border-radius:0;background:#01010166;backdrop-filter:blur(8px);color:#fff;font:400 11px/1.4 Jost,Arial,sans-serif;cursor:pointer}
.hero-video-controls button:hover{background:#0b2f2ad9}
.hero-video-controls button:focus-visible{outline:2px solid #fff;outline-offset:5px}
.hero-video-controls button:disabled{opacity:.5;cursor:default}
.hero-video-status{position:absolute;top:132px;left:20px;right:20px;padding:14px;background:#010101cc;color:#fff;font:400 14px/1.5 Jost,Arial,sans-serif;z-index:2}

@media(max-width:650px){.mdi-hero::after{height:64px}.hero-video-controls{left:16px;right:16px;bottom:max(24px,env(safe-area-inset-bottom));gap:10px;flex-wrap:wrap}.hero-video-controls button{padding:10px;font-size:10px}}
@media(prefers-reduced-motion:reduce){#video-toggle{display:none}}

/* Keep bright footage readable without turning the landscape into a dark plate. */
.mdi-hero::before{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(180deg,rgba(1,8,6,.8) 0,rgba(1,8,6,.48) 100px,transparent 34%,transparent 60%,rgba(1,8,6,.6) 100%)}
.hero-video-controls{left:clamp(20px,4vw,72px);right:clamp(20px,4vw,72px)}
.hero-video-controls button{max-width:100%;min-width:44px}
@media(max-width:380px){.hero-video-controls{left:16px;right:16px;gap:16px}.hero-video-status{top:112px}}
@media(orientation:landscape) and (max-height:500px){.hero-video-controls{bottom:20px}.hero-video-status{top:96px}.mdi-hero::before{background:linear-gradient(180deg,rgba(1,8,6,.8),transparent 46%,transparent 52%,rgba(1,8,6,.68))}}