Add Fractional CFO service page and update related content

- Introduced a new service page for Fractional CFO with SEO metadata, headings, and detailed descriptions of services offered.
- Updated the fractional CFO section in content.json to include comprehensive details about the service, including what's included, when to engage, and how the engagement works.
- Modified the fractional CFO HTML page to reflect the new structure and content, including a video introduction and enhanced layout.
- Added a new video for project engagements and updated the projects HTML page to include this video.
- Made minor adjustments to other HTML pages for consistency and layout improvements.
- Updated CSS styles to accommodate new design elements and remove deprecated styles.
- Added new documentation files for branding and home page animation script.
- Included new video assets for projects and home page animations.

Author: Hazleton, Lesley

…Bold Solutions Design System-handoff.zip …Bold Solutions Design System-handoff.zip.documentation/Make Bold Solutions Design System-handoff.zip renamed to .documentation/branding/Make Bold Solutions Design System-handoff.zip .documentation/Make Bold Solutions Design System-handoff.zip renamed to .documentation/branding/Make Bold Solutions Design System-handoff.zip

@@ -0,0 +1,121 @@
+# Home Page Animation — Script & Storyboard
+
+**Working title:** *Big Firm Expertise. Small Firm Heart.*
+**Runtime:** ~75 seconds
+**Format:** Motion-graphics / kinetic-typography brand summary for the home page hero
+**Voice:** Warm, confident, plain-spoken. One narrator (Lesley's voice or a close match).
+**Palette / type:** Pull from the site design system — brand navy + accent, logo animation on entry and exit.
+**Music:** Understated, building. Soft piano/strings under; lands on a confident final chord at the logo.
+
+---
+
+## SCENE 1 — The Hook (0:00–0:09)
+
+**On screen:** Black. A single cursor-blink of light, then bold kinetic type fades up, one line replacing the next.
+> *Big Firm Expertise.*
+> *Small Firm Heart.*
+
+**Motion:** Words scale in with weight; the two lines settle side by side, the accent color underlining "Bold."
+
+**VO:**
+"Every business deserves a great CFO. Not just the ones big enough to be on a typical firm's radar."
+
+---
+
+## SCENE 2 — The Problem (0:09–0:22)
+
+**On screen:** A business owner silhouette pulled between two arrows — "Run the business" / "Steer the business." A stack of receipts and a spreadsheet dissolve into a question mark.
+
+**Motion:** Numbers scroll fast, then freeze — highlighting that data alone doesn't decide.
+
+**VO:**
+"Growth outpaces leadership. Bookkeeping tells you what happened — it can't tell you what to do next. And most owners need senior financial judgment long before they can justify a six-figure hire."
+
+**On-screen text (lower third):** *Growth outpaces leadership capacity.*
+
+---
+
+## SCENE 3 — The Idea: Fractional (0:22–0:34)
+
+**On screen:** A full "CFO" title block splits into a clean fraction — a portion lights up in the accent color. Icon: a dial scaling up and down.
+
+**Motion:** The dial scales with the phrase "the scope you need."
+
+**VO:**
+"That's what fractional leadership is for. C-suite expertise, sized to you. Senior-level guidance and hands-on partnership — engaged at the scope and pace your organization needs. No six-figure salary. No junior hand-offs."
+
+**On-screen text:** *Fractional by design.*
+
+---
+
+## SCENE 4 — Four Ways to Engage (0:34–0:50)
+
+**On screen:** Four cards fan out and lock into a 2×2 grid, each with its icon animating in:
+
+| | |
+|---|---|
+| **Fractional CFO** — ongoing leadership | **Projects** — defined engagements |
+| **Interim CFO** — leadership continuity | **Start-up & Middle Market** — foundation to scale |
+
+**Motion:** Each card lifts as it's named, then the grid settles.
+
+**VO:**
+"Financial leadership, four ways to engage. Ongoing fractional CFO guidance. Defined projects with a clear end date. Interim leadership when a finance chief departs. And support that takes you from your first financial foundation all the way to scale."
+
+---
+
+## SCENE 5 — Why Us / The Proof (0:50–1:03)
+
+**On screen:** Proof stats count up rapidly, one after another:
+`30+ Years` · `CPA` · `PwC Alumni` · **`2023 CFO of the Year`** (accent highlight, small award ribbon)
+
+**Motion:** The award ribbon presses in with a subtle shine sweep.
+
+**VO:**
+"Behind the work: over thirty years of experience. A licensed CPA and PwC alumni. And Lesley Hazleton — the Wichita Business Journal's 2023 CFO of the Year. Big-firm rigor. Owner-level care. Outcomes you can see — not billable hours."
+
+**On-screen text:** *Direct senior-level access. Every time.*
+
+---
+
+## SCENE 6 — Who We Serve (1:03–1:10)
+
+**On screen:** Three icons slide in together — a storefront, a single person, a hand-heart (nonprofit).
+
+**VO:**
+"Built for the businesses others overlook — growing companies, sole proprietors, and the nonprofits doing important work."
+
+---
+
+## SCENE 7 — The Spark (1:10–1:17)
+
+**On screen:** A spark/zap icon ignites; a subtle circuit motif animates behind the words "Make Bold Spark."
+
+**VO:**
+"And when the problem needs a technical solution, we build it — with Make Bold Spark, our technical arm."
+
+**On-screen text:** *Make Bold Spark ↗*
+
+---
+
+## SCENE 8 — Close / CTA (1:17–1:15… → 1:25)
+
+**On screen:** Everything clears to brand navy. Logo animates in. Tagline underneath, then the CTA button pulses once.
+
+> **Make Bold Solutions**
+> *Bold decisions. Rooted in strategy.*
+> **[ Get in Touch ]**
+
+**VO:**
+"Make Bold Solutions. Bold decisions, rooted in strategy. The first step is a conversation — no obligation, no pressure."
+
+**Music:** Resolves on final chord as the logo locks.
+
+---
+
+## Production notes
+
+- **Length options:** Full cut ~75s for the hero; a 30s cut = Scenes 1, 3, 4, 8 for social/LinkedIn.
+- **Silent-autoplay version:** The on-screen text lines carry the message without VO — home-page heroes usually autoplay muted. Keep captions burned in.
+- **Consistency:** Matches the existing `fractional-cfo-intro.mp4` and `projects-intro.mp4` pattern — same logo bookends and type treatment.
+- **File target:** `docs/home-intro.mp4` (+ `.webm` and a poster frame), referenced from the home hero like the other intro videos.

.documentation/home-animation-script.md

@@ -1,4 +1,4 @@
-import { readFileSync, writeFileSync, mkdirSync, copyFileSync } from 'fs';
+import { readFileSync, writeFileSync, mkdirSync, copyFileSync, existsSync } from 'fs';
 import { join, dirname } from 'path';
 import { fileURLToPath } from 'url';
 import QRCode from 'qrcode';
@@ -28,9 +28,16 @@ copyFileSync(
 // Copy the brand intro video used as the looping hero on the fractional-cfo page
 copyFileSync(
   join(assetsDir, 'animation', 'Make Bold Intro.mp4'),
-  join(docsDir, content.fractionalCfo.video.src)
+  join(docsDir, content.servicePages.find(p => p.slug === 'fractional-cfo').video.src)
 );
 
+// Copy the project-engagements intro video used as the looping hero on the
+// projects page, once it has been exported and dropped into attached_assets.
+const projectsVideoSrc = join(assetsDir, 'Projects Animation.mp4');
+if (existsSync(projectsVideoSrc)) {
+  copyFileSync(projectsVideoSrc, join(docsDir, content.servicePages.find(p => p.slug === 'projects').video.src));
+}
+
 // Copy favicon
 const staticDir = join(__dirname, 'static');
 copyFileSync(join(staticDir, 'favicon.png'), join(docsDir, 'favicon.png'));
@@ -1062,20 +1069,11 @@ h1, h2, h3, h4, h5, h6 {
 .card-spark-link:hover { color: var(--primary); }
 .card-footer { text-align: center; font-size: 0.75rem; color: var(--muted-fg); opacity: 0.7; padding: 1.5rem 0; }
 
-/* Fractional CFO — video hero + restated content */
-.deck-hero { text-align: center; padding: 2.5rem 0 1.5rem; }
-.deck-hero .kicker { color: var(--primary); font-weight: 800; letter-spacing: 0.18em; text-transform: uppercase; font-size: 0.8rem; }
-.deck-hero h1 { font-size: 2.5rem; margin: 0.75rem 0; }
-.deck-hero p { color: var(--muted-fg); max-width: 40rem; margin: 0 auto; }
-.deck-intro { color: var(--muted-fg); max-width: 40rem; margin: 2.5rem auto 0; text-align: center; font-size: 1.0625rem; line-height: 1.7; }
+/* Service page video hero */
 .deck { max-width: 64rem; margin: 0 auto 4rem; padding: 0 1rem; }
 .intro-video-frame { position: relative; overflow: hidden; border-radius: 1.25rem; box-shadow: 0 24px 60px rgba(30,30,30,0.18); background: #1E1E1E; aspect-ratio: 16 / 9; }
 .intro-video-frame video { display: block; width: 100%; height: 100%; object-fit: cover; }
 .intro-video-caption { text-align: center; margin-top: 0.875rem; font-size: 0.8125rem; color: var(--muted-fg); font-style: italic; }
-.intro-cta { text-align: center; margin-top: 2rem; }
-.cfo-card-icon { width: 3.5rem; height: 3.5rem; margin-bottom: 1.5rem; }
-.cfo-card-kicker { color: var(--primary); font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; font-size: 0.75rem; display: block; margin-bottom: 0.625rem; }
-@media (max-width: 640px) { .deck-hero h1 { font-size: 1.9rem; } }
 `;
 
 // Write CSS once as a shared external file so browsers cache it across page
@@ -1613,6 +1611,15 @@ function buildServicePage(page) {
       <p class="text-xl text-white-80 max-w-2xl">${escapeHtml(page.subtitle)}</p>
     </div>
   </div>
+${page.video ? `
+  <div class="deck" style="padding-top:2.5rem">
+    <div class="intro-video-frame">
+      <video autoplay muted loop playsinline aria-label="${escapeAttr(page.video.label)}">
+        <source src="${escapeAttr(page.video.src)}" type="video/mp4">
+      </video>
+    </div>
+    <p class="intro-video-caption">${escapeHtml(page.video.label)}</p>
+  </div>` : ''}
 
   <!-- Intro -->
   <div class="container section">
@@ -1892,72 +1899,6 @@ function buildContact() {
   </section>` + footer() + closePage();
 }
 
-function buildFractionalCfo() {
-  const p = content.fractionalCfo;
-  const intro = p.slides[0];
-  const closing = p.slides[p.slides.length - 1];
-  const middleSlides = p.slides.slice(1, -1);
-
-  const cards = middleSlides.map(s => {
-    const bullets = s.bullets ? `<div class="features">${s.bullets.map(b => `<div class="feature">${escapeHtml(b)}</div>`).join('')}</div>` : '';
-    return `
-            <div class="service-card">
-              <div class="icon-box cfo-card-icon">${icon(s.icon, 40)}</div>
-              <span class="cfo-card-kicker">${escapeHtml(s.kicker)}</span>
-              <h3>${escapeHtml(s.title)}</h3>
-              <p>${escapeHtml(s.body)}</p>
-              ${bullets}
-            </div>`;
-  }).join('');
-
-  return htmlHead(
-    'Fractional CFO & Executive Leadership',
-    'Fractional CFO and executive leadership from Make Bold Solutions — data-driven financial strategy that bridges operations and the bottom line for growing businesses.',
-    'fractional-cfo.html'
-  ) + navigation('fractional-cfo.html') + `
-
-  <div class="deck-hero container">
-    <span class="kicker">${escapeHtml(p.kicker)}</span>
-    <h1>${escapeHtml(p.title)}</h1>
-    <p>${escapeHtml(p.subtitle)}</p>
-  </div>
-
-  <div class="deck">
-    <div class="intro-video-frame">
-      <video autoplay muted loop playsinline aria-label="${escapeAttr(p.video.label)}">
-        <source src="${escapeAttr(p.video.src)}" type="video/mp4">
-      </video>
-    </div>
-    <p class="intro-video-caption">${escapeHtml(p.video.label)}</p>
-    <div class="intro-cta">
-      <a href="contact.html" class="btn-primary">Start Your Climb to Value</a>
-    </div>
-    <p class="deck-intro">${escapeHtml(intro.body)}</p>
-  </div>
-
-  <section class="section-muted section">
-    <div class="container">
-      <div class="text-center max-w-2xl mx-auto mb-12">
-        <h2 class="text-3xl font-heading font-bold mb-4">${escapeHtml(p.sectionHeading)}</h2>
-        <p class="text-muted">${escapeHtml(p.sectionIntro)}</p>
-      </div>
-      <div class="grid grid-2-lg" style="gap:1.5rem">${cards}
-      </div>
-    </div>
-  </section>
-
-  <section class="section-primary section">
-    <div class="container text-center">
-      <h2 class="text-3xl font-heading font-bold mb-6">${escapeHtml(closing.title)}</h2>
-      <p class="text-white-80 max-w-2xl mx-auto mb-10 text-lg">${escapeHtml(closing.body)}</p>
-      <div class="flex flex-col sm-flex-row gap-4 justify-center">
-        <a href="contact.html" class="btn-white btn-large">Start Your Climb to Value</a>
-        <a href="services-cfo.html" class="btn-outline-white btn-large">Explore Our Services</a>
-      </div>
-    </div>
-  </section>` + footer() + closePage();
-}
-
 function buildNotFound() {
   const nf = content.notFound;
   return htmlHead('Page Not Found', nf.description, '404.html', { robots: 'noindex, follow' }) + navigation('') + `
@@ -2160,7 +2101,6 @@ const pages = [
   { file: 'about.html', builder: buildAbout },
   { file: 'cfo-of-the-year.html', builder: buildCfoOfTheYear },
   { file: 'contact.html', builder: buildContact },
-  { file: 'fractional-cfo.html', builder: buildFractionalCfo },
   { file: '404.html', builder: buildNotFound },
   ...cards.map(person => ({ file: `${person.slug}/card/index.html`, builder: () => buildCard(person) })),
 ];