Bright Side PlumbingHomepage Redesign + Mobile-First Figma Playbook

FIGMA-MODE. Do NOT run this in Bricks AI Studio.

Audrey export steps:
1) In Figma, finalize frame "01_section_hero" at 2560x1440 (desktop) + 768x1024 (mobile).
2) Export as PNG @2x OR as SVG (prefer SVG if vector-safe).
3) Name files: homepage-hero-desktop.png (or .svg) + homepage-hero-mobile.png
4) In Bricks builder, add a Section element > Image element, import the file.
5) Set Section padding 0. Image width 100 percent, height auto, object-fit cover.
6) Apply responsive variant: mobile image shows <768px, desktop shows >=768px.
7) Layer H1 and CTAs over the image using Bricks Block element with position absolute.

Copy to layer over hero image (exact strings):
- H1: "Kansas City's 5th-Generation Plumbing Family. Sewer, Drain, and Water Heater Experts."
- Subtitle: "Same-day service across Overland Park, Olathe, Lenexa, and the KC metro. Since 1902."
- Primary CTA (yellow button): "Call (913) 963-1029"
- Secondary CTA (blue outline button): "Book Online"
- Tertiary CTA (text link): "Chat with Daniel"
- Trust chips row: "4.9 Google (384+ reviews)", "BBB A+", "5 Generations", "Licensed"

This section stays hand-built in Figma and hand-imported. Do not regenerate with Bricks AI.

You are generating a Bricks Builder section for callbrightside.com, a 5th-generation Kansas City family plumbing company. Output native Bricks elements (JSON element tree).

DO NOT GENERATE: header, nav, logo bar, footer, page wrapper. Those are existing global Bricks components and will already be on the page.

BRAND TOKENS (required):
- Colors: Navy #1D1760, Blue #30C5FF, Yellow #FFEA00. Accents: Sky #93DEFB, Purple #443A96. No red, no orange unless explicitly specified.
- Font: Inter only (300/400/500/600/700/800). No serif, no display.
- Copy style: No em dashes (use commas/periods). No emojis inside body copy (OK in section H2 decoration). Plain-English, 6th grade reading level.
- Stephanie format where copy allows: Problem then Impact then Solution then Data then Need.

ACCESSIBILITY:
- Min 16px body, 44px tap targets, visible focus rings (#30C5FF 2px), semantic HTML (h2/h3/article), aria-hidden on decorative icons.
- Color contrast WCAG AA.

RESPONSIVE:
- Mobile-first (320-768), tablet (769-1023), desktop (1024+).
- No horizontal scroll at any viewport.

SECTION: Trust Bar (row, navy background, full-width)

PURPOSE: Destroy doubt in 2 seconds after the hero. Six proof chips in a horizontal row.

HEIGHT: 56px desktop, wraps to 2-row stack on mobile.
BACKGROUND: #1D1760 (navy), full-bleed, containing 1200px max-width centered row.

6 CHIPS (exact order, exact text):
1) star icon + "4.9 Google (384+ reviews)"
2) shield icon + "BBB A+"
3) family icon + "5 Generations"
4) clock icon + "Same-Day Service"
5) lock icon + "Licensed and Insured"
6) dollar icon + "Free Estimates"

CHIP STYLING:
- Background rgba(255,255,255,0.08)
- 12px padding vertical, 16px horizontal
- Border-radius 24px (pill)
- Icon 18px, #FFEA00 yellow
- Text 14px, #FFFFFF, Inter 500
- Gap between chips: 16px desktop, 8px mobile

LAYOUT:
- Mobile (<768): 2-row grid, 3 chips per row, center-aligned, 8px gap
- Desktop (>=768): 1-row, space-between, 6 chips horizontal

NO motion, no hover effects (this must read instantly).

OUTPUT: Section > Div (row container) > 6x Div (chip) elements with nested Icon + Text.

You are generating a Bricks Builder section for callbrightside.com, a 5th-generation Kansas City family plumbing company. Output native Bricks elements (JSON element tree).

DO NOT GENERATE: header, nav, logo bar, footer, page wrapper. Those are existing global Bricks components and will already be on the page.

BRAND TOKENS (required):
- Colors: Navy #1D1760, Blue #30C5FF, Yellow #FFEA00. Accents: Sky #93DEFB, Purple #443A96. No red, no orange unless explicitly specified.
- Font: Inter only (300/400/500/600/700/800). No serif, no display.
- Copy style: No em dashes (use commas/periods). No emojis inside body copy (OK in section H2 decoration). Plain-English, 6th grade reading level.
- Stephanie format where copy allows: Problem then Impact then Solution then Data then Need.

