Components

Trades Rows

The large editorial split rows on the Trades page — one per trade — alternating photo side with the reusable photo frame/stamp.

Markup

<article class="trow" id="t-plumbing">
  <div class="media rv">
    <div class="frame"><span class="stamp">/ 01</span><img src="img/job-sewer.jpg" width="928" height="1152" loading="lazy" alt="…"></div>
  </div>
  <div class="body rv">
    <span class="label">/ 01 &mdash; <b>PLUMBING</b></span>
    <h2 class="d">Water where it<br><em>shouldn&rsquo;t be.</em></h2>
    <p class="liner">Drains, supply, sewer, and everything that holds pressure.</p>
    <span class="spec">DRAIN CLEARING &middot; SEWER MAINS &middot; REPIPES</span>
    <span class="cost">FLAT RATE IN WRITING &mdash; SAYING NO COSTS $0</span>
    <a class="tert go" href="service-single.html">Open the plumbing file</a>
  </div>
</article>

Flip modifier

Add .flip to a .trow to swap which side the photo sits on, alternating media/text left-right down the page for visual rhythm across a list of rows.

<article class="trow flip" id="t-heating">
  …
</article>

Reusable frame + stamp

.frame (a fixed-aspect-ratio photo crop with a subtle hover zoom on its inner <img>) and its corner .stamp label are reused wherever the site needs a labeled photo — the Job Grid, Feature Band, and the Contact page's map photo all build on the same two classes.

Cost chip

.cost is the small pill-shaped amber-outlined label used to state a pricing promise inline (“FLAT RATE IN WRITING”). On a .paper section, pair it with .cost-neutral (see Manifesto) for a muted ink version instead of amber.