srcdev-nuxt-components 9.1.58 → 9.1.59

package/.claude/settings.json

@@ -54,7 +54,10 @@
       "Bash(SRCDEV_STANDALONE=true npx vitest run app/components/01.atoms/toast)",
       "Bash(SRCDEV_STANDALONE=true npx vitest run app/components/02.molecules/alert-content)",
       "Bash(SRCDEV_STANDALONE=true npx vitest run app/components/01.atoms/prompt)",
-      "Bash(git fetch *)"
+      "Bash(git fetch *)",
+      "Bash(python3 -m json.tool /Users/simoncornforth/websites/nuxt-components/.vscode/srcdev-component-services-section.code-snippets)",
+      "Bash(node -e \"JSON.parse\\(require\\('fs'\\).readFileSync\\('/Users/simoncornforth/websites/nuxt-components/.vscode/srcdev-component-services-section.code-snippets','utf8'\\)\\); console.log\\('valid json'\\)\")",
+      "WebFetch(domain:luxury-locs-by-natasha-nuxt3.vercel.app)"
     ],
     "additionalDirectories": [
       "/Users/simoncornforth/websites/instepreflexology",

package/.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.

package/.claude/skills/components/tab-navigation.md

@@ -220,3 +220,52 @@ the component source folder for the full token reference.
   stacking-context constraint.
 - `--tab-nav-panel-bg` should match `--page-bg` for a seamless panel appearance in the collapsed
   state.
+
+## Known issue: SSR/hydration layout shift when the nav needs to collapse (2026-07-07)
+
+**Symptom:** on first page load (hard reload/direct navigation), the header briefly renders taller
+than its settled state, then shrinks — visibly shifting all content below it up. Most noticeable on
+short pages (little content below the fold makes the jump occupy a large fraction of the viewport),
+but the same underlying reflow happens on every page where the nav actually needs to collapse at
+the viewport's width; it's just less visible on long pages or when the timing happens to resolve
+before first paint.
+
+**Root cause:** `useNavCollapse`'s `isLoaded` ref (and therefore `isCollapsed`) can only be
+determined client-side — the server has no way to measure real DOM/viewport widths. So:
+
+```vue
+<ul v-if="!isCollapsed || !isLoaded" ...>
+```
+
+SSR and the very first client paint always render the **full, uncollapsed** `<ul>` (since
+`!isLoaded` is true pre-mount), regardless of whether it will actually fit. Once mounted,
+`checkOverflow()` runs (in `onMounted`, after `nextTick()`), and if the nav overflows, sets
+`isCollapsed = true` — swapping the full list out for the shorter collapsed/burger variant. That
+swap is what shrinks the header and shifts everything below it.
+
+Confirmed via `PerformanceObserver({type: "layout-shift"})` plus DOM `MutationObserver` tracing in a
+consuming app (`luxury-locs-by-natasha-nuxt3`): the class mutation on `.tab-navigation` (adding
+`is-loaded is-animated`) lines up exactly with `.main-content`'s bounding-rect top moving by the
+header's full height delta, at a variable point (roughly 100ms–800ms after first paint depending on
+hydration timing) after first paint.
+
+**Candidate fixes (not yet implemented — pick up later):**
+
+1. **CSS-only collapse instead of JS-measured overflow.** Use a `@container` or `@media` breakpoint
+   to switch between the full nav and the burger button, so the correct variant renders on the very
+   first paint (both server and client agree, no measurement round-trip needed). Loses the
+   "collapse exactly when it overflows, regardless of item count" precision of the current
+   JS-measured approach, gains zero-reflow correctness. Probably the most robust fix if a
+   reasonably conservative breakpoint can be chosen.
+2. **Reserve height instead of eliminating the swap.** Give the header a `min-height` matching the
+   taller (uncollapsed) state so the swap doesn't change the header's box size — trades a visible
+   "jump" for a slightly awkward gap during the pre-collapse window, but never moves content below
+   it. Cheap, but doesn't fix the actual root cause, just its visible symptom.
+3. **Suppress the flash rather than the shift**, e.g. hide the header's nav content entirely
+   (`visibility: hidden` or `opacity: 0`) until `isLoaded` is true, then fade in — avoids showing
+   the "wrong" state at all, but delays when the nav becomes visible/interactive, and would need
+   care to avoid its own CLS/accessibility issues (e.g. focus order, screen readers encountering
+   hidden nav).
+4. Investigate whether a plausible default guess for `isCollapsed` could be derived from something
+   SSR does have access to (e.g. a `Sec-CH-Viewport-Width` client hint header, if the deployment
+   target reliably sends one) — likely not worth the complexity/fragility versus option 1.

package/.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

package/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-->

package/app/components/03.organisms/services/services-section/CONSUMER-STYLING.md

