<!-- 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_inner">
    <nav class="hero_meta">
      <p class="hero_eyebrow">Maison Vireo — Creative Studio</p>
      <p class="hero_metaright">Est. 2011 · Paris</p>
    </nav>
    <div class="hero_bento">
      <div class="hero_head">
        <p class="hero_kicker">Brand · Editorial · Digital</p>
        <h1 class="hero_title">
          <span class="hero_titleaccent">quietly luxurious.</span>
        </h1>
        <p class="hero_sub">An independent studio shaping identity, packaging and story for houses that refuse to be ordinary. Considered from first sketch to final ship.</p>
        <div class="hero_actions">
          <a class="hero_ctaprimary" href="#work">View the work</a>
          <a class="hero_ctaghost" href="#contact">Start a project</a>
        </div>
      </div>
      <div class="hero_side">
        <div class="hero_visual">
          <img class="hero_image" src="https://pub-8060008fc1ab494c98adf87ab62286c4.r2.dev/assets/inspiration/hero-luxury-serif-agency-19-1-12.webp" alt="Studio still life of a perfume bottle on warm linen" />
        </div>
        <div class="hero_statrow">
          <div class="hero_stat">
            <p class="hero_statnum">
              <span class="hero_statmark">.</span>
            </p>
            <p class="hero_statlabel">Brands shaped</p>
          </div>
          <div class="hero_statalt">
            <p class="hero_statnumalt">
              <span class="hero_statmarkalt"> yrs</span>
            </p>
            <p class="hero_statlabelalt">Independent</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<style>
.hero_component {
  position:relative;
  width:100%;
  background-color:#faf8f4;
  padding:80px 24px;
  box-sizing:border-box;
  overflow:hidden;
  font-family:Georgia,'Times New Roman',serif;
}

.hero_inner {
  margin:0 auto;
  width:100%;
  max-width:1240px;
}

.hero_meta {
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:56px;
}

.hero_eyebrow {
  margin:0;
  font-family:Arial,Helvetica,sans-serif;
  font-size:11px;
  letter-spacing:0.32em;
  text-transform:uppercase;
  color:#a67c52;
  font-weight:600;
}

.hero_metaright {
  margin:0;
  font-family:Arial,Helvetica,sans-serif;
  font-size:11px;
  letter-spacing:0.28em;
  text-transform:uppercase;
  color:#8a847a;
}

.hero_bento {
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:20px;
}

.hero_head {
  grid-column:span 8;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  background-color:#f3efe7;
  border-radius:20px;
  padding:48px;
  border:1px solid #e7e1d6;
}

.hero_kicker {
  margin:0 0 32px 0;
  font-family:Arial,Helvetica,sans-serif;
  font-size:12px;
  letter-spacing:0.3em;
  text-transform:uppercase;
  color:#a67c52;
  font-weight:600;
}

.hero_title {
  margin:0;
  color:#1c1a17;
  font-family:Georgia,'Times New Roman',serif;
  font-size:68px;
  line-height:0.98;
  font-weight:400;
  letter-spacing:-0.01em;
}

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

.hero_sub {
  margin:32px 0 0 0;
  max-width:520px;
  font-family:Georgia,'Times New Roman',serif;
  font-size:17px;
  line-height:1.6;
  color:#4a453d;
}

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

.hero_ctaprimary {
  display:inline-flex;
  align-items:center;
  background-color:#a67c52;
  border-radius:999px;
  padding:16px 32px;
  font-family:Arial,Helvetica,sans-serif;
  font-size:13px;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:#faf8f4;
  text-decoration:none;
  font-weight:600;
}

.hero_ctaghost {
  display:inline-flex;
  align-items:center;
  background-color:transparent;
  border:1px solid #c9c0b1;
  border-radius:999px;
  padding:16px 32px;
  font-family:Arial,Helvetica,sans-serif;
  font-size:13px;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:#1c1a17;
  text-decoration:none;
  font-weight:600;
}

.hero_side {
  grid-column:span 4;
  display:flex;
  flex-direction:column;
  gap:20px;
}

.hero_visual {
  position:relative;
  overflow:hidden;
  border-radius:20px;
  flex-grow:1;
  min-height:220px;
}

.hero_image {
  width:100%;
  height:100%;
  min-height:220px;
  object-fit:cover;
  display:block;
}

.hero_statrow {
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:20px;
}

.hero_stat {
  background-color:#1c1a17;
  border-radius:20px;
  padding:24px;
}

.hero_statnum {
  margin:0;
  font-family:Georgia,'Times New Roman',serif;
  font-size:38px;
  line-height:1;
  color:#faf8f4;
}

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

.hero_statlabel {
  margin:12px 0 0 0;
  font-family:Arial,Helvetica,sans-serif;
  font-size:11px;
  letter-spacing:0.22em;
  text-transform:uppercase;
  color:#a29a8c;
}

.hero_statalt {
  background-color:#f3efe7;
  border-radius:20px;
  padding:24px;
  border:1px solid #e7e1d6;
}

.hero_statnumalt {
  margin:0;
  font-family:Georgia,'Times New Roman',serif;
  font-size:38px;
  line-height:1;
  color:#1c1a17;
}

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

.hero_statlabelalt {
  margin:12px 0 0 0;
  font-family:Arial,Helvetica,sans-serif;
  font-size:11px;
  letter-spacing:0.22em;
  text-transform:uppercase;
  color:#8a847a;
}
</style>