From a9c9ba4113f2de87f65c2b9bea79d2ec3f4cf27f Mon Sep 17 00:00:00 2001
From: Omair Saleh <omair@quikcue.com>
Date: Mon, 9 Mar 2026 01:48:06 +0800
Subject: [PATCH] Polish small components: team cards, support card alignment,
 gallery filters to CSS, budget sidebar, bullet list, select dropdown

---
 html/about/index.html    |  12 ++--
 html/css/style.css       | 152 +++++++++++++++++++++++++++++++++++++++
 html/gallery/index.html  |  90 +++--------------------
 html/projects/index.html |  52 ++++++++------
 html/support/index.html  |  36 ++++++----
 5 files changed, 219 insertions(+), 123 deletions(-)

diff --git a/html/about/index.html b/html/about/index.html
index 52cac36..1b1916d 100644
--- a/html/about/index.html
+++ b/html/about/index.html
@@ -49,12 +49,12 @@
       <p><strong>Taawunu (تَعَاوُنُوا)</strong> comes from the Quranic verse: <em>"And cooperate in righteousness and piety"</em> (Al-Ma'idah 5:2). The word is a plural imperative — it's not one person saving the world. It's a command to work together.</p>
       <p>We are a small, focused team that designs, manages, and verifies community development projects for marginalized populations. We partner with registered charities (who handle donations and provide tax receipts) and local implementation organisations (who coordinate ground-level work).</p>
       <p><strong>What we bring:</strong></p>
-      <ul style="padding-left: 20px; margin-bottom: 20px;">
-        <li style="margin-bottom: 8px;">Project design — the 4-pillar sequential model</li>
-        <li style="margin-bottom: 8px;">Budget management — every pound tracked and reported</li>
-        <li style="margin-bottom: 8px;">Monitoring & evaluation — field visits, honest reports</li>
-        <li style="margin-bottom: 8px;">Technology — dashboards, data systems, digital infrastructure</li>
-        <li style="margin-bottom: 8px;">Fundraising strategy — campaign design for charity partners</li>
+      <ul>
+        <li>Project design — the 4-pillar sequential model</li>
+        <li>Budget management — every pound tracked and reported</li>
+        <li>Monitoring & evaluation — field visits, honest reports</li>
+        <li>Technology — dashboards, data systems, digital infrastructure</li>
+        <li>Fundraising strategy — campaign design for charity partners</li>
       </ul>
       <p><strong>What we don't do:</strong> We don't collect donations directly. We don't issue tax receipts. We don't operate as a registered charity. This is intentional — it keeps us focused on design, management, and accountability rather than fundraising compliance.</p>
     </div>
diff --git a/html/css/style.css b/html/css/style.css
index 1a01a8b..0224220 100644
--- a/html/css/style.css
+++ b/html/css/style.css
@@ -864,6 +864,17 @@ p { margin-bottom: 16px; max-width: 720px; }
   text-align: center;
   padding: 32px;
 }
+.team-card {
+  background: var(--paper);
+  border-radius: 4px;
+  padding: 32px 24px;
+  box-shadow: 0 1px 6px rgba(61, 31, 21, 0.06);
+  transition: all 0.25s;
+}
+.team-card:hover {
+  transform: translateY(-4px);
+  box-shadow: 0 8px 24px rgba(61, 31, 21, 0.1);
+}
 .team-avatar {
   width: 80px;
   height: 80px;
@@ -1076,6 +1087,109 @@ p { margin-bottom: 16px; max-width: 720px; }
   .photo-mosaic img { height: 200px; }
 }
 
