Accessible contact form

<section class="cmp-contact">
  <div>
    <p>Start a conversation</p>
    <h2>Tell us what you’re building.</h2>
    <p>Share a few useful details. We’ll reply within one business day with a clear next step.</p>
    <dl>
      <div>
        <dt>Typical response</dt>
        <dd>Under 4 hours</dd>
      </div>
      <div>
        <dt>Good fit</dt>
        <dd>Websites, apps, and design systems</dd>
      </div>
    </dl>
  </div>
  <form class="cmp-contact__form" action="#contact-sent" novalidate>
    <div>
      <label for="cmp-contact-name">Name</label
      ><input id="cmp-contact-name" name="name" autocomplete="name" required /><small
        >How should we address you?</small
      >
    </div>
    <div>
      <label for="cmp-contact-email">Work email</label
      ><input
        id="cmp-contact-email"
        name="email"
        type="email"
        autocomplete="email"
        required
      /><small>We only use this to reply.</small>
    </div>
    <div>
      <label for="cmp-contact-scope">Project type</label
      ><select id="cmp-contact-scope" name="scope">
        <option>Marketing site</option>
        <option>Web application</option>
        <option>Component system</option>
      </select>
    </div>
    <div>
      <label for="cmp-contact-message">Useful context</label
      ><textarea id="cmp-contact-message" name="message" rows="4" minlength="20" required></textarea
      ><small>Goals, timing, and what already exists.</small>
    </div>
    <button type="submit">Send project details</button>
    <p class="cmp-contact__status" role="status" aria-live="polite"></p>
  </form>
</section>