@@ -0,0 +1,149 @@
+# ServicesSection — Consumer Styling Guide
+
+## Public token API
+
+All `--services-section-*` tokens are the stable override surface. Set them globally in a
+theme file, scoped to a page wrapper, or per-instance via `styleClassPassthrough`.
+
+### Layout & sizing
+
+| Token | Default | Controls |
+|---|---|---|
+| `--services-section-grid-gap` | `2rem` | Gap between image and content columns below the 768px breakpoint |
+| `--services-section-grid-gap-desktop` | `3rem` | Gap between columns at 768px and above |
+| `--services-section-image-border-radius` | `0.8rem` | Corner rounding on the service image |
+| `--services-section-price-duration-gap` | `3rem` | Gap between the duration and price rows |
+| `--services-section-price-duration-item-gap` | `0.8rem` | Gap between icon and text within a single row |
+| `--services-section-price-duration-margin-block-end` | `2rem` | Space below the price/duration row |
+| `--services-section-decorator-size` | `2rem` | Width/height of the duration and price icons |
+| `--services-section-faq-margin-block-end` | `2.4rem` | Space below the FAQ accordion |
+| `--services-section-faq-answer-line-height` | `1.6` | Line height of FAQ answer text |
+
+### Colours
+
+| Token | Default | Controls |
+|---|---|---|
+| `--services-section-faq-divider-color` | `currentColor` | Border colour between FAQ accordion items |
+| `--services-section-faq-divider-opacity` | `0.7` | Opacity of each FAQ accordion item's border |
+
+---
+
+## Text content — props, not CSS
+
+Section headings and the default CTA panel copy are **props**, not hardcoded strings, so
+there is nothing to override in CSS for these:
+
+| Prop | Default |
+|---|---|
+| `processHeading` | `"The Process"` |
+| `idealForHeading` | `"Ideal For"` |
+| `maintenanceHeading` | `"Aftercare & Maintenance"` |
+| `faqsHeading` | `"Frequently Asked Questions"` |
+| `ctaHeading` | `"Ready to book your appointment?"` |
+| `ctaBody` | `"Get in touch to book your appointment."` |
+
+```vue
+<ServicesSection
+  :service-data="service"
+  cta-heading="Ready to book your locs consultation?"
+  cta-body="Mobile service across Bath — I come to you."
+/>
+```
+
+If the CTA needs a different component entirely (not just different text), replace it with
+the `cta-panel` scoped slot instead of styling around the default `GlassPanel`:
+
+```vue
+<ServicesSection :service-data="service">
+  <template #cta-panel="{ serviceData, ctaHeading, ctaBody }">
+    <MyCustomPanel :heading="ctaHeading" :body="ctaBody">
+      <template #cta><button>Enquire Now</button></template>
+    </MyCustomPanel>
+  </template>
+</ServicesSection>
+```
+
+---
+
+## Global theming — recommended approach
+
+Create `assets/styles/setup/07.components/services-section.css` in the consuming app and
+set tokens on `:root`. This applies to every `ServicesSection` across the site.
+
+```css
+/* assets/styles/setup/07.components/services-section.css */
+:root {
+  --services-section-grid-gap: 2.4rem;
+  --services-section-grid-gap-desktop: 4rem;
+  --services-section-image-border-radius: 1.2rem;
+  --services-section-faq-divider-color: var(--brand-border);
+}
+```
+
+---
+
+## Page-scoped overrides
+
+Override tokens for a specific section by scoping them under the page or layout wrapper.
+No `:deep()` is required (component styles are unscoped).
+
+```css
+/* In the consuming page's unscoped <style> block */
+.our-services-page {
+  .services-section {
+    --services-section-decorator-size: 2.4rem;
+    --services-section-faq-answer-line-height: 1.8;
+  }
+}
+```
+
+---
+
+## Per-instance overrides via styleClassPassthrough
+
+Use sparingly — prefer global or page-scoped CSS. When a single instance needs a distinct
+visual style, pass a modifier class:
+
+```vue
+<ServicesSection :style-class-passthrough="['highlight-service']" :service-data="service" />
+```
+
+```css
+.services-section.highlight-service {
+  --services-section-image-border-radius: 2rem;
+  --services-section-faq-divider-color: var(--color-accent);
+}
+```
+
+---
+
+## FAQ accordion styling
+
+The `AccordianCore` inside this component receives `services-section__faq` via
+`styleClassPassthrough`. To target the accordion's own internals (summary, icon rotation,
+content padding), style through that class rather than reaching into `AccordianCore`
+directly — see `.services-section__faq` in the component's own `<style>` block for the
+selectors already scoped this way (`.accordian-item.expanding-panel`,
+`.expanding-panel-summary`, `.services-section__faq-answer`).
+
+```css
+.services-section {
+  .services-section__faq {
+    .expanding-panel-details .expanding-panel-summary {
+      padding-block: 1.6rem;
+    }
+  }
+}
+```
+
+---
+
+## Notes
+
+- `--services-section-grid-gap-desktop` only applies at `768px` and above — the breakpoint
+  itself is not a token, since changing it would affect the grid's `minmax()` column sizing
+  too, not just spacing.
+- The CTA panel is rendered inside a default `<slot name="cta-panel">` — passing that slot
+  bypasses `GlassPanel` and all of its tokens (`--glass-panel-*`) entirely, along with the
+  `ctaHeading`/`ctaBody` props, which are handed to the slot for reuse rather than applied
+  automatically.

