From d7850466eb9e9eca5cd3df1f07a8884979eef391 Mon Sep 17 00:00:00 2001
From: Brandonma21 <Brandonmarshall101@gmail.com>
Date: Wed, 21 Oct 2026 15:45:59 +0200
Subject: [PATCH 1/4] design: careers-page - Add the Hero and Sections 1-4
 patterns and the warm accent tokens (LSA-197)

Patterns
- Add Hero - Lede Wide Photo with breadcrumb, eyebrow, H1 and a wide team photo
- Add Section - Statement Lede for the "Shape the Future" intro
- Add Section - Split Text Pair Statement with the struck-through and highlighted closing line
- Add Section - Numbered Bento Cards for "Who thrives here"
- Add Section - Split Intro Staggered Icon Cards for "Growth and Upskilling"

Styles
- Add the about-careers SCSS bundle with the statement measure and the mobile reflow
- Wire the bundle in package.json, inc/animations.php and functions.php
- Add the compiled about-careers.css

Tokens
- Add accent.warm with warm-300 and warm-700 palette colours in theme.json and dark.json
- Keep the values identical to the Culture page tokens so the two branches reconcile

Context
- Link the hero team photo from the DEV media library, as the About team cards do
- Patterns follow light and dark mode through existing semantic tokens
- Remaining sections 6-12 follow on a stacked branch
---
 assets/css/about-careers.css                  |   1 +
 functions.php                                 |   1 +
 inc/animations.php                            |  12 ++
 package.json                                  |   6 +-
 patterns/hero/hero-lede-wide-photo.php        |  60 ++++++++
 patterns/sections/numbered-bento-cards.php    | 129 ++++++++++++++++++
 .../split-intro-staggered-icon-cards.php      | 108 +++++++++++++++
 .../sections/split-text-pair-statement.php    |  75 ++++++++++
 patterns/sections/statement-lede.php          |  46 +++++++
 src/scss/structural/about-careers.scss        |  76 +++++++++++
 styles/dark.json                              |   3 +
 theme.json                                    |  13 ++
 12 files changed, 527 insertions(+), 3 deletions(-)
 create mode 100644 assets/css/about-careers.css
 create mode 100644 patterns/hero/hero-lede-wide-photo.php
 create mode 100644 patterns/sections/numbered-bento-cards.php
 create mode 100644 patterns/sections/split-intro-staggered-icon-cards.php
 create mode 100644 patterns/sections/split-text-pair-statement.php
 create mode 100644 patterns/sections/statement-lede.php
 create mode 100644 src/scss/structural/about-careers.scss

diff --git a/assets/css/about-careers.css b/assets/css/about-careers.css
new file mode 100644
index 0000000..b2ad4f3
--- /dev/null
+++ b/assets/css/about-careers.css
@@ -0,0 +1 @@
+.wp-block-heading.ls-careers-statement{max-width:18ch;text-wrap:balance}.ls-careers-goal{text-wrap:balance}@media(max-width: 781.98px){.ls-careers-hero__photo img{aspect-ratio:16/10 !important}.ls-bento.wp-block-group{grid-template-columns:repeat(2, minmax(0, 1fr))}.ls-bento>.ls-bento__card{grid-column:span 1}.ls-bento>.ls-bento__card:last-child{grid-column:span 2}.ls-stairs__card{min-height:0 !important}}@media(max-width: 599.98px){.ls-bento.wp-block-group{grid-template-columns:minmax(0, 1fr)}.ls-bento>.ls-bento__card,.ls-bento>.ls-bento__card:last-child{grid-column:auto}.ls-bento__card{min-height:0 !important}.ls-bento>.ls-bento__card:last-child{align-items:flex-start;flex-direction:column}}
diff --git a/functions.php b/functions.php
index d99a963..9d9fc86 100644
--- a/functions.php
+++ b/functions.php
@@ -129,6 +129,7 @@ function ls_theme_setup() {
 	add_editor_style( 'assets/css/hero-split-form.css' );
 	add_editor_style( 'assets/css/scroll-timeline.css' );
 	add_editor_style( 'assets/css/details-card-grid.css' );
+	add_editor_style( 'assets/css/about-careers.css' );
 }
 add_action( 'after_setup_theme', 'ls_theme_setup' );
 
diff --git a/inc/animations.php b/inc/animations.php
index 1084fd2..5d10610 100644
--- a/inc/animations.php
+++ b/inc/animations.php
@@ -114,6 +114,7 @@ function ls_theme_get_bundle_render_markers() {
 		'legal-page'                => array( 'classes' => array( 'ls-page-hero', 'ls-legal-toc', 'ls-legal-body', 'ls-related-trust-grid' ) ),
 		'hero-split-form'           => array( 'classes' => array( 'ls-hero-form-intro' ) ),
 		'scroll-timeline'           => array( 'classes' => array( 'ls-scroll-timeline' ) ),
+		'about-careers'             => array( 'classes' => array( 'ls-careers-hero', 'ls-careers-statement', 'ls-careers-goal', 'ls-bento', 'ls-stairs' ) ),
 		'details-card-grid'         => array( 'classes' => array( 'ls-year-card' ) ),
 	);
 }
@@ -732,6 +733,17 @@ function ls_theme_get_effect_styles( $context = 'front' ) {
 				return is_page( 'about/history' );
 			},
 		),
+		'about-careers'             => array(
+			'handle'    => 'ls-theme-about-careers',
+			'path'      => 'assets/css/about-careers.css',
+			'contexts'  => array( 'front', 'editor' ),
+			// The About Careers page patterns: the statement measure, the bento and staircase reflow and
+			// the hero photo crop on small screens. The render-marker fallback loads it wherever the
+			// patterns render.
+			'condition' => static function () {
+				return is_page( 'about/careers' );
+			},
+		),
 	);
 
 	/**
diff --git a/package.json b/package.json
index e4dd637..9ac21f6 100644
--- a/package.json
+++ b/package.json
@@ -4,8 +4,8 @@
 	"description": "LightSpeed Theme is a custom WordPress block theme built by LightSpeed for fast, accessible, maintainable websites using the WordPress Site Editor and block editor.",
 	"type": "module",
 	"scripts": {
-		"build:css": "sass --no-source-map --no-charset --style=compressed src/scss/animations.scss:assets/css/animations.css src/scss/gsap-animations.scss:assets/css/gsap-animations.css src/scss/structural/taxonomy-filter.scss:assets/css/taxonomy-filter.css src/scss/structural/work-project-card.scss:assets/css/work-project-card.css src/scss/structural/work-archive-sections.scss:assets/css/work-archive-sections.css src/scss/structural/card-shells.scss:assets/css/card-shells.css src/scss/structural/cta-buttons.scss:assets/css/cta-buttons.css src/scss/structural/home-hero.scss:assets/css/home-hero.css src/scss/structural/work-hero.scss:assets/css/work-hero.css src/scss/structural/work-single-hero.scss:assets/css/work-single-hero.css src/scss/structural/blog-hero.scss:assets/css/blog-hero.css src/scss/structural/blog-all-articles.scss:assets/css/blog-all-articles.css src/scss/structural/blog-writing-cta.scss:assets/css/blog-writing-cta.css src/scss/structural/faq.scss:assets/css/faq.css src/scss/structural/links.scss:assets/css/links.css src/scss/structural/button-secondary.scss:assets/css/button-secondary.css src/scss/structural/featured-work.scss:assets/css/featured-work.css src/scss/structural/where-to-fit.scss:assets/css/where-to-fit.css src/scss/structural/homepage-cta.scss:assets/css/homepage-cta.css src/scss/structural/stats-bar.scss:assets/css/stats-bar.css src/scss/structural/homepage-card-rows.scss:assets/css/homepage-card-rows.css src/scss/structural/homepage-why-lightspeed.scss:assets/css/homepage-why-lightspeed.css src/scss/structural/search-results.scss:assets/css/search-results.css src/scss/structural/search-hero.scss:assets/css/search-hero.css src/scss/structural/services-hero.scss:assets/css/services-hero.css src/scss/structural/solutions-hero.scss:assets/css/solutions-hero.css src/scss/structural/services-linked-decisions.scss:assets/css/services-linked-decisions.css src/scss/structural/services-service-clusters.scss:assets/css/services-service-clusters.css src/scss/structural/services-service-tiles.scss:assets/css/services-service-tiles.css src/scss/structural/solutions-route-tiles.scss:assets/css/solutions-route-tiles.css src/scss/structural/stat-feature-bento.scss:assets/css/stat-feature-bento.css src/scss/structural/services-delivery-numbers.scss:assets/css/services-delivery-numbers.css src/scss/structural/corner-glow.scss:assets/css/corner-glow.css src/scss/structural/image-captions.scss:assets/css/image-captions.css src/scss/structural/phase-hero.scss:assets/css/phase-hero.css src/scss/structural/button-phase.scss:assets/css/button-phase.css src/scss/structural/phase-journey-nav.scss:assets/css/phase-journey-nav.css src/scss/structural/phase-services-in-phase.scss:assets/css/phase-services-in-phase.css src/scss/structural/phase-cta.scss:assets/css/phase-cta.css src/scss/structural/phase-delivery-numbers.scss:assets/css/phase-delivery-numbers.css src/scss/structural/phase-common-services.scss:assets/css/phase-common-services.css src/scss/structural/phase-support-focus.scss:assets/css/phase-support-focus.css src/scss/structural/phase-faq.scss:assets/css/phase-faq.css src/scss/structural/phase-where-to-go-next.scss:assets/css/phase-where-to-go-next.css src/scss/structural/tick-phase.scss:assets/css/tick-phase.css src/scss/structural/service-case-study.scss:assets/css/service-case-study.css src/scss/structural/solutions-case-study.scss:assets/css/solutions-case-study.css src/scss/structural/split-header-icon-card-grid.scss:assets/css/split-header-icon-card-grid.css src/scss/structural/solutions-split-faq.scss:assets/css/solutions-split-faq.css src/scss/structural/snapshot-card.scss:assets/css/snapshot-card.css src/scss/structural/legal-page.scss:assets/css/legal-page.css src/scss/structural/hero-split-form.scss:assets/css/hero-split-form.css src/scss/structural/hero-gradient-title.scss:assets/css/hero-gradient-title.css src/scss/structural/phase-link-card-grid.scss:assets/css/phase-link-card-grid.css src/scss/structural/scroll-timeline.scss:assets/css/scroll-timeline.css src/scss/structural/details-card-grid.scss:assets/css/details-card-grid.css",
-		"build:css:dev": "sass --no-source-map --no-charset --style=expanded src/scss/animations.scss:assets/css/animations.css src/scss/gsap-animations.scss:assets/css/gsap-animations.css src/scss/structural/taxonomy-filter.scss:assets/css/taxonomy-filter.css src/scss/structural/work-project-card.scss:assets/css/work-project-card.css src/scss/structural/work-archive-sections.scss:assets/css/work-archive-sections.css src/scss/structural/card-shells.scss:assets/css/card-shells.css src/scss/structural/cta-buttons.scss:assets/css/cta-buttons.css src/scss/structural/home-hero.scss:assets/css/home-hero.css src/scss/structural/work-hero.scss:assets/css/work-hero.css src/scss/structural/work-single-hero.scss:assets/css/work-single-hero.css src/scss/structural/blog-hero.scss:assets/css/blog-hero.css src/scss/structural/blog-all-articles.scss:assets/css/blog-all-articles.css src/scss/structural/blog-writing-cta.scss:assets/css/blog-writing-cta.css src/scss/structural/faq.scss:assets/css/faq.css src/scss/structural/links.scss:assets/css/links.css src/scss/structural/button-secondary.scss:assets/css/button-secondary.css src/scss/structural/featured-work.scss:assets/css/featured-work.css src/scss/structural/where-to-fit.scss:assets/css/where-to-fit.css src/scss/structural/homepage-cta.scss:assets/css/homepage-cta.css src/scss/structural/stats-bar.scss:assets/css/stats-bar.css src/scss/structural/homepage-card-rows.scss:assets/css/homepage-card-rows.css src/scss/structural/homepage-why-lightspeed.scss:assets/css/homepage-why-lightspeed.css src/scss/structural/search-results.scss:assets/css/search-results.css src/scss/structural/search-hero.scss:assets/css/search-hero.css src/scss/structural/services-hero.scss:assets/css/services-hero.css src/scss/structural/solutions-hero.scss:assets/css/solutions-hero.css src/scss/structural/services-linked-decisions.scss:assets/css/services-linked-decisions.css src/scss/structural/services-service-clusters.scss:assets/css/services-service-clusters.css src/scss/structural/services-service-tiles.scss:assets/css/services-service-tiles.css src/scss/structural/solutions-route-tiles.scss:assets/css/solutions-route-tiles.css src/scss/structural/stat-feature-bento.scss:assets/css/stat-feature-bento.css src/scss/structural/services-delivery-numbers.scss:assets/css/services-delivery-numbers.css src/scss/structural/corner-glow.scss:assets/css/corner-glow.css src/scss/structural/image-captions.scss:assets/css/image-captions.css src/scss/structural/phase-hero.scss:assets/css/phase-hero.css src/scss/structural/button-phase.scss:assets/css/button-phase.css src/scss/structural/phase-journey-nav.scss:assets/css/phase-journey-nav.css src/scss/structural/phase-services-in-phase.scss:assets/css/phase-services-in-phase.css src/scss/structural/phase-cta.scss:assets/css/phase-cta.css src/scss/structural/phase-delivery-numbers.scss:assets/css/phase-delivery-numbers.css src/scss/structural/phase-common-services.scss:assets/css/phase-common-services.css src/scss/structural/phase-support-focus.scss:assets/css/phase-support-focus.css src/scss/structural/phase-faq.scss:assets/css/phase-faq.css src/scss/structural/phase-where-to-go-next.scss:assets/css/phase-where-to-go-next.css src/scss/structural/tick-phase.scss:assets/css/tick-phase.css src/scss/structural/service-case-study.scss:assets/css/service-case-study.css src/scss/structural/solutions-case-study.scss:assets/css/solutions-case-study.css src/scss/structural/split-header-icon-card-grid.scss:assets/css/split-header-icon-card-grid.css src/scss/structural/solutions-split-faq.scss:assets/css/solutions-split-faq.css src/scss/structural/snapshot-card.scss:assets/css/snapshot-card.css src/scss/structural/legal-page.scss:assets/css/legal-page.css src/scss/structural/hero-split-form.scss:assets/css/hero-split-form.css src/scss/structural/hero-gradient-title.scss:assets/css/hero-gradient-title.css src/scss/structural/phase-link-card-grid.scss:assets/css/phase-link-card-grid.css src/scss/structural/scroll-timeline.scss:assets/css/scroll-timeline.css src/scss/structural/details-card-grid.scss:assets/css/details-card-grid.css",
+		"build:css": "sass --no-source-map --no-charset --style=compressed src/scss/animations.scss:assets/css/animations.css src/scss/gsap-animations.scss:assets/css/gsap-animations.css src/scss/structural/taxonomy-filter.scss:assets/css/taxonomy-filter.css src/scss/structural/work-project-card.scss:assets/css/work-project-card.css src/scss/structural/work-archive-sections.scss:assets/css/work-archive-sections.css src/scss/structural/card-shells.scss:assets/css/card-shells.css src/scss/structural/cta-buttons.scss:assets/css/cta-buttons.css src/scss/structural/home-hero.scss:assets/css/home-hero.css src/scss/structural/work-hero.scss:assets/css/work-hero.css src/scss/structural/work-single-hero.scss:assets/css/work-single-hero.css src/scss/structural/blog-hero.scss:assets/css/blog-hero.css src/scss/structural/blog-all-articles.scss:assets/css/blog-all-articles.css src/scss/structural/blog-writing-cta.scss:assets/css/blog-writing-cta.css src/scss/structural/faq.scss:assets/css/faq.css src/scss/structural/links.scss:assets/css/links.css src/scss/structural/button-secondary.scss:assets/css/button-secondary.css src/scss/structural/featured-work.scss:assets/css/featured-work.css src/scss/structural/where-to-fit.scss:assets/css/where-to-fit.css src/scss/structural/homepage-cta.scss:assets/css/homepage-cta.css src/scss/structural/stats-bar.scss:assets/css/stats-bar.css src/scss/structural/homepage-card-rows.scss:assets/css/homepage-card-rows.css src/scss/structural/homepage-why-lightspeed.scss:assets/css/homepage-why-lightspeed.css src/scss/structural/search-results.scss:assets/css/search-results.css src/scss/structural/search-hero.scss:assets/css/search-hero.css src/scss/structural/services-hero.scss:assets/css/services-hero.css src/scss/structural/solutions-hero.scss:assets/css/solutions-hero.css src/scss/structural/services-linked-decisions.scss:assets/css/services-linked-decisions.css src/scss/structural/services-service-clusters.scss:assets/css/services-service-clusters.css src/scss/structural/services-service-tiles.scss:assets/css/services-service-tiles.css src/scss/structural/solutions-route-tiles.scss:assets/css/solutions-route-tiles.css src/scss/structural/stat-feature-bento.scss:assets/css/stat-feature-bento.css src/scss/structural/services-delivery-numbers.scss:assets/css/services-delivery-numbers.css src/scss/structural/corner-glow.scss:assets/css/corner-glow.css src/scss/structural/image-captions.scss:assets/css/image-captions.css src/scss/structural/phase-hero.scss:assets/css/phase-hero.css src/scss/structural/button-phase.scss:assets/css/button-phase.css src/scss/structural/phase-journey-nav.scss:assets/css/phase-journey-nav.css src/scss/structural/phase-services-in-phase.scss:assets/css/phase-services-in-phase.css src/scss/structural/phase-cta.scss:assets/css/phase-cta.css src/scss/structural/phase-delivery-numbers.scss:assets/css/phase-delivery-numbers.css src/scss/structural/phase-common-services.scss:assets/css/phase-common-services.css src/scss/structural/phase-support-focus.scss:assets/css/phase-support-focus.css src/scss/structural/phase-faq.scss:assets/css/phase-faq.css src/scss/structural/phase-where-to-go-next.scss:assets/css/phase-where-to-go-next.css src/scss/structural/tick-phase.scss:assets/css/tick-phase.css src/scss/structural/service-case-study.scss:assets/css/service-case-study.css src/scss/structural/solutions-case-study.scss:assets/css/solutions-case-study.css src/scss/structural/split-header-icon-card-grid.scss:assets/css/split-header-icon-card-grid.css src/scss/structural/solutions-split-faq.scss:assets/css/solutions-split-faq.css src/scss/structural/snapshot-card.scss:assets/css/snapshot-card.css src/scss/structural/legal-page.scss:assets/css/legal-page.css src/scss/structural/hero-split-form.scss:assets/css/hero-split-form.css src/scss/structural/hero-gradient-title.scss:assets/css/hero-gradient-title.css src/scss/structural/phase-link-card-grid.scss:assets/css/phase-link-card-grid.css src/scss/structural/scroll-timeline.scss:assets/css/scroll-timeline.css src/scss/structural/details-card-grid.scss:assets/css/details-card-grid.css src/scss/structural/about-careers.scss:assets/css/about-careers.css",
+		"build:css:dev": "sass --no-source-map --no-charset --style=expanded src/scss/animations.scss:assets/css/animations.css src/scss/gsap-animations.scss:assets/css/gsap-animations.css src/scss/structural/taxonomy-filter.scss:assets/css/taxonomy-filter.css src/scss/structural/work-project-card.scss:assets/css/work-project-card.css src/scss/structural/work-archive-sections.scss:assets/css/work-archive-sections.css src/scss/structural/card-shells.scss:assets/css/card-shells.css src/scss/structural/cta-buttons.scss:assets/css/cta-buttons.css src/scss/structural/home-hero.scss:assets/css/home-hero.css src/scss/structural/work-hero.scss:assets/css/work-hero.css src/scss/structural/work-single-hero.scss:assets/css/work-single-hero.css src/scss/structural/blog-hero.scss:assets/css/blog-hero.css src/scss/structural/blog-all-articles.scss:assets/css/blog-all-articles.css src/scss/structural/blog-writing-cta.scss:assets/css/blog-writing-cta.css src/scss/structural/faq.scss:assets/css/faq.css src/scss/structural/links.scss:assets/css/links.css src/scss/structural/button-secondary.scss:assets/css/button-secondary.css src/scss/structural/featured-work.scss:assets/css/featured-work.css src/scss/structural/where-to-fit.scss:assets/css/where-to-fit.css src/scss/structural/homepage-cta.scss:assets/css/homepage-cta.css src/scss/structural/stats-bar.scss:assets/css/stats-bar.css src/scss/structural/homepage-card-rows.scss:assets/css/homepage-card-rows.css src/scss/structural/homepage-why-lightspeed.scss:assets/css/homepage-why-lightspeed.css src/scss/structural/search-results.scss:assets/css/search-results.css src/scss/structural/search-hero.scss:assets/css/search-hero.css src/scss/structural/services-hero.scss:assets/css/services-hero.css src/scss/structural/solutions-hero.scss:assets/css/solutions-hero.css src/scss/structural/services-linked-decisions.scss:assets/css/services-linked-decisions.css src/scss/structural/services-service-clusters.scss:assets/css/services-service-clusters.css src/scss/structural/services-service-tiles.scss:assets/css/services-service-tiles.css src/scss/structural/solutions-route-tiles.scss:assets/css/solutions-route-tiles.css src/scss/structural/stat-feature-bento.scss:assets/css/stat-feature-bento.css src/scss/structural/services-delivery-numbers.scss:assets/css/services-delivery-numbers.css src/scss/structural/corner-glow.scss:assets/css/corner-glow.css src/scss/structural/image-captions.scss:assets/css/image-captions.css src/scss/structural/phase-hero.scss:assets/css/phase-hero.css src/scss/structural/button-phase.scss:assets/css/button-phase.css src/scss/structural/phase-journey-nav.scss:assets/css/phase-journey-nav.css src/scss/structural/phase-services-in-phase.scss:assets/css/phase-services-in-phase.css src/scss/structural/phase-cta.scss:assets/css/phase-cta.css src/scss/structural/phase-delivery-numbers.scss:assets/css/phase-delivery-numbers.css src/scss/structural/phase-common-services.scss:assets/css/phase-common-services.css src/scss/structural/phase-support-focus.scss:assets/css/phase-support-focus.css src/scss/structural/phase-faq.scss:assets/css/phase-faq.css src/scss/structural/phase-where-to-go-next.scss:assets/css/phase-where-to-go-next.css src/scss/structural/tick-phase.scss:assets/css/tick-phase.css src/scss/structural/service-case-study.scss:assets/css/service-case-study.css src/scss/structural/solutions-case-study.scss:assets/css/solutions-case-study.css src/scss/structural/split-header-icon-card-grid.scss:assets/css/split-header-icon-card-grid.css src/scss/structural/solutions-split-faq.scss:assets/css/solutions-split-faq.css src/scss/structural/snapshot-card.scss:assets/css/snapshot-card.css src/scss/structural/legal-page.scss:assets/css/legal-page.css src/scss/structural/hero-split-form.scss:assets/css/hero-split-form.css src/scss/structural/hero-gradient-title.scss:assets/css/hero-gradient-title.css src/scss/structural/phase-link-card-grid.scss:assets/css/phase-link-card-grid.css src/scss/structural/scroll-timeline.scss:assets/css/scroll-timeline.css src/scss/structural/details-card-grid.scss:assets/css/details-card-grid.css src/scss/structural/about-careers.scss:assets/css/about-careers.css",
 		"schema:validate": "node theme-utils.mjs validate-schema",
 		"theme:validate": "node theme-utils.mjs validate-theme",
 		"patterns:escape": "node theme-utils.mjs escape-patterns",
@@ -16,7 +16,7 @@
 		"lint": "npm run lint:json",
 		"lint:json": "node --input-type=module --eval \"import { readFileSync } from 'fs'; import { glob } from 'glob'; const files = await glob(['theme.json', 'styles/**/*.json']); let ok = true; for (const f of files) { try { JSON.parse(readFileSync(f, 'utf8')); } catch (e) { console.error('Invalid JSON:', f, e.message); ok = false; } } if (ok) console.log('All JSON files are valid.'); else process.exit(1);\"",
 		"lint:scss": "stylelint \"src/scss/**/*.scss\"",
