Deep brand identity: SVG pillar icons (replace emoji), nav tagline lockup, photo captions, Aref Ruqaa font, community-voice class, nav CTA padding fix

html/404.html

@@ -12,7 +12,7 @@
   <div class="nav-inner">
     <a href="/" class="nav-brand">
       <svg class="mark" viewBox="0 0 64 64" width="32" height="32"><path d="M32 4 C32 4, 56 28, 56 40 C56 53.25 45.25 60 32 60 C18.75 60 8 53.25 8 40 C8 28 32 4 32 4Z" fill="#C9A84C"/><path d="M32 14 C32 14, 50 31, 50 40 C50 49.5 41.75 55 32 55 C22.25 55 14 49.5 14 40 C14 31 32 14 32 14Z" fill="#6B3A2A"/><path d="M32 22 C32 22, 44 34, 44 40 C44 46.6 38.6 50 32 50 C25.4 50 20 46.6 20 40 C20 34 32 22 32 22Z" fill="#2D6A4F"/><path d="M32 30 C32 30, 38 36, 38 40 C38 43.3 35.3 45 32 45 C28.7 45 26 43.3 26 40 C26 36 32 30 32 30Z" fill="#2578A1"/></svg>
-      <span class="wordmark">TAAWUNU</span>
+      <div style="display:flex;flex-direction:column;"><span class="wordmark">TAAWUNU</span><span class="nav-tagline">From the ground up</span></div>
     </a>
     <ul class="nav-links">
       <li><a href="/">Home</a></li>

html/about/index.html

@@ -14,7 +14,7 @@
   <div class="nav-inner">
     <a href="/" class="nav-brand">
       <svg class="mark" viewBox="0 0 64 64" width="32" height="32"><path d="M32 4 C32 4, 56 28, 56 40 C56 53.25 45.25 60 32 60 C18.75 60 8 53.25 8 40 C8 28 32 4 32 4Z" fill="#C9A84C"/><path d="M32 14 C32 14, 50 31, 50 40 C50 49.5 41.75 55 32 55 C22.25 55 14 49.5 14 40 C14 31 32 14 32 14Z" fill="#6B3A2A"/><path d="M32 22 C32 22, 44 34, 44 40 C44 46.6 38.6 50 32 50 C25.4 50 20 46.6 20 40 C20 34 32 22 32 22Z" fill="#2D6A4F"/><path d="M32 30 C32 30, 38 36, 38 40 C38 43.3 35.3 45 32 45 C28.7 45 26 43.3 26 40 C26 36 32 30 32 30Z" fill="#2578A1"/></svg>
-      <span class="wordmark">TAAWUNU</span>
+      <div style="display:flex;flex-direction:column;"><span class="wordmark">TAAWUNU</span><span class="nav-tagline">From the ground up</span></div>
     </a>
     <button class="nav-toggle" id="navToggle" aria-label="Menu"><span></span><span></span><span></span></button>
     <ul class="nav-links" id="navLinks">
@@ -193,7 +193,7 @@
 <footer class="footer">
   <div class="container">
     <div class="footer-grid">
-      <div class="footer-brand"><div class="footer-arabic">تَعَاوُنُوا</div><div class="footer-wordmark">TAAWUNU</div><p>A social impact studio designing permanent self-sufficiency for marginalized communities.</p></div>
+      <div class="footer-brand"><div class="footer-arabic">تَعَاوُنُوا</div><div class="footer-wordmark">TAAWUNU</div><div class="footer-tagline">From the ground up</div><p>A social impact studio designing permanent self-sufficiency for marginalized communities.</p></div>
       <div><h4>Explore</h4><ul><li><a href="/approach/">Our Approach</a></li><li><a href="/projects/">Projects</a></li><li><a href="/gallery/">Gallery</a></li>
       <li><a href="/about/">About Us</a></li><li><a href="/support/">Support</a></li></ul></div>
       <div><h4>Projects</h4><ul><li><a href="/projects/#aquaculture">Lolo Aquaculture</a></li><li><a href="/projects/#water">Solar Water Well</a></li></ul></div>

html/approach/index.html

@@ -14,7 +14,7 @@
   <div class="nav-inner">
     <a href="/" class="nav-brand">
       <svg class="mark" viewBox="0 0 64 64" width="32" height="32"><path d="M32 4 C32 4, 56 28, 56 40 C56 53.25 45.25 60 32 60 C18.75 60 8 53.25 8 40 C8 28 32 4 32 4Z" fill="#C9A84C"/><path d="M32 14 C32 14, 50 31, 50 40 C50 49.5 41.75 55 32 55 C22.25 55 14 49.5 14 40 C14 31 32 14 32 14Z" fill="#6B3A2A"/><path d="M32 22 C32 22, 44 34, 44 40 C44 46.6 38.6 50 32 50 C25.4 50 20 46.6 20 40 C20 34 32 22 32 22Z" fill="#2D6A4F"/><path d="M32 30 C32 30, 38 36, 38 40 C38 43.3 35.3 45 32 45 C28.7 45 26 43.3 26 40 C26 36 32 30 32 30Z" fill="#2578A1"/></svg>