package/app/components/03.organisms/services/services-section/ServicesSection.vue

@@ -1,10 +1,16 @@
 <template>
   <component :is="tag" class="services-section" :class="[elementClasses]" :aria-labelledby="ariaLabelledby">
     <div class="services-section__grid" :class="{ 'services-section__grid--reverse': reverse }">
-      <div class="image-wrapper">
-        <NuxtImg :src="serviceData.image" :alt="serviceData.title" :loading="imageLoading" :fetchpriority="imageFetchPriority" class="image" />
+      <div class="services-section__image-wrapper">
+        <NuxtImg
+          :src="serviceData.image"
+          :alt="serviceData.title"
+          :loading="imageLoading"
+          :fetchpriority="imageFetchPriority"
+          class="services-section__image"
+        />
       </div>
-      <div class="info-wrapper" :class="infoWrapperClasses">
+      <div class="services-section__info-wrapper" :class="infoWrapperClasses">
         <EyebrowText font-size="large" :text-content="serviceData.subtitle" />
         <HeroText
           :tag="headerTag"
@@ -18,13 +24,13 @@
           :style-class-passthrough="['mb-20']"
         />
 
-        <div class="price-duration">
+        <div class="services-section__price-duration">
           <div class="flex-row">
-            <Icon :name="durationIcon" class="decorator" />
+            <Icon :name="durationIcon" class="services-section__decorator" />
             <span>{{ serviceData.duration }}</span>
           </div>
           <div class="flex-row">
-            <Icon :name="priceIcon" class="decorator" />
+            <Icon :name="priceIcon" class="services-section__decorator" />
             <span>{{ serviceData.price }}</span>
           </div>
         </div>
@@ -50,7 +56,7 @@
           :tag="headerTag"
           axis="horizontal"
           font-size="subheading"
-          :text-content="[{ text: 'The Process ', styleClass: 'normal' }]"
+          :text-content="[{ text: processHeading, styleClass: 'normal' }]"
           :style-class-passthrough="['mb-20']"
         />
 
@@ -72,7 +78,7 @@
           :tag="headerTag"
           axis="horizontal"
           font-size="subheading"
-          :text-content="[{ text: 'Ideal For', styleClass: 'normal' }]"
+          :text-content="[{ text: idealForHeading, styleClass: 'normal' }]"
           :style-class-passthrough="['mb-20']"
         />
 
@@ -90,7 +96,7 @@
           :tag="headerTag"
           axis="horizontal"
           font-size="subheading"
-          :text-content="[{ text: 'Aftercare &amp; Maintenance', styleClass: 'normal' }]"
+          :text-content="[{ text: maintenanceHeading, styleClass: 'normal' }]"
           :style-class-passthrough="['mb-20']"
         />
 
@@ -101,7 +107,7 @@
           :tag="headerTag"
           axis="horizontal"
           font-size="subheading"
-          :text-content="[{ text: 'Frequently Asked Questions', styleClass: 'normal' }]"
+          :text-content="[{ text: faqsHeading, styleClass: 'normal' }]"
           :style-class-passthrough="['mb-20']"
         />
 
@@ -110,7 +116,7 @@
           id="faq"
           :item-count="serviceData.faqs.length"
           :name="`faq-${useId()}`"
-          :style-class-passthrough="['services-faq']"
+          :style-class-passthrough="['services-section__faq']"
         >
           <template v-for="(_, key) in serviceData.faqs" :key="`summary-${key}`" #[`accordian-${key}-summary`]>
             {{ serviceData.faqs[key]?.question }}
@@ -119,21 +125,29 @@
             <Icon name="mdi:chevron-down" />
           </template>
           <template v-for="(_, key) in serviceData.faqs" :key="`content-${key}`" #[`accordian-${key}-content`]>
-            <p>{{ serviceData.faqs[key]?.answer }}</p>
+            <p class="services-section__faq-answer">{{ serviceData.faqs[key]?.answer }}</p>
           </template>
         </AccordianCore>
 
-        <GlassPanel v-if="!isSummary" :style-class-passthrough="['p-24']">
-          <HeroText
-            tag="h2"
-            axis="horizontal"
-            font-size="subheading"
-            :text-content="[{ text: 'Ready to book your highlights appointment?', styleClass: 'normal' }]"
-            :style-class-passthrough="['mbs-0', 'mbe-20']"
-          />
-          <p class="page-body-normal">Mobile service across Bath — I come to you.</p>
-          <slot name="cta" :service-data="serviceData"></slot>
-        </GlassPanel>
+        <slot
+          v-if="!isSummary"
+          name="cta-panel"
+          :service-data="serviceData"
+          :cta-heading="ctaHeading"
+          :cta-body="ctaBody"
+        >
+          <GlassPanel :style-class-passthrough="['services-section__glass-panel', 'p-24']">
+            <HeroText
+              tag="h2"
+              axis="horizontal"
+              font-size="subheading"
+              :text-content="[{ text: ctaHeading, styleClass: 'normal' }]"
+              :style-class-passthrough="['mbs-0', 'mbe-20']"
+            />
+            <p class="page-body-normal">{{ ctaBody }}</p>
+            <slot name="cta" :service-data="serviceData"></slot>
+          </GlassPanel>
+        </slot>
       </div>
     </div>
   </component>
