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() {