Bureau of Bad Ideas — Bold Creative_agency Case Files Page for Divi 5

The page opens with a white header section built around a deliberate asymmetry. The left column (flexType 16_24) carries the breadcrumb trail and the H1 "Case files" set in Unbounded at 52px, stepping down to 40px on tablet and 32px on phone. The narrower right column (flexType 8_24) holds a single editorial line in Work Sans 18px, positioned 36px below the heading on desktop. A 1px solid border in #0c0c14 runs the full section width at the bottom, closing the header the way a rule closes a newspaper column. The visual language is set before a single case appears: this is an agency that documents its arguments.

The two yellow (#ffd60a) sections carry the page's main content. Inside the first, three numbered case-study rows alternate their image position. Cases 01 and 03 place the 4:3-ratio photo on the left half; Case 02 places it on the right and applies a column order of -1 at the phone breakpoint, so the image still appears above the text copy when the row stacks vertically. Each case opens with a small-caps Work Sans label at 13px and 2px letter-spacing, followed by an Unbounded H3 at 32px (dropping to 28px on tablet, 24px on phone), a body paragraph constrained inside a 480px maxWidth group and an underlined "Read the file" link. The text column receives 48px right padding on desktop and 24px on tablet, preventing it from pressing against the photograph at mid-viewport widths.

Between the two yellow sections, a white section introduces the page's native interactive element: a divi/before-after-image slider. The columns are weighted 9/24 (legend) and 15/24 (slider), giving the comparison image the majority of the row width. The legend uses two stacked groups, each sitting beneath a 4px top border in #0c0c14 with a small-caps Before/After label above a one-sentence description. This border motif reappears in the press-quote columns later, visually tying the two white sections together. On tablet and phone both columns become full-width and the slider fills the screen, remaining fully operable via touch drag.

The second yellow section runs a three-column masonry-style gallery (1_3, 1_3, 1_3) with 16px gaps in both axes. Each column holds two stacked images: columns 1 and 3 lead with a tall 4:5 portrait followed by a 4:3 landscape; column 2 reverses the order. The deliberate height stagger reads as a pinboard without any JavaScript. The page closes in electric blue (#2438ff) with a horizontal flex group at the section level: a large Unbounded H2 on the left and a CTA group on the right containing a white button with square corners, a 3px black border, a 6px/6px white box-shadow offset that mimics a screen-print registration mark and a -4px Y translate on hover.