/* ==========================================================
   ASA Portal v2.1.5.D-WHYASA-SUPPORT-03
   CSS-ONLY — Proportional, Elegant & Balanced Support Story
   Deployment: replace the existing support02 CSS file only.
   No PHP/HTML/JS changes are required.
   ========================================================== */

.asa-support-story{
  position:relative !important;
  overflow:clip !important;
  padding:84px 0 !important;
}

.asa-support-story .asa-container{
  width:min(1360px, calc(100% - 56px)) !important;
  max-width:1360px !important;
  margin-inline:auto !important;
  box-sizing:border-box !important;
}

.asa-support-story .asa-support-grid{
  display:grid !important;
  grid-template-columns:minmax(0,0.96fr) minmax(0,1.04fr) !important;
  gap:56px !important;
  align-items:center !important;
  width:100% !important;
  min-width:0 !important;
}

.asa-support-story .asa-support-media{
  position:relative !important;
  width:100% !important;
  min-width:0 !important;
  max-width:100% !important;
  height:auto !important;
  min-height:0 !important;
  aspect-ratio:16 / 11 !important;
  overflow:hidden !important;
  border-radius:30px !important;
  background:linear-gradient(180deg,#faf7f1 0%,#eef3fa 100%) !important;
  border:1px solid rgba(188,204,229,.68) !important;
  box-shadow:0 22px 52px rgba(15,37,75,.09) !important;
  isolation:isolate !important;
}

.asa-support-story .asa-support-media::before{
  content:"" !important;
  position:absolute !important;
  inset:0 !important;
  z-index:2 !important;
  pointer-events:none !important;
  border-radius:inherit !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.88) !important;
}

.asa-support-story .asa-support-media::after{
  content:"" !important;
  position:absolute !important;
  inset:0 !important;
  z-index:2 !important;
  pointer-events:none !important;
  background:linear-gradient(180deg,rgba(255,255,255,.015) 55%,rgba(9,42,93,.045) 100%) !important;
}

.asa-support-story .asa-support-media img{
  position:absolute !important;
  inset:0 !important;
  display:block !important;
  width:100% !important;
  height:100% !important;
  max-width:none !important;
  object-fit:cover !important;
  object-position:48% 50% !important;
  transform:none !important;
  transform-origin:center !important;
}

.asa-support-story .asa-support-copy{
  width:100% !important;
  min-width:0 !important;
  max-width:650px !important;
  margin-inline:0 !important;
  padding:0 !important;
  box-sizing:border-box !important;
}

.asa-support-story .asa-support-copy .eyebrow{
  display:inline-block !important;
  margin:0 0 13px !important;
  font-size:13px !important;
  line-height:1.2 !important;
  letter-spacing:.20em !important;
}

.asa-support-story .asa-support-copy h2{
  width:100% !important;
  max-width:620px !important;
  margin:6px 0 18px !important;
  font-size:clamp(44px,3.65vw,56px) !important;
  line-height:1.02 !important;
  letter-spacing:-.043em !important;
  text-wrap:balance !important;
  overflow-wrap:normal !important;
}

.asa-support-story .asa-support-copy>p{
  width:100% !important;
  max-width:620px !important;
  margin:0 !important;
  font-size:17px !important;
  line-height:1.68 !important;
  color:#667a99 !important;
  overflow-wrap:break-word !important;
}

.asa-support-story .asa-support-points{
  display:grid !important;
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  gap:12px !important;
  margin-top:26px !important;
  width:100% !important;
  min-width:0 !important;
}

.asa-support-story .asa-support-points article{
  box-sizing:border-box !important;
  display:grid !important;
  grid-template-columns:44px minmax(0,1fr) !important;
  gap:13px !important;
  align-items:center !important;
  min-width:0 !important;
  min-height:104px !important;
  padding:15px 16px !important;
  border-radius:20px !important;
  background:rgba(255,255,255,.88) !important;
  border:1px solid #dce5f2 !important;
  box-shadow:0 10px 24px rgba(17,48,94,.042) !important;
  transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease !important;
}

