diff --git a/index.html b/index.html
index a4da1ca..b57559f 100644
--- a/index.html
+++ b/index.html
@@ -151,6 +151,8 @@ <h3>Contact</h3>
       });
 
       box.addEventListener("click", e => {
+        // Don't lock/unlock if a contact link was tapped
+        if (e.target.closest('.contact-icon')) return;
         e.stopPropagation();
         if (locked === box) {
           unlock();
@@ -175,6 +177,27 @@ <h3>Contact</h3>
       locked = null;
     }
 
+    // Touch: first tap expands icon, second tap navigates
+    const isTouchDevice = matchMedia('(hover: none) and (pointer: coarse)').matches;
+    if (isTouchDevice) {
+      document.querySelectorAll('.contact-icon').forEach(icon => {
+        icon.addEventListener('click', e => {
+          if (!icon.classList.contains('expanded')) {
+            e.preventDefault();
+            document.querySelectorAll('.contact-icon.expanded').forEach(i => i.classList.remove('expanded'));
+            icon.classList.add('expanded');
+          }
+        });
+      });
+
+      // Tap outside collapses expanded icon
+      document.addEventListener('click', e => {
+        if (!e.target.closest('.contact-icon')) {
+          document.querySelectorAll('.contact-icon.expanded').forEach(i => i.classList.remove('expanded'));
+        }
+      });
+    }
+
     // Disable right click
     document.addEventListener("contextmenu", e => e.preventDefault());
 
diff --git a/script.js b/script.js
index eba0457..4a5f688 100644
--- a/script.js
+++ b/script.js
@@ -25,6 +25,8 @@ boxes.forEach(box => {
 ----------------------------- */
 boxes.forEach(box => {
   box.addEventListener("click", e => {
+    // Don't lock/unlock if a contact link was tapped
+    if (e.target.closest('.contact-icon')) return;
     e.stopPropagation();
 
     // If clicking the same box → unlock
@@ -60,3 +62,25 @@ function unlock() {
   lockedBox = null;
 }
 
+/* -----------------------------
+   TOUCH: TAP-TO-EXPAND ICONS
+----------------------------- */
+const isTouchDevice = matchMedia('(hover: none) and (pointer: coarse)').matches;
+if (isTouchDevice) {
+  document.querySelectorAll('.contact-icon').forEach(icon => {
+    icon.addEventListener('click', e => {
+      if (!icon.classList.contains('expanded')) {
+        e.preventDefault();
+        document.querySelectorAll('.contact-icon.expanded').forEach(i => i.classList.remove('expanded'));
+        icon.classList.add('expanded');
+      }
+    });
+  });
+
+  document.addEventListener('click', e => {
+    if (!e.target.closest('.contact-icon')) {
+      document.querySelectorAll('.contact-icon.expanded').forEach(i => i.classList.remove('expanded'));
+    }
+  });
+}
+
diff --git a/style.css b/style.css
index 7b18851..475d485 100644
--- a/style.css
+++ b/style.css
@@ -574,13 +574,12 @@ body.loaded .right-bottom {
   opacity: 0;
   font-size: 1rem;
   font-weight: 600;
-  color: #fff;
+  color: var(--accent-red-deep);
   transition: all 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
   pointer-events: none;
   z-index: 1;
   font-family: 'Playfair Display', serif;
   letter-spacing: 0.5px;
-  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
 }
 
 /* Hover/Focus State */
@@ -614,6 +613,8 @@ body.loaded .right-bottom {
 .contact-icon:focus-visible span {
   opacity: 1;
   transform: translateX(4px);
+  color: #fff;
+  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
 }
 
 /* Premium Glow Effect */
@@ -833,13 +834,6 @@ body.loaded .right-bottom {
     gap: 12px;
   }
 
-  .box.active .contact-icon {
-    width: 150px;
-  }
-
-  .box.active .contact-icon span {
-    opacity: 1;
-  }
 }
 
 /* =================================================
@@ -859,12 +853,15 @@ body.loaded .right-bottom {
     display: none;
   }
 
-  .contact-icon:active {
+  .contact-icon.expanded {
     width: 150px;
+    justify-content: flex-start;
+    padding-left: 18px;
   }
 
-  .contact-icon:active span {
+  .contact-icon.expanded span {
     opacity: 1;
+    color: var(--accent-red-deep);
   }
 }