Anvil Mechanical — Dark Plumbing Emergency & Plans Page for Divi 5

The layout opens on a flat #151c33 navy background that runs unbroken through four of its five sections, creating a night-shift register that suits emergency services better than any hero image could. The entry section divides the desktop viewport into an asymmetric two-column row: the headline column occupies 16 of 24 flex units, leaving 8 for a subtext column that holds a single body sentence at 18px. The H1 is set at 52px Inter 700 with -1px letter-spacing, a compression that reads as deliberate and authoritative. A breadcrumb line above it uses 13px uppercase Inter at #9aa4c0 and 2px letter-spacing, establishing the typographic system that all section labels will follow. Both columns become full-width on phones and stack vertically, with section padding stepping down from 72px/64px on desktop to 40px/36px on phone so the entry never feels cramped on smaller screens.

The emergency process section introduces the layout's primary structural device: step numbers rendered as Text modules at 80px bold on desktop, scaling to 64px at tablet and 52px on phone, functioning as large anchors that break the right column into scannable thirds. Between each step a Divider module draws a 2px #2a3558 rule that separates the steps without adding visual weight. The left column carries the uppercase section label, a 44px H2, and a single-sentence intro; the right column holds the three numbered steps with H3 titles at 26px and body text at 17px. On phones the row wraps and the label-heading column arrives first, keeping context before content.

The plans section is the structural centerpiece and contains the layout's most considered design decision. Two pricing cards are nested inside a Group module configured as a CSS grid with two equal columns on desktop and a single column on phones. The cards are deliberately inverted rather than color-differentiated: the On-call card uses #0b1020 as its background, which is darker than the surrounding page navy, bordered with a 3px #2a3558 rule and 32px corner radii. The Service Agreement card flips to #f2f4fa, creating a sharp light/dark contrast entirely within the dark page without introducing a third color. Both cards hold a tier label, plan name at 28px, a 56px price figure with -1px letter-spacing, a top-ruled feature list using Font Awesome checkmarks in icon-and-text row groups, and a CTA button. The dark card gets a ghost outline button; the light card gets a filled dark button with inverse hover states on both.

The FAQ section splits into a header row and a question grid. The header row uses a 14:10 column split with alignItems: flex-end, so the phone CTA button on the right sits at the bottom of the H2 on the left, a small alignment choice that avoids floating the button awkwardly mid-column. Below it, six questions are distributed across two equal columns with 40px of row gap. Each Q&A block is a Group module anchored by a 4px #f2f4fa top border, an H3 question at 21px, and body text at 16px in #9aa4c0. The page closes with the only color break in the layout: a #7c9cff periwinkle section using space-between row justification, pairing a 48px heading on the left with a dispatch button and a 14px reassurance line on the right. No images appear anywhere in the layout; all visual hierarchy is carried by type scale, spacing, the light/dark card inversion, and that single accent section.