<!-- Paste markup into an Embed, or recreate as native elements.
     Styles below map 1:1 to the class names above. -->
<section class="hero_component">
  <nav class="hero_meta">
    <p class="hero_meta_left">◦ Meridian Studio — Est. 2014</p>
    <p class="hero_meta_right">48°N / 11°E © Vol.09</p>
  </nav>
  <div class="hero_grid">
    <div class="hero_lead">
      <div class="hero_lead_top">
        <p class="hero_eyebrow">Strategy · Brand · Growth</p>
        <h1 class="hero_title">
          <span class="hero_title_accent"> headline.</span>
        </h1>
        <p class="hero_sub">A senior studio for founders who want fewer decks and more traction — positioning, identity, and go-to-market shipped in six-week sprints.</p>
      </div>
      <div class="hero_actions">
        <a class="hero_button_primary" href="#book">Book a discovery call →</a>
        <a class="hero_button_ghost" href="#work">View selected work</a>
      </div>
    </div>
    <div class="hero_side">
      <div class="hero_visual">
        <p class="hero_visual_tag">Fig.01 — Studio floor</p>
      </div>
      <ul class="hero_stats">
        <li class="hero_stat_card">
          <p class="hero_stat_num">120+</p>
          <p class="hero_stat_label">Brands shipped</p>
        </li>
        <li class="hero_stat_card">
          <p class="hero_stat_num_alt">6 wk</p>
          <p class="hero_stat_label_alt">Avg sprint</p>
        </li>
      </ul>
    </div>
  </div>
</section>

<style>
.hero_component {
  position:relative;
  width:100%;
  background:#f5f4f0;
  padding:7rem 6vw;
  box-sizing:border-box;
  font-family:Helvetica,Arial,sans-serif;
  color:#3a2c22;
  overflow:hidden;
}

.hero_meta {
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:3.5rem;
  font-family:'Courier New',monospace;
  font-size:0.72rem;
  letter-spacing:0.22em;
  text-transform:uppercase;
  color:#3a2c22;
  border-bottom:1px solid rgba(58,44,34,0.18);
  padding-bottom:1.1rem;
}

.hero_meta_left {
  margin:0;
  font-family:'Courier New',monospace;
}

.hero_meta_right {
  margin:0;
  color:#c0392b;
  font-family:'Courier New',monospace;
}

.hero_grid {
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:1.5rem;
  align-items:stretch;
}

.hero_lead {
  grid-column:span 8;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  gap:2.25rem;
}

.hero_lead_top {
  display:flex;
  flex-direction:column;
  gap:1.75rem;
}

.hero_eyebrow {
  margin:0;
  width:fit-content;
  font-family:'Courier New',monospace;
  font-size:0.7rem;
  letter-spacing:0.28em;
  text-transform:uppercase;
  color:#c0392b;
  border:1px solid #c0392b;
  border-radius:999px;
  padding:0.4rem 0.9rem;
}

.hero_title {
  margin:0;
  font-family:Helvetica,Arial,sans-serif;
  font-weight:800;
  font-size:clamp(2.9rem,7vw,6.2rem);
  line-height:0.92;
  letter-spacing:-0.03em;
  color:#3a2c22;
}

.hero_title_accent {
  color:#c0392b;
  font-style:italic;
}

.hero_sub {
  margin:0;
  max-width:38ch;
  font-size:1.05rem;
  line-height:1.6;
  color:#5c4a3d;
}

.hero_actions {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:1rem;
}

.hero_button_primary {
  display:inline-flex;
  align-items:center;
  background:#c0392b;
  color:#f5f4f0;
  font-size:0.9rem;
  font-weight:600;
  letter-spacing:0.01em;
  padding:0.95rem 1.7rem;
  border-radius:999px;
  text-decoration:none;
  transition:transform 0.2s ease;
}

.hero_button_ghost {
  display:inline-flex;
  align-items:center;
  background:transparent;
  color:#3a2c22;
  font-size:0.9rem;
  font-weight:600;
  letter-spacing:0.01em;
  padding:0.95rem 1.7rem;
  border-radius:999px;
  border:1px solid #3a2c22;
  text-decoration:none;
  transition:background 0.2s ease;
}

.hero_side {
  grid-column:span 4;
  display:flex;
  flex-direction:column;
  gap:1.5rem;
}

.hero_visual {
  flex:1 1 auto;
  min-height:220px;
  border-radius:1.25rem;
  background:linear-gradient(150deg,#3a2c22 0%,#5c4a3d 60%,#c0392b 140%);
  border:1px solid rgba(58,44,34,0.2);
  position:relative;
  overflow:hidden;
}

.hero_visual_tag {
  position:absolute;
  bottom:1.1rem;
  left:1.2rem;
  margin:0;
  font-family:'Courier New',monospace;
  font-size:0.68rem;
  letter-spacing:0.2em;
  text-transform:uppercase;
  color:#f5f4f0;
  opacity:0.85;
}

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

.hero_stat_card {
  background:#efece5;
  border:1px solid rgba(58,44,34,0.14);
  border-radius:1rem;
  padding:1.2rem;
}

.hero_stat_num {
  margin:0;
  font-size:2rem;
  font-weight:800;
  line-height:1;
  color:#c0392b;
  letter-spacing:-0.02em;
}

.hero_stat_label {
  margin:0.5rem 0 0;
  font-family:'Courier New',monospace;
  font-size:0.72rem;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:#5c4a3d;
}

.hero_stat_num_alt {
  margin:0;
  font-size:2rem;
  font-weight:800;
  line-height:1;
  color:#f5f4f0;
  letter-spacing:-0.02em;
}

.hero_stat_label_alt {
  margin:0.5rem 0 0;
  font-family:'Courier New',monospace;
  font-size:0.72rem;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:rgba(245,244,240,0.7);
}
</style>