/* Page header banners, using the greens from the logo icon gradient
   (assets/6a908eee16effb5aff88be86_logo-2f102c.svg). The site footer's
   bgPan animation pans this at 200% size. */
.section-2.animated-bg {
  background-color: #63a62f !important;
  background-image:
    radial-gradient(ellipse at 85% 10%, rgba(169, 212, 60, 0.85) 0%, rgba(169, 212, 60, 0) 55%),
    linear-gradient(160deg, #a9d43c 0%, #84c037 28%, #63a62f 52%, #4d9128 74%, #38781f 100%) !important;
}

/* Phones: the Webflow export pulls page headings 158px past the right edge,
   which cuts off long titles like "FEATURED WORK >". Keep them in the
   container and let them wrap. */
@media screen and (max-width: 479px) {
  .heading {
    margin-right: 0;
    overflow-wrap: break-word;
  }

  /* Home page title: size it to the screen so COMMUNICATION fits on one
     line instead of breaking mid-word, and drop the off-center right margin. */
  .heading.hometitle {
    margin-right: 0;
    font-size: min(2.8125rem, 10vw);
    line-height: 1.15;
    overflow-wrap: normal;
  }

  /* Bullet lists: the export squeezes these to 6-22px, so the bullets sit
     almost on the screen edge. */
  ul.li,
  ul.list-2,
  ul.list-3,
  ul.list-4 {
    padding-left: 1.5rem;
  }
}