About Story

<!--
  The narrative is real <p> elements, not one blob with <br> between paragraphs:
  a screen reader can jump paragraph by paragraph, and a translator gets units
  that make sense.

  The founding-year callout is an <aside> - it is genuinely tangential to the
  prose beside it, which is exactly what the element is for. Its year is a real
  text node inside a <p>, not a background image or a ::before, so it can be
  read, copied and translated like any other fact on the page.

  The portrait's alt is empty because the caption underneath names the person.
  Filling both in makes a screen reader say the name twice in a row.
-->
<section class="abt-story" aria-labelledby="abt-story-title">
  <div class="abt-story__copy">
    <p class="abt-story__kicker">Our story</p>
    <h2 class="abt-story__title" id="abt-story-title">We started with one stubborn question</h2>

    <p class="abt-story__text">
      Why does software that costs a fortune so often ship late and please nobody? We had both
      spent a decade inside teams that could not answer it, so in 2019 we left to find out.
    </p>
    <p class="abt-story__text">
      The answer turned out to be unglamorous. Teams were not short of talent or tools - they
      were short of a decision-making habit. So that is what we build with our clients now,
      and the software is what falls out of it.
    </p>

    <aside class="abt-story__callout">
      <p class="abt-story__year">2019</p>
      <p class="abt-story__year-label">Founded in Bristol, two people and one contract</p>
    </aside>
  </div>

  <figure class="abt-story__figure">
    <img class="abt-story__image" src="/promo/all-access.svg" alt="" width="480" height="600" />
    <figcaption class="abt-story__caption">Priya Raman and Tom Ashcroft, founders</figcaption>
  </figure>
</section>