ACCESSIBILITY:
- Min 16px body, 44px tap targets, visible focus rings (#30C5FF 2px), semantic HTML (h2/h3/article), aria-hidden on decorative icons.
- Color contrast WCAG AA.

RESPONSIVE:
- Mobile-first (320-768), tablet (769-1023), desktop (1024+).
- No horizontal scroll at any viewport.

SECTION: Current Specials (3 coupon cards)

PURPOSE: Match Benjamin Franklin Plumbing coupon offer. Give maintenance-oriented visitors a reason to act now.

H2: "Current Specials"
H2 STYLING: Inter 700, 32px mobile / 40px desktop, color #1D1760, center-aligned, 24px bottom margin.

3 COUPON CARDS (exact copy, exact order):

CARD 1:
- Amount: "$25 OFF"
- Label: "Any Service"
- Subtext: "New customers. One per household. Mention code: KC25"
- Code: "KC25"
- CTA: "Claim Offer"

CARD 2:
- Amount: "$99"
- Label: "Drain Cleaning"
- Subtext: "Single drain. Unclog or it is free. Code: DRAIN99"
- Code: "DRAIN99"
- CTA: "Book Drain"

CARD 3:
- Amount: "FREE"
- Label: "Sewer Camera Inspection"
- Subtext: "Free with any sewer repair $500 or over. Code: CAMFREE"
- Code: "CAMFREE"
- CTA: "Get Inspection"

CARD STYLING:
- Shape: rounded ticket (16px radius, with two small half-circle cutouts on left and right sides at 60 percent height to suggest perforation)
- Background: #FFFFFF
- Border: 2px dashed #FFEA00
- Padding: 24px
- Amount font: Inter 800, 40px, #1D1760
- Label font: Inter 600, 20px, #1D1760
- Subtext: Inter 400, 14px, #5F6380
- Code block: monospace 13px, background #F7F4C1, padding 4px 8px, border-radius 4px
- CTA button: full-width, #30C5FF background, white text, 44px tall, Inter 600 16px

LAYOUT:
- Mobile: 1-col stack, 16px gap, 100 percent width
- Desktop: 3-col grid, 24px gap, equal-width 380px each

SCHEMA: Each card wrapped in schema.org/Offer with itemprop="description" on subtext and itemprop="priceCurrency" where applicable.

OUTPUT: Section > H2 + Div (grid) > 3x Article (coupon card) elements.

You are generating a Bricks Builder section for callbrightside.com, a 5th-generation Kansas City family plumbing company. Output native Bricks elements (JSON element tree).

DO NOT GENERATE: header, nav, logo bar, footer, page wrapper. Those are existing global Bricks components and will already be on the page.

BRAND TOKENS (required):
- Colors: Navy #1D1760, Blue #30C5FF, Yellow #FFEA00. Accents: Sky #93DEFB, Purple #443A96. No red, no orange unless explicitly specified.
- Font: Inter only (300/400/500/600/700/800). No serif, no display.
- Copy style: No em dashes (use commas/periods). No emojis inside body copy (OK in section H2 decoration). Plain-English, 6th grade reading level.
- Stephanie format where copy allows: Problem then Impact then Solution then Data then Need.

ACCESSIBILITY:
- Min 16px body, 44px tap targets, visible focus rings (#30C5FF 2px), semantic HTML (h2/h3/article), aria-hidden on decorative icons.
- Color contrast WCAG AA.

RESPONSIVE:
- Mobile-first (320-768), tablet (769-1023), desktop (1024+).
- No horizontal scroll at any viewport.

SECTION: Services We Specialize In (6-card grid)

PURPOSE: Position BSP as a sewer specialist, not a generalist. Sewer is revenue #1 and must lead the grid.

H2: "Plumbing Services We Specialize In"
H2 STYLING: Inter 700, 32px mobile / 40px desktop, color #1D1760, left-aligned with underline doodle SVG behind the word "Services" (doodle ID 221286 from sewer-camera page).

6 CARDS (exact order, exact copy):
1) Sewer Repair and Replacement - "Licensed experts for burst, cracked, or failing sewer lines. Trenchless options available."
2) Sewer Camera Inspection - "See the exact cause before you pay for a repair. Free with any sewer work $500 or over."
3) Drain Cleaning - "Clog-clearing that respects your pipes. Hydro jetting and mechanical snaking."
4) Water Heaters - "Tank and tankless install, repair, and replace. Same-day in most cases."
5) Leak Repair - "Pinhole, slab, or pressure leaks. We find it fast, we fix it right."
6) Sump Pumps - "Battery backup and primary pump install. Stay dry when the storms hit."

