# Lightsource bp — Brand Spec

> Source: lightsourcebp.com (WordPress · Sage 10 Roots theme `lightsourcebp-theme`) — captured 2026-05-08.
> Asset completeness: real photography (27 production photos lifted from the WordPress media library at `/app/uploads/2022-2025`), real logo wordmark, extracted color and font tokens grepped directly from `dist/styles/main_4744d58b.css` and `base_4744d58b.css`. Lato is the only typeface on the live site (one Google Fonts `<link>`); no substitution required.
> Scope: This is the canonical spec for **Lightsource bp** — a global utility-scale solar developer / IPP. 50/50 joint venture with bp PLC (post-bp ownership integration in late 2024). 1,000+ employees. Multi-GW project pipeline. Operations across Americas / Europe / APAC / MEA / South America. Founded 2010 in London. Current operating-region tag-line: "global developer, constructor and operator of onshore renewables and energy storage solutions." Audience: utility off-takers, corporate PPA buyers (hyperscalers / data centers / industrials), landowners considering long-term solar leases, public-policy partners, infrastructure investors, and the general public via news / careers / press / sustainability-report channels.

## Core assets

### Logo

- **Primary wordmark** (header, primary identity): `assets/lightsource-bp-brand/logo-main.png` — the Lightsource bp wordmark with the "Lightsource" + "bp" lockup. The "bp" reads as the lowercase parent-brand mark; "Lightsource" reads as the operating-company name. Single PNG (245×57 native, white-background ready).
- **Organization-schema variant** (used in og:image and structured-data Org schema): `assets/lightsource-bp-brand/logo-organization.png` — same wordmark, the JSON-LD-referenced version of the mark.
- **Favicon mark** (square mark for app-icon and 192×192 favicon use): `assets/lightsource-bp-brand/logo-mark.png` — a square cropped variant at 180×180.

**Logo provenance**: Pulled directly from Lightsource bp's WordPress upload directory (`/app/uploads/2022/11/lightsouce-bp-main-logo.png` and `/app/uploads/2022/12/lightsouce-bp-main-logo-11.png`). The wordmark is the post-2018 bp Pulse-derived design (after bp acquired their full stake in late 2017 / 2018, the rebrand integrated the lowercase "bp" parent mark). The "bp" portion reads at smaller scale than the "Lightsource" wordmark — it is intentionally a sibling-brand reference, not a peer-equal lockup.

### Photography

27 real photos lifted from the Lightsource bp WordPress media library spanning 2022–2025 uploads. The library is dominated by drone aerials of utility-scale solar farms, agrivoltaics dual-use photography (sheep grazing under panels), corporate team photography (the "GLB" prefix indicates "global" hero/banner files), regional project case-study photography, and editorial sustainability tile photography.

