FAQ 04

<!-- Paste markup into an Embed, or recreate as native elements.
     Styles below map 1:1 to the class names above. -->
<section class="faq_component">
  <div class="faq_inner">
    <div class="faq_main">
      <div class="faq_meta">
        <p class="faq_meta_left">FAQ / 04°</p>
        <p class="faq_meta_right">(c) SUPPORT — PAGE 01</p>
      </div>
      <h2 class="faq_title">
        <span class="faq_title_dark">Everything you </span>
        <span class="faq_title_accent">wanted to ask.</span>
      </h2>
      <div class="faq_list">
        <details class="faq_item">
          <summary class="faq_summary">
            <p class="faq_num">01</p>
            <p class="faq_q">How long does a typical project take?</p>
          </summary>
          <p class="faq_answer">Most brand and site builds run six to ten weeks from kickoff. We lock scope in week one, work in weekly sprints, and share progress every Friday so nothing lands as a surprise.</p>
        </details>
        <details class="faq_item">
          <summary class="faq_summary">
            <p class="faq_num">02</p>
            <p class="faq_q">How do you price your work?</p>
          </summary>
          <p class="faq_answer">We quote a fixed project fee based on scope, not hours. You get one number up front, milestone-based payments, and zero mystery invoices at the end.</p>
        </details>
        <details class="faq_item">
          <summary class="faq_summary">
            <p class="faq_num">03</p>
            <p class="faq_q">Do you work across time zones?</p>
          </summary>
          <p class="faq_answer">Yes. We've shipped work with teams from Berlin to San Francisco. We hold two overlapping hours daily and keep everything async in a shared board so progress never waits on a calendar.</p>
        </details>
        <details class="faq_item">
          <summary class="faq_summary">
            <p class="faq_num">04</p>
            <p class="faq_q">What happens after launch?</p>
          </summary>
          <p class="faq_answer">You get a 30-day support window plus a recorded handoff walkthrough. Need ongoing help? We offer a lightweight monthly retainer for iteration, testing and new pages.</p>
        </details>
      </div>
    </div>
    <div class="faq_cta">
      <div class="faq_cta_meta">
        <p class="faq_cta_tag">Still stuck?</p>
        <p class="faq_cta_tag2">01° / DIRECT</p>
      </div>
      <img class="faq_cta_avatar" src="https://pub-8060008fc1ab494c98adf87ab62286c4.r2.dev/assets/inspiration/faq-deck-editorial-04-1-12.webp" alt="Studio lead available for calls" />
      <h3 class="faq_cta_title">
        <span class="faq_cta_title_light">Still have </span>
        <span class="faq_cta_title_accent">questions?</span>
      </h3>
      <p class="faq_cta_text">Skip the back-and-forth. Grab a free 20-minute call and we'll talk through your project, timeline and budget — no pitch, no pressure.</p>
      <a class="faq_cta_button" href="#book">Book a call →</a>
    </div>
  </div>
</section>

<style>
.faq_component {
  background:#eae8e4;
  color:#141414;
  padding:100px 6vw;
  font-family:'Helvetica Neue',Arial,sans-serif;
  box-sizing:border-box;
}

.faq_inner {
  display:grid;
  grid-template-columns:1.5fr 1fr;
  gap:64px;
  max-width:1280px;
  margin:0 auto;
  align-items:start;
}

.faq_main {
  display:flex;
  flex-direction:column;
}

.faq_meta {
  display:flex;
  justify-content:space-between;
  align-items:center;
  border-bottom:1px solid #141414;
  padding-bottom:14px;
  margin-bottom:40px;
  font-size:12px;
  letter-spacing:0.18em;
  text-transform:uppercase;
  font-weight:600;
}

.faq_meta_left {
  margin:0;
  color:#141414;
}

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

.faq_title {
  margin:0 0 48px 0;
  font-size:clamp(40px,6vw,84px);
  font-weight:700;
  line-height:0.94;
  letter-spacing:-0.03em;
}

.faq_title_dark {
  color:#141414;
}

.faq_title_accent {
  color:#e63b2e;
}

.faq_list {
  display:flex;
  flex-direction:column;
  border-top:1px solid rgba(20,20,20,0.2);
}

.faq_item {
  border-bottom:1px solid rgba(20,20,20,0.2);
  padding:22px 0;
}

.faq_summary {
  display:flex;
  align-items:baseline;
  gap:24px;
  cursor:pointer;
  list-style:none;
  user-select:none;
}

.faq_num {
  margin:0;
  color:#e63b2e;
  font-size:28px;
  font-weight:700;
  width:54px;
  flex-shrink:0;
  letter-spacing:-0.02em;
}

.faq_q {
  margin:0;
  flex:1;
  font-size:clamp(19px,2vw,26px);
  font-weight:600;
  line-height:1.2;
}

.faq_answer {
  margin:16px 0 0 78px;
  font-size:16px;
  line-height:1.6;
  color:rgba(20,20,20,0.75);
  max-width:52ch;
}

.faq_cta {
  background:#141414;
  color:#eae8e4;
  padding:40px;
  display:flex;
  flex-direction:column;
  position:sticky;
  top:40px;
  border-radius:2px;
}

.faq_cta_meta {
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-size:11px;
  letter-spacing:0.2em;
  text-transform:uppercase;
  color:rgba(234,232,228,0.5);
  margin-bottom:28px;
}

.faq_cta_tag {
  margin:0;
}

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

.faq_cta_avatar {
  width:64px;
  height:64px;
  object-fit:cover;
  border-radius:50%;
  margin-bottom:24px;
}

.faq_cta_title {
  margin:0 0 16px 0;
  font-size:32px;
  font-weight:700;
  line-height:1.05;
  letter-spacing:-0.02em;
}

.faq_cta_title_light {
  color:#eae8e4;
}

.faq_cta_title_accent {
  color:#e63b2e;
}

.faq_cta_text {
  margin:0 0 32px 0;
  font-size:15px;
  line-height:1.6;
  color:rgba(234,232,228,0.7);
}

.faq_cta_button {
  display:inline-flex;
  align-items:center;
  justify-content:space-between;
  background:#e63b2e;
  color:#141414;
  padding:18px 24px;
  font-size:15px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:0.05em;
  text-decoration:none;
  border-radius:2px;
}
</style>