Stats Band 03

<!-- Paste markup into an Embed, or recreate as native elements.
     Styles below map 1:1 to the class names above. -->
<section class="statsband_component">
  <div class="statsband_head">
    <p class="statsband_eyebrow">04° / FIGURES / EST. 2011</p>
    <h2 class="statsband_title">The numbers behind a decade of quiet, deliberate work.</h2>
  </div>
  <ul class="statsband_grid">
    <li class="statsband_item">
      <p class="statsband_index">(01)</p>
      <p class="statsband_number">248</p>
      <p class="statsband_label">Projects shipped for brands across four continents</p>
    </li>
    <li class="statsband_item">
      <p class="statsband_index">(02)</p>
      <p class="statsband_number">14</p>
      <p class="statsband_label">Years refining a single, opinionated craft</p>
    </li>
    <li class="statsband_item">
      <p class="statsband_index">(03)</p>
      <p class="statsband_number">96%</p>
      <p class="statsband_label">Of clients return for a second engagement</p>
    </li>
    <li class="statsband_item">
      <p class="statsband_index">(04)</p>
      <p class="statsband_number">07</p>
      <p class="statsband_label">Industry honours for design and editorial direction</p>
    </li>
  </ul>
</section>

<style>
.statsband_component {
  background-color:#f5f4f0;
  width:100%;
  padding:100px 6vw;
  box-sizing:border-box;
  font-family:Helvetica,Arial,sans-serif;
  color:#3a2c22;
}

.statsband_head {
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:24px;
  border-bottom:1px solid rgba(58,44,34,0.2);
  padding-bottom:32px;
  margin-bottom:64px;
  flex-wrap:wrap;
}

.statsband_eyebrow {
  font-family:'Courier New',monospace;
  font-size:12px;
  letter-spacing:0.28em;
  text-transform:uppercase;
  color:#c0392b;
  margin:0;
}

.statsband_title {
  color:#3a2c22;
  font-size:clamp(28px,4vw,48px);
  font-weight:700;
  line-height:1.02;
  letter-spacing:-0.02em;
  margin:0;
  max-width:520px;
}

.statsband_grid {
  list-style:none;
  padding:0;
  margin:0;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:56px 40px;
}

.statsband_item {
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  border-left:1px solid rgba(58,44,34,0.15);
  padding-left:24px;
}

.statsband_index {
  font-family:'Courier New',monospace;
  font-size:11px;
  letter-spacing:0.2em;
  color:#c0392b;
  margin:0 0 16px 0;
}

.statsband_number {
  color:#3a2c22;
  font-size:clamp(56px,7vw,88px);
  font-weight:700;
  line-height:0.9;
  letter-spacing:-0.04em;
  margin:0;
}

.statsband_label {
  color:rgba(58,44,34,0.65);
  font-size:14px;
  line-height:1.4;
  margin:16px 0 0 0;
  max-width:180px;
}
</style>