-		"watch:css": "sass --watch --no-source-map --no-charset --style=expanded src/scss/animations.scss:assets/css/animations.css src/scss/gsap-animations.scss:assets/css/gsap-animations.css src/scss/structural/taxonomy-filter.scss:assets/css/taxonomy-filter.css src/scss/structural/work-project-card.scss:assets/css/work-project-card.css src/scss/structural/work-archive-sections.scss:assets/css/work-archive-sections.css src/scss/structural/card-shells.scss:assets/css/card-shells.css src/scss/structural/cta-buttons.scss:assets/css/cta-buttons.css src/scss/structural/home-hero.scss:assets/css/home-hero.css src/scss/structural/work-hero.scss:assets/css/work-hero.css src/scss/structural/work-single-hero.scss:assets/css/work-single-hero.css src/scss/structural/blog-hero.scss:assets/css/blog-hero.css src/scss/structural/blog-all-articles.scss:assets/css/blog-all-articles.css src/scss/structural/blog-writing-cta.scss:assets/css/blog-writing-cta.css src/scss/structural/faq.scss:assets/css/faq.css src/scss/structural/links.scss:assets/css/links.css src/scss/structural/button-secondary.scss:assets/css/button-secondary.css src/scss/structural/featured-work.scss:assets/css/featured-work.css src/scss/structural/where-to-fit.scss:assets/css/where-to-fit.css src/scss/structural/homepage-cta.scss:assets/css/homepage-cta.css src/scss/structural/stats-bar.scss:assets/css/stats-bar.css src/scss/structural/homepage-card-rows.scss:assets/css/homepage-card-rows.css src/scss/structural/homepage-why-lightspeed.scss:assets/css/homepage-why-lightspeed.css src/scss/structural/search-results.scss:assets/css/search-results.css src/scss/structural/search-hero.scss:assets/css/search-hero.css src/scss/structural/services-hero.scss:assets/css/services-hero.css src/scss/structural/solutions-hero.scss:assets/css/solutions-hero.css src/scss/structural/services-linked-decisions.scss:assets/css/services-linked-decisions.css src/scss/structural/services-service-clusters.scss:assets/css/services-service-clusters.css src/scss/structural/services-service-tiles.scss:assets/css/services-service-tiles.css src/scss/structural/solutions-route-tiles.scss:assets/css/solutions-route-tiles.css src/scss/structural/stat-feature-bento.scss:assets/css/stat-feature-bento.css src/scss/structural/services-delivery-numbers.scss:assets/css/services-delivery-numbers.css src/scss/structural/corner-glow.scss:assets/css/corner-glow.css src/scss/structural/image-captions.scss:assets/css/image-captions.css src/scss/structural/phase-hero.scss:assets/css/phase-hero.css src/scss/structural/button-phase.scss:assets/css/button-phase.css src/scss/structural/phase-journey-nav.scss:assets/css/phase-journey-nav.css src/scss/structural/phase-services-in-phase.scss:assets/css/phase-services-in-phase.css src/scss/structural/phase-cta.scss:assets/css/phase-cta.css src/scss/structural/phase-delivery-numbers.scss:assets/css/phase-delivery-numbers.css src/scss/structural/phase-common-services.scss:assets/css/phase-common-services.css src/scss/structural/phase-support-focus.scss:assets/css/phase-support-focus.css src/scss/structural/phase-faq.scss:assets/css/phase-faq.css src/scss/structural/phase-where-to-go-next.scss:assets/css/phase-where-to-go-next.css src/scss/structural/tick-phase.scss:assets/css/tick-phase.css src/scss/structural/service-case-study.scss:assets/css/service-case-study.css src/scss/structural/solutions-case-study.scss:assets/css/solutions-case-study.css src/scss/structural/split-header-icon-card-grid.scss:assets/css/split-header-icon-card-grid.css src/scss/structural/solutions-split-faq.scss:assets/css/solutions-split-faq.css src/scss/structural/snapshot-card.scss:assets/css/snapshot-card.css src/scss/structural/legal-page.scss:assets/css/legal-page.css src/scss/structural/hero-split-form.scss:assets/css/hero-split-form.css src/scss/structural/hero-gradient-title.scss:assets/css/hero-gradient-title.css src/scss/structural/phase-link-card-grid.scss:assets/css/phase-link-card-grid.css src/scss/structural/scroll-timeline.scss:assets/css/scroll-timeline.css src/scss/structural/details-card-grid.scss:assets/css/details-card-grid.css"
+		"watch:css": "sass --watch --no-source-map --no-charset --style=expanded src/scss/animations.scss:assets/css/animations.css src/scss/gsap-animations.scss:assets/css/gsap-animations.css src/scss/structural/taxonomy-filter.scss:assets/css/taxonomy-filter.css src/scss/structural/work-project-card.scss:assets/css/work-project-card.css src/scss/structural/work-archive-sections.scss:assets/css/work-archive-sections.css src/scss/structural/card-shells.scss:assets/css/card-shells.css src/scss/structural/cta-buttons.scss:assets/css/cta-buttons.css src/scss/structural/home-hero.scss:assets/css/home-hero.css src/scss/structural/work-hero.scss:assets/css/work-hero.css src/scss/structural/work-single-hero.scss:assets/css/work-single-hero.css src/scss/structural/blog-hero.scss:assets/css/blog-hero.css src/scss/structural/blog-all-articles.scss:assets/css/blog-all-articles.css src/scss/structural/blog-writing-cta.scss:assets/css/blog-writing-cta.css src/scss/structural/faq.scss:assets/css/faq.css src/scss/structural/links.scss:assets/css/links.css src/scss/structural/button-secondary.scss:assets/css/button-secondary.css src/scss/structural/featured-work.scss:assets/css/featured-work.css src/scss/structural/where-to-fit.scss:assets/css/where-to-fit.css src/scss/structural/homepage-cta.scss:assets/css/homepage-cta.css src/scss/structural/stats-bar.scss:assets/css/stats-bar.css src/scss/structural/homepage-card-rows.scss:assets/css/homepage-card-rows.css src/scss/structural/homepage-why-lightspeed.scss:assets/css/homepage-why-lightspeed.css src/scss/structural/search-results.scss:assets/css/search-results.css src/scss/structural/search-hero.scss:assets/css/search-hero.css src/scss/structural/services-hero.scss:assets/css/services-hero.css src/scss/structural/solutions-hero.scss:assets/css/solutions-hero.css src/scss/structural/services-linked-decisions.scss:assets/css/services-linked-decisions.css src/scss/structural/services-service-clusters.scss:assets/css/services-service-clusters.css src/scss/structural/services-service-tiles.scss:assets/css/services-service-tiles.css src/scss/structural/solutions-route-tiles.scss:assets/css/solutions-route-tiles.css src/scss/structural/stat-feature-bento.scss:assets/css/stat-feature-bento.css src/scss/structural/services-delivery-numbers.scss:assets/css/services-delivery-numbers.css src/scss/structural/corner-glow.scss:assets/css/corner-glow.css src/scss/structural/image-captions.scss:assets/css/image-captions.css src/scss/structural/phase-hero.scss:assets/css/phase-hero.css src/scss/structural/button-phase.scss:assets/css/button-phase.css src/scss/structural/phase-journey-nav.scss:assets/css/phase-journey-nav.css src/scss/structural/phase-services-in-phase.scss:assets/css/phase-services-in-phase.css src/scss/structural/phase-cta.scss:assets/css/phase-cta.css src/scss/structural/phase-delivery-numbers.scss:assets/css/phase-delivery-numbers.css src/scss/structural/phase-common-services.scss:assets/css/phase-common-services.css src/scss/structural/phase-support-focus.scss:assets/css/phase-support-focus.css src/scss/structural/phase-faq.scss:assets/css/phase-faq.css src/scss/structural/phase-where-to-go-next.scss:assets/css/phase-where-to-go-next.css src/scss/structural/tick-phase.scss:assets/css/tick-phase.css src/scss/structural/service-case-study.scss:assets/css/service-case-study.css src/scss/structural/solutions-case-study.scss:assets/css/solutions-case-study.css src/scss/structural/split-header-icon-card-grid.scss:assets/css/split-header-icon-card-grid.css src/scss/structural/solutions-split-faq.scss:assets/css/solutions-split-faq.css src/scss/structural/snapshot-card.scss:assets/css/snapshot-card.css src/scss/structural/legal-page.scss:assets/css/legal-page.css src/scss/structural/hero-split-form.scss:assets/css/hero-split-form.css src/scss/structural/hero-gradient-title.scss:assets/css/hero-gradient-title.css src/scss/structural/phase-link-card-grid.scss:assets/css/phase-link-card-grid.css src/scss/structural/scroll-timeline.scss:assets/css/scroll-timeline.css src/scss/structural/details-card-grid.scss:assets/css/details-card-grid.css src/scss/structural/about-careers.scss:assets/css/about-careers.css"
 	},
 	"devDependencies": {
 		"@axe-core/playwright": "^4.13.0",
diff --git a/patterns/hero/hero-lede-wide-photo.php b/patterns/hero/hero-lede-wide-photo.php
new file mode 100644
index 0000000..9132dee
--- /dev/null
+++ b/patterns/hero/hero-lede-wide-photo.php
@@ -0,0 +1,60 @@
+<?php
+/**
+ * Title: Hero - Lede Wide Photo
+ * Slug: ls-theme/hero-lede-wide-photo
+ * Categories: hero
+ * Block Types: core/pattern
+ * Description: A left-aligned page hero for careers and team pages on the page canvas: breadcrumb trail, dot eyebrow, a large H1 with one brand-coloured word, a lede paragraph, and a wide team photo below. The shared corner-glow class supplies the soft background glow. The photo is a core/image cropped to a 21:8 banner (16:10 on small screens, in src/scss/structural/about-careers.scss because the aspect ratio is an inline style); swap it for any image from the Media Library. Falls back to core/group because no semantic core block fits a hero. Adapts between light and dark mode through surface, text, border and brand tokens. Authored for the About Careers page; edit the eyebrow, heading, lede and photo after inserting.
+ * Keywords: hero, careers, team, photo, about, section
+ * Viewport Width: 1280
+ * Inserter: true
+ *
+ * @package ls-theme
+ */
+
+$ls_hero_photo_url = 'https://ls-agency.lightspeedwp.dev/wp-content/uploads/2024/06/lightspeed-team-photo-edited.png';
+?>
+<!-- wp:group {"align":"full","tagName":"section","className":"ls-corner-glow ls-careers-hero","style":{"border":{"bottom":{"color":"var:custom|color|border|card","style":"solid","width":"1px"}},"spacing":{"margin":{"top":"0"},"padding":{"top":"var:preset|spacing|80","right":"var:preset|spacing|30","bottom":"var:preset|spacing|80","left":"var:preset|spacing|30"}}},"layout":{"type":"constrained"}} -->
+<section class="wp-block-group alignfull ls-corner-glow ls-careers-hero" style="border-bottom-color:var(--wp--custom--color--border--card);border-bottom-style:solid;border-bottom-width:1px;margin-top:0;padding-top:var(--wp--preset--spacing--80);padding-right:var(--wp--preset--spacing--30);padding-bottom:var(--wp--preset--spacing--80);padding-left:var(--wp--preset--spacing--30)">
+
+	<!-- wp:group {"align":"wide","style":{"spacing":{"blockGap":"var:preset|spacing|60"}},"layout":{"type":"default"}} -->
+	<div class="wp-block-group alignwide">
+
+		<!-- wp:group {"style":{"spacing":{"blockGap":"var:preset|spacing|30"}},"layout":{"type":"default"}} -->
+		<div class="wp-block-group">
+
+			<?php if ( WP_Block_Type_Registry::get_instance()->is_registered( 'yoast-seo/breadcrumbs' ) ) : ?>
+			<!-- wp:yoast-seo/breadcrumbs {"className":"alignwide"} /-->
+			<?php endif; ?>
+
+			<!-- wp:group {"layout":{"type":"flex","flexWrap":"nowrap","justifyContent":"left","verticalAlignment":"center"}} -->
+			<div class="wp-block-group">
+				<!-- wp:icon {"icon":"lightspeed/dot","className":"has-text-color","style":{"color":{"text":"var(--wp--custom--color--text--brand)"},"dimensions":{"width":"8px"}}} /-->
+
+				<!-- wp:paragraph {"style":{"typography":{"textTransform":"uppercase","letterSpacing":"var:custom|typography|letter-spacing|widest","fontWeight":"var:custom|typography|font-weight|semibold"},"color":{"text":"var(--wp--custom--color--text--brand)"}},"fontSize":"100"} -->
+				<p class="has-text-color has-100-font-size" style="color:var(--wp--custom--color--text--brand);font-weight:var(--wp--custom--typography--font-weight--semibold);letter-spacing:var(--wp--custom--typography--letter-spacing--widest);text-transform:uppercase"><?php echo esc_html__( 'About – Careers', 'ls-theme' ); ?></p>
+				<!-- /wp:paragraph -->
+			</div>
+			<!-- /wp:group -->
+
+			<!-- wp:heading {"level":1,"style":{"typography":{"fontWeight":"var:custom|typography|font-weight|extrabold","letterSpacing":"var:custom|typography|letter-spacing|tight","lineHeight":"var:custom|line-height|heading-tight"}},"fontSize":"900"} -->
+			<h1 class="wp-block-heading has-900-font-size" style="font-weight:var(--wp--custom--typography--font-weight--extrabold);letter-spacing:var(--wp--custom--typography--letter-spacing--tight);line-height:var(--wp--custom--line-height--heading-tight)"><?php echo esc_html__( 'Careers at', 'ls-theme' ); ?> <span style="color:var(--wp--custom--color--text--brand)"><?php echo esc_html__( 'LightSpeed', 'ls-theme' ); ?></span></h1>
+			<!-- /wp:heading -->
+
+			<!-- wp:group {"layout":{"type":"constrained","contentSize":"720px","justifyContent":"left"}} -->
+			<div class="wp-block-group">
+				<!-- wp:paragraph {"style":{"color":{"text":"var(--wp--custom--color--text--muted)"}},"fontSize":"300"} -->
+				<p class="has-text-color has-300-font-size" style="color:var(--wp--custom--color--text--muted)"><?php echo esc_html__( 'We’re interested in thoughtful people who care about WordPress, design systems, maintainable work and the kind of collaboration that improves with clarity.', 'ls-theme' ); ?></p>
+				<!-- /wp:paragraph -->
+			</div>
+			<!-- /wp:group -->
+		</div>
+		<!-- /wp:group -->
+
+		<!-- wp:image {"aspectRatio":"21/8","scale":"cover","width":"100%","sizeSlug":"full","linkDestination":"none","className":"ls-careers-hero__photo","style":{"border":{"radius":"var:preset|border-radius|400"}}} -->
+		<figure class="wp-block-image size-full has-custom-border ls-careers-hero__photo"><img src="<?php echo esc_url( $ls_hero_photo_url ); ?>" alt="<?php echo esc_attr__( 'The LightSpeed team together', 'ls-theme' ); ?>" style="border-radius:var(--wp--preset--border-radius--400);aspect-ratio:21/8;object-fit:cover;width:100%"/></figure>
+		<!-- /wp:image -->
+	</div>
+	<!-- /wp:group -->
+</section>
+<!-- /wp:group -->
diff --git a/patterns/sections/numbered-bento-cards.php b/patterns/sections/numbered-bento-cards.php
new file mode 100644
index 0000000..7a0283d
--- /dev/null
+++ b/patterns/sections/numbered-bento-cards.php
@@ -0,0 +1,129 @@
+<?php
+/**
+ * Title: Section - Numbered Bento Cards
+ * Slug: ls-theme/numbered-bento-cards
+ * Categories: text
+ * Block Types: core/pattern
+ * Description: A "who this is for" section on a surface.card band: a dot-eyebrow H2 and an intro line above a six-column bento of numbered cards. The first card spans four columns, the next four span two and the last spans the full row (a core/group grid with column spans, so each card can be reordered or deleted). Each card is a flat Card - Plain with a mono number in its own accent colour (blue, orange, green or purple) and a statement in the heading font. On small screens the grid drops to two columns, then one (src/scss/structural/about-careers.scss, because core grids have no per-breakpoint column count). Falls back to core/group because no semantic core block fits a card. Adapts between light and dark mode through surface, text, border and accent tokens. Authored for the About Careers page "Who thrives here" section; edit the heading, intro and card text after inserting.
+ * Keywords: bento, cards, numbered, grid, careers, about, section
+ * Viewport Width: 1280
+ * Inserter: true
+ *
+ * @package ls-theme
+ */
+
+$ls_bento_cards = array(
+	array(
+		'number' => '01',
+		'text'   => __( 'Modern WordPress developers', 'ls-theme' ),
+		'colour' => 'var(--wp--custom--color--text--brand)',
+		'span'   => 4,
+		'size'   => '600',
+	),
+	array(
+		'number' => '02',
+		'text'   => __( 'Block-theme and plugin builders', 'ls-theme' ),
+		'colour' => 'var(--wp--custom--color--accent--warm)',
+		'span'   => 2,
+		'size'   => '400',
+	),
+	array(
+		'number' => '03',
+		'text'   => __( 'Designers who think in systems, not just screens', 'ls-theme' ),
+		'colour' => 'var(--wp--custom--color--phase--grow)',
+		'span'   => 2,
+		'size'   => '400',
+	),
+	array(
+		'number' => '04',
+		'text'   => __( 'People comfortable with async work', 'ls-theme' ),
+		'colour' => 'var(--wp--custom--color--phase--evolve)',
+		'span'   => 2,
+		'size'   => '400',
+	),
+	array(
+		'number' => '05',
+		'text'   => __( 'People who can work independently without disappearing', 'ls-theme' ),
+		'colour' => 'var(--wp--custom--color--accent--warm)',
+		'span'   => 2,
+		'size'   => '400',
+	),
+	array(
+		'number' => '06',
+		'text'   => __( 'People who are curious about AI-assisted workflows but still care about judgment, craft and review', 'ls-theme' ),
+		'colour' => 'var(--wp--custom--color--text--brand)',
+		'span'   => 6,
+		'size'   => '400',
+	),
+);
+?>
+<!-- wp:group {"align":"full","tagName":"section","style":{"color":{"background":"var:custom|color|surface|card"},"spacing":{"margin":{"top":"0"},"padding":{"top":"var:preset|spacing|100","right":"var:preset|spacing|30","bottom":"var:preset|spacing|100","left":"var:preset|spacing|30"}}},"layout":{"type":"constrained"}} -->
+<section class="wp-block-group alignfull has-background" style="background-color:var(--wp--custom--color--surface--card);margin-top:0;padding-top:var(--wp--preset--spacing--100);padding-right:var(--wp--preset--spacing--30);padding-bottom:var(--wp--preset--spacing--100);padding-left:var(--wp--preset--spacing--30)">
+
+	<!-- wp:group {"align":"wide","style":{"spacing":{"blockGap":"var:preset|spacing|60"}},"layout":{"type":"default"}} -->
+	<div class="wp-block-group alignwide">
+
+		<!-- wp:group {"style":{"spacing":{"blockGap":"var:preset|spacing|20"}},"layout":{"type":"default"}} -->
+		<div class="wp-block-group">
+
+			<!-- wp:group {"layout":{"type":"flex","flexWrap":"nowrap","justifyContent":"left","verticalAlignment":"center"}} -->
+			<div class="wp-block-group">
+				<!-- wp:icon {"icon":"lightspeed/dot","className":"has-text-color","style":{"color":{"text":"var(--wp--custom--color--text--brand)"},"dimensions":{"width":"8px"}}} /-->
+
+				<!-- wp:heading {"level":2,"style":{"typography":{"textTransform":"uppercase","letterSpacing":"var:custom|typography|letter-spacing|widest","fontWeight":"var:custom|typography|font-weight|semibold"},"color":{"text":"var(--wp--custom--color--text--brand)"}},"fontSize":"100"} -->
+				<h2 class="wp-block-heading has-text-color has-100-font-size" style="color:var(--wp--custom--color--text--brand);font-weight:var(--wp--custom--typography--font-weight--semibold);letter-spacing:var(--wp--custom--typography--letter-spacing--widest);text-transform:uppercase"><?php echo esc_html__( 'Who thrives here', 'ls-theme' ); ?></h2>
+				<!-- /wp:heading -->
+			</div>
+			<!-- /wp:group -->
+
+			<!-- wp:paragraph {"style":{"color":{"text":"var(--wp--custom--color--text--muted)"}},"fontSize":"300"} -->
+			<p class="has-text-color has-300-font-size" style="color:var(--wp--custom--color--text--muted)"><?php echo esc_html__( 'The people most likely to do well at LightSpeed are:', 'ls-theme' ); ?></p>
+			<!-- /wp:paragraph -->
+		</div>
+		<!-- /wp:group -->
+
+		<!-- wp:group {"className":"ls-bento","style":{"spacing":{"blockGap":"var:preset|spacing|20"}},"layout":{"type":"grid","columnCount":6}} -->
+		<div class="wp-block-group ls-bento">
+			<?php foreach ( $ls_bento_cards as $ls_bento_card ) : ?>
+				<?php
+				$ls_bento_is_wide    = ( 6 === $ls_bento_card['span'] );
+				$ls_bento_attrs      = array(
+					'tagName'   => 'article',
+					'className' => 'is-style-card-plain ls-bento__card',
+					'style'     => array(
+						'layout'  => array( 'columnSpan' => $ls_bento_card['span'] ),
+						'spacing' => array( 'blockGap' => 'var:preset|spacing|40' ),
+					),
+					'layout'    => array(
+						'type'        => 'flex',
+						'orientation' => $ls_bento_is_wide ? 'horizontal' : 'vertical',
+						'flexWrap'    => 'nowrap',
+					),
+				);
+				$ls_bento_min_height = $ls_bento_is_wide ? '0px' : '200px';
+
+				$ls_bento_attrs['style']['dimensions'] = array( 'minHeight' => $ls_bento_min_height );
+				if ( $ls_bento_is_wide ) {
+					$ls_bento_attrs['layout']['verticalAlignment'] = 'center';
+				} else {
+					$ls_bento_attrs['layout']['verticalAlignment'] = 'space-between';
+				}
+				?>
+			<!-- wp:group <?php echo wp_json_encode( $ls_bento_attrs, JSON_UNESCAPED_SLASHES ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped -- JSON for a block comment. ?> -->
+			<article class="wp-block-group ls-bento__card is-style-card-plain" style="min-height:<?php echo esc_attr( $ls_bento_min_height ); ?>">
+				<!-- wp:paragraph {"style":{"typography":{"fontFamily":"var:preset|font-family|monospace","letterSpacing":"var:custom|typography|letter-spacing|wide","fontWeight":"var:custom|typography|font-weight|semibold"},"color":{"text":"<?php echo esc_attr( $ls_bento_card['colour'] ); ?>"}},"fontSize":"100"} -->
+				<p class="has-text-color has-100-font-size" style="color:<?php echo esc_attr( $ls_bento_card['colour'] ); ?>;font-family:var(--wp--preset--font-family--monospace);font-weight:var(--wp--custom--typography--font-weight--semibold);letter-spacing:var(--wp--custom--typography--letter-spacing--wide)"><?php echo esc_html( $ls_bento_card['number'] ); ?></p>
+				<!-- /wp:paragraph -->
+
+				<!-- wp:paragraph {"style":{"typography":{"fontFamily":"var:preset|font-family|heading","fontWeight":"var:custom|typography|font-weight|bold","lineHeight":"var:custom|line-height|heading-default"}},"fontSize":"<?php echo esc_attr( $ls_bento_card['size'] ); ?>"} -->
+				<p class="has-<?php echo esc_attr( $ls_bento_card['size'] ); ?>-font-size" style="font-family:var(--wp--preset--font-family--heading);font-weight:var(--wp--custom--typography--font-weight--bold);line-height:var(--wp--custom--line-height--heading-default)"><?php echo esc_html( $ls_bento_card['text'] ); ?></p>
+				<!-- /wp:paragraph -->
+			</article>
+			<!-- /wp:group -->
+			<?php endforeach; ?>
+		</div>
+		<!-- /wp:group -->
+	</div>
+	<!-- /wp:group -->
+</section>
+<!-- /wp:group -->
diff --git a/patterns/sections/split-intro-staggered-icon-cards.php b/patterns/sections/split-intro-staggered-icon-cards.php
new file mode 100644
index 0000000..07144a4
--- /dev/null
+++ b/patterns/sections/split-intro-staggered-icon-cards.php
@@ -0,0 +1,108 @@
+<?php
+/**
+ * Title: Section - Split Intro Staggered Icon Cards
+ * Slug: ls-theme/split-intro-staggered-icon-cards
+ * Categories: featured
+ * Block Types: core/pattern
+ * Description: A "growth and learning" section on the page canvas: a dot eyebrow, H2 and two intro paragraphs above a row of three icon cards of rising height, all sitting on the same bottom edge like steps. Each card is a surface.card card with a brand Icon block well pinned to the top, an H3 and a paragraph pinned to the bottom. The staircase comes from core/columns with bottom vertical alignment and a different minimum height on each card, so it needs no custom layout code; the columns stack on mobile and src/scss/structural/about-careers.scss only drops the minimum heights there, because they are inline styles. Falls back to core/columns and core/group because no semantic core block fits a staggered card. Adapts between light and dark mode through surface, text, border and brand tokens. Authored for the About Careers page "Growth and Upskilling" section; edit the copy and icons after inserting.
+ * Keywords: cards, icons, staggered, staircase, growth, careers, about, section
+ * Viewport Width: 1280
+ * Inserter: true
+ *
+ * @package ls-theme
+ */
+
+$ls_stair_cards = array(
+	array(
+		'icon'        => 'users-three',
+		'title'       => __( 'AI Study Groups & Hackathons', 'ls-theme' ),
+		'description' => __( 'Dedicated time to experiment with new AI capabilities, APIs, and prompt engineering.', 'ls-theme' ),
+		'height'      => '260px',
+	),
+	array(
+		'icon'        => 'graduation-cap',
+		'title'       => __( 'Mentorship', 'ls-theme' ),
+		'description' => __( 'We actively support junior developers through structured internships and senior mentorship.', 'ls-theme' ),
+		'height'      => '340px',
+	),
+	array(
+		'icon'        => 'book',
+		'title'       => __( 'Continuous Learning Allowances', 'ls-theme' ),
+		'description' => __( 'We provide resources to help you master GitHub, Copilot, and modern block theme practices.', 'ls-theme' ),
+		'height'      => '420px',
+	),
+);
+?>
+<!-- wp:group {"align":"full","tagName":"section","style":{"color":{"background":"var:custom|color|surface|canvas"},"spacing":{"margin":{"top":"0"},"padding":{"top":"var:preset|spacing|100","right":"var:preset|spacing|30","bottom":"var:preset|spacing|100","left":"var:preset|spacing|30"}}},"layout":{"type":"constrained"}} -->
+<section class="wp-block-group alignfull has-background" style="background-color:var(--wp--custom--color--surface--canvas);margin-top:0;padding-top:var(--wp--preset--spacing--100);padding-right:var(--wp--preset--spacing--30);padding-bottom:var(--wp--preset--spacing--100);padding-left:var(--wp--preset--spacing--30)">
+
+	<!-- wp:group {"align":"wide","style":{"spacing":{"blockGap":"var:preset|spacing|60"}},"layout":{"type":"default"}} -->
+	<div class="wp-block-group alignwide">
+
+		<!-- wp:group {"style":{"spacing":{"blockGap":"var:preset|spacing|30"}},"layout":{"type":"constrained","justifyContent":"left"}} -->
+		<div class="wp-block-group">
+
+			<!-- wp:group {"layout":{"type":"flex","flexWrap":"nowrap","justifyContent":"left","verticalAlignment":"center"}} -->
+			<div class="wp-block-group">
+				<!-- wp:icon {"icon":"lightspeed/dot","className":"has-text-color","style":{"color":{"text":"var(--wp--custom--color--text--brand)"},"dimensions":{"width":"8px"}}} /-->
+
+				<!-- wp:paragraph {"style":{"typography":{"textTransform":"uppercase","letterSpacing":"var:custom|typography|letter-spacing|widest","fontWeight":"var:custom|typography|font-weight|semibold"},"color":{"text":"var(--wp--custom--color--text--brand)"}},"fontSize":"100"} -->
+				<p class="has-text-color has-100-font-size" style="color:var(--wp--custom--color--text--brand);font-weight:var(--wp--custom--typography--font-weight--semibold);letter-spacing:var(--wp--custom--typography--letter-spacing--widest);text-transform:uppercase"><?php echo esc_html__( 'Growth', 'ls-theme' ); ?></p>
+				<!-- /wp:paragraph -->
+			</div>
+			<!-- /wp:group -->
+
+			<!-- wp:heading {"level":2,"style":{"typography":{"fontWeight":"var:custom|typography|font-weight|bold"}},"fontSize":"600"} -->
+			<h2 class="wp-block-heading has-600-font-size" style="font-weight:var(--wp--custom--typography--font-weight--bold)"><?php echo esc_html__( 'Riding the AI Wave: Growth & Upskilling', 'ls-theme' ); ?></h2>
+			<!-- /wp:heading -->
+
+			<!-- wp:group {"style":{"spacing":{"blockGap":"var:preset|spacing|20"}},"layout":{"type":"constrained","contentSize":"720px","justifyContent":"left"}} -->
+			<div class="wp-block-group">
+				<!-- wp:paragraph {"style":{"color":{"text":"var(--wp--custom--color--text--muted)"}},"fontSize":"300"} -->
+				<p class="has-text-color has-300-font-size" style="color:var(--wp--custom--color--text--muted)"><?php echo esc_html__( 'We believe that continuous growth is the key to innovation. We actively drive developer upskilling through internships, senior hires, and AI-powered workflows. Our culture ensures that our team evolves alongside the current of technology.', 'ls-theme' ); ?></p>
+				<!-- /wp:paragraph -->
+
+				<!-- wp:paragraph {"style":{"color":{"text":"var(--wp--custom--color--text--muted)"}},"fontSize":"300"} -->
+				<p class="has-text-color has-300-font-size" style="color:var(--wp--custom--color--text--muted)"><?php echo esc_html__( 'When you join LightSpeed, you will be supported by cultural initiatives designed for professional development, including:', 'ls-theme' ); ?></p>
+				<!-- /wp:paragraph -->
+			</div>
+			<!-- /wp:group -->
+		</div>
+		<!-- /wp:group -->
+
+		<!-- wp:columns {"verticalAlignment":"bottom","className":"ls-stairs","style":{"spacing":{"blockGap":{"top":"var:preset|spacing|30","left":"var:preset|spacing|30"}}}} -->
+		<div class="wp-block-columns are-vertically-aligned-bottom ls-stairs">
+			<?php foreach ( $ls_stair_cards as $ls_stair_card ) : ?>
+
+			<!-- wp:column {"verticalAlignment":"bottom"} -->
+			<div class="wp-block-column is-vertically-aligned-bottom">
+				<!-- wp:group {"tagName":"article","className":"ls-stairs__card","style":{"dimensions":{"minHeight":"<?php echo esc_attr( $ls_stair_card['height'] ); ?>"},"color":{"background":"var:custom|color|surface|card"},"border":{"color":"var:custom|color|border|card","radius":"var:preset|border-radius|300","style":"solid","width":"1px"},"spacing":{"blockGap":"var:preset|spacing|10","padding":{"top":"var:preset|spacing|30","right":"var:preset|spacing|30","bottom":"var:preset|spacing|30","left":"var:preset|spacing|30"}}},"layout":{"type":"flex","orientation":"vertical","justifyContent":"stretch","verticalAlignment":"space-between","flexWrap":"nowrap"}} -->
+				<article class="wp-block-group ls-stairs__card has-border-color has-background" style="border-color:var(--wp--custom--color--border--card);border-style:solid;border-width:1px;border-radius:var(--wp--preset--border-radius--300);background-color:var(--wp--custom--color--surface--card);min-height:<?php echo esc_attr( $ls_stair_card['height'] ); ?>;padding-top:var(--wp--preset--spacing--30);padding-right:var(--wp--preset--spacing--30);padding-bottom:var(--wp--preset--spacing--30);padding-left:var(--wp--preset--spacing--30)">
+					<!-- wp:group {"className":"ls-icon-well-brand ls-stairs__icon"} -->
+					<div class="wp-block-group ls-icon-well-brand ls-stairs__icon">
+						<!-- wp:icon {"icon":"lightspeed/<?php echo esc_attr( $ls_stair_card['icon'] ); ?>","className":"has-text-color","style":{"color":{"text":"var(--wp--custom--color--text--brand)"},"dimensions":{"width":"20px"}}} /-->
+					</div>
+					<!-- /wp:group -->
+
+					<!-- wp:group {"style":{"spacing":{"blockGap":"var:preset|spacing|10"}},"layout":{"type":"default"}} -->
+					<div class="wp-block-group">
+						<!-- wp:heading {"level":3,"style":{"typography":{"fontWeight":"var:custom|typography|font-weight|bold","letterSpacing":"var:custom|typography|letter-spacing|tight"}},"fontSize":"300"} -->
+						<h3 class="wp-block-heading has-300-font-size" style="font-weight:var(--wp--custom--typography--font-weight--bold);letter-spacing:var(--wp--custom--typography--letter-spacing--tight)"><?php echo esc_html( $ls_stair_card['title'] ); ?></h3>
+						<!-- /wp:heading -->
+
+						<!-- wp:paragraph {"style":{"color":{"text":"var(--wp--custom--color--text--muted)"}},"fontSize":"200"} -->
+						<p class="has-text-color has-200-font-size" style="color:var(--wp--custom--color--text--muted)"><?php echo esc_html( $ls_stair_card['description'] ); ?></p>
+						<!-- /wp:paragraph -->
+					</div>
+					<!-- /wp:group -->
+				</article>
+				<!-- /wp:group -->
+			</div>
+			<!-- /wp:column -->
+			<?php endforeach; ?>
+		</div>
+		<!-- /wp:columns -->
+	</div>
+	<!-- /wp:group -->
+</section>
+<!-- /wp:group -->
diff --git a/patterns/sections/split-text-pair-statement.php b/patterns/sections/split-text-pair-statement.php
new file mode 100644
index 0000000..97c8317
--- /dev/null
+++ b/patterns/sections/split-text-pair-statement.php
@@ -0,0 +1,75 @@
+<?php
+/**
+ * Title: Section - Split Text Pair Statement
+ * Slug: ls-theme/split-text-pair-statement
+ * Categories: text
+ * Block Types: core/pattern
+ * Description: A two-column text section on the page canvas followed by a large closing statement: each column is a dot-eyebrow H2 (the heading itself carries the eyebrow styling, so the page keeps a real heading) and a lede paragraph, and below a hairline sits one oversized statement in which one phrase is struck through in the subtle text colour and another is highlighted in the brand colour. The strike-through and highlight are core inline formats (strikethrough and highlight), so editors can change them from the toolbar. The columns stack on mobile. Falls back to core/columns and core/group because no semantic core block fits a text pair with a statement. Adapts between light and dark mode through text, border and brand tokens. Authored for the About Careers page "Why join" and "How we work" section; edit the headings, paragraphs and statement after inserting.
+ * Keywords: text, pair, statement, columns, careers, about, section
+ * Viewport Width: 1280
+ * Inserter: true
+ *
+ * @package ls-theme
+ */
+
+$ls_pair_columns = array(
+	array(
+		'heading' => __( 'Why join LightSpeed', 'ls-theme' ),
+		'text'    => __( 'LightSpeed is not trying to build a culture around noise. We care about doing good work, improving over time, and using modern tools in ways that make the team stronger. If you like clean systems, practical delivery and open-source values, you will probably feel more at home here than in a company chasing hype.', 'ls-theme' ),
+	),
+	array(
+		'heading' => __( 'How we work', 'ls-theme' ),
+		'text'    => __( 'We are a remote-first team, and have been since 2014. That means flexible schedules, but it also means clear expectations. We document work, define review points, rely on shared tools, and expect people to communicate well.', 'ls-theme' ),
+	),
+);
+
+$ls_goal_html = sprintf(
+	/* translators: 1: struck-through phrase, 2: highlighted phrase. */
+	esc_html__( 'The goal is not %1$s. The goal is %2$s.', 'ls-theme' ),
+	'<s><span style="color:var(--wp--custom--color--text--subtle)" class="has-inline-color">' . esc_html__( 'constant visibility', 'ls-theme' ) . '</span></s>',
+	'<mark style="background-color:transparent;color:var(--wp--custom--color--text--brand)" class="has-inline-color">' . esc_html__( 'dependable progress', 'ls-theme' ) . '</mark>'
+);
+?>
+<!-- wp:group {"align":"full","tagName":"section","style":{"color":{"background":"var:custom|color|surface|canvas"},"spacing":{"margin":{"top":"0"},"padding":{"top":"var:preset|spacing|100","right":"var:preset|spacing|30","bottom":"var:preset|spacing|100","left":"var:preset|spacing|30"}}},"layout":{"type":"constrained"}} -->
+<section class="wp-block-group alignfull has-background" style="background-color:var(--wp--custom--color--surface--canvas);margin-top:0;padding-top:var(--wp--preset--spacing--100);padding-right:var(--wp--preset--spacing--30);padding-bottom:var(--wp--preset--spacing--100);padding-left:var(--wp--preset--spacing--30)">
+
+	<!-- wp:group {"align":"wide","style":{"spacing":{"blockGap":"var:preset|spacing|80"}},"layout":{"type":"default"}} -->
+	<div class="wp-block-group alignwide">
+
+		<!-- wp:columns {"verticalAlignment":"top","style":{"spacing":{"blockGap":{"left":"var:preset|spacing|90"}}}} -->
+		<div class="wp-block-columns are-vertically-aligned-top">
+			<?php foreach ( $ls_pair_columns as $ls_pair_column ) : ?>
+
+			<!-- wp:column {"verticalAlignment":"top","style":{"spacing":{"blockGap":"var:preset|spacing|30"}}} -->
+			<div class="wp-block-column is-vertically-aligned-top">
+
+				<!-- wp:group {"layout":{"type":"flex","flexWrap":"nowrap","justifyContent":"left","verticalAlignment":"center"}} -->
+				<div class="wp-block-group">
+					<!-- wp:icon {"icon":"lightspeed/dot","className":"has-text-color","style":{"color":{"text":"var(--wp--custom--color--text--brand)"},"dimensions":{"width":"8px"}}} /-->
+
+					<!-- wp:heading {"level":2,"style":{"typography":{"textTransform":"uppercase","letterSpacing":"var:custom|typography|letter-spacing|widest","fontWeight":"var:custom|typography|font-weight|semibold"},"color":{"text":"var(--wp--custom--color--text--brand)"}},"fontSize":"100"} -->
+					<h2 class="wp-block-heading has-text-color has-100-font-size" style="color:var(--wp--custom--color--text--brand);font-weight:var(--wp--custom--typography--font-weight--semibold);letter-spacing:var(--wp--custom--typography--letter-spacing--widest);text-transform:uppercase"><?php echo esc_html( $ls_pair_column['heading'] ); ?></h2>
+					<!-- /wp:heading -->
+				</div>
+				<!-- /wp:group -->
+
+				<!-- wp:paragraph {"style":{"color":{"text":"var(--wp--custom--color--text--muted)"}},"fontSize":"300"} -->
+				<p class="has-text-color has-300-font-size" style="color:var(--wp--custom--color--text--muted)"><?php echo esc_html( $ls_pair_column['text'] ); ?></p>
+				<!-- /wp:paragraph -->
+			</div>
+			<!-- /wp:column -->
+			<?php endforeach; ?>
+		</div>
+		<!-- /wp:columns -->
+
+		<!-- wp:group {"style":{"border":{"top":{"color":"var:custom|color|border|card","style":"solid","width":"1px"}},"spacing":{"padding":{"top":"var:preset|spacing|70"}}},"layout":{"type":"constrained","contentSize":"","justifyContent":"left"}} -->
+		<div class="wp-block-group" style="border-top-color:var(--wp--custom--color--border--card);border-top-style:solid;border-top-width:1px;padding-top:var(--wp--preset--spacing--70)">
+			<!-- wp:paragraph {"className":"ls-careers-goal","style":{"typography":{"fontFamily":"var:preset|font-family|heading","fontWeight":"var:custom|typography|font-weight|extrabold","letterSpacing":"var:custom|typography|letter-spacing|tight","lineHeight":"var:custom|line-height|heading-snug"}},"fontSize":"800"} -->
+			<p class="ls-careers-goal has-800-font-size" style="font-family:var(--wp--preset--font-family--heading);font-weight:var(--wp--custom--typography--font-weight--extrabold);letter-spacing:var(--wp--custom--typography--letter-spacing--tight);line-height:var(--wp--custom--line-height--heading-snug)"><?php echo wp_kses_post( $ls_goal_html ); ?></p>
+			<!-- /wp:paragraph -->
+		</div>
+		<!-- /wp:group -->
+	</div>
+	<!-- /wp:group -->
+</section>
+<!-- /wp:group -->
diff --git a/patterns/sections/statement-lede.php b/patterns/sections/statement-lede.php
new file mode 100644
index 0000000..1678353
--- /dev/null
+++ b/patterns/sections/statement-lede.php
@@ -0,0 +1,46 @@
+<?php
+/**
+ * Title: Section - Statement Lede
+ * Slug: ls-theme/statement-lede
+ * Categories: text
+ * Block Types: core/pattern
+ * Description: A statement section on a surface.card band: a dot eyebrow, a very large H2 statement with a brand-coloured closing phrase, and a lede paragraph beneath it, all left-aligned. The heading is capped to a narrow measure (max-width in ch, in src/scss/structural/about-careers.scss, because the heading block has no key for it) so the statement breaks onto short lines. Falls back to core/group because no semantic core block fits an eyebrow, statement and lede. Adapts between light and dark mode through surface, text and brand tokens. Authored for the About Careers page "Shape the Future" section; edit the eyebrow, heading and lede after inserting.
+ * Keywords: statement, lede, intro, careers, about, section
+ * Viewport Width: 1280
+ * Inserter: true
+ *
+ * @package ls-theme
+ */
+
+?>
+<!-- wp:group {"align":"full","tagName":"section","style":{"color":{"background":"var:custom|color|surface|card"},"spacing":{"margin":{"top":"0"},"padding":{"top":"var:preset|spacing|100","right":"var:preset|spacing|30","bottom":"var:preset|spacing|100","left":"var:preset|spacing|30"}}},"layout":{"type":"constrained"}} -->
+<section class="wp-block-group alignfull has-background" style="background-color:var(--wp--custom--color--surface--card);margin-top:0;padding-top:var(--wp--preset--spacing--100);padding-right:var(--wp--preset--spacing--30);padding-bottom:var(--wp--preset--spacing--100);padding-left:var(--wp--preset--spacing--30)">
+
+	<!-- wp:group {"align":"wide","style":{"spacing":{"blockGap":"var:preset|spacing|30"}},"layout":{"type":"constrained","justifyContent":"left"}} -->
+	<div class="wp-block-group alignwide">
+
+		<!-- wp:group {"layout":{"type":"flex","flexWrap":"nowrap","justifyContent":"left","verticalAlignment":"center"}} -->
+		<div class="wp-block-group">
+			<!-- wp:icon {"icon":"lightspeed/dot","className":"has-text-color","style":{"color":{"text":"var(--wp--custom--color--text--brand)"},"dimensions":{"width":"8px"}}} /-->
+
+			<!-- wp:paragraph {"style":{"typography":{"textTransform":"uppercase","letterSpacing":"var:custom|typography|letter-spacing|widest","fontWeight":"var:custom|typography|font-weight|semibold"},"color":{"text":"var(--wp--custom--color--text--brand)"}},"fontSize":"100"} -->
+			<p class="has-text-color has-100-font-size" style="color:var(--wp--custom--color--text--brand);font-weight:var(--wp--custom--typography--font-weight--semibold);letter-spacing:var(--wp--custom--typography--letter-spacing--widest);text-transform:uppercase"><?php echo esc_html__( 'Shape the Future', 'ls-theme' ); ?></p>
+			<!-- /wp:paragraph -->
+		</div>
+		<!-- /wp:group -->
+
+		<!-- wp:heading {"level":2,"className":"ls-careers-statement","style":{"typography":{"fontWeight":"var:custom|typography|font-weight|extrabold","letterSpacing":"var:custom|typography|letter-spacing|tight","lineHeight":"var:custom|line-height|heading-snug"}},"fontSize":"900"} -->
+		<h2 class="wp-block-heading ls-careers-statement has-900-font-size" style="font-weight:var(--wp--custom--typography--font-weight--extrabold);letter-spacing:var(--wp--custom--typography--letter-spacing--tight);line-height:var(--wp--custom--line-height--heading-snug)"><?php echo esc_html__( 'Shape the Future of Digital Publishing and', 'ls-theme' ); ?> <span style="color:var(--wp--custom--color--text--brand)"><?php echo esc_html__( 'Ride the AI Wave.', 'ls-theme' ); ?></span></h2>
+		<!-- /wp:heading -->
+
+		<!-- wp:group {"layout":{"type":"constrained","contentSize":"720px","justifyContent":"left"}} -->
+		<div class="wp-block-group">
+			<!-- wp:paragraph {"style":{"color":{"text":"var(--wp--custom--color--text--muted)"}},"fontSize":"300"} -->
+			<p class="has-text-color has-300-font-size" style="color:var(--wp--custom--color--text--muted)"><?php echo esc_html__( 'At LightSpeed, we are always looking for passionate, self-motivated individuals to join our globally distributed team. As an AI-ready WordPress engineering partner, we are fundamentally transforming how websites are designed, built, and maintained. If you are excited by modern WordPress block development, token-driven design systems, and the integration of artificial intelligence, you belong here.', 'ls-theme' ); ?></p>
+			<!-- /wp:paragraph -->
+		</div>
+		<!-- /wp:group -->
+	</div>
+	<!-- /wp:group -->
+</section>
+<!-- /wp:group -->
diff --git a/src/scss/structural/about-careers.scss b/src/scss/structural/about-careers.scss
new file mode 100644
index 0000000..6b19824
--- /dev/null
+++ b/src/scss/structural/about-careers.scss
@@ -0,0 +1,76 @@
+/********** About Careers (About Careers page patterns) **********/
+
+/*
+ * Everything the block attributes can express (type, colours, spacing, the Card - Plain shells, the
+ * bento grid and its column spans, the staircase of card heights and the icon wells) is authored in
+ * the pattern files. This file owns only what JSON cannot: a measure in ch, text-wrap, inline-style
+ * overrides on small screens and the grid reflow. The mobile rules use WordPress's own breakpoints
+ * (781.98px for the columns stacking, 599.98px for the small-screen step).
+ */
+
+// JSON limitation: max-width in ch and text-wrap have no heading-block key. They keep the very large
+// statement breaking onto short lines. The extra class lifts it above core's constrained-layout
+// max-width rule, which loads later at equal specificity — see AGENTS.md Theme-First Approach
+.wp-block-heading.ls-careers-statement {
+  max-width: 18ch;
+  text-wrap: balance;
+}
+
+// JSON limitation: text-wrap has no paragraph-block key — see AGENTS.md Theme-First Approach
+.ls-careers-goal {
+  text-wrap: balance;
+}
+
+@media (max-width: 781.98px) {
+  // JSON limitation: the image block prints its aspect ratio as an inline style, and breakpoint
+  // overrides have no theme.json equivalent, so the banner crop needs !important to change on
+  // small screens — see AGENTS.md Theme-First Approach
+  .ls-careers-hero__photo img {
+    aspect-ratio: 16 / 10 !important;
+  }
+
+  // JSON limitation: a core grid has one column count for every width, and the child column spans
+  // are generated single-class rules; the two-class selectors here override both at the stacking
+  // breakpoint — see AGENTS.md Theme-First Approach
+  .ls-bento.wp-block-group {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
+  .ls-bento > .ls-bento__card {
+    grid-column: span 1;
+  }
+
+  .ls-bento > .ls-bento__card:last-child {
+    grid-column: span 2;
+  }
+
+  // JSON limitation: the cards' minimum heights are inline styles, so dropping them where the
+  // columns stack needs !important — see AGENTS.md Theme-First Approach
+  .ls-stairs__card {
+    min-height: 0 !important;
+  }
+}
+
+@media (max-width: 599.98px) {
+  .ls-bento.wp-block-group {
+    grid-template-columns: minmax(0, 1fr);
+  }
+
+  .ls-bento > .ls-bento__card,
+  .ls-bento > .ls-bento__card:last-child {
+    grid-column: auto;
+  }
+
+  // JSON limitation: inline min-height needs !important to drop on small screens — see AGENTS.md
+  // Theme-First Approach
+  .ls-bento__card {
+    min-height: 0 !important;
+  }
+
+  // JSON limitation: the full-width card's row layout is a generated container class, so turning it
+  // into a column on small screens needs a breakpoint rule — see AGENTS.md Theme-First Approach
+  .ls-bento > .ls-bento__card:last-child {
+    align-items: flex-start;
+    flex-direction: column;
+  }
+}
diff --git a/styles/dark.json b/styles/dark.json
index b1969a0..37cafa7 100644
--- a/styles/dark.json
+++ b/styles/dark.json
@@ -88,6 +88,9 @@
 					"evolve-on-dark": "var:preset|color|phase-six",
 					"evolve-on-dark-card": "var:preset|color|phase-six-light"
 				},
+				"accent": {
+					"warm": "var:preset|color|warm-300"
+				},
 				"status": {
 					"success": "var:preset|color|success-foreground"
 				},
diff --git a/theme.json b/theme.json
index 452072e..6a886a9 100644
--- a/theme.json
+++ b/theme.json
@@ -502,6 +502,16 @@
                     "name": "Phase Six Light",
                     "slug": "phase-six-light",
                     "color": "#A3A5FB"
+                },
+                {
+                    "name": "Warm 300",
+                    "slug": "warm-300",
+                    "color": "#FDBA74"
+                },
+                {
+                    "name": "Warm 700",
+                    "slug": "warm-700",
+                    "color": "#C2410C"
                 }
             ]
         },
