Components

Service Rows

The numbered, full-width row list used on the home page to list every trade at a glance, each row linking to its detail anchor.

Markup

<div class="svc-rows">
  <a class="svc" href="services.html#t-plumbing">
    <span class="no">/ 01</span>
    <h3>Plumbing</h3>
    <span class="tag">DRAINS &middot; REPIPES &middot; SUMP PUMPS</span>
    <span class="arrow" aria-hidden="true">&rarr;</span>
  </a>
  <a class="svc" href="services.html#t-heating">
    <span class="no">/ 02</span>
    <h3>Heating</h3>
    <span class="tag">FURNACES &middot; BOILERS &middot; RADIANT</span>
    <span class="arrow" aria-hidden="true">&rarr;</span>
  </a>
</div>

Hover state

Each .svc row is a single full-width link. On hover, the row's background lifts to --iron-2, the <h3> nudges right and turns amber, and the trailing .arrow fades in and slides into place — all driven by CSS transitions on the row's own hover/focus state, no JavaScript.

On narrow screens

Below 860px, the .tag spec text and the trailing .arrow both hide, leaving just the number and the trade name — see Responsive.