/* =========================================================
   Greenleaf LTD — hero.css
   Pairs with includes/hero.html.
   The blob shape echoes the navy brand mark from the flyer,
   so the site reads as continuous with existing print material.
   ========================================================= */

.hero {
  position: relative;
  overflow: hidden;
  background: var(--white);
}

.hero-inner {
  position: relative;
  z-index: 3;
  max-width: 1200px;
  margin: 0 auto;
  padding: 88px 24px 140px;
}

.hero-content {
  max-width: 540px;
}

.hero-content h1 {
  margin: 0 0 20px;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1.12;
  color: var(--navy-900);
  letter-spacing: -0.01em;
}

.hero-sub {
  margin: 0 0 32px;
  font-size: 1.05rem;
  line-height: 1.65;
  color: #3B4668;
  max-width: 460px;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 28px;
}

.hero-meta {
  margin: 0;
  font-size: 0.85rem;
  color: var(--navy-700);
}

/* --- Visual side: navy blob + product/subscriber photo --- */
.hero-visual {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

.hero-blob {
  position: absolute;
  top: -25%;
  right: -18%;
  width: 68%;
  height: 150%;
  background: var(--navy-900);
  border-radius: 48% 52% 55% 45% / 55% 45% 58% 42%;
}

.hero-photo {
  position: absolute;
  right: 6%;
  bottom: 0;
  height: 88%;
  width: auto;
  object-fit: contain;
  z-index: 2;
}

/* Below 900px the visual moves out of the absolute overlay and into
   normal document flow, in its own fixed-height band under the text.
   This is deliberate: overlaying it as a percentage of the whole hero
   made its size depend on how tall the text above it happened to be,
   which is what caused it to ride up over the buttons and meta line. */
@media (max-width: 900px) {
  .hero-inner { padding: 64px 24px 32px; }

  .hero-visual {
    position: relative;
    inset: auto;
    height: 320px;
    margin-top: 16px;
  }

  .hero-blob {
    top: 0;
    bottom: 0;
    left: 24px;
    right: 24px;
    width: auto;
    height: auto;
    border-radius: 20px;
  }

  .hero-photo {
    top: auto;
    right: 10%;
    bottom: 0;
    height: 94%;
  }
}

@media (max-width: 480px) {
  .hero-content { max-width: 100%; }
  .hero-actions { flex-direction: column; align-items: stretch; }
  .hero-actions a { text-align: center; }

  .hero-visual { height: 260px; }
  .hero-blob { left: 16px; right: 16px; border-radius: 16px; }
}