.elementor-898 .elementor-element.elementor-element-daf3055{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-898 .elementor-element.elementor-element-daf3055:not(.elementor-motion-effects-element-type-background), .elementor-898 .elementor-element.elementor-element-daf3055 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#000000;}.elementor-898 .elementor-element.elementor-element-7f3a49f{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-898 .elementor-element.elementor-element-7f3a49f:not(.elementor-motion-effects-element-type-background), .elementor-898 .elementor-element.elementor-element-7f3a49f > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#000000;}/* Start custom CSS for html, class: .elementor-element-f904088 *//* ===== Responsive Aspect Ratio Patch: 16:9 desktop → 9:16 mobile ===== */

/* Tablet/desktop stays cinematic 16:9 (no change needed) */

/* Mobile: fill screen vertically, switch to 9:16, tighten UI */
@media (max-width: 768px){
  /* Make the frame tall, edge-to-edge */
  .mb-wrap{
    padding: 0;                 /* edge-to-edge on phones */
    background: #000;           /* cleaner behind notches */
  }
  .mb-frame{
    aspect-ratio: 9/16;         /* portrait feel on mobile */
    width: 100vw;               /* full viewport width */
    max-width: none;
    height: 100vh;              /* ensure full-height feel */
    border-radius: 0;           /* remove rounded corners */
    box-shadow: none;           /* avoid glow on phone edges */
  }

  /* Video framing */
  .mb-video{
    width: 100%;
    height: 100%;
    object-fit: cover;          /* crops sides to keep drama */
    object-position: center;    /* keeps heroes centered */
    background: #000;
  }

  /* Top UI: tighter spacing */
  .mb-ui{
    padding: 8px 10px;
  }
  .mb-progress{ gap: 6px; }
  .mb-dot{ width: 10px; height: 10px; }

  /* Caption: smaller, higher */
  .mb-caption{
    padding: 12px 14px 16px;
    font-size: clamp(14px, 3.6vw, 17px);
    line-height: 1.4;
    background: linear-gradient(180deg, rgba(0,0,0,0) 0%,
                                         rgba(2,4,8,.45) 22%,
                                         rgba(2,4,8,.78) 100%);
  }

  /* Buttons: compact */
  .mb-btn{ padding: 6px 10px; border-radius: 9px; }

  /* Tap hint: a bit lower for thumbs */
  .mb-taphint{
    bottom: 12%;
    font-size: 11px;
    padding: 5px 9px;
  }

  /* Intro/Outro title sizing */
  .mb-title{ font-size: clamp(20px, 6.2vw, 34px); }
  .mb-sub{   font-size: clamp(12px, 3.8vw, 16px); }
  .mb-strap{ font-size: clamp(12px, 4.2vw, 18px); }

  /* Rune background less intense on small screens */
  .mb-runes{ opacity:.28; }
}

/* Very small phones: extra tightening */
@media (max-width: 360px){
  .mb-caption{ font-size: 13px; padding: 10px 12px 14px; }
  .mb-btn{ padding: 5px 8px; }
  .mb-dot{ width: 9px; height: 9px; }
}/* End custom CSS */