| File | Subject | Use |
|------|---------|-----|
| `hero-aerial-impact-solar.jpg` | Drone aerial of Impact Solar (Deport, Texas) — the canonical brand hero shot | Homepage hero / index hero |
| `homepage-project-feature.jpg` | Live solar farm operations photography | Homepage project feature |
| `project-impact-solar.jpg` | Impact Solar (USA) project tile | Projects · USA |
| `project-penn-state.jpg` | Penn State solar project tile | Projects · USA Education |
| `project-qe2.jpg` | QEII (UK) project tile | Projects · UK |
| `project-tiln-bess.jpg` | Tiln battery energy storage system (UK BESS) tile | Projects · BESS |
| `project-ibstock.jpg` | Ibstock UK solar project tile | Projects · UK |
| `about-us-team.jpg` | Lightsource bp team / about-us photography | About / Who we are |
| `careers-cta.jpg` | Careers CTA hero photo | Careers landing |
| `careers-team-photo.jpg` | Careers team / culture photography | Careers detail |
| `careers-culture.jpg` | Culture-collaboration-belonging tile | Careers · Culture |
| `leadership-banner.jpg` | Leadership page banner | Leadership / About |
| `sustainability-banner.jpg` | Sustainability page banner | Sustainability landing |
| `sustainability-pollinators.jpg` | Pollinator-meadow photo (agrivoltaics) | Sustainability · Biodiversity |
| `sustainability-community.jpg` | Community / social-impact photography | Sustainability · Community |
| `sustainability-environment.jpg` | Environment / conservation photo | Sustainability · Environment |
| `sustainability-people.jpg` | People-focused sustainability photo | Sustainability · People |
| `sustainability-responsible-sourcing.jpg` | Responsible sourcing supply-chain photo | Sustainability · Sourcing |
| `world-map-graphic.png` | World map of operating regions | News · Insights |
| `location-selector-map.png` | Region-selector map graphic | Region picker |
| `countries-icon.png` | Countries-count icon graphic | Stats / hero overlay |
| `icon-pipeline.png` | Wind / solar / storage pipeline icon | Stat decoration |
| `icon-track-record.png` | Solar storage track record icon | Stat decoration |
| `icon-construction.png` | Operational / construction digger icon | Stat decoration |
| `logo-main.png` | Lightsource bp wordmark | Header / nav |
| `logo-organization.png` | Wordmark (org schema variant) | Schema / footer |
| `logo-mark.png` | Square mark | Favicon / mobile |

**Photographic signature**: Cinematic full-bleed drone aerials of utility-scale solar farms shot from above (the signature "Aerial_Impact_Solar" hero) + agrivoltaics dual-use land photography (sheep grazing under panels, pollinators, mowing crew) + corporate team photography (GLB-prefixed global hero/banner files in 2024-09 and 2024-10) + regional project case-study tiles (always named "Region-Projects-Site-Featured" e.g. UK-Projects-Ibstock-Featured.jpg). The sustainability quad (`GLB-Homepage-Sustainability-TL/TR/BL/BR.jpg`) is a critical Lightsource brand asset — four tiles arranged in a quad on the homepage. NO smiling-handshake stock. NO solar-installer-with-tools clichés. The brand is inherently aerial / editorial / cinematic.

## Color tokens (extracted from real CSS)

Lifted from `dist/styles/main_4744d58b.css`. The dominant brand colors by frequency in the full stylesheet grep:

| Frequency | Hex | Role |
|----:|------|------|
| 89 | `#fe5000` | Brand orange — CTAs, links, borders, gradient stop (THE primary brand color) |
| 48 | `#df1995` | Brand magenta — gradient origin, accent (secondary identity color) |
| 20 | `#2e1a47` | Deep aubergine — h2-h6 ink color, dark scrims |
| 14 | `#f2e8e1` | Warm cream — section surfaces |
| 12 | `#585858` | Body text mid-gray |
| 10 | `#96d4e9` | Sky blue — sustainability accent |
|  9 | `#f0edeb` | Cream-tint surface |
|  6 | `#840b55` | Deeper magenta — gradient stop |
|  5 | `#fff3ed` | Pale orange-cream — soft band surface |
|  5 | `#e7c0ae` | Orange-buff — `button--white:hover` swap |

**Identity reading**: This is the **bp Pulse palette** — NOT the conventional "green-energy" palette anyone would default to for a solar developer. The brand inherits its parent's post-2018 visual DNA: hot magenta-to-orange gradients (the bp Pulse "energy" mark), deep aubergine purple as the canonical headline color, warm cream surfaces, sky blue as the sustainability accent. Reading the brand correctly means **leaning into the magenta-orange gradient** as the signature, treating the deep aubergine purple as the brand's "ink," and treating warm cream / pale orange-cream as the brand's surface tints. Greens would be off-brand.

