Bureau of Bad Ideas — Bold Creative_agency Departments Page for Divi 5

The layout opens with a cinematic hero: a full-bleed photograph sits behind a flat dark overlay (rgba(12,12,20,0.7) at both gradient stops), letting the near-black tint do the contrast work while the section's base color of electric yellow (#ffd60a) reads through at the edges. The H1 "Departments" is set in Unbounded at 56px, weight 800, -1px letter-spacing, collapsing to 32px on phones. A white Work Sans breadcrumb above it and a subheading capped at 600px max-width below create a reading column that stays left-aligned rather than centered, which keeps the page editorial rather than corporate. Section padding steps down in three explicit breakpoints (120px, 88px, 64px top) so the hero never feels cramped on a tablet.

The services section on white runs a single column at 880px max-width. Five departments are presented as horizontal rows, each opening with a FontAwesome 5 solid icon (lightbulb, paintbrush, megaphone, desktop, cube) at 24px with a 24px column gap before the H3 title and description text. A heavy 4px divider opens the list; 2px dividers separate every entry. The H3 labels are Unbounded at 20px; descriptions are Work Sans 16px in #3d3d52. There are no cards or shadows here: the rhythm is purely typographic and relies entirely on rule weight and spacing to signal hierarchy.

The retainer section flips to yellow and introduces three pricing cards in equal third columns. Cards carry a 3px solid black border and a 6px/6px offset box shadow with zero blur, giving the whole section a flat, screen-printed quality. The middle card ("The Full Argument") inverts to vivid blue (#2438ff) with white text and carries a pill-shaped "Most popular" badge. Each card's feature list uses flexGrow on the containing group so all three cards in a row stretch to identical height regardless of bullet count. Every card and its button lift 4px on hover via CSS translate.

A white "process promises" section below uses a two-column layout: the left holds the heading copy and the right arranges eight checkmark items in a CSS grid with two equal columns, collapsing to one on phones. Below that, the FAQ follows the same two-column structure, six questions split evenly, each framed by a 4px top border without needing extra vertical spacing. The page closes on a full-width blue CTA banner that places the H2 and the button group in a horizontal flex row with space-between justification, stacking cleanly on phones.