Anvil Mechanical — Dark Plumbing Projects Page for Divi 5

The layout opens with a compact header section on #151c33 (one shade lighter than the main near-black) that uses a 16/24 + 8/24 asymmetric two-column split to pair the H1 "Projects" (Inter 700, 52px, letter-spacing -1px) with a short location descriptor. A 1px #2a3558 bottom border draws a hard edge between the header and the content below, establishing the section-separation language used throughout. On phones the row wraps to a single column and the H1 steps down to 32px, keeping the hierarchy readable without overflow.

The portfolio section sits on #0b1020 (near-black) with 100px vertical padding. A flex row aligned to flex-end pairs the eyebrow-plus-H2 group on the left with a ghost CTA button on the right, so the conversion intent lands before a visitor finishes reading the section label. Below it, a native CSS grid (two columns, 32px gap) holds five project cards. The first, Calumet Process Plant, spans both columns at a 2:1 landscape ratio, giving it the visual weight of a featured case study. The remaining four fill at 4:3. Each card pairs a sharp-edge object-fit: cover image with an H3 project name (Inter 600, 22px) and a category badge: a rounded pill with a 3px #2a3558 border and uppercase #9aa4c0 label. On phones the grid drops to one column and the row gap tightens to 32px.

The third section, "The work behind the work," shifts to process photography across a three-column equal grid. Each column stacks two images at mixed aspect ratios (a 4:5 portrait above a 4:3 landscape, or the inverse) so column heights stagger naturally without masonry JavaScript. A standard Divi 1_3/1_3/1_3 row collapses to a single column on mobile, letting visitors scroll all six process shots in sequence. The section header uses the same asymmetric 14/24 + 10/24 column split as the portfolio header, keeping the layout's internal rhythm consistent.

A full-bleed testimonial section overlays a Pexels industrial photograph with a uniform rgba(7,11,26,0.7) gradient on both stops, ensuring legibility regardless of the underlying image content. An oversized opening quotation mark at 120px and a pull-quote body at 42px create unmistakable typographic hierarchy, bridged to the attribution by a 64px white divider rule. The layout closes on a #7c9cff periwinkle section, the only warm accent in the otherwise navy-and-near-black palette. It places the H2 and the primary "Request a quote" button side-by-side with a short scarcity note below the button, projecting the quiet selectivity of a contractor that books by project value rather than volume.