CARD ANATOMY:
- Icon (top on desktop, left on mobile): 64x64 desktop, 40x40 mobile. Color #30C5FF.
- H3 (service name): Inter 600, 20px mobile / 24px desktop, #1D1760.
- Description: Inter 400, 14px mobile / 16px desktop, #5F6380, 2 lines max.
- Link: "Learn More" with right-arrow, Inter 600 14px, #30C5FF, underline on hover.
- Card bg: #FFFFFF, border 1px #E3E8F0, radius 12px, padding 24px.
- Hover: translateY(-4px), shadow 0 8px 24px rgba(29,23,96,0.08), 200ms ease.

LAYOUT:
- Mobile: 1-col stack, 16px gap, icon-left horizontal layout.
- Desktop: 2-col grid, 24px gap, icon-top vertical layout.

SCHEMA: Wrap each card in schema.org/Service with hasServiceOfType. Parent container itemtype="https://schema.org/LocalBusiness".

Icon names to use (Bricks built-in icon library or Phosphor): pipe, video-camera, wrench, flame, water-drop, pump.

OUTPUT: Section > H2 + Div (grid) > 6x Article (service card) elements with schema attributes.

You are generating a Bricks Builder section for callbrightside.com, a 5th-generation Kansas City family plumbing company. Output native Bricks elements (JSON element tree).

DO NOT GENERATE: header, nav, logo bar, footer, page wrapper. Those are existing global Bricks components and will already be on the page.

BRAND TOKENS (required):
- Colors: Navy #1D1760, Blue #30C5FF, Yellow #FFEA00. Accents: Sky #93DEFB, Purple #443A96. No red, no orange unless explicitly specified.
- Font: Inter only (300/400/500/600/700/800). No serif, no display.
- Copy style: No em dashes (use commas/periods). No emojis inside body copy (OK in section H2 decoration). Plain-English, 6th grade reading level.
- Stephanie format where copy allows: Problem then Impact then Solution then Data then Need.

ACCESSIBILITY:
- Min 16px body, 44px tap targets, visible focus rings (#30C5FF 2px), semantic HTML (h2/h3/article), aria-hidden on decorative icons.
- Color contrast WCAG AA.

RESPONSIVE:
- Mobile-first (320-768), tablet (769-1023), desktop (1024+).
- No horizontal scroll at any viewport.

SECTION: Financing plus Plumbinati Membership (2-card horizontal, HYBRID with Figma asset)

PURPOSE: Close the financing-offer gap vs all 4 major KC competitors. Convert returning customers into Plumbinati members (highest LTV segment).

LAYOUT:
- Mobile: 2 cards stacked, 16px gap between, each 100 percent width.
- Desktop: 2-col side-by-side, 32px gap, equal height, 600px max-width each.

CARD 1 - FINANCING (Bricks AI generates this card):
- Icon: credit-card, 48px, #30C5FF
- H3: "Affordable plumbing starts at $0 down"
- Body: "Apply in 60 seconds. 0 percent APR options available for qualified customers. No surprises, no hidden fees."
- CTA button: "Apply for Financing" (blue #30C5FF fill, white text, 44px tall, Inter 600 16px, full-width on mobile, auto-width on desktop)
- Placeholder: 340x200 Div with dashed border and text "P2: Wisetack rate-quote widget mounts here"
- Background: #FFFFFF, border 1px #E3E8F0, radius 16px, padding 32px

CARD 2 - PLUMBINATI MEMBERSHIP (HYBRID: Audrey drops badge SVG):
- Figma asset: Audrey exports the Plumbinati badge artwork from Figma frame "05_section_financing > card_plumbinati > badge_artwork" and places it at the TOP of this card as a 120x120 image. DO NOT regenerate the badge with AI.
- H3 (below badge): "Join Plumbinati, KC's family plumbing membership"
- Body: "Priority service. 15 percent off all repairs. Annual plumbing checkup included. Peace of mind for your household."
- CTA button: "Join Plumbinati" (yellow #FFEA00 fill, navy text #1D1760, 44px tall, Inter 700 16px)
- Background: #1D1760 (navy), radius 16px, padding 32px, white text throughout.

CARD 2 PLACEHOLDER INSTRUCTION:
Wherever the badge goes, output a Div element with id="plumbinati-badge-slot" and class="audrey-drop-here" so she can easily replace it in Bricks Builder.

OUTPUT: Section > H2 "Affordable options for every home" + Div (grid) > 2x Article (financing card + plumbinati card).

FIGMA-MODE. Do NOT run this in Bricks AI Studio. MOAT section.

Audrey export steps:
1) Finalize frame "06_section_why_bsp" in Figma.
2) Export the hero photo (Kalen in uniform) as PNG @2x.
3) Export any decorative SVG elements (borders, frame artwork) separately.
4) In Bricks, create a Section with 2-col layout (stack on mobile):
   - Left col: Image element with the Kalen photo, object-fit cover, aspect-ratio 4/5.
   - Right col: Block element with H2, 3 paragraphs, CTA button.
