# CentiMark — Brand Spec

> Source: centimark.com (Joomla CMS · Helix Ultimate framework · template `dryad`) — captured 2026-05-08.
> Asset completeness: real photography (38 production photos lifted from CentiMark's `/images/2023*` and `/images/2024*` Joomla media library) + extracted color & font tokens grepped from `templates/dryad/css/custom.css` and `templates/dryad/css/presets/preset9.css` + the canonical CentiMark wordmark logo. All fonts (Roboto + Montserrat) are free Google Fonts — exact stack from the live site.
> Scope: This is the canonical spec for CentiMark Corporation — second-largest commercial roofing contractor in North America, founded 1968, headquartered in Canonsburg PA, ~3,500 employees, 100+ regional offices, 650+ commercial roofing crews, 100% commercial / industrial roofing. Audience: facility managers, owners of big-box retail / warehouses / manufacturing plants / healthcare campuses / government / cold storage; national-account property managers.

## Core assets

### Logo
- **Primary wordmark** (header, primary identity): `assets/centimark-brand/logo-header.png` — 400×148 PNG with transparent background. The CentiMark wordmark + tagline lockup pulled directly from `centimark.com/images/cm-logo.png`.
- **Footer wordmark** (smaller variant for footer): `assets/centimark-brand/logo-footer.webp` — same wordmark, optimized webp.

**Logo provenance**: Pulled directly from CentiMark's `/images/cm-logo.png` (header) and `/images/2024/03/15/centimark-logo-footer-web.webp` (footer). The wordmark uses the corporate sky-blue with a deep-navy accent. There is no public SVG variant on the site — the PNG is sufficient at 400×148 native resolution for header use up to 200px display width (custom.css L254 caps logo at `max-width: 200px`).

### Photography
38 real photos lifted from CentiMark's Joomla `/images/2023*` and `/images/2024*` media library. Mix is commercial roofing production photography spanning installed roof systems (TPO, EPDM, SPF), big-box retail (Amazon warehouse), manufacturing facilities, hotels, churches with SPF, the corporate headquarters, the North America locations map, sector-vertical illustration tiles (cold storage / food processing / healthcare / hospitality / manufacturing / property management / retail), service photography (emergency repair, repairs, reroofing, snow removal, roof cleaning, new construction), and team/safety lifestyle photography.

| File | Subject | Use |
|------|---------|-----|
| `centimark-roofing-2.webp` | Hero — large flat-roof commercial install | Homepage hero background |
| `centimark-roofers-installing-a-tpo-roof-web.webp` | Hero crew installing TPO roof | Services hero / homepage detail |
| `tpo-installed-by-centimark.webp` | TPO roof system on warehouse | Services collage / TPO system tile |
| `amazon-new-construction-roofed-by-centimark.webp` | Amazon warehouse with CentiMark roof | DataCon / national-accounts story |
| `church-roof-with-spf-applied.webp` | SPF roof on a church | SPF system tile |
| `whycm.webp` | Why-CentiMark infographic stats | Stat-bar inline graphic |
| `centimark-locations.webp` | Map of 100+ North America locations | Regional Offices map hero |
| `headquarters.jpg` | Corporate HQ Canonsburg PA | About story |
| `safety2.jpg` | Safety crew on roof with hi-vis + harness | Safety record / Safety Director |
| `safety.jpg` | Safety lifestyle from team-CentiMark | Safety strip illustration |
| `customer-service.jpg` | Customer-service team scene | Customer-service tile |
| `employees.jpg` | Field crew lifestyle | About / careers |
| `experience.jpg` | Veteran crew | About — experience pillar |
| `history.jpg` | Heritage / founder photography | About — 57 years pillar |
| `industry-banner.jpg` | Industries/sectors hero banner | Sectors landing hero |
| `manufacturing-1.jpg` | Manufacturing facility roofing scene | Sectors · Manufacturing |
| `manufacturing-2.jpg` | Manufacturing facility roofing scene | Sectors · Manufacturing alt |
| `hotel.jpg` | Hospitality / hotel commercial roofing | Sectors · Hospitality |
| `emergency-repair.jpg` | Emergency leak repair crew | 24/7 Emergency promise |
| `repairs.jpg` | Roof repair crew on commercial roof | Services · Repair |
| `reroofing.jpg` | Reroofing project | Services · Reroofing |
| `pm.jpg` | Preventative-maintenance scene | Services · Maintenance |
| `snow-removal.jpg` | Roof snow-removal crew | Services · Snow Removal |
| `roof-cleaning.jpg` | Roof-cleaning crew | Services · Roof Cleaning |
| `new-c.jpg` | New-construction roofing | Services · New Construction |
| `from-the-field.jpg` | Crew lifestyle from team-CentiMark | Team / careers |
| `cold-storage.png` | Cold-storage sector tile | Sectors · Cold Storage |
| `food-processing.png` | Food-processing sector tile | Sectors · Food Processing |
| `healthcare.png` | Healthcare sector tile | Sectors · Healthcare |
| `hospitality.png` | Hospitality sector tile | Sectors · Hospitality |
| `manufacturing.png` | Manufacturing sector tile | Sectors · Manufacturing |
| `retail.png` | Retail sector tile | Sectors · Retail |
| `property-management.png` | Property-management sector tile | Sectors · Property Management |
| `background-web.webp` | Hero gradient background | Hero alt background |
| `hompage-reroof.webp` | Reroof homepage thumbnail | Homepage services collage |
| `hompage-main.webp` | Main service thumbnail | Homepage services collage |
| `hompage-service.webp` | Service thumbnail | Homepage services collage |
| `hompage-const.webp` | Construction thumbnail | Homepage services collage |
| `logo-header.png` | CentiMark wordmark header logo | Nav lockup |
| `logo-footer.webp` | CentiMark wordmark footer | Footer lockup |

**Photographic signature**: Production commercial roofing photography — installed roof systems shot from above (drone), crews-on-roofs, emergency-response action, fleet/equipment, and sector-vertical illustrative tiles. The vertical-sector tiles (cold-storage / food-processing / healthcare / hospitality / manufacturing / retail / property-management) are critical CentiMark trade-marketing assets — they appear repeatedly across the site to navigate by industry. NO smiling-people stock photography. NO generic "construction worker handshake" agency clichés. CentiMark's library is real production photography, never replace with stock.

## Color tokens (extracted from real CSS)

Lifted from `templates/dryad/css/preset9.css :root` and `templates/dryad/css/custom.css`. The dominant brand colors by frequency: **`#3a95db`** (the `--maincolor` in preset9, primary CentiMark sky blue — 26 occurrences in preset9), **`#0054A0`** (deep corporate navy, the button-hover overlay color in custom.css L155 — 2 explicit occurrences but used pervasively), **`#f5b335`** (the page-title H1 gold + the preset9 button-hover swap — 1 occurrence each but signature use), **`#312e2e`** (heading ink — 11 occurrences), **`#3d3d3d`** (body text — 2 occurrences). Note CentiMark's identity is dual-blue (sky + navy) with a single warm-gold accent — NOT a single-blue corporate palette like most B2B trades.

| Token | Hex | Source / Usage |
|-------|-----|-----|
| `--brand` | `#3a95db` | `--maincolor` from `preset9.css` — primary CentiMark sky blue, CTAs, primary identity |
| `--brand-deep` | `#0054A0` | Button-hover overlay (custom.css L155, L172) + secondary CTA fill — corporate navy |
| `--brand-soft` | `#009add` | Default link color from `template.css` |
| `--brand-light` | `#92ceff` | Tint blue for soft tile fills |
| `--brand-pale` | `#e9f4fc` | Pale blue tint derived for footer/intro panel fills |
| `--accent-gold` | `#f5b335` | **Page-title H1 color** (custom.css L515) + `.btn-primary:hover` bg (preset9.css L101) |
| `--accent-gold-deep` | `#c98a18` | Derived deeper gold for hover-on-gold |
| `--accent-gold-pale` | `#fdf3da` | Derived gold pale tint |
| `--accent-warning` | `#f6bc00` | Hi-vis safety yellow (template.css system status) — kept for safety-page palette |
| `--ink` | `#3d3d3d` | Body text — `body { color: #3d3d3d }` (custom.css L7) |
| `--ink-deep` | `#312e2e` | Headline ink — `h1-h6 { color: #312e2e }` (custom.css L62) |
| `--ink-mid` | `#4e4e4e` | Nav default — `.sp-megamenu-parent > li > a` color |
| `--ink-muted` | `#726d6d` | Dropdown text |
| `--ink-charcoal` | `#252525` | Off-canvas menu bg + footer dark surface |
| `--bg` | `#ffffff` | Page surface — pure white |
| `--bg-soft` | `#f5f5f5` | Secondary fills |

### Gradients (extracted)
- `--blue-gradient`: `linear-gradient(135deg, #3a95db 0%, #0054A0 100%)` — sky-to-navy diagonal, the CentiMark signature
- `--blue-gradient-90`: `linear-gradient(90deg, #3a95db 0%, #0054A0 100%)` — used on full-bleed CTA bands
- `--blue-gradient-180`: `linear-gradient(180deg, #3a95db 0%, #0054A0 100%)` — top-to-bottom sky→navy
- `--gold-gradient`: `linear-gradient(135deg, #f5b335 0%, #c98a18 100%)` — for accent calls

## Typography (real stack from CentiMark CSS)

CentiMark's live site loads **Montserrat** (body + UI, 100–900 weights) and **Roboto** (display + headings, 200–900 weights) directly from Google Fonts via `@import` in `custom.css` line 2:

```css
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@100;200;300;400;500;600;700;800;900&family=Roboto:wght@200;300;400;600;700;800;900&display=swap');
```

Both are free Google Fonts — no substitution needed. The pairing reads as: Roboto's geometric sans for **authority + clarity** at headline sizes, Montserrat's slightly humanist sans for **comfortable readability** at body sizes.

| Role | Original | Used here | Why |
|------|----------|-----------|-----|
| Display (H1/H2) | `Roboto 700` | **Roboto 700** | exact match |
| H1 page-title | `Roboto 700` 65px in `#f5b335` | **Roboto 700** | distinctive — interior page H1 is GOLD |
| H3-H6 | `Roboto 700` | **Roboto 700** | exact match |
| Body | `Montserrat 400` 16px / 24px | **Montserrat 400** | exact match (custom.css L4-9) |
| UI / labels / buttons | `Roboto 700` | **Roboto 700** | exact match (custom.css L132) |
| Eyebrow | `Roboto 700` uppercase 14px ls 0.10em | **Roboto 700** | exact match |

### Type ramp (live values)
- Display: clamp(48px, 7vw, 88px) Roboto 700, line-height 1.05, letter-spacing -0.01em
- H1: clamp(36px, 5vw, 64px) Roboto 700, color #312e2e, letter-spacing -0.005em
- H1 page-title: 65px Roboto 700, **color #f5b335 (gold)**, line-height 71px (live custom.css L515)
- H2: clamp(30px, 4vw, 48px) Roboto 700
- H3: clamp(24px, 2.6vw, 32px) Roboto 700, line-height 1.25 — **distinct from Montgomery's weight-200 H3**
- H4: clamp(20px, 2vw, 24px) Roboto 700
- Body: 16px Montserrat 400, line-height 24px (live default)
- Lede: clamp(17px, 1.4vw, 20px) Montserrat 400, line-height 1.65
- Eyebrow: 14px Roboto 700, uppercase, letter-spacing 0.10em (matches custom.css megamenu badge L415)
- Stat figure: clamp(48px, 5.5vw, 84px) Roboto 800, color #f5b335 (gold) on dark, letter-spacing -0.02em

### Tone keywords
commercial-roofing · 57-years-strong · single-source-warranty · 100-offices · 650-crews · facility-management · sector-aware · safety-first · big-box · industrial-grade · national-accounts · property-portfolio · 24/7-emergency · trusted-partner

### Forbidden / off-brand
- ❌ Residential roofing photography (CentiMark is 100% commercial — never show single-family homes)
- ❌ Smiling-handshake stock photography (corporate trades cliché — CentiMark uses real production photos)
- ❌ Single-blue palette (CentiMark's identity is DUAL-blue — sky + navy together)
- ❌ Aggressive sales/marketing voice (CentiMark sells to facility managers — voice is competent + reassuring, not transactional)
- ❌ Glassmorphism / Web3 styling
- ❌ Tight border-radius (4px / 8px) — CentiMark uses 20px confidently corporate radii
- ❌ Tight directional drop shadows — CentiMark uses LARGE soft radial halos (0 0 60px / 0 0 15px / 0 0 65px)

---

## Site-specific patterns

The following patterns are extracted from `templates/dryad/css/custom.css` and `presets/preset9.css` via grep-counting value frequencies. They are CentiMark's idiosyncratic moves — not generic web defaults — and they're what makes the brand legible at a glance.

### Buttons — 20px radius with right-edge slab that fills on hover (THE CentiMark button move)
`.sppb-btn` (custom.css L131-176) is a 20px-radius solid pill with **font-weight 700, padding 20px 45px, Roboto** type. The signature element is a `:before` pseudo-element pinned to the right edge: a **85px-wide slab in deep-navy (`#0054A0`) at opacity 0.10**, that on hover does FOUR things simultaneously:
1. Width expands from 85px to 100% (covers the whole button)
2. Opacity shifts from 0.10 to 1
3. `transform: scale(1)` becomes `transform: scale(1.5)`
4. Border-radius drops from 20px to 0 (the slab "squares off" as it expands)

The visual reads as a **deep-navy wave filling the button from right to left**. The transition is 500ms ease — slow and corporate (vs Montgomery's 300ms). This is THE CentiMark button move; replicating only the radius without the navy-wave fill misses the point.

### Header — sticky white panel with 20px border-radius (the "rounded chrome panel" move)
`#sp-header > .container` has `background: #fff; border-radius: 20px;` (custom.css L233-238). The header is NOT a flat white strip — it's a **rounded white panel that floats on the page**, separated from the page body. On scroll it stickies and adds an ambient `0 0 60px 0 rgba(0,0,0,0.07)` halo (NOT a tight drop). The sticky variant runs a `menu_sticky` keyframe slide-down animation (margin-top -300 → -150 → 0). 

Logo max-width is 200px. Nav items: **Roboto 18px / weight 700 / color #4e4e4e / padding 35px 22px / line-height 36px / letter-spacing 0.02em**. On scroll padding shrinks to `25px 22px`.

### Nav — circle dot accent that scales-Y in on hover (signature pulse)
The signature CentiMark nav interaction (custom.css L301-318): every primary nav item has a `:before` pseudo-element — a **20px circle of `--maincolor`** positioned at `top: -10px; left: 50%` (so it just peeks above the nav-item top edge), `transform: scaleY(0)` by default. On hover or `.active`, `transform: scaleY(1)` reveals the dot **dropping down from the top edge into the nav-item area**. The transition is 500ms ease. This pulse-dot is unique to CentiMark — it reads as a "live indicator light" lighting up.

### Sub-menu — drops white panel with 10px bottom-corner radius
Header sub-menus (custom.css L371-381): white `#fff` panel, **220px min-width, `border-bottom-left-radius: 10px / border-bottom-right-radius: 10px`** (top stays flush with the parent nav, only bottom corners rounded), shadowed with the signature `box-shadow: 0px 0px 65px 0px rgba(0, 0, 0, 0.1)` ambient halo. Sub-menu items: 14px Roboto 600 / color #726d6d / padding 8px 20px / hairline `1px solid rgba(0,0,0,0.1)` separator. On hover the item flips to `--brand` background with white text (full-bleed sweep).

### Page-title — 65px GOLD H1 on warm-dark scrim (signature interior-page top)
The signature CentiMark interior-page hero (custom.css L489-555). A `.sp-page-title` div with:
- Background image (cover, full-bleed)
- Padding: 170px 0 120px (very tall — this is a "feature" page-title, not a slim one)
- Overlay: `:before` element with `rgba(30, 30, 34, 0.30)` warm-dark scrim (NOT a generic black scrim — the warm `30,30,34` is intentional — slightly bluer than pure black)
- H1 inside: **65px Roboto 700, color `#f5b335` (gold)**, line-height 71px, centered
- Breadcrumb beneath in `#fff` 16px Roboto 600 with `letter-spacing: 0.10em`

The gold H1 against a warm-dark photo is a **CentiMark-only move** — most commercial trades use white H1 on dark. The gold reads as "trustworthy/safety" — culturally this matches construction signage.

### Cards — 20px radius with soft 15px-blur halo (NOT a directional drop)
`.article-list .article` (custom.css L851-857): 20px radius, no border, **`box-shadow: 0 0 15px 0 rgba(0,0,0,0.10)`** — a soft ambient HALO, not a tight directional drop like Montgomery's `0px 3px 6px`. CentiMark's cards float ON the page, not above it.

### Article-card category badge — overhangs top with -45px translate
A distinctive CentiMark blog/news card move (custom.css L901-914): the category-name chip is `position: absolute; top: -45px; left: 15px;` — so it **floats above the card edge** rather than sitting inside the card body. This is the "tab-overhang" pattern; in CentiMark's card library it's used for category labels on news cards, project sector tags on case-study cards, etc. Background `--brand`, color #fff, padding 8px 12px, border-radius 20px.

### 500ms transition is the default duration
Live custom.css line 25: `transition: 500ms` is applied to ALL interactive elements (a, .btn, button, span, p, i, input, select, textarea, li, img, *::after, *::before, .transition-3, h1-h6). This 500ms feels SLOW compared to modern web defaults (200-300ms) — but it's deliberate. It gives CentiMark interactions a "considered, settling" corporate feel. Replicating with shorter transitions would lose the brand's measured pacing.

### Container — 1200px max
Live `.sppb-section .sppb-row-container { max-width: 1200px }` (custom.css L1265). This is significantly narrower than YMCA Montgomery's 1520px or modern SaaS sites' 1440px. The narrower container is a corporate B2B signal — wide whitespace would feel too "modern startup" for a 57-year-old commercial roofer.

### Pagination — 50×50 circles with #f8f8f8 fill, hover to black
Custom.css L977-1004: `.page-link { width:50px; height:50px; background: #f8f8f8; border-radius: 50%; }`, `:hover` flips to `background: #000; color: #fff`. Distinctive trades pattern — circle pagination not pill pagination.

### Portfolio — 52×52 circle white arrow on hover (image scales 1.05)
Custom.css L807-818: case-study/portfolio images use 10px radius, on hover `transform: scale(1.05)` zoom + a 52×52 white circle "open" arrow appears in the top-right corner (transitions in via `transform: scale(0)` → `scale(1)`).

### Color identity is DUAL-BLUE (sky + navy), NOT single-blue
This is the central CentiMark identity move that differentiates it from every other commercial-roofer site. Most B2B roofers use ONE blue (typically a deep corporate navy). CentiMark uses TWO: sky-blue `#3a95db` is the primary identity (CTAs, links, header pulse-dot, primary recognition) and deep-navy `#0054A0` is the secondary (button-hover overlay, deep-section fills, depth/weight). The two colors form CentiMark's core gradient (sky-to-navy at 135°), which appears as the brand's gradient signature on stat bars, CTAs, sector tile hovers, and warranty seals.

### Single warm-gold accent — page-title H1 + emergency-response phone
The `#f5b335` gold (preset9.css L101 + custom.css L515) is CentiMark's only accent color. Used sparingly: page-title H1, button-flip hover swap (preset9 only — primary brand uses navy hover instead), 24/7 emergency phone card, safety record figure numerals on dark backgrounds. The gold reads as "safety/trust" — not stylistic flourish.

### Tokens
`--radius: 10px` (dropdowns + portfolio inner), `--radius-lg: 20px` (DOMINANT — buttons + cards + header panel + article cards), `--blue-gradient` (135deg sky-to-navy), `--shadow-card` (`0 0 15px 0 rgba(0,0,0,0.10)` — soft halo), `--shadow-soft` (`0 0 60px 0 rgba(0,0,0,0.07)` — sticky-header halo), `--shadow-glow` (`0px 0px 65px 0px rgba(0,0,0,0.10)` — dropdown glow), `--transition-base: 500ms`.

---

## Section Patterns

This design system implements the canonical section catalog at `../SECTION-PATTERNS.md`. The catalog defines a universal field contract per pattern; each design system renders the contract in its own visual language.

### Domain-fit reframings (commercial roofer-shaped)

For an org like CentiMark — which is mission-led (commercial-grade roofs that protect facilities), national in footprint (100+ offices), B2B (facility managers), sector-organized (retail / industrial / healthcare / education / government / cold storage), and conversion-driven (request-a-quote / facility-audit / 24-hour emergency) — the canonical patterns reframe as follows:

| Canonical | CentiMark domain-fit |
|-----------|----------------------|
| `service-times` | **`emergency-response-promise`** — 24/7/365 emergency leak response card with phone-prominent CTA |
| `ministries-grid` | **`services-grid`** — Reroofing / Repair / Maintenance / Restoration / Leak Detection / Emergency / Roof Cleaning / Snow Removal / New Construction / Customer Service / Inspections / Roof Management |
| `staff-profile` | **`safety-director-profile`** — commercial trades sales asset (hard-hat photo, OSHA credentials chip-row) |
| `service-area` | **`regional-offices`** — 100+ offices: map hero + 3-up office cards (city / region / address / phone) |
| `member-quote` | **`customer-testimonial`** — facility-manager testimonial with company name + sector tag + project size |
| `cta-band` | **`request-a-quote-band`** — gradient band with right-edge form CTA + 24/7 phone secondary |

### New CentiMark signature patterns (extending the catalog)

These are CentiMark-only patterns that don't have a canonical equivalent — they're trades-vertical specific:

| Pattern | Purpose |
|---------|---------|
| `sectors-grid` | Vertical industry tiles (Retail / Industrial / Healthcare / Education / Government / Cold Storage / Hospitality) |
| `safety-record-strip` | LTIR / EMR / OSHA stats bar — sales asset for facility managers vetting trades |
| `case-study-card` | Project showcase — sector tag + sq ft + roof type + photo |
| `certifications-row` | OSHA / ANSI / GAF / Carlisle / Sika / etc. trust-signal logo band |
| `roof-systems` | TPO / EPDM / SPF / Metal / BUR system tiles |
| `process-steps` | Inspect → Quote → Schedule → Install → Warranty 5-step strip |
| `warranty-seal` | Single Source Warranty circular seal (CentiMark-distinctive) |
| `industries-nav` | Sector quick-jump navigation strip (deep-navy bar with gold accent) |

### Where to see them rendered

- `homepage.html` — `nav` → `hero` → `intro-statement` → `services-grid` (signature) → `impact-stats` (signature) → `sectors-grid` (signature) → `regional-offices` (signature) → `case-study-card` (signature) → `customer-testimonial` (signature) → `cta-band` → `footer`
- `landing-1-services.html` — `services-grid` (full) + `roof-systems` (signature) + `process-steps` (signature) + `quote-form` (signature)
- `landing-2-sectors.html` — `industries-nav` (signature) + per-sector profiles + `case-study-card` (signature) + `certifications-row` (signature)
- `landing-3-contact.html` — `quote-form` (signature) + `regional-offices` (signature) + `emergency-response-promise` (signature)
- `design-system.html` — kitchen-sink reference for all primitives + signature patterns
- `sections.html` — sections catalog with all canonical patterns + signature blocks

### Signature patterns (CentiMark-only)

These extend the canonical catalog with patterns unique to CentiMark's commercial-roofing visual language. Only this DS implements them.

#### `services-grid`
- **Purpose:** Service portfolio (Repair, Maintenance, Reroofing, etc.) with overlay-on-hover photo tiles + arrow-up CTA
- **CSS hook:** `.sig-services-grid` / `.sig-service-card`

#### `sectors-grid`
- **Purpose:** Vertical industries (Retail, Industrial, Healthcare, Education, Government, Cold Storage, Hospitality) — 4-up icon-tile grid
- **CSS hook:** `.sig-sectors-grid` / `.sig-sector-tile`

#### `impact-stats`
- **Purpose:** Big-figure stat bar (57 yrs / 100 offices / 650 crews / 100% commercial) on blue-gradient with gold figures
- **CSS hook:** `.sig-impact-stats`

#### `regional-offices`
- **Purpose:** Map hero + 3-up office cards with brand-colored top-border accent
- **CSS hook:** `.sig-regional-offices` / `.sig-office-card`

#### `case-study-card`
- **Purpose:** Project showcase with sector-tag overhang + photo + sq ft / roof type / location meta
- **CSS hook:** `.sig-case-studies` / `.sig-case-card`

#### `safety-record-strip`
- **Purpose:** LTIR / EMR / Years OSHA-Compliant / Total man-hours stats bar — sales asset for facility managers vetting trades
- **CSS hook:** `.sig-safety-record`

#### `certifications-row`
- **Purpose:** OSHA / ANSI / GAF / Carlisle / Sika trust-signal logo band — table-stakes B2B commercial trust signal
- **CSS hook:** `.sig-certifications`

#### `emergency-response-promise`
- **Purpose:** 24/7/365 emergency response card — split layout with checklist + gold phone-prominent card. Replaces canonical `service-times`
- **CSS hook:** `.sig-emergency`

#### `safety-director-profile`
- **Purpose:** Replaces canonical `staff-profile` — commercial trades sales asset profiling Safety Director with credential chips + decorative gold offset square
- **CSS hook:** `.sig-safety-director`

#### `customer-testimonial`
- **Purpose:** Replaces canonical `member-quote` — facility-manager quote with company name + sector tag + project-size badge
- **CSS hook:** `.sig-customer-testimonial`

#### `roof-systems`
- **Purpose:** TPO / EPDM / SPF / Metal / BUR system tiles — 5-up grid with brand-blue top-border, name + full-name + brief description
- **CSS hook:** `.sig-roof-systems` / `.sig-system-card`

#### `cta-band`
- **Purpose:** Distinctive blue-gradient band with rotated gold accent panel (8°), 1.5fr/1fr split with right-aligned action stack
- **CSS hook:** `.sig-cta-band`

#### `quote-form`
- **Purpose:** Two-column conversion: pitch checklist (left) + form card (right) with brand-blue top-border accent
- **CSS hook:** `.sig-quote-form`

#### `warranty-seal`
- **Purpose:** Single Source Warranty circular seal — blue-gradient ring with dashed inner border + "20-year" + "Single Source Warranty" wordmark
- **CSS hook:** `.sig-warranty` / `.sig-warranty .seal`

#### `industries-nav`
- **Purpose:** Quick-jump sector nav strip — deep-navy bar with gold "INDUSTRIES" label + sector links
- **CSS hook:** `.sig-industries-nav`

#### `process-steps`
- **Purpose:** Inspect → Quote → Schedule → Install → Warranty 5-step strip with circle-numbers and connecting hairline
- **CSS hook:** `.sig-process` / `.sig-process .step`