Features Grid 03

<!-- Paste markup into an Embed, or recreate as native elements.
     Styles below map 1:1 to the class names above. -->
<section class="features_component">
  <div class="features_inner">
    <div class="features_header">
      <p class="features_eyebrow">004° / CAPABILITIES / © 2026 — PAGE 01</p>
      <h2 class="features_heading">
        <span class="features_heading_accent">Built for studios </span>
        <span class="features_heading_rest">that ship work worth arguing about.</span>
      </h2>
    </div>
    <div class="features_grid">
      <div class="features_card">
        <p class="features_card_meta">( 01 ) — DELIVERY</p>
        <div class="features_card_icon"></div>
        <div class="features_card_numeral">01</div>
        <h3 class="features_card_title">Same-week turnarounds</h3>
        <p class="features_card_desc">Tight sprints, no bloated retainers. You brief on Monday, you review real screens by Thursday — every cycle, on the record.</p>
      </div>
      <div class="features_card">
        <p class="features_card_meta">( 02 ) — CRAFT</p>
        <div class="features_card_icon"></div>
        <div class="features_card_numeral">02</div>
        <h3 class="features_card_title">Pixel-obsessed systems</h3>
        <p class="features_card_desc">Every component is a token, every token is documented. Hand it to your engineers and nothing gets lost in translation.</p>
      </div>
      <div class="features_card">
        <p class="features_card_meta">( 03 ) — PARTNERSHIP</p>
        <div class="features_card_icon"></div>
        <div class="features_card_numeral">03</div>
        <h3 class="features_card_title">One team, one Slack</h3>
        <p class="features_card_desc">No account managers relaying messages. You talk directly to the designers holding the pen — decisions land in minutes, not meetings.</p>
      </div>
    </div>
    <div class="features_footer">
      <p class="features_footer_note">12 capabilities in the full deck</p>
      <a class="features_footer_link" href="#capabilities">See the whole system →</a>
    </div>
  </div>
</section>

<style>
.features_component {
  background:#141414;
  color:#eae8e4;
  padding:120px 6vw;
  font-family:'Helvetica Neue',Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}

.features_inner {
  max-width:1360px;
  margin:0 auto;
}

.features_header {
  display:flex;
  flex-direction:column;
  gap:28px;
  border-top:1px solid #2c2c2c;
  padding-top:32px;
  margin-bottom:72px;
}

.features_eyebrow {
  font-size:12px;
  letter-spacing:0.28em;
  text-transform:uppercase;
  color:#8a8781;
  font-weight:600;
  margin:0;
}

.features_heading {
  font-size:clamp(40px,6vw,88px);
  line-height:0.98;
  font-weight:800;
  letter-spacing:-0.03em;
  max-width:18ch;
  margin:0;
  color:#eae8e4;
}

.features_heading_accent {
  color:#e63b2e;
}

.features_heading_rest {
  color:#eae8e4;
}

.features_grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1px;
  background:#2c2c2c;
  border:1px solid #2c2c2c;
}

.features_card {
  background:#141414;
  padding:48px 40px 40px;
  display:flex;
  flex-direction:column;
  gap:24px;
  min-height:380px;
  position:relative;
  transition:background 0.25s ease;
}

.features_card_meta {
  font-size:11px;
  letter-spacing:0.24em;
  text-transform:uppercase;
  color:#8a8781;
  font-weight:600;
  margin:0;
}

.features_card_icon {
  width:44px;
  height:44px;
  border:2px solid #e63b2e;
  transform:rotate(45deg);
  border-radius:2px;
}

.features_card_numeral {
  font-size:clamp(56px,6vw,96px);
  line-height:1;
  font-weight:800;
  letter-spacing:-0.04em;
  color:#e63b2e;
}

.features_card_title {
  font-size:24px;
  line-height:1.1;
  font-weight:700;
  letter-spacing:-0.01em;
  margin:0;
  color:#eae8e4;
}

.features_card_desc {
  font-size:15px;
  line-height:1.6;
  color:#a9a6a0;
  margin:0;
  max-width:34ch;
}

.features_footer {
  display:flex;
  justify-content:space-between;
  align-items:center;
  border-top:1px solid #2c2c2c;
  margin-top:64px;
  padding-top:28px;
}

.features_footer_note {
  font-size:12px;
  letter-spacing:0.2em;
  text-transform:uppercase;
  color:#8a8781;
  margin:0;
}

.features_footer_link {
  font-size:13px;
  letter-spacing:0.14em;
  text-transform:uppercase;
  font-weight:600;
  color:#eae8e4;
  text-decoration:none;
  border-bottom:2px solid #e63b2e;
  padding-bottom:4px;
}
</style>