5) Set vertical padding 80px desktop / 48px mobile.

Copy (exact strings, paste into Bricks Rich Text element on right col):

H2: "A Family Trade, Not a Franchise"

Paragraph 1: "Kalen Barker is a fourth-generation master plumber. His son is the fifth. For over 100 years, the Barker family has been fixing Kansas City pipes - grandfathers training fathers, fathers training sons."

Paragraph 2: "Every plumber on our truck was trained by someone who was trained by someone who learned this trade in Kansas City. That is not a marketing story. That is our kitchen-table story."

Paragraph 3: "When you call Bright Side, you are not hiring a corporate franchise. You are hiring a family that has been in this city longer than most of its neighborhoods."

CTA button: "Meet the Team" (outline blue button, links to /about)

P2 HOOK: Leave a 640x360 Div placeholder below the text labeled "P2: 60-sec family mini-doc embed".

Brand tokens apply to all text styling (Inter only, no em dashes, navy/blue/yellow palette).

This section is hand-designed in Figma and hand-imported to Bricks. Do not regenerate.

You are generating a Bricks Builder section for callbrightside.com, a 5th-generation Kansas City family plumbing company. Output native Bricks elements (JSON element tree).

DO NOT GENERATE: header, nav, logo bar, footer, page wrapper. Those are existing global Bricks components and will already be on the page.

BRAND TOKENS (required):
- Colors: Navy #1D1760, Blue #30C5FF, Yellow #FFEA00. Accents: Sky #93DEFB, Purple #443A96. No red, no orange unless explicitly specified.
- Font: Inter only (300/400/500/600/700/800). No serif, no display.
- Copy style: No em dashes (use commas/periods). No emojis inside body copy (OK in section H2 decoration). Plain-English, 6th grade reading level.
- Stephanie format where copy allows: Problem then Impact then Solution then Data then Need.