-      <span class="wordmark">TAAWUNU</span>
+      <div style="display:flex;flex-direction:column;"><span class="wordmark">TAAWUNU</span><span class="nav-tagline">From the ground up</span></div>
     </a>
     <button class="nav-toggle" id="navToggle" aria-label="Menu"><span></span><span></span><span></span></button>
     <ul class="nav-links" id="navLinks">
@@ -56,6 +56,7 @@
     <div class="story-block fade-up" style="margin-bottom:2px; border-radius:4px; overflow:hidden; max-height:520px;">
       <div class="story-photo">
         <img src="/images/gallery/borehole-water-flowing.jpg" alt="Solar-powered borehole pumping 10,000 litres of clean water daily" loading="lazy" style="object-position: center 30%;">
+        <div class="story-caption">Solar-powered borehole and elevated storage tank, Lolo Camp</div>
       </div>
       <div class="story-text" style="background: rgba(37,120,161,0.05); padding: 48px 40px;">
         <div class="label" style="color:var(--water);">Pillar 1</div>
@@ -70,6 +71,7 @@
     <div class="story-block reverse fade-up" style="margin-bottom:2px; border-radius:4px; overflow:hidden; max-height:520px;">
       <div class="story-photo">
         <img src="/images/gallery/fish-ponds-aerial.jpg" alt="Aerial view of 10 fish ponds carved into the red laterite earth" loading="lazy">
+        <div class="story-caption">Aerial view: 10 earthen ponds carved into red laterite, Lolo Farm</div>
       </div>
       <div class="story-text" style="background: rgba(45,106,79,0.05); padding: 48px 40px;">
         <div class="label" style="color:var(--green);">Pillar 2</div>
@@ -84,6 +86,7 @@
     <div class="story-block fade-up" style="margin-bottom:2px; border-radius:4px; overflow:hidden; max-height:520px;">
       <div class="story-photo">
         <img src="/images/gallery/market-fish-sales.jpg" alt="Fresh catfish for sale at the local market — surplus creates livelihoods" loading="lazy" style="object-position: center 40%;">
+        <div class="story-caption">Fresh catfish at Lolo market — surplus creates livelihoods</div>
       </div>
       <div class="story-text" style="background: rgba(107,58,42,0.05); padding: 48px 40px;">
         <div class="label" style="color:var(--earth);">Pillar 3</div>
@@ -98,6 +101,7 @@
     <div class="story-block reverse fade-up" style="margin-bottom:2px; border-radius:4px; overflow:hidden; max-height:520px;">
       <div class="story-photo">
         <img src="/images/gallery/children-classroom-light.jpg" alt="Children study at wooden desks in an open-air classroom with corrugated roof" loading="lazy">
+        <div class="story-caption">Children study at an open-air classroom, Lolo Camp</div>
       </div>
       <div class="story-text" style="background: rgba(201,168,76,0.05); padding: 48px 40px;">
         <div class="label" style="color:var(--gold);">Pillar 4</div>
@@ -172,7 +176,7 @@
     <div class="footer-grid">
       <div class="footer-brand">
         <div class="footer-arabic">تَعَاوُنُوا</div>
-        <div class="footer-wordmark">TAAWUNU</div>
+        <div class="footer-wordmark">TAAWUNU</div><div class="footer-tagline">From the ground up</div>
         <p>A social impact studio that designs, manages, and verifies community empowerment projects.</p>
       </div>
       <div><h4>Explore</h4><ul><li><a href="/approach/">Our Approach</a></li><li><a href="/projects/">Projects</a></li><li><a href="/gallery/">Gallery</a></li>

html/css/style.css

@@ -2,7 +2,7 @@
    TAAWUNU.ORG — Global Stylesheet
    ══════════════════════════════════════════════════ */
 
-@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,600;0,9..144,700;0,9..144,900;1,9..144,400;1,9..144,700&family=Source+Sans+3:ital,wght@0,300;0,400;0,600;0,700&family=JetBrains+Mono:wght@400;500&family=Caveat:wght@400;700&family=Noto+Naskh+Arabic:wght@400;700&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,600;0,9..144,700;0,9..144,900;1,9..144,400;1,9..144,700&family=Source+Sans+3:ital,wght@0,300;0,400;0,600;0,700&family=JetBrains+Mono:wght@400;500&family=Caveat:wght@400;700&family=Noto+Naskh+Arabic:wght@400;700&family=Aref+Ruqaa:wght@400;700&display=swap');
 
 /* ─── Variables ─── */
 :root {
@@ -22,6 +22,7 @@
   --font-mono: 'JetBrains Mono', monospace;
   --font-hand: 'Caveat', cursive;
   --font-arabic: 'Noto Naskh Arabic', serif;
+  --font-arabic-hand: 'Aref Ruqaa', serif;
   --max-w: 1200px;
   --max-content: 720px;
 }
