// Services — editorial chapters, layered information. // Borrows the Home page's calm rhythm, not Work's cinematic acts. const { useState, useEffect, useRef, useMemo } = React; const TWEAK_DEFAULTS = window.__TWEAKS__ || {}; // ============================================================ // HERO — declarative type, with a slow-zooming editorial photo strip // running underneath the headline. Adds life without competing. // ============================================================ function ServicesHero({ onInquire }) { // Slow horizontal pan of an image strip behind/below the headline const stripRef = useRef(null); const [scrollY, setScrollY] = useState(0); useEffect(() => { let raf; const on = () => { cancelAnimationFrame(raf); raf = requestAnimationFrame(() => setScrollY(window.scrollY)); }; window.addEventListener("scroll", on, { passive: true }); return () => { window.removeEventListener("scroll", on); cancelAnimationFrame(raf); }; }, []); const stripImgs = [ "assets/work-clear-6.jpg", "assets/work-satin-2.png", "assets/work-clear-3.jpg", "assets/work-satin-1.png", "assets/work-clear-1.jpg", ]; return (
M&T · Services {/* Brand color ribbon — quietly states the palette */}


We protect natural stone — marble, quartzite, granite, limestone — from the things that ruin it: stains, etches, scratches, heat. Once it's on, you can't see it. You also can't undo what it prevents.

{/* Editorial image strip — panning slowly with scroll */}
{stripImgs.map((src, i) => (
))}
{/* Soft edge masks */}
{/* Inset caption */}
Selected work · NY · NJ · PA
); } // ============================================================ // CHAPTER I — THE CATALOG // 4-row table of all services with status pills. Honest, complete. // ============================================================ // Big animated chapter number — counts up as it scrolls into view, then // holds. Used at the top of each section's intro. function ChapterNumber({ n, total = 6 }) { const [ref, shown] = useReveal({ threshold: 0.3 }); const [count, setCount] = useState(0); useEffect(() => { if (!shown) return; let raf, start; const target = n; const dur = 800; const step = (t) => { if (!start) start = t; const p = Math.min(1, (t - start) / dur); const e = 1 - Math.pow(1 - p, 3); setCount(Math.round(e * target)); if (p < 1) raf = requestAnimationFrame(step); }; raf = requestAnimationFrame(step); return () => cancelAnimationFrame(raf); }, [shown, n]); return (
{String(count).padStart(2, "0")}
); } // ============================================================ // CHAPTER BAND — colored interlude between sections // ============================================================ function ChapterBand({ kicker, line, accent = "var(--bronze)" }) { return (
); } // ============================================================ // CHAPTER I — THE CATALOG (editorial spread) // Two flagship product cards as large media-led panels, side-by-side. // "On the way" treated as a quieter annex underneath. // ============================================================ function Catalog({ onInquire, showFuture = true }) { const flagships = [ { no: "01", name: "Clear", product: "StoneGuard®", finish: "Polished · Glossy", tag: "For polished stone", desc: "A virtually invisible film for polished marble — stain-proof, etch-proof, heat-resistant. Marble looks identical, just stops getting ruined.", poster: "assets/work-clear-6.jpg", // Drop your install footage in here when ready — the