feat: refine portfolio showcase, services and quality lab

Align the notebook browser with the physical LCD, refresh real project captures and navigation, simplify service content, and stabilize hero hydration.

app/components/cinematic/ScrollVelocityText.tsx

@@ -17,14 +17,11 @@ export default function ScrollVelocityText({
 }: ScrollVelocityTextProps) {
   const trackId = useId();
   const [isPaused, setIsPaused] = useState(false);
-  const [shouldReduceMotion, setShouldReduceMotion] = useState(
-    () =>
-      typeof window !== "undefined" &&
-      window.matchMedia("(prefers-reduced-motion: reduce)").matches,
-  );
+  const [shouldReduceMotion, setShouldReduceMotion] = useState(false);
 
   useEffect(() => {
     const media = window.matchMedia("(prefers-reduced-motion: reduce)");
+    setShouldReduceMotion(media.matches);
     const updatePreference = (event: MediaQueryListEvent) => {
       setShouldReduceMotion(event.matches);
     };