Visual overhaul — gallery photos integrated across all pages

Homepage: - The Challenge: woman-carrying-water evidence photo beside text - 4 pillar cards: thumbnail images (borehole, ponds, market, classroom) - Water tank sunset photo break before How We Work Approach: - Full-bleed photo hero (pond construction workers) - All 4 pillar sections: replaced generic photos with exact gallery matches - Solar panel evidence photo beside battery incident transparency story Projects: - Full-bleed photo hero (fish ponds aerial) - Photo mosaic: harvest, construction, catfish closeup - Water well card: borehole photo, School card: classroom photo - Drone overview photo break between sections About: - Full-bleed photo hero (community meeting) - Hands-with-seedling evidence block for 'from the ground up' - Fish ponds photo break between Team and Structure Support: - Full-bleed photo hero (hands with seedling — giving metaphor) - All 3 campaign cards: contextual header images - Water tank sunset photo break before transparency section Gallery: - Full-bleed photo hero (drone camp overview) Global: - New CSS: page-hero-visual, photo-break, evidence-block, support-card-img, pillar-card-thumb, photo-mosaic - Fixed broken nav links (double about/ tags) across all pages
2026-03-09 00:44:29 +08:00
parent 9a1cd05471
commit c476724f9a
7 changed files with 276 additions and 40 deletions
@@ -28,7 +28,10 @@
  </div>
 </nav>

-<section class="page-hero">
+<section class="page-hero-visual">
+  <div class="hero-bg">
+    <img src="/images/gallery/community-meeting-shelter.jpg" alt="Community members gather under an open shelter to plan, discuss, and govern their own future" loading="eager">
+  </div>
  <div class="container">
    <div class="label fade-up">About Us</div>
    <h1 class="fade-up">We build the system<br>that builds the community.</h1>
@@ -55,6 +58,17 @@
      </ul>
      <p><strong>What we don't do:</strong> We don't collect donations directly. We don't issue tax receipts. We don't operate as a registered charity. This is intentional — it keeps us focused on design, management, and accountability rather than fundraising compliance.</p>
    </div>
+
+    <div class="evidence-block reverse fade-up mt-5">
+      <div>
+        <h3>From the ground up.</h3>
+        <p style="color:#555;">The name is a command — not one person saving the world, but a community cooperating. Every project starts with the earth under our feet: the red laterite soil of Cameroon, the water beneath it, the fish that grow in it, the children who learn from it.</p>
+        <p style="color:#555;">We don't parachute in solutions. We design systems that communities own, operate, and sustain — long after we've gone home.</p>
+      </div>
+      <div class="evidence-photo">
+        <img src="/images/gallery/hands-soil-seedling.jpg" alt="Hands cupping red Cameroon earth with a tiny seedling — the core metaphor of everything Taawunu builds" loading="lazy">
+      </div>
+    </div>
  </div>
 </section>

@@ -95,6 +109,17 @@
  </div>
 </section>

+<!-- Photo Break -->
+<div class="photo-break fade-up">
+  <img src="/images/gallery/fish-ponds-aerial.jpg" alt="The fish farm — 10 ponds carved into the earth, proof the model works" loading="lazy">
+  <div class="photo-break-overlay">
+    <div class="photo-break-text">
+      <h3>Design systems, not dependency.</h3>
+      <p>10 ponds. 35,000 fish capacity. Community owned and operated.</p>
+    </div>
+  </div>
+</div>
+
 <!-- How we're structured -->
 <section class="section">
  <div class="container">
@@ -170,7 +195,7 @@
    <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><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/"><li><a href="/about/">About Us</a></li><li><a href="/support/">Support</a></li></ul></div>
+      <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>
    </div>
@@ -22,13 +22,16 @@
      <li><a href="/approach/" class="active">Our Approach</a></li>
      <li><a href="/projects/">Projects</a></li>
      <li><a href="/gallery/">Gallery</a></li>
