<!-- Paste markup into an Embed, or recreate as native elements.
     Styles below map 1:1 to the class names above. -->
<section class="hero_component">
  <img class="hero_media" src="https://pub-8060008fc1ab494c98adf87ab62286c4.r2.dev/assets/inspiration/hero-forest-organic-business-25-1-12.webp" alt="Sunlight breaking through a misty evergreen forest at dawn" />
  <div class="hero_scrim"></div>
  <div class="hero_glow"></div>
  <div class="hero_inner">
    <nav class="hero_meta">
      <div class="hero_dot"></div>
      <p class="hero_eyebrow">Regenerative Supply · Est. 2016</p>
    </nav>
    <h1 class="hero_title">
      <span class="hero_title_accent"> proud of.</span>
    </h1>
    <p class="hero_sub">We help premium wellness and sustainability brands measure, reduce, and certify their footprint — without slowing growth for a second.</p>
    <div class="hero_actions">
      <a class="hero_button_primary" href="#start">Book a footprint audit</a>
      <a class="hero_button_ghost" href="#work">See our impact</a>
    </div>
    <div class="hero_proof">
      <div class="hero_stat">
        <p class="hero_stat_num">240k tons</p>
        <p class="hero_stat_label">CO₂ offset for clients</p>
      </div>
      <div class="hero_stat">
        <p class="hero_stat_num">180+</p>
        <p class="hero_stat_label">Certified brand partners</p>
      </div>
      <div class="hero_stat">
        <p class="hero_stat_num">B-Corp</p>
        <p class="hero_stat_label">Verified since 2019</p>
      </div>
    </div>
  </div>
</section>

<style>
.hero_component {
  position:relative;
  width:100%;
  min-height:92vh;
  display:flex;
  align-items:flex-end;
  overflow:hidden;
  background:#07221d;
  font-family:Georgia,'Times New Roman',serif;
}

.hero_media {
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  object-fit:cover;
  z-index:0;
}

.hero_scrim {
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  z-index:1;
  background:linear-gradient(180deg,rgba(7,34,29,0.35) 0%,rgba(7,34,29,0.55) 45%,rgba(7,34,29,0.94) 100%);
}

.hero_glow {
  position:absolute;
  bottom:-160px;
  left:-96px;
  width:520px;
  height:520px;
  border-radius:50%;
  z-index:1;
  background:radial-gradient(circle,rgba(143,227,136,0.22) 0%,rgba(143,227,136,0) 70%);
  filter:blur(20px);
  pointer-events:none;
}

.hero_inner {
  position:relative;
  z-index:2;
  width:100%;
  max-width:1200px;
  margin:0 auto;
  padding:160px 32px 96px 32px;
  box-sizing:border-box;
}

.hero_meta {
  display:flex;
  align-items:center;
  gap:16px;
  margin-bottom:32px;
  flex-wrap:wrap;
}

.hero_dot {
  width:8px;
  height:8px;
  border-radius:50%;
  background:#8fe388;
  box-shadow:0 0 12px rgba(143,227,136,0.8);
  flex:none;
}

.hero_eyebrow {
  margin:0;
  color:#8fe388;
  font-size:12px;
  letter-spacing:0.28em;
  text-transform:uppercase;
  font-weight:600;
  font-family:'Helvetica Neue',Arial,sans-serif;
}

.hero_title {
  margin:0 0 24px 0;
  color:#f4f8f2;
  font-weight:300;
  line-height:1.02;
  letter-spacing:-0.01em;
  font-size:clamp(2.8rem,7vw,6rem);
  max-width:15ch;
  font-family:Georgia,'Times New Roman',serif;
}

.hero_title_accent {
  font-style:italic;
  color:#8fe388;
}

.hero_sub {
  margin:0 0 40px 0;
  color:#cfe0d4;
  font-size:19px;
  line-height:1.65;
  max-width:46ch;
  font-family:'Helvetica Neue',Arial,sans-serif;
  font-weight:400;
}

.hero_actions {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:16px;
}

.hero_button_primary {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:#8fe388;
  color:#07221d;
  padding:16px 34px;
  border-radius:999px;
  font-size:15px;
  font-weight:700;
  letter-spacing:0.01em;
  text-decoration:none;
  font-family:'Helvetica Neue',Arial,sans-serif;
  transition:transform .2s ease,box-shadow .2s ease;
  box-shadow:0 10px 30px rgba(143,227,136,0.25);
}

.hero_button_ghost {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:rgba(244,248,242,0.04);
  color:#f4f8f2;
  padding:16px 32px;
  border-radius:999px;
  font-size:15px;
  font-weight:600;
  letter-spacing:0.01em;
  text-decoration:none;
  border:1px solid rgba(143,227,136,0.45);
  font-family:'Helvetica Neue',Arial,sans-serif;
  transition:background .2s ease,border-color .2s ease;
}

.hero_proof {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:40px;
  margin-top:56px;
  padding-top:32px;
  border-top:1px solid rgba(244,248,242,0.12);
}

.hero_stat {
  display:flex;
  flex-direction:column;
  gap:4px;
}

.hero_stat_num {
  margin:0;
  color:#f4f8f2;
  font-size:28px;
  font-weight:300;
  font-family:Georgia,serif;
}

.hero_stat_label {
  margin:0;
  color:#9db6a2;
  font-size:12px;
  letter-spacing:0.04em;
  font-family:'Helvetica Neue',Arial,sans-serif;
}
</style>