<!-- 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_metarow">
    <p class="hero_meta">EST. 2011</p>
    <p class="hero_metadot">/</p>
    <p class="hero_metaco">52°N BRANDING STUDIO</p>
    <p class="hero_metadot2">/</p>
    <p class="hero_metac">© INDEX</p>
  </div>
  <h1 class="hero_title">
    <span class="hero_title_accent">Brands</span>
    <span class="hero_title_rest"> that hold their weight in the room.</span>
  </h1>
  <p class="hero_subline">We build editorial identity systems for founders who refuse to blend in — strategy, type, and art direction under one warm roof.</p>
  <div class="hero_actions">
    <a class="hero_button" href="#start">Start a project</a>
    <a class="hero_button_ghost" href="#work">View the work →</a>
  </div>
  <p class="hero_footnote">Trusted by 40+ independent labels & studios</p>
</section>

<style>
.hero_component {
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  background-color:#f5f4f0;
  padding:7rem 1.5rem;
  min-height:92vh;
  overflow:hidden;
  font-family:'Helvetica Neue',Arial,sans-serif;
  box-sizing:border-box;
}

.hero_metarow {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:0.75rem;
  margin-bottom:2.5rem;
  color:#3a2c22;
}

.hero_meta {
  font-family:'SFMono-Regular',Consolas,'Liberation Mono',monospace;
  font-size:0.7rem;
  letter-spacing:0.28em;
  text-transform:uppercase;
  color:#3a2c22;
  margin:0;
}

.hero_metadot {
  font-family:'SFMono-Regular',Consolas,monospace;
  font-size:0.7rem;
  color:#c0392b;
  margin:0;
}

.hero_metaco {
  font-family:'SFMono-Regular',Consolas,'Liberation Mono',monospace;
  font-size:0.7rem;
  letter-spacing:0.28em;
  text-transform:uppercase;
  color:#3a2c22;
  margin:0;
}

.hero_metadot2 {
  font-family:'SFMono-Regular',Consolas,monospace;
  font-size:0.7rem;
  color:#c0392b;
  margin:0;
}

.hero_metac {
  font-family:'SFMono-Regular',Consolas,'Liberation Mono',monospace;
  font-size:0.7rem;
  letter-spacing:0.28em;
  text-transform:uppercase;
  color:#3a2c22;
  margin:0;
}

.hero_title {
  max-width:16ch;
  color:#3a2c22;
  font-family:'Helvetica Neue',Arial,sans-serif;
  font-weight:700;
  line-height:0.92;
  letter-spacing:-0.03em;
  font-size:clamp(3rem,9vw,8.5rem);
  margin:0;
}

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

.hero_title_rest {
  color:#3a2c22;
}

.hero_subline {
  max-width:46ch;
  margin:2rem 0 0 0;
  color:rgba(58,44,34,0.8);
  font-family:Georgia,'Times New Roman',serif;
  font-size:clamp(1rem,1.5vw,1.25rem);
  line-height:1.6;
}

.hero_actions {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  gap:1rem;
  margin-top:3rem;
}

.hero_button {
  display:inline-flex;
  align-items:center;
  background-color:#c0392b;
  border-radius:999px;
  padding:1rem 2.25rem;
  font-family:'Helvetica Neue',Arial,sans-serif;
  font-size:0.95rem;
  font-weight:600;
  color:#f5f4f0;
  text-decoration:none;
  letter-spacing:0.02em;
  border:1px solid #c0392b;
  transition:background-color 0.25s ease;
}

.hero_button_ghost {
  display:inline-flex;
  align-items:center;
  background-color:transparent;
  border-radius:999px;
  padding:1rem 2.25rem;
  font-family:'Helvetica Neue',Arial,sans-serif;
  font-size:0.95rem;
  font-weight:600;
  color:#3a2c22;
  text-decoration:none;
  letter-spacing:0.02em;
  border:1px solid rgba(58,44,34,0.3);
  transition:border-color 0.25s ease,background-color 0.25s ease;
}

.hero_footnote {
  font-family:'SFMono-Regular',Consolas,monospace;
  font-size:0.68rem;
  letter-spacing:0.24em;
  text-transform:uppercase;
  color:rgba(58,44,34,0.55);
  margin-top:3.5rem;
}
</style>