/* ==========================================================================
   The Firm page only - the Framer hero illustration (framer: mkb-harvee.framer.website/the-firm):
   a 617x585 box on the right of the hero, contained image, 112deg fade, 129px below the hero top.
   Loaded only by the-firm.php; scoped to body.about-page.
   ========================================================================== */
body.about-page .about-hero-visual {
  position: absolute !important;
  top: 129px !important;
  right: 0 !important;
  bottom: auto !important;
  left: auto !important;
  width: 617px !important;
  max-width: none !important;
  height: 585px !important;
  opacity: 1 !important;
  pointer-events: none !important;
  z-index: 1 !important;
  -webkit-mask: none !important;
  mask: none !important;
}

body.about-page .about-hero-visual img {
  display: block !important;
  width: 617px !important;
  max-width: none !important;
  height: 585px !important;
  aspect-ratio: auto !important;
  object-fit: contain !important;
  object-position: 50% 50% !important;
  -webkit-mask-image: linear-gradient(112deg, rgba(0, 0, 0, 0) 23.2759%, rgb(0, 0, 0) 100%);
  mask-image: linear-gradient(112deg, rgba(0, 0, 0, 0) 23.2759%, rgb(0, 0, 0) 100%);
}

/* the purpose cards sit over the illustration, as in Framer: translucent so the picture shows through */
body.about-page .about-hero .about-purpose-card {
  background-color: rgba(255, 255, 255, 0.55) !important;
}

@media (max-width: 1024px) {
  body.about-page .about-hero-visual {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    width: 100% !important;
    max-width: 420px !important;
    height: auto !important;
    margin: 24px auto 0 !important;
  }

  body.about-page .about-hero-visual img {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 1024 / 857;
  }
}