feat(site): Add hero imagery and enhance visual design with background images

- Replace gradient backgrounds with high-quality imagery for hero and page sections
- Add 10 new pet care and team member photos (hero, services, team profiles)
- Implement overlay system for hero sections with improved text contrast and readability
- Restructure hero markup with overlay div and hero-content wrapper for proper layering
- Convert about preview section to two-column grid layout with image and content
- Update footer credits to include photo attribution to Unsplash
- Enhance dark mode styling for hero sections with adjusted overlay gradients
- Add responsive grid layout for about section that stacks on mobile devices
- Improve visual hierarchy and brand presentation across all pages

about.html

@@ -160,7 +160,7 @@
             </div>
             <div class="footer-bottom">
                 <p>&copy; 2026 Happy Tails Pet Care. All rights reserved.</p>
-                <p class="footer-credits">Hosted by <a href="https://sloanops.com" target="_blank" rel="noopener">SloanOps</a></p>
+                <p class="footer-credits">Hosted by <a href="https://sloanops.com" target="_blank" rel="noopener">SloanOps</a> · Photos by <a href="https://unsplash.com" target="_blank" rel="noopener">Unsplash</a></p>
             </div>
         </div>
     </footer>

contact.html

@@ -149,7 +149,7 @@
             </div>
             <div class="footer-bottom">
                 <p>&copy; 2026 Happy Tails Pet Care. All rights reserved.</p>
-                <p class="footer-credits">Hosted by <a href="https://sloanops.com" target="_blank" rel="noopener">SloanOps</a></p>
+                <p class="footer-credits">Hosted by <a href="https://sloanops.com" target="_blank" rel="noopener">SloanOps</a> · Photos by <a href="https://unsplash.com" target="_blank" rel="noopener">Unsplash</a></p>
             </div>
         </div>
     </footer>

css/style.css

