From ddf4fa763fa939e9cd33f0f99ea88ecbd0b4f940 Mon Sep 17 00:00:00 2001
From: Brandonma21 <Brandonmarshall101@gmail.com>
Date: Mon, 7 Sep 2026 12:03:51 +0200
Subject: [PATCH 1/7] Build Services page hero pattern (LS-1598)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Hero
- Add patterns/hero/services-hero.php: breadcrumb, eyebrow, heading,
  description, and primary/secondary CTAs
- Add wrapped row of all 14 service tags, colour-coded by lifecycle
  Phase (Discover/Create/Build/Launch/Grow/Evolve) to match the
  mega menu convention, each linking to its real /services/ page
- Add decorative "Services / Lifecycle" preview card reusing the
  existing is-style-glass-card shell

Tokens & assets
- No new colour tokens, font sizes, or global styles required —
  reuses existing semantic tokens and presets throughout
- Source fresh Phosphor "regular" icons, embedded as real SVG markup

Validation
- php -l, patterns:escape, security:scan, and phpcs --standard=WordPress
  all pass clean on the new pattern
---
 patterns/hero/services-hero.php | 226 ++++++++++++++++++++++++++++++++
 1 file changed, 226 insertions(+)
 create mode 100644 patterns/hero/services-hero.php

