From a6e1069fb4bc4f33803170743bc8a16181ba2a73 Mon Sep 17 00:00:00 2001
From: Calum Muir <calumamuir@outlook.com>
Date: Thu, 30 Apr 2026 19:38:29 +0000
Subject: [PATCH] Apply v3 redesign to Contact page

Full-width hero, two-column contact section (details + form), styled
radio button enquiry type picker, phone and referral source fields,
Quick Links dark-green card strip, map iframe retained. Form backend
integration (Turnstile + contact-form.js) preserved.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 src/pages/contact.astro | 525 ++++++++++++++++++++++++++--------------
 1 file changed, 344 insertions(+), 181 deletions(-)

diff --git a/src/pages/contact.astro b/src/pages/contact.astro
index 3f8f008..9382c20 100644
--- a/src/pages/contact.astro
+++ b/src/pages/contact.astro
@@ -5,11 +5,11 @@ import SiteFooter from "../components/SiteFooter.astro";
 import { navigationItems } from "../lib/navigation";
 
 const pageSeo = {
-    title: "Contact",
+    title: "Contact Us",
     description:
-        "Contact Highland Group RDA for bookings, volunteering, or enquiries. We're here to help you connect with our team and activities in the Highlands.",
+        "Contact Highland Group RDA for volunteering, participating, sponsoring a pony, or any general enquiry. We'd love to hear from you.",
     keywords:
-        "Highland Group RDA contact, RDA enquiries, book RDA session, volunteer at RDA, RDA Highlands contact details, disability riding information",
+        "Highland Group RDA contact, RDA enquiries, volunteer, participate, sponsor a pony, Highlands disability riding",
     canonicalPath: "/contact",
 };
 
@@ -17,208 +17,371 @@ const turnstileSiteKey = import.meta.env.PUBLIC_TURNSTILE_SITE_KEY ?? "";
 ---
 
 <BaseLayout {...pageSeo}>
-    {
-        turnstileSiteKey && (
-            <Fragment slot="head">
-                <script
-                    src="https://challenges.cloudflare.com/turnstile/v0/api.js"
-                    async
-                    defer
-                />
-            </Fragment>
-        )
-    }
+    {turnstileSiteKey && (
+        <Fragment slot="head">
+            <script src="https://challenges.cloudflare.com/turnstile/v0/api.js" async defer />
+        </Fragment>
+    )}
     <Fragment slot="head">
-        <script src="/contact-form.js" defer data-cfasync="false"></script>
+        <script src="/contact-form.js" defer data-cfasync="false" />
     </Fragment>
