<!-- 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_visual"></div>
  <div class="hero_scrim"></div>
  <div class="hero_content">
    <p class="hero_meta">OptimaFlow Factory — Est. MMXXVI</p>
    <h1 class="hero_title">
      <span class="hero_accent">art form.</span>
    </h1>
    <p class="hero_subtitle">Small-batch precision, full-scale reliability. We partner with premium brands to engineer, produce, and deliver goods worthy of the name on the label.</p>
    <div class="hero_actions">
      <a class="hero_button_primary" href="#start">Start a project</a>
      <a class="hero_button_secondary" href="#work">View our work</a>
    </div>
  </div>
</section>

<style>
.hero_component {
  position:relative;
  display:flex;
  align-items:flex-end;
  min-height:88vh;
  overflow:hidden;
  background-color:#faf8f4;
  padding:2rem clamp(1.5rem,5vw,5rem) clamp(3rem,6vw,5.5rem);
  font-family:Georgia,'Times New Roman',serif;
  box-sizing:border-box;
}

.hero_visual {
  position:absolute;
  inset:0;
  z-index:0;
  background:linear-gradient(135deg,#2c2620 0%,#4a3f34 46%,#a67c52 128%);
  min-height:88vh;
}

.hero_scrim {
  position:absolute;
  inset:0;
  z-index:1;
  background:linear-gradient(180deg,rgba(24,20,16,0.12) 0%,rgba(24,20,16,0.62) 100%);
}

.hero_content {
  position:relative;
  z-index:2;
  display:flex;
  flex-direction:column;
  gap:1.5rem;
  max-width:780px;
  color:#faf8f4;
}

.hero_meta {
  margin:0;
  font-family:'Helvetica Neue',Arial,sans-serif;
  font-size:0.75rem;
  font-weight:600;
  letter-spacing:0.28em;
  text-transform:uppercase;
  color:#d8c3a5;
}

.hero_title {
  margin:0;
  font-family:Georgia,'Times New Roman',serif;
  font-size:clamp(2.75rem,7vw,5.75rem);
  font-weight:400;
  line-height:1.02;
  letter-spacing:-0.02em;
  color:#faf8f4;
}

.hero_accent {
  font-style:italic;
  color:#a67c52;
}

.hero_subtitle {
  margin:0;
  max-width:520px;
  font-family:'Helvetica Neue',Arial,sans-serif;
  font-size:clamp(1rem,1.6vw,1.2rem);
  line-height:1.65;
  color:#e8e0d5;
}

.hero_actions {
  display:flex;
  flex-wrap:wrap;
  gap:1rem;
  margin-top:0.75rem;
}

.hero_button_primary {
  display:inline-flex;
  align-items:center;
  padding:0.9rem 2rem;
  border-radius:999px;
  background-color:#a67c52;
  color:#faf8f4;
  font-family:'Helvetica Neue',Arial,sans-serif;
  font-size:0.9rem;
  font-weight:600;
  letter-spacing:0.02em;
  text-decoration:none;
  transition:background-color .25s ease;
}

.hero_button_secondary {
  display:inline-flex;
  align-items:center;
  padding:0.9rem 2rem;
  border-radius:999px;
  border:1px solid rgba(250,248,244,0.5);
  background-color:transparent;
  color:#faf8f4;
  font-family:'Helvetica Neue',Arial,sans-serif;
  font-size:0.9rem;
  font-weight:600;
  letter-spacing:0.02em;
  text-decoration:none;
  transition:border-color .25s ease;
}
</style>