/* Molo Hero */
.molo-hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: clamp(480px, 70vh, 760px);
  overflow: hidden;
}

/* background image + legibility overlay, baked in so no page ever ships
   unreadable text over a photo */
.molo-hero--has-image {
  /* strong overlay only where the copy lives (left ~45%), then a fast
     fall-off so background artwork keeps its punch mid-frame and right */
  background-image:
    linear-gradient(100deg,
      rgba(25, 52, 65, .88) 0%,
      rgba(25, 52, 65, .78) 38%,
      rgba(25, 52, 65, .22) 60%,
      rgba(25, 52, 65, .08) 100%),
    var(--molo-hero-image);
  background-size: cover;
  background-position: center;
}

.molo-hero .molo-section__inner {
  width: 100%;
  padding-block: clamp(64px, 9vw, 130px);
}

.molo-hero__headline {
  margin: 0;
  font-size: clamp(2.1rem, 4.6vw, 3.4rem);
  line-height: 1.12;
  font-weight: 700;
  letter-spacing: -0.01em;
  max-width: 17ch;
  text-wrap: balance;
}
.molo--center .molo-hero__headline { margin-inline: auto; }

.molo-hero__body {
  margin-top: 1.4em;
  max-width: 52ch;
  font-size: clamp(1.02rem, 1.4vw, 1.18rem);
  line-height: 1.6;
}
.molo--center .molo-hero__body { margin-inline: auto; }
.molo-hero__body p { margin: 0 0 .9em; }
.molo-hero__body p:last-child { margin-bottom: 0; }

@media (max-width: 640px) {
  .molo-hero { min-height: 0; }
}