+/* ─── Gallery Item (from gallery page) ─── */
+.gallery-grid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 8px;
+}
+.gallery-item {
+  position: relative;
+  overflow: hidden;
+  border-radius: 4px;
+  aspect-ratio: 4/3;
+}
+.gallery-item.tall { grid-row: span 2; aspect-ratio: auto; }
+.gallery-item.wide { grid-column: span 2; }
+.gallery-item img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  transition: transform 0.5s;
+}
+.gallery-item:hover img { transform: scale(1.05); }
+.gallery-item .overlay {
+  position: absolute;
+  inset: 0;
+  background: linear-gradient(to top, rgba(61,31,21,0.8) 0%, transparent 50%);
+  opacity: 0;
+  transition: opacity 0.3s;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-end;
+  padding: 20px;
+}
+.gallery-item:hover .overlay { opacity: 1; }
+.overlay .pillar-tag {
+  display: inline-block;
+  font-size: 10px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.1em;
+  padding: 3px 8px;
+  border-radius: 2px;
+  margin-bottom: 6px;
+  width: fit-content;
+}
+.tag-water { background: rgba(37,120,161,0.85); color: white; }
+.tag-food { background: rgba(45,106,79,0.85); color: white; }
+.tag-livelihoods { background: rgba(107,58,42,0.85); color: white; }
+.tag-education { background: rgba(201,168,76,0.85); color: white; }
+.overlay .caption-title {
+  font-family: var(--font-display);
+  font-weight: 700;
+  font-size: 15px;
+  color: white;
+  margin-bottom: 4px;
+}
+.overlay .caption-desc {
+  font-size: 12px;
+  color: rgba(245,239,224,0.8);
+  line-height: 1.4;
+}
+@media (max-width: 768px) {
+  .gallery-grid { grid-template-columns: repeat(2, 1fr); }
+  .gallery-item.wide { grid-column: span 1; }
+  .gallery-item.tall { grid-row: span 1; aspect-ratio: 4/3; }
+}
+@media (max-width: 480px) {
+  .gallery-grid { grid-template-columns: 1fr; gap: 4px; }
+}
+
+/* ─── Gallery Filters ─── */
+.gallery-filters {
+  display: flex;
+  gap: 10px;
+  flex-wrap: wrap;
+  padding: 24px 0 16px;
+}
+.filter-btn {
+  font-family: var(--font-body);
+  font-size: 13px;
+  font-weight: 600;
+  padding: 6px 16px;
+  border-radius: 3px;
+  border: 1.5px solid var(--muted);
+  background: transparent;
+  color: var(--muted);
+  cursor: pointer;
+  transition: all 0.2s;
+}
+.filter-btn:hover { opacity: 0.8; }
+.filter-btn.active {
+  background: var(--earth);
+  border-color: var(--earth);
+  color: white;
+}
+.filter-btn[data-filter="water"] { border-color: var(--water); color: var(--water); }
+.filter-btn[data-filter="food"] { border-color: var(--green); color: var(--green); }
+.filter-btn[data-filter="livelihoods"] { border-color: var(--earth); color: var(--earth); }
+.filter-btn[data-filter="education"] { border-color: var(--gold); color: var(--gold); }
+.filter-btn[data-filter="water"].active { background: var(--water); border-color: var(--water); color: white; }
+.filter-btn[data-filter="food"].active { background: var(--green); border-color: var(--green); color: white; }
+.filter-btn[data-filter="livelihoods"].active { background: var(--earth); border-color: var(--earth); color: white; }
+.filter-btn[data-filter="education"].active { background: var(--gold); border-color: var(--gold); color: white; }
+
 /* ─── Prose ─── */
 .prose {
   font-size: 17px;
@@ -1094,6 +1208,33 @@ p { margin-bottom: 16px; max-width: 720px; }
   border-radius: 4px;
   margin: 32px 0;
 }
+.prose ul {
+  padding-left: 0;
+  list-style: none;
+  margin-bottom: 20px;
+}
+.prose ul li {
+  position: relative;
+  padding-left: 20px;
+  margin-bottom: 10px;
+  font-size: 15px;
+}
+.prose ul li::before {
+  content: '';
+  position: absolute;
+  left: 0;
+  top: 9px;
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: var(--gold);
+  opacity: 0.7;
+}
+
+/* ─── Responsive: budget + contact grids ─── */
+@media (max-width: 768px) {
+  .contact-grid { grid-template-columns: 1fr !important; }
+}
 
 /* ─── Animations ─── */
 .fade-up {
@@ -1119,6 +1260,8 @@ p { margin-bottom: 16px; max-width: 720px; }
   box-shadow: 0 1px 6px rgba(61, 31, 21, 0.06);
   border-top: 4px solid var(--green);
   transition: all 0.25s;
+  display: flex;
+  flex-direction: column;
 }
 .support-card:hover {
   transform: translateY(-4px);
@@ -1130,6 +1273,9 @@ p { margin-bottom: 16px; max-width: 720px; }
   color: #666;
   margin-bottom: 20px;
 }
