Carousels: drag + position dots, and real Become-a-member photos

Convert the Hub / Become-a-member carousels from a pure-CSS marquee to a
JS-driven scroller with click-and-drag, touch swipe, and progress dots
(setupHubCarousel). Turn the "ways to be part of MSOS" cards into hub-style
photo cards and add the final Become-a-member photos (WebP).

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

css/pages/_hub.css

@@ -76,21 +76,27 @@
 .hub-story-text p { font-size: 17px; line-height: 28px; color: rgba(255, 255, 255, 0.9); margin: 0 0 16px; }
 .hub-story-text p:last-child { margin-bottom: 0; }
 
-/* ---------- Use cases (image cards, continuous auto-scrolling marquee) ---------- */
+/* ---------- Use cases (image cards, auto-scrolling + drag + dots) ---------- */
 .hub-carousel { position: relative; }
-/* masked viewport: cards fade out at both edges instead of being hard-cut */
+/* masked, scrollable viewport: cards fade out at both edges instead of being
+   hard-cut. Auto-scroll, click-and-drag and touch swiping are driven by JS
+   (setupHubCarousel); the native scrollbar is hidden. */
 .hub-uses {
-    overflow: hidden;
+    overflow-x: auto; overflow-y: hidden;
     padding: 6px 0 10px;
     -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 2.5%, #000 97.5%, transparent 100%);
     mask-image: linear-gradient(90deg, transparent 0, #000 2.5%, #000 97.5%, transparent 100%);
+    cursor: grab;
+    -webkit-user-select: none; user-select: none;
+    scrollbar-width: none; -ms-overflow-style: none;
+    scroll-behavior: auto;
 }
-/* the moving track = two identical groups; translateX(-50%) loops seamlessly */
+.hub-uses::-webkit-scrollbar { display: none; }
+.hub-uses.is-dragging { cursor: grabbing; }
+/* the track = three identical groups so the JS loop is seamless in both directions */
 .hub-track {
     display: flex; width: max-content;
-    animation: hub-marquee 55s linear infinite;
 }
-.hub-carousel:hover .hub-track { animation-play-state: paused; }
 .hub-group {
     display: flex; gap: 18px; padding-right: 18px; flex: 0 0 auto;
 }
@@ -106,17 +112,11 @@
 .hub-use:nth-child(3n+2) { background: linear-gradient(135deg, #FA7850 0%, #E8613B 100%); }
 .hub-use:nth-child(3n+3) { background: linear-gradient(135deg, #3B82C4 0%, #2C6BA6 100%); }
 .hub-use:hover { transform: translateY(-4px); box-shadow: 0 18px 36px rgba(16, 24, 40, 0.18); }
-@keyframes hub-marquee {
-    from { transform: translateX(0); }
-    to   { transform: translateX(-50%); }
-}
-@media (prefers-reduced-motion: reduce) {
-    .hub-track { animation: none; }
-}
 .hub-use-img {
     position: absolute; inset: 0; width: 100%; height: 100%;
     object-fit: cover; display: block;
     transition: transform 0.4s ease;
+    -webkit-user-drag: none; user-select: none; pointer-events: none;
 }
 .hub-use:hover .hub-use-img { transform: scale(1.05); }
 /* gradient rising from the bottom for text legibility */
@@ -138,6 +138,25 @@
 .hub-use-body h3 { font-size: 18px; line-height: 1.25; color: #fff; margin: 0; font-weight: 700; }
 .hub-use-body p { font-size: 13px; line-height: 19px; color: rgba(255, 255, 255, 0.9); margin: 0; }
 
+/* ---------- Scroll-position dots ---------- */
+.hub-dots {
+    display: flex; justify-content: center; align-items: center;
+    gap: 9px; margin-top: 18px;
+}
+.hub-dot {
+    width: 8px; height: 8px; padding: 0; border: 0; border-radius: 50%;
+    background: #CBD5DE; cursor: pointer; flex: 0 0 auto;
+    transition: width 0.25s ease, background-color 0.25s ease,
+                opacity 0.25s ease, transform 0.25s ease;
+}
+.hub-dot:hover { background: #9AA9B7; }
+.hub-dot.is-near { width: 7px; height: 7px; }
+.hub-dot.is-far { width: 6px; height: 6px; opacity: 0.6; }
+.hub-dot.is-active {
+    width: 24px; height: 8px; border-radius: 6px;
+    background: #2D738C; opacity: 1;
+}
+
 /* ---------- Amenities ---------- */
 .hub-amenities {
     display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px;