@@ -610,6 +620,9 @@
                     "evolve-on-dark": "var:preset|color|phase-six",
                     "evolve-on-dark-card": "var:preset|color|phase-six-mid"
                 },
+                "accent": {
+                    "warm": "var:preset|color|warm-700"
+                },
                 "status": {
                     "success": "var:preset|color|success-strong"
                 },

From 1c50ad6206834c3d743262044db33f5ff848af0f Mon Sep 17 00:00:00 2001
From: Brandonma21 <Brandonmarshall101@gmail.com>
Date: Wed, 21 Oct 2026 15:49:53 +0200
Subject: [PATCH 2/4] design: careers-page - Turn the Careers hero into a split
 with the team photo on the right (LSA-197)

Hero
- Replace Hero - Lede Wide Photo with Hero - Split Photo
- Put the eyebrow, H1 and lede on the left and the team photo on the right
- Show the photo at its natural 3:2 ratio so it is no longer stretched or cropped

Cleanup
- Remove the unused hero photo crop rule from about-careers.scss
- Drop the hero class from the about-careers marker list in inc/animations.php
- Rebuild about-careers.css
---
 assets/css/about-careers.css           |  2 +-
 inc/animations.php                     |  7 ++-
 patterns/hero/hero-lede-wide-photo.php | 60 ----------------------
 patterns/hero/hero-split-photo.php     | 69 ++++++++++++++++++++++++++
 src/scss/structural/about-careers.scss |  7 ---
 5 files changed, 73 insertions(+), 72 deletions(-)
 delete mode 100644 patterns/hero/hero-lede-wide-photo.php
 create mode 100644 patterns/hero/hero-split-photo.php

