diff --git a/public/brand/MIM4U-Brand-Kit.zip b/public/brand/MIM4U-Brand-Kit.zip
index 8d1bb53..ef68fea 100644
Binary files a/public/brand/MIM4U-Brand-Kit.zip and b/public/brand/MIM4U-Brand-Kit.zip differ
diff --git a/src/App.tsx b/src/App.tsx
index f3a0095..67a0be8 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -4336,7 +4336,7 @@ function BackgroundDecor() {
 
 function StickyDonate() {
   return (
-    <div className="fixed bottom-4 right-4 z-50 md:hidden">
+    <div className="fixed bottom-4 left-4 z-40 lg:hidden">
       <a
         href="#/donate"
         className="flex h-14 w-14 items-center justify-center rounded-full bg-gradient-to-br from-primary-500 to-secondary-600 text-white shadow-lg shadow-primary-500/25 transition hover:scale-105"
@@ -4366,8 +4366,8 @@ function CookieBanner() {
   if (!show) return null
 
   return (
-    <div className="fixed bottom-4 left-4 right-4 z-50 card p-4 md:max-w-md md:right-auto" role="dialog" aria-label="Cookie consent">
-      <p className="text-sm">
+    <div className="fixed bottom-20 left-4 right-4 z-40 card p-4 sm:bottom-4 md:max-w-md md:right-auto lg:bottom-4" role="dialog" aria-label="Cookie consent">
+      <p className="text-sm text-neutral-700 dark:text-neutral-200">
         We use cookies to improve your experience. By continuing, you agree to our{' '}
         <a href="#/legal" className="underline focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-500 rounded">cookie policy</a>.
       </p>
@@ -4435,11 +4435,7 @@ function AppContent() {
   }, [])
 
   useEffect(() => {
-    if (darkMode) {
-      document.documentElement.classList.add('dark')
-    } else {
-      document.documentElement.classList.remove('dark')
-    }
+    document.documentElement.classList.toggle('dark', darkMode)
     localStorage.setItem('darkMode', darkMode.toString())
   }, [darkMode])
 
diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
index 5bb289d..eecaa7b 100644
--- a/src/components/Footer.tsx
+++ b/src/components/Footer.tsx
@@ -37,22 +37,22 @@ export function Footer() {
             <h3 className="font-semibold">Get Involved</h3>
             <ul className="mt-4 space-y-2 text-sm">
               <li>
-                <a href="#/donate" className="navlink">
+                <a href="#/donate" className="navlink text-zinc-600 hover:text-primary-600 dark:text-zinc-300 dark:hover:text-secondary-300">
                   Donate
                 </a>
               </li>
               <li>
-                <a href="#/volunteers" className="navlink">
+                <a href="#/volunteers" className="navlink text-zinc-600 hover:text-primary-600 dark:text-zinc-300 dark:hover:text-secondary-300">
                   Volunteer
                 </a>
               </li>
               <li>
-                <a href="#/events" className="navlink">
+                <a href="#/events" className="navlink text-zinc-600 hover:text-primary-600 dark:text-zinc-300 dark:hover:text-secondary-300">
                   Community Events
                 </a>
               </li>
               <li>
-                <a href="#/stories" className="navlink">
+                <a href="#/stories" className="navlink text-zinc-600 hover:text-primary-600 dark:text-zinc-300 dark:hover:text-secondary-300">
                   Stories of Hope
                 </a>
               </li>
@@ -63,22 +63,22 @@ export function Footer() {
             <h3 className="font-semibold">About</h3>
             <ul className="mt-4 space-y-2 text-sm">
               <li>
-                <a href="#/about" className="navlink">
+                <a href="#/about" className="navlink text-zinc-600 hover:text-primary-600 dark:text-zinc-300 dark:hover:text-secondary-300">
                   About Us
                 </a>
               </li>
               <li>
-                <a href="#/mission" className="navlink">
+                <a href="#/mission" className="navlink text-zinc-600 hover:text-primary-600 dark:text-zinc-300 dark:hover:text-secondary-300">
                   Our Mission
                 </a>
               </li>
               <li>
-                <a href="#/what-we-do" className="navlink">
+                <a href="#/what-we-do" className="navlink text-zinc-600 hover:text-primary-600 dark:text-zinc-300 dark:hover:text-secondary-300">
                   What We Do
                 </a>
               </li>
               <li>
-                <a href="#/contact" className="navlink">
+                <a href="#/contact" className="navlink text-zinc-600 hover:text-primary-600 dark:text-zinc-300 dark:hover:text-secondary-300">
                   Contact Us
                 </a>
               </li>
@@ -89,27 +89,27 @@ export function Footer() {
                 </a>
               </li>
               <li>
-                <a href="#/request-assistance" className="navlink">
+                <a href="#/request-assistance" className="navlink text-zinc-600 hover:text-primary-600 dark:text-zinc-300 dark:hover:text-secondary-300">
                   Request assistance
                 </a>
               </li>
               <li>
-                <a href="#/legal" className="navlink">
+                <a href="#/legal" className="navlink text-zinc-600 hover:text-primary-600 dark:text-zinc-300 dark:hover:text-secondary-300">
                   Legal & Policies
                 </a>
               </li>
               <li>
-                <a href="#/brand" className="navlink">
+                <a href="#/brand" className="navlink text-zinc-600 hover:text-primary-600 dark:text-zinc-300 dark:hover:text-secondary-300">
                   Brand assets
                 </a>
               </li>
               <li>
-                <a href="#/portals" className="navlink">
+                <a href="#/portals" className="navlink text-zinc-600 hover:text-primary-600 dark:text-zinc-300 dark:hover:text-secondary-300">
                   Staff & partner portals
                 </a>
               </li>
               <li>
-                <a href="#/sponsors" className="navlink">
+                <a href="#/sponsors" className="navlink text-zinc-600 hover:text-primary-600 dark:text-zinc-300 dark:hover:text-secondary-300">
                   Corporate partnerships
                 </a>
               </li>
diff --git a/src/components/Navigation.tsx b/src/components/Navigation.tsx
index 26d6e0c..634b908 100644
--- a/src/components/Navigation.tsx
+++ b/src/components/Navigation.tsx
@@ -25,7 +25,7 @@ export function Navigation({ darkMode, setDarkMode, mobileMenuOpen, setMobileMen
   }
 
   const navLinkClass =
-    'navlink focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2 rounded text-sm lg:text-[0.9375rem]'
+    'navlink text-zinc-600 hover:text-primary-600 dark:text-zinc-300 dark:hover:text-secondary-300 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2 rounded text-sm xl:text-[0.9375rem] whitespace-nowrap'
 
   return (
     <>
@@ -42,7 +42,7 @@ export function Navigation({ darkMode, setDarkMode, mobileMenuOpen, setMobileMen
           <LogoMark variant="nav" />
         </a>
 
-        <div className="hidden items-center gap-3 md:flex lg:gap-4 xl:gap-5">
+        <div className="hidden items-center gap-2 lg:flex lg:gap-3 xl:gap-4">
           {NAV_LINKS.map((link) => (
             <a
               key={link.href}
@@ -60,7 +60,7 @@ export function Navigation({ darkMode, setDarkMode, mobileMenuOpen, setMobileMen
           ))}
         </div>
 
-        <div className="hidden items-center gap-3 md:flex">
+        <div className="hidden items-center gap-3 lg:flex">
           <Magnetic>
             <a
               href="#/donate"
@@ -85,7 +85,7 @@ export function Navigation({ darkMode, setDarkMode, mobileMenuOpen, setMobileMen
           </button>
         </div>
 
-        <div className="flex items-center gap-2 md:hidden">
+        <div className="flex items-center gap-2 lg:hidden">
           <Magnetic>
             <a
               href="#/donate"
@@ -116,36 +116,36 @@ export function Navigation({ darkMode, setDarkMode, mobileMenuOpen, setMobileMen
 
       <motion.div
         id="mobile-menu"
-        className="md:hidden"
+        className="lg:hidden"
         initial={false}
         animate={{ height: mobileMenuOpen ? 'auto' : 0, opacity: mobileMenuOpen ? 1 : 0 }}
         transition={{ duration: 0.2 }}
         style={{ overflow: 'hidden' }}
       >
-        <div className="border-t border-secondary-200/50 bg-[var(--mim-cream)]/95 px-4 py-3 backdrop-blur dark:border-white/10 dark:bg-black/90">
-          <div className="space-y-1">
-            <a className="block rounded py-2 text-sm font-medium" href="#/">
+        <div className="border-t border-secondary-200/50 bg-[var(--mim-cream)]/95 px-4 py-3 backdrop-blur dark:border-white/10 dark:bg-neutral-950/95">
+          <div className="max-h-[min(70vh,28rem)] space-y-1 overflow-y-auto overscroll-contain">
+            <a className="block rounded py-2.5 text-sm font-medium text-neutral-800 dark:text-neutral-100" href="#/">
               Home
             </a>
             {NAV_LINKS.map((link) => (
               <a
                 key={link.href}
-                className="block rounded py-2 text-sm font-medium focus-visible:ring-2 focus-visible:ring-primary-500"
+                className="block rounded py-2.5 text-sm font-medium text-neutral-800 dark:text-neutral-100 focus-visible:ring-2 focus-visible:ring-primary-500"
                 href={link.href}
               >
                 {link.label}
               </a>
             ))}
-            <a className="block rounded py-2 text-sm font-medium" href="#/donate">
+            <a className="block rounded py-2.5 text-sm font-medium text-neutral-800 dark:text-neutral-100" href="#/donate">
               Donate
             </a>
-            <a className="block rounded py-2 text-sm font-medium" href="#/request-assistance">
+            <a className="block rounded py-2.5 text-sm font-medium text-neutral-800 dark:text-neutral-100" href="#/request-assistance">
               Request assistance
             </a>
-            <a className="block rounded py-2 text-sm font-medium" href="#/portals">
+            <a className="block rounded py-2.5 text-sm font-medium text-neutral-800 dark:text-neutral-100" href="#/portals">
               Portals
             </a>
-            <a className="block rounded py-2 text-sm font-medium" href="#/sponsors">
+            <a className="block rounded py-2.5 text-sm font-medium text-neutral-800 dark:text-neutral-100" href="#/sponsors">
               Partner with us
             </a>
           </div>
diff --git a/src/components/ui/LogoMark.tsx b/src/components/ui/LogoMark.tsx
index d2e4d98..59bfc06 100644
--- a/src/components/ui/LogoMark.tsx
+++ b/src/components/ui/LogoMark.tsx
@@ -25,7 +25,7 @@ export function LogoMark({ variant = 'nav', className = '' }: LogoMarkProps) {
         <img
           src={BRAND.symbolSvg}
           alt=""
-          className="logo-mark__img logo-mark__img--symbol md:hidden"
+          className="logo-mark__img logo-mark__img--symbol block lg:hidden dark:block dark:lg:block"
           width={100}
           height={99}
           decoding="async"
@@ -34,7 +34,7 @@ export function LogoMark({ variant = 'nav', className = '' }: LogoMarkProps) {
         <img
           src={BRAND.horizontal}
           alt=""
-          className="logo-mark__img logo-mark__img--horizontal hidden md:block"
+          className="logo-mark__img logo-mark__img--horizontal hidden lg:block dark:hidden"
           width={1024}
           height={354}
           decoding="async"
diff --git a/src/index.css b/src/index.css
index f9b6fdd..56b0cf2 100644
--- a/src/index.css
+++ b/src/index.css
@@ -62,8 +62,7 @@
     background-attachment: fixed;
   }
 
-  .dark body,
-  body.dark {
+  html.dark body {
     background: #0a0f0e;
     background-image: none;
   }
@@ -217,7 +216,7 @@
     align-items: center;
   }
 
-  @media (min-width: 768px) {
+  @media (min-width: 1024px) {
     .mim-site-nav {
       min-height: 4.5rem;
       padding-top: 0.375rem;
@@ -251,10 +250,8 @@
     max-width: 20rem;
   }
 
-  @media (prefers-color-scheme: dark) {
-    .footer-brand-block .footer-tagline {
-      color: #d4d4d8;
-    }
+  .dark .footer-brand-block .footer-tagline {
+    color: #d4d4d8;
   }
 
   .btn-primary {
@@ -323,16 +320,14 @@
     outline: 2px solid var(--mim-brand-green);
     outline-offset: 2px;
   }
-  @media (prefers-color-scheme: dark) {
-    .btn-secondary {
-      border: 1px solid rgba(255, 255, 255, 0.2);
-      background-color: rgba(255, 255, 255, 0.1);
-      color: #e5e5e5;
-    }
-    .btn-secondary:hover {
-      background-color: rgba(255, 255, 255, 0.2);
-      border-color: var(--mim-brand-gold);
-    }
+  .dark .btn-secondary {
+    border: 1px solid rgba(255, 255, 255, 0.2);
+    background-color: rgba(255, 255, 255, 0.1);
+    color: #e5e5e5;
+  }
+  .dark .btn-secondary:hover {
+    background-color: rgba(255, 255, 255, 0.2);
+    border-color: var(--mim-brand-gold);
   }
 
   .btn-white {
@@ -364,20 +359,8 @@
   .navlink {
     font-size: 0.875rem;
     font-weight: 500;
-    color: #52525b;
     transition: color 0.2s;
   }
-  .navlink:hover {
-    color: var(--mim-brand-green);
-  }
-  @media (prefers-color-scheme: dark) {
-    .navlink {
-      color: #d4d4d8;
-    }
-    .navlink:hover {
-      color: var(--mim-brand-gold-bright);
-    }
-  }
 
   .input-field {
     width: 100%;
@@ -402,15 +385,13 @@
     outline: 2px solid var(--mim-brand-green);
     outline-offset: 2px;
   }
-  @media (prefers-color-scheme: dark) {
-    .input-field {
-      border: 1px solid #4b5563;
-      background-color: #1f2937;
-      color: #f3f4f6;
-    }
-    .input-field:focus {
-      border-color: var(--mim-brand-gold);
-    }
+  .dark .input-field {
+    border: 1px solid #4b5563;
+    background-color: #1f2937;
+    color: #f3f4f6;
+  }
+  .dark .input-field:focus {
+    border-color: var(--mim-brand-gold);
   }
 
   .line-clamp-2 {
@@ -449,14 +430,16 @@
     outline: 2px solid var(--mim-brand-green);
     outline-offset: 2px;
   }
-  @media (prefers-color-scheme: dark) {
-    .input {
-      border: 1px solid rgba(255, 255, 255, 0.1);
-      background-color: rgba(255, 255, 255, 0.1);
-    }
-    .input:focus {
-      border-color: var(--mim-brand-gold);
-    }
+  .dark .input {
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    background-color: rgba(255, 255, 255, 0.1);
+    color: #f3f4f6;
+  }
+  .dark .input::placeholder {
+    color: #9ca3af;
+  }
+  .dark .input:focus {
+    border-color: var(--mim-brand-gold);
   }
 
   .card {
@@ -467,11 +450,10 @@
     box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
     backdrop-filter: blur(8px);
   }
-  @media (prefers-color-scheme: dark) {
-    .card {
-      border: 1px solid rgba(255, 255, 255, 0.1);
-      background-color: rgba(255, 255, 255, 0.05);
-    }
+  .dark .card {
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    background-color: rgba(255, 255, 255, 0.05);
+    color: #e5e5e5;
   }
 
   .card-hover {
@@ -496,10 +478,8 @@
     color: var(--mim-brand-gold);
     font-weight: 600;
   }
-  @media (prefers-color-scheme: dark) {
-    .section-eyebrow {
-      color: var(--mim-brand-gold-bright);
-    }
+  .dark .section-eyebrow {
+    color: var(--mim-brand-gold-bright);
   }
 
   .section-title {
@@ -517,10 +497,8 @@
       line-height: 2.5rem;
     }
   }
-  @media (prefers-color-scheme: dark) {
-    .section-title {
-      color: #f4f4f5;
-    }
+  .dark .section-title {
+    color: #f4f4f5;
   }
 
   .section-subtitle {
@@ -528,10 +506,8 @@
     font-size: 1.125rem;
     color: #52525b;
   }
-  @media (prefers-color-scheme: dark) {
-    .section-subtitle {
-      color: #d4d4d8;
-    }
+  .dark .section-subtitle {
+    color: #d4d4d8;
   }
 }
 
diff --git a/src/pages/foundation/FoundationPages.tsx b/src/pages/foundation/FoundationPages.tsx
index 4d6538c..122faae 100644
--- a/src/pages/foundation/FoundationPages.tsx
+++ b/src/pages/foundation/FoundationPages.tsx
@@ -28,7 +28,7 @@ function PageIntro({
   return (
     <div className="foundation-page mx-auto max-w-4xl px-4 py-12 sm:px-6 lg:px-8">
       <p className="section-eyebrow">{eyebrow}</p>
-      <h1 className="section-title mt-2">{title}</h1>
+      <h1 className="section-title mt-2 text-primary-900 dark:text-zinc-50">{title}</h1>
       <div className="mt-6 space-y-4 text-base leading-relaxed text-neutral-700 dark:text-neutral-300">
         {children}
       </div>