/* ABOUT photo roles: each image type owns its responsive behavior. */
.about-founder-card{
  width:min(340px,72%)!important;
  max-width:340px;
  margin:10px auto 26px!important;
}

@media(max-width:560px){
  .about-photo-edge{
    width:100%!important;
    max-width:none!important;
    margin-left:0!important;
    margin-right:0!important;
    padding-left:0!important;
    padding-right:0!important;
    border-radius:0!important;
    box-shadow:none!important;
    overflow:hidden!important;
  }

  .about-photo-edge__media{
    width:100%!important;
    max-width:none!important;
    margin:0!important;
    border-radius:0!important;
    box-shadow:none!important;
  }

  .about-photo-edge__media>img,
  .about-photo-edge--direct>img{
    display:block!important;
    width:100%!important;
    max-width:none!important;
    height:auto!important;
    margin:0!important;
    border-radius:0!important;
    object-fit:contain!important;
  }

  .about-founder-card{
    width:min(340px,72%)!important;
    max-width:340px!important;
    margin:10px auto 26px!important;
  }

  .about-history-media{
    width:100%!important;
    margin:16px 0 0!important;
  }

}

/* Keep photo sections in normal flow on phones.  The older rules left a
   fixed-height band behind the image, which exposed the pale/navy gradient
   as a visible strip when the image's aspect ratio changed. */
@media(max-width:560px){
  .vision-photo-frame.about-photo-edge{
    padding:0!important;
    background:var(--navy,#0A1930)!important;
  }

  .vision-photo-frame.about-photo-edge .band.vision-photo{
    width:100%!important;
    max-width:none!important;
    height:auto!important;
    min-height:0!important;
    margin:0!important;
    background:transparent!important;
    border-radius:0!important;
    box-shadow:none!important;
  }

  .vision-photo-frame.about-photo-edge .band.vision-photo::before,
  .about-photo-edge--direct.band::before{
    display:none!important;
  }

  .vision-photo-frame.about-photo-edge .band.vision-photo>img,
  .about-photo-edge--direct.band>img{
    display:block!important;
    width:100%!important;
    max-width:none!important;
    height:auto!important;
    margin:0!important;
    object-fit:contain!important;
  }

  .about-photo-edge--direct.band{
    width:100%!important;
    max-width:none!important;
    height:auto!important;
    min-height:0!important;
    margin:0!important;
    background:var(--navy,#0A1930)!important;
  }

  /* The CTA photo is an image section, not a fixed-height background. */
  .cta.story-cta{
    display:block!important;
    width:100%!important;
    height:auto!important;
    min-height:0!important;
    padding:0!important;
    background:var(--navy,#0A1930)!important;
  }
  .cta.story-cta .story-cta-bg{
    position:relative!important;
    inset:auto!important;
    display:block!important;
    width:100%!important;
    max-width:none!important;
    height:auto!important;
    object-fit:contain!important;
    object-position:center!important;
  }
  .cta.story-cta::before{
    top:0!important;
    bottom:auto!important;
    height:100%!important;
    background:linear-gradient(180deg,rgba(3,11,24,.68),rgba(3,11,24,.84))!important;
  }
  .cta.story-cta .wrap{
    position:absolute!important;
    inset:0!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    justify-content:center!important;
    padding:0 24px!important;
  }
}

@media(max-width:560px){
  .cc-story-lead,.cc-story-copy,.cc-lead{word-break:keep-all;text-wrap:pretty}
}