From e11b6c17500d8f8facd9a7afee885e3e1a2e8024 Mon Sep 17 00:00:00 2001
From: Naomi Carrigan <commits@nhcarrigan.com>
Date: Mon, 2 Feb 2026 20:57:41 -0800
Subject: [PATCH] feat: couple final sections?

---
 site/index.html | 106 +++++++++++++++++++++++++++++++++++++++++++++++-
 1 file changed, 105 insertions(+), 1 deletion(-)

diff --git a/site/index.html b/site/index.html
index d5aa895..8a09e0d 100644
--- a/site/index.html
+++ b/site/index.html
@@ -1131,12 +1131,67 @@
         </p>
       </section>
 
+      <!--
+          MARK: Values & Ethics
+      -->
+      <section class="card fade-in" style="background: linear-gradient(135deg, #f3e8ff 0%, #e9d5ff 100%); border: 2px solid var(--witch-plum);" role="region" aria-labelledby="values-ethics">
+        <h2 id="values-ethics" style="margin-top: 0; text-align: center;"><i class="fas fa-heart" aria-hidden="true"></i> Our Values & Ethics</h2>
+        <img class="hero-image" src="https://cdn.nhcarrigan.com/hero/ethics.png" alt="Our Values & Ethics" />
+        <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 2rem; margin: 2rem 0;">
+          <div class="value-card">
+            <h3 style="color: var(--witch-purple); margin-bottom: 0.5rem;">
+              <i class="fas fa-universal-access" aria-hidden="true"></i> Accessibility First
+            </h3>
+            <p>Every line of code we write considers users of all abilities. We believe technology should work for everyone, not just some.</p>
+          </div>
+
+          <div class="value-card">
+            <h3 style="color: var(--witch-purple); margin-bottom: 0.5rem;">
+              <i class="fas fa-lock" aria-hidden="true"></i> Privacy by Design
+            </h3>
+            <p>We never collect unnecessary data. Your privacy isn't a feature; it's a fundamental right we protect in every project.</p>
+          </div>
+
+          <div class="value-card">
+            <h3 style="color: var(--witch-purple); margin-bottom: 0.5rem;">
+              <i class="fas fa-leaf" aria-hidden="true"></i> Sustainable Code
+            </h3>
+            <p>Efficient algorithms, optimized resources, and eco-friendly hosting. Good code respects both users and our planet.</p>
+          </div>
+
+          <div class="value-card">
+            <h3 style="color: var(--witch-purple); margin-bottom: 0.5rem;">
+              <i class="fas fa-rainbow" aria-hidden="true"></i> Inclusive by Default
+            </h3>
+            <p>We actively create spaces where marginalized voices lead. Diversity isn't just welcomed; it's essential to innovation.</p>
+          </div>
+
+          <div class="value-card">
+            <h3 style="color: var(--witch-purple); margin-bottom: 0.5rem;">
+              <i class="fas fa-code-branch" aria-hidden="true"></i> Open Source Always
+            </h3>
+            <p>Knowledge should be free. We share our code, contribute to communities, and believe in collective growth.</p>
+          </div>
+
+          <div class="value-card">
+            <h3 style="color: var(--witch-purple); margin-bottom: 0.5rem;">
+              <i class="fas fa-handshake" aria-hidden="true"></i> Ethical Partnerships
+            </h3>
+            <p>We only work with organizations whose values align with ours. No exceptions, no matter the price.</p>
+          </div>
+        </div>
+
+        <p style="text-align: center; font-style: italic; margin-top: 2rem; color: var(--witch-text);">
+          "Technology is a tool. We choose to wield it for good."
+        </p>
+      </section>
+
       <!--
           MARK: How Can We Serve You?
       -->
       <section class="card fade-in" style="text-align: center; background: linear-gradient(135deg, var(--witch-plum) 0%, var(--witch-purple) 100%); color: var(--witch-moon); position: relative;" role="region" aria-labelledby="serve-you">
         <h2 id="serve-you" style="margin-top: 0; color: white;">How Can We Best Serve You?</h2>
