/* Aflex Bellows Hero — designed to sit in a blue/dark Divi section (white text). */ .mw-bhero{font-family:'Open Sans',system-ui,Arial,sans-serif;color:#fff} .mw-bhero *{box-sizing:border-box} .mw-bhero__grid{display:grid;grid-template-columns:1.08fr .92fr;gap:52px;align-items:center} .mw-bhero__copy{display:flex;flex-direction:column} .mw-bhero__chip{align-self:flex-start;display:inline-flex;align-items:center;gap:9px;margin-bottom:16px; background:#fff;color:#006A94;font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.09em; padding:8px 14px;box-shadow:0 6px 20px rgba(3,15,26,.28)} .mw-bhero__tick{position:relative;display:inline-block;width:17px;height:17px;background:#008BC0;font-size:0} .mw-bhero__tick::after{content:"";position:absolute;top:50%;left:50%;width:4px;height:8px;margin:-5px 0 0 -3px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)} .mw-bhero__h1{color:#fff;font-size:clamp(30px,3.8vw,46px);font-weight:800;line-height:1.14;letter-spacing:-.01em;margin:0;text-wrap:balance} .mw-bhero__tag{color:#fff;font-weight:700;font-size:clamp(15px,1.7vw,18px);margin:12px 0 0;letter-spacing:.01em} .mw-bhero__tag mark{background:transparent;color:#fff;font-weight:800;padding:0 2px;box-shadow:inset 0 -.5em 0 rgba(255,255,255,.35)} .mw-bhero__lead{color:#e6f4fb;font-size:15px;margin:10px 0 0} .mw-bhero__daily{align-self:flex-start;display:inline-flex;align-items:center;gap:11px;margin-top:24px;text-decoration:none; background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.6);color:#fff; padding:11px 18px;font-size:13px;font-weight:600;letter-spacing:.02em;transition:background .16s,border-color .16s} .mw-bhero__daily:hover{background:rgba(255,255,255,.2);border-color:#fff;color:#fff} .mw-bhero__daily strong{color:#fff;font-weight:800} .mw-bhero__dot{width:9px;height:9px;border-radius:50%;background:#3ad07f;flex:0 0 auto; box-shadow:0 0 0 0 rgba(58,208,127,.7);animation:mwbheroPulse 2.4s ease-out infinite} .mw-bhero__arrow{color:#eaf6fc;transition:transform .16s} .mw-bhero__daily:hover .mw-bhero__arrow{transform:translateX(3px)} @keyframes mwbheroPulse{0%{box-shadow:0 0 0 0 rgba(58,208,127,.6)}70%{box-shadow:0 0 0 8px rgba(58,208,127,0)}100%{box-shadow:0 0 0 0 rgba(58,208,127,0)}} .mw-bhero__media{display:flex} .mw-bhero__card{position:relative;display:block;width:100%;aspect-ratio:5/4;overflow:hidden;cursor:pointer;padding:0; border:1px solid rgba(255,255,255,.34);background:#0b1a2a;font-family:inherit;box-shadow:0 24px 60px rgba(4,14,24,.4)} .mw-bhero__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 38%} .mw-bhero__tint{position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,18,30,.12),rgba(8,18,30,.55));transition:background .18s} .mw-bhero__card:hover .mw-bhero__tint{background:linear-gradient(180deg,rgba(8,18,30,.05),rgba(8,18,30,.4))} .mw-bhero__play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:64px;height:64px; background:rgba(0,139,192,.92);display:grid;place-items:center;box-shadow:0 8px 26px rgba(4,14,24,.5);transition:transform .18s,background .18s} .mw-bhero__play::before{content:"";border-left:20px solid #fff;border-top:12px solid transparent;border-bottom:12px solid transparent;margin-left:5px} .mw-bhero__card:hover .mw-bhero__play{transform:translate(-50%,-50%) scale(1.08);background:#008BC0} .mw-bhero__card:focus-visible{outline:2px solid #fff;outline-offset:3px} .mw-bhero__label{position:absolute;left:0;bottom:0;background:#000;color:#fff;font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.08em;padding:8px 13px} /* popup — JS portals it to so Divi stacking contexts don't trap it */ .mw-bhero-modal{position:fixed;inset:0;z-index:100000;display:none;align-items:center;justify-content:center;padding:24px; font-family:'Open Sans',system-ui,Arial,sans-serif} .mw-bhero-modal.is-open{display:flex} .mw-bhero-modal__backdrop{position:absolute;inset:0;background:rgba(6,14,22,.86);backdrop-filter:blur(3px)} .mw-bhero-modal__inner{position:relative;width:auto;max-width:100%;animation:mwbheroPop .22s ease} @keyframes mwbheroPop{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}} .mw-bhero-modal__close{position:absolute;top:-46px;right:0;width:38px;height:38px;cursor:pointer;background:transparent; border:1px solid rgba(255,255,255,.4);color:#fff;font-size:22px;line-height:1;font-family:inherit;transition:background .16s} .mw-bhero-modal__close:hover{background:rgba(255,255,255,.14)} .mw-bhero-modal__frame{position:relative;background:#000;border:1px solid rgba(124,196,226,.3);box-shadow:0 30px 80px rgba(0,0,0,.6)} .mw-bhero-modal__frame video{display:block;width:auto;max-width:100%;max-height:80vh;background:#000;margin:0 auto} @media(max-width:900px){.mw-bhero__grid{grid-template-columns:1fr;gap:30px}} @media(prefers-reduced-motion:reduce){.mw-bhero__dot{animation:none}.mw-bhero-modal__inner{animation:none}}