-    <div class="flex flex-col min-h-screen items-center bg-[#e2e2e2]">
+
+    <style>
+        #site-nav { transition: background 0.4s ease, backdrop-filter 0.4s ease; }
+        #site-nav.scrolled { background: rgba(0,0,0,0.82); backdrop-filter: blur(8px); }
+
+        .field-input {
+            width: 100%;
+            border: 1.5px solid rgba(0,0,0,0.18);
+            border-radius: 6px;
+            padding: 12px 16px;
+            font-family: 'Public Sans', sans-serif;
+            font-size: 15px;
+            font-weight: 600;
+            color: #000;
+            background: #fff;
+            outline: none;
+            transition: border-color 0.2s ease, box-shadow 0.2s ease;
+            appearance: none;
+        }
+        .field-input:focus {
+            border-color: #7DA371;
+            box-shadow: 0 0 0 3px rgba(125,163,113,0.18);
+        }
+        .field-input::placeholder { color: rgba(0,0,0,0.35); font-weight: 600; }
+
+        /* Custom radio buttons */
+        .radio-group { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
+        .radio-label {
+            display: flex; align-items: flex-start; gap: 12px;
+            cursor: pointer; padding: 12px 16px; border-radius: 6px;
+            border: 1.5px solid rgba(0,0,0,0.15); background: #fff;
+            transition: border-color 0.2s ease;
+        }
+        .radio-label:hover { border-color: #7DA371; }
+        .radio-label input[type="radio"] { display: none; }
+        .radio-label input[type="radio"]:checked ~ .radio-custom { border-color: #7DA371; background: #7DA371; }
+        .radio-label:has(input:checked) { border-color: #7DA371; background: rgba(125,163,113,0.07); }
+        .radio-custom {
+            width: 18px; height: 18px; border-radius: 9999px;
+            border: 2px solid rgba(0,0,0,0.25); flex-shrink: 0; margin-top: 1px;
+            transition: border-color 0.2s, background 0.2s;
+            position: relative;
+        }
+        .radio-custom::after {
+            content: ''; position: absolute; inset: 0;
+            display: flex; align-items: center; justify-content: center;
+        }
+        .radio-label input[type="radio"]:checked ~ .radio-custom::after {
+            content: '';
+            width: 7px; height: 7px; border-radius: 9999px;
+            background: #fff;
+            position: absolute; top: 50%; left: 50%;
+            transform: translate(-50%, -50%);
+        }
+        .radio-text { font-family: 'Public Sans', sans-serif; font-weight: 600; font-size: 14px; color: #000; line-height: 1.4; }
+
+        /* Select arrow */
+        select.field-input {
+            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='%23666' 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;
+        }
+
+        /* Quick link cards */
+        .ql-card { position: relative; height: 240px; border-radius: 6px; overflow: hidden; display: block; cursor: pointer; }
+        .ql-card-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }
+        .ql-card:hover .ql-card-img { transform: scale(1.05); }
+        .ql-card-band { position: absolute; bottom: 0; left: 0; right: 0; background: rgba(125,163,113,0.9); backdrop-filter: blur(4px); padding: 14px 18px; }
+        .ql-card-title { font-family: 'Merriweather', serif; font-weight: 700; font-size: 20px; color: #fff; line-height: 1.2; }
+        .ql-card:hover .ql-card-title { text-decoration: underline; }
+        .ql-card-sub { margin-top: 4px; font-family: 'Public Sans', sans-serif; font-weight: 600; font-size: 13px; color: rgba(255,255,255,0.82); }
+
+        @media (max-width: 900px) {
+            .contact-grid { grid-template-columns: 1fr !important; }
+            .name-email-row { grid-template-columns: 1fr !important; }
+            .radio-group { grid-template-columns: 1fr !important; }
+            .phone-field { max-width: 100% !important; }
+            .ql-grid { grid-template-columns: 1fr !important; }
+        }
+        @media (max-width: 600px) {
+            .contact-section { padding: 48px 24px !important; }
+            .ql-section { padding: 48px 24px !important; }
+        }
+    </style>
+
+    <div id="site-nav" class="fixed top-0 left-0 right-0 z-50 px-4 sm:px-10">
+        <SiteHeader navigationItems={navigationItems} theme="dark" />
+    </div>
+
+    <div class="flex flex-col min-h-screen bg-[#e2e2e2]">
         <main class="w-full">
-            <section class="w-full max-w-[1200px] mx-auto px-0 sm:px-8 mt-0">
+
+            <!-- ── HERO ── -->
+            <section class="relative w-full overflow-hidden" style="min-height: 52vh;">
+                <img
+                    class="absolute inset-0 h-full w-full object-cover"
+                    style="object-position: 50% 45%;"
+                    alt=""
+                    src="/contact-960.webp"
+                    loading="eager"
+                    fetchpriority="high"
+                    decoding="async"
+                />
                 <div
-                    class="relative w-full sm:rounded-[7px] overflow-hidden bg-cover bg-[50%_35%]"
-                    style="background-image: url(/222957077_6028824210491349_4146132303877993139_n-1920w.webp);"
+                    class="absolute inset-0"
+                    style="background: linear-gradient(160deg, rgba(0,0,0,0.78) 0%, rgba(0,0,0,0.42) 60%, rgba(0,0,0,0.55) 100%);"
+                />
+                <div
+                    class="relative flex flex-col justify-end"
+                    style="min-height: 52vh; padding: 120px 28px 64px;"
                 >
-                    <div class="absolute inset-0 bg-black/45"></div>
-                    <SiteHeader
-                        navigationItems={navigationItems}
-                        theme="dark"
-                        className="px-6 sm:px-4"
-                    />
-                    <div
-                        class="relative px-6 sm:px-8 pb-32 pt-6 sm:pb-24 sm:pt-8"
-                    >
-                        <div
-                            class="max-w-none sm:max-w-[760px] rounded-[7px] bg-black/45 px-5 py-5 sm:px-6 sm:py-6 backdrop-blur-sm"
-                        >
-                            <p
-                                class="[font-family:'Public_Sans',Helvetica] font-semibold text-xs sm:text-sm uppercase tracking-[0.2em] text-white/90"
-                            >
-                                Get in touch
-                            </p>
-                            <div class="mt-3 h-[2px] w-10 bg-white/70"></div>
-                            <h1
-                                class="mt-4 [font-family:'Merriweather',Helvetica] font-bold text-white text-[34px] sm:text-[44px] leading-[1.15]"
-                            >
-                                Contact Highland Group RDA
-                            </h1>
-                            <p
-                                class="mt-4 [font-family:'Public_Sans',Helvetica] font-semibold text-white text-base sm:text-lg leading-[1.6] max-w-[720px]"
-                            >
-                                We would love to hear from you about sessions,
-                                volunteering, or ways to support the group.
-                                Reach out and we will get back to you as soon as
-                                we can.
-                            </p>
-                        </div>
+                    <div style="max-width: 600px;">
+                        <p style="font-family: 'Public Sans', sans-serif; font-weight: 700; font-size: 12px; letter-spacing: 0.25em; text-transform: uppercase; color: rgba(255,255,255,0.7); margin-bottom: 14px;">
+                            Contact Us
+                        </p>
+                        <div style="width: 48px; height: 2px; background: #7DA371; margin-bottom: 20px;" />
+                        <h1 style="font-family: 'Merriweather', serif; font-weight: 900; font-size: clamp(32px, 4.5vw, 52px); color: #F6F1E8; line-height: 1.1; margin-bottom: 18px;">
+                            We'd love to hear from you.
+                        </h1>
+                        <p style="font-family: 'Public Sans', sans-serif; font-weight: 600; font-size: clamp(15px, 1.5vw, 18px); color: rgba(246,241,232,0.82); line-height: 1.65;">
+                            Whether you're looking to volunteer, apply as a participant, sponsor a pony, or just want to know more — get in touch and we'll get back to you soon.
+                        </p>
                     </div>
-                    <a
-                        class="absolute bottom-4 left-4 sm:bottom-6 sm:left-6 w-[190px] sm:w-[240px] h-[48px] sm:h-[50px]"
-                        href="https://www.justgiving.com/charity/highlandgrouprda"
-                        target="_blank"
-                        rel="noreferrer"
-                    >
-                        <img
-                            class="w-full h-full object-contain"
-                            alt="Donate via JustGiving"
-                            src="/Button.webp"
-                        />
-                    </a>
                 </div>
             </section>
 
-            <section
-                class="w-full max-w-[1200px] mx-auto px-0 sm:px-8 mt-0 pb-0"
-            >
-                <div class="bg-[#d6d6d6] px-6 sm:px-8 py-6 sm:py-8">
-                    <div
-                        class="grid grid-cols-1 gap-8 sm:grid-cols-[1.1fr_0.9fr]"
-                    >
-                        <div>
-                            <h2
-                                class="[font-family:'Merriweather',Helvetica] font-bold text-black text-2xl sm:text-3xl"
-                            >
-                                Contact details
-                            </h2>
-                            <p
-                                class="mt-4 [font-family:'Public_Sans',Helvetica] font-semibold text-black text-base sm:text-lg leading-[1.6]"
-                            >
-                                Highland Group RDA, Sandycroft, Reelig,
-                                Kirkhill, IV5 7PP
-                            </p>
-                            <p
-                                class="mt-3 [font-family:'Public_Sans',Helvetica] font-semibold text-black text-base sm:text-lg leading-[1.6]"
-                            >
-                                Email: info@highlandgrouprda.org.uk
-                            </p>
-                            <div class="mt-6">
-                                <a
-                                    class="inline-flex items-center rounded-full border border-black/20 px-4 py-2 text-sm font-semibold uppercase tracking-wide text-black"
-                                    href="mailto:info@highlandgrouprda.org.uk"
-                                >
-                                    Email us
-                                </a>
-                            </div>
+            <!-- ── CONTACT SECTION ── -->
+            <section class="contact-section" style="background: #d6d6d6; padding: clamp(48px, 8vw, 88px) clamp(24px, 6vw, 72px);">
+                <div class="contact-grid" style="max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1.6fr; gap: 80px; align-items: start;">
+
+                    <!-- Left: details -->
+                    <div>
+                        <p style="font-family: 'Public Sans', sans-serif; font-weight: 700; font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(0,0,0,0.4); margin-bottom: 14px;">Get in touch</p>
+                        <div style="width: 36px; height: 2px; background: #7DA371; margin-bottom: 24px;" />
+                        <h2 style="font-family: 'Merriweather', serif; font-weight: 700; font-size: clamp(22px, 2vw, 28px); color: #000; line-height: 1.2; margin-bottom: 28px;">
+                            We'll get back to you as soon as we can.
+                        </h2>
+
+                        <div style="margin-bottom: 28px;">
+                            <p style="font-family: 'Public Sans', sans-serif; font-weight: 800; font-size: 13px; color: #000; letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 6px;">Email</p>
+                            <a href="mailto:info@highlandgrouprda.org.uk" style="font-family: 'Public Sans', sans-serif; font-weight: 600; font-size: 15px; color: rgba(0,0,0,0.7); text-decoration: underline; line-height: 1.6;">
+                                info@highlandgrouprda.org.uk
+                            </a>
                         </div>
 
-                        <div class="bg-white/70 px-6 sm:px-8 py-6 sm:py-8">
-                            <h2
-                                class="[font-family:'Merriweather',Helvetica] font-bold text-black text-2xl sm:text-3xl"
+                        <div style="margin-bottom: 28px;">
+                            <p style="font-family: 'Public Sans', sans-serif; font-weight: 800; font-size: 13px; color: #000; letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 6px;">Address</p>
+                            <address style="font-style: normal; font-family: 'Public Sans', sans-serif; font-weight: 600; font-size: 15px; color: rgba(0,0,0,0.7); line-height: 1.8;">
+                                Sandycroft, Reelig<br />Kirkhill<br />IV5 7PP
+                            </address>
+                        </div>
+
+                        <div style="margin-bottom: 36px;">
+                            <p style="font-family: 'Public Sans', sans-serif; font-weight: 800; font-size: 13px; color: #000; letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 6px;">Sessions</p>
+                            <p style="font-family: 'Public Sans', sans-serif; font-weight: 600; font-size: 15px; color: rgba(0,0,0,0.7); line-height: 1.7;">
+                                Tuesday to Friday mornings<br />Sandycroft, Reelig, Kirkhill
+                            </p>
+                        </div>
+
+                        <div style="padding-top: 24px; border-top: 1px solid rgba(0,0,0,0.12); margin-bottom: 36px;">
+                            <p style="font-family: 'Public Sans', sans-serif; font-weight: 800; font-size: 13px; color: #000; letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 14px;">Follow us</p>
+                            <a
+                                href="https://www.facebook.com/HighlandGroupRDA"
+                                target="_blank"
+                                rel="noreferrer"
+                                style="display: inline-flex; align-items: center; gap: 10px; font-family: 'Public Sans', sans-serif; font-weight: 700; font-size: 14px; color: rgba(0,0,0,0.7); text-decoration: none;"
+                                onmouseover="this.style.textDecoration='underline'"
+                                onmouseout="this.style.textDecoration='none'"
                             >
-                                Send a message
-                            </h2>
-                            <form
-                                class="mt-4 space-y-4"
-                                action="/api/contact"
-                                method="post"
-                                data-contact-form
-                            >
-                                {
-                                    !turnstileSiteKey && (
-                                        <p class="rounded-md border border-amber-300 bg-amber-50 px-3 py-2 text-sm font-semibold text-amber-900">
-                                            Turnstile is not configured. Set
-                                            PUBLIC_TURNSTILE_SITE_KEY and
-                                            redeploy to enable the form.
-                                        </p>
-                                    )
-                                }
-                                <div>
-                                    <label
-                                        class="block text-sm font-semibold text-black"
-                                        >Name</label
-                                    >
-                                    <input
-                                        class="mt-2 w-full rounded-md border border-black/20 bg-white px-3 py-2 text-black"
-                                        type="text"
-                                        name="name"
-                                        autocomplete="name"
-                                        required
-                                    />
+                                <span style="width: 34px; height: 34px; border-radius: 9999px; border: 1.5px solid rgba(0,0,0,0.2); display: flex; align-items: center; justify-content: center;">
+                                    <svg width="15" height="15" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
+                                        <path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z"/>
+                                    </svg>
+                                </span>
+                                Facebook
+                            </a>
+                        </div>
+
+                        <!-- Map -->
+                        <div style="border-radius: 7px; overflow: hidden; border: 1px solid rgba(0,0,0,0.1);">
+                            <iframe
+                                title="Highland Group RDA location"
+                                src="https://www.google.com/maps?q=IV5%207PP&z=11&output=embed"
+                                style="width: 100%; height: 220px; border: 0; display: block;"
+                                loading="lazy"
+                                referrerpolicy="no-referrer-when-downgrade"
+                            ></iframe>
+                        </div>
+                    </div>
+
+                    <!-- Right: form -->
+                    <div style="background: #e2e2e2; border-radius: 7px; padding: clamp(32px, 4vw, 52px);">
+                        <p style="font-family: 'Merriweather', serif; font-weight: 700; font-size: 22px; color: #000; margin-bottom: 6px;">Send us a message</p>
+                        <p style="font-family: 'Public Sans', sans-serif; font-weight: 600; font-size: 14px; color: rgba(0,0,0,0.5); margin-bottom: 28px;">
+                            Fields marked <span style="color: #7DA371;">*</span> are required.
+                        </p>
+
+                        {!turnstileSiteKey && (
+                            <p style="border-radius: 6px; border: 1px solid #fbbf24; background: #fffbeb; padding: 10px 14px; font-family: 'Public Sans', sans-serif; font-weight: 600; font-size: 13px; color: #92400e; margin-bottom: 20px;">
+                                Turnstile is not configured. Set PUBLIC_TURNSTILE_SITE_KEY and redeploy to enable the form.
+                            </p>
+                        )}
+
+                        <form
+                            action="/api/contact"
+                            method="post"
+                            data-contact-form
+                            style="display: flex; flex-direction: column; gap: 22px;"
+                        >
+                            <!-- Name + Email -->
+                            <div class="name-email-row" style="display: grid; grid-template-columns: 1fr 1fr; gap: 16px;">
+                                <div style="display: flex; flex-direction: column; gap: 8px;">
+                                    <label for="cf-name" style="font-family: 'Public Sans', sans-serif; font-weight: 700; font-size: 13px; color: rgba(0,0,0,0.65); letter-spacing: 0.04em; text-transform: uppercase;">
+                                        Your name <span style="color: #7DA371;">*</span>
+                                    </label>
+                                    <input id="cf-name" class="field-input" type="text" name="name" placeholder="Jane Smith" autocomplete="name" required />
                                 </div>
-                                <div>
-                                    <label
-                                        class="block text-sm font-semibold text-black"
-                                        >Email</label
-                                    >
-                                    <input
-                                        class="mt-2 w-full rounded-md border border-black/20 bg-white px-3 py-2 text-black"
-                                        type="email"
-                                        name="email"
-                                        autocomplete="email"
-                                        required
-                                    />
+                                <div style="display: flex; flex-direction: column; gap: 8px;">
+                                    <label for="cf-email" style="font-family: 'Public Sans', sans-serif; font-weight: 700; font-size: 13px; color: rgba(0,0,0,0.65); letter-spacing: 0.04em; text-transform: uppercase;">
+                                        Email address <span style="color: #7DA371;">*</span>
+                                    </label>
+                                    <input id="cf-email" class="field-input" type="email" name="email" placeholder="jane@example.com" autocomplete="email" required />
                                 </div>
-                                <div>
-                                    <label
-                                        class="block text-sm font-semibold text-black"
-                                        >Message</label
-                                    >
-                                    <textarea
-                                        class="mt-2 w-full rounded-md border border-black/20 bg-white px-3 py-2 text-black"
-                                        name="message"
-                                        rows="4"
-                                        required></textarea>
-                                </div>
-                                <div
-                                    class="cf-turnstile"
-                                    data-sitekey={turnstileSiteKey}
-                                >
-                                </div>
-                                <p
-                                    class="text-sm font-semibold text-black"
-                                    data-form-message
-                                >
+                            </div>
+
+                            <!-- Phone -->
+                            <div style="display: flex; flex-direction: column; gap: 8px;">
+                                <label for="cf-phone" style="font-family: 'Public Sans', sans-serif; font-weight: 700; font-size: 13px; color: rgba(0,0,0,0.65); letter-spacing: 0.04em; text-transform: uppercase;">
+                                    Phone number <span style="color: rgba(0,0,0,0.3); font-weight: 600;">(optional)</span>
+                                </label>
+                                <input id="cf-phone" class="field-input phone-field" type="tel" name="phone" placeholder="Optional" autocomplete="tel" style="max-width: 50%;" />
+                            </div>
+
+                            <!-- Enquiry type -->
+                            <div style="display: flex; flex-direction: column; gap: 10px;">
+                                <p style="font-family: 'Public Sans', sans-serif; font-weight: 700; font-size: 13px; color: rgba(0,0,0,0.65); letter-spacing: 0.04em; text-transform: uppercase;">
+                                    What is your enquiry about? <span style="color: #7DA371;">*</span>
                                 </p>
+                                <div class="radio-group">
+                                    {[
+                                        { value: "general",     label: "General enquiry" },
+                                        { value: "volunteer",   label: "Volunteering" },
+                                        { value: "participate", label: "Applying to participate" },
+                                        { value: "sponsor",     label: "Sponsoring a pony" },
+                                        { value: "donate",      label: "Donating / fundraising" },
+                                        { value: "media",       label: "Press / media" },
+                                    ].map(opt => (
+                                        <label class="radio-label">
+                                            <input type="radio" name="enquiry" value={opt.value} />
+                                            <span class="radio-custom" />
+                                            <span class="radio-text">{opt.label}</span>
+                                        </label>
+                                    ))}
+                                </div>
+                            </div>
+
+                            <!-- Message -->
+                            <div style="display: flex; flex-direction: column; gap: 8px;">
+                                <label for="cf-message" style="font-family: 'Public Sans', sans-serif; font-weight: 700; font-size: 13px; color: rgba(0,0,0,0.65); letter-spacing: 0.04em; text-transform: uppercase;">
+                                    Message <span style="color: #7DA371;">*</span>
+                                </label>
+                                <textarea id="cf-message" class="field-input" name="message" rows="5" placeholder="Tell us a bit about what you'd like to know…" style="resize: vertical; line-height: 1.6;" required></textarea>
+                            </div>
+
+                            <!-- How did you hear -->
+                            <div style="display: flex; flex-direction: column; gap: 8px;">
+                                <label for="cf-hear" style="font-family: 'Public Sans', sans-serif; font-weight: 700; font-size: 13px; color: rgba(0,0,0,0.65); letter-spacing: 0.04em; text-transform: uppercase;">
+                                    How did you hear about us? <span style="color: rgba(0,0,0,0.3); font-weight: 600;">(optional)</span>
+                                </label>
+                                <select id="cf-hear" class="field-input" name="hear">
+                                    <option value="">Select an option…</option>
+                                    <option value="search">Search engine</option>
+                                    <option value="social">Social media</option>
+                                    <option value="word">Word of mouth</option>
+                                    <option value="nhs">NHS / healthcare referral</option>
+                                    <option value="school">School or college</option>
+                                    <option value="other">Other</option>
+                                </select>
+                            </div>
+
+                            <!-- Turnstile -->
+                            {turnstileSiteKey && (
+                                <div class="cf-turnstile" data-sitekey={turnstileSiteKey} />
+                            )}
+
+                            <!-- Submit -->
+                            <div style="padding-top: 4px;">
                                 <button
-                                    class="inline-flex items-center rounded-full border border-black/20 px-5 py-2 text-sm font-semibold uppercase tracking-wide text-black"
                                     type="submit"
                                     data-form-submit
+                                    style="display: inline-flex; align-items: center; gap: 10px; background: #7DA371; color: #fff; border: none; border-radius: 9999px; padding: 15px 32px; font-family: 'Public Sans', sans-serif; font-weight: 800; font-size: 14px; letter-spacing: 0.06em; text-transform: uppercase; cursor: pointer; transition: opacity 0.2s ease;"
+                                    onmouseover="this.style.opacity='0.88'"
+                                    onmouseout="this.style.opacity='1'"
                                 >
                                     Send message
+                                    <svg width="14" height="14" viewBox="0 0 16 16" fill="none" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+                                        <path d="M3 8h10M9 4l4 4-4 4"/>
+                                    </svg>
                                 </button>
-                            </form>
-                        </div>
+                                <p data-form-message style="margin-top: 14px; font-family: 'Public Sans', sans-serif; font-weight: 600; font-size: 14px; color: #4a7040; line-height: 1.6;"></p>
+                                <p style="margin-top: 10px; font-family: 'Public Sans', sans-serif; font-weight: 600; font-size: 13px; color: rgba(0,0,0,0.4); line-height: 1.6;">
+                                    We aim to respond within a few working days.
+                                </p>
+                            </div>
+                        </form>
+                    </div>
+
+                </div>
+            </section>
+
+            <!-- ── QUICK LINKS ── -->
+            <section class="ql-section" style="background: #1e2e1a; padding: clamp(48px, 8vw, 72px) clamp(24px, 6vw, 72px);">
+                <div style="max-width: 1200px; margin: 0 auto;">
+                    <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: 14px;">
+                        More from us
+                    </p>
+                    <div style="width: 36px; height: 2px; background: #7DA371; margin-bottom: 36px;" />
+                    <div class="ql-grid" style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px;">
+                        <a class="ql-card" href="/volunteer-application">
+                            <img class="ql-card-img" src="/Vols5-2880w-1024x768.avif" alt="Volunteers at Highland Group RDA" loading="lazy" decoding="async" />
+                            <div style="position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.2) 65%);" />
+                            <div class="ql-card-band">
+                                <p class="ql-card-title">Apply to volunteer</p>
+                                <p class="ql-card-sub">Fill in our volunteer application form.</p>
+                            </div>
+                        </a>
+                        <a class="ql-card" href="/participant-application">
+                            <img class="ql-card-img" src="/Samantha-and-Connolly-1280.webp" alt="Participant riding at Highland Group RDA" loading="lazy" decoding="async" />
+                            <div style="position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.2) 65%);" />
+                            <div class="ql-card-band">
+                                <p class="ql-card-title">Apply to participate</p>
+                                <p class="ql-card-sub">Find out how to join our sessions.</p>
+                            </div>
+                        </a>
+                        <a class="ql-card" href="https://www.justgiving.com/charity/highlandgrouprda" target="_blank" rel="noreferrer">
+                            <img class="ql-card-img" src="/alineofponies-1920w.webp" alt="Ponies at Highland Group RDA" loading="lazy" decoding="async" />
+                            <div style="position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.2) 65%);" />
+                            <div class="ql-card-band">
+                                <p class="ql-card-title">Donate</p>
+                                <p class="ql-card-sub">Support us via JustGiving.</p>
+                            </div>
+                        </a>
                     </div>
                 </div>
             </section>
-            <section
-                class="w-full max-w-[1200px] mx-auto px-0 sm:px-8 mt-0 pb-0"
-            >
-                <div class="bg-[#d6d6d6] px-6 sm:px-8 py-6 sm:py-8">
-                    <div class="h-px w-full bg-black/20 mb-6"></div>
-                    <div
-                        class="overflow-hidden rounded-[7px] border border-black/10"
-                    >
-                        <iframe
-                            title="Highland Group RDA location"
-                            src="https://www.google.com/maps?q=IV5%207PP&z=11&output=embed"
-                            class="w-full h-[300px] sm:h-[380px] border-0"
-                            loading="lazy"
-                            referrerpolicy="no-referrer-when-downgrade"
-                        ></iframe>
-                    </div>
-                </div>
-            </section>
-            <SiteFooter fullBleedOnMobile />
+
         </main>
+        <SiteFooter fullBleedOnMobile />
     </div>
+
+    <script>
+        const nav = document.getElementById("site-nav");
+        if (nav) {
+            window.addEventListener("scroll", () => {
+                nav.classList.toggle("scrolled", window.scrollY > 40);
+            }, { passive: true });
+        }
+    </script>
 </BaseLayout>