/* Vista Lead Generation — hero media alignment
   Keeps every page hero media card on the same desktop baseline while preserving
   original image aspect ratios and the existing no-crop treatment. */
:root{
  --vlg-hero-top-desktop:56px;
  --vlg-hero-media-inset:24px;
}

/* A common top plane for every image-bearing hero. */
.home-hero,
.inner-hero:not(.centered):not(.compact),
.pricing-page-body .pricing-live-hero{
  padding-top:var(--vlg-hero-top-desktop)!important;
}

.home-hero .hero-grid,
.inner-hero-grid,
.pricing-page-body .pricing-live-hero-grid{
  align-items:start!important;
}

.home-hero .hero-art.visual-frame,
.inner-hero-grid>.inner-visual.visual-frame,
.inner-hero-grid>.green-impact.visual-frame,
.pricing-page-body .pricing-live-visual{
  align-self:start!important;
  margin-top:0!important;
}

/* The visible artwork starts the same distance inside every hero card. */
.home-hero .hero-art.visual-frame .visual-composite,
.inner-hero-grid>.inner-visual.visual-frame .visual-composite,
.inner-hero-grid>.green-impact.visual-frame .visual-composite{
  margin-top:var(--vlg-hero-media-inset)!important;
}

/* Event and ABM cards use padding instead of image margins; match the same 24px inset. */
.graphic-event,
.graphic-abm{
  padding:var(--vlg-hero-media-inset)!important;
}
.graphic-event .visual-composite,
.graphic-abm .visual-composite{
  margin:0!important;
}

/* Pricing uses a custom hero card; give it the identical media inset. */
.pricing-page-body .pricing-live-visual{
  padding:var(--vlg-hero-media-inset)!important;
}

/* Contact now follows the same two-column hero system as the other pages. */
.contact-page-body .inner-hero .shell.inner-hero-grid{
  width:min(calc(100% - 48px),1120px)!important;
  max-width:1120px!important;
}
.contact-page-body .inner-hero .inner-visual.visual-frame{
  background:#fff!important;
  border:1px solid #dfe6ee!important;
  border-radius:24px!important;
  box-shadow:0 18px 46px rgba(25,39,74,.09)!important;
}

@media (max-width:1100px){
  :root{--vlg-hero-media-inset:20px;}
  .home-hero,
  .inner-hero:not(.centered):not(.compact),
  .pricing-page-body .pricing-live-hero{
    padding-top:48px!important;
  }
  .home-hero .hero-grid,
  .inner-hero-grid,
  .pricing-page-body .pricing-live-hero-grid{
    grid-template-columns:1fr!important;
    gap:28px!important;
  }
  .home-hero .hero-art.visual-frame,
  .inner-hero-grid>.inner-visual.visual-frame,
  .inner-hero-grid>.green-impact.visual-frame,
  .pricing-page-body .pricing-live-visual{
    width:min(100%,820px)!important;
    margin-inline:auto!important;
  }
}

@media (max-width:720px){
  :root{--vlg-hero-media-inset:14px;}
  .home-hero,
  .inner-hero:not(.centered):not(.compact),
  .pricing-page-body .pricing-live-hero{
    padding-top:38px!important;
  }
  .home-hero .hero-grid,
  .inner-hero-grid,
  .pricing-page-body .pricing-live-hero-grid{
    gap:22px!important;
  }
  .contact-page-body .inner-hero .shell.inner-hero-grid{
    width:min(calc(100% - 28px),760px)!important;
  }
}