/*
 * Image sizing controls for Strata Temp Co.
 * Keep these rules separate from layout and form styles so images can be
 * adjusted without changing page structure or form behaviour.
 */
.page-hero {
  padding-block: 52px;
}
.page-hero picture {
  display: block;
  width: min(100%, 420px);
  max-width: 420px;
  min-width: 0;
  justify-self: end;
}
.page-hero-grid.reverse picture {
  justify-self: start;
}
.page-hero picture img {
  width: 100%;
  height: 290px;
  aspect-ratio: auto;
  object-fit: cover;
  object-position: center;
}
.page-hero-pro picture img {
  object-position: 50% 42%;
}
.page-hero-business picture img {
  object-position: 62% 50%;
}
.about-image {
  width: min(100%, 425px);
  max-width: 425px;
  justify-self: end;
}
.about-image img {
  display: block;
  width: 100%;
  height: 285px;
  aspect-ratio: auto;
  object-fit: cover;
  object-position: 60% center;
}
.professional-assurance {
  font-size: 14px !important;
  color: var(--navy) !important;
  font-weight: 700;
  padding: 12px 14px;
  border-left: 3px solid var(--blue);
  background: #e6f0f8;
  margin-top: 14px;
  margin-bottom: 12px;
}
.sidebar-note strong {
  display: block;
  margin-bottom: 7px;
  color: var(--navy);
}
.sidebar-note p { margin: 0; }
@media (max-width: 870px) {
  .page-hero { padding-block: 38px; }
  .page-hero picture,
  .page-hero-grid.reverse picture {
    justify-self: center;
    width: min(100%, 385px);
  }
  .page-hero picture img {
    height: 255px;
    aspect-ratio: auto;
  }
  .about-image {
    justify-self: center;
    width: min(100%, 385px);
  }
  .about-image img { height: 250px; }
}
@media (max-width: 560px) {
  .page-hero { padding-block: 30px 38px; }
  .page-hero picture,
  .page-hero-grid.reverse picture { width: min(100%, 315px); }
  .page-hero picture img { height: 210px; }
  .about-image { width: min(100%, 315px); }
  .about-image img { height: 210px; }
  .pathway picture img { max-height: 165px; }
}