diff --git a/src/pages/index.astro b/src/pages/index.astro
index b966dfc..e6d8a45 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -149,6 +149,223 @@ const ctaCards = [
             .scroll-indicator { display: none; }
             .hero-donate { display: none; }
         }
+
+        /* ── Donate modal ── */
+        .donate-overlay {
+            display: none;
+            position: fixed;
+            inset: 0;
+            background: rgba(0,0,0,0.62);
+            backdrop-filter: blur(4px);
+            z-index: 1000;
+            align-items: center;
+            justify-content: center;
+            padding: 16px;
+        }
+        .donate-overlay.open { display: flex; }
+        .donate-modal {
+            background: #fff;
+            border-radius: 14px;
+            width: 100%;
+            max-width: 420px;
+            overflow: hidden;
+            box-shadow: 0 24px 80px rgba(0,0,0,0.45);
+        }
+        .donate-header {
+            background: #1e2e1a;
+            padding: 22px 24px 18px;
+            position: relative;
+        }
+        .donate-close {
+            position: absolute;
+            top: 14px; right: 16px;
+            background: none;
+            border: none;
+            color: rgba(246,241,232,0.6);
+            font-size: 22px;
+            cursor: pointer;
+            line-height: 1;
+            padding: 4px;
+            transition: color 0.15s;
+        }
+        .donate-close:hover { color: #F6F1E8; }
+        .donate-body { padding: 24px; }
+        .donate-toggle {
+            display: flex;
+            background: #f0f0ee;
+            border-radius: 999px;
+            padding: 3px;
+            margin-bottom: 22px;
+        }
+        .donate-toggle-btn {
+            flex: 1;
+            border: none;
+            background: none;
+            border-radius: 999px;
+            padding: 8px 0;
+            font-family: 'Public Sans', sans-serif;
+            font-weight: 700;
+            font-size: 13px;
+            cursor: pointer;
+            color: #555;
+            transition: background 0.2s, color 0.2s;
+        }
+        .donate-toggle-btn.active {
+            background: #1e2e1a;
+            color: #fff;
+        }
+        .donate-chips {
+            display: grid;
+            grid-template-columns: repeat(4, 1fr);
+            gap: 8px;
+            margin-bottom: 14px;
+        }
+        .donate-chip {
+            border: 2px solid #e0e0de;
+            background: #fff;
+            border-radius: 8px;
+            padding: 10px 4px;
+            font-family: 'Merriweather', serif;
+            font-weight: 700;
+            font-size: 15px;
+            color: #1e2e1a;
+            cursor: pointer;
+            text-align: center;
+            transition: border-color 0.15s, background 0.15s;
+        }
+        .donate-chip:hover { border-color: #7DA371; }
+        .donate-chip.selected { border-color: #7DA371; background: #edf4ec; }
+        .donate-custom-wrap {
+            position: relative;
+            margin-bottom: 16px;
+        }
+        .donate-custom-prefix {
+            position: absolute;
+            left: 14px;
+            top: 50%;
+            transform: translateY(-50%);
+            font-family: 'Merriweather', serif;
+            font-weight: 700;
+            font-size: 16px;
+            color: #1e2e1a;
+            pointer-events: none;
+        }
+        .donate-custom-input {
+            width: 100%;
+            border: 2px solid #e0e0de;
+            border-radius: 8px;
+            padding: 11px 14px 11px 28px;
+            font-family: 'Merriweather', serif;
+            font-weight: 700;
+            font-size: 16px;
+            color: #1e2e1a;
+            outline: none;
+            transition: border-color 0.15s;
+            box-sizing: border-box;
+        }
+        .donate-custom-input:focus,
+        .donate-custom-input.selected { border-color: #7DA371; }
+        .donate-impact {
+            font-family: 'Public Sans', sans-serif;
+            font-weight: 600;
+            font-size: 13px;
+            color: #5a7a56;
+            min-height: 20px;
+            margin-bottom: 18px;
+            line-height: 1.4;
+        }
+        .donate-giftaid {
+            background: #f9f7f0;
+            border: 1px solid #e8e4d4;
+            border-radius: 8px;
+            padding: 14px 16px;
+            margin-bottom: 20px;
+            display: flex;
+            gap: 12px;
+            align-items: flex-start;
+        }
+        .donate-giftaid input[type=checkbox] {
+            margin-top: 2px;
+            width: 18px;
+            height: 18px;
+            accent-color: #7DA371;
+            flex-shrink: 0;
+            cursor: pointer;
+        }
+        .donate-giftaid label {
+            font-family: 'Public Sans', sans-serif;
+            font-size: 13px;
+            font-weight: 600;
+            color: #3a3a2e;
+            line-height: 1.5;
+            cursor: pointer;
+        }
+        .donate-giftaid label strong { color: #1e2e1a; }
+        .donate-proceed-btn {
+            display: block;
+            width: 100%;
+            background: #7DA371;
+            color: #1e2e1a;
+            border: none;
+            border-radius: 999px;
+            padding: 14px 0;
+            font-family: 'Public Sans', sans-serif;
+            font-weight: 800;
+            font-size: 15px;
+            letter-spacing: 0.05em;
+            cursor: pointer;
+            transition: opacity 0.2s;
+        }
+        .donate-proceed-btn:hover { opacity: 0.88; }
+        .donate-step-pay { display: none; }
+        .donate-summary {
+            font-family: 'Merriweather', serif;
+            font-weight: 700;
+            font-size: 20px;
+            color: #1e2e1a;
+            text-align: center;
+            margin-bottom: 6px;
+        }
+        .donate-summary-sub {
+            font-family: 'Public Sans', sans-serif;
+            font-weight: 600;
+            font-size: 14px;
+            color: #666;
+            text-align: center;
+            margin-bottom: 28px;
+            line-height: 1.5;
+        }
+        .donate-jg-btn {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            gap: 10px;
+            width: 100%;
+            background: #1e2e1a;
+            color: #F6F1E8;
+            border: none;
+            border-radius: 999px;
+            padding: 15px 0;
+            font-family: 'Public Sans', sans-serif;
+            font-weight: 800;
+            font-size: 15px;
+            cursor: pointer;
+            text-decoration: none;
+            transition: opacity 0.2s;
+            margin-bottom: 12px;
+        }
+        .donate-jg-btn:hover { opacity: 0.82; }
+        .donate-back-link {
+            display: block;
+            text-align: center;
+            font-family: 'Public Sans', sans-serif;
+            font-weight: 600;
+            font-size: 13px;
+            color: #888;
+            cursor: pointer;
+            text-decoration: underline;
+        }
+        .donate-back-link:hover { color: #555; }
     </style>
 
     <!-- Fixed nav wrapper — transparent until scrolled -->
@@ -206,20 +423,16 @@ const ctaCards = [
                 </div>
 
                 <!-- Donate button (absolute, hidden on mobile) -->
-                <a
-                    href="https://www.justgiving.com/charity/highlandgrouprda"
-                    target="_blank"
-                    rel="noreferrer"
+                <button
+                    onclick="openDonateModal()"
                     class="absolute hero-donate"
-                    style="bottom: 40px; right: 28px;"
+                    style="bottom: 40px; right: 28px; display: flex; align-items: center; gap: 9px; background: #7DA371; color: #1e2e1a; border: none; border-radius: 999px; padding: 12px 22px 12px 18px; font-family: 'Public Sans', sans-serif; font-weight: 800; font-size: 14px; letter-spacing: 0.05em; cursor: pointer; box-shadow: 0 4px 18px rgba(0,0,0,0.32); transition: opacity 0.2s;"
+                    onmouseover="this.style.opacity='0.88'" onmouseout="this.style.opacity='1'"
+                    aria-label="Open donation form"
                 >
-                    <img
-                        src="/Button.webp"
-                        alt="Donate via JustGiving"
-                        style="height: 46px; object-fit: contain; display: block;"
-                        loading="eager"
-                    />
-                </a>
+                    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"/></svg>
+                    Donate
+                </button>
 
                 <!-- Scroll indicator (absolute, hidden on mobile) -->
                 <div
@@ -262,14 +475,15 @@ const ctaCards = [
                     <p style="font-family: 'Merriweather', serif; font-weight: 700; font-size: clamp(18px, 2vw, 24px); color: #000; line-height: 1.4; max-width: 700px;">
                         Find out more about <a href="/about" style="text-decoration: underline; color: inherit;">who we are</a>, what we do, and <a href="/support-us" style="text-decoration: underline; color: inherit;">how you can support us</a> to help make a difference.
                     </p>
-                    <a href="https://www.justgiving.com/charity/highlandgrouprda" target="_blank" rel="noreferrer">
-                        <img
-                            src="/Button.webp"
-                            alt="Donate via JustGiving"
-                            style="height: 46px; object-fit: contain; display: block;"
-                            loading="lazy"
-                        />
-                    </a>
+                    <button
+                        onclick="openDonateModal()"
+                        style="display: flex; align-items: center; gap: 9px; background: #1e2e1a; color: #F6F1E8; border: none; border-radius: 999px; padding: 13px 24px 13px 20px; font-family: 'Public Sans', sans-serif; font-weight: 800; font-size: 14px; letter-spacing: 0.05em; cursor: pointer; white-space: nowrap; flex-shrink: 0; transition: opacity 0.2s;"
+                        onmouseover="this.style.opacity='0.82'" onmouseout="this.style.opacity='1'"
+                        aria-label="Open donation form"
+                    >
+                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"/></svg>
+                        Donate
+                    </button>
                 </div>
             </section>
 
@@ -390,6 +604,87 @@ const ctaCards = [
         <SiteFooter fullBleedOnMobile />
     </div>
 
+    <!-- ── DONATE MODAL ── -->
+    <div id="donate-overlay" class="donate-overlay" role="dialog" aria-modal="true" aria-label="Donation form">
+        <div class="donate-modal">
+            <!-- Header -->
+            <div class="donate-header">
+                <button class="donate-close" onclick="closeDonateModal()" aria-label="Close">&#x2715;</button>
+                <p style="font-family:'Public Sans',sans-serif;font-weight:700;font-size:11px;letter-spacing:0.22em;text-transform:uppercase;color:#7DA371;margin-bottom:6px;">Highland Group RDA</p>
+                <p style="font-family:'Merriweather',serif;font-weight:700;font-size:18px;color:#F6F1E8;line-height:1.25;margin:0;">Make a donation</p>
+            </div>
+
+            <!-- Step 1: Choose amount -->
+            <div class="donate-body" id="donate-step-amount">
+                <!-- One-off / Monthly toggle -->
+                <div class="donate-toggle" role="group" aria-label="Donation frequency">
+                    <button class="donate-toggle-btn active" id="donate-btn-once" onclick="setFreq('once')">One-off</button>
+                    <button class="donate-toggle-btn" id="donate-btn-monthly" onclick="setFreq('monthly')">Monthly</button>
+                </div>
+
+                <!-- Amount chips -->
+                <div class="donate-chips" id="donate-chips" role="group" aria-label="Donation amount">
+                    <!-- filled by JS -->
+                </div>
+
+                <!-- Custom amount -->
+                <div class="donate-custom-wrap">
+                    <span class="donate-custom-prefix">£</span>
+                    <input
+                        type="number"
+                        id="donate-custom"
+                        class="donate-custom-input"
+                        placeholder="Other amount"
+                        min="1"
+                        step="1"
+                        aria-label="Custom donation amount in pounds"
+                        oninput="onCustomInput()"
+                    />
+                </div>
+
+                <!-- Impact text -->
+                <p class="donate-impact" id="donate-impact" aria-live="polite"></p>
+
+                <!-- Gift Aid -->
+                <div class="donate-giftaid">
+                    <input type="checkbox" id="donate-giftaid-cb" />
+                    <label for="donate-giftaid-cb">
+                        <strong>Boost your donation by 25% at no extra cost.</strong><br>
+                        I am a UK taxpayer and I understand that if I pay less Income Tax and/or Capital Gains Tax than the amount of Gift Aid claimed on all my donations, it is my responsibility to pay any difference.
+                    </label>
+                </div>
+
+                <!-- Proceed button -->
+                <button class="donate-proceed-btn" id="donate-proceed" onclick="proceedToCheckout()">
+                    Continue →
+                </button>
+            </div>
+
+            <!-- Step 2: Checkout / JustGiving redirect -->
+            <div class="donate-body donate-step-pay" id="donate-step-pay">
+                <div style="text-align:center;margin-bottom:28px;">
+                    <div style="width:56px;height:56px;background:#edf4ec;border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 18px;">
+                        <svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="#7DA371" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"/></svg>
+                    </div>
+                </div>
+                <p class="donate-summary" id="donate-summary-amount"></p>
+                <p class="donate-summary-sub" id="donate-summary-sub"></p>
+                <a
+                    id="donate-jg-link"
+                    href="https://www.justgiving.com/charity/highlandgrouprda"
+                    target="_blank"
+                    rel="noreferrer"
+                    class="donate-jg-btn"
+                    onclick="closeDonateModal()"
+                >
+                    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"/><polyline points="15 3 21 3 21 9"/><line x1="10" y1="14" x2="21" y2="3"/></svg>
+                    Donate via JustGiving
+                </a>
+                <span class="donate-back-link" onclick="backToAmount()">← Change amount</span>
+            </div>
+        </div>
+    </div>
+
     <script>
         const nav = document.getElementById("site-nav");
         if (nav) {
@@ -397,5 +692,147 @@ const ctaCards = [
                 nav.classList.toggle("scrolled", window.scrollY > 40);
             }, { passive: true });
         }
+
+        // ── Donate modal ──
+        const PRESETS = {
+            once: [
+                { amt: 10, impact: "covers feed for one session" },
+                { amt: 25, impact: "helps with grooming supplies" },
+                { amt: 50, impact: "contributes towards farrier costs" },
+                { amt: 100, impact: "supports a month of hay" },
+            ],
+            monthly: [
+                { amt: 5,  impact: "provides a weekly treat for a pony" },
+                { amt: 10, impact: "covers monthly grooming supplies" },
+                { amt: 25, impact: "contributes to monthly vet care" },
+                { amt: 50, impact: "supports monthly farrier visits" },
+            ],
+        };
+
+        let donateFreq = "once";
+        let donateSelected = 25; // default chip
+        let donateCustomActive = false;
+
+        function renderChips() {
+            const container = document.getElementById("donate-chips");
+            if (!container) return;
+            container.innerHTML = "";
+            PRESETS[donateFreq].forEach(({ amt }) => {
+                const btn = document.createElement("button");
+                btn.className = "donate-chip" + (!donateCustomActive && donateSelected === amt ? " selected" : "");
+                btn.textContent = "£" + amt;
+                btn.setAttribute("aria-pressed", String(!donateCustomActive && donateSelected === amt));
+                btn.onclick = () => selectChip(amt);
+                container.appendChild(btn);
+            });
+        }
+
+        function getImpact() {
+            if (donateCustomActive) return "";
+            const preset = PRESETS[donateFreq].find(p => p.amt === donateSelected);
+            return preset ? "✦ £" + preset.amt + " " + preset.impact + "." : "";
+        }
+
+        function updateImpact() {
+            const el = document.getElementById("donate-impact");
+            if (el) el.textContent = getImpact();
+        }
+
+        function selectChip(amt) {
+            donateSelected = amt;
+            donateCustomActive = false;
+            const input = document.getElementById("donate-custom");
+            if (input) { input.value = ""; input.classList.remove("selected"); }
+            renderChips();
+            updateImpact();
+        }
+
+        function onCustomInput() {
+            const input = document.getElementById("donate-custom");
+            if (!input) return;
+            donateCustomActive = !!input.value;
+            if (donateCustomActive) input.classList.add("selected");
+            else input.classList.remove("selected");
+            renderChips();
+            updateImpact();
+        }
+
+        function setFreq(freq) {
+            donateFreq = freq;
+            document.getElementById("donate-btn-once").classList.toggle("active", freq === "once");
+            document.getElementById("donate-btn-monthly").classList.toggle("active", freq === "monthly");
+            // keep current selected amount if it exists in new presets, else default to first
+            const exists = PRESETS[freq].some(p => p.amt === donateSelected);
+            if (!exists) donateSelected = PRESETS[freq][1].amt;
+            donateCustomActive = false;
+            const input = document.getElementById("donate-custom");
+            if (input) { input.value = ""; input.classList.remove("selected"); }
+            renderChips();
+            updateImpact();
+        }
+
+        function proceedToCheckout() {
+            const customInput = document.getElementById("donate-custom");
+            const customVal = parseFloat(customInput?.value);
+            const amount = donateCustomActive && customVal > 0 ? customVal : donateSelected;
+            const giftAid = document.getElementById("donate-giftaid-cb")?.checked;
+            const freqLabel = donateFreq === "monthly" ? "per month" : "one-off gift";
+
+            const summaryAmt = document.getElementById("donate-summary-amount");
+            const summarySub = document.getElementById("donate-summary-sub");
+            if (summaryAmt) summaryAmt.textContent = "£" + (Number.isInteger(amount) ? amount : amount.toFixed(2));
+            if (summarySub) {
+                summarySub.textContent = freqLabel.charAt(0).toUpperCase() + freqLabel.slice(1)
+                    + (giftAid ? " · Gift Aid selected" : "")
+                    + "\nYou'll complete your payment securely via JustGiving.";
+            }
+
+            document.getElementById("donate-step-amount").style.display = "none";
+            document.getElementById("donate-step-pay").style.display = "block";
+        }
+
+        function backToAmount() {
+            document.getElementById("donate-step-pay").style.display = "none";
+            document.getElementById("donate-step-amount").style.display = "block";
+        }
+
+        function openDonateModal() {
+            renderChips();
+            updateImpact();
+            // reset to amount step
+            const stepAmt = document.getElementById("donate-step-amount");
+            const stepPay = document.getElementById("donate-step-pay");
+            if (stepAmt) stepAmt.style.display = "block";
+            if (stepPay) stepPay.style.display = "none";
+
+            const overlay = document.getElementById("donate-overlay");
+            if (overlay) {
+                overlay.classList.add("open");
+                document.body.style.overflow = "hidden";
+            }
+        }
+
+        function closeDonateModal() {
+            const overlay = document.getElementById("donate-overlay");
+            if (overlay) overlay.classList.remove("open");
+            document.body.style.overflow = "";
+        }
+
+        // Close on overlay click
+        document.getElementById("donate-overlay")?.addEventListener("click", function(e) {
+            if (e.target === this) closeDonateModal();
+        });
+
+        // Close on Escape
+        document.addEventListener("keydown", function(e) {
+            if (e.key === "Escape") closeDonateModal();
+        });
+
+        // Expose globally so onclick attributes work
+        Object.assign(window, { openDonateModal, closeDonateModal, setFreq, selectChip, onCustomInput, proceedToCheckout, backToAmount });
+
+        // Initial render
+        renderChips();
+        updateImpact();
     </script>
 </BaseLayout>