Components

Process

A numbered, paper-skinned step list styled as a work order — the home page's four-step process, reused as a company timeline on About.

Markup

<div class="wo-head rv"><span>WORK ORDER &mdash; STANDARD SEQUENCE</span><span>N&ordm; ________</span></div>
<ol class="steps">
  <li class="step rv">
    <span class="no">/ 01</span>
    <h3>You call. We log it.</h3>
    <p>Rennie books the window and texts you a work-order number.</p>
  </li>
</ol>

Work-order head

.wo-head is the small bordered mono label row above the step list, styled like the header of a printed work order — a title on the left, a blank field on the right.

Timeline reuse (About)

The same .step markup does double duty as a company timeline: instead of a <p> body, each step's third column holds a .event paragraph next to a .year figure styled at the same large display size as a step's heading — the grid column widths are shared between both uses, only the content in the middle/right columns differs.

<li class="step rv">
  <span class="no">N&ordm; 1</span>
  <span class="year">1987</span>
  <p class="event">Earl&rsquo;s first work order: a burst supply line on Cortland Ave.</p>
</li>