<!-- Paste markup into an Embed, or recreate as native elements.
     Styles below map 1:1 to the class names above. -->
<section class="hero_component">
  <div class="hero_glow"></div>
  <div class="hero_layout">
    <div class="hero_copy">
      <div class="hero_eyebrow">
        <div class="hero_dot"></div>
        <p class="hero_meta">Regenerative Brand Studio · Est. 2014</p>
      </div>
      <h1 class="hero_title">
        <span class="hero_title_accent">Growth </span>
        <span class="hero_title_rest">that stays rooted in what your brand actually stands for.</span>
      </h1>
      <p class="hero_sub">We build sustainable brand systems, calm interfaces, and campaigns that compound — for wellness, climate, and premium teams who plan in decades, not quarters.</p>
      <div class="hero_actions">
        <a class="hero_button_primary" href="#start">Start a project</a>
        <a class="hero_button_ghost" href="#work">See our work</a>
      </div>
      <div class="hero_proof">
        <p class="hero_proof_stat">120+ brands grown</p>
        <p class="hero_proof_note">B-Corp partners across 3 continents, retained an average of 4.5 years.</p>
      </div>
    </div>
    <div class="hero_visual">
      <img class="hero_image" src="https://pub-8060008fc1ab494c98adf87ab62286c4.r2.dev/assets/inspiration/hero-forest-organic-agency-47-1-12.webp" alt="Aerial view of a misty evergreen forest at sunrise" />
      <div class="hero_badge">
        <p class="hero_badge_label">Now booking</p>
        <p class="hero_badge_value">Q4 2026 · 2 slots left</p>
      </div>
    </div>
  </div>
</section>

<style>
.hero_component {
  position:relative;
  width:100%;
  background-color:#07221d;
  overflow:hidden;
  padding:7rem 6vw;
  box-sizing:border-box;
  font-family:Georgia,'Times New Roman',serif;
}

.hero_glow {
  pointer-events:none;
  position:absolute;
  top:-10rem;
  right:-8rem;
  width:34rem;
  height:34rem;
  border-radius:9999px;
  background:radial-gradient(circle,#8fe388 0%,rgba(143,227,136,0) 70%);
  filter:blur(120px);
  opacity:0.4;
}

.hero_layout {
  position:relative;
  z-index:10;
  display:grid;
  grid-template-columns:1.05fr 0.95fr;
  gap:4rem;
  align-items:center;
  max-width:1240px;
  margin:0 auto;
}

.hero_copy {
  display:flex;
  flex-direction:column;
  align-items:flex-start;
}

.hero_eyebrow {
  display:inline-flex;
  align-items:center;
  gap:0.6rem;
  margin-bottom:1.8rem;
  padding:0.5rem 1rem;
  border:1px solid #1c463c;
  border-radius:9999px;
  background-color:rgba(143,227,136,0.06);
}

.hero_dot {
  width:0.5rem;
  height:0.5rem;
  border-radius:9999px;
  background-color:#8fe388;
}

.hero_meta {
  margin:0;
  font-family:'Helvetica Neue',Arial,sans-serif;
  font-size:0.72rem;
  letter-spacing:0.22em;
  text-transform:uppercase;
  color:#8fe388;
  font-weight:600;
}

.hero_title {
  margin:0 0 1.6rem 0;
  font-family:Georgia,'Times New Roman',serif;
  font-size:clamp(2.6rem,5.4vw,4.6rem);
  line-height:1.04;
  font-weight:400;
  letter-spacing:-0.01em;
  color:#f3f6f0;
}

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

.hero_sub {
  margin:0 0 2.6rem 0;
  font-family:'Helvetica Neue',Arial,sans-serif;
  font-size:1.12rem;
  line-height:1.7;
  color:#b6c7be;
  max-width:34rem;
}

.hero_actions {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:1rem;
}

.hero_button_primary {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:1rem 2rem;
  border-radius:9999px;
  background-color:#8fe388;
  color:#07221d;
  font-family:'Helvetica Neue',Arial,sans-serif;
  font-size:0.95rem;
  font-weight:600;
  text-decoration:none;
  transition:transform 0.2s ease,background-color 0.2s ease;
}

.hero_button_ghost {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:1rem 2rem;
  border-radius:9999px;
  border:1px solid #2c5548;
  background-color:transparent;
  color:#e7efe6;
  font-family:'Helvetica Neue',Arial,sans-serif;
  font-size:0.95rem;
  font-weight:500;
  text-decoration:none;
  transition:border-color 0.2s ease,color 0.2s ease;
}

.hero_proof {
  display:flex;
  align-items:center;
  gap:1.4rem;
  margin-top:3rem;
  padding-top:1.8rem;
  border-top:1px solid #173a31;
}

.hero_proof_stat {
  margin:0;
  font-family:Georgia,'Times New Roman',serif;
  font-size:1.4rem;
  color:#f3f6f0;
}

.hero_proof_note {
  margin:0;
  font-family:'Helvetica Neue',Arial,sans-serif;
  font-size:0.85rem;
  color:#7d968b;
  line-height:1.5;
}

.hero_visual {
  position:relative;
}

.hero_image {
  display:block;
  width:100%;
  height:34rem;
  object-fit:cover;
  border-radius:2rem;
  border:1px solid #1c463c;
}

.hero_badge {
  position:absolute;
  bottom:1.6rem;
  left:1.6rem;
  display:flex;
  flex-direction:column;
  gap:0.3rem;
  padding:1.1rem 1.4rem;
  border-radius:1.2rem;
  background-color:rgba(7,34,29,0.9);
  border:1px solid #2c5548;
  backdrop-filter:blur(8px);
}

.hero_badge_label {
  margin:0;
  font-family:'Helvetica Neue',Arial,sans-serif;
  font-size:0.68rem;
  letter-spacing:0.2em;
  text-transform:uppercase;
  color:#8fe388;
  font-weight:600;
}

.hero_badge_value {
  margin:0;
  font-family:'Helvetica Neue',Arial,sans-serif;
  font-size:1.05rem;
  color:#f3f6f0;
}
</style>