-      <li><a href="/about/"><li><a href="/about/">About</a></li>
+      <li><a href="/about/">About</a></li>
      <li><a href="/support/" class="nav-cta">Support a Project</a></li>
    </ul>
  </div>
 </nav>

-<section class="page-hero">
+<section class="page-hero-visual">
+  <div class="hero-bg">
+    <img src="/images/gallery/pond-construction-workers.jpg" alt="Workers digging fish ponds by hand — the scale of manual labour that builds self-sufficiency" loading="eager">
+  </div>
  <div class="container">
    <div class="label fade-up">Our Approach</div>
    <h1 class="fade-up">Four pillars.<br>One sequence.<br>No shortcuts.</h1>
@@ -52,7 +55,7 @@
    <!-- Pillar 1: Water -->
    <div class="story-block fade-up" style="margin-bottom:2px; border-radius:4px; overflow:hidden;">
      <div class="story-photo">
-        <img src="/images/tilling-soil.jpg" alt="Working the red laterite earth at Lolo, April 2024" loading="lazy">
+        <img src="/images/gallery/borehole-water-flowing.jpg" alt="Solar-powered borehole pumping 10,000 litres of clean water daily" loading="lazy">
      </div>
      <div class="story-text" style="background: rgba(37,120,161,0.05);">
        <div class="label" style="color:var(--water);">Pillar 1</div>
@@ -66,7 +69,7 @@
    <!-- Pillar 2: Food -->
    <div class="story-block reverse fade-up" style="margin-bottom:2px; border-radius:4px; overflow:hidden;">
      <div class="story-photo">
-        <img src="/images/community-farming-wide.jpg" alt="Community members working together at the farm, April 2024" loading="lazy">
+        <img src="/images/gallery/fish-ponds-aerial.jpg" alt="Aerial view of 10 fish ponds carved into the red laterite earth" loading="lazy">
      </div>
      <div class="story-text" style="background: rgba(45,106,79,0.05);">
        <div class="label" style="color:var(--green);">Pillar 2</div>
@@ -80,7 +83,7 @@
    <!-- Pillar 3: Livelihoods -->
    <div class="story-block fade-up" style="margin-bottom:2px; border-radius:4px; overflow:hidden;">
      <div class="story-photo">
-        <img src="/images/team-field-discussion.jpg" alt="Team consulting with community members in the field" loading="lazy">
+        <img src="/images/gallery/market-fish-sales.jpg" alt="Fresh catfish for sale at the local market — surplus creates livelihoods" loading="lazy">
      </div>
      <div class="story-text" style="background: rgba(107,58,42,0.05);">
        <div class="label" style="color:var(--earth);">Pillar 3</div>
@@ -94,7 +97,7 @@
    <!-- Pillar 4: Education -->
    <div class="story-block reverse fade-up" style="margin-bottom:2px; border-radius:4px; overflow:hidden;">
      <div class="story-photo">
-        <img src="/images/children-learning-center.jpg" alt="Children at the community learning center, Lolo Camp, February 2025" loading="lazy">
+        <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>
      <div class="story-text" style="background: rgba(201,168,76,0.05);">
        <div class="label" style="color:var(--gold);">Pillar 4</div>
@@ -141,10 +144,15 @@
    <h2 class="fade-up">We publish everything.</h2>
    <p class="fade-up">Budgets. Receipts. Setbacks. Failures. If something goes wrong — and it will — we tell you. We believe that honest reporting builds more trust than polished marketing.</p>

