style(site): photos 10% desaturated with a discreet brand tint until hover

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>

site/assets/css/style.css

@@ -4356,6 +4356,34 @@ h3.contact-title {
   .gal-link:hover::after { animation: none; }
 }
 
+/* ── Photos at rest: 10% desaturated + a discreet brand-colour tint, both lifted
+   on hover. The tint is a "multiply" layer of a very light brand colour, so it
+   follows each gym's colour (and costs no extra markup). ───────────────────── */
+.gal-link {
+  isolation: isolate;
+  background-color: color-mix(in srgb, var(--fitme-accent) 14%, #fff);
+  transition: background-color .45s ease;
+}
+.gal-link img { mix-blend-mode: multiply; filter: saturate(.9); }
+.gal-link:hover,
+.gal-link:focus-visible { background-color: #fff; }
+.gal-link:hover img,
+.gal-link:focus-visible img { filter: saturate(1) brightness(1.05); }
+
+.trainer-item .trainer-pic img { filter: saturate(.9); transition: filter .45s ease; }
+.trainer-item .trainer-pic::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  z-index: 1;
+  background: color-mix(in srgb, var(--fitme-accent) 14%, #fff);
+  mix-blend-mode: multiply;
+  transition: opacity .45s ease;
+  pointer-events: none;
+}
+.trainer-item .trainer-pic:hover img { filter: saturate(1); }
+.trainer-item .trainer-pic:hover::before { opacity: 0; }
+
 @media (max-width: 991px) {
   .gal-masonry { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: 150px; }
 }