Add design system, audit sections, apply global classes

Design system (design/):
- bcw-css-variables.json: color, spacing (--space-xs→2xl), typography (--h1→h6, --text-sm→xl)
- bcw-color-palette.json: named swatches referencing CSS variables
- bcw-global-classes.json: section-container, section-header, col-3, col-4, features-container, footer-sub-section
- design.md: full variable reference and usage guide

Templates:
- features-3col + features-4col: add global_classes embed + _cssGlobalClasses references
- All headers + footers: apply var(--color-primary) background to section elements
- footer-columns: add footer-sub-section class to column containers
- Remove content-image-left (duplicate of content-image-right with children reversed)
- testimonials: gap tweak 12px → 15px on card containers

Repo hygiene:
- Add .gitignore (Updated_Sections/)
- Clear Updated_Sections staging folder

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

README.md

@@ -6,30 +6,32 @@ A minimal, structural collection of Bricks Builder templates for quick-starting
 
 ## Template Index
 
-### Sections (9)
-| File | Description |
-|---|---|
-| `hero-simple.json` | Full-width hero: heading + subtitle + two buttons |
-| `hero-split.json` | 2-column hero: text left, image placeholder right |
-| `features-3col.json` | Icon + heading + text, 3 equal columns |
-| `features-4col.json` | Icon + heading + text, 4 equal columns |
-| `content-image-right.json` | Text left, image placeholder right |
-| `content-image-left.json` | Image placeholder left, text right |
-| `cta-banner.json` | Full-width call-to-action: heading + subtitle + button |
-| `testimonials.json` | 3-column quote cards with name and role |
-| `faq-accordion.json` | Heading + nestable accordion with 5 placeholder items |
+### Sections (8)
+
+| File                       | Description                                            |
+| -------------------------- | ------------------------------------------------------ |
+| `hero-simple.json`         | Full-width hero: heading + subtitle + two buttons      |
+| `hero-split.json`          | 2-column hero: text left, image placeholder right      |
+| `features-3col.json`       | Icon + heading + text, 3 equal columns                 |
+| `features-4col.json`       | Icon + heading + text, 4 equal columns                 |
+| `content-image-right.json` | Text left, image placeholder right                     |
+| `cta-banner.json`          | Full-width call-to-action: heading + subtitle + button |
+| `testimonials.json`        | 3-column quote cards with name and role                |
+| `faq-accordion.json`       | Heading + nestable accordion with 5 placeholder items  |
 
 ### Headers (3)
-| File | Description |
-|---|---|
-| `header-minimal.json` | Logo left, navigation right |
-| `header-centered.json` | Logo centered, navigation below |
+
+| File                   | Description                                    |
+| ---------------------- | ---------------------------------------------- |
+| `header-minimal.json`  | Logo left, navigation right                    |
+| `header-centered.json` | Logo centered, navigation below                |
 | `header-with-cta.json` | Logo left, navigation center, CTA button right |
 
 ### Footers (2)
-| File | Description |
-|---|---|
-| `footer-minimal.json` | Logo + navigation + copyright, single row |
+
+| File                  | Description                                      |
+| --------------------- | ------------------------------------------------ |
+| `footer-minimal.json` | Logo + navigation + copyright, single row        |
 | `footer-columns.json` | 3 columns: about/logo, quick links, contact info |
 
 ---
@@ -37,18 +39,21 @@ A minimal, structural collection of Bricks Builder templates for quick-starting
 ## How to Import
 
 ### Individual templates
+
 1. Go to **WordPress Admin → Bricks → Templates**
 2. Click **Import**
 3. Select a `.json` file from this kit
 4. The template appears in your list with the "BCW —" prefix
 
 ### Full bundle (ZIP)
+
 1. Go to **WordPress Admin → Bricks → Templates**
 2. Click **Import**
 3. Select `bundles/bcw-starter-kit.zip`
-4. All 14 templates import at once
+4. All 13 templates import at once
 
 ### Using a template
+
 1. Open any page in Bricks editor
 2. Click the **Templates** icon in the toolbar
 3. Find a "BCW —" template and click **Insert**
@@ -69,6 +74,22 @@ If you have multiple headers (e.g., one default, one for landing pages), set con
 
 ---
 
+## Design System
+
+The `design/` folder contains three importable files that give every project a consistent color system and shared layout classes. **Import these first**, before any templates.
+
+See `design/design.md` for the full variable reference and usage guide.
+
+| File                      | Import location                                          |
+| ------------------------- | -------------------------------------------------------- |
+| `bcw-css-variables.json`  | Bricks → Settings → Custom CSS → Variables → Import     |
+| `bcw-color-palette.json`  | Bricks → Settings → Color Palettes → Import             |
+| `bcw-global-classes.json` | Bricks → Settings → Global Classes → Import             |
+
+Before importing, replace the grey placeholder hex values in `bcw-css-variables.json` with the client's brand colors. Everything referencing `var(--color-primary)` updates automatically.
+
+---
+
 ## Page Recipes
 
 Since sections are the reusable building blocks, a "page" is just sections stacked in order. Common recipes:
@@ -84,7 +105,6 @@ Since sections are the reusable building blocks, a "page" is just sections stack
 → `hero-simple` (brief intro)
 → `features-4col` (services overview)
 → `content-image-right` (detail section)
-→ `content-image-left` (second detail section)
 → `cta-banner`
 
 **About page**
@@ -102,17 +122,24 @@ Since sections are the reusable building blocks, a "page" is just sections stack
 
 ## Design Philosophy
 
-All templates are **structural only** — no baked-in colors, font sizes, or spacing. Bricks theme defaults and your Global Styles apply. This keeps the templates neutral and lets your brand come through without fighting overrides.
+All templates are **structural boilerplates** — no baked-in colors, font sizes, or decorative styling. Drop them in, fill with your content, and your Global Styles and design system variables handle the rest.
 
 **What's included per template:**
+
 - Flex layout direction, alignment, and gap on containers
 - Heading tags (h1–h4) for semantic structure
 - Placeholder text on all text elements
 - Labels on outer elements for builder readability
 - Empty image elements (Bricks shows a placeholder in the editor)
+- `var(--color-primary)` background on all header and footer section elements
+- Global class references on column templates (`features-3col`, `features-4col`, `footer-columns`)
 
 ---
 
 ## Bundles
 
 After manual verification, export all templates from Bricks and save the ZIP to `bundles/bcw-starter-kit.zip` for easy one-click import on future projects.
+
+## Further Research
+
+Further research has been conducted, and is available in `./.claude/research/`