CTA 04

<!-- Paste markup into an Embed, or recreate as native elements.
     Styles below map 1:1 to the class names above. -->
<section class="cta_component">
  <div class="cta_inner">
    <p class="cta_meta">Private Atelier — By Appointment</p>
    <h2 class="cta_headline">
      <span class="cta_headline_accent">designed only for you.</span>
    </h2>
    <a class="cta_link" href="#reserve">Reserve your consultation</a>
  </div>
</section>

<style>
.cta_component {
  width:100%;
  background-color:#faf8f4;
  display:flex;
  justify-content:center;
  padding:140px 24px;
  box-sizing:border-box;
}

.cta_inner {
  width:100%;
  max-width:880px;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
}

.cta_meta {
  color:#a67c52;
  font-family:Helvetica,Arial,sans-serif;
  font-size:12px;
  letter-spacing:0.28em;
  text-transform:uppercase;
  margin:0 0 36px 0;
  font-weight:500;
}

.cta_headline {
  color:#1c1a17;
  font-family:Georgia,'Times New Roman',Times,serif;
  font-size:clamp(38px,6vw,72px);
  line-height:1.08;
  letter-spacing:-0.01em;
  font-weight:400;
  margin:0;
  max-width:820px;
}

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

.cta_link {
  margin-top:48px;
  color:#1c1a17;
  font-family:Helvetica,Arial,sans-serif;
  font-size:16px;
  letter-spacing:0.04em;
  text-decoration:none;
  border-bottom:1px solid #a67c52;
  padding-bottom:3px;
  transition:color 0.3s ease,border-color 0.3s ease;
  display:inline-block;
}
</style>