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;

css/pages/_member.css

@@ -77,27 +77,22 @@
 .mm-numbers-section .mm-note { color: rgba(255,255,255,0.6); margin-top: 24px; }
 
 /* ---- ways (hub-style auto-scrolling slider) ---- */
-/* Mechanics (.hub-carousel/.hub-uses/.hub-track/.hub-group) and the marquee
-   animation are reused from _hub.css; the JS clone step (setupHubCarousel) runs
-   on every page and picks up the .hub-track here. These rules only restyle the
-   card body for icon-based cards (no photo). */
+/* Mechanics (.hub-carousel/.hub-uses/.hub-track/.hub-group), the marquee
+   animation, the photo (.hub-use-img), the legibility gradient (::after) and
+   the bottom-anchored body are all reused from _hub.css; the JS clone step
+   (setupHubCarousel) runs on every page and picks up the .hub-track here.
+   These rules only tweak card size and add a small icon badge over the photo. */
 .mm-ways-carousel { margin-top: 4px; }
-.mm-use {
-    display: flex; flex-direction: column; justify-content: space-between;
-    gap: 18px; padding: 24px 22px;
-    width: clamp(240px, 24vw, 300px);
-    aspect-ratio: 5 / 6;
-}
-/* No photo here, so drop the hub image-legibility overlay. */
-.mm-use::after { display: none; }
+.mm-use { width: clamp(240px, 24vw, 300px); aspect-ratio: 5 / 6; }
+/* Brand icon as a subtle glass badge floating over the photo. */
 .mm-use-ico {
+    position: absolute; top: 14px; left: 14px; z-index: 3;
     display: inline-flex; align-items: center; justify-content: center;
-    width: 54px; height: 54px; border-radius: 14px;
-    background: rgba(255, 255, 255, 0.18);
-    color: #fff; font-size: 23px; flex: 0 0 auto;
+    width: 44px; height: 44px; border-radius: 12px;
+    background: rgba(10, 18, 26, 0.42);
+    -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
+    color: #fff; font-size: 19px;
 }
-/* Body is absolute-positioned for photo cards in _hub.css; here it flows normally. */
-.mm-use .hub-use-body { position: static; padding: 0; gap: 6px; }
 .mm-use .hub-use-body h3 { font-size: 19px; line-height: 1.25; }
 .mm-use .hub-use-body p { font-size: 14px; line-height: 21px; }