@@ -106,7 +107,7 @@ p { margin-bottom: 16px; max-width: 720px; }
 .nav-inner {
   max-width: var(--max-w);
   margin: 0 auto;
-  padding: 0 24px;
+  padding: 0 32px;
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -158,12 +159,13 @@ p { margin-bottom: 16px; max-width: 720px; }
 .nav-cta {
   background: var(--green);
   color: white !important;
-  padding: 8px 20px;
+  padding: 10px 24px;
   border-radius: 4px;
   font-size: 13px;
   font-weight: 600;
   letter-spacing: 0.02em;
   transition: background 0.2s;
+  white-space: nowrap;
 }
 .nav-cta:hover { background: #245a42; }
 .nav-cta::after { display: none !important; }
@@ -1320,3 +1322,87 @@ p { margin-bottom: 16px; max-width: 720px; }
   min-height: 120px;
   resize: vertical;
 }
+
+/* ═══════════════════════════════════════════
+   BRAND IDENTITY — Deep Implementation
+   ═══════════════════════════════════════════ */
+
+/* ─── Inline SVG Pillar Icons ─── */
+.pillar-icon-svg {
+  display: inline-block;
+  width: 20px;
+  height: 20px;
+  vertical-align: -3px;
+  margin-right: 4px;
+  flex-shrink: 0;
+}
+.pillar-icon-svg.sm { width: 14px; height: 14px; vertical-align: -2px; }
+.pillar-icon-svg.lg { width: 32px; height: 32px; }
+.pillar-icon-svg.xl { width: 40px; height: 40px; margin-bottom: 12px; }
+
+/* ─── Brand Tagline in Nav ─── */
+.nav-tagline {
+  font-family: var(--font-body);
+  font-size: 10px;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  color: var(--muted);
+  margin-top: -2px;
+}
+
+/* ─── Photo Caption Bar (brand mandatory) ─── */
+.story-caption {
+  font-family: var(--font-body);
+  font-size: 12px;
+  color: var(--muted);
+  padding: 8px 0 0;
+  font-style: italic;
+}
+.story-block .story-caption {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  background: rgba(245, 239, 224, 0.92);
+  padding: 6px 12px;
+  font-style: normal;
+  font-size: 11px;
+}
+.story-photo { position: relative; }
+
+/* ─── Community Voice (Caveat) — brand spec: community voices get handwritten treatment ─── */
+.community-voice {
+  font-family: var(--font-hand);
+  font-size: clamp(1.15rem, 2.5vw, 1.5rem);
+  font-weight: 700;
+  color: var(--deep);
+  line-height: 1.4;
+}
+.community-voice-arabic {
+  font-family: var(--font-arabic-hand);
+  font-size: clamp(1.3rem, 3vw, 1.8rem);
+  direction: rtl;
+  color: var(--gold);
+  line-height: 1.5;
+}
+
+/* ─── Metric number refinement (brand spec: -0.02em tracking) ─── */
+.metric-number {
+  letter-spacing: -0.02em;
+}
+
+/* ─── Section breathing (brand: "white space is respect") ─── */
+.section-breathe {
+  padding: 96px 0;
+}
+
+/* ─── Footer tagline lockup ─── */
+.footer-tagline {
+  font-family: var(--font-body);
+  font-size: 11px;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+  color: var(--muted);
+  margin-top: 4px;
+  opacity: 0.7;
+}

html/gallery/index.html

@@ -73,7 +73,7 @@
   <div class="nav-inner">
     <a href="/" class="nav-brand">
       <svg class="mark" viewBox="0 0 64 64" width="32" height="32"><path d="M32 4 C32 4, 56 28, 56 40 C56 53.25 45.25 60 32 60 C18.75 60 8 53.25 8 40 C8 28 32 4 32 4Z" fill="#C9A84C"/><path d="M32 14 C32 14, 50 31, 50 40 C50 49.5 41.75 55 32 55 C22.25 55 14 49.5 14 40 C14 31 32 14 32 14Z" fill="#6B3A2A"/><path d="M32 22 C32 22, 44 34, 44 40 C44 46.6 38.6 50 32 50 C25.4 50 20 46.6 20 40 C20 34 32 22 32 22Z" fill="#2D6A4F"/><path d="M32 30 C32 30, 38 36, 38 40 C38 43.3 35.3 45 32 45 C28.7 45 26 43.3 26 40 C26 36 32 30 32 30Z" fill="#2578A1"/></svg>
-      <span class="wordmark">TAAWUNU</span>
+      <div style="display:flex;flex-direction:column;"><span class="wordmark">TAAWUNU</span><span class="nav-tagline">From the ground up</span></div>
     </a>
     <button class="nav-toggle" id="navToggle" aria-label="Menu"><span></span><span></span><span></span></button>
     <ul class="nav-links" id="navLinks">
@@ -102,10 +102,10 @@
 <section style="border-bottom: 1px solid rgba(156,148,136,0.15);">
   <div class="container gallery-filters">
     <button class="filter-btn active" data-filter="all">All</button>
-    <button class="filter-btn" data-filter="water">💧 Water</button>
+    <button class="filter-btn" data-filter="water"><svg class="pillar-icon-svg" style="color:var(--water)"><use href="/images/pillar-icons.svg#icon-water"/></svg> Water</button>
-    <button class="filter-btn" data-filter="food">🌾 Food</button>
+    <button class="filter-btn" data-filter="food"><svg class="pillar-icon-svg" style="color:var(--green)"><use href="/images/pillar-icons.svg#icon-food"/></svg> Food</button>
-    <button class="filter-btn" data-filter="livelihoods">💼 Livelihoods</button>
+    <button class="filter-btn" data-filter="livelihoods"><svg class="pillar-icon-svg" style="color:var(--earth)"><use href="/images/pillar-icons.svg#icon-livelihoods"/></svg> Livelihoods</button>
-    <button class="filter-btn" data-filter="education">📚 Education</button>
+    <button class="filter-btn" data-filter="education"><svg class="pillar-icon-svg" style="color:var(--gold)"><use href="/images/pillar-icons.svg#icon-education"/></svg> Education</button>
   </div>
 </section>
 
@@ -116,7 +116,7 @@
       <div class="gallery-item wide" data-pillar="food" data-index="0">
         <img src="/images/gallery/fish-ponds-aerial.jpg" alt="Aerial view of 10 fish ponds carved into red laterite earth" loading="lazy">
         <div class="overlay">
-          <span class="pillar-tag tag-food">🌾 Food</span>
+          <span class="pillar-tag tag-food"><svg class="pillar-icon-svg" style="color:var(--green)"><use href="/images/pillar-icons.svg#icon-food"/></svg> Food</span>
           <div class="caption-title">The Fish Farm — Aerial View</div>
           <div class="caption-desc">10 earthen ponds carved into the red laterite soil, filled with water and ready for stocking. The foundation of community self-sufficiency.</div>
         </div>
@@ -124,7 +124,7 @@
       <div class="gallery-item tall" data-pillar="water" data-index="1">
         <img src="/images/gallery/borehole-water-flowing.jpg" alt="Solar-powered borehole pumping clean water" loading="lazy">
         <div class="overlay">
-          <span class="pillar-tag tag-water">💧 Water</span>
+          <span class="pillar-tag tag-water"><svg class="pillar-icon-svg" style="color:var(--water)"><use href="/images/pillar-icons.svg#icon-water"/></svg> Water</span>
           <div class="caption-title">Clean Water Flows</div>
           <div class="caption-desc">Solar-powered borehole pumping 10,000 litres daily. Elevated storage tank and solar panels visible. The first pillar — complete.</div>
         </div>
@@ -134,7 +134,7 @@
       <div class="gallery-item" data-pillar="food" data-index="2">
         <img src="/images/gallery/fish-harvest-community.jpg" alt="Community members harvesting catfish from pond" loading="lazy">
         <div class="overlay">
-          <span class="pillar-tag tag-food">🌾 Food</span>
+          <span class="pillar-tag tag-food"><svg class="pillar-icon-svg" style="color:var(--green)"><use href="/images/pillar-icons.svg#icon-food"/></svg> Food</span>
           <div class="caption-title">First Harvest</div>
           <div class="caption-desc">Community members wade into the drained pond with nets. Women and children sort the catch on the embankment above.</div>
         </div>
@@ -142,7 +142,7 @@
       <div class="gallery-item" data-pillar="food" data-index="3">
         <img src="/images/gallery/pond-construction-workers.jpg" alt="Workers digging fish ponds by hand" loading="lazy">
         <div class="overlay">
-          <span class="pillar-tag tag-food">🌾 Food</span>
+          <span class="pillar-tag tag-food"><svg class="pillar-icon-svg" style="color:var(--green)"><use href="/images/pillar-icons.svg#icon-food"/></svg> Food</span>
           <div class="caption-title">Building the Ponds</div>
           <div class="caption-desc">Community members dig fish ponds by hand — the scale of manual labour is staggering. Real work, real progress.</div>
         </div>
@@ -152,7 +152,7 @@
       <div class="gallery-item" data-pillar="water" data-index="4">
         <img src="/images/gallery/water-tank-sunset.jpg" alt="Water storage tank silhouetted against sunset" loading="lazy">
         <div class="overlay">
-          <span class="pillar-tag tag-water">💧 Water</span>
+          <span class="pillar-tag tag-water"><svg class="pillar-icon-svg" style="color:var(--water)"><use href="/images/pillar-icons.svg#icon-water"/></svg> Water</span>
           <div class="caption-title">Permanence at Sunset</div>
           <div class="caption-desc">The elevated water tank silhouetted against the African sunset. This infrastructure will be here long after the project team has gone home.</div>
         </div>
@@ -160,7 +160,7 @@
       <div class="gallery-item wide" data-pillar="education" data-index="5">
         <img src="/images/gallery/children-classroom-light.jpg" alt="Children studying in community classroom" loading="lazy">
         <div class="overlay">
-          <span class="pillar-tag tag-education">📚 Education</span>
+          <span class="pillar-tag tag-education"><svg class="pillar-icon-svg" style="color:var(--gold)"><use href="/images/pillar-icons.svg#icon-education"/></svg> Education</span>
           <div class="caption-title">The Classroom</div>
           <div class="caption-desc">Natural light streams through open windows. A teacher instructs children at wooden desks. Basic but functional — and funded by the fish farm.</div>
         </div>
@@ -170,7 +170,7 @@
       <div class="gallery-item" data-pillar="livelihoods" data-index="6">
         <img src="/images/gallery/market-fish-sales.jpg" alt="Woman selling catfish at local market" loading="lazy">
         <div class="overlay">
-          <span class="pillar-tag tag-livelihoods">💼 Livelihoods</span>
+          <span class="pillar-tag tag-livelihoods"><svg class="pillar-icon-svg" style="color:var(--earth)"><use href="/images/pillar-icons.svg#icon-livelihoods"/></svg> Livelihoods</span>
           <div class="caption-title">Market Day</div>
           <div class="caption-desc">Fresh catfish for sale at the local market. Surplus fish create income, jobs, and an economy that doesn't depend on outside funding.</div>
         </div>
@@ -178,7 +178,7 @@
       <div class="gallery-item" data-pillar="livelihoods" data-index="7">
         <img src="/images/gallery/catfish-closeup-basin.jpg" alt="Freshly harvested catfish in metal basin" loading="lazy">
         <div class="overlay">
-          <span class="pillar-tag tag-livelihoods">💼 Livelihoods</span>
+          <span class="pillar-tag tag-livelihoods"><svg class="pillar-icon-svg" style="color:var(--earth)"><use href="/images/pillar-icons.svg#icon-livelihoods"/></svg> Livelihoods</span>
           <div class="caption-title">The Harvest — Up Close</div>
           <div class="caption-desc">Freshly harvested catfish packed in a basin. These fish grew in the ponds, fed by the water system. The model works.</div>
         </div>
@@ -186,7 +186,7 @@
       <div class="gallery-item" data-pillar="water" data-index="8">
         <img src="/images/gallery/solar-panels-installation.jpg" alt="Installing solar panels for water pump" loading="lazy">
         <div class="overlay">
-          <span class="pillar-tag tag-water">💧 Water</span>
+          <span class="pillar-tag tag-water"><svg class="pillar-icon-svg" style="color:var(--water)"><use href="/images/pillar-icons.svg#icon-water"/></svg> Water</span>
           <div class="caption-title">Solar Power Installation</div>
           <div class="caption-desc">Workers install solar panels to power the borehole pump. No fuel costs, no moving parts — clean energy for clean water.</div>
         </div>
@@ -196,7 +196,7 @@
       <div class="gallery-item" data-pillar="water" data-index="9">
         <img src="/images/gallery/woman-carrying-water.jpg" alt="Woman carrying water along red laterite path" loading="lazy">
         <div class="overlay">
-          <span class="pillar-tag tag-water">💧 Water</span>
+          <span class="pillar-tag tag-water"><svg class="pillar-icon-svg" style="color:var(--water)"><use href="/images/pillar-icons.svg#icon-water"/></svg> Water</span>
           <div class="caption-title">Water For Home</div>
           <div class="caption-desc">Clean water carried home along the red laterite paths of the camp. Before the borehole, this walk was kilometres longer.</div>
         </div>
@@ -204,7 +204,7 @@
       <div class="gallery-item" data-pillar="food" data-index="10">
         <img src="/images/gallery/hands-soil-seedling.jpg" alt="Hands cupping red earth with a seedling" loading="lazy">
         <div class="overlay">
-          <span class="pillar-tag tag-food">🌾 Food</span>
+          <span class="pillar-tag tag-food"><svg class="pillar-icon-svg" style="color:var(--green)"><use href="/images/pillar-icons.svg#icon-food"/></svg> Food</span>
           <div class="caption-title">From the Ground Up</div>
           <div class="caption-desc">Working hands hold red Cameroon earth and a tiny seedling. The core metaphor of everything we do.</div>
         </div>
@@ -212,7 +212,7 @@
       <div class="gallery-item" data-pillar="livelihoods" data-index="11">
         <img src="/images/gallery/community-meeting-shelter.jpg" alt="Community meeting under open shelter" loading="lazy">
         <div class="overlay">
-          <span class="pillar-tag tag-livelihoods">💼 Livelihoods</span>
+          <span class="pillar-tag tag-livelihoods"><svg class="pillar-icon-svg" style="color:var(--earth)"><use href="/images/pillar-icons.svg#icon-livelihoods"/></svg> Livelihoods</span>
           <div class="caption-title">Community Governance</div>
           <div class="caption-desc">Decisions are made together. The community management committee meets to plan operations, allocate resources, and solve problems collectively.</div>
         </div>
@@ -222,7 +222,7 @@
       <div class="gallery-item wide" data-pillar="food" data-index="12" style="grid-column: span 3;">
         <img src="/images/gallery/drone-camp-overview.jpg" alt="Aerial overview of the camp and fish ponds" loading="lazy" style="aspect-ratio:21/9; object-position: center 40%;">
         <div class="overlay">
-          <span class="pillar-tag tag-food">🌾 Full Ecosystem</span>
+          <span class="pillar-tag tag-food"><svg class="pillar-icon-svg" style="color:var(--green)"><use href="/images/pillar-icons.svg#icon-food"/></svg> Full Ecosystem</span>
           <div class="caption-title">The Full Picture</div>
           <div class="caption-desc">Fish ponds, water infrastructure, community, forest — all interconnected. From aid to independence, one community at a time.</div>
         </div>
@@ -253,7 +253,7 @@
 <footer class="footer">
   <div class="container">
     <div class="footer-grid">
-      <div class="footer-brand"><div class="footer-arabic">تَعَاوُنُوا</div><div class="footer-wordmark">TAAWUNU</div><p>A social impact studio designing permanent self-sufficiency for marginalized communities.</p></div>
+      <div class="footer-brand"><div class="footer-arabic">تَعَاوُنُوا</div><div class="footer-wordmark">TAAWUNU</div><div class="footer-tagline">From the ground up</div><p>A social impact studio designing permanent self-sufficiency for marginalized communities.</p></div>
       <div><h4>Explore</h4><ul><li><a href="/approach/">Our Approach</a></li><li><a href="/projects/">Projects</a></li><li><a href="/gallery/">Gallery</a></li><li><a href="/about/">About Us</a></li><li><a href="/support/">Support</a></li></ul></div>
       <div><h4>Projects</h4><ul><li><a href="/projects/#aquaculture">Lolo Aquaculture</a></li><li><a href="/projects/#water">Solar Water Well</a></li></ul></div>
       <div><h4>Connect</h4><ul><li><a href="mailto:hello@taawunu.org">hello@taawunu.org</a></li><li><a href="https://linkedin.com/company/taawunu" target="_blank" rel="noopener">LinkedIn</a></li><li><a href="https://instagram.com/taawunu" target="_blank" rel="noopener">Instagram</a></li></ul></div>

html/images/pillar-icons.svg

@@ -0,0 +1,29 @@
+<svg xmlns="http://www.w3.org/2000/svg" style="display:none">
+  <!-- Water: droplet with ripple ring -->
+  <symbol id="icon-water" viewBox="0 0 24 24" fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+    <path d="M12 2C12 2 5 10 5 15a7 7 0 0014 0C19 10 12 2 12 2z" stroke="currentColor"/>
+    <path d="M8.5 19.5a4 4 0 005.5 0" stroke="currentColor" opacity="0.5"/>
+  </symbol>
+  <!-- Food: seedling/sprout emerging from soil -->
+  <symbol id="icon-food" viewBox="0 0 24 24" fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+    <path d="M12 22V12" stroke="currentColor"/>
+    <path d="M7 12c0-3 2-5 5-5" stroke="currentColor"/>
+    <path d="M17 8c0-3-2-5-5-5" stroke="currentColor"/>
+    <path d="M7 12c-2 0-3.5-1.5-3.5-3.5S7 5 7 5" stroke="currentColor"/>
+    <path d="M17 8c2 0 3.5-1.5 3.5-3.5S17 1 17 1" stroke="currentColor"/>
+    <line x1="4" y1="22" x2="20" y2="22" stroke="currentColor" opacity="0.4"/>
+  </symbol>
+  <!-- Livelihoods: two hands exchanging/building -->
+  <symbol id="icon-livelihoods" viewBox="0 0 24 24" fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+    <path d="M2 16l5-1 3 3-1 4" stroke="currentColor"/>
+    <path d="M22 16l-5-1-3 3 1 4" stroke="currentColor"/>
+    <path d="M7 15l2-5 3-2 3 2 2 5" stroke="currentColor"/>
+    <circle cx="12" cy="5" r="2" stroke="currentColor"/>
+  </symbol>
+  <!-- Education: open book with light/star above -->
+  <symbol id="icon-education" viewBox="0 0 24 24" fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+    <path d="M2 19V6l10 4 10-4v13" stroke="currentColor"/>
+    <path d="M12 10v12" stroke="currentColor"/>
+    <path d="M12 2l1.5 2.5L16 5l-2.5 1.5L12 9l-1.5-2.5L8 5l2.5-1.5L12 2z" stroke="currentColor" fill="currentColor" opacity="0.3"/>
+  </symbol>
+</svg>

html/index.html

@@ -25,7 +25,7 @@
         <path d="M32 22 C32 22, 44 34, 44 40 C44 46.6 38.6 50 32 50 C25.4 50 20 46.6 20 40 C20 34 32 22 32 22Z" fill="#2D6A4F"/>
         <path d="M32 30 C32 30, 38 36, 38 40 C38 43.3 35.3 45 32 45 C28.7 45 26 43.3 26 40 C26 36 32 30 32 30Z" fill="#2578A1"/>
       </svg>
-      <span class="wordmark">TAAWUNU</span>
+      <div style="display:flex;flex-direction:column;"><span class="wordmark">TAAWUNU</span><span class="nav-tagline">From the ground up</span></div>
     </a>
     <button class="nav-toggle" id="navToggle" aria-label="Menu">
       <span></span><span></span><span></span>
@@ -152,6 +152,7 @@
 <section class="story-block fade-up">
   <div class="story-photo">
     <img src="/images/community-planting.jpg" alt="Community members and team planting at the Lolo Farm site, April 2024" loading="lazy">
+    <div class="story-caption">Community members and project team planting at Lolo Farm, Adamawa Region, April 2024</div>
   </div>
   <div class="story-text">
     <div class="section-label">Flagship Project</div>
@@ -165,13 +166,14 @@
 <section class="story-block reverse fade-up">
   <div class="story-photo">
     <img src="/images/children-quran-study.jpg" alt="Children studying Quran on wooden boards at Lolo Camp, February 2025" loading="lazy">
+    <div class="story-caption">Children study Quran on wooden alluha boards, Lolo Camp, February 2025</div>
   </div>
   <div class="story-text">
     <div class="section-label">Why Education Comes Last</div>
     <h2>First the well. Then the farm. Then the school.</h2>
     <p>These children study Quran on wooden boards, sitting on the red earth beside the mosque. They have no desk, no textbook, no light after sunset. But they have a teacher. And this year — they'll have a school.</p>
     <p>Education is the final pillar because it must be <em>sustained</em>. A school funded by a campaign closes when the campaign ends. A school funded by a fish farm runs forever.</p>
-    <div class="quote mt-3">
+    <div class="quote community-voice mt-3">
       "We have started to stand on our own feet. We see a future for our children unfolding."
       <div class="quote-attr">— Community elder, Lolo Camp</div>
     </div>
@@ -253,7 +255,7 @@
     <div class="footer-grid">
       <div class="footer-brand">
         <div class="footer-arabic">تَعَاوُنُوا</div>
-        <div class="footer-wordmark">TAAWUNU</div>
+        <div class="footer-wordmark">TAAWUNU</div><div class="footer-tagline">From the ground up</div>
         <p>A social impact studio designing permanent self-sufficiency for marginalized communities.</p>
       </div>
       <div>

html/projects/index.html

@@ -14,7 +14,7 @@
   <div class="nav-inner">
     <a href="/" class="nav-brand">
       <svg class="mark" viewBox="0 0 64 64" width="32" height="32"><path d="M32 4 C32 4, 56 28, 56 40 C56 53.25 45.25 60 32 60 C18.75 60 8 53.25 8 40 C8 28 32 4 32 4Z" fill="#C9A84C"/><path d="M32 14 C32 14, 50 31, 50 40 C50 49.5 41.75 55 32 55 C22.25 55 14 49.5 14 40 C14 31 32 14 32 14Z" fill="#6B3A2A"/><path d="M32 22 C32 22, 44 34, 44 40 C44 46.6 38.6 50 32 50 C25.4 50 20 46.6 20 40 C20 34 32 22 32 22Z" fill="#2D6A4F"/><path d="M32 30 C32 30, 38 36, 38 40 C38 43.3 35.3 45 32 45 C28.7 45 26 43.3 26 40 C26 36 32 30 32 30Z" fill="#2578A1"/></svg>
-      <span class="wordmark">TAAWUNU</span>
+      <div style="display:flex;flex-direction:column;"><span class="wordmark">TAAWUNU</span><span class="nav-tagline">From the ground up</span></div>
     </a>
     <button class="nav-toggle" id="navToggle" aria-label="Menu"><span></span><span></span><span></span></button>
     <ul class="nav-links" id="navLinks">
@@ -220,7 +220,7 @@
 <footer class="footer">
   <div class="container">
     <div class="footer-grid">
-      <div class="footer-brand"><div class="footer-arabic">تَعَاوُنُوا</div><div class="footer-wordmark">TAAWUNU</div><p>A social impact studio designing permanent self-sufficiency for marginalized communities.</p></div>
+      <div class="footer-brand"><div class="footer-arabic">تَعَاوُنُوا</div><div class="footer-wordmark">TAAWUNU</div><div class="footer-tagline">From the ground up</div><p>A social impact studio designing permanent self-sufficiency for marginalized communities.</p></div>
       <div><h4>Explore</h4><ul><li><a href="/approach/">Our Approach</a></li><li><a href="/projects/">Projects</a></li><li><a href="/gallery/">Gallery</a></li>
       <li><a href="/about/">About Us</a></li><li><a href="/support/">Support</a></li></ul></div>
       <div><h4>Projects</h4><ul><li><a href="/projects/#aquaculture">Lolo Aquaculture</a></li><li><a href="/projects/#water">Solar Water Well</a></li></ul></div>

html/support/index.html

@@ -14,7 +14,7 @@
   <div class="nav-inner">
     <a href="/" class="nav-brand">
       <svg class="mark" viewBox="0 0 64 64" width="32" height="32"><path d="M32 4 C32 4, 56 28, 56 40 C56 53.25 45.25 60 32 60 C18.75 60 8 53.25 8 40 C8 28 32 4 32 4Z" fill="#C9A84C"/><path d="M32 14 C32 14, 50 31, 50 40 C50 49.5 41.75 55 32 55 C22.25 55 14 49.5 14 40 C14 31 32 14 32 14Z" fill="#6B3A2A"/><path d="M32 22 C32 22, 44 34, 44 40 C44 46.6 38.6 50 32 50 C25.4 50 20 46.6 20 40 C20 34 32 22 32 22Z" fill="#2D6A4F"/><path d="M32 30 C32 30, 38 36, 38 40 C38 43.3 35.3 45 32 45 C28.7 45 26 43.3 26 40 C26 36 32 30 32 30Z" fill="#2578A1"/></svg>
-      <span class="wordmark">TAAWUNU</span>
+      <div style="display:flex;flex-direction:column;"><span class="wordmark">TAAWUNU</span><span class="nav-tagline">From the ground up</span></div>
     </a>
     <button class="nav-toggle" id="navToggle" aria-label="Menu"><span></span><span></span><span></span></button>
     <ul class="nav-links" id="navLinks">
@@ -76,7 +76,7 @@
     <div class="support-cards mt-4">
       <div class="support-card fade-up" style="border-top-color: var(--water);">
         <div class="support-card-img"><img src="/images/gallery/borehole-water-flowing.jpg" alt="Solar-powered borehole pumping clean water" loading="lazy"></div>
-        <div class="label" style="color:var(--water); margin-bottom:8px;">💧 Water</div>
+        <div class="label" style="color:var(--water); margin-bottom:8px;"><svg class="pillar-icon-svg" style="color:var(--water)"><use href="/images/pillar-icons.svg#icon-water"/></svg> Water</div>
         <h3>Solar Water Well — Lolo Camp</h3>
         <p>Fund a solar-powered borehole providing 10,000 litres of clean water daily to 4,000+ refugees. No fuel costs, no recurring expenses — powered by the sun.</p>
         <div class="support-card-bottom">
@@ -91,7 +91,7 @@
 
       <div class="support-card fade-up" style="border-top-color: var(--green);">
         <div class="support-card-img"><img src="/images/gallery/fish-harvest-community.jpg" alt="Community harvesting catfish — this is what your donation funds" loading="lazy"></div>
-        <div class="label" style="color:var(--green); margin-bottom:8px;">🌾 Food</div>
+        <div class="label" style="color:var(--green); margin-bottom:8px;"><svg class="pillar-icon-svg" style="color:var(--green)"><use href="/images/pillar-icons.svg#icon-food"/></svg> Food</div>
         <h3>Lolo Aquaculture — Phase 2</h3>
         <p>Fund the next phase of the community fish farm: broodstock acquisition, hatchery commissioning, and first pond stocking. This is the step that turns infrastructure into food.</p>
         <div class="support-card-bottom">
@@ -106,7 +106,7 @@
 
       <div class="support-card fade-up" style="border-top-color: var(--gold);">
         <div class="support-card-img"><img src="/images/gallery/children-classroom-light.jpg" alt="Children studying in their classroom — education funded by community enterprise" loading="lazy"></div>
-        <div class="label" style="color:var(--gold); margin-bottom:8px;">📚 Education</div>
+        <div class="label" style="color:var(--gold); margin-bottom:8px;"><svg class="pillar-icon-svg" style="color:var(--gold)"><use href="/images/pillar-icons.svg#icon-education"/></svg> Education</div>
         <h3>Quran School Materials</h3>
         <p>Provide writing boards (alluha), ink, and solar lights for the traditional Quran schools at Lolo Camp. A small investment with deep cultural significance.</p>
         <div class="support-card-bottom">
@@ -177,7 +177,7 @@
 <footer class="footer">
   <div class="container">
     <div class="footer-grid">
-      <div class="footer-brand"><div class="footer-arabic">تَعَاوُنُوا</div><div class="footer-wordmark">TAAWUNU</div><p>A social impact studio designing permanent self-sufficiency for marginalized communities.</p></div>
+      <div class="footer-brand"><div class="footer-arabic">تَعَاوُنُوا</div><div class="footer-wordmark">TAAWUNU</div><div class="footer-tagline">From the ground up</div><p>A social impact studio designing permanent self-sufficiency for marginalized communities.</p></div>
       <div><h4>Explore</h4><ul><li><a href="/approach/">Our Approach</a></li><li><a href="/projects/">Projects</a></li><li><a href="/gallery/">Gallery</a></li>
       <li><a href="/about/">About Us</a></li><li><a href="/support/">Support</a></li></ul></div>
       <div><h4>Projects</h4><ul><li><a href="/projects/#aquaculture">Lolo Aquaculture</a></li><li><a href="/projects/#water">Solar Water Well</a></li></ul></div>