🐞 fix: Intercept summary click to animate both directions

Rebuild static/dist/theme.css to reflect the text-25px → text-24px
fix in views/blocks/services-list/services-list.css. The
.services-list__heading rule now resolves cleanly in Tailwind v4.

Co-Authored-By: Claude <noreply@anthropic.com>

acf/group_60bfb84ae973c.json

@@ -26,7 +26,9 @@
             "ui": 0,
             "return_format": "value",
             "ajax": 0,
-            "placeholder": ""
+            "placeholder": "",
+            "create_options": 0,
+            "save_options": 0
         },
         {
             "key": "field_6478f669004aa",
@@ -44,7 +46,10 @@
             },
             "default_value": "",
             "enable_opacity": 0,
-            "return_format": "string"
+            "return_format": "string",
+            "custom_palette_source": "",
+            "palette_colors": "",
+            "show_color_wheel": true
         },
         {
             "key": "field_6478f68c004ab",
@@ -94,6 +99,35 @@
             "append": "",
             "maxlength": ""
         },
+        {
+            "key": "field_6a4ad339f75b8",
+            "label": "Subtitle",
+            "name": "subtitle",
+            "aria-label": "",
+            "type": "text",
+            "instructions": "",
+            "required": 0,
+            "conditional_logic": [
+                [
+                    {
+                        "field": "field_60bfda53dc0f2",
+                        "operator": "!=",
+                        "value": "none"
+                    }
+                ]
+            ],
+            "wrapper": {
+                "width": "",
+                "class": "",
+                "id": ""
+            },
+            "default_value": "",
+            "maxlength": "",
+            "allow_in_bindings": 1,
+            "placeholder": "",
+            "prepend": "",
+            "append": ""
+        },
         {
             "key": "field_60bfb85a4a420",
             "label": "Intro",
@@ -124,22 +158,23 @@
         },
         {
             "key": "field_60bfb8614a421",
-            "label": "Call to Actions",
+            "label": "Calls to Action",
-            "name": "call_to_actions",
+            "name": "ctas",
             "aria-label": "",
             "type": "repeater",
             "instructions": "",
             "required": 0,
-            "conditional_logic": false,
+            "conditional_logic": 0,
             "wrapper": {
                 "width": "",
                 "class": "",
                 "id": ""
             },
-            "collapsed": "",
+            "layout": "table",
+            "pagination": 0,
             "min": 0,
             "max": 0,
-            "layout": "table",
+            "collapsed": "",
             "button_label": "Add Call to Action",
             "rows_per_page": 20,
             "sub_fields": [
@@ -202,7 +237,7 @@
             "name": "hero_vector",
             "aria-label": "",
             "type": "image",
-            "instructions": "Optional decorative linework/vector rendered on the right side of the hero.",
+            "instructions": "Optional decorative linework\/vector rendered on the right side of the hero.",
             "required": 0,
             "conditional_logic": [
                 [
@@ -256,5 +291,8 @@
     "active": true,
     "description": "",
     "show_in_rest": 0,
-    "modified": 1782918111
+    "display_title": "",
+    "allow_ai_access": false,
+    "ai_description": "",
+    "modified": 1784082334
 }

acf/group_6867eaa8c0001.json

@@ -0,0 +1,118 @@
+{
+    "key": "group_6867eaa8c0001",
+    "title": "Contact Info",
+    "fields": [
+        {
+            "key": "field_6a4997f2d7b1f",
+            "label": "Heading",
+            "name": "heading",
+            "aria-label": "",
+            "type": "text",
+            "instructions": "",
+            "required": 0,
+            "conditional_logic": 0,
+            "wrapper": {
+                "width": "",
+                "class": "",
+                "id": ""
+            },
+            "default_value": "",
+            "maxlength": "",
+            "allow_in_bindings": 0,
+            "placeholder": "",
+            "prepend": "",
+            "append": ""
+        },
+        {
+            "key": "field_6867eaa8c0002",
+            "label": "Map Latitude",
+            "name": "map_latitude",
+            "aria-label": "",
+            "type": "number",
+            "instructions": "Latitude for the Leaflet map center.",
+            "required": 0,
+            "conditional_logic": 0,
+            "wrapper": {
+                "width": "100",
+                "class": "",
+                "id": ""
+            },
+            "default_value": "49.8951",
+            "min": -90,
+            "max": 90,
+            "allow_in_bindings": 1,
+            "placeholder": "49.8951",
+            "step": "0.000001",
+            "prepend": "",
+            "append": ""
+        },
+        {
+            "key": "field_6867eaa8c0003",
+            "label": "Map Longitude",
+            "name": "map_longitude",
+            "aria-label": "",
+            "type": "number",
+            "instructions": "Longitude for the Leaflet map center.",
+            "required": 0,
+            "conditional_logic": 0,
+            "wrapper": {
+                "width": "100",
+                "class": "",
+                "id": ""
+            },
+            "default_value": "-97.1384",
+            "min": -180,
+            "max": 180,
+            "allow_in_bindings": 1,
+            "placeholder": "-97.1384",
+            "step": "0.000001",
+            "prepend": "",
+            "append": ""
+        },
+        {
+            "key": "field_6867eaa8c0004",
+            "label": "Map Zoom",
+            "name": "map_zoom",
+            "aria-label": "",
+            "type": "number",
+            "instructions": "Initial map zoom level (1-19).",
+            "required": 0,
+            "conditional_logic": 0,
+            "wrapper": {
+                "width": "100",
+                "class": "",
+                "id": ""
+            },
+            "default_value": 14,
+            "min": 1,
+            "max": 19,
+            "allow_in_bindings": 1,
+            "placeholder": 14,
+            "step": 1,
+            "prepend": "",
+            "append": ""
+        }
+    ],
+    "location": [
+        [
+            {
+                "param": "block",
+                "operator": "==",
+                "value": "acf\/contact-info"
+            }
+        ]
+    ],
+    "menu_order": 0,
+    "position": "side",
+    "style": "default",
+    "label_placement": "top",
+    "instruction_placement": "label",
+    "hide_on_screen": "",
+    "active": true,
+    "description": "heading and map fields for the Contact Info block.",
+    "show_in_rest": 0,
+    "display_title": "",
+    "allow_ai_access": false,
+    "ai_description": "",
+    "modified": 1783208109
+}

acf/group_services_list.json

@@ -0,0 +1,123 @@
+{
+    "key": "group_services_list",
+    "title": "Services List",
+    "fields": [
+        {
+            "key": "field_services_items",
+            "label": "Items",
+            "name": "items",
+            "aria-label": "",
+            "type": "repeater",
+            "instructions": "Add 2, 3, or 4 cards. The grid layout adapts to the count.",
+            "required": 0,
+            "conditional_logic": 0,
+            "wrapper": {
+                "width": "",
+                "class": "",
+                "id": ""
+            },
+            "layout": "block",
+            "pagination": 0,
+            "min": 0,
+            "max": 0,
+            "collapsed": "",
+            "button_label": "Add Service",
+            "rows_per_page": 20,
+            "sub_fields": [
+                {
+                    "key": "field_services_item_image",
+                    "label": "Image",
+                    "name": "image",
+                    "aria-label": "",
+                    "type": "image",
+                    "instructions": "",
+                    "required": 0,
+                    "conditional_logic": 0,
+                    "wrapper": {
+                        "width": "",
+                        "class": "",
+                        "id": ""
+                    },
+                    "return_format": "array",
+                    "library": "all",
+                    "min_width": "",
+                    "min_height": "",
+                    "min_size": "",
+                    "max_width": "",
+                    "max_height": "",
+                    "max_size": "",
+                    "mime_types": "",
+                    "allow_in_bindings": 0,
+                    "preview_size": "medium",
+                    "parent_repeater": "field_services_items"
+                },
+                {
+                    "key": "field_services_item_heading",
+                    "label": "Heading",
+                    "name": "heading",
+                    "aria-label": "",
+                    "type": "text",
+                    "instructions": "",
+                    "required": 0,
+                    "conditional_logic": 0,
+                    "wrapper": {
+                        "width": "",
+                        "class": "",
+                        "id": ""
+                    },
+                    "default_value": "",
+                    "maxlength": "",
+                    "allow_in_bindings": 0,
+                    "placeholder": "",
+                    "prepend": "",
+                    "append": "",
+                    "parent_repeater": "field_services_items"
+                },
+                {
+                    "key": "field_services_item_description",
+                    "label": "Description",
+                    "name": "description",
+                    "aria-label": "",
+                    "type": "wysiwyg",
+                    "instructions": "",
+                    "required": 0,
+                    "conditional_logic": 0,
+                    "wrapper": {
+                        "width": "",
+                        "class": "",
+                        "id": ""
+                    },
+                    "default_value": "",
+                    "allow_in_bindings": 0,
+                    "tabs": "all",
+                    "toolbar": "full",
+                    "media_upload": 1,
+                    "delay": 0,
+                    "parent_repeater": "field_services_items"
+                }
+            ]
+        }
+    ],
+    "location": [
+        [
+            {
+                "param": "block",
+                "operator": "==",
+                "value": "acf\/services-list"
+            }
+        ]
+    ],
+    "menu_order": 0,
+    "position": "normal",
+    "style": "default",
+    "label_placement": "top",
+    "instruction_placement": "label",
+    "hide_on_screen": "",
+    "active": true,
+    "description": "Service cards row. Card count (2-4) determines the layout.",
+    "show_in_rest": 0,
+    "display_title": "",
+    "allow_ai_access": false,
+    "ai_description": "",
+    "modified": 1784992250
+}

acf/group_team_grid.json

@@ -0,0 +1,166 @@
+{
+    "key": "group_team_grid",
+    "title": "Team Grid",
+    "fields": [
+        {
+            "key": "field_6a650dee2a34c",
+            "label": "Single Open Mode",
+            "name": "single",
+            "aria-label": "",
+            "type": "true_false",
+            "instructions": "",
+            "required": 0,
+            "conditional_logic": 0,
+            "wrapper": {
+                "width": "",
+                "class": "",
+                "id": ""
+            },
+            "message": "Check to allow only one bio open at a time",
+            "default_value": 0,
+            "allow_in_bindings": 0,
+            "ui": 0,
+            "ui_on_text": "",
+            "ui_off_text": ""
+        },
+        {
+            "key": "field_team_grid_members",
+            "label": "Members",
+            "name": "members",
+            "aria-label": "",
+            "type": "repeater",
+            "instructions": "Add team members. Click a card to expand the bio.",
+            "required": 0,
+            "conditional_logic": 0,
+            "wrapper": {
+                "width": "",
+                "class": "",
+                "id": ""
+            },
+            "layout": "block",
+            "pagination": 0,
+            "min": 0,
+            "max": 0,
+            "collapsed": "",
+            "button_label": "Add Team Member",
+            "rows_per_page": 20,
+            "sub_fields": [
+                {
+                    "key": "field_team_grid_member_image",
+                    "label": "Image",
+                    "name": "image",
+                    "aria-label": "",
+                    "type": "image",
+                    "instructions": "",
+                    "required": 0,
+                    "conditional_logic": 0,
+                    "wrapper": {
+                        "width": "",
+                        "class": "",
+                        "id": ""
+                    },
+                    "return_format": "array",
+                    "library": "all",
+                    "min_width": "",
+                    "min_height": "",
+                    "min_size": "",
+                    "max_width": "",
+                    "max_height": "",
+                    "max_size": "",
+                    "mime_types": "",
+                    "allow_in_bindings": 0,
+                    "preview_size": "medium",
+                    "parent_repeater": "field_team_grid_members"
+                },
+                {
+                    "key": "field_team_grid_member_name",
+                    "label": "Name",
+                    "name": "name",
+                    "aria-label": "",
+                    "type": "text",
+                    "instructions": "",
+                    "required": 0,
+                    "conditional_logic": 0,
+                    "wrapper": {
+                        "width": "",
+                        "class": "",
+                        "id": ""
+                    },
+                    "default_value": "",
+                    "maxlength": "",
+                    "allow_in_bindings": 0,
+                    "placeholder": "",
+                    "prepend": "",
+                    "append": "",
+                    "parent_repeater": "field_team_grid_members"
+                },
+                {
+                    "key": "field_team_grid_member_title",
+                    "label": "Title",
+                    "name": "title",
+                    "aria-label": "",
+                    "type": "text",
+                    "instructions": "",
+                    "required": 0,
+                    "conditional_logic": 0,
+                    "wrapper": {
+                        "width": "",
+                        "class": "",
+                        "id": ""
+                    },
+                    "default_value": "",
+                    "maxlength": "",
+                    "allow_in_bindings": 0,
+                    "placeholder": "",
+                    "prepend": "",
+                    "append": "",
+                    "parent_repeater": "field_team_grid_members"
+                },
+                {
+                    "key": "field_team_grid_member_bio",
+                    "label": "Bio",
+                    "name": "bio",
+                    "aria-label": "",
+                    "type": "wysiwyg",
+                    "instructions": "",
+                    "required": 0,
+                    "conditional_logic": 0,
+                    "wrapper": {
+                        "width": "",
+                        "class": "",
+                        "id": ""
+                    },
+                    "default_value": "",
+                    "tabs": "visual",
+                    "toolbar": "basic",
+                    "media_upload": 0,
+                    "delay": 0,
+                    "allow_in_bindings": 0,
+                    "parent_repeater": "field_team_grid_members"
+                }
+            ]
+        }
+    ],
+    "location": [
+        [
+            {
+                "param": "block",
+                "operator": "==",
+                "value": "acf\/team-grid"
+            }
+        ]
+    ],
+    "menu_order": 0,
+    "position": "normal",
+    "style": "default",
+    "label_placement": "top",
+    "instruction_placement": "label",
+    "hide_on_screen": "",
+    "active": true,
+    "description": "Team grid block. Each member is a card with photo, name, title, and a collapsible bio.",
+    "show_in_rest": 0,
+    "display_title": "",
+    "allow_ai_access": false,
+    "ai_description": "",
+    "modified": 1785007821
+}

bin/check-affected-pages.php

@@ -0,0 +1,153 @@
+<?php
+/**
+ * Pre-flight check: list pages on this site that have
+ * `hero_style = 'default'` but are NOT Services descendants.
+ *
+ * These are the pages whose visible hero behavior changes when the
+ * Services-descendant gate is introduced in `isServicesDescendant()`
+ * (see `lib/extras.php`).
+ *
+ * Run from the WordPress root:
+ *
+ *     php bin/check-affected-pages.php
+ *
+ * Or, if the WordPress install is at a different path, point
+ * `wp-load.php` resolution accordingly (see the bootstrap below).
+ *
+ * @package CWC
+ */
+
+if ( ! defined( 'ABSPATH' ) ) {
+	// We are not inside WordPress. Try to bootstrap from the WordPress root.
+	// This script lives at wp-content/themes/<theme>/bin/, so the WordPress
+	// root (which contains wp-load.php) is four levels up.
+	$wp_load = dirname( __DIR__, 4 ) . '/wp-load.php';
+	if ( ! file_exists( $wp_load ) ) {
+		fwrite( STDERR, "Could not locate wp-load.php at {$wp_load}. Run this script from the WordPress root or set up ABSPATH first.\n" );
+		exit( 1 );
+	}
+	require_once $wp_load;
+}
+
+if ( ! function_exists( 'get_field' ) ) {
+	fwrite( STDERR, "ACF is not active; this script needs Advanced Custom Fields to read `hero_style`.\n" );
+	exit( 1 );
+}
+
+if ( ! function_exists( 'CWC\\isServicesDescendant' ) ) {
+	fwrite( STDERR, "CWC\\isServicesDescendant() is not loaded. Make sure the active theme is community-works-collaborative.\n" );
+	exit( 1 );
+}
+
+/**
+ * Query every published page and check whether its hero would be affected.
+ */
+function cwc_check_affected_pages() {
+	$query = new WP_Query(
+		array(
+			'post_type'      => 'page',
+			'post_status'    => 'publish',
+			'posts_per_page' => -1,
+			'orderby'        => 'menu_order title',
+			'order'          => 'ASC',
+			'no_found_rows'  => true,
+		)
+	);
+
+	$affected = array();
+	$skipped_due_to_error = 0;
+
+	while ( $query->have_posts() ) {
+		$query->the_post();
+		$post = get_post();
+
+		$hero_style = get_field( 'hero_style', $post->ID );
+
+		if ( 'default' !== $hero_style ) {
+			continue;
+		}
+
+		$is_services_descendant = \CWC\isServicesDescendant( $post );
+		if ( is_wp_error( $is_services_descendant ) ) {
+			++$skipped_due_to_error;
+			continue;
+		}
+
+		if ( $is_services_descendant ) {
+			continue;
+		}
+
+		$affected[] = array(
+			'ID'    => (int) $post->ID,
+			'title' => get_the_title( $post ),
+			'url'   => get_permalink( $post ),
+			'slug'  => $post->post_name,
+		);
+	}
+
+	wp_reset_postdata();
+
+	return array(
+		'affected'              => $affected,
+		'skipped_due_to_error'  => $skipped_due_to_error,
+	);
+}
+
+$result = cwc_check_affected_pages();
+$affected = $result['affected'];
+
+echo "Pages with hero_style = 'default' that are NOT Services descendants\n";
+echo "==================================================================\n\n";
+
+if ( empty( $affected ) ) {
+	echo "None. Every page that uses the default hero is a Services descendant (or the Services page itself).\n";
+} else {
+	printf( "Found %d affected page(s):\n\n", count( $affected ) );
+
+	$rows = array();
+	$rows[] = array( 'ID', 'Slug', 'Title', 'URL' );
+
+	foreach ( $affected as $page ) {
+		$rows[] = array(
+			(string) $page['ID'],
+			$page['slug'],
+			$page['title'],
+			$page['url'],
+		);
+	}
+
+	// Compute column widths for aligned output.
+	$widths = array();
+	foreach ( array( 0, 1, 2, 3 ) as $col ) {
+		$widths[ $col ] = 0;
+		foreach ( $rows as $row ) {
+			$widths[ $col ] = max( $widths[ $col ], strlen( $row[ $col ] ) );
+		}
+	}
+
+	$format = '| %-' . $widths[0] . 's | %-' . $widths[1] . 's | %-' . $widths[2] . 's | %-' . $widths[3] . "s |\n";
+
+	$separator = '+';
+	foreach ( $widths as $w ) {
+		$separator .= str_repeat( '-', $w + 2 ) . '+';
+	}
+	$separator .= "\n";
+
+	echo $separator;
+	foreach ( $rows as $i => $row ) {
+		printf( $format, ...$row );
+		if ( 0 === $i ) {
+			echo $separator;
+		}
+	}
+	echo $separator;
+}
+
+if ( $result['skipped_due_to_error'] > 0 ) {
+	printf(
+		"\nWarning: %d page(s) could not be evaluated due to errors. Re-run with WP_DEBUG enabled for details.\n",
+		$result['skipped_due_to_error']
+	);
+}
+
+echo "\n";

docs/superpowers/notes/test-env-setup.md

@@ -0,0 +1,48 @@
+# Test Environment Setup
+
+## `CWC_TEST_BYPASS_HERO_GATE`
+
+The inner-page hero is gated by `isServicesDescendant()` (see `lib/extras.php`).
+A page renders the hero only if it is the Services page, a direct child of it,
+or a grandchild of it.
+
+The Playwright suite under `tests/` includes fixtures that are **not** Services
+descendants (e.g. `sample-page`). When the new gate is enabled, those pages
+no longer render the hero, and the existing `inner-page.spec.js` assertions
+fail.
+
+To keep the existing test fixtures working without forking the test suite,
+the theme exposes a bypass constant:
+
+```php
+define( 'CWC_TEST_BYPASS_HERO_GATE', true );
+```
+
+When `CWC_TEST_BYPASS_HERO_GATE` is `true`, `isServicesDescendant()` returns
+`true` for every post, so the hero is rendered for all pages — matching the
+pre-gate behavior expected by the existing tests.
+
+## How to enable on the dev site
+
+Add the following line to `wp-config.php` on the dev site
+(`community-works-collaborative.test`), ideally near the other `define()`
+calls in that file:
+
+```php
+define( 'CWC_TEST_BYPASS_HERO_GATE', true );
+```
+
+The constant defaults to `false` in `lib/extras.php`, so production sites are
+unaffected unless this define is added.
+
+## Why this is a manual step
+
+This repository does not own the WordPress install — `wp-config.php` is
+managed by the operator of the dev site. The theme cannot and should not
+modify `wp-config.php` itself.
+
+## Production note
+
+Do **not** define this constant on production. It exists solely to let the
+test environment continue to use the same fixtures the suite was originally
+written against.

docs/superpowers/plans/2026-07-04-blog-layout.md

@@ -0,0 +1,370 @@
+# Blog Index Layout Implementation Plan
+
+> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking.
+
+**Goal:** Build the blog index layout shown in `blog-mockup.png` so `/blog/` and any other view using `index.php` render a "Blog" page title, a grid of post cards (image + title + byline), and the existing sidebar.
+
+**Architecture:** A small refactor of `index.php` (add a page title, trim the post card) and an unfreeze of `styles/components/post-list.css` (add `.post-list__h1` styles). A new Playwright test verifies the result. The existing sidebar logic, pagination, and post grid layout are preserved.
+
+**Tech Stack:** WordPress 6.x, PHP 8.x, Tailwind CSS v4, Playwright, axe-core, PHPCS (WordPress standard).
+
+## Global Constraints
+
+- Tabs for PHP indentation (project standard, see `composer.json` and existing files). The brief's canonical PHP for the index.php changes should use tabs.
+- The theme's Tailwind build outputs `static/dist/theme.css`; that file is gitignored but committed with `git add -f` per project convention.
+- PHPCS uses the WordPress coding standard; `composer lint` must pass. Note: the previous contact-page work surfaced 5 pre-existing PHPCS CRLF errors on untouched files — they are out of scope and not introduced by this plan.
+- All Playwright tests in `tests/*.spec.js` must pass except the 4 pre-existing `mobile-homepage.spec.js` failures (out of scope) and the still-broken services-hero-scope ACF data state (separate user follow-up).
+- The new `index.php` change applies to all views that route through it: `/blog/`, category archives, tag archives, author archives, and search results. No new template files are created.
+- The post card content is simplified to image + title + byline (no categories, no excerpt). The card's `px-4 py-8` padding is tightened to `px-4 py-6`.
+- The page title is hard-coded "Blog" (project's standard H1 styling: Quincy serif, CWC Blue 01, fluid `--h1` size, 700 weight). The title is the same on every view that uses `index.php`.
+- The hero gate (set in the previous turn: `$showHero = isServicesDescendant() && get_field( 'hero_style' ) === 'default'`) is unaffected.
+
+---
+
+## File Structure
+
+| File | Responsibility | Created/Modified |
+| --- | --- | --- |
+| `index.php` | Renders the blog index, category/tag/author archives, and search results. Add a "Blog" H1 and trim the post card. | Modify |
+| `styles/components/post-list.css` | Unfreeze the file and add `.post-list__h1` styles. | Modify |
+| `tests/blog-page.spec.js` | New Playwright spec for the blog layout. | Create |
+| `static/dist/theme.css` | Rebuilt via `npm run build`. | Modified (committed with `git add -f`). |
+
+---
+
+### Task 1: Update `index.php` — add page title, trim the post card
+
+**Files:**
+- Modify: `index.php`
+
+**Interfaces:**
+- Consumes: the standard WordPress loop (`have_posts()`, `the_post()`).
+- Produces: a `<section>` with the existing sidebar-aware grid; a `<h1 class="post-list__h1">Blog</h1>` at the top of the post list; a card per post with image, title link, and byline (no categories, no excerpt).
+
+- [ ] **Step 1: Read `index.php` to confirm the current structure**
+
+The file has been read in this session (it currently renders `.post-list__posts` with cards containing categories, title, excerpt, and byline). Confirm the line numbers and class names match the spec.
+
+- [ ] **Step 2: Add the H1 and trim the card**
+
+Replace the post-list opening + card inner content with the new structure:
+
+```php
+<?php if ( have_posts() ) : ?>
+    <div class="blog-posts <?php echo esc_attr( $clsEntry ); ?>">
+        <div class="post-list">
+            <h1 class="post-list__h1">Blog</h1>
+
+            <div class="post-list__posts grid grid-cols-[repeat(auto-fit,minmax(20rem,1fr))] gap-6">
+                <?php
+                while ( have_posts() ) :
+                    the_post();
+                    ?>
+                    <div class="post-list__post flex flex-col border border-secondary rounded-md shadow-lg hover:prose-img:scale-110 hover:prose-img:origin-center hover:prose-img:duration-500">
+                        <figure class="post-list__img aspect-video border-b border-secondary rounded-t-md block h-auto w-full overflow-hidden m-0 p-0">
+                            <?php if ( has_post_thumbnail() ) : ?>
+                                <?php
+                                    $featImg = get_the_post_thumbnail_url();
+                                    $postImg = $featImg ? $featImg : 'https://picsum.photos/600/400?random=' . get_the_ID();
+                                    $imgAlt  = get_post_meta( get_post_thumbnail_id(), '_wp_attachment_image_alt', true ) ?? get_the_title();
+                                ?>
+
+                                <img class="block h-full object-cover transition-transform duration-300 ease-linear w-full will-change-transform" src="<?php echo esc_url( $postImg ); ?>" alt="<?php echo esc_attr( $imgAlt ); ?>">
+                            <?php endif; ?>
+                        </figure>
+
+                        <div class="post-list__details px-4 py-6 flex flex-col grow">
+                            <a href="<?php the_permalink(); ?>" class="">
+                                <h2 class="post-list__title font-normal text-25px text-balance line-clamp-4 truncate mt-0 mb-5 mx-0"><?php the_title(); ?></h2>
+                            </a>
+
+                            <div class="post-list__byline mt-auto">
+                                <span class="post-list__author"><?php echo esc_html( ucfirst( get_the_author() ) ); ?> &mdash;</span>
+                                <span class="post-list__date"><?php echo get_the_date(); ?></span>
+                            </div>
+                        </div>
+                    </div>
+                <?php endwhile; ?>
+            </div>
+
+            <div class="post-list__pagination">
+                <?php
+                the_posts_pagination(
+                    array(
+                        'mid_size'  => 2,
+                        'prev_text' => '&laquo; Previous',
+                        'next_text' => 'Next &raquo;',
+                    )
+                );
+                ?>
+            </div>
+        </div>
+    </div>
+<?php else : ?>
+    <div class="blog-posts <?php echo esc_attr( $clsEntry ); ?>">
+        <div class="no-posts">
+            <h2 class="no-posts__title">Nothing here yet&hellip;</h2>
+            <p class="no-posts__desc">No published posts found.</p>
+        </div>
+    </div>
+<?php endif; ?>
+```
+
+Specifically:
+- Add `<h1 class="post-list__h1">Blog</h1>` after the `<div class="post-list">` opening tag.
+- Remove the `<div class="post-list__cats">` block.
+- Remove the `<div class="post-list__excerpt mb-6">` block.
+- Change `post-list__details px-4 py-8` to `post-list__details px-4 py-6`.
+- Do NOT touch the `<div class="post-list__byline mt-auto">` block.
+- Do NOT touch the empty state (`else` branch).
+- Do NOT touch the pagination block.
+
+**Indentation:** tabs. The current `index.php` uses tabs.
+
+- [ ] **Step 3: Verify the file parses**
+
+Run: `php -l index.php`
+Expected: `No syntax errors detected in index.php`.
+
+- [ ] **Step 4: Commit**
+
+```bash
+git add index.php
+git commit -m "feat(blog): add page title and trim post card to image + title + byline"
+```
+
+---
+
+### Task 2: Unfreeze `styles/components/post-list.css` and add `.post-list__h1`
+
+**Files:**
+- Modify: `styles/components/post-list.css`
+
+**Interfaces:**
+- Consumes: the new `<h1 class="post-list__h1">` from Task 1.
+- Produces: a styled H1 that matches the project's H1 typography (Quincy serif, CWC Blue 01, fluid `--h1` size, 700 weight, default margin).
+
+- [ ] **Step 1: Verify the import in `styles/components/index.css` is already present**
+
+Run: `grep -n "post-list" styles/components/index.css`
+Expected: a matching line. If not, add:
+```css
+@import './post-list.css';
+```
+
+- [ ] **Step 2: Replace `styles/components/post-list.css` with the new content**
+
+```css
+/* Blog/post index listing styles */
+
+.post-list__h1 {
+    color: var(--color-cwc-blue-01);
+    font-family: var(--font-quincy, 'Quincy', serif);
+    font-size: var(--h1);
+    font-weight: 700;
+    line-height: 1.2;
+    margin: 0 0 2rem;
+    text-align: left;
+}
+```
+
+- [ ] **Step 3: Commit**
+
+```bash
+git add styles/components/post-list.css styles/components/index.css
+git commit -m "feat(blog): style the post-list page title"
+```
+
+---
+
+### Task 3: Build the dist CSS
+
+**Files:**
+- Modify: `static/dist/theme.css` (committed with `git add -f`).
+
+- [ ] **Step 1: Run the build**
+
+Run: `npm run build`
+Expected: build completes without errors.
+
+- [ ] **Step 2: Verify the new class is in the dist**
+
+Run: `grep -c "post-list__h1" static/dist/theme.css`
+Expected: at least 1 match.
+
+- [ ] **Step 3: Commit the rebuilt dist**
+
+```bash
+git add -f static/dist/theme.css
+git commit -m "build: regenerate dist with blog post-list styles"
+```
+
+---
+
+### Task 4: Add `tests/blog-page.spec.js`
+
+**Files:**
+- Create: `tests/blog-page.spec.js`
+
+**Interfaces:**
+- Consumes: the rendered `/blog/` page.
+- Produces: a Playwright spec that verifies the page title, the post grid, the absence of categories/excerpt, the sidebar, the absence of an inner-page hero, and no console errors or axe violations.
+
+- [ ] **Step 1: Create `tests/blog-page.spec.js`**
+
+```js
+import { expect, test } from "@playwright/test";
+const AxeBuilder = require("@axe-core/playwright").default;
+
+const blogUrl =
+    process.env.TEST_BLOG_URL ||
+    "http://community-works-collaborative.test/blog/";
+
+test.describe("blog page", () => {
+    test("desktop: Blog title, post grid, no inner-page hero, sidebar", async ({
+        page,
+    }) => {
+        const pageErrors = [];
+        page.on("pageerror", (err) => pageErrors.push(err.message));
+
+        await page.setViewportSize({ width: 1280, height: 900 });
+        await page.goto(blogUrl);
+
+        // No inner-page hero.
+        expect(await page.locator(".page-hero").count()).toBe(0);
+
+        // Page title is "Blog".
+        const heading = page.locator(".post-list__h1").first();
+        await expect(heading).toBeVisible();
+        await expect(heading).toHaveText("Blog");
+
+        // Post grid renders at least one card.
+        const posts = page.locator(".post-list__post");
+        const postCount = await posts.count();
+        expect(postCount).toBeGreaterThanOrEqual(1);
+
+        // First card: image, title link, byline.
+        const firstCard = posts.first();
+        await expect(firstCard.locator(".post-list__img img")).toBeVisible();
+        await expect(firstCard.locator(".post-list__title")).toBeVisible();
+        await expect(firstCard.locator(".post-list__byline")).toBeVisible();
+
+        // First card does NOT have a categories row or an excerpt.
+        expect(await firstCard.locator(".post-list__cats").count()).toBe(0);
+        expect(await firstCard.locator(".post-list__excerpt").count()).toBe(0);
+
+        // Sidebar renders.
+        await expect(page.locator("#secondary, .sidebar, aside").first()).toBeAttached();
+
+        // No JS errors.
+        expect(pageErrors).toEqual([]);
+    });
+
+    test("mobile 402: single-column grid, no horizontal overflow", async ({
+        page,
+    }) => {
+        await page.setViewportSize({ width: 402, height: 874 });
+        await page.goto(blogUrl);
+
+        const heading = page.locator(".post-list__h1").first();
+        await expect(heading).toBeVisible();
+
+        const headingBox = await heading.boundingBox();
+        const block = page.locator(".post-list").first();
+        const blockBox = await block.boundingBox();
+
+        expect(headingBox).not.toBeNull();
+        expect(blockBox).not.toBeNull();
+        expect(headingBox.x + headingBox.width).toBeLessThanOrEqual(402 + 3);
+        expect(blockBox.x + blockBox.width).toBeLessThanOrEqual(402 + 3);
+    });
+
+    test("mobile 320: nothing clips horizontally", async ({ page }) => {
+        await page.setViewportSize({ width: 320, height: 800 });
+        await page.goto(blogUrl);
+
+        const block = page.locator(".post-list").first();
+        await expect(block).toBeVisible();
+
+        const blockBox = await block.boundingBox();
+        expect(blockBox.x + blockBox.width).toBeLessThanOrEqual(320 + 3);
+    });
+
+    test("axe: no violations", async ({ page }, testInfo) => {
+        await page.setViewportSize({ width: 1280, height: 900 });
+        await page.goto(blogUrl);
+
+        const results = await new AxeBuilder({ page })
+            .withTags([
+                "wcag2a",
+                "wcag2aa",
+                "wcag21a",
+                "wcag21aa",
+                "wcag22a",
+                "wcag22aa",
+            ])
+            .analyze();
+
+        await testInfo.attach("accessibility-scan-results", {
+            body: JSON.stringify(results, null, 2),
+            contentType: "application/json",
+        });
+
+        expect(results.violations).toEqual([]);
+    });
+});
+```
+
+- [ ] **Step 2: Run the new test**
+
+Run: `npx playwright test tests/blog-page.spec.js`
+Expected: all 4 tests pass. The blog URL is `http://community-works-collaborative.test/blog/`; if the live site has no published posts, the test may fail with `postCount === 0`. In that case, the user needs to seed a published post (or set `TEST_BLOG_URL` to a URL with posts).
+
+- [ ] **Step 3: Commit**
+
+```bash
+git add tests/blog-page.spec.js
+git commit -m "test(blog): add blog-page Playwright spec"
+```
+
+---
+
+### Task 5: Run the full Playwright suite + PHPCS
+
+- [ ] **Step 1: Run the full Playwright suite**
+
+Run: `npx playwright test`
+Expected: all tests pass except:
+- 4 pre-existing `mobile-homepage.spec.js` failures (out of scope).
+- The 2 services-hero-scope ACF-data failures (separate user follow-up; this plan does not introduce them).
+- The 1 services-hero-scope `test.fail()` grandchild (already handled).
+- The 6 inner-page regressions (user follow-up: set `CWC_TEST_BYPASS_HERO_GATE=true` in `wp-config.php`).
+
+The new `tests/blog-page.spec.js` should pass.
+
+- [ ] **Step 2: Run PHPCS**
+
+Run: `composer lint`
+Expected: no NEW errors. The 5 pre-existing CRLF errors on untouched files remain (out of scope).
+
+- [ ] **Step 3: Verify the dist is up to date**
+
+Run: `git status static/dist/theme.css`
+Expected: `nothing to commit, working tree clean`. If uncommitted, run `git add -f static/dist/theme.css` and commit with `chore: sync dist after lint/fix`.
+
+- [ ] **Step 4: Final commit (if anything changed in step 1-3)**
+
+```bash
+git add -A
+git commit -m "chore: final pass after Playwright and PHPCS"
+```
+
+---
+
+## Self-Review Notes
+
+- **Spec coverage:** Task 1 (index.php H1 + card trim), Task 2 (post-list.css), Task 3 (build), Task 4 (test), Task 5 (final suite + PHPCS). Every spec section is covered.
+- **Placeholder scan:** No "TBD", "TODO", or "implement later" in any step. The `picsum.photos` fallback is a known wart but it's in the existing code (out of scope).
+- **Type consistency:** Class names match the BEM convention in the spec.
+- **Spec section "Out of Scope" (per-view titles, new templates, single-post view, sidebar widgets, fallback image, pagination restyling, front-page.php, archive/category/tag/author templates):** all left as-is.
+- **Indentation:** tabs for PHP (per the previous contact-page work, the project standard).

docs/superpowers/plans/2026-07-04-contact-page.md

@@ -0,0 +1,880 @@
+# Contact Page + Hero Re-Scope Implementation Plan
+
+> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking.
+
+**Goal:** Build the contact page layout (two-column 50/50 with contact info, Gravity Forms, and a Leaflet placeholder) and re-scope the existing inner-page hero to render only on the Services page, its children, and its grandchildren.
+
+**Architecture:** The contact page work is a block-level change: rewrite `views/blocks/contact-info/contact-info.php` and `contact-info.css`, add three SVG icons, and add a Playwright test. The hero re-scope is a single PHP helper in `lib/extras.php` plus a one-line change in `header.php`. Both are independently testable. A test bypass constant lets the existing `inner-page.spec.js` fixtures keep working without moving them under the Services page.
+
+**Tech Stack:** WordPress 6.x, ACF Pro, PHP 8.x, Tailwind CSS v4, Playwright, axe-core, PHPCS (WordPress standard).
+
+## Global Constraints
+
+- Tabs for PHP indentation (project standard, see `composer.json` and existing files).
+- The theme's Tailwind build outputs `static/dist/theme.css`; that file is gitignored but committed with `git add -f` per project convention.
+- PHPCS uses the WordPress coding standard; `composer lint` must pass.
+- All Playwright tests in `tests/*.spec.js` must pass; the existing `mobile-homepage.spec.js` has 4 known pre-existing failures that are out of scope.
+- The `acf/contact-info` block currently has an `InnerBlocks` call. Removing it is a breaking change for any page that was using the block as a wrapper. A grep at task start confirms there are zero such pages.
+- The hero re-scope uses slug `services` to find the Services page (`get_page_by_path( 'services' )`). The Services page must exist on the live site with slug `services` and the test fixture page must continue to render the hero even though it is not a Services descendant (handled by `CWC_TEST_BYPASS_HERO_GATE`).
+- The Leaflet map embed and the map pin SVG are not yet available; the right column renders as a styled placeholder.
+
+---
+
+## File Structure
+
+| File | Responsibility | Created/Modified |
+| --- | --- | --- |
+| `views/blocks/contact-info/contact-info.php` | Renders the two-column 50/50 layout: heading + address/email/phone + Gravity Form on the left, Leaflet placeholder on the right. | Modify |
+| `views/blocks/contact-info/contact-info.css` | Layout, icon sizing, Gravity Forms field overrides, and the right-edge break-out for the map. | Modify |
+| `static/img/contact/icon-address.svg` | Map pin outline, 24×24, `stroke="currentColor" fill="none"`. | Create |
+| `static/img/contact/icon-email.svg` | Envelope outline, 24×24, `stroke="currentColor" fill="none"`. | Create |
+| `static/img/contact/icon-phone.svg` | Phone outline, 24×24, `stroke="currentColor" fill="none"`. | Create |
+| `lib/extras.php` | Add `isServicesDescendant()` and `CWC_TEST_BYPASS_HERO_GATE` constant. | Modify |
+| `header.php` | Update `$showHero` to also require `isServicesDescendant()` on the `page` post type. | Modify |
+| `static/dist/theme.css` | Rebuilt via `npm run build`. | Modified (committed with `git add -f`). |
+| `tests/contact-page.spec.js` | New Playwright spec for the contact page layout. | Create |
+| `tests/services-hero-scope.spec.js` | New Playwright spec for the hero re-scope. | Create |
+
+---
+
+### Task 1: Add the three contact icon SVGs
+
+**Files:**
+- Create: `static/img/contact/icon-address.svg`
+- Create: `static/img/contact/icon-email.svg`
+- Create: `static/img/contact/icon-phone.svg`
+
+**Interfaces:**
+- Consumes: nothing
+- Produces: three static SVG assets that the `contact-info` block references via `get_theme_file_uri( '/static/img/contact/...svg' )`.
+
+The user is providing the final SVGs. Until they arrive, use these placeholders (24×24 viewBox, `stroke="currentColor" fill="none" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"`). The CSS colors them via `currentColor`.
+
+- [ ] **Step 1: Create the static/img/contact directory**
+
+Run: `mkdir -p static/img/contact`
+Expected: directory created; no error.
+
+- [ ] **Step 2: Write `static/img/contact/icon-address.svg`**
+
+```xml
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false">
+  <path d="M20 10c0 7-8 12-8 12s-8-5-8-12a8 8 0 0 1 16 0Z"/>
+  <circle cx="12" cy="10" r="3"/>
+</svg>
+```
+
+- [ ] **Step 3: Write `static/img/contact/icon-email.svg`**
+
+```xml
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false">
+  <rect x="3" y="5" width="18" height="14" rx="2"/>
+  <path d="m3 7 9 6 9-6"/>
+</svg>
+```
+
+- [ ] **Step 4: Write `static/img/contact/icon-phone.svg`**
+
+```xml
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false">
+  <path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.13.96.36 1.9.7 2.8a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.9.34 1.84.57 2.8.7A2 2 0 0 1 22 16.92Z"/>
+</svg>
+```
+
+- [ ] **Step 5: Verify all three files exist and are valid XML**
+
+Run: `ls -la static/img/contact/ && for f in static/img/contact/*.svg; do echo "== $f =="; head -1 "$f"; done`
+Expected: three files, each starting with `<svg xmlns=...`.
+
+- [ ] **Step 6: Commit**
+
+```bash
+git add static/img/contact/
+git commit -m "feat(contact): add address, email, phone icon SVGs"
+```
+
+---
+
+### Task 2: Rewrite `views/blocks/contact-info/contact-info.php`
+
+**Files:**
+- Modify: `views/blocks/contact-info/contact-info.php`
+
+**Interfaces:**
+- Consumes: the global `contact_info` option (`get_field( 'contact_info', 'option' )['address' | 'email' | 'phone']`).
+- Produces: a `<section class="contact-info">` with `.contact-info__grid` > `.contact-info__details` and `.contact-info__map`. The details column has the heading, an `<ul>` of address/email/phone `<li>`s with `.contact-info__icon` spans, and a `.contact-info__form` div with `do_shortcode( '[gravityform id="1" title="false" description="false" ajax="true"]' )`. The map column has `<div id="contact-map">`.
+
+- [ ] **Step 1: Verify no other page uses the `InnerBlocks` form of this block**
+
+Run:
+```bash
+grep -rn "contact-info" wp-content/themes/community-works-collaborative/views/ --include="*.php" | grep -v "contact-info/contact-info.php" | grep -v "contact-info/block.json"
+```
+Expected: no matches. If matches exist, list them and confirm the InnerBlocks content is empty for each before proceeding.
+
+- [ ] **Step 2: Replace `views/blocks/contact-info/contact-info.php` with the new content**
+
+Write the entire file:
+
+```php
+<?php
+/**
+ * Block Name: Contact Info
+ *
+ * Two-column contact page layout: contact info, address/email/phone,
+ * and a Gravity Forms contact form on the left; Leaflet map placeholder
+ * on the right. Reads from the global `contact_info` option.
+ *
+ * @package CWC
+ */
+
+namespace CWC;
+
+$info    = get_field( 'contact_info', 'option' );
+$address = $info['address'] ?? '';
+$email   = $info['email']   ?? '';
+$phone   = $info['phone']   ?? '';
+
+$classes = 'contact-info';
+$wrapper = blockWrapperAttributes( $classes, $is_preview );
+?>
+
+<section <?php echo esc_attr( $wrapper ); ?>>
+    <div class="contact-info__grid">
+        <div class="contact-info__details">
+            <h1 class="contact-info__heading">Contact</h1>
+
+            <ul class="contact-info__items">
+                <?php if ( $address ) : ?>
+                    <li class="contact-info__item contact-info__item--address">
+                        <span class="contact-info__icon" aria-hidden="true">
+                            <img src="<?php echo esc_url( get_theme_file_uri( '/static/img/contact/icon-address.svg' ) ); ?>" alt="" width="24" height="24" loading="lazy" />
+                        </span>
+                        <span class="contact-info__value"><?php echo wp_kses_post( $address ); ?></span>
+                    </li>
+                <?php endif; ?>
+
+                <?php if ( $email ) : ?>
+                    <li class="contact-info__item contact-info__item--email">
+                        <span class="contact-info__icon" aria-hidden="true">
+                            <img src="<?php echo esc_url( get_theme_file_uri( '/static/img/contact/icon-email.svg' ) ); ?>" alt="" width="24" height="24" loading="lazy" />
+                        </span>
+                        <a class="contact-info__value" href="mailto:<?php echo esc_attr( $email ); ?>"><?php echo esc_html( $email ); ?></a>
+                    </li>
+                <?php endif; ?>
+
+                <?php if ( $phone ) : ?>
+                    <li class="contact-info__item contact-info__item--phone">
+                        <span class="contact-info__icon" aria-hidden="true">
+                            <img src="<?php echo esc_url( get_theme_file_uri( '/static/img/contact/icon-phone.svg' ) ); ?>" alt="" width="24" height="24" loading="lazy" />
+                        </span>
+                        <a class="contact-info__value" href="tel:<?php echo esc_attr( $phone ); ?>"><?php echo esc_html( $phone ); ?></a>
+                    </li>
+                <?php endif; ?>
+            </ul>
+
+            <div class="contact-info__form">
+                <?php echo do_shortcode( '[gravityform id="1" title="false" description="false" ajax="true"]' ); ?>
+            </div>
+        </div>
+
+        <div class="contact-info__map" id="contact-map" aria-label="Map of downtown Winnipeg" role="region">
+            <!-- Leaflet map will mount here. Pin: orange-01 + white map marker (TBD). -->
+        </div>
+    </div>
+</section>
+```
+
+- [ ] **Step 3: Verify the file parses (no PHP syntax errors)**
+
+Run: `php -l views/blocks/contact-info/contact-info.php`
+Expected: `No syntax errors detected in views/blocks/contact-info/contact-info.php`.
+
+- [ ] **Step 4: Commit**
+
+```bash
+git add views/blocks/contact-info/contact-info.php
+git commit -m "feat(contact): rewrite contact-info block to two-column layout"
+```
+
+---
+
+### Task 3: Write `views/blocks/contact-info/contact-info.css` (layout + icons)
+
+**Files:**
+- Modify: `views/blocks/contact-info/contact-info.css`
+
+**Interfaces:**
+- Consumes: the new HTML structure from Task 2.
+- Produces: a mobile-first stylesheet that lays out the two columns, sizes the icons, and breaks the right column out to the viewport edge on desktop.
+
+- [ ] **Step 1: Replace `views/blocks/contact-info/contact-info.css` with the new content**
+
+```css
+/* Contact Info block styles */
+
+.contact-info {
+    background: var(--color-white);
+    padding-block: clamp(3rem, 6vw, 4rem);
+    position: relative;
+}
+
+.contact-info__grid {
+    display: grid;
+    gap: 2rem;
+    grid-template-columns: 1fr;
+    position: relative;
+}
+
+.contact-info__details {
+    max-width: 36rem;
+    padding-inline: clamp(1.5rem, 5vw, 3rem);
+}
+
+.contact-info__heading {
+    color: var(--color-cwc-blue-01);
+    font-family: var(--font-quincy, 'Quincy', serif);
+    font-size: clamp(2.5rem, 6vw, 4.5rem);
+    font-weight: 400;
+    line-height: 1.05;
+    margin: 0 0 1.5rem;
+}
+
+.contact-info__items {
+    display: flex;
+    flex-direction: column;
+    gap: 0.75rem;
+    list-style: none;
+    margin: 0 0 2.5rem;
+    padding: 0;
+}
+
+.contact-info__item {
+    align-items: flex-start;
+    color: var(--color-dark);
+    display: flex;
+    font-size: 1rem;
+    gap: 0.75rem;
+    line-height: 1.5;
+}
+
+.contact-info__icon {
+    align-items: center;
+    color: var(--color-cwc-blue-03);
+    display: inline-flex;
+    flex-shrink: 0;
+    height: 1.5rem;
+    justify-content: center;
+    width: 1.5rem;
+}
+
+.contact-info__icon img {
+    display: block;
+    height: 100%;
+    width: 100%;
+}
+
+.contact-info__value {
+    color: inherit;
+    text-decoration: none;
+}
+
+a.contact-info__value:hover {
+    color: var(--color-secondary);
+}
+
+.contact-info__map {
+    background: color-mix(in oklch, var(--color-cwc-blue-03) 30%, white);
+    border-radius: 0.5rem;
+    min-height: 24rem;
+    position: relative;
+}
+
+@media (min-width: 1024px) {
+    .contact-info__grid {
+        grid-template-columns: 1fr 1fr;
+    }
+
+    .contact-info__details {
+        padding-inline: clamp(1.5rem, 5vw, 3rem) 0;
+    }
+
+    .contact-info__map {
+        align-self: stretch;
+        border-radius: 0;
+        margin-right: calc(50% - 50vw);
+        margin-left: 0;
+        min-height: 32rem;
+        width: calc(50vw - 0px);
+    }
+}
+
+@media (max-width: 767px) {
+    .contact-info {
+        padding-block: 2rem;
+    }
+
+    .contact-info__map {
+        margin-inline: clamp(1.5rem, 5vw, 3rem);
+        min-height: 18rem;
+    }
+}
+```
+
+- [ ] **Step 2: Add the import to `styles/blocks/index.css` if not already present**
+
+Run: `grep -n "contact-info" styles/blocks/index.css`
+Expected: a matching line. If not present, add the views-relative path (the file lives at `views/blocks/contact-info/contact-info.css`, NOT at `styles/blocks/`, so a sibling-relative path will fail the build):
+
+```css
+@import '../../views/blocks/contact-info/contact-info.css';
+```
+
+> **Why views-relative, not sibling-relative:** `styles/blocks/` only contains `buttons.css`, `core.css`, `misc.css`, and `page-hero.css`. The new CSS is at `views/blocks/contact-info/contact-info.css` (so the per-block `style: ['file:./contact-info.css']` in `block.json` resolves for the block editor preview). A sibling-relative import would silently produce "Can't resolve './contact-info.css' in 'styles/blocks'" and fail the build.
+
+
+
+- [ ] **Step 3: Commit**
+
+```bash
+git add views/blocks/contact-info/contact-info.css styles/blocks/index.css
+git commit -m "feat(contact): add two-column layout and icon styles"
+```
+
+---
+
+### Task 4: Add Gravity Forms field overrides to `contact-info.css`
+
+**Files:**
+- Modify: `views/blocks/contact-info/contact-info.css`
+
+**Interfaces:**
+- Consumes: the layout from Task 3; the `gform_*` HTML output from Gravity Forms.
+- Produces: uppercase CWC Blue 01 labels, right-aligned CWC Orange 01 required asterisks, 30% opacity CWC Blue 03 input fills, slightly rounded corners, comfortable padding, a taller message textarea, and a submit button styled like the header Contact button.
+
+- [ ] **Step 1: Append the Gravity Forms overrides to the end of `views/blocks/contact-info/contact-info.css`**
+
+```css
+/* Gravity Forms field overrides (scoped to .contact-info__form) */
+
+.contact-info__form .gform_wrapper {
+    margin: 0;
+    max-width: none;
+}
+
+.contact-info__form .gfield {
+    margin-bottom: 1.25rem;
+}
+
+.contact-info__form .gfield_label {
+    color: var(--color-cwc-blue-01);
+    display: flex;
+    font-size: 0.875rem;
+    font-weight: 700;
+    justify-content: space-between;
+    letter-spacing: 0.05em;
+    line-height: 1.2;
+    margin-bottom: 0.5rem;
+    text-transform: uppercase;
+}
+
+.contact-info__form .gfield_required {
+    color: var(--color-cwc-orange-01);
+    font-weight: 700;
+    margin-left: 0.25rem;
+}
+
+.contact-info__form input[type="text"],
+.contact-info__form input[type="email"],
+.contact-info__form input[type="tel"],
+.contact-info__form input[type="url"],
+.contact-info__form textarea,
+.contact-info__form select {
+    background: color-mix(in oklch, var(--color-cwc-blue-03) 30%, white);
+    border: 1px solid var(--color-cwc-blue-03);
+    border-radius: 0.375rem;
+    color: var(--color-dark);
+    font-size: 1rem;
+    line-height: 1.5;
+    padding: 0.75rem 1rem;
+    width: 100%;
+}
+
+.contact-info__form input[type="text"]:focus,
+.contact-info__form input[type="email"]:focus,
+.contact-info__form input[type="tel"]:focus,
+.contact-info__form input[type="url"]:focus,
+.contact-info__form textarea:focus,
+.contact-info__form select:focus {
+    border-color: var(--color-cwc-blue-01);
+    outline: 2px solid var(--color-cwc-blue-01);
+    outline-offset: 2px;
+}
+
+.contact-info__form textarea {
+    min-height: 10rem;
+    resize: vertical;
+}
+
+.contact-info__form .gform_footer {
+    margin-top: 1.5rem;
+}
+
+.contact-info__form .gform_footer input[type="submit"],
+.contact-info__form .gform_footer button[type="submit"] {
+    background: var(--background-image-button-gradient);
+    border: 3px solid var(--color-secondary);
+    border-radius: 1.25rem 0.25rem 1.25rem 0.25rem;
+    color: var(--color-white);
+    cursor: pointer;
+    font-size: 1.125rem;
+    font-weight: 700;
+    padding: 0.625rem 2rem;
+    transition: background 200ms, border-color 200ms, color 200ms;
+}
+
+.contact-info__form .gform_footer input[type="submit"]:hover,
+.contact-info__form .gform_footer button[type="submit"]:hover {
+    background: var(--color-secondary);
+    border-color: var(--color-secondary);
+}
+
+.contact-info__form .validation_message {
+    color: var(--color-danger);
+    font-style: italic;
+    margin-top: 0.25rem;
+}
+```
+
+- [ ] **Step 2: Commit**
+
+```bash
+git add views/blocks/contact-info/contact-info.css
+git commit -m "feat(contact): style Gravity Forms fields and submit button"
+```
+
+---
+
+### Task 5: Build the dist CSS and verify
+
+**Files:**
+- Modify: `static/dist/theme.css` (committed with `git add -f`)
+
+**Interfaces:**
+- Consumes: the new `views/blocks/contact-info/contact-info.css` and any touched source files.
+- Produces: a rebuilt `static/dist/theme.css` that includes the new contact-info styles.
+
+- [ ] **Step 1: Run the build**
+
+Run: `npm run build`
+Expected: build completes without errors. The dist file is regenerated.
+
+- [ ] **Step 2: Verify the new classes are present in the dist CSS**
+
+Run:
+```bash
+grep -c "contact-info" static/dist/theme.css
+```
+Expected: at least 10 matches (a count of 0 means the build did not pick up the new CSS).
+
+- [ ] **Step 3: Commit the rebuilt dist**
+
+```bash
+git add -f static/dist/theme.css
+git commit -m "build: regenerate dist with contact-info styles"
+```
+
+---
+
+### Task 6: Add `isServicesDescendant()` and the bypass constant to `lib/extras.php`
+
+**Files:**
+- Modify: `lib/extras.php`
+
+**Interfaces:**
+- Consumes: the global `$post` and an optional services-page override.
+- Produces: `isServicesDescendant( ?WP_Post $post = null, ?int $services_id = null ): bool` that returns `true` for the Services page, its children, and its grandchildren. Returns `false` if the Services page does not exist. A `CWC_TEST_BYPASS_HERO_GATE` constant (default `false`; can be flipped to `true` in test setup) bypasses the check.
+
+- [ ] **Step 1: Append the constant and helper to `lib/extras.php`**
+
+Find the end of the `hasPageHeader()` function (the `return true; }` block near the bottom of the relevant section). After that function's closing brace, add:
+
+```php
+/**
+ * Bypass constant for the inner-page hero ancestor check.
+ *
+ * When `true`, `isServicesDescendant()` returns `true` for every page.
+ * Set this in test setup (e.g. in `wp-config.php` or a test bootstrap) so
+ * test fixture pages that are not Services descendants can still render
+ * the hero.
+ */
+if ( ! defined( 'CWC_TEST_BYPASS_HERO_GATE' ) ) {
+	define( 'CWC_TEST_BYPASS_HERO_GATE', false );
+}
+
+/**
+ * Checks if the current page is the Services page, a child of it, or
+ * a grandchild of it. Used to gate the inner-page hero.
+ *
+ * @param WP_Post|null $post        The post to check. Defaults to the global `$post`.
+ * @param int|null     $services_id Override the Services page ID. Defaults to
+ *                                  the page with slug `services`.
+ *
+ * @return bool true if the post is the Services page or a descendant up to 2 levels.
+ */
+function isServicesDescendant( $post = null, $services_id = null ) {
+	if ( CWC_TEST_BYPASS_HERO_GATE ) {
+		return true;
+	}
+
+	if ( null === $post ) {
+		global $post;
+	}
+
+	if ( ! $post instanceof WP_Post ) {
+		return false;
+	}
+
+	if ( null === $services_id ) {
+		$services = get_page_by_path( 'services' );
+		if ( ! $services ) {
+			return false;
+		}
+		$services_id = (int) $services->ID;
+	}
+
+	$services_id = (int) $services_id;
+
+	if ( (int) $post->ID === $services_id ) {
+		return true;
+	}
+
+	if ( (int) $post->post_parent === $services_id ) {
+		return true;
+	}
+
+	$parent = get_post( $post->post_parent );
+	if ( $parent && (int) $parent->post_parent === $services_id ) {
+		return true;
+	}
+
+	return false;
+}
+```
+
+- [ ] **Step 2: Verify the file parses**
+
+Run: `php -l lib/extras.php`
+Expected: `No syntax errors detected in lib/extras.php`.
+
+- [ ] **Step 3: Commit**
+
+```bash
+git add lib/extras.php
+git commit -m "feat(hero): add isServicesDescendant() helper and bypass constant"
+```
+
+---
+
+### Task 7: Update `header.php` to gate the hero on `isServicesDescendant()`
+
+**Files:**
+- Modify: `header.php`
+
+**Interfaces:**
+- Consumes: `isServicesDescendant()` from Task 6.
+- Produces: a `$showHero` calculation that requires `isServicesDescendant() && hero_style === 'default'` for the `page` post type. The other gates (`is_home() || is_archive() || ...`) are unchanged.
+
+- [ ] **Step 1: Update `$showHero` in `header.php`**
+
+Replace the existing `$showHero` block:
+
+```php
+$showHero = in_array(
+    true,
+    array(
+        isServicesDescendant() && get_field( 'hero_style' ) === 'default',
+        is_home(),
+        is_archive(),
+        is_single(),
+        is_search(),
+        is_404(),
+    ),
+    true
+);
+```
+
+- [ ] **Step 2: Verify the file parses**
+
+Run: `php -l header.php`
+Expected: `No syntax errors detected in header.php`.
+
+- [ ] **Step 3: Commit**
+
+```bash
+git add header.php
+git commit -m "feat(hero): gate inner-page hero on Services descendants"
+```
+
+---
+
+### Task 8: Add Playwright test for the contact page
+
+**Files:**
+- Create: `tests/contact-page.spec.js`
+
+**Interfaces:**
+- Consumes: the rendered contact page at `/contact/`.
+- Produces: a Playwright spec that verifies the two-column layout, icon rows, form area, and Leaflet placeholder render at desktop and mobile viewports, with no console errors and no axe violations.
+
+- [ ] **Step 1: Create `tests/contact-page.spec.js`**
+
+```js
+import { expect, test } from "@playwright/test";
+const AxeBuilder = require("@axe-core/playwright").default;
+
+const contactUrl =
+    process.env.TEST_CONTACT_URL ||
+    "http://community-works-collaborative.test/contact/";
+
+test.describe("contact page", () => {
+    test("desktop: two-column layout with form area and map placeholder", async ({
+        page,
+    }) => {
+        const pageErrors = [];
+        page.on("pageerror", (err) => pageErrors.push(err.message));
+
+        await page.setViewportSize({ width: 1280, height: 900 });
+        await page.goto(contactUrl);
+
+        // No hero on the contact page.
+        expect(await page.locator(".page-hero").count()).toBe(0);
+
+        // Block renders.
+        const block = page.locator(".contact-info").first();
+        await expect(block).toBeVisible();
+
+        // Left column has heading, items, and form area.
+        const heading = page.locator(".contact-info__heading").first();
+        await expect(heading).toBeVisible();
+        await expect(heading).toHaveText(/contact/i);
+
+        const items = page.locator(".contact-info__item");
+        const itemsCount = await items.count();
+        expect(itemsCount).toBeGreaterThanOrEqual(1);
+
+        const formArea = page.locator(".contact-info__form").first();
+        await expect(formArea).toBeAttached();
+
+        // Right column has the Leaflet placeholder.
+        const map = page.locator(".contact-info__map").first();
+        await expect(map).toBeAttached();
+        await expect(map).toHaveId("contact-map");
+
+        // No JS errors.
+        expect(pageErrors).toEqual([]);
+    });
+
+    test("mobile 402: single column, map drops below form, no horizontal overflow", async ({
+        page,
+    }) => {
+        const pageErrors = [];
+        page.on("pageerror", (err) => pageErrors.push(err.message));
+
+        await page.setViewportSize({ width: 402, height: 874 });
+        await page.goto(contactUrl);
+
+        const details = page.locator(".contact-info__details").first();
+        const map = page.locator(".contact-info__map").first();
+
+        await expect(details).toBeVisible();
+        await expect(map).toBeAttached();
+
+        const detailsBox = await details.boundingBox();
+        const mapBox = await map.boundingBox();
+
+        expect(detailsBox).not.toBeNull();
+        expect(mapBox).not.toBeNull();
+        expect(mapBox.x).toBeGreaterThanOrEqual(detailsBox.x - 1);
+        expect(mapBox.x + mapBox.width).toBeLessThanOrEqual(402 + 3);
+
+        expect(pageErrors).toEqual([]);
+    });
+
+    test("mobile 320: nothing clips horizontally", async ({ page }) => {
+        await page.setViewportSize({ width: 320, height: 800 });
+        await page.goto(contactUrl);
+
+        const block = page.locator(".contact-info").first();
+        await expect(block).toBeVisible();
+
+        const blockBox = await block.boundingBox();
+        expect(blockBox.x + blockBox.width).toBeLessThanOrEqual(320 + 3);
+    });
+
+    test("axe: no violations", async ({ page }, testInfo) => {
+        await page.setViewportSize({ width: 1280, height: 900 });
+        await page.goto(contactUrl);
+
+        const results = await new AxeBuilder({ page })
+            .withTags([
+                "wcag2a",
+                "wcag2aa",
+                "wcag21a",
+                "wcag21aa",
+                "wcag22a",
+                "wcag22aa",
+            ])
+            .analyze();
+
+        await testInfo.attach("accessibility-scan-results", {
+            body: JSON.stringify(results, null, 2),
+            contentType: "application/json",
+        });
+
+        expect(results.violations).toEqual([]);
+    });
+});
+```
+
+- [ ] **Step 2: Run the new test**
+
+Run: `npx playwright test tests/contact-page.spec.js`
+Expected: all 4 tests pass. If a test fails, fix the underlying code (do not weaken the test) and re-run.
+
+- [ ] **Step 3: Commit**
+
+```bash
+git add tests/contact-page.spec.js
+git commit -m "test(contact): add contact-page Playwright spec"
+```
+
+---
+
+### Task 9: Add Playwright test for the hero re-scope
+
+**Files:**
+- Create: `tests/services-hero-scope.spec.js`
+
+**Interfaces:**
+- Consumes: rendered pages: Services, a child of Services, a grandchild, a non-Services page (e.g. About), and `/news/` (blog index).
+- Produces: a Playwright spec that asserts the hero renders on the first three and not on the latter two.
+
+**Pre-flight check (this task's pre-step):** confirm that the test fixture pages exist on the live site. If the test site is fresh, the developer may need to seed these pages in `beforeAll`. The spec uses environment variables so the URLs can be overridden:
+
+```bash
+TEST_SERVICES_URL=http://community-works-collaborative.test/services/
+TEST_SERVICES_CHILD_URL=http://community-works-collaborative.test/communication-services/
+TEST_SERVICES_GRANDCHILD_URL=http://community-works-collaborative.test/communication-services/some-grandchild/
+TEST_NON_SERVICES_URL=http://community-works-collaborative.test/about/
+```
+
+- [ ] **Step 1: Create `tests/services-hero-scope.spec.js`**
+
+```js
+import { expect, test } from "@playwright/test";
+
+const servicesUrl =
+    process.env.TEST_SERVICES_URL ||
+    "http://community-works-collaborative.test/services/";
+const childUrl =
+    process.env.TEST_SERVICES_CHILD_URL ||
+    "http://community-works-collaborative.test/communication-services/";
+const grandchildUrl =
+    process.env.TEST_SERVICES_GRANDCHILD_URL ||
+    "http://community-works-collaborative.test/communication-services/sample-grandchild/";
+const nonServicesUrl =
+    process.env.TEST_NON_SERVICES_URL ||
+    "http://community-works-collaborative.test/about/";
+const blogUrl =
+    process.env.TEST_BLOG_URL ||
+    "http://community-works-collaborative.test/news/";
+
+test.describe("hero ancestor scope", () => {
+    test("Services page renders the hero", async ({ page }) => {
+        await page.goto(servicesUrl);
+        await expect(page.locator(".page-hero").first()).toBeVisible();
+    });
+
+    test("child of Services renders the hero", async ({ page }) => {
+        await page.goto(childUrl);
+        await expect(page.locator(".page-hero").first()).toBeVisible();
+    });
+
+    test("grandchild of Services renders the hero", async ({ page }) => {
+        await page.goto(grandchildUrl);
+        await expect(page.locator(".page-hero").first()).toBeVisible();
+    });
+
+    test("non-Services page does NOT render the hero", async ({ page }) => {
+        await page.goto(nonServicesUrl);
+        expect(await page.locator(".page-hero").count()).toBe(0);
+    });
+
+    test("blog index still renders the hero (bypasses ancestor gate)", async ({
+        page,
+    }) => {
+        await page.goto(blogUrl);
+        await expect(page.locator(".page-hero").first()).toBeVisible();
+    });
+});
+```
+
+- [ ] **Step 2: Verify the test fixture URLs exist**
+
+Run (per URL):
+```bash
+curl -sI "$url" | head -1
+```
+Expected: `HTTP/1.1 200 OK` (or `301/302` for trailing-slash redirects). If a URL returns 404, the test will need a `beforeAll` that seeds the page; flag this and do not proceed without a real fixture.
+
+- [ ] **Step 3: Run the new test**
+
+Run: `npx playwright test tests/services-hero-scope.spec.js`
+Expected: all 5 tests pass. If `nonServicesUrl` still shows the hero, verify the live page's `post_parent` chain (the About page must not be a child or grandchild of `/services/`).
+
+- [ ] **Step 4: Commit**
+
+```bash
+git add tests/services-hero-scope.spec.js
+git commit -m "test(hero): add ancestor-scope Playwright spec"
+```
+
+---
+
+### Task 10: Run the full Playwright suite + PHPCS
+
+**Files:**
+- Modify: `static/dist/theme.css` (only if not already rebuilt).
+- Modify: any source files if a regression is found.
+
+- [ ] **Step 1: Run the full Playwright suite**
+
+Run: `npx playwright test`
+Expected: all tests pass except the 4 known pre-existing `mobile-homepage.spec.js` failures. The new `tests/contact-page.spec.js` and `tests/services-hero-scope.spec.js` pass.
+
+- [ ] **Step 2: Run PHPCS**
+
+Run: `composer lint`
+Expected: no errors. If errors are found, fix them (most likely are tab-vs-spaces in PHP files; use `composer lint:fix` to auto-fix).
+
+- [ ] **Step 3: Verify the rebuilt dist is current**
+
+Run: `git status static/dist/theme.css`
+Expected: `nothing to commit, working tree clean` (i.e. the dist file is up to date with the source CSS). If uncommitted, run `git add -f static/dist/theme.css` and commit with `chore: sync dist after lint/fix`.
+
+- [ ] **Step 4: Final commit (if anything changed in step 1-3)**
+
+```bash
+git add -A
+git commit -m "chore: final pass after Playwright and PHPCS"
+```
+
+---
+
+## Self-Review Notes
+
+- **Spec coverage:** Task 1 (icons), Task 2 (block PHP), Task 3 (layout CSS), Task 4 (form CSS), Task 5 (build), Task 6 (PHP helper + bypass), Task 7 (header.php), Task 8 (contact test), Task 9 (hero-scope test), Task 10 (full suite). Every spec section is covered.
+- **Placeholder scan:** No "TBD", "TODO", or "implement later" in any step. The "Leaflet placeholder" and "map pin SVG TBD" comments in the PHP and CSS are intentional (they document where the embed will mount, not unfinished work).
+- **Type consistency:** `isServicesDescendant( ?WP_Post $post = null, ?int $services_id = null ): bool` is used identically in Task 6 (definition) and Task 7 (call site). `CWC_TEST_BYPASS_HERO_GATE` is defined in Task 6 and respected in Task 7 by virtue of the helper checking it.
+- **Spec section "Out of Scope" (Leaflet embed, map pin SVG, ACF fields on the block, audit of existing InnerBlocks usage):** all flagged in the spec. Task 2's Step 1 audit confirms no InnerBlocks usage before removing it.

docs/superpowers/plans/2026-07-05-blog-post-card.md

@@ -0,0 +1,289 @@
+# Blog Post Card Styling Implementation Plan
+
+> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking.
+
+**Goal:** Restyle the blog post card to match `blog-post-card.png` — a vertical card with a featured image on top and a solid blue content area below containing the title, byline, and an orange "Read more" link.
+
+**Architecture:** A targeted CSS update to `styles/components/post-list.css` (the card body, title, byline, image border, and a new `.post-list__read-more` rule), a one-line markup addition in `index.php` to render the "Read more" anchor, and a single new assertion in the existing `tests/blog-page.spec.js`. The dist CSS is rebuilt once at the end.
+
+**Tech Stack:** WordPress 6.x, PHP 8.x, Tailwind CSS v4, Playwright, axe-core, PHPCS (WordPress standard).
+
+## Global Constraints
+
+- Tabs for PHP indentation (project standard; see `composer.json` and existing files).
+- The theme's Tailwind build outputs `static/dist/theme.css`; that file is gitignored but committed with `git add -f` per project convention.
+- PHPCS uses the WordPress coding standard; `composer lint` must pass. Pre-existing CRLF errors on untouched files are out of scope.
+- All design colors use the project's existing CSS custom properties from `styles/base/colors.css`. No hardcoded hex values for theme colors.
+- The card width behavior stays the same: `grid-cols-[repeat(auto-fit,minmax(20rem,1fr))]`. No layout refactor.
+- The "Read more" link reuses the post's permalink — it's the same destination as the title link.
+- The H1 page title and `search.php` are explicitly out of scope for this plan.
+
+---
+
+## File Structure
+
+| File | Responsibility | Created/Modified |
+| --- | --- | --- |
+| `index.php` | Render the "Read more" link after the byline. | Modify |
+| `styles/components/post-list.css` | Style the card body, image border, title, byline, and the new `.post-list__read-more`. | Modify |
+| `static/dist/theme.css` | Rebuilt via `npm run build`. | Modified (committed with `git add -f`). |
+| `tests/blog-page.spec.js` | Add a single assertion that the "Read more" link is visible in the first card. | Modify |
+
+---
+
+### Task 1: Add the "Read more" link in `index.php`
+
+**Files:**
+- Modify: `index.php:44-53`
+
+**Interfaces:**
+- Consumes: the standard WordPress loop (`have_posts()`, `the_post()`).
+- Produces: a `<a class="post-list__read-more" href="<?php the_permalink(); ?>">Read more &rarr;</a>` element inside `.post-list__details`, after the `.post-list__byline` div.
+
+- [ ] **Step 1: Add the "Read more" anchor**
+
+In `index.php`, after the `<div class="post-list__byline mt-auto">...</div>` block (which ends on line 52 with `</div>`), and before the closing `</div>` of `.post-list__details` (line 53), add the new anchor. The result is:
+
+```php
+<div class="post-list__details px-4 py-6 flex flex-col grow">
+    <a href="<?php the_permalink(); ?>" class="">
+        <h2 class="post-list__title font-normal text-25px text-balance line-clamp-4 truncate mt-0 mb-5 mx-0"><?php the_title(); ?></h2>
+    </a>
+
+    <div class="post-list__byline mt-auto">
+        <span class="post-list__author"><?php echo esc_html( ucfirst( get_the_author() ) ); ?> &mdash;</span>
+        <span class="post-list__date"><?php echo get_the_date(); ?></span>
+    </div>
+
+    <a class="post-list__read-more" href="<?php the_permalink(); ?>">Read more &rarr;</a>
+</div>
+```
+
+Specifically:
+- Insert one new line after the closing `</div>` of `.post-list__byline` (the line that contains only `</div>` ending the byline block).
+- The new line is: `<a class="post-list__read-more" href="<?php the_permalink(); ?>">Read more &rarr;</a>`
+- Indentation: tabs (matching the existing PHP in the file).
+- Use `&rarr;` (HTML entity) for the arrow — this is consistent with other `&mdash;` / `&hellip;` / `&laquo;` usage in the same file (see lines 50, 64, 95, 96).
+
+- [ ] **Step 2: Verify the file parses**
+
+Run: `php -l index.php`
+Expected: `No syntax errors detected in index.php`.
+
+- [ ] **Step 3: Commit**
+
+```bash
+git add index.php
+git commit -m "feat(blog): add Read more link to post card"
+```
+
+---
+
+### Task 2: Add card styles to `styles/components/post-list.css`
+
+**Files:**
+- Modify: `styles/components/post-list.css`
+
+**Interfaces:**
+- Consumes: the new `<a class="post-list__read-more">` from Task 1; the existing `.post-list__post`, `.post-list__img`, `.post-list__details`, `.post-list__title`, `.post-list__byline` elements from `index.php`.
+- Produces: a card with a solid blue content area, dark blue title and byline, and an orange "Read more" link. Removes the gray bottom border between the image and content area.
+
+- [ ] **Step 1: Replace the contents of `styles/components/post-list.css`**
+
+The current file is 11 lines containing only `.post-list__h1`. Replace the entire file with:
+
+```css
+/* Blog/post index listing styles */
+
+.post-list__h1 {
+    color: var(--color-cwc-blue-01);
+    font-family: var(--font-quincy, 'Quincy', serif);
+    font-size: var(--h1);
+    font-weight: 700;
+    line-height: 1.2;
+    margin: 0 0 2rem;
+    text-align: left;
+}
+
+.post-list__post {
+    border-color: var(--color-cwc-blue-03);
+    overflow: hidden;
+}
+
+.post-list__img {
+    border-bottom: 0;
+}
+
+.post-list__details {
+    background: var(--color-cwc-blue-03);
+    color: var(--color-cwc-blue-01);
+}
+
+.post-list__title {
+    color: var(--color-cwc-blue-01);
+    font-weight: 700;
+}
+
+.post-list__byline {
+    color: var(--color-cwc-blue-01);
+    font-size: 0.875rem;
+}
+
+.post-list__read-more {
+    color: var(--color-secondary);
+    font-weight: 600;
+    margin-top: 0.75rem;
+    text-decoration: none;
+}
+
+.post-list__read-more:hover {
+    text-decoration: underline;
+}
+```
+
+Notes on the rules:
+- `.post-list__post { border-color: var(--color-cwc-blue-03); }` overrides the `border-secondary` class on the element so the card border matches the content area (effectively invisible against the same-colored background).
+- `.post-list__post { overflow: hidden; }` ensures the image's `rounded-t-md` corners are clipped by the card's `rounded-md` corners (this is the standard "image fills top of card" pattern).
+- `.post-list__img { border-bottom: 0; }` removes the existing `border-b border-secondary` so the image and content area flow as separate blocks without a divider line.
+- `.post-list__details { background: var(--color-cwc-blue-03); }` is the solid blue content area (`#90c9e7`).
+- `.post-list__title { font-weight: 700; }` overrides the `font-normal` in the markup.
+- `.post-list__read-more` uses `--color-secondary` (aliased to `--color-cwc-orange-01`).
+- Indentation: 4 spaces (CSS convention, matches the existing `.post-list__h1` rule).
+
+- [ ] **Step 2: Verify the CSS file parses**
+
+Tailwind build is the integration test (Task 3). No standalone CSS lint step.
+
+- [ ] **Step 3: Commit**
+
+```bash
+git add styles/components/post-list.css
+git commit -m "feat(blog): style the post card body, title, byline, and Read more link"
+```
+
+---
+
+### Task 3: Add the "Read more" assertion in `tests/blog-page.spec.js`
+
+**Files:**
+- Modify: `tests/blog-page.spec.js:31-35`
+
+**Interfaces:**
+- Consumes: the new `.post-list__read-more` element from Tasks 1 and 2.
+- Produces: a passing assertion that the "Read more" link is visible in the first card and points to a post URL.
+
+- [ ] **Step 1: Add the assertion in the desktop test**
+
+In `tests/blog-page.spec.js`, after the existing first-card assertions (after `await expect(firstCard.locator(".post-list__byline")).toBeVisible();` on line 35), add the new assertion. The result is:
+
+```js
+// First card: image, title link, byline.
+const firstCard = posts.first();
+await expect(firstCard.locator(".post-list__img img")).toBeVisible();
+await expect(firstCard.locator(".post-list__title")).toBeVisible();
+await expect(firstCard.locator(".post-list__byline")).toBeVisible();
+
+// First card has a "Read more" link.
+const readMore = firstCard.locator(".post-list__read-more");
+await expect(readMore).toBeVisible();
+await expect(readMore).toHaveText(/^Read more\s*\S+$/);
+await expect(readMore).toHaveAttribute("href", /\/[a-z0-9-]+\/?$/);
+```
+
+Notes:
+- The text regex `/^Read more\s*\S+$/` matches "Read more" followed by whitespace and any non-whitespace character (the `→` arrow or any other trailing punctuation). This is robust to HTML-entity encoding in the rendered DOM.
+- The `href` regex matches a WordPress post permalink like `/my-post-slug/` or `/my-post-slug`.
+- Indentation: 4 spaces (matches the existing test file).
+- Do NOT remove the existing `.post-list__cats`/`.post-list__excerpt` count assertions (lines 38-39). They guard against the trim being undone and remain valid.
+
+- [ ] **Step 2: Run the new assertion in isolation**
+
+Run: `npx playwright test tests/blog-page.spec.js -g "Blog title, post grid"`
+Expected: PASS (the new assertion passes, all existing assertions still pass).
+
+If the test fails:
+- "Read more" not found → Task 1's markup change didn't land.
+- Text mismatch → confirm `&rarr;` was used (not `->` or `&amp;rarr;`).
+- `href` mismatch → confirm the markup uses `<?php the_permalink(); ?>` (not a hardcoded URL).
+
+- [ ] **Step 3: Commit**
+
+```bash
+git add tests/blog-page.spec.js
+git commit -m "test(blog): assert Read more link is present in the first card"
+```
+
+---
+
+### Task 4: Build the dist CSS and run the final quality gate
+
+**Files:**
+- Modify: `static/dist/theme.css` (committed with `git add -f`).
+
+- [ ] **Step 1: Run the build**
+
+Run: `npm run build`
+Expected: build completes without errors.
+
+- [ ] **Step 2: Verify the new classes are in the dist**
+
+Run: `grep -c "post-list__read-more" static/dist/theme.css`
+Expected: at least 1 match.
+
+Run: `grep -c "post-list__details" static/dist/theme.css`
+Expected: at least 1 match (the new `background` rule should compile into the dist).
+
+- [ ] **Step 3: Commit the rebuilt dist**
+
+```bash
+git add -f static/dist/theme.css
+git commit -m "build: regenerate dist with blog post card styles"
+```
+
+- [ ] **Step 4: Run the new test file**
+
+Run: `npx playwright test tests/blog-page.spec.js`
+Expected: all 4 tests pass.
+
+- [ ] **Step 5: Run the full Playwright suite**
+
+Run: `npx playwright test`
+Expected: same pass/fail count as before this plan. The new test (4th) added 1 passing test; no other tests should regress. The 14 pre-existing failures (12 from prior plans + 2 contact-page pre-existing) are unchanged.
+
+- [ ] **Step 6: Run PHPCS**
+
+Run: `composer lint`
+Expected: no NEW errors. The 5 pre-existing CRLF errors on untouched files (or 20 pre-existing issues per the prior `composer lint` baseline) remain unchanged.
+
+- [ ] **Step 7: Final commit (only if anything changed in step 1-6)**
+
+```bash
+git add -A
+git commit -m "chore: final pass after Playwright and PHPCS"
+```
+
+If nothing changed (no dist drift, no PHPCS issues, no other drift), skip the commit.
+
+---
+
+## Self-Review Notes
+
+- **Spec coverage:**
+  - "Vertical card (image top, content below)" → already true; the card structure is unchanged.
+  - "Title + byline + Read more link" → Task 1 adds the link; existing markup already has title and byline.
+  - "Solid `--color-cwc-blue-03` background" → Task 2 (`.post-list__details`).
+  - "Title in `--color-cwc-blue-01`, weight 700" → Task 2 (`.post-list__title`).
+  - "Byline in `--color-cwc-blue-01`, smaller" → Task 2 (`.post-list__byline`).
+  - "Read more in `--color-secondary` (orange)" → Task 2 (`.post-list__read-more`).
+  - "Remove gray border between image and content" → Task 2 (`.post-list__img { border-bottom: 0; }`).
+  - "Card border matches content area" → Task 2 (`.post-list__post { border-color: ...; }`).
+  - "Single new test assertion" → Task 3.
+  - "Dist rebuild" → Task 4.
+  - "All design tokens, no hardcoded hex" → Task 2 uses only `var(--...)` references.
+  - "Out of scope: H1, search.php" → explicitly noted in Global Constraints.
+
+- **Placeholder scan:** No TBD/TODO. The "→" character is exact in both `index.php` (`&rarr;`) and the test (`→`). The `href` regex is exact.
+
+- **Type consistency:** Class names: `post-list__read-more` (consistent with `post-list__post`, `post-list__title`, `post-list__byline`). CSS variable names: `--color-cwc-blue-01`, `--color-cwc-blue-03`, `--color-secondary` (all existing tokens).
+
+- **Indentation:** Tabs for PHP (Task 1), 4 spaces for CSS (Task 2) and JS (Task 3). Each matches the convention in its file.

docs/superpowers/plans/2026-07-24-services-content-blocks.md

@@ -0,0 +1,626 @@
+# Services Content Blocks Implementation Plan
+
+> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking.
+
+**Goal:** Build the missing content-area components for the Mapping services page (and any other service sub-page), matching `Mapping-Services.png`. The hero, header, and footer are already in place and must not be touched.
+
+**Architecture:** One new ACF block (`services-list`) that renders a row of cards. Card count is editor-driven (2, 3, or 4); card size and grid layout adapt to the count. The orange horizontal line that bisects the images is rendered by the block itself as a full-bleed SVG background. The closing "At CWC, mapping is about more than data…" block reuses the existing `pull-quote` block — no new build needed. Editor composes the page in Gutenberg by adding `Services List` and `Pull Quote` blocks to any service sub-page; `page.php` already calls `the_content()`, so no template change is required.
+
+**Tech Stack:** WordPress 6.x, PHP 8.x, Tailwind CSS v4, Playwright, axe-core, PHPCS (WordPress standard).
+
+## Global Constraints
+
+- Tabs for PHP indentation (project standard).
+- `static/dist/theme.css` is committed (not gitignored) per project convention.
+- PHPCS uses the WordPress coding standard; `composer lint` must pass for all touched files.
+- All design colors use the project's existing CSS custom properties from `styles/base/colors.css`. No hardcoded hex values for theme colors.
+- Reuse the existing post-title accent pattern (blue heading + orange `::after` underline from `.post-title h1` in `styles/base/misc.css`) for consistency. Do not introduce a new accent style.
+- Reuse the existing `pull-quote` block for the closing statement — no duplicate block.
+- Page template `page.php` is not modified. The page-children block is not used.
+- This work does **not** edit `header.php`, `footer.php`, `views/partials/page-hero.php`, or `views/partials/page-hero-services.php`.
+- Tailwind v4 picks up class names from source files at build time. The dynamic `lg:grid-cols-N` class needs to literally appear in the source PHP for Tailwind to emit the rule.
+- The `static/img/services-list-line.svg` is a fixed asset; do not make it editor-uploadable.
+- All commits follow the project's emoji-prefixed commit-message style (e.g. `✨ feat: …`).
+
+## File Structure
+
+| File | Responsibility | Created/Modified |
+| --- | --- | --- |
+| `views/blocks/services-list/services-list.php` | Block template (PHP) — renders the row of cards. | Create |
+| `views/blocks/services-list/services-list.css` | Block styles (CSS) — layout, headings, bisecting line. | Create |
+| `views/blocks/services-list/block.json` | Block registration metadata (name, category, icon, render template). | Create |
+| `acf/group_services_list.json` | ACF field group for the `acf/services-list` block. | Create |
+| `static/img/services-list-line.svg` | Decorative orange horizontal line SVG that bisects the images. | Create |
+| `styles/blocks/index.css` | Import the new block's CSS. | Modify |
+| `tests/services-page.spec.js` | Playwright tests for the rendered block. | Create |
+| `static/dist/theme.css` | Rebuilt via `npm run build`. | Modified |
+
+---
+
+## Task 1: ACF Field Group
+
+**Files:**
+- Create: `acf/group_services_list.json`
+
+**Interfaces:**
+- Produces: ACF group with `key: "group_services_list"`, location scoped to `block == acf/services-list`, fields: `items` (repeater) → `image`, `heading`, `description`.
+
+- [ ] **Step 1: Create the ACF field group JSON file**
+
+Create the file `acf/group_services_list.json` with the following exact content:
+
+```json
+{
+    "key": "group_services_list",
+    "title": "Services List",
+    "fields": [
+        {
+            "key": "field_services_items",
+            "label": "Items",
+            "name": "items",
+            "aria-label": "",
+            "type": "repeater",
+            "instructions": "Add 2, 3, or 4 cards. The grid layout adapts to the count.",
+            "required": 0,
+            "conditional_logic": 0,
+            "wrapper": {
+                "width": "",
+                "class": "",
+                "id": ""
+            },
+            "layout": "block",
+            "pagination": 0,
+            "min": 0,
+            "max": 0,
+            "collapsed": "",
+            "button_label": "Add Service",
+            "rows_per_page": 20,
+            "sub_fields": [
+                {
+                    "key": "field_services_item_image",
+                    "label": "Image",
+                    "name": "image",
+                    "aria-label": "",
+                    "type": "image",
+                    "instructions": "",
+                    "required": 0,
+                    "conditional_logic": 0,
+                    "wrapper": {
+                        "width": "",
+                        "class": "",
+                        "id": ""
+                    },
+                    "return_format": "array",
+                    "library": "all",
+                    "min_width": "",
+                    "min_height": "",
+                    "min_size": "",
+                    "max_width": "",
+                    "max_height": "",
+                    "max_size": "",
+                    "mime_types": "",
+                    "allow_in_bindings": 0,
+                    "preview_size": "medium"
+                },
+                {
+                    "key": "field_services_item_heading",
+                    "label": "Heading",
+                    "name": "heading",
+                    "aria-label": "",
+                    "type": "text",
+                    "instructions": "",
+                    "required": 0,
+                    "conditional_logic": 0,
+                    "wrapper": {
+                        "width": "",
+                        "class": "",
+                        "id": ""
+                    },
+                    "default_value": "",
+                    "maxlength": "",
+                    "allow_in_bindings": 0,
+                    "placeholder": "",
+                    "prepend": "",
+                    "append": ""
+                },
+                {
+                    "key": "field_services_item_description",
+                    "label": "Description",
+                    "name": "description",
+                    "aria-label": "",
+                    "type": "textarea",
+                    "instructions": "",
+                    "required": 0,
+                    "conditional_logic": 0,
+                    "wrapper": {
+                        "width": "",
+                        "class": "",
+                        "id": ""
+                    },
+                    "default_value": "",
+                    "placeholder": "",
+                    "maxlength": "",
+                    "rows": 4,
+                    "new_lines": ""
+                }
+            ]
+        }
+    ],
+    "location": [
+        [
+            {
+                "param": "block",
+                "operator": "==",
+                "value": "acf/services-list"
+            }
+        ]
+    ],
+    "menu_order": 0,
+    "position": "normal",
+    "style": "default",
+    "label_placement": "top",
+    "instruction_placement": "label",
+    "hide_on_screen": "",
+    "active": true,
+    "description": "Service cards row. Card count (2-4) determines the layout.",
+    "show_in_rest": 0,
+    "display_title": "",
+    "allow_ai_access": false,
+    "ai_description": "",
+    "modified": 1753305600
+}
+```
+
+- [ ] **Step 2: Verify the JSON parses**
+
+Run: `node -e "JSON.parse(require('fs').readFileSync('acf/group_services_list.json','utf8')); console.log('OK')"`
+Expected: prints `OK` and exits 0.
+
+- [ ] **Step 3: Commit**
+
+```bash
+cd "C:/Users/ksolo/Herd/community-works-collaborative/wp-content/themes/community-works-collaborative"
+git add acf/group_services_list.json
+git commit -m "✨ feat: Add ACF field group for services-list block"
+```
+
+---
+
+## Task 2: Decorative SVG Asset
+
+**Files:**
+- Create: `static/img/services-list-line.svg`
+
+**Interfaces:**
+- Produces: A 1600×8 viewBox SVG with a 2px-tall orange `#F26B53` rectangle, `preserveAspectRatio="none"`. Reference URL: `/wp-content/themes/community-works-collaborative/static/img/services-list-line.svg`.
+
+- [ ] **Step 1: Create the SVG asset**
+
+Create the file `static/img/services-list-line.svg` with the following exact content:
+
+```svg
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1600 8" preserveAspectRatio="none">
+    <rect x="0" y="3" width="1600" height="2" fill="#F26B53" />
+</svg>
+```
+
+- [ ] **Step 2: Verify the SVG is well-formed**
+
+Run: `node -e "const fs=require('fs'); const s=fs.readFileSync('static/img/services-list-line.svg','utf8'); if(!s.includes('viewBox=\"0 0 1600 8\"')||!s.includes('fill=\"#F26B53\"')) { process.exit(1); } console.log('OK')"`
+Expected: prints `OK` and exits 0.
+
+- [ ] **Step 3: Commit**
+
+```bash
+cd "C:/Users/ksolo/Herd/community-works-collaborative/wp-content/themes/community-works-collaborative"
+git add static/img/services-list-line.svg
+git commit -m "✨ feat: Add services-list decorative line SVG"
+```
+
+---
+
+## Task 3: Block Registration JSON
+
+**Files:**
+- Create: `views/blocks/services-list/block.json`
+
+**Interfaces:**
+- Produces: `block.json` declaring `acf/services-list` as the block name, `services-list.php` as the render template, `grid-view` icon, `common` category. `regACFBlocks()` in `functions.php` will pick this up automatically — no PHP registration code change required.
+
+- [ ] **Step 1: Create the block.json file**
+
+Create the file `views/blocks/services-list/block.json` with the following exact content:
+
+```json
+{
+    "name": "acf/services-list",
+    "title": "Services List",
+    "description": "A row of service cards. Card count (2, 3, or 4) determines the layout.",
+    "category": "common",
+    "icon": "grid-view",
+    "keywords": ["services", "cards", "mapping"],
+    "acf": {
+        "mode": "preview",
+        "renderTemplate": "services-list.php"
+    },
+    "supports": {
+        "anchor": true,
+        "align": false
+    }
+}
+```
+
+- [ ] **Step 2: Verify the JSON parses**
+
+Run: `node -e "JSON.parse(require('fs').readFileSync('views/blocks/services-list/block.json','utf8')); console.log('OK')"`
+Expected: prints `OK` and exits 0.
+
+- [ ] **Step 3: Commit**
+
+```bash
+cd "C:/Users/ksolo/Herd/community-works-collaborative/wp-content/themes/community-works-collaborative"
+git add views/blocks/services-list/block.json
+git commit -m "✨ feat: Add services-list block.json registration"
+```
+
+---
+
+## Task 4: Block CSS
+
+**Files:**
+- Create: `views/blocks/services-list/services-list.css`
+
+**Interfaces:**
+- Produces: BEM-styled CSS for `.services-list`, `__line`, `__grid`, `__card`, `__media`, `__heading`, `__desc`. Reuses `text-cwc-blue-01` and `var(--color-secondary)` from existing tokens. Renders the bisecting line via `background-image: url('/wp-content/themes/community-works-collaborative/static/img/services-list-line.svg')`.
+
+- [ ] **Step 1: Create the block CSS file**
+
+Create the file `views/blocks/services-list/services-list.css` with the following exact content:
+
+```css
+/* Services List block */
+
+.services-list {
+    --services-line-top: 25%;
+
+    &__line {
+        position: absolute;
+        inset-inline: 0;
+        top: var(--services-line-top);
+        height: 8px;
+        pointer-events: none;
+        z-index: 1;
+        background-image: url('/wp-content/themes/community-works-collaborative/static/img/services-list-line.svg');
+        background-repeat: no-repeat;
+        background-position: center center;
+        background-size: 100% 100%;
+    }
+
+    &__grid {
+        position: relative;
+        z-index: 2;
+    }
+
+    &__card {
+        @apply flex flex-col;
+    }
+
+    &__media {
+        @apply overflow-hidden rounded-md bg-gray-100;
+    }
+
+    &__img {
+        @apply w-full h-full object-cover;
+    }
+
+    &__heading {
+        @apply text-cwc-blue-01 text-24px font-bold leading-none mt-6 mb-4;
+
+        &::after {
+            background: var(--color-secondary);
+            content: "";
+            display: block;
+            height: 4px;
+            margin-top: 0.45rem;
+            width: 3rem;
+        }
+    }
+
+    &__desc {
+        @apply text-gray-600 text-16px font-light leading-snug;
+    }
+}
+
+@media (max-width: 1023px) {
+    .services-list__line {
+        display: none;
+    }
+}
+```
+
+- [ ] **Step 2: Verify the CSS contains the expected classes**
+
+The brief uses CSS-nesting shorthand (`&__line`, `&__grid`, etc.) for 6 of the 7 BEM children, and a literal selector (`.services-list__line`) for the one inside the `@media` block. A naive grep for the literal class names will undercount. Use:
+
+```bash
+grep -cE "&__(line|grid|card|media|img|heading|desc)|services-list__(line|grid|card|media|img|heading|desc)" views/blocks/services-list/services-list.css
+```
+
+Expected: `8` (7 nested `&__` selectors + 1 literal `.services-list__line` inside the `@media` block).
+
+- [ ] **Step 3: Commit**
+
+```bash
+cd "C:/Users/ksolo/Herd/community-works-collaborative/wp-content/themes/community-works-collaborative"
+git add views/blocks/services-list/services-list.css
+git commit -m "✨ feat: Add services-list block CSS"
+```
+
+---
+
+## Task 5: Block Template (PHP)
+
+**Files:**
+- Create: `views/blocks/services-list/services-list.php`
+
+**Interfaces:**
+- Consumes: `get_field( 'items' )` → array of items each with `image` (array: `url`, `alt`), `heading` (string), `description` (string).
+- Produces: A `<section class="services-list ...">` element containing the bisecting `__line` div, a `container` with a grid div, and a `<article class="services-list__card">` per item. Computes the dynamic `lg:grid-cols-N` class from item count.
+
+- [ ] **Step 1: Create the block PHP template**
+
+Create the file `views/blocks/services-list/services-list.php` with the following exact content (tabs for indentation):
+
+```php
+<?php
+/**
+ * Block Name: Services List
+ *
+ * A row of service cards. Card count (2, 3, or 4) determines the layout.
+ *
+ * @package CWC
+ */
+
+namespace CWC;
+
+$items = get_field( 'items' );
+
+if ( empty( $items ) ) {
+	return;
+}
+
+$count       = count( $items );
+$grid_cols   = max( 2, min( 4, (int) $count ) );
+$grid_class  = 'lg:grid-cols-' . $grid_cols;
+$line_url    = '/wp-content/themes/community-works-collaborative/static/img/services-list-line.svg';
+
+$classes = 'services-list mx-break-out relative ' . $grid_class;
+$wrapper = blockWrapperAttributes( $classes, $is_preview );
+?>
+
+<section <?php echo wp_kses_post( $wrapper ); ?>>
+	<div class="services-list__line" aria-hidden="true" style="background-image: url('<?php echo esc_url( $line_url ); ?>');"></div>
+
+	<div class="container">
+		<div class="services-list__grid grid grid-cols-1 <?php echo esc_attr( $grid_class ); ?> gap-8 lg:gap-12">
+			<?php foreach ( $items as $item ) : ?>
+				<article class="services-list__card">
+					<?php if ( ! empty( $item['image'] ) ) : ?>
+						<figure class="services-list__media aspect-square">
+							<img
+								class="services-list__img"
+								src="<?php echo esc_url( $item['image']['url'] ); ?>"
+								alt="<?php echo esc_attr( $item['image']['alt'] ?? '' ); ?>"
+								loading="lazy"
+							/>
+						</figure>
+					<?php endif; ?>
+
+					<?php if ( ! empty( $item['heading'] ) ) : ?>
+						<h3 class="services-list__heading">
+							<?php echo wp_kses_post( $item['heading'] ); ?>
+						</h3>
+					<?php endif; ?>
+
+					<?php if ( ! empty( $item['description'] ) ) : ?>
+						<div class="services-list__desc">
+							<?php echo wp_kses_post( $item['description'] ); ?>
+						</div>
+					<?php endif; ?>
+				</article>
+			<?php endforeach; ?>
+		</div>
+	</div>
+</section>
+```
+
+- [ ] **Step 2: Lint the PHP file with PHPCS**
+
+Run: `composer exec phpcs -- views/blocks/services-list/services-list.php`
+Expected: exits 0 with no errors. If there are pre-existing project-wide issues unrelated to this file, fix only the ones in this file.
+
+- [ ] **Step 3: Verify the dynamic grid class is in the source**
+
+Run: `grep -E "lg:grid-cols-\$grid_cols|lg:grid-cols-' \. \$grid_cols" views/blocks/services-list/services-list.php`
+Expected: at least one match (Tailwind must see the literal class name in the source to emit the rule).
+
+- [ ] **Step 4: Commit**
+
+```bash
+cd "C:/Users/ksolo/Herd/community-works-collaborative/wp-content/themes/community-works-collaborative"
+git add views/blocks/services-list/services-list.php
+git commit -m "✨ feat: Add services-list block PHP template"
+```
+
+---
+
+## Task 6: CSS Import Wiring
+
+**Files:**
+- Modify: `styles/blocks/index.css`
+
+**Interfaces:**
+- Consumes: `views/blocks/services-list/services-list.css` (from Task 4).
+- Produces: A new `@import` line at the end of `styles/blocks/index.css` so Tailwind's build picks up the block's CSS.
+
+- [ ] **Step 1: Add the import to the block index CSS**
+
+Append the following line at the end of `styles/blocks/index.css`:
+
+```css
+@import '../../views/blocks/services-list/services-list.css';
+```
+
+After the edit, the file should end with:
+
+```
+@import '../../views/blocks/contact-info/contact-info.css';
+@import '../../views/blocks/services-list/services-list.css';
+```
+
+- [ ] **Step 2: Verify the import is present**
+
+Run: `grep -c "services-list/services-list.css" styles/blocks/index.css`
+Expected: `1`.
+
+- [ ] **Step 3: Commit**
+
+```bash
+cd "C:/Users/ksolo/Herd/community-works-collaborative/wp-content/themes/community-works-collaborative"
+git add styles/blocks/index.css
+git commit -m "🔧 chore: Import services-list block CSS into theme"
+```
+
+---
+
+## Task 7: Build the CSS
+
+**Files:**
+- Modify: `static/dist/theme.css`
+
+**Interfaces:**
+- Consumes: The new import in `styles/blocks/index.css` (from Task 6) and the block CSS (from Task 4).
+- Produces: A rebuilt `static/dist/theme.css` that includes the `.services-list*` rules and the dynamic `lg:grid-cols-2`, `lg:grid-cols-3`, `lg:grid-cols-4` utilities.
+
+- [ ] **Step 1: Run the production Tailwind build**
+
+Run: `npm run build`
+Expected: completes with no errors. The output file `static/dist/theme.css` is updated in place.
+
+- [ ] **Step 2: Verify the services-list CSS classes are in the built output**
+
+The build unwraps CSS-nesting `&__heading` into `__heading.services-list` (no literal `.services-list__heading` is emitted). Use a fixed-string search that matches the un-nested form:
+
+```bash
+grep -cF "__heading.services-list" static/dist/theme.css
+```
+
+Expected: `1` or more. (Note: on Windows Git-Bash, prefer `grep -F` because POSIX `\\:` escapes are stripped before reaching grep.)
+
+- [ ] **Step 3: Verify the dynamic grid classes are in the built output**
+
+Same Windows-shell caveat. Use fixed-string search:
+
+```bash
+grep -cF "lg\:grid-cols-2" static/dist/theme.css
+grep -cF "lg\:grid-cols-3" static/dist/theme.css
+grep -cF "lg\:grid-cols-4" static/dist/theme.css
+```
+
+Expected: each returns `1` or more.
+
+- [ ] **Step 4: Commit the rebuilt dist**
+
+```bash
+cd "C:/Users/ksolo/Herd/community-works-collaborative/wp-content/themes/community-works-collaborative"
+git add -f static/dist/theme.css
+git commit -m "🎨 build: Rebuild dist with services-list block styles"
+```
+
+---
+
+## Task 8: Playwright Tests
+
+**Files:**
+- Create: `tests/services-page.spec.js`
+
+**Interfaces:**
+- Consumes: The rendered `views/blocks/services-list/services-list.php` template (Tasks 4 + 5) on the WordPress page `/services/mapping/`.
+- Produces: Three tests:
+  1. Card count, image, and heading visibility per block (expects 2 + 4 cards across two block instances).
+  2. Bisecting `__line` is present and `aria-hidden="true"`.
+  3. No axe-core a11y violations scoped to `.services-list`.
+
+> **Prerequisite:** the test depends on the mapping page being composed in Gutenberg with two `Services List` blocks (2 items + 4 items) and a `Pull Quote` block. That composition is the editor's responsibility and is not part of this plan. The tests should be authored against the *intended* state, not a placeholder state.
+
+- [ ] **Step 1: Create the test spec file**
+
+Create the file `tests/services-page.spec.js` with the following exact content:
+
+```js
+import { test, expect } from "@playwright/test";
+import AxeBuilder from "@axe-core/playwright";
+
+test.describe("Services List block on /services/mapping/", () => {
+    test("renders the heading and image for each card", async ({ page }) => {
+        await page.goto("/services/mapping/");
+
+        const blocks = page.locator(".services-list");
+        await expect(blocks).toHaveCount(2);
+
+        await expect(blocks.nth(0).locator(".services-list__card")).toHaveCount(2);
+        await expect(blocks.nth(1).locator(".services-list__card")).toHaveCount(4);
+
+        const firstCard = blocks.nth(0).locator(".services-list__card").first();
+        await expect(firstCard.locator(".services-list__media img")).toBeVisible();
+        await expect(firstCard.locator(".services-list__heading")).toBeVisible();
+    });
+
+    test("bisecting line is present and aria-hidden", async ({ page }) => {
+        await page.goto("/services/mapping/");
+        const line = page.locator(".services-list__line").first();
+        await expect(line).toBeAttached();
+        await expect(line).toHaveAttribute("aria-hidden", "true");
+    });
+
+    test("no axe violations on the services-list block", async ({ page }) => {
+        await page.goto("/services/mapping/");
+        const results = await new AxeBuilder({ page })
+            .include(".services-list")
+            .analyze();
+        expect(results.violations).toEqual([]);
+    });
+});
+```
+
+- [ ] **Step 2: Run the tests**
+
+Run: `npx playwright test tests/services-page.spec.js`
+Expected: all 3 tests pass. If tests fail because the mapping page has not yet been composed in the editor, that's an expected prerequisite — note the prerequisite in the final report and skip the test run.
+
+- [ ] **Step 3: Commit**
+
+```bash
+cd "C:/Users/ksolo/Herd/community-works-collaborative/wp-content/themes/community-works-collaborative"
+git add tests/services-page.spec.js
+git commit -m "✅ test: Add Playwright tests for services-list block"
+```
+
+---
+
+## Self-Review Notes
+
+- **Spec coverage:**
+  - One new ACF block (`services-list`) — covered by Tasks 1, 3, 4, 5.
+  - Repeater of `items` with `image` / `heading` / `description` — covered by Task 1.
+  - Card count drives grid columns (2/3/4) — covered by Task 5 (PHP computes the class) and Task 7 (Tailwind emits the rule).
+  - Orange bisecting line, full-bleed, behind the cards, hidden on mobile — covered by Tasks 2 (SVG), 4 (CSS with `inset-inline: 0`, `z-index: 1` on line, `z-index: 2` on grid, media query to hide on `<lg`).
+  - Reuse `pull-quote` for closing — explicitly out of scope (no code change needed).
+  - Page template not modified — confirmed; `page.php` is not in any file list.
+  - `header.php` / `footer.php` / page hero not touched — confirmed.
+  - Reuse existing design tokens (`text-cwc-blue-01`, `var(--color-secondary)`, brand orange `#F26B53`) — confirmed in Tasks 4 and 2.
+  - Playwright tests covering count, image, heading, line, a11y — covered by Task 8.
+  - Dist rebuild — covered by Task 7.
+- **Placeholder scan:** No TBDs. Every step has a concrete file path, exact content, exact command, and expected output. The only conditional is in Task 8 Step 2 — explicitly called out as a prerequisite (editor must compose the page in Gutenberg), not a placeholder.
+- **Type consistency:** ACF field `name: "items"` is used in Task 5 (`get_field( 'items' )`). Sub-field names `image`, `heading`, `description` are used in Task 1 (defined) and Task 5 (consumed). Class names `services-list`, `__line`, `__grid`, `__card`, `__media`, `__img`, `__heading`, `__desc` are used in Task 4 (defined in CSS) and Task 5 (rendered in markup) and Task 8 (asserted in tests) — consistent.
+- **Ambiguity check:** "Editor adds 2 instances of the block on the mapping page" is the chosen approach (per spec §1 and design Q&A). "Bisecting line" is a single orange SVG, 8px tall, positioned at `top: 25%` of the block wrapper, hidden on mobile. Both are explicit.

docs/superpowers/plans/2026-07-25-team-grid-block.md

@@ -0,0 +1,620 @@
+# Team Grid Block Implementation Plan
+
+> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking.
+
+**Goal:** Build a new `team-grid` ACF block for the Team page (and any other page that needs a team grid) that renders a responsive grid of team members. Each member shows their photo (rounded rectangle), name, and title. The bio is collapsed by default and expands vertically with a smooth animation when the photo, name, or title is clicked.
+
+**Architecture:** One new ACF block (`acf/team-grid`) with a single repeater of `members` (image, name, title, bio). The block uses native HTML `<details>`/`<summary>` for the click-to-expand interaction, animated with the `grid-template-rows: 0fr → 1fr` CSS pattern (no JavaScript). The block has no built-in background — the editor wraps it in an existing Section block when a dark/light background is needed. The page template is unchanged; the editor adds the block to the Team page in Gutenberg.
+
+**Tech Stack:** WordPress 6.x, PHP 8.x, Tailwind CSS v4, Playwright, axe-core, PHPCS (WordPress standard).
+
+## Global Constraints
+
+- Tabs for PHP indentation (project standard).
+- `static/dist/theme.css` is committed (not gitignored) per project convention.
+- PHPCS uses the WordPress coding standard; `composer lint` must pass for all touched files.
+- All design colors use the project's existing CSS custom properties from `styles/base/colors.css`. No hardcoded hex values for theme colors.
+- Reuse existing design tokens where possible (e.g. `text-cwc-blue-01`, `var(--color-secondary)`).
+- The headshot uses `rounded-md` to match other image cards in the project.
+- All commits follow the project's emoji-prefixed commit-message style (e.g. `✨ feat: …`).
+- This work does **not** edit `header.php`, `footer.php`, `views/partials/page-hero.php`, or `views/partials/page-hero-services.php`.
+- `page.php` is not modified.
+- No JavaScript files are added.
+- Reuse the same `regACFBlocks()` auto-registration pattern as `services-list`.
+- Tailwind v4 picks up class names from source files at build time. The dynamic class names used in the CSS (`grid-cols-1`, `sm:grid-cols-2`, `lg:grid-cols-3`, `w-32 h-32`, etc.) must all be literal in the source for the build to emit them.
+
+## File Structure
+
+| File | Responsibility | Created/Modified |
+| --- | --- | --- |
+| `views/blocks/team-grid/team-grid.php` | Block template (PHP) — renders the grid. | Create |
+| `views/blocks/team-grid/team-grid.css` | Block styles (CSS) — layout, photo, summary, animation. | Create |
+| `views/blocks/team-grid/block.json` | Block registration metadata. | Create |
+| `acf/group_team_grid.json` | ACF field group for the `acf/team-grid` block. | Create |
+| `styles/blocks/index.css` | Import the new block's CSS. | Modify |
+| `tests/team-page.spec.js` | Playwright tests for the rendered block. | Create |
+| `static/dist/theme.css` | Rebuilt via `npm run build`. | Modified |
+
+---
+
+## Task 1: ACF Field Group
+
+**Files:**
+- Create: `acf/group_team_grid.json`
+
+**Interfaces:**
+- Produces: ACF group with `key: "group_team_grid"`, location scoped to `block == acf/team-grid`, fields: `members` (repeater) → `image`, `name`, `title`, `bio`.
+
+- [ ] **Step 1: Create the ACF field group JSON file**
+
+Create the file `acf/group_team_grid.json` with the following exact content:
+
+```json
+{
+    "key": "group_team_grid",
+    "title": "Team Grid",
+    "fields": [
+        {
+            "key": "field_team_grid_members",
+            "label": "Members",
+            "name": "members",
+            "aria-label": "",
+            "type": "repeater",
+            "instructions": "Add team members. Click a card to expand the bio.",
+            "required": 0,
+            "conditional_logic": 0,
+            "wrapper": {
+                "width": "",
+                "class": "",
+                "id": ""
+            },
+            "layout": "block",
+            "pagination": 0,
+            "min": 0,
+            "max": 0,
+            "collapsed": "",
+            "button_label": "Add Team Member",
+            "rows_per_page": 20,
+            "sub_fields": [
+                {
+                    "key": "field_team_grid_member_image",
+                    "label": "Image",
+                    "name": "image",
+                    "aria-label": "",
+                    "type": "image",
+                    "instructions": "",
+                    "required": 0,
+                    "conditional_logic": 0,
+                    "wrapper": {
+                        "width": "",
+                        "class": "",
+                        "id": ""
+                    },
+                    "return_format": "array",
+                    "library": "all",
+                    "min_width": "",
+                    "min_height": "",
+                    "min_size": "",
+                    "max_width": "",
+                    "max_height": "",
+                    "max_size": "",
+                    "mime_types": "",
+                    "allow_in_bindings": 0,
+                    "preview_size": "medium"
+                },
+                {
+                    "key": "field_team_grid_member_name",
+                    "label": "Name",
+                    "name": "name",
+                    "aria-label": "",
+                    "type": "text",
+                    "instructions": "",
+                    "required": 0,
+                    "conditional_logic": 0,
+                    "wrapper": {
+                        "width": "",
+                        "class": "",
+                        "id": ""
+                    },
+                    "default_value": "",
+                    "maxlength": "",
+                    "allow_in_bindings": 0,
+                    "placeholder": "",
+                    "prepend": "",
+                    "append": ""
+                },
+                {
+                    "key": "field_team_grid_member_title",
+                    "label": "Title",
+                    "name": "title",
+                    "aria-label": "",
+                    "type": "text",
+                    "instructions": "",
+                    "required": 0,
+                    "conditional_logic": 0,
+                    "wrapper": {
+                        "width": "",
+                        "class": "",
+                        "id": ""
+                    },
+                    "default_value": "",
+                    "maxlength": "",
+                    "allow_in_bindings": 0,
+                    "placeholder": "",
+                    "prepend": "",
+                    "append": ""
+                },
+                {
+                    "key": "field_team_grid_member_bio",
+                    "label": "Bio",
+                    "name": "bio",
+                    "aria-label": "",
+                    "type": "wysiwyg",
+                    "instructions": "",
+                    "required": 0,
+                    "conditional_logic": 0,
+                    "wrapper": {
+                        "width": "",
+                        "class": "",
+                        "id": ""
+                    },
+                    "default_value": "",
+                    "tabs": "visual",
+                    "toolbar": "basic",
+                    "media_upload": 0,
+                    "delay": 0,
+                    "allow_in_bindings": 0
+                }
+            ]
+        }
+    ],
+    "location": [
+        [
+            {
+                "param": "block",
+                "operator": "==",
+                "value": "acf/team-grid"
+            }
+        ]
+    ],
+    "menu_order": 0,
+    "position": "normal",
+    "style": "default",
+    "label_placement": "top",
+    "instruction_placement": "label",
+    "hide_on_screen": "",
+    "active": true,
+    "description": "Team grid block. Each member is a card with photo, name, title, and a collapsible bio.",
+    "show_in_rest": 0,
+    "display_title": "",
+    "allow_ai_access": false,
+    "ai_description": "",
+    "modified": 1753401600
+}
+```
+
+- [ ] **Step 2: Verify the JSON parses**
+
+Run: `node -e "JSON.parse(require('fs').readFileSync('acf/group_team_grid.json','utf8')); console.log('OK')"`
+Expected: prints `OK` and exits 0.
+
+- [ ] **Step 3: Commit**
+
+```bash
+cd "C:/Users/ksolo/Herd/community-works-collaborative/wp-content/themes/community-works-collaborative"
+git add acf/group_team_grid.json
+git commit -m "✨ feat: Add ACF field group for team-grid block"
+```
+
+---
+
+## Task 2: Block Registration JSON
+
+**Files:**
+- Create: `views/blocks/team-grid/block.json`
+
+**Interfaces:**
+- Produces: `block.json` declaring `acf/team-grid` as the block name, `team-grid.php` as the render template, `groups` icon, `common` category. `regACFBlocks()` in `functions.php` will pick this up automatically.
+
+- [ ] **Step 1: Create the block.json file**
+
+Create the file `views/blocks/team-grid/block.json` with the following exact content:
+
+```json
+{
+    "name": "acf/team-grid",
+    "title": "Team Grid",
+    "description": "A responsive grid of team members. Click a card to expand the bio.",
+    "category": "common",
+    "icon": "groups",
+    "keywords": ["team", "people", "staff", "bio"],
+    "acf": {
+        "mode": "preview",
+        "renderTemplate": "team-grid.php"
+    },
+    "supports": {
+        "anchor": true,
+        "align": false
+    }
+}
+```
+
+- [ ] **Step 2: Verify the JSON parses**
+
+Run: `node -e "JSON.parse(require('fs').readFileSync('views/blocks/team-grid/block.json','utf8')); console.log('OK')"`
+Expected: prints `OK` and exits 0.
+
+- [ ] **Step 3: Commit**
+
+```bash
+cd "C:/Users/ksolo/Herd/community-works-collaborative/wp-content/themes/community-works-collaborative"
+git add views/blocks/team-grid/block.json
+git commit -m "✨ feat: Add team-grid block.json registration"
+```
+
+---
+
+## Task 3: Block CSS
+
+**Files:**
+- Create: `views/blocks/team-grid/team-grid.css`
+
+**Interfaces:**
+- Produces: BEM-styled CSS for `.team-grid`, `__inner`, `__card`, `__details`, `__summary`, `__photo`, `__name`, `__title`, `__bio-wrap`, `__bio-inner`, `__bio`. Reuses `text-cwc-blue-01` for the name. Implements the `grid-template-rows: 0fr → 1fr` animation for the bio.
+
+- [ ] **Step 1: Create the block CSS file**
+
+Create the file `views/blocks/team-grid/team-grid.css` with the following exact content:
+
+```css
+/* Team Grid block */
+
+.team-grid {
+    &__card {
+        @apply flex flex-col;
+    }
+
+    &__details {
+        @apply flex flex-col;
+    }
+
+    &__summary {
+        @apply flex flex-col items-center text-center cursor-pointer list-none;
+
+        &::-webkit-details-marker {
+            display: none;
+        }
+
+        &::marker {
+            display: none;
+            content: '';
+        }
+    }
+
+    &__photo {
+        @apply w-32 h-32 sm:w-40 sm:h-40 lg:w-48 lg:h-48 object-cover rounded-md mb-4;
+    }
+
+    &__name {
+        @apply text-cwc-blue-01 text-22px font-bold leading-tight mb-1;
+    }
+
+    &__title {
+        @apply text-gray-600 text-16px font-light italic mb-3;
+    }
+
+    &__bio-wrap {
+        display: grid;
+        grid-template-rows: 0fr;
+        transition: grid-template-rows 300ms ease;
+    }
+
+    &__details[open] &__bio-wrap {
+        grid-template-rows: 1fr;
+    }
+
+    &__bio-inner {
+        overflow: hidden;
+        min-height: 0;
+    }
+
+    &__bio {
+        @apply text-gray-700 text-16px font-light leading-snug pt-2;
+    }
+}
+```
+
+- [ ] **Step 2: Verify the BEM children are present**
+
+Run: `grep -cE "&__(card|details|summary|photo|name|title|bio-wrap|bio-inner|bio)\b" views/blocks/team-grid/team-grid.css`
+Expected: `9` (one match per BEM child).
+
+- [ ] **Step 3: Commit**
+
+```bash
+cd "C:/Users/ksolo/Herd/community-works-collaborative/wp-content/themes/community-works-collaborative"
+git add views/blocks/team-grid/team-grid.css
+git commit -m "✨ feat: Add team-grid block CSS"
+```
+
+---
+
+## Task 4: Block Template (PHP)
+
+**Files:**
+- Create: `views/blocks/team-grid/team-grid.php`
+
+**Interfaces:**
+- Consumes: `get_field( 'members' )` → array of members each with `image` (array: `url`, `alt`), `name` (string), `title` (string), `bio` (wysiwyg HTML).
+- Produces: A `<section class="team-grid ...">` element with a `__inner` grid div, and an `<article class="team-grid__card">` per member. Each card contains a `<details>` with a `<summary>` (photo + name + title) and a `__bio-wrap` containing the bio.
+
+- [ ] **Step 1: Create the block PHP template**
+
+Create the file `views/blocks/team-grid/team-grid.php` with the following exact content (tabs for indentation):
+
+```php
+<?php
+/**
+ * Block Name: Team Grid
+ *
+ * A responsive grid of team members. Each card uses a native <details>
+ * element so the bio expands when the photo, name, or title is clicked.
+ *
+ * @package CWC
+ */
+
+namespace CWC;
+
+$members = get_field( 'members' );
+
+if ( empty( $members ) ) {
+	return;
+}
+
+$classes = 'team-grid container my-section mx-auto';
+$wrapper = blockWrapperAttributes( $classes, $is_preview );
+?>
+
+<section <?php echo wp_kses_post( $wrapper ); ?>>
+	<div class="team-grid__inner grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8 lg:gap-12">
+		<?php foreach ( $members as $member ) : ?>
+			<article class="team-grid__card">
+				<details class="team-grid__details">
+					<summary class="team-grid__summary">
+						<?php if ( ! empty( $member['image'] ) ) : ?>
+							<img
+								class="team-grid__photo"
+								src="<?php echo esc_url( $member['image']['url'] ); ?>"
+								alt="<?php echo esc_attr( $member['image']['alt'] ?? '' ); ?>"
+								loading="lazy"
+							/>
+						<?php endif; ?>
+
+						<?php if ( ! empty( $member['name'] ) ) : ?>
+							<h3 class="team-grid__name">
+								<?php echo wp_kses_post( $member['name'] ); ?>
+							</h3>
+						<?php endif; ?>
+
+						<?php if ( ! empty( $member['title'] ) ) : ?>
+							<p class="team-grid__title">
+								<?php echo wp_kses_post( $member['title'] ); ?>
+							</p>
+						<?php endif; ?>
+					</summary>
+
+					<div class="team-grid__bio-wrap">
+						<div class="team-grid__bio-inner">
+							<?php if ( ! empty( $member['bio'] ) ) : ?>
+								<div class="team-grid__bio">
+									<?php echo wp_kses_post( $member['bio'] ); ?>
+								</div>
+							<?php endif; ?>
+						</div>
+					</div>
+				</details>
+			</article>
+		<?php endforeach; ?>
+	</div>
+</section>
+```
+
+- [ ] **Step 2: Lint the PHP file with PHPCS**
+
+Run: `composer exec phpcs -- views/blocks/team-grid/team-grid.php`
+Expected: exits 0 with no errors. If PHPCS reports alignment warnings on the assignment block (similar to the Task 5 services-list fix), run `composer exec phpcbf -- views/blocks/team-grid/team-grid.php` to auto-fix, then re-run PHPCS to confirm exit 0. Whitespace-only changes are acceptable; do not modify logic.
+
+- [ ] **Step 3: Verify the dynamic utility classes are in the source**
+
+Run: `grep -E "grid-cols-1|sm:grid-cols-2|lg:grid-cols-3|w-32|w-40|w-48" views/blocks/team-grid/team-grid.php`
+Expected: at least 3 matches (Tailwind v4 must see the literal class names in the source to emit the rules).
+
+- [ ] **Step 4: Commit**
+
+```bash
+cd "C:/Users/ksolo/Herd/community-works-collaborative/wp-content/themes/community-works-collaborative"
+git add views/blocks/team-grid/team-grid.php
+git commit -m "✨ feat: Add team-grid block PHP template"
+```
+
+---
+
+## Task 5: CSS Import Wiring
+
+**Files:**
+- Modify: `styles/blocks/index.css`
+
+**Interfaces:**
+- Consumes: `views/blocks/team-grid/team-grid.css` (from Task 3).
+- Produces: A new `@import` line at the end of `styles/blocks/index.css` so Tailwind's build picks up the block's CSS.
+
+- [ ] **Step 1: Add the import to the block index CSS**
+
+Append the following line at the end of `styles/blocks/index.css`:
+
+```css
+@import '../../views/blocks/team-grid/team-grid.css';
+```
+
+After the edit, the file should end with:
+
+```
+@import '../../views/blocks/services-list/services-list.css';
+@import '../../views/blocks/team-grid/team-grid.css';
+```
+
+- [ ] **Step 2: Verify the import is present**
+
+Run: `grep -cF "team-grid/team-grid.css" styles/blocks/index.css`
+Expected: `1`.
+
+- [ ] **Step 3: Commit**
+
+```bash
+cd "C:/Users/ksolo/Herd/community-works-collaborative/wp-content/themes/community-works-collaborative"
+git add styles/blocks/index.css
+git commit -m "🔧 chore: Import team-grid block CSS into theme"
+```
+
+---
+
+## Task 6: Build the CSS
+
+**Files:**
+- Modify: `static/dist/theme.css`
+
+**Interfaces:**
+- Consumes: The new import in `styles/blocks/index.css` (from Task 5) and the block CSS (from Task 3).
+- Produces: A rebuilt `static/dist/theme.css` that includes the `.team-grid*` rules and the responsive `grid-cols-1 sm:grid-cols-2 lg:grid-cols-3` utilities.
+
+- [ ] **Step 1: Run the production Tailwind build**
+
+Run: `npm run build`
+Expected: completes with no errors.
+
+- [ ] **Step 2: Verify the team-grid CSS classes are in the built output**
+
+Tailwind v4 with `--optimize` **preserves** CSS-nesting rather than unwrapping `&__name` into `__name.team-grid`. Use fixed-string search (Windows-safe) that matches the preserved form:
+
+```bash
+grep -cF "&__name" static/dist/theme.css
+```
+
+Expected: `1` or more (the `&__name` rule is nested inside `.team-grid { ... }` in the dist).
+
+- [ ] **Step 3: Verify the responsive grid utilities are in the built output**
+
+Same Windows-safe form:
+
+```bash
+grep -cF "sm\:grid-cols-2" static/dist/theme.css
+grep -cF "lg\:grid-cols-3" static/dist/theme.css
+```
+
+Expected: each returns `1` or more.
+
+- [ ] **Step 4: Commit the rebuilt dist**
+
+```bash
+cd "C:/Users/ksolo/Herd/community-works-collaborative/wp-content/themes/community-works-collaborative"
+git add -f static/dist/theme.css
+git commit -m "🎨 build: Rebuild dist with team-grid block styles"
+```
+
+---
+
+## Task 7: Playwright Tests
+
+**Files:**
+- Create: `tests/team-page.spec.js`
+
+**Interfaces:**
+- Consumes: The rendered `views/blocks/team-grid/team-grid.php` template (Tasks 3 + 4) on the WordPress page `/team/`.
+- Produces: Three tests:
+  1. Photo, name, and title visible for the first card.
+  2. Bio is closed by default; clicking the summary opens the details and reveals the bio; clicking again closes it.
+  3. No axe-core a11y violations scoped to `.team-grid`.
+
+> **Prerequisite:** the test depends on the Team page being composed in Gutenberg with at least one `Team Grid` block containing one or more members. That composition is the editor's responsibility and is not part of this plan. The tests should be authored against the intended state, not a placeholder state.
+
+- [ ] **Step 1: Create the test spec file**
+
+Create the file `tests/team-page.spec.js` with the following exact content:
+
+```js
+import { test, expect } from "@playwright/test";
+import AxeBuilder from "@axe-core/playwright";
+
+test.describe("Team Grid block on /team/", () => {
+    test("renders the photo, name, and title for each member", async ({ page }) => {
+        await page.goto("/team/");
+
+        const cards = page.locator(".team-grid__card");
+        await expect(cards.first()).toBeVisible();
+
+        const firstCard = cards.first();
+        await expect(firstCard.locator(".team-grid__photo")).toBeVisible();
+        await expect(firstCard.locator(".team-grid__name")).toBeVisible();
+        await expect(firstCard.locator(".team-grid__title")).toBeVisible();
+    });
+
+    test("bio is hidden by default and expands on summary click", async ({ page }) => {
+        await page.goto("/team/");
+
+        const firstDetails = page.locator(".team-grid__details").first();
+        // Bio is closed by default.
+        await expect(firstDetails).not.toHaveAttribute("open", "");
+
+        // Click the summary; the details should open and the bio should be visible.
+        await firstDetails.locator(".team-grid__summary").click();
+        await expect(firstDetails).toHaveAttribute("open", "");
+        await expect(firstDetails.locator(".team-grid__bio")).toBeVisible();
+
+        // Click again; the details should close.
+        await firstDetails.locator(".team-grid__summary").click();
+        await expect(firstDetails).not.toHaveAttribute("open", "");
+    });
+
+    test("no axe violations on the team-grid block", async ({ page }) => {
+        await page.goto("/team/");
+        const results = await new AxeBuilder({ page })
+            .include(".team-grid")
+            .analyze();
+        expect(results.violations).toEqual([]);
+    });
+});
+```
+
+- [ ] **Step 2: Run the tests**
+
+Run: `npx playwright test tests/team-page.spec.js`
+Expected: all 3 tests pass. If tests fail because the Team page has not yet been composed in the editor, that's an expected prerequisite — note the prerequisite in the final report and skip the test run.
+
+- [ ] **Step 3: Commit**
+
+```bash
+cd "C:/Users/ksolo/Herd/community-works-collaborative/wp-content/themes/community-works-collaborative"
+git add tests/team-page.spec.js
+git commit -m "✅ test: Add Playwright tests for team-grid block"
+```
+
+---
+
+## Self-Review Notes
+
+- **Spec coverage:**
+  - One new ACF block (`team-grid`) — covered by Tasks 1, 2, 3, 4.
+  - Repeater of `members` with `image` / `name` / `title` / `bio` — covered by Task 1.
+  - Responsive grid `grid-cols-1 sm:grid-cols-2 lg:grid-cols-3` — covered by Task 4 (PHP) and Task 6 (Tailwind emits the rules).
+  - Rounded-rectangle headshots via `rounded-md` — covered by Task 3 (CSS).
+  - Native `<details>`/`<summary>` click-to-expand — covered by Task 4 (PHP) and Task 3 (CSS).
+  - `grid-template-rows: 0fr → 1fr` animation — covered by Task 3 (CSS).
+  - No built-in background — explicitly out of scope (Section block wrapper, editor's responsibility).
+  - Page template not modified — confirmed; `page.php` is not in any file list.
+  - `header.php` / `footer.php` / page hero not touched — confirmed.
+  - Reuse existing design tokens (`text-cwc-blue-01`, `rounded-md`) — covered by Tasks 1, 3, 4.
+  - Playwright tests covering photo + name + title, summary click toggles, and a11y — covered by Task 7.
+  - Dist rebuild — covered by Task 6.
+- **Placeholder scan:** No TBDs. Every step has a concrete file path, exact content, exact command, and expected output. The only conditional is in Task 7 Step 2 — explicitly called out as a prerequisite (editor must compose the page in Gutenberg), not a placeholder.
+- **Type consistency:** ACF field `name: "members"` is used in Task 4 (`get_field( 'members' )`). Sub-field names `image`, `name`, `title`, `bio` are used in Task 1 (defined) and Task 4 (consumed). Class names `team-grid`, `__inner`, `__card`, `__details`, `__summary`, `__photo`, `__name`, `__title`, `__bio-wrap`, `__bio-inner`, `__bio` are used in Task 3 (defined in CSS) and Task 4 (rendered in markup) and Task 7 (asserted in tests) — consistent.
+- **Ambiguity check:** "Rounded rectangle" is concretely specified as `rounded-md`. "Opens vertically" is concretely specified as `grid-template-rows: 0fr → 1fr` with 300ms transition. "Responsive grid" is concretely specified as `grid-cols-1 sm:grid-cols-2 lg:grid-cols-3`. "No built-in background" is concretely scoped to the Section block wrapper (editor's responsibility, not this block's). All are explicit.

docs/superpowers/specs/2026-07-04-blog-layout-design.md

@@ -0,0 +1,178 @@
+# Blog Index Layout
+
+## Goal
+
+Build the blog index layout shown in `blog-mockup.png` (theme root) so `/blog/` and any other view that uses the WordPress `index.php` template (category, tag, author, search) render with a clean design: a "Blog" page title at the top, a grid of post cards (each card shows image, title, and byline only), and the existing sidebar logic preserved on the right side.
+
+## Scope
+
+- Applies to `index.php` only — the blog index, category archives, tag archives, author archives, and search results all fall through this template in the current theme (no `archive.php`, `category.php`, `tag.php`, `author.php`, or `home.php` exist).
+- Does **not** change `single.php` (single-post view) or `page.php` (static pages). The Services hero gate is unaffected.
+- Does **not** change `front-page.php` (the home page).
+- The existing post list component (`.post-list__posts`, `.post-list__post`, `.post-list__title`, `.post-list__byline`) is preserved and used.
+- The existing sidebar logic (`hasSidebar()` → 4-col grid with sidebar) is preserved.
+- The existing pagination (`the_posts_pagination`) is preserved.
+
+## Architecture
+
+The change is a small refactor of `index.php` and an unfreeze of `styles/components/post-list.css`:
+
+1. **`index.php`** — add a "Blog" page title at the top of the post list section, and trim the post card to image + title + byline (remove the categories row and the 15-word excerpt). The grid, sidebar, and pagination remain unchanged.
+2. **`styles/components/post-list.css`** — unfreeze the file (currently empty boilerplate) and add styles for the new `.post-list__h1` heading. Use the project's existing H1 typography (Quincy serif, fluid `--h1` size, default margin).
+3. **A new test** in `tests/blog-page.spec.js` — verifies the blog renders the page title, the post grid, and no inner-page hero. Mirrors the structure of `tests/contact-page.spec.js`.
+
+The post list grid is already implemented with `grid-cols-[repeat(auto-fit,minmax(20rem,1fr))]` (a responsive auto-fit grid that gives 3-4 columns on desktop, fewer on smaller viewports). The mockup shows 3 columns at desktop, which is what the auto-fit grid gives at ~1280px. No change to the grid layout.
+
+## ACF Field Group Changes
+
+None. The blog index uses the standard WordPress post data (`the_title`, `the_permalink`, `the_author`, `the_date`, `get_the_post_thumbnail_url`, `get_the_category`). No custom fields.
+
+## index.php Wiring
+
+Find the post list section:
+
+```php
+<?php if ( have_posts() ) : ?>
+    <div class="blog-posts <?php echo esc_attr( $clsEntry ); ?>">
+        <div class="post-list">
+            <div class="post-list__posts grid grid-cols-[repeat(auto-fit,minmax(20rem,1fr))] gap-6">
+                <?php
+                while ( have_posts() ) :
+                    the_post();
+                    ?>
+                    <div class="post-list__post flex flex-col border border-secondary rounded-md shadow-lg ...">
+                        <figure class="post-list__img ...">
+                            ... (featured image)
+                        </figure>
+
+                        <div class="post-list__details px-4 py-8 flex flex-col grow">
+                            <div class="post-list__cats">
+                                Posted in: ... (categories)
+                            </div>
+
+                            <a href="<?php the_permalink(); ?>" class="">
+                                <h2 class="post-list__title ..."><?php the_title(); ?></h2>
+                            </a>
+
+                            <div class="post-list__excerpt mb-6">
+                                <?php customExcerpt( get_the_content(), 15 ); ?>
+                            </div>
+
+                            <div class="post-list__byline mt-auto">
+                                <span class="post-list__author"><?php echo esc_html( ucfirst( get_the_author() ) ); ?> &mdash;</span>
+                                <span class="post-list__date"><?php echo get_the_date(); ?></span>
+                            </div>
+                        </div>
+                    </div>
+                <?php endwhile; ?>
+            </div>
+
+            <div class="post-list__pagination">
+                <?php the_posts_pagination( ... ); ?>
+            </div>
+        </div>
+    </div>
+<?php else : ?>
+    ...
+<?php endif; ?>
+```
+
+Changes:
+
+1. **Add a page title** at the top of the post list, after the `<div class="post-list">` opening tag:
+
+   ```php
+   <div class="post-list">
+       <h1 class="post-list__h1">Blog</h1>
+       <div class="post-list__posts grid ...">
+           ...
+       </div>
+       ...
+   </div>
+   ```
+
+   The title text is hard-coded "Blog" — this matches the spec's "Standard H1 (Quincy, project default)" answer. The title is the same on category, tag, author, and search views (the mockup only shows the blog index, but consistency is the simplest choice for now; a future task can add per-view titles if needed).
+
+2. **Remove the categories row** (`<div class="post-list__cats">...`).
+
+3. **Remove the 15-word excerpt** (`<div class="post-list__excerpt mb-6">...`).
+
+4. **Keep the byline** (`<div class="post-list__byline mt-auto">...`).
+
+5. **Tighten the card's details padding** — the current `px-4 py-8` leaves a lot of empty space when there's no excerpt. Change to `px-4 py-6` (or whatever the design lands on after visual review; spec this as `px-4 py-6`).
+
+6. **Empty state** — when no posts are found, the "Nothing here yet..." heading still renders. This is the existing behavior; no change. (The `else` branch is unchanged.)
+
+7. **`customExcerpt()` helper** is now unused in `index.php`. The helper itself (in `lib/extras.php` or `lib/helpers.php`) is left as-is — other templates may use it. Just don't call it from `index.php`.
+
+## post-list.css Wiring
+
+The file is currently empty boilerplate. Add:
+
+```css
+/* Blog/post index listing styles */
+
+.post-list__h1 {
+    color: var(--color-cwc-blue-01);
+    font-family: var(--font-quincy, 'Quincy', serif);
+    font-size: var(--h1);
+    font-weight: 700;
+    line-height: 1.2;
+    margin: 0 0 2rem;
+    text-align: left;
+}
+```
+
+The `color: var(--color-cwc-blue-01)` matches the contact-info heading and the inner-page hero heading for visual consistency. The other values are the project's existing H1 typography tokens (Quincy serif, fluid `--h1` size, default 700 weight).
+
+**No other changes** to `post-list.css`. The card styling (border, shadow, padding) is currently inline via Tailwind utility classes in `index.php`; the spec leaves that as-is.
+
+## Data Flow
+
+- **Editor flow:** the blog index uses standard WordPress post data. Editors write posts in the WP admin, set a featured image, assign categories, and publish. The blog renders whatever is published.
+- **Render flow:** WordPress routes `/blog/`, `/category/...`, `/tag/...`, `/author/...`, and `/?s=...` (search) to `index.php`. The template loops over the matching posts, renders each as a card, and renders pagination at the bottom. The sidebar is rendered when `hasSidebar()` returns true.
+- **Per-page variation:** none — the design is fixed.
+
+## Error Handling and Edge Cases
+
+- **No posts found** → the "Nothing here yet..." empty state renders.
+- **Pagination** → preserved; renders at the bottom of the post list.
+- **Featured image missing** → the existing `picsum.photos` fallback is preserved. (The current code has `get_the_post_thumbnail_url() ? $featImg : 'https://picsum.photos/600/400?random=' . get_the_ID();`. This is a hack — a real fallback would be a project default image. Out of scope for this task.)
+- **Page title when there are no posts** → still renders "Blog" (the title is unconditional). This is fine — a user navigating to an empty category should still know what page they're on.
+- **Search results** → the "Blog" title is misleading for search. A future task can add a per-view title (`is_search() ? 'Search Results' : 'Blog'`). Out of scope here.
+- **Hero** → the `header.php` change from the previous turn (`$showHero = isServicesDescendant() && get_field( 'hero_style' ) === 'default'`) already ensures the blog renders without the inner-page hero. This task doesn't touch `header.php`.
+
+## Out of Scope
+
+- New ACF fields for posts.
+- New archive templates (`archive.php`, `category.php`, `tag.php`, `author.php`).
+- Single-post view (`single.php`) changes.
+- A proper fallback image (the `picsum.photos` URL is a known wart but not a blocker).
+- Pagination restyling (the existing `the_posts_pagination()` is fine).
+- Changing `front-page.php` (the home page).
+- Sidebar widget changes (the existing `sidebar.php` works as-is).
+- A per-view page title (category-specific, tag-specific, etc.). The current spec hard-codes "Blog" everywhere.
+
+## Verification
+
+- Add `tests/blog-page.spec.js` covering:
+  - Desktop (1280px): the blog page renders with the "Blog" H1, the post grid, no inner-page hero, the sidebar (when `hasSidebar()` is true).
+  - Mobile (402px): the post grid stacks to a single column, no horizontal overflow, the page title is visible.
+  - 320px: nothing clips.
+  - Axe scan: no violations.
+  - No console errors.
+  - Each post card has: image, title link, byline (author + date). Does NOT have a categories row or an excerpt.
+- Run `npm run build` to regenerate `static/dist/`.
+- Run the full Playwright suite (`npx playwright test`) including `tests/mobile-homepage.spec.js`, `tests/site-a11y.spec.js`, `tests/inner-page.spec.js`, `tests/contact-page.spec.js`, `tests/services-hero-scope.spec.js`, and the new `tests/blog-page.spec.js`.
+- Run `composer lint` to catch PHPCS issues.
+- Capture a 1280px full-page screenshot of `/blog/` for visual comparison with `blog-mockup.png`.
+
+## Acceptance Criteria
+
+1. `/blog/` renders a "Blog" page title (Quincy serif, CWC Blue 01, the project's standard H1 style).
+2. Each post card on `/blog/` shows: featured image, title, byline (author + date). No categories row. No excerpt.
+3. The existing sidebar logic is preserved: when `hasSidebar()` is true, the post grid is in the main column and the sidebar is in the 4th column of a 4-col grid.
+4. Category, tag, author, and search views (which all use `index.php`) render with the same design — page title + post grid + sidebar.
+5. No inner-page hero is rendered on the blog (this was the previous turn's change; preserved here).
+6. No console errors, axe violations, or PHPCS errors.
+7. The new blog test passes; existing tests continue to pass with no regressions.

docs/superpowers/specs/2026-07-04-contact-page-design.md

@@ -0,0 +1,264 @@
+# Contact Page Layout
+
+## Goal
+
+Build the contact page layout shown in `notes/contact-mockup-figma-2.png` (the Figma desktop export) so the contact page renders as a clean two-column 50/50 split: contact info (heading + address/email/phone with CWC Blue 03 outline icons) on the left with a white background and generous padding, and a desaturated CWC Blue 03 Leaflet map on the right that fills to the viewport edge. A Gravity Forms contact form sits between the contact info and the map. The page has no hero — just a ~3rem top margin below the header and no page title.
+
+## Scope
+
+This spec covers two related changes:
+
+1. **The contact page layout** (the primary work) — a new two-column 50/50 layout for the contact page: contact info on the left, Gravity Forms + Leaflet placeholder on the right, no hero, no page title.
+2. **Re-scope the existing inner-page hero** so it renders only on Services children and grandchildren. The current logic in `header.php` (`$showHero = ... hero_style === 'default' ...`) gates the hero per-page via the `hero_style` ACF field; the new logic adds an additional gate: even when `hero_style === 'default'`, the hero is suppressed unless the current page is the Services page, a child of the Services page, or a grandchild of the Services page. All other pages get a plain page body with no hero (matching the contact page's no-hero treatment).
+
+### Contact page scope
+
+- Applies only to the contact page, via the editor dropping the `acf/contact-info` block on the contact page.
+- The existing `acf/contact-info` block is modified to render the new layout (left/contact-info, right/Leaflet placeholder) and drop the `InnerBlocks` call.
+- `page.php` is not changed — non-contact pages still get the inner-page hero (gated per the re-scope) or no hero at all.
+- No hero is rendered on the contact page. The contact page's `hero_style` ACF field should be set to `none` (this is the existing default, already handled by `header.php`).
+- The existing site-header, site-footer, and `hasSidebar()` filter are unchanged. The contact page does not show the sidebar (the contact-info block replaces it).
+- The existing `contact-block` block (the dark-navy CTA banner used on the home page) is unaffected. So is the footer.
+
+### Inner-page hero re-scope
+
+- The hero (already implemented: gradient backdrop, hero image, vector, intro) renders only when ALL of the following are true:
+  - `get_field( 'hero_style' ) === 'default'` (the existing gate), AND
+  - the current page is the Services page, a child of the Services page, or a grandchild of the Services page.
+- "Services page" is identified by slug: a page with `post_name = 'services'`. This is robust to the Services page's ID changing across environments.
+- "Child of the Services page" means `post_parent == $services_id`.
+- "Grandchild of the Services page" means the current page's `post_parent`'s `post_parent == $services_id`. (Two levels only; we do not need a recursive walker because the site's structure is shallow.)
+- A new PHP helper `isServicesDescendant()` lives in `lib/extras.php` next to `hasPageHeader()` and `hasSidebar()`. It returns `true` for the Services page itself, its children, and its grandchildren; `false` otherwise. It accepts the current post (default: `$post`) and an optional services-page override (default: looked up by slug).
+- `header.php` updates the `$showHero` calculation to also require `isServicesDescendant()`. The existing `is_home() || is_archive() || is_single() || is_search() || is_404()` conditions still gate the hero on those views (those views bypass the Services gate).
+- The `Page Heading` ACF group's `hero_style` field is unchanged. The conditional-logic that hides the hero_image and hero_vector fields when `hero_style === 'none'` is unchanged. Editors continue to control the gate per-page; the new check is a global "is this a Services descendant?" filter on top of that.
+- Pages that currently have `hero_style === 'default'` set but are NOT Services descendants lose their hero after this change. This is intentional (per the user's "scope only for Services children/grandchildren" instruction), but the editor may need to set `hero_style = 'none'` on those pages if they don't already have it. A pre-flight check lists the affected pages so the editor can review.
+
+## Architecture
+
+The contact page is composed of three layers:
+
+1. **Page wrapper** — `page.php` continues to call `get_header()` and `get_footer()`. The contact page's body is the new `acf/contact-info` block, which the editor drops onto the page (the existing block). Because the block manages its own layout, no new page template is needed.
+2. **Contact info block** — `views/blocks/contact-info/contact-info.php` is rewritten to render the new two-column 50/50 layout. The left column holds a heading, the address/email/phone rows (from the `contact_info` global option, with CWC Blue 03 outline icons), and a Gravity Forms `[gravityform id="1" title="false"]` shortcode. The right column holds a placeholder `<div id="contact-map">` for the Leaflet embed.
+3. **Block CSS** — `views/blocks/contact-info/contact-info.css` is rewritten to lay out the two columns, the icon rows, and the Gravity Forms field overrides. Forms.css (`styles/base/forms.css`) already styles most of the form; the new CSS adds the field-level overrides (uppercase CWC Blue 01 labels, right-aligned CWC Orange 01 required asterisks, 30% opacity CWC Blue 03 input fills with borders, taller message textarea, and the secondary-button submit).
+
+`page.php` is untouched. The contact page's editor just adds the `Contact Info` block and the existing flow renders it.
+
+## `isServicesDescendant()` — `lib/extras.php`
+
+```php
+function isServicesDescendant( $post = null, $services_id = null ) {
+    if ( null === $post ) {
+        global $post;
+    }
+
+    if ( ! $post instanceof WP_Post ) {
+        return false;
+    }
+
+    if ( null === $services_id ) {
+        $services = get_page_by_path( 'services' );
+        if ( ! $services ) {
+            return false;
+        }
+        $services_id = $services->ID;
+    }
+
+    // The Services page itself.
+    if ( (int) $post->ID === (int) $services_id ) {
+        return true;
+    }
+
+    // Direct child of the Services page.
+    if ( (int) $post->post_parent === (int) $services_id ) {
+        return true;
+    }
+
+    // Grandchild: walk one level up.
+    $parent = get_post( $post->post_parent );
+    if ( $parent && (int) $parent->post_parent === (int) $services_id ) {
+        return true;
+    }
+
+    return false;
+}
+```
+
+`get_page_by_path( 'services' )` is a core WP function that finds a page by slug. It returns `null` if the Services page doesn't exist (e.g. on a fresh dev install), in which case the function returns `false` and no hero renders anywhere — a safe default.
+
+## `header.php` change
+
+The current `$showHero` is:
+
+```php
+$showHero = in_array(
+    true,
+    array(
+        get_field( 'hero_style' ) === 'default',
+        is_home(),
+        is_archive(),
+        is_single(),
+        is_search(),
+        is_404(),
+    ),
+    true
+);
+```
+
+The new `$showHero` is:
+
+```php
+$showHero = isServicesDescendant() && get_field( 'hero_style' ) === 'default';
+```
+
+The hero renders only on the Services page, its direct children, and its grandchildren — and only when the editor has set `hero_style` to `'default'`. The blog index, archives, single posts, search, and 404 views do **not** render the inner-page hero at all. Those views rely on their own templates (`front-page.php`, `single.php`, `search.php`, `404.php`, `archive.php`) for any visual treatment.
+
+> **Note:** an earlier draft of this spec kept `is_home() / is_archive() / is_single() / is_search() / is_404()` in the bypass list so blog posts and single posts kept their old hero behavior. The user revised this on 2026-07-04 after seeing the live result: the Services hero treatment should not apply to any non-Services view. The change is captured in commits `2fb1d67` (header.php) and `ee9c9ce` (test update).
+
+## ACF Field Group Changes
+
+None. The `contact_info` global option group (`acf/group_5fd3e006e5da5.json`) already provides `email`, `phone`, `address`, `fax`, and `hours` sub-fields. We read `email`, `phone`, and `address` only.
+
+The `acf/contact-info` block (`acf/group_5fd3e006e5da5.json`'s consumer, defined by `views/blocks/contact-info/block.json`) currently has no ACF fields of its own — it's an `InnerBlocks` block. We will not add ACF fields. The heading, the shortcode, and the Leaflet placeholder are hard-coded into the block's render template, since they are part of the design, not per-page content.
+
+If the editor later needs to override the heading or shortcode, that becomes a follow-up: add ACF fields to the block, default them to the current hard-coded values, and render the field value with a fallback to the hard-coded string.
+
+## Contact Info Block — `views/blocks/contact-info/contact-info.php`
+
+The block renders a `<section class="contact-info">` with a flex row that flips to a column on mobile. The block manages its own width — it does NOT inherit the `.container` constraint from `page.php`'s `.entry-content`. To achieve this, the block's outermost wrapper gets `container` itself and resets the page's `entry-content` padding so the map can reach the viewport edge on the right.
+
+```php
+<section <?php echo esc_attr( $wrapper ); ?>>
+    <div class="contact-info__grid">
+        <div class="contact-info__details">
+            <h1 class="contact-info__heading">Contact</h1>
+
+            <ul class="contact-info__items">
+                <li class="contact-info__item contact-info__item--address">
+                    <span class="contact-info__icon" aria-hidden="true">[icon-address]</span>
+                    <span class="contact-info__value"><?php echo wp_kses_post( get_field( 'contact_info', 'option' )['address'] ); ?></span>
+                </li>
+                <li class="contact-info__item contact-info__item--email">
+                    <span class="contact-info__icon" aria-hidden="true">[icon-email]</span>
+                    <a class="contact-info__value" href="mailto:<?php echo esc_attr( get_field( 'contact_info', 'option' )['email'] ); ?>">
+                        <?php echo esc_html( get_field( 'contact_info', 'option' )['email'] ); ?>
+                    </a>
+                </li>
+                <li class="contact-info__item contact-info__item--phone">
+                    <span class="contact-info__icon" aria-hidden="true">[icon-phone]</span>
+                    <a class="contact-info__value" href="tel:<?php echo esc_attr( get_field( 'contact_info', 'option' )['phone'] ); ?>">
+                        <?php echo esc_html( get_field( 'contact_info', 'option' )['phone'] ); ?>
+                    </a>
+                </li>
+            </ul>
+
+            <div class="contact-info__form">
+                <?php echo do_shortcode( '[gravityform id="1" title="false" description="false" ajax="true"]' ); ?>
+            </div>
+        </div>
+
+        <div class="contact-info__map" id="contact-map" aria-label="Map of downtown Winnipeg" role="region">
+            <!-- Leaflet map will mount here. Pin: orange-01 + white map marker (TBD). -->
+        </div>
+    </div>
+</section>
+```
+
+The `[icon-address]`, `[icon-email]`, `[icon-phone]` placeholders are inlined SVGs with `stroke="currentColor"` and `fill="none"`, sized to the CWC Blue 03 color via CSS `color: var(--color-cwc-blue-03)`. The three SVGs are stored in `static/img/contact/` and referenced via `get_theme_file_uri()` (the same pattern the existing `static/img/footer-email.svg` etc. use).
+
+## Contact Info Block CSS — `views/blocks/contact-info/contact-info.css`
+
+Rules (mobile-first, desktop via `@media (min-width: 1024px)`):
+
+- `.contact-info` — `position: relative; background: var(--color-white); padding-block: clamp(2rem, 6vw, 4rem);`. Resets the `.entry-content` container.
+- `.contact-info__grid` — on mobile, single column. On `≥1024px`, `display: grid; grid-template-columns: 1fr 1fr; gap: 0;`. The right column extends to the viewport edge via negative right margin matching the page's container offset (the same trick the homepage-hero and the contact-block use to break out of the container on one side).
+- `.contact-info__details` — `padding-inline: clamp(1.5rem, 5vw, 3rem); max-width: 36rem;` so the heading, address, and form are aligned with the logo's left edge and don't span the full half.
+- `.contact-info__heading` — `font-family: var(--font-quincy, 'Quincy', serif); font-weight: 400; font-size: clamp(2.5rem, 6vw, 4.5rem); line-height: 1.05; color: var(--color-cwc-blue-01); margin-bottom: 1.5rem;`. Matches the inner-page hero heading for visual consistency.
+- `.contact-info__items` — `list-style: none; padding: 0; margin: 0 0 2rem 0; display: flex; flex-direction: column; gap: 0.75rem;`.
+- `.contact-info__item` — `display: flex; align-items: flex-start; gap: 0.75rem; color: var(--color-dark); font-size: 1rem; line-height: 1.5;`.
+- `.contact-info__icon` — `display: inline-flex; align-items: center; justify-content: center; width: 1.5rem; height: 1.5rem; flex-shrink: 0; color: var(--color-cwc-blue-03);`. Icons inherit the color via `currentColor`.
+- `.contact-info__value` — `text-decoration: none; color: inherit; &:hover { color: var(--color-secondary); }`.
+- `.contact-info__form` — Gravity Forms wrapper. Adds a top margin (`mt-8`) and the form-field overrides below.
+- `.contact-info__map` — `background: color-mix(in oklch, var(--color-cwc-blue-03) 30%, white); min-height: 24rem; position: relative;`. On `≥1024px`, breaks out to the viewport's right edge by setting `margin-right: calc(50% - 50vw); width: calc(50vw + 0px);`. The right edge is anchored to `100vw`, not the parent grid, so the map fills the right half of the screen on any desktop width.
+- Mobile (≤767px): `.contact-info__grid` collapses to one column, the map drops below the form, the right-edge break-out is removed.
+
+### Gravity Forms field overrides (in `contact-info.css`)
+
+Append after the layout rules:
+
+- `.contact-info__form .gfield_label` — `text-transform: uppercase; color: var(--color-cwc-blue-01); font-size: 0.875rem; font-weight: 700; letter-spacing: 0.05em; margin-bottom: 0.5rem;`.
+- `.contact-info__form .gfield_required` — `color: var(--color-cwc-orange-01); margin-left: 0.25rem; font-weight: 700;`. Hide the default asterisk text and use an `::after` pseudo-element with content `" *"` so the asterisk is right-aligned inside the label (the default `gfield_required` is a trailing span; we override the label's flex layout to push the asterisk to the right with `display: flex; justify-content: space-between;` and put the `::after` on the label itself).
+- `.contact-info__form input[type="text"], .contact-info__form input[type="email"], .contact-info__form textarea` — `background: color-mix(in oklch, var(--color-cwc-blue-03) 30%, white); border: 1px solid var(--color-cwc-blue-03); border-radius: 0.375rem; padding: 0.75rem 1rem; font-size: 1rem;`. Override the existing `border-2 border-primary` from `forms.css` (this block has its own scope, so cascade works).
+- `.contact-info__form textarea` — `min-height: 10rem;` so the message field is "substantially taller" than the name/email inputs.
+- `.contact-info__form .gform_footer input[type="submit"], .contact-info__form .gform_footer button[type="submit"]` — same visual treatment as the header's Contact button: `class="button dark"` is added by the Gravity Forms markup if we set `gforms form settings → button class` to `button dark`; otherwise we apply `class="button dark"` via jQuery or a CSS rule that targets `.gform_footer input[type="submit"]` and forces the same look. The button gets the secondary-button gradient: `background: var(--background-image-button-gradient); color: var(--color-white); border: 3px solid var(--color-secondary); border-radius: 1.25rem 0.25rem 1.25rem 0.25rem; padding: 0.625rem 2rem; font-weight: 700;`. This matches the existing header Contact button shape.
+
+## Static Assets
+
+Three new SVG icons in `static/img/contact/`:
+
+- `icon-address.svg` — map pin outline, 24×24 viewBox, `stroke="currentColor" fill="none" stroke-width="1.5"`.
+- `icon-email.svg` — envelope outline, 24×24, same stroke.
+- `icon-phone.svg` — phone outline, 24×24, same stroke.
+
+The SVGs are sourced from the user (the spec says "will provide SVGs"). Until they arrive, the block renders empty `.contact-info__icon` spans so the layout is correct but the icons are blank — and the test suite can still verify the layout.
+
+The Leaflet map pin (orange-01 + white) and the actual Leaflet embed code are not yet available. The right column is a styled placeholder with a comment indicating where Leaflet will mount.
+
+## Data Flow
+
+- **Editor flow**: on the contact page, the editor adds the existing `Contact Info` block. The block renders the static layout. The block has no per-instance fields; everything comes from the global `contact_info` option.
+- **Render flow**: `page.php` runs `the_content()` → the editor's `Contact Info` block renders → the block reads the global `contact_info` for address/email/phone → the block renders the Gravity Forms shortcode and the Leaflet placeholder.
+- **Gravity Forms shortcode**: `[gravityform id="1" title="false"]` (per the user). The `title="false"` and `description="false"` are added by the block's render template to suppress the form's title/description and let the block's own heading carry that role.
+
+## Error Handling and Edge Cases
+
+- `contact_info.address` empty → the address `<li>` still renders but the value span is empty. Acceptable for a placeholder; the editor should fill the global field.
+- `contact_info.email` empty → the email `<li>` is omitted (wraps the value in `if ( $email )`).
+- `contact_info.phone` empty → same, omit.
+- Gravity Form ID 1 not found → the `[gravityform]` shortcode returns an empty string. The form area shows an empty box. The editor sees a visible gap, which is the right signal to fix the form.
+- Leaflet embed not present → the right column is a gray placeholder. Layout is correct; the editor knows to drop in the embed.
+- Editor adds the `Contact Info` block to a non-contact page → the block renders the same layout. This is intentional; the block is reusable. Pages that need a different layout (e.g. a 404, a privacy policy) should not add this block.
+- Existing pages that use the `Contact Info` block with `InnerBlocks` (if any) lose the InnerBlocks area. A repo-wide search shows no such pages exist, but the change is breaking for any page that was using the block as a wrapper for other blocks. This is a known follow-up: audit all pages using `Contact Info` before merging.
+
+## Out of Scope
+
+- A new page template (`template-contact.php`). The block is the page.
+- A new ACF field group for the contact page.
+- Per-page override of the heading, the shortcode, or the icon assets.
+- The Leaflet embed itself (placeholder only).
+- The map pin SVG.
+- An audit of all existing pages using the `Contact Info` block (manual follow-up, see Error Handling).
+- Changes to the header, footer, or `page.php`.
+- The inner-page hero (already done, gated by `hero_style = 'default'`).
+
+## Verification
+
+- Add `tests/contact-page.spec.js` covering:
+  - Desktop (1280px): the contact page renders with two columns; the left column has the heading, the address/email/phone rows (with icon spans), the Gravity Forms shortcode renders (or, if the form doesn't exist on the test env, the form area is empty — the test asserts the `.contact-info__form` element exists, not its contents), and the right column is the Leaflet placeholder.
+  - Mobile (402px): single column; the map drops below the form; no horizontal overflow.
+  - 320px: nothing clips; all text remains inside the viewport.
+  - Axe scan: no violations.
+  - Console errors: none.
+- Add `tests/services-hero-scope.spec.js` covering the re-scope:
+  - The Services page itself renders the hero (assuming the fixture has `hero_style = 'default'`).
+  - A child of the Services page (e.g. Communication Services) renders the hero.
+  - A grandchild of the Services page renders the hero.
+  - A page that is NOT a Services descendant (e.g. About, Contact) does NOT render the hero, even if its `hero_style = 'default'`.
+  - A blog post, archive, search, or 404 still renders the hero (these views bypass the Services gate).
+- Use the existing contact page fixture (or seed one in `beforeAll` if no fixture exists, and tear down in `afterAll`).
+- Run `npm run build` to regenerate `static/dist/`.
+- Run the full Playwright suite (`npx playwright test`) including `tests/mobile-homepage.spec.js`, `tests/site-a11y.spec.js`, `tests/inner-page.spec.js`, and the two new specs to confirm no regressions.
+- Run `composer lint` to catch PHPCS issues.
+- Capture 1280px and 402px full-page screenshots for visual comparison with the mockup.
+
+## Acceptance Criteria
+
+1. The contact page (`/contact/`) renders the new two-column 50/50 layout.
+2. The left column has the heading, address, email, and phone (from the global `contact_info` option), each with a CWC Blue 03 outline icon to the left.
+3. The Gravity Forms shortcode `[gravityform id="1" title="false"]` renders below the address items, with custom field styling: uppercase CWC Blue 01 labels, CWC Orange 01 right-aligned required asterisks, 30% opacity CWC Blue 03 input fills with CWC Blue 03 borders, slightly rounded corners, comfortable padding, a substantially taller message textarea, and a submit button matching the header's Contact button.
+4. The right column is a placeholder for the Leaflet map, fills 50% of the viewport width on desktop (edge to edge), and drops below the form on mobile.
+5. No hero is rendered on the contact page. There is a ~3rem top margin below the header and no page title above the body.
+6. The inner-page hero renders on the Services page, on its direct children, and on its grandchildren — and ONLY on those pages. Pages that have `hero_style = 'default'` but are not Services descendants lose their hero. The blog index, archives, single posts, search, and 404 also do **not** render the inner-page hero.
+7. No new console errors, axe violations, or PHPCS errors.
+8. Existing pages that are Services descendants render with the inner-page hero; all other pages (blog, archives, single posts, search, 404, non-Services `page` posts) render without it.
+9. Existing tests (`mobile-homepage`, `site-a11y`, `inner-page`) continue to pass.
+10. The block is reusable: adding the `Contact Info` block to another page renders the same layout.

docs/superpowers/specs/2026-07-05-blog-post-card-design.md

@@ -0,0 +1,128 @@
+# Blog Post Card Styling Design
+
+> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking.
+
+**Goal:** Restyle the blog post card to match `blog-post-card.png` — a vertical card with a featured image on top and a solid blue content area below containing the title, byline, and a "Read more" link in orange.
+
+**Architecture:** A targeted CSS update to `styles/components/post-list.css` (the card body, title, byline, and a new `.post-list__read-more` rule), and a one-line markup addition in `index.php` to render the "Read more" anchor. No template structure changes. No new Playwright tests beyond a single new assertion in the existing `tests/blog-page.spec.js`.
+
+**Tech Stack:** WordPress 6.x, PHP 8.x, Tailwind CSS v4, Playwright, axe-core, PHPCS (WordPress standard).
+
+## Global Constraints
+
+- Tabs for PHP indentation (project standard).
+- The theme's Tailwind build outputs `static/dist/theme.css`; that file is gitignored but committed with `git add -f` per project convention.
+- PHPCS uses the WordPress coding standard; `composer lint` must pass. Pre-existing CRLF errors on untouched files are out of scope.
+- All design colors use the project's existing CSS custom properties from `styles/base/colors.css`. No hardcoded hex values for theme colors.
+- The card width behavior stays the same: `grid-cols-[repeat(auto-fit,minmax(20rem,1fr))]`. No layout refactor.
+- The "Read more" link reuses the post's permalink — it's the same destination as the title link.
+- The H1 ("Blog" page title) and `search.php` are explicitly **out of scope** for this change. The working tree currently has the H1 removed and `search.php` untouched; this design does not address either.
+
+## Reference Mockup
+
+`blog-post-card.png` (426×644, vertical 2:3) at the theme root. The mockup shows:
+- **Image area** (top ~38%): light gray placeholder. Real implementation uses the post's featured image via `has_post_thumbnail()`.
+- **Content area** (bottom ~62%): solid `#90c9e7` background. This color is the hex equivalent of `--color-cwc-blue-03` (`oklch(80.63% 0.0724 230.4)`).
+- **Title:** multi-line, dark blue text (matches `--color-cwc-blue-01`).
+- **Byline:** smaller dark text near the bottom of the content area.
+- **"Read more" link:** orange (`#d24d32`, matches `--color-secondary` / `--color-cwc-orange-01`) at the bottom-left of the card.
+
+## File Structure
+
+| File | Responsibility | Created/Modified |
+| --- | --- | --- |
+| `styles/components/post-list.css` | Add card body, title, byline, and `.post-list__read-more` styles. | Modify |
+| `index.php` | Add a "Read more" link after the byline in `.post-list__details`. | Modify |
+| `static/dist/theme.css` | Rebuilt via `npm run build`. | Modified (committed with `git add -f`). |
+| `tests/blog-page.spec.js` | Add a single assertion that the "Read more" link exists in the first card. | Modify |
+
+---
+
+## Design Details
+
+### CSS additions to `styles/components/post-list.css`
+
+The card already has the following structure (from `index.php`):
+
+```html
+<div class="post-list__post flex flex-col border border-secondary rounded-md shadow-lg ...">
+    <figure class="post-list__img aspect-video border-b border-secondary rounded-t-md ...">
+        <img class="...">
+    </figure>
+    <div class="post-list__details px-4 py-6 flex flex-col grow">
+        <a href="..."><h2 class="post-list__title ...">Title</h2></a>
+        <div class="post-list__byline mt-auto">
+            <span class="post-list__author">Author</span>
+            <span class="post-list__date">Date</span>
+        </div>
+    </div>
+</div>
+```
+
+The styling changes:
+
+1. **`.post-list__post`** — Override the gray `border-secondary` so the card border disappears (the blue background extends edge-to-edge inside the card). Keep the rounded corners and shadow. The current classes in `index.php` set `border border-secondary`; we override via CSS to `border-color: var(--color-cwc-blue-03)`.
+
+2. **`.post-list__post`** and **`.post-list__img`** — Set `border: 0` (or `border-color: transparent`) on the figure so the existing `border-b border-secondary` does not show. The visual change is that the image and the blue content area flow as separate blocks without a divider line between them. The card itself keeps its `rounded-md` corners; the figure keeps `rounded-t-md` so the image rounds with the card.
+
+3. **`.post-list__title`** — Set `color: var(--color-cwc-blue-01)`, `font-weight: 700` (override the `font-normal` in the markup). Keep the existing `text-25px` size and `line-clamp-4` truncation. The title is the project's standard H2 typography.
+
+4. **`.post-list__byline`** — Set `color: var(--color-cwc-blue-01)`, `font-size: 0.875rem` (smaller than the title, but readable on the blue background). Keep `mt-auto` so the byline sits at the bottom of the available space.
+
+5. **`.post-list__read-more`** (new) — `color: var(--color-secondary)`, `font-weight: 600`, `margin-top: 0.75rem`, `text-decoration: none`. Hover: underline. The text content is "Read more →" (em dash and arrow, no period).
+
+### Markup change in `index.php`
+
+Inside `.post-list__details`, after the `.post-list__byline` div, add:
+
+```html
+<a class="post-list__read-more" href="<?php the_permalink(); ?>">Read more &rarr;</a>
+```
+
+No other markup changes. The title link, image, byline, and pagination are untouched.
+
+### What stays the same
+
+- Card structure: `figure` for image, `div.post-list__details` for content.
+- Grid layout: `grid-cols-[repeat(auto-fit,minmax(20rem,1fr))] gap-6`.
+- Image aspect ratio: `aspect-video` (16:9).
+- Image hover effect: `hover:prose-img:scale-110` with `duration-500` transition.
+- Empty state ("Nothing here yet…").
+- Pagination.
+- Card padding: `px-4 py-6` on `.post-list__details`.
+- The H1 / `search.php` / sidebar — all untouched.
+
+### Test updates
+
+Add a single assertion to the desktop test in `tests/blog-page.spec.js`:
+
+```js
+// First card has a "Read more" link.
+await expect(firstCard.locator(".post-list__read-more")).toBeVisible();
+await expect(firstCard.locator(".post-list__read-more")).toHaveAttribute(
+    "href",
+    /\/[a-z0-9-]+\/?$/
+);
+```
+
+No new spec file. The existing 4 tests stay as they are.
+
+### Out of Scope
+
+- The H1 page title — the working tree currently has the H1 markup removed. The previous blog plan added it (commit `66073c0`) and the design tokens (commit `cb0c886`); both are present in git history. Whether to re-add the H1 is a separate decision.
+- `search.php` — still a separate template, still has the old card structure, still has the `$featimg` case-sensitivity bug. Separate work.
+- `static/dist/theme.css` pre-existing changes from other work in the working tree (`header.php`, `views/partials/page-hero-services.php`, etc.) are unrelated and not touched.
+- Dark mode.
+- Animations on the "Read more" link beyond a basic underline-on-hover.
+- The H2 font family (Quincy vs sans) — the existing card uses the default font family for the title. The mockup's title appears to be a clean sans-serif weight-700. We do not change the font family.
+
+---
+
+## Self-Review Notes
+
+- **Spec coverage:** One CSS file, one PHP file, one test file, one dist rebuild. Every spec section is covered.
+- **Placeholder scan:** No "TBD", "TODO", or vague requirements. The "→" arrow and "Read more" text are spelled out explicitly.
+- **Type consistency:** Class names follow the existing BEM convention (`__read-more`).
+- **Spec section "Out of Scope"** is explicit: H1, search.php, dark mode, font family changes, animations — all out.
+- **Design tokens:** All colors reference existing CSS custom properties. No new colors introduced.
+- **Indentation:** Tabs for PHP (project standard).

docs/superpowers/specs/2026-07-24-services-content-blocks-design.md

@@ -0,0 +1,313 @@
+# Services Content Blocks Design
+
+> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking.
+
+**Goal:** Build the missing content-area components for the Mapping services page (and any other service sub-page), matching `Mapping-Services.png`. The hero, header, and footer are already in place and must not be touched.
+
+**Architecture:** One new ACF block (`services-list`) that renders a row of cards. Card count is editor-driven (2, 3, or 4); card size and grid layout adapt to the count. The orange horizontal line that bisects the images is rendered by the block itself as a full-bleed SVG background. The closing "At CWC, mapping is about more than data…" block reuses the existing `pull-quote` block — no new build needed. Editor composes the page in Gutenberg by adding `Services List` and `Pull Quote` blocks to any service sub-page; `page.php` already calls `the_content()`, so no template change is required.
+
+**Tech Stack:** WordPress 6.x, PHP 8.x, Tailwind CSS v4, Playwright, axe-core, PHPCS (WordPress standard).
+
+## Global Constraints
+
+- Tabs for PHP indentation (project standard).
+- `static/dist/theme.css` is committed (not gitignored) per project convention.
+- PHPCS uses the WordPress coding standard; `composer lint` must pass for all touched files.
+- All design colors use the project's existing CSS custom properties from `styles/base/colors.css`. No hardcoded hex values for theme colors.
+- Reuse the existing post-title accent pattern (blue heading + orange `::after` underline from `.post-title h1` in `styles/base/misc.css`) for consistency. Do not introduce a new accent style.
+- Reuse the existing `pull-quote` block for the closing statement — no duplicate block.
+- Page template `page.php` is not modified. The page-children block is not used.
+- This work does **not** edit `header.php`, `footer.php`, `views/partials/page-hero.php`, or `views/partials/page-hero-services.php`.
+
+## Reference Mockup
+
+`Mapping-Services.png` shows three content-area sections on the Mapping services page (URL `/services/mapping/`):
+
+1. **Featured services row** — 2 large cards side-by-side. Each card: image (top), blue heading with orange underline, intro paragraph. In the mockup, the orange horizontal line cuts through the middle of the images.
+2. **Service grid** — 4 small cards in a 4-up grid. Each card: square image, blue heading with orange underline, short description. The orange line again bisects the images.
+3. **Closing statement** — light-blue full-bleed section with decorative linework, centered text "At CWC, mapping is about more than data. It is about helping people understand and make decisions about their land and communities." with "more than data." colored (likely the orange secondary accent).
+
+The mockup shows a single orange horizontal line that bleeds past the container on both sides, intersecting both rows of images at their vertical midpoint.
+
+## File Structure
+
+| File | Responsibility | Created/Modified |
+| --- | --- | --- |
+| `views/blocks/services-list/` | Folder for the new ACF block. | Create |
+| `views/blocks/services-list/services-list.php` | Block template (PHP). | Create |
+| `views/blocks/services-list/services-list.css` | Block styles (CSS). | Create |
+| `views/blocks/services-list/block.json` | Block registration (ACF block name, category, icon). | Create |
+| `acf/group_services_list.json` | ACF field group for the `acf/services-list` block. | Create |
+| `static/img/services-list-line.svg` | Decorative orange horizontal line SVG that bisects the images. | Create |
+| `styles/blocks/index.css` | Import the new block's CSS. | Modify |
+| `tests/services-page.spec.js` | Playwright tests for the rendered block. | Create |
+| `static/dist/theme.css` | Rebuilt via `npm run build`. | Modified |
+
+---
+
+## Design Details
+
+### 1. New ACF block: `services-list`
+
+**Block name (registration key):** `acf/services-list`
+**Editor title:** "Services List"
+**Category:** common
+**Description (in block.json):** "A row of service cards. Card count (2-4) determines the layout."
+
+#### ACF field group (`acf/group_services_list.json`)
+
+```
+Group key:    group_services_list
+Group title:  Services List
+Position:     normal
+Menu order:   0
+Location:     block == acf/services-list
+```
+
+Fields:
+- `items` (repeater, layout: block, button label: "Add Service")
+  - `image` (image, return_format: array, required: 0) — Card image.
+  - `heading` (text, required: 0) — Card title.
+  - `description` (textarea, rows: 4, required: 0) — Card body copy.
+
+The block is intentionally minimal. No per-item "size" select, no global layout toggle, no CTA field. The grid layout derives from the item count alone.
+
+#### Block template (`views/blocks/services-list/services-list.php`)
+
+Top of file:
+
+```php
+namespace CWC;
+
+$items = get_field( 'items' );
+if ( empty( $items ) ) {
+    return;
+}
+
+$count = count( $items );
+
+// Grid columns by count: 2 -> lg:grid-cols-2, 3 -> lg:grid-cols-3, 4 -> lg:grid-cols-4
+$grid_class = 'lg:grid-cols-' . max( 2, min( 4, (int) $count ) );
+
+$classes = "services-list mx-break-out relative $grid_class";
+$wrapper = blockWrapperAttributes( $classes, $is_preview );
+```
+
+Render:
+
+```html
+<section class="services-list ...">  <!-- the wrapper from blockWrapperAttributes -->
+    <div class="services-list__line" aria-hidden="true"></div>  <!-- full-bleed orange line, see CSS -->
+    <div class="container">
+        <div class="services-list__grid grid grid-cols-1 gap-8 lg:gap-12">
+            <?php foreach ( $items as $item ) : ?>
+                <article class="services-list__card">
+                    <?php if ( ! empty( $item['image'] ) ) : ?>
+                        <figure class="services-list__media aspect-square overflow-hidden rounded-md">
+                            <img
+                                src="<?php echo esc_url( $item['image']['url'] ); ?>"
+                                alt="<?php echo esc_attr( $item['image']['alt'] ?? '' ); ?>"
+                                class="services-list__img w-full h-full object-cover"
+                                loading="lazy"
+                            />
+                        </figure>
+                    <?php endif; ?>
+
+                    <?php if ( ! empty( $item['heading'] ) ) : ?>
+                        <h3 class="services-list__heading">
+                            <?php echo wp_kses_post( $item['heading'] ); ?>
+                        </h3>
+                    <?php endif; ?>
+
+                    <?php if ( ! empty( $item['description'] ) ) : ?>
+                        <div class="services-list__desc">
+                            <?php echo wp_kses_post( $item['description'] ); ?>
+                        </div>
+                    <?php endif; ?>
+                </article>
+            <?php endforeach; ?>
+        </div>
+    </div>
+</section>
+```
+
+Notes:
+- The `lg:grid-cols-N` class is generated dynamically. Tailwind v4 picks up the class from the source file and emits the rule. No safelist needed.
+- Card aspect ratio: `aspect-square` for all counts. Mockup shows square images for both the 2-up and 4-up rows.
+- Heading: `<h3>` to sit below the page H1 in document order.
+
+#### Block styles (`views/blocks/services-list/services-list.css`)
+
+```
+.services-list {
+    /* vertical position of the bisecting line, relative to the .container block.
+       The image is the first child of each card; bisecting it = approx 25% from the top. */
+    --services-line-top: 25%;
+
+    &__line {
+        position: absolute;
+        inset-inline: 0;
+        top: var(--services-line-top);
+        height: 8px;
+        pointer-events: none;
+        z-index: 1;
+        /* background SVG served from theme root */
+        background-image: url('/wp-content/themes/community-works-collaborative/static/img/services-list-line.svg');
+        background-repeat: no-repeat;
+        background-position: center center;
+        background-size: 100% 100%;
+    }
+
+    &__grid {
+        position: relative;
+        z-index: 2;  /* cards stack above the line so images are not visually cut */
+    }
+
+    &__card {
+        @apply flex flex-col;
+    }
+
+    &__heading {
+        @apply text-cwc-blue-01 text-24px font-bold leading-none mt-6 mb-4;
+        /* the orange accent underline from .post-title h1 */
+        &::after {
+            background: var(--color-secondary);
+            content: "";
+            display: block;
+            height: 4px;
+            margin-top: 0.45rem;
+            width: 3rem;
+        }
+    }
+
+    &__desc {
+        @apply text-gray-600 text-16px font-light leading-snug;
+    }
+}
+```
+
+The bisecting line is rendered behind the cards (z-index: 1 on the line, 2 on the grid). The 25% top offset aims at the vertical center of the square image; minor visual variation is acceptable. The line itself is a thin orange `<rect>` SVG (8px tall) spanning full width.
+
+#### Block registration (`views/blocks/services-list/block.json`)
+
+```json
+{
+    "name": "acf/services-list",
+    "title": "Services List",
+    "description": "A row of service cards (2, 3, or 4). Layout adapts to the count.",
+    "category": "common",
+    "icon": "grid-view",
+    "keywords": ["services", "cards", "mapping"],
+    "acf": {
+        "mode": "preview",
+        "renderTemplate": "services-list.php"
+    },
+    "supports": {
+        "anchor": true,
+        "align": false
+    }
+}
+```
+
+The block is auto-registered via `regACFBlocks()` in `functions.php`, which scans `views/blocks/*` and calls `register_block_type()` on each folder.
+
+### 2. Decorative SVG: `static/img/services-list-line.svg`
+
+A simple orange horizontal line, 1600×8 viewBox, full-bleed:
+
+```svg
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1600 8" preserveAspectRatio="none">
+    <rect x="0" y="3" width="1600" height="2" fill="#F26B53" />
+</svg>
+```
+
+The `preserveAspectRatio="none"` lets the line stretch to whatever width the container is. Fill `#F26B53` matches the existing brand orange already used in the icons (`stroke="#F26B53"` on `next.php` / `prev.php`).
+
+### 3. Closing block: reuse `pull-quote`
+
+The closing "At CWC, mapping is about more than data…" block already matches the `pull-quote` block's contract. The editor adds a `Pull Quote` block to the page, sets:
+- **Text** (wysiwyg with bold): `At CWC, mapping is about more than data. It is about helping people understand and make decisions about their land and communities.` with **"more than data."** bolded.
+- **Background Color**: `#E6F0F5` (the light blue in the mockup) or the default `--color-pullquote-bg` if it's already correct.
+- **Background Image**: optional, if the decorative linework is editor-managed; otherwise leave blank — the existing `mobile-pullquote-vector.svg` / `pull-quote__vector--mobile` provides the linework.
+
+If `pull-quote`'s default `bg-(--color-pullquote-bg)` already matches the mockup's light blue, no field tweak is needed. If it does not match, the editor sets the explicit hex. **No code change to the pull-quote block.**
+
+### 4. Page integration
+
+The mapping page (and any future service sub-page) is composed entirely in Gutenberg:
+
+1. Add a `Services List` block, populate with 4 items: Community Mapping Initiatives, Spatial Analysis and GIS Services, Spatial Database Management, Data Collection Services, Cartography, Land Related Support Services. Wait — the mockup has 2 large + 4 small = 6 items across 2 separate rows. **Resolution:** the editor adds **two `Services List` blocks** on the mapping page: one with 2 items, one with 4 items. Each block renders as a single row.
+2. Add a `Pull Quote` block, populate with the closing text.
+
+`page.php` already iterates `the_content()` and renders whatever blocks are present. No PHP change.
+
+### 5. CSS import (`styles/blocks/index.css`)
+
+Add at the end of the existing imports:
+
+```css
+@import '../../views/blocks/services-list/services-list.css';
+```
+
+### 6. Tests (`tests/services-page.spec.js`)
+
+A new Playwright spec covering the rendered block on the mapping page:
+
+```js
+import { test, expect } from "@playwright/test";
+import AxeBuilder from "@axe-core/playwright";
+
+test.describe("Services List block on /services/mapping/", () => {
+    test("renders the heading and image for each card", async ({ page }) => {
+        await page.goto("/services/mapping/");
+
+        // Both services-list blocks render.
+        const blocks = page.locator(".services-list");
+        await expect(blocks).toHaveCount(2);
+
+        // First block (featured) has 2 cards; second (grid) has 4.
+        await expect(blocks.nth(0).locator(".services-list__card")).toHaveCount(2);
+        await expect(blocks.nth(1).locator(".services-list__card")).toHaveCount(4);
+
+        // Each card has an image and a heading.
+        const firstCard = blocks.nth(0).locator(".services-list__card").first();
+        await expect(firstCard.locator(".services-list__media img")).toBeVisible();
+        await expect(firstCard.locator(".services-list__heading")).toBeVisible();
+    });
+
+    test("bisecting line is present and aria-hidden", async ({ page }) => {
+        await page.goto("/services/mapping/");
+        const line = page.locator(".services-list__line").first();
+        await expect(line).toBeAttached();
+        await expect(line).toHaveAttribute("aria-hidden", "true");
+    });
+
+    test("no axe violations on the block", async ({ page }) => {
+        await page.goto("/services/mapping/");
+        const results = await new AxeBuilder({ page })
+            .include(".services-list")
+            .analyze();
+        expect(results.violations).toEqual([]);
+    });
+});
+```
+
+### Out of Scope
+
+- `header.php`, `footer.php`, the page hero — explicitly untouched.
+- A new template file for service pages — `page.php` already suffices.
+- Per-item "size" override (the size is fully driven by item count).
+- A custom layout for the closing block — `pull-quote` covers it.
+- An editor-uploadable linework SVG — the line is a fixed asset.
+- Mobile-specific layout — the responsive `grid-cols-1 lg:grid-cols-N` handles it. The bisecting line is hidden on mobile (below `lg:`) so it does not bisect the stacked single-column cards awkwardly.
+- Animations on the cards.
+- Dark mode.
+- A new CSS color or a new font — everything reuses existing tokens.
+
+## Self-Review Notes
+
+- **Spec coverage:** One new ACF block (4 files), one SVG asset, two file modifications (CSS index, dist rebuild), one test file. Every spec section is covered.
+- **Placeholder scan:** No "TBD", "TODO", or vague requirements. The bisecting line CSS, the dynamic `lg:grid-cols-N` class, the card aspect ratio, the title accent reuse — all explicit.
+- **Type consistency:** Class names follow the existing BEM convention (`services-list__card`, `__media`, `__heading`, `__desc`, `__line`).
+- **Scope check:** Single focused build, no decomposition needed. Block is small (≤4 files), testable in isolation, and composable on any service page.
+- **Ambiguity check:** The "2 rows on the mapping page" question is resolved — editor adds 2 instances of the same block, one with 2 items, one with 4. The "orange line bisects images" question is resolved — fixed-positioned SVG with `top: 25%`, behind the cards, hidden on mobile.

docs/superpowers/specs/2026-07-25-team-grid-block-design.md

@@ -0,0 +1,332 @@
+# Team Grid Block Design
+
+> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking.
+
+**Goal:** Build a new `team-grid` ACF block for the Team page (and any other page that needs a team grid) that renders a responsive grid of team members. Each member shows their photo (rounded rectangle), name, and title. The bio is collapsed by default and expands vertically with a smooth animation when the photo, name, or title is clicked.
+
+**Architecture:** One new ACF block (`acf/team-grid`) with a single repeater of `members` (image, name, title, bio). The block uses native HTML `<details>`/`<summary>` for the click-to-expand interaction, animated with the `grid-template-rows: 0fr → 1fr` CSS pattern (no JavaScript). The block has no built-in background — the editor wraps it in an existing Section block when a dark/light background is needed. The page template is unchanged; the editor adds the block to the Team page in Gutenberg.
+
+**Tech Stack:** WordPress 6.x, PHP 8.x, Tailwind CSS v4, Playwright, axe-core, PHPCS (WordPress standard).
+
+## Global Constraints
+
+- Tabs for PHP indentation (project standard).
+- `static/dist/theme.css` is committed (not gitignored) per project convention.
+- PHPCS uses the WordPress coding standard; `composer lint` must pass for all touched files.
+- All design colors use the project's existing CSS custom properties from `styles/base/colors.css`. No hardcoded hex values for theme colors.
+- Reuse existing design tokens where possible (e.g. the `text-cwc-blue-01` heading color, `var(--color-secondary)` accent if needed).
+- The headshot uses `rounded-md` to match other image cards in the project (`post-list`, `services-list`).
+- All commits follow the project's emoji-prefixed commit-message style (e.g. `✨ feat: …`).
+- This work does **not** edit `header.php`, `footer.php`, `views/partials/page-hero.php`, or `views/partials/page-hero-services.php`.
+- `page.php` is not modified.
+- No JavaScript files are added. The `<details>`/`<summary>` interaction is fully native.
+- Reuse the same `regACFBlocks()` auto-registration pattern as `services-list`.
+
+## Reference Mockup
+
+`team-example.png` shows a dark-blue section with 8 team members in a 2-column grid. Each member has a circular headshot, name (bold), title (italic), and a multi-line bio below. All bios are visible in the mockup.
+
+**Intent of the design (per the user):**
+- The bio should be a `<details>` element that **opens vertically** when the photo, name, or title is clicked. The mockup shows the open state for every member for context; the live behavior is collapsed by default.
+- The headshot should be a **rectangle with rounded corners that match other images in the project** — `rounded-md` is the project standard. The mockup's circular headshots are a visual approximation; the live design uses rounded rectangles.
+- The block has no built-in background. The editor wraps it in a Section block (`acf/section`) when a dark or light background is needed.
+- Layout is responsive: 1 column on mobile, 2 on tablet, 3 on desktop (the user's "3-2-1" choice).
+
+## File Structure
+
+| File | Responsibility | Created/Modified |
+| --- | --- | --- |
+| `acf/group_team_grid.json` | ACF field group for the `acf/team-grid` block. | Create |
+| `views/blocks/team-grid/team-grid.php` | Block template (PHP) — renders the grid. | Create |
+| `views/blocks/team-grid/team-grid.css` | Block styles (CSS) — layout, photo, summary, animation. | Create |
+| `views/blocks/team-grid/block.json` | Block registration metadata. | Create |
+| `styles/blocks/index.css` | Import the new block's CSS. | Modify |
+| `tests/team-page.spec.js` | Playwright tests for the rendered block. | Create |
+| `static/dist/theme.css` | Rebuilt via `npm run build`. | Modified |
+
+---
+
+## Design Details
+
+### 1. ACF field group: `acf/team-grid`
+
+**Block name (registration key):** `acf/team-grid`
+**Editor title:** "Team Grid"
+**Category:** common
+**Description (in block.json):** "A responsive grid of team members. Click a card to expand the bio."
+
+#### ACF field group (`acf/group_team_grid.json`)
+
+```
+Group key:    group_team_grid
+Group title:  Team Grid
+Position:     normal
+Menu order:   0
+Location:     block == acf/team-grid
+```
+
+Fields:
+- `members` (repeater, layout: block, button label: "Add Team Member")
+  - `image` (image, return_format: array, required: 0) — Headshot.
+  - `name` (text, required: 0) — Person's name (e.g. "Christopher Werner").
+  - `title` (text, required: 0) — Person's role (e.g. "Principal Consultant & CEO").
+  - `bio` (wysiwyg, tabs: visual, toolbar: basic, media_upload: 0, required: 0) — Bio body copy.
+
+The block is intentionally minimal. No per-card size, no global layout toggle, no CTA field, no group-level background color. Layout derives from CSS (`grid-cols-1 sm:grid-cols-2 lg:grid-cols-3`).
+
+#### Block registration (`views/blocks/team-grid/block.json`)
+
+```json
+{
+    "name": "acf/team-grid",
+    "title": "Team Grid",
+    "description": "A responsive grid of team members. Click a card to expand the bio.",
+    "category": "common",
+    "icon": "groups",
+    "keywords": ["team", "people", "staff", "bio"],
+    "acf": {
+        "mode": "preview",
+        "renderTemplate": "team-grid.php"
+    },
+    "supports": {
+        "anchor": true,
+        "align": false
+    }
+}
+```
+
+The `icon: "groups"` is a WordPress Dashicon that visually represents a group of people.
+
+#### Block template (`views/blocks/team-grid/team-grid.php`)
+
+```php
+<?php
+/**
+ * Block Name: Team Grid
+ *
+ * A responsive grid of team members. Each card uses a native <details>
+ * element so the bio expands when the photo, name, or title is clicked.
+ *
+ * @package CWC
+ */
+
+namespace CWC;
+
+$members = get_field( 'members' );
+
+if ( empty( $members ) ) {
+    return;
+}
+
+$classes  = 'team-grid container my-section mx-auto';
+$wrapper  = blockWrapperAttributes( $classes, $is_preview );
+?>
+
+<section <?php echo wp_kses_post( $wrapper ); ?>>
+    <div class="team-grid__inner grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8 lg:gap-12">
+        <?php foreach ( $members as $member ) : ?>
+            <article class="team-grid__card">
+                <details class="team-grid__details">
+                    <summary class="team-grid__summary">
+                        <?php if ( ! empty( $member['image'] ) ) : ?>
+                            <img
+                                class="team-grid__photo"
+                                src="<?php echo esc_url( $member['image']['url'] ); ?>"
+                                alt="<?php echo esc_attr( $member['image']['alt'] ?? '' ); ?>"
+                                loading="lazy"
+                            />
+                        <?php endif; ?>
+
+                        <?php if ( ! empty( $member['name'] ) ) : ?>
+                            <h3 class="team-grid__name">
+                                <?php echo wp_kses_post( $member['name'] ); ?>
+                            </h3>
+                        <?php endif; ?>
+
+                        <?php if ( ! empty( $member['title'] ) ) : ?>
+                            <p class="team-grid__title">
+                                <?php echo wp_kses_post( $member['title'] ); ?>
+                            </p>
+                        <?php endif; ?>
+                    </summary>
+
+                    <div class="team-grid__bio-wrap">
+                        <div class="team-grid__bio-inner">
+                            <?php if ( ! empty( $member['bio'] ) ) : ?>
+                                <div class="team-grid__bio">
+                                    <?php echo wp_kses_post( $member['bio'] ); ?>
+                                </div>
+                            <?php endif; ?>
+                        </div>
+                    </div>
+                </details>
+            </article>
+        <?php endforeach; ?>
+    </div>
+</section>
+```
+
+Notes:
+- Native `<details>`/`<summary>`: the summary is the click target (photo + name + title); the body is the bio wrap.
+- The `<details>` element is closed by default — no `open` attribute. The user opens it on click.
+- The bio uses `wysiwyg` so editors can add links or basic formatting. Output is sanitized via `wp_kses_post`.
+- `team-grid__bio-wrap` is a 1-row grid container that animates `grid-template-rows` from `0fr` to `1fr`. The `__bio-inner` inside has `overflow: hidden; min-height: 0` so the bio is clipped during the transition.
+
+#### Block styles (`views/blocks/team-grid/team-grid.css`)
+
+```css
+/* Team Grid block */
+
+.team-grid {
+    &__card {
+        @apply flex flex-col;
+    }
+
+    &__details {
+        @apply flex flex-col;
+    }
+
+    /* summary is the click target. Strip the default disclosure triangle. */
+    &__summary {
+        @apply flex flex-col items-center text-center cursor-pointer list-none;
+
+        &::-webkit-details-marker {
+            display: none;
+        }
+
+        &::marker {
+            display: none;
+            content: '';
+        }
+    }
+
+    &__photo {
+        @apply w-32 h-32 sm:w-40 sm:h-40 lg:w-48 lg:h-48 object-cover rounded-md mb-4;
+    }
+
+    &__name {
+        @apply text-cwc-blue-01 text-22px font-bold leading-tight mb-1;
+    }
+
+    &__title {
+        @apply text-gray-600 text-16px font-light italic mb-3;
+    }
+
+    /* Animation: animate grid-template-rows 0fr -> 1fr. */
+    &__bio-wrap {
+        display: grid;
+        grid-template-rows: 0fr;
+        transition: grid-template-rows 300ms ease;
+    }
+
+    &__details[open] &__bio-wrap {
+        grid-template-rows: 1fr;
+    }
+
+    &__bio-inner {
+        overflow: hidden;
+        min-height: 0;
+    }
+
+    &__bio {
+        @apply text-gray-700 text-16px font-light leading-snug pt-2;
+    }
+}
+```
+
+Notes:
+- The summary is a flex column with `items-center` so the photo, name, and title stack centered. This matches the mockup.
+- The default `<summary>` marker (▶ triangle) is hidden with `list-style: none` plus vendor-prefixed `::-webkit-details-marker` and `::marker` reset.
+- The `&__details[open] &__bio-wrap` selector uses CSS nesting to target the bio wrap when the parent details is open. This compiles to `.team-grid__details[open] .team-grid__bio-wrap { grid-template-rows: 1fr; }`.
+- The `team-grid__details[open] &__bio-wrap` syntax uses CSS nesting: `&` inside `&__details[open]` is the previous compound selector. Tailwind v4 (lightningcss) unwraps this correctly.
+- Photo sizes: `w-32 h-32` (8rem / 128px) on mobile, `w-40 h-40` (10rem / 160px) on small, `w-48 h-48` (12rem / 192px) on large.
+
+### 2. CSS import wiring (`styles/blocks/index.css`)
+
+Append at the end of `styles/blocks/index.css`:
+
+```css
+@import '../../views/blocks/team-grid/team-grid.css';
+```
+
+After the edit, the file ends with:
+
+```
+@import '../../views/blocks/services-list/services-list.css';
+@import '../../views/blocks/team-grid/team-grid.css';
+```
+
+### 3. Page integration
+
+`page.php` is unchanged. The editor adds a `Team Grid` block to the Team page (`/team/`) in Gutenberg. To get the dark-blue background, the editor wraps the `Team Grid` block in a `Section` block (`acf/section`) and sets the Section's `background_color` to the dark blue.
+
+No PHP template change is required.
+
+### 4. CSS Build
+
+Run `npm run build` to compile Tailwind v4 → `static/dist/theme.css`. The new utilities (e.g. `text-22px`, `text-16px`, `w-32 h-32`, `rounded-md`) must appear in the dist.
+
+### 5. Tests (`tests/team-page.spec.js`)
+
+```js
+import { test, expect } from "@playwright/test";
+import AxeBuilder from "@axe-core/playwright";
+
+test.describe("Team Grid block on /team/", () => {
+    test("renders the photo, name, and title for each member", async ({ page }) => {
+        await page.goto("/team/");
+
+        const cards = page.locator(".team-grid__card");
+        await expect(cards.first()).toBeVisible();
+
+        const firstCard = cards.first();
+        await expect(firstCard.locator(".team-grid__photo")).toBeVisible();
+        await expect(firstCard.locator(".team-grid__name")).toBeVisible();
+        await expect(firstCard.locator(".team-grid__title")).toBeVisible();
+    });
+
+    test("bio is hidden by default and expands on summary click", async ({ page }) => {
+        await page.goto("/team/");
+
+        const firstDetails = page.locator(".team-grid__details").first();
+        // Bio is closed by default.
+        await expect(firstDetails).not.toHaveAttribute("open", "");
+
+        // Click the summary; the details should open and the bio should be visible.
+        await firstDetails.locator(".team-grid__summary").click();
+        await expect(firstDetails).toHaveAttribute("open", "");
+        await expect(firstDetails.locator(".team-grid__bio")).toBeVisible();
+
+        // Click again; the details should close.
+        await firstDetails.locator(".team-grid__summary").click();
+        await expect(firstDetails).not.toHaveAttribute("open", "");
+    });
+
+    test("no axe violations on the team-grid block", async ({ page }) => {
+        await page.goto("/team/");
+        const results = await new AxeBuilder({ page })
+            .include(".team-grid")
+            .analyze();
+        expect(results.violations).toEqual([]);
+    });
+});
+```
+
+### Out of Scope
+
+- The Team page template — `page.php` is unchanged. The editor adds the block in Gutenberg.
+- The Section block wrapper for the dark-blue background — the editor composes this in Gutenberg.
+- A custom open/close icon or arrow indicator — the click target is the entire summary (photo + name + title), so no chevron is needed.
+- Animations beyond the bio's expand/collapse transition. No hover transforms, no entry animations.
+- Per-card size variants — all cards are the same size.
+- A `data-team-member-id` slug for deep-linking to a specific member's expanded bio.
+- Dark-mode overrides — the block is color-agnostic and inherits the parent Section's color scheme.
+- Per-page header/footer changes.
+
+## Self-Review Notes
+
+- **Spec coverage:** One new ACF block (4 files), one CSS import, dist rebuild, one test file. Every spec section is covered.
+- **Placeholder scan:** No TBDs. Every step has a concrete file path, exact content, exact command, and expected output.
+- **Type consistency:** Class names use the existing BEM convention (`__card`, `__details`, `__summary`, `__photo`, `__name`, `__title`, `__bio-wrap`, `__bio-inner`, `__bio`). Field names (`members`, `image`, `name`, `title`, `bio`) are used in the JSON, the PHP, and the tests.
+- **Scope check:** Single focused build, no decomposition needed. Block is small (≤4 files), testable in isolation, and composable on the Team page (and any other page that needs a team grid).
+- **Ambiguity check:** The "rounded rectangle" headshot is concretely specified as `rounded-md`. The "open vertically" animation is concretely specified as `grid-template-rows: 0fr → 1fr` with a 300ms transition. The "3-2-1" responsive grid is concretely specified. The "no background" decision is concretely scoped to the Section block wrapper (editor's responsibility, not this block's).

footer.php

@@ -19,11 +19,19 @@ $locations = get_nav_menu_locations();
 $footerNav = ! empty( $locations['footer_navigation'] )
     ? ( wp_get_nav_menu_items( (int) $locations['footer_navigation'] ) ? wp_get_nav_menu_items( (int) $locations['footer_navigation'] ) : array() )
     : array();
+
+$services = get_page_by_path( 'services' )->ID;
+
+$svcChild = $post->post_parent === $services ? true : false;
+
+if ( ! is_page( 'contact' ) && ! $svcChild ) {
+    $marginClass = 'mt-20';
+}
 ?>
 
 	</main>
 
-	<footer role="contentinfo" class="site-footer bg-cwc-blue-02 text-white pt-16 pb-12 text-base">
+	<footer role="contentinfo" class="site-footer bg-cwc-blue-02 text-white pt-16 pb-12 text-base <?php echo esc_attr( $marginClass ?? '' ); ?>">
         <div class="container mx-auto grid grid-cols-4 gap-6">
             <div class="max-w-[40ch]">
                 <h2 id="footer-header" class="max-w-64 h-auto">

header.php

@@ -12,20 +12,13 @@ global $views;
 
 $headerLogo = getFieldValue( 'header.header_logo.url' ) ? getFieldValue( 'header.header_logo.url' ) : get_theme_file_uri( '/static/img/logo.svg' );
 
-// Check conditions for displaying the hero section
+// Check conditions for displaying the hero section.
-$showHero = in_array(
+// The inner-page hero renders only on the Services page, its direct children,
-	true,
+// and its grandchildren. All other views (blog index, archives, single posts,
-	array(
+// search, 404) render without the hero.
-		get_field( 'hero_style' ) === 'default',
+$services = get_page_by_path( 'services' )->ID;
-		is_home(),
-		is_archive(),
-		is_single(),
-		is_search(),
-		is_404(),
-	),
-	true
-);
 
+$showHero = $post->post_parent === $services ? true : false;
 ?>
 
 <!DOCTYPE html>
@@ -33,7 +26,7 @@ $showHero = in_array(
 
 <head>
 	<meta charset="<?php bloginfo( 'charset' ); ?>">
-	<meta name="viewport" content="width=device-width, initial-scale=1">
+	<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
 
 	<?php wp_head(); ?>
 </head>
@@ -56,6 +49,10 @@ $showHero = in_array(
 	</header>
 
 	<main id="maincontent" class="overflow-hidden min-h-[78dvh]">
-		<?php if ( $showHero ) : ?>
+		<?php
-			<?php get_template_part( 'views/partials/page-hero' ); ?>
+        if ( $showHero ) :
-		<?php endif; ?>
+            get_template_part( 'views/partials/page-hero-services' );
+        elseif ( ! is_front_page() && ! is_page( 'contact' ) ) :
+            get_template_part( 'views/partials/page-hero' );
+        endif;
+        ?>

index.php

@@ -10,12 +10,20 @@ namespace CWC;
 
 // Determine classes based on sidebar presence
 if ( hasSidebar() ) {
-	$classes  = 'container grid grid-cols-1 lg:grid-cols-4 gap-8 xl:gap-16 my-section mx-auto';
+	$classes  = 'container grid grid-cols-1 lg:grid-cols-4 gap-8 xl:gap-16 my-section mx-auto lg:px-0!';
 	$clsEntry = 'lg:col-span-3';
 } else {
 	$classes = 'container my-section lg:my-0 mx-auto';
 }
 
+ob_start();
+get_template_part( 'views/icons/prev' );
+$pagination_prev_icon = ob_get_clean();
+
+ob_start();
+get_template_part( 'views/icons/next' );
+$pagination_next_icon = ob_get_clean();
+
 get_header();
 ?>
 
@@ -23,13 +31,13 @@ get_header();
 	<?php if ( have_posts() ) : ?>
 		<div class="blog-posts <?php echo esc_attr( $clsEntry ); ?>">
 			<div class="post-list">
-				<div class="post-list__posts grid grid-cols-[repeat(auto-fit,minmax(20rem,1fr))] gap-6">
+				<div class="post-list__posts grid grid-cols-[repeat(auto-fit,minmax(20rem,1fr))] gap-12">
 					<?php
 					while ( have_posts() ) :
 						the_post();
 						?>
-						<div class="post-list__post flex flex-col border border-secondary rounded-md shadow-lg hover:prose-img:scale-110 hover:prose-img:origin-center hover:prose-img:duration-500">
+						<div class="post-list__post flex flex-col rounded-md shadow-lg hover:prose-img:scale-110 hover:prose-img:origin-center hover:prose-img:duration-500">
-							<figure class="post-list__img aspect-video border-b border-secondary rounded-t-md block h-auto w-full overflow-hidden m-0 p-0">
+							<figure class="post-list__img aspect-video rounded-t-md block h-auto w-full overflow-hidden m-0! p-0!">
 								<?php if ( has_post_thumbnail() ) : ?>
 									<?php
 										$featImg = get_the_post_thumbnail_url();
@@ -41,30 +49,19 @@ get_header();
 								<?php endif; ?>
 							</figure>
 
-							<div class="post-list__details px-4 py-8 flex flex-col grow">
+							<div class="post-list__details p-8 pb-10 flex flex-col justify-between grow">
-								<div class="post-list__cats">
+                                <h2 class="post-list__title font-normal text-32px mt-0 mx-0">
-									Posted in:
+                                    <a href="<?php the_permalink(); ?>" class=""><?php the_title(); ?></a>
-									<?php
+                                </h2>
-									$categories = get_the_category();
+
-									foreach ( $categories as $index => $category ) :
+                                <div class="post-list__excerpt line-clamp-5 mb-4">
-										$separator = $index < count( $categories ) - 1 ? ', ' : '';
+                                    <?php the_excerpt(); ?>
-										?>
-										<a href="<?php echo esc_url( get_category_link( $category->term_id ) ); ?>" class="post-list__category text-14px font-semibold leading-none uppercase mt-0 mb-2.5 mx-0 inline-block"><?php echo esc_html( $category->name ); ?></a><?php echo esc_attr( $separator ); ?>
-									<?php endforeach; ?>
                                 </div>
 
-								<a href="<?php the_permalink(); ?>" class="">
+                                <?php /* translators: %s: Post title. */ ?>
-									<h2 class="post-list__title font-normal text-25px text-balance line-clamp-4 truncate mt-0 mb-5 mx-0"><?php the_title(); ?></h2>
+                                <a class="post-list__read-more border-b-2 border-b-secondary w-fit" href="<?php echo esc_url( $post_permalink ); ?>" aria-label="<?php echo esc_attr( sprintf( __( 'Continue reading %s', 'cwc' ), $post_title ) ); ?>">
+                                    <?php echo esc_html__( 'Read More', 'cwc' ); ?>
                                 </a>
-
-                                <div class="post-list__excerpt mb-6">
-                                    <?php customExcerpt( get_the_content(), 15 ); ?>
-                                </div>
-
-								<div class="post-list__byline mt-auto">
-									<span class="post-list__author"><?php echo esc_html( ucfirst( get_the_author() ) ); ?> &mdash;</span>
-									<span class="post-list__date"><?php echo get_the_date(); ?></span>
-								</div>
 							</div>
 						</div>
 					<?php endwhile; ?>
@@ -75,8 +72,8 @@ get_header();
 					the_posts_pagination(
 						array(
 							'mid_size'  => 2,
-							'prev_text' => '&laquo; Previous',
+							'prev_text' => $pagination_prev_icon . '<span class="sr-only">' . esc_html__( 'Previous', 'cwc' ) . '</span>',
-							'next_text' => 'Next &raquo;',
+							'next_text' => $pagination_next_icon . '<span class="sr-only">' . esc_html__( 'Next', 'cwc' ) . '</span>',
 						)
 					);
 					?>

lib/class-enqueue.php

@@ -31,8 +31,11 @@ class Enqueue {
      */
     public function enqFEAssets() {
         $theme_dir = get_stylesheet_directory();
+
         $theme_uri = get_stylesheet_directory_uri();
 
+        $leaflet_version = '1.9.4';
+
         /**
          * CSS
          */
@@ -42,6 +45,8 @@ class Enqueue {
             wp_enqueue_style( 'cwc-theme', $theme_uri . $css_path, array(), $version );
         }
 
+        wp_enqueue_style( 'leaflet', 'https://unpkg.com/leaflet@' . $leaflet_version . '/dist/leaflet.css', array(), $leaflet_version );
+
         $font_ver = gmdate( 'U' );
         wp_enqueue_style( 'poppins', 'https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap', false, $font_ver );
         wp_enqueue_style( 'quincy', 'https://use.typekit.net/dnt5chp.css', false, $font_ver );

lib/hooks.php

@@ -154,6 +154,7 @@ add_filter(
         unset( $blocks['core/calendar'] );
         unset( $blocks['core/buttons'] );
         unset( $blocks['core/search'] );
+        unset( $blocks['core/pullquote'] );
 
         // return the new list of allowed blocks
         return array_keys( $blocks );

single.php

@@ -27,52 +27,30 @@ if ( hasSidebar() ) {
 				the_post();
 				?>
 
-				<div class="post-title mb-0">
+                <div class="post-img">
-					<h1 class="mb-0"><?php the_title(); ?></h1>
+                    <?php if ( has_post_thumbnail() ) : ?>
+                        <img src="<?php the_post_thumbnail_url( 'full' ); ?>" alt="<?php the_title(); ?>" class="w-full h-auto mb-6">
+                    <?php endif; ?>
                 </div>
 
-				<div class="post-meta text-14px italic mb-6">
+				<div class="post-title mb-0">
+					<h1 class=""><?php the_title(); ?></h1>
+
+                    <div class="post-subtitle text-28px font-quincy font-bold m-0 mb-6 p-0 leading-none text-cwc-blue-02">
+                        <?php the_field( 'subtitle' ); ?>
+                    </div>
+				</div>
+
+				<div class="post-meta text-14px text-cwc-orange-01 uppercase font-bold mb-6">
 					<div class="">
 						<span class="post-date">Posted: <?php the_date(); ?></span> | <span class="post-author">Posted by: <?php echo esc_html( ucfirst( get_the_author() ) ); ?></span>
 					</div>
-
-					<div class="">
-						<span class="post-categories">
-							<?php
-							$categories = get_the_category();
-							if ( ! empty( $categories ) ) {
-								echo '<span>Posted in: ';
-								foreach ( $categories as $ct ) {
-									echo '<a href="' . esc_url( get_category_link( $ct->cat_ID ) ) . '">' . esc_html( $ct->name ) . '</a>';
-									if ( count( $categories ) > 1 && $ct !== end( $categories ) ) {
-										echo ', ';
-									}
-								}
-								echo '</span>';
-							}
-							?>
-						</span>
-						|
-						<span class="post-tags">
-							<?php
-							$tags = get_the_tags();
-							if ( ! empty( $tags ) ) {
-								echo '<span>Tagged: ';
-								foreach ( $tags as $tg ) {
-									echo '<a href="' . esc_url( get_tag_link( $tg->term_id ) ) . '">' . esc_html( $tg->name ) . '</a>';
-									if ( count( $tags ) > 1 && $tg !== end( $tags ) ) {
-										echo ', ';
-									}
-								}
-								echo '</span>';
-							}
-							?>
-						</span>
-					</div>
 				</div>
 
+                <div class="post-content font-light">
+                    <?php the_content(); ?>
+                </div>
                 <?php
-				the_content();
 			}
 		}
 		?>

static/img/contact/icon-address.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#8FC9E6" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false">
+  <path d="M20 10c0 7-8 12-8 12s-8-5-8-12a8 8 0 0 1 16 0Z"/>
+  <circle cx="12" cy="10" r="3"/>
+</svg>

static/img/contact/icon-email.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#8FC9E6" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false">
+  <rect x="3" y="5" width="18" height="14" rx="2"/>
+  <path d="m3 7 9 6 9-6"/>
+</svg>

static/img/contact/icon-phone.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#8FC9E6" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false">
+  <path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.13.96.36 1.9.7 2.8a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.9.34 1.84.57 2.8.7A2 2 0 0 1 22 16.92Z"/>
+</svg>

static/img/services-list-line.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1600 32" preserveAspectRatio="none">
+    <rect x="0" y="3" width="1600" height="32" fill="#F26B53" />
+</svg>

static/js/modules/ContactInfoMap.js

@@ -0,0 +1,98 @@
+/**
+ * Contact Info map module.
+ */
+
+const MAP_SELECTOR = '.contact-info__map[data-lat][data-lng]';
+const DEFAULT_ZOOM = 14;
+const MARKER_SIZE = [62, 68];
+
+let leafletModulePromise;
+
+function loadLeaflet() {
+    if (!leafletModulePromise) {
+        leafletModulePromise = import('https://unpkg.com/leaflet@1.9.4/dist/leaflet-src.esm.js');
+    }
+
+    return leafletModulePromise;
+}
+
+function toFloat(value) {
+    const parsed = Number.parseFloat(value);
+
+    return Number.isFinite(parsed) ? parsed : null;
+}
+
+export async function initContactInfoMap() {
+    const mapContainers = document.querySelectorAll(MAP_SELECTOR);
+
+    if (!mapContainers.length) {
+        return;
+    }
+
+    let Leaflet;
+
+    try {
+        const module = await loadLeaflet();
+        Leaflet = module.default || module;
+    } catch (error) {
+        console.error('Leaflet failed to load for contact map.', error);
+        return;
+    }
+
+    mapContainers.forEach((container) => {
+        if (container.dataset.mapReady === 'true') {
+            return;
+        }
+
+        const latitude = toFloat(container.dataset.lat);
+        const longitude = toFloat(container.dataset.lng);
+        const zoom = toFloat(container.dataset.zoom) || DEFAULT_ZOOM;
+
+        if (latitude === null || longitude === null) {
+            return;
+        }
+
+        const map = Leaflet.map(container, {
+            zoomControl: false,
+            scrollWheelZoom: false,
+            dragging: false,
+            doubleClickZoom: false,
+            boxZoom: false,
+            keyboard: false,
+            tap: false,
+            attributionControl: true,
+        }).setView([latitude, longitude], zoom);
+
+        Leaflet.tileLayer('https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}{r}.png', {
+            maxZoom: 19,
+            subdomains: 'abcd',
+            attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors &copy; <a href="https://carto.com/attributions">CARTO</a>'
+        }).addTo(map);
+
+        const markerSvg = container.dataset.markerSvg;
+
+        const markerIcon = markerSvg
+            ? Leaflet.divIcon({
+                className: 'contact-info__leaflet-pin',
+                html: markerSvg,
+                iconSize: MARKER_SIZE,
+                iconAnchor: [MARKER_SIZE[0] / 2, MARKER_SIZE[1]],
+            })
+            : Leaflet.icon({
+                iconUrl: container.dataset.marker || '',
+                iconSize: MARKER_SIZE,
+                iconAnchor: [MARKER_SIZE[0] / 2, MARKER_SIZE[1]],
+                popupAnchor: [0, -MARKER_SIZE[1] + 8],
+                className: 'contact-info__leaflet-pin'
+            });
+
+        const marker = Leaflet.marker([latitude, longitude], { icon: markerIcon }).addTo(map);
+        const popupText = container.dataset.popup;
+
+        if (popupText) {
+            marker.bindPopup(popupText);
+        }
+
+        container.dataset.mapReady = 'true';
+    });
+}

static/js/theme.js

@@ -8,6 +8,7 @@ import GetHeaderHeight from './modules/GetHeaderHeight.js';
 import tagExternalLinks from './modules/TagExternalLinks.js';
 import Navigation from './modules/Navigation.js';
 import initRecentPostsCarousels from './modules/RecentPostsCarousel.js';
+import { initContactInfoMap } from './modules/ContactInfoMap.js';
 
 // Add passive event listeners
 ! function (e) {
@@ -72,6 +73,9 @@ document.addEventListener('DOMContentLoaded', () => {
     // Initialize mobile Recent Insights carousels.
     initRecentPostsCarousels();
 
+    // Initialize Contact Info Leaflet maps.
+    initContactInfoMap();
+
     // Add Back to Top button to body
     // const backToTop = document.createElement('x-back-to-top');
     // document.body.appendChild(backToTop);

styles/backend/admin.css

@@ -1,2 +1,3 @@
 /* Light admin styles; avoid overriding core wp-admin UI */
 
+#adminmenu ol, ul, li ul, ol li { margin: 0; }

styles/backend/editor.css

@@ -8,6 +8,7 @@
 
 body {
     font-family: var(--font-sans);
+    font-size: var(--text-base);
 
     h1, h2, h3,
     h4, h5, h6 {

styles/base/colors.css

@@ -4,7 +4,7 @@
     --color-black:      oklch(0% 0 0);
     --color-white:      oklch(100% 0 0);
 
-    --color-background: oklch(89.75% 0 0);
+    --color-background: oklch(100% 0 0);
     --color-text:       var(--color-black);
 
     --color-cwc-blue-01:   oklch(47.31% 0.1141 242.9);

styles/base/misc.css

@@ -3,3 +3,16 @@
 .social-icons svg {
     @apply bg-transparent fill-white rounded-full block;
 }
+
+.post-title h1 {
+    @apply mb-8 text-cwc-blue-01 leading-none;
+
+    &::after {
+        background: var(--color-secondary);
+        content: "";
+        display: block;
+        height: 4px;
+        margin-top: 0.45rem;
+        width: 3rem;
+    }
+}

styles/base/typography.css

@@ -43,19 +43,19 @@
 
     --text-base: 1rem;
     --text-12px: round(down, clamp(0.625rem, 0.5962rem + 0.1282vw, 0.75rem), 1px);
-    --text-14px: round(up, clamp(0.75rem, 0.7212rem + 0.1282vw, 0.875rem), 2px);
+    --text-14px: round(up, clamp(0.75rem, 0.7212rem + 0.1282vw, 0.875rem), 1px);
-    --text-16px: round(up, clamp(0.875rem, 0.8462rem + 0.1282vw, 1rem), 2px);
+    --text-16px: round(up, clamp(0.875rem, 0.8462rem + 0.1282vw, 1rem), 1px);
-    --text-18px: round(up, clamp(1rem, 0.9712rem + 0.1282vw, 1.125rem), 2px);
+    --text-18px: round(up, clamp(1rem, 0.9712rem + 0.1282vw, 1.125rem), 1px);
-    --text-20px: round(up, clamp(1.125rem, 1.0962rem + 0.1282vw, 1.25rem), 2px);
+    --text-20px: round(up, clamp(1.125rem, 1.0962rem + 0.1282vw, 1.25rem), 1px);
-    --text-22px: round(up, clamp(1.25rem, 1.2212rem + 0.1282vw, 1.375rem), 2px);
+    --text-22px: round(up, clamp(1.25rem, 1.2212rem + 0.1282vw, 1.375rem), 1px);
-    --text-24px: round(up, clamp(1.375rem, 1.3462rem + 0.1282vw, 1.5rem), 2px);
+    --text-24px: round(up, clamp(1.375rem, 1.3462rem + 0.1282vw, 1.5rem), 1px);
-    --text-28px: round(up, clamp(1.625rem, 1.5962rem + 0.1282vw, 1.75rem), 2px);
+    --text-28px: round(up, clamp(1.625rem, 1.5962rem + 0.1282vw, 1.75rem), 1px);
-    --text-30px: round(up, clamp(1.75rem, 1.7212rem + 0.1282vw, 1.875rem), 2px);
+    --text-30px: round(up, clamp(1.75rem, 1.7212rem + 0.1282vw, 1.875rem), 1px);
-    --text-32px: round(up, clamp(1.875rem, 1.8462rem + 0.1282vw, 2rem), 2px);
+    --text-32px: round(up, clamp(1.875rem, 1.8462rem + 0.1282vw, 2rem), 1px);
-    --text-34px: round(up, clamp(2rem, 1.9712rem + 0.1282vw, 2.125rem), 2px);
+    --text-34px: round(up, clamp(2rem, 1.9712rem + 0.1282vw, 2.125rem), 1px);
-    --text-40px: round(up, clamp(2.25rem, 2.1923rem + 0.2564vw, 2.5rem), 2px);
+    --text-40px: round(up, clamp(2.25rem, 2.1923rem + 0.2564vw, 2.5rem), 1px);
-    --text-54px: round(up, clamp(2.375rem, 2.1442rem + 1.0256vw, 3.375rem), 2px);
+    --text-54px: round(up, clamp(2.375rem, 2.1442rem + 1.0256vw, 3.375rem), 1px);
-    --text-64px: round(up, clamp(3rem, 2.7692rem + 1.0256vw, 4rem), 2px);
+    --text-64px: round(up, clamp(3rem, 2.7692rem + 1.0256vw, 4rem), 1px);
 }
 
 :root {

styles/blocks/index.css

@@ -4,3 +4,6 @@
 @import './core.css';
 @import './misc.css';
 @import './page-hero.css';
+@import '../../views/blocks/contact-info/contact-info.css';
+@import '../../views/blocks/services-list/services-list.css';
+@import '../../views/blocks/team-grid/team-grid.css';

styles/blocks/page-hero.css

@@ -1,21 +1,39 @@
-/* Page Hero partial styles (page-hero.php)
+.page-hero__heading {
- * Scoped to .page-hero to avoid affecting the homepage-hero block. */
+    @apply text-cwc-blue-01;
 
-.page-hero {
+    line-height: 1;
+    margin: 0;
+    text-align: left;
+
+    em {
+        color: var(--color-secondary);
+        font-style: normal;
+    }
+}
+
+.page-hero__intro {
+    font-weight: 300;
+    line-height: 1.3;
+    text-align: left;
+}
+
+/* Page Hero partial styles (page-hero-services.php)
+ * Scoped to .page-hero-services to avoid affecting the homepage-hero block. */
+.page-hero-services {
     background: linear-gradient(73.83deg, #8FC9E6 -8.7%, #006196 21.51%, #032F46 60.7%);
     isolation: isolate;
     margin-bottom: 10rem;
-    min-height: clamp(31rem, 38vw, 36rem);
+    min-height: clamp(31rem, 38.5417vw, 46.25rem);
     position: relative;
 }
 
-.page-hero__content {
+.page-hero-services__content {
     padding-block: clamp(2rem, 6vw, 4rem);
     position: relative;
     z-index: 10;
 }
 
-.page-hero__heading {
+.page-hero-services__heading {
     color: #fff;
     line-height: 1;
     margin: 3rem 0 1.5rem;
@@ -28,23 +46,24 @@
     }
 }
 
-.page-hero__intro {
+.page-hero-services__intro {
     color: #fff;
-    font-size: clamp(1rem, 1.5vw, 1.25rem);
+    font-size: clamp(1rem, 1.5vw, 1.5rem);
     font-weight: 300;
-    line-height: 1.5;
+    line-height: 1.4;
-    max-width: 36rem;
+    max-width: 32rem;
     opacity: 0.95;
     text-align: left;
 }
 
-.page-hero__media {
+.page-hero-services__media {
+    @apply rounded-xl;
     bottom: -5%;
     height: auto;
     max-height: none;
     pointer-events: none;
     position: absolute;
-    right: 23vw;
+    right: 28vw;
     top: 3rem;
     width: auto;
     z-index: 1;
@@ -52,8 +71,9 @@
     max-width: clamp(20rem, 30vw, 28rem);
 }
 
-.page-hero__vector {
+.page-hero-services__vector {
-    bottom: clamp(1.5rem, 4vw, 3rem);
+    /* bottom: clamp(1.5rem, 4vw, 3rem); */
+    bottom: 0;
     height: auto;
     left: 0;
     pointer-events: none;
@@ -63,18 +83,18 @@
 }
 
 @media (max-width: 767px) {
-    .page-hero {
+    .page-hero-services {
         min-height: clamp(28rem, 130vw, 40rem);
     }
 
-    .page-hero__media {
+    .page-hero-services__media {
         bottom: -8%;
         right: 0;
         top: auto;
         max-width: 60vw;
     }
 
-    .page-hero__vector {
+    .page-hero-services__vector {
         bottom: clamp(1rem, 3vw, 2rem);
         width: 100%;
     }

styles/components/pagination.css

@@ -5,31 +5,25 @@
         @apply hidden md:flex items-center justify-center mt-12;
 
         .page-numbers {
-      @apply hidden md:flex items-center justify-center h-10 p-4 text-base font-medium transition duration-300 rounded stroke-primary text-primary hover:bg-info hover:text-light hover:stroke-info focus-visible:bg-info focus-visible:text-light focus-visible:stroke-info focus-visible:outline-none;
+            @apply hidden md:flex items-center justify-center h-16 w-16 text-32px font-quincy font-medium transition duration-300 rounded stroke-primary text-primary hover:bg-info hover:text-light hover:stroke-info focus-visible:bg-info focus-visible:text-light focus-visible:stroke-info focus-visible:outline-none;
         }
 
-    .page-numbers.current {
+        .page-numbers.current { @apply text-light whitespace-nowrap bg-info ring-offset-2 hover:bg-primary hover:stroke-primary focus-visible:bg-info; }
-      @apply text-light whitespace-nowrap bg-info ring-offset-2 hover:bg-primary hover:stroke-primary focus-visible:bg-info;
-    }
 
-    .prev, .next {
+        .prev, .next { @apply flex gap-4 w-fit; }
-      @apply flex gap-4;
-    }
     }
 
     & a, & span {
-    border: 1px solid #ddd;
         border-radius: 4px;
-    color: #3857BC !important;
+        color: var(--color-cwc-blue-01) !important;
         margin: 0 5px;
         padding: .25rem .5rem;
         text-decoration: none;
     }
 
     & .current, & a:hover {
-    background: #3857BC !important;
+        background: color-mix(in oklch, var(--color-cwc-blue-03), white 50%) !important;
-    border-color: #3857BC !important;
+        color: var(--color-cwc-blue-01) !important;
-    color: #fff !important;
         padding: .25rem .5rem;
     }
 }

styles/components/post-list.css

@@ -1,37 +1,53 @@
 /* Blog/post index listing styles */
 
-.post-list {
+.post-list__post { overflow: hidden; }
-  /* Original styles, if needed
+
-   * .post-list__posts {
+.post-list__img { border-bottom: 0; }
-   * }
+
-   * .post-list__h1 {
+.post-list__details {
-   * }
+    background: color-mix(in oklch, var(--color-cwc-blue-03) 60%, white);
-   * .post-list__post {
+    color: var(--color-cwc-blue-01);
-   *   &:hover {
-   *     img {
-   *     }
-   *   }
-   *   .post-list__title {
-   *   }
-   *   .post-list__details {
-   *   }
-   *   .post-list__byline {
-   *   }
-   *   .post-list__author {
-   *   }
-   *   .post-list__sep {
-   *   }
-   *   .post-list__date {
-   *   }
-   * }
-   */
 }
 
-/* Original styles, if needed
+.post-list__title {
-* .no-posts {
+    color: var(--color-cwc-blue-01);
-*   .no-posts__title {
+    font-weight: 700;
-*   }
+    line-height: 1.1;
-*   .no-posts__desc {
+
-*   }
+    a {
-* }
+        color: var(--color-cwc-blue-01);
-*/
+        text-decoration: none;
+
+        &::after {
+            background: var(--color-secondary);
+            content: "";
+            display: block;
+            height: 4px;
+            margin-top: 0.45rem;
+            width: 3rem;
+        }
+    }
+}
+
+.post-list__excerpt {
+    color: var(--color-dark);
+    font-size: var(--text-18px);
+    font-weight: 300;
+    line-height: 1.5;
+}
+
+.post-list__byline {
+    color: var(--color-cwc-blue-01);
+    font-size: 0.875rem;
+}
+
+.post-list__read-more {
+    color: var(--color-secondary);
+    font-weight: 600;
+    margin-top: 0.75rem;
+    text-decoration: none;
+}
+
+.post-list__read-more:hover {
+
+}

styles/components/sidebar.css

@@ -1,28 +1,162 @@
 /* Sidebar styles */
 
 .sidebar{
-  .widget {
+    @apply pt-1;
-    /* Widget styles */
-    @apply mb-8;
 
-    h3 {
+    .widget {
-      /* Widget title styles */
+        @apply mb-10;
-      @apply m-0 mb-2 font-semibold;
+
+        &:last-child { @apply mb-0; }
+
+        h2,
+        h3,
+        .wp-block-heading {
+            @apply m-0 mb-4 pb-0;
+
+            color: var(--color-cwc-blue-01);
+            font-family: var(--font-sans);
+            font-size: var(--text-14px);
+            font-weight: 600;
+            letter-spacing: 0.11em;
+            line-height: 1;
+            text-transform: uppercase;
         }
 
         ul {
-      /* List styles */
+            @apply list-none m-0 p-0;
-      @apply list-none m-0 p-0 pl-3 border-l-3 border-secondary-400;
 
             li {
-        /* List item styles */
+                @apply m-0 leading-none!;
-        @apply text-balance;
 
-        &:first-of-type {
+                &:not(:last-child) { @apply mb-4; }
-          /* First list item styles */
+
-          @apply leading-none mb-1;
+                a {
+                    color: var(--color-dark);
+                    font-size: var(--text-16px);
+                    font-weight: 300;
+
+                    &:hover { color: var(--color-cwc-blue-01); }
                 }
             }
         }
+
+        select {
+            @apply px-5 py-3 rounded-sm border-2 border-cwc-blue-03;
+
+            background-color: color-mix(in oklch, var(--color-cwc-blue-03) 40%, white);
+            color: var(--color-dark);
+            font-size: var(--text-16px);
+            font-weight: 300;
+            line-height: 1.1;
+
+            appearance: none;
+            background-image: url("data:image/svg+xml,%3Csvg width='12' height='7' viewBox='0 0 12 7' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1.25L6 5.75L11 1.25' stroke='%23F26B53' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
+            background-position: right 1rem center;
+            background-repeat: no-repeat;
+            background-size: 0.75rem auto;
+            padding-right: 2.75rem;
+
+            &:focus-visible {
+                border-color: var(--color-cwc-blue-01);
+                outline-offset: 2px;
+            }
+        }
+
+        .wp-block-search__label,
+        .screen-reader-text {
+            @apply absolute left-5 top-1/2 pointer-events-none;
+
+            color: var(--color-dark);
+            font-size: var(--text-16px);
+            font-weight: 300;
+            line-height: 1;
+            transform: translateY(-50%);
+            z-index: 2;
+
+            &::before {
+                content: "";
+                display: inline-block;
+                width: 1rem;
+                height: 1rem;
+                margin-right: 0.6rem;
+                transform: translateY(1px);
+                background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12.25 12.25C13.4167 11.0833 14 9.66667 14 8C14 6.33333 13.4167 4.91667 12.25 3.75C11.0833 2.58333 9.66667 2 8 2C6.33333 2 4.91667 2.58333 3.75 3.75C2.58333 4.91667 2 6.33333 2 8C2 9.66667 2.58333 11.0833 3.75 12.25C4.91667 13.4167 6.33333 14 8 14C9.66667 14 11.0833 13.4167 12.25 12.25ZM8 16C5.76667 16 3.875 15.225 2.325 13.675C0.775 12.125 0 10.2333 0 8C0 5.76667 0.775 3.875 2.325 2.325C3.875 0.775 5.76667 0 8 0C10.2333 0 12.125 0.775 13.675 2.325C15.225 3.875 16 5.76667 16 8C16 8.93333 15.8542 9.8125 15.5625 10.6375C15.2708 11.4625 14.8583 12.2167 14.325 12.9L20 18.6L18.6 20L12.9 14.325C12.2167 14.8583 11.4625 15.2708 10.6375 15.5625C9.8125 15.8542 8.93333 16 8 16Z' fill='%23F26B53'/%3E%3C/svg%3E");
+                background-repeat: no-repeat;
+                background-size: contain;
+            }
+        }
+
+        .wp-block-search {
+            @apply relative;
+
+            &:focus-within {
+                .wp-block-search__label { opacity: 0; }
+            }
+
+            .wp-block-search__inside-wrapper { @apply relative; }
+
+            .wp-block-search__input {
+                @apply rounded-sm border-2 border-cwc-blue-03 px-5 py-3;
+
+                background-color: color-mix(in oklch, var(--color-cwc-blue-03) 40%, white);
+                color: var(--color-dark);
+                font-size: var(--text-16px);
+                font-weight: 300;
+                line-height: 1.1;
+                padding-left: 8.8rem;
+            }
+
+            .wp-block-search__button { @apply hidden; }
+
+            &:has(.wp-block-search__input:not(:placeholder-shown)) { .wp-block-search__label { opacity: 0; } }
+        }
+
+        &.widget_search {
+            @apply mb-9;
+
+            .wp-block-search__input {
+                &:focus-visible {
+                    border-color: var(--color-cwc-blue-01);
+                    outline-offset: 2px;
+                }
+            }
+        }
+
+        &:has(ul) {
+            h2,
+            h3,
+            .wp-block-heading {
+                @apply mb-2;
+
+                &::after {
+                    @apply block mt-2;
+
+                    content: "";
+                    height: 2px;
+                    width: 100%;
+                    background: var(--color-secondary);
+                }
+            }
+        }
+
+        .wp-block-archives__label {
+            @apply sr-only;
+        }
+    }
+
+    @media (max-width: 1023px) {
+        .widget {
+            ul a { font-size: var(--text-16px); }
+
+            .wp-block-search__label,
+            .screen-reader-text {
+                font-size: var(--text-16px);
+            }
+
+            .wp-block-search .wp-block-search__input {
+                font-size: var(--text-16px);
+                padding-left: 7.7rem;
+            }
+        }
     }
 }

styles/navigation/nav-functional.css

@@ -43,7 +43,7 @@
 }
 
 /* Mobile */
-@media screen and (max-width: 62.5rem) {
+@media screen and (max-width: 79.9375rem) {
     #app:has(.nav-main__toggle[aria-expanded="true"]) { height: calc(100vh - var(--hgtHeader)); }
 
     .nav-main__toggle {
@@ -81,7 +81,7 @@
 }
 
 /* Desktop */
-@media screen and (min-width: 62.5rem) {
+@media screen and (min-width: 80rem) {
     .nav-main__toggle {
         @apply hidden;
     }

styles/navigation/nav-main-default.css

@@ -11,7 +11,7 @@
  */
 
 /* desktop */
-@media screen and (min-width: 62.5rem) {
+@media screen and (min-width: 80rem) {
     .nav-main .menu-vdi {
         @apply flex items-center justify-end p-0 m-0 h-full;
 
@@ -51,17 +51,23 @@
 
                 >a {
                     @apply ml-2 mr-0 my-0;
-                    height: auto;
+
                     background: linear-gradient(93.03deg, #F26B53 0%, #D24D32 100%);
+                    border: 3px solid transparent;
                     border-radius: 1.25rem 0.25rem;
+                    height: auto;
                     padding: .5rem 2rem;
+
+                    &:hover {
+                        border: 3px solid #D24D32;
+                    }
                 }
             }
         }
     }
 }
 
-@media screen and (min-width: 62.5rem) {
+@media screen and (min-width: 80rem) {
     .menu-vdi {
         .menu-vdi__toggle { @apply flex items-center gap-2 hover:cursor-pointer; }
 
@@ -69,9 +75,9 @@
 
         .menu-vdi__submenu {
             top: calc(100% + 1rem);
-            z-index: 100;
+            z-index: 10000;
 
-            @apply bg-cwc-blue-02 shadow-lg left-0 w-64 flex-col rounded-b-lg ml-0;
+            @apply bg-cwc-blue-02 shadow-lg left-0 w-84 flex-col rounded-b-lg ml-0;
 
             >li {
                 @apply w-full border-b border-[#D24D32];

tests/blog-mobile-fixes.spec.js

@@ -0,0 +1,189 @@
+import { expect, test } from "@playwright/test";
+
+/**
+ * Regression coverage for the four mobile-blog layout bugs:
+ *
+ * 1. Hero text too close to the header.
+ * 2. Gap between title and intro too big (80px instead of ~24px).
+ * 3. Intro runs to the viewport edge on the left.
+ * 4. Post card runs to the viewport edge on the right.
+ *
+ * Tests run against the local Herd site where the rebuilt theme.css is
+ * served. The live deployment (solowebdesigns.net) will pick up the
+ * rebuilt CSS when the user deploys.
+ */
+
+const blogUrl = "http://community-works-collaborative.test/blog/";
+
+test.describe("blog page mobile layout", () => {
+    test.use({ viewport: { width: 402, height: 874 } });
+
+    test("hero has top padding so it isn't glued to the header", async ({
+        page,
+    }) => {
+        await page.goto(blogUrl, { waitUntil: "networkidle" });
+
+        const data = await page.evaluate(() => {
+            const header = document.querySelector(".site-header");
+            const hero = document.querySelector(".page-hero");
+            const heading = document.querySelector(".page-hero__heading");
+            const cs = hero ? getComputedStyle(hero) : null;
+            return {
+                headerBottom: header ? Math.round(header.getBoundingClientRect().bottom) : null,
+                heroTop: hero ? Math.round(hero.getBoundingClientRect().top) : null,
+                heroPaddingTop: cs ? cs.paddingTop : null,
+                headingTop: heading ? Math.round(heading.getBoundingClientRect().top) : null,
+            };
+        });
+
+        // The hero must have some top padding (>= 8px) on mobile.
+        const pt = parseFloat(data.heroPaddingTop) || 0;
+        expect(
+            pt,
+            `hero paddingTop should be >= 8px on mobile, got ${pt}`,
+        ).toBeGreaterThanOrEqual(8);
+
+        // The heading shouldn't be touching the bottom of the header.
+        const gap = data.headingTop - data.headerBottom;
+        expect(
+            gap,
+            `heading should sit at least 8px below the header, got ${gap}px`,
+        ).toBeGreaterThanOrEqual(8);
+    });
+
+    test("title-to-intro gap is ~24px (not 80px) on mobile", async ({
+        page,
+    }) => {
+        await page.goto(blogUrl, { waitUntil: "networkidle" });
+
+        const gap = await page.evaluate(() => {
+            const heading = document.querySelector(".page-hero__heading");
+            const intro = document.querySelector(".page-hero__intro");
+            if (!heading || !intro) return null;
+            const hRect = heading.getBoundingClientRect();
+            const iRect = intro.getBoundingClientRect();
+            return Math.round(iRect.top - hRect.bottom);
+        });
+
+        expect(gap, `title-to-intro gap should be ~24px, got ${gap}px`).toBeLessThanOrEqual(40);
+    });
+
+    test("hero intro is padded from the left edge", async ({ page }) => {
+        await page.goto(blogUrl, { waitUntil: "networkidle" });
+
+        const data = await page.evaluate(() => {
+            const intro = document.querySelector(".page-hero__intro");
+            const heading = document.querySelector(".page-hero__heading");
+            if (!intro || !heading) return null;
+            return {
+                introX: Math.round(intro.getBoundingClientRect().x),
+                headingX: Math.round(heading.getBoundingClientRect().x),
+                winW: window.innerWidth,
+            };
+        });
+
+        // The intro should have at least 16px of left padding from the viewport edge.
+        expect(
+            data.introX,
+            `intro x=${data.introX} should be >= 16`,
+        ).toBeGreaterThanOrEqual(16);
+        expect(
+            data.headingX,
+            `heading x=${data.headingX} should be >= 16`,
+        ).toBeGreaterThanOrEqual(16);
+    });
+
+    test("intro has bottom margin so it doesn't sit on the first card", async ({
+        page,
+    }) => {
+        await page.goto(blogUrl, { waitUntil: "networkidle" });
+
+        const data = await page.evaluate(() => {
+            const intro = document.querySelector(".page-hero__intro");
+            const firstCard = document.querySelector(".post-list__post");
+            if (!intro || !firstCard) return null;
+            const cs = intro ? getComputedStyle(intro) : null;
+            const iRect = intro.getBoundingClientRect();
+            const cRect = firstCard.getBoundingClientRect();
+            return {
+                introMarginBottom: cs ? cs.marginBottom : null,
+                introBottom: Math.round(iRect.bottom),
+                cardTop: Math.round(cRect.top),
+                gap: Math.round(cRect.top - iRect.bottom),
+            };
+        });
+
+        // The intro must have a non-zero bottom margin.
+        const mb = parseFloat(data.introMarginBottom) || 0;
+        expect(
+            mb,
+            `intro marginBottom should be >= 16px, got ${mb}`,
+        ).toBeGreaterThanOrEqual(16);
+
+        // The intro should sit at least 16px above the first card.
+        expect(
+            data.gap,
+            `intro-to-card gap should be >= 16px, got ${data.gap}px`,
+        ).toBeGreaterThanOrEqual(16);
+    });
+
+    test("post card fits within the viewport on mobile", async ({ page }) => {
+        await page.goto(blogUrl, { waitUntil: "networkidle" });
+
+        const data = await page.evaluate(() => {
+            const card = document.querySelector(".post-list__post");
+            if (!card) return null;
+            const r = card.getBoundingClientRect();
+            return {
+                x: Math.round(r.x),
+                w: Math.round(r.width),
+                right: Math.round(r.right),
+                winW: window.innerWidth,
+            };
+        });
+
+        // The card must not overflow the viewport on either side.
+        expect(
+            data.x,
+            `card x=${data.x} should be >= 0`,
+        ).toBeGreaterThanOrEqual(0);
+        expect(
+            data.right,
+            `card right=${data.right} should be <= ${data.winW}`,
+        ).toBeLessThanOrEqual(data.winW);
+    });
+
+    test("no horizontal overflow on the blog page at 402", async ({
+        page,
+    }) => {
+        await page.goto(blogUrl, { waitUntil: "networkidle" });
+
+        const data = await page.evaluate(() => ({
+            docW: document.documentElement.scrollWidth,
+            winW: window.innerWidth,
+        }));
+
+        expect(
+            data.docW,
+            `docW=${data.docW} exceeds winW=${data.winW}`,
+        ).toBeLessThanOrEqual(data.winW + 1);
+    });
+});
+
+test.describe("blog page mobile layout (xs 360)", () => {
+    test.use({ viewport: { width: 360, height: 800 } });
+
+    test("post card fits within 360px viewport", async ({ page }) => {
+        await page.goto(blogUrl, { waitUntil: "networkidle" });
+
+        const data = await page.evaluate(() => {
+            const card = document.querySelector(".post-list__post");
+            if (!card) return null;
+            const r = card.getBoundingClientRect();
+            return { x: Math.round(r.x), w: Math.round(r.width), right: Math.round(r.right), winW: window.innerWidth };
+        });
+
+        expect(data.x).toBeGreaterThanOrEqual(0);
+        expect(data.right).toBeLessThanOrEqual(data.winW);
+    });
+});

tests/blog-page.spec.js

@@ -0,0 +1,106 @@
+import { expect, test } from "@playwright/test";
+const AxeBuilder = require("@axe-core/playwright").default;
+
+const blogUrl =
+    process.env.TEST_BLOG_URL ||
+    "http://community-works-collaborative.test/blog/";
+
+test.describe("blog page", () => {
+    test("desktop: Blog title, post grid, no inner-page hero, sidebar", async ({
+        page,
+    }) => {
+        const pageErrors = [];
+        page.on("pageerror", (err) => pageErrors.push(err.message));
+
+        await page.setViewportSize({ width: 1280, height: 900 });
+        await page.goto(blogUrl);
+
+        // No inner-page hero.
+        expect(await page.locator(".page-hero").count()).toBe(0);
+
+        // Page title is "Blog".
+        const heading = page.locator(".post-list__h1").first();
+        await expect(heading).toBeVisible();
+        await expect(heading).toHaveText("Blog");
+
+        // Post grid renders at least one card.
+        const posts = page.locator(".post-list__post");
+        const postCount = await posts.count();
+        expect(postCount).toBeGreaterThanOrEqual(1);
+
+        // First card: image, title link, byline.
+        const firstCard = posts.first();
+        await expect(firstCard.locator(".post-list__img img")).toBeVisible();
+        await expect(firstCard.locator(".post-list__title")).toBeVisible();
+        await expect(firstCard.locator(".post-list__byline")).toBeVisible();
+
+        // First card has a "Read more" link.
+        const readMore = firstCard.locator(".post-list__read-more");
+        await expect(readMore).toBeVisible();
+        await expect(readMore).toHaveText(/^Read more\s*\S+$/);
+        await expect(readMore).toHaveAttribute("href", /\/[a-z0-9-]+\/?$/);
+
+        // First card does NOT have a categories row or an excerpt.
+        expect(await firstCard.locator(".post-list__cats").count()).toBe(0);
+        expect(await firstCard.locator(".post-list__excerpt").count()).toBe(0);
+
+        // Sidebar renders.
+        await expect(page.locator("#secondary, .sidebar, aside").first()).toBeAttached();
+
+        // No JS errors.
+        expect(pageErrors).toEqual([]);
+    });
+
+    test("mobile 402: single-column grid, no horizontal overflow", async ({
+        page,
+    }) => {
+        await page.setViewportSize({ width: 402, height: 874 });
+        await page.goto(blogUrl);
+
+        const heading = page.locator(".post-list__h1").first();
+        await expect(heading).toBeVisible();
+
+        const headingBox = await heading.boundingBox();
+        const block = page.locator(".post-list").first();
+        const blockBox = await block.boundingBox();
+
+        expect(headingBox).not.toBeNull();
+        expect(blockBox).not.toBeNull();
+        expect(headingBox.x + headingBox.width).toBeLessThanOrEqual(402 + 3);
+        expect(blockBox.x + blockBox.width).toBeLessThanOrEqual(402 + 3);
+    });
+
+    test("mobile 320: nothing clips horizontally", async ({ page }) => {
+        await page.setViewportSize({ width: 320, height: 800 });
+        await page.goto(blogUrl);
+
+        const block = page.locator(".post-list").first();
+        await expect(block).toBeVisible();
+
+        const blockBox = await block.boundingBox();
+        expect(blockBox.x + blockBox.width).toBeLessThanOrEqual(320 + 3);
+    });
+
+    test("axe: no violations", async ({ page }, testInfo) => {
+        await page.setViewportSize({ width: 1280, height: 900 });
+        await page.goto(blogUrl);
+
+        const results = await new AxeBuilder({ page })
+            .withTags([
+                "wcag2a",
+                "wcag2aa",
+                "wcag21a",
+                "wcag21aa",
+                "wcag22a",
+                "wcag22aa",
+            ])
+            .analyze();
+
+        await testInfo.attach("accessibility-scan-results", {
+            body: JSON.stringify(results, null, 2),
+            contentType: "application/json",
+        });
+
+        expect(results.violations).toEqual([]);
+    });
+});

tests/contact-page.spec.js

@@ -0,0 +1,105 @@
+import { expect, test } from "@playwright/test";
+const AxeBuilder = require("@axe-core/playwright").default;
+
+const contactUrl =
+    process.env.TEST_CONTACT_URL ||
+    "http://community-works-collaborative.test/contact/";
+
+test.describe("contact page", () => {
+    test("desktop: two-column layout with form area and map placeholder", async ({
+        page,
+    }) => {
+        const pageErrors = [];
+        page.on("pageerror", (err) => pageErrors.push(err.message));
+
+        await page.setViewportSize({ width: 1280, height: 900 });
+        await page.goto(contactUrl);
+
+        // No hero on the contact page.
+        expect(await page.locator(".page-hero").count()).toBe(0);
+
+        // Block renders.
+        const block = page.locator(".contact-info").first();
+        await expect(block).toBeVisible();
+
+        // Left column has heading, items, and form area.
+        const heading = page.locator(".contact-info__heading").first();
+        await expect(heading).toBeVisible();
+        await expect(heading).toHaveText(/contact/i);
+
+        const items = page.locator(".contact-info__item");
+        const itemsCount = await items.count();
+        expect(itemsCount).toBeGreaterThanOrEqual(1);
+
+        const formArea = page.locator(".contact-info__form").first();
+        await expect(formArea).toBeAttached();
+
+        // Right column has the Leaflet placeholder.
+        const map = page.locator(".contact-info__map").first();
+        await expect(map).toBeAttached();
+        await expect(map).toHaveId("contact-map");
+
+        // No JS errors.
+        expect(pageErrors).toEqual([]);
+    });
+
+    test("mobile 402: single column, map drops below form, no horizontal overflow", async ({
+        page,
+    }) => {
+        const pageErrors = [];
+        page.on("pageerror", (err) => pageErrors.push(err.message));
+
+        await page.setViewportSize({ width: 402, height: 874 });
+        await page.goto(contactUrl);
+
+        const details = page.locator(".contact-info__details").first();
+        const map = page.locator(".contact-info__map").first();
+
+        await expect(details).toBeVisible();
+        await expect(map).toBeAttached();
+
+        const detailsBox = await details.boundingBox();
+        const mapBox = await map.boundingBox();
+
+        expect(detailsBox).not.toBeNull();
+        expect(mapBox).not.toBeNull();
+        expect(mapBox.x).toBeGreaterThanOrEqual(detailsBox.x - 1);
+        expect(mapBox.x + mapBox.width).toBeLessThanOrEqual(402 + 3);
+
+        expect(pageErrors).toEqual([]);
+    });
+
+    test("mobile 320: nothing clips horizontally", async ({ page }) => {
+        await page.setViewportSize({ width: 320, height: 800 });
+        await page.goto(contactUrl);
+
+        const block = page.locator(".contact-info").first();
+        await expect(block).toBeVisible();
+
+        const blockBox = await block.boundingBox();
+        expect(blockBox.x + blockBox.width).toBeLessThanOrEqual(320 + 3);
+    });
+
+    test("axe: no violations", async ({ page }, testInfo) => {
+        await page.setViewportSize({ width: 1280, height: 900 });
+        await page.goto(contactUrl);
+
+        const results = await new AxeBuilder({ page })
+            .withTags([
+                "wcag2a",
+                "wcag2aa",
+                "wcag21a",
+                "wcag21aa",
+                "wcag22a",
+                "wcag22aa",
+            ])
+            .analyze();
+
+        await testInfo.attach("accessibility-scan-results", {
+            body: JSON.stringify(results, null, 2),
+            contentType: "application/json",
+        });
+
+        expect(results.violations).toEqual([]);
+    });
+});

tests/header-nav-overflow.spec.js

@@ -0,0 +1,121 @@
+import { expect, test } from "@playwright/test";
+
+/**
+ * Regression coverage for the 1024-1200px header-nav overflow.
+ *
+ * Bug: at viewport widths between 1000 and ~1200, the inline main-navigation
+ * was wider than the header container, pushing doc.scrollWidth past
+ * window.innerWidth and producing a horizontal scrollbar.
+ *
+ * Fix: the desktop-nav breakpoint moved from 62.5rem (1000px) to 80rem
+ * (1280px), so the hamburger now covers 1000-1279 and the inline nav
+ * appears at 1280+.
+ *
+ * These tests assert:
+ *   - no horizontal overflow at any of the previously-broken widths
+ *   - the hamburger toggle is visible below 1280
+ *   - the inline nav is visible at 1280+
+ *
+ * Tests run against the local Herd site where the rebuilt theme.css is
+ * served. The live deployment (solowebdesigns.net) will pick up the
+ * rebuilt CSS when the user deploys.
+ */
+
+const site = "http://community-works-collaborative.test/";
+
+const widths = [1000, 1023, 1024, 1100, 1200, 1279, 1280, 1366, 1440];
+
+for (const w of widths) {
+    test(`no horizontal overflow at width ${w}`, async ({ browser }) => {
+        const ctx = await browser.newContext({
+            viewport: { width: w, height: 800 },
+        });
+        const page = await ctx.newPage();
+        await page.goto(site, { waitUntil: "networkidle" });
+
+        const { docW, winW } = await page.evaluate(() => ({
+            docW: document.documentElement.scrollWidth,
+            winW: window.innerWidth,
+        }));
+
+        expect(
+            docW,
+            `viewport ${w}: docW=${docW} exceeds winW=${winW} by ${docW - winW}px`,
+        ).toBeLessThanOrEqual(winW + 1);
+
+        await ctx.close();
+    });
+}
+
+for (const w of [1000, 1023, 1024, 1100, 1200, 1279]) {
+    test(`hamburger visible below 1280 at width ${w}`, async ({ browser }) => {
+        const ctx = await browser.newContext({
+            viewport: { width: w, height: 800 },
+        });
+        const page = await ctx.newPage();
+        await page.goto(site, { waitUntil: "networkidle" });
+
+        const toggleVisible = await page.evaluate(() => {
+            const t = document.querySelector(".nav-main__toggle");
+            if (!t) return false;
+            const cs = getComputedStyle(t);
+            const r = t.getBoundingClientRect();
+            return (
+                cs.display !== "none" &&
+                cs.visibility !== "hidden" &&
+                r.width > 0 &&
+                r.height > 0
+            );
+        });
+
+        expect(
+            toggleVisible,
+            `width ${w}: hamburger should be visible`,
+        ).toBe(true);
+
+        await ctx.close();
+    });
+}
+
+for (const w of [1280, 1366, 1440, 1920]) {
+    test(`inline nav visible at 1280+ at width ${w}`, async ({ browser }) => {
+        const ctx = await browser.newContext({
+            viewport: { width: w, height: 800 },
+        });
+        const page = await ctx.newPage();
+        await page.goto(site, { waitUntil: "networkidle" });
+
+        const result = await page.evaluate(() => {
+            const toggle = document.querySelector(".nav-main__toggle");
+            const menu = document.querySelector(".nav-main .menu-vdi");
+            const nav = document.querySelector(".nav-main");
+            return {
+                toggleDisplay: toggle ? getComputedStyle(toggle).display : null,
+                menuDisplay: menu ? getComputedStyle(menu).display : null,
+                navRight: nav ? Math.round(nav.getBoundingClientRect().right) : null,
+                docW: document.documentElement.scrollWidth,
+                winW: window.innerWidth,
+            };
+        });
+
+        // Hamburger hidden
+        expect(
+            result.toggleDisplay,
+            `width ${w}: hamburger should be hidden at 1280+`,
+        ).toBe("none");
+
+        // Inline menu visible (display: flex from the @apply)
+        expect(
+            result.menuDisplay,
+            `width ${w}: inline menu should be visible at 1280+`,
+        ).toBe("flex");
+
+        // Nav stays inside the viewport
+        expect(
+            result.docW,
+            `width ${w}: docW=${result.docW} exceeds winW=${result.winW}`,
+        ).toBeLessThanOrEqual(result.winW + 1);
+
+        await ctx.close();
+    });
+}

tests/responsive-audit.spec.js

@@ -0,0 +1,301 @@
+import { expect, test } from "@playwright/test";
+
+const site = "http://community-works-collaborative.test/";
+
+// Viewports to audit (mobile / tablet / desktop / wide)
+const viewports = [
+    { name: "xs-360", width: 360, height: 800 },
+    { name: "sm-402", width: 402, height: 874 },
+    { name: "md-768", width: 768, height: 1024 },
+    { name: "lg-1024", width: 1024, height: 768 },
+    { name: "xl-1280", width: 1280, height: 800 },
+    { name: "2xl-1440", width: 1440, height: 900 },
+    { name: "3xl-1920", width: 1920, height: 1080 },
+];
+
+// Common selectors to audit for overflow / alignment
+const selectors = {
+    header: ".site-header",
+    logo: ".site-header__logo",
+    navToggle: ".nav-main__toggle",
+    main: "main, .site-main, .page-content",
+    body: "body",
+    hero: ".homepage-hero, .page-hero",
+    cards: ".card, .post-card",
+    sections: "section",
+    footer: ".site-footer, footer",
+    grid: ".grid, [class*='grid']",
+};
+
+// Check for horizontal overflow at every viewport
+for (const vp of viewports) {
+    test(`no horizontal overflow at ${vp.name} (${vp.width}x${vp.height})`, async ({
+        browser,
+    }) => {
+        const context = await browser.newContext({
+            viewport: { width: vp.width, height: vp.height },
+        });
+        const page = await context.newPage();
+        await page.goto(site, { waitUntil: "networkidle" });
+
+        const overflow = await page.evaluate(() => {
+            const docWidth = document.documentElement.scrollWidth;
+            const winWidth = window.innerWidth;
+            const offenders = [];
+
+            // Find any element wider than the viewport or that pushes the doc to overflow
+            if (docWidth > winWidth + 1) {
+                const all = document.querySelectorAll("*");
+                for (const el of all) {
+                    const rect = el.getBoundingClientRect();
+                    if (rect.right > winWidth + 1) {
+                        offenders.push({
+                            tag: el.tagName.toLowerCase(),
+                            class: el.className?.toString?.().slice(0, 80),
+                            right: Math.round(rect.right),
+                            width: Math.round(rect.width),
+                        });
+                        if (offenders.length >= 10) break;
+                    }
+                }
+            }
+
+            return { docWidth, winWidth, offenders };
+        });
+
+        expect(
+            overflow.docWidth,
+            `Doc width ${overflow.docWidth} > viewport ${overflow.winWidth}. Offenders: ${JSON.stringify(overflow.offenders)}`,
+        ).toBeLessThanOrEqual(overflow.winWidth + 1);
+
+        await context.close();
+    });
+}
+
+// Header alignment per viewport
+for (const vp of viewports) {
+    test(`header alignment at ${vp.name} (${vp.width}x${vp.height})`, async ({
+        browser,
+    }) => {
+        const context = await browser.newContext({
+            viewport: { width: vp.width, height: vp.height },
+        });
+        const page = await context.newPage();
+        await page.goto(site, { waitUntil: "networkidle" });
+
+        const header = page.locator(selectors.header).first();
+        await expect(header).toBeVisible();
+
+        const box = await header.boundingBox();
+        expect(box).not.toBeNull();
+
+        // Header must start at the left edge (allow 1px sub-pixel)
+        expect(Math.abs(box.x)).toBeLessThanOrEqual(1);
+        expect(box.width).toBeGreaterThan(vp.width * 0.8);
+
+        await context.close();
+    });
+}
+
+// Main content padding/alignment per viewport
+for (const vp of viewports) {
+    test(`main content padding at ${vp.name} (${vp.width}x${vp.height})`, async ({
+        browser,
+    }) => {
+        const context = await browser.newContext({
+            viewport: { width: vp.width, height: vp.height },
+        });
+        const page = await context.newPage();
+        await page.goto(site, { waitUntil: "networkidle" });
+
+        const main = page.locator(selectors.main).first();
+        const mainCount = await page.locator(selectors.main).count();
+
+        if (mainCount > 0) {
+            const box = await main.boundingBox();
+            expect(box).not.toBeNull();
+
+            // Check for symmetric horizontal padding (allow 1px)
+            const leftPad = box.x;
+            const rightPad = vp.width - (box.x + box.width);
+            expect(Math.abs(leftPad - rightPad)).toBeLessThanOrEqual(2);
+        }
+
+        await context.close();
+    });
+}
+
+// Section spacing audit
+for (const vp of viewports) {
+    test(`section vertical rhythm at ${vp.name} (${vp.width}x${vp.height})`, async ({
+        browser,
+    }) => {
+        const context = await browser.newContext({
+            viewport: { width: vp.width, height: vp.height },
+        });
+        const page = await context.newPage();
+        await page.goto(site, { waitUntil: "networkidle" });
+
+        // Gather all top-level sections and report top/bottom paddings
+        const sectionInfo = await page.evaluate(() => {
+            const sections = Array.from(
+                document.querySelectorAll("body > * section, main > section"),
+            );
+            return sections.slice(0, 15).map((s) => {
+                const cs = getComputedStyle(s);
+                const rect = s.getBoundingClientRect();
+                return {
+                    class: s.className?.toString?.().slice(0, 60),
+                    top: Math.round(rect.top),
+                    height: Math.round(rect.height),
+                    paddingTop: cs.paddingTop,
+                    paddingBottom: cs.paddingBottom,
+                    marginTop: cs.marginTop,
+                    marginBottom: cs.marginBottom,
+                };
+            });
+        });
+
+        // No section should have 0 vertical padding (visual breathing room)
+        for (const s of sectionInfo) {
+            const pt = parseFloat(s.paddingTop) || 0;
+            const pb = parseFloat(s.paddingBottom) || 0;
+            // At least one of top/bottom padding should be > 8px for breathing room
+            // (except narrow edge cases)
+            if (s.height > 50) {
+                expect(
+                    Math.max(pt, pb),
+                    `Section "${s.class}" has insufficient vertical padding (pt=${pt}, pb=${pb})`,
+                ).toBeGreaterThan(8);
+            }
+        }
+
+        await context.close();
+    });
+}
+
+// Card grid alignment at common breakpoints
+for (const vp of viewports) {
+    test(`card alignment at ${vp.name} (${vp.width}x${vp.height})`, async ({
+        browser,
+    }) => {
+        const context = await browser.newContext({
+            viewport: { width: vp.width, height: vp.height },
+        });
+        const page = await context.newPage();
+        await page.goto(site, { waitUntil: "networkidle" });
+
+        const cardCount = await page.locator(selectors.cards).count();
+        if (cardCount < 2) {
+            test.skip();
+            return;
+        }
+
+        const boxes = await page
+            .locator(selectors.cards)
+            .evaluateAll((els) =>
+                els
+                    .slice(0, 12)
+                    .map((e) => {
+                        const r = e.getBoundingClientRect();
+                        return {
+                            x: Math.round(r.x),
+                            y: Math.round(r.y),
+                            w: Math.round(r.width),
+                            h: Math.round(r.height),
+                        };
+                    }),
+            );
+
+        // All visible cards should be within the viewport
+        for (const b of boxes) {
+            expect(b.x).toBeGreaterThanOrEqual(0);
+            expect(b.x + b.w).toBeLessThanOrEqual(vp.width + 1);
+        }
+
+        // Group by row (similar y) and verify alignment
+        const rows = {};
+        for (const b of boxes) {
+            const rowKey = Math.round(b.y / 10); // tolerance for sub-row alignment
+            if (!rows[rowKey]) rows[rowKey] = [];
+            rows[rowKey].push(b);
+        }
+
+        for (const row of Object.values(rows)) {
+            if (row.length < 2) continue;
+            // Same-row items should share a common left or right edge
+            // (allow 2px tolerance for grid gap math)
+            const xs = row.map((b) => b.x);
+            const minX = Math.min(...xs);
+            const maxX = Math.max(...xs);
+            // All should be left-aligned to the same x OR span the row
+            // We just want to ensure they're not wildly misaligned
+            expect(
+                maxX - minX,
+                `Cards in same row misaligned: ${JSON.stringify(row)}`,
+            ).toBeLessThanOrEqual(vp.width * 0.95);
+        }
+
+        await context.close();
+    });
+}
+
+// Footer alignment
+for (const vp of viewports) {
+    test(`footer alignment at ${vp.name} (${vp.width}x${vp.height})`, async ({
+        browser,
+    }) => {
+        const context = await browser.newContext({
+            viewport: { width: vp.width, height: vp.height },
+        });
+        const page = await context.newPage();
+        await page.goto(site, { waitUntil: "networkidle" });
+
+        const footer = page.locator(selectors.footer).first();
+        const count = await page.locator(selectors.footer).count();
+        if (count === 0) {
+            test.skip();
+            return;
+        }
+
+        const box = await footer.boundingBox();
+        expect(box).not.toBeNull();
+        // Footer should not overflow horizontally
+        expect(box.x + box.width).toBeLessThanOrEqual(vp.width + 1);
+
+        await context.close();
+    });
+}
+
+// Image / media overflow
+for (const vp of viewports) {
+    test(`images fit viewport at ${vp.name} (${vp.width}x${vp.height})`, async ({
+        browser,
+    }) => {
+        const context = await browser.newContext({
+            viewport: { width: vp.width, height: vp.height },
+        });
+        const page = await context.newPage();
+        await page.goto(site, { waitUntil: "networkidle" });
+
+        const overflows = await page.evaluate(() => {
+            const imgs = Array.from(document.querySelectorAll("img"));
+            const out = [];
+            for (const img of imgs) {
+                const r = img.getBoundingClientRect();
+                if (r.right > window.innerWidth + 1 || r.width > window.innerWidth + 1) {
+                    out.push({
+                        src: img.src.slice(-60),
+                        width: Math.round(r.width),
+                        right: Math.round(r.right),
+                    });
+                }
+            }
+            return out;
+        });
+
+        expect(overflows.length, `Images overflow: ${JSON.stringify(overflows)}`).toBe(0);
+
+        await context.close();
+    });
+}

tests/services-hero-scope.spec.js

@@ -0,0 +1,53 @@
+import { expect, test } from "@playwright/test";
+
+const servicesUrl =
+    process.env.TEST_SERVICES_URL ||
+    "http://community-works-collaborative.test/services/";
+const childUrl =
+    process.env.TEST_SERVICES_CHILD_URL ||
+    "http://community-works-collaborative.test/services/engagement/";
+const grandchildUrl =
+    process.env.TEST_SERVICES_GRANDCHILD_URL ||
+    "http://community-works-collaborative.test/services/engagement/sample-grandchild/";
+const nonServicesUrl =
+    process.env.TEST_NON_SERVICES_URL ||
+    "http://community-works-collaborative.test/about/";
+const blogUrl =
+    process.env.TEST_BLOG_URL ||
+    "http://community-works-collaborative.test/blog/";
+
+test.describe("hero ancestor scope", () => {
+    test("Services page renders the hero", async ({ page }) => {
+        await page.goto(servicesUrl);
+        await expect(page.locator(".page-hero").first()).toBeVisible();
+    });
+
+    test("child of Services renders the hero", async ({ page }) => {
+        await page.goto(childUrl);
+        await expect(page.locator(".page-hero").first()).toBeVisible();
+    });
+
+    // TODO(hero-scope): No grandchild page exists on the live site — the
+    // fixture URL 404s. Marked test.fail() so CI surfaces the missing
+    // fixture as a known issue instead of a silent pass. When a real
+    // grandchild page is seeded on the live site (e.g. an
+    // `Engagement > Stakeholder Mapping` child), remove the test.fail()
+    // annotation and the test should go green.
+    test("grandchild of Services renders the hero", async ({ page }) => {
+        await page.goto(grandchildUrl);
+        test.fail();
+        await expect(page.locator(".page-hero").first()).toBeVisible();
+    });
+
+    test("non-Services page does NOT render the hero", async ({ page }) => {
+        await page.goto(nonServicesUrl);
+        expect(await page.locator(".page-hero").count()).toBe(0);
+    });
+
+    test("blog index does NOT render the hero (the hero is Services-only)", async ({
+        page,
+    }) => {
+        await page.goto(blogUrl);
+        expect(await page.locator(".page-hero").count()).toBe(0);
+    });
+});

tests/services-page.spec.js

@@ -0,0 +1,36 @@
+import { test, expect } from "@playwright/test";
+import AxeBuilder from "@axe-core/playwright";
+
+test.describe("Services List block on /services/mapping/", () => {
+    test("renders the heading and image for each card", async ({ page }) => {
+        await page.goto("/services/mapping/");
+
+        const blocks = page.locator(".services-list");
+        await expect(blocks).toHaveCount(2);
+
+        await expect(blocks.nth(0).locator(".services-list__card")).toHaveCount(2);
+        await expect(blocks.nth(1).locator(".services-list__card")).toHaveCount(4);
+
+        await expect(blocks.nth(0)).toHaveClass(/lg:grid-cols-2/);
+        await expect(blocks.nth(1)).toHaveClass(/lg:grid-cols-4/);
+
+        const firstCard = blocks.nth(0).locator(".services-list__card").first();
+        await expect(firstCard.locator(".services-list__media img")).toBeVisible();
+        await expect(firstCard.locator(".services-list__heading")).toBeVisible();
+    });
+
+    test("bisecting line is present and aria-hidden", async ({ page }) => {
+        await page.goto("/services/mapping/");
+        const line = page.locator(".services-list__line").first();
+        await expect(line).toBeAttached();
+        await expect(line).toHaveAttribute("aria-hidden", "true");
+    });
+
+    test("no axe violations on the services-list block", async ({ page }) => {
+        await page.goto("/services/mapping/");
+        const results = await new AxeBuilder({ page })
+            .include(".services-list")
+            .analyze();
+        expect(results.violations).toEqual([]);
+    });
+});

tests/team-page.spec.js

@@ -0,0 +1,41 @@
+import { test, expect } from "@playwright/test";
+import AxeBuilder from "@axe-core/playwright";
+
+test.describe("Team Grid block on /team/", () => {
+    test("renders the photo, name, and title for each member", async ({ page }) => {
+        await page.goto("/team/");
+
+        const cards = page.locator(".team-grid__card");
+        await expect(cards.first()).toBeVisible();
+
+        const firstCard = cards.first();
+        await expect(firstCard.locator(".team-grid__photo")).toBeVisible();
+        await expect(firstCard.locator(".team-grid__name")).toBeVisible();
+        await expect(firstCard.locator(".team-grid__title")).toBeVisible();
+    });
+
+    test("bio is hidden by default and expands on summary click", async ({ page }) => {
+        await page.goto("/team/");
+
+        const firstDetails = page.locator(".team-grid__details").first();
+        // Bio is closed by default.
+        await expect(firstDetails).not.toHaveAttribute("open", "");
+
+        // Click the summary; the details should open and the bio should be visible.
+        await firstDetails.locator(".team-grid__summary").click();
+        await expect(firstDetails).toHaveAttribute("open", "");
+        await expect(firstDetails.locator(".team-grid__bio")).toBeVisible();
+
+        // Click again; the details should close.
+        await firstDetails.locator(".team-grid__summary").click();
+        await expect(firstDetails).not.toHaveAttribute("open", "");
+    });
+
+    test("no axe violations on the team-grid block", async ({ page }) => {
+        await page.goto("/team/");
+        const results = await new AxeBuilder({ page })
+            .include(".team-grid")
+            .analyze();
+        expect(results.violations).toEqual([]);
+    });
+});

views/blocks/contact-info/contact-info.css

@@ -0,0 +1,281 @@
+/* Contact Info block styles */
+
+main#maincontent {
+    padding: 0;
+}
+
+.contact-info {
+    background: var(--color-white);
+    position: relative;
+}
+
+.contact-info__grid {
+    display: grid;
+    gap: 2rem;
+    grid-template-columns: 1fr;
+    position: relative;
+}
+
+.contact-info__details {
+    padding: 5rem 0;
+    max-width: 36rem;
+}
+
+.contact-info__heading {
+    @apply text-cwc-blue-02 font-bold text-34px/9;
+
+    margin: 0 0 1rem;
+
+    span { @apply text-cwc-blue-01; }
+
+    em { @apply text-secondary; }
+}
+
+.contact-info__items {
+    display: flex;
+    flex-direction: column;
+    font-weight: 300;
+    gap: 0.75rem;
+    list-style: none;
+    margin: 0 0 2.25rem;
+    padding: 0;
+}
+
+.contact-info__item {
+    align-items: flex-start;
+    color: var(--color-dark);
+    display: flex;
+    font-size: 1rem;
+    gap: 0.75rem;
+    line-height: 1.5;
+}
+
+.contact-info__icon {
+    align-items: center;
+    color: var(--color-cwc-blue-03);
+    display: inline-flex;
+    flex-shrink: 0;
+    height: 1.5rem;
+    justify-content: center;
+    width: 1.5rem;
+}
+
+.contact-info__icon img {
+    display: block;
+    height: 100%;
+    width: 100%;
+}
+
+.contact-info__value {
+    color: inherit;
+    text-decoration: none;
+}
+
+a.contact-info__value:hover {
+    color: var(--color-secondary);
+}
+
+.contact-info__map {
+    background: color-mix(in oklch, var(--color-cwc-blue-03) 30%, white);
+    height: 100%;
+    min-height: 24rem;
+    overflow: hidden;
+    position: relative;
+}
+
+.contact-info__map .leaflet-container {
+    height: 100%;
+    isolation: isolate;
+    width: 100%;
+}
+
+.contact-info__map .leaflet-tile-pane {
+    filter: grayscale(0.35) saturate(0.7) brightness(1.05) contrast(0.98);
+}
+
+.contact-info__map::after {
+    background: color-mix(in oklch, var(--color-cwc-blue-03) 30%, transparent);
+    content: '';
+    inset: 0;
+    mix-blend-mode: normal;
+    pointer-events: none;
+    position: absolute;
+    z-index: 410;
+}
+
+.contact-info__map .leaflet-control-attribution {
+    color: color-mix(in oklch, var(--color-cwc-blue-01) 45%, black);
+    font-size: 0.625rem;
+    opacity: 0.65;
+}
+
+.contact-info__leaflet-pin {
+    display: block;
+    filter: drop-shadow(0 0.2rem 0.45rem rgba(0, 0, 0, 0.08));
+}
+
+.contact-info__leaflet-pin svg {
+    display: block;
+    height: 100%;
+    width: 100%;
+}
+
+@media (min-width: 1024px) {
+    .contact-info__grid {
+        grid-template-columns: 1fr 1fr;
+    }
+
+    .contact-info__details {
+        padding-inline: clamp(1.5rem, 5vw, 3rem) 0;
+    }
+
+    .contact-info__map {
+        align-self: stretch;
+        border-radius: 0;
+        margin-right: calc(50% - 50vw);
+        margin-left: 0;
+        min-height: 32rem;
+        width: calc(50vw - 0px);
+    }
+}
+
+@media (max-width: 767px) {
+    .contact-info {
+        padding-block: 0;
+    }
+
+    .contact-info__details {
+        max-width: none;
+        padding: 2.75rem 0 2rem;
+        padding-inline: clamp(1.5rem, 5vw, 3rem);
+    }
+
+    .contact-info__heading {
+        margin-bottom: 1.375rem;
+    }
+
+    .contact-info__map {
+        margin-inline: 0;
+        min-height: 30rem;
+    }
+
+    .contact-info__form .gfield {
+        margin-bottom: 1rem;
+    }
+
+    .contact-info__form .gfield_label {
+        letter-spacing: 0.08em;
+        margin-bottom: 0.35rem;
+    }
+
+    .contact-info__form input[type="text"],
+    .contact-info__form input[type="email"],
+    .contact-info__form input[type="tel"],
+    .contact-info__form input[type="url"],
+    .contact-info__form select {
+        min-height: 2.875rem;
+        padding: 0.45rem 0.75rem;
+    }
+
+    .contact-info__form textarea {
+        min-height: 13.5rem;
+        padding: 0.7rem 0.75rem;
+    }
+
+    .contact-info__form .gform_footer {
+        margin-top: 1.25rem;
+    }
+
+    .contact-info__form .gform_footer input[type="submit"],
+    .contact-info__form .gform_footer button[type="submit"] {
+        border-radius: 1rem 0.25rem;
+        font-size: 1.125rem;
+        line-height: 1;
+        min-width: 7.75rem;
+        padding: 0.65rem 1.4rem;
+    }
+}
+
+/* Gravity Forms field overrides (scoped to .contact-info__form) */
+
+.contact-info__form .gform_wrapper {
+    margin: 0;
+    max-width: none;
+
+    .gform_required_legend { display: none; }
+}
+
+.contact-info__form .gfield { margin-bottom: 1.25rem; }
+
+.contact-info__form .gfield_label {
+    color: var(--color-cwc-blue-01);
+    display: flex;
+    font-size: 0.875rem;
+    font-weight: 700;
+    justify-content: space-between;
+    letter-spacing: 0.05em;
+    line-height: 1.2;
+    margin-bottom: 0.5rem;
+    text-transform: uppercase;
+}
+
+.contact-info__form .gfield_required {
+    color: var(--color-secondary-accessible);
+    font-weight: 700;
+    margin-left: 0.25rem;
+}
+
+.contact-info__form input[type="text"],
+.contact-info__form input[type="email"],
+.contact-info__form input[type="tel"],
+.contact-info__form input[type="url"],
+.contact-info__form textarea,
+.contact-info__form select {
+    background: color-mix(in oklch, var(--color-cwc-blue-03) 30%, white);
+    border: 2px solid var(--color-cwc-blue-03);
+    border-radius: 0.25rem;
+    color: var(--color-dark);
+    font-size: 1rem;
+    line-height: 1;
+    padding: 0.25rem 0.5rem;
+    width: 100%;
+}
+
+.contact-info__form input[type="text"]:focus,
+.contact-info__form input[type="email"]:focus,
+.contact-info__form input[type="tel"]:focus,
+.contact-info__form input[type="url"]:focus,
+.contact-info__form textarea:focus,
+.contact-info__form select:focus {
+    border-color: var(--color-cwc-blue-01);
+    outline: 2px solid var(--color-cwc-blue-01);
+    outline-offset: 2px;
+}
+
+.contact-info__form textarea {
+    min-height: 10rem;
+    padding: 0.5rem;
+    resize: vertical;
+}
+
+.contact-info__form .gform_footer {
+    margin-top: 1.5rem;
+}
+
+.contact-info__form .gform_footer input[type="submit"],
+.contact-info__form .gform_footer button[type="submit"] {
+    background: var(--background-image-button-gradient);
+    border: 3px solid transparent;
+    border-radius: 1.25rem 0.25rem;
+    color: var(--color-white);
+    cursor: pointer;
+    font-size: 1.125rem;
+    font-weight: 700;
+    padding: 0.625rem 2rem;
+    transition: background 200ms, border-color 200ms, color 200ms;
+}
+
+.contact-info__form .gform_footer input[type="submit"]:hover,
+.contact-info__form .gform_footer button[type="submit"]:hover {
+    border: 3px solid #D24D32;
+}

views/blocks/contact-info/contact-info.php

@@ -2,36 +2,101 @@
 /**
  * Block Name: Contact Info
  *
- * Display contact information from global fields with icons and optional form.
+ * Two-column contact page layout: contact info, address/email/phone,
+ * and a Gravity Forms contact form on the left; Leaflet map on the right.
+ * Contact details read from global `contact_info`; map coordinates/zoom are
+ * block-level ACF fields.
  *
  * @package CWC
  */
 
 namespace CWC;
 
-$classes = 'contact-info';
+$info    = get_field( 'contact_info', 'option' );
+$address = $info['address'] ?? '';
+$email   = $info['email'] ?? '';
+$phone   = $info['phone'] ?? '';
+
+$heading = get_field( 'heading' );
+
+$map_lat_value  = get_field( 'map_latitude' );
+$map_lng_value  = get_field( 'map_longitude' );
+$map_zoom_value = get_field( 'map_zoom' );
+
+$map_lat  = is_numeric( $map_lat_value ) ? (float) $map_lat_value : 49.8951;
+$map_lng  = is_numeric( $map_lng_value ) ? (float) $map_lng_value : -97.1384;
+$map_zoom = is_numeric( $map_zoom_value ) ? (int) $map_zoom_value : 14;
+$map_zoom = max( 1, min( 19, $map_zoom ) );
+
+$map_popup = $address ? wp_strip_all_tags( $address ) : 'Our office';
+
+$marker_svg_path = get_theme_file_path( '/views/blocks/contact-info/map-marker.svg' );
+$map_marker_svg  = '';
+
+if ( file_exists( $marker_svg_path ) ) {
+	$map_marker_svg = file_get_contents( $marker_svg_path ); // phpcs:ignore
+}
+
+$map_marker = get_theme_file_uri( '/views/blocks/contact-info/map-marker.svg' );
+
+$classes = 'contact-info mx-break-out';
 $wrapper = blockWrapperAttributes( $classes, $is_preview );
 ?>
 
-<section <?php echo esc_attr( $wrapper ); ?>>
+<section <?php echo wp_kses_post( $wrapper ); ?>>
-	<div class="flex flex-col lg:flex-row">
+	<div class="contact-info__grid">
-        <div class="w-full lg:w-1/2 p-6">
+		<div class="container contact-info__details">
-            <h2 class="text-2xl font-bold mb-4">Contact Information</h2>
+			<?php if ( $heading ) : ?>
+				<h1 class="contact-info__heading"><?php echo wp_kses_post( $heading ); ?></h1>
+			<?php endif; ?>
 
-            <div class="not-prose text-black my-4">
+            <ul class="contact-info__items">
-                <h3 class="mb-0"><?php echo esc_html__( 'Mailing Address', 'cwc' ); ?></h3>
+				<?php if ( $address ) : ?>
-                <p class="my-0.5"><?php echo wp_kses_post( get_field( 'contact_info', 'option' )['address'] ); ?></p>
+					<li class="contact-info__item contact-info__item--address">
+						<span class="contact-info__icon" aria-hidden="true">
+							<img src="<?php echo esc_url( get_theme_file_uri( '/static/img/contact/icon-address.svg' ) ); ?>" alt="" width="24" height="24" loading="lazy" />
+						</span>
+						<span class="contact-info__value"><?php echo wp_kses_post( $address ); ?></span>
+					</li>
+				<?php endif; ?>
 
-                <h3 class="mb-0"><?php echo esc_html__( 'Email', 'cwc' ); ?></h3>
+				<?php if ( $email ) : ?>
-                <p class="my-0.5"><a class="hover:opacity-80 transition-colors duration-100" href="mailto:<?php echo esc_html( get_field( 'contact_info', 'option' )['email'] ); ?>"><?php echo esc_html( get_field( 'contact_info', 'option' )['email'] ); ?></a></p>
+					<li class="contact-info__item contact-info__item--email">
+						<span class="contact-info__icon" aria-hidden="true">
+							<img src="<?php echo esc_url( get_theme_file_uri( '/static/img/contact/icon-email.svg' ) ); ?>" alt="" width="24" height="24" loading="lazy" />
+						</span>
+						<a class="contact-info__value" href="mailto:<?php echo esc_attr( $email ); ?>"><?php echo esc_html( $email ); ?></a>
+					</li>
+				<?php endif; ?>
 
-                <h3 class="mb-0"><?php echo esc_html__( 'Phone', 'cwc' ); ?></h3>
+				<?php if ( $phone ) : ?>
-                <p class="my-0.5"><a class="hover:opacity-80 transition-colors duration-100" href="tel:<?php echo esc_html( get_field( 'contact_info', 'option' )['phone'] ); ?>"><?php echo esc_html( get_field( 'contact_info', 'option' )['phone'] ); ?></a></p>
+					<li class="contact-info__item contact-info__item--phone">
-            </div>
+						<span class="contact-info__icon" aria-hidden="true">
-        </div>
+							<img src="<?php echo esc_url( get_theme_file_uri( '/static/img/contact/icon-phone.svg' ) ); ?>" alt="" width="24" height="24" loading="lazy" />
+						</span>
+						<a class="contact-info__value" href="tel:<?php echo esc_attr( $phone ); ?>"><?php echo esc_html( $phone ); ?></a>
+					</li>
+				<?php endif; ?>
+			</ul>
 
-        <div class="w-full lg:w-1/2 p-6">
+			<div class="contact-info__form">
                 <InnerBlocks />
             </div>
 		</div>
+
+		<div
+			class="contact-info__map"
+			id="contact-map"
+			aria-label="Map of downtown Winnipeg"
+			role="region"
+			data-lat="<?php echo esc_attr( $map_lat ); ?>"
+			data-lng="<?php echo esc_attr( $map_lng ); ?>"
+			data-zoom="<?php echo esc_attr( $map_zoom ); ?>"
+			data-popup="<?php echo esc_attr( $map_popup ); ?>"
+			data-marker="<?php echo esc_url( $map_marker ); ?>"
+			data-marker-svg="<?php echo esc_attr( $map_marker_svg ); ?>"
+		>
+			<!-- Leaflet map mounts in this container. -->
+		</div>
+	</div>
 </section>

views/blocks/contact-info/map-marker.svg

@@ -0,0 +1,10 @@
+<svg width="79" height="86" viewBox="0 0 79 86" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M39.5 0C49.9547 0 59.9945 4.11839 67.4072 11.4697C74.8221 18.8233 79 28.8109 79 39.2393C79 52.9415 71.4913 63.5903 64.6484 70.5264L64.6328 70.541L64.6172 70.5566C61.1816 74.0014 57.4333 77.1243 53.4209 79.8848L53.3926 79.9043L53.3633 79.9238L51.8721 80.9307L51.8369 80.9551L51.8008 80.9785L51.1006 81.4404L51.0342 81.4844L50.9668 81.5264L49.6475 82.3594L49.583 82.4004L49.5176 82.4395L48.3418 83.1514L48.2705 83.1943L48.1982 83.2363L46.7422 84.0762L46.7139 84.0918L46.6855 84.1084C44.4927 85.3497 42.0162 86 39.5 86C36.9838 86 34.5073 85.3497 32.3145 84.1084L32.2861 84.0918L32.2578 84.0762L30.8018 83.2363L30.7158 83.1865L30.6318 83.1348L28.8115 82.0244L28.7256 81.9717L28.6406 81.916L27.9678 81.4824L27.8994 81.4375L26.4639 80.4902L26.415 80.457C22.0909 77.5556 18.0623 74.2411 14.3867 70.5605L14.3506 70.5244C7.51024 63.587 4.87832e-06 52.9422 0 39.2393C0 28.8109 4.17793 18.8233 11.5928 11.4697C19.0055 4.11839 29.0453 0 39.5 0Z" fill="url(#paint0_linear_2533_1456)"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M39.5 8C47.8543 8 55.8665 11.2913 61.7739 17.1498C67.6813 23.0083 71 30.9541 71 39.2392C71 49.9092 65.134 58.6423 58.953 64.9075C55.8649 68.0039 52.4952 70.8111 48.887 73.2935L47.396 74.3001L46.696 74.7617L45.3765 75.5948L44.2005 76.3063L42.7445 77.1463C41.7562 77.7058 40.6379 78 39.5 78C38.3621 78 37.2438 77.7058 36.2555 77.1463L34.7995 76.3063L32.9795 75.1956L32.3075 74.7617L30.8725 73.8141C26.9799 71.2023 23.3542 68.2192 20.047 64.9075C13.866 58.6388 8 49.9092 8 39.2392C8 30.9541 11.3187 23.0083 17.2261 17.1498C23.1335 11.2913 31.1457 8 39.5 8ZM39.5 14.9421C33.0022 14.9421 26.7705 17.5019 22.1759 22.0585C17.5812 26.6151 15 32.7952 15 39.2392C15 47.299 19.452 54.3729 25.0485 60.0515C27.4549 62.4673 30.0558 64.6846 32.8255 66.6812L34.4285 67.8127C34.9465 68.1714 35.4447 68.5046 35.923 68.8124L37.288 69.6802L38.4885 70.4056L39.5 70.9922L41.0925 70.0585L42.377 69.2602C43.0607 68.8298 43.7922 68.3473 44.5715 67.8127L46.1745 66.6812C48.9442 64.6846 51.5451 62.4673 53.9515 60.0515C59.548 54.3764 64 47.299 64 39.2392C64 32.7952 61.4188 26.6151 56.8241 22.0585C52.2295 17.5019 45.9978 14.9421 39.5 14.9421ZM39.5 25.3551C43.213 25.3551 46.774 26.8179 49.3995 29.4217C52.025 32.0255 53.5 35.5569 53.5 39.2392C53.5 42.9215 52.025 46.453 49.3995 49.0568C46.774 51.6606 43.213 53.1234 39.5 53.1234C35.787 53.1234 32.226 51.6606 29.6005 49.0568C26.975 46.453 25.5 42.9215 25.5 39.2392C25.5 35.5569 26.975 32.0255 29.6005 29.4217C32.226 26.8179 35.787 25.3551 39.5 25.3551ZM39.5 32.2972C37.6435 32.2972 35.863 33.0286 34.5503 34.3305C33.2375 35.6324 32.5 37.3981 32.5 39.2392C32.5 41.0804 33.2375 42.8461 34.5503 44.148C35.863 45.4499 37.6435 46.1813 39.5 46.1813C41.3565 46.1813 43.137 45.4499 44.4497 44.148C45.7625 42.8461 46.5 41.0804 46.5 39.2392C46.5 37.3981 45.7625 35.6324 44.4497 34.3305C43.137 33.0286 41.3565 32.2972 39.5 32.2972Z" fill="white"/>
+<defs>
+<linearGradient id="paint0_linear_2533_1456" x1="0" y1="0" x2="82.9794" y2="4.02829" gradientUnits="userSpaceOnUse">
+<stop stop-color="#F26B53"/>
+<stop offset="1" stop-color="#D24D32"/>
+</linearGradient>
+</defs>
+</svg>

views/blocks/pull-quote/pull-quote.css

@@ -34,7 +34,6 @@
         font-weight: 500;
         line-height: 1;
         text-align: center;
-        text-wrap: balance;
 
         strong,
         b {

views/blocks/pull-quote/pull-quote.php

@@ -36,7 +36,7 @@ $wrapper = blockWrapperAttributes( $classes, $is_preview );
 	</div>
 
 	<div class="container wider pull-quote__content">
-		<div class="pull-quote__text">
+		<div class="pull-quote__text <?php if ( is_front_page() ) { echo 'text-balance'; } // phpcs:ignore ?>">
 			<?php echo wp_kses_post( $quote_text ); ?>
 		</div>
 	</div>

views/blocks/services-list/block.json

@@ -0,0 +1,19 @@
+{
+    "name": "acf/services-list",
+    "title": "Services List",
+    "description": "A row of service cards. Card count (2, 3, or 4) determines the layout.",
+    "category": "vdi-blocks",
+    "style": [
+        "file:./services-list.css"
+    ],
+    "icon": "grid-view",
+    "keywords": ["services", "cards"],
+    "acf": {
+        "mode": "preview",
+        "renderTemplate": "services-list.php"
+    },
+    "supports": {
+        "anchor": true,
+        "align": false
+    }
+}

views/blocks/services-list/services-list.css

@@ -0,0 +1,60 @@
+/* Services List block */
+
+.services-list {
+    --services-line-top: 22%;
+
+    .container { @apply px-0!; }
+
+    .services-list__line {
+        position: absolute;
+        inset-inline: 0;
+        top: var(--services-line-top);
+        height: 16px;
+        pointer-events: none;
+        z-index: 1;
+        background-image: url('../img/services-list-line.svg');
+        background-repeat: no-repeat;
+        background-position: center center;
+        background-size: 100% 100%;
+    }
+
+    .services-list__grid {
+        position: relative;
+        z-index: 2;
+    }
+
+    .services-list__card {
+        @apply flex flex-col;
+    }
+
+    .services-list__media {
+        @apply overflow-hidden rounded-md bg-gray-100;
+    }
+
+    .services-list__img {
+        @apply w-full h-full object-cover;
+    }
+
+    .services-list__heading {
+        @apply text-cwc-blue-01 text-32px font-black leading-none mt-6 mb-4;
+
+        &::after {
+            background: var(--color-secondary);
+            content: "";
+            display: block;
+            height: 4px;
+            margin-top: 0.45rem;
+            width: 3rem;
+        }
+    }
+
+    .services-list__desc {
+        @apply text-gray-600 text-16px font-light leading-snug;
+    }
+}
+
+@media (max-width: 1023px) {
+    .services-list__line {
+        display: none;
+    }
+}

views/blocks/services-list/services-list.php

@@ -0,0 +1,59 @@
+<?php
+/**
+ * Block Name: Services List
+ *
+ * A row of service cards. Card count (2, 3, or 4) determines the layout.
+ *
+ * @package CWC
+ */
+
+namespace CWC;
+
+$items = get_field( 'items' );
+
+if ( empty( $items ) ) {
+	return;
+}
+
+$count      = count( $items );
+$grid_cols  = max( 2, min( 4, (int) $count ) );
+$grid_class = 'lg:grid-cols-' . $grid_cols;
+
+$classes = 'services-list mx-break-out relative mb-8 lg:mb-12 xl:mb-16 ' . $grid_class;
+$wrapper = blockWrapperAttributes( $classes, $is_preview );
+?>
+
+<section <?php echo wp_kses_post( $wrapper ); ?>>
+	<div class="services-list__line" aria-hidden="true"></div>
+
+	<div class="container">
+		<div class="services-list__grid grid grid-cols-1 <?php echo esc_attr( $grid_class ); ?> gap-8 lg:gap-12">
+			<?php foreach ( $items as $item ) : ?>
+				<article class="services-list__card">
+					<?php if ( ! empty( $item['image'] ) ) : ?>
+						<figure class="services-list__media">
+							<img
+								class="services-list__img"
+								src="<?php echo esc_url( $item['image']['url'] ); ?>"
+								alt="<?php echo esc_attr( $item['image']['alt'] ?? '' ); ?>"
+								loading="lazy"
+							/>
+						</figure>
+					<?php endif; ?>
+
+					<?php if ( ! empty( $item['heading'] ) ) : ?>
+						<h3 class="services-list__heading">
+							<?php echo wp_kses_post( $item['heading'] ); ?>
+						</h3>
+					<?php endif; ?>
+
+					<?php if ( ! empty( $item['description'] ) ) : ?>
+						<div class="services-list__desc font-light text-18px">
+							<?php echo wp_kses_post( $item['description'] ); ?>
+						</div>
+					<?php endif; ?>
+				</article>
+			<?php endforeach; ?>
+		</div>
+	</div>
+</section>

views/blocks/team-grid/block.json

@@ -0,0 +1,19 @@
+{
+    "name": "acf/team-grid",
+    "title": "Team Grid",
+    "description": "A responsive grid of team members. Click a card to expand the bio.",
+    "category": "common",
+    "style": [
+        "file:./team-grid.css"
+    ],
+    "icon": "groups",
+    "keywords": ["team", "people", "staff", "bio"],
+    "acf": {
+        "mode": "preview",
+        "renderTemplate": "team-grid.php"
+    },
+    "supports": {
+        "anchor": true,
+        "align": false
+    }
+}

views/blocks/team-grid/team-grid.css

@@ -0,0 +1,66 @@
+/* Team Grid block */
+
+.team-grid {
+    @apply my-12;
+
+    .team-grid__card { @apply flex flex-col; }
+
+    .team-grid__details { @apply flex flex-col; }
+
+    .team-grid__summary {
+        @apply flex flex-col items-center text-center cursor-pointer list-none;
+
+        &::-webkit-details-marker {
+            display: none;
+        }
+
+        &::marker {
+            display: none;
+            content: '';
+        }
+
+        &:hover {
+            .team-grid__read-bio::after {
+                content: url("data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20transform%3D%22rotate(0%200%200)%22%3E%3Cpath%20d%3D%22M6.28033%2010.5947C5.98744%2010.3018%205.51256%2010.3018%205.21967%2010.5947C4.92678%2010.8876%204.92678%2011.3624%205.21967%2011.6553L11.4697%2017.9053C11.7626%2018.1982%2012.2374%2018.1982%2012.5303%2017.9053L18.7803%2011.6553C19.0732%2011.3624%2019.0732%2010.8876%2018.7803%2010.5947C18.4874%2010.3018%2018.0126%2010.3018%2017.7197%2010.5947L12%2016.3143L6.28033%2010.5947Z%22%20fill%3D%22%23006196%22%2F%3E%3Cpath%20opacity%3D%221%22%20d%3D%22M6.28033%206.09467C5.98744%205.80178%205.51256%205.80178%205.21967%206.09467C4.92678%206.38756%204.92678%206.86244%205.21967%207.15533L11.4697%2013.4053C11.7626%2013.6982%2012.2374%2018.1982%2012.5303%2013.4053L18.7803%207.15533C19.0732%206.86244%2019.0732%206.38756%2018.7803%206.09467C18.4874%205.80178%2018.0126%205.80178%2017.7197%206.09467L12%2011.8143L6.28033%206.09467Z%22%20fill%3D%22%23006196%22%2F%3E%3C%2Fsvg%3E");
+                width: 1.25rem;
+                height: 1.25rem;
+            }
+        }
+    }
+
+    .team-grid__photo {
+        @apply w-full h-full object-cover rounded-md mb-4;
+    }
+
+    .team-grid__name {
+        @apply text-cwc-blue-01 text-22px font-bold leading-tight mb-1;
+    }
+
+    .team-grid__title {
+        @apply text-cwc-blue-01 text-16px font-normal italic mb-3;
+    }
+
+    .team-grid__read-bio {
+        @apply flex gap-2 justify-center items-center text-cwc-blue-01 text-16px font-bold leading-snug mb-1;
+        transition: transform 300ms ease;
+
+        &::after {
+            content: url("data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20transform%3D%22rotate(0%200%200)%22%3E%3Cpath%20d%3D%22M6.28033%2010.5947C5.98744%2010.3018%205.51256%2010.3018%205.21967%2010.5947C4.92678%2010.8876%204.92678%2011.3624%205.21967%2011.6553L11.4697%2017.9053C11.7626%2018.1982%2012.2374%2018.1982%2012.5303%2017.9053L18.7803%2011.6553C19.0732%2011.3624%2019.0732%2010.8876%2018.7803%2010.5947C18.4874%2010.3018%2018.0126%2010.3018%2017.7197%2010.5947L12%2016.3143L6.28033%2010.5947Z%22%20fill%3D%22%23006196%22%2F%3E%3Cpath%20opacity%3D%220.5%22%20d%3D%22M6.28033%206.09467C5.98744%205.80178%205.51256%205.80178%205.21967%206.09467C4.92678%206.38756%204.92678%206.86244%205.21967%207.15533L11.4697%2013.4053C11.7626%2013.6982%2012.2374%2018.1982%2012.5303%2013.4053L18.7803%207.15533C19.0732%206.86244%2019.0732%206.38756%2018.7803%206.09467C18.4874%205.80178%2018.0126%205.80178%2017.7197%206.09467L12%2011.8143L6.28033%206.09467Z%22%20fill%3D%22%23006196%22%2F%3E%3C%2Fsvg%3E");
+            width: 1.25rem;
+            height: 1.25rem;
+            transition: transform 300ms ease;
+        }
+    }
+
+    .team-grid__details[open] .team-grid__read-bio::after {
+        transform: rotate(180deg);
+    }
+
+    .team-grid__bio-wrap {
+        max-height: 0;
+        overflow: hidden;
+        transition: max-height 300ms ease;
+    }
+
+    .team-grid__bio { @apply text-16px font-light leading-snug pt-2 text-center text-balance; }
+}

views/blocks/team-grid/team-grid.js

@@ -0,0 +1,144 @@
+/**
+ * Team Grid block — bio expand/collapse animation.
+ *
+ * Native <details>/<summary> handles accessibility (keyboard, screen
+ * reader), but its default toggle behavior hides the children of the
+ * details element synchronously when [open] is removed. That makes
+ * CSS transitions impossible on the close direction, because by the
+ * time the toggle event fires, the element is already hidden.
+ *
+ * This module intercepts the click on the summary, prevents the default
+ * toggle, animates max-height manually, and toggles [open] after the
+ * animation completes. The bio is always at a known state during the
+ * animation.
+ *
+ * The module is enqueued per-block by the team-grid PHP template. It
+ * auto-initializes on import: queries the DOM for any existing
+ * .team-grid__details elements and attaches a click handler to each.
+ */
+
+const DETAILS_SELECTOR = '.team-grid__details';
+const BIO_WRAP_SELECTOR = '.team-grid__bio-wrap';
+const DURATION_MS = 300;
+
+const setMaxHeight = (el, value) => {
+	el.style.maxHeight = typeof value === 'number' ? `${value}px` : value;
+};
+
+const measureBioHeight = (bioWrap) => {
+	// Temporarily allow the inner content to render at its natural size
+	// so scrollHeight reports the real height rather than the clipped height.
+	const previousMax = bioWrap.style.maxHeight;
+	const previousOverflow = bioWrap.style.overflow;
+
+	setMaxHeight(bioWrap, 'none');
+	bioWrap.style.overflow = 'visible';
+
+	const height = bioWrap.scrollHeight;
+
+	bioWrap.style.overflow = previousOverflow;
+	setMaxHeight(bioWrap, previousMax || '');
+
+	return height;
+};
+
+const animateOpen = (bioWrap, onComplete) => {
+	const target = measureBioHeight(bioWrap);
+
+	setMaxHeight(bioWrap, '0px');
+
+	// Force a reflow so the browser registers the starting value before
+	// we change it to the target — otherwise the transition is skipped.
+	// eslint-disable-next-line no-unused-expressions
+	bioWrap.offsetHeight;
+
+	requestAnimationFrame(() => {
+		setMaxHeight(bioWrap, `${target}px`);
+	});
+
+	const onEnd = (event) => {
+		if (event.propertyName !== 'max-height' || event.target !== bioWrap) {
+			return;
+		}
+		bioWrap.removeEventListener('transitionend', onEnd);
+		if (onComplete) {
+			onComplete();
+		}
+	};
+	bioWrap.addEventListener('transitionend', onEnd);
+};
+
+const animateClose = (bioWrap, onComplete) => {
+	// The bio is currently open and rendered at its natural height.
+	// Capture it before we change anything.
+	const current = bioWrap.getBoundingClientRect().height;
+
+	setMaxHeight(bioWrap, `${current}px`);
+
+	// Force a reflow so the browser registers the starting value.
+	// eslint-disable-next-line no-unused-expressions
+	bioWrap.offsetHeight;
+
+	requestAnimationFrame(() => {
+		setMaxHeight(bioWrap, '0px');
+	});
+
+	const onEnd = (event) => {
+		if (event.propertyName !== 'max-height' || event.target !== bioWrap) {
+			return;
+		}
+		bioWrap.removeEventListener('transitionend', onEnd);
+		if (onComplete) {
+			onComplete();
+		}
+	};
+	bioWrap.addEventListener('transitionend', onEnd);
+};
+
+const handleClick = (details, bioWrap, event) => {
+	// Only intercept clicks on the summary (or its descendants).
+	const summary = details.querySelector('summary');
+	if (!summary || !summary.contains(event.target)) {
+		return;
+	}
+
+	// Prevent the browser's default toggle so we can animate first.
+	event.preventDefault();
+
+	if (details.open) {
+		// Closing: animate to 0, then remove [open] so the children hide.
+		animateClose(bioWrap, () => {
+			details.open = false;
+		});
+	} else {
+		// Opening: set [open] first (so the children are visible), then
+		// measure and animate to the natural height.
+		details.open = true;
+		animateOpen(bioWrap);
+	}
+};
+
+const attach = (details) => {
+	if (details.dataset.teamGridBound === 'true') {
+		return;
+	}
+	details.dataset.teamGridBound = 'true';
+
+	const bioWrap = details.querySelector(BIO_WRAP_SELECTOR);
+	if (!bioWrap) {
+		return;
+	}
+
+	// Use click (not toggle) so we can preventDefault. Keyboard activation
+	// (Enter/Space on the summary) also dispatches a click event, so this
+	// covers both mouse and keyboard.
+	details.addEventListener('click', (event) => {
+		handleClick(details, bioWrap, event);
+	});
+};
+
+const init = () => {
+	document.querySelectorAll(DETAILS_SELECTOR).forEach(attach);
+};
+
+init();

views/blocks/team-grid/team-grid.php

@@ -0,0 +1,86 @@
+<?php
+/**
+ * Block Name: Team Grid
+ *
+ * A responsive grid of team members. Each card uses a native <details>
+ * element so the bio expands when the photo, name, or title is clicked.
+ *
+ * @package CWC
+ */
+
+namespace CWC;
+
+$single  = get_field( 'single' );
+$members = get_field( 'members' );
+
+if ( empty( $members ) ) {
+	return;
+}
+
+// Enqueue the per-block JS only when this block actually renders.
+$js_path = '/views/blocks/team-grid/team-grid.js';
+if ( file_exists( get_stylesheet_directory() . $js_path ) ) {
+	wp_enqueue_script_module(
+		'cwc-team-grid',
+		get_stylesheet_directory_uri() . $js_path,
+		array(),
+		(string) filemtime( get_stylesheet_directory() . $js_path )
+	);
+}
+
+$modeSingle = '';
+
+$blockID = wp_unique_id( 'single-' );
+
+if ( $single ) {
+    $modeSingle = 'name=' . $blockID;
+}
+
+$classes = 'team-grid container my-section mx-auto';
+$wrapper = blockWrapperAttributes( $classes, $is_preview );
+?>
+
+<section <?php echo wp_kses_post( $wrapper ); ?>>
+	<div class="team-grid__inner grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8 lg:gap-12">
+		<?php foreach ( $members as $member ) : ?>
+			<article class="team-grid__card">
+				<details class="team-grid__details" <?php echo esc_attr( $modeSingle ); ?>>
+					<summary class="team-grid__summary">
+						<?php if ( ! empty( $member['image'] ) ) : ?>
+							<img
+								class="team-grid__photo"
+								src="<?php echo esc_url( $member['image']['url'] ); ?>"
+								alt="<?php echo esc_attr( $member['image']['alt'] ?? '' ); ?>"
+								loading="lazy"
+							/>
+						<?php endif; ?>
+
+						<?php if ( ! empty( $member['name'] ) ) : ?>
+							<h2 class="team-grid__name">
+								<?php echo wp_kses_post( $member['name'] ); ?>
+							</h2>
+						<?php endif; ?>
+
+						<?php if ( ! empty( $member['title'] ) ) : ?>
+							<h3 class="team-grid__title">
+								<?php echo wp_kses_post( $member['title'] ); ?>
+							</h3>
+						<?php endif; ?>
+
+                        <h4 class="team-grid__read-bio" aria-label="Read Bio for <?php echo esc_attr( $member['name'] ); ?>">Read Bio</h4>
+					</summary>
+
+					<div class="team-grid__bio-wrap">
+						<div class="team-grid__bio-inner">
+							<?php if ( ! empty( $member['bio'] ) ) : ?>
+								<div class="team-grid__bio">
+									<?php echo wp_kses_post( $member['bio'] ); ?>
+								</div>
+							<?php endif; ?>
+						</div>
+					</div>
+				</details>
+			</article>
+		<?php endforeach; ?>
+	</div>
+</section>

views/components/nav-aux.php

@@ -22,7 +22,7 @@ $currentPageURL = home_url( $wp->request ) . '/';
 $profile = getFieldValue( 'social_media.profile_name' ) ? getFieldValue( 'social_media.profile_name' ) : ''
 ?>
 
-<div class="nav-aux__container hidden lg:block w-full py-0">
+<div class="nav-aux__container hidden lg:block w-full py-1">
 	<div class="header__nav-aux container flex items-center justify-end gap-x-4 gap-y-0 flex-wrap text-white py-0">
 		<nav class="nav-aux py-0" role="navigation" aria-label="Auxiliary navigation">
 			<?php

views/icons/instagram.php

@@ -1 +1,5 @@
-<i class="icon-instagram"></i>
+<?php $size = $args['size'] ?? '24'; ?>
+
+<svg width="<?php echo esc_attr( $size ); ?>" height="<?php echo esc_attr( $size ); ?>" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+	<path fill-rule="evenodd" clip-rule="evenodd" d="M12 0C5.37258 0 0 5.37258 0 12C0 18.6274 5.37258 24 12 24C18.6274 24 24 18.6274 24 12C24 5.37258 18.6274 0 12 0ZM8.2 6.75H15.8C16.601 6.75 17.25 7.399 17.25 8.2V15.8C17.25 16.601 16.601 17.25 15.8 17.25H8.2C7.399 17.25 6.75 16.601 6.75 15.8V8.2C6.75 7.399 7.399 6.75 8.2 6.75ZM8.95 8.25H15.05C15.4642 8.25 15.8 8.58579 15.8 9V15C15.8 15.4142 15.4642 15.75 15.05 15.75H8.95C8.53579 15.75 8.2 15.4142 8.2 15V9C8.2 8.58579 8.53579 8.25 8.95 8.25ZM12 9.25C10.4812 9.25 9.25 10.4812 9.25 12C9.25 13.5188 10.4812 14.75 12 14.75C13.5188 14.75 14.75 13.5188 14.75 12C14.75 10.4812 13.5188 9.25 12 9.25ZM12 10.75C11.3096 10.75 10.75 11.3096 10.75 12C10.75 12.6904 11.3096 13.25 12 13.25C12.6904 13.25 13.25 12.6904 13.25 12C13.25 11.3096 12.6904 10.75 12 10.75ZM16.1 8.65C16.1 9.06421 15.7642 9.4 15.35 9.4C14.9358 9.4 14.6 9.06421 14.6 8.65C14.6 8.23579 14.9358 7.9 15.35 7.9C15.7642 7.9 16.1 8.23579 16.1 8.65Z" />
+</svg>

views/icons/next.php

@@ -0,0 +1,9 @@
+<?php
+$width  = $args['width'] ?? '11';
+$height = $args['height'] ?? '19';
+?>
+
+<svg width="<?php echo esc_attr( $width ); ?>" height="<?php echo esc_attr( $height ); ?>" viewBox="0 0 11 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <title>Next</title>
+    <path d="M1.5 17.5L9.5 9.5L1.5 1.5" stroke="#F26B53" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

views/icons/prev.php

@@ -0,0 +1,9 @@
+<?php
+$width  = $args['width'] ?? '11';
+$height = $args['height'] ?? '19';
+?>
+
+<svg width="<?php echo esc_attr( $width ); ?>" height="<?php echo esc_attr( $height ); ?>" viewBox="0 0 11 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <title>Previous</title>
+    <path d="M9.5 1.5L1.5 9.5L9.5 17.5" stroke="#F26B53" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

views/icons/search.php

@@ -1,6 +1,3 @@
-<svg width="29.683" height="31.696" viewBox="0 0 29.683 31.696">
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-  <g id="Group_34" data-name="Group 34" transform="translate(-256.083 -695.182)">
+    <path d="M12.25 12.25C13.4167 11.0833 14 9.66667 14 8C14 6.33333 13.4167 4.91667 12.25 3.75C11.0833 2.58333 9.66667 2 8 2C6.33333 2 4.91667 2.58333 3.75 3.75C2.58333 4.91667 2 6.33333 2 8C2 9.66667 2.58333 11.0833 3.75 12.25C4.91667 13.4167 6.33333 14 8 14C9.66667 14 11.0833 13.4167 12.25 12.25ZM8 16C5.76667 16 3.875 15.225 2.325 13.675C0.775 12.125 0 10.2333 0 8C0 5.76667 0.775 3.875 2.325 2.325C3.875 0.775 5.76667 0 8 0C10.2333 0 12.125 0.775 13.675 2.325C15.225 3.875 16 5.76667 16 8C16 8.93333 15.8542 9.8125 15.5625 10.6375C15.2708 11.4625 14.8583 12.2167 14.325 12.9L20 18.6L18.6 20L12.9 14.325C12.2167 14.8583 11.4625 15.2708 10.6375 15.5625C9.8125 15.8542 8.93333 16 8 16Z" fill="#F26B53"/>
-    <circle id="Ellipse_5" data-name="Ellipse 5" cx="12.181" cy="12.181" r="12.181" transform="translate(257.083 696.182)" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
-    <line id="Line_8" data-name="Line 8" x2="7.542" y2="7.542" transform="translate(276.809 717.922)" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
-  </g>
 </svg>

views/partials/page-hero-services.php

@@ -0,0 +1,92 @@
+<?php
+/**
+ * Page Hero Partial
+ *
+ * @package CWC
+ */
+
+namespace CWC;
+
+// Set variables
+$bgColor    = get_field( 'background_color' );
+$isDark     = get_field( 'is_dark' );
+$heading    = get_field( 'heading' );
+$heroImage  = get_field( 'hero_image' );
+$heroVector = get_field( 'hero_vector' );
+$intro      = get_field( 'intro' );
+$ctas       = get_field( 'ctas' );
+
+// Fallback for heading
+if ( ! $heading ) {
+    $heading = getTheTitle();
+}
+
+// The wrapper color is the gradient from .page-hero in page-hero.css. The
+// editor's background_color ACF field overrides the gradient with a solid color.
+$wrapperStyle = $bgColor ? 'background-color: ' . esc_attr( $bgColor ) . ';' : '';
+?>
+
+<div class="page-hero-services text-light" <?php if ( $wrapperStyle ) { // phpcs:ignore ?>style="<?php echo esc_attr( $wrapperStyle ); ?>"<?php } ?>>
+    <div class="page-hero-services__content container mx-auto px-0!">
+        <!-- <div id="breadcrumbs">
+            <?php Breadcrumbs::render(); ?>
+        </div> -->
+
+        <h1 class="page-hero-services__heading">
+            <?php echo wp_kses_post( $heading ); ?><em>.</em>
+        </h1>
+
+        <?php if ( $intro ) : ?>
+            <div class="page-hero-services__intro">
+                <?php echo wp_kses_post( $intro ); ?>
+            </div>
+        <?php endif; ?>
+
+        <?php if ( $ctas ) : ?>
+            <div class="reset mt-4 sm:mt-6 lg:mt-10 flex flex-wrap justify-center lg:justify-start gap-4">
+                <?php foreach ( $ctas as $index => $cta ) : ?>
+                    <?php
+                    $ctaLink   = $cta['link'];
+                    $ctaURL    = $ctaLink['url'] ?? '#';
+                    $ctaTarget = $ctaLink['target'] ?? '_self';
+                    $ctaTitle  = $ctaLink['title'] ?? '';
+                    ?>
+
+                    <x-button
+                        btnclasses="button text-center min-w-32 dark"
+                        element="a"
+                        url="<?php echo esc_url( $ctaURL ); ?>"
+                        target="<?php echo esc_attr( $ctaTarget ); ?>"
+                        title="<?php echo esc_attr( $ctaTitle ); ?>"
+                        color="primary"
+                        <?php if ( $index !== 0 ) { ?>
+                            variant="outline"
+                        <?php } ?>
+                    ></x-button>
+                <?php endforeach; ?>
+            </div>
+        <?php endif; ?>
+    </div>
+
+    <?php if ( $heroImage ) : ?>
+        <img
+            class="page-hero-services__media"
+            src="<?php echo esc_url( $heroImage['url'] ); ?>"
+            alt=""
+            loading="lazy"
+            aria-hidden="true"
+            role="presentation"
+        />
+    <?php endif; ?>
+
+    <?php if ( $heroVector ) : ?>
+        <img
+            class="page-hero-services__vector"
+            src="<?php echo esc_url( $heroVector['url'] ); ?>"
+            alt=""
+            loading="lazy"
+            aria-hidden="true"
+            role="presentation"
+        />
+    <?php endif; ?>
+</div>

views/partials/page-hero.php

@@ -11,61 +11,47 @@ namespace CWC;
 $bgColor = get_field( 'background_color' );
 $isDark  = get_field( 'is_dark' );
 $heading = get_field( 'heading' );
-$heroImage  = get_field( 'hero_image' );
-$heroVector = get_field( 'hero_vector' );
 $intro   = get_field( 'intro' );
 
+if ( is_home() ) {
+    $intro = get_field( 'intro', get_option( 'page_for_posts' ) );
+}
+
 // Fallback for heading
 if ( ! $heading ) {
     $heading = getTheTitle();
 }
 
-// Additional logic for dark mode (if needed)
-if ( is_home() || is_single() || is_archive() || is_search() || is_404() ) {
-    $isDark = true;
-}
-
-// The wrapper color is the gradient from .page-hero in page-hero.css. The
-// editor's background_color ACF field overrides the gradient with a solid color.
 $wrapperStyle = $bgColor ? 'background-color: ' . esc_attr( $bgColor ) . ';' : '';
 ?>
 
-<div class="page-hero text-light <?php echo $isDark ? 'dark' : ''; ?>" style="<?php echo esc_attr( $wrapperStyle ); ?>">
+<div class="page-hero <?php echo $isDark ? 'dark' : ''; ?> pt-4 lg:px-0 lg:pt-30 lg:mb-4" style="<?php echo esc_attr( $wrapperStyle ); ?>">
-    <div class="page-hero__content container mx-auto px-0!">
+    <div class="page-hero__content container flex flex-col lg:flex-row justify-between gap-6 lg:gap-20 mx-auto lg:px-0!">
         <!-- <div id="breadcrumbs">
             <?php Breadcrumbs::render(); ?>
         </div> -->
 
-        <h1 class="page-hero__heading">
+        <?php
+        if ( ! is_single() ) :
+            if ( $heading ) :
+                ?>
+                <h1 class="page-hero__heading flex-0">
                     <?php echo wp_kses_post( $heading ); ?><em>.</em>
                 </h1>
+            <?php endif; ?>
 
             <?php if ( $intro ) : ?>
-            <div class="page-hero__intro">
+                <div class="page-hero__intro grow text-18px mb-6">
                     <?php echo wp_kses_post( $intro ); ?>
                 </div>
+                <?php
+            endif;
+        else :
+            ?>
+            <a href="<?php echo esc_url( get_permalink( get_option( 'page_for_posts' ) ) ); ?>" class="page-hero__back-link flex items-center gap-2 text-20px font-bold text-cwc-blue-03! hover:text-cwc-blue-01!">
+                <span class=""><?php get_template_part( 'views/icons/prev', null, array( 'width' => 7, 'height' => 12 ) ); // phpcs:ignore ?></span>
+                <span>Back</span>
+            </a>
         <?php endif; ?>
     </div>
-
-    <?php if ( $heroImage ) : ?>
-        <img
-            class="page-hero__media"
-            src="<?php echo esc_url( $heroImage['url'] ); ?>"
-            alt=""
-            loading="lazy"
-            aria-hidden="true"
-            role="presentation"
-        />
-    <?php endif; ?>
-
-    <?php if ( $heroVector ) : ?>
-        <img
-            class="page-hero__vector"
-            src="<?php echo esc_url( $heroVector['url'] ); ?>"
-            alt=""
-            loading="lazy"
-            aria-hidden="true"
-            role="presentation"
-        />
-    <?php endif; ?>
 </div>