diff --git a/assets/css/about-careers.css b/assets/css/about-careers.css
index b2ad4f3..019f086 100644
--- a/assets/css/about-careers.css
+++ b/assets/css/about-careers.css
@@ -1 +1 @@
-.wp-block-heading.ls-careers-statement{max-width:18ch;text-wrap:balance}.ls-careers-goal{text-wrap:balance}@media(max-width: 781.98px){.ls-careers-hero__photo img{aspect-ratio:16/10 !important}.ls-bento.wp-block-group{grid-template-columns:repeat(2, minmax(0, 1fr))}.ls-bento>.ls-bento__card{grid-column:span 1}.ls-bento>.ls-bento__card:last-child{grid-column:span 2}.ls-stairs__card{min-height:0 !important}}@media(max-width: 599.98px){.ls-bento.wp-block-group{grid-template-columns:minmax(0, 1fr)}.ls-bento>.ls-bento__card,.ls-bento>.ls-bento__card:last-child{grid-column:auto}.ls-bento__card{min-height:0 !important}.ls-bento>.ls-bento__card:last-child{align-items:flex-start;flex-direction:column}}
+.wp-block-heading.ls-careers-statement{max-width:18ch;text-wrap:balance}.ls-careers-goal{text-wrap:balance}@media(max-width: 781.98px){.ls-bento.wp-block-group{grid-template-columns:repeat(2, minmax(0, 1fr))}.ls-bento>.ls-bento__card{grid-column:span 1}.ls-bento>.ls-bento__card:last-child{grid-column:span 2}.ls-stairs__card{min-height:0 !important}}@media(max-width: 599.98px){.ls-bento.wp-block-group{grid-template-columns:minmax(0, 1fr)}.ls-bento>.ls-bento__card,.ls-bento>.ls-bento__card:last-child{grid-column:auto}.ls-bento__card{min-height:0 !important}.ls-bento>.ls-bento__card:last-child{align-items:flex-start;flex-direction:column}}
diff --git a/inc/animations.php b/inc/animations.php
index 5d10610..ca043aa 100644
--- a/inc/animations.php
+++ b/inc/animations.php
@@ -114,7 +114,7 @@ function ls_theme_get_bundle_render_markers() {
 		'legal-page'                => array( 'classes' => array( 'ls-page-hero', 'ls-legal-toc', 'ls-legal-body', 'ls-related-trust-grid' ) ),
 		'hero-split-form'           => array( 'classes' => array( 'ls-hero-form-intro' ) ),
 		'scroll-timeline'           => array( 'classes' => array( 'ls-scroll-timeline' ) ),
-		'about-careers'             => array( 'classes' => array( 'ls-careers-hero', 'ls-careers-statement', 'ls-careers-goal', 'ls-bento', 'ls-stairs' ) ),
+		'about-careers'             => array( 'classes' => array( 'ls-careers-statement', 'ls-careers-goal', 'ls-bento', 'ls-stairs' ) ),
 		'details-card-grid'         => array( 'classes' => array( 'ls-year-card' ) ),
 	);
 }
