<!-- Paste markup into an Embed, or recreate as native elements.
     Styles below map 1:1 to the class names above. -->
<section class="hero_component">
  <img class="hero_photo" src="https://pub-8060008fc1ab494c98adf87ab62286c4.r2.dev/assets/inspiration/hero-deck-editorial-agency-35-1-12.webp" alt="Agency studio interior" />
  <div class="hero_scrim"></div>
  <nav class="hero_meta">
    <p class="hero_metaleft">STUDIO KRPL — © 2026</p>
    <p class="hero_metamid">52°N / 13°E · BERLIN</p>
    <p class="hero_metaright">PAGE 01 — INDEX</p>
  </nav>
  <div class="hero_body">
    <div class="hero_eyebrow">
      <p class="hero_number">35°</p>
      <p class="hero_kicker">INDEPENDENT DESIGN & BRAND STUDIO — EST. 2011</p>
    </div>
    <h1 class="hero_title">
      <span class="hero_title_accent">refuse to blend in.</span>
    </h1>
    <p class="hero_sub">Identity, editorial systems, and digital craft for founders who’d rather be unmistakable than agreeable. Fewer clients, sharper work.</p>
    <div class="hero_actions">
      <a class="hero_button" href="#work">View the work →</a>
      <a class="hero_button_ghost" href="#contact">Start a project</a>
    </div>
  </div>
  <div class="hero_footer">
    <p class="hero_foot_a">BRANDING / EDITORIAL / DIGITAL</p>
    <p class="hero_foot_b">SCROLL ↓</p>
  </div>
</section>

<style>
.hero_component {
  position:relative;
  width:100%;
  min-height:92vh;
  overflow:hidden;
  background:#141414;
  color:#eae8e4;
  font-family:'Helvetica Neue',Arial,sans-serif;
  display:flex;
  flex-direction:column;
}

.hero_photo {
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  object-fit:cover;
  z-index:0;
}

.hero_scrim {
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background:linear-gradient(180deg,rgba(20,20,20,0.55) 0%,rgba(20,20,20,0.78) 55%,rgba(20,20,20,0.94) 100%);
  z-index:1;
}

.hero_meta {
  position:relative;
  z-index:2;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:26px 40px;
  font-size:11px;
  letter-spacing:0.28em;
  text-transform:uppercase;
  color:#a7a39c;
  border-bottom:1px solid rgba(234,232,228,0.14);
}

.hero_metaleft {
  margin:0;
  color:#eae8e4;
}

.hero_metamid {
  margin:0;
  color:#a7a39c;
}

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

.hero_body {
  position:relative;
  z-index:2;
  flex:1;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  padding:96px 40px 64px 40px;
  max-width:1200px;
}

.hero_eyebrow {
  display:flex;
  align-items:center;
  gap:16px;
  margin-bottom:34px;
}

.hero_number {
  margin:0;
  line-height:0.8;
  color:#e63b2e;
  font-size:clamp(52px,9vw,110px);
  font-weight:800;
  letter-spacing:-0.04em;
}

.hero_kicker {
  margin:0;
  font-size:11px;
  letter-spacing:0.3em;
  text-transform:uppercase;
  color:#a7a39c;
  max-width:220px;
  line-height:1.7;
}

.hero_title {
  margin:0;
  font-weight:800;
  letter-spacing:-0.03em;
  line-height:0.92;
  font-size:clamp(46px,8.4vw,124px);
  text-transform:uppercase;
  color:#eae8e4;
  max-width:14ch;
}

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

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

.hero_actions {
  margin-top:40px;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:16px;
}

.hero_button {
  display:inline-flex;
  align-items:center;
  gap:8px;
  background:#e63b2e;
  color:#141414;
  padding:17px 34px;
  font-size:13px;
  letter-spacing:0.2em;
  text-transform:uppercase;
  font-weight:700;
  text-decoration:none;
  border-radius:2px;
  transition:transform .18s ease,background .18s ease;
}

.hero_button_ghost {
  display:inline-flex;
  align-items:center;
  gap:8px;
  background:transparent;
  color:#eae8e4;
  padding:16px 33px;
  font-size:13px;
  letter-spacing:0.2em;
  text-transform:uppercase;
  font-weight:700;
  text-decoration:none;
  border:1px solid rgba(234,232,228,0.55);
  border-radius:2px;
  transition:border-color .18s ease,color .18s ease;
}

.hero_footer {
  position:relative;
  z-index:2;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:20px 40px;
  font-size:11px;
  letter-spacing:0.28em;
  text-transform:uppercase;
  color:#a7a39c;
  border-top:1px solid rgba(234,232,228,0.14);
}

.hero_foot_a {
  margin:0;
}

.hero_foot_b {
  margin:0;
  color:#e63b2e;
}
</style>