-    <div style="max-width:640px;" class="fade-up">
-      <h3 class="mt-4 mb-2">Example: The Solar Battery Incident</h3>
-      <p style="color:#555;">In February 2025, we arrived at Lolo for an M&E visit to find our solar batteries destroyed. Someone had rewired them incorrectly — a month of stored power, gone. We replaced them, revised the security protocol, and moved on.</p>
-      <p style="color:#555;">We could have hidden this. Instead, we photographed the damage, documented the cost, and published it in our M&E report. Because if you're going to trust us with your money, you need to know we'll tell you the truth — even when the truth is uncomfortable.</p>
+    <div class="evidence-block fade-up mt-4">
+      <div>
+        <h3 class="mb-2">Example: The Solar Battery Incident</h3>
+        <p style="color:#555;">In February 2025, we arrived at Lolo for an M&E visit to find our solar batteries destroyed. Someone had rewired them incorrectly — a month of stored power, gone. We replaced them, revised the security protocol, and moved on.</p>
+        <p style="color:#555;">We could have hidden this. Instead, we photographed the damage, documented the cost, and published it in our M&E report. Because if you're going to trust us with your money, you need to know we'll tell you the truth — even when the truth is uncomfortable.</p>
+      </div>
+      <div class="evidence-photo">
+        <img src="/images/gallery/solar-panels-installation.jpg" alt="Solar panel installation powering the borehole pump — clean energy for clean water" loading="lazy">
+      </div>
    </div>
  </div>
 </section>
@@ -168,7 +176,7 @@
        <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>
-      <li><a href="/about/"><li><a href="/about/">About Us</a></li><li><a href="/support/">Support</a></li></ul></div>
+      <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>
    </div>
@@ -899,6 +899,157 @@ p { margin-bottom: 16px; max-width: 720px; }
  max-width: 600px;
 }

