diff --git a/service-areas/st-johns-county/index.html b/service-areas/st-johns-county/index.html
index b0afd794..fcae1f9d 100644
--- a/service-areas/st-johns-county/index.html
+++ b/service-areas/st-johns-county/index.html
@@ -263,11 +263,15 @@
       position: relative;
       isolation: isolate;
       overflow: hidden;
-      background: linear-gradient(180deg, rgba(255,255,255,0.72), rgba(240,248,255,0.58));
+      background:
+        linear-gradient(135deg,
+          rgba(255,255,255,0.78) 0%,
+          rgba(238,248,255,0.76) 45%,
+          rgba(223,247,245,0.72) 100%);
       -webkit-backdrop-filter: blur(10px);
       backdrop-filter: blur(10px);
-      border: 1px solid rgba(255,255,255,0.55);
-      box-shadow: 0 10px 24px rgba(20,52,91,0.08);
+      border: 1px solid rgba(123, 174, 204, 0.22);
+      box-shadow: 0 10px 24px rgba(20,58,90,0.08);
       border-radius: 14px;
       transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease, background .2s ease, color .2s ease;
       color: var(--navy);
@@ -276,15 +280,16 @@
     #county-links .service-card::before{
       content: "";
       position: absolute;
-      top: -36%;
-      left: -24%;
-      width: 72%;
-      height: 70%;
+      top: -30%;
+      right: -20%;
+      width: 76%;
+      height: 74%;
       border-radius: 50%;
-      background: radial-gradient(circle, rgba(196, 229, 255, 0.22) 0%, rgba(196, 229, 255, 0) 72%);
+      background: radial-gradient(circle at top right, rgba(71,184,178,0.14), transparent 45%);
+      filter: blur(2px);
       pointer-events: none;
       z-index: 0;
-      opacity: .7;
+      opacity: .72;
       transition: opacity .2s ease;
     }
 
@@ -295,7 +300,7 @@
 
     #county-links .service-card h3{
       margin: 0 0 8px;
-      color: #0c2a49;
+      color: #143a5a;
       font-size: 1.2rem;
       font-weight: 800;
       letter-spacing: .1px;
@@ -306,7 +311,7 @@
       margin: 0;
       font-size: 14px;
       line-height: 1.4;
-      color: rgba(33, 70, 106, .76);
+      color: #56738c;
     }
 
     #county-links .service-card strong{
@@ -317,7 +322,7 @@
       font-size: 14px;
       font-weight: 700;
       letter-spacing: 0;
-      color: #2b6fa9;
+      color: #1f6fa8;
       text-transform: none;
       transition: color .2s ease;
     }
@@ -328,20 +333,24 @@
     }
 
     #county-links .service-card[aria-current="page"]{
-      border-color: rgba(47, 126, 194, .48);
-      box-shadow: 0 12px 30px rgba(25, 76, 130, .16), 0 0 0 2px rgba(47, 126, 194, .10);
+      border-color: rgba(71,184,178,0.32);
+      box-shadow: 0 12px 30px rgba(20,58,90,0.14), 0 0 0 2px rgba(71,184,178,0.10);
     }
 
     @media (hover:hover) and (pointer:fine){
       #county-links .service-card:hover,
       #county-links .service-card:focus-visible{
         transform: translateY(-2px);
-        background: linear-gradient(180deg, rgba(255,255,255,0.82), rgba(234,245,255,0.68));
-        border-color: rgba(255,255,255,0.78);
+        background:
+          linear-gradient(135deg,
+            rgba(255,255,255,0.86) 0%,
+            rgba(230,245,255,0.84) 42%,
+            rgba(214,244,239,0.82) 100%);
+        border-color: rgba(71,184,178,0.28);
         box-shadow:
-          0 16px 34px rgba(20,52,91,0.12),
-          0 0 0 1px rgba(74,144,226,0.16),
-          0 0 18px rgba(93,167,255,0.10);
+          0 16px 34px rgba(20,58,90,0.12),
+          0 0 0 1px rgba(71,184,178,0.14),
+          0 0 22px rgba(71,184,178,0.10);
       }
 
       #county-links .service-card:hover::before,
@@ -351,7 +360,7 @@
 
       #county-links .service-card:hover strong,
       #county-links .service-card:focus-visible strong{
-        color: #1f67a5;
+        color: #2a829f;
       }
 
       #county-links .service-card:hover strong .arrow,