Service List 04

<!-- 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_inner">
    <div class="services_header">
      <div class="services_eyebrow">What we do</div>
      <h2 class="services_title">Services that actually move the needle.</h2>
      <p class="services_sub">Pick what your team needs today. Every engagement is scoped, senior-led, and shipped without the agency fluff.</p>
    </div>
    <ul class="services_list">
      <li class="services_row">
        <div class="services_num">01</div>
        <div class="services_body">
          <h3 class="services_name">Brand & Identity Sprints</h3>
          <p class="services_desc">A two-week deep dive into voice, logo system, and colour so your startup finally looks like it means business.</p>
        </div>
        <a class="services_arrow" href="#">→</a>
      </li>
      <li class="services_row">
        <div class="services_num">02</div>
        <div class="services_body">
          <h3 class="services_name">Product UI Design</h3>
          <p class="services_desc">Screens, flows, and a tidy component library your engineers will thank you for. Handoff-ready in Figma.</p>
        </div>
        <a class="services_arrow" href="#">→</a>
      </li>
      <li class="services_row">
        <div class="services_num">03</div>
        <div class="services_body">
          <h3 class="services_name">Webflow Build & Launch</h3>
          <p class="services_desc">We turn the design into a fast, editable site you can update yourself — CMS, animations, and SEO baked in.</p>
        </div>
        <a class="services_arrow" href="#">→</a>
      </li>
      <li class="services_row">
        <div class="services_num">04</div>
        <div class="services_body">
          <h3 class="services_name">Growth Retainers</h3>
          <p class="services_desc">An always-on design partner for landing pages, tests, and campaigns — no re-hiring, no ramp-up time.</p>
        </div>
        <a class="services_arrow" href="#">→</a>
      </li>
    </ul>
  </div>
</section>

<style>
.services_component {
  width:100%;
  background:#fdf8f0;
  padding:100px 24px;
  font-family:'Helvetica Neue',Arial,sans-serif;
  box-sizing:border-box;
}

.services_inner {
  max-width:1120px;
  margin:0 auto;
}

.services_header {
  display:flex;
  flex-direction:column;
  gap:20px;
  margin-bottom:64px;
  max-width:640px;
}

.services_eyebrow {
  display:inline-flex;
  align-items:center;
  align-self:flex-start;
  background:#ff5a5f;
  color:#ffffff;
  font-size:13px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:0.08em;
  border-radius:999px;
  padding:8px 16px;
}

.services_title {
  color:#1a1a1a;
  font-size:52px;
  line-height:1.02;
  font-weight:800;
  letter-spacing:-0.02em;
  margin:0;
}

.services_sub {
  color:#5c574f;
  font-size:18px;
  line-height:1.5;
  margin:0;
}

.services_list {
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
}

.services_row {
  display:flex;
  align-items:center;
  gap:32px;
  padding:36px 0;
  border-top:2px solid #e7ded0;
  transition:all 0.2s ease;
  cursor:pointer;
}

.services_num {
  color:#ff5a5f;
  font-size:22px;
  font-weight:800;
  width:52px;
  flex-shrink:0;
}

.services_body {
  display:flex;
  flex-direction:column;
  gap:8px;
  flex:1;
}

.services_name {
  color:#1a1a1a;
  font-size:28px;
  font-weight:700;
  margin:0;
}

.services_desc {
  color:#5c574f;
  font-size:16px;
  line-height:1.5;
  margin:0;
  max-width:560px;
}

.services_arrow {
  display:flex;
  align-items:center;
  justify-content:center;
  width:56px;
  height:56px;
  border-radius:999px;
  border:2px solid #1a1a1a;
  color:#1a1a1a;
  font-size:22px;
  font-weight:700;
  text-decoration:none;
  flex-shrink:0;
  transition:all 0.2s ease;
}
</style>