Timeline 02

<!-- Paste markup into an Embed, or recreate as native elements.
     Styles below map 1:1 to the class names above. -->
<section class="timeline_component">
  <div class="timeline_head">
    <div class="timeline_headtext">
      <p class="timeline_eyebrow">THE PROCESS / EST. 04</p>
      <h2 class="timeline_title">How we take you from blank page to launch</h2>
    </div>
    <p class="timeline_lede">Four deliberate stages. No sprawling kickoffs, no mystery phases — every step ships something you can see.</p>
  </div>
  <ul class="timeline_row">
    <li class="timeline_card">
      <p class="timeline_num">01</p>
      <h3 class="timeline_step">Discovery</h3>
      <p class="timeline_desc">We map goals, audience and constraints in one focused workshop.</p>
      <p class="timeline_meta">WEEK 01 / (c)</p>
    </li>
    <li class="timeline_card">
      <p class="timeline_num">02</p>
      <h3 class="timeline_step">Direction</h3>
      <p class="timeline_desc">Two art directions, real content, one clear recommendation.</p>
      <p class="timeline_meta">WEEK 02 / 12°</p>
    </li>
    <li class="timeline_card">
      <p class="timeline_num">03</p>
      <h3 class="timeline_step">Build</h3>
      <p class="timeline_desc">Design becomes a fast, responsive site with weekly previews.</p>
      <p class="timeline_meta">WEEK 03–05 / (c)</p>
    </li>
    <li class="timeline_card">
      <p class="timeline_numlast">04</p>
      <h3 class="timeline_steplast">Launch</h3>
      <p class="timeline_desclast">We ship, monitor, and hand over a site you can run yourself.</p>
      <p class="timeline_metalast">WEEK 06 / GO LIVE</p>
    </li>
  </ul>
  <div class="timeline_rule"></div>
  <div class="timeline_foot">
    <p class="timeline_footmeta">AVG. TIMELINE — 6 WEEKS / FIXED SCOPE</p>
    <a class="timeline_link" href="#start">Start your project →</a>
  </div>
</section>

<style>
.timeline_component {
  background-color:#f5f4f0;
  width:100%;
  padding:7rem 6vw;
  box-sizing:border-box;
  font-family:Georgia,'Times New Roman',serif;
  color:#3a2c22;
}

.timeline_head {
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:2rem;
  margin-bottom:3.5rem;
  flex-wrap:wrap;
}

.timeline_headtext {
  max-width:38rem;
}

.timeline_eyebrow {
  font-family:'SFMono-Regular',Consolas,'Liberation Mono',Menlo,monospace;
  font-size:0.72rem;
  letter-spacing:0.28em;
  text-transform:uppercase;
  color:#c0392b;
  margin:0 0 1rem 0;
}

.timeline_title {
  font-family:'Helvetica Neue',Arial,sans-serif;
  font-size:clamp(2.6rem,6vw,4.6rem);
  font-weight:800;
  line-height:0.95;
  letter-spacing:-0.02em;
  margin:0;
  color:#3a2c22;
}

.timeline_lede {
  max-width:22rem;
  font-size:1.02rem;
  line-height:1.55;
  color:#6b5d51;
  margin:0;
  font-family:Georgia,serif;
}

.timeline_row {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:1.5rem;
  list-style:none;
  padding:0 0 2rem 0;
  margin:0;
}

.timeline_card {
  background-color:#efece5;
  border-radius:14px;
  padding:1.75rem;
  display:flex;
  flex-direction:column;
  min-height:13rem;
  border:1px solid #e2ddd2;
  box-sizing:border-box;
}

.timeline_num {
  font-family:'Helvetica Neue',Arial,sans-serif;
  font-size:2.4rem;
  font-weight:800;
  line-height:1;
  color:#c0392b;
  margin:0;
}

.timeline_step {
  font-family:'Helvetica Neue',Arial,sans-serif;
  font-size:1.35rem;
  font-weight:700;
  letter-spacing:-0.01em;
  margin:1.25rem 0 0.5rem 0;
  color:#3a2c22;
}

.timeline_desc {
  font-size:0.95rem;
  line-height:1.5;
  color:#6b5d51;
  margin:0;
  font-family:Georgia,serif;
  flex:1;
}

.timeline_meta {
  font-family:'SFMono-Regular',Consolas,Menlo,monospace;
  font-size:0.68rem;
  letter-spacing:0.2em;
  text-transform:uppercase;
  color:#a89a8c;
  margin:1.5rem 0 0 0;
}

.timeline_numlast {
  font-family:'Helvetica Neue',Arial,sans-serif;
  font-size:2.4rem;
  font-weight:800;
  line-height:1;
  color:#f5f4f0;
  margin:0;
}

.timeline_steplast {
  font-family:'Helvetica Neue',Arial,sans-serif;
  font-size:1.35rem;
  font-weight:700;
  letter-spacing:-0.01em;
  margin:1.25rem 0 0.5rem 0;
  color:#f5f4f0;
}

.timeline_desclast {
  font-size:0.95rem;
  line-height:1.5;
  color:#c9bdaf;
  margin:0;
  font-family:Georgia,serif;
  flex:1;
}

.timeline_metalast {
  font-family:'SFMono-Regular',Consolas,Menlo,monospace;
  font-size:0.68rem;
  letter-spacing:0.2em;
  text-transform:uppercase;
  color:#c0392b;
  margin:1.5rem 0 0 0;
}

.timeline_rule {
  width:100%;
  height:1px;
  background-color:#d8d2c6;
  border:0;
}

.timeline_foot {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  margin-top:1.25rem;
  flex-wrap:wrap;
}

.timeline_footmeta {
  font-family:'SFMono-Regular',Consolas,Menlo,monospace;
  font-size:0.7rem;
  letter-spacing:0.24em;
  text-transform:uppercase;
  color:#a89a8c;
  margin:0;
}

.timeline_link {
  font-family:'SFMono-Regular',Consolas,Menlo,monospace;
  font-size:0.72rem;
  letter-spacing:0.2em;
  text-transform:uppercase;
  color:#c0392b;
  text-decoration:none;
  border-bottom:1px solid #c0392b;
  padding-bottom:4px;
}
</style>