From 233e9320b505ed986cccb0cabf9341887c136241 Mon Sep 17 00:00:00 2001
From: Omair Saleh <omair@quikcue.com>
Date: Tue, 3 Mar 2026 22:35:25 +0800
Subject: [PATCH] stunning alternating editorial rows + fix invisible gray text
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

LAYOUT:
- Killed boring 2x2 grid boxes
- Full-width alternating image/text rows (7:5 split)
- Image left/text right on rows 1,3 — flipped on rows 2,4
- Creates visual rhythm like an editorial magazine spread
- gap-px between rows for signature pattern
- Images at 2:1 cinematic aspect, large and atmospheric

CONTRAST FIX:
- Pain stat 'before' text: gray-200 (invisible) -> gray-400 (readable)
- 'Systems do.' heading: gray-300 -> gray-400
- Both stats now clearly visible while maintaining muted/bold contrast
---
 pledge-now-pay-later/src/app/page.tsx |   91 +-
 screenshots/pillars-test.html         | 1791 +++++++++++++++++++++++++
 2 files changed, 1844 insertions(+), 38 deletions(-)
 create mode 100644 screenshots/pillars-test.html

diff --git a/pledge-now-pay-later/src/app/page.tsx b/pledge-now-pay-later/src/app/page.tsx
index c503d8d..800ad69 100644
--- a/pledge-now-pay-later/src/app/page.tsx
+++ b/pledge-now-pay-later/src/app/page.tsx
@@ -138,7 +138,7 @@ export default function HomePage() {
         </div>
       </section>
 
-      {/* ━━ THE PLEDGE GAP — scenario-based personas ━━━━━━━━━━━━ */}
+      {/* ━━ THE PLEDGE GAP — alternating editorial rows ━━━━━━━━━ */}
       <section className="py-20 md:py-28 px-6">
         <div className="max-w-7xl mx-auto">
           {/* Eyebrow — border-l-2 accent (signature pattern 1) */}
@@ -150,52 +150,67 @@ export default function HomePage() {
           <h2 className="text-4xl md:text-5xl font-black text-gray-900 tracking-tight">
             People don&apos;t break promises.
           </h2>
-          <p className="text-3xl md:text-4xl font-black text-gray-300 tracking-tight mt-1">
+          <p className="text-3xl md:text-4xl font-black text-gray-400 tracking-tight mt-1">
             Systems do.
           </p>
           <p className="text-base text-gray-500 mt-4 max-w-lg">
             We built the missing system between &ldquo;I&apos;ll donate&rdquo; and the money arriving.
           </p>
 
-          {/* 2×2 gap-px grid */}
-          <div className="grid md:grid-cols-2 gap-px bg-gray-200 mt-14">
-            {PERSONAS.map((p) => (
-              <Link
-                key={p.slug}
-                href={`/for/${p.slug}`}
-                className="group bg-white overflow-hidden"
-              >
-                {/* Cinematic image strip */}
-                <div className="aspect-[2/1] relative overflow-hidden">
-                  <Image
-                    src={p.image}
-                    alt={p.scenario}
-                    fill
-                    className="object-cover transition-opacity duration-300 group-hover:opacity-90"
-                    sizes="(max-width: 768px) 100vw, 50vw"
-                  />
-                </div>
+          {/* Alternating image/text rows — gap-px between */}
+          <div className="flex flex-col gap-px bg-gray-200 mt-14">
+            {PERSONAS.map((p, i) => {
+              const imgFirst = i % 2 === 0
+              return (
+                <Link
+                  key={p.slug}
+                  href={`/for/${p.slug}`}
+                  className="group bg-white block"
+                >
+                  <div className="grid md:grid-cols-12 items-stretch">
+                    {/* Image — 7 cols, cinematic */}
+                    <div
+                      className={`md:col-span-7 ${!imgFirst ? "md:order-2" : ""} relative overflow-hidden aspect-[2/1]`}
+                    >
+                      <Image
+                        src={p.image}
+                        alt={p.scenario}
+                        fill
+                        className="object-cover transition-opacity duration-300 group-hover:opacity-90"
+                        sizes="(max-width: 768px) 100vw, 58vw"
+                      />
+                    </div>
 
-                {/* Text — scenario + pain stats + story */}
-                <div className="p-6 md:p-8">
-                  <h3 className="text-base font-black text-gray-900 group-hover:text-promise-blue transition-colors">
-                    {p.scenario}
-                  </h3>
+                    {/* Text — 5 cols */}
+                    <div
+                      className={`md:col-span-5 ${!imgFirst ? "md:order-1" : ""} p-8 md:p-12 lg:p-14 flex flex-col justify-center`}
+                    >
+                      <h3 className="text-lg md:text-xl font-black text-gray-900 group-hover:text-promise-blue transition-colors">
+                        {p.scenario}
+                      </h3>
 
-                  {/* Pain stats — the gap */}
-                  <div className="mt-4 space-y-0.5">
-                    <p className="text-2xl md:text-3xl font-black text-gray-200 tracking-tight leading-tight">{p.stat1}</p>
-                    <p className="text-2xl md:text-3xl font-black text-gray-900 tracking-tight leading-tight">{p.stat2}</p>
+                      {/* Pain stats — the gap, visible contrast */}
+                      <div className="mt-5 space-y-1">
+                        <p className="text-xl md:text-2xl lg:text-3xl font-black text-gray-400 tracking-tight leading-tight">
+                          {p.stat1}
+                        </p>
+                        <p className="text-xl md:text-2xl lg:text-3xl font-black text-gray-900 tracking-tight leading-tight">
+                          {p.stat2}
+                        </p>
+                      </div>
+
+                      <p className="text-sm text-gray-500 leading-relaxed mt-5">
+                        {p.copy}
+                      </p>
+
+                      <p className="text-xs font-semibold text-promise-blue mt-6 group-hover:underline">
+                        {p.cta} &rarr;
+                      </p>
+                    </div>
                   </div>
-
-                  <p className="text-sm text-gray-500 leading-relaxed mt-4">{p.copy}</p>
-
-                  <p className="text-xs font-semibold text-promise-blue mt-5 group-hover:underline transition-all">
-                    {p.cta} &rarr;
-                  </p>
-                </div>
-              </Link>
-            ))}
+                </Link>
+              )
+            })}
           </div>
         </div>
       </section>
diff --git a/screenshots/pillars-test.html b/screenshots/pillars-test.html
new file mode 100644
index 0000000..e9ff9c8
--- /dev/null
+++ b/screenshots/pillars-test.html
@@ -0,0 +1,1791 @@
+<!doctype html>
+<html lang="en" class="no-js">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport"
+          content="width=device-width, initial-scale=1.0, maximum-scale=5.0, viewport-fit=cover">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <script>document.documentElement.className = document.documentElement.className.replace(/\bno-js\b/, 'js');</script>
+	<title>Charity Right</title>
+<meta name='robots' content='max-image-preview:large' />
+	<style>img:is([sizes="auto" i], [sizes^="auto," i]) { contain-intrinsic-size: 3000px 1500px }</style>
+	
+<!--BEGIN: TRACKING CODE MANAGER (v2.4.0) BY INTELLYWP.COM IN HEAD//-->
+<!-- Google Tag Manager -->
+<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
+new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
+j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
+'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
+})(window,document,'script','dataLayer','GTM-PX5XJXX');</script>
+<!-- End Google Tag Manager -->
+<meta name="facebook-domain-verification" content="umic2aau4kjyuixjwre4x9gyli95lx" />
+<meta name="google-site-verification" content="X5QJLnfmZdAfT1-kWyAM9PwNs4Pq3Wi-Y6hBVjVEP2Q" />
+<script>
+document.addEventListener('DOMContentLoaded', function () {
+  
+  // 1. Logo Replacement Logic
+  const originalSrc = "https://app.charityright.org.uk/app/assets/images/dhul-hijjah/logo.svg";
+  const newSrc = "https://app.charityright.org.uk/app/assets/campaigns/10-days-of-giving/logo.svg";
+
+  const replaceImage = () => {
+    const images = document.querySelectorAll('img');
+    images.forEach(img => {
+      const currentSrc = img.getAttribute('src') || img.getAttribute('data-src');
+      if (currentSrc && currentSrc.includes("dhul-hijjah/logo.svg")) {
+        img.setAttribute('src', newSrc);
+        if (img.hasAttribute('data-src')) {
+          img.setAttribute('data-src', newSrc);
+        }
+      }
+    });
+  };
+
+  replaceImage();
+  setTimeout(replaceImage, 500);
+  setTimeout(replaceImage, 1000);
+  
+  // --- 2. UPDATED BACKGROUND GRADIENT LOGIC ---
+  // We look for the unique container ID you provided, then find its parent Section
+  const thirtyNightsContainer = document.getElementById('thirtynights-container');
+  
+  if (thirtyNightsContainer) {
+      // Find the closest parent <section> tag
+      const parentSection = thirtyNightsContainer.closest('section');
+      
+      if (parentSection) {
+          parentSection.style.setProperty('background-image', 'linear-gradient(298deg,#2f135b 5.93%,#2d1259 71.41%,#e42281 130.5%)', 'important');
+          // Ensure the background covers the whole area
+          parentSection.style.setProperty('background-size', 'cover', 'important');
+          parentSection.style.setProperty('background-repeat', 'no-repeat', 'important');
+      }
+  }
+
+  // --- 3. Extra styling for card wrappers if they exist ---
+  const container = document.getElementById('vl-maxwidth-container-block_e6e11ba604ebc68847154e9959b5fcd1');
+  if (container) {
+    const wrappers = container.querySelectorAll('.card-wrapper');
+    wrappers.forEach(wrapper => {
+      wrapper.style.backgroundColor = '#e0efff';
+      wrapper.style.border = 'none';
+    });
+  }
+  
+});
+</script>
+
+<script>
+    document.addEventListener('DOMContentLoaded', function() {
+        const donationContainers = document.querySelectorAll('div[x-data="AppealDonate"]');
+    
+        donationContainers.forEach(container => {
+            const donationList = container.querySelector('ul.mt-4.space-y-4');
+    
+            let isQurbaniSection = false;
+            let firstDonationItem = null;
+    
+            if (donationList) {
+                const listItems = donationList.querySelectorAll('li');
+    
+                if (listItems.length > 0) {
+                     firstDonationItem = listItems[0];
+
+                     for (let i = 0; i < listItems.length; i++) {
+                         const item = listItems[i];
+                         const descriptionSpan = item.querySelector('span:last-child');
+    
+                         if (descriptionSpan && descriptionSpan.textContent.includes("X Qurbani in")) {
+                             isQurbaniSection = true;
+                             break;
+                         }
+                     }
+                }
+            }
+ 
+            if (isQurbaniSection && firstDonationItem) {
+
+                const customAmountInput = container.querySelector('input#amount');
+                if (customAmountInput) {
+                    const customInputWrapper = customAmountInput.closest('div.mt-4.group');
+    
+                    if (customInputWrapper) {
+                        customInputWrapper.style.display = 'none';
+                    }
+                }
+    
+                firstDonationItem.click();
+            }
+        });
+    });
+</script>
+
+<script>
+document.addEventListener('DOMContentLoaded', function () {
+
+    const url = location.href;
+
+    const allowed =
+        url.includes("/project/30-nights-of-giving") ||
+        url.includes("/project/night-of-power") ||
+        url.includes("/");
+
+    if (!allowed) return;
+
+    const spans = document.querySelectorAll('.text-center span');
+
+    spans.forEach(span => {
+        if (span.textContent.trim() === "RAMADAN 2025") {
+            span.textContent = "RAMADAN 2026";
+        }
+    });
+
+});
+</script>
+
+<script>
+window.addEventListener('load', function() {
+    // 1. CONFIGURATION
+    var minAmount = 60; // Set your minimum limit here
+    
+    // 2. ELEMENT SELECTORS
+    var amountInput = document.getElementById('where-most-needed-amount-input');
+    var errorText = document.getElementById('amount-error');
+    var nextButton = document.querySelector('.thirtynights-card[data-page-name="select-amounts"] .thirtynights-forward');
+    var presetButtons = document.querySelectorAll('.thirtynights-single-project-amount');
+
+    if (!amountInput || !errorText) return;
+
+    // 3. MAIN VALIDATION FUNCTION
+    function validateCustomMinimum() {
+        var currentVal = parseFloat(amountInput.value);
+
+        if (!currentVal || currentVal < minAmount) {
+            errorText.style.display = 'block';
+            errorText.style.color = '#ef4444'; 
+            errorText.innerText = "Due to processing fees, the minimum donation amount is £" + minAmount;
+
+            if (nextButton) {
+                nextButton.setAttribute('disabled', 'disabled');
+                nextButton.style.opacity = '0.5';
+                nextButton.style.cursor = 'not-allowed';
+            }
+        } else {
+            errorText.style.display = 'none';
+
+            if (nextButton) {
+                nextButton.removeAttribute('disabled');
+                nextButton.style.opacity = '1';
+                nextButton.style.cursor = 'pointer';
+            }
+        }
+    }
+
+    // 4. APPLY LISTENERS
+    validateCustomMinimum();
+
+    amountInput.addEventListener('input', validateCustomMinimum);
+    amountInput.addEventListener('change', validateCustomMinimum);
+    
+    if (presetButtons) {
+        presetButtons.forEach(function(btn) {
+            btn.addEventListener('click', function() {
+                setTimeout(validateCustomMinimum, 100);
+            });
+        });
+    }
+
+    // 5. OVERRIDE HTML ATTRIBUTE
+    amountInput.setAttribute('min', minAmount);
+});
+</script>
+<!--END: https://wordpress.org/plugins/tracking-code-manager IN HEAD//-->    <style id="cr-inapp-fixes">
+    /* === UNIVERSAL (safe for all browsers) === */
+    /* Prevent text inflation — harmless everywhere */
+    html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
+    /* Livewire/Alpine flicker fix — always needed */
+    [x-cloak] { display: none !important; }
+
+    /* === IN-APP BROWSER ONLY (scoped via JS-added class) === */
+    /* Prevent auto-zoom on input focus — iOS in-app zooms on <16px */
+    .cr-is-inapp input, .cr-is-inapp select, .cr-is-inapp textarea {
+        font-size: max(16px, 1em) !important;
+    }
+    /* Safe area insets for notched devices in WebViews */
+    .cr-is-inapp body {
+        padding-bottom: env(safe-area-inset-bottom, 0px);
+    }
+    /* Fix rubber-banding scroll in WebViews */
+    .cr-is-inapp { overscroll-behavior-y: none; }
+    /* 100vh fix for WebViews */
+    .cr-is-inapp .min-h-screen,
+    .cr-is-inapp [style*="100vh"] {
+        min-height: 100vh; min-height: 100dvh;
+    }
+    /* Minimum touch targets — in-app only */
+    .cr-is-inapp a,
+    .cr-is-inapp button,
+    .cr-is-inapp [role="button"],
+    .cr-is-inapp input[type="submit"],
+    .cr-is-inapp input[type="button"] {
+        min-height: 44px;
+    }
+
+    /* === BANNER (hidden by default, shown by JS) === */
+    #cr-inapp-banner {
+        display: none; position: fixed; bottom: 0; left: 0; right: 0; z-index: 999999;
+        padding: 14px 20px calc(14px + env(safe-area-inset-bottom, 0px));
+        background: rgba(26,26,46,.97); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
+        border-top: 1px solid rgba(228,34,129,.25);
+        text-align: center; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+    }
+    #cr-inapp-banner p {
+        color: #fff; font-size: 13px; font-weight: 600; margin: 0 0 10px; line-height: 1.3;
+    }
+    #cr-inapp-banner .cr-iab-open {
+        display: inline-block; padding: 11px 28px;
+        background: #E42281; color: #fff !important; font-size: 13px; font-weight: 700;
+        border-radius: 8px; text-decoration: none !important; min-height: 44px; line-height: 22px;
+    }
+    #cr-inapp-banner .cr-iab-dismiss {
+        display: block; margin: 10px auto 0; background: none; border: none;
+        color: rgba(255,255,255,.35); font-size: 11px; cursor: pointer; padding: 6px;
+        min-height: 30px;
+    }
+    </style>
+        <link rel="preconnect" href="https://app.charityright.org.uk" crossorigin>
+    <link rel="dns-prefetch" href="https://app.charityright.org.uk">
+    <link rel="preconnect" href="https://js.stripe.com" crossorigin>
+    <link rel="dns-prefetch" href="https://js.stripe.com">
+    <link rel="preconnect" href="https://fonts.bunny.net" crossorigin>
+    <link rel='stylesheet' id='wp-block-library-css' href='https://www.charityright.org.uk/wp-includes/css/dist/block-library/style.min.css?ver=6.8.1' type='text/css' media='all' />
+<style id='global-styles-inline-css' type='text/css'>
+:root{--wp--preset--aspect-ratio--square: 1;--wp--preset--aspect-ratio--4-3: 4/3;--wp--preset--aspect-ratio--3-4: 3/4;--wp--preset--aspect-ratio--3-2: 3/2;--wp--preset--aspect-ratio--2-3: 2/3;--wp--preset--aspect-ratio--16-9: 16/9;--wp--preset--aspect-ratio--9-16: 9/16;--wp--preset--color--black: #000000;--wp--preset--color--cyan-bluish-gray: #abb8c3;--wp--preset--color--white: #ffffff;--wp--preset--color--pale-pink: #f78da7;--wp--preset--color--vivid-red: #cf2e2e;--wp--preset--color--luminous-vivid-orange: #ff6900;--wp--preset--color--luminous-vivid-amber: #fcb900;--wp--preset--color--light-green-cyan: #7bdcb5;--wp--preset--color--vivid-green-cyan: #00d084;--wp--preset--color--pale-cyan-blue: #8ed1fc;--wp--preset--color--vivid-cyan-blue: #0693e3;--wp--preset--color--vivid-purple: #9b51e0;--wp--preset--color--color-white: #ffffff;--wp--preset--color--color-theme-black: #101010;--wp--preset--color--color-theme-background-blue: #EEF6FE;--wp--preset--color--color-theme-pastel-blue: #F0F6FE;--wp--preset--color--color-theme-dark-blue: #4CA4FD;--wp--preset--color--color-theme-light-blue: #D2E9FF;--wp--preset--color--color-theme-pink: #E42281;--wp--preset--color--color-theme-pink-grey: #FBDEED;--wp--preset--color--color-theme-rose: #FDF0F0;--wp--preset--color--color-theme-medium-rose: #C56D6D;--wp--preset--color--color-theme-dark-rose: #8B4747;--wp--preset--color--color-theme-green: #039A3F;--wp--preset--color--color-theme-lightpastel-green: #26C967;--wp--preset--color--color-theme-pastel-green: #D3F1D7;--wp--preset--color--color-theme-light-green: #E4FFEF;--wp--preset--color--color-theme-dark-green: #1C974D;--wp--preset--color--color-theme-red: #E42222;--wp--preset--color--color-theme-yellow: #F9C63B;--wp--preset--color--color-theme-light-yellow: #FCEEC3;--wp--preset--color--color-theme-grey: #D9D9D9;--wp--preset--color--color-theme-light-grey: #DAE0E5;--wp--preset--color--color-theme-dark-grey: #6E7481;--wp--preset--color--color-theme-purple: #ab1f91;--wp--preset--gradient--vivid-cyan-blue-to-vivid-purple: linear-gradient(135deg,rgba(6,147,227,1) 0%,rgb(155,81,224) 100%);--wp--preset--gradient--light-green-cyan-to-vivid-green-cyan: linear-gradient(135deg,rgb(122,220,180) 0%,rgb(0,208,130) 100%);--wp--preset--gradient--luminous-vivid-amber-to-luminous-vivid-orange: linear-gradient(135deg,rgba(252,185,0,1) 0%,rgba(255,105,0,1) 100%);--wp--preset--gradient--luminous-vivid-orange-to-vivid-red: linear-gradient(135deg,rgba(255,105,0,1) 0%,rgb(207,46,46) 100%);--wp--preset--gradient--very-light-gray-to-cyan-bluish-gray: linear-gradient(135deg,rgb(238,238,238) 0%,rgb(169,184,195) 100%);--wp--preset--gradient--cool-to-warm-spectrum: linear-gradient(135deg,rgb(74,234,220) 0%,rgb(151,120,209) 20%,rgb(207,42,186) 40%,rgb(238,44,130) 60%,rgb(251,105,98) 80%,rgb(254,248,76) 100%);--wp--preset--gradient--blush-light-purple: linear-gradient(135deg,rgb(255,206,236) 0%,rgb(152,150,240) 100%);--wp--preset--gradient--blush-bordeaux: linear-gradient(135deg,rgb(254,205,165) 0%,rgb(254,45,45) 50%,rgb(107,0,62) 100%);--wp--preset--gradient--luminous-dusk: linear-gradient(135deg,rgb(255,203,112) 0%,rgb(199,81,192) 50%,rgb(65,88,208) 100%);--wp--preset--gradient--pale-ocean: linear-gradient(135deg,rgb(255,245,203) 0%,rgb(182,227,212) 50%,rgb(51,167,181) 100%);--wp--preset--gradient--electric-grass: linear-gradient(135deg,rgb(202,248,128) 0%,rgb(113,206,126) 100%);--wp--preset--gradient--midnight: linear-gradient(135deg,rgb(2,3,129) 0%,rgb(40,116,252) 100%);--wp--preset--font-size--small: 13px;--wp--preset--font-size--medium: 20px;--wp--preset--font-size--large: 36px;--wp--preset--font-size--x-large: 42px;--wp--preset--spacing--20: 0.44rem;--wp--preset--spacing--30: 0.67rem;--wp--preset--spacing--40: 1rem;--wp--preset--spacing--50: 1.5rem;--wp--preset--spacing--60: 2.25rem;--wp--preset--spacing--70: 3.38rem;--wp--preset--spacing--80: 5.06rem;--wp--preset--shadow--natural: 6px 6px 9px rgba(0, 0, 0, 0.2);--wp--preset--shadow--deep: 12px 12px 50px rgba(0, 0, 0, 0.4);--wp--preset--shadow--sharp: 6px 6px 0px rgba(0, 0, 0, 0.2);--wp--preset--shadow--outlined: 6px 6px 0px -3px rgba(255, 255, 255, 1), 6px 6px rgba(0, 0, 0, 1);--wp--preset--shadow--crisp: 6px 6px 0px rgba(0, 0, 0, 1);}.wp-block-heading{--wp--preset--font-family--epilogue-sans: "Epilogue", sans-serif;}:root { --wp--style--global--content-size: 900px;--wp--style--global--wide-size: 1280px; }:where(body) { margin: 0; }.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }.wp-site-blocks > .alignright { float: right; margin-left: 2em; }.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }:where(.is-layout-flex){gap: 0.5em;}:where(.is-layout-grid){gap: 0.5em;}.is-layout-flow > .alignleft{float: left;margin-inline-start: 0;margin-inline-end: 2em;}.is-layout-flow > .alignright{float: right;margin-inline-start: 2em;margin-inline-end: 0;}.is-layout-flow > .aligncenter{margin-left: auto !important;margin-right: auto !important;}.is-layout-constrained > .alignleft{float: left;margin-inline-start: 0;margin-inline-end: 2em;}.is-layout-constrained > .alignright{float: right;margin-inline-start: 2em;margin-inline-end: 0;}.is-layout-constrained > .aligncenter{margin-left: auto !important;margin-right: auto !important;}.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)){max-width: var(--wp--style--global--content-size);margin-left: auto !important;margin-right: auto !important;}.is-layout-constrained > .alignwide{max-width: var(--wp--style--global--wide-size);}body .is-layout-flex{display: flex;}.is-layout-flex{flex-wrap: wrap;align-items: center;}.is-layout-flex > :is(*, div){margin: 0;}body .is-layout-grid{display: grid;}.is-layout-grid > :is(*, div){margin: 0;}body{font-family: var(--wp--preset--font-family--epilogue-sans);padding-top: 0px;padding-right: 0px;padding-bottom: 0px;padding-left: 0px;}a:where(:not(.wp-element-button)){text-decoration: underline;}:root :where(.wp-element-button, .wp-block-button__link){background-color: #32373c;border-width: 0;color: #fff;font-family: inherit;font-size: inherit;line-height: inherit;padding: calc(0.667em + 2px) calc(1.333em + 2px);text-decoration: none;}.has-black-color{color: var(--wp--preset--color--black) !important;}.has-cyan-bluish-gray-color{color: var(--wp--preset--color--cyan-bluish-gray) !important;}.has-white-color{color: var(--wp--preset--color--white) !important;}.has-pale-pink-color{color: var(--wp--preset--color--pale-pink) !important;}.has-vivid-red-color{color: var(--wp--preset--color--vivid-red) !important;}.has-luminous-vivid-orange-color{color: var(--wp--preset--color--luminous-vivid-orange) !important;}.has-luminous-vivid-amber-color{color: var(--wp--preset--color--luminous-vivid-amber) !important;}.has-light-green-cyan-color{color: var(--wp--preset--color--light-green-cyan) !important;}.has-vivid-green-cyan-color{color: var(--wp--preset--color--vivid-green-cyan) !important;}.has-pale-cyan-blue-color{color: var(--wp--preset--color--pale-cyan-blue) !important;}.has-vivid-cyan-blue-color{color: var(--wp--preset--color--vivid-cyan-blue) !important;}.has-vivid-purple-color{color: var(--wp--preset--color--vivid-purple) !important;}.has-color-white-color{color: var(--wp--preset--color--color-white) !important;}.has-color-theme-black-color{color: var(--wp--preset--color--color-theme-black) !important;}.has-color-theme-background-blue-color{color: var(--wp--preset--color--color-theme-background-blue) !important;}.has-color-theme-pastel-blue-color{color: var(--wp--preset--color--color-theme-pastel-blue) !important;}.has-color-theme-dark-blue-color{color: var(--wp--preset--color--color-theme-dark-blue) !important;}.has-color-theme-light-blue-color{color: var(--wp--preset--color--color-theme-light-blue) !important;}.has-color-theme-pink-color{color: var(--wp--preset--color--color-theme-pink) !important;}.has-color-theme-pink-grey-color{color: var(--wp--preset--color--color-theme-pink-grey) !important;}.has-color-theme-rose-color{color: var(--wp--preset--color--color-theme-rose) !important;}.has-color-theme-medium-rose-color{color: var(--wp--preset--color--color-theme-medium-rose) !important;}.has-color-theme-dark-rose-color{color: var(--wp--preset--color--color-theme-dark-rose) !important;}.has-color-theme-green-color{color: var(--wp--preset--color--color-theme-green) !important;}.has-color-theme-lightpastel-green-color{color: var(--wp--preset--color--color-theme-lightpastel-green) !important;}.has-color-theme-pastel-green-color{color: var(--wp--preset--color--color-theme-pastel-green) !important;}.has-color-theme-light-green-color{color: var(--wp--preset--color--color-theme-light-green) !important;}.has-color-theme-dark-green-color{color: var(--wp--preset--color--color-theme-dark-green) !important;}.has-color-theme-red-color{color: var(--wp--preset--color--color-theme-red) !important;}.has-color-theme-yellow-color{color: var(--wp--preset--color--color-theme-yellow) !important;}.has-color-theme-light-yellow-color{color: var(--wp--preset--color--color-theme-light-yellow) !important;}.has-color-theme-grey-color{color: var(--wp--preset--color--color-theme-grey) !important;}.has-color-theme-light-grey-color{color: var(--wp--preset--color--color-theme-light-grey) !important;}.has-color-theme-dark-grey-color{color: var(--wp--preset--color--color-theme-dark-grey) !important;}.has-color-theme-purple-color{color: var(--wp--preset--color--color-theme-purple) !important;}.has-black-background-color{background-color: var(--wp--preset--color--black) !important;}.has-cyan-bluish-gray-background-color{background-color: var(--wp--preset--color--cyan-bluish-gray) !important;}.has-white-background-color{background-color: var(--wp--preset--color--white) !important;}.has-pale-pink-background-color{background-color: var(--wp--preset--color--pale-pink) !important;}.has-vivid-red-background-color{background-color: var(--wp--preset--color--vivid-red) !important;}.has-luminous-vivid-orange-background-color{background-color: var(--wp--preset--color--luminous-vivid-orange) !important;}.has-luminous-vivid-amber-background-color{background-color: var(--wp--preset--color--luminous-vivid-amber) !important;}.has-light-green-cyan-background-color{background-color: var(--wp--preset--color--light-green-cyan) !important;}.has-vivid-green-cyan-background-color{background-color: var(--wp--preset--color--vivid-green-cyan) !important;}.has-pale-cyan-blue-background-color{background-color: var(--wp--preset--color--pale-cyan-blue) !important;}.has-vivid-cyan-blue-background-color{background-color: var(--wp--preset--color--vivid-cyan-blue) !important;}.has-vivid-purple-background-color{background-color: var(--wp--preset--color--vivid-purple) !important;}.has-color-white-background-color{background-color: var(--wp--preset--color--color-white) !important;}.has-color-theme-black-background-color{background-color: var(--wp--preset--color--color-theme-black) !important;}.has-color-theme-background-blue-background-color{background-color: var(--wp--preset--color--color-theme-background-blue) !important;}.has-color-theme-pastel-blue-background-color{background-color: var(--wp--preset--color--color-theme-pastel-blue) !important;}.has-color-theme-dark-blue-background-color{background-color: var(--wp--preset--color--color-theme-dark-blue) !important;}.has-color-theme-light-blue-background-color{background-color: var(--wp--preset--color--color-theme-light-blue) !important;}.has-color-theme-pink-background-color{background-color: var(--wp--preset--color--color-theme-pink) !important;}.has-color-theme-pink-grey-background-color{background-color: var(--wp--preset--color--color-theme-pink-grey) !important;}.has-color-theme-rose-background-color{background-color: var(--wp--preset--color--color-theme-rose) !important;}.has-color-theme-medium-rose-background-color{background-color: var(--wp--preset--color--color-theme-medium-rose) !important;}.has-color-theme-dark-rose-background-color{background-color: var(--wp--preset--color--color-theme-dark-rose) !important;}.has-color-theme-green-background-color{background-color: var(--wp--preset--color--color-theme-green) !important;}.has-color-theme-lightpastel-green-background-color{background-color: var(--wp--preset--color--color-theme-lightpastel-green) !important;}.has-color-theme-pastel-green-background-color{background-color: var(--wp--preset--color--color-theme-pastel-green) !important;}.has-color-theme-light-green-background-color{background-color: var(--wp--preset--color--color-theme-light-green) !important;}.has-color-theme-dark-green-background-color{background-color: var(--wp--preset--color--color-theme-dark-green) !important;}.has-color-theme-red-background-color{background-color: var(--wp--preset--color--color-theme-red) !important;}.has-color-theme-yellow-background-color{background-color: var(--wp--preset--color--color-theme-yellow) !important;}.has-color-theme-light-yellow-background-color{background-color: var(--wp--preset--color--color-theme-light-yellow) !important;}.has-color-theme-grey-background-color{background-color: var(--wp--preset--color--color-theme-grey) !important;}.has-color-theme-light-grey-background-color{background-color: var(--wp--preset--color--color-theme-light-grey) !important;}.has-color-theme-dark-grey-background-color{background-color: var(--wp--preset--color--color-theme-dark-grey) !important;}.has-color-theme-purple-background-color{background-color: var(--wp--preset--color--color-theme-purple) !important;}.has-black-border-color{border-color: var(--wp--preset--color--black) !important;}.has-cyan-bluish-gray-border-color{border-color: var(--wp--preset--color--cyan-bluish-gray) !important;}.has-white-border-color{border-color: var(--wp--preset--color--white) !important;}.has-pale-pink-border-color{border-color: var(--wp--preset--color--pale-pink) !important;}.has-vivid-red-border-color{border-color: var(--wp--preset--color--vivid-red) !important;}.has-luminous-vivid-orange-border-color{border-color: var(--wp--preset--color--luminous-vivid-orange) !important;}.has-luminous-vivid-amber-border-color{border-color: var(--wp--preset--color--luminous-vivid-amber) !important;}.has-light-green-cyan-border-color{border-color: var(--wp--preset--color--light-green-cyan) !important;}.has-vivid-green-cyan-border-color{border-color: var(--wp--preset--color--vivid-green-cyan) !important;}.has-pale-cyan-blue-border-color{border-color: var(--wp--preset--color--pale-cyan-blue) !important;}.has-vivid-cyan-blue-border-color{border-color: var(--wp--preset--color--vivid-cyan-blue) !important;}.has-vivid-purple-border-color{border-color: var(--wp--preset--color--vivid-purple) !important;}.has-color-white-border-color{border-color: var(--wp--preset--color--color-white) !important;}.has-color-theme-black-border-color{border-color: var(--wp--preset--color--color-theme-black) !important;}.has-color-theme-background-blue-border-color{border-color: var(--wp--preset--color--color-theme-background-blue) !important;}.has-color-theme-pastel-blue-border-color{border-color: var(--wp--preset--color--color-theme-pastel-blue) !important;}.has-color-theme-dark-blue-border-color{border-color: var(--wp--preset--color--color-theme-dark-blue) !important;}.has-color-theme-light-blue-border-color{border-color: var(--wp--preset--color--color-theme-light-blue) !important;}.has-color-theme-pink-border-color{border-color: var(--wp--preset--color--color-theme-pink) !important;}.has-color-theme-pink-grey-border-color{border-color: var(--wp--preset--color--color-theme-pink-grey) !important;}.has-color-theme-rose-border-color{border-color: var(--wp--preset--color--color-theme-rose) !important;}.has-color-theme-medium-rose-border-color{border-color: var(--wp--preset--color--color-theme-medium-rose) !important;}.has-color-theme-dark-rose-border-color{border-color: var(--wp--preset--color--color-theme-dark-rose) !important;}.has-color-theme-green-border-color{border-color: var(--wp--preset--color--color-theme-green) !important;}.has-color-theme-lightpastel-green-border-color{border-color: var(--wp--preset--color--color-theme-lightpastel-green) !important;}.has-color-theme-pastel-green-border-color{border-color: var(--wp--preset--color--color-theme-pastel-green) !important;}.has-color-theme-light-green-border-color{border-color: var(--wp--preset--color--color-theme-light-green) !important;}.has-color-theme-dark-green-border-color{border-color: var(--wp--preset--color--color-theme-dark-green) !important;}.has-color-theme-red-border-color{border-color: var(--wp--preset--color--color-theme-red) !important;}.has-color-theme-yellow-border-color{border-color: var(--wp--preset--color--color-theme-yellow) !important;}.has-color-theme-light-yellow-border-color{border-color: var(--wp--preset--color--color-theme-light-yellow) !important;}.has-color-theme-grey-border-color{border-color: var(--wp--preset--color--color-theme-grey) !important;}.has-color-theme-light-grey-border-color{border-color: var(--wp--preset--color--color-theme-light-grey) !important;}.has-color-theme-dark-grey-border-color{border-color: var(--wp--preset--color--color-theme-dark-grey) !important;}.has-color-theme-purple-border-color{border-color: var(--wp--preset--color--color-theme-purple) !important;}.has-vivid-cyan-blue-to-vivid-purple-gradient-background{background: var(--wp--preset--gradient--vivid-cyan-blue-to-vivid-purple) !important;}.has-light-green-cyan-to-vivid-green-cyan-gradient-background{background: var(--wp--preset--gradient--light-green-cyan-to-vivid-green-cyan) !important;}.has-luminous-vivid-amber-to-luminous-vivid-orange-gradient-background{background: var(--wp--preset--gradient--luminous-vivid-amber-to-luminous-vivid-orange) !important;}.has-luminous-vivid-orange-to-vivid-red-gradient-background{background: var(--wp--preset--gradient--luminous-vivid-orange-to-vivid-red) !important;}.has-very-light-gray-to-cyan-bluish-gray-gradient-background{background: var(--wp--preset--gradient--very-light-gray-to-cyan-bluish-gray) !important;}.has-cool-to-warm-spectrum-gradient-background{background: var(--wp--preset--gradient--cool-to-warm-spectrum) !important;}.has-blush-light-purple-gradient-background{background: var(--wp--preset--gradient--blush-light-purple) !important;}.has-blush-bordeaux-gradient-background{background: var(--wp--preset--gradient--blush-bordeaux) !important;}.has-luminous-dusk-gradient-background{background: var(--wp--preset--gradient--luminous-dusk) !important;}.has-pale-ocean-gradient-background{background: var(--wp--preset--gradient--pale-ocean) !important;}.has-electric-grass-gradient-background{background: var(--wp--preset--gradient--electric-grass) !important;}.has-midnight-gradient-background{background: var(--wp--preset--gradient--midnight) !important;}.has-small-font-size{font-size: var(--wp--preset--font-size--small) !important;}.has-medium-font-size{font-size: var(--wp--preset--font-size--medium) !important;}.has-large-font-size{font-size: var(--wp--preset--font-size--large) !important;}.has-x-large-font-size{font-size: var(--wp--preset--font-size--x-large) !important;}.wp-block-heading.has-epilogue-sans-font-family{font-family: var(--wp--preset--font-family--epilogue-sans) !important;}
+:where(.wp-block-post-template.is-layout-flex){gap: 1.25em;}:where(.wp-block-post-template.is-layout-grid){gap: 1.25em;}
+:where(.wp-block-columns.is-layout-flex){gap: 2em;}:where(.wp-block-columns.is-layout-grid){gap: 2em;}
+:root :where(.wp-block-pullquote){font-size: 1.5em;line-height: 1.6;}
+</style>
+<link rel='stylesheet' id='contact-form-7-css' href='https://www.charityright.org.uk/wp-content/plugins/contact-form-7/includes/css/styles.css?ver=6.0.5' type='text/css' media='all' />
+<link rel='stylesheet' id='vl-30nightsofgiving-styles-css' href='https://www.charityright.org.uk/wp-content/plugins/vl-plugin-30nightsofgiving/src/../build/entry.css?ver=1.0.0-69a6ef687a1f1' type='text/css' media='all' />
+<link rel='stylesheet' id='app-css' href='https://www.charityright.org.uk/wp-content/themes/vl-theme-cr/build/app.css?ver=2.0.15' type='text/css' media='all' />
+<script type="text/javascript" defer src="https://www.charityright.org.uk/wp-includes/js/jquery/jquery.min.js?ver=3.7.1" id="jquery-core-js"></script>
+<script type="text/javascript" defer src="https://www.charityright.org.uk/wp-content/plugins/vl-plugin-30nightsofgiving/src/../build/entry.js?ver=1.0.0-69a6ef687a1d9" id="vl-30nightsofgiving-scripts-js"></script>
+<style type="text/css">.recentcomments a{display:inline !important;padding:0 !important;margin:0 !important;}</style><!-- SEO meta tags powered by SmartCrawl https://wpmudev.com/project/smartcrawl-wordpress-seo/ -->
+<!-- /SEO -->
+<link rel="icon" href="https://www.charityright.org.uk/wp-content/uploads/2024/10/cropped-cr_favicon-150x150.png" sizes="32x32" />
+<link rel="icon" href="https://www.charityright.org.uk/wp-content/uploads/2024/10/cropped-cr_favicon.png" sizes="192x192" />
+<link rel="apple-touch-icon" href="https://www.charityright.org.uk/wp-content/uploads/2024/10/cropped-cr_favicon.png" />
+<meta name="msapplication-TileImage" content="https://www.charityright.org.uk/wp-content/uploads/2024/10/cropped-cr_favicon.png" />
+		<style type="text/css" id="wp-custom-css">
+			.30-nights-of-giving {
+    background: linear-gradient(298deg, rgba(47, 19, 91, 0.8) 5.93%, rgba(45, 18, 89, 0.8) 71.41%, rgba(228, 34, 129, 0.8) 130.5%);
+}		</style>
+		    <link rel="prefetch" href="https://js.stripe.com/v3/" as="script">
+</head>
+<body class="wp-custom-logo wp-theme-vl-theme-cr cr-header-offset">
+    <div id="cr-inapp-banner" role="complementary" aria-label="Open in browser">
+        <p>For the best experience, open in your browser</p>
+        <a id="cr-iab-open" class="cr-iab-open" href="#">Open in Safari ↗</a>
+        <button class="cr-iab-dismiss" id="cr-iab-dismiss" aria-label="Dismiss">Continue here</button>
+    </div>
+    <script>
+    (function(){
+        var ua=navigator.userAgent||"";
+        var isInApp=false;
+        // Detect all major in-app browsers
+        if(/FBAN|FBAV/i.test(ua)) isInApp=true;         // Facebook
+        if(/Instagram/i.test(ua)) isInApp=true;          // Instagram
+        if(/TikTok|BytedanceWebview|musical_ly/i.test(ua)) isInApp=true; // TikTok
+        if(/Snapchat/i.test(ua)) isInApp=true;           // Snapchat
+        if(/Twitter|Threads/i.test(ua)) isInApp=true;    // Twitter/Threads
+        if(/Line\//i.test(ua)) isInApp=true;             // LINE
+        if(/\bwv\b|WebView/i.test(ua)) isInApp=true;    // Generic Android WebView
+        if(/LinkedIn/i.test(ua)) isInApp=true;           // LinkedIn
+        if(/Pinterest/i.test(ua)) isInApp=true;          // Pinterest
+        if(/Telegram/i.test(ua)) isInApp=true;           // Telegram
+        // iOS: has iPhone/iPad but NOT Safari = in-app WebView
+        if(!isInApp&&/iPhone|iPad/.test(ua)&&!/Safari/i.test(ua)) isInApp=true;
+
+        // CRITICAL: Only add the class + show banner if actually in-app
+        if(!isInApp) return;
+
+        // Add scoping class to <html> so CSS fixes activate
+        document.documentElement.classList.add("cr-is-inapp");
+
+        // Bail early if user already dismissed
+        if(sessionStorage.getItem("cr_iab_off")) return;
+
+        var b=document.getElementById("cr-inapp-banner");
+        var o=document.getElementById("cr-iab-open");
+        var d=document.getElementById("cr-iab-dismiss");
+        if(!b||!o) return;
+
+        var url=window.location.href;
+        if(/iPhone|iPad|iPod/i.test(ua)){
+            o.href=url; o.setAttribute("target","_blank"); o.textContent="Open in Safari \u2197";
+        } else {
+            o.href="intent:"+url.replace(/^https?/,"")+"#Intent;scheme=https;end";
+            o.textContent="Open in Chrome \u2197";
+        }
+        b.style.display="block";
+
+        if(d) d.addEventListener("click",function(){
+            b.style.display="none";
+            sessionStorage.setItem("cr_iab_off","1");
+        });
+
+        // Intercept window.open for donate buttons (in-app only)
+        var _origOpen = window.open;
+        window.open = function(url, target) {
+            if(url && typeof url === "string" && (url.indexOf("app.charityright.org.uk") > -1 || url.indexOf("/donate") > -1)) {
+                window.location.href = url;
+                return null;
+            }
+            return _origOpen.apply(window, arguments);
+        };
+    })();
+    </script>
+    
+<style>
+body { padding-top: 80px !important; margin-top: 0 !important; }
+@media (max-width: 768px) { body { padding-top: 60px !important; } }
+body:has(.rm) { padding-top: 0 !important; }
+body:has(.fk) { padding-top: 0 !important; }
+body:has(.page-margin) { padding-top: 0 !important; }
+body:has(.cp) { padding-top: 0 !important; }
+.page-margin { margin-top: 60px !important; }
+@media (min-width: 769px) { .page-margin { margin-top: 80px !important; } }
+/* === CR HEADER === */
+.cr-header {
+  position: fixed; top: 0; left: 0; right: 0; z-index: 9999;
+  background: #fff;
+  box-shadow: 0 1px 0 rgba(0,0,0,0.06);
+  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
+}
+.cr-header *, .cr-header *::before, .cr-header *::after { box-sizing: border-box; }
+.cr-header a, .cr-header a:visited, .cr-header a:link { text-decoration: none; }
+
+.cr-header-inner {
+  display: flex; align-items: center; justify-content: space-between;
+  max-width: 1200px; margin: 0 auto;
+  padding: 0 24px; height: 80px; position: relative;
+}
+.cr-header-left, .cr-header-right { display: flex; align-items: center; gap: 8px; }
+.cr-header-left nav ul, .cr-header-right nav ul {
+  display: flex; list-style: none; margin: 0; padding: 0; gap: 4px;
+}
+.cr-header-left nav ul li a, .cr-header-right nav ul li a {
+  display: inline-flex; align-items: center; gap: 4px;
+  padding: 8px 16px; font-size: 0.88rem; font-weight: 600;
+  color: #1a1a1a !important; transition: color 0.2s; white-space: nowrap; line-height: 1;
+}
+.cr-header-left nav ul li a:hover, .cr-header-right nav ul li a:hover { color: #e42281 !important; }
+
+/* Chevron */
+.cr-chev { width: 16px; height: 16px; transition: transform 0.2s; flex-shrink: 0; color: #1a1a1a; }
+.menu-item.has-sub:hover .cr-chev { transform: rotate(180deg); }
+
+/* Logo — big and readable */
+.cr-header-logo { display: flex; align-items: center; position: absolute; left: 50%; transform: translateX(-50%); }
+.cr-header-logo img { height: 72px; width: auto; }
+
+/* Donate button */
+.cr-header-donate,
+a.cr-header-donate,
+a.cr-header-donate:link,
+a.cr-header-donate:visited,
+a.cr-header-donate:hover,
+a.cr-header-donate:active {
+  display: inline-flex; align-items: center; justify-content: center;
+  background: #e42281; color: #fff !important; font-size: 0.82rem; font-weight: 700;
+  padding: 12px 28px; border-radius: 2px; text-decoration: none !important;
+  transition: all 0.25s cubic-bezier(0.16,1,0.3,1);
+  letter-spacing: 0.3px;  line-height: 1;
+}
+a.cr-header-donate:hover { background: #c2185b; transform: translateY(-1px); box-shadow: 0 4px 16px rgba(228,34,129,0.25); }
+
+/* Login icon */
+.cr-header-login {
+  display: inline-flex; align-items: center; justify-content: center;
+  width: 40px; height: 40px; margin-right: 10px;
+  color: #1a1a1a; text-decoration: none !important;
+  transition: color 0.2s ease; flex-shrink: 0;
+}
+.cr-header-login:hover { color: #e42281; }
+.cr-header-login svg { width: 22px; height: 22px; }
+
+/* Burger (mobile) */
+.cr-header-burger {
+  display: none; flex-direction: column; gap: 5px; padding: 8px;
+  background: none; border: none; cursor: pointer;
+}
+.cr-header-burger span { display: block; width: 22px; height: 2px; background: #1a1a1a; border-radius: 1px; }
+
+/* === MEGA MENU === */
+.menu-item.has-sub { position: static; }
+.menu-item.has-sub > a { position: relative; z-index: 101; }
+
+/* Invisible hover bridge - fills gap between nav item and mega dropdown */
+.menu-item.has-sub::after {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 100px; /* generous bridge covering header height + gap */
+  z-index: 99;
+  pointer-events: none;
+}
+.menu-item.has-sub:hover::after {
+  pointer-events: auto;
+}
+
+.cr-mega {
+  display: none;
+  position: absolute;
+  top: 76px; left: 0; right: 0; padding-top: 4px;
+  background: #fff;
+  border-top: 1px solid rgba(0,0,0,0.04);
+  box-shadow: 0 24px 64px rgba(0,0,0,0.08), 0 1px 0 rgba(0,0,0,0.04);
+  padding: 0;
+  z-index: 100;
+  animation: crMegaIn 0.25s cubic-bezier(0.16, 1, 0.3, 1);
+}
+@keyframes crMegaIn {
+  from { opacity: 0; transform: translateY(-4px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+.menu-item.has-sub:hover .cr-mega { display: block; }
+
+/* Reset all mega children */
+.cr-mega, .cr-mega * { margin: 0; padding: 0; text-indent: 0; list-style: none; }
+
+.cr-mega-inner {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  min-height: 320px;
+}
+
+/* LEFT: Campaigns */
+.cr-mega-campaigns {
+  padding: 36px 40px 32px;
+  border-right: 1px solid rgba(0,0,0,0.05);
+}
+.cr-mega-label {
+  font-size: 0.58rem;
+  font-weight: 700;
+  
+  letter-spacing: 3px;
+  color: #bbb;
+  margin-bottom: 24px !important;
+  display: block;
+}
+
+/* Campaign card — hover reveals pink left border */
+.cr-mega-item {
+  display: block;
+  padding: 14px 16px;
+  margin: 0 -16px 4px !important;
+  border-radius: 2px;
+  border-left: 3px solid transparent;
+  transition: all 0.2s ease;
+  text-decoration: none !important;
+  cursor: pointer;
+}
+.cr-mega-item:last-child { margin-bottom: 0 !important; }
+.cr-mega-item:hover {
+  background: rgba(228, 34, 129, 0.03);
+  border-left-color: #e42281;
+}
+.cr-mega-item-title {
+  font-size: 0.92rem;
+  font-weight: 700;
+  color: #1a1a1a !important;
+  line-height: 1.2;
+  margin-bottom: 3px !important;
+  display: block;
+  transition: color 0.2s;
+}
+.cr-mega-item:hover .cr-mega-item-title { color: #e42281 !important; }
+.cr-mega-item-desc {
+  font-size: 0.75rem;
+  color: #999;
+  line-height: 1.45;
+  font-weight: 400;
+  display: block;
+}
+
+/* RIGHT: Countries */
+.cr-mega-countries {
+  padding: 36px 40px 32px;
+  background: #fafafa;
+}
+.cr-mega-country-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 0;
+}
+.cr-mega-country-item {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 10px 12px;
+  margin: 0 -12px !important;
+  border-radius: 2px;
+  transition: background 0.2s;
+  text-decoration: none !important;
+  cursor: pointer;
+}
+.cr-mega-country-item:hover { background: rgba(0,0,0,0.04); }
+.cr-mega-country-item img {
+  width: 26px; height: 18px;
+  object-fit: cover; border-radius: 2px;
+  flex-shrink: 0;
+  box-shadow: 0 0 0 1px rgba(0,0,0,0.08);
+}
+.cr-mega-country-item span {
+  font-size: 0.84rem;
+  font-weight: 500;
+  color: #333 !important;
+  transition: color 0.2s;
+  line-height: 1;
+}
+.cr-mega-country-item:hover span { color: #e42281 !important; }
+
+/* View All — full width bottom bar */
+.cr-mega-bottom {
+  grid-column: 1 / -1;
+  border-top: 1px solid rgba(0,0,0,0.06);
+  padding: 16px 40px;
+  display: flex;
+  align-items: center;
+}
+.cr-mega-viewall, .cr-mega-viewall:visited, .cr-mega-viewall:link {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 0.78rem;
+  font-weight: 600;
+  color: #e42281 !important;
+  text-decoration: none !important;
+  transition: gap 0.2s;
+}
+.cr-mega-viewall:hover { gap: 10px; }
+.cr-mega-viewall svg { width: 14px; height: 14px; }
+
+/* Mobile nav */
+.mobile-nav {
+  position: fixed; top: 76px; left: 0; right: 0; padding-top: 4px; bottom: 0;
+  background: #fff; z-index: 9998; overflow-y: auto;
+  transition: transform 0.3s ease, opacity 0.3s ease;
+}
+.mobile-nav.collapsed { transform: translateX(-100%); opacity: 0; pointer-events: none; }
+.cr-mobile-buttons { display: none !important; }
+
+@media (max-width: 768px) {
+  .cr-header-inner { padding: 0 16px; height: 60px; }
+  .cr-header-left nav { display: none; }
+  .cr-header-right nav { display: none; }
+  .cr-header-burger { display: flex; }
+  .cr-header-logo { position: static; transform: none; }
+  .cr-header-logo img { height: 40px; }
+  .cr-header-donate { font-size: 0.72rem; padding: 8px 18px; }
+  .cr-header-login { width: 34px; height: 34px; margin-right: 8px; }
+  .cr-header-login svg { width: 20px; height: 20px; }
+  .cr-mobile-buttons { display: flex !important; }
+  .mobile-nav { top: 60px; }
+}
+
+/* === HEADER FIXES (2026-02-19) === */
+/* Fix 1: Mobile nav override - works on ALL pages, not just home */
+.cr-header .mobile-nav {
+  position: fixed !important;
+  left: 0 !important;
+  right: 0 !important;
+  bottom: 0 !important;
+  background: #fff !important;
+  z-index: 9998 !important;
+  overflow-y: auto !important;
+  transition: transform 0.3s ease, opacity 0.3s ease !important;
+}
+.cr-header .mobile-nav:not(.collapsed) {
+  transform: translateX(0) !important;
+  opacity: 1 !important;
+  pointer-events: auto !important;
+}
+.cr-header .mobile-nav.collapsed {
+  transform: translateX(-100%) !important;
+  opacity: 0 !important;
+  pointer-events: none !important;
+}
+
+/* Fix 2: Login/account icon always visible */
+a.cr-header-login {
+  display: inline-flex !important;
+  visibility: visible !important;
+  opacity: 1 !important;
+}
+
+/* Fix 3: Logo align left on mobile, account icon right of donate */
+@media (max-width: 768px) {
+  .cr-header-logo {
+    position: static !important;
+    transform: none !important;
+    margin-right: auto !important;
+  }
+  .cr-header-inner {
+    justify-content: flex-start !important;
+    gap: 8px;
+  }
+  .cr-header-right {
+    margin-left: auto;
+  }
+}
+/* === END HEADER FIXES === */
+
+</style>
+
+<header class="cr-header" x-data="HeaderMenu">
+  <div class="cr-header-inner" style="position:relative;">
+    <!-- Left: Burger (mobile) + Nav (desktop) -->
+    <div class="cr-header-left">
+      <button class="cr-header-burger" aria-label="Toggle menu" @click="toggle()">
+        <span></span><span></span><span></span>
+      </button>
+      <nav>
+        <ul>
+          <li class="menu-item has-sub">
+            <a href="https://www.charityright.org.uk/projects/">
+              Our Work
+              <svg class="cr-chev" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M6 9l6 6 6-6"></path></svg>
+            </a>
+            <div class="cr-mega">
+              <div class="cr-mega-inner">
+                <div class="cr-mega-campaigns">
+                  <div class="cr-mega-label">Campaigns</div>
+                  <a href="https://www.charityright.org.uk/project/school-meals/" class="cr-mega-item">
+                    <span class="cr-mega-item-title">School Meals</span>
+                    <span class="cr-mega-item-desc">Daily meals keeping children in school and focused on their education.</span>
+                  </a>
+                  <a href="https://www.charityright.org.uk/project/health-hifz-happiness/" class="cr-mega-item">
+                    <span class="cr-mega-item-title">Hifz Meals</span>
+                    <span class="cr-mega-item-desc">Sponsor a hifz student's meals with regular progress updates.</span>
+                  </a>
+                  <a href="https://www.charityright.org.uk/campaigns/tech-team-for-meals-4/" class="cr-mega-item" data-cl="true">
+                    <span class="cr-mega-item-title">Tech Meals</span>
+                    <span class="cr-mega-item-desc">School meals + coding education for Rohingya refugee children.</span>
+                  </a>
+                </div>
+                <div class="cr-mega-countries">
+                  <div class="cr-mega-label">Countries</div>
+                  <div class="cr-mega-country-grid">
+                    <a href="https://www.charityright.org.uk/countries/afghanistan/" class="cr-mega-country-item"><img src="https://www.charityright.org.uk/wp-content/uploads/2024/08/afghanistan-b.png" alt="Afghanistan"><span>Afghanistan</span></a>
+                    <a href="https://www.charityright.org.uk/countries/bangladesh/" class="cr-mega-country-item"><img src="https://www.charityright.org.uk/wp-content/uploads/2024/08/bangladesh-b.png" alt="Bangladesh"><span>Bangladesh</span></a>
+                    <a href="https://www.charityright.org.uk/countries/ethiopia/" class="cr-mega-country-item"><img src="https://www.charityright.org.uk/wp-content/uploads/2024/09/ethiopia-b.png" alt="Ethiopia"><span>Ethiopia</span></a>
+                    <a href="https://www.charityright.org.uk/countries/malawi/" class="cr-mega-country-item"><img src="https://www.charityright.org.uk/wp-content/uploads/2024/09/malawi-b.png" alt="Malawi"><span>Malawi</span></a>
+                    <a href="https://www.charityright.org.uk/countries/pakistan/" class="cr-mega-country-item"><img src="https://www.charityright.org.uk/wp-content/uploads/2025/01/32px-Flag_of_Pakistan.svg_.webp" alt="Pakistan"><span>Pakistan</span></a>
+                    <a href="https://www.charityright.org.uk/countries/palestine/" class="cr-mega-country-item"><img src="https://www.charityright.org.uk/wp-content/uploads/2024/09/palestine-b.png" alt="Palestine"><span>Palestine</span></a>
+                    <a href="https://www.charityright.org.uk/countries/turkey/" class="cr-mega-country-item"><img src="https://www.charityright.org.uk/wp-content/uploads/2024/09/turkey-b.png" alt="Turkey"><span>Turkey</span></a>
+                  </div>
+                </div>
+                <div class="cr-mega-bottom">
+                  <a href="https://www.charityright.org.uk/projects" class="cr-mega-viewall">
+                    View all projects
+                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M5 12h14M12 5l7 7-7 7" stroke-linecap="round" stroke-linejoin="round"></path></svg>
+                  </a>
+                </div>
+              </div>
+            </div>
+          </li>
+          <li class="menu-item">
+            <a href="https://www.charityright.org.uk/zakat" data-cl="true">Give Zakat</a>
+          </li>
+        </ul>
+      </nav>
+    </div>
+
+    <!-- Center: Logo -->
+    <a href="https://www.charityright.org.uk" class="cr-header-logo" aria-label="Charity Right home">
+      <img src="https://www.charityright.org.uk/wp-content/uploads/2026/02/cr-logo-tagline-black.svg" alt="Charity Right">
+    </a>
+
+    <!-- Right: Nav + Donate -->
+    <div class="cr-header-right">
+      <nav>
+        <ul>
+          <li><a href="https://www.charityright.org.uk/events/">Events</a></li>
+        </ul>
+      </nav>
+<a href="https://app.charityright.org.uk/login" class="cr-header-login" aria-label="Login" title="Login"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg></a>
+            <a href="https://app.charityright.org.uk/donate/" class="cr-header-donate">Donate</a>
+
+    </div>
+  </div>
+
+  <!-- Mobile nav (Alpine.js) -->
+  <div :class="collapsed ? 'collapsed' : ''" class="mobile-nav collapsed">
+    <div class="container">
+      <div class="flex flex-col h-[calc(100dvh-4.3rem)] pt-12 sm:pt-16 pb-12 overflow-y-auto sm:pb-20">
+        <ul>
+          <li class="mb-4" @click="selected != 9498 ? selected = 9498 : selected = null">
+            <div class="flex items-center justify-between cursor-pointer">
+              <span class="!text-theme_black transition duration-300 hover:!text-theme_pink text-2xl sm:text-2xl font-semibold">Our Work</span>
+              <svg :class="selected == 9498 ? 'rotate-45' : ''" class="text-theme_dark_grey w-4 mb-1.5 mr-4 transition duration-300" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><path fill="currentColor" d="M368 224H224V80c0-8.84-7.16-16-16-16h-32c-8.84 0-16 7.16-16 16v144H16c-8.84 0-16 7.16-16 16v32c0 8.84 7.16 16 16 16h144v144c0 8.84 7.16 16 16 16h32c8.84 0 16-7.16 16-16V288h144c8.84 0 16-7.16 16-16v-32c0-8.84-7.16-16-16-16z"></path></svg>
+            </div>
+            <div x-ref="container9498" x-bind:style="selected == 9498 ? 'max-height: ' + ($refs.container9498.scrollHeight + 24) + 'px' : ''" class="overflow-hidden transition-all duration-300 max-h-0">
+              <div class="flex flex-col mt-4 last:mb-6 last:mt-0">
+                <span class="block mt-4 mb-6 text-[13px] sm:text-sm text-theme_dark_grey uppercase font-semibold">CAMPAIGNS</span>
+                <div class="flex flex-col">
+                  <div class="!mb-4">
+                    <h3><a href="https://www.charityright.org.uk/project/school-meals/" class="text-lg transition duration-300 sm:text-xl text-theme_black hover:text-theme_pink link-color">School Meals</a></h3>
+                    <p class="max-w-[470px] !mt-1 text-sm xs:text-base xs:!mt-2 text-theme_dark_grey">Provide daily meals to children, helping them stay in school and focus on their education.</p>
+                  </div>
+                  <div class="!mb-4">
+                    <h3><a href="https://www.charityright.org.uk/project/health-hifz-happiness/" class="text-lg transition duration-300 sm:text-xl text-theme_black hover:text-theme_pink link-color">Hifz Meals</a></h3>
+                    <p class="max-w-[470px] !mt-1 text-sm xs:text-base xs:!mt-2 text-theme_dark_grey">Sponsor a hifz student's meals and receive regular updates about their progress.</p>
+                  </div>
+                  <div class="!mb-4">
+                    <h3><a href="https://www.charityright.org.uk/campaigns/tech-team-for-meals-4/" class="text-lg transition duration-300 sm:text-xl text-theme_black hover:text-theme_pink link-color" data-cl="true">Tech Meals</a></h3>
+                    <p class="max-w-[470px] !mt-1 text-sm xs:text-base xs:!mt-2 text-theme_dark_grey">Give Rohingya refugee children in Bangladesh the fuel to learn - daily school meals and coding education.</p>
+                  </div>
+                </div>
+              </div>
+              <div class="flex flex-col mt-4 last:mb-6 last:mt-0">
+                <span class="block mt-4 mb-6 text-[13px] sm:text-sm text-theme_dark_grey uppercase font-semibold">COUNTRIES</span>
+                <div class="grid gap-y-4 grid-cols-2">
+                  <div><a href="https://www.charityright.org.uk/countries/afghanistan/" class="flex items-center group link-color"><img width="30" height="50" src="https://www.charityright.org.uk/wp-content/uploads/2024/08/afghanistan-b.png" class="flex-shrink-0 object-contain object-center w-6 xs:w-7" alt="Afghanistan"><div class="mt-0.5 pl-2.5 xs:pl-3 text-black text-[16px] xs:text-base font-semibold transition duration-300 group-hover:text-theme_pink">Afghanistan</div></a></div>
+                  <div><a href="https://www.charityright.org.uk/countries/bangladesh/" class="flex items-center group link-color"><img width="30" height="50" src="https://www.charityright.org.uk/wp-content/uploads/2024/08/bangladesh-b.png" class="flex-shrink-0 object-contain object-center w-6 xs:w-7" alt="Bangladesh"><div class="mt-0.5 pl-2.5 xs:pl-3 text-black text-[16px] xs:text-base font-semibold transition duration-300 group-hover:text-theme_pink">Bangladesh</div></a></div>
+                  <div><a href="https://www.charityright.org.uk/countries/ethiopia/" class="flex items-center group link-color"><img width="30" height="50" src="https://www.charityright.org.uk/wp-content/uploads/2024/09/ethiopia-b.png" class="flex-shrink-0 object-contain object-center w-6 xs:w-7" alt="Ethiopia"><div class="mt-0.5 pl-2.5 xs:pl-3 text-black text-[16px] xs:text-base font-semibold transition duration-300 group-hover:text-theme_pink">Ethiopia</div></a></div>
+                  <div><a href="https://www.charityright.org.uk/countries/malawi/" class="flex items-center group link-color"><img width="30" height="50" src="https://www.charityright.org.uk/wp-content/uploads/2024/09/malawi-b.png" class="flex-shrink-0 object-contain object-center w-6 xs:w-7" alt="Malawi"><div class="mt-0.5 pl-2.5 xs:pl-3 text-black text-[16px] xs:text-base font-semibold transition duration-300 group-hover:text-theme_pink">Malawi</div></a></div>
+                  <div><a href="https://www.charityright.org.uk/countries/pakistan/" class="flex items-center group link-color"><img width="30" height="50" src="https://www.charityright.org.uk/wp-content/uploads/2025/01/32px-Flag_of_Pakistan.svg_.webp" class="flex-shrink-0 object-contain object-center w-6 xs:w-7" alt="Pakistan"><div class="mt-0.5 pl-2.5 xs:pl-3 text-black text-[16px] xs:text-base font-semibold transition duration-300 group-hover:text-theme_pink">Pakistan</div></a></div>
+                  <div><a href="https://www.charityright.org.uk/countries/palestine/" class="flex items-center group link-color"><img width="30" height="50" src="https://www.charityright.org.uk/wp-content/uploads/2024/09/palestine-b.png" class="flex-shrink-0 object-contain object-center w-6 xs:w-7" alt="Palestine"><div class="mt-0.5 pl-2.5 xs:pl-3 text-black text-[16px] xs:text-base font-semibold transition duration-300 group-hover:text-theme_pink">Palestine</div></a></div>
+                  <div><a href="https://www.charityright.org.uk/countries/turkey/" class="flex items-center group link-color"><img width="30" height="50" src="https://www.charityright.org.uk/wp-content/uploads/2024/09/turkey-b.png" class="flex-shrink-0 object-contain object-center w-6 xs:w-7" alt="Turkey"><div class="mt-0.5 pl-2.5 xs:pl-3 text-black text-[16px] xs:text-base font-semibold transition duration-300 group-hover:text-theme_pink">Turkey</div></a></div>
+                </div>
+              </div>
+            </div>
+          </li>
+          <li class="mb-4">
+            <a href="https://www.charityright.org.uk/zakat" class="!text-theme_black transition duration-300 hover:!text-theme_pink text-2xl sm:text-2xl font-semibold" data-cl="true">Give Zakat</a>
+          </li>
+          <li class="mb-4"><a href="https://www.charityright.org.uk/events/" class="!text-theme_black transition duration-300 hover:!text-theme_pink text-2xl sm:text-2xl font-semibold">Events</a></li>
+        </ul>
+        <div class="mt-6 xs:mt-8 sm:mt-10">
+          <a href="https://app.charityright.org.uk/login" class="!text-theme_black transition duration-300 hover:!text-theme_pink text-2xl sm:text-2xl font-semibold" >Login/Register</a>
+        </div>
+      </div>
+    </div>
+  </div>
+</header>
+
+
+<script>
+(function(){
+  var burger = document.querySelector('.cr-header-burger');
+  var nav = document.querySelector('.mobile-nav');
+  if(!burger || !nav) return;
+  burger.addEventListener('click', function(e){
+    e.stopPropagation();
+    nav.classList.toggle('collapsed');
+  });
+})();
+</script>
+
+<style>
+@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800;900&display=swap');
+
+*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+
+:root {
+  --pl-navy: #0B1026;
+  --pl-navy-d: #080C1E;
+  --pl-coral: #FFBC91;
+  --pl-coral-d: #E8A670;
+  --pl-coral-glow: rgba(255,188,145,.35);
+  --pl-cream: #FAF5EF;
+  --pl-wh: #fff;
+  --pl-ff: 'Poppins', -apple-system, BlinkMacSystemFont, sans-serif;
+  --pl-ease: cubic-bezier(.22, 1, .36, 1);
+}
+
+body:has(.pl) { padding-top: 0 !important; margin-top: 0 !important; }
+/* In-app browser fixes */
+.pl input, .pl select, .pl textarea { font-size: 16px !important; }
+.pl { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; overscroll-behavior: none; -webkit-overflow-scrolling: touch; padding-bottom: env(safe-area-inset-bottom, 0); }
+.pl-w-amt, .pl-w-go, .pl-w-toggle { min-height: 44px; }
+.pl-story-pin { -webkit-overflow-scrolling: touch; }
+
+.pl section, .pl div { margin-top: 0; margin-bottom: 0; }
+.pl { font-family: var(--pl-ff); -webkit-font-smoothing: antialiased; background: var(--pl-navy); color: #fff; overflow-x: hidden; line-height: 1.5; }
+.pl h1, .pl h2, .pl h3, .pl p, .pl span, .pl button, .pl a, .pl label, .pl div { color: inherit; }
+.pl img { max-width: 100%; display: block; }
+.pl a { text-decoration: none !important; color: inherit; }
+.pl section::before { display: none !important; content: none !important; }
+
+/* ════════════════════════════════════════════════════
+   HERO
+   ════════════════════════════════════════════════════ */
+
+.pl-hero {
+  position: relative;
+  width: 100%;
+  min-height: 100vh; height: 100dvh; min-height: 100dvh;
+  overflow: hidden;
+  background: var(--pl-navy);
+  display: flex;
+  align-items: center;
+}
+
+.pl-hero-slides {
+  position: absolute; inset: 0; z-index: 0;
+}
+.pl-hero-slide {
+  position: absolute; inset: 0;
+  opacity: 0; transition: opacity 1.4s ease-in-out;
+}
+.pl-hero-slide.active { opacity: 1; }
+.pl-hero-slide img { width: 100%; height: 100%; object-fit: cover; }
+
+.pl-hero-overlay {
+  position: absolute; inset: 0; z-index: 1;
+  background:
+    linear-gradient(90deg,
+      rgba(11,16,38,.95) 0%,
+      rgba(11,16,38,.88) 25%,
+      rgba(11,16,38,.6) 48%,
+      rgba(11,16,38,.3) 65%,
+      rgba(11,16,38,.1) 80%,
+      transparent 100%
+    ),
+    linear-gradient(0deg,
+      rgba(11,16,38,.6) 0%,
+      transparent 30%,
+      transparent 85%,
+      rgba(11,16,38,.4) 100%
+    );
+}
+
+.pl-hero::before {
+  content: ''; position: absolute; inset: 0; z-index: 2;
+  pointer-events: none; opacity: .025;
+  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
+  background-size: 128px;
+}
+
+.pl-hero-grid {
+  position: relative; z-index: 3;
+  display: grid; grid-template-columns: 1fr 400px;
+  gap: 60px; align-items: center;
+  max-width: 1280px; margin: 0 auto;
+  padding: 0 clamp(24px, 5vw, 80px);
+  min-height: 100vh; height: 100dvh; min-height: 100dvh;
+}
+
+.pl-hero-text { padding: 5vh 0; }
+
+/* Co-brand logos */
+.pl-hero-logos {
+  display: flex; align-items: center; gap: 20px;
+  margin-bottom: 56px;
+  opacity: 0; animation: plFadeUp .9s .15s var(--pl-ease) forwards;
+}
+.pl-hero-logos img { height: 52px; }
+.pl-hero-logos .pl-x {
+  font-size: .85rem; font-weight: 600; color: rgba(255,255,255,.3);
+  letter-spacing: 2px; text-transform: uppercase;
+}
+
+.pl-hero-label {
+  display: inline-flex; align-items: center; gap: 10px;
+  margin-bottom: 20px;
+  opacity: 0; animation: plFadeUp .9s .3s var(--pl-ease) forwards;
+}
+.pl-hero-label-line { width: 32px; height: 1px; background: var(--pl-coral); }
+.pl-hero-label-text {
+  font-size: .6rem; font-weight: 700; letter-spacing: 4px;
+  text-transform: uppercase; color: var(--pl-coral);
+}
+
+.pl-hero-h1 {
+  font-size: clamp(2.4rem, 5vw, 4.5rem);
+  font-weight: 800; line-height: 1.08; letter-spacing: -.03em;
+  margin-top: 8px; margin-bottom: 24px; color: #fff !important;
+  opacity: 0; animation: plFadeUp .9s .45s var(--pl-ease) forwards;
+}
+.pl-hero-h1 em { font-style: normal; color: var(--pl-coral); }
+
+.pl-hero-sub {
+  font-size: clamp(.9rem, 1.6vw, 1.1rem);
+  font-weight: 300; color: rgba(255,255,255,.55);
+  max-width: 400px; line-height: 1.7; margin-bottom: 36px;
+  opacity: 0; animation: plFadeUp .9s .6s var(--pl-ease) forwards;
+}
+
+.pl-hero-dots {
+  display: flex; gap: 10px; margin-top: 40px;
+  opacity: 0; animation: plFadeUp .9s 1s var(--pl-ease) forwards;
+}
+.pl-hero-dot {
+  width: 40px; height: 3px; background: rgba(255,255,255,.15);
+  border: none; cursor: pointer; transition: all .5s var(--pl-ease);
+  position: relative; overflow: hidden; padding: 0;
+}
+.pl-hero-dot::after {
+  content: ''; position: absolute; top: 0; left: 0;
+  height: 100%; width: 0%; background: var(--pl-coral); transition: width .3s;
+}
+.pl-hero-dot.active { background: rgba(255,255,255,.08); }
+.pl-hero-dot.active::after { animation: plDotFill 6s linear forwards; }
+@keyframes plDotFill { from { width: 0%; } to { width: 100%; } }
+@keyframes plFadeUp {
+  from { opacity: 0; transform: translateY(25px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+
+/* Widget */
+.pl-hero-widget {
+  opacity: 0; animation: plWidgetIn 1s .5s var(--pl-ease) forwards;
+}
+@keyframes plWidgetIn {
+  from { opacity: 0; transform: translateY(30px) scale(.97); }
+  to { opacity: 1; transform: translateY(0) scale(1); }
+}
+
+.pl-w {
+  background: rgba(11,16,38,.92);
+  backdrop-filter: blur(80px); -webkit-backdrop-filter: blur(80px);
+  border: 1px solid rgba(255,255,255,.08);
+  overflow: hidden;
+  box-shadow: 0 0 0 1px rgba(255,255,255,.03), 0 24px 80px rgba(0,0,0,.5);
+}
+
+.pl-w-header { padding: 28px 28px 0; text-align: center; }
+.pl-w-title {
+  font-size: 1.5rem; font-weight: 700; line-height: 1.2;
+  letter-spacing: -.3px; margin: 0 0 4px; color: #fff !important;
+}
+.pl-w-badge {
+  display: inline-block; margin-top: 10px; margin-bottom: 4px;
+  font-size: .6rem; font-weight: 700; letter-spacing: 1.5px;
+  text-transform: uppercase; color: var(--pl-coral);
+  padding: 5px 14px;
+  background: rgba(255,188,145,.08);
+  border: 1px solid rgba(255,188,145,.2);
+}
+
+.pl-w-body { padding: 28px 28px 32px; }
+
+.pl-w-amounts { display: flex; gap: 8px; margin: 0 0 20px; }
+.pl-w-amt {
+  flex: 1; padding: 14px 6px; background: rgba(255,255,255,.04);
+  border: 1.5px solid rgba(255,188,145,.2);
+  color: #fff; font-family: var(--pl-ff); font-size: 1.1rem; font-weight: 700;
+  cursor: pointer; transition: all .25s var(--pl-ease); text-align: center;
+}
+.pl-w-amt:hover { border-color: rgba(255,188,145,.3); background: rgba(255,188,145,.04); }
+.pl-w-amt.active {
+  border-color: var(--pl-coral); background: rgba(255,188,145,.1);
+  box-shadow: 0 0 0 1px var(--pl-coral), 0 4px 20px rgba(255,188,145,.15);
+}
+.pl-w-amt small { display: block; font-size: .55rem; font-weight: 400; opacity: .5; margin-top: 3px; }
+
+.pl-w-custom { position: relative; margin: 0 0 24px; }
+.pl-w-custom-curr {
+  position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
+  color: rgba(255,255,255,.25); font-size: 1rem; font-weight: 600;
+}
+.pl-w-custom input {
+  width: 100%; padding: 14px 14px 14px 28px;
+  background: rgba(255,255,255,.04); border: 1px solid rgba(255,188,145,.15);
+  color: #fff; font-family: var(--pl-ff); font-size: 1rem; outline: none;
+  transition: border-color .25s; -moz-appearance: textfield;
+}
+.pl-w-custom input::-webkit-outer-spin-button,
+.pl-w-custom input::-webkit-inner-spin-button { -webkit-appearance: none; }
+.pl-w-custom input::placeholder { color: rgba(255,255,255,.3); }
+.pl-w-custom input:focus { border-color: var(--pl-coral); }
+
+.pl-w-sep { height: 1px; background: rgba(255,188,145,.1); margin: 0 0 24px; }
+
+.pl-w-toggles { display: flex; flex-direction: column; gap: 12px; margin: 0 0 24px; }
+.pl-w-toggle {
+  display: flex; align-items: center; justify-content: space-between;
+  padding: 10px 14px; background: rgba(255,255,255,.02);
+  border: 1px solid rgba(255,188,145,.12);
+  cursor: pointer; transition: all .25s; user-select: none;
+}
+.pl-w-toggle.active { border-color: rgba(255,188,145,.2); background: rgba(255,188,145,.04); }
+.pl-w-toggle-info { display: flex; flex-direction: column; gap: 1px; }
+.pl-w-toggle-label { font-size: .8rem; font-weight: 600; color: #fff !important; }
+.pl-w-toggle-desc { font-size: .6rem; color: rgba(255,255,255,.45); }
+.pl-w-switch {
+  width: 36px; height: 20px; border-radius: 999px;
+  background: rgba(255,255,255,.1); position: relative;
+  transition: background .25s; flex-shrink: 0; margin-left: 12px;
+}
+.pl-w-switch::after {
+  content: ''; position: absolute; top: 2px; left: 2px;
+  width: 16px; height: 16px; border-radius: 50%;
+  background: #fff; transition: transform .25s var(--pl-ease);
+  box-shadow: 0 1px 4px rgba(0,0,0,.25);
+}
+.pl-w-toggle.active .pl-w-switch { background: var(--pl-coral); }
+.pl-w-toggle.active .pl-w-switch::after { background: var(--pl-navy); }
+.pl-w-toggle.active .pl-w-switch::after { transform: translateX(16px); }
+
+.pl-w-total {
+  display: flex; justify-content: space-between; align-items: center;
+  padding: 16px; background: rgba(255,255,255,.02);
+  border: 1px solid rgba(255,188,145,.15); margin: 0 0 24px;
+}
+.pl-w-total-label { font-size: .65rem; color: rgba(255,255,255,.45); text-transform: uppercase; letter-spacing: 1.5px; font-weight: 700; }
+.pl-w-total-amount { font-size: 1.4rem; font-weight: 800; color: var(--pl-coral); }
+
+.pl-w-go, .pl-w-go:hover, .pl-w-go:visited, .pl-w-go:active, .pl-w-go:focus {
+  color: var(--pl-navy) !important;
+}
+.pl-w-go {
+  width: 100%; padding: 16px; background: var(--pl-coral); color: var(--pl-navy) !important; border: none;
+  font-family: var(--pl-ff); font-size: .8rem; font-weight: 700;
+  text-transform: uppercase; letter-spacing: 2px; cursor: pointer;
+  transition: all .35s var(--pl-ease); position: relative; overflow: hidden;
+}
+.pl-w-go::after {
+  content: ''; position: absolute; inset: 0;
+  background: linear-gradient(90deg, transparent, rgba(255,255,255,.12), transparent);
+  transform: translateX(-100%); transition: transform .6s;
+}
+.pl-w-go:hover { background: var(--pl-coral-d); color: var(--pl-navy) !important; transform: translateY(-2px); box-shadow: 0 8px 30px var(--pl-coral-glow); }
+.pl-w-go:hover::after { transform: translateX(100%); }
+
+/* ════════════════════════════════════════════════════
+   SECTION 2: HIGH STAKES
+   ════════════════════════════════════════════════════ */
+
+.pl-stakes {
+  background: var(--pl-navy-d);
+  padding: clamp(80px, 12vh, 140px) clamp(24px, 5vw, 80px);
+  border-top: 1px solid rgba(255,255,255,.03);
+}
+.pl-stakes-inner {
+  max-width: 1100px; margin: 0 auto;
+  display: grid; grid-template-columns: 1fr 1fr; gap: 80px;
+  align-items: center;
+}
+.pl-stakes-text h2 {
+  font-size: clamp(1.8rem, 3.5vw, 2.8rem);
+  font-weight: 800; line-height: 1.1; letter-spacing: -.02em;
+  margin-bottom: 24px; color: #fff !important;
+}
+.pl-stakes-text h2 em { font-style: normal; color: var(--pl-coral); }
+.pl-stakes-copy {
+  font-size: 1.1rem; color: rgba(255,255,255,.5); line-height: 1.9;
+  font-weight: 300;
+}
+.pl-stakes-copy strong { color: #fff; font-weight: 600; }
+.pl-stakes-copy p + p { margin-top: 24px; }
+.pl-stakes-highlight {
+  margin-top: 48px !important; padding: 48px 52px !important;
+  background: rgba(255,188,145,.04) !important;
+  border: 2.5px solid rgba(255,188,145,.35) !important;
+  border-radius: 0 !important;
+  position: relative !important;
+  box-sizing: border-box !important;
+}
+.pl-stakes-highlight::before {
+  content: '£150' !important;
+  display: block !important;
+  font-size: 2.4rem !important; font-weight: 900 !important; color: var(--pl-coral) !important;
+  letter-spacing: -.02em !important; line-height: 1 !important;
+  margin: 0 0 24px 0 !important; padding: 0 !important;
+}
+.pl-stakes-highlight p {
+  font-size: 1.05rem !important; color: rgba(255,255,255,.7) !important; line-height: 2.1 !important;
+  font-weight: 400 !important; margin: 0 !important; padding: 0 !important;
+}
+.pl-stakes-highlight strong { color: #fff !important; font-weight: 700 !important; display: none !important; }
+
+/* Nuclear override for stakes section spacing */
+.pl .pl-stakes-text p,
+.pl .pl-stakes-highlight p,
+.pl .pl-stakes-copy p {
+  margin-top: 0 !important; margin-bottom: 0 !important;
+}
+.pl .pl-stakes-copy p + p { margin-top: 24px !important; }
+.pl .pl-stakes-text h2 { margin-top: 0 !important; }
+
+.pl-stakes-img {
+  position: relative; overflow: hidden; aspect-ratio: 4/5;
+}
+.pl-stakes-img img { width: 100%; height: 100%; object-fit: cover; }
+.pl-stakes-img::after {
+  content: ''; position: absolute; inset: 0;
+  background: linear-gradient(0deg, rgba(11,16,38,.4) 0%, transparent 50%);
+}
+
+/* ════════════════════════════════════════════════════
+   SECTION 3: CONFIDENCE
+   ════════════════════════════════════════════════════ */
+
+.pl-confidence {
+  background: var(--pl-navy);
+  padding: clamp(80px, 12vh, 140px) clamp(24px, 5vw, 80px);
+  text-align: center;
+  border-top: 1px solid rgba(255,255,255,.03);
+  border-bottom: 1px solid rgba(255,255,255,.03);
+}
+.pl-confidence-inner { max-width: 700px; margin: 0 auto; }
+.pl-confidence h2 {
+  font-size: clamp(2rem, 4vw, 3.2rem) !important;
+  font-weight: 800 !important; line-height: 1.1 !important; letter-spacing: -.02em !important;
+  margin: 0 0 28px 0 !important; color: #fff !important;
+}
+.pl-confidence h2 em { font-style: normal; color: var(--pl-coral); }
+.pl-confidence p {
+  font-size: 1.1rem !important; color: rgba(255,255,255,.45) !important; line-height: 1.8 !important;
+  font-weight: 300 !important; max-width: 520px !important; margin: 0 auto !important;
+}
+.pl-confidence-stats {
+  display: flex; justify-content: center; gap: 60px; margin-top: 72px !important;
+}
+.pl-confidence-stat { text-align: center; }
+.pl-confidence-stat .num {
+  font-size: clamp(2.2rem, 4.5vw, 3.2rem);
+  font-weight: 800; color: var(--pl-coral); line-height: 1; letter-spacing: -.02em;
+}
+.pl-confidence-stat .label {
+  font-size: .7rem; font-weight: 600; text-transform: uppercase;
+  letter-spacing: 2px; color: rgba(255,255,255,.3); margin-top: 8px;
+}
+
+/* ════════════════════════════════════════════════════
+   SECTION 4: SCROLL STORY
+   ════════════════════════════════════════════════════ */
+
+.pl-story { position: relative; background: var(--pl-navy-d); margin-top: -1px; }
+.pl-story-pin {
+  height: 100vh; height: 100dvh;
+  display: flex; align-items: center; justify-content: center;
+  overflow: hidden; text-align: center;
+  padding: 0 clamp(24px, 8vw, 120px);
+  position: relative; flex-direction: column; gap: 40px;
+}
+
+.pl-story-line {
+  font-size: clamp(2rem, 4.5vw, 3.8rem);
+  font-weight: 800; line-height: 1.1; letter-spacing: -.02em;
+  color: #fff !important; position: absolute; max-width: 900px;
+  opacity: 0; transform: translateY(30px);
+  transition: opacity .6s var(--pl-ease), transform .6s var(--pl-ease);
+}
+.pl-story-line.active { opacity: 1; transform: translateY(0); }
+.pl-story-line.exit { opacity: 0; transform: translateY(-30px); }
+
+.pl-story-cta {
+  position: absolute; bottom: 15vh; left: 50%; transform: translateX(-50%);
+  display: flex; gap: 16px;
+  opacity: 0; pointer-events: none;
+  transition: opacity .5s var(--pl-ease); z-index: 5;
+}
+.pl-story-cta.visible { opacity: 1; pointer-events: auto; }
+.pl-story-cta a {
+  display: inline-flex; align-items: center; gap: 8px;
+  padding: 16px 36px; font-family: var(--pl-ff); font-size: .75rem;
+  font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase;
+  border: none; cursor: pointer; transition: all .35s var(--pl-ease);
+}
+.pl-story-cta .primary, .pl-story-cta .primary:hover, .pl-story-cta .primary:visited { color: var(--pl-navy) !important; font-weight: 800; }
+.pl-story-cta .primary { background: var(--pl-coral); }
+.pl-story-cta .primary:hover { background: var(--pl-coral-d); transform: translateY(-2px); box-shadow: 0 12px 40px var(--pl-coral-glow); }
+.pl-story-cta .secondary, .pl-story-cta .secondary:visited { color: #fff !important; background: transparent; border: 1px solid rgba(255,255,255,.2); }
+.pl-story-cta .secondary:hover { border-color: var(--pl-coral); color: var(--pl-coral) !important; }
+
+.pl-story-counter {
+  position: absolute; bottom: clamp(24px, 5vh, 48px); right: clamp(24px, 5vw, 60px);
+  z-index: 3; display: flex; align-items: center; gap: 12px;
+}
+.pl-story-counter-bar { width: 80px; height: 2px; background: rgba(255,255,255,.06); position: relative; overflow: hidden; }
+.pl-story-counter-fill { height: 100%; width: 25%; background: var(--pl-coral); transition: width .6s var(--pl-ease); box-shadow: 0 0 8px rgba(255,188,145,.4); }
+.pl-story-counter-num { font-size: .8rem; font-weight: 700; letter-spacing: 2px; color: rgba(255,255,255,.3); font-variant-numeric: tabular-nums; }
+.pl-story-counter-num span { color: #fff; }
+
+/* ════════════════════════════════════════════════════
+   RESPONSIVE
+   ════════════════════════════════════════════════════ */
+
+@media (max-width: 900px) {
+  .pl-hero-grid { grid-template-columns: 1fr; gap: 40px; min-height: auto; padding-top: 120px; padding-bottom: 60px; }
+  .pl-hero-widget { max-width: 400px; }
+  .pl-stakes-inner { grid-template-columns: 1fr; gap: 40px; }
+  .pl-stakes-img { max-height: 400px; }
+  .pl-confidence-stats { gap: 30px; }
+  .pl-story-cta { flex-direction: column; align-items: center; }
+}
+
+@media (max-width: 480px) {
+  .pl-hero-h1 { font-size: 2.2rem; }
+  .pl-w-amounts { flex-direction: column; }
+  .pl-confidence-stats { flex-direction: column; gap: 24px; }
+}
+</style>
+
+<div class="pl">
+
+
+<!-- ════════════════════════════════════════════════════
+     HERO
+     ════════════════════════════════════════════════════ -->
+<section class="pl-hero">
+  <div class="pl-hero-slides">
+    <div class="pl-hero-slide active"><img src="https://www.charityright.org.uk/wp-content/uploads/2026/02/cr-meals.jpg" alt="School meals being prepared" loading="eager" style="object-position: center center;"></div>
+    <div class="pl-hero-slide"><img src="https://www.charityright.org.uk/wp-content/uploads/2026/02/cr-wrong-1.jpg" alt="Meals being served" loading="lazy" style="object-position: 40% center;"></div>
+    <div class="pl-hero-slide"><img src="https://www.charityright.org.uk/wp-content/uploads/2026/02/cr-wrong-4.jpg" alt="Children eating" loading="lazy" style="object-position: 30% center;"></div>
+  </div>
+
+  <div class="pl-hero-overlay"></div>
+
+  <div class="pl-hero-grid">
+    <div class="pl-hero-text">
+      <!-- Co-brand logos -->
+      <div class="pl-hero-logos">
+        <img src="https://cdn.prod.website-files.com/604d480efd2aff6558953436/606b7279c7427afa5054f8bd_large%20logo.png" alt="Pillars" style="height:52px; border-radius: 10px;">
+        <span class="pl-x">&times;</span>
+        <img src="https://www.charityright.org.uk/wp-content/uploads/2026/02/cr-logo-tagline-white.svg" alt="CharityRight" style="height:44px;">
+      </div>
+
+      <div class="pl-hero-label">
+        <span class="pl-hero-label-line"></span>
+        <span class="pl-hero-label-text">Pay your zakat</span>
+      </div>
+
+      <h1 class="pl-hero-h1">
+        Purify Your Wealth.<br><em>Feed Children.</em>
+      </h1>
+
+      <p class="pl-hero-sub">100% Zakat. Daily school meals. Every pound you give feeds a child at school.</p>
+
+      <div class="pl-hero-dots" id="pl-dots">
+        <button class="pl-hero-dot active" data-slide="0"></button>
+        <button class="pl-hero-dot" data-slide="1"></button>
+        <button class="pl-hero-dot" data-slide="2"></button>
+      </div>
+    </div>
+
+    <!-- Widget -->
+    <div class="pl-hero-widget">
+      <div class="pl-w">
+        <div class="pl-w-header">
+          <h2 class="pl-w-title">Make It <span style="color:var(--pl-coral)">Right</span></h2>
+          <div class="pl-w-badge">&#10003; 100% Zakat Eligible</div>
+        </div>
+        <div class="pl-w-body">
+          <div class="pl-w-amounts">
+            <button class="pl-w-amt" data-amount="150">&pound;150<small>1 Child. 1 Year.</small></button>
+            <button class="pl-w-amt active" data-amount="300">&pound;300<small>2 Children.</small></button>
+            <button class="pl-w-amt" data-amount="750">&pound;750<small>5 Children.</small></button>
+          </div>
+
+          <div class="pl-w-custom">
+            <span class="pl-w-custom-curr">&pound;</span>
+            <input type="number" id="pl-input" min="1" placeholder="Or enter a custom amount">
+          </div>
+
+          <div class="pl-w-sep"></div>
+
+          <div class="pl-w-toggles">
+            <div class="pl-w-toggle active" id="pl-zakat">
+              <div class="pl-w-toggle-info">
+                <span class="pl-w-toggle-label">100% Zakat Eligible</span>
+                <span class="pl-w-toggle-desc">Every pound goes directly to feeding children</span>
+              </div>
+              <div class="pl-w-switch"></div>
+            </div>
+            <div class="pl-w-toggle active" id="pl-admin">
+              <div class="pl-w-toggle-info">
+                <span class="pl-w-toggle-label">Cover admin costs (15%)</span>
+                <span class="pl-w-toggle-desc">So 100% feeds children</span>
+              </div>
+              <div class="pl-w-switch"></div>
+            </div>
+          </div>
+
+          <div class="pl-w-total">
+            <span class="pl-w-total-label">Total</span>
+            <span class="pl-w-total-amount" id="pl-total">&pound;345</span>
+          </div>
+
+          <div style="text-align:center;margin:24px 0 20px;padding:0;background:none;border:none;">
+            <span style="font-family:Poppins,sans-serif;font-size:12px;font-weight:500;color:rgba(255,255,255,.35);letter-spacing:.3px;line-height:1;display:block;">Pillars community &middot; fighting child hunger</span>
+          </div>
+
+          <button class="pl-w-go" id="pl-go">Give Zakat Now &rarr;</button>
+        </div>
+      </div>
+    </div>
+  </div>
+</section>
+
+<!-- ════════════════════════════════════════════════════
+     SECTION 2: HIGH STAKES
+     ════════════════════════════════════════════════════ -->
+<section class="pl-stakes">
+  <div class="pl-stakes-inner">
+    <div class="pl-stakes-text">
+      <h2>Zakat That Feeds.<br><em>Every Day.</em></h2>
+      <div class="pl-stakes-copy">
+        <p>Hunger is the reason they miss school.<br>
+        Not lack of ability.<br>
+        Not lack of ambition.<br>
+        <strong>Food.</strong></p>
+        <br>
+        <p>Your Zakat removes that barrier.</p>
+      </div>
+
+      <div class="pl-stakes-highlight">
+        <p>Daily school meals<br>
+        Full attendance<br>
+        A child who stays in school for one year</p>
+      </div>
+    </div>
+
+    <div class="pl-stakes-img">
+      <img src="https://www.charityright.org.uk/wp-content/uploads/2026/02/cr-hunger6-zakat.jpg" alt="Children at school" loading="lazy">
+    </div>
+  </div>
+</section>
+
+<!-- ════════════════════════════════════════════════════
+     SECTION 3: CONFIDENCE
+     ════════════════════════════════════════════════════ -->
+<section class="pl-confidence">
+  <div class="pl-confidence-inner">
+    <h2>100% Zakat.<br><em>No Deductions.</em></h2>
+    <p>Every pound of your Zakat goes directly to feeding children. No admin taken.</p>
+
+    <div class="pl-confidence-stats">
+      <div class="pl-confidence-stat">
+        <div class="num">100%</div>
+        <div class="label">Zakat policy</div>
+      </div>
+      <div class="pl-confidence-stat">
+        <div class="num">60M+</div>
+        <div class="label">Meals served</div>
+      </div>
+      <div class="pl-confidence-stat">
+        <div class="num">7</div>
+        <div class="label">Countries</div>
+      </div>
+    </div>
+  </div>
+</section>
+
+<!-- ════════════════════════════════════════════════════
+     SECTION 4: SCROLL STORY + CTA
+     ════════════════════════════════════════════════════ -->
+<section class="pl-story" id="pl-story">
+  <div class="pl-story-pin">
+    <h2 class="pl-story-line" data-line="0">School meals.</h2>
+    <h2 class="pl-story-line" data-line="1">Every day.</h2>
+    <h2 class="pl-story-line" data-line="2">All year.</h2>
+    <h2 class="pl-story-line" data-line="3">Purify your wealth.<br><span style="color:var(--pl-coral)">Feed children.</span></h2>
+
+    <div class="pl-story-cta" id="pl-story-cta">
+      <a href="https://app.charityright.org.uk/donate/?amount=150&type=one-off&zakat=1&admin=1&ref=pillars" class="primary" >Give Zakat Now &rarr;</a>
+    </div>
+
+    <div class="pl-story-counter">
+      <div class="pl-story-counter-bar"><div class="pl-story-counter-fill" id="pl-story-fill"></div></div>
+      <div class="pl-story-counter-num"><span id="pl-story-cur">01</span> / 04</div>
+    </div>
+  </div>
+</section>
+
+</div>
+
+<script src="https://cdn.jsdelivr.net/npm/gsap@3.12.5/dist/gsap.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/gsap@3.12.5/dist/ScrollTrigger.min.js"></script>
+<script>
+(function(){
+  'use strict';
+
+  /* ═══ HERO SLIDER ═══ */
+  var slides = document.querySelectorAll('.pl-hero-slide');
+  var dots = document.querySelectorAll('.pl-hero-dot');
+  var current = 0;
+  var timer;
+
+  function goTo(idx) {
+    if (idx === current) return;
+    slides[current].classList.remove('active');
+    dots[current].classList.remove('active');
+    void dots[idx].offsetWidth;
+    slides[idx].classList.add('active');
+    dots[idx].classList.add('active');
+    current = idx;
+  }
+  function next() { goTo((current + 1) % slides.length); }
+  function startTimer() { clearInterval(timer); timer = setInterval(next, 6000); }
+  dots.forEach(function(dot) {
+    dot.addEventListener('click', function() { goTo(+this.dataset.slide); startTimer(); });
+  });
+  startTimer();
+
+  /* ═══ WIDGET ═══ */
+  var amt = 300, zakat = true, admin = true;
+  function fmt(n) { return n % 1 === 0 ? n.toString() : n.toFixed(2); }
+
+  function updateTotal() {
+    var t = admin ? Math.round(amt * 1.15 * 100) / 100 : amt;
+    document.getElementById('pl-total').textContent = '\u00A3' + fmt(t);
+  }
+
+  document.querySelectorAll('.pl-w-amt').forEach(function(b) {
+    b.addEventListener('click', function() {
+      document.querySelectorAll('.pl-w-amt').forEach(function(x) { x.classList.remove('active'); });
+      this.classList.add('active');
+      amt = +this.dataset.amount;
+      document.getElementById('pl-input').value = '';
+      updateTotal();
+    });
+  });
+
+  document.getElementById('pl-input').addEventListener('input', function() {
+    if (this.value) {
+      document.querySelectorAll('.pl-w-amt').forEach(function(x) { x.classList.remove('active'); });
+      amt = +this.value;
+      updateTotal();
+    }
+  });
+
+  document.getElementById('pl-zakat').addEventListener('click', function() {
+    zakat = !zakat; this.classList.toggle('active', zakat);
+  });
+  document.getElementById('pl-admin').addEventListener('click', function() {
+    admin = !admin; this.classList.toggle('active', admin); updateTotal();
+  });
+
+  document.getElementById('pl-go').addEventListener('click', function() {
+    window.location.href = 'https://app.charityright.org.uk/donate/?amount=' + (amt || 150) + '&type=one-off&zakat=' + (zakat ? '1' : '0') + '&admin=' + (admin ? '1' : '0') + '&ref=pillars';
+  });
+  updateTotal();
+
+  /* ═══ SCROLL STORY ═══ */
+  gsap.registerPlugin(ScrollTrigger);
+
+  var section = document.getElementById('pl-story');
+  if (!section) return;
+  var storyLines = section.querySelectorAll('.pl-story-line');
+  var numLines = storyLines.length;
+  var storyPin = section.querySelector('.pl-story-pin');
+  var storyFill = document.getElementById('pl-story-fill');
+  var storyCur = document.getElementById('pl-story-cur');
+  var currentLine = -1;
+
+  ScrollTrigger.create({
+    trigger: storyPin,
+    start: 'top top',
+    end: '+=' + (numLines * 100) + '%',
+    pin: true,
+    scrub: 0.1,
+    onUpdate: function(self) {
+      var p = self.progress;
+      var idx = Math.min(Math.floor(p * numLines), numLines - 1);
+      storyFill.style.width = ((idx + 1) / numLines * 100) + '%';
+      storyCur.textContent = ('0' + (idx + 1)).slice(-2);
+      if (idx !== currentLine) {
+        if (currentLine >= 0 && currentLine < numLines) {
+          storyLines[currentLine].classList.remove('active');
+          storyLines[currentLine].classList.add('exit');
+          (function(old) { setTimeout(function() { storyLines[old].classList.remove('exit'); }, 600); })(currentLine);
+        }
+        storyLines[idx].classList.add('active');
+        currentLine = idx;
+      }
+      var ctaEl = document.getElementById('pl-story-cta');
+      if (idx === numLines - 1) ctaEl.classList.add('visible');
+      else ctaEl.classList.remove('visible');
+    }
+  });
+
+  /* ═══ FADE IN ON SCROLL ═══ */
+  var fadeEls = document.querySelectorAll('.pl-stakes-text, .pl-stakes-img, .pl-confidence-inner');
+  fadeEls.forEach(function(el) {
+    el.style.opacity = '0'; el.style.transform = 'translateY(40px)';
+    el.style.transition = 'opacity .8s cubic-bezier(.22,1,.36,1), transform .8s cubic-bezier(.22,1,.36,1)';
+  });
+  var obs = new IntersectionObserver(function(entries) {
+    entries.forEach(function(e) {
+      if (e.isIntersecting) { e.target.style.opacity = '1'; e.target.style.transform = 'translateY(0)'; obs.unobserve(e.target); }
+    });
+  }, { threshold: 0.15 });
+  fadeEls.forEach(function(el) { obs.observe(el); });
+  setTimeout(function() { fadeEls.forEach(function(el) { el.style.opacity = '1'; el.style.transform = 'translateY(0)'; }); }, 5000);
+})();
+</script>
+
+
+<style>
+/* === CR FOOTER === */
+.cr-footer {
+  background: #000;
+  color: #fff;
+  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
+  padding: 0;
+  margin: 0;
+}
+.cr-footer { margin-top: 0 !important; }
+.cr-footer *, .cr-footer *::before, .cr-footer *::after { box-sizing: border-box; }
+.cr-footer a { color: rgba(255,255,255,0.65); text-decoration: none; transition: color 0.2s; }
+.cr-footer a:hover { color: #e42281; }
+.cr-footer a:visited, .cr-footer a:link { color: rgba(255,255,255,0.65) !important; }
+.cr-footer a:visited:hover, .cr-footer a:link:hover { color: #e42281 !important; }
+.cr-footer-inner { max-width: 1200px; margin: 0 auto; padding: 64px 32px 0; }
+.cr-footer-top {
+  display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr;
+  gap: 48px; padding-bottom: 48px;
+  border-bottom: 1px solid rgba(255,255,255,0.08);
+}
+
+/* Brand */
+.cr-footer-brand img { height: 38px; margin: 0 0 20px; display: block; }
+.cr-footer-brand p {
+  font-size: 0.88rem; line-height: 1.7; color: rgba(255,255,255,0.45);
+  margin: 0 0 28px; max-width: 320px; font-weight: 400;
+}
+.cr-footer-social { display: flex; gap: 12px; }
+.cr-footer-social a {
+  display: flex; align-items: center; justify-content: center;
+  width: 38px; height: 38px; border-radius: 2px;
+  background: rgba(255,255,255,0.06); transition: all 0.25s;
+}
+.cr-footer-social a:hover { background: rgba(228,34,129,0.15); }
+.cr-footer-social svg { width: 16px; height: 16px; fill: rgba(255,255,255,0.55); }
+.cr-footer-social a:hover svg { fill: #e42281; }
+
+/* Columns */
+.cr-footer-col h4 {
+  font-size: 0.68rem; font-weight: 700; text-transform: uppercase;
+  letter-spacing: 2.5px; color: rgba(255,255,255,0.3); margin: 0 0 24px;
+}
+.cr-footer-col ul { list-style: none; padding: 0; margin: 0; }
+.cr-footer-col li { margin: 0 0 14px; }
+.cr-footer-col li:last-child { margin: 0; }
+.cr-footer-col li a { font-size: 0.88rem; font-weight: 400; line-height: 1; }
+
+/* CTA button */
+.cr-footer-cta-btn {
+  display: inline-flex; align-items: center; gap: 8px;
+  background: #e42281; color: #fff !important; padding: 12px 24px;
+  border-radius: 2px; font-size: 0.75rem; font-weight: 700;
+  text-transform: uppercase; letter-spacing: 0.5px; margin-top: 24px;
+  transition: all 0.25s cubic-bezier(0.16,1,0.3,1); text-decoration: none !important;
+}
+.cr-footer-cta-btn:visited, .cr-footer-cta-btn:link { color: #fff !important; }
+.cr-footer-cta-btn:hover { background: #c2185b; transform: translateY(-1px); box-shadow: 0 4px 16px rgba(228,34,129,0.25); color: #fff !important; }
+.cr-footer-cta-btn svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2; }
+
+/* Bottom bar */
+.cr-footer-bottom {
+  display: flex; align-items: center; justify-content: space-between;
+  padding: 28px 0;
+}
+.cr-footer-bottom p { font-size: 0.78rem; color: rgba(255,255,255,0.25); margin: 0; font-weight: 400; }
+.cr-footer-bottom-links { display: flex; gap: 28px; }
+.cr-footer-bottom-links a { font-size: 0.78rem; color: rgba(255,255,255,0.25); font-weight: 400; }
+.cr-footer-bottom-links a:hover { color: rgba(255,255,255,0.5); }
+.cr-footer-bottom-links a:visited, .cr-footer-bottom-links a:link { color: rgba(255,255,255,0.25) !important; }
+
+/* Responsive */
+@media (max-width: 900px) {
+  .cr-footer-top { grid-template-columns: 1fr 1fr; gap: 36px; }
+  .cr-footer-inner { padding: 48px 24px 0; }
+}
+@media (max-width: 600px) {
+  .cr-footer-inner { padding: 40px 20px 0; }
+  .cr-footer-top { grid-template-columns: 1fr; gap: 32px; }
+  .cr-footer-bottom { flex-direction: column; gap: 12px; text-align: center; }
+  .cr-footer-bottom-links { justify-content: center; }
+}
+</style>
+
+<footer class="cr-footer">
+  <div class="cr-footer-inner">
+    <div class="cr-footer-top">
+      <!-- Brand Column -->
+      <div class="cr-footer-brand">
+        <a href="https://www.charityright.org.uk/">
+          <img src="https://www.charityright.org.uk/wp-content/uploads/2026/02/cr-logo-tagline-white.svg" alt="Charity Right">
+        </a>
+        <p>Every child deserves a daily meal. We provide school meals to children in some of the world's most vulnerable communities.</p>
+        <div class="cr-footer-social">
+          <a href="https://www.youtube.com/c/CharityRightUK-official" target="_blank" rel="noopener" aria-label="YouTube">
+            <svg viewBox="0 0 24 24"><path d="M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z"></path></svg>
+          </a>
+          <a href="https://instagram.com/charityrightuk/" target="_blank" rel="noopener" aria-label="Instagram">
+            <svg viewBox="0 0 24 24"><path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zM12 0C8.741 0 8.333.014 7.053.072 2.695.272.273 2.69.073 7.052.014 8.333 0 8.741 0 12c0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98C8.333 23.986 8.741 24 12 24c3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98C15.668.014 15.259 0 12 0zm0 5.838a6.162 6.162 0 1 0 0 12.324 6.162 6.162 0 0 0 0-12.324zM12 16a4 4 0 1 1 0-8 4 4 0 0 1 0 8zm6.406-11.845a1.44 1.44 0 1 0 0 2.881 1.44 1.44 0 0 0 0-2.881z"></path></svg>
+          </a>
+          <a href="https://www.facebook.com/charityrightuk" target="_blank" rel="noopener" aria-label="Facebook">
+            <svg viewBox="0 0 24 24"><path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z"></path></svg>
+          </a>
+          <a href="https://uk.linkedin.com/company/charity-right" target="_blank" rel="noopener" aria-label="LinkedIn">
+            <svg viewBox="0 0 24 24"><path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433a2.062 2.062 0 0 1-2.063-2.065 2.064 2.064 0 1 1 2.063 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"></path></svg>
+          </a>
+        </div>
+      </div>
+
+      <!-- Projects Column -->
+      <div class="cr-footer-col">
+        <h4>Our Work</h4>
+        <ul>
+          <li><a href="https://www.charityright.org.uk/projects/">30 Nights of Giving</a></li>
+          <li><a href="https://app.charityright.org.uk/foodfridays/donate">Food Fridays</a></li>
+          <li><a href="https://www.charityright.org.uk/project/school-meals/">School Meals</a></li>
+          <li><a href="https://www.charityright.org.uk/project/health-hifz-happiness/">Hifz Programme</a></li>
+          <li><a href="https://www.charityright.org.uk/zakat">Give Zakat</a></li>
+        </ul>
+      </div>
+
+      <!-- Company Column -->
+      <div class="cr-footer-col">
+        <h4>Charity</h4>
+        <ul>
+          <li><a href="https://www.charityright.org.uk/projects/">Our Projects</a></li>
+          <li><a href="https://www.charityright.org.uk/fundraising/">Fundraising</a></li>
+          <li><a href="https://www.charityright.org.uk/blog/">Blog</a></li>
+          <li><a href="https://www.charityright.org.uk/about-us/">About Us</a></li>
+          <li><a href="https://www.charityright.org.uk/privacy-policy/">Privacy Policy</a></li>
+          <li><a href="http://www.charityright.org.uk/wp-content/uploads/2024/09/charity_right_zakat_policy.pdf" target="_blank" data-cl="true">Our Zakat Policy</a></li>
+          <li><a href="https://www.charityright.org.uk/terms-and-conditions/">Terms and Conditions</a></li>
+        </ul>
+      </div>
+
+      <!-- CTA Column -->
+      <div class="cr-footer-col">
+        <h4>Take Action</h4>
+        <ul>
+          <li><a href="https://app.charityright.org.uk/donate/">Donate Now</a></li>
+          <li><a href="https://www.charityright.org.uk/fundraising">Start Fundraising</a></li>
+          <li><a href="https://www.charityright.org.uk/get-involved">Volunteer</a></li>
+        </ul>
+        <a href="https://app.charityright.org.uk/donate/" class="cr-footer-cta-btn">
+          Feed a Child
+          <svg viewBox="0 0 24 24"><path d="M5 12h14M12 5l7 7-7 7" stroke-linecap="round" stroke-linejoin="round"></path></svg>
+        </a>
+      </div>
+    </div>
+
+    <!-- Bottom Bar -->
+    <div class="cr-footer-bottom">
+      <p>&copy; 2026 Charity Right &middot; Registered Charity No. 1163944</p>
+      <div class="cr-footer-bottom-links">
+        <a href="https://www.charityright.org.uk/privacy-policy">Privacy</a>
+        <a href="https://www.charityright.org.uk/terms-and-conditions">Terms</a>
+        <a href="http://www.charityright.org.uk/wp-content/uploads/2024/09/charity_right_zakat_policy.pdf">Zakat Policy</a>
+      </div>
+    </div>
+  </div>
+</footer>
+
+
+<!--BEGIN: TRACKING CODE MANAGER (v2.4.0) BY INTELLYWP.COM IN FOOTER//-->
+<script>
+    (function(w, d, s, c, u) {
+        let f = d.body.getElementsByTagName(s)[0], j = d.createElement(s);
+        j.async = true;
+        j.src = u;
+        j.type = "text/javascript";
+        f.parentNode.insertBefore(j, f);
+
+        j.onload = function() {
+            if (w.n3o_attribution && typeof w.n3o_attribution.init === 'function') {
+                w.n3o_attribution.init(c);
+            }
+        }
+    })(window, document, 'script', null, 'https://unpkg.com/@n3oltd/link-builder/umd/n3o-attribution.js');
+</script>
+<!-- This site is converting visitors into subscribers and customers with OptinMonster - https://optinmonster.com -->
+<script>(function(d,u,ac){var s=d.createElement('script');s.type='text/javascript';s.src='https://a.omappapi.com/app/js/api.min.js';s.async=true;s.dataset.user=u;s.dataset.account=ac;d.getElementsByTagName('head')[0].appendChild(s);})(document,360447,380926);</script>
+<!-- / OptinMonster -->
+<!--END: https://wordpress.org/plugins/tracking-code-manager IN FOOTER//--><script type="speculationrules">
+{"prefetch":[{"source":"document","where":{"and":[{"href_matches":"\/*"},{"not":{"href_matches":["\/wp-*.php","\/wp-admin\/*","\/wp-content\/uploads\/*","\/wp-content\/*","\/wp-content\/plugins\/*","\/wp-content\/themes\/vl-theme-cr\/*","\/*\\?(.+)"]}},{"not":{"selector_matches":"a[rel~=\"nofollow\"]"}},{"not":{"selector_matches":".no-prefetch, .no-prefetch a"}}]},"eagerness":"conservative"}]}
+</script>
+<script type="text/javascript" src="https://www.charityright.org.uk/wp-includes/js/dist/hooks.min.js?ver=4d63a3d491d11ffd8ac6" id="wp-hooks-js"></script>
+<script type="text/javascript" src="https://www.charityright.org.uk/wp-includes/js/dist/i18n.min.js?ver=5e580eb46a90c2b997e6" id="wp-i18n-js"></script>
+<script type="text/javascript" id="wp-i18n-js-after">
+/* <![CDATA[ */
+wp.i18n.setLocaleData( { 'text direction\u0004ltr': [ 'ltr' ] } );
+/* ]]> */
+</script>
+<script type="text/javascript" defer src="https://www.charityright.org.uk/wp-content/plugins/contact-form-7/includes/swv/js/index.js?ver=6.0.5" id="swv-js"></script>
+<script type="text/javascript" id="contact-form-7-js-before">
+/* <![CDATA[ */
+var wpcf7 = {
+    "api": {
+        "root": "https:\/\/www.charityright.org.uk\/wp-json\/",
+        "namespace": "contact-form-7\/v1"
+    }
+};
+/* ]]> */
+</script>
+<script type="text/javascript" defer src="https://www.charityright.org.uk/wp-content/plugins/contact-form-7/includes/js/index.js?ver=6.0.5" id="contact-form-7-js"></script>
+<script type="text/javascript" id="app-js-extra">
+/* <![CDATA[ */
+var crAppParams = {"platform_base_url":"https:\/\/app.charityright.org.uk\/"};
+/* ]]> */
+</script>
+<script type="text/javascript" defer src="https://www.charityright.org.uk/wp-content/themes/vl-theme-cr/build/app.js?ver=2.0.15" id="app-js"></script>
+<script type="text/javascript" defer src="https://www.charityright.org.uk/wp-content/themes/vl-theme-cr/build/gute.js?ver=6.8.1&amp;bust=20260218d" id="vl_new_acf_blocks-js"></script>
+<script>
+(function(){
+  var utmParams = ['utm_source','utm_medium','utm_campaign','utm_term','utm_content','utm_id'];
+  var stored = {};
+  
+  // 1. Check URL for UTM params
+  var urlParams = new URLSearchParams(window.location.search);
+  var hasNew = false;
+  utmParams.forEach(function(p) {
+    var v = urlParams.get(p);
+    if (v) { stored[p] = v; hasNew = true; }
+  });
+  
+  // 2. If new UTMs found, save to localStorage
+  if (hasNew) {
+    localStorage.setItem('cr_utm', JSON.stringify(stored));
+    localStorage.setItem('cr_utm_ts', Date.now());
+  } else {
+    // 3. Load from localStorage (expire after 30 days)
+    try {
+      var s = localStorage.getItem('cr_utm');
+      var ts = localStorage.getItem('cr_utm_ts');
+      if (s && ts && (Date.now() - ts) < 30*86400000) {
+        stored = JSON.parse(s);
+      }
+    } catch(e) {}
+  }
+  
+  // 4. Nothing stored? Exit
+  if (!Object.keys(stored).length) return;
+  
+  // 5. Append UTMs to all links pointing to app.charityright.org.uk
+  function tagLinks() {
+    var links = document.querySelectorAll('a[href*="app.charityright.org.uk"]');
+    links.forEach(function(a) {
+      try {
+        var url = new URL(a.href);
+        var changed = false;
+        Object.keys(stored).forEach(function(k) {
+          if (!url.searchParams.has(k)) {
+            url.searchParams.set(k, stored[k]);
+            changed = true;
+          }
+        });
+        if (changed) a.href = url.toString();
+      } catch(e) {}
+    });
+  }
+  
+  // Run on load and observe DOM changes
+  tagLinks();
+  var observer = new MutationObserver(function() { tagLinks(); });
+  observer.observe(document.body, { childList: true, subtree: true });
+})();
+</script>
+</body>
+</html>