Marlowe & Finch — Elegant Law_firm Home Page for Divi 5

The layout opens with a spacious hero section on a cool #eceff3 blue-grey ground -- 180px of top padding on desktop, stepping down to 80px on phones -- that sets a deliberate, unhurried pace before a single element loads. The typographic hierarchy is built from two contrasting font families: Spectral, a literary serif, carries every heading and large display numeral, while Source Sans 3, a clean humanist sans-serif, handles body text, eyebrow labels, and the CTA button. The firm name appears as a 13px uppercase eyebrow (600 weight, 2px letter-spacing) before the h1 drops in at 104px with a tight 1.02em line-height and -1px letter-spacing -- a scale that commands the page without decorative flourish. Below the h1, a 3px double-rule divider in #cfd6de separates the headline block from a two-column text row where a 20px body paragraph sits in a wider 16/24 flex column while a minimal underlined link occupies the remaining 8/24, creating an asymmetric editorial rhythm that reads as considered rather than templated.

The second section introduces a 4-cell statistics grid built on a divi/group with CSS grid layout: 4 columns on desktop, collapsing explicitly to 2 columns on both tablet and phone. The cells sit on the #eceff3 base separated by 1px hairline gaps on a #cfd6de grid background -- a technique that avoids the visual heaviness of bordered cards while still giving each stat a distinct boundary. Each cell pairs a Spectral numeral at 64px, weight 300, letter-spacing -2px, with a Source Sans 3 uppercase label at 13px and 2px tracking. The contrast of a light-weight display number against a compact uppercase caption is the section's entire design language. The section is introduced by a header row using the same 16/24 + 8/24 asymmetric column split from the hero, maintaining geometric coherence across the page.

The practice areas section switches to a white (#ffffff) ground, creating a deliberate tonal break from the repeating blue-grey. Four native divi/blurb modules are arranged in a 2x2 grid, each leading with a FontAwesome icon set against a deep crimson (#7a1e2c) square with zero border-radius -- institutional, not decorative. Spectral titles and Source Sans 3 body text carry through from the sections above, and the whole section is anchored by a centred heading at 48px (max-width 810px) and a 640px-wide subtext line. A full-width testimonial section follows on the #eceff3 ground: an ornamental Spectral opening quote mark at 160px (weight 700) leads into a centred pull-quote at 44px with a 1.3em line-height (max-width 960px), finished with a 56x56px circular avatar, name, and title stack -- the quote mark scaling to 96px and the quote text to 26px on phones.

The page closes with a deep crimson (#7a1e2c) CTA section that uses horizontal flex layout (space-between, nowrap) on desktop: a Spectral h2 at 48px on the left, and a ghost button with a 4px double-rule white border on the right, with a 14px subtext line below it that answers the hesitation silently. On mobile, the flex direction flips to column and left-aligns both elements. All five sections carry explicit breakpoint values in the JSON for padding, font sizes, column widths, and grid column counts -- desktop, tablet, and phone are each defined, with no reliance on Divi defaults or inherited scaling. The result is a layout that adapts precisely rather than approximately.