<!-- 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_topmeta">
    <p class="hero_metaleft">N° 021 / STUDIO INDEX</p>
    <p class="hero_metaright">© 2026 — PAGE 01</p>
  </div>
  <div class="hero_inner">
    <p class="hero_eyebrow">● GROWTH PARTNER FOR AMBITIOUS BRANDS</p>
    <div class="hero_numeral">
      <p class="hero_numeraltext">021</p>
    </div>
    <h1 class="hero_title">
      <span class="hero_titleaccent">We build the systems </span>
      <span class="hero_titlemuted">that turn overlooked companies into </span>
      <span class="hero_titlewhite">category leaders.</span>
    </h1>
    <p class="hero_sub">Strategy, brand and demand — one senior team, quarterly sprints, no fluff. We ship work that moves the pipeline, not just the mood board.</p>
    <div class="hero_actions">
      <a class="hero_ctaprimary" href="#book">Book a strategy call →</a>
      <a class="hero_ctasecondary" href="#work">View the work</a>
    </div>
  </div>
  <div class="hero_bottommeta">
    <p class="hero_scroll">↓ SCROLL</p>
    <p class="hero_locale">52.5° N — BERLIN / REMOTE</p>
  </div>
</section>

<style>
.hero_component {
  position:relative;
  width:100%;
  min-height:100vh;
  background-color:#141414;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  padding:6rem 1.5rem;
  font-family:'Helvetica Neue',Arial,sans-serif;
}

.hero_topmeta {
  position:absolute;
  top:2rem;
  left:0;
  right:0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 2rem;
  font-size:11px;
  letter-spacing:0.28em;
  text-transform:uppercase;
  color:#8a8783;
  font-family:'Helvetica Neue',Arial,sans-serif;
}

.hero_metaleft {
  margin:0;
}

.hero_metaright {
  margin:0;
}

.hero_inner {
  position:relative;
  z-index:10;
  max-width:1000px;
  width:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
}

.hero_eyebrow {
  display:flex;
  align-items:center;
  gap:0.75rem;
  font-size:12px;
  letter-spacing:0.32em;
  text-transform:uppercase;
  color:#e63b2e;
  margin:0 0 2.5rem 0;
  font-weight:600;
}

.hero_numeral {
  font-weight:900;
  color:#211f1c;
  line-height:0.8;
  font-size:clamp(140px,26vw,240px);
  letter-spacing:-0.04em;
  margin:0 0 0.5rem 0;
  font-family:'Helvetica Neue',Arial,sans-serif;
  -webkit-user-select:none;
  user-select:none;
}

.hero_numeraltext {
  margin:0;
}

.hero_title {
  font-weight:900;
  color:#ffffff;
  line-height:0.92;
  letter-spacing:-0.03em;
  font-size:clamp(48px,8vw,104px);
  margin:0;
  max-width:900px;
  font-family:'Helvetica Neue',Arial,sans-serif;
}

.hero_titleaccent {
  color:#e63b2e;
}

.hero_titlemuted {
  color:#6f6c67;
}

.hero_titlewhite {
  color:#ffffff;
}

.hero_sub {
  color:#a3a09b;
  font-size:18px;
  line-height:1.6;
  max-width:560px;
  margin:2.25rem 0 2.75rem 0;
  font-family:'Helvetica Neue',Arial,sans-serif;
}

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

.hero_ctaprimary {
  display:inline-flex;
  align-items:center;
  gap:0.5rem;
  background-color:#e63b2e;
  color:#ffffff;
  font-size:13px;
  font-weight:600;
  letter-spacing:0.14em;
  text-transform:uppercase;
  padding:1.25rem 2.25rem;
  border-radius:2px;
  text-decoration:none;
  font-family:'Helvetica Neue',Arial,sans-serif;
}

.hero_ctasecondary {
  display:inline-flex;
  align-items:center;
  gap:0.5rem;
  background-color:transparent;
  color:#ffffff;
  font-size:13px;
  font-weight:600;
  letter-spacing:0.14em;
  text-transform:uppercase;
  padding:1.25rem 2.25rem;
  border-radius:2px;
  border:1px solid #3a3833;
  text-decoration:none;
  font-family:'Helvetica Neue',Arial,sans-serif;
}

.hero_bottommeta {
  position:absolute;
  bottom:2rem;
  left:0;
  right:0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 2rem;
  font-size:11px;
  letter-spacing:0.28em;
  text-transform:uppercase;
  color:#6f6c67;
  font-family:'Helvetica Neue',Arial,sans-serif;
}

.hero_scroll {
  margin:0;
}

.hero_locale {
  margin:0;
}
</style>