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>

design/design.md

@@ -0,0 +1,109 @@
+# BCW Design System Reference
+
+Three importable files. **Import in this order** before any templates:
+
+1. `bcw-css-variables.json` — defines all custom properties
+2. `bcw-color-palette.json` — adds named swatches to the Bricks color picker
+3. `bcw-global-classes.json` — adds shared layout classes
+
+---
+
+## How to Import
+
+| File                      | Where to import                                          |
+| ------------------------- | -------------------------------------------------------- |
+| `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             |
+
+---
+
+## CSS Variables
+
+All variables follow the pattern `var(--variable-name)`.
+
+### Colors
+
+Replace the placeholder grey hex values with the client's brand colors before importing.
+
+| Variable                  | Default    | Purpose                                    |
+| ------------------------- | ---------- | ------------------------------------------ |
+| `--color-primary`         | `#374151`  | Main brand color. Used on headers, footers, and primary buttons. |
+| `--color-primary-light`   | `#9CA3AF`  | Lighter variant. Use for hover states, borders, or secondary UI. |
+| `--color-primary-dark`    | `#1F2937`  | Darker variant. Use for active states or deep accents.           |
+| `--color-secondary`       | `#6B7280`  | Supporting brand color.                    |
+| `--color-secondary-light` | `#D1D5DB`  | Light secondary. Good for dividers, subtle backgrounds.          |
+| `--color-secondary-dark`  | `#4B5563`  | Dark secondary. Use for secondary hover/active.                  |
+| `--color-tertiary`        | `#F3F4F6`  | Accent or background fill color.           |
+| `--color-tertiary-light`  | `#FFFFFF`  | Lightest tertiary. Usually pure white.     |
+| `--color-tertiary-dark`   | `#E5E7EB`  | Slightly deeper tertiary. Card backgrounds, borders.             |
+| `--color-text`            | `#374151`  | Default body copy color.                   |
+| `--color-heading`         | `#111827`  | Default heading color.                     |
+| `--color-bg`              | `#FFFFFF`  | Main page background.                      |
+| `--color-bg-alt`          | `#F9FAFB`  | Alternate section background (off-white).  |
+| `--color-white`           | `#FFFFFF`  | Forced white — useful for text on dark backgrounds. |
+
+**Usage example in Bricks:**
+Set any color field to `var(--color-primary)`. When you rebrand, update the variable once and every element using it updates automatically.
+
+---
+
+### Spacing
+
+A simple scale from extra-small to 2x-large. Use these in gap, padding, and margin fields.
+
+| Variable       | Value   | Typical use                                      |
+| -------------- | ------- | ------------------------------------------------ |
+| `--space-xs`   | `8px`   | Tight internal gaps (icon to label, etc.)        |
+| `--space-sm`   | `16px`  | Standard element gaps within a block             |
+| `--space-md`   | `24px`  | Medium spacing — between content blocks          |
+| `--space-lg`   | `40px`  | Section internal gap (header to content row)     |
+| `--space-xl`   | `64px`  | Section top/bottom padding                       |
+| `--space-2xl`  | `96px`  | Hero or large feature section padding            |
+
+**Usage example in Bricks:**
+In any gap or padding field, type `var(--space-lg)` instead of a fixed pixel value.
+
+---
+
+### Typography
+
+Heading and text size scale. Apply these in the font-size field of any text element or via Global Classes.
+
+| Variable       | Value       | Purpose              |
+| -------------- | ----------- | -------------------- |
+| `--h1`         | `3rem`      | Page-level heading   |
+| `--h2`         | `2.25rem`   | Section heading      |
+| `--h3`         | `1.75rem`   | Sub-section heading  |
+| `--h4`         | `1.25rem`   | Card or block heading|
+| `--h5`         | `1.125rem`  | Minor heading        |
+| `--h6`         | `1rem`      | Small label heading  |
+| `--text-sm`    | `0.875rem`  | Captions, footnotes  |
+| `--text-base`  | `1rem`      | Body copy (default)  |
+| `--text-lg`    | `1.125rem`  | Lead paragraph       |
+| `--text-xl`    | `1.25rem`   | Large intro text     |
+
+---
+
+## Color Palette
+
+`bcw-color-palette.json` imports a "BCW" palette into the Bricks color picker. Every swatch references a CSS variable — so updating a variable updates the swatch automatically.
+
+Swatches: `primary`, `primary-light`, `primary-dark`, `secondary`, `secondary-light`, `secondary-dark`, `tertiary`, `tertiary-light`, `tertiary-dark`, `text`, `heading`, `bg`, `bg-alt`, `white`
+
+---
+
+## Global Classes
+
+`bcw-global-classes.json` imports shared layout classes. Apply them to container elements in the Bricks panel under **CSS → Classes**.
+
+| Class                | Apply to                          | What it sets                                              |
+| -------------------- | --------------------------------- | --------------------------------------------------------- |
+| `section-container`  | Outermost section container       | `flex-direction: column`, `gap: 40px`, `margin: 15px top/bottom` |
+| `section-header`     | Heading + subtitle block          | `flex-direction: column`, `align-items: center`, `gap: 16px` |
+| `col-3`              | 3-column row container            | `flex-direction: row`, centered, `gap: 32px`, stacks on mobile |
+| `col-4`              | 4-column row container            | `flex-direction: row`, centered, `gap: 24px`, stacks on mobile |
+| `features-container` | Individual feature column (3 or 4 col) | `text-align: center`, `row-gap: 10px`               |
+| `footer-sub-section` | Footer column containers          | `row-gap: 15px`                                           |
+
+**Note:** `features-container` and `footer-sub-section` are also embedded in the `features-3col`, `features-4col`, and `footer-columns` templates — importing those templates will bring these classes along automatically.