fix: de-hardcode ServicesSection copy/CSS and add cta-panel override slot

GlassPanel CTA text and section subheadings were hardcoded strings ported
from another project (including a copy bug where every service's CTA read
"Ready to book your highlights appointment?" regardless of the service).
These are now props (processHeading, idealForHeading, maintenanceHeading,
faqsHeading, ctaHeading, ctaBody), with a new cta-panel scoped slot for
consumers who need to replace the CTA block entirely.

Also namespaces internal CSS classes to services-section__* BEM naming
(previously unprefixed and collision-prone), removes a dead .glass-card
rule, and exposes layout/spacing values as --services-section-* custom
properties. Adds CONSUMER-STYLING.md, updates the services-section skill
doc and VS Code snippet, and refreshes the Storybook stories with content
matching the real service detail page.

Author: srcdev

.claude/skills/components/services-section.md

@@ -15,14 +15,40 @@ All routing and CTA decisions are delegated to the consumer via slots.
 |------|------|---------|----------|
 | `serviceData` | `Service` | — | **yes** |
 | `tag` | `"div" \| "section" \| "article" \| "main"` | `"div"` | no |
+| `headerTag` | `"h1" \| "h2" \| "h3"` | `"h2"` | no |
 | `index` | `number` | `0` | no |
 | `isSummary` | `boolean` | `false` | no |
 | `summaryAlignment` | `"start" \| "center" \| "end"` | `"center"` | no |
 | `reverse` | `boolean` | `false` | no |
 | `durationIcon` | `string` | `"mdi:clock-time-four-outline"` | no |
 | `priceIcon` | `string` | `"mdi:currency-gbp"` | no |
+| `processHeading` | `string` | `"The Process"` | no |
+| `idealForHeading` | `string` | `"Ideal For"` | no |
+| `maintenanceHeading` | `string` | `"Aftercare & Maintenance"` | no |
+| `faqsHeading` | `string` | `"Frequently Asked Questions"` | no |
+| `ctaHeading` | `string` | `"Ready to book your appointment?"` | no |
+| `ctaBody` | `string` | `"Get in touch to book your appointment."` | no |
 | `styleClassPassthrough` | `string \| string[]` | `[]` | no |
 
+### Heading and CTA copy props
+
+All section subheadings and the default CTA panel's heading/body are props, not hardcoded
+text — override them with wording specific to the consuming business:
+
+```vue
+<ServicesSection
+  :service-data="service"
+  process-heading="How It Works"
+  cta-heading="Ready to book your colour appointment?"
+  cta-body="Mobile service across Bath — I come to you."
+/>
+```
+
+Name the actual service in `ctaHeading` (rather than a generic phrase) if every service page
+shares one CTA wrapper — a single hardcoded heading applied to every service previously caused
+a real bug in production, where a "Colour" service page's CTA read "Ready to book your
+**highlights** appointment?" regardless of which service was being viewed.
+
 ### Icon customisation
 
 The two icons in the price/duration row default to `mdi:clock-time-four-outline` and `mdi:currency-gbp`. Override them for a different currency or icon style:
