Service List 02

<!-- Paste markup into an Embed, or recreate as native elements.
     Styles below map 1:1 to the class names above. -->
<section class="services_component">
  <div class="services_glow"></div>
  <div class="services_inner">
    <div class="services_head">
      <div class="services_headtext">
        <p class="services_eyebrow">What we cultivate</p>
        <h2 class="services_title">Services grown with intention</h2>
      </div>
      <p class="services_lede">A regenerative practice for brands that want to move slower, root deeper, and last longer.</p>
    </div>
    <ul class="services_list">
      <li class="services_row">
        <p class="services_num">01</p>
        <h3 class="services_name">Brand Ecology & Strategy</h3>
        <p class="services_desc">Mapping the whole system — audience, values, and habitat — before a single leaf is designed.</p>
      </li>
      <li class="services_row">
        <p class="services_num">02</p>
        <h3 class="services_name">Visual Identity Systems</h3>
        <p class="services_desc">Marks, palettes, and type that feel grown rather than assembled — calm, tactile, enduring.</p>
      </li>
      <li class="services_row">
        <p class="services_num">03</p>
        <h3 class="services_name">Digital Habitats</h3>
        <p class="services_desc">Websites and products built to breathe — fast, accessible, and quietly beautiful across every screen.</p>
      </li>
      <li class="services_row">
        <p class="services_num">04</p>
        <h3 class="services_name">Packaging & Sustainable Print</h3>
        <p class="services_desc">Compostable, recycled, and refillable formats designed to look premium and leave no trace.</p>
      </li>
    </ul>
    <div class="services_footer">
      <img class="services_image" src="https://pub-8060008fc1ab494c98adf87ab62286c4.r2.dev/assets/inspiration/section-service-list-forest-organic-2-1-12.webp" alt="Sunlight filtering through green ferns" />
      <a class="services_cta" href="#contact">Plant something with us →</a>
    </div>
  </div>
</section>

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

.services_glow {
  pointer-events:none;
  position:absolute;
  top:-200px;
  right:-160px;
  width:520px;
  height:520px;
  border-radius:50%;
  background:radial-gradient(circle,#8fe388 0%,rgba(143,227,136,0) 70%);
  filter:blur(120px);
  opacity:0.35;
  z-index:0;
}

.services_inner {
  position:relative;
  z-index:10;
  margin:0 auto;
  max-width:1200px;
  width:100%;
}

.services_head {
  display:flex;
  flex-direction:column;
  gap:28px;
  margin-bottom:72px;
  align-items:flex-start;
}

.services_headtext {
  max-width:640px;
}

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

.services_title {
  margin:0;
  color:#f3f6ee;
  font-weight:400;
  font-size:clamp(38px,5vw,68px);
  line-height:1.05;
  letter-spacing:-0.02em;
}

.services_lede {
  margin:0;
  max-width:340px;
  font-family:'Helvetica Neue',Arial,sans-serif;
  font-size:16px;
  line-height:1.7;
  color:#a9c3b5;
}

.services_list {
  list-style:none;
  margin:0;
  padding:0;
  border-top:1px solid #1c3b32;
}

.services_row {
  display:grid;
  grid-template-columns:90px 1fr auto;
  column-gap:32px;
  row-gap:10px;
  align-items:baseline;
  padding:36px 20px;
  border-bottom:1px solid #1c3b32;
  transition:background-color 0.35s ease,padding 0.35s ease;
}

.services_num {
  margin:0;
  font-family:'Helvetica Neue',Arial,sans-serif;
  font-size:15px;
  color:#8fe388;
  letter-spacing:0.1em;
  font-weight:600;
}

.services_name {
  margin:0;
  color:#f3f6ee;
  font-weight:400;
  font-size:clamp(26px,3.4vw,42px);
  line-height:1.1;
  letter-spacing:-0.01em;
}

.services_desc {
  margin:0;
  max-width:380px;
  font-family:'Helvetica Neue',Arial,sans-serif;
  font-size:15px;
  line-height:1.65;
  color:#a9c3b5;
  text-align:left;
  grid-column:2;
}

.services_footer {
  margin-top:64px;
  display:flex;
  flex-direction:column;
  gap:32px;
  align-items:flex-start;
}

.services_image {
  width:300px;
  max-width:100%;
  height:180px;
  object-fit:cover;
  border-radius:18px;
  border:1px solid #1c3b32;
}

.services_cta {
  display:inline-flex;
  align-items:center;
  gap:12px;
  background-color:#8fe388;
  color:#07221d;
  font-family:'Helvetica Neue',Arial,sans-serif;
  font-size:15px;
  font-weight:600;
  text-decoration:none;
  padding:18px 34px;
  border-radius:999px;
  transition:transform 0.3s ease,background-color 0.3s ease;
}
</style>