Northwind Architects — Bold Architecture Services Page for Divi 5

Northwind Architects uses a four-section typographic hierarchy to walk a prospective client from an introduction through services, fees, and questions before the final call to action. The palette is deliberately restrained: warm off-white (#f0f1ed) and sage grey (#d6d8d3) carry the first three sections, with near-black (#0d0d0d) used exclusively as structure (section border, divider weights, button borders, grid lines) and acid lime (#d4ff2a) held back for the closing CTA where it hits with maximum contrast after several calm scrolls. Every display heading is Archivo Black at 900 weight with -1px letter-spacing and uppercase text transform, while eyebrow labels use Space Mono at 13-14px with 2px tracking. Body copy sits in Public Sans at 1.6em line-height. No CSS overrides are needed for this pairing; every value is wired directly into the module decoration fields.

The page header splits the viewport into a 16/24 left column holding the H1 at 52px (40px tablet, 32px phone) and a narrower 8/24 right column that adds 36px top padding on desktop, aligning its single-line intro text with the heading's optical midpoint rather than its cap height. On phone both columns go full-width and stack in source order; the extra padding drops to zero because the stacked layout makes it redundant. Immediately below, the services section centers an 880px content group and presents five offerings: Feasibility, Concept design, Detail design, Construction support, and Handover. Each service is an icon-plus-text flex row: a 24px Font Awesome solid icon at fixed width on the left, a flex-grow text column on the right carrying an Archivo 700 H3 and a Public Sans 16px description. A 4px solid divider opens the list and 2px dividers separate each item, with 24px vertical padding on desktop (18px on phone) giving every row room without inflating the section height.

The fees section switches to #d6d8d3 for clear visual separation. Its comparison matrix is not a table module but a divi/group set to display:grid with gridColumnCount:4 and a 1px gap over a #0d0d0d background. Cell fills alternate between #d6d8d3 and #f0f1ed, so the black background shows through the gaps as hairline grid lines with no border duplication. Three service tiers (Feasibility at a fixed fee, Design at 8%, Full service at 11%) are compared across six feature rows. The Design column sits on #f0f1ed cells, making it visually prominent through background alone; the "Most popular" callout is a plain divi/text module inside the header cell. A ghost button with a 4px solid black border closes the section.

The FAQ opens with an asymmetric two-column header row (14/24 plus 10/24) where the narrower column holds a secondary ghost button alongside a short intro line. Six questions are then arranged in two equal 12/24 columns with 40px row gap on desktop (32px on phone). Each question group uses a 4px top border set via divi/group border decoration with 20px top padding, so the border reads as a miniature heading rule. The acid-lime CTA closes the layout with a horizontal flex group placing an Archivo Black H2 at 48px alongside the "Request a proposal" button; on phone the group collapses to a column so the heading always comes first.