@@ -737,9 +737,8 @@ function ls_theme_get_effect_styles( $context = 'front' ) {
 			'handle'    => 'ls-theme-about-careers',
 			'path'      => 'assets/css/about-careers.css',
 			'contexts'  => array( 'front', 'editor' ),
-			// The About Careers page patterns: the statement measure, the bento and staircase reflow and
-			// the hero photo crop on small screens. The render-marker fallback loads it wherever the
-			// patterns render.
+			// The About Careers page patterns: the statement measure and the bento and staircase reflow on
+			// small screens. The render-marker fallback loads it wherever the patterns render.
 			'condition' => static function () {
 				return is_page( 'about/careers' );
 			},
diff --git a/patterns/hero/hero-lede-wide-photo.php b/patterns/hero/hero-lede-wide-photo.php
deleted file mode 100644
index 9132dee..0000000
--- a/patterns/hero/hero-lede-wide-photo.php
+++ /dev/null
@@ -1,60 +0,0 @@
-<?php
-/**
- * Title: Hero - Lede Wide Photo
- * Slug: ls-theme/hero-lede-wide-photo
- * Categories: hero
- * Block Types: core/pattern
- * Description: A left-aligned page hero for careers and team pages on the page canvas: breadcrumb trail, dot eyebrow, a large H1 with one brand-coloured word, a lede paragraph, and a wide team photo below. The shared corner-glow class supplies the soft background glow. The photo is a core/image cropped to a 21:8 banner (16:10 on small screens, in src/scss/structural/about-careers.scss because the aspect ratio is an inline style); swap it for any image from the Media Library. Falls back to core/group because no semantic core block fits a hero. Adapts between light and dark mode through surface, text, border and brand tokens. Authored for the About Careers page; edit the eyebrow, heading, lede and photo after inserting.
- * Keywords: hero, careers, team, photo, about, section
- * Viewport Width: 1280
- * Inserter: true
- *
- * @package ls-theme
- */
-
-$ls_hero_photo_url = 'https://ls-agency.lightspeedwp.dev/wp-content/uploads/2024/06/lightspeed-team-photo-edited.png';
-?>
-<!-- wp:group {"align":"full","tagName":"section","className":"ls-corner-glow ls-careers-hero","style":{"border":{"bottom":{"color":"var:custom|color|border|card","style":"solid","width":"1px"}},"spacing":{"margin":{"top":"0"},"padding":{"top":"var:preset|spacing|80","right":"var:preset|spacing|30","bottom":"var:preset|spacing|80","left":"var:preset|spacing|30"}}},"layout":{"type":"constrained"}} -->
-<section class="wp-block-group alignfull ls-corner-glow ls-careers-hero" style="border-bottom-color:var(--wp--custom--color--border--card);border-bottom-style:solid;border-bottom-width:1px;margin-top:0;padding-top:var(--wp--preset--spacing--80);padding-right:var(--wp--preset--spacing--30);padding-bottom:var(--wp--preset--spacing--80);padding-left:var(--wp--preset--spacing--30)">
-
-	<!-- wp:group {"align":"wide","style":{"spacing":{"blockGap":"var:preset|spacing|60"}},"layout":{"type":"default"}} -->
-	<div class="wp-block-group alignwide">
-
-		<!-- wp:group {"style":{"spacing":{"blockGap":"var:preset|spacing|30"}},"layout":{"type":"default"}} -->
-		<div class="wp-block-group">
-
-			<?php if ( WP_Block_Type_Registry::get_instance()->is_registered( 'yoast-seo/breadcrumbs' ) ) : ?>
-			<!-- wp:yoast-seo/breadcrumbs {"className":"alignwide"} /-->
-			<?php endif; ?>
-
-			<!-- wp:group {"layout":{"type":"flex","flexWrap":"nowrap","justifyContent":"left","verticalAlignment":"center"}} -->
-			<div class="wp-block-group">
-				<!-- wp:icon {"icon":"lightspeed/dot","className":"has-text-color","style":{"color":{"text":"var(--wp--custom--color--text--brand)"},"dimensions":{"width":"8px"}}} /-->
-
-				<!-- wp:paragraph {"style":{"typography":{"textTransform":"uppercase","letterSpacing":"var:custom|typography|letter-spacing|widest","fontWeight":"var:custom|typography|font-weight|semibold"},"color":{"text":"var(--wp--custom--color--text--brand)"}},"fontSize":"100"} -->
-				<p class="has-text-color has-100-font-size" style="color:var(--wp--custom--color--text--brand);font-weight:var(--wp--custom--typography--font-weight--semibold);letter-spacing:var(--wp--custom--typography--letter-spacing--widest);text-transform:uppercase"><?php echo esc_html__( 'About – Careers', 'ls-theme' ); ?></p>
-				<!-- /wp:paragraph -->
-			</div>
-			<!-- /wp:group -->
-
-			<!-- wp:heading {"level":1,"style":{"typography":{"fontWeight":"var:custom|typography|font-weight|extrabold","letterSpacing":"var:custom|typography|letter-spacing|tight","lineHeight":"var:custom|line-height|heading-tight"}},"fontSize":"900"} -->
-			<h1 class="wp-block-heading has-900-font-size" style="font-weight:var(--wp--custom--typography--font-weight--extrabold);letter-spacing:var(--wp--custom--typography--letter-spacing--tight);line-height:var(--wp--custom--line-height--heading-tight)"><?php echo esc_html__( 'Careers at', 'ls-theme' ); ?> <span style="color:var(--wp--custom--color--text--brand)"><?php echo esc_html__( 'LightSpeed', 'ls-theme' ); ?></span></h1>
-			<!-- /wp:heading -->
-
-			<!-- wp:group {"layout":{"type":"constrained","contentSize":"720px","justifyContent":"left"}} -->
-			<div class="wp-block-group">
-				<!-- wp:paragraph {"style":{"color":{"text":"var(--wp--custom--color--text--muted)"}},"fontSize":"300"} -->
-				<p class="has-text-color has-300-font-size" style="color:var(--wp--custom--color--text--muted)"><?php echo esc_html__( 'We’re interested in thoughtful people who care about WordPress, design systems, maintainable work and the kind of collaboration that improves with clarity.', 'ls-theme' ); ?></p>
-				<!-- /wp:paragraph -->
-			</div>
-			<!-- /wp:group -->
-		</div>
-		<!-- /wp:group -->
-
-		<!-- wp:image {"aspectRatio":"21/8","scale":"cover","width":"100%","sizeSlug":"full","linkDestination":"none","className":"ls-careers-hero__photo","style":{"border":{"radius":"var:preset|border-radius|400"}}} -->
-		<figure class="wp-block-image size-full has-custom-border ls-careers-hero__photo"><img src="<?php echo esc_url( $ls_hero_photo_url ); ?>" alt="<?php echo esc_attr__( 'The LightSpeed team together', 'ls-theme' ); ?>" style="border-radius:var(--wp--preset--border-radius--400);aspect-ratio:21/8;object-fit:cover;width:100%"/></figure>
-		<!-- /wp:image -->
-	</div>
-	<!-- /wp:group -->
-</section>
-<!-- /wp:group -->
diff --git a/patterns/hero/hero-split-photo.php b/patterns/hero/hero-split-photo.php
new file mode 100644
index 0000000..d00a9ff
--- /dev/null
+++ b/patterns/hero/hero-split-photo.php
@@ -0,0 +1,69 @@
+<?php
+/**
+ * Title: Hero - Split Photo
+ * Slug: ls-theme/hero-split-photo
+ * Categories: hero
+ * Block Types: core/pattern
+ * Description: A split hero for careers and team pages: breadcrumb trail across the top, then on the left (about 58%) a dot eyebrow, a large H1 with one brand-coloured word and a lede paragraph, and on the right (about 42%) a team photo cropped to the image's natural 3:2 ratio with a large rounded corner. The shared corner-glow class supplies the soft background glow. The photo is a core/image, so swap it for any image from the Media Library; the columns stack on mobile with the photo below the text. Falls back to core/columns and core/group because no semantic core block fits a split hero. Adapts between light and dark mode through surface, text, border and brand tokens. Authored for the About Careers page; edit the eyebrow, heading, lede and photo after inserting.
+ * Keywords: hero, split, careers, team, photo, about, section
+ * Viewport Width: 1280
+ * Inserter: true
+ *
+ * @package ls-theme
+ */
+
+$ls_hero_photo_url = 'https://ls-agency.lightspeedwp.dev/wp-content/uploads/2024/06/lightspeed-team-photo-edited.png';
+?>
+<!-- wp:group {"align":"full","tagName":"section","className":"ls-corner-glow","style":{"border":{"bottom":{"color":"var:custom|color|border|card","style":"solid","width":"1px"}},"spacing":{"margin":{"top":"0"},"padding":{"top":"var:preset|spacing|80","right":"var:preset|spacing|30","bottom":"var:preset|spacing|80","left":"var:preset|spacing|30"}}},"layout":{"type":"constrained"}} -->
+<section class="wp-block-group alignfull ls-corner-glow" style="border-bottom-color:var(--wp--custom--color--border--card);border-bottom-style:solid;border-bottom-width:1px;margin-top:0;padding-top:var(--wp--preset--spacing--80);padding-right:var(--wp--preset--spacing--30);padding-bottom:var(--wp--preset--spacing--80);padding-left:var(--wp--preset--spacing--30)">
+
+	<!-- wp:group {"align":"wide","style":{"spacing":{"blockGap":"var:preset|spacing|30"}},"layout":{"type":"default"}} -->
+	<div class="wp-block-group alignwide">
+
+		<?php if ( WP_Block_Type_Registry::get_instance()->is_registered( 'yoast-seo/breadcrumbs' ) ) : ?>
+		<!-- wp:yoast-seo/breadcrumbs {"className":"alignwide"} /-->
+		<?php endif; ?>
+
+		<!-- wp:columns {"verticalAlignment":"center","style":{"spacing":{"blockGap":{"left":"var:preset|spacing|60"}}}} -->
+		<div class="wp-block-columns are-vertically-aligned-center">
+
+			<!-- wp:column {"verticalAlignment":"center","width":"58%","style":{"spacing":{"blockGap":"var:preset|spacing|30"}}} -->
+			<div class="wp-block-column is-vertically-aligned-center" style="flex-basis:58%">
+
+				<!-- wp:group {"layout":{"type":"flex","flexWrap":"nowrap","justifyContent":"left","verticalAlignment":"center"}} -->
+				<div class="wp-block-group">
+					<!-- wp:icon {"icon":"lightspeed/dot","className":"has-text-color","style":{"color":{"text":"var(--wp--custom--color--text--brand)"},"dimensions":{"width":"8px"}}} /-->
+
+					<!-- wp:paragraph {"style":{"typography":{"textTransform":"uppercase","letterSpacing":"var:custom|typography|letter-spacing|widest","fontWeight":"var:custom|typography|font-weight|semibold"},"color":{"text":"var(--wp--custom--color--text--brand)"}},"fontSize":"100"} -->
+					<p class="has-text-color has-100-font-size" style="color:var(--wp--custom--color--text--brand);font-weight:var(--wp--custom--typography--font-weight--semibold);letter-spacing:var(--wp--custom--typography--letter-spacing--widest);text-transform:uppercase"><?php echo esc_html__( 'About – Careers', 'ls-theme' ); ?></p>
+					<!-- /wp:paragraph -->
+				</div>
+				<!-- /wp:group -->
+
+				<!-- wp:heading {"level":1,"style":{"typography":{"fontWeight":"var:custom|typography|font-weight|extrabold","letterSpacing":"var:custom|typography|letter-spacing|tight","lineHeight":"var:custom|line-height|heading-tight"}},"fontSize":"900"} -->
+				<h1 class="wp-block-heading has-900-font-size" style="font-weight:var(--wp--custom--typography--font-weight--extrabold);letter-spacing:var(--wp--custom--typography--letter-spacing--tight);line-height:var(--wp--custom--line-height--heading-tight)"><?php echo esc_html__( 'Careers at', 'ls-theme' ); ?> <span style="color:var(--wp--custom--color--text--brand)"><?php echo esc_html__( 'LightSpeed', 'ls-theme' ); ?></span></h1>
+				<!-- /wp:heading -->
+
+				<!-- wp:group {"layout":{"type":"constrained","contentSize":"720px","justifyContent":"left"}} -->
+				<div class="wp-block-group">
+					<!-- wp:paragraph {"style":{"color":{"text":"var(--wp--custom--color--text--muted)"}},"fontSize":"300"} -->
+					<p class="has-text-color has-300-font-size" style="color:var(--wp--custom--color--text--muted)"><?php echo esc_html__( 'We’re interested in thoughtful people who care about WordPress, design systems, maintainable work and the kind of collaboration that improves with clarity.', 'ls-theme' ); ?></p>
+					<!-- /wp:paragraph -->
+				</div>
+				<!-- /wp:group -->
+			</div>
+			<!-- /wp:column -->
+
+			<!-- wp:column {"verticalAlignment":"center","width":"42%"} -->
+			<div class="wp-block-column is-vertically-aligned-center" style="flex-basis:42%">
+				<!-- wp:image {"aspectRatio":"3/2","scale":"cover","width":"100%","sizeSlug":"full","linkDestination":"none","style":{"border":{"radius":"var:preset|border-radius|400"}}} -->
+				<figure class="wp-block-image size-full has-custom-border"><img src="<?php echo esc_url( $ls_hero_photo_url ); ?>" alt="<?php echo esc_attr__( 'The LightSpeed team together', 'ls-theme' ); ?>" style="border-radius:var(--wp--preset--border-radius--400);aspect-ratio:3/2;object-fit:cover;width:100%"/></figure>
+				<!-- /wp:image -->
+			</div>
+			<!-- /wp:column -->
+		</div>
+		<!-- /wp:columns -->
+	</div>
+	<!-- /wp:group -->
+</section>
+<!-- /wp:group -->
diff --git a/src/scss/structural/about-careers.scss b/src/scss/structural/about-careers.scss
index 6b19824..e517d76 100644
--- a/src/scss/structural/about-careers.scss
+++ b/src/scss/structural/about-careers.scss
@@ -22,13 +22,6 @@
 }
 
 @media (max-width: 781.98px) {
-  // JSON limitation: the image block prints its aspect ratio as an inline style, and breakpoint
-  // overrides have no theme.json equivalent, so the banner crop needs !important to change on
-  // small screens — see AGENTS.md Theme-First Approach
-  .ls-careers-hero__photo img {
-    aspect-ratio: 16 / 10 !important;
-  }
-
   // JSON limitation: a core grid has one column count for every width, and the child column spans
   // are generated single-class rules; the two-class selectors here override both at the stacking
   // breakpoint — see AGENTS.md Theme-First Approach

From a08488cf2a367cceba3ce008735fc1403769efa2 Mon Sep 17 00:00:00 2001
From: Brandonma21 <Brandonmarshall101@gmail.com>
Date: Wed, 21 Oct 2026 15:56:03 +0200
Subject: [PATCH 3/4] design: careers-page - Put each goal sentence on its own
 line and make the Growth cards equal height (LSA-197)

Statement
- Let the closing goal statement span the full width instead of an 800px box
- Break the line between the two sentences so each sits on its own line

Growth cards
- Replace the staggered columns with a three-column grid so the cards share one height
- Rename Section - Split Intro Staggered Icon Cards to Section - Intro Icon Card Trio
- Remove the staircase marker class and the mobile min-height reset

Cleanup
- Update the about-careers marker list in inc/animations.php
- Rebuild about-careers.css
---
 assets/css/about-careers.css                  |  2 +-
 inc/animations.php                            |  5 +-
 ...con-cards.php => intro-icon-card-trio.php} | 62 ++++++++-----------
 .../sections/split-text-pair-statement.php    |  6 +-
 src/scss/structural/about-careers.scss        |  8 +--
 5 files changed, 34 insertions(+), 49 deletions(-)
 rename patterns/sections/{split-intro-staggered-icon-cards.php => intro-icon-card-trio.php} (52%)