@@ -248,23 +248,39 @@ img {
 
 /* Hero Section */
 .hero {
-  background: linear-gradient(135deg, #fef3c7 0%, #fde68a 50%, #fcd34d 100%);
+  background: url('../images/hero-dogs.jpg') center/cover no-repeat;
   padding: var(--spacing-2xl) 0 var(--spacing-xl);
   text-align: center;
+  color: #fef3c7;
+  position: relative;
+  min-height: 420px;
+  display: flex;
+  align-items: center;
+}
+
+.hero-overlay {
+  position: absolute;
+  inset: 0;
+  background: linear-gradient(135deg, rgba(69, 26, 3, 0.85) 0%, rgba(120, 53, 15, 0.75) 100%);
+}
+
+.hero-content {
+  position: relative;
+  z-index: 1;
 }
 
 .hero h1 {
   font-size: 2.75rem;
   margin-bottom: var(--spacing-lg);
-  background: linear-gradient(to right, var(--color-primary), #dc2626);
+  color: #fef3c7;
-  -webkit-background-clip: text;
+  -webkit-text-fill-color: unset;
-  -webkit-text-fill-color: transparent;
+  background: none;
-  background-clip: text;
+  background-clip: unset;
 }
 
 .hero-subheadline {
   font-size: 1.25rem;
-  color: var(--color-text-secondary);
+  color: #fde68a;
   max-width: 700px;
   margin: 0 auto var(--spacing-xl);
 }
@@ -336,19 +352,33 @@ img {
 
 /* Page Hero (inner pages) */
 .page-hero {
-  background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
+  background: url('../images/dog-park.jpg') center/cover no-repeat;
   padding: var(--spacing-2xl) 0;
   text-align: center;
+  color: #fef3c7;
+  position: relative;
+}
+
+.page-hero::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  background: linear-gradient(135deg, rgba(69, 26, 3, 0.88) 0%, rgba(120, 53, 15, 0.82) 100%);
+}
+
+.page-hero .container {
+  position: relative;
+  z-index: 1;
 }
 
 .page-hero h1 {
-  color: var(--color-text);
+  color: #fef3c7;
   margin-bottom: var(--spacing-md);
 }
 
 .page-subheadline {
   font-size: 1.125rem;
-  color: var(--color-text-secondary);
+  color: #fde68a;
   max-width: 650px;
   margin: 0 auto;
 }
@@ -403,19 +433,38 @@ img {
 .about-preview {
   padding: var(--spacing-2xl) 0;
   background-color: var(--color-surface);
-  text-align: center;
 }
 
-.about-preview h2 {
+.about-preview-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: var(--spacing-2xl);
+  align-items: center;
+}
+
+.about-preview-image img {
+  border-radius: var(--radius-lg);
+  box-shadow: var(--shadow-md);
+  width: 100%;
+  height: 320px;
+  object-fit: cover;
+}
+
+.about-preview-content h2 {
   margin-bottom: var(--spacing-md);
 }
 
 .about-preview-text {
-  max-width: 650px;
-  margin: 0 auto var(--spacing-xl);
   color: var(--color-text-secondary);
   font-size: 1.1rem;
   line-height: 1.8;
+  margin-bottom: var(--spacing-xl);
+}
+
+@media (max-width: 768px) {
+  .about-preview-grid {
+    grid-template-columns: 1fr;
+  }
 }
 
 .about-content {
@@ -1292,14 +1341,18 @@ img {
   }
   
   .hero {
-    background: linear-gradient(135deg, #1c1917 0%, #292524 50%, #44403c 100%);
+    background-image: url('../images/hero-dogs.jpg');
+  }
+
+  .hero-overlay {
+    background: linear-gradient(135deg, rgba(28, 25, 23, 0.9) 0%, rgba(41, 37, 36, 0.85) 100%);
   }
 
   .hero h1 {
-    background: linear-gradient(to right, #fbbf24, #f59e0b);
+    color: #fbbf24;
-    -webkit-background-clip: text;
+    background: none;
-    -webkit-text-fill-color: transparent;
+    -webkit-text-fill-color: unset;
-    background-clip: text;
+    background-clip: unset;
   }
   
   .feature-card,

index.html

@@ -33,7 +33,8 @@
     <main class="site-main">
         <!-- Hero Section -->
         <section class="hero" aria-labelledby="hero-heading">
-            <div class="container">
+            <div class="hero-overlay"></div>
+            <div class="container hero-content">
                 <p class="hero-emoji" aria-hidden="true">🐾</p>
                 <h1 id="hero-heading">Your Dog Deserves the Best Day Ever</h1>
                 <p class="hero-subheadline">Trusted dog walking, grooming, and overnight care from people who truly love dogs.</p>
@@ -78,9 +79,16 @@
         <!-- About Preview -->
         <section class="about-preview" aria-labelledby="about-preview-heading">
             <div class="container">
-                <h2 id="about-preview-heading" class="section-title">Meet the Team</h2>
+                <div class="about-preview-grid">
-                <p class="about-preview-text">We are a small crew of dog lovers dedicated to keeping your pups happy and healthy. Every handler on our team is certified and genuinely passionate about dogs.</p>
+                    <div class="about-preview-image">
-                <a href="/about.html" class="btn btn-secondary">Learn About Us</a>
+                        <img src="images/dog-walking.jpg" alt="Happy dog being walked through a sunny neighborhood" loading="lazy">
+                    </div>
+                    <div class="about-preview-content">
+                        <h2 id="about-preview-heading" class="section-title">Meet the Team</h2>
+                        <p class="about-preview-text">We are a small crew of dog lovers dedicated to keeping your pups happy and healthy. Every handler on our team is certified and genuinely passionate about dogs.</p>
+                        <a href="/about.html" class="btn btn-secondary">Learn About Us</a>
+                    </div>
+                </div>
             </div>
         </section>
 
@@ -143,7 +151,7 @@
             </div>
             <div class="footer-bottom">
                 <p>&copy; 2026 Happy Tails Pet Care. All rights reserved.</p>
-                <p class="footer-credits">Hosted by <a href="https://sloanops.com" target="_blank" rel="noopener">SloanOps</a></p>
+                <p class="footer-credits">Hosted by <a href="https://sloanops.com" target="_blank" rel="noopener">SloanOps</a> · Photos by <a href="https://unsplash.com" target="_blank" rel="noopener">Unsplash</a></p>
             </div>
         </div>
     </footer>

services.html

@@ -203,7 +203,7 @@
             </div>
             <div class="footer-bottom">
                 <p>&copy; 2026 Happy Tails Pet Care. All rights reserved.</p>
-                <p class="footer-credits">Hosted by <a href="https://sloanops.com" target="_blank" rel="noopener">SloanOps</a></p>
+                <p class="footer-credits">Hosted by <a href="https://sloanops.com" target="_blank" rel="noopener">SloanOps</a> · Photos by <a href="https://unsplash.com" target="_blank" rel="noopener">Unsplash</a></p>
             </div>
         </div>
     </footer>