update image and about section

src/components/map/ContactMapEmbed.tsx

@@ -4,9 +4,9 @@
  * ContactMapEmbed
  * ---------------------------------------------------------------------------
  * Client boundary that lazy-loads the Leaflet map. `ssr: false` keeps Leaflet
- * out of the server bundle and off the critical render path; the skeleton fills
- * the host container's fixed height so there is zero layout shift (CLS) while
- * the map chunk loads.
+ * out of the server bundle and off the critical render path. The host container
+ * already owns the fixed height, so the loading state stays invisible before
+ * the interactive map is ready.
  */
 
 import dynamic from "next/dynamic";
@@ -14,7 +14,7 @@ import styles from "./OfficeMap.module.css";
 
 const OfficeMap = dynamic(() => import("./OfficeMap"), {
   ssr: false,
-  loading: () => <div className={styles.skeleton} role="presentation" aria-hidden="true" />,
+  loading: () => <div className={styles.mapMountReserve} role="presentation" aria-hidden="true" />,
 });
 
 export default function ContactMapEmbed() {

src/components/map/OfficeMap.module.css

@@ -315,30 +315,14 @@
   }
 }
 
-/* ---- Loading skeleton ---- */
-.skeleton {
+/* ---- Invisible lazy mount reserve ---- */
+.mapMountReserve {
   width: 100%;
   height: 100%;
   border-radius: inherit;
-  background:
-    linear-gradient(
-      100deg,
-      rgba(255, 255, 255, 0) 30%,
-      rgba(255, 255, 255, 0.05) 50%,
-      rgba(255, 255, 255, 0) 70%
-    ),
-    #101012;
-  background-size: 200% 100%;
-  animation: shimmer 1.4s ease-in-out infinite;
-}
-
-@keyframes shimmer {
-  from { background-position: 200% 0; }
-  to { background-position: -200% 0; }
 }
 
 @media (prefers-reduced-motion: reduce) {
-  .skeleton { animation: none; }
   .markerIcon,
   .markerIconHq { transition: none; }
   .pinPulse { animation: none; opacity: 0.45; }