-
+        <img class="hero-image" src="https://cdn.nhcarrigan.com/hero/serve.png" alt="How Can We Best Serve You?" />
         <div style="margin: 2rem auto; padding: 0 1rem;">
           <div style="display: flex; align-items: center; justify-content: center; gap: 0.5rem; flex-wrap: wrap;">
             <span style="margin-bottom: 0.5rem; font-size: 1.4rem;">I need help with</span>
@@ -2342,6 +2397,55 @@
         </div>
       </section>
 
+      <!--
+          MARK: Let's Build Together
+      -->
+      <section class="card fade-in" style="background: linear-gradient(135deg, var(--witch-purple) 0%, var(--witch-plum) 100%); text-align: center; position: relative; overflow: hidden;" role="region" aria-labelledby="build-together">
+        <div style="position: absolute; top: -50px; right: -50px; width: 100px; height: 100px; background: rgba(255, 255, 255, 0.1); border-radius: 50%;"></div>
+        <div style="position: absolute; bottom: -30px; left: -30px; width: 80px; height: 80px; background: rgba(255, 255, 255, 0.05); border-radius: 50%;"></div>
+
+        <h2 id="build-together" style="margin-top: 0; color: white; font-size: 2rem;">
+          <i class="fas fa-rocket" aria-hidden="true"></i> Let's Build Something Amazing Together
+        </h2>
+
+        <p style="color: var(--witch-moon); font-size: 1.2rem; max-width: 700px; margin: 1.5rem auto 2rem;">
+          Whether you need a custom solution, want to improve your existing systems, or have a wild idea that needs technical expertise; we're here to help bring your vision to life.
+        </p>
+        <img class="hero-image" src="https://cdn.nhcarrigan.com/hero/build.png" alt="Let's Build Something Amazing Together" />
+        <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1.5rem; margin: 2rem 0; max-width: 800px; margin-left: auto; margin-right: auto;">
+          <div style="background: rgba(255, 255, 255, 0.1); padding: 1.5rem; border-radius: 12px; backdrop-filter: blur(5px);">
+            <i class="fas fa-bolt" style="font-size: 2rem; color: var(--witch-mauve); margin-bottom: 0.5rem;"></i>
+            <h3 style="color: white; margin: 0.5rem 0;">Quick Start</h3>
+            <p style="color: var(--witch-moon); font-size: 0.9rem;">Got an urgent need? We can often begin work within 24-48 hours.</p>
+          </div>
+
+          <div style="background: rgba(255, 255, 255, 0.1); padding: 1.5rem; border-radius: 12px; backdrop-filter: blur(5px);">
+            <i class="fas fa-comments" style="font-size: 2rem; color: var(--witch-mauve); margin-bottom: 0.5rem;"></i>
+            <h3 style="color: white; margin: 0.5rem 0;">Collaborative</h3>
+            <p style="color: var(--witch-moon); font-size: 0.9rem;">We work WITH you, not just for you. Your input shapes everything.</p>
+          </div>
+
+          <div style="background: rgba(255, 255, 255, 0.1); padding: 1.5rem; border-radius: 12px; backdrop-filter: blur(5px);">
+            <i class="fas fa-shield-alt" style="font-size: 2rem; color: var(--witch-mauve); margin-bottom: 0.5rem;"></i>
+            <h3 style="color: white; margin: 0.5rem 0;">No Surprises</h3>
+            <p style="color: var(--witch-moon); font-size: 0.9rem;">Clear communication, transparent pricing, and realistic timelines.</p>
+          </div>
+        </div>
+
+        <div style="display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; margin-top: 2rem;">
+          <a href="#book-call" class="cta-button" style="background: white; color: var(--witch-purple); padding: 1rem 2rem; font-size: 1.1rem;">
+            <i class="fas fa-calendar" aria-hidden="true"></i> Schedule a Call
+          </a>
+          <a href="#contact-form" class="cta-button" style="background: transparent; color: white; border: 2px solid white; padding: 1rem 2rem; font-size: 1.1rem;">
+            <i class="fas fa-envelope" aria-hidden="true"></i> Send a Message
+          </a>
+        </div>
+
+        <p style="color: var(--witch-moon); font-size: 0.9rem; margin-top: 2rem; font-style: italic;">
+          "The best projects come from passionate people working together toward a common goal."
+        </p>
+      </section>
+
       <!--
           MARK: Final CTA
       -->