<!-- Paste markup into an Embed, or recreate as native elements.
     Styles below map 1:1 to the class names above. -->
<section class="hero_component">
  <nav class="hero_nav">
    <p class="hero_brandmark">Maison Vela</p>
    <p class="hero_navmeta">Est. 2026</p>
  </nav>
  <div class="hero_center">
    <p class="hero_eyebrow">The Private Wealth Studio</p>
    <h1 class="hero_title">
      <span class="hero_title_accent">Quietly</span>
      <span class="hero_title_rest"> wealthy — by design.</span>
    </h1>
    <p class="hero_subline">A concierge investment desk for founders and families who prefer discretion over dashboards. Real advisors, real portfolios, none of the noise.</p>
    <div class="hero_actions">
      <a class="hero_button_primary" href="#request">Request an invitation</a>
      <a class="hero_button_ghost" href="#how">How it works</a>
    </div>
  </div>
  <div class="hero_footermeta">
    <p class="hero_footermeta_left">By referral only</p>
    <p class="hero_footermeta_right">€2.4B under advisement</p>
  </div>
</section>

<style>
.hero_component {
  position:relative;
  width:100%;
  min-height:100vh;
  box-sizing:border-box;
  background-color:#faf8f4;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  padding:3rem 6vw;
  overflow:hidden;
}

.hero_nav {
  display:flex;
  align-items:center;
  justify-content:space-between;
  width:100%;
}

.hero_brandmark {
  margin:0;
  font-family:Georgia,'Times New Roman',serif;
  font-size:1.15rem;
  letter-spacing:0.02em;
  color:#1a1a1a;
}

.hero_navmeta {
  margin:0;
  font-family:Georgia,'Times New Roman',serif;
  font-size:0.7rem;
  letter-spacing:0.28em;
  text-transform:uppercase;
  color:#a67c52;
}

.hero_center {
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  max-width:60rem;
  margin:auto;
}

.hero_eyebrow {
  margin:0 0 2rem 0;
  font-family:Georgia,'Times New Roman',serif;
  font-size:0.72rem;
  letter-spacing:0.42em;
  text-transform:uppercase;
  color:#a67c52;
}

.hero_title {
  margin:0;
  font-family:Georgia,'Times New Roman',serif;
  font-weight:400;
  font-size:clamp(3rem,11vw,9.5rem);
  line-height:0.92;
  letter-spacing:-0.02em;
  color:#161616;
}

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

.hero_title_rest {
  font-style:normal;
  color:#161616;
}

.hero_subline {
  margin:2rem 0 2.75rem 0;
  font-family:Georgia,'Times New Roman',serif;
  font-size:clamp(1rem,1.6vw,1.35rem);
  line-height:1.6;
  color:#4a463f;
  max-width:34rem;
}

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

.hero_button_primary {
  display:inline-flex;
  align-items:center;
  background-color:#a67c52;
  color:#faf8f4;
  font-family:Georgia,'Times New Roman',serif;
  font-size:0.8rem;
  letter-spacing:0.16em;
  text-transform:uppercase;
  padding:1.05rem 2.25rem;
  border-radius:999px;
  text-decoration:none;
  transition:background-color 0.25s ease;
}

.hero_button_ghost {
  display:inline-flex;
  align-items:center;
  background-color:transparent;
  color:#161616;
  font-family:Georgia,'Times New Roman',serif;
  font-size:0.8rem;
  letter-spacing:0.16em;
  text-transform:uppercase;
  padding:1.05rem 2.25rem;
  border:1px solid #161616;
  border-radius:999px;
  text-decoration:none;
  transition:all 0.25s ease;
}

.hero_footermeta {
  display:flex;
  align-items:center;
  justify-content:space-between;
  width:100%;
  font-family:Georgia,'Times New Roman',serif;
  font-size:0.7rem;
  letter-spacing:0.22em;
  text-transform:uppercase;
  color:#8a8378;
}

.hero_footermeta_left {
  margin:0;
}

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