Columns 1–6 hold the text, top to bottom with space between: lowercase eyebrow, the headline at step 5 (weight 700, lowercase, tight leading, max ~16 characters per line), a lead paragraph (max 40 ch) and two square buttons side by side (primary fill + outlined). Columns 7–12 hold a 2×2 shape composition with no gutter: a circle in accent, a square in accent2, a triangle in the heading colour, a half-circle in yellow (surfaceAlt). Each shape fills its quarter exactly; shapes are flat, never outlined or shaded. At phone width the text comes first and the composition keeps its 2×2 form at full width below the buttons, closing the hero like a poster foot.

Bleed the hero edge to edge and split it into three equal colour fields with no gutter. Field 1 (1–4, accent2) holds one large yellow circle at the top and the lowercase eyebrow at the bottom in onAccent2. Field 2 (5–8, yellow / surfaceAlt) holds the headline at step 5, lowercase, weight 700, bottom-aligned, max ~9 characters per line. Field 3 (9–12, accent) holds the lead paragraph and an underlined CTA in onAccent at the bottom. Every field is the full hero height (min 88vh). At phone width the fields stack as three bands and field 1 shrinks to a short band.

A perfect circle in accent fills columns 6–12 across the first three grid rows. The eyebrow sits in 1–4 on row 1; the headline (step 6, weight 700, lowercase, tight, max ~18 characters per line) runs 1–10 on row 2 so its last words sit on the circle — the type crossing the shape is the point. Row 3: lead paragraph and primary CTA in 1–5. Row 4: a short bar in accent2 on 1–3. At phone width the circle is hidden and the bar stays as a 64 px stripe above the eyebrow.

Column 1 carries the eyebrow rotated -90° reading bottom to top across the whole hero. On the remaining columns, top to bottom: an accent2 bar on 2–9, the headline on 2–12 at step 6 (weight 700, lowercase), an accent bar on 5–12 (offset right of the first), then the lead and an outlined CTA on 2–6 beside a yellow triangle on 10–12. Bars are solid, 24–40 px tall, square ends. At phone width the vertical label hides and the bars run full width.

Split the hero into two equal rows on halves. Top-left (1–6): eyebrow and headline at step 5 (max ~14 characters per line), lowercase, bottom-aligned. Top-right (7–12): a grayscale photograph cropped to a circle on the surface colour. Bottom-left (1–6): a yellow (surfaceAlt) field with the lead paragraph and a primary button. Bottom-right (7–12): one solid accent2 square. No gutter between quadrants. At phone width: headline, photo, yellow field (source order); the square hides.

A row of three 16 px shapes — circle (accent), square (accent2), triangle (yellow) — then the lowercase wordmark, all in columns 1–4. Page links in lowercase start on the column-7 line, plain, body size. A 4 px bar in the heading colour spans the full grid underneath. At phone width the links scroll horizontally.

Two blocks with no gutter: the wordmark in a solid accent block (onAccent text) on 1–3, and the page links on a yellow (surfaceAlt) band across 4–12, plain, lowercase, evenly spaced. Both blocks are the same height (≈64 px). At phone width the band scrolls horizontally beneath the logo block.

Columns 1–3 hold one giant numeral (step 8, weight 700, accent2) — the section's number, like a workshop programme. Columns 4–12: the statement at step 4 (lowercase, weight 500, max ~30 ch), a 16 px accent bar, then the body split into two columns, 4–8 and 9–12. At phone width the numeral sits above the statement at step 6.

The section title (h2, lowercase) on 1–6. Below, four to six features in two columns. Each feature is a small 4-column grid: a solid 48 px shape in column 1, then title (h3, lowercase) and a short paragraph across 2–4. Cycle the shapes in order circle (accent), square (accent2), triangle (yellow) — the shapes are the icons, so no other icons. At phone width features stack, each keeping its shape on the left.

Section label (lowercase eyebrow) and h2 above. Each item: a solid accent2 block on 1–2 holding the number in onAccent2 at step 4 (weight 700), the title (h3, lowercase) on 3–7 and one paragraph on 8–12, top-aligned. A 4 px bar in the heading colour runs above every row and one more closes the list; no hairlines. At phone width the number block sits above the title as a 64 px square.

Title (h3, lowercase) on 1–6 with a small accent circle beside it. Then two to four figures in one row with a 48 px gap. Each figure is a solid square block (accent / accent2 / yellow, cycling) with the number at step 5, weight 700, in the block's on-colour, bottom-left inside the block; a small lowercase label sits under the block. At phone width the blocks stack full width.

Title (h2, lowercase) on 1–6. Photo 1 is cropped to a circle on 1–5 across two rows; photo 2 is 16:9 on 6–12; under it a yellow half-circle on 6–8 and a square photo on 9–12. Photos are grayscale or full colour, never filtered with colour overlays. At phone width: circle, wide, square; the half-circle hides.

Section background accent2, bleeding edge to edge. A yellow circle fills 1–4 vertically centred. The quote on 5–12 at step 4 (lowercase, weight 500, onAccent2, max ~34 ch), then the author (weight 700) and role in onAccent2. No quotation-mark glyph — the circle is the mark. At phone width the circle shrinks to 96 px above the quote.

Section background yellow (surfaceAlt), bleeding edge to edge. Headline (step 5, lowercase, weight 700, max ~18 ch) and one primary button (square, accent fill) on 1–7. A large solid triangle in accent fills 9–12, pointing up, its base on the section's bottom edge. At phone width the triangle shrinks and sits under the button.

Columns 1–4: the h2 (lowercase) above a solid 96 px accent2 square. Columns 5–12: four to eight questions. Each question is an 8-column row: a 16 px accent circle in column 1, then the question (h4, lowercase) and the answer directly under it across 2–8. A 2 px rule separates questions. At phone width the square hides.

Title (h2, lowercase) above. Each plan is one row separated by a 4 px bar: a solid shape on 1–2 (circle, square, triangle — one per tier, growing in size), plan name (h3, lowercase) 3–5, price 6–8 at step 4 weight 700, a short list of inclusions 9–10, and a primary button 11–12. The recommended plan's row has a yellow background. At phone width each row stacks: shape, name, price, inclusions, button.

An accent2 bar on 1–4 and the h2 (lowercase) open the section. Team members four per row: a grayscale portrait cropped to a circle, then name (h4, lowercase) and role (small, muted) flush left under it. At phone width two per row.

Columns 1–6: a solid accent block with the h2 (lowercase), address, email and phone in onAccent, top to bottom, and a yellow circle at the bottom. Columns 7–12: the form — name, email, message — with square fields, 2 px borders and a primary submit button. At phone width the block sits above the form.

Each post is one row separated by a 2 px rule: the date in a yellow (surfaceAlt) block on 1–2 (small, weight 700), the title (h3, lowercase) on 3–9, a one-line summary on 10–12. No thumbnails. At phone width the date block sits above the title.

The footer is three equal blocks, edge to edge: the lowercase wordmark on accent (1–4, onAccent), the page links stacked on yellow (5–8), and the address plus legal line on accent2 (9–12, onAccent2). At phone width the blocks stack as three flush bands with no gap between them.

A 4 px bar in the heading colour across the grid, then one line: three 24 px shapes (circle accent, square accent2, triangle yellow) on 1–3, the lowercase wordmark on 4–6, links in a row on 7–10 and the legal line (small, muted) on 11–12.