Service Detail Hero

<!--
  The top of a single service's page, so the heading is an <h1> - not the <h2>
  the listing sections use. One page, one h1, and this is it.

  The meta row is a <dl>: "Duration / 2-3 weeks" is a term and its value, and
  marking it up as one is what lets a screen reader read the pair rather than
  six loose strings. The separators are drawn with CSS borders, never typed as
  "·" characters, which would be read aloud one by one.
-->
<section class="svc-hero">
  <p class="svc-hero__kicker">Discovery sprint</p>
  <h1 class="svc-hero__title">Know what to build before you staff it</h1>
  <p class="svc-hero__summary">
    Three weeks of interviews, analytics and prototypes that end in a scoped, costed plan
    your board can sign off - or a recommendation not to build at all.
  </p>

  <div class="svc-hero__actions">
    <a class="svc-hero__cta" href="/contact">Book a call</a>
    <a class="svc-hero__cta svc-hero__cta--secondary" href="/work">See the work</a>
  </div>

  <dl class="svc-hero__meta">
    <div class="svc-hero__meta-item">
      <dt>Duration</dt>
      <dd>2-3 weeks</dd>
    </div>
    <div class="svc-hero__meta-item">
      <dt>Team</dt>
      <dd>2 strategists, 1 engineer</dd>
    </div>
    <div class="svc-hero__meta-item">
      <dt>Starting at</dt>
      <dd>£18,000</dd>
    </div>
  </dl>
</section>