Testimonial 01

<!-- Paste markup into an Embed, or recreate as native elements.
     Styles below map 1:1 to the class names above. -->
<section class="testimonial_component">
  <div class="testimonial_topbar">
    <p class="testimonial_kicker">Client Voices — (c) 2026</p>
    <p class="testimonial_page">PAGE 04 / 12</p>
  </div>
  <div class="testimonial_grid">
    <div class="testimonial_main">
      <div class="testimonial_index">01°</div>
      <h2 class="testimonial_quote">
        <span class="testimonial_quote_accent">They rebuilt how people feel using it.</span>
      </h2>
      <div class="testimonial_author">
        <img class="testimonial_avatar" src="https://pub-8060008fc1ab494c98adf87ab62286c4.r2.dev/assets/inspiration/section-testimonial-deck-editorial-1-1-12.webp" alt="Portrait of Mara Voss" />
        <div class="testimonial_author_meta">
          <p class="testimonial_name">Mara Voss</p>
          <p class="testimonial_role">Founder & CEO, Northbeam</p>
        </div>
      </div>
    </div>
    <div class="testimonial_card">
      <div class="testimonial_card_top">
        <p class="testimonial_card_label">Rated</p>
        <p class="testimonial_card_deg">360°</p>
      </div>
      <div class="testimonial_score">
        <p class="testimonial_score_num">5.0</p>
        <p class="testimonial_score_stars">★★★★★</p>
      </div>
      <p class="testimonial_card_note">Average score across 48 verified engagements — measured on delivery, craft and outcomes.</p>
    </div>
  </div>
</section>

<style>
.testimonial_component {
  position:relative;
  background:#eae8e4;
  color:#141414;
  padding:120px 6vw;
  overflow:hidden;
  font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;
}

.testimonial_topbar {
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-top:1px solid #141414;
  padding-top:14px;
  margin-bottom:80px;
}

.testimonial_kicker {
  font-size:12px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:0.28em;
  margin:0;
}

.testimonial_page {
  font-size:12px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:0.28em;
  margin:0;
  color:#e63b2e;
}

.testimonial_grid {
  display:grid;
  grid-template-columns:1fr;
  gap:64px;
  align-items:start;
}

.testimonial_main {
  position:relative;
}

.testimonial_index {
  font-weight:800;
  line-height:0.82;
  letter-spacing:-0.04em;
  color:#e63b2e;
  font-size:120px;
  margin-bottom:24px;
}

.testimonial_quote {
  font-weight:800;
  line-height:1.02;
  letter-spacing:-0.02em;
  font-size:clamp(34px,5vw,68px);
  margin:0;
  max-width:20ch;
}

.testimonial_quote_accent {
  color:#e63b2e;
}

.testimonial_author {
  display:flex;
  align-items:center;
  gap:18px;
  margin-top:56px;
  border-top:1px solid #141414;
  padding-top:24px;
}

.testimonial_avatar {
  width:64px;
  height:64px;
  object-fit:cover;
  border-radius:2px;
  filter:grayscale(1);
}

.testimonial_author_meta {
  display:flex;
  flex-direction:column;
}

.testimonial_name {
  font-size:18px;
  font-weight:700;
  margin:0;
  letter-spacing:-0.01em;
}

.testimonial_role {
  font-size:13px;
  text-transform:uppercase;
  letter-spacing:0.18em;
  margin:4px 0 0;
  color:#565248;
}

.testimonial_card {
  background:#141414;
  color:#eae8e4;
  padding:36px;
  border-radius:3px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  min-height:320px;
}

.testimonial_card_top {
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
}

.testimonial_card_label {
  font-size:11px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:0.28em;
  margin:0;
  color:#eae8e4;
}

.testimonial_card_deg {
  font-size:11px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:0.28em;
  margin:0;
  color:#e63b2e;
}

.testimonial_score {
  display:flex;
  align-items:flex-end;
  gap:10px;
}

.testimonial_score_num {
  font-weight:800;
  line-height:0.8;
  letter-spacing:-0.04em;
  color:#eae8e4;
  font-size:128px;
  margin:0;
}

.testimonial_score_stars {
  color:#e63b2e;
  font-size:22px;
  line-height:1;
  margin:0;
  padding-bottom:14px;
}

.testimonial_card_note {
  font-size:14px;
  line-height:1.5;
  margin:0;
  color:#a8a49c;
  border-top:1px solid #333029;
  padding-top:20px;
}
</style>