diff --git a/assets/css/about-careers.css b/assets/css/about-careers.css
index 019f086..603f1b2 100644
--- a/assets/css/about-careers.css
+++ b/assets/css/about-careers.css
@@ -1 +1 @@
-.wp-block-heading.ls-careers-statement{max-width:18ch;text-wrap:balance}.ls-careers-goal{text-wrap:balance}@media(max-width: 781.98px){.ls-bento.wp-block-group{grid-template-columns:repeat(2, minmax(0, 1fr))}.ls-bento>.ls-bento__card{grid-column:span 1}.ls-bento>.ls-bento__card:last-child{grid-column:span 2}.ls-stairs__card{min-height:0 !important}}@media(max-width: 599.98px){.ls-bento.wp-block-group{grid-template-columns:minmax(0, 1fr)}.ls-bento>.ls-bento__card,.ls-bento>.ls-bento__card:last-child{grid-column:auto}.ls-bento__card{min-height:0 !important}.ls-bento>.ls-bento__card:last-child{align-items:flex-start;flex-direction:column}}
+.wp-block-heading.ls-careers-statement{max-width:18ch;text-wrap:balance}.ls-careers-goal{text-wrap:balance}@media(max-width: 781.98px){.ls-bento.wp-block-group{grid-template-columns:repeat(2, minmax(0, 1fr))}.ls-bento>.ls-bento__card{grid-column:span 1}.ls-bento>.ls-bento__card:last-child{grid-column:span 2}}@media(max-width: 599.98px){.ls-bento.wp-block-group{grid-template-columns:minmax(0, 1fr)}.ls-bento>.ls-bento__card,.ls-bento>.ls-bento__card:last-child{grid-column:auto}.ls-bento__card{min-height:0 !important}.ls-bento>.ls-bento__card:last-child{align-items:flex-start;flex-direction:column}}
diff --git a/inc/animations.php b/inc/animations.php
index ca043aa..f76463f 100644
--- a/inc/animations.php
+++ b/inc/animations.php
@@ -114,7 +114,7 @@ function ls_theme_get_bundle_render_markers() {
 		'legal-page'                => array( 'classes' => array( 'ls-page-hero', 'ls-legal-toc', 'ls-legal-body', 'ls-related-trust-grid' ) ),
 		'hero-split-form'           => array( 'classes' => array( 'ls-hero-form-intro' ) ),
 		'scroll-timeline'           => array( 'classes' => array( 'ls-scroll-timeline' ) ),
-		'about-careers'             => array( 'classes' => array( 'ls-careers-statement', 'ls-careers-goal', 'ls-bento', 'ls-stairs' ) ),
+		'about-careers'             => array( 'classes' => array( 'ls-careers-statement', 'ls-careers-goal', 'ls-bento' ) ),
 		'details-card-grid'         => array( 'classes' => array( 'ls-year-card' ) ),
 	);
 }
