@media (max-width:1024px){
  /* The hero section carries pre-existing mobile rules of its own:
     padding-bottom:56vw !important (<=1024) and padding-bottom:46vh !important (<=767).
     That reserved ~338px of empty pale-blue space below the card -- the gap this band now
     fills from above. Beating them needs specificity (0,3,0) + !important, because a bare
     .elementor-element-0110dda rule ties on specificity and loses on source order. */
  .elementor-6704 .elementor-element.elementor-element-0110dda{padding-bottom:48px !important}
  .elementor-8151 .elementor-element.elementor-element-0110dda{padding-bottom:48px !important}
  
  .solas-mvials{
    position:relative;z-index:2;pointer-events:none;
    display:flex;align-items:flex-end;justify-content:center;gap:20px;
    max-width:520px;margin:0 auto 14px;padding:18px 20px 62px;
  }
  .solas-mvials .mv-w{position:relative;flex:0 0 auto}
  .solas-mvials .mv-e{position:relative;animation:solasIn .9s ease-out var(--in,0s) both}
  .solas-mvials a.mv-l{display:block;pointer-events:auto;-webkit-tap-highlight-color:transparent;outline:none}
  .solas-mvials a.mv-l:focus-visible{outline:2px solid #346CAC;outline-offset:6px;border-radius:8px}
  .solas-mvials img{
    width:100%;height:auto;display:block;
    transform:rotate(var(--rot,0deg));
    animation:solasBob var(--dur,7s) ease-in-out var(--delay,0s) infinite;
    filter:drop-shadow(rgba(30,50,110,.22) 0 20px 24px);
  }
  .solas-mvials .mv-a{width:21%;margin-bottom:40px}
  .solas-mvials .mv-b{width:27%;margin-bottom:0}
  .solas-mvials .mv-c{width:24%;margin-bottom:22px}
  /* Speed 2.8 (Claude, 22 Sep 2026): hold the vial band space before its Guest-Mode-delayed script runs,
     so inserting the band moves nothing. Band height = 80px + 62.95% of its inner width, plus 14px margin. */
  .elementor-element-0110dda:not(:has(.solas-mvials)) > .elementor-container{margin-top:calc(94px + (min(520px, 100%) - 40px) * .6295) !important}
  .solas-mvials .mv-tag{
    position:absolute;left:50%;top:calc(100% + 12px);transform:translateX(-50%);
    background:rgba(255,255,255,.94);color:var(--solas-text, #0B2349);font-family:inherit;
    font-size:11px;line-height:1.35;letter-spacing:.08em;text-transform:uppercase;
    text-align:center;padding:7px 14px;border-radius:var(--solas-radius-rect, 4px);
    box-shadow:0 10px 26px rgba(30,50,110,.2);white-space:nowrap;pointer-events:none;
  }
  .solas-mvials .mv-tag b{display:block;font-weight:700;font-size:12px;letter-spacing:.12em}
  .solas-mvials .mv-tag span{display:block;font-weight:500;font-size:9.5px;color:#5a6a8a}
}
@media (min-width:1025px){
  .solas-mvials{display:none !important}
  /* Desktop floating vials: the layer stays pointer-events:none (never blocks the hero card);
     only the <a> wrapped around each real vial is clickable. */
  .solas-vials a.sv-l{display:block;pointer-events:auto;cursor:pointer;-webkit-tap-highlight-color:transparent;outline:none;
    transition:transform .22s ease,filter .22s ease}
  .solas-vials a.sv-l:hover{transform:translateY(-4px) scale(1.035)}
  .solas-vials a.sv-l:focus-visible{outline:2px solid #346CAC;outline-offset:8px;border-radius:10px}
  .solas-vials .sv-tag{pointer-events:none}
  /* The Elementor .elementor-container (z-index:1) is a transparent sheet over the vial layer (z-index:0)
     and swallowed every click. This section = one column + one HTML widget, so let clicks fall
     through the transparent wrappers and re-enable them only on the card itself. */
  .elementor-element-0110dda > .elementor-container,
  .elementor-element-0110dda > .elementor-container > .elementor-column,
  .elementor-element-0110dda .elementor-widget-wrap,
  .elementor-element-0110dda .elementor-widget,
  .elementor-element-0110dda .elementor-widget-container,
  .elementor-element-0110dda .solas-hp-hero{pointer-events:none}
  .elementor-element-0110dda .solas-hp-card{pointer-events:auto}
}
@media (prefers-reduced-motion:reduce){
  .solas-mvials img,.solas-mvials .mv-e{animation:none !important}
  .solas-vials a.sv-l{transition:none}
}

/*# sourceURL=solas-hpmv-inline-css */