ACCESSIBILITY:
- Min 16px body, 44px tap targets, visible focus rings (#30C5FF 2px), semantic HTML (h2/h3/article), aria-hidden on decorative icons.
- Color contrast WCAG AA.

RESPONSIVE:
- Mobile-first (320-768), tablet (769-1023), desktop (1024+).
- No horizontal scroll at any viewport.

SECTION: How It Works (3 numbered steps, horizontal flow)

PURPOSE: Reduce friction. Homeowner anxiety peaks before calling. "It is only 3 steps" makes it feel safe.

BACKGROUND: Full-width blue wave background (SVG), #93DEFB (sky blue) base with white overlay, 80px vertical padding.

H2: "How It Works"
H2 STYLING: Inter 700, 32px mobile / 40px desktop, color #1D1760, center-aligned, 32px bottom margin.

3 STEPS (exact copy, exact order):

STEP 1:
- Number: 01
- Title: "Call or book online"
- Body: "Tell us what is going on. Real people answer, same-day call-back if the line is busy."

STEP 2:
- Number: 02
- Title: "We arrive same-day and inspect"
- Body: "Licensed plumber on-site in most cases. Free camera inspection with any sewer repair."

STEP 3:
- Number: 03
- Title: "We fix it right"
- Body: "Flat-rate pricing approved before we start. Warranty on every job. Clean up before we leave."

STEP STYLING:
- Number: Inter 800, 64px, color #FFEA00 (yellow), aligned top-left of tile
- Title: Inter 700, 20px mobile / 24px desktop, color #1D1760
- Body: Inter 400, 14px mobile / 16px desktop, color #1D1760, max 2 lines

LAYOUT:
- Mobile: 3 steps stacked, dashed connector line between steps, numbered circle 48x48 #1D1760 navy bg with #FFEA00 number on left, text right.
- Desktop: 3 steps horizontal, equal columns, connector arrow SVG between, numbered circles 72x72, vertical layout (number on top, text below).

OUTPUT: Section (wave bg) > H2 + Div (grid) > 3x Article (step tile) elements.

You are generating a Bricks Builder section for callbrightside.com, a 5th-generation Kansas City family plumbing company. Output native Bricks elements (JSON element tree).

DO NOT GENERATE: header, nav, logo bar, footer, page wrapper. Those are existing global Bricks components and will already be on the page.

BRAND TOKENS (required):
- Colors: Navy #1D1760, Blue #30C5FF, Yellow #FFEA00. Accents: Sky #93DEFB, Purple #443A96. No red, no orange unless explicitly specified.
- Font: Inter only (300/400/500/600/700/800). No serif, no display.
- Copy style: No em dashes (use commas/periods). No emojis inside body copy (OK in section H2 decoration). Plain-English, 6th grade reading level.
- Stephanie format where copy allows: Problem then Impact then Solution then Data then Need.

ACCESSIBILITY:
- Min 16px body, 44px tap targets, visible focus rings (#30C5FF 2px), semantic HTML (h2/h3/article), aria-hidden on decorative icons.
- Color contrast WCAG AA.

RESPONSIVE:
- Mobile-first (320-768), tablet (769-1023), desktop (1024+).
- No horizontal scroll at any viewport.

SECTION: Jobs We Did This Week (dynamic card grid, HYBRID - Figma composition + Bricks AI card template)

PURPOSE: Proof no KC competitor shows. Before/after sewer footage plus inspection clips. 10x moat feature.

PHASE 1 OUTPUT (placeholder):
Generate an empty gallery slot with a dashed-border Div, 100 percent width on mobile / 3-col grid on desktop. Inside each placeholder card, include:
- Dashed border 2px #A8B0C2
- Aspect ratio 4/3
- Center-aligned text: "P2: Live Job Gallery"
- Sub-text: "Pulls from HCP Photos API daily"

H2: "Jobs We Did This Week"
H2 STYLING: Inter 700, 32px mobile / 40px desktop, #1D1760, left-aligned.
Subtitle below H2: Inter 400, 16px, #5F6380: "Real jobs, real KC homes. Updated daily from our field crew."

LAYOUT:
- Mobile: 1-col stack, 16px gap, 6 placeholder cards (will show most recent 6 when Phase 2 wires live feed).
- Desktop: 3-col grid, 24px gap, 2 rows (6 cards total).

CARD TEMPLATE (for Phase 2 API integration - include as data-ready structure):
- data-job-id="{{job_id}}" attribute on card
- data-service-type="{{service_type}}" attribute
- Image slot: before photo (top half), after photo (bottom half), or single 15-sec video thumbnail
- Service type label: small pill top-right, #30C5FF bg, white text, 11px
- Caption bottom: "{{neighborhood}} - {{service_type}}"

FIGMA ASSET NOTE:
Audrey designs the gallery COMPOSITION (Figma frame "08_section_recent_jobs") - grid spacing, card shape, hover treatment. Bricks AI generates the actual card DOM. When her Figma design is finalized, regenerate this prompt to sync composition details.

OUTPUT: Section > H2 + Subtitle + Div (grid) > 6x Article (placeholder card) elements with data-attributes ready for Phase 2 API wire.

You are generating a Bricks Builder section for callbrightside.com, a 5th-generation Kansas City family plumbing company. Output native Bricks elements (JSON element tree).

DO NOT GENERATE: header, nav, logo bar, footer, page wrapper. Those are existing global Bricks components and will already be on the page.

BRAND TOKENS (required):
- Colors: Navy #1D1760, Blue #30C5FF, Yellow #FFEA00. Accents: Sky #93DEFB, Purple #443A96. No red, no orange unless explicitly specified.
- Font: Inter only (300/400/500/600/700/800). No serif, no display.
- Copy style: No em dashes (use commas/periods). No emojis inside body copy (OK in section H2 decoration). Plain-English, 6th grade reading level.
- Stephanie format where copy allows: Problem then Impact then Solution then Data then Need.

ACCESSIBILITY:
- Min 16px body, 44px tap targets, visible focus rings (#30C5FF 2px), semantic HTML (h2/h3/article), aria-hidden on decorative icons.
- Color contrast WCAG AA.

RESPONSIVE:
- Mobile-first (320-768), tablet (769-1023), desktop (1024+).
- No horizontal scroll at any viewport.

SECTION: Service Areas (chip row)

PURPOSE: Local SEO signal. Google and user both need geographic clarity.

H2: "Serving Every Kansas City Neighborhood"
H2 STYLING: Inter 700, 28px mobile / 36px desktop, #1D1760, left-aligned.

Subtitle below H2 (Inter 400, 16px, #5F6380): "Licensed and insured across the entire KC metro area."

14 CITY CHIPS (exact list, exact order):
Overland Park, Olathe, Lenexa, Shawnee, Leawood, Prairie Village, Mission, Kansas City MO, Lee Summit, Blue Springs, Independence, Gladstone, Liberty, Raytown

CHIP STYLING:
- Background: rgba(48,197,255,0.12) (light blue tint)
- Border: 1px solid #30C5FF
- Text: Inter 500, 14px, #1D1760
- Padding: 8px 16px
- Border-radius: 20px (pill)
- Gap between chips: 8px
- Hover: background rgba(48,197,255,0.25), border #1D1760, cursor pointer

LAYOUT:
- Mobile: flex-wrap grid, chips fill available width, start-aligned.
- Desktop: flex-wrap row, 3-4 chips per row typical, centered.

LINKING (Phase 1):
- Each chip is an anchor tag wrapping the chip div.
- href="/service-areas/{slug}" where slug is kebab-case city name (overland-park, lee-summit, etc.)
- rel="noopener" not needed (internal link).

SCHEMA: Wrap the chip container in itemscope itemtype="https://schema.org/Place" and each chip in Place > name property.

OUTPUT: Section > H2 + Subtitle + Div (flex-wrap) > 14x Anchor > Div (chip) elements.

You are generating a Bricks Builder section for callbrightside.com, a 5th-generation Kansas City family plumbing company. Output native Bricks elements (JSON element tree).

DO NOT GENERATE: header, nav, logo bar, footer, page wrapper. Those are existing global Bricks components and will already be on the page.

BRAND TOKENS (required):
- Colors: Navy #1D1760, Blue #30C5FF, Yellow #FFEA00. Accents: Sky #93DEFB, Purple #443A96. No red, no orange unless explicitly specified.
- Font: Inter only (300/400/500/600/700/800). No serif, no display.
- Copy style: No em dashes (use commas/periods). No emojis inside body copy (OK in section H2 decoration). Plain-English, 6th grade reading level.
- Stephanie format where copy allows: Problem then Impact then Solution then Data then Need.

ACCESSIBILITY:
- Min 16px body, 44px tap targets, visible focus rings (#30C5FF 2px), semantic HTML (h2/h3/article), aria-hidden on decorative icons.
- Color contrast WCAG AA.

RESPONSIVE:
- Mobile-first (320-768), tablet (769-1023), desktop (1024+).
- No horizontal scroll at any viewport.

SECTION: Live Reviews (dynamic review card grid, MOAT)

PURPOSE: Social proof. Live Google Reviews API filtered for KC + plumbing keywords. Every competitor uses static - ours is live.

DATA SOURCE (Phase 1 Phase 2 both):
Reviews are injected at render-time by `service_page_reviews_apply.py` filtered for keywords: plumber, plumbing, sewer, drain, water heater, Kansas City. Refreshes daily.

H2: "What Kansas City Homeowners Say"
H2 STYLING: Inter 700, 32px mobile / 40px desktop, #1D1760, center-aligned, 24px bottom margin.

Subtitle (Inter 400, 16px, #5F6380, center): "From real Google reviews, updated daily."

CARD TEMPLATE (output a Bricks element tree that repeats per review):
- data-review-id="{{review_id}}" attribute
- data-author="{{author_name}}" attribute
- Star row at top: 5 SVG stars, filled = #FFEA00, empty = #E3E8F0. Size 20px mobile / 24px desktop. Row 120px wide.
- Quote text: Inter 400, 15px, #1D1760, line-height 1.55, 4 lines max mobile / 5 lines max desktop (use -webkit-line-clamp).
- Author row: Inter 700, 14px, #1D1760 + "- {{location}}" in Inter 400, 14px, #5F6380.
- Card bg: #F7F4C1 (cream/ivory), padding 24px, border-radius 12px, shadow 0 4px 12px rgba(29,23,96,0.06).

LAYOUT:
- Mobile: 2 review cards stacked, 16px gap, 100 percent width each.
- Desktop: 2-col grid, 24px gap, fixed card height 422px.

PHASE 2:
Carousel with 5+ reviews and swipe gestures on mobile. Pull `next` and `prev` buttons in (hidden in Phase 1).

SCHEMA:
- Parent container: itemscope itemtype="https://schema.org/Organization"
- Each review card: itemprop="review" itemscope itemtype="https://schema.org/Review"
- Rating: itemprop="reviewRating" with ratingValue=5, bestRating=5.
- Author: itemprop="author" with name.

CTA below grid (center-aligned): "Read All 384+ Google Reviews" as text link, #30C5FF, Inter 600 14px, underline on hover.

OUTPUT: Section > H2 + Subtitle + Div (grid) > 2x Article (review card template) + Anchor (see-all link). Include data-placeholder="reviews_loop" on the grid Div so the ETL script knows where to inject live data.

You are generating a Bricks Builder section for callbrightside.com, a 5th-generation Kansas City family plumbing company. Output native Bricks elements (JSON element tree).

DO NOT GENERATE: header, nav, logo bar, footer, page wrapper. Those are existing global Bricks components and will already be on the page.

BRAND TOKENS (required):
- Colors: Navy #1D1760, Blue #30C5FF, Yellow #FFEA00. Accents: Sky #93DEFB, Purple #443A96. No red, no orange unless explicitly specified.
- Font: Inter only (300/400/500/600/700/800). No serif, no display.
- Copy style: No em dashes (use commas/periods). No emojis inside body copy (OK in section H2 decoration). Plain-English, 6th grade reading level.
- Stephanie format where copy allows: Problem then Impact then Solution then Data then Need.

ACCESSIBILITY:
- Min 16px body, 44px tap targets, visible focus rings (#30C5FF 2px), semantic HTML (h2/h3/article), aria-hidden on decorative icons.
- Color contrast WCAG AA.

RESPONSIVE:
- Mobile-first (320-768), tablet (769-1023), desktop (1024+).
- No horizontal scroll at any viewport.

SECTION: Our Guarantees (3-tile row)

PURPOSE: Remove the last risk objection before the final CTA.

H2: "Our Guarantees to You"
H2 STYLING: Inter 700, 32px mobile / 40px desktop, #1D1760, center-aligned, 32px bottom margin.

3 TILES (exact order, exact copy):

TILE 1:
- Icon: thumbs-up, 64px, #30C5FF
- Title: "100 Percent Satisfaction"
- Body: "If you are not happy with our work, we come back and make it right. Period."

TILE 2:
- Icon: hammer-wrench, 64px, #30C5FF
- Title: "Workmanship Warranty"
- Body: "Every repair is backed by a two-year workmanship warranty. Parts warranty per manufacturer."

TILE 3:
- Icon: receipt-dollar, 64px, #30C5FF
- Title: "Upfront Flat-Rate Pricing"
- Body: "No hourly billing surprises. You approve the exact price before we pick up a tool."

TILE STYLING:
- Background: #FFFFFF, border 1px #E3E8F0, radius 12px, padding 32px
- Center-aligned content
- Icon top, 24px bottom margin
- Title: Inter 700, 20px mobile / 24px desktop, #1D1760
- Body: Inter 400, 14px mobile / 16px desktop, #5F6380, max 3 lines

LAYOUT:
- Mobile: 3 tiles stacked, 16px gap, 100 percent width, 32px padding reduced to 24px.
- Desktop: 3-col grid, 24px gap, equal-width 380px.

SCHEMA: Each tile wrapped in schema.org/OfferCatalog > hasOfferCatalog > Offer with itemprop="description".

OUTPUT: Section (white bg) > H2 + Div (grid) > 3x Article (guarantee tile) elements.

You are generating a Bricks Builder section for callbrightside.com, a 5th-generation Kansas City family plumbing company. Output native Bricks elements (JSON element tree).

DO NOT GENERATE: header, nav, logo bar, footer, page wrapper. Those are existing global Bricks components and will already be on the page.

BRAND TOKENS (required):
- Colors: Navy #1D1760, Blue #30C5FF, Yellow #FFEA00. Accents: Sky #93DEFB, Purple #443A96. No red, no orange unless explicitly specified.
- Font: Inter only (300/400/500/600/700/800). No serif, no display.
- Copy style: No em dashes (use commas/periods). No emojis inside body copy (OK in section H2 decoration). Plain-English, 6th grade reading level.
- Stephanie format where copy allows: Problem then Impact then Solution then Data then Need.

ACCESSIBILITY:
- Min 16px body, 44px tap targets, visible focus rings (#30C5FF 2px), semantic HTML (h2/h3/article), aria-hidden on decorative icons.
- Color contrast WCAG AA.

RESPONSIVE:
- Mobile-first (320-768), tablet (769-1023), desktop (1024+).
- No horizontal scroll at any viewport.

SECTION: Frequently Asked Questions (accordion, 8 items, FAQPage schema)

PURPOSE: Objection crusher + rich-snippet SEO play. FAQPage JSON-LD = free search-result real estate.

H2: "Frequently Asked Questions"
H2 STYLING: Inter 700, 32px mobile / 40px desktop, #1D1760, left-aligned, 32px bottom margin.

8 FAQ ITEMS (exact order, exact question and answer):

Q1: "How much does sewer repair cost?"
A1: "Most trenchless sewer repairs at Bright Side run between $3,500 and $8,500 depending on depth, length, and access. Traditional excavation work runs $5,000 to $15,000. We give you a firm flat-rate quote after our free camera inspection, with zero pressure to move forward."

Q2: "Do you offer financing?"
A2: "Yes. We offer 0 percent APR financing for qualified customers through Wisetack, with approval in under 60 seconds. Applications are available on-site or online through our Financing page."

Q3: "Are you available on weekends and emergencies?"
A3: "Yes. We operate Monday through Saturday 8 AM to 9 PM Central Time. Emergency calls outside those hours are routed to our on-call team and we respond within 15 minutes with a callback."

Q4: "How fast can you come out?"
A4: "Same-day in most cases. We dispatch multiple crews across the KC metro and will book you for the earliest slot that fits your window, usually within 2 to 4 hours of your call during business hours."

Q5: "Do you service my neighborhood?"
A5: "We cover every neighborhood across the Kansas City metro including Overland Park, Olathe, Lenexa, Shawnee, Leawood, Prairie Village, Mission, Kansas City MO, Lee Summit, Blue Springs, Independence, Gladstone, Liberty, and Raytown."

Q6: "What is the warranty on your work?"
A6: "Every repair is backed by a two-year workmanship warranty. Parts carry the manufacturer warranty which ranges from 1 to 10 years depending on the component."

Q7: "How long does a sewer line replacement take?"
A7: "Most trenchless replacements are completed in 1 day. Traditional excavation jobs run 2 to 4 days depending on length and depth. We restore landscaping and concrete before we leave."

Q8: "Do you offer free estimates?"
A8: "Sewer estimates are always free, including the camera inspection. For non-sewer services there is an $89 dispatch fee that is waived when you approve the work."

ITEM STYLING:
- Accordion row: 48px min-height, 16px vertical padding, 1px bottom border #E3E8F0.
- Question: Inter 600, 16px mobile / 20px desktop, #1D1760.
- Answer: Inter 400, 14px mobile / 16px desktop, #5F6380, line-height 1.6.
- Caret: chevron-down icon, 20px, #30C5FF, rotates 180deg on open.
- Tap target: full row clickable, 44px min.

LAYOUT:
- Mobile: full-width, stack of 8 rows.
- Desktop: max-width 800px centered.

SCHEMA (CRITICAL):
Output a JSON-LD script block as the LAST element inside the section:
  <script type="application/ld+json">
  {
    "@context": "https://schema.org",
    "@type": "FAQPage",
    "mainEntity": [
      { "@type": "Question", "name": "...", "acceptedAnswer": { "@type": "Answer", "text": "..." } },
      ... (8 entries)
    ]
  }
  </script>

OUTPUT: Section > H2 + Div (accordion container) > 8x Details/Summary pattern + Script (JSON-LD).

FIGMA-MODE. Do NOT run this in Bricks AI Studio.

Audrey export steps:
1) Finalize Figma frame "13_section_final_cta" with all THREE step states of the multi-step form visible.
2) Export the background SVG (navy wave transitioning to footer) separately.
3) In Bricks, create a Section with background image = wave SVG, 96px top padding, 0 bottom padding (flows into footer).
4) Center a Bricks Block element, max-width 640px, white background, 16px radius, 32px padding, 0 8px 24px shadow.

Copy to paste into Bricks text elements inside the white card:

Headline (H2): "Ready to fix it right the first time?"
- Inter 800, 32px mobile / 44px desktop, #1D1760, center-aligned

Subtitle: "Call Kansas City's 5th-generation plumbing family."
- Inter 400, 16px mobile / 20px desktop, #5F6380, center-aligned, 16px bottom margin

CTA Row (3 buttons, horizontal on desktop, stacked on mobile, 12px gap):
- Button 1 (yellow, primary): "Call (913) 963-1029" with phone icon
- Button 2 (blue outline): "Book Online" with calendar icon
- Button 3 (text link): "Chat with Daniel" with message icon

Multi-step form (BELOW the CTA row):
Step 1 of 3 (visible by default): "What service do you need?"
  - 4 tile-buttons: Sewer, Drain, Water Heater, Other
  - Next button: "Continue to timing"

Step 2 of 3 (revealed after Step 1): "When do you need service?"
  - 4 tile-buttons: Emergency now, Today, This week, Flexible
  - Back + Next buttons

Step 3 of 3 (revealed after Step 2): "Your details"
  - Fields: Name, Phone (tel, 10-digit), Address, ZIP
  - Submit button: "Request My Quote"
  - Progress dots showing current step (3 dots, current step filled yellow)

Audrey designs ALL 3 step states in the Figma frame. Robert wires the step transitions in Bricks using the built-in Form element or a JS toggle.

BRAND TOKENS APPLY to all text and buttons.

This section is hand-designed in Figma and hand-imported to Bricks. Do not regenerate with Bricks AI.