Service List 03

<!-- 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_head">
      <div class="services_headleft">
        <p class="services_eyebrow">The Atelier — Services</p>
        <h2 class="services_title">
          <span class="services_title_em">considered</span>
        </h2>
      </div>
      <p class="services_lede">Five disciplines, one standard. Each engagement is a slow collaboration — measured, material, and made to outlast the season it was conceived in.</p>
    </div>
    <ul class="services_list">
      <li class="services_row">
        <p class="services_num">01</p>
        <h3 class="services_name">Brand Identity</h3>
        <p class="services_desc">Marks, wordmarks and full visual systems built to age gracefully — typography, palette and the quiet rules that hold it all together.</p>
        <a class="services_link" href="#">Explore</a>
      </li>
      <li class="services_row">
        <p class="services_num">02</p>
        <h3 class="services_name">Art Direction</h3>
        <p class="services_desc">Campaign concepting and image-making — from set and styling to the final grade — so every frame speaks in a single, deliberate voice.</p>
        <a class="services_link" href="#">Explore</a>
      </li>
      <li class="services_row">
        <p class="services_num">03</p>
        <h3 class="services_name">Editorial & Print</h3>
        <p class="services_desc">Lookbooks, monographs and packaging — specified to the paper stock, the ink and the fold, then shepherded through the press.</p>
        <a class="services_link" href="#">Explore</a>
      </li>
      <li class="services_row">
        <p class="services_num">04</p>
        <h3 class="services_name">Digital Craft</h3>
        <p class="services_desc">Boutique sites and commerce experiences that carry the same restraint online — unhurried motion, honest imagery, no noise.</p>
        <a class="services_link" href="#">Explore</a>
      </li>
      <li class="services_row">
        <p class="services_num">05</p>
        <h3 class="services_name">Brand Stewardship</h3>
        <p class="services_desc">An ongoing retainer for houses that value continuity — guardianship of the system, guidelines and every touchpoint over time.</p>
        <a class="services_link" href="#">Explore</a>
      </li>
    </ul>
  </div>
</section>

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

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

.services_head {
  display:grid;
  grid-template-columns:1fr 0.9fr;
  gap:48px;
  align-items:end;
  padding-bottom:64px;
  border-bottom:1px solid #e4ddd0;
}

.services_headleft {
  display:flex;
  flex-direction:column;
  gap:24px;
}

.services_eyebrow {
  font-family:'Helvetica Neue',Arial,sans-serif;
  font-size:11px;
  letter-spacing:0.28em;
  text-transform:uppercase;
  color:#a67c52;
  margin:0;
}

.services_title {
  font-family:Georgia,'Times New Roman',serif;
  font-size:clamp(38px,5vw,68px);
  line-height:1.02;
  color:#1c1a17;
  font-weight:400;
  margin:0;
}

.services_title_em {
  font-style:italic;
  color:#a67c52;
}

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

.services_list {
  list-style:none;
  padding:0;
  margin:16px 0 0 0;
}

.services_row {
  display:grid;
  grid-template-columns:90px 1.1fr 1.6fr auto;
  gap:28px;
  align-items:baseline;
  padding:44px 0;
  border-bottom:1px solid #e4ddd0;
}

.services_num {
  font-family:'Helvetica Neue',Arial,sans-serif;
  font-size:15px;
  letter-spacing:0.2em;
  color:#a67c52;
  margin:0;
}

.services_name {
  font-family:Georgia,'Times New Roman',serif;
  font-size:clamp(24px,2.6vw,32px);
  line-height:1.1;
  color:#1c1a17;
  font-weight:400;
  margin:0;
}

.services_desc {
  font-family:'Helvetica Neue',Arial,sans-serif;
  font-size:15px;
  line-height:1.75;
  color:#5c554a;
  margin:0;
}

.services_link {
  font-family:'Helvetica Neue',Arial,sans-serif;
  font-size:12px;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:#1c1a17;
  text-decoration:none;
  border-bottom:1px solid #a67c52;
  padding-bottom:4px;
  white-space:nowrap;
}
</style>