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

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);
-  -webkit-background-clip: text;
-  -webkit-text-fill-color: transparent;
-  background-clip: text;
+  color: #fef3c7;
+  -webkit-text-fill-color: unset;
+  background: none;
+  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);
-    -webkit-background-clip: text;
-    -webkit-text-fill-color: transparent;
-    background-clip: text;
+    color: #fbbf24;
+    background: none;
+    -webkit-text-fill-color: unset;
+    background-clip: unset;
   }
   
   .feature-card,