@@ -51,8 +77,12 @@ Flips the image to the right column and content to the left (CSS `order: 2` on t
 |------|-----------|---------------|---------|
 | `summary-link` | `{ serviceData: Service }` | `isSummary` is `true` | Navigation link below the `whatIsIt` text in summary mode |
 | `cta` | `{ serviceData: Service }` | `isSummary` is `false` | CTA button/link inside the closing `GlassPanel` in full mode |
+| `cta-panel` | `{ serviceData: Service, ctaHeading: string, ctaBody: string }` | `isSummary` is `false` | Replaces the entire default `GlassPanel` CTA block — use when a consumer needs a different component or layout, not just different copy |
 
-Both slots receive `serviceData` as a scoped prop.
+All three slots receive `serviceData` as a scoped prop. `cta-panel`'s default content *is*
+the `GlassPanel` + `ctaHeading`/`ctaBody` + `cta` slot combination described above — providing
+`cta-panel` replaces that whole block, so the `ctaHeading`/`ctaBody` props and `cta` slot are
+only useful if the `cta-panel` slot fallback (or the consumer's own override) still renders them.
 
 ## Summary mode usage
 
@@ -102,6 +132,21 @@ Both slots receive `serviceData` as a scoped prop.
 </ServicesSection>
 ```
 
+## Replacing the whole CTA panel (slot override)
+
+Use `cta-panel` instead of `ctaHeading`/`ctaBody` when the CTA needs a different component
+entirely — not just different text inside `GlassPanel`:
+
+```vue
+<ServicesSection :service-data="service">
+  <template #cta-panel="{ serviceData, ctaHeading, ctaBody }">
+    <MyPromoBanner :heading="ctaHeading" :body="ctaBody">
+      <template #cta><InputButtonCore button-text="Enquire Now" href="/contact" /></template>
+    </MyPromoBanner>
+  </template>
+</ServicesSection>
+```
+
 ## Rendering a list (summary mode)
 
 ```vue
@@ -122,9 +167,12 @@ Both slots receive `serviceData` as a scoped prop.
 
 ## Local style override scaffold
 
-When consuming this component, scaffold a style block using `styleClassPassthrough`. Delete the block if unused.
+When consuming this component, prefer the `--services-section-*` CSS custom properties
+documented in `CONSUMER-STYLING.md` (in the component's own folder) over raw class overrides.
+For anything the tokens don't cover, scaffold a style block using `styleClassPassthrough`.
+Delete the block if unused.
 
-See [component-local-style-override.md](../component-local-style-override.md) for the full pattern.
+See [component-local-style-override.md](../component-local-style-override.md) for the general pattern.
 
 ```vue
 <ServicesSection :style-class-passthrough="['my-section']" :service-data="service">
@@ -138,8 +186,10 @@ See [component-local-style-override.md](../component-local-style-override.md) fo
    ─────────────────────────────────────────────────────────────────── */
 .services-section {
   &.my-section {
-    /* Geometry — image wrapper */
-    /* .image-wrapper { border-radius: 1.2rem; } */
+    --services-section-image-border-radius: 1.2rem;
+
+    /* Deeper overrides target the BEM element classes directly, e.g.: */
+    /* .services-section__faq { } */
   }
 }
 </style>
@@ -150,6 +200,12 @@ See [component-local-style-override.md](../component-local-style-override.md) fo
 - Component is auto-imported in Nuxt — no import needed.
 - The `Service` type is imported from `~/types/types.services`.
 - `summary-link` slot is guarded by `v-if="isSummary"` — it will not render in full mode even if provided.
-- `cta` slot lives inside a `v-if="!isSummary"` `GlassPanel` — it will not render in summary mode.
+- `cta` and `cta-panel` slots live inside `v-if="!isSummary"` — neither renders in summary mode.
+- Internal element classes are BEM-namespaced: `services-section__image-wrapper`,
+  `services-section__info-wrapper`, `services-section__price-duration`,
+  `services-section__decorator`, `services-section__faq`, `services-section__faq-answer`,
+  `services-section__glass-panel`. If a consuming app has CSS overrides referencing older
+  unprefixed names (`.image-wrapper`, `.price-duration`, `.services-faq`, etc. — from before
+  this component's classnames were namespaced), those selectors need updating to match.
 - The section gets `aria-labelledby` automatically when `tag` is `"section"` or `"article"`, pointing to the internal heading id.
 - `summaryAlignment` only has effect when `isSummary` is `true` — it aligns the info-wrapper content vertically within the grid cell.

.claude/skills/index.md

@@ -67,7 +67,7 @@ Each skill is a single markdown file named `<area>-<task>.md`.
     ├── services-card.md        — ServicesCard props (incl. eyebrowConfig/heroConfig), actions slot, CSS tokens, page boilerplate
     ├── services-card-grid.md        — ServicesCardGrid props, config pass-through, CSS tokens, full page boilerplate
     ├── services-section-grid.md     — ServicesSectionGrid props, useAlternateReverse zigzag layout, page boilerplate
-    ├── services-section.md          — ServicesSection props, summary-link/cta slots, summary vs full mode
+    ├── services-section.md          — ServicesSection props (incl. heading/CTA copy), summary-link/cta/cta-panel slots, summary vs full mode
     ├── contact-section.md      — ContactSection props (stepperIndicatorSize pass-through), 3-item info+form layout, slot API
     ├── stepper-list.md         — StepperList dynamic slots (item-{n}/indicator-{n}), props, connector behaviour
     ├── expanding-panel.md      — ExpandingPanel v-model, forceOpened, slots (summary/icon/content), ARIA wiring

.vscode/srcdev-component-services-section.code-snippets

@@ -0,0 +1,84 @@
+{
+  "SRCDEV ServicesSection Full Mode": {
+    "description": "ServicesSection full mode — complete content with CTA",
+    "scope": "vue,html",
+    "body": [
+      "<ServicesSection",
+      "  :service-data=\"$1service\"",
+      "  :index=\"$2index\"",
+      ">",
+      "  <template #cta>",
+      "    <button type=\"button\">$3Book Now</button>",
+      "  </template>",
+      "</ServicesSection>"
+    ]
+  },
+  "SRCDEV ServicesSection Summary Mode": {
+    "description": "ServicesSection summary mode — compact card with summary-link slot",
+    "scope": "vue,html",
+    "body": [
+      "<ServicesSection",
+      "  :service-data=\"$1service\"",
+      "  is-summary",
+      "  summary-alignment=\"$2center\"",
+      ">",
+      "  <template #summary-link=\"{ serviceData }\">",
+      "    <NuxtLink :to=\"`/services/${serviceData.slug}`\">$3More about {{ serviceData.title }} →</NuxtLink>",
+      "  </template>",
+      "</ServicesSection>"
+    ]
+  },
+  "SRCDEV ServicesSection Custom Headings And Cta": {
+    "description": "ServicesSection with custom section headings and CTA copy props",
+    "scope": "vue,html",
+    "body": [
+      "<ServicesSection",
+      "  :service-data=\"$1service\"",
+      "  process-heading=\"$2How It Works\"",
+      "  ideal-for-heading=\"$3Who Is This For\"",
+      "  maintenance-heading=\"$4Aftercare\"",
+      "  faqs-heading=\"$5FAQs\"",
+      "  cta-heading=\"$6Ready to book?\"",
+      "  cta-body=\"$7Get in touch to book your appointment.\"",
+      ">",
+      "  <template #cta>",
+      "    <button type=\"button\">$8Book Now</button>",
+      "  </template>",
+      "</ServicesSection>"
+    ]
+  },
+  "SRCDEV ServicesSection Custom Cta Panel Slot": {
+    "description": "ServicesSection with the cta-panel slot fully replacing the default GlassPanel",
+    "scope": "vue,html",
+    "body": [
+      "<ServicesSection :service-data=\"$1service\">",
+      "  <template #cta-panel=\"{ serviceData, ctaHeading, ctaBody }\">",
+      "    $2",
+      "  </template>",
+      "</ServicesSection>"
+    ]
+  },
+  "SRCDEV ServicesSection CSS Override": {
+    "description": "CSS override scaffold for ServicesSection — scope to a page or section class",
+    "scope": "css",
+    "body": [
+      ".$1my-page {",
+      "  .services-section {",
+      "    --services-section-grid-gap: ;",
+      "    --services-section-grid-gap-desktop: ;",
+      "    --services-section-image-border-radius: ;",
+      "    --services-section-price-duration-gap: ;",
+      "    --services-section-decorator-size: ;",
+      "    --services-section-faq-divider-color: ;",
+      "    --services-section-faq-answer-line-height: ;",
+      "",
+      "    .services-section__image-wrapper {}",
+      "    .services-section__info-wrapper {}",
+      "    .services-section__price-duration {}",
+      "    .services-section__faq {}",
+      "    .services-section__glass-panel {}",
+      "  }",
+      "}"
+    ]
+  }
+}

app/components/03.organisms/services/services-grids/tests/__snapshots__/ServicesSectionGrid.spec.ts.snap

@@ -4,15 +4,15 @@ exports[`ServicesSectionGrid > renders correct HTML structure 1`] = `
 "<div class="services-grid">
   <div class="services-section">
     <div class="services-section__grid">
-      <div class="image-wrapper"><img data-nuxt-img="" srcset="/_ipx/_/images/locs-installation.jpg 1x, /_ipx/_/images/locs-installation.jpg 2x" alt="Locs Installation" loading="eager" fetchpriority="high" class="image" src="/_ipx/_/images/locs-installation.jpg"></div>
-      <div class="info-wrapper is-summary align-center">
+      <div class="services-section__image-wrapper"><img data-nuxt-img="" srcset="/_ipx/_/images/locs-installation.jpg 1x, /_ipx/_/images/locs-installation.jpg 2x" alt="Locs Installation" loading="eager" fetchpriority="high" class="services-section__image" src="/_ipx/_/images/locs-installation.jpg"></div>
+      <div class="services-section__info-wrapper services-section__info-wrapper--summary services-section__info-wrapper--align-center">
         <div class="eyebrow-text large">Subtitle for Locs Installation</div>
         <h2 class="hero-text mb-20 title axis-horizontal">
           <!--v-if--><span class="text-block-0 normal">Locs Installation</span>
         </h2>
-        <div class="price-duration">
-          <div class="flex-row"><span class="iconify i-mdi:clock-time-four-outline decorator" aria-hidden="true"></span><span>60 mins</span></div>
-          <div class="flex-row"><span class="iconify i-mdi:currency-gbp decorator" aria-hidden="true"></span><span>£50</span></div>
+        <div class="services-section__price-duration">
+          <div class="flex-row"><span class="iconify i-mdi:clock-time-four-outline services-section__decorator" aria-hidden="true"></span><span>60 mins</span></div>
+          <div class="flex-row"><span class="iconify i-mdi:currency-gbp services-section__decorator" aria-hidden="true"></span><span>£50</span></div>
         </div>
         <!--v-if-->
         <!--v-if-->
@@ -31,15 +31,15 @@ exports[`ServicesSectionGrid > renders correct HTML structure 1`] = `
   </div>
   <div class="services-section">
     <div class="services-section__grid">
-      <div class="image-wrapper"><img data-nuxt-img="" srcset="/_ipx/_/images/locs-retwist.jpg 1x, /_ipx/_/images/locs-retwist.jpg 2x" alt="Locs Retwist" loading="eager" fetchpriority="auto" class="image" src="/_ipx/_/images/locs-retwist.jpg"></div>
-      <div class="info-wrapper is-summary align-center">
+      <div class="services-section__image-wrapper"><img data-nuxt-img="" srcset="/_ipx/_/images/locs-retwist.jpg 1x, /_ipx/_/images/locs-retwist.jpg 2x" alt="Locs Retwist" loading="eager" fetchpriority="auto" class="services-section__image" src="/_ipx/_/images/locs-retwist.jpg"></div>
+      <div class="services-section__info-wrapper services-section__info-wrapper--summary services-section__info-wrapper--align-center">
         <div class="eyebrow-text large">Subtitle for Locs Retwist</div>
         <h2 class="hero-text mb-20 title axis-horizontal">
           <!--v-if--><span class="text-block-0 normal">Locs Retwist</span>
         </h2>
-        <div class="price-duration">
-          <div class="flex-row"><span class="iconify i-mdi:clock-time-four-outline decorator" aria-hidden="true"></span><span>60 mins</span></div>
-          <div class="flex-row"><span class="iconify i-mdi:currency-gbp decorator" aria-hidden="true"></span><span>£50</span></div>
+        <div class="services-section__price-duration">
+          <div class="flex-row"><span class="iconify i-mdi:clock-time-four-outline services-section__decorator" aria-hidden="true"></span><span>60 mins</span></div>
+          <div class="flex-row"><span class="iconify i-mdi:currency-gbp services-section__decorator" aria-hidden="true"></span><span>£50</span></div>
         </div>
         <!--v-if-->
         <!--v-if-->
@@ -58,15 +58,15 @@ exports[`ServicesSectionGrid > renders correct HTML structure 1`] = `
   </div>
   <div class="services-section">
     <div class="services-section__grid">
-      <div class="image-wrapper"><img data-nuxt-img="" srcset="/_ipx/_/images/colour-treatment.jpg 1x, /_ipx/_/images/colour-treatment.jpg 2x" alt="Colour Treatment" loading="lazy" fetchpriority="auto" class="image" src="/_ipx/_/images/colour-treatment.jpg"></div>
-      <div class="info-wrapper is-summary align-center">
+      <div class="services-section__image-wrapper"><img data-nuxt-img="" srcset="/_ipx/_/images/colour-treatment.jpg 1x, /_ipx/_/images/colour-treatment.jpg 2x" alt="Colour Treatment" loading="lazy" fetchpriority="auto" class="services-section__image" src="/_ipx/_/images/colour-treatment.jpg"></div>
+      <div class="services-section__info-wrapper services-section__info-wrapper--summary services-section__info-wrapper--align-center">
         <div class="eyebrow-text large">Subtitle for Colour Treatment</div>
         <h2 class="hero-text mb-20 title axis-horizontal">
           <!--v-if--><span class="text-block-0 normal">Colour Treatment</span>
         </h2>
-        <div class="price-duration">
-          <div class="flex-row"><span class="iconify i-mdi:clock-time-four-outline decorator" aria-hidden="true"></span><span>60 mins</span></div>
-          <div class="flex-row"><span class="iconify i-mdi:currency-gbp decorator" aria-hidden="true"></span><span>£50</span></div>
+        <div class="services-section__price-duration">
+          <div class="flex-row"><span class="iconify i-mdi:clock-time-four-outline services-section__decorator" aria-hidden="true"></span><span>60 mins</span></div>
+          <div class="flex-row"><span class="iconify i-mdi:currency-gbp services-section__decorator" aria-hidden="true"></span><span>£50</span></div>
         </div>
         <!--v-if-->
         <!--v-if-->