Anvil Mechanical — Dark Plumbing About Page for Divi 5

The layout opens on a deep navy section (#0b1020) structured as a two-column flex row. The text column claims 16 of 24 available flex units, leaving 8 for a portrait image at a 4:5 aspect ratio with objectFit: cover. Hierarchy inside that column runs three levels: a 14px uppercase Inter label in muted slate (#9aa4c0), a 64px h1 in near-white (#f2f4fa) with textWrap: balance and -1px letter-spacing, and a 19px body paragraph. Below the paragraph, a CTA group pairs a solid #7c9cff button with an inline ghost text link, giving visitors two exit paths without stacking elements vertically. On mobile the row switches to flexWrap: wrap, stacks text above the image, and the left column gains a 32px bottom margin so the content separates cleanly before the portrait.

The second section keeps the same dark background but adds a full-bleed image behind a 70% opacity Divi gradient overlay defined as two identical stops of rgba(7,11,26,0.7) with overlaysImage: on. Inside, a four-column milestone grid tells the company history in year-plus-copy cards. Each card opens with a 4px solid white top border as its only decorative rule, then drops a 48px bold year number, an h3 milestone label, and a one-line description. The grid steps from four columns on desktop to two on tablet and one on phone via explicit gridColumnCount changes, so the timeline remains legible at every viewport without custom CSS.

Sections three and four handle the people story. The crew section uses a two-row structure on a solid #0b1020 base: an asymmetric header row with 14/24 and 10/24 columns aligned via alignItems: flex-end so the heading and supporting copy share the same baseline, then a four-card team row where each column is sized at 6/24 desktop, 12/24 tablet, and 24/24 phone. Each card holds a square 1:1 image and a below-image group with a 4px top border that echoes the milestone section above, followed by the person's name and an uppercase role label. Section 4 shifts to #151c33 for contrast, places a 4:5 portrait with a pill-top and flat-bottom border radius on the left, and gives the right column three paragraphs of first-person copy at 22px, the largest body size in the layout, lending the founder statement deliberate weight.

The final two sections close the page. The values block places four Blurb modules in a 2x2 grid, each with a Font Awesome icon on a solid #7c9cff square with 8px corner radius; the icon itself renders at #0b1020 for full contrast against the accent fill. The CTA floats a 520px card left-anchored against a full-bleed photo (no overlay), with a #151c33 fill, 32px border-radius, a thin #2a3558 border, a horizontal divider rule separating copy from the button, and a solid accent call-to-action completing the visual circuit from the opening hero.