diff --git a/patterns/hero/services-hero.php b/patterns/hero/services-hero.php
new file mode 100644
index 0000000..1efb8fb
--- /dev/null
+++ b/patterns/hero/services-hero.php
@@ -0,0 +1,226 @@
+<?php
+/**
+ * Title: Hero - Services
+ * Slug: ls-theme/services-hero
+ * Categories: hero
+ * Block Types: core/pattern
+ * Description: The Services page hero: breadcrumb trail, eyebrow badge, heading, description, primary/secondary CTAs, a wrapped row of links to all 14 services, and a decorative "services / lifecycle" preview card. Adapts between light and dark mode using existing semantic tokens.
+ * Keywords: services, hero, lifecycle, section
+ * Viewport Width: 1280
+ * Inserter: true
+ *
+ * @package ls-theme
+ */
+
+$ls_services_hero_tags = array(
+	array(
+		'label' => __( 'Discovery', 'ls-theme' ),
+		'url'   => '/services/discovery/',
+		'phase' => 'discover',
+		'icon'  => '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor"><path d="M229.66,218.34l-50.07-50.06a88.11,88.11,0,1,0-11.31,11.31l50.06,50.07a8,8,0,0,0,11.32-11.32ZM40,112a72,72,0,1,1,72,72A72.08,72.08,0,0,1,40,112Z"></path></svg>',
+	),
+	array(
+		'label' => __( 'Content', 'ls-theme' ),
+		'url'   => '/services/content/',
+		'phase' => 'create',
+		'icon'  => '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor"><path d="M88,96a8,8,0,0,1,8-8h64a8,8,0,0,1,0,16H96A8,8,0,0,1,88,96Zm8,40h64a8,8,0,0,0,0-16H96a8,8,0,0,0,0,16Zm32,16H96a8,8,0,0,0,0,16h32a8,8,0,0,0,0-16ZM224,48V156.69A15.86,15.86,0,0,1,219.31,168L168,219.31A15.86,15.86,0,0,1,156.69,224H48a16,16,0,0,1-16-16V48A16,16,0,0,1,48,32H208A16,16,0,0,1,224,48ZM48,208H152V160a8,8,0,0,1,8-8h48V48H48Zm120-40v28.7L196.69,168Z"></path></svg>',
+	),
+	array(
+		'label' => __( 'Design', 'ls-theme' ),
+		'url'   => '/services/design/',
+		'phase' => 'create',
+		'icon'  => '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor"><path d="M232,32a8,8,0,0,0-8-8c-44.08,0-89.31,49.71-114.43,82.63A60,60,0,0,0,32,164c0,30.88-19.54,44.73-20.47,45.37A8,8,0,0,0,16,224H92a60,60,0,0,0,57.37-77.57C182.3,121.31,232,76.08,232,32ZM92,208H34.63C41.38,198.41,48,183.92,48,164a44,44,0,1,1,44,44Zm32.42-94.45q5.14-6.66,10.09-12.55A76.23,76.23,0,0,1,155,121.49q-5.9,4.94-12.55,10.09A60.54,60.54,0,0,0,124.42,113.55Zm42.7-2.68a92.57,92.57,0,0,0-22-22c31.78-34.53,55.75-45,69.9-47.91C212.17,55.12,201.65,79.09,167.12,110.87Z"></path></svg>',
+	),
+	array(
+		'label' => __( 'Development', 'ls-theme' ),
+		'url'   => '/services/development/',
+		'phase' => 'build',
+		'icon'  => '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor"><path d="M69.12,94.15,28.5,128l40.62,33.85a8,8,0,1,1-10.24,12.29l-48-40a8,8,0,0,1,0-12.29l48-40a8,8,0,0,1,10.24,12.3Zm176,27.7-48-40a8,8,0,1,0-10.24,12.3L227.5,128l-40.62,33.85a8,8,0,1,0,10.24,12.29l48-40a8,8,0,0,0,0-12.29ZM162.73,32.48a8,8,0,0,0-10.25,4.79l-64,176a8,8,0,0,0,4.79,10.26A8.14,8.14,0,0,0,96,224a8,8,0,0,0,7.52-5.27l64-176A8,8,0,0,0,162.73,32.48Z"></path></svg>',
+	),
+	array(
+		'label' => __( 'Migrations', 'ls-theme' ),
+		'url'   => '/services/migrations/',
+		'phase' => 'build',
+		'icon'  => '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor"><path d="M213.66,181.66l-32,32a8,8,0,0,1-11.32-11.32L188.69,184H48a8,8,0,0,1,0-16H188.69l-18.35-18.34a8,8,0,0,1,11.32-11.32l32,32A8,8,0,0,1,213.66,181.66Zm-139.32-64a8,8,0,0,0,11.32-11.32L67.31,88H208a8,8,0,0,0,0-16H67.31L85.66,53.66A8,8,0,0,0,74.34,42.34l-32,32a8,8,0,0,0,0,11.32Z"></path></svg>',
+	),
+	array(
+		'label' => __( 'Hosting', 'ls-theme' ),
+		'url'   => '/services/hosting/',
+		'phase' => 'launch',
+		'icon'  => '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor"><path d="M160,40A88.09,88.09,0,0,0,81.29,88.67,64,64,0,1,0,72,216h88a88,88,0,0,0,0-176Zm0,160H72a48,48,0,0,1,0-96c1.1,0,2.2,0,3.29.11A88,88,0,0,0,72,128a8,8,0,0,0,16,0,72,72,0,1,1,72,72Z"></path></svg>',
+	),
+	array(
+		'label' => __( 'Performance', 'ls-theme' ),
+		'url'   => '/services/performance/',
+		'phase' => 'launch',
+		'icon'  => '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor"><path d="M207.06,72.67A111.24,111.24,0,0,0,128,40h-.4C66.07,40.21,16,91,16,153.13V176a16,16,0,0,0,16,16H224a16,16,0,0,0,16-16V152A111.25,111.25,0,0,0,207.06,72.67ZM224,176H119.71l54.76-75.3a8,8,0,0,0-12.94-9.42L99.92,176H32V153.13c0-3.08.15-6.12.43-9.13H56a8,8,0,0,0,0-16H35.27c10.32-38.86,44-68.24,84.73-71.66V80a8,8,0,0,0,16,0V56.33A96.14,96.14,0,0,1,221,128H200a8,8,0,0,0,0,16h23.67c.21,2.65.33,5.31.33,8Z"></path></svg>',
+	),
+	array(
+		'label' => __( 'Security', 'ls-theme' ),
+		'url'   => '/services/security/',
+		'phase' => 'launch',
+		'icon'  => '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor"><path d="M208,40H48A16,16,0,0,0,32,56v56c0,52.72,25.52,84.67,46.93,102.19,23.06,18.86,46,25.26,47,25.53a8,8,0,0,0,4.2,0c1-.27,23.91-6.67,47-25.53C198.48,196.67,224,164.72,224,112V56A16,16,0,0,0,208,40Zm0,72c0,37.07-13.66,67.16-40.6,89.42A129.3,129.3,0,0,1,128,223.62a128.25,128.25,0,0,1-38.92-21.81C61.82,179.51,48,149.3,48,112l0-56,160,0ZM82.34,141.66a8,8,0,0,1,11.32-11.32L112,148.69l50.34-50.35a8,8,0,0,1,11.32,11.32l-56,56a8,8,0,0,1-11.32,0Z"></path></svg>',
+	),
+	array(
+		'label' => __( 'Training', 'ls-theme' ),
+		'url'   => '/services/training/',
+		'phase' => 'launch',
+		'icon'  => '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor"><path d="M251.76,88.94l-120-64a8,8,0,0,0-7.52,0l-120,64a8,8,0,0,0,0,14.12L32,117.87v48.42a15.91,15.91,0,0,0,4.06,10.65C49.16,191.53,78.51,216,128,216a130,130,0,0,0,48-8.76V240a8,8,0,0,0,16,0V199.51a115.63,115.63,0,0,0,27.94-22.57A15.91,15.91,0,0,0,224,166.29V117.87l27.76-14.81a8,8,0,0,0,0-14.12ZM128,200c-43.27,0-68.72-21.14-80-33.71V126.4l76.24,40.66a8,8,0,0,0,7.52,0L176,143.47v46.34C163.4,195.69,147.52,200,128,200Zm80-33.75a97.83,97.83,0,0,1-16,14.25V134.93l16-8.53ZM188,118.94l-.22-.13-56-29.87a8,8,0,0,0-7.52,14.12L171,128l-43,22.93L25,96,128,41.07,231,96Z"></path></svg>',
+	),
+	array(
+		'label' => __( 'Support', 'ls-theme' ),
+		'url'   => '/services/support/',
+		'phase' => 'grow',
+		'icon'  => '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor"><path d="M128,24A104,104,0,1,0,232,128,104.11,104.11,0,0,0,128,24Zm39.1,131.79a47.84,47.84,0,0,0,0-55.58l28.5-28.49a87.83,87.83,0,0,1,0,112.56ZM96,128a32,32,0,1,1,32,32A32,32,0,0,1,96,128Zm88.28-67.6L155.79,88.9a47.84,47.84,0,0,0-55.58,0L71.72,60.4a87.83,87.83,0,0,1,112.56,0ZM60.4,71.72l28.5,28.49a47.84,47.84,0,0,0,0,55.58L60.4,184.28a87.83,87.83,0,0,1,0-112.56ZM71.72,195.6l28.49-28.5a47.84,47.84,0,0,0,55.58,0l28.49,28.5a87.83,87.83,0,0,1-112.56,0Z"></path></svg>',
+	),
+	array(
+		'label' => __( 'SEO', 'ls-theme' ),
+		'url'   => '/services/seo/',
+		'phase' => 'grow',
+		'icon'  => '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor"><path d="M232,208a8,8,0,0,1-8,8H32a8,8,0,0,1-8-8V48a8,8,0,0,1,16,0V156.69l50.34-50.35a8,8,0,0,1,11.32,0L128,132.69,180.69,80H160a8,8,0,0,1,0-16h40a8,8,0,0,1,8,8v40a8,8,0,0,1-16,0V91.31l-58.34,58.35a8,8,0,0,1-11.32,0L96,123.31l-56,56V200H224A8,8,0,0,1,232,208Z"></path></svg>',
+	),
+	array(
+		'label' => __( 'Accessibility', 'ls-theme' ),
+		'url'   => '/services/accessibility/',
+		'phase' => 'grow',
+		'icon'  => '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor"><path d="M255.59,189.47a8,8,0,0,0-10.12-5.06l-17.42,5.81-28.9-57.8A8,8,0,0,0,192,128H112V104h56a8,8,0,0,0,0-16H112V79a32,32,0,1,0-16,0V89.81A72,72,0,0,0,112,232c33.52,0,63.69-22.71,71.75-54a8,8,0,1,0-15.5-4C162.09,198,137.91,216,112,216A56,56,0,0,1,96,106.34V136a8,8,0,0,0,8,8h83.05l29.79,59.58a8,8,0,0,0,9.69,4l24-8A8,8,0,0,0,255.59,189.47ZM88,48a16,16,0,1,1,16,16A16,16,0,0,1,88,48Z"></path></svg>',
+	),
+	array(
+		'label' => __( 'Email marketing', 'ls-theme' ),
+		'url'   => '/services/email-marketing/',
+		'phase' => 'grow',
+		'icon'  => '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor"><path d="M224,48H32a8,8,0,0,0-8,8V192a16,16,0,0,0,16,16H216a16,16,0,0,0,16-16V56A8,8,0,0,0,224,48ZM203.43,64,128,133.15,52.57,64ZM216,192H40V74.19l82.59,75.71a8,8,0,0,0,10.82,0L216,74.19V192Z"></path></svg>',
+	),
+	array(
+		'label' => __( 'AI', 'ls-theme' ),
+		'url'   => '/services/ai/',
+		'phase' => 'evolve',
+		'icon'  => '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor"><path d="M197.58,129.06,146,110l-19-51.62a15.92,15.92,0,0,0-29.88,0L78,110l-51.62,19a15.92,15.92,0,0,0,0,29.88L78,178l19,51.62a15.92,15.92,0,0,0,29.88,0L146,178l51.62-19a15.92,15.92,0,0,0,0-29.88ZM137,164.22a8,8,0,0,0-4.74,4.74L112,223.85,91.78,169A8,8,0,0,0,87,164.22L32.15,144,87,123.78A8,8,0,0,0,91.78,119L112,64.15,132.22,119a8,8,0,0,0,4.74,4.74L191.85,144ZM144,40a8,8,0,0,1,8-8h16V16a8,8,0,0,1,16,0V32h16a8,8,0,0,1,0,16H184V64a8,8,0,0,1-16,0V48H152A8,8,0,0,1,144,40ZM248,88a8,8,0,0,1-8,8h-8v8a8,8,0,0,1-16,0V96h-8a8,8,0,0,1,0-16h8V72a8,8,0,0,1,16,0v8h8A8,8,0,0,1,248,88Z"></path></svg>',
+	),
+);
+?>
+<!-- wp:group {"align":"full","tagName":"section","className":"ls-services-hero","style":{"border":{"bottom":{"color":"var:custom|color|border|card","style":"solid","width":"1px"}},"spacing":{"margin":{"top":"0"},"padding":{"top":"var:preset|spacing|90","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-services-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--90);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","layout":{"type":"constrained"}} -->
+	<div class="wp-block-group alignwide">
+
+		<?php if ( function_exists( 'yoast_breadcrumb' ) ) : ?>
+		<!-- wp:yoast-seo/breadcrumbs {"className":"alignwide"} /-->
+		<?php endif; ?>
+
+		<!-- wp:group {"style":{"spacing":{"margin":{"top":"var:preset|spacing|20"}}},"layout":{"type":"flex","flexWrap":"nowrap","verticalAlignment":"center"}} -->
+		<div class="wp-block-group" style="margin-top:var(--wp--preset--spacing--20)">
+			<!-- wp:outermost/icon-block {"iconName":"","className":"has-text-color","width":"8px","style":{"color":{"text":"var(--wp--custom--color--text--brand)"}}} -->
+			<div class="wp-block-outermost-icon-block has-text-color"><div class="icon-container" style="color:var(--wp--custom--color--text--brand);width:8px;transform:rotate(0deg) scaleX(1) scaleY(1)"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><circle cx="12" cy="12" r="12"></circle></svg></div></div>
+			<!-- /wp:outermost/icon-block -->
+
+			<!-- 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__( 'Services', 'ls-theme' ); ?></p>
+			<!-- /wp:paragraph -->
+		</div>
+		<!-- /wp:group -->
+
+		<!-- wp:columns {"align":"wide","verticalAlignment":"top","style":{"spacing":{"margin":{"top":"var:preset|spacing|20"},"blockGap":{"left":"var:preset|spacing|60"}}}} -->
+		<div class="wp-block-columns alignwide are-vertically-aligned-top" style="margin-top:var(--wp--preset--spacing--20)">
+
+			<!-- wp:column {"verticalAlignment":"top","width":"68%"} -->
+			<div class="wp-block-column is-vertically-aligned-top" style="flex-basis:68%">
+
+				<!-- wp:heading {"level":1,"style":{"typography":{"fontWeight":"var:custom|typography|font-weight|extrabold"}},"fontSize":"900"} -->
+				<h1 class="wp-block-heading has-900-font-size" style="font-weight:var(--wp--custom--typography--font-weight--extrabold)"><?php echo esc_html__( 'Services built for the full WordPress lifecycle.', 'ls-theme' ); ?></h1>
+				<!-- /wp:heading -->
+
+				<!-- wp:group {"style":{"spacing":{"margin":{"top":"var:preset|spacing|20"}}},"layout":{"type":"constrained","contentSize":"720px"}} -->
+				<div class="wp-block-group" style="margin-top:var(--wp--preset--spacing--20)">
+					<!-- 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__( 'From discovery and content structure to engineering, launch and long-term support, LightSpeed services are designed to work together rather than collide later.', 'ls-theme' ); ?></p>
+					<!-- /wp:paragraph -->
+				</div>
+				<!-- /wp:group -->
+
+				<!-- wp:buttons {"style":{"spacing":{"margin":{"top":"var:preset|spacing|30"}}}} -->
+				<div class="wp-block-buttons" style="margin-top:var(--wp--preset--spacing--30)">
+					<!-- wp:button -->
+					<div class="wp-block-button"><a class="wp-block-button__link wp-element-button" href="<?php echo esc_url( home_url( '/free-consultation/' ) ); ?>"><?php echo esc_html__( 'Request a systems review', 'ls-theme' ); ?></a></div>
+					<!-- /wp:button -->
+
+					<!-- wp:button {"className":"is-style-outline"} -->
+					<div class="wp-block-button is-style-outline"><a class="wp-block-button__link wp-element-button" href="<?php echo esc_url( home_url( '/solutions/' ) ); ?>"><?php echo esc_html__( 'Explore solutions', 'ls-theme' ); ?></a></div>
+					<!-- /wp:button -->
+				</div>
+				<!-- /wp:buttons -->
+
+				<!-- wp:group {"className":"ls-services-hero__tags","style":{"border":{"top":{"color":"var:custom|color|border|card","style":"solid","width":"1px"}},"spacing":{"margin":{"top":"var:preset|spacing|40"},"padding":{"top":"var:preset|spacing|20"},"blockGap":"var:preset|spacing|10"}},"layout":{"type":"flex","flexWrap":"wrap"}} -->
+				<div class="wp-block-group ls-services-hero__tags" style="border-top-color:var(--wp--custom--color--border--card);border-top-style:solid;border-top-width:1px;margin-top:var(--wp--preset--spacing--40);padding-top:var(--wp--preset--spacing--20)">
+					<?php
+					foreach ( $ls_services_hero_tags as $ls_tag ) :
+						$ls_phase_color = 'var(--wp--custom--color--phase--' . $ls_tag['phase'] . ')';
+						?>
+					<!-- wp:group {"style":{"border":{"color":"var:custom|color|border|card","radius":"var:preset|border-radius|500","style":"solid","width":"1px"},"spacing":{"padding":{"top":"var:preset|spacing|5","right":"var:preset|spacing|10","bottom":"var:preset|spacing|5","left":"var:preset|spacing|10"},"blockGap":"var:preset|spacing|5"}},"layout":{"type":"flex","flexWrap":"nowrap","verticalAlignment":"center"}} -->
+					<div class="wp-block-group" style="border-color:var(--wp--custom--color--border--card);border-style:solid;border-width:1px;border-radius:var(--wp--preset--border-radius--500);padding-top:var(--wp--preset--spacing--5);padding-right:var(--wp--preset--spacing--10);padding-bottom:var(--wp--preset--spacing--5);padding-left:var(--wp--preset--spacing--10)">
+						<!-- wp:outermost/icon-block {"iconName":"","className":"has-text-color","width":"13px","style":{"color":{"text":"<?php echo esc_attr( $ls_phase_color ); ?>"}}} -->
+						<div class="wp-block-outermost-icon-block has-text-color"><div class="icon-container" style="color:<?php echo esc_attr( $ls_phase_color ); ?>;width:13px;transform:rotate(0deg) scaleX(1) scaleY(1)"><?php echo $ls_tag['icon']; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped -- Static, developer-authored Phosphor icon markup, not user input. ?></div></div>
+						<!-- /wp:outermost/icon-block -->
+
+						<!-- wp:paragraph {"style":{"typography":{"fontWeight":"var:custom|typography|font-weight|semibold"},"color":{"text":"<?php echo esc_attr( $ls_phase_color ); ?>"}},"fontSize":"100"} -->
+						<p class="has-text-color has-100-font-size" style="color:<?php echo esc_attr( $ls_phase_color ); ?>;font-weight:var(--wp--custom--typography--font-weight--semibold)"><a href="<?php echo esc_url( home_url( $ls_tag['url'] ) ); ?>" style="color:inherit;text-decoration:none"><?php echo esc_html( $ls_tag['label'] ); ?></a></p>
+						<!-- /wp:paragraph -->
+					</div>
+					<!-- /wp:group -->
+					<?php endforeach; ?>
+				</div>
+				<!-- /wp:group -->
+			</div>
+			<!-- /wp:column -->
+
+			<!-- wp:column {"verticalAlignment":"top","width":"32%"} -->
+			<div class="wp-block-column is-vertically-aligned-top" style="flex-basis:32%">
+				<!-- wp:group {"className":"is-style-glass-card","style":{"spacing":{"padding":{"top":"var:preset|spacing|30","right":"var:preset|spacing|30","bottom":"var:preset|spacing|30","left":"var:preset|spacing|30"},"blockGap":"var:preset|spacing|20"}},"layout":{"type":"flex","orientation":"vertical","flexWrap":"nowrap"}} -->
+				<div class="wp-block-group is-style-glass-card" style="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:paragraph {"style":{"typography":{"fontFamily":"var:preset|font-family|monospace","textTransform":"uppercase","letterSpacing":"var:custom|typography|letter-spacing|widest"},"color":{"text":"var(--wp--custom--color--text--subtle)"}},"fontSize":"100"} -->
+					<p class="has-text-color has-100-font-size" style="color:var(--wp--custom--color--text--subtle);font-family:var(--wp--preset--font-family--monospace);letter-spacing:var(--wp--custom--typography--letter-spacing--widest);text-transform:uppercase"><?php echo esc_html__( 'Services / Lifecycle', 'ls-theme' ); ?></p>
+					<!-- /wp:paragraph -->
+
+					<!-- wp:group {"style":{"spacing":{"blockGap":"var:preset|spacing|10"}},"layout":{"type":"flex","flexWrap":"nowrap"}} -->
+					<div class="wp-block-group">
+						<!-- wp:group {"style":{"color":{"background":"var(--wp--custom--color--effect--hero--brand)"},"border":{"radius":"var:preset|border-radius|200"},"dimensions":{"minHeight":"36px"}},"layout":{"type":"flex","flexWrap":"nowrap"}} -->
+						<div class="wp-block-group has-background" style="border-radius:var(--wp--preset--border-radius--200);background-color:var(--wp--custom--color--effect--hero--brand);min-height:36px"></div>
+						<!-- /wp:group -->
+
+						<!-- wp:group {"style":{"color":{"background":"var(--wp--custom--color--card--solutions--accent)"},"border":{"radius":"var:preset|border-radius|200"},"dimensions":{"minHeight":"36px"}},"layout":{"type":"flex","flexWrap":"nowrap"}} -->
+						<div class="wp-block-group has-background" style="border-radius:var(--wp--preset--border-radius--200);background-color:var(--wp--custom--color--card--solutions--accent);min-height:36px"></div>
+						<!-- /wp:group -->
+
+						<!-- wp:group {"style":{"color":{"background":"var(--wp--custom--color--effect--hero--cyan)"},"border":{"radius":"var:preset|border-radius|200"},"dimensions":{"minHeight":"36px"}},"layout":{"type":"flex","flexWrap":"nowrap"}} -->
+						<div class="wp-block-group has-background" style="border-radius:var(--wp--preset--border-radius--200);background-color:var(--wp--custom--color--effect--hero--cyan);min-height:36px"></div>
+						<!-- /wp:group -->
+
+						<!-- wp:group {"style":{"color":{"background":"var(--wp--custom--color--card--solutions--accent)"},"border":{"radius":"var:preset|border-radius|200"},"dimensions":{"minHeight":"36px"}},"layout":{"type":"flex","flexWrap":"nowrap"}} -->
+						<div class="wp-block-group has-background" style="border-radius:var(--wp--preset--border-radius--200);background-color:var(--wp--custom--color--card--solutions--accent);min-height:36px"></div>
+						<!-- /wp:group -->
+					</div>
+					<!-- /wp:group -->
+
+					<!-- wp:group {"style":{"border":{"top":{"color":"var:custom|color|border|card","style":"dashed","width":"1px"}},"spacing":{"padding":{"top":"var:preset|spacing|10"},"blockGap":"var:preset|spacing|10"}},"layout":{"type":"flex","justifyContent":"space-between","flexWrap":"nowrap"}} -->
+					<div class="wp-block-group" style="border-top-color:var(--wp--custom--color--border--card);border-top-style:dashed;border-top-width:1px;padding-top:var(--wp--preset--spacing--10)">
+						<!-- wp:paragraph {"style":{"typography":{"fontFamily":"var:preset|font-family|monospace"},"color":{"text":"var(--wp--custom--color--text--muted)"}},"fontSize":"100"} -->
+						<p class="has-text-color has-100-font-size" style="color:var(--wp--custom--color--text--muted);font-family:var(--wp--preset--font-family--monospace)"><span style="color:var(--wp--custom--color--text--brand)"><?php echo esc_html__( 'services', 'ls-theme' ); ?></span> <?php echo esc_html__( '14 / 14', 'ls-theme' ); ?></p>
+						<!-- /wp:paragraph -->
+
+						<!-- wp:paragraph {"style":{"typography":{"fontFamily":"var:preset|font-family|monospace"},"color":{"text":"var(--wp--custom--color--text--muted)"}},"fontSize":"100"} -->
+						<p class="has-text-color has-100-font-size" style="color:var(--wp--custom--color--text--muted);font-family:var(--wp--preset--font-family--monospace)"><span style="color:var(--wp--custom--color--text--brand)"><?php echo esc_html__( 'tokens', 'ls-theme' ); ?></span> <?php echo esc_html__( 'live', 'ls-theme' ); ?></p>
+						<!-- /wp:paragraph -->
+					</div>
+					<!-- /wp:group -->
+				</div>
+				<!-- /wp:group -->
+			</div>
+			<!-- /wp:column -->
+		</div>
+		<!-- /wp:columns -->
+	</div>
+	<!-- /wp:group -->
+</section>
+<!-- /wp:group -->

From 26c955ce8202ab3a6a47c0d4bc5086755d343f31 Mon Sep 17 00:00:00 2001
From: Brandonma21 <Brandonmarshall101@gmail.com>
Date: Mon, 7 Sep 2026 14:27:58 +0200
Subject: [PATCH 2/7] Refine Services hero pill styling and layout spacing
 (LS-1598)

Layout fix
- Fix breadcrumb-to-badge gap reading too tight by bumping the
  eyebrow badge's top margin from spacing|20 to spacing|30

Service pill styling
- Switch pill label text to neutral text.default, keep icons
  phase-coloured for lifecycle-phase association
- Add a subtle phase-tinted background and phase-tinted border
  to each pill (colour-mix over existing phase tokens)
- Increase pill padding for a larger, more substantial pill
- Add hover/focus-within state: stronger background/border tint,
  translateY(-1px), subtle shadow
- Add a :focus-visible outline ring for keyboard accessibility

New structural stylesheet
- Add src/scss/structural/services-hero.scss for the pill
  interactive states (no block-supports equivalent exists for
  hover/focus-visible), wired into build scripts and the
  bundle-detection/enqueue system the same way as other hero
  bundles (inc/animations.php, functions.php editor styles)

Context
- Rest-state pill colours are set inline per instance (each pill
  mixes its own phase token); hover/focus overrides need
  !important to beat that inline specificity, documented in the
  stylesheet
---
 assets/css/services-hero.css           |  1 +
 functions.php                          |  1 +
 inc/animations.php                     |  8 ++++
 package.json                           |  6 +--
 patterns/hero/services-hero.php        | 49 ++++++++++++-----------
 src/scss/structural/services-hero.scss | 55 ++++++++++++++++++++++++++
 6 files changed, 94 insertions(+), 26 deletions(-)
 create mode 100644 assets/css/services-hero.css
 create mode 100644 src/scss/structural/services-hero.scss

diff --git a/assets/css/services-hero.css b/assets/css/services-hero.css
new file mode 100644
index 0000000..fb1ee29
--- /dev/null
+++ b/assets/css/services-hero.css
@@ -0,0 +1 @@
+.ls-service-pill{transition:background-color var(--wp--custom--animation--duration--responsive) var(--wp--custom--animation--easing--standard),border-color var(--wp--custom--animation--duration--responsive) var(--wp--custom--animation--easing--standard),transform var(--wp--custom--animation--duration--responsive) var(--wp--custom--animation--easing--standard),box-shadow var(--wp--custom--animation--duration--responsive) var(--wp--custom--animation--easing--standard)}.ls-service-pill:hover,.ls-service-pill:focus-within{transform:translateY(-1px);box-shadow:var(--wp--custom--shadow--elevation--100)}.ls-service-pill a:focus-visible{outline:2px solid var(--wp--custom--color--focus--ring);outline-offset:2px;border-radius:var(--wp--preset--border-radius--100)}.ls-service-pill--discover:hover,.ls-service-pill--discover:focus-within{background-color:color-mix(in srgb, var(--wp--custom--color--phase--discover) 16%, transparent) !important;border-color:color-mix(in srgb, var(--wp--custom--color--phase--discover) 55%, var(--wp--custom--color--border--card)) !important}.ls-service-pill--create:hover,.ls-service-pill--create:focus-within{background-color:color-mix(in srgb, var(--wp--custom--color--phase--create) 16%, transparent) !important;border-color:color-mix(in srgb, var(--wp--custom--color--phase--create) 55%, var(--wp--custom--color--border--card)) !important}.ls-service-pill--build:hover,.ls-service-pill--build:focus-within{background-color:color-mix(in srgb, var(--wp--custom--color--phase--build) 16%, transparent) !important;border-color:color-mix(in srgb, var(--wp--custom--color--phase--build) 55%, var(--wp--custom--color--border--card)) !important}.ls-service-pill--launch:hover,.ls-service-pill--launch:focus-within{background-color:color-mix(in srgb, var(--wp--custom--color--phase--launch) 16%, transparent) !important;border-color:color-mix(in srgb, var(--wp--custom--color--phase--launch) 55%, var(--wp--custom--color--border--card)) !important}.ls-service-pill--grow:hover,.ls-service-pill--grow:focus-within{background-color:color-mix(in srgb, var(--wp--custom--color--phase--grow) 16%, transparent) !important;border-color:color-mix(in srgb, var(--wp--custom--color--phase--grow) 55%, var(--wp--custom--color--border--card)) !important}.ls-service-pill--evolve:hover,.ls-service-pill--evolve:focus-within{background-color:color-mix(in srgb, var(--wp--custom--color--phase--evolve) 16%, transparent) !important;border-color:color-mix(in srgb, var(--wp--custom--color--phase--evolve) 55%, var(--wp--custom--color--border--card)) !important}@media(prefers-reduced-motion: reduce){.ls-service-pill{transition:none}.ls-service-pill:hover,.ls-service-pill:focus-within{transform:none}}
diff --git a/functions.php b/functions.php
index 0280953..e81eafd 100644
--- a/functions.php
+++ b/functions.php
@@ -70,6 +70,7 @@ function ls_theme_setup() {
 	add_editor_style( 'assets/css/card-shells.css' );
 	add_editor_style( 'assets/css/cta-buttons.css' );
 	add_editor_style( 'assets/css/home-hero.css' );
+	add_editor_style( 'assets/css/services-hero.css' );
 	add_editor_style( 'assets/css/work-hero.css' );
 	add_editor_style( 'assets/css/work-single-hero.css' );
 	add_editor_style( 'assets/css/blog-hero.css' );
diff --git a/inc/animations.php b/inc/animations.php
index 4f4f755..d47d781 100644
--- a/inc/animations.php
+++ b/inc/animations.php
@@ -71,6 +71,7 @@ function ls_theme_get_bundle_render_markers() {
 			),
 		),
 		'home-hero'             => array( 'classes' => array( 'ls-home-hero-section' ) ),
+		'services-hero'         => array( 'classes' => array( 'ls-service-pill' ) ),
 		'work-hero'             => array( 'classes' => array( 'ls-work-hero' ) ),
 		'work-single-hero'      => array( 'classes' => array( 'ls-work-single-meta' ) ),
 		'blog-hero'             => array( 'classes' => array( 'ls-blog-hero' ) ),
@@ -261,6 +262,13 @@ function ls_theme_get_effect_styles( $context = 'front' ) {
 			'contexts'  => array( 'front', 'editor' ),
 			'condition' => 'is_front_page',
 		),
+		'services-hero'           => array(
+			'handle'   => 'ls-theme-services-hero',
+			'path'     => 'assets/css/services-hero.css',
+			'contexts' => array( 'front', 'editor' ),
+			// No page template yet (LS-1598 in progress) — same reasoning as card-shells/
+			// cta-buttons above, relies on render_block marker detection instead of a condition.
+		),
 		'work-hero'               => array(
 			'handle'    => 'ls-theme-work-hero',
 			'path'      => 'assets/css/work-hero.css',
diff --git a/package.json b/package.json
index 3b761ea..df901cf 100644
--- a/package.json
+++ b/package.json
@@ -4,15 +4,15 @@
 	"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",
-		"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",
+		"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/services-hero.scss:assets/css/services-hero.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/services-hero.scss:assets/css/services-hero.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",
 		"security:scan": "node theme-utils.mjs security-scan",
 		"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);\"",
-		"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"
+		"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/services-hero.scss:assets/css/services-hero.css"
 	},
 	"devDependencies": {
 		"@axe-core/playwright": "^4.13.0",
diff --git a/patterns/hero/services-hero.php b/patterns/hero/services-hero.php
index 1efb8fb..9c4fe2a 100644
--- a/patterns/hero/services-hero.php
+++ b/patterns/hero/services-hero.php
@@ -102,15 +102,15 @@
 <!-- wp:group {"align":"full","tagName":"section","className":"ls-services-hero","style":{"border":{"bottom":{"color":"var:custom|color|border|card","style":"solid","width":"1px"}},"spacing":{"margin":{"top":"0"},"padding":{"top":"var:preset|spacing|90","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-services-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--90);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","layout":{"type":"constrained"}} -->
+	<!-- wp:group {"align":"wide","layout":{"type":"constrained","justifyContent":"left"}} -->
 	<div class="wp-block-group alignwide">
 
 		<?php if ( function_exists( 'yoast_breadcrumb' ) ) : ?>
 		<!-- wp:yoast-seo/breadcrumbs {"className":"alignwide"} /-->
 		<?php endif; ?>
 
-		<!-- wp:group {"style":{"spacing":{"margin":{"top":"var:preset|spacing|20"}}},"layout":{"type":"flex","flexWrap":"nowrap","verticalAlignment":"center"}} -->
-		<div class="wp-block-group" style="margin-top:var(--wp--preset--spacing--20)">
+		<!-- wp:group {"style":{"spacing":{"margin":{"top":"var:preset|spacing|30"}}},"layout":{"type":"flex","flexWrap":"nowrap","justifyContent":"left","verticalAlignment":"center"}} -->
+		<div class="wp-block-group" style="margin-top:var(--wp--preset--spacing--30)">
 			<!-- wp:outermost/icon-block {"iconName":"","className":"has-text-color","width":"8px","style":{"color":{"text":"var(--wp--custom--color--text--brand)"}}} -->
 			<div class="wp-block-outermost-icon-block has-text-color"><div class="icon-container" style="color:var(--wp--custom--color--text--brand);width:8px;transform:rotate(0deg) scaleX(1) scaleY(1)"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><circle cx="12" cy="12" r="12"></circle></svg></div></div>
 			<!-- /wp:outermost/icon-block -->
@@ -131,7 +131,7 @@
 				<h1 class="wp-block-heading has-900-font-size" style="font-weight:var(--wp--custom--typography--font-weight--extrabold)"><?php echo esc_html__( 'Services built for the full WordPress lifecycle.', 'ls-theme' ); ?></h1>
 				<!-- /wp:heading -->
 
-				<!-- wp:group {"style":{"spacing":{"margin":{"top":"var:preset|spacing|20"}}},"layout":{"type":"constrained","contentSize":"720px"}} -->
+				<!-- wp:group {"style":{"spacing":{"margin":{"top":"var:preset|spacing|20"}}},"layout":{"type":"constrained","contentSize":"720px","justifyContent":"left"}} -->
 				<div class="wp-block-group" style="margin-top:var(--wp--preset--spacing--20)">
 					<!-- 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__( 'From discovery and content structure to engineering, launch and long-term support, LightSpeed services are designed to work together rather than collide later.', 'ls-theme' ); ?></p>
@@ -156,15 +156,18 @@
 					<?php
 					foreach ( $ls_services_hero_tags as $ls_tag ) :
 						$ls_phase_color = 'var(--wp--custom--color--phase--' . $ls_tag['phase'] . ')';
+						$ls_pill_class  = 'ls-service-pill ls-service-pill--' . $ls_tag['phase'];
+						$ls_pill_border = 'color-mix(in srgb, ' . $ls_phase_color . ' 35%, var(--wp--custom--color--border--card))';
+						$ls_pill_bg     = 'color-mix(in srgb, ' . $ls_phase_color . ' 8%, transparent)';
 						?>
-					<!-- wp:group {"style":{"border":{"color":"var:custom|color|border|card","radius":"var:preset|border-radius|500","style":"solid","width":"1px"},"spacing":{"padding":{"top":"var:preset|spacing|5","right":"var:preset|spacing|10","bottom":"var:preset|spacing|5","left":"var:preset|spacing|10"},"blockGap":"var:preset|spacing|5"}},"layout":{"type":"flex","flexWrap":"nowrap","verticalAlignment":"center"}} -->
-					<div class="wp-block-group" style="border-color:var(--wp--custom--color--border--card);border-style:solid;border-width:1px;border-radius:var(--wp--preset--border-radius--500);padding-top:var(--wp--preset--spacing--5);padding-right:var(--wp--preset--spacing--10);padding-bottom:var(--wp--preset--spacing--5);padding-left:var(--wp--preset--spacing--10)">
+					<!-- wp:group {"className":"<?php echo esc_attr( $ls_pill_class ); ?>","style":{"border":{"color":"<?php echo esc_attr( $ls_pill_border ); ?>","radius":"var:preset|border-radius|500","style":"solid","width":"1px"},"color":{"background":"<?php echo esc_attr( $ls_pill_bg ); ?>"},"spacing":{"padding":{"top":"var:preset|spacing|10","right":"var:preset|spacing|20","bottom":"var:preset|spacing|10","left":"var:preset|spacing|20"},"blockGap":"var:preset|spacing|5"}},"layout":{"type":"flex","flexWrap":"nowrap","verticalAlignment":"center"}} -->
+					<div class="wp-block-group <?php echo esc_attr( $ls_pill_class ); ?> has-background" style="border-color:<?php echo esc_attr( $ls_pill_border ); ?>;border-style:solid;border-width:1px;border-radius:var(--wp--preset--border-radius--500);background-color:<?php echo esc_attr( $ls_pill_bg ); ?>;padding-top:var(--wp--preset--spacing--10);padding-right:var(--wp--preset--spacing--20);padding-bottom:var(--wp--preset--spacing--10);padding-left:var(--wp--preset--spacing--20)">
 						<!-- wp:outermost/icon-block {"iconName":"","className":"has-text-color","width":"13px","style":{"color":{"text":"<?php echo esc_attr( $ls_phase_color ); ?>"}}} -->
 						<div class="wp-block-outermost-icon-block has-text-color"><div class="icon-container" style="color:<?php echo esc_attr( $ls_phase_color ); ?>;width:13px;transform:rotate(0deg) scaleX(1) scaleY(1)"><?php echo $ls_tag['icon']; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped -- Static, developer-authored Phosphor icon markup, not user input. ?></div></div>
 						<!-- /wp:outermost/icon-block -->
 
-						<!-- wp:paragraph {"style":{"typography":{"fontWeight":"var:custom|typography|font-weight|semibold"},"color":{"text":"<?php echo esc_attr( $ls_phase_color ); ?>"}},"fontSize":"100"} -->
-						<p class="has-text-color has-100-font-size" style="color:<?php echo esc_attr( $ls_phase_color ); ?>;font-weight:var(--wp--custom--typography--font-weight--semibold)"><a href="<?php echo esc_url( home_url( $ls_tag['url'] ) ); ?>" style="color:inherit;text-decoration:none"><?php echo esc_html( $ls_tag['label'] ); ?></a></p>
+						<!-- wp:paragraph {"style":{"typography":{"fontWeight":"var:custom|typography|font-weight|semibold"},"color":{"text":"var(--wp--custom--color--text--default)"}},"fontSize":"100"} -->
+						<p class="has-text-color has-100-font-size" style="color:var(--wp--custom--color--text--default);font-weight:var(--wp--custom--typography--font-weight--semibold)"><a href="<?php echo esc_url( home_url( $ls_tag['url'] ) ); ?>" style="color:inherit;text-decoration:none"><?php echo esc_html( $ls_tag['label'] ); ?></a></p>
 						<!-- /wp:paragraph -->
 					</div>
 					<!-- /wp:group -->
@@ -179,38 +182,38 @@
 				<!-- wp:group {"className":"is-style-glass-card","style":{"spacing":{"padding":{"top":"var:preset|spacing|30","right":"var:preset|spacing|30","bottom":"var:preset|spacing|30","left":"var:preset|spacing|30"},"blockGap":"var:preset|spacing|20"}},"layout":{"type":"flex","orientation":"vertical","flexWrap":"nowrap"}} -->
 				<div class="wp-block-group is-style-glass-card" style="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:paragraph {"style":{"typography":{"fontFamily":"var:preset|font-family|monospace","textTransform":"uppercase","letterSpacing":"var:custom|typography|letter-spacing|widest"},"color":{"text":"var(--wp--custom--color--text--subtle)"}},"fontSize":"100"} -->
-					<p class="has-text-color has-100-font-size" style="color:var(--wp--custom--color--text--subtle);font-family:var(--wp--preset--font-family--monospace);letter-spacing:var(--wp--custom--typography--letter-spacing--widest);text-transform:uppercase"><?php echo esc_html__( 'Services / Lifecycle', 'ls-theme' ); ?></p>
+					<!-- wp:paragraph {"style":{"typography":{"fontFamily":"var:preset|font-family|monospace","textTransform":"uppercase","letterSpacing":"var:custom|typography|letter-spacing|widest"},"color":{"text":"var(--wp--custom--color--text--subtle)"}},"fontSize":"200"} -->
+					<p class="has-text-color has-200-font-size" style="color:var(--wp--custom--color--text--subtle);font-family:var(--wp--preset--font-family--monospace);letter-spacing:var(--wp--custom--typography--letter-spacing--widest);text-transform:uppercase"><?php echo esc_html__( 'Services / Lifecycle', 'ls-theme' ); ?></p>
 					<!-- /wp:paragraph -->
 
-					<!-- wp:group {"style":{"spacing":{"blockGap":"var:preset|spacing|10"}},"layout":{"type":"flex","flexWrap":"nowrap"}} -->
+					<!-- wp:group {"style":{"spacing":{"blockGap":"var:preset|spacing|10"}},"layout":{"type":"flex","flexWrap":"nowrap","justifyContent":"left"}} -->
 					<div class="wp-block-group">
-						<!-- wp:group {"style":{"color":{"background":"var(--wp--custom--color--effect--hero--brand)"},"border":{"radius":"var:preset|border-radius|200"},"dimensions":{"minHeight":"36px"}},"layout":{"type":"flex","flexWrap":"nowrap"}} -->
-						<div class="wp-block-group has-background" style="border-radius:var(--wp--preset--border-radius--200);background-color:var(--wp--custom--color--effect--hero--brand);min-height:36px"></div>
+						<!-- wp:group {"style":{"color":{"background":"var(--wp--custom--color--effect--hero--brand)"},"border":{"radius":"var:preset|border-radius|300"},"dimensions":{"minHeight":"36px"},"layout":{"selfStretch":"fixed","flexSize":"48px"}},"layout":{"type":"flex","flexWrap":"nowrap"}} -->
+						<div class="wp-block-group has-background" style="border-radius:var(--wp--preset--border-radius--300);background-color:var(--wp--custom--color--effect--hero--brand);min-height:36px"></div>
 						<!-- /wp:group -->
 
-						<!-- wp:group {"style":{"color":{"background":"var(--wp--custom--color--card--solutions--accent)"},"border":{"radius":"var:preset|border-radius|200"},"dimensions":{"minHeight":"36px"}},"layout":{"type":"flex","flexWrap":"nowrap"}} -->
-						<div class="wp-block-group has-background" style="border-radius:var(--wp--preset--border-radius--200);background-color:var(--wp--custom--color--card--solutions--accent);min-height:36px"></div>
+						<!-- wp:group {"style":{"color":{"background":"var(--wp--custom--color--card--solutions--accent)"},"border":{"radius":"var:preset|border-radius|300"},"dimensions":{"minHeight":"36px"},"layout":{"selfStretch":"fixed","flexSize":"48px"}},"layout":{"type":"flex","flexWrap":"nowrap"}} -->
+						<div class="wp-block-group has-background" style="border-radius:var(--wp--preset--border-radius--300);background-color:var(--wp--custom--color--card--solutions--accent);min-height:36px"></div>
 						<!-- /wp:group -->
 
-						<!-- wp:group {"style":{"color":{"background":"var(--wp--custom--color--effect--hero--cyan)"},"border":{"radius":"var:preset|border-radius|200"},"dimensions":{"minHeight":"36px"}},"layout":{"type":"flex","flexWrap":"nowrap"}} -->
-						<div class="wp-block-group has-background" style="border-radius:var(--wp--preset--border-radius--200);background-color:var(--wp--custom--color--effect--hero--cyan);min-height:36px"></div>
+						<!-- wp:group {"style":{"color":{"background":"var(--wp--custom--color--effect--hero--cyan)"},"border":{"radius":"var:preset|border-radius|300"},"dimensions":{"minHeight":"36px"},"layout":{"selfStretch":"fixed","flexSize":"48px"}},"layout":{"type":"flex","flexWrap":"nowrap"}} -->
+						<div class="wp-block-group has-background" style="border-radius:var(--wp--preset--border-radius--300);background-color:var(--wp--custom--color--effect--hero--cyan);min-height:36px"></div>
 						<!-- /wp:group -->
 
-						<!-- wp:group {"style":{"color":{"background":"var(--wp--custom--color--card--solutions--accent)"},"border":{"radius":"var:preset|border-radius|200"},"dimensions":{"minHeight":"36px"}},"layout":{"type":"flex","flexWrap":"nowrap"}} -->
-						<div class="wp-block-group has-background" style="border-radius:var(--wp--preset--border-radius--200);background-color:var(--wp--custom--color--card--solutions--accent);min-height:36px"></div>
+						<!-- wp:group {"style":{"color":{"background":"var(--wp--custom--color--card--solutions--accent)"},"border":{"radius":"var:preset|border-radius|300"},"dimensions":{"minHeight":"36px"},"layout":{"selfStretch":"fixed","flexSize":"48px"}},"layout":{"type":"flex","flexWrap":"nowrap"}} -->
+						<div class="wp-block-group has-background" style="border-radius:var(--wp--preset--border-radius--300);background-color:var(--wp--custom--color--card--solutions--accent);min-height:36px"></div>
 						<!-- /wp:group -->
 					</div>
 					<!-- /wp:group -->
 
 					<!-- wp:group {"style":{"border":{"top":{"color":"var:custom|color|border|card","style":"dashed","width":"1px"}},"spacing":{"padding":{"top":"var:preset|spacing|10"},"blockGap":"var:preset|spacing|10"}},"layout":{"type":"flex","justifyContent":"space-between","flexWrap":"nowrap"}} -->
 					<div class="wp-block-group" style="border-top-color:var(--wp--custom--color--border--card);border-top-style:dashed;border-top-width:1px;padding-top:var(--wp--preset--spacing--10)">
-						<!-- wp:paragraph {"style":{"typography":{"fontFamily":"var:preset|font-family|monospace"},"color":{"text":"var(--wp--custom--color--text--muted)"}},"fontSize":"100"} -->
-						<p class="has-text-color has-100-font-size" style="color:var(--wp--custom--color--text--muted);font-family:var(--wp--preset--font-family--monospace)"><span style="color:var(--wp--custom--color--text--brand)"><?php echo esc_html__( 'services', 'ls-theme' ); ?></span> <?php echo esc_html__( '14 / 14', 'ls-theme' ); ?></p>
+						<!-- wp:paragraph {"style":{"typography":{"fontFamily":"var:preset|font-family|monospace"},"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);font-family:var(--wp--preset--font-family--monospace)"><span style="color:var(--wp--custom--color--text--brand)"><?php echo esc_html__( 'services', 'ls-theme' ); ?></span> <?php echo esc_html__( '14 / 14', 'ls-theme' ); ?></p>
 						<!-- /wp:paragraph -->
 
-						<!-- wp:paragraph {"style":{"typography":{"fontFamily":"var:preset|font-family|monospace"},"color":{"text":"var(--wp--custom--color--text--muted)"}},"fontSize":"100"} -->
-						<p class="has-text-color has-100-font-size" style="color:var(--wp--custom--color--text--muted);font-family:var(--wp--preset--font-family--monospace)"><span style="color:var(--wp--custom--color--text--brand)"><?php echo esc_html__( 'tokens', 'ls-theme' ); ?></span> <?php echo esc_html__( 'live', 'ls-theme' ); ?></p>
+						<!-- wp:paragraph {"style":{"typography":{"fontFamily":"var:preset|font-family|monospace"},"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);font-family:var(--wp--preset--font-family--monospace)"><span style="color:var(--wp--custom--color--text--brand)"><?php echo esc_html__( 'tokens', 'ls-theme' ); ?></span> <?php echo esc_html__( 'live', 'ls-theme' ); ?></p>
 						<!-- /wp:paragraph -->
 					</div>
 					<!-- /wp:group -->
diff --git a/src/scss/structural/services-hero.scss b/src/scss/structural/services-hero.scss
new file mode 100644
index 0000000..c35a373
--- /dev/null
+++ b/src/scss/structural/services-hero.scss
@@ -0,0 +1,55 @@
+/********** Services Hero (Services page only) **********/
+
+/*
+ * Services Hero (LS-1598, single consumer patterns/hero/services-hero.php). The service-tag
+ * pills' rest-state background/border tints are set inline per instance (each pill mixes its
+ * own phase token), because block-supports has no way to express six distinct phase-derived
+ * colours. Interactive states (:hover, :focus-within, :focus-visible) have no block-supports
+ * equivalent at all, so they live here.
+ *
+ * The `!important` on the hover/focus-within background-color and border-color declarations is
+ * required, not a shortcut: an inline `style` attribute always outranks an external stylesheet
+ * rule regardless of pseudo-class or selector specificity, so without it these two properties
+ * could never change on hover. transform/box-shadow aren't set inline at rest, so they don't
+ * need it.
+ */
+.ls-service-pill {
+  transition:
+    background-color var(--wp--custom--animation--duration--responsive) var(--wp--custom--animation--easing--standard),
+    border-color var(--wp--custom--animation--duration--responsive) var(--wp--custom--animation--easing--standard),
+    transform var(--wp--custom--animation--duration--responsive) var(--wp--custom--animation--easing--standard),
+    box-shadow var(--wp--custom--animation--duration--responsive) var(--wp--custom--animation--easing--standard);
+
+  &:hover,
+  &:focus-within {
+    transform: translateY(-1px);
+    box-shadow: var(--wp--custom--shadow--elevation--100);
+  }
+
+  a:focus-visible {
+    outline: 2px solid var(--wp--custom--color--focus--ring);
+    outline-offset: 2px;
+    border-radius: var(--wp--preset--border-radius--100);
+  }
+}
+
+@each $phase in discover, create, build, launch, grow, evolve {
+  .ls-service-pill--#{$phase} {
+    &:hover,
+    &:focus-within {
+      background-color: color-mix(in srgb, var(--wp--custom--color--phase--#{$phase}) 16%, transparent) !important;
+      border-color: color-mix(in srgb, var(--wp--custom--color--phase--#{$phase}) 55%, var(--wp--custom--color--border--card)) !important;
+    }
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .ls-service-pill {
+    transition: none;
+
+    &:hover,
+    &:focus-within {
+      transform: none;
+    }
+  }
+}

From 065e1290d68847c5442d6eea9c2c438525bb34cc Mon Sep 17 00:00:00 2001
From: Brandonma21 <Brandonmarshall101@gmail.com>
Date: Mon, 7 Sep 2026 15:37:00 +0200
Subject: [PATCH 3/7] Add Services "Linked decisions" section, fix pill click
 targets (LS-1598)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Add patterns/sections/services-linked-decisions.php: six-step process
  pill row (Discover/Create/Build/Launch/Grow/Evolve) matching the
  site's lifecycle-phase colours, linking to new /services/ phase pages
- Neutral pills with phase-only badge, hover/focus-within states,
  :focus-visible outline
- Fix whole-pill click target on both hero and Section 1 pills — only
  the text was clickable before; anchor now stays position:static so
  its ::before overlay sizes against the full pill, not just the text
- Add src/scss/structural/services-linked-decisions.scss for the
  states/pseudo-elements JSON can't express, wired into build/enqueue
- Correct services-hero.scss's CSS-limitation comments to AGENTS.md's
  exact format
---
 assets/css/services-hero.css                  |   2 +-
 assets/css/services-linked-decisions.css      |   1 +
 functions.php                                 |   1 +
 inc/animations.php                            |  85 ++++++-----
 package.json                                  |   6 +-
 .../sections/services-linked-decisions.php    | 135 ++++++++++++++++++
 src/scss/structural/services-hero.scss        |  43 ++++--
 .../structural/services-linked-decisions.scss |  91 ++++++++++++
 8 files changed, 312 insertions(+), 52 deletions(-)
 create mode 100644 assets/css/services-linked-decisions.css
 create mode 100644 patterns/sections/services-linked-decisions.php
 create mode 100644 src/scss/structural/services-linked-decisions.scss

diff --git a/assets/css/services-hero.css b/assets/css/services-hero.css
index fb1ee29..3c509ec 100644
--- a/assets/css/services-hero.css
+++ b/assets/css/services-hero.css
@@ -1 +1 @@
-.ls-service-pill{transition:background-color var(--wp--custom--animation--duration--responsive) var(--wp--custom--animation--easing--standard),border-color var(--wp--custom--animation--duration--responsive) var(--wp--custom--animation--easing--standard),transform var(--wp--custom--animation--duration--responsive) var(--wp--custom--animation--easing--standard),box-shadow var(--wp--custom--animation--duration--responsive) var(--wp--custom--animation--easing--standard)}.ls-service-pill:hover,.ls-service-pill:focus-within{transform:translateY(-1px);box-shadow:var(--wp--custom--shadow--elevation--100)}.ls-service-pill a:focus-visible{outline:2px solid var(--wp--custom--color--focus--ring);outline-offset:2px;border-radius:var(--wp--preset--border-radius--100)}.ls-service-pill--discover:hover,.ls-service-pill--discover:focus-within{background-color:color-mix(in srgb, var(--wp--custom--color--phase--discover) 16%, transparent) !important;border-color:color-mix(in srgb, var(--wp--custom--color--phase--discover) 55%, var(--wp--custom--color--border--card)) !important}.ls-service-pill--create:hover,.ls-service-pill--create:focus-within{background-color:color-mix(in srgb, var(--wp--custom--color--phase--create) 16%, transparent) !important;border-color:color-mix(in srgb, var(--wp--custom--color--phase--create) 55%, var(--wp--custom--color--border--card)) !important}.ls-service-pill--build:hover,.ls-service-pill--build:focus-within{background-color:color-mix(in srgb, var(--wp--custom--color--phase--build) 16%, transparent) !important;border-color:color-mix(in srgb, var(--wp--custom--color--phase--build) 55%, var(--wp--custom--color--border--card)) !important}.ls-service-pill--launch:hover,.ls-service-pill--launch:focus-within{background-color:color-mix(in srgb, var(--wp--custom--color--phase--launch) 16%, transparent) !important;border-color:color-mix(in srgb, var(--wp--custom--color--phase--launch) 55%, var(--wp--custom--color--border--card)) !important}.ls-service-pill--grow:hover,.ls-service-pill--grow:focus-within{background-color:color-mix(in srgb, var(--wp--custom--color--phase--grow) 16%, transparent) !important;border-color:color-mix(in srgb, var(--wp--custom--color--phase--grow) 55%, var(--wp--custom--color--border--card)) !important}.ls-service-pill--evolve:hover,.ls-service-pill--evolve:focus-within{background-color:color-mix(in srgb, var(--wp--custom--color--phase--evolve) 16%, transparent) !important;border-color:color-mix(in srgb, var(--wp--custom--color--phase--evolve) 55%, var(--wp--custom--color--border--card)) !important}@media(prefers-reduced-motion: reduce){.ls-service-pill{transition:none}.ls-service-pill:hover,.ls-service-pill:focus-within{transform:none}}
+.ls-service-pill{position:relative;transition:background-color var(--wp--custom--animation--duration--responsive) var(--wp--custom--animation--easing--standard),border-color var(--wp--custom--animation--duration--responsive) var(--wp--custom--animation--easing--standard),transform var(--wp--custom--animation--duration--responsive) var(--wp--custom--animation--easing--standard),box-shadow var(--wp--custom--animation--duration--responsive) var(--wp--custom--animation--easing--standard)}.ls-service-pill:hover,.ls-service-pill:focus-within{transform:translateY(-1px);box-shadow:var(--wp--custom--shadow--elevation--100)}.ls-service-pill a::before{content:"";position:absolute;inset:0;z-index:var(--wp--custom--z-index--base)}.ls-service-pill a:focus-visible{outline:2px solid var(--wp--custom--color--focus--ring);outline-offset:2px;border-radius:var(--wp--preset--border-radius--100)}.ls-service-pill--discover:hover,.ls-service-pill--discover:focus-within{background-color:color-mix(in srgb, var(--wp--custom--color--phase--discover) 16%, transparent) !important;border-color:color-mix(in srgb, var(--wp--custom--color--phase--discover) 55%, var(--wp--custom--color--border--card)) !important}.ls-service-pill--create:hover,.ls-service-pill--create:focus-within{background-color:color-mix(in srgb, var(--wp--custom--color--phase--create) 16%, transparent) !important;border-color:color-mix(in srgb, var(--wp--custom--color--phase--create) 55%, var(--wp--custom--color--border--card)) !important}.ls-service-pill--build:hover,.ls-service-pill--build:focus-within{background-color:color-mix(in srgb, var(--wp--custom--color--phase--build) 16%, transparent) !important;border-color:color-mix(in srgb, var(--wp--custom--color--phase--build) 55%, var(--wp--custom--color--border--card)) !important}.ls-service-pill--launch:hover,.ls-service-pill--launch:focus-within{background-color:color-mix(in srgb, var(--wp--custom--color--phase--launch) 16%, transparent) !important;border-color:color-mix(in srgb, var(--wp--custom--color--phase--launch) 55%, var(--wp--custom--color--border--card)) !important}.ls-service-pill--grow:hover,.ls-service-pill--grow:focus-within{background-color:color-mix(in srgb, var(--wp--custom--color--phase--grow) 16%, transparent) !important;border-color:color-mix(in srgb, var(--wp--custom--color--phase--grow) 55%, var(--wp--custom--color--border--card)) !important}.ls-service-pill--evolve:hover,.ls-service-pill--evolve:focus-within{background-color:color-mix(in srgb, var(--wp--custom--color--phase--evolve) 16%, transparent) !important;border-color:color-mix(in srgb, var(--wp--custom--color--phase--evolve) 55%, var(--wp--custom--color--border--card)) !important}@media(prefers-reduced-motion: reduce){.ls-service-pill{transition:none}.ls-service-pill:hover,.ls-service-pill:focus-within{transform:none}}
diff --git a/assets/css/services-linked-decisions.css b/assets/css/services-linked-decisions.css
new file mode 100644
index 0000000..6700041
--- /dev/null
+++ b/assets/css/services-linked-decisions.css
@@ -0,0 +1 @@
+.ls-process-pill{position:relative;transition:border-color var(--wp--custom--animation--duration--responsive) var(--wp--custom--animation--easing--standard),transform var(--wp--custom--animation--duration--responsive) var(--wp--custom--animation--easing--standard),box-shadow var(--wp--custom--animation--duration--responsive) var(--wp--custom--animation--easing--standard)}.ls-process-pill:hover,.ls-process-pill:focus-within{border-color:var(--wp--custom--color--border--field);transform:translateY(-1px);box-shadow:var(--wp--custom--shadow--elevation--100)}.ls-process-pill .ls-process-pill__label a::before{content:"";position:absolute;inset:0;z-index:var(--wp--custom--z-index--base)}.ls-process-pill .ls-process-pill__label a:focus-visible{outline:2px solid var(--wp--custom--color--focus--ring);outline-offset:2px;border-radius:var(--wp--preset--border-radius--100)}.ls-process-pill .ls-process-pill__badge{transition:background-color var(--wp--custom--animation--duration--responsive) var(--wp--custom--animation--easing--standard),border-color var(--wp--custom--animation--duration--responsive) var(--wp--custom--animation--easing--standard)}.ls-process-pill--discover:hover .ls-process-pill__badge,.ls-process-pill--discover:focus-within .ls-process-pill__badge{background-color:color-mix(in srgb, var(--wp--custom--color--phase--discover) 20%, transparent) !important;border-color:color-mix(in srgb, var(--wp--custom--color--phase--discover) 50%, transparent) !important}.ls-process-pill--create:hover .ls-process-pill__badge,.ls-process-pill--create:focus-within .ls-process-pill__badge{background-color:color-mix(in srgb, var(--wp--custom--color--phase--create) 20%, transparent) !important;border-color:color-mix(in srgb, var(--wp--custom--color--phase--create) 50%, transparent) !important}.ls-process-pill--build:hover .ls-process-pill__badge,.ls-process-pill--build:focus-within .ls-process-pill__badge{background-color:color-mix(in srgb, var(--wp--custom--color--phase--build) 20%, transparent) !important;border-color:color-mix(in srgb, var(--wp--custom--color--phase--build) 50%, transparent) !important}.ls-process-pill--launch:hover .ls-process-pill__badge,.ls-process-pill--launch:focus-within .ls-process-pill__badge{background-color:color-mix(in srgb, var(--wp--custom--color--phase--launch) 20%, transparent) !important;border-color:color-mix(in srgb, var(--wp--custom--color--phase--launch) 50%, transparent) !important}.ls-process-pill--grow:hover .ls-process-pill__badge,.ls-process-pill--grow:focus-within .ls-process-pill__badge{background-color:color-mix(in srgb, var(--wp--custom--color--phase--grow) 20%, transparent) !important;border-color:color-mix(in srgb, var(--wp--custom--color--phase--grow) 50%, transparent) !important}.ls-process-pill--evolve:hover .ls-process-pill__badge,.ls-process-pill--evolve:focus-within .ls-process-pill__badge{background-color:color-mix(in srgb, var(--wp--custom--color--phase--evolve) 20%, transparent) !important;border-color:color-mix(in srgb, var(--wp--custom--color--phase--evolve) 50%, transparent) !important}@media(prefers-reduced-motion: reduce){.ls-process-pill{transition:none}.ls-process-pill:hover,.ls-process-pill:focus-within{transform:none}.ls-process-pill__badge{transition:none}}
diff --git a/functions.php b/functions.php
index e81eafd..e7fde85 100644
--- a/functions.php
+++ b/functions.php
@@ -71,6 +71,7 @@ function ls_theme_setup() {
 	add_editor_style( 'assets/css/cta-buttons.css' );
 	add_editor_style( 'assets/css/home-hero.css' );
 	add_editor_style( 'assets/css/services-hero.css' );
+	add_editor_style( 'assets/css/services-linked-decisions.css' );
 	add_editor_style( 'assets/css/work-hero.css' );
 	add_editor_style( 'assets/css/work-single-hero.css' );
 	add_editor_style( 'assets/css/blog-hero.css' );
diff --git a/inc/animations.php b/inc/animations.php
index d47d781..5b705c1 100644
--- a/inc/animations.php
+++ b/inc/animations.php
@@ -55,11 +55,11 @@ function ls_theme_get_local_asset_version( $path ) {
  */
 function ls_theme_get_bundle_render_markers() {
 	return array(
-		'taxonomy-filter'       => array( 'blocks' => array( 'ls-plugin/taxonomy-filter' ) ),
-		'work-project-card'     => array(
+		'taxonomy-filter'           => array( 'blocks' => array( 'ls-plugin/taxonomy-filter' ) ),
+		'work-project-card'         => array(
 			'classes' => array( 'is-style-card-case-study', 'ls-tag-pills', 'ls-card-banner-tint', 'ls-platform-tag-brand', 'ls-platform-tag-woocommerce' ),
 		),
-		'work-archive-sections' => array(
+		'work-archive-sections'     => array(
 			'classes' => array(
 				'ls-icon-well-accent',
 				'ls-icon-well-brand',
@@ -70,19 +70,20 @@ function ls_theme_get_bundle_render_markers() {
 				'ls-card-divider-both',
 			),
 		),
-		'home-hero'             => array( 'classes' => array( 'ls-home-hero-section' ) ),
-		'services-hero'         => array( 'classes' => array( 'ls-service-pill' ) ),
-		'work-hero'             => array( 'classes' => array( 'ls-work-hero' ) ),
-		'work-single-hero'      => array( 'classes' => array( 'ls-work-single-meta' ) ),
-		'blog-hero'             => array( 'classes' => array( 'ls-blog-hero' ) ),
-		'blog-all-articles'     => array( 'classes' => array( 'is-style-card-post', 'ls-post-card-cta' ) ),
-		'blog-writing-cta'      => array( 'classes' => array( 'ls-writing-cta', 'ls-code-panel' ) ),
-		'button-secondary'      => array( 'classes' => array( 'is-style-button-secondary' ) ),
-		'featured-work'         => array( 'classes' => array( 'ls-featured-work-grid', 'ls-featured-work-card__divider' ) ),
-		'where-to-fit'          => array( 'classes' => array( 'ls-package-card' ) ),
-		'homepage-cta'          => array( 'classes' => array( 'ls-homepage-cta' ) ),
-		'stats-bar'             => array( 'classes' => array( 'ls-stats-row', 'ls-stat-item' ) ),
-		'homepage-card-rows'    => array( 'classes' => array( 'ls-homepage-card-row', 'ls-what-we-build-row' ) ),
+		'home-hero'                 => array( 'classes' => array( 'ls-home-hero-section' ) ),
+		'services-hero'             => array( 'classes' => array( 'ls-service-pill' ) ),
+		'services-linked-decisions' => array( 'classes' => array( 'ls-process-pill' ) ),
+		'work-hero'                 => array( 'classes' => array( 'ls-work-hero' ) ),
+		'work-single-hero'          => array( 'classes' => array( 'ls-work-single-meta' ) ),
+		'blog-hero'                 => array( 'classes' => array( 'ls-blog-hero' ) ),
+		'blog-all-articles'         => array( 'classes' => array( 'is-style-card-post', 'ls-post-card-cta' ) ),
+		'blog-writing-cta'          => array( 'classes' => array( 'ls-writing-cta', 'ls-code-panel' ) ),
+		'button-secondary'          => array( 'classes' => array( 'is-style-button-secondary' ) ),
+		'featured-work'             => array( 'classes' => array( 'ls-featured-work-grid', 'ls-featured-work-card__divider' ) ),
+		'where-to-fit'              => array( 'classes' => array( 'ls-package-card' ) ),
+		'homepage-cta'              => array( 'classes' => array( 'ls-homepage-cta' ) ),
+		'stats-bar'                 => array( 'classes' => array( 'ls-stats-row', 'ls-stat-item' ) ),
+		'homepage-card-rows'        => array( 'classes' => array( 'ls-homepage-card-row', 'ls-what-we-build-row' ) ),
 	);
 }
 
@@ -200,7 +201,7 @@ function ls_theme_print_late_effect_styles() {
 function ls_theme_get_effect_styles( $context = 'front' ) {
 	$effects = array(
 		// Genuinely global, sitewide styling — always loads, no condition.
-		'effects'                 => array(
+		'effects'                   => array(
 			'handle'   => 'ls-theme-effects',
 			'path'     => 'assets/css/animations.css',
 			'contexts' => array( 'front', 'editor' ),
@@ -211,7 +212,7 @@ function ls_theme_get_effect_styles( $context = 'front' ) {
 		// work-archive-sections' icon-well classes are also used by three homepage sections).
 		// Conditions only apply in the 'front' context; the editor keeps loading every bundle
 		// unconditionally so any pattern still looks correct when edited in isolation.
-		'taxonomy-filter'         => array(
+		'taxonomy-filter'           => array(
 			'handle'    => 'ls-theme-taxonomy-filter',
 			'path'      => 'assets/css/taxonomy-filter.css',
 			'contexts'  => array( 'front', 'editor' ),
@@ -220,7 +221,7 @@ function ls_theme_get_effect_styles( $context = 'front' ) {
 				return is_post_type_archive( 'project' ) || is_page_template( 'page-blog-archive' );
 			},
 		),
-		'work-project-card'       => array(
+		'work-project-card'         => array(
 			'handle'    => 'ls-theme-work-project-card',
 			'path'      => 'assets/css/work-project-card.css',
 			'contexts'  => array( 'front', 'editor' ),
@@ -230,7 +231,7 @@ function ls_theme_get_effect_styles( $context = 'front' ) {
 				return is_front_page() || is_post_type_archive( 'project' );
 			},
 		),
-		'work-archive-sections'   => array(
+		'work-archive-sections'     => array(
 			'handle'    => 'ls-theme-work-archive-sections',
 			'path'      => 'assets/css/work-archive-sections.css',
 			'contexts'  => array( 'front', 'editor' ),
@@ -240,7 +241,7 @@ function ls_theme_get_effect_styles( $context = 'front' ) {
 				return is_front_page() || is_post_type_archive( 'project' );
 			},
 		),
-		'card-shells'             => array(
+		'card-shells'               => array(
 			'handle'   => 'ls-theme-card-shells',
 			'path'     => 'assets/css/card-shells.css',
 			'contexts' => array( 'front', 'editor' ),
@@ -250,26 +251,32 @@ function ls_theme_get_effect_styles( $context = 'front' ) {
 			// unstyled on every single use, not just a rare off-template case — so at ~10 KB
 			// compressed it's cheaper to load unconditionally than to risk that.
 		),
-		'cta-buttons'             => array(
+		'cta-buttons'               => array(
 			'handle'   => 'ls-theme-cta-buttons',
 			'path'     => 'assets/css/cta-buttons.css',
 			'contexts' => array( 'front', 'editor' ),
 			// Same reasoning as card-shells above (~5 KB compressed).
 		),
-		'home-hero'               => array(
+		'home-hero'                 => array(
 			'handle'    => 'ls-theme-home-hero',
 			'path'      => 'assets/css/home-hero.css',
 			'contexts'  => array( 'front', 'editor' ),
 			'condition' => 'is_front_page',
 		),
-		'services-hero'           => array(
+		'services-hero'             => array(
 			'handle'   => 'ls-theme-services-hero',
 			'path'     => 'assets/css/services-hero.css',
 			'contexts' => array( 'front', 'editor' ),
 			// No page template yet (LS-1598 in progress) — same reasoning as card-shells/
 			// cta-buttons above, relies on render_block marker detection instead of a condition.
 		),
-		'work-hero'               => array(
+		'services-linked-decisions' => array(
+			'handle'   => 'ls-theme-services-linked-decisions',
+			'path'     => 'assets/css/services-linked-decisions.css',
+			'contexts' => array( 'front', 'editor' ),
+			// Same reasoning as services-hero above.
+		),
+		'work-hero'                 => array(
 			'handle'    => 'ls-theme-work-hero',
 			'path'      => 'assets/css/work-hero.css',
 			'contexts'  => array( 'front', 'editor' ),
@@ -277,7 +284,7 @@ function ls_theme_get_effect_styles( $context = 'front' ) {
 				return is_post_type_archive( 'project' );
 			},
 		),
-		'work-single-hero'        => array(
+		'work-single-hero'          => array(
 			'handle'    => 'ls-theme-work-single-hero',
 			'path'      => 'assets/css/work-single-hero.css',
 			'contexts'  => array( 'front', 'editor' ),
@@ -285,7 +292,7 @@ function ls_theme_get_effect_styles( $context = 'front' ) {
 				return is_singular( 'project' );
 			},
 		),
-		'blog-hero'               => array(
+		'blog-hero'                 => array(
 			'handle'    => 'ls-theme-blog-hero',
 			'path'      => 'assets/css/blog-hero.css',
 			'contexts'  => array( 'front', 'editor' ),
@@ -293,7 +300,7 @@ function ls_theme_get_effect_styles( $context = 'front' ) {
 				return is_page_template( 'page-blog-archive' );
 			},
 		),
-		'blog-all-articles'       => array(
+		'blog-all-articles'         => array(
 			'handle'    => 'ls-theme-blog-all-articles',
 			'path'      => 'assets/css/blog-all-articles.css',
 			'contexts'  => array( 'front', 'editor' ),
@@ -301,7 +308,7 @@ function ls_theme_get_effect_styles( $context = 'front' ) {
 				return is_page_template( 'page-blog-archive' );
 			},
 		),
-		'blog-writing-cta'        => array(
+		'blog-writing-cta'          => array(
 			'handle'    => 'ls-theme-blog-writing-cta',
 			'path'      => 'assets/css/blog-writing-cta.css',
 			'contexts'  => array( 'front', 'editor' ),
@@ -309,7 +316,7 @@ function ls_theme_get_effect_styles( $context = 'front' ) {
 				return is_page_template( 'page-blog-archive' );
 			},
 		),
-		'faq'                     => array(
+		'faq'                       => array(
 			'handle'   => 'ls-theme-faq',
 			'path'     => 'assets/css/faq.css',
 			'contexts' => array( 'front', 'editor' ),
@@ -324,12 +331,12 @@ function ls_theme_get_effect_styles( $context = 'front' ) {
 		// of animations.css rather than kept there under the header/footer exception. The header
 		// and footer template parts render on every page anyway, so a presence condition would
 		// never actually skip loading this bundle — left unconditional.
-		'links'                   => array(
+		'links'                     => array(
 			'handle'   => 'ls-theme-links',
 			'path'     => 'assets/css/links.css',
 			'contexts' => array( 'front', 'editor' ),
 		),
-		'button-secondary'        => array(
+		'button-secondary'          => array(
 			'handle'    => 'ls-theme-button-secondary',
 			'path'      => 'assets/css/button-secondary.css',
 			'contexts'  => array( 'front', 'editor' ),
@@ -343,43 +350,43 @@ function ls_theme_get_effect_styles( $context = 'front' ) {
 				return is_front_page() || is_post_type_archive( 'project' ) || is_404();
 			},
 		),
-		'featured-work'           => array(
+		'featured-work'             => array(
 			'handle'    => 'ls-theme-featured-work',
 			'path'      => 'assets/css/featured-work.css',
 			'contexts'  => array( 'front', 'editor' ),
 			'condition' => 'is_front_page',
 		),
-		'where-to-fit'            => array(
+		'where-to-fit'              => array(
 			'handle'    => 'ls-theme-where-to-fit',
 			'path'      => 'assets/css/where-to-fit.css',
 			'contexts'  => array( 'front', 'editor' ),
 			'condition' => 'is_front_page',
 		),
-		'homepage-cta'            => array(
+		'homepage-cta'              => array(
 			'handle'    => 'ls-theme-homepage-cta',
 			'path'      => 'assets/css/homepage-cta.css',
 			'contexts'  => array( 'front', 'editor' ),
 			'condition' => 'is_front_page',
 		),
-		'stats-bar'               => array(
+		'stats-bar'                 => array(
 			'handle'    => 'ls-theme-stats-bar',
 			'path'      => 'assets/css/stats-bar.css',
 			'contexts'  => array( 'front', 'editor' ),
 			'condition' => 'is_front_page',
 		),
-		'homepage-card-rows'      => array(
+		'homepage-card-rows'        => array(
 			'handle'    => 'ls-theme-homepage-card-rows',
 			'path'      => 'assets/css/homepage-card-rows.css',
 			'contexts'  => array( 'front', 'editor' ),
 			'condition' => 'is_front_page',
 		),
-		'homepage-why-lightspeed' => array(
+		'homepage-why-lightspeed'   => array(
 			'handle'    => 'ls-theme-homepage-why-lightspeed',
 			'path'      => 'assets/css/homepage-why-lightspeed.css',
 			'contexts'  => array( 'front', 'editor' ),
 			'condition' => 'is_front_page',
 		),
-		'search-results'          => array(
+		'search-results'            => array(
 			'handle'    => 'ls-theme-search-results',
 			'path'      => 'assets/css/search-results.css',
 			'contexts'  => array( 'front', 'editor' ),
diff --git a/package.json b/package.json
index df901cf..0b3480f 100644
--- a/package.json
+++ b/package.json
@@ -4,15 +4,15 @@
 	"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/services-hero.scss:assets/css/services-hero.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/services-hero.scss:assets/css/services-hero.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/services-hero.scss:assets/css/services-hero.css src/scss/structural/services-linked-decisions.scss:assets/css/services-linked-decisions.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/services-hero.scss:assets/css/services-hero.css src/scss/structural/services-linked-decisions.scss:assets/css/services-linked-decisions.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",
 		"security:scan": "node theme-utils.mjs security-scan",
 		"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);\"",
-		"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/services-hero.scss:assets/css/services-hero.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/services-hero.scss:assets/css/services-hero.css src/scss/structural/services-linked-decisions.scss:assets/css/services-linked-decisions.css"
 	},
 	"devDependencies": {
 		"@axe-core/playwright": "^4.13.0",
diff --git a/patterns/sections/services-linked-decisions.php b/patterns/sections/services-linked-decisions.php
new file mode 100644
index 0000000..da96f42
--- /dev/null
+++ b/patterns/sections/services-linked-decisions.php
@@ -0,0 +1,135 @@
+<?php
+/**
+ * Title: Section - Services Linked Decisions
+ * Slug: ls-theme/services-linked-decisions
+ * Categories: featured
+ * Block Types: core/pattern
+ * Description: The Services page's "Linked decisions, not disconnected tasks" section: an eyebrow/heading pair on the left and, on the right, supporting copy plus a six-step process pill row (Discover → Create → Build → Launch → Grow → Evolve, matching the site's lifecycle-phase colours) that wraps naturally on narrower viewports.
+ * Keywords: services, process, steps, section
+ * Viewport Width: 1280
+ * Inserter: true
+ *
+ * @package ls-theme
+ */
+
+$ls_linked_decisions_steps = array(
+	array(
+		'index' => '01',
+		'label' => __( 'Discover', 'ls-theme' ),
+		'phase' => 'discover',
+		'url'   => '/services/discover/',
+	),
+	array(
+		'index' => '02',
+		'label' => __( 'Create', 'ls-theme' ),
+		'phase' => 'create',
+		'url'   => '/services/create/',
+	),
+	array(
+		'index' => '03',
+		'label' => __( 'Build', 'ls-theme' ),
+		'phase' => 'build',
+		'url'   => '/services/build/',
+	),
+	array(
+		'index' => '04',
+		'label' => __( 'Launch', 'ls-theme' ),
+		'phase' => 'launch',
+		'url'   => '/services/launch/',
+	),
+	array(
+		'index' => '05',
+		'label' => __( 'Grow', 'ls-theme' ),
+		'phase' => 'grow',
+		'url'   => '/services/grow/',
+	),
+	array(
+		'index' => '06',
+		'label' => __( 'Evolve', 'ls-theme' ),
+		'phase' => 'evolve',
+		'url'   => '/services/evolve/',
+	),
+);
+
+$ls_step_arrow_icon = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor"><path d="M221.66,133.66l-72,72a8,8,0,0,1-11.32-11.32L196.69,136H40a8,8,0,0,1,0-16H196.69L138.34,61.66a8,8,0,0,1,11.32-11.32l72,72A8,8,0,0,1,221.66,133.66Z"></path></svg>';
+?>
+<!-- wp:group {"align":"full","tagName":"section","className":"is-style-content-band","style":{"spacing":{"padding":{"top":"var:preset|spacing|90","right":"var:preset|spacing|60","bottom":"var:preset|spacing|100","left":"var:preset|spacing|60"}}},"layout":{"type":"constrained"}} -->
+<section class="wp-block-group alignfull is-style-content-band" style="padding-top:var(--wp--preset--spacing--90);padding-right:var(--wp--preset--spacing--60);padding-bottom:var(--wp--preset--spacing--100);padding-left:var(--wp--preset--spacing--60)">
+
+	<!-- wp:group {"align":"wide","layout":{"type":"constrained","justifyContent":"left"}} -->
+	<div class="wp-block-group alignwide">
+
+		<!-- wp:columns {"align":"wide","verticalAlignment":"top","style":{"spacing":{"blockGap":{"left":"var:preset|spacing|60"}}}} -->
+		<div class="wp-block-columns alignwide are-vertically-aligned-top">
+
+			<!-- wp:column {"verticalAlignment":"top","width":"40%"} -->
+			<div class="wp-block-column is-vertically-aligned-top" style="flex-basis:40%">
+
+				<!-- wp:group {"layout":{"type":"flex","flexWrap":"nowrap","justifyContent":"left","verticalAlignment":"center"}} -->
+				<div class="wp-block-group">
+					<!-- wp:outermost/icon-block {"iconName":"","className":"has-text-color","width":"8px","style":{"color":{"text":"var(--wp--custom--color--text--brand)"}}} -->
+					<div class="wp-block-outermost-icon-block has-text-color"><div class="icon-container" style="color:var(--wp--custom--color--text--brand);width:8px;transform:rotate(0deg) scaleX(1) scaleY(1)"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><circle cx="12" cy="12" r="12"></circle></svg></div></div>
+					<!-- /wp:outermost/icon-block -->
+
+					<!-- 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__( 'How the service model works', 'ls-theme' ); ?></p>
+					<!-- /wp:paragraph -->
+				</div>
+				<!-- /wp:group -->
+
+				<!-- wp:heading {"level":2,"style":{"typography":{"fontWeight":"var:custom|typography|font-weight|extrabold"},"spacing":{"margin":{"top":"var:preset|spacing|10"}}},"fontSize":"600"} -->
+				<h2 class="wp-block-heading has-600-font-size" style="margin-top:var(--wp--preset--spacing--10);font-weight:var(--wp--custom--typography--font-weight--extrabold)"><?php echo esc_html__( 'Linked decisions, not disconnected tasks.', 'ls-theme' ); ?></h2>
+				<!-- /wp:heading -->
+			</div>
+			<!-- /wp:column -->
+
+			<!-- wp:column {"verticalAlignment":"top","width":"60%"} -->
+			<div class="wp-block-column is-vertically-aligned-top" style="flex-basis:60%">
+
+				<!-- wp:group {"layout":{"type":"constrained","contentSize":"600px","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__( 'The strongest platforms are not built through disconnected tasks. They are shaped through linked decisions across scope, design, content, implementation, launch readiness and post-launch care.', 'ls-theme' ); ?></p>
+					<!-- /wp:paragraph -->
+				</div>
+				<!-- /wp:group -->
+
+				<!-- wp:group {"style":{"spacing":{"margin":{"top":"var:preset|spacing|30"},"blockGap":"var:preset|spacing|20"}},"layout":{"type":"flex","flexWrap":"wrap","verticalAlignment":"center"}} -->
+				<div class="wp-block-group" style="margin-top:var(--wp--preset--spacing--30)">
+					<?php
+					foreach ( $ls_linked_decisions_steps as $ls_step_index => $ls_step ) :
+						$ls_step_phase_color = 'var(--wp--custom--color--phase--' . $ls_step['phase'] . ')';
+						$ls_badge_bg         = 'color-mix(in srgb, ' . $ls_step_phase_color . ' 10%, transparent)';
+						$ls_badge_border     = 'color-mix(in srgb, ' . $ls_step_phase_color . ' 30%, transparent)';
+						$ls_pill_class       = 'ls-process-pill ls-process-pill--' . $ls_step['phase'];
+						?>
+
+					<!-- wp:group {"className":"<?php echo esc_attr( $ls_pill_class ); ?>","style":{"border":{"color":"var:custom|color|border|card","radius":"var:preset|border-radius|500","style":"solid","width":"1px"},"color":{"background":"var:custom|color|surface|canvas"},"spacing":{"padding":{"top":"var:preset|spacing|20","right":"var:preset|spacing|30","bottom":"var:preset|spacing|20","left":"var:preset|spacing|20"},"blockGap":"var:preset|spacing|10"}},"layout":{"type":"flex","flexWrap":"nowrap","verticalAlignment":"center"}} -->
+					<div class="wp-block-group <?php echo esc_attr( $ls_pill_class ); ?> has-background" style="border-color:var(--wp--custom--color--border--card);border-style:solid;border-width:1px;border-radius:var(--wp--preset--border-radius--500);background-color:var(--wp--custom--color--surface--canvas);padding-top:var(--wp--preset--spacing--20);padding-right:var(--wp--preset--spacing--30);padding-bottom:var(--wp--preset--spacing--20);padding-left:var(--wp--preset--spacing--20)">
+						<!-- wp:paragraph {"className":"ls-process-pill__badge","style":{"typography":{"fontFamily":"var:preset|font-family|monospace","letterSpacing":"var:custom|typography|letter-spacing|wide"},"color":{"background":"<?php echo esc_attr( $ls_badge_bg ); ?>","text":"<?php echo esc_attr( $ls_step_phase_color ); ?>"},"border":{"color":"<?php echo esc_attr( $ls_badge_border ); ?>","radius":"var:preset|border-radius|200","style":"solid","width":"1px"},"spacing":{"padding":{"top":"var:preset|spacing|5","right":"var:preset|spacing|10","bottom":"var:preset|spacing|5","left":"var:preset|spacing|10"}}},"fontSize":"100"} -->
+						<p class="has-text-color has-background has-100-font-size ls-process-pill__badge" style="border-color:<?php echo esc_attr( $ls_badge_border ); ?>;border-style:solid;border-width:1px;border-radius:var(--wp--preset--border-radius--200);color:<?php echo esc_attr( $ls_step_phase_color ); ?>;background-color:<?php echo esc_attr( $ls_badge_bg ); ?>;padding-top:var(--wp--preset--spacing--5);padding-right:var(--wp--preset--spacing--10);padding-bottom:var(--wp--preset--spacing--5);padding-left:var(--wp--preset--spacing--10);font-family:var(--wp--preset--font-family--monospace);letter-spacing:var(--wp--custom--typography--letter-spacing--wide)"><?php echo esc_html( $ls_step['index'] ); ?></p>
+						<!-- /wp:paragraph -->
+
+						<!-- wp:paragraph {"className":"ls-process-pill__label","style":{"typography":{"fontWeight":"var:custom|typography|font-weight|semibold"},"color":{"text":"var(--wp--custom--color--text--default)"}},"fontSize":"200"} -->
+						<p class="has-text-color has-200-font-size ls-process-pill__label" style="color:var(--wp--custom--color--text--default);font-weight:var(--wp--custom--typography--font-weight--semibold)"><a href="<?php echo esc_url( home_url( $ls_step['url'] ) ); ?>" style="color:inherit;text-decoration:none"><?php echo esc_html( $ls_step['label'] ); ?></a></p>
+						<!-- /wp:paragraph -->
+					</div>
+					<!-- /wp:group -->
+
+						<?php if ( $ls_step_index < count( $ls_linked_decisions_steps ) - 1 ) : ?>
+					<!-- wp:outermost/icon-block {"iconName":"","className":"has-text-color","width":"14px","style":{"color":{"text":"var(--wp--custom--color--text--subtle)"}}} -->
+					<div class="wp-block-outermost-icon-block has-text-color"><div class="icon-container" style="color:var(--wp--custom--color--text--subtle);width:14px;transform:rotate(0deg) scaleX(1) scaleY(1)"><?php echo $ls_step_arrow_icon; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped -- Static, developer-authored Phosphor icon markup, not user input. ?></div></div>
+					<!-- /wp:outermost/icon-block -->
+					<?php endif; ?>
+
+					<?php endforeach; ?>
+				</div>
+				<!-- /wp:group -->
+			</div>
+			<!-- /wp:column -->
+		</div>
+		<!-- /wp:columns -->
+	</div>
+	<!-- /wp:group -->
+</section>
+<!-- /wp:group -->
diff --git a/src/scss/structural/services-hero.scss b/src/scss/structural/services-hero.scss
index c35a373..24647ca 100644
--- a/src/scss/structural/services-hero.scss
+++ b/src/scss/structural/services-hero.scss
@@ -3,17 +3,19 @@
 /*
  * Services Hero (LS-1598, single consumer patterns/hero/services-hero.php). The service-tag
  * pills' rest-state background/border tints are set inline per instance (each pill mixes its
- * own phase token), because block-supports has no way to express six distinct phase-derived
- * colours. Interactive states (:hover, :focus-within, :focus-visible) have no block-supports
- * equivalent at all, so they live here.
- *
- * The `!important` on the hover/focus-within background-color and border-color declarations is
- * required, not a shortcut: an inline `style` attribute always outranks an external stylesheet
- * rule regardless of pseudo-class or selector specificity, so without it these two properties
- * could never change on hover. transform/box-shadow aren't set inline at rest, so they don't
- * need it.
+ * own phase token via colour-mix()) because theme.json has no key for six distinct
+ * phase-derived tints — that part is not this file's concern. What lives here is only the
+ * states theme.json genuinely cannot express: see the JSON limitation comments below.
  */
 .ls-service-pill {
+  // JSON limitation: position:relative here so the whole-pill ::before overlay below has a
+  // containing block to size against — see AGENTS.md Theme-First Approach ("width", "max-width"
+  // and similar structural properties JSON has no key for).
+  position: relative;
+
+  // JSON limitation: block-level :hover/:focus-within has no theme.json pseudo-state key for
+  // an arbitrary custom class (theme.json's elements.*.:hover only covers link/button/heading/
+  // caption/cite sitewide, not a scoped custom component) — see AGENTS.md Theme-First Approach.
   transition:
     background-color var(--wp--custom--animation--duration--responsive) var(--wp--custom--animation--easing--standard),
     border-color var(--wp--custom--animation--duration--responsive) var(--wp--custom--animation--easing--standard),
@@ -26,6 +28,22 @@
     box-shadow: var(--wp--custom--shadow--elevation--100);
   }
 
+  // JSON limitation: content:"" pseudo-elements have no theme.json equivalent. Only the label
+  // text is a real <a>, but the whole pill should be clickable, so this ::before is stretched
+  // to the pill's full box (same technique already used by "Card - Services", see
+  // styles/sections/cards/card-services.json's .ls-card-services__cta ::before). The anchor
+  // itself must stay position:static (no position/z-index of its own) so this ::before's
+  // containing block resolves up to .ls-service-pill instead of shrinking to the anchor's own
+  // small text box.
+  a::before {
+    content: "";
+    position: absolute;
+    inset: 0;
+    z-index: var(--wp--custom--z-index--base);
+  }
+
+  // JSON limitation: :focus-visible has no theme.json pseudo-state key — see AGENTS.md
+  // Theme-First Approach.
   a:focus-visible {
     outline: 2px solid var(--wp--custom--color--focus--ring);
     outline-offset: 2px;
@@ -35,6 +53,13 @@
 
 @each $phase in discover, create, build, launch, grow, evolve {
   .ls-service-pill--#{$phase} {
+    // JSON limitation: same :hover/:focus-within gap as above. The `!important` here is also
+    // required, separately: background-color/border-color are set inline per instance at rest
+    // (colour-mix over each pill's own phase token, itself a JSON limitation — six distinct
+    // phase-derived tints have no theme.json key), and an inline style attribute always
+    // outranks an external stylesheet rule regardless of pseudo-class or specificity, so
+    // without !important these two properties could never change on hover. transform/
+    // box-shadow aren't set inline at rest, so they don't need it.
     &:hover,
     &:focus-within {
       background-color: color-mix(in srgb, var(--wp--custom--color--phase--#{$phase}) 16%, transparent) !important;
diff --git a/src/scss/structural/services-linked-decisions.scss b/src/scss/structural/services-linked-decisions.scss
new file mode 100644
index 0000000..5ae2bb4
--- /dev/null
+++ b/src/scss/structural/services-linked-decisions.scss
@@ -0,0 +1,91 @@
+/********** Services - Linked Decisions (Services page only) **********/
+
+/*
+ * Services Linked Decisions (LS-1598, single consumer
+ * patterns/sections/services-linked-decisions.php). The process pills stay neutral overall
+ * (white/transparent background, dark label) with only the number badge carrying the phase
+ * colour, so the row doesn't compete with the hero's own phase-tinted tag row above it. See
+ * the JSON limitation comments below for what specifically requires CSS here.
+ */
+.ls-process-pill {
+  position: relative;
+
+  // JSON limitation: block-level :hover/:focus-within has no theme.json pseudo-state key for
+  // an arbitrary custom class (theme.json's elements.*.:hover only covers link/button/heading/
+  // caption/cite sitewide, not a scoped custom component) — see AGENTS.md Theme-First Approach.
+  transition:
+    border-color var(--wp--custom--animation--duration--responsive) var(--wp--custom--animation--easing--standard),
+    transform var(--wp--custom--animation--duration--responsive) var(--wp--custom--animation--easing--standard),
+    box-shadow var(--wp--custom--animation--duration--responsive) var(--wp--custom--animation--easing--standard);
+
+  &:hover,
+  &:focus-within {
+    border-color: var(--wp--custom--color--border--field);
+    transform: translateY(-1px);
+    box-shadow: var(--wp--custom--shadow--elevation--100);
+  }
+
+  .ls-process-pill__label a {
+    // JSON limitation: content:"" pseudo-elements have no theme.json equivalent — see AGENTS.md
+    // Theme-First Approach. Only the label text is a real <a>, but the whole pill should be
+    // clickable, so this ::before is stretched to the pill's full box (same technique already
+    // used by "Card - Services", see styles/sections/cards/card-services.json's
+    // .ls-card-services__cta ::before). The anchor itself must stay position:static (no
+    // position/z-index of its own) so this ::before's containing block resolves up to
+    // .ls-process-pill (which has position:relative) instead of shrinking to the anchor's own
+    // small text box — that was the original bug here.
+    &::before {
+      content: "";
+      position: absolute;
+      inset: 0;
+      z-index: var(--wp--custom--z-index--base);
+    }
+
+    // JSON limitation: :focus-visible has no theme.json pseudo-state key — see AGENTS.md
+    // Theme-First Approach.
+    &:focus-visible {
+      outline: 2px solid var(--wp--custom--color--focus--ring);
+      outline-offset: 2px;
+      border-radius: var(--wp--preset--border-radius--100);
+    }
+  }
+
+  .ls-process-pill__badge {
+    transition:
+      background-color var(--wp--custom--animation--duration--responsive) var(--wp--custom--animation--easing--standard),
+      border-color var(--wp--custom--animation--duration--responsive) var(--wp--custom--animation--easing--standard);
+  }
+}
+
+@each $phase in discover, create, build, launch, grow, evolve {
+  .ls-process-pill--#{$phase} {
+    // JSON limitation: same :hover/:focus-within gap as above. The `!important` here is also
+    // required, separately: the badge's background-color/border-color are set inline per
+    // instance at rest (colour-mix over each pill's own phase token, itself a JSON
+    // limitation — six distinct phase-derived tints have no theme.json key), and an inline
+    // style attribute always outranks an external stylesheet rule regardless of pseudo-class,
+    // so without !important these two properties could never change on hover.
+    &:hover,
+    &:focus-within {
+      .ls-process-pill__badge {
+        background-color: color-mix(in srgb, var(--wp--custom--color--phase--#{$phase}) 20%, transparent) !important;
+        border-color: color-mix(in srgb, var(--wp--custom--color--phase--#{$phase}) 50%, transparent) !important;
+      }
+    }
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .ls-process-pill {
+    transition: none;
+
+    &:hover,
+    &:focus-within {
+      transform: none;
+    }
+  }
+
+  .ls-process-pill__badge {
+    transition: none;
+  }
+}

From 8d12829d524392034ddb403a077d51a8e6ef6bd2 Mon Sep 17 00:00:00 2001
From: Brandonma21 <Brandonmarshall101@gmail.com>
Date: Mon, 7 Sep 2026 16:09:00 +0200
Subject: [PATCH 4/7] Add Services "Service clusters" section (LS-1598)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Add patterns/sections/services-service-clusters.php: "Five ways the
  work groups together" — 5 cluster cards in an asymmetric 3+2 layout,
  each with an icon well, index number, description, and a footer row
  of clickable tag links to the existing individual service pages
- Add styles/sections/cards/card-cluster.json: new shared card shell
  (no existing one fit — background and single-link behaviour differ
  from Card - Category)
- Add src/scss/structural/services-service-clusters.scss for the tag
  hover states, wired into build/enqueue like the other sections

Fixes
- Equal card height via dimensions.minHeight:100%, footer tags pinned
  to the bottom via margin-top:auto
- Fix a real bug: second card row's blockGap was nested outside
  spacing instead of inside it, silently using WordPress's default
  gap instead of matching row 1
- Distinguish the section's background from Section 1's using the
  existing surface.card token (matches homepage-what-we-build's
  established alternating-section convention)
---
 assets/css/services-service-clusters.css      |   1 +
 functions.php                                 |   1 +
 inc/animations.php                            |   7 +
 package.json                                  |   6 +-
 .../sections/services-service-clusters.php    | 248 ++++++++++++++++++
 .../structural/services-service-clusters.scss |  36 +++
 styles/sections/cards/card-cluster.json       |  32 +++
 7 files changed, 328 insertions(+), 3 deletions(-)
 create mode 100644 assets/css/services-service-clusters.css
 create mode 100644 patterns/sections/services-service-clusters.php
 create mode 100644 src/scss/structural/services-service-clusters.scss
 create mode 100644 styles/sections/cards/card-cluster.json

diff --git a/assets/css/services-service-clusters.css b/assets/css/services-service-clusters.css
new file mode 100644
index 0000000..671f69f
--- /dev/null
+++ b/assets/css/services-service-clusters.css
@@ -0,0 +1 @@
+.ls-cluster-tag{transition:background-color var(--wp--custom--animation--duration--base) var(--wp--custom--animation--easing--standard),border-color var(--wp--custom--animation--duration--base) var(--wp--custom--animation--easing--standard)}.ls-cluster-tag:hover,.ls-cluster-tag:focus-within{background-color:color-mix(in srgb, var(--wp--custom--color--link--accent) 10%, transparent);border-color:var(--wp--custom--color--link--accent)}.ls-cluster-tag:hover .wp-block-outermost-icon-block .icon-container,.ls-cluster-tag:focus-within .wp-block-outermost-icon-block .icon-container{color:var(--wp--custom--color--text--brand) !important}@media(prefers-reduced-motion: reduce){.ls-cluster-tag{transition:none}}
diff --git a/functions.php b/functions.php
index e7fde85..bcfd72a 100644
--- a/functions.php
+++ b/functions.php
@@ -72,6 +72,7 @@ function ls_theme_setup() {
 	add_editor_style( 'assets/css/home-hero.css' );
 	add_editor_style( 'assets/css/services-hero.css' );
 	add_editor_style( 'assets/css/services-linked-decisions.css' );
+	add_editor_style( 'assets/css/services-service-clusters.css' );
 	add_editor_style( 'assets/css/work-hero.css' );
 	add_editor_style( 'assets/css/work-single-hero.css' );
 	add_editor_style( 'assets/css/blog-hero.css' );
diff --git a/inc/animations.php b/inc/animations.php
index 5b705c1..a32a014 100644
--- a/inc/animations.php
+++ b/inc/animations.php
@@ -73,6 +73,7 @@ function ls_theme_get_bundle_render_markers() {
 		'home-hero'                 => array( 'classes' => array( 'ls-home-hero-section' ) ),
 		'services-hero'             => array( 'classes' => array( 'ls-service-pill' ) ),
 		'services-linked-decisions' => array( 'classes' => array( 'ls-process-pill' ) ),
+		'services-service-clusters' => array( 'classes' => array( 'ls-cluster-tag' ) ),
 		'work-hero'                 => array( 'classes' => array( 'ls-work-hero' ) ),
 		'work-single-hero'          => array( 'classes' => array( 'ls-work-single-meta' ) ),
 		'blog-hero'                 => array( 'classes' => array( 'ls-blog-hero' ) ),
@@ -276,6 +277,12 @@ function ls_theme_get_effect_styles( $context = 'front' ) {
 			'contexts' => array( 'front', 'editor' ),
 			// Same reasoning as services-hero above.
 		),
+		'services-service-clusters' => array(
+			'handle'   => 'ls-theme-services-service-clusters',
+			'path'     => 'assets/css/services-service-clusters.css',
+			'contexts' => array( 'front', 'editor' ),
+			// Same reasoning as services-hero above.
+		),
 		'work-hero'                 => array(
 			'handle'    => 'ls-theme-work-hero',
 			'path'      => 'assets/css/work-hero.css',
diff --git a/package.json b/package.json
index 0b3480f..723faed 100644
--- a/package.json
+++ b/package.json
@@ -4,15 +4,15 @@
 	"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/services-hero.scss:assets/css/services-hero.css src/scss/structural/services-linked-decisions.scss:assets/css/services-linked-decisions.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/services-hero.scss:assets/css/services-hero.css src/scss/structural/services-linked-decisions.scss:assets/css/services-linked-decisions.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/services-hero.scss:assets/css/services-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",
+		"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/services-hero.scss:assets/css/services-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",
 		"schema:validate": "node theme-utils.mjs validate-schema",
 		"theme:validate": "node theme-utils.mjs validate-theme",
 		"patterns:escape": "node theme-utils.mjs escape-patterns",
 		"security:scan": "node theme-utils.mjs security-scan",
 		"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);\"",
-		"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/services-hero.scss:assets/css/services-hero.css src/scss/structural/services-linked-decisions.scss:assets/css/services-linked-decisions.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/services-hero.scss:assets/css/services-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"
 	},
 	"devDependencies": {
 		"@axe-core/playwright": "^4.13.0",
diff --git a/patterns/sections/services-service-clusters.php b/patterns/sections/services-service-clusters.php
new file mode 100644
index 0000000..c3640ab
--- /dev/null
+++ b/patterns/sections/services-service-clusters.php
@@ -0,0 +1,248 @@
+<?php
+/**
+ * Title: Section - Services Service Clusters
+ * Slug: ls-theme/services-service-clusters
+ * Categories: featured
+ * Block Types: core/pattern
+ * Description: The Services page's "Five ways the work groups together" section: eyebrow/heading/description row, followed by five service-cluster cards (Discovery and content, Design systems and accessibility, Engineering and migrations, Launch and infrastructure, Support and optimisation) in an asymmetric two-row layout. Each card uses the shared Card - Cluster style with a tinted icon well, an index number, and a footer row of small clickable tag links to the matching individual service pages.
+ * Keywords: services, clusters, cards, section
+ * Viewport Width: 1280
+ * Inserter: true
+ *
+ * @package ls-theme
+ */
+
+$ls_arrow_icon = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor"><path d="M221.66,133.66l-72,72a8,8,0,0,1-11.32-11.32L196.69,136H40a8,8,0,0,1,0-16H196.69L138.34,61.66a8,8,0,0,1,11.32-11.32l72,72A8,8,0,0,1,221.66,133.66Z"></path></svg>';
+
+$ls_service_icons = array(
+	'discovery'   => '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor"><path d="M229.66,218.34l-50.07-50.06a88.11,88.11,0,1,0-11.31,11.31l50.06,50.07a8,8,0,0,0,11.32-11.32ZM40,112a72,72,0,1,1,72,72A72.08,72.08,0,0,1,40,112Z"></path></svg>',
+	'content'     => '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor"><path d="M88,96a8,8,0,0,1,8-8h64a8,8,0,0,1,0,16H96A8,8,0,0,1,88,96Zm8,40h64a8,8,0,0,0,0-16H96a8,8,0,0,0,0,16Zm32,16H96a8,8,0,0,0,0,16h32a8,8,0,0,0,0-16ZM224,48V156.69A15.86,15.86,0,0,1,219.31,168L168,219.31A15.86,15.86,0,0,1,156.69,224H48a16,16,0,0,1-16-16V48A16,16,0,0,1,48,32H208A16,16,0,0,1,224,48ZM48,208H152V160a8,8,0,0,1,8-8h48V48H48Zm120-40v28.7L196.69,168Z"></path></svg>',
+	'design'      => '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor"><path d="M232,32a8,8,0,0,0-8-8c-44.08,0-89.31,49.71-114.43,82.63A60,60,0,0,0,32,164c0,30.88-19.54,44.73-20.47,45.37A8,8,0,0,0,16,224H92a60,60,0,0,0,57.37-77.57C182.3,121.31,232,76.08,232,32ZM92,208H34.63C41.38,198.41,48,183.92,48,164a44,44,0,1,1,44,44Zm32.42-94.45q5.14-6.66,10.09-12.55A76.23,76.23,0,0,1,155,121.49q-5.9,4.94-12.55,10.09A60.54,60.54,0,0,0,124.42,113.55Zm42.7-2.68a92.57,92.57,0,0,0-22-22c31.78-34.53,55.75-45,69.9-47.91C212.17,55.12,201.65,79.09,167.12,110.87Z"></path></svg>',
+	'development' => '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor"><path d="M69.12,94.15,28.5,128l40.62,33.85a8,8,0,1,1-10.24,12.29l-48-40a8,8,0,0,1,0-12.29l48-40a8,8,0,0,1,10.24,12.3Zm176,27.7-48-40a8,8,0,1,0-10.24,12.3L227.5,128l-40.62,33.85a8,8,0,1,0,10.24,12.29l48-40a8,8,0,0,0,0-12.29ZM162.73,32.48a8,8,0,0,0-10.25,4.79l-64,176a8,8,0,0,0,4.79,10.26A8.14,8.14,0,0,0,96,224a8,8,0,0,0,7.52-5.27l64-176A8,8,0,0,0,162.73,32.48Z"></path></svg>',
+	'migrations'  => '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor"><path d="M213.66,181.66l-32,32a8,8,0,0,1-11.32-11.32L188.69,184H48a8,8,0,0,1,0-16H188.69l-18.35-18.34a8,8,0,0,1,11.32-11.32l32,32A8,8,0,0,1,213.66,181.66Zm-139.32-64a8,8,0,0,0,11.32-11.32L67.31,88H208a8,8,0,0,0,0-16H67.31L85.66,53.66A8,8,0,0,0,74.34,42.34l-32,32a8,8,0,0,0,0,11.32Z"></path></svg>',
+	'hosting'     => '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor"><path d="M160,40A88.09,88.09,0,0,0,81.29,88.67,64,64,0,1,0,72,216h88a88,88,0,0,0,0-176Zm0,160H72a48,48,0,0,1,0-96c1.1,0,2.2,0,3.29.11A88,88,0,0,0,72,128a8,8,0,0,0,16,0,72,72,0,1,1,72,72Z"></path></svg>',
+	'training'    => '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor"><path d="M251.76,88.94l-120-64a8,8,0,0,0-7.52,0l-120,64a8,8,0,0,0,0,14.12L32,117.87v48.42a15.91,15.91,0,0,0,4.06,10.65C49.16,191.53,78.51,216,128,216a130,130,0,0,0,48-8.76V240a8,8,0,0,0,16,0V199.51a115.63,115.63,0,0,0,27.94-22.57A15.91,15.91,0,0,0,224,166.29V117.87l27.76-14.81a8,8,0,0,0,0-14.12ZM128,200c-43.27,0-68.72-21.14-80-33.71V126.4l76.24,40.66a8,8,0,0,0,7.52,0L176,143.47v46.34C163.4,195.69,147.52,200,128,200Zm80-33.75a97.83,97.83,0,0,1-16,14.25V134.93l16-8.53ZM188,118.94l-.22-.13-56-29.87a8,8,0,0,0-7.52,14.12L171,128l-43,22.93L25,96,128,41.07,231,96Z"></path></svg>',
+	'support'     => '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor"><path d="M128,24A104,104,0,1,0,232,128,104.11,104.11,0,0,0,128,24Zm39.1,131.79a47.84,47.84,0,0,0,0-55.58l28.5-28.49a87.83,87.83,0,0,1,0,112.56ZM96,128a32,32,0,1,1,32,32A32,32,0,0,1,96,128Zm88.28-67.6L155.79,88.9a47.84,47.84,0,0,0-55.58,0L71.72,60.4a87.83,87.83,0,0,1,112.56,0ZM60.4,71.72l28.5,28.49a47.84,47.84,0,0,0,0,55.58L60.4,184.28a87.83,87.83,0,0,1,0-112.56ZM71.72,195.6l28.49-28.5a47.84,47.84,0,0,0,55.58,0l28.49,28.5a87.83,87.83,0,0,1-112.56,0Z"></path></svg>',
+	'ai'          => '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor"><path d="M197.58,129.06,146,110l-19-51.62a15.92,15.92,0,0,0-29.88,0L78,110l-51.62,19a15.92,15.92,0,0,0,0,29.88L78,178l19,51.62a15.92,15.92,0,0,0,29.88,0L146,178l51.62-19a15.92,15.92,0,0,0,0-29.88ZM137,164.22a8,8,0,0,0-4.74,4.74L112,223.85,91.78,169A8,8,0,0,0,87,164.22L32.15,144,87,123.78A8,8,0,0,0,91.78,119L112,64.15,132.22,119a8,8,0,0,0,4.74,4.74L191.85,144ZM144,40a8,8,0,0,1,8-8h16V16a8,8,0,0,1,16,0V32h16a8,8,0,0,1,0,16H184V64a8,8,0,0,1-16,0V48H152A8,8,0,0,1,144,40ZM248,88a8,8,0,0,1-8,8h-8v8a8,8,0,0,1-16,0V96h-8a8,8,0,0,1,0-16h8V72a8,8,0,0,1,16,0v8h8A8,8,0,0,1,248,88Z"></path></svg>',
+	'seo'         => '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor"><path d="M232,208a8,8,0,0,1-8,8H32a8,8,0,0,1-8-8V48a8,8,0,0,1,16,0V156.69l50.34-50.35a8,8,0,0,1,11.32,0L128,132.69,180.69,80H160a8,8,0,0,1,0-16h40a8,8,0,0,1,8,8v40a8,8,0,0,1-16,0V91.31l-58.34,58.35a8,8,0,0,1-11.32,0L96,123.31l-56,56V200H224A8,8,0,0,1,232,208Z"></path></svg>',
+);
+
+$ls_service_urls = array(
+	'discovery'   => '/services/discovery/',
+	'content'     => '/services/content/',
+	'design'      => '/services/design/',
+	'development' => '/services/development/',
+	'migrations'  => '/services/migrations/',
+	'hosting'     => '/services/hosting/',
+	'training'    => '/services/training/',
+	'support'     => '/services/support/',
+	'ai'          => '/services/ai/',
+	'seo'         => '/services/seo/',
+);
+
+$ls_service_labels = array(
+	'discovery'   => __( 'Discovery', 'ls-theme' ),
+	'content'     => __( 'Content', 'ls-theme' ),
+	'design'      => __( 'Design', 'ls-theme' ),
+	'development' => __( 'Development', 'ls-theme' ),
+	'migrations'  => __( 'Migrations', 'ls-theme' ),
+	'hosting'     => __( 'Hosting', 'ls-theme' ),
+	'training'    => __( 'Training', 'ls-theme' ),
+	'support'     => __( 'Support', 'ls-theme' ),
+	'ai'          => __( 'AI', 'ls-theme' ),
+	'seo'         => __( 'SEO', 'ls-theme' ),
+);
+
+$ls_clusters = array(
+	array(
+		'index'       => '01',
+		'icon'        => '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor"><path d="M229.66,218.34l-50.07-50.06a88.11,88.11,0,1,0-11.31,11.31l50.06,50.07a8,8,0,0,0,11.32-11.32ZM40,112a72,72,0,1,1,72,72A72.08,72.08,0,0,1,40,112Z"></path></svg>',
+		'title'       => __( 'Discovery and content', 'ls-theme' ),
+		'description' => __( 'For scope clarity, content structure, risk reduction and better planning before design or build decisions harden.', 'ls-theme' ),
+		'tags'        => array( 'discovery', 'content' ),
+	),
+	array(
+		'index'       => '02',
+		'icon'        => '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor"><path d="M232,32a8,8,0,0,0-8-8c-44.08,0-89.31,49.71-114.43,82.63A60,60,0,0,0,32,164c0,30.88-19.54,44.73-20.47,45.37A8,8,0,0,0,16,224H92a60,60,0,0,0,57.37-77.57C182.3,121.31,232,76.08,232,32ZM92,208H34.63C41.38,198.41,48,183.92,48,164a44,44,0,1,1,44,44Zm32.42-94.45q5.14-6.66,10.09-12.55A76.23,76.23,0,0,1,155,121.49q-5.9,4.94-12.55,10.09A60.54,60.54,0,0,0,124.42,113.55Zm42.7-2.68a92.57,92.57,0,0,0-22-22c31.78-34.53,55.75-45,69.9-47.91C212.17,55.12,201.65,79.09,167.12,110.87Z"></path></svg>',
+		'title'       => __( 'Design systems and accessibility', 'ls-theme' ),
+		'description' => __( 'For clearer interfaces, stronger consistency and more maintainable design-to-development translation.', 'ls-theme' ),
+		'tags'        => array( 'design' ),
+	),
+	array(
+		'index'       => '03',
+		'icon'        => '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor"><path d="M69.12,94.15,28.5,128l40.62,33.85a8,8,0,1,1-10.24,12.29l-48-40a8,8,0,0,1,0-12.29l48-40a8,8,0,0,1,10.24,12.3Zm176,27.7-48-40a8,8,0,1,0-10.24,12.3L227.5,128l-40.62,33.85a8,8,0,1,0,10.24,12.29l48-40a8,8,0,0,0,0-12.29ZM162.73,32.48a8,8,0,0,0-10.25,4.79l-64,176a8,8,0,0,0,4.79,10.26A8.14,8.14,0,0,0,96,224a8,8,0,0,0,7.52-5.27l64-176A8,8,0,0,0,162.73,32.48Z"></path></svg>',
+		'title'       => __( 'Engineering and migrations', 'ls-theme' ),
+		'description' => __( 'For custom WordPress work, integrations, migrations and cleaner long-term architecture.', 'ls-theme' ),
+		'tags'        => array( 'development', 'migrations' ),
+	),
+	array(
+		'index'       => '04',
+		'icon'        => '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor"><path d="M223.85,47.12a16,16,0,0,0-15-15c-12.58-.75-44.73.4-71.41,27.07L132.69,64H74.36A15.91,15.91,0,0,0,63,68.68L28.7,103a16,16,0,0,0,9.07,27.16l38.47,5.37,44.21,44.21,5.37,38.49a15.94,15.94,0,0,0,10.78,12.92,16.11,16.11,0,0,0,5.1.83A15.91,15.91,0,0,0,153,227.3L187.32,193A15.91,15.91,0,0,0,192,181.64V123.31l4.77-4.77C223.45,91.86,224.6,59.71,223.85,47.12ZM74.36,80h42.33L77.16,119.52,40,114.34Zm74.41-9.45a76.65,76.65,0,0,1,59.11-22.47,76.46,76.46,0,0,1-22.42,59.16L128,164.68,91.32,128ZM176,181.64,141.67,216l-5.19-37.17L176,139.31Zm-74.16,9.5C97.34,201,82.29,224,40,224a8,8,0,0,1-8-8c0-42.29,23-57.34,32.86-61.85a8,8,0,0,1,6.64,14.56c-6.43,2.93-20.62,12.36-23.12,38.91,26.55-2.5,36-16.69,38.91-23.12a8,8,0,1,1,14.56,6.64Z"></path></svg>',
+		'title'       => __( 'Launch and infrastructure', 'ls-theme' ),
+		'description' => __( 'For hosting, readiness, security-minded thinking and performance-aware go-live planning.', 'ls-theme' ),
+		'tags'        => array( 'hosting', 'training' ),
+	),
+	array(
+		'index'       => '05',
+		'icon'        => '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor"><path d="M140,180a12,12,0,1,1-12-12A12,12,0,0,1,140,180ZM128,72c-22.06,0-40,16.15-40,36v4a8,8,0,0,0,16,0v-4c0-11,10.77-20,24-20s24,9,24,20-10.77,20-24,20a8,8,0,0,0-8,8v8a8,8,0,0,0,16,0v-.72c18.24-3.35,32-17.9,32-35.28C168,88.15,150.06,72,128,72Zm104,56A104,104,0,1,1,128,24,104.11,104.11,0,0,1,232,128Zm-16,0a88,88,0,1,0-88,88A88.1,88.1,0,0,0,216,128Z"></path></svg>',
+		'title'       => __( 'Support and optimisation', 'ls-theme' ),
+		'description' => __( 'For maintenance, issue resolution, performance review, training and long-term platform continuity.', 'ls-theme' ),
+		'tags'        => array( 'support', 'ai', 'seo' ),
+	),
+);
+
+/**
+ * Renders one service-cluster card. A local closure, not a named function — this file can be
+ * included more than once per request (pattern registration + a live "wp:pattern" reference),
+ * and a top-level `function` declaration here would fatal with "cannot redeclare" on the second
+ * include.
+ *
+ * @param array $ls_cluster Cluster data (index, icon, title, description, tags).
+ */
+$ls_render_cluster = function ( $ls_cluster ) use ( $ls_service_icons, $ls_service_urls, $ls_service_labels, $ls_arrow_icon ) {
+	?>
+	<!-- wp:group {"tagName":"article","className":"is-style-card-cluster","style":{"dimensions":{"minHeight":"100%"}},"layout":{"type":"flex","orientation":"vertical","justifyContent":"stretch","flexWrap":"nowrap"}} -->
+	<article class="wp-block-group is-style-card-cluster" style="min-height:100%">
+
+		<!-- wp:group {"layout":{"type":"flex","justifyContent":"space-between","verticalAlignment":"center"}} -->
+		<div class="wp-block-group">
+			<!-- wp:group {"className":"ls-icon-well-brand"} -->
+			<div class="wp-block-group ls-icon-well-brand">
+				<!-- wp:outermost/icon-block {"iconName":"","width":"22px"} -->
+				<div class="wp-block-outermost-icon-block"><div class="icon-container" style="width:22px;transform:rotate(0deg) scaleX(1) scaleY(1)"><?php echo $ls_cluster['icon']; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped -- Static, developer-authored Phosphor icon markup, not user input. ?></div></div>
+				<!-- /wp:outermost/icon-block -->
+			</div>
+			<!-- /wp:group -->
+
+			<!-- wp:paragraph {"style":{"typography":{"fontFamily":"var:preset|font-family|monospace","letterSpacing":"var:custom|typography|letter-spacing|wide"},"color":{"text":"var(--wp--custom--color--text--subtle)"}},"fontSize":"100"} -->
+			<p class="has-text-color has-100-font-size" style="color:var(--wp--custom--color--text--subtle);font-family:var(--wp--preset--font-family--monospace);letter-spacing:var(--wp--custom--typography--letter-spacing--wide)"><?php echo esc_html( $ls_cluster['index'] ); ?></p>
+			<!-- /wp:paragraph -->
+		</div>
+		<!-- /wp:group -->
+
+		<!-- wp:group {"className":"ls-card-cluster__content","layout":{"type":"flex","orientation":"vertical","justifyContent":"stretch","flexWrap":"nowrap"}} -->
+		<div class="wp-block-group ls-card-cluster__content">
+			<!-- wp:heading {"level":3,"fontSize":"300"} -->
+			<h3 class="wp-block-heading has-300-font-size"><?php echo esc_html( $ls_cluster['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_cluster['description'] ); ?></p>
+			<!-- /wp:paragraph -->
+		</div>
+		<!-- /wp:group -->
+
+		<!-- wp:group {"className":"ls-card-cluster__tags","style":{"spacing":{"margin":{"top":"auto"},"padding":{"top":"var:preset|spacing|20"},"blockGap":"var:preset|spacing|10"}},"layout":{"type":"flex","flexWrap":"wrap"}} -->
+		<div class="wp-block-group ls-card-cluster__tags" style="margin-top:auto;padding-top:var(--wp--preset--spacing--20)">
+			<?php foreach ( $ls_cluster['tags'] as $ls_tag_key ) : ?>
+
+			<!-- wp:group {"className":"ls-cluster-tag","style":{"border":{"color":"var:custom|color|border|card","radius":"var:preset|border-radius|500","style":"solid","width":"1px"},"color":{"background":"var:custom|color|surface|canvas"},"spacing":{"padding":{"top":"var:preset|spacing|5","right":"var:preset|spacing|10","bottom":"var:preset|spacing|5","left":"var:preset|spacing|10"},"blockGap":"var:preset|spacing|5"}},"layout":{"type":"flex","flexWrap":"nowrap","verticalAlignment":"center"}} -->
+			<div class="wp-block-group ls-cluster-tag has-background" style="border-color:var(--wp--custom--color--border--card);border-style:solid;border-width:1px;border-radius:var(--wp--preset--border-radius--500);background-color:var(--wp--custom--color--surface--canvas);padding-top:var(--wp--preset--spacing--5);padding-right:var(--wp--preset--spacing--10);padding-bottom:var(--wp--preset--spacing--5);padding-left:var(--wp--preset--spacing--10)">
+				<!-- wp:outermost/icon-block {"iconName":"","className":"has-text-color","width":"13px","style":{"color":{"text":"var(--wp--custom--color--text--subtle)"}}} -->
+				<div class="wp-block-outermost-icon-block has-text-color"><div class="icon-container" style="color:var(--wp--custom--color--text--subtle);width:13px;transform:rotate(0deg) scaleX(1) scaleY(1)"><?php echo $ls_service_icons[ $ls_tag_key ]; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped -- Static, developer-authored Phosphor icon markup, not user input. ?></div></div>
+				<!-- /wp:outermost/icon-block -->
+
+				<!-- wp:paragraph {"style":{"typography":{"fontWeight":"var:custom|typography|font-weight|semibold"}},"fontSize":"100"} -->
+				<p class="has-100-font-size" style="font-weight:var(--wp--custom--typography--font-weight--semibold)"><a class="ls-cluster-tag__link" href="<?php echo esc_url( home_url( $ls_service_urls[ $ls_tag_key ] ) ); ?>" style="color:inherit;text-decoration:none"><?php echo esc_html( $ls_service_labels[ $ls_tag_key ] ); ?></a></p>
+				<!-- /wp:paragraph -->
+
+				<!-- wp:outermost/icon-block {"iconName":"","className":"has-text-color","width":"11px","style":{"color":{"text":"var(--wp--custom--color--text--subtle)"}}} -->
+				<div class="wp-block-outermost-icon-block has-text-color"><div class="icon-container" style="color:var(--wp--custom--color--text--subtle);width:11px;transform:rotate(0deg) scaleX(1) scaleY(1)"><?php echo $ls_arrow_icon; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped -- Static, developer-authored Phosphor icon markup, not user input. ?></div></div>
+				<!-- /wp:outermost/icon-block -->
+			</div>
+			<!-- /wp:group -->
+
+			<?php endforeach; ?>
+		</div>
+		<!-- /wp:group -->
+	</article>
+	<!-- /wp:group -->
+	<?php
+};
+?>
+<!-- wp:group {"align":"full","tagName":"section","className":"is-style-content-band","style":{"color":{"background":"var:custom|color|surface|card"}},"layout":{"type":"constrained"}} -->
+<section class="wp-block-group alignfull is-style-content-band has-background" style="background-color:var(--wp--custom--color--surface--card)">
+
+	<!-- wp:group {"align":"wide","layout":{"type":"constrained","justifyContent":"left"}} -->
+	<div class="wp-block-group alignwide">
+
+		<!-- wp:columns {"align":"wide","verticalAlignment":"bottom"} -->
+		<div class="wp-block-columns alignwide are-vertically-aligned-bottom">
+
+			<!-- wp:column {"verticalAlignment":"bottom"} -->
+			<div class="wp-block-column is-vertically-aligned-bottom">
+				<!-- wp:group {"layout":{"type":"flex","flexWrap":"nowrap","justifyContent":"left","verticalAlignment":"center"}} -->
+				<div class="wp-block-group">
+					<!-- wp:outermost/icon-block {"iconName":"","className":"has-text-color","width":"8px","style":{"color":{"text":"var(--wp--custom--color--text--brand)"}}} -->
+					<div class="wp-block-outermost-icon-block has-text-color"><div class="icon-container" style="color:var(--wp--custom--color--text--brand);width:8px;transform:rotate(0deg) scaleX(1) scaleY(1)"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><circle cx="12" cy="12" r="12"></circle></svg></div></div>
+					<!-- /wp:outermost/icon-block -->
+
+					<!-- 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__( 'Service clusters', 'ls-theme' ); ?></p>
+					<!-- /wp:paragraph -->
+				</div>
+				<!-- /wp:group -->
+
+				<!-- wp:heading {"level":2,"style":{"typography":{"fontWeight":"var:custom|typography|font-weight|extrabold"},"spacing":{"margin":{"top":"var:preset|spacing|10"}}},"fontSize":"700"} -->
+				<h2 class="wp-block-heading has-700-font-size" style="margin-top:var(--wp--preset--spacing--10);font-weight:var(--wp--custom--typography--font-weight--extrabold)"><?php echo esc_html__( 'Five ways the work groups together.', 'ls-theme' ); ?></h2>
+				<!-- /wp:heading -->
+			</div>
+			<!-- /wp:column -->
+
+			<!-- wp:column {"verticalAlignment":"bottom"} -->
+			<div class="wp-block-column is-vertically-aligned-bottom">
+				<!-- wp:group {"layout":{"type":"constrained","contentSize":"620px","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__( 'Each cluster solves a different operating problem, but they share one delivery standard. Pick the cluster closest to the work — or read across them.', 'ls-theme' ); ?></p>
+					<!-- /wp:paragraph -->
+				</div>
+				<!-- /wp:group -->
+			</div>
+			<!-- /wp:column -->
+		</div>
+		<!-- /wp:columns -->
+
+		<!-- wp:columns {"align":"wide","style":{"spacing":{"margin":{"top":"var:preset|spacing|40"},"blockGap":{"left":"var:preset|spacing|20"}}}} -->
+		<div class="wp-block-columns alignwide" style="margin-top:var(--wp--preset--spacing--40)">
+
+			<!-- wp:column -->
+			<div class="wp-block-column">
+				<?php $ls_render_cluster( $ls_clusters[0] ); ?>
+			</div>
+			<!-- /wp:column -->
+
+			<!-- wp:column -->
+			<div class="wp-block-column">
+				<?php $ls_render_cluster( $ls_clusters[1] ); ?>
+			</div>
+			<!-- /wp:column -->
+
+			<!-- wp:column -->
+			<div class="wp-block-column">
+				<?php $ls_render_cluster( $ls_clusters[2] ); ?>
+			</div>
+			<!-- /wp:column -->
+		</div>
+		<!-- /wp:columns -->
+
+		<!-- wp:columns {"align":"wide","style":{"spacing":{"margin":{"top":"var:preset|spacing|20"},"blockGap":{"left":"var:preset|spacing|20"}}}} -->
+		<div class="wp-block-columns alignwide" style="margin-top:var(--wp--preset--spacing--20)">
+
+			<!-- wp:column {"width":"33.33%"} -->
+			<div class="wp-block-column" style="flex-basis:33.33%">
+				<?php $ls_render_cluster( $ls_clusters[3] ); ?>
+			</div>
+			<!-- /wp:column -->
+
+			<!-- wp:column {"width":"66.66%"} -->
+			<div class="wp-block-column" style="flex-basis:66.66%">
+				<?php $ls_render_cluster( $ls_clusters[4] ); ?>
+			</div>
+			<!-- /wp:column -->
+		</div>
+		<!-- /wp:columns -->
+	</div>
+	<!-- /wp:group -->
+</section>
+<!-- /wp:group -->
diff --git a/src/scss/structural/services-service-clusters.scss b/src/scss/structural/services-service-clusters.scss
new file mode 100644
index 0000000..ddc8260
--- /dev/null
+++ b/src/scss/structural/services-service-clusters.scss
@@ -0,0 +1,36 @@
+/********** Services - Service Clusters (Services page only) **********/
+
+/*
+ * Services Service Clusters (LS-1598, single consumer
+ * patterns/sections/services-service-clusters.php). Rest-state look, the stretched-link
+ * ::before, and :focus-visible all live in styles/sections/cards/card-cluster.json — this file
+ * only carries the hover-state motion, matching the existing "Card - Link Row" convention (see
+ * .is-style-card-link-row in src/scss/structural/work-archive-sections.scss): a background/
+ * border-color tint swap on hover, nothing heavier. The card itself has no hover-lift — unlike
+ * Card - Category, it isn't a single link, so it shouldn't look interactive as a whole.
+ */
+.ls-cluster-tag {
+  // JSON limitation: block-level :hover/:focus-within has no theme.json pseudo-state key for
+  // an arbitrary custom class (theme.json's elements.*.:hover only covers link/button/heading/
+  // caption/cite sitewide, not a scoped custom component) — see AGENTS.md Theme-First Approach.
+  transition:
+    background-color var(--wp--custom--animation--duration--base) var(--wp--custom--animation--easing--standard),
+    border-color var(--wp--custom--animation--duration--base) var(--wp--custom--animation--easing--standard);
+
+  &:hover,
+  &:focus-within {
+    background-color: color-mix(in srgb, var(--wp--custom--color--link--accent) 10%, transparent);
+    border-color: var(--wp--custom--color--link--accent);
+  }
+
+  &:hover .wp-block-outermost-icon-block .icon-container,
+  &:focus-within .wp-block-outermost-icon-block .icon-container {
+    color: var(--wp--custom--color--text--brand) !important;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .ls-cluster-tag {
+    transition: none;
+  }
+}
diff --git a/styles/sections/cards/card-cluster.json b/styles/sections/cards/card-cluster.json
new file mode 100644
index 0000000..1e260b7
--- /dev/null
+++ b/styles/sections/cards/card-cluster.json
@@ -0,0 +1,32 @@
+{
+	"$schema": "https://schemas.wp.org/wp/6.9/theme.json",
+	"version": 3,
+	"title": "Card - Cluster",
+	"slug": "card-cluster",
+	"blockTypes": [
+		"core/group"
+	],
+	"description": "Service-cluster card shell: icon well + index number header, H3 heading, supporting copy, and a footer row of small clickable tag links (each its own stretched-link pill), separated by a top divider. Unlike Card - Category, the card itself is not a single link — only the footer tags are. Non-expressible structural properties (position, overflow, the nested content flex rule, each tag's own stretched-link containing block) stay in this css field; the tag hover-tint transition stays in src/scss/structural/services-service-clusters.scss (a bare &:hover in this css field is silently dropped, same class of bug as @media/@supports stripping).",
+	"styles": {
+		"color": {
+			"background": "var:custom|color|surface|canvas",
+			"text": "var:custom|color|text|default"
+		},
+		"border": {
+			"color": "var:custom|color|border|card",
+			"radius": "var:preset|border-radius|300",
+			"style": "solid",
+			"width": "1px"
+		},
+		"spacing": {
+			"blockGap": "var:preset|spacing|20",
+			"padding": {
+				"top": "var:preset|spacing|30",
+				"right": "var:preset|spacing|30",
+				"bottom": "var:preset|spacing|30",
+				"left": "var:preset|spacing|30"
+			}
+		},
+		"css": "position: relative;\noverflow: hidden;\n\n& .ls-card-cluster__content {\n\tflex: 1 1 auto;\n\tdisplay: flex;\n\tflex-direction: column;\n\tgap: var(--wp--preset--spacing--10);\n}\n\n& .ls-card-cluster__tags {\n\tborder-top: 1px solid var(--wp--custom--color--border--card);\n}\n\n& .ls-cluster-tag {\n\tposition: relative;\n}\n\n& .ls-cluster-tag__link::before {\n\tcontent: \"\";\n\tposition: absolute;\n\tinset: 0;\n}\n\n& .ls-cluster-tag__link:focus-visible {\n\toutline: 2px solid var(--wp--custom--color--focus--ring);\n\toutline-offset: 2px;\n}"
+	}
+}

From 9f75e738381ef6e1dbbaa8eb00ae314f3d292b3e Mon Sep 17 00:00:00 2001
From: Brandonma21 <Brandonmarshall101@gmail.com>
Date: Wed, 9 Sep 2026 14:12:12 +0200
Subject: [PATCH 5/7] Migrate Services patterns to the Core Icon block
 (LS-3229)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Icon block conversion
- Replace outermost/icon-block with core/icon across 3 Services files
- Reference lightspeed/{name} icons instead of inline SVG
- Cover all 47 instances (15 + 6 + 26), zero remaining outermost/icon-block

Icons used
- services-hero: dot, search, file-text, paint-brush, code,
  arrows-left-right, cloud, gauge, shield, graduation-cap, lifebuoy,
  chart-line-up, wheelchair, envelope, special-interests
- services-linked-decisions: dot, arrow-right
- services-service-clusters: dot, search, paint-brush, code, rocket,
  question, arrows-left-right, cloud, graduation-cap, lifebuoy,
  sparkle, chart-line-up, arrow-right, file-text

Structural change
- These 3 files use PHP arrays/loops to render icons dynamically
  (per-service, per-cluster, per-step), unlike the static per-instance
  blocks in Batches 1-4
- Converted PHP icon arrays to store lightspeed/{name} slugs instead of
  raw SVG, and rewrote loop templates to emit wp:icon dynamically
- Removed now-unused $ls_step_arrow_icon / $ls_arrow_icon SVG variables
- sparkle/question used here vs special-interests/help elsewhere for
  the same shapes — file-specific disambiguation, consistent with
  earlier batches

Verification
- Zero remaining outermost/icon-block references across all 3 files
- PHP block-rendering test (including loop execution) confirms correct
  SVG output and slug resolution, no errors
---
 patterns/hero/services-hero.php               | 36 ++++++-------
 .../sections/services-linked-decisions.php    | 10 +---
 .../sections/services-service-clusters.php    | 50 ++++++++-----------
 3 files changed, 38 insertions(+), 58 deletions(-)

diff --git a/patterns/hero/services-hero.php b/patterns/hero/services-hero.php
index 9c4fe2a..84771a1 100644
--- a/patterns/hero/services-hero.php
+++ b/patterns/hero/services-hero.php
@@ -17,85 +17,85 @@
 		'label' => __( 'Discovery', 'ls-theme' ),
 		'url'   => '/services/discovery/',
 		'phase' => 'discover',
-		'icon'  => '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor"><path d="M229.66,218.34l-50.07-50.06a88.11,88.11,0,1,0-11.31,11.31l50.06,50.07a8,8,0,0,0,11.32-11.32ZM40,112a72,72,0,1,1,72,72A72.08,72.08,0,0,1,40,112Z"></path></svg>',
+		'icon'  => 'search',
 	),
 	array(
 		'label' => __( 'Content', 'ls-theme' ),
 		'url'   => '/services/content/',
 		'phase' => 'create',
-		'icon'  => '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor"><path d="M88,96a8,8,0,0,1,8-8h64a8,8,0,0,1,0,16H96A8,8,0,0,1,88,96Zm8,40h64a8,8,0,0,0,0-16H96a8,8,0,0,0,0,16Zm32,16H96a8,8,0,0,0,0,16h32a8,8,0,0,0,0-16ZM224,48V156.69A15.86,15.86,0,0,1,219.31,168L168,219.31A15.86,15.86,0,0,1,156.69,224H48a16,16,0,0,1-16-16V48A16,16,0,0,1,48,32H208A16,16,0,0,1,224,48ZM48,208H152V160a8,8,0,0,1,8-8h48V48H48Zm120-40v28.7L196.69,168Z"></path></svg>',
+		'icon'  => 'file-text',
 	),
 	array(
 		'label' => __( 'Design', 'ls-theme' ),
 		'url'   => '/services/design/',
 		'phase' => 'create',
-		'icon'  => '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor"><path d="M232,32a8,8,0,0,0-8-8c-44.08,0-89.31,49.71-114.43,82.63A60,60,0,0,0,32,164c0,30.88-19.54,44.73-20.47,45.37A8,8,0,0,0,16,224H92a60,60,0,0,0,57.37-77.57C182.3,121.31,232,76.08,232,32ZM92,208H34.63C41.38,198.41,48,183.92,48,164a44,44,0,1,1,44,44Zm32.42-94.45q5.14-6.66,10.09-12.55A76.23,76.23,0,0,1,155,121.49q-5.9,4.94-12.55,10.09A60.54,60.54,0,0,0,124.42,113.55Zm42.7-2.68a92.57,92.57,0,0,0-22-22c31.78-34.53,55.75-45,69.9-47.91C212.17,55.12,201.65,79.09,167.12,110.87Z"></path></svg>',
+		'icon'  => 'paint-brush',
 	),
 	array(
 		'label' => __( 'Development', 'ls-theme' ),
 		'url'   => '/services/development/',
 		'phase' => 'build',
-		'icon'  => '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor"><path d="M69.12,94.15,28.5,128l40.62,33.85a8,8,0,1,1-10.24,12.29l-48-40a8,8,0,0,1,0-12.29l48-40a8,8,0,0,1,10.24,12.3Zm176,27.7-48-40a8,8,0,1,0-10.24,12.3L227.5,128l-40.62,33.85a8,8,0,1,0,10.24,12.29l48-40a8,8,0,0,0,0-12.29ZM162.73,32.48a8,8,0,0,0-10.25,4.79l-64,176a8,8,0,0,0,4.79,10.26A8.14,8.14,0,0,0,96,224a8,8,0,0,0,7.52-5.27l64-176A8,8,0,0,0,162.73,32.48Z"></path></svg>',
+		'icon'  => 'code',
 	),
 	array(
 		'label' => __( 'Migrations', 'ls-theme' ),
 		'url'   => '/services/migrations/',
 		'phase' => 'build',
-		'icon'  => '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor"><path d="M213.66,181.66l-32,32a8,8,0,0,1-11.32-11.32L188.69,184H48a8,8,0,0,1,0-16H188.69l-18.35-18.34a8,8,0,0,1,11.32-11.32l32,32A8,8,0,0,1,213.66,181.66Zm-139.32-64a8,8,0,0,0,11.32-11.32L67.31,88H208a8,8,0,0,0,0-16H67.31L85.66,53.66A8,8,0,0,0,74.34,42.34l-32,32a8,8,0,0,0,0,11.32Z"></path></svg>',
+		'icon'  => 'arrows-left-right',
 	),
 	array(
 		'label' => __( 'Hosting', 'ls-theme' ),
 		'url'   => '/services/hosting/',
 		'phase' => 'launch',
-		'icon'  => '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor"><path d="M160,40A88.09,88.09,0,0,0,81.29,88.67,64,64,0,1,0,72,216h88a88,88,0,0,0,0-176Zm0,160H72a48,48,0,0,1,0-96c1.1,0,2.2,0,3.29.11A88,88,0,0,0,72,128a8,8,0,0,0,16,0,72,72,0,1,1,72,72Z"></path></svg>',
+		'icon'  => 'cloud',
 	),
 	array(
 		'label' => __( 'Performance', 'ls-theme' ),
 		'url'   => '/services/performance/',
 		'phase' => 'launch',
-		'icon'  => '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor"><path d="M207.06,72.67A111.24,111.24,0,0,0,128,40h-.4C66.07,40.21,16,91,16,153.13V176a16,16,0,0,0,16,16H224a16,16,0,0,0,16-16V152A111.25,111.25,0,0,0,207.06,72.67ZM224,176H119.71l54.76-75.3a8,8,0,0,0-12.94-9.42L99.92,176H32V153.13c0-3.08.15-6.12.43-9.13H56a8,8,0,0,0,0-16H35.27c10.32-38.86,44-68.24,84.73-71.66V80a8,8,0,0,0,16,0V56.33A96.14,96.14,0,0,1,221,128H200a8,8,0,0,0,0,16h23.67c.21,2.65.33,5.31.33,8Z"></path></svg>',
+		'icon'  => 'gauge',
 	),
 	array(
 		'label' => __( 'Security', 'ls-theme' ),
 		'url'   => '/services/security/',
 		'phase' => 'launch',
-		'icon'  => '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor"><path d="M208,40H48A16,16,0,0,0,32,56v56c0,52.72,25.52,84.67,46.93,102.19,23.06,18.86,46,25.26,47,25.53a8,8,0,0,0,4.2,0c1-.27,23.91-6.67,47-25.53C198.48,196.67,224,164.72,224,112V56A16,16,0,0,0,208,40Zm0,72c0,37.07-13.66,67.16-40.6,89.42A129.3,129.3,0,0,1,128,223.62a128.25,128.25,0,0,1-38.92-21.81C61.82,179.51,48,149.3,48,112l0-56,160,0ZM82.34,141.66a8,8,0,0,1,11.32-11.32L112,148.69l50.34-50.35a8,8,0,0,1,11.32,11.32l-56,56a8,8,0,0,1-11.32,0Z"></path></svg>',
+		'icon'  => 'shield',
 	),
 	array(
 		'label' => __( 'Training', 'ls-theme' ),
 		'url'   => '/services/training/',
 		'phase' => 'launch',
-		'icon'  => '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor"><path d="M251.76,88.94l-120-64a8,8,0,0,0-7.52,0l-120,64a8,8,0,0,0,0,14.12L32,117.87v48.42a15.91,15.91,0,0,0,4.06,10.65C49.16,191.53,78.51,216,128,216a130,130,0,0,0,48-8.76V240a8,8,0,0,0,16,0V199.51a115.63,115.63,0,0,0,27.94-22.57A15.91,15.91,0,0,0,224,166.29V117.87l27.76-14.81a8,8,0,0,0,0-14.12ZM128,200c-43.27,0-68.72-21.14-80-33.71V126.4l76.24,40.66a8,8,0,0,0,7.52,0L176,143.47v46.34C163.4,195.69,147.52,200,128,200Zm80-33.75a97.83,97.83,0,0,1-16,14.25V134.93l16-8.53ZM188,118.94l-.22-.13-56-29.87a8,8,0,0,0-7.52,14.12L171,128l-43,22.93L25,96,128,41.07,231,96Z"></path></svg>',
+		'icon'  => 'graduation-cap',
 	),
 	array(
 		'label' => __( 'Support', 'ls-theme' ),
 		'url'   => '/services/support/',
 		'phase' => 'grow',
-		'icon'  => '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor"><path d="M128,24A104,104,0,1,0,232,128,104.11,104.11,0,0,0,128,24Zm39.1,131.79a47.84,47.84,0,0,0,0-55.58l28.5-28.49a87.83,87.83,0,0,1,0,112.56ZM96,128a32,32,0,1,1,32,32A32,32,0,0,1,96,128Zm88.28-67.6L155.79,88.9a47.84,47.84,0,0,0-55.58,0L71.72,60.4a87.83,87.83,0,0,1,112.56,0ZM60.4,71.72l28.5,28.49a47.84,47.84,0,0,0,0,55.58L60.4,184.28a87.83,87.83,0,0,1,0-112.56ZM71.72,195.6l28.49-28.5a47.84,47.84,0,0,0,55.58,0l28.49,28.5a87.83,87.83,0,0,1-112.56,0Z"></path></svg>',
+		'icon'  => 'lifebuoy',
 	),
 	array(
 		'label' => __( 'SEO', 'ls-theme' ),
 		'url'   => '/services/seo/',
 		'phase' => 'grow',
-		'icon'  => '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor"><path d="M232,208a8,8,0,0,1-8,8H32a8,8,0,0,1-8-8V48a8,8,0,0,1,16,0V156.69l50.34-50.35a8,8,0,0,1,11.32,0L128,132.69,180.69,80H160a8,8,0,0,1,0-16h40a8,8,0,0,1,8,8v40a8,8,0,0,1-16,0V91.31l-58.34,58.35a8,8,0,0,1-11.32,0L96,123.31l-56,56V200H224A8,8,0,0,1,232,208Z"></path></svg>',
+		'icon'  => 'chart-line-up',
 	),
 	array(
 		'label' => __( 'Accessibility', 'ls-theme' ),
 		'url'   => '/services/accessibility/',
 		'phase' => 'grow',
-		'icon'  => '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor"><path d="M255.59,189.47a8,8,0,0,0-10.12-5.06l-17.42,5.81-28.9-57.8A8,8,0,0,0,192,128H112V104h56a8,8,0,0,0,0-16H112V79a32,32,0,1,0-16,0V89.81A72,72,0,0,0,112,232c33.52,0,63.69-22.71,71.75-54a8,8,0,1,0-15.5-4C162.09,198,137.91,216,112,216A56,56,0,0,1,96,106.34V136a8,8,0,0,0,8,8h83.05l29.79,59.58a8,8,0,0,0,9.69,4l24-8A8,8,0,0,0,255.59,189.47ZM88,48a16,16,0,1,1,16,16A16,16,0,0,1,88,48Z"></path></svg>',
+		'icon'  => 'wheelchair',
 	),
 	array(
 		'label' => __( 'Email marketing', 'ls-theme' ),
 		'url'   => '/services/email-marketing/',
 		'phase' => 'grow',
-		'icon'  => '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor"><path d="M224,48H32a8,8,0,0,0-8,8V192a16,16,0,0,0,16,16H216a16,16,0,0,0,16-16V56A8,8,0,0,0,224,48ZM203.43,64,128,133.15,52.57,64ZM216,192H40V74.19l82.59,75.71a8,8,0,0,0,10.82,0L216,74.19V192Z"></path></svg>',
+		'icon'  => 'envelope',
 	),
 	array(
 		'label' => __( 'AI', 'ls-theme' ),
 		'url'   => '/services/ai/',
 		'phase' => 'evolve',
-		'icon'  => '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor"><path d="M197.58,129.06,146,110l-19-51.62a15.92,15.92,0,0,0-29.88,0L78,110l-51.62,19a15.92,15.92,0,0,0,0,29.88L78,178l19,51.62a15.92,15.92,0,0,0,29.88,0L146,178l51.62-19a15.92,15.92,0,0,0,0-29.88ZM137,164.22a8,8,0,0,0-4.74,4.74L112,223.85,91.78,169A8,8,0,0,0,87,164.22L32.15,144,87,123.78A8,8,0,0,0,91.78,119L112,64.15,132.22,119a8,8,0,0,0,4.74,4.74L191.85,144ZM144,40a8,8,0,0,1,8-8h16V16a8,8,0,0,1,16,0V32h16a8,8,0,0,1,0,16H184V64a8,8,0,0,1-16,0V48H152A8,8,0,0,1,144,40ZM248,88a8,8,0,0,1-8,8h-8v8a8,8,0,0,1-16,0V96h-8a8,8,0,0,1,0-16h8V72a8,8,0,0,1,16,0v8h8A8,8,0,0,1,248,88Z"></path></svg>',
+		'icon'  => 'special-interests',
 	),
 );
 ?>
@@ -111,9 +111,7 @@
 
 		<!-- wp:group {"style":{"spacing":{"margin":{"top":"var:preset|spacing|30"}}},"layout":{"type":"flex","flexWrap":"nowrap","justifyContent":"left","verticalAlignment":"center"}} -->
 		<div class="wp-block-group" style="margin-top:var(--wp--preset--spacing--30)">
-			<!-- wp:outermost/icon-block {"iconName":"","className":"has-text-color","width":"8px","style":{"color":{"text":"var(--wp--custom--color--text--brand)"}}} -->
-			<div class="wp-block-outermost-icon-block has-text-color"><div class="icon-container" style="color:var(--wp--custom--color--text--brand);width:8px;transform:rotate(0deg) scaleX(1) scaleY(1)"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><circle cx="12" cy="12" r="12"></circle></svg></div></div>
-			<!-- /wp:outermost/icon-block -->
+			<!-- 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__( 'Services', 'ls-theme' ); ?></p>
@@ -162,9 +160,7 @@
 						?>
 					<!-- wp:group {"className":"<?php echo esc_attr( $ls_pill_class ); ?>","style":{"border":{"color":"<?php echo esc_attr( $ls_pill_border ); ?>","radius":"var:preset|border-radius|500","style":"solid","width":"1px"},"color":{"background":"<?php echo esc_attr( $ls_pill_bg ); ?>"},"spacing":{"padding":{"top":"var:preset|spacing|10","right":"var:preset|spacing|20","bottom":"var:preset|spacing|10","left":"var:preset|spacing|20"},"blockGap":"var:preset|spacing|5"}},"layout":{"type":"flex","flexWrap":"nowrap","verticalAlignment":"center"}} -->
 					<div class="wp-block-group <?php echo esc_attr( $ls_pill_class ); ?> has-background" style="border-color:<?php echo esc_attr( $ls_pill_border ); ?>;border-style:solid;border-width:1px;border-radius:var(--wp--preset--border-radius--500);background-color:<?php echo esc_attr( $ls_pill_bg ); ?>;padding-top:var(--wp--preset--spacing--10);padding-right:var(--wp--preset--spacing--20);padding-bottom:var(--wp--preset--spacing--10);padding-left:var(--wp--preset--spacing--20)">
-						<!-- wp:outermost/icon-block {"iconName":"","className":"has-text-color","width":"13px","style":{"color":{"text":"<?php echo esc_attr( $ls_phase_color ); ?>"}}} -->
-						<div class="wp-block-outermost-icon-block has-text-color"><div class="icon-container" style="color:<?php echo esc_attr( $ls_phase_color ); ?>;width:13px;transform:rotate(0deg) scaleX(1) scaleY(1)"><?php echo $ls_tag['icon']; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped -- Static, developer-authored Phosphor icon markup, not user input. ?></div></div>
-						<!-- /wp:outermost/icon-block -->
+						<!-- wp:icon {"icon":"lightspeed/<?php echo esc_attr( $ls_tag['icon'] ); ?>","className":"has-text-color","style":{"color":{"text":"<?php echo esc_attr( $ls_phase_color ); ?>"},"dimensions":{"width":"13px"}}} /-->
 
 						<!-- wp:paragraph {"style":{"typography":{"fontWeight":"var:custom|typography|font-weight|semibold"},"color":{"text":"var(--wp--custom--color--text--default)"}},"fontSize":"100"} -->
 						<p class="has-text-color has-100-font-size" style="color:var(--wp--custom--color--text--default);font-weight:var(--wp--custom--typography--font-weight--semibold)"><a href="<?php echo esc_url( home_url( $ls_tag['url'] ) ); ?>" style="color:inherit;text-decoration:none"><?php echo esc_html( $ls_tag['label'] ); ?></a></p>
diff --git a/patterns/sections/services-linked-decisions.php b/patterns/sections/services-linked-decisions.php
index da96f42..97833a0 100644
--- a/patterns/sections/services-linked-decisions.php
+++ b/patterns/sections/services-linked-decisions.php
@@ -50,8 +50,6 @@
 		'url'   => '/services/evolve/',
 	),
 );
-
-$ls_step_arrow_icon = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor"><path d="M221.66,133.66l-72,72a8,8,0,0,1-11.32-11.32L196.69,136H40a8,8,0,0,1,0-16H196.69L138.34,61.66a8,8,0,0,1,11.32-11.32l72,72A8,8,0,0,1,221.66,133.66Z"></path></svg>';
 ?>
 <!-- wp:group {"align":"full","tagName":"section","className":"is-style-content-band","style":{"spacing":{"padding":{"top":"var:preset|spacing|90","right":"var:preset|spacing|60","bottom":"var:preset|spacing|100","left":"var:preset|spacing|60"}}},"layout":{"type":"constrained"}} -->
 <section class="wp-block-group alignfull is-style-content-band" style="padding-top:var(--wp--preset--spacing--90);padding-right:var(--wp--preset--spacing--60);padding-bottom:var(--wp--preset--spacing--100);padding-left:var(--wp--preset--spacing--60)">
@@ -67,9 +65,7 @@
 
 				<!-- wp:group {"layout":{"type":"flex","flexWrap":"nowrap","justifyContent":"left","verticalAlignment":"center"}} -->
 				<div class="wp-block-group">
-					<!-- wp:outermost/icon-block {"iconName":"","className":"has-text-color","width":"8px","style":{"color":{"text":"var(--wp--custom--color--text--brand)"}}} -->
-					<div class="wp-block-outermost-icon-block has-text-color"><div class="icon-container" style="color:var(--wp--custom--color--text--brand);width:8px;transform:rotate(0deg) scaleX(1) scaleY(1)"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><circle cx="12" cy="12" r="12"></circle></svg></div></div>
-					<!-- /wp:outermost/icon-block -->
+					<!-- 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__( 'How the service model works', 'ls-theme' ); ?></p>
@@ -117,9 +113,7 @@
 					<!-- /wp:group -->
 
 						<?php if ( $ls_step_index < count( $ls_linked_decisions_steps ) - 1 ) : ?>
-					<!-- wp:outermost/icon-block {"iconName":"","className":"has-text-color","width":"14px","style":{"color":{"text":"var(--wp--custom--color--text--subtle)"}}} -->
-					<div class="wp-block-outermost-icon-block has-text-color"><div class="icon-container" style="color:var(--wp--custom--color--text--subtle);width:14px;transform:rotate(0deg) scaleX(1) scaleY(1)"><?php echo $ls_step_arrow_icon; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped -- Static, developer-authored Phosphor icon markup, not user input. ?></div></div>
-					<!-- /wp:outermost/icon-block -->
+					<!-- wp:icon {"icon":"lightspeed/arrow-right","className":"has-text-color","style":{"color":{"text":"var(--wp--custom--color--text--subtle)"},"dimensions":{"width":"14px"}}} /-->
 					<?php endif; ?>
 
 					<?php endforeach; ?>
diff --git a/patterns/sections/services-service-clusters.php b/patterns/sections/services-service-clusters.php
index c3640ab..2f1257d 100644
--- a/patterns/sections/services-service-clusters.php
+++ b/patterns/sections/services-service-clusters.php
@@ -12,19 +12,17 @@
  * @package ls-theme
  */
 
-$ls_arrow_icon = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor"><path d="M221.66,133.66l-72,72a8,8,0,0,1-11.32-11.32L196.69,136H40a8,8,0,0,1,0-16H196.69L138.34,61.66a8,8,0,0,1,11.32-11.32l72,72A8,8,0,0,1,221.66,133.66Z"></path></svg>';
-
 $ls_service_icons = array(
-	'discovery'   => '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor"><path d="M229.66,218.34l-50.07-50.06a88.11,88.11,0,1,0-11.31,11.31l50.06,50.07a8,8,0,0,0,11.32-11.32ZM40,112a72,72,0,1,1,72,72A72.08,72.08,0,0,1,40,112Z"></path></svg>',
-	'content'     => '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor"><path d="M88,96a8,8,0,0,1,8-8h64a8,8,0,0,1,0,16H96A8,8,0,0,1,88,96Zm8,40h64a8,8,0,0,0,0-16H96a8,8,0,0,0,0,16Zm32,16H96a8,8,0,0,0,0,16h32a8,8,0,0,0,0-16ZM224,48V156.69A15.86,15.86,0,0,1,219.31,168L168,219.31A15.86,15.86,0,0,1,156.69,224H48a16,16,0,0,1-16-16V48A16,16,0,0,1,48,32H208A16,16,0,0,1,224,48ZM48,208H152V160a8,8,0,0,1,8-8h48V48H48Zm120-40v28.7L196.69,168Z"></path></svg>',
-	'design'      => '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor"><path d="M232,32a8,8,0,0,0-8-8c-44.08,0-89.31,49.71-114.43,82.63A60,60,0,0,0,32,164c0,30.88-19.54,44.73-20.47,45.37A8,8,0,0,0,16,224H92a60,60,0,0,0,57.37-77.57C182.3,121.31,232,76.08,232,32ZM92,208H34.63C41.38,198.41,48,183.92,48,164a44,44,0,1,1,44,44Zm32.42-94.45q5.14-6.66,10.09-12.55A76.23,76.23,0,0,1,155,121.49q-5.9,4.94-12.55,10.09A60.54,60.54,0,0,0,124.42,113.55Zm42.7-2.68a92.57,92.57,0,0,0-22-22c31.78-34.53,55.75-45,69.9-47.91C212.17,55.12,201.65,79.09,167.12,110.87Z"></path></svg>',
-	'development' => '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor"><path d="M69.12,94.15,28.5,128l40.62,33.85a8,8,0,1,1-10.24,12.29l-48-40a8,8,0,0,1,0-12.29l48-40a8,8,0,0,1,10.24,12.3Zm176,27.7-48-40a8,8,0,1,0-10.24,12.3L227.5,128l-40.62,33.85a8,8,0,1,0,10.24,12.29l48-40a8,8,0,0,0,0-12.29ZM162.73,32.48a8,8,0,0,0-10.25,4.79l-64,176a8,8,0,0,0,4.79,10.26A8.14,8.14,0,0,0,96,224a8,8,0,0,0,7.52-5.27l64-176A8,8,0,0,0,162.73,32.48Z"></path></svg>',
-	'migrations'  => '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor"><path d="M213.66,181.66l-32,32a8,8,0,0,1-11.32-11.32L188.69,184H48a8,8,0,0,1,0-16H188.69l-18.35-18.34a8,8,0,0,1,11.32-11.32l32,32A8,8,0,0,1,213.66,181.66Zm-139.32-64a8,8,0,0,0,11.32-11.32L67.31,88H208a8,8,0,0,0,0-16H67.31L85.66,53.66A8,8,0,0,0,74.34,42.34l-32,32a8,8,0,0,0,0,11.32Z"></path></svg>',
-	'hosting'     => '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor"><path d="M160,40A88.09,88.09,0,0,0,81.29,88.67,64,64,0,1,0,72,216h88a88,88,0,0,0,0-176Zm0,160H72a48,48,0,0,1,0-96c1.1,0,2.2,0,3.29.11A88,88,0,0,0,72,128a8,8,0,0,0,16,0,72,72,0,1,1,72,72Z"></path></svg>',
-	'training'    => '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor"><path d="M251.76,88.94l-120-64a8,8,0,0,0-7.52,0l-120,64a8,8,0,0,0,0,14.12L32,117.87v48.42a15.91,15.91,0,0,0,4.06,10.65C49.16,191.53,78.51,216,128,216a130,130,0,0,0,48-8.76V240a8,8,0,0,0,16,0V199.51a115.63,115.63,0,0,0,27.94-22.57A15.91,15.91,0,0,0,224,166.29V117.87l27.76-14.81a8,8,0,0,0,0-14.12ZM128,200c-43.27,0-68.72-21.14-80-33.71V126.4l76.24,40.66a8,8,0,0,0,7.52,0L176,143.47v46.34C163.4,195.69,147.52,200,128,200Zm80-33.75a97.83,97.83,0,0,1-16,14.25V134.93l16-8.53ZM188,118.94l-.22-.13-56-29.87a8,8,0,0,0-7.52,14.12L171,128l-43,22.93L25,96,128,41.07,231,96Z"></path></svg>',
-	'support'     => '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor"><path d="M128,24A104,104,0,1,0,232,128,104.11,104.11,0,0,0,128,24Zm39.1,131.79a47.84,47.84,0,0,0,0-55.58l28.5-28.49a87.83,87.83,0,0,1,0,112.56ZM96,128a32,32,0,1,1,32,32A32,32,0,0,1,96,128Zm88.28-67.6L155.79,88.9a47.84,47.84,0,0,0-55.58,0L71.72,60.4a87.83,87.83,0,0,1,112.56,0ZM60.4,71.72l28.5,28.49a47.84,47.84,0,0,0,0,55.58L60.4,184.28a87.83,87.83,0,0,1,0-112.56ZM71.72,195.6l28.49-28.5a47.84,47.84,0,0,0,55.58,0l28.49,28.5a87.83,87.83,0,0,1-112.56,0Z"></path></svg>',
-	'ai'          => '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor"><path d="M197.58,129.06,146,110l-19-51.62a15.92,15.92,0,0,0-29.88,0L78,110l-51.62,19a15.92,15.92,0,0,0,0,29.88L78,178l19,51.62a15.92,15.92,0,0,0,29.88,0L146,178l51.62-19a15.92,15.92,0,0,0,0-29.88ZM137,164.22a8,8,0,0,0-4.74,4.74L112,223.85,91.78,169A8,8,0,0,0,87,164.22L32.15,144,87,123.78A8,8,0,0,0,91.78,119L112,64.15,132.22,119a8,8,0,0,0,4.74,4.74L191.85,144ZM144,40a8,8,0,0,1,8-8h16V16a8,8,0,0,1,16,0V32h16a8,8,0,0,1,0,16H184V64a8,8,0,0,1-16,0V48H152A8,8,0,0,1,144,40ZM248,88a8,8,0,0,1-8,8h-8v8a8,8,0,0,1-16,0V96h-8a8,8,0,0,1,0-16h8V72a8,8,0,0,1,16,0v8h8A8,8,0,0,1,248,88Z"></path></svg>',
-	'seo'         => '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor"><path d="M232,208a8,8,0,0,1-8,8H32a8,8,0,0,1-8-8V48a8,8,0,0,1,16,0V156.69l50.34-50.35a8,8,0,0,1,11.32,0L128,132.69,180.69,80H160a8,8,0,0,1,0-16h40a8,8,0,0,1,8,8v40a8,8,0,0,1-16,0V91.31l-58.34,58.35a8,8,0,0,1-11.32,0L96,123.31l-56,56V200H224A8,8,0,0,1,232,208Z"></path></svg>',
+	'discovery' => 'search',
+	'content' => 'file-text',
+	'design' => 'paint-brush',
+	'development' => 'code',
+	'migrations' => 'arrows-left-right',
+	'hosting' => 'cloud',
+	'training' => 'graduation-cap',
+	'support' => 'lifebuoy',
+	'ai' => 'sparkle',
+	'seo' => 'chart-line-up',
 );
 
 $ls_service_urls = array(
@@ -56,35 +54,35 @@
 $ls_clusters = array(
 	array(
 		'index'       => '01',
-		'icon'        => '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor"><path d="M229.66,218.34l-50.07-50.06a88.11,88.11,0,1,0-11.31,11.31l50.06,50.07a8,8,0,0,0,11.32-11.32ZM40,112a72,72,0,1,1,72,72A72.08,72.08,0,0,1,40,112Z"></path></svg>',
+		'icon' => 'search',
 		'title'       => __( 'Discovery and content', 'ls-theme' ),
 		'description' => __( 'For scope clarity, content structure, risk reduction and better planning before design or build decisions harden.', 'ls-theme' ),
 		'tags'        => array( 'discovery', 'content' ),
 	),
 	array(
 		'index'       => '02',
-		'icon'        => '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor"><path d="M232,32a8,8,0,0,0-8-8c-44.08,0-89.31,49.71-114.43,82.63A60,60,0,0,0,32,164c0,30.88-19.54,44.73-20.47,45.37A8,8,0,0,0,16,224H92a60,60,0,0,0,57.37-77.57C182.3,121.31,232,76.08,232,32ZM92,208H34.63C41.38,198.41,48,183.92,48,164a44,44,0,1,1,44,44Zm32.42-94.45q5.14-6.66,10.09-12.55A76.23,76.23,0,0,1,155,121.49q-5.9,4.94-12.55,10.09A60.54,60.54,0,0,0,124.42,113.55Zm42.7-2.68a92.57,92.57,0,0,0-22-22c31.78-34.53,55.75-45,69.9-47.91C212.17,55.12,201.65,79.09,167.12,110.87Z"></path></svg>',
+		'icon' => 'paint-brush',
 		'title'       => __( 'Design systems and accessibility', 'ls-theme' ),
 		'description' => __( 'For clearer interfaces, stronger consistency and more maintainable design-to-development translation.', 'ls-theme' ),
 		'tags'        => array( 'design' ),
 	),
 	array(
 		'index'       => '03',
-		'icon'        => '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor"><path d="M69.12,94.15,28.5,128l40.62,33.85a8,8,0,1,1-10.24,12.29l-48-40a8,8,0,0,1,0-12.29l48-40a8,8,0,0,1,10.24,12.3Zm176,27.7-48-40a8,8,0,1,0-10.24,12.3L227.5,128l-40.62,33.85a8,8,0,1,0,10.24,12.29l48-40a8,8,0,0,0,0-12.29ZM162.73,32.48a8,8,0,0,0-10.25,4.79l-64,176a8,8,0,0,0,4.79,10.26A8.14,8.14,0,0,0,96,224a8,8,0,0,0,7.52-5.27l64-176A8,8,0,0,0,162.73,32.48Z"></path></svg>',
+		'icon' => 'code',
 		'title'       => __( 'Engineering and migrations', 'ls-theme' ),
 		'description' => __( 'For custom WordPress work, integrations, migrations and cleaner long-term architecture.', 'ls-theme' ),
 		'tags'        => array( 'development', 'migrations' ),
 	),
 	array(
 		'index'       => '04',
-		'icon'        => '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor"><path d="M223.85,47.12a16,16,0,0,0-15-15c-12.58-.75-44.73.4-71.41,27.07L132.69,64H74.36A15.91,15.91,0,0,0,63,68.68L28.7,103a16,16,0,0,0,9.07,27.16l38.47,5.37,44.21,44.21,5.37,38.49a15.94,15.94,0,0,0,10.78,12.92,16.11,16.11,0,0,0,5.1.83A15.91,15.91,0,0,0,153,227.3L187.32,193A15.91,15.91,0,0,0,192,181.64V123.31l4.77-4.77C223.45,91.86,224.6,59.71,223.85,47.12ZM74.36,80h42.33L77.16,119.52,40,114.34Zm74.41-9.45a76.65,76.65,0,0,1,59.11-22.47,76.46,76.46,0,0,1-22.42,59.16L128,164.68,91.32,128ZM176,181.64,141.67,216l-5.19-37.17L176,139.31Zm-74.16,9.5C97.34,201,82.29,224,40,224a8,8,0,0,1-8-8c0-42.29,23-57.34,32.86-61.85a8,8,0,0,1,6.64,14.56c-6.43,2.93-20.62,12.36-23.12,38.91,26.55-2.5,36-16.69,38.91-23.12a8,8,0,1,1,14.56,6.64Z"></path></svg>',
+		'icon' => 'rocket',
 		'title'       => __( 'Launch and infrastructure', 'ls-theme' ),
 		'description' => __( 'For hosting, readiness, security-minded thinking and performance-aware go-live planning.', 'ls-theme' ),
 		'tags'        => array( 'hosting', 'training' ),
 	),
 	array(
 		'index'       => '05',
-		'icon'        => '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor"><path d="M140,180a12,12,0,1,1-12-12A12,12,0,0,1,140,180ZM128,72c-22.06,0-40,16.15-40,36v4a8,8,0,0,0,16,0v-4c0-11,10.77-20,24-20s24,9,24,20-10.77,20-24,20a8,8,0,0,0-8,8v8a8,8,0,0,0,16,0v-.72c18.24-3.35,32-17.9,32-35.28C168,88.15,150.06,72,128,72Zm104,56A104,104,0,1,1,128,24,104.11,104.11,0,0,1,232,128Zm-16,0a88,88,0,1,0-88,88A88.1,88.1,0,0,0,216,128Z"></path></svg>',
+		'icon' => 'question',
 		'title'       => __( 'Support and optimisation', 'ls-theme' ),
 		'description' => __( 'For maintenance, issue resolution, performance review, training and long-term platform continuity.', 'ls-theme' ),
 		'tags'        => array( 'support', 'ai', 'seo' ),
@@ -99,7 +97,7 @@
  *
  * @param array $ls_cluster Cluster data (index, icon, title, description, tags).
  */
-$ls_render_cluster = function ( $ls_cluster ) use ( $ls_service_icons, $ls_service_urls, $ls_service_labels, $ls_arrow_icon ) {
+$ls_render_cluster = function ( $ls_cluster ) use ( $ls_service_icons, $ls_service_urls, $ls_service_labels ) {
 	?>
 	<!-- wp:group {"tagName":"article","className":"is-style-card-cluster","style":{"dimensions":{"minHeight":"100%"}},"layout":{"type":"flex","orientation":"vertical","justifyContent":"stretch","flexWrap":"nowrap"}} -->
 	<article class="wp-block-group is-style-card-cluster" style="min-height:100%">
@@ -108,9 +106,7 @@
 		<div class="wp-block-group">
 			<!-- wp:group {"className":"ls-icon-well-brand"} -->
 			<div class="wp-block-group ls-icon-well-brand">
-				<!-- wp:outermost/icon-block {"iconName":"","width":"22px"} -->
-				<div class="wp-block-outermost-icon-block"><div class="icon-container" style="width:22px;transform:rotate(0deg) scaleX(1) scaleY(1)"><?php echo $ls_cluster['icon']; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped -- Static, developer-authored Phosphor icon markup, not user input. ?></div></div>
-				<!-- /wp:outermost/icon-block -->
+				<!-- wp:icon {"icon":"lightspeed/<?php echo esc_attr( $ls_cluster['icon'] ); ?>","style":{"dimensions":{"width":"22px"}}} /-->
 			</div>
 			<!-- /wp:group -->
 
@@ -138,17 +134,13 @@
 
 			<!-- wp:group {"className":"ls-cluster-tag","style":{"border":{"color":"var:custom|color|border|card","radius":"var:preset|border-radius|500","style":"solid","width":"1px"},"color":{"background":"var:custom|color|surface|canvas"},"spacing":{"padding":{"top":"var:preset|spacing|5","right":"var:preset|spacing|10","bottom":"var:preset|spacing|5","left":"var:preset|spacing|10"},"blockGap":"var:preset|spacing|5"}},"layout":{"type":"flex","flexWrap":"nowrap","verticalAlignment":"center"}} -->
 			<div class="wp-block-group ls-cluster-tag has-background" style="border-color:var(--wp--custom--color--border--card);border-style:solid;border-width:1px;border-radius:var(--wp--preset--border-radius--500);background-color:var(--wp--custom--color--surface--canvas);padding-top:var(--wp--preset--spacing--5);padding-right:var(--wp--preset--spacing--10);padding-bottom:var(--wp--preset--spacing--5);padding-left:var(--wp--preset--spacing--10)">
-				<!-- wp:outermost/icon-block {"iconName":"","className":"has-text-color","width":"13px","style":{"color":{"text":"var(--wp--custom--color--text--subtle)"}}} -->
-				<div class="wp-block-outermost-icon-block has-text-color"><div class="icon-container" style="color:var(--wp--custom--color--text--subtle);width:13px;transform:rotate(0deg) scaleX(1) scaleY(1)"><?php echo $ls_service_icons[ $ls_tag_key ]; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped -- Static, developer-authored Phosphor icon markup, not user input. ?></div></div>
-				<!-- /wp:outermost/icon-block -->
+				<!-- wp:icon {"icon":"lightspeed/<?php echo esc_attr( $ls_service_icons[ $ls_tag_key ] ); ?>","className":"has-text-color","style":{"color":{"text":"var(--wp--custom--color--text--subtle)"},"dimensions":{"width":"13px"}}} /-->
 
 				<!-- wp:paragraph {"style":{"typography":{"fontWeight":"var:custom|typography|font-weight|semibold"}},"fontSize":"100"} -->
 				<p class="has-100-font-size" style="font-weight:var(--wp--custom--typography--font-weight--semibold)"><a class="ls-cluster-tag__link" href="<?php echo esc_url( home_url( $ls_service_urls[ $ls_tag_key ] ) ); ?>" style="color:inherit;text-decoration:none"><?php echo esc_html( $ls_service_labels[ $ls_tag_key ] ); ?></a></p>
 				<!-- /wp:paragraph -->
 
-				<!-- wp:outermost/icon-block {"iconName":"","className":"has-text-color","width":"11px","style":{"color":{"text":"var(--wp--custom--color--text--subtle)"}}} -->
-				<div class="wp-block-outermost-icon-block has-text-color"><div class="icon-container" style="color:var(--wp--custom--color--text--subtle);width:11px;transform:rotate(0deg) scaleX(1) scaleY(1)"><?php echo $ls_arrow_icon; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped -- Static, developer-authored Phosphor icon markup, not user input. ?></div></div>
-				<!-- /wp:outermost/icon-block -->
+				<!-- wp:icon {"icon":"lightspeed/arrow-right","className":"has-text-color","style":{"color":{"text":"var(--wp--custom--color--text--subtle)"},"dimensions":{"width":"11px"}}} /-->
 			</div>
 			<!-- /wp:group -->
 
@@ -173,9 +165,7 @@
 			<div class="wp-block-column is-vertically-aligned-bottom">
 				<!-- wp:group {"layout":{"type":"flex","flexWrap":"nowrap","justifyContent":"left","verticalAlignment":"center"}} -->
 				<div class="wp-block-group">
-					<!-- wp:outermost/icon-block {"iconName":"","className":"has-text-color","width":"8px","style":{"color":{"text":"var(--wp--custom--color--text--brand)"}}} -->
-					<div class="wp-block-outermost-icon-block has-text-color"><div class="icon-container" style="color:var(--wp--custom--color--text--brand);width:8px;transform:rotate(0deg) scaleX(1) scaleY(1)"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><circle cx="12" cy="12" r="12"></circle></svg></div></div>
-					<!-- /wp:outermost/icon-block -->
+					<!-- 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__( 'Service clusters', 'ls-theme' ); ?></p>

From ec2086ab8278c2855f507fcb1cbf8d0929c2e18c Mon Sep 17 00:00:00 2001
From: Brandonma21 <Brandonmarshall101@gmail.com>
Date: Wed, 9 Sep 2026 14:17:06 +0200
Subject: [PATCH 6/7] Add CHANGELOG entry for Services icon-block migration
 (LS-3229)

Documents PR #50 per this repo's changelog convention.
---
 CHANGELOG.md | 11 +++++++++++
 1 file changed, 11 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index d09cdaf..df0c10f 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -7,6 +7,17 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ---
 
+## [Unreleased] — Migrate Services patterns to the Core Icon block (LS-3229)
+
+### Changed
+
+- Replaced `outermost/icon-block` (third-party "Icon Block" plugin) with WordPress 7.1's native Core Icon block (`core/icon`) across the 3 Services page patterns — `patterns/hero/services-hero.php`, `patterns/sections/services-linked-decisions.php`, `patterns/sections/services-service-clusters.php` — referencing icons from the `lightspeed` collection registered in `ls-plugin`. Final batch of the Core Icon block migration (LS-3229).
+- Converted the PHP icon arrays in these files (per-service, per-cluster, per-step) from raw inline SVG to bare `lightspeed/{name}` slugs, and rewrote their loop templates to emit `core/icon` block markup dynamically per iteration, removing the now-unused raw-SVG helper variables.
+
+See [PR #50](https://github.com/lightspeedwp/ls-theme/pull/50).
+
+---
+
 ## [Unreleased] — Fix legacy outermost/icon-block CSS selectors broken by Core Icon migration (LS-3720)
 
 ### Fixed

From feb44df4fbd2875e6726093e9bea42b19d6aefe7 Mon Sep 17 00:00:00 2001
From: Brandonma21 <Brandonmarshall101@gmail.com>
Date: Thu, 10 Sep 2026 07:46:24 +0200
Subject: [PATCH 7/7] Update CHANGELOG.md

Context
- Documents the Services page hero, linked-decisions, and service-clusters patterns added in PR #51
---
 CHANGELOG.md | 13 +++++++++++++
 1 file changed, 13 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 052ce67..cfe5dd3 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -7,6 +7,19 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ---
 
+## [Unreleased] — Build Services page: hero, linked decisions, and service clusters (LS-1598)
+
+### Added
+
+- Added `patterns/hero/services-hero.php`: breadcrumb, eyebrow, heading, description, CTAs, and a lifecycle-phase-coloured row of all 14 service tags linking to their `/services/` pages.
+- Added `patterns/sections/services-linked-decisions.php`: a six-step process pill row (Discover/Create/Build/Launch/Grow/Evolve) linking to new `/services/` phase pages, with a fixed whole-pill click target.
+- Added `patterns/sections/services-service-clusters.php`: five cluster cards in an asymmetric 3+2 layout grouping all 14 services, each linking out to its individual service page.
+- Added `styles/sections/cards/card-cluster.json`, a new shared card shell for the service-clusters section.
+
+### Fixed
+
+- Fixed the second service-clusters card row's `blockGap` being nested outside `spacing` instead of inside it, which silently fell back to WordPress's default gap instead of matching row 1.
+
 ## [Unreleased] — Fix button.fill color contrast (LS-2937)
 
 ### Fixed