| Token | Hex | Source / Usage |
|-------|-----|-----|
| `--brand` | `#fe5000` | THE Lightsource bp orange — CTAs, borders, links, primary gradient stop |
| `--brand-deep` | `#df1995` | Magenta — gradient origin, accent |
| `--brand-soft` | `#840b55` | Deeper magenta — purple-leaning gradient stop |
| `--brand-light` | `#e7c0ae` | Orange-buff — button hover swap |
| `--brand-pale` | `#fff3ed` | Pale orange-cream — soft section bg |
| `--ink-deep` | `#2e1a47` | Deep aubergine — h2-h6 color, dark scrim, primary headline ink |
| `--ink` | `#585858` | Body text — mid gray |
| `--ink-mid` | `#60586b` | Nav default + secondary text on light |
| `--ink-muted` | `#b1aeb6` | Meta / captions |
| `--accent-sky` | `#96d4e9` | Sustainability accent — sky blue |
| `--bg` | `#ffffff` | Page surface — pure white |
| `--bg-soft` | `#f0edeb` | Warm-cream tint — soft band surface |
| `--bg-warm` | `#f2e8e1` | Warmer cream — feature panel surface |
| `--bg-aubergine` | `#2e1a47` | Dark scrim surface |
| `--border` | `#eaeaea` | Hairline borders |

### Gradients (extracted)

| Token | Value | Source |
|-------|-------|--------|
| `--grad-pulse` | `linear-gradient(90deg, #df1995 0%, #fe5000 100%)` | THE signature horizontal — 10 occurrences in main.css |
| `--grad-pulse-soft` | `linear-gradient(90deg, #df1995 0%, #fe5000 50%)` | Live: 6 occurrences with 50% stop |
| `--grad-pulse-diagonal` | `linear-gradient(86.97deg, #df1995 3.29%, #fe5000 249.87%)` | Live: button hover bg |
| `--grad-pulse-vertical` | `linear-gradient(180deg, #df1995 0%, #fe5000 100%)` | Derived for vertical accents |
| `--grad-pulse-reverse` | `linear-gradient(90deg, #fe5000 0%, #df1995 100%)` | Reverse direction |
| `--grad-aubergine-pulse` | `linear-gradient(46.23deg, #2e1a47 63.69%, #840b55 86.93%, #fe5000 125.21%)` | Live: hero scrim 2 occurrences |
| `--grad-aubergine-deep` | `linear-gradient(38.32deg, #2e1a47 -.63%, #840b55 62.42%, #fe5000 135.15%)` | Live: deeper variant |

## Typography (real stack from Lightsource bp CSS)

Lightsource bp's live site loads **Lato** (300/400/700/900) directly from Google Fonts:

```html
<link rel='stylesheet' id='lato-google-fonts-css'
  href='https://fonts.googleapis.com/css2?family=Lato%3Awght%40400%3B700%3B900&display=swap' />
```

There is NO secondary font on the live site — Lato handles display, body, eyebrow, button, everything. The single-typeface choice is intentional: Lato is the closest free Google Fonts approximation to the bp parent-brand "Univers" derivative. Using a single typeface across the entire system creates a unified editorial voice that reads as engineered/utility-scale rather than consumer-app-flashy.