+/* Page Hero with background photo */
+.page-hero-visual {
+  position: relative;
+  padding: 160px 0 80px;
+  min-height: 420px;
+  display: flex;
+  align-items: flex-end;
+  overflow: hidden;
+}
+.page-hero-visual .hero-bg {
+  position: absolute;
+  inset: 0;
+  z-index: 0;
+}
+.page-hero-visual .hero-bg img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+.page-hero-visual .hero-bg::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  background: linear-gradient(to bottom, rgba(61,31,21,0.25) 0%, rgba(61,31,21,0.6) 50%, rgba(61,31,21,0.9) 100%);
+}
+.page-hero-visual .container { position: relative; z-index: 1; }
+.page-hero-visual .label { color: var(--gold); margin-bottom: 8px; }
+.page-hero-visual h1 { color: var(--cream); margin-bottom: 16px; }
+.page-hero-visual p { font-size: 18px; color: rgba(245,239,224,0.8); max-width: 600px; }
+
+/* ─── Photo Break (cinematic full-width strip) ─── */
+.photo-break {
+  position: relative;
+  height: 320px;
+  overflow: hidden;
+}
+.photo-break img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  object-position: center 40%;
+}
+.photo-break .photo-break-overlay {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: rgba(61,31,21,0.4);
+}
+.photo-break .photo-break-text {
+  text-align: center;
+  color: var(--cream);
+  padding: 0 24px;
+}
+.photo-break .photo-break-text h3 {
+  font-family: var(--font-display);
+  color: var(--cream);
+  font-size: clamp(1.4rem, 3vw, 2rem);
+  margin-bottom: 8px;
+}
+.photo-break .photo-break-text p {
+  font-size: 15px;
+  color: rgba(245,239,224,0.7);
+  max-width: 500px;
+  margin: 0 auto;
+}
+@media (max-width: 768px) {
+  .photo-break { height: 240px; }
+}
+
+/* ─── Photo Evidence (inline photo next to text) ─── */
+.evidence-block {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 48px;
+  align-items: center;
+}
+.evidence-block.reverse { direction: rtl; }
+.evidence-block.reverse > * { direction: ltr; }
+.evidence-photo {
+  border-radius: 4px;
+  overflow: hidden;
+  aspect-ratio: 4/3;
+}
+.evidence-photo img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  transition: transform 0.6s;
+}
+.evidence-block:hover .evidence-photo img { transform: scale(1.03); }
+@media (max-width: 768px) {
+  .evidence-block,
+  .evidence-block.reverse { grid-template-columns: 1fr; direction: ltr; }
+}
+
+/* ─── Support Card with image ─── */
+.support-card-img {
+  height: 180px;
+  overflow: hidden;
+  margin: -32px -32px 24px -32px;
+  border-radius: 4px 4px 0 0;
+}
+.support-card-img img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  transition: transform 0.4s;
+}
+.support-card:hover .support-card-img img { transform: scale(1.05); }
+
+/* ─── Pillar Card with thumbnail ─── */
+.pillar-card-thumb {
+  height: 140px;
+  overflow: hidden;
+  margin: -32px -24px 20px -24px;
+  border-radius: 0;
+}
+.pillar-card-thumb img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  transition: transform 0.5s;
+}
+.pillar-card:hover .pillar-card-thumb img { transform: scale(1.06); }
+
+/* ─── Photo Mosaic (for project detail) ─── */
+.photo-mosaic {
+  display: grid;
+  grid-template-columns: 2fr 1fr;
+  grid-template-rows: 1fr 1fr;
+  gap: 6px;
+  border-radius: 4px;
+  overflow: hidden;
+  height: 400px;
+}
+.photo-mosaic .mosaic-hero { grid-row: span 2; }
+.photo-mosaic img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  transition: transform 0.5s;
+}
+.photo-mosaic img:hover { transform: scale(1.03); }
+@media (max-width: 768px) {
+  .photo-mosaic { grid-template-columns: 1fr 1fr; grid-template-rows: auto; height: auto; }
+  .photo-mosaic .mosaic-hero { grid-row: span 1; }
+  .photo-mosaic img { height: 200px; }
+}
+
 /* ─── Prose ─── */
 .prose {
  font-size: 17px;
@@ -154,7 +154,10 @@
  </div>
 </nav>

-<section class="page-hero">
+<section class="page-hero-visual">
+  <div class="hero-bg">
+    <img src="/images/gallery/drone-camp-overview.jpg" alt="Aerial view of the entire Lolo community development project" loading="eager">
+  </div>
  <div class="container">
    <div class="label fade-up">Gallery</div>
    <h1 class="fade-up">The work. The land.<br>The people. The proof.</h1>
@@ -35,7 +35,7 @@
      <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/"><li><a href="/about/">About</a></li>
+      <li><a href="/about/">About</a></li>
      <li><a href="/support/" class="nav-cta">Support a Project</a></li>
    </ul>
  </div>
@@ -89,12 +89,19 @@
 <!-- ═══════════ THE PROBLEM ═══════════ -->
 <section class="section">
  <div class="container">
-    <div class="section-label fade-up">The Challenge</div>
-    <div class="section-gold-rule fade-up"></div>
-    <h2 class="fade-up" style="max-width:640px;">Aid creates dependency.<br>Infrastructure creates freedom.</h2>
-    <p class="fade-up" style="font-size:17px; color:#555;">For over a decade, 12,000 refugees from the Central African Republic have lived in Lolo Camp, Cameroon. The World Food Programme cut rations to 50%. Pulses, oil, salt — gone from the basket. The world's response: give them just enough to survive, never enough to thrive.</p>
-    <p class="fade-up" style="font-size:17px; color:#555;"><strong style="color:var(--deep);">This is not a poverty problem. It's a design problem.</strong> The resources exist — water underground, fish in rivers, fertile soil, capable people. What's missing is the system that connects resources to people and people to self-sufficiency.</p>
-    <p class="fade-up" style="font-size:17px; color:#555;">Taawunu builds that system.</p>
+    <div class="evidence-block fade-up">
+      <div>
+        <div class="section-label">The Challenge</div>
+        <div class="section-gold-rule"></div>
+        <h2 style="max-width:640px;">Aid creates dependency.<br>Infrastructure creates freedom.</h2>
+        <p style="font-size:17px; color:#555;">For over a decade, 12,000 refugees from the Central African Republic have lived in Lolo Camp, Cameroon. The World Food Programme cut rations to 50%. Pulses, oil, salt — gone from the basket. The world's response: give them just enough to survive, never enough to thrive.</p>
+        <p style="font-size:17px; color:#555;"><strong style="color:var(--deep);">This is not a poverty problem. It's a design problem.</strong> The resources exist — water underground, fish in rivers, fertile soil, capable people. What's missing is the system that connects resources to people and people to self-sufficiency.</p>
+        <p style="font-size:17px; color:#555;">Taawunu builds that system.</p>
+      </div>
+      <div class="evidence-photo">
+        <img src="/images/gallery/woman-carrying-water.jpg" alt="A woman carries water along a red laterite path — before the borehole, this walk was kilometres longer" loading="lazy">
+      </div>
+    </div>
  </div>
 </section>

@@ -118,22 +125,22 @@

    <div class="pillars">
      <div class="pillar-card pillar-water fade-up">
-        <svg class="pillar-icon" viewBox="0 0 24 24" fill="none" stroke="#2578A1" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2C12 2 4 10 4 14.5C4 18.64 7.58 22 12 22C16.42 22 20 18.64 20 14.5C20 10 12 2 12 2Z"/></svg>
+        <div class="pillar-card-thumb"><img src="/images/gallery/borehole-water-flowing.jpg" alt="Solar-powered borehole pumping clean water" loading="lazy"></div>
        <div class="pillar-name">Water</div>
        <p class="pillar-desc">Clean water is the foundation of everything. A 70m borehole now pumps 10,000 litres daily — enough for the community and the aquaculture project.</p>
      </div>
      <div class="pillar-card pillar-food fade-up">
-        <svg class="pillar-icon" viewBox="0 0 24 24" fill="none" stroke="#2D6A4F" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 22V12"/><path d="M12 12C12 12 7 10 5 6C9 6 12 9 12 12"/><path d="M12 16C12 16 17 14 19 10C15 10 12 13 12 16"/><line x1="4" y1="22" x2="20" y2="22"/></svg>
+        <div class="pillar-card-thumb"><img src="/images/gallery/fish-ponds-aerial.jpg" alt="Aerial view of 10 fish ponds carved into red laterite earth" loading="lazy"></div>
        <div class="pillar-name">Food</div>
        <p class="pillar-desc">10 fish ponds with capacity for 35,000 catfish across 3 harvest cycles per year. The community feeds itself — no more waiting for WFP trucks.</p>
      </div>
      <div class="pillar-card pillar-livelihood fade-up">
-        <svg class="pillar-icon" viewBox="0 0 24 24" fill="none" stroke="#6B3A2A" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 14C4 14 6 12 8 12C10 12 10 14 12 14"/><path d="M20 10C20 10 18 8 16 8C14 8 14 10 12 10"/><circle cx="12" cy="12" r="1.5"/><path d="M12 8V3M9 5.5L12 3L15 5.5"/><line x1="6" y1="18" x2="18" y2="18"/></svg>
+        <div class="pillar-card-thumb"><img src="/images/gallery/market-fish-sales.jpg" alt="Woman selling catfish at the local market" loading="lazy"></div>
        <div class="pillar-name">Livelihoods</div>
        <p class="pillar-desc">Surplus fish are sold at local markets. Revenue funds operations, creates jobs, and builds an economy that doesn't depend on outside funding.</p>
      </div>
      <div class="pillar-card pillar-education fade-up">
-        <svg class="pillar-icon" viewBox="0 0 24 24" fill="none" stroke="#C9A84C" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M2 4C2 4 5 3 8 3C11 3 12 4 12 4V20C12 20 11 19 8 19C5 19 2 20 2 20V4Z"/><path d="M22 4C22 4 19 3 16 3C13 3 12 4 12 4V20C12 20 13 19 16 19C19 19 22 20 22 20V4Z"/></svg>
+        <div class="pillar-card-thumb"><img src="/images/gallery/children-classroom-light.jpg" alt="Children studying in an open-air classroom" loading="lazy"></div>
        <div class="pillar-name">Education</div>
        <p class="pillar-desc">When a community can feed and sustain itself, it can build schools. Revenue from the farm funds teachers, materials, and permanent learning spaces.</p>
      </div>
@@ -178,6 +185,17 @@
  <div class="verse-ref">Al-Ma'idah 5:2</div>
 </section>

+<!-- ═══════════ PHOTO BREAK ═══════════ -->
+<div class="photo-break fade-up">
+  <img src="/images/gallery/water-tank-sunset.jpg" alt="Water tank silhouetted against African sunset — permanence" loading="lazy">
+  <div class="photo-break-overlay">
+    <div class="photo-break-text">
+      <h3>Infrastructure that outlasts the project.</h3>
+      <p>This water tank will be here long after the team has gone home.</p>
+    </div>
+  </div>
+</div>
+
 <!-- ═══════════ HOW WE WORK ═══════════ -->
 <section class="section">
  <div class="container">
@@ -244,7 +262,7 @@
          <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/"><li><a href="/about/">About Us</a></li>
+      <li><a href="/about/">About Us</a></li>
          <li><a href="/support/">Support</a></li>
        </ul>
      </div>
@@ -22,13 +22,16 @@
      <li><a href="/approach/">Our Approach</a></li>
      <li><a href="/projects/" class="active">Projects</a></li>
      <li><a href="/gallery/">Gallery</a></li>
-      <li><a href="/about/"><li><a href="/about/">About</a></li>
+      <li><a href="/about/">About</a></li>
      <li><a href="/support/" class="nav-cta">Support a Project</a></li>
    </ul>
  </div>
 </nav>

-<section class="page-hero">
+<section class="page-hero-visual">
+  <div class="hero-bg">
+    <img src="/images/gallery/fish-ponds-aerial.jpg" alt="Aerial view of the Lolo fish farm — 10 ponds carved into red laterite earth" loading="eager">
+  </div>
  <div class="container">
    <div class="label fade-up">Our Projects</div>
    <h1 class="fade-up">Building self-sufficiency,<br>one project at a time.</h1>
@@ -52,13 +55,13 @@
      <div class="metric"><div class="metric-number">167%</div><div class="metric-rule"></div><div class="metric-label">3-Year ROI</div></div>
    </div>

-    <!-- Photos -->
-    <div style="display:grid; grid-template-columns: 1fr 1fr 1fr; gap:8px; margin-bottom:40px; border-radius:4px; overflow:hidden;" class="fade-up">
-      <img src="/images/hero-community-farming.jpg" alt="Community farming at Lolo" loading="lazy" style="width:100%; height:240px; object-fit:cover;">
-      <img src="/images/community-planting.jpg" alt="Planting at the Lolo site" loading="lazy" style="width:100%; height:240px; object-fit:cover;">
-      <img src="/images/jungle-trek.jpg" alt="Team surveying the farm site through dense vegetation" loading="lazy" style="width:100%; height:240px; object-fit:cover;">
+    <!-- Photo Mosaic -->
+    <div class="photo-mosaic fade-up" style="margin-bottom:8px;">
+      <img class="mosaic-hero" src="/images/gallery/fish-harvest-community.jpg" alt="Community members harvesting catfish from a pond — nets in hand, basins waiting on the red embankment" loading="lazy">
+      <img src="/images/gallery/pond-construction-workers.jpg" alt="Workers digging fish ponds by hand into the laterite earth" loading="lazy">
+      <img src="/images/gallery/catfish-closeup-basin.jpg" alt="Freshly harvested catfish packed in a basin — the model works" loading="lazy">
    </div>
-    <div class="caption-bar fade-up" style="margin-top:-40px; margin-bottom:40px; border-radius:0 0 4px 4px;">Team and community members during the first field assessment trip, April 2024. Lolo Camp, Cameroon.</div>
+    <div class="caption-bar fade-up" style="margin-bottom:40px; border-radius:0 0 4px 4px;">Aquaculture operations: community harvest, pond construction, and the produce that feeds families and funds the future.</div>

    <!-- Timeline -->
    <h3 class="fade-up mt-4 mb-3">Project Timeline</h3>
@@ -127,6 +130,17 @@
  </div>
 </section>

+<!-- Photo Break -->
+<div class="photo-break fade-up">
+  <img src="/images/gallery/drone-camp-overview.jpg" alt="Aerial overview — fish ponds, community, forest — all interconnected" loading="lazy">
+  <div class="photo-break-overlay">
+    <div class="photo-break-text">
+      <h3>One ecosystem. One community. One model.</h3>
+      <p>Water feeds fish. Fish feed families. Families build schools.</p>
+    </div>
+  </div>
+</div>
+
 <!-- ═══ OTHER PROJECTS ═══ -->
 <section class="section bg-cream">
  <div class="container">
@@ -136,7 +150,7 @@
    <div class="project-grid mt-4">
      <div class="project-card fade-up" id="water">
        <div class="project-card-img">
-          <img src="/images/hfa-field-work.jpg" alt="Field assessment for water well site" loading="lazy">
+          <img src="/images/gallery/borehole-water-flowing.jpg" alt="Solar-powered borehole pumping clean water — the first pillar" loading="lazy">
        </div>
        <div class="project-card-body">
          <div class="project-card-status status-planned">Planned</div>
@@ -151,7 +165,7 @@

      <div class="project-card fade-up" id="education">
        <div class="project-card-img">
-          <img src="/images/girl-writing-alluha.jpg" alt="Girl writing Quran on wooden board at Lolo Camp" loading="lazy">
+          <img src="/images/gallery/children-classroom-light.jpg" alt="Children studying in open-air classroom — the education pillar comes last because it must be sustained" loading="lazy">
        </div>
        <div class="project-card-body">
          <div class="project-card-status status-planned">Planned — Phase 4</div>
@@ -196,7 +210,7 @@
    <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><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/"><li><a href="/about/">About Us</a></li><li><a href="/support/">Support</a></li></ul></div>
+      <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>
    </div>
@@ -22,13 +22,16 @@
      <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/"><li><a href="/about/">About</a></li>
+      <li><a href="/about/">About</a></li>
      <li><a href="/support/" class="nav-cta active">Support a Project</a></li>
    </ul>
  </div>
 </nav>

-<section class="page-hero">
+<section class="page-hero-visual">
+  <div class="hero-bg">
+    <img src="/images/gallery/hands-soil-seedling.jpg" alt="Working hands hold red earth and a seedling — your contribution plants the seed of self-sufficiency" loading="eager">
+  </div>
  <div class="container">
    <div class="label fade-up">Support a Project</div>
    <h1 class="fade-up">Your sadaqah jariyah.<br>Their self-sufficiency.</h1>
@@ -72,6 +75,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>
        <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>
@@ -84,6 +88,7 @@
      </div>

      <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>
        <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>
@@ -96,6 +101,7 @@
      </div>

      <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>
        <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>
@@ -134,6 +140,17 @@
  </div>
 </section>

+<!-- Photo Break -->
+<div class="photo-break fade-up">
+  <img src="/images/gallery/water-tank-sunset.jpg" alt="Water tank at sunset — permanence that outlasts the project" loading="lazy">
+  <div class="photo-break-overlay">
+    <div class="photo-break-text">
+      <h3>Your sadaqah, their independence.</h3>
+      <p>Infrastructure that will be here long after the campaign is over.</p>
+    </div>
+  </div>
+</div>
+
 <!-- Trust disclosure -->
 <section class="section bg-cream">
  <div class="container">
@@ -156,7 +173,7 @@
    <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><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/"><li><a href="/about/">About Us</a></li><li><a href="/support/">Support</a></li></ul></div>
+      <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>
    </div>