Marlowe & Finch — Elegant Law_firm Practice Areas Page for Divi 5

Marlowe & Finch opens with a full-bleed hero in deep navy (#14202e), padded 112px top and 168px bottom on desktop, with a native Divi 5 curve divider sweeping the base into the white content below. A small-caps Source Sans 3 eyebrow, a 60-pixel Spectral H1 at 1.12em line-height, a 72-pixel centred double-rule accent, and a paragraph in the pale #eceff3 tint occupy a single full-width column. The hierarchy is deliberate: the eyebrow anchors the page context, the H1 carries the firm's value statement, and the divider provides a visual breath before the content sections begin.

The practice areas section fills a centred single column with a section label, an H2 introduction, and five icon-led rows. Each row is a flex group: a 24-pixel Font Awesome solid icon on the left (gavel, briefcase, heart, file, building) and a flex-grow text group on the right with an H3 title in Spectral and a one-sentence body in Source Sans 3. Rows are separated by a light #cfd6de double-rule divider, while the section header uses the heavier #14202e rule for contrast. The rows are independent groups, so adding or removing a practice area means duplicating or deleting one flex group and its adjacent divider.

The fees section introduces a two-column row (8/24 left, 16/24 right on desktop) where the left column holds the heading and a brief reassurance line, and the right column holds a two-column CSS grid of pricing cards. The light card uses an #eceff3 background with a 4px double border in #14202e; the dark card reverses to a #14202e background with #eceff3 type and a matching dark border. Both cards display a label, a Spectral H3, a large 56-pixel Spectral price figure at weight 700, five Font Awesome checkmark feature rows separated by a 4px top double-rule, and a ghost button that inverts on hover. The contrast between cards is achieved entirely through background and border color, with no duplicate structural markup.

A consultation checklist section and a FAQ section follow the same asymmetric split. The checklist right column uses a CSS grid (two columns on desktop, one on phone) holding eight icon-and-text pairs with equal vertical padding. The FAQ section opens with a header row where the title column (14/24) and the intro-plus-CTA column (10/24) align to the bottom of the row, then a second row holds two equal columns each with three Q&A groups topped by a 4px double-rule. Across all sections, padding reduces in two steps and heading sizes scale down at tablet and phone breakpoints, so the layout holds its proportions at every screen width without any custom CSS.