<!-- Paste markup into an Embed, or recreate as native elements.
     Styles below map 1:1 to the class names above. -->
<section class="hero_component">
  <div class="hero_topbar">
    <p class="hero_brand">Volt & Grain™</p>
    <ul class="hero_meta">
      <li class="hero_pill">Brand Systems</li>
      <li class="hero_pill">Motion</li>
      <li class="hero_pill_outline">Est. 2014</li>
    </ul>
  </div>
  <div class="hero_center">
    <p class="hero_eyebrow">A creative agency for brands that refuse to blend in</p>
    <h1 class="hero_wordmark">
      <span class="hero_wordmark_accent">BOLD</span>
      <span class="hero_wordmark_rest">BY DESIGN</span>
    </h1>
  </div>
  <div class="hero_bottom">
    <p class="hero_sub">We build brand identities, campaigns, and motion systems that make category leaders impossible to ignore — from first pixel to full rollout.</p>
    <div class="hero_actions">
      <a class="hero_button_primary" href="#start">Start a project</a>
      <a class="hero_button_ghost" href="#work">See the work</a>
    </div>
  </div>
  <div class="hero_glow"></div>
</section>

<style>
.hero_component {
  position:relative;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  min-height:100vh;
  background-color:#7a1420;
  padding:3.5rem 6vw;
  overflow:hidden;
  font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;
  box-sizing:border-box;
}

.hero_topbar {
  position:relative;
  z-index:10;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1.5rem;
  flex-wrap:wrap;
}

.hero_brand {
  color:#ffd400;
  font-size:0.95rem;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:0.32em;
  margin:0;
}

.hero_meta {
  display:flex;
  align-items:center;
  gap:0.75rem;
  list-style:none;
  margin:0;
  padding:0;
  flex-wrap:wrap;
}

.hero_pill {
  background-color:#ffd400;
  color:#7a1420;
  font-size:0.72rem;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:0.14em;
  padding:0.4rem 0.9rem;
  border-radius:999px;
}

.hero_pill_outline {
  border:1px solid #ffd400;
  color:#ffd400;
  font-size:0.72rem;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:0.14em;
  padding:0.4rem 0.9rem;
  border-radius:999px;
}

.hero_center {
  position:relative;
  z-index:10;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  margin:2.5rem 0;
}

.hero_eyebrow {
  color:#f4c9cd;
  font-size:0.9rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:0.28em;
  margin:0 0 1.4rem 0;
}

.hero_wordmark {
  color:#fdf4ec;
  font-family:'Arial Narrow','Helvetica Neue',Arial,sans-serif;
  font-weight:900;
  text-transform:uppercase;
  line-height:0.82;
  letter-spacing:-0.02em;
  margin:0;
  font-size:clamp(4rem,17vw,15rem);
}

.hero_wordmark_accent {
  color:#ffd400;
}

.hero_wordmark_rest {
  display:block;
}

.hero_bottom {
  position:relative;
  z-index:10;
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:2rem;
  flex-wrap:wrap;
}

.hero_sub {
  color:#f4c9cd;
  font-size:1.15rem;
  line-height:1.5;
  max-width:34rem;
  margin:0;
}

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

.hero_button_primary {
  display:inline-flex;
  align-items:center;
  background-color:#ffd400;
  color:#7a1420;
  font-size:0.85rem;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:0.14em;
  padding:1.05rem 2rem;
  border-radius:999px;
  text-decoration:none;
}

.hero_button_ghost {
  display:inline-flex;
  align-items:center;
  border:2px solid #fdf4ec;
  color:#fdf4ec;
  font-size:0.85rem;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:0.14em;
  padding:0.95rem 2rem;
  border-radius:999px;
  text-decoration:none;
}

.hero_glow {
  pointer-events:none;
  position:absolute;
  bottom:-20%;
  right:-10%;
  width:45vw;
  height:45vw;
  border-radius:50%;
  background:radial-gradient(circle,#a51d2d 0%,rgba(122,20,32,0) 70%);
  opacity:0.4;
  z-index:0;
}
</style>