@@ -152,6 +166,12 @@ interface Props {
   reverse?: boolean;
   durationIcon?: string;
   priceIcon?: string;
+  processHeading?: string;
+  idealForHeading?: string;
+  maintenanceHeading?: string;
+  faqsHeading?: string;
+  ctaHeading?: string;
+  ctaBody?: string;
   styleClassPassthrough?: string | string[];
 }
 const props = withDefaults(defineProps<Props>(), {
@@ -162,6 +182,12 @@ const props = withDefaults(defineProps<Props>(), {
   summaryAlignment: "center",
   durationIcon: "mdi:clock-time-four-outline",
   priceIcon: "mdi:currency-gbp",
+  processHeading: "The Process",
+  idealForHeading: "Ideal For",
+  maintenanceHeading: "Aftercare & Maintenance",
+  faqsHeading: "Frequently Asked Questions",
+  ctaHeading: "Ready to book your appointment?",
+  ctaBody: "Get in touch to book your appointment.",
   styleClassPassthrough: () => [],
 });
 
@@ -169,10 +195,10 @@ const { ariaLabelledby } = useAriaLabelledById(() => props.tag);
 
 const infoWrapperClasses = computed(() => {
   return {
-    "is-summary": props.isSummary,
-    "align-start": props.isSummary && props.summaryAlignment === "start",
-    "align-center": props.isSummary && props.summaryAlignment === "center",
-    "align-end": props.isSummary && props.summaryAlignment === "end",
+    "services-section__info-wrapper--summary": props.isSummary,
+    "services-section__info-wrapper--align-start": props.isSummary && props.summaryAlignment === "start",
+    "services-section__info-wrapper--align-center": props.isSummary && props.summaryAlignment === "center",
+    "services-section__info-wrapper--align-end": props.isSummary && props.summaryAlignment === "end",
   };
 });
 
@@ -199,44 +225,47 @@ watch(
     container-name: services-section;
 
     .services-section__grid {
+      --_grid-gap: var(--services-section-grid-gap, 2rem);
+
       display: grid;
       grid-template-columns: 1fr;
-      gap: 2rem;
+      gap: var(--_grid-gap);
 
       @media (width >= 768px) {
+        --_grid-gap: var(--services-section-grid-gap-desktop, 3rem);
+
         grid-template-columns: repeat(auto-fit, minmax(446px, 1fr));
-        gap: 3rem;
 
         &.services-section__grid--reverse {
-          .image-wrapper {
-            /* The order: 2 on .image-wrapper pushes it after the content div, since by default both children have order: 0 and source order wins — so the content div naturally sits first. */
+          .services-section__image-wrapper {
+            /* The order: 2 on .services-section__image-wrapper pushes it after the content div, since by default both children have order: 0 and source order wins — so the content div naturally sits first. */
             order: 2;
           }
         }
       }
 
-      .info-wrapper {
-        &.is-summary {
+      .services-section__info-wrapper {
+        &.services-section__info-wrapper--summary {
           display: grid;
 
-          &.align-start {
+          &.services-section__info-wrapper--align-start {
             align-content: start;
           }
-          &.align-center {
+          &.services-section__info-wrapper--align-center {
             align-content: center;
           }
-          &.align-end {
+          &.services-section__info-wrapper--align-end {
             align-content: end;
           }
         }
       }
 
-      .image-wrapper {
+      .services-section__image-wrapper {
         align-self: start;
-        border-radius: 8px;
+        border-radius: var(--services-section-image-border-radius, 0.8rem);
         overflow: hidden;
 
-        .image {
+        .services-section__image {
           display: block;
           width: 100%;
           height: 100%;
@@ -244,45 +273,38 @@ watch(
         }
       }
 
-      .price-duration {
+      .services-section__price-duration {
         display: flex;
         flex-direction: row;
-        gap: 3rem;
+        gap: var(--services-section-price-duration-gap, 3rem);
         align-items: center;
-        margin-block-end: 2rem;
+        margin-block-end: var(--services-section-price-duration-margin-block-end, 2rem);
 
         > div {
           display: flex;
           flex-direction: row;
-          gap: 0.8rem;
+          gap: var(--services-section-price-duration-item-gap, 0.8rem);
           align-items: center;
 
-          .decorator {
-            width: 2rem;
-            height: 2rem;
+          .services-section__decorator {
+            width: var(--services-section-decorator-size, 2rem);
+            height: var(--services-section-decorator-size, 2rem);
           }
         }
       }
 
-      .glass-card {
-        background: rgba(255, 255, 255, 0.6);
-        border-radius: 1rem;
-        backdrop-filter: blur(10px);
-      }
-
-      .services-faq {
-        margin-block-end: 24px;
+      .services-section__faq {
+        margin-block-end: var(--services-section-faq-margin-block-end, 2.4rem);
 
         &.display-accordian {
           max-width: none;
-          /* margin: 0; */
 
           .accordian-item.expanding-panel {
-            border-block-end: 1px solid currentColor;
-            opacity: 0.7;
+            border-block-end: 1px solid var(--services-section-faq-divider-color, currentColor);
+            opacity: var(--services-section-faq-divider-opacity, 0.7);
 
             &:first-child {
-              border-block-start: 1px solid currentColor;
+              border-block-start: 1px solid var(--services-section-faq-divider-color, currentColor);
             }
 
             .expanding-panel-details .expanding-panel-summary {
@@ -290,7 +312,9 @@ watch(
             }
 
             .expanding-panel-content .inner {
-              /* padding-block-end: 1.2rem; */
+              .services-section__faq-answer {
+                line-height: var(--services-section-faq-answer-line-height, 1.6);
+              }
             }
           }
         }

package/app/components/03.organisms/services/services-section/stories/ServicesSection.stories.ts

@@ -1,4 +1,9 @@
 import ServicesSection from "../ServicesSection.vue";
+import PageRow from "../../../../01.atoms/page-row/PageRow.vue";
+import TextBlock from "../../../../01.atoms/text-block/TextBlock.vue";
+import EyebrowText from "../../../../01.atoms/text-blocks/eyebrow-text/EyebrowText.vue";
+import HeroText from "../../../../01.atoms/text-blocks/hero-text/HeroText.vue";
+import InputButtonCore from "../../../../05.forms/input-button/InputButtonCore.vue";
 import type { Meta, StoryObj } from "@nuxtjs/storybook";
 import type { Service } from "~/types/types.services";
 
@@ -37,6 +42,30 @@ const meta: Meta<typeof ServicesSection> = {
       control: { type: "text" },
       description: "Icon name for the price row (any Iconify icon)",
     },
+    processHeading: {
+      control: { type: "text" },
+      description: "Heading text for the process section",
+    },
+    idealForHeading: {
+      control: { type: "text" },
+      description: "Heading text for the ideal-for section",
+    },
+    maintenanceHeading: {
+      control: { type: "text" },
+      description: "Heading text for the maintenance/aftercare section",
+    },
+    faqsHeading: {
+      control: { type: "text" },
+      description: "Heading text for the FAQs section",
+    },
+    ctaHeading: {
+      control: { type: "text" },
+      description: "Heading text inside the default CTA glass panel — ignored if the cta-panel slot is used",
+    },
+    ctaBody: {
+      control: { type: "text" },
+      description: "Body text inside the default CTA glass panel — ignored if the cta-panel slot is used",
+    },
     styleClassPassthrough: {
       control: "object",
       description: "Additional CSS classes applied to the root element",
@@ -56,7 +85,7 @@ const meta: Meta<typeof ServicesSection> = {
     docs: {
       description: {
         component:
-          "Renders a single service as a two-column section: image on one side, detailed content on the other. Two modes: summary (compact, with navigation slot) and full (complete content with CTA slot). Icon names for the price/duration row are configurable via `durationIcon` and `priceIcon` props.",
+          "Renders a single service as a two-column section: image on one side, detailed content on the other. Two modes: summary (compact, with navigation slot) and full (complete content with CTA slot). Icon names for the price/duration row are configurable via `durationIcon` and `priceIcon` props. Section headings and the CTA panel copy are configurable via props (`processHeading`, `idealForHeading`, `maintenanceHeading`, `faqsHeading`, `ctaHeading`, `ctaBody`); the whole CTA panel can be replaced with the `cta-panel` scoped slot.",
       },
     },
   },
@@ -68,65 +97,77 @@ type Story = StoryObj<typeof ServicesSection>;
 // ─── Fixtures ─────────────────────────────────────────────────────────────────
 
 const sampleService: Service = {
-  slug: "locs-installation",
-  category: "locs",
-  title: "Locs Installation",
-  subtitle: "Start your loc journey",
-  price: "£120",
-  duration: "3–4 hours",
-  image: "https://picsum.photos/seed/locs/800/600",
-  shortDescription: "Professional loc installation tailored to your hair type.",
+  slug: "colour",
+  category: "colour",
+  title: "Full Colour",
+  subtitle: "Rich, even colour from root to tip",
+  price: "From £75",
+  duration: "1.5–2.5 hours",
+  image: "https://picsum.photos/seed/colour/800/600",
+  shortDescription: "Full colour coverage in permanent, semi-permanent, or demi-permanent formulas.",
   longDescription:
-    "Our loc installation service covers everything from initial consultation through to the finished style. We work with all hair types and lengths to create beautiful, long-lasting locs.",
+    "Full colour service covering the entire head in a single, even shade — whether you're covering grey, going darker for the season, or refreshing your natural colour. We work with permanent, semi-permanent, and demi-permanent formulas depending on the level of commitment and colour result you're after.",
   heroHeading: [
-    { text: "Why choose ", styleClass: "normal" },
-    { text: "locs?", styleClass: "accent" },
+    { text: "Full colour vs. ", styleClass: "normal" },
+    { text: "highlights?", styleClass: "accent" },
   ],
   whatIsIt:
-    "Locs are a protective hairstyle formed by allowing hair to naturally matt and coil over time. They require minimal daily maintenance and are suitable for all hair types.",
+    "Full colour applies a single, even shade across the entire head, unlike highlights or balayage which lighten select sections. It's the go-to choice for full grey coverage, a complete colour change, or a rich, uniform base tone.",
   process: [
-    "Consultation to assess hair type and length",
-    "Scalp preparation and cleanse",
-    "Sectioning and palm-rolling",
-    "Drying and finishing",
+    "Consultation and shade selection",
+    "Strand test for new clients",
+    "Even application, root to tip",
+    "Processing time — 25–45 minutes depending on the formula",
+    "Rinse and conditioning treatment",
+    "Blow-dry and finish",
   ],
   idealFor: [
-    "Anyone looking for a low-maintenance protective style",
-    "Those with natural hair wanting a permanent style",
-    "People seeking a versatile long-term hairstyle",
+    "Full grey coverage",
+    "Going darker for the season",
+    "Fashion colours needing a uniform base",
+    "Root touch-ups between full appointments",
   ],
   maintenance:
-    "Re-twist every 4–6 weeks to maintain neat roots. Keep scalp moisturised and protect hair at night with a satin bonnet.",
+    "Root regrowth typically becomes visible after 4–6 weeks. Book a maintenance appointment around this point, and use a colour-safe shampoo and conditioner to protect vibrancy between visits.",
   faqs: [
     {
-      question: "How long do locs take to mature?",
-      answer: "Locs typically take 12–18 months to fully mature depending on hair type and texture.",
+      question: "What's the difference between permanent and semi-permanent colour?",
+      answer:
+        "Permanent colour lifts and deposits pigment for long-lasting, fade-resistant results. Semi-permanent colour sits on the hair's surface and gradually washes out over 4–8 weeks — a lower-commitment option if you're not sure about a change.",
     },
     {
-      question: "Can I wash my locs?",
-      answer: "Yes — regular washing is encouraged. We recommend a residue-free shampoo every 1–2 weeks.",
+      question: "Can full colour lighten my hair significantly?",
+      answer:
+        "Full colour can lighten by a few shades, but for a dramatic lift (going several shades lighter) a lightening service or highlights are usually a better fit — we'll advise at consultation.",
+    },
+    {
+      question: "How effective is full colour at covering grey?",
+      answer:
+        "Very effective — permanent colour gives the most complete, long-lasting grey coverage. We'll match a shade that blends naturally with your regrowth pattern.",
     },
   ],
-  seoTitle: "Locs Installation | Professional Hair Locs Service",
+  seoTitle: "Full Colour | Luxury Locs by Natasha",
   seoDescription:
-    "Professional locs installation service. Book a consultation today and start your loc journey with an experienced stylist.",
+    "Full colour hair service — permanent, semi-permanent, and demi-permanent options for grey coverage, seasonal colour changes, and fashion shades. Mobile service across Bath.",
 };
 
 // ─── Stories ──────────────────────────────────────────────────────────────────
 
 export const FullMode: Story = {
   name: "Full Mode",
+  args: {
+    ctaHeading: "Ready to book your appointment?",
+    ctaBody: "Mobile service across Bath — I come to you.",
+  },
   render: (args) => ({
-    components: { ServicesSection },
+    components: { ServicesSection, InputButtonCore },
     setup() {
       return { args, sampleService };
     },
     template: `
       <ServicesSection v-bind="args" :service-data="sampleService">
         <template #cta>
-          <button style="margin-top:1.6rem;padding:1.2rem 2.4rem;background:#333;color:#fff;border:none;border-radius:0.4rem;cursor:pointer;">
-            Book Now
-          </button>
+          <InputButtonCore tag="a" href="/contact" button-text="Book now" variant="primary" />
         </template>
       </ServicesSection>
     `,
@@ -135,7 +176,7 @@ export const FullMode: Story = {
     docs: {
       description: {
         story:
-          "Full mode (isSummary: false) — renders all content including process, ideal-for, FAQs, and the CTA GlassPanel.",
+          "Full mode (isSummary: false) — renders all content including a six-step process, ideal-for list, FAQs, and the CTA panel, matching the real service detail page content shape.",
       },
     },
   },
@@ -213,3 +254,116 @@ export const CustomIcons: Story = {
     },
   },
 };
+
+export const CustomTextAndCta: Story = {
+  name: "Custom Headings & CTA Copy",
+  args: {
+    processHeading: "How It Works",
+    idealForHeading: "Who Is This For",
+    maintenanceHeading: "Aftercare",
+    faqsHeading: "FAQs",
+    ctaHeading: "Ready to book your colour appointment?",
+    ctaBody: "Mobile service across Bath — I come to you.",
+  },
+  render: (args) => ({
+    components: { ServicesSection, InputButtonCore },
+    setup() {
+      return { args, sampleService };
+    },
+    template: `
+      <ServicesSection v-bind="args" :service-data="sampleService">
+        <template #cta>
+          <InputButtonCore tag="a" href="/contact" button-text="Book now" variant="primary" />
+        </template>
+      </ServicesSection>
+    `,
+  }),
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "Section headings and CTA panel copy overridden via props — useful for wording specific to the consuming business rather than the library defaults. Note the heading names the actual service, avoiding the old bug where every service page said 'highlights appointment' regardless of which service it was.",
+      },
+    },
+  },
+};
+
+export const RealisticPageContext: Story = {
+  name: "Realistic Page Context",
+  args: {
+    ctaHeading: "Ready to book your appointment?",
+    ctaBody: "Mobile service across Bath — I come to you.",
+  },
+  render: (args) => ({
+    components: { ServicesSection, PageRow, TextBlock, EyebrowText, HeroText, InputButtonCore },
+    setup() {
+      return { args, sampleService };
+    },
+    template: `
+      <div>
+        <PageRow tag="div" variant="content" :style-class-passthrough="['mbe-20']">
+          <TextBlock tag="div" :style-class-passthrough="['page-lead']">
+            <EyebrowText font-size="large" text-content="Services" />
+            <HeroText
+              tag="h1"
+              axis="vertical"
+              font-size="display"
+              :text-content="[
+                { text: 'Expert colour & ', styleClass: 'normal' },
+                { text: 'styling', styleClass: 'accent' },
+                { text: 'at your door', styleClass: 'normal' },
+              ]"
+              :style-class-passthrough="['mb-20']"
+            />
+          </TextBlock>
+        </PageRow>
+
+        <PageRow tag="div" variant="content" :style-class-passthrough="['mbe-20']">
+          <ServicesSection v-bind="args" :service-data="sampleService">
+            <template #cta>
+              <InputButtonCore tag="a" href="/contact" button-text="Book now" variant="primary" />
+            </template>
+          </ServicesSection>
+        </PageRow>
+      </div>
+    `,
+  }),
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "Matches the real service detail page (app/pages/services/[slug].vue in the luxury-locs-by-natasha-nuxt3 project): a page hero (EyebrowText + HeroText inside PageRow/TextBlock) followed by ServicesSection with a real 'Book now' CTA button. Use this story to sanity-check layout and spacing changes against the actual consuming page rather than the bare component.",
+      },
+    },
+  },
+};
+
+export const CustomCtaPanel: Story = {
+  name: "Custom CTA Panel (slot override)",
+  render: (args) => ({
+    components: { ServicesSection },
+    setup() {
+      return { args, sampleService };
+    },
+    template: `
+      <ServicesSection v-bind="args" :service-data="sampleService">
+        <template #cta-panel="{ serviceData }">
+          <div style="padding:2.4rem;border:2px dashed #333;border-radius:1rem;text-align:center;">
+            <p style="margin:0 0 1.2rem;">Fully custom CTA block for {{ serviceData.title }} — not a GlassPanel at all.</p>
+            <button style="padding:1.2rem 2.4rem;background:#333;color:#fff;border:none;border-radius:0.4rem;cursor:pointer;">
+              Enquire Now
+            </button>
+          </div>
+        </template>
+      </ServicesSection>
+    `,
+  }),
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "The cta-panel scoped slot replaces the default GlassPanel entirely — use when a consumer needs a different component or layout for the closing call-to-action, not just different copy.",
+      },
+    },
+  },
+};

package/app/components/03.organisms/services/services-section/tests/ServicesSection.spec.ts

@@ -211,4 +211,75 @@ describe("ServicesSection", () => {
     expect(wrapper.classes()).not.toContain("original");
     expect(wrapper.classes()).toContain("updated");
   });
+
+  // ─── Headings ───────────────────────────────────────────────────────────
+
+  it("renders default section headings", async () => {
+    const wrapper = await mountSuspended(ServicesSection, {
+      props: { serviceData: mockService },
+    });
+    expect(wrapper.text()).toContain("The Process");
+    expect(wrapper.text()).toContain("Ideal For");
+    expect(wrapper.text()).toContain("Aftercare & Maintenance");
+    expect(wrapper.text()).toContain("Frequently Asked Questions");
+  });
+
+  it("overrides section headings via props", async () => {
+    const wrapper = await mountSuspended(ServicesSection, {
+      props: {
+        serviceData: mockService,
+        processHeading: "How It Works",
+        idealForHeading: "Who Is This For",
+        maintenanceHeading: "Aftercare",
+        faqsHeading: "FAQs",
+      },
+    });
+    expect(wrapper.text()).toContain("How It Works");
+    expect(wrapper.text()).toContain("Who Is This For");
+    expect(wrapper.text()).toContain("Aftercare");
+    expect(wrapper.text()).toContain("FAQs");
+  });
+
+  // ─── CTA panel ──────────────────────────────────────────────────────────
+
+  it("renders default CTA heading and body", async () => {
+    const wrapper = await mountSuspended(ServicesSection, {
+      props: { serviceData: mockService },
+    });
+    expect(wrapper.text()).toContain("Ready to book your appointment?");
+    expect(wrapper.text()).toContain("Get in touch to book your appointment.");
+  });
+
+  it("overrides CTA heading and body via props", async () => {
+    const wrapper = await mountSuspended(ServicesSection, {
+      props: {
+        serviceData: mockService,
+        ctaHeading: "Book your locs consultation",
+        ctaBody: "Mobile service across Bath — I come to you.",
+      },
+    });
+    expect(wrapper.text()).toContain("Book your locs consultation");
+    expect(wrapper.text()).toContain("Mobile service across Bath — I come to you.");
+  });
+
+  it("replaces the whole CTA panel via the cta-panel slot", async () => {
+    const wrapper = await mountSuspended(ServicesSection, {
+      props: { serviceData: mockService },
+      slots: {
+        "cta-panel": '<div class="test-custom-cta">Custom CTA</div>',
+      },
+    });
+    expect(wrapper.find(".test-custom-cta").exists()).toBe(true);
+    expect(wrapper.text()).not.toContain("Ready to book your appointment?");
+  });
+
+  it("does not render cta-panel slot in summary mode", async () => {
+    const wrapper = await mountSuspended(ServicesSection, {
+      props: { serviceData: mockService, isSummary: true },
+      slots: {
+        "cta-panel": '<div class="test-custom-cta">Custom CTA</div>',
+      },
+    });
+    expect(wrapper.find(".test-custom-cta").exists()).toBe(false);
+  });
 });

package/app/components/03.organisms/services/services-section/tests/__snapshots__/ServicesSection.spec.ts.snap

@@ -3,15 +3,15 @@
 exports[`ServicesSection > renders correct HTML structure 1`] = `
 "<div class="services-section">
   <div class="services-section__grid">
-    <div class="image-wrapper"><img data-nuxt-img="" srcset="/_ipx/_/images/test.jpg 1x, /_ipx/_/images/test.jpg 2x" alt="Test Service" loading="eager" fetchpriority="high" class="image" src="/_ipx/_/images/test.jpg"></div>
-    <div class="info-wrapper">
+    <div class="services-section__image-wrapper"><img data-nuxt-img="" srcset="/_ipx/_/images/test.jpg 1x, /_ipx/_/images/test.jpg 2x" alt="Test Service" loading="eager" fetchpriority="high" class="services-section__image" src="/_ipx/_/images/test.jpg"></div>
+    <div class="services-section__info-wrapper">
       <div class="eyebrow-text large">A subtitle</div>
       <h2 class="hero-text mb-20 title axis-horizontal">
         <!--v-if--><span class="text-block-0 normal">Test Service</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>
       <p class="page-body-normal">Long description text</p>
       <h2 class="hero-text mb-20 subheading axis-horizontal">
@@ -60,23 +60,23 @@ exports[`ServicesSection > renders correct HTML structure 1`] = `
       <h2 class="hero-text mb-20 subheading axis-horizontal">
         <!--v-if--><span class="text-block-0 normal">Frequently Asked Questions</span>
       </h2>
-      <div class="display-accordian services-faq" id="faq">
+      <div class="display-accordian services-section__faq" id="faq">
         <div class="expanding-panel accordian-item" icon-size="medium">
           <details class="expanding-panel-details" name="faq-v-0-0-0">
             <summary id="id-faq-v-0-0-0-trigger" class="expanding-panel-summary" aria-controls="id-faq-v-0-0-0-content" aria-expanded="false"><span class="label-wrapper">FAQ question?</span><span class="icon-wrapper"><span class="iconify i-mdi:chevron-down" aria-hidden="true"></span></span></summary>
           </details>
           <div id="id-faq-v-0-0-0-content" class="expanding-panel-content" aria-labelledby="id-faq-v-0-0-0-trigger" role="region">
             <div class="inner">
-              <p>FAQ answer.</p>
+              <p class="services-section__faq-answer">FAQ answer.</p>
             </div>
           </div>
         </div>
       </div>
-      <div class="glass-panel p-24">
+      <div class="glass-panel services-section__glass-panel p-24">
         <h2 class="hero-text mbs-0 mbe-20 subheading axis-horizontal">
-          <!--v-if--><span class="text-block-0 normal">Ready to book your highlights appointment?</span>
+          <!--v-if--><span class="text-block-0 normal">Ready to book your appointment?</span>
         </h2>
-        <p class="page-body-normal">Mobile service across Bath — I come to you.</p>
+        <p class="page-body-normal">Get in touch to book your appointment.</p>
       </div>
     </div>
   </div>

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "srcdev-nuxt-components",
   "type": "module",
-  "version": "9.1.58",
+  "version": "9.1.59",
   "main": "nuxt.config.ts",
   "types": "types.d.ts",
   "license": "MIT",