/* CWI V75 — mobile landing hero + wraparound photo caption fix */

/* The wraparound image caption extends below the photo on purpose.
   Do not clip it when image motion is enabled. */
.supportPhoto{
  overflow:visible!important;
  position:relative!important;
}

/* Keep the photo itself contained and stop the image zoom from cutting
   into the caption. The whole card still receives the motion treatment. */
.supportPhoto img{
  display:block!important;
  width:100%!important;
  height:auto!important;
  aspect-ratio:4/3!important;
  object-fit:cover!important;
  animation:none!important;
  transform:none!important;
}

/* Make sure the teal caption has enough room for both lines. */
.supportPhoto>div{
  min-height:92px!important;
  height:auto!important;
  bottom:-28px!important;
  left:28px!important;
  right:-35px!important;
  padding:20px 24px!important;
  overflow:visible!important;
  z-index:5!important;
}
.supportPhoto>div b,
.supportPhoto>div span{
  display:block!important;
  white-space:normal!important;
  overflow:visible!important;
  text-overflow:clip!important;
}
.supportPhoto>div b{
  line-height:1.2!important;
}
.supportPhoto>div span{
  line-height:1.45!important;
  margin-top:8px!important;
}

/* Preserve visible motion by floating the full picture/card instead. */
@media (prefers-reduced-motion:no-preference){
  .supportPhoto{
    animation:cwiSupportFloatV75 5.8s ease-in-out infinite alternate!important;
    will-change:transform;
  }
}
@keyframes cwiSupportFloatV75{
  from{transform:translate3d(0,0,0)}
  to{transform:translate3d(0,-7px,0)}
}

/* LANDING PAGE MOBILE HERO
   Force the hero image to be a real visible block above the copy.
   This avoids absolute-positioning conflicts on phones. */
@media (max-width:768px){
  body .hero{
    display:flex!important;
    flex-direction:column!important;
    min-height:0!important;
    height:auto!important;
    overflow:visible!important;
    background:#fffdf8!important;
  }

  body .heroPhoto{
    display:block!important;
    position:relative!important;
    inset:auto!important;
    top:auto!important;
    left:auto!important;
    right:auto!important;
    bottom:auto!important;
    width:100%!important;
    height:300px!important;
    min-height:300px!important;
    opacity:1!important;
    visibility:visible!important;
    z-index:1!important;
    overflow:hidden!important;
    order:1!important;
    background:#e9e3d8!important;
  }

  body .heroPhoto img{
    display:block!important;
    width:100%!important;
    height:100%!important;
    min-height:300px!important;
    object-fit:cover!important;
    object-position:center 42%!important;
    opacity:1!important;
    visibility:visible!important;
    transform:none!important;
    animation:none!important;
  }

  body .heroPhoto:after{
    content:""!important;
    display:block!important;
    position:absolute!important;
    inset:0!important;
    background:linear-gradient(180deg,rgba(255,253,248,0) 72%,rgba(255,253,248,.92) 100%)!important;
    pointer-events:none!important;
  }

  body .heroGrid{
    display:block!important;
    position:relative!important;
    z-index:2!important;
    order:2!important;
    width:100%!important;
    min-height:0!important;
    height:auto!important;
    margin:0!important;
    padding:0!important;
  }

  body .heroCopy{
    display:block!important;
    width:100%!important;
    max-width:none!important;
    margin:0!important;
    padding:30px 22px 56px!important;
    background:#fffdf8!important;
  }

  body .hero h1.missionHeadline{
    max-width:100%!important;
    overflow:visible!important;
  }

  body .hero h1.missionHeadline .heroEyebrow{
    display:flex!important;
    flex-wrap:wrap!important;
    width:100%!important;
    margin:0 0 18px!important;
    color:#0E6F74!important;
  }

  body .hero h1.missionHeadline .heroPrimary,
  body .hero h1.missionHeadline .heroSecondary{
    display:block!important;
    max-width:100%!important;
    overflow:visible!important;
  }

  body .heroBadge{
    display:none!important;
  }
}

@media (max-width:420px){
  body .heroPhoto{
    height:280px!important;
    min-height:280px!important;
  }
  body .heroPhoto img{
    min-height:280px!important;
  }
  body .heroCopy{
    padding:28px 18px 48px!important;
  }

  /* Keep the wraparound caption inside the phone width. */
  .supportPhoto>div{
    left:14px!important;
    right:14px!important;
    bottom:-24px!important;
    min-height:88px!important;
    padding:18px 18px!important;
  }
}