@@ -737,8 +737,7 @@ function ls_theme_get_effect_styles( $context = 'front' ) {
 			'handle'    => 'ls-theme-about-careers',
 			'path'      => 'assets/css/about-careers.css',
 			'contexts'  => array( 'front', 'editor' ),
-			// The About Careers page patterns: the statement measure and the bento and staircase reflow on
-			// small screens. The render-marker fallback loads it wherever the patterns render.
+			// The About Careers page patterns: the statement measure and the bento reflow on small screens. The render-marker fallback loads it wherever the patterns render.
 			'condition' => static function () {
 				return is_page( 'about/careers' );
 			},
diff --git a/patterns/sections/split-intro-staggered-icon-cards.php b/patterns/sections/intro-icon-card-trio.php
similarity index 52%
rename from patterns/sections/split-intro-staggered-icon-cards.php
rename to patterns/sections/intro-icon-card-trio.php
index 07144a4..2db61d6 100644
--- a/patterns/sections/split-intro-staggered-icon-cards.php
+++ b/patterns/sections/intro-icon-card-trio.php
@@ -1,35 +1,32 @@
 <?php
 /**
- * Title: Section - Split Intro Staggered Icon Cards
- * Slug: ls-theme/split-intro-staggered-icon-cards
+ * Title: Section - Intro Icon Card Trio
+ * Slug: ls-theme/intro-icon-card-trio
  * Categories: featured
  * Block Types: core/pattern
- * Description: A "growth and learning" section on the page canvas: a dot eyebrow, H2 and two intro paragraphs above a row of three icon cards of rising height, all sitting on the same bottom edge like steps. Each card is a surface.card card with a brand Icon block well pinned to the top, an H3 and a paragraph pinned to the bottom. The staircase comes from core/columns with bottom vertical alignment and a different minimum height on each card, so it needs no custom layout code; the columns stack on mobile and src/scss/structural/about-careers.scss only drops the minimum heights there, because they are inline styles. Falls back to core/columns and core/group because no semantic core block fits a staggered card. Adapts between light and dark mode through surface, text, border and brand tokens. Authored for the About Careers page "Growth and Upskilling" section; edit the copy and icons after inserting.
- * Keywords: cards, icons, staggered, staircase, growth, careers, about, section
+ * Description: A "growth and learning" section on the page canvas: a dot eyebrow, H2 and two intro paragraphs above a row of three equal-height icon cards. Each card is a surface.card card with a brand Icon block well pinned to the top and an H3 and paragraph pinned to the bottom. The row is a core/group grid with a minimum column width, so the cards share one height (grid items stretch) and wrap to a single column on small screens without any custom CSS. Falls back to core/group because no semantic core block fits an icon card. Adapts between light and dark mode through surface, text, border and brand tokens. Authored for the About Careers page "Growth and Upskilling" section; edit the copy and icons after inserting.
+ * Keywords: cards, icons, trio, growth, careers, about, section
  * Viewport Width: 1280
  * Inserter: true
  *
  * @package ls-theme
  */
 
-$ls_stair_cards = array(
+$ls_trio_cards = array(
 	array(
 		'icon'        => 'users-three',
 		'title'       => __( 'AI Study Groups & Hackathons', 'ls-theme' ),
 		'description' => __( 'Dedicated time to experiment with new AI capabilities, APIs, and prompt engineering.', 'ls-theme' ),
-		'height'      => '260px',
 	),
 	array(
 		'icon'        => 'graduation-cap',
 		'title'       => __( 'Mentorship', 'ls-theme' ),
 		'description' => __( 'We actively support junior developers through structured internships and senior mentorship.', 'ls-theme' ),
-		'height'      => '340px',
 	),
 	array(
 		'icon'        => 'book',
 		'title'       => __( 'Continuous Learning Allowances', 'ls-theme' ),
 		'description' => __( 'We provide resources to help you master GitHub, Copilot, and modern block theme practices.', 'ls-theme' ),
-		'height'      => '420px',
 	),
 );
 ?>
@@ -70,38 +67,33 @@
 		</div>
 		<!-- /wp:group -->
 
-		<!-- wp:columns {"verticalAlignment":"bottom","className":"ls-stairs","style":{"spacing":{"blockGap":{"top":"var:preset|spacing|30","left":"var:preset|spacing|30"}}}} -->
-		<div class="wp-block-columns are-vertically-aligned-bottom ls-stairs">
-			<?php foreach ( $ls_stair_cards as $ls_stair_card ) : ?>
-
-			<!-- wp:column {"verticalAlignment":"bottom"} -->
-			<div class="wp-block-column is-vertically-aligned-bottom">
-				<!-- wp:group {"tagName":"article","className":"ls-stairs__card","style":{"dimensions":{"minHeight":"<?php echo esc_attr( $ls_stair_card['height'] ); ?>"},"color":{"background":"var:custom|color|surface|card"},"border":{"color":"var:custom|color|border|card","radius":"var:preset|border-radius|300","style":"solid","width":"1px"},"spacing":{"blockGap":"var:preset|spacing|10","padding":{"top":"var:preset|spacing|30","right":"var:preset|spacing|30","bottom":"var:preset|spacing|30","left":"var:preset|spacing|30"}}},"layout":{"type":"flex","orientation":"vertical","justifyContent":"stretch","verticalAlignment":"space-between","flexWrap":"nowrap"}} -->
-				<article class="wp-block-group ls-stairs__card has-border-color has-background" style="border-color:var(--wp--custom--color--border--card);border-style:solid;border-width:1px;border-radius:var(--wp--preset--border-radius--300);background-color:var(--wp--custom--color--surface--card);min-height:<?php echo esc_attr( $ls_stair_card['height'] ); ?>;padding-top:var(--wp--preset--spacing--30);padding-right:var(--wp--preset--spacing--30);padding-bottom:var(--wp--preset--spacing--30);padding-left:var(--wp--preset--spacing--30)">
-					<!-- wp:group {"className":"ls-icon-well-brand ls-stairs__icon"} -->
-					<div class="wp-block-group ls-icon-well-brand ls-stairs__icon">
-						<!-- wp:icon {"icon":"lightspeed/<?php echo esc_attr( $ls_stair_card['icon'] ); ?>","className":"has-text-color","style":{"color":{"text":"var(--wp--custom--color--text--brand)"},"dimensions":{"width":"20px"}}} /-->
-					</div>
-					<!-- /wp:group -->
+		<!-- wp:group {"style":{"spacing":{"blockGap":"var:preset|spacing|30"}},"layout":{"type":"grid","columnCount":3,"minimumColumnWidth":"18rem"}} -->
+		<div class="wp-block-group">
+			<?php foreach ( $ls_trio_cards as $ls_trio_card ) : ?>
+			<!-- wp:group {"tagName":"article","style":{"color":{"background":"var:custom|color|surface|card"},"border":{"color":"var:custom|color|border|card","radius":"var:preset|border-radius|300","style":"solid","width":"1px"},"spacing":{"blockGap":"var:preset|spacing|10","padding":{"top":"var:preset|spacing|30","right":"var:preset|spacing|30","bottom":"var:preset|spacing|30","left":"var:preset|spacing|30"}}},"layout":{"type":"flex","orientation":"vertical","justifyContent":"stretch","verticalAlignment":"space-between","flexWrap":"nowrap"}} -->
+			<article class="wp-block-group has-border-color has-background" style="border-color:var(--wp--custom--color--border--card);border-style:solid;border-width:1px;border-radius:var(--wp--preset--border-radius--300);background-color:var(--wp--custom--color--surface--card);padding-top:var(--wp--preset--spacing--30);padding-right:var(--wp--preset--spacing--30);padding-bottom:var(--wp--preset--spacing--30);padding-left:var(--wp--preset--spacing--30)">
+				<!-- wp:group {"className":"ls-icon-well-brand"} -->
+				<div class="wp-block-group ls-icon-well-brand">
+					<!-- wp:icon {"icon":"lightspeed/<?php echo esc_attr( $ls_trio_card['icon'] ); ?>","className":"has-text-color","style":{"color":{"text":"var(--wp--custom--color--text--brand)"},"dimensions":{"width":"20px"}}} /-->
+				</div>
+				<!-- /wp:group -->
 
-					<!-- wp:group {"style":{"spacing":{"blockGap":"var:preset|spacing|10"}},"layout":{"type":"default"}} -->
-					<div class="wp-block-group">
-						<!-- wp:heading {"level":3,"style":{"typography":{"fontWeight":"var:custom|typography|font-weight|bold","letterSpacing":"var:custom|typography|letter-spacing|tight"}},"fontSize":"300"} -->
-						<h3 class="wp-block-heading has-300-font-size" style="font-weight:var(--wp--custom--typography--font-weight--bold);letter-spacing:var(--wp--custom--typography--letter-spacing--tight)"><?php echo esc_html( $ls_stair_card['title'] ); ?></h3>
-						<!-- /wp:heading -->
+				<!-- wp:group {"style":{"spacing":{"blockGap":"var:preset|spacing|10"}},"layout":{"type":"default"}} -->
+				<div class="wp-block-group">
+					<!-- wp:heading {"level":3,"style":{"typography":{"fontWeight":"var:custom|typography|font-weight|bold","letterSpacing":"var:custom|typography|letter-spacing|tight"}},"fontSize":"300"} -->
+					<h3 class="wp-block-heading has-300-font-size" style="font-weight:var(--wp--custom--typography--font-weight--bold);letter-spacing:var(--wp--custom--typography--letter-spacing--tight)"><?php echo esc_html( $ls_trio_card['title'] ); ?></h3>
+					<!-- /wp:heading -->
 
-						<!-- wp:paragraph {"style":{"color":{"text":"var(--wp--custom--color--text--muted)"}},"fontSize":"200"} -->
-						<p class="has-text-color has-200-font-size" style="color:var(--wp--custom--color--text--muted)"><?php echo esc_html( $ls_stair_card['description'] ); ?></p>
-						<!-- /wp:paragraph -->
-					</div>
-					<!-- /wp:group -->
-				</article>
+					<!-- wp:paragraph {"style":{"color":{"text":"var(--wp--custom--color--text--muted)"}},"fontSize":"200"} -->
+					<p class="has-text-color has-200-font-size" style="color:var(--wp--custom--color--text--muted)"><?php echo esc_html( $ls_trio_card['description'] ); ?></p>
+					<!-- /wp:paragraph -->
+				</div>
 				<!-- /wp:group -->
-			</div>
-			<!-- /wp:column -->
+			</article>
+			<!-- /wp:group -->
 			<?php endforeach; ?>
 		</div>
-		<!-- /wp:columns -->
+		<!-- /wp:group -->
 	</div>
 	<!-- /wp:group -->
 </section>
diff --git a/patterns/sections/split-text-pair-statement.php b/patterns/sections/split-text-pair-statement.php
index 97c8317..d307242 100644
--- a/patterns/sections/split-text-pair-statement.php
+++ b/patterns/sections/split-text-pair-statement.php
@@ -24,8 +24,8 @@
 );
 
 $ls_goal_html = sprintf(
-	/* translators: 1: struck-through phrase, 2: highlighted phrase. */
-	esc_html__( 'The goal is not %1$s. The goal is %2$s.', 'ls-theme' ),
+	/* translators: 1: struck-through phrase, 2: highlighted phrase. The line break between the two sentences is intentional. */
+	__( 'The goal is not %1$s.<br>The goal is %2$s.', 'ls-theme' ),
 	'<s><span style="color:var(--wp--custom--color--text--subtle)" class="has-inline-color">' . esc_html__( 'constant visibility', 'ls-theme' ) . '</span></s>',
 	'<mark style="background-color:transparent;color:var(--wp--custom--color--text--brand)" class="has-inline-color">' . esc_html__( 'dependable progress', 'ls-theme' ) . '</mark>'
 );
@@ -62,7 +62,7 @@
 		</div>
 		<!-- /wp:columns -->
 
-		<!-- wp:group {"style":{"border":{"top":{"color":"var:custom|color|border|card","style":"solid","width":"1px"}},"spacing":{"padding":{"top":"var:preset|spacing|70"}}},"layout":{"type":"constrained","contentSize":"","justifyContent":"left"}} -->
+		<!-- wp:group {"style":{"border":{"top":{"color":"var:custom|color|border|card","style":"solid","width":"1px"}},"spacing":{"padding":{"top":"var:preset|spacing|70"}}},"layout":{"type":"default"}} -->
 		<div class="wp-block-group" style="border-top-color:var(--wp--custom--color--border--card);border-top-style:solid;border-top-width:1px;padding-top:var(--wp--preset--spacing--70)">
 			<!-- wp:paragraph {"className":"ls-careers-goal","style":{"typography":{"fontFamily":"var:preset|font-family|heading","fontWeight":"var:custom|typography|font-weight|extrabold","letterSpacing":"var:custom|typography|letter-spacing|tight","lineHeight":"var:custom|line-height|heading-snug"}},"fontSize":"800"} -->
 			<p class="ls-careers-goal has-800-font-size" style="font-family:var(--wp--preset--font-family--heading);font-weight:var(--wp--custom--typography--font-weight--extrabold);letter-spacing:var(--wp--custom--typography--letter-spacing--tight);line-height:var(--wp--custom--line-height--heading-snug)"><?php echo wp_kses_post( $ls_goal_html ); ?></p>
diff --git a/src/scss/structural/about-careers.scss b/src/scss/structural/about-careers.scss
index e517d76..99a6aad 100644
--- a/src/scss/structural/about-careers.scss
+++ b/src/scss/structural/about-careers.scss
@@ -2,7 +2,7 @@
 
 /*
  * Everything the block attributes can express (type, colours, spacing, the Card - Plain shells, the
- * bento grid and its column spans, the staircase of card heights and the icon wells) is authored in
+ * bento grid and its column spans and the icon wells) is authored in
  * the pattern files. This file owns only what JSON cannot: a measure in ch, text-wrap, inline-style
  * overrides on small screens and the grid reflow. The mobile rules use WordPress's own breakpoints
  * (781.98px for the columns stacking, 599.98px for the small-screen step).
@@ -36,12 +36,6 @@
   .ls-bento > .ls-bento__card:last-child {
     grid-column: span 2;
   }
-
-  // JSON limitation: the cards' minimum heights are inline styles, so dropping them where the
-  // columns stack needs !important — see AGENTS.md Theme-First Approach
-  .ls-stairs__card {
-    min-height: 0 !important;
-  }
 }
 
 @media (max-width: 599.98px) {

From 4d9f1c0a503f675415996313f52b8897bc8e7205 Mon Sep 17 00:00:00 2001
From: Brandonma21 <Brandonmarshall101@gmail.com>
Date: Thu, 22 Oct 2026 08:05:13 +0200
Subject: [PATCH 4/4] fix: careers-page - Pick the bento's wide and feature
 cards by class and fill the two-column gap (LSA-197)

Bento reflow
- Make the first card span a full row between 600px and 782px so the final row no longer leaves an empty cell

Selectors
- Add ls-bento__card--wide and ls-bento__card--feature classes in Numbered Bento Cards
- Use the classes instead of :last-child for the two-column span and the mobile column layout
- Rebuild about-careers.css
---
 assets/css/about-careers.css               |  2 +-
 patterns/sections/numbered-bento-cards.php | 12 +++++++++---
 src/scss/structural/about-careers.scss     | 11 ++++++++---
 3 files changed, 18 insertions(+), 7 deletions(-)

diff --git a/assets/css/about-careers.css b/assets/css/about-careers.css
index 603f1b2..0327391 100644
--- a/assets/css/about-careers.css
+++ b/assets/css/about-careers.css
@@ -1 +1 @@
-.wp-block-heading.ls-careers-statement{max-width:18ch;text-wrap:balance}.ls-careers-goal{text-wrap:balance}@media(max-width: 781.98px){.ls-bento.wp-block-group{grid-template-columns:repeat(2, minmax(0, 1fr))}.ls-bento>.ls-bento__card{grid-column:span 1}.ls-bento>.ls-bento__card:last-child{grid-column:span 2}}@media(max-width: 599.98px){.ls-bento.wp-block-group{grid-template-columns:minmax(0, 1fr)}.ls-bento>.ls-bento__card,.ls-bento>.ls-bento__card:last-child{grid-column:auto}.ls-bento__card{min-height:0 !important}.ls-bento>.ls-bento__card:last-child{align-items:flex-start;flex-direction:column}}
+.wp-block-heading.ls-careers-statement{max-width:18ch;text-wrap:balance}.ls-careers-goal{text-wrap:balance}@media(max-width: 781.98px){.ls-bento.wp-block-group{grid-template-columns:repeat(2, minmax(0, 1fr))}.ls-bento>.ls-bento__card{grid-column:span 1}.ls-bento>.ls-bento__card--feature,.ls-bento>.ls-bento__card--wide{grid-column:span 2}}@media(max-width: 599.98px){.ls-bento.wp-block-group{grid-template-columns:minmax(0, 1fr)}.ls-bento>.ls-bento__card,.ls-bento>.ls-bento__card--feature,.ls-bento>.ls-bento__card--wide{grid-column:auto}.ls-bento__card{min-height:0 !important}.ls-bento>.ls-bento__card--wide{align-items:flex-start;flex-direction:column}}
diff --git a/patterns/sections/numbered-bento-cards.php b/patterns/sections/numbered-bento-cards.php
index 7a0283d..109a23a 100644
--- a/patterns/sections/numbered-bento-cards.php
+++ b/patterns/sections/numbered-bento-cards.php
@@ -86,10 +86,16 @@
 		<div class="wp-block-group ls-bento">
 			<?php foreach ( $ls_bento_cards as $ls_bento_card ) : ?>
 				<?php
-				$ls_bento_is_wide    = ( 6 === $ls_bento_card['span'] );
+				$ls_bento_is_wide  = ( 6 === $ls_bento_card['span'] );
+				$ls_bento_modifier = '';
+				if ( $ls_bento_is_wide ) {
+					$ls_bento_modifier = ' ls-bento__card--wide';
+				} elseif ( 4 === $ls_bento_card['span'] ) {
+					$ls_bento_modifier = ' ls-bento__card--feature';
+				}
 				$ls_bento_attrs      = array(
 					'tagName'   => 'article',
-					'className' => 'is-style-card-plain ls-bento__card',
+					'className' => 'is-style-card-plain ls-bento__card' . $ls_bento_modifier,
 					'style'     => array(
 						'layout'  => array( 'columnSpan' => $ls_bento_card['span'] ),
 						'spacing' => array( 'blockGap' => 'var:preset|spacing|40' ),
@@ -110,7 +116,7 @@
 				}
 				?>
 			<!-- wp:group <?php echo wp_json_encode( $ls_bento_attrs, JSON_UNESCAPED_SLASHES ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped -- JSON for a block comment. ?> -->
-			<article class="wp-block-group ls-bento__card is-style-card-plain" style="min-height:<?php echo esc_attr( $ls_bento_min_height ); ?>">
+			<article class="wp-block-group ls-bento__card is-style-card-plain<?php echo esc_attr( $ls_bento_modifier ); ?>" style="min-height:<?php echo esc_attr( $ls_bento_min_height ); ?>">
 				<!-- wp:paragraph {"style":{"typography":{"fontFamily":"var:preset|font-family|monospace","letterSpacing":"var:custom|typography|letter-spacing|wide","fontWeight":"var:custom|typography|font-weight|semibold"},"color":{"text":"<?php echo esc_attr( $ls_bento_card['colour'] ); ?>"}},"fontSize":"100"} -->
 				<p class="has-text-color has-100-font-size" style="color:<?php echo esc_attr( $ls_bento_card['colour'] ); ?>;font-family:var(--wp--preset--font-family--monospace);font-weight:var(--wp--custom--typography--font-weight--semibold);letter-spacing:var(--wp--custom--typography--letter-spacing--wide)"><?php echo esc_html( $ls_bento_card['number'] ); ?></p>
 				<!-- /wp:paragraph -->
diff --git a/src/scss/structural/about-careers.scss b/src/scss/structural/about-careers.scss
index 99a6aad..21e6994 100644
--- a/src/scss/structural/about-careers.scss
+++ b/src/scss/structural/about-careers.scss
@@ -33,7 +33,11 @@
     grid-column: span 1;
   }
 
-  .ls-bento > .ls-bento__card:last-child {
+  // The feature card takes a full row here, so the four two-column cards after it fill two whole rows
+  // and the wide card closes the grid without leaving an empty cell. The cards are picked by class,
+  // not position, so reordering or deleting a card in the editor does not move the spans.
+  .ls-bento > .ls-bento__card--feature,
+  .ls-bento > .ls-bento__card--wide {
     grid-column: span 2;
   }
 }
@@ -44,7 +48,8 @@
   }
 
   .ls-bento > .ls-bento__card,
-  .ls-bento > .ls-bento__card:last-child {
+  .ls-bento > .ls-bento__card--feature,
+  .ls-bento > .ls-bento__card--wide {
     grid-column: auto;
   }
 
@@ -56,7 +61,7 @@
 
   // JSON limitation: the full-width card's row layout is a generated container class, so turning it
   // into a column on small screens needs a breakpoint rule — see AGENTS.md Theme-First Approach
-  .ls-bento > .ls-bento__card:last-child {
+  .ls-bento > .ls-bento__card--wide {
     align-items: flex-start;
     flex-direction: column;
   }