/* Full-bleed hero, used on the front page only.

   Ported from the old theme's `.hero` + `.home .excerpt_cont`: a banded image
   the width of the viewport, the site name and payoff sitting on it in
   translucent green, and the summary in a white card pulled up over the bottom
   edge. Live positioned the image with top/left/transform and swapped
   width/height at four breakpoints to fake a cover fit; object-fit does the same
   job in one declaration. */
.page-hero { position: relative; }
.page-hero .page-hero-picture { position: relative; width: 100%; height: 200px; margin: 0; overflow: hidden; }
.page-hero .page-hero-picture img { display: block; width: 100%; height: 100%; object-fit: cover; }
.page-hero .page-hero-title { position: absolute; top: 38.5%; left: 50%; max-width: 100%; margin: 0; padding: 0 5px; transform: translate(-50%, -50%); background-color: rgba(102, 187, 24, 0.8); color: #ffffff; font-size: 32px; font-weight: 700; line-height: 1; text-align: center; text-transform: uppercase; }
.page-hero .page-hero-title span { opacity: 0.6; }
.page-hero .page-hero-payoff { position: absolute; top: 52%; left: 50%; max-width: 100%; padding: 3px 6px; transform: translate(-50%, -50%); background-color: rgba(77, 142, 18, 0.8); color: #ffffff; font-size: 12px; line-height: 1; text-align: center; }
.page-hero .page-hero-summary { width: 90%; margin: 0 auto 30px auto; }
.page-hero .page-hero-summary-text { position: relative; margin: -35px -10px 0 -10px; padding: 10px 10px 0 10px; background-color: #ffffff; color: #333333; font-size: 16px; line-height: 1.2; }

@media (min-width: 641px) {
  .page-hero .page-hero-picture { height: 290px; }
  .page-hero .page-hero-title { top: 43%; padding: 0 7px; font-size: 48px; }
  .page-hero .page-hero-payoff { top: 57%; padding: 5px 10px; font-size: 14px; }
  .page-hero .page-hero-summary { max-width: 850px; }
  .page-hero .page-hero-summary-text { margin: -40px -20px 0 -20px; padding: 15px 20px 5px 20px; font-size: 19px; line-height: 1.1; }
}

@media (min-width: 1280px) {
  .page-hero .page-hero-picture { height: 500px; }
  .page-hero .page-hero-title { top: 47.5%; padding: 0 10px; font-size: 72px; }
  .page-hero .page-hero-payoff { top: 59%; font-size: 17px; line-height: 1.2; }
  .page-hero .page-hero-summary { width: 850px; }
  .page-hero .page-hero-summary-text { margin: -30px -30px -15px -30px; padding: 20px 30px 10px 30px; }
}