| Role | Original | Used here | Why |
|------|----------|-----------|-----|
| Display (H1) | Lato 500 (live) | **Lato 500** | exact match |
| Display-XL (counter figures) | Lato 900 | **Lato 900** | exact match |
| H2 | Lato 600 (#2e1a47) | **Lato 600** | exact match |
| H3-H5 | Lato 400-500 (#2e1a47) | **Lato 400-500** | exact match |
| H6 / nav-eyebrow | Lato 700 uppercase tracked | **Lato 700** | exact match |
| Body | Lato 400 16px | **Lato 400** | exact match |
| Eyebrow | Lato 700 uppercase letter-spacing 1.8-2.5px | **Lato 700** | exact match |

### Type ramp (live values)

- Display: clamp(48px, 7vw, 96px) Lato 900, line-height 1.05, letter-spacing -0.025em
- Display-XL (GW counter): clamp(72px, 10vw, 144px) Lato 900, line-height 0.95, letter-spacing -0.04em
- H1: 42px mobile / 60px desktop Lato 500, color #ffffff (hero) or #2e1a47 (light), letter-spacing -0.02em, line-height 1.3 (live main.css `h1`)
- H2: 33px mobile / 39px desktop Lato 600, color #2e1a47, letter-spacing -0.01em, line-height 1.2 (live `h2`)
- H3: 28/31px Lato 500, color #2e1a47, letter-spacing -0.01em, line-height 1.2 (live `h3`)
- H4: 23px Lato 400, color #2e1a47, letter-spacing -0.01em, line-height 1.3 (live `h4`)
- H5: 19px Lato 400, color #2e1a47, letter-spacing -0.01em, line-height 1.4 (live `h5`)
- H6: 18px Lato 600, color #2e1a47, letter-spacing 0, line-height 1.3 (live `h6`)
- Body: 16px Lato 400, line-height 1.6
- Lede: clamp(17px, 1.4vw, 22px) Lato 400, line-height 1.55
- Eyebrow: 12px Lato 700, uppercase, letter-spacing 0.18em (matches live tracked treatments)
- Stat figure: clamp(42px, 5vw, 72px) Lato 900, color `--brand` or `var(--grad-pulse)` clip, letter-spacing -0.03em
- Counter figure (sig-gw-counter): clamp(80px, 12vw, 168px) Lato 900, gradient-clipped, letter-spacing -0.05em

### Tone keywords

global · utility-scale · IPP · onshore-renewables · energy-storage · agrivoltaics · multi-gigawatt · pipeline · 19-countries · responsible-solar · biodiversity · pollinators · sheep-grazing · construction · O&M · asset-management · off-take · corporate-PPA · cobranded-with-bp · 50-50-JV

### Forbidden / off-brand

- Green-energy palette (sage / emerald / forest) — Lightsource bp is bp Pulse magenta-orange, NOT green
- Generic solar-installer-with-tools / smiling-handshake stock (the brand is editorial/aerial/cinematic)
- Single-family residential rooftop solar imagery (Lightsource bp is 100% utility-scale onshore + energy storage)
- Pure-black scrims (the brand uses deep aubergine #2e1a47 as its dark; never blacks)
- Tight 16-20px corporate radii (the brand is intentionally rectangular — 4-5px max)
- Quick (200-300ms) "snappy" transitions — Lightsource's pace is 0.8s cinematic
- Pure typography — Lightsource is single-typeface (Lato); pairing display+body different fonts breaks the engineered voice

---

## Site-specific patterns

The following patterns are extracted from `main_4744d58b.css` via grep-counting value frequencies. They are Lightsource bp's idiosyncratic moves — not generic web defaults — and they're what makes the brand legible at a glance.

### The bp Pulse gradient is THE signature visual identity (`linear-gradient(90deg, #df1995, #fe5000)`)

Frequency in main.css: 10 occurrences of the 90deg variant + 6 of the 50%-stop variant + multiple diagonal variants. This gradient appears on:
- Button hover backgrounds (`button--gradient:hover` uses 86.97deg variant with 3.29%/249.87% extreme stops)
- Top-of-section accent hairlines (4-6px gradient bars marking the start of a feature section)
- Eyebrow underlines
- Stat-figure gradient text-clip
- Top-of-card accent strips
- Decorative corner-dots on service cards
- Card border-image accents
- Divider treatments

**Reading the brand right means treating this gradient as the "logo flourish"** — a visual signature that identifies a section as "Lightsource bp" without needing the wordmark. Replicating only the colors without the gradient misses the point.

### Buttons are RECTANGULAR (no border-radius) with a hot-magenta-orange gradient swap on hover

`.button--white` (live main.css): white background, `border: 1px solid #fe5000`, `color: #fe5000`. On hover, `background-image: linear-gradient(86.97deg, #df1995 3.29%, #fe5000 249.87%)` swaps in, color goes white, text underlines. The `border-radius: 0` is intentional — the brand is engineered, not friendly. Compare to centimark's 20px radius (corporate trust) or YMCA's 12px (community warmth) — Lightsource bp's zero-radius is "this button means business."

The transition is 0.8s ease (slow, cinematic). The 86.97deg angle with 3.29% / 249.87% out-of-bounds stops creates a near-horizontal sweep that reads as the gradient is "passing through" the button rather than tiled inside it.

### Hero scrim uses aubergine→magenta→orange (NEVER black)

The signature hero overlay (`linear-gradient(46.23deg, #2e1a47 63.69%, #840b55 86.93%, #fe5000 125.21%)`) is a tri-stop scrim that reads as deep purple at the top transitioning through magenta to a hot orange at the bottom-right. Pure-black scrims would feel generic; the brand's purple-magenta-orange scrim is unmistakably bp Pulse. The 46.23deg angle creates the bottom-right hot-corner effect.

### H2-H6 ALL inherit the deep aubergine `#2e1a47` color

This is unusual — most brands have heading-ink-charcoal (#1a1a1a or #0f172a or similar). Lightsource bp explicitly colors h2-h6 with the deep aubergine purple. There is no neutral charcoal heading anywhere on the brand. The aubergine reads as "infrastructure-grade engineered confidence" — closer to a corporate-finance brand than a green-energy brand.

### Container is wider than typical B2B (1320px), letting cinematic photography breathe

The brand's drone aerials need width. A 1200px container would crop the imagery; the wider 1320-1480px containers let full-bleed photo bands feel cinematic.

### Border-radius is INTENTIONALLY MINIMAL — 4-5px max, NEVER 16-20px

Cards use 5px (5 occurrences in main.css). Carousel arrows / utility chrome use 4px (3 occurrences). Avatars use 50% / 999px ONLY. There is NO 16-20px corporate radius in the brand. Rounded shapes would feel "consumer SaaS" — Lightsource bp's brand is editorial/architectural/engineered. The minimal radii read as engineering precision (megawatt-scale infrastructure) rather than friendly app.

### Box-shadows are DIRECTIONAL drops (8px-6px), not radial halos

Live `box-shadow: 8px 6px 10px rgba(0,0,0,0.1)` (2 occurrences) is the signature card shadow — bottom-right directional offset, classic editorial drop. Compare to centimark's `0 0 15px / 0 0 60px` radial halos. Lightsource's directional shadow reads as "photo on a magazine page" — editorial, not floating-app.

### Transition default is 0.8s ease — cinematic, not snappy

Live `transition: all .8s ease` is THE most-used transition (24 occurrences). The 0.8s pace is SLOW compared to modern web defaults (200-300ms) — but it's deliberate. Lightsource's brand is at the pace of utility infrastructure: photovoltaic arrays don't snap into place. The 0.8s ease feels considered, settling, infrastructure-paced. Replicating with shorter transitions would lose the brand's measured pacing.

### Letter-spacing for tracked uppercase eyebrows is wide (1.8-2.5px / 0.16-0.18em)

Live `letter-spacing: 2.5px` (and 1.8px) on uppercase eyebrows / labels. This is wider than typical (0.10em) — the wider tracking reads as "press release" / "annual report" / "investor relations" — appropriate for an IPP that talks to financial markets and policy-makers.

### Sustainability accent is sky blue `#96d4e9`, NOT green

The sustainability accent on the live site is `#96d4e9` — a sky blue. This pairs the brand's primary magenta-orange gradient with sky blue for sustainability/ESG content. Green is conspicuously absent. The signature "Sustainability quad" homepage block (`GLB-Homepage-Sustainability-TL/TR/BL/BR.jpg`) uses photography in pollinator-meadow / community / environment / people themes but the chrome around them is sky blue + aubergine, not green.

### The "GLB" file-naming convention is a Lightsource bp content-system signature

Files prefixed `GLB-` ("Global") indicate hero/banner-level imagery for the global English site, while regional variants are `US-`, `UK-`, etc. This naming convention shows up in the WordPress media library and identifies which photographs are intended for site-wide editorial use vs. regional case studies.

### Logo cobranding: "Lightsource" + "bp" lockup, NOT "Lightsource × bp"

The official wordmark is "Lightsource bp" with the lowercase "bp" sitting at smaller scale than "Lightsource." It is NOT "Lightsource × bp" or "Lightsource & bp" or "Lightsource by bp." The lockup reads as a sibling-brand reference: Lightsource is the operating company, bp is the parent. The pulse-dot magenta-orange gradient often appears alongside as the parent-brand glyph reference.

### Tokens

`--radius: 5px` (DOMINANT card radius), `--shadow-card: 8px 6px 10px rgba(0,0,0,0.10)` (signature directional drop), `--grad-pulse` (90deg magenta-to-orange — THE signature gradient), `--ink-deep: #2e1a47` (aubergine — the brand's headline color), `--bg-warm: #f2e8e1` (warm cream — the brand's section surface), `--transition: all 0.8s ease` (cinematic pace), letter-spacing 0.18em on tracked uppercase eyebrows.

---

## 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 (utility-solar-developer-shaped)

For an org like Lightsource bp — global utility-scale solar developer / IPP, multi-gigawatt pipeline, operating across Americas/Europe/APAC/MEA, B2B (off-takers + landowners + investors), with a 50/50 JV with bp parent — the canonical patterns reframe as follows:

| Canonical | Lightsource bp domain-fit |
|-----------|---------------------------|
| `service-times` | **`pipeline-stats`** — GW deployed / projects / countries / employees stat strip on warm-cream surface |
| `ministries-grid` | **`services-grid`** — Project Development / Construction / Operations & Maintenance / Asset Management / Off-take |
| `staff-profile` | **`exec-profile`** — Executive / regional-leader portrait with credentials chip-row (CFO, Head of Americas, etc.) |
| `service-area` | **`regions`** — Americas / Europe / APAC / MEA tiles with country-count + active-projects-count per region + map graphic |
| `member-quote` | **`partner-testimonial`** — Off-taker / corporate-PPA buyer / landowner testimonial with company logo + project size + off-take volume |
| `ways-to-give` | **`partner-with-us`** — 4-up tiles: Land Owner / Off-take Customer / Investor / Community Partner |
| `cta-band` | **`cta-band`** — Full-bleed magenta-orange gradient band with 1.2fr/1fr split |

### New Lightsource bp signature patterns (extending the catalog)

These are Lightsource-bp-only patterns that don't have a canonical equivalent — they're utility-solar-developer / IPP-vertical specific:

| Pattern | Purpose |
|---------|---------|
| `agrivoltaics-band` | The dual-use-land editorial story (sheep grazing, pollinators, biodiversity) — distinctive to Lightsource bp |
| `gw-deployed-counter` | Big numerical hero feature (e.g., "8.4 GW" with magenta-orange gradient text-clip) |
| `case-study-card` | Project showcase — country flag tag + photo + MW capacity + commissioning date + off-take partner |
| `cobrand-lockup` | Lightsource × bp parent-brand integration mark |
| `impact-quad` | 4-up sustainability tile collage with editorial caption overlay (homepage signature) |
| `kpi-row` | Narrow stat strip with magenta-orange gradient figures |
| `process-steps` | Develop → Construct → Operate → Repower 4-step strip with circle-numbers and connecting hairline |
| `news-grid` | Editorial articles row with bottom magenta-orange gradient accent strip |
| `pulse-bar` | Decorative magenta-orange gradient bar — the "above-the-headline" separator |

### Where to see them rendered

- `homepage.html` — `nav` → `hero` → `pipeline-stats` (signature) → `services-grid` (signature) → `case-study-card` (signature) → `regions` (signature) → `agrivoltaics-band` (signature) → `impact-quad` (signature) → `partner-testimonial` (signature) → `news-grid` (signature) → `cta-band` → `footer`
- `landing-1-projects.html` — `gw-deployed-counter` (signature) + `case-study-card` grid + `regions` + `process-steps` (signature)
- `landing-2-impact.html` — `agrivoltaics-band` (signature) + `impact-quad` (signature) + `kpi-row` (signature) + sustainability narrative
- `landing-3-partners.html` — `partner-with-us` (signature) + `cobrand-lockup` (signature) + form-card (signature)
- `design-system.html` — kitchen-sink reference for all primitives + signature patterns
- `sections.html` — sections catalog with all canonical patterns + signature blocks

### Signature patterns (Lightsource-bp-only)

These extend the canonical catalog with patterns unique to Lightsource bp's utility-scale solar visual language. Only this DS implements them.

#### `pipeline-stats`
- **Purpose:** Big-figure stat bar (GW deployed / Projects / Countries / Employees) on warm-cream surface, with the magenta-orange gradient hairline above
- **CSS hook:** `.sig-pipeline-stats` / `.stat-row`

#### `services-grid`
- **Purpose:** Service portfolio (Project Development / Construction / O&M / Asset Management / Off-take) — 4-up tile grid with photo backgrounds, aubergine scrims, and gradient corner-dots
- **CSS hook:** `.sig-services-grid` / `.sig-service-card`

#### `regions`
- **Purpose:** Operating region tiles (Americas / Europe / APAC / MEA) with country-count + active-projects-count per region + map graphic
- **CSS hook:** `.sig-regions` / `.sig-region-tile`

#### `agrivoltaics-band`
- **Purpose:** The dual-use-land editorial story — sheep grazing, pollinators, biodiversity. Distinctive to Lightsource bp.
- **CSS hook:** `.sig-agrivoltaics`

#### `gw-deployed-counter`
- **Purpose:** Big numerical hero feature on aubergine background with magenta-orange gradient text-clip
- **CSS hook:** `.sig-gw-counter`

#### `case-study-card`
- **Purpose:** Project showcase with country/sector tag overhang + photo + MW capacity + commissioning date + off-take partner meta
- **CSS hook:** `.sig-case-grid` / `.sig-case-card`

#### `exec-profile`
- **Purpose:** Replaces canonical `staff-profile` — executive/regional-leader portrait with credential chip-row
- **CSS hook:** `.sig-exec-profile`

#### `partner-testimonial`
- **Purpose:** Replaces canonical `member-quote` — off-taker/corporate-PPA-buyer/landowner quote with company name + project size + off-take volume
- **CSS hook:** `.sig-testimonial`

#### `partner-with-us`
- **Purpose:** Replaces canonical `ways-to-give` — 4-up tiles (Land Owner / Off-take Customer / Investor / Community Partner)
- **CSS hook:** `.sig-partner` / `.sig-partner-tile`

#### `impact-quad`
- **Purpose:** 4-up sustainability tile collage with editorial caption overlay — Lightsource bp's homepage-signature block
- **CSS hook:** `.sig-impact-quad` / `.sig-impact-tile`

#### `cobrand-lockup`
- **Purpose:** Lightsource × bp parent-brand integration mark — used in footer + selective hero callouts
- **CSS hook:** `.sig-cobrand`

#### `news-grid`
- **Purpose:** Editorial articles row with bottom magenta-orange gradient accent strip
- **CSS hook:** `.sig-news-grid` / `.sig-news-card`

#### `cta-band`
- **Purpose:** Full-bleed magenta-orange gradient band with 1.2fr/1fr split (copy left, actions right)
- **CSS hook:** `.sig-cta-band`

#### `process-steps`
- **Purpose:** Develop → Construct → Operate → Repower 4-step strip with circle-numbers and connecting hairline
- **CSS hook:** `.sig-process` / `.sig-process .step`

#### `kpi-row`
- **Purpose:** Narrow stat strip with magenta-orange gradient figures — used between sections as a quantified separator
- **CSS hook:** `.sig-kpi-row`

#### `form-card`
- **Purpose:** Partner-with-us / Land-owner inquiry form with magenta-orange top-border accent
- **CSS hook:** `.sig-form-card`