+.support-card .support-card-bottom {
+  margin-top: auto;
+}
 .support-card .btn { width: 100%; justify-content: center; }
 
 /* ─── Contact Form ─── */
@@ -1154,6 +1300,12 @@ p { margin-bottom: 16px; max-width: 720px; }
   font-size: 15px;
   background: white;
   transition: border-color 0.2s;
+  appearance: none;
+  -webkit-appearance: none;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%239C9488' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  background-position: right 16px center;
+  padding-right: 40px;
 }
 .form-group input:focus,
 .form-group textarea:focus,
diff --git a/html/gallery/index.html b/html/gallery/index.html
index 12b18d2..f28bce5 100644
--- a/html/gallery/index.html
+++ b/html/gallery/index.html
@@ -8,66 +8,7 @@
   <link rel="icon" type="image/svg+xml" href="/images/favicon.svg">
   <link rel="stylesheet" href="/css/style.css">
   <style>
-    .gallery-grid {
-      display: grid;
-      grid-template-columns: repeat(3, 1fr);
-      gap: 6px;
-    }
-    .gallery-item {
-      position: relative;
-      overflow: hidden;
-      cursor: pointer;
-      aspect-ratio: 4/3;
-    }
-    .gallery-item.tall { grid-row: span 2; aspect-ratio: auto; }
-    .gallery-item.wide { grid-column: span 2; }
-    .gallery-item img {
-      width: 100%;
-      height: 100%;
-      object-fit: cover;
-      transition: transform 0.5s ease;
-    }
-    .gallery-item:hover img { transform: scale(1.05); }
-    .gallery-item .overlay {
-      position: absolute;
-      inset: 0;
-      background: linear-gradient(to top, rgba(61,31,21,0.8) 0%, transparent 50%);
-      opacity: 0;
-      transition: opacity 0.3s;
-      display: flex;
-      flex-direction: column;
-      justify-content: flex-end;
-      padding: 20px;
-    }
-    .gallery-item:hover .overlay { opacity: 1; }
-    .overlay .pillar-tag {
-      display: inline-block;
-      font-size: 10px;
-      font-weight: 600;
-      text-transform: uppercase;
-      letter-spacing: 0.1em;
-      padding: 3px 8px;
-      border-radius: 2px;
-      margin-bottom: 6px;
-      width: fit-content;
-    }
-    .overlay .caption-title {
-      font-family: var(--font-display);
-      font-weight: 700;
-      font-size: 16px;
-      color: var(--cream);
-      margin-bottom: 4px;
-    }
-    .overlay .caption-desc {
-      font-size: 12px;
-      color: rgba(245,239,224,0.7);
-      line-height: 1.4;
-    }
-    .tag-water { background: rgba(37,120,161,0.8); color: white; }
-    .tag-food { background: rgba(45,106,79,0.8); color: white; }
-    .tag-livelihoods { background: rgba(107,58,42,0.8); color: white; }
-    .tag-education { background: rgba(201,168,76,0.8); color: var(--deep); }
-
+    .gallery-item { cursor: pointer; }
     /* Lightbox */
     .lightbox {
       display: none;
@@ -124,15 +65,6 @@
     .lightbox-nav:hover { opacity: 1; }
     .lightbox-prev { left: 10px; }
     .lightbox-next { right: 10px; }
-
-    @media (max-width: 768px) {
-      .gallery-grid { grid-template-columns: repeat(2, 1fr); }
-      .gallery-item.wide { grid-column: span 1; }
-      .gallery-item.tall { grid-row: span 1; aspect-ratio: 4/3; }
-    }
-    @media (max-width: 480px) {
-      .gallery-grid { grid-template-columns: 1fr; gap: 4px; }
-    }
   </style>
 </head>
 <body>
@@ -167,13 +99,13 @@
 </section>
 
 <!-- Pillar filter -->
-<section style="padding: 24px 0; border-bottom: 1px solid rgba(156,148,136,0.15);">
-  <div class="container" style="display:flex; gap:12px; flex-wrap:wrap;">
-    <button class="filter-btn active" data-filter="all" style="font-family:var(--font-body); font-size:13px; font-weight:600; padding:6px 16px; border-radius:3px; border:1.5px solid var(--earth); background:var(--earth); color:white; cursor:pointer; transition:all 0.2s;">All</button>
-    <button class="filter-btn" data-filter="water" style="font-family:var(--font-body); font-size:13px; font-weight:600; padding:6px 16px; border-radius:3px; border:1.5px solid var(--water); background:transparent; color:var(--water); cursor:pointer; transition:all 0.2s;">💧 Water</button>
-    <button class="filter-btn" data-filter="food" style="font-family:var(--font-body); font-size:13px; font-weight:600; padding:6px 16px; border-radius:3px; border:1.5px solid var(--green); background:transparent; color:var(--green); cursor:pointer; transition:all 0.2s;">🌾 Food</button>
-    <button class="filter-btn" data-filter="livelihoods" style="font-family:var(--font-body); font-size:13px; font-weight:600; padding:6px 16px; border-radius:3px; border:1.5px solid var(--earth); background:transparent; color:var(--earth); cursor:pointer; transition:all 0.2s;">💼 Livelihoods</button>
-    <button class="filter-btn" data-filter="education" style="font-family:var(--font-body); font-size:13px; font-weight:600; padding:6px 16px; border-radius:3px; border:1.5px solid var(--gold); background:transparent; color:var(--gold); cursor:pointer; transition:all 0.2s;">📚 Education</button>
+<section style="border-bottom: 1px solid rgba(156,148,136,0.15);">
+  <div class="container gallery-filters">
+    <button class="filter-btn active" data-filter="all">All</button>
+    <button class="filter-btn" data-filter="water">💧 Water</button>
+    <button class="filter-btn" data-filter="food">🌾 Food</button>
+    <button class="filter-btn" data-filter="livelihoods">💼 Livelihoods</button>
+    <button class="filter-btn" data-filter="education">📚 Education</button>
   </div>
 </section>
 
@@ -343,14 +275,8 @@ document.getElementById('navToggle').addEventListener('click', () => document.ge
 document.querySelectorAll('.filter-btn').forEach(btn => {
   btn.addEventListener('click', () => {
     document.querySelectorAll('.filter-btn').forEach(b => {
-      b.style.background = 'transparent';
       b.classList.remove('active');
     });
-    btn.style.background = btn.dataset.filter === 'all' ? 'var(--earth)' : 
-      btn.dataset.filter === 'water' ? 'var(--water)' :
-      btn.dataset.filter === 'food' ? 'var(--green)' :
-      btn.dataset.filter === 'livelihoods' ? 'var(--earth)' : 'var(--gold)';
-    btn.style.color = 'white';
     btn.classList.add('active');
     
     const filter = btn.dataset.filter;
diff --git a/html/projects/index.html b/html/projects/index.html
index 8a41cd9..75d4ba4 100644
--- a/html/projects/index.html
+++ b/html/projects/index.html
@@ -107,26 +107,38 @@
     <!-- Budget -->
     <h3 class="fade-up mt-5 mb-2">Budget Transparency</h3>
     <p class="fade-up" style="font-size:14px; color:#888;">Full budget breakdown. Updated after each phase.</p>
-    <table class="budget-table fade-up" style="max-width:640px;">
-      <thead>
-        <tr><th>Item</th><th style="text-align:right;">Amount</th></tr>
-      </thead>
-      <tbody>
-        <tr><td>Land acquisition & preparation</td><td>£4,200</td></tr>
-        <tr><td>Pond construction (10 ponds)</td><td>£8,500</td></tr>
-        <tr><td>Hatchery construction</td><td>£3,800</td></tr>
-        <tr><td>Borehole & water infrastructure</td><td>£6,200</td></tr>
-        <tr><td>Solar power system</td><td>£4,800</td></tr>
-        <tr><td>Broodstock & fingerlings</td><td>£3,200</td></tr>
-        <tr><td>Feed (Year 1)</td><td>£5,500</td></tr>
-        <tr><td>Equipment & tools</td><td>£2,400</td></tr>
-        <tr><td>Training & capacity building</td><td>£1,800</td></tr>
-        <tr><td>Project management & M&E</td><td>£2,606</td></tr>
-      </tbody>
-      <tfoot>
-        <tr><td><strong>Total</strong></td><td><strong>£43,006</strong></td></tr>
-      </tfoot>
-    </table>
+    <div class="fade-up" style="display:grid; grid-template-columns:3fr 2fr; gap:40px; align-items:start;">
+      <table class="budget-table">
+        <thead>
+          <tr><th>Item</th><th style="text-align:right;">Amount</th></tr>
+        </thead>
+        <tbody>
+          <tr><td>Land acquisition & preparation</td><td>£4,200</td></tr>
+          <tr><td>Pond construction (10 ponds)</td><td>£8,500</td></tr>
+          <tr><td>Hatchery construction</td><td>£3,800</td></tr>
+          <tr><td>Borehole & water infrastructure</td><td>£6,200</td></tr>
+          <tr><td>Solar power system</td><td>£4,800</td></tr>
+          <tr><td>Broodstock & fingerlings</td><td>£3,200</td></tr>
+          <tr><td>Feed (Year 1)</td><td>£5,500</td></tr>
+          <tr><td>Equipment & tools</td><td>£2,400</td></tr>
+          <tr><td>Training & capacity building</td><td>£1,800</td></tr>
+          <tr><td>Project management & M&E</td><td>£2,606</td></tr>
+        </tbody>
+        <tfoot>
+          <tr><td><strong>Total</strong></td><td><strong>£43,006</strong></td></tr>
+        </tfoot>
+      </table>
+      <div style="background:var(--light-cream); border-radius:4px; padding:28px; border-left:3px solid var(--gold);">
+        <div style="font-family:var(--font-mono); font-size:11px; text-transform:uppercase; letter-spacing:0.08em; color:var(--muted); margin-bottom:16px;">Revenue Projection</div>
+        <div style="font-family:var(--font-mono); font-size:28px; color:var(--earth); line-height:1; margin-bottom:4px;">£92,000</div>
+        <div style="font-size:13px; color:var(--muted); margin-bottom:20px;">annual revenue from fish sales</div>
+        <div style="font-family:var(--font-mono); font-size:28px; color:var(--green); line-height:1; margin-bottom:4px;">167%</div>
+        <div style="font-size:13px; color:var(--muted); margin-bottom:20px;">3-year ROI</div>
+        <div style="font-family:var(--font-mono); font-size:28px; color:var(--gold); line-height:1; margin-bottom:4px;">6%</div>
+        <div style="font-size:13px; color:var(--muted); margin-bottom:20px;">management fee</div>
+        <div style="font-size:12px; color:var(--muted); padding-top:16px; border-top:1px solid rgba(156,148,136,0.2); line-height:1.5;">Every pound is tracked. Management fees are openly listed. This isn't overhead — it's how the system stays accountable.</div>
+      </div>
+    </div>
   </div>
 </section>
 
diff --git a/html/support/index.html b/html/support/index.html
index 5a3b912..422fd6f 100644
--- a/html/support/index.html
+++ b/html/support/index.html
@@ -79,12 +79,14 @@
         <div class="label" style="color:var(--water); margin-bottom:8px;">💧 Water</div>
         <h3>Solar Water Well — Lolo Camp</h3>
         <p>Fund a solar-powered borehole providing 10,000 litres of clean water daily to 4,000+ refugees. No fuel costs, no recurring expenses — powered by the sun.</p>
-        <div style="display:flex; justify-content:space-between; margin-bottom:16px;">
-          <div><span class="label">Target</span><br><strong style="font-family:var(--font-mono); color:var(--water);">£5,000</strong></div>
-          <div><span class="label">Type</span><br><strong style="font-size:14px;">Sadaqah Jariyah</strong></div>
+        <div class="support-card-bottom">
+          <div style="display:flex; justify-content:space-between; margin-bottom:16px;">
+            <div><span class="label">Target</span><br><strong style="font-family:var(--font-mono); color:var(--water);">£5,000</strong></div>
+            <div><span class="label">Type</span><br><strong style="font-size:14px;">Sadaqah Jariyah</strong></div>
+          </div>
+          <a href="#" class="btn btn-primary" onclick="alert('Donation page coming soon — we are setting up the charity partner checkout. Email hello@taawunu.org to donate now.'); return false;">Donate via SWAN London →</a>
+          <p style="font-size:11px; color:var(--muted); margin-top:12px; margin-bottom:0;">Donations processed by SWAN London, UK registered charity. Gift Aid eligible.</p>
         </div>
-        <a href="#" class="btn btn-primary" onclick="alert('Donation page coming soon — we are setting up the charity partner checkout. Email hello@taawunu.org to donate now.'); return false;">Donate via SWAN London →</a>
-        <p style="font-size:11px; color:var(--muted); margin-top:12px; margin-bottom:0;">Donations processed by SWAN London, UK registered charity. Gift Aid eligible.</p>
       </div>
 
       <div class="support-card fade-up" style="border-top-color: var(--green);">
@@ -92,12 +94,14 @@
         <div class="label" style="color:var(--green); margin-bottom:8px;">🌾 Food</div>
         <h3>Lolo Aquaculture — Phase 2</h3>
         <p>Fund the next phase of the community fish farm: broodstock acquisition, hatchery commissioning, and first pond stocking. This is the step that turns infrastructure into food.</p>
-        <div style="display:flex; justify-content:space-between; margin-bottom:16px;">
-          <div><span class="label">Target</span><br><strong style="font-family:var(--font-mono); color:var(--green);">£8,700</strong></div>
-          <div><span class="label">Type</span><br><strong style="font-size:14px;">Zakat Eligible</strong></div>
+        <div class="support-card-bottom">
+          <div style="display:flex; justify-content:space-between; margin-bottom:16px;">
+            <div><span class="label">Target</span><br><strong style="font-family:var(--font-mono); color:var(--green);">£8,700</strong></div>
+            <div><span class="label">Type</span><br><strong style="font-size:14px;">Zakat Eligible</strong></div>
+          </div>
+          <a href="#" class="btn btn-primary" onclick="alert('Donation page coming soon — we are setting up the charity partner checkout. Email hello@taawunu.org to donate now.'); return false;">Donate via SWAN London →</a>
+          <p style="font-size:11px; color:var(--muted); margin-top:12px; margin-bottom:0;">Donations processed by SWAN London, UK registered charity. Gift Aid eligible.</p>
         </div>
-        <a href="#" class="btn btn-primary" onclick="alert('Donation page coming soon — we are setting up the charity partner checkout. Email hello@taawunu.org to donate now.'); return false;">Donate via SWAN London →</a>
-        <p style="font-size:11px; color:var(--muted); margin-top:12px; margin-bottom:0;">Donations processed by SWAN London, UK registered charity. Gift Aid eligible.</p>
       </div>
 
       <div class="support-card fade-up" style="border-top-color: var(--gold);">
@@ -105,12 +109,14 @@
         <div class="label" style="color:var(--gold); margin-bottom:8px;">📚 Education</div>
         <h3>Quran School Materials</h3>
         <p>Provide writing boards (alluha), ink, and solar lights for the traditional Quran schools at Lolo Camp. A small investment with deep cultural significance.</p>
-        <div style="display:flex; justify-content:space-between; margin-bottom:16px;">
-          <div><span class="label">Target</span><br><strong style="font-family:var(--font-mono); color:var(--gold);">£500</strong></div>
-          <div><span class="label">Type</span><br><strong style="font-size:14px;">Sadaqah</strong></div>
+        <div class="support-card-bottom">
+          <div style="display:flex; justify-content:space-between; margin-bottom:16px;">
+            <div><span class="label">Target</span><br><strong style="font-family:var(--font-mono); color:var(--gold);">£500</strong></div>
+            <div><span class="label">Type</span><br><strong style="font-size:14px;">Sadaqah</strong></div>
+          </div>
+          <a href="#" class="btn btn-primary" onclick="alert('Donation page coming soon — we are setting up the charity partner checkout. Email hello@taawunu.org to donate now.'); return false;">Donate via SWAN London →</a>
+          <p style="font-size:11px; color:var(--muted); margin-top:12px; margin-bottom:0;">Donations processed by SWAN London, UK registered charity. Gift Aid eligible.</p>
         </div>
-        <a href="#" class="btn btn-primary" onclick="alert('Donation page coming soon — we are setting up the charity partner checkout. Email hello@taawunu.org to donate now.'); return false;">Donate via SWAN London →</a>
-        <p style="font-size:11px; color:var(--muted); margin-top:12px; margin-bottom:0;">Donations processed by SWAN London, UK registered charity. Gift Aid eligible.</p>
       </div>
     </div>
   </div>