.asa-support-story .asa-support-points article:hover{
  transform:translateY(-2px) !important;
  border-color:#c9d8ef !important;
  box-shadow:0 15px 30px rgba(17,48,94,.07) !important;
}

.asa-support-story .asa-support-points article>span{
  display:flex !important;
  width:44px !important;
  height:44px !important;
  align-items:center !important;
  justify-content:center !important;
  border-radius:14px !important;
  margin:0 !important;
  background:linear-gradient(180deg,#eef4ff 0%,#e5edfb 100%) !important;
  color:#1f4ed8 !important;
  font-size:11.5px !important;
  font-weight:800 !important;
  flex:none !important;
}

.asa-support-story .asa-support-points article>div{
  min-width:0 !important;
  max-width:100% !important;
}

.asa-support-story .asa-support-points h3{
  margin:0 0 5px !important;
  font-size:16px !important;
  line-height:1.25 !important;
  letter-spacing:-.015em !important;
  color:#102347 !important;
  overflow-wrap:break-word !important;
}

.asa-support-story .asa-support-points p{
  margin:0 !important;
  max-width:none !important;
  font-size:12.8px !important;
  line-height:1.48 !important;
  color:#7182a0 !important;
  overflow-wrap:break-word !important;
}

@media (max-width:1180px){
  .asa-support-story{
    padding:72px 0 !important;
  }

  .asa-support-story .asa-container{
    width:min(100% - 44px,1080px) !important;
  }

  .asa-support-story .asa-support-grid{
    grid-template-columns:minmax(0,.94fr) minmax(0,1.06fr) !important;
    gap:38px !important;
  }

  .asa-support-story .asa-support-media{
    aspect-ratio:4 / 3 !important;
  }

  .asa-support-story .asa-support-copy h2{
    font-size:clamp(40px,4.35vw,50px) !important;
    max-width:560px !important;
  }

  .asa-support-story .asa-support-points{
    grid-template-columns:1fr !important;
  }

  .asa-support-story .asa-support-points article{
    min-height:84px !important;
  }
}

@media (max-width:920px){
  .asa-support-story{
    padding:62px 0 !important;
  }

  .asa-support-story .asa-container{
    width:min(100% - 36px,780px) !important;
  }

  .asa-support-story .asa-support-grid{
    grid-template-columns:1fr !important;
    gap:30px !important;
  }

  .asa-support-story .asa-support-media{
    order:1 !important;
    aspect-ratio:16 / 10 !important;
  }

  .asa-support-story .asa-support-copy{
    order:2 !important;
    max-width:none !important;
  }

  .asa-support-story .asa-support-copy h2{
    max-width:700px !important;
    font-size:clamp(38px,7vw,50px) !important;
  }

  .asa-support-story .asa-support-copy>p{
    max-width:700px !important;
  }

  .asa-support-story .asa-support-points{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }
}

@media (max-width:620px){
  .asa-support-story{
    padding:50px 0 !important;
  }

  .asa-support-story .asa-container{
    width:calc(100% - 28px) !important;
  }

  .asa-support-story .asa-support-media{
    border-radius:24px !important;
    aspect-ratio:4 / 3 !important;
  }

  .asa-support-story .asa-support-media img{
    object-position:48% 50% !important;
  }

  .asa-support-story .asa-support-copy h2{
    font-size:34px !important;
    line-height:1.04 !important;
    letter-spacing:-.035em !important;
  }

  .asa-support-story .asa-support-copy>p{
    font-size:15.5px !important;
    line-height:1.65 !important;
  }

  .asa-support-story .asa-support-points{
    grid-template-columns:1fr !important;
    gap:10px !important;
    margin-top:22px !important;
  }

  .asa-support-story .asa-support-points article{
    grid-template-columns:44px minmax(0,1fr) !important;
    gap:12px !important;
    min-height:auto !important;
    padding:14px !important;
    border-radius:18px !important;
  }
}

@media (prefers-reduced-motion:reduce){
  .asa-support-story .asa-support-points article{
    transition:none !important;
  }

  .asa-support-story .asa-support-points article:hover{
    transform:none !important;
  }
}