<!-- 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_topleft">STUDIO FIELDWORK © 2026</p>
    <p class="hero_topcenter">PAGE 01 / INDEX</p>
    <p class="hero_topright">52° 31′ N — BERLIN</p>
  </div>
  <div class="hero_grid">
    <div class="hero_copy">
      <p class="hero_eyebrow">◦ INDEPENDENT DESIGN AGENCY — EST. 2014</p>
      <h1 class="hero_title">
        <span class="hero_title_ink">We build brands with </span>
        <span class="hero_title_accent">editorial spine.</span>
      </h1>
      <p class="hero_sub">A studio for identity, digital product, and print. We turn ambitious companies into sharp, unmistakable visual systems — no filler, no default.</p>
      <div class="hero_actions">
        <a class="hero_button_primary" href="#work">View selected work →</a>
        <a class="hero_button_ghost" href="#contact">Book an intro</a>
      </div>
    </div>
    <div class="hero_visualwrap">
      <div class="hero_numeral">07</div>
      <div class="hero_visual">
        <p class="hero_visual_tag">FIG. 07 — CASE FILM / DROP YOUR IMAGE</p>
      </div>
    </div>
  </div>
  <ul class="hero_ticker">
    <li class="hero_ticker_item">Brand Identity</li>
    <li class="hero_ticker_item">Digital Product</li>
    <li class="hero_ticker_item">Editorial & Print</li>
    <li class="hero_ticker_item">↳ 40+ Studios Shipped</li>
  </ul>
</section>

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

.hero_topbar {
  display:flex;
  justify-content:space-between;
  align-items:center;
  border-bottom:1px solid #141414;
  padding-bottom:14px;
  margin-bottom:64px;
  font-size:11px;
  letter-spacing:0.22em;
  text-transform:uppercase;
  font-weight:600;
}

.hero_topleft {
  margin:0;
}

.hero_topcenter {
  margin:0;
  color:#e63b2e;
}

.hero_topright {
  margin:0;
}

.hero_grid {
  display:grid;
  grid-template-columns:1.15fr 0.85fr;
  gap:56px;
  align-items:end;
}

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

.hero_eyebrow {
  display:flex;
  align-items:center;
  gap:12px;
  margin:0 0 28px 0;
  font-size:12px;
  letter-spacing:0.26em;
  text-transform:uppercase;
  font-weight:600;
}

.hero_title {
  margin:0;
  font-weight:700;
  line-height:0.9;
  letter-spacing:-0.03em;
  font-size:clamp(52px,8.4vw,132px);
  text-transform:none;
}

.hero_title_ink {
  color:#141414;
}

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

.hero_sub {
  max-width:520px;
  margin:32px 0 0 0;
  font-size:17px;
  line-height:1.55;
  color:#3a3a38;
}

.hero_actions {
  display:flex;
  flex-wrap:wrap;
  gap:16px;
  margin-top:44px;
}

.hero_button_primary {
  display:inline-flex;
  align-items:center;
  gap:10px;
  background:#e63b2e;
  color:#eae8e4;
  padding:16px 30px;
  border-radius:3px;
  font-size:13px;
  font-weight:600;
  letter-spacing:0.12em;
  text-transform:uppercase;
  text-decoration:none;
}

.hero_button_ghost {
  display:inline-flex;
  align-items:center;
  gap:10px;
  background:transparent;
  color:#141414;
  border:1px solid #141414;
  padding:16px 30px;
  border-radius:3px;
  font-size:13px;
  font-weight:600;
  letter-spacing:0.12em;
  text-transform:uppercase;
  text-decoration:none;
}

.hero_visualwrap {
  position:relative;
}

.hero_numeral {
  position:absolute;
  top:-86px;
  left:0;
  margin:0;
  font-weight:700;
  line-height:0.8;
  letter-spacing:-0.05em;
  font-size:clamp(120px,15vw,240px);
  color:#141414;
  pointer-events:none;
  opacity:0.08;
}

.hero_visual {
  position:relative;
  width:100%;
  min-height:440px;
  border-radius:3px;
  border:1px solid #141414;
  overflow:hidden;
  background:linear-gradient(135deg,#141414 0%,#2a2a28 55%,#e63b2e 190%);
}

.hero_visual_tag {
  position:absolute;
  bottom:18px;
  left:18px;
  margin:0;
  font-size:11px;
  letter-spacing:0.22em;
  text-transform:uppercase;
  color:#eae8e4;
}

.hero_ticker {
  display:flex;
  flex-wrap:wrap;
  column-gap:48px;
  row-gap:8px;
  list-style:none;
  padding:0;
  margin:64px 0 0 0;
  border-top:1px solid #141414;
  padding-top:20px;
  font-size:12px;
  letter-spacing:0.18em;
  text-transform:uppercase;
  font-weight:600;
}

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