/* HerDen v6.3 — full image, zero cropping */
.hero.hero-approved {
  display: flex !important;
  flex-direction: column !important;
  min-height: 0 !important;
  height: auto !important;
  background: #f9f5f3 !important;
  overflow: hidden !important;
}
.hero.hero-approved::before,
.hero.hero-approved .hero-art::after {
  display: none !important;
}
.hero.hero-approved .hero-art {
  position: relative !important;
  inset: auto !important;
  width: 100% !important;
  height: auto !important;
  opacity: 1 !important;
  background: none !important;
  filter: none !important;
  z-index: 1 !important;
}
.hero.hero-approved .hero-art img {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  max-width: none !important;
  object-fit: contain !important;
}
.hero.hero-approved > .container {
  position: relative !important;
  z-index: 2 !important;
  display: block !important;
  min-height: 0 !important;
  height: auto !important;
}
.hero.hero-approved .hero-content {
  width: 100% !important;
  max-width: 760px !important;
  padding: clamp(32px,5vw,65px) 0 !important;
  margin: 0 !important;
}
.hero.hero-approved h1 {
  font-size: clamp(2.6rem,5vw,5rem) !important;
  line-height: 1.05 !important;
}
@media (max-width: 650px) {
  .hero.hero-approved .hero-art {
    height: auto !important;
  }
  .hero.hero-approved .hero-content {
    padding: 28px 0 40px !important;
  }
  .hero.hero-approved h1 {
    font-size: clamp(2.4rem,10vw,3.5rem) !important;
  }
}


/* v6.4 — text overlays the original full-width hero image */
.hero.hero-approved {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  min-height: clamp(520px, 39vw, 800px) !important;
  isolation: isolate;
}
.hero.hero-approved .hero-art,
.hero.hero-approved > .container {
  grid-area: 1 / 1 !important;
}
.hero.hero-approved .hero-art {
  position: relative !important;
  inset: auto !important;
  width: 100% !important;
  height: 100% !important;
  z-index: 0 !important;
}
.hero.hero-approved .hero-art img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center !important;
}
.hero.hero-approved > .container {
  display: flex !important;
  align-items: center !important;
  position: relative !important;
  z-index: 2 !important;
  min-height: 0 !important;
  height: 100% !important;
}
.hero.hero-approved .hero-content {
  width: min(100%, 490px) !important;
  max-width: 490px !important;
  margin: 0 !important;
  padding: 35px 0 !important;
}
@media (max-width: 700px) {
  .hero.hero-approved {
    min-height: 650px !important;
  }
  .hero.hero-approved .hero-art {
    position: absolute !important;
    inset: 0 !important;
    height: 100% !important;
  }
  .hero.hero-approved .hero-art img {
    object-fit: cover !important;
    object-position: 63% center !important;
  }
  .hero.hero-approved::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(0deg,
      #f9f5f3 0%,
      rgba(249,245,243,.96) 42%,
      rgba(249,245,243,.35) 78%,
      transparent 100%);
    z-index: 1;
    pointer-events: none;
  }
  .hero.hero-approved > .container {
    align-items: flex-end !important;
  }
  .hero.hero-approved .hero-content {
    width: 100% !important;
    max-width: 100% !important;
    padding: 250px 0 35px !important;
  }
}



/* ===== v64 readability overlay fix ===== */
.hero.hero-approved.hero-v62 {
  position: relative !important;
  overflow: hidden !important;
}

.hero.hero-approved.hero-v62::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(
      90deg,
      rgba(249,246,243,0.92) 0%,
      rgba(249,246,243,0.86) 18%,
      rgba(249,246,243,0.70) 32%,
      rgba(249,246,243,0.38) 48%,
      rgba(249,246,243,0.10) 64%,
      rgba(249,246,243,0.00) 78%
    );
}

.hero.hero-approved.hero-v62 .hero-media,
.hero.hero-approved.hero-v62 .hero-media img,
.hero.hero-approved.hero-v62 picture {
  position: relative !important;
  z-index: 0 !important;
}

.hero.hero-approved.hero-v62 .hero-copy,
.hero.hero-approved.hero-v62 .hero-copy-inner,
.hero.hero-approved.hero-v62 .hero-content,
.hero.hero-approved.hero-v62 .container {
  position: relative !important;
  z-index: 2 !important;
}

.hero.hero-approved.hero-v62 .hero-copy {
  max-width: 520px !important;
}

.hero.hero-approved.hero-v62 h1,
.hero.hero-approved.hero-v62 p,
.hero.hero-approved.hero-v62 .eyebrow,
.hero.hero-approved.hero-v62 .hero-actions {
  position: relative !important;
  z-index: 3 !important;
}

.hero.hero-approved.hero-v62 p,
.hero.hero-approved.hero-v62 .hero-copy p {
  color: #2f3142 !important;
}

@media (max-width: 1100px) {
  .hero.hero-approved.hero-v62::before {
    background:
      linear-gradient(
        180deg,
        rgba(249,246,243,0.88) 0%,
        rgba(249,246,243,0.72) 24%,
        rgba(249,246,243,0.42) 46%,
        rgba(249,246,243,0.08) 68%,
        rgba(249,246,243,0.00) 100%
      );
  }
}

@media (max-width: 768px) {
  .hero.hero-approved.hero-v62::before {
    background:
      linear-gradient(
        180deg,
        rgba(249,246,243,0.92) 0%,
        rgba(249,246,243,0.84) 28%,
        rgba(249,246,243,0.55) 52%,
        rgba(249,246,243,0.16) 74%,
        rgba(249,246,243,0.00) 100%
      );
  }

  .hero.hero-approved.hero-v62 .hero-copy {
    max-width: 100% !important;
  }
}


/* v66 - Working left-side text readability overlay */
.hero.hero-approved {
    isolation: isolate !important;
    position: relative !important;
}
.hero.hero-approved::before {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: 1 !important;
    pointer-events: none !important;
    background: linear-gradient(
        90deg,
        rgba(249,245,243,0.99) 0%,
        rgba(249,245,243,0.97) 15%,
        rgba(249,245,243,0.93) 26%,
        rgba(249,245,243,0.78) 36%,
        rgba(249,245,243,0.30) 48%,
        transparent 60%
    ) !important;
}
.hero.hero-approved .hero-art {
    z-index: 0 !important;
}
.hero.hero-approved > .container {
    position: relative !important;
    z-index: 2 !important;
}
@media(max-width:700px) {
    .hero.hero-approved::before {
        background: linear-gradient(
            180deg,
            rgba(249,245,243,0.10) 0%,
            rgba(249,245,243,0.70) 35%,
            rgba(249,245,243,0.98) 70%,
            #f9f5f3 100%
        ) !important;
    }
}