add seymour icons

public/site-styles/style.css

@@ -1,11 +1,20 @@
 .banner-container {
     position: relative;
     width: 100%;
-    max-height: 40vh;
-    min-height: 200px;
     overflow: hidden;
 }
 
+.banner-container picture {
+    width: 100%;
+    display: block;
+}
+
+.banner-container img {
+    width: 100%;
+    height: auto;
+    display: block;
+}
+
 .banner {
     width: 100%;
     max-height: 40vh;
@@ -380,7 +389,10 @@
 }
 
 .service-link {
-    display: block;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: calc(var(--pico-spacing) * 0.75);
     padding: calc(var(--pico-spacing) * 0.75);
     background: var(--pico-background-color);
     border: 1px solid var(--pico-muted-border-color);
@@ -399,6 +411,28 @@
     box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
 }
 
+.service-icon {
+    flex-shrink: 0;
+    display: block;
+    width: 60px;
+    height: 60px;
+}
+
+.service-icon img {
+    width: 100%;
+    height: 100%;
+    object-fit: contain;
+    display: block;
+}
+
+.service-text {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    text-align: center;
+}
+
 .service-link strong {
     display: block;
     font-size: 1.1em;
@@ -536,4 +570,65 @@ footer li:not(:last-child)::after {
     footer li:not(:last-child)::after {
         content: none; /* Remove delimiters on mobile */
     }
+}
+
+/* Mascot section styling */
+.mascot-section {
+    display: flex;
+    align-items: center;
+    gap: calc(var(--pico-spacing) * 2);
+    margin: var(--pico-typography-spacing-vertical) 0;
+}
+
+.mascot-image {
+    flex-shrink: 0;
+    min-width: 120px; /* Prevent image from disappearing on thin screens */
+}
+
+.mascot-image picture,
+.mascot-image img {
+    display: block;
+    max-width: 100%;
+    height: auto;
+}
+
+.mascot-image img {
+    width: 200px;
+    max-width: min(200px, 30vw);
+    min-width: 120px; /* Ensure image stays visible on very thin screens */
+}
+
+.mascot-text {
+    flex: 1;
+    min-width: 0; /* Allows text to shrink properly */
+}
+
+/* Stack on small devices */
+@media (max-width: 576px) {
+    .mascot-section {
+        flex-direction: column;
+        align-items: center;
+        gap: var(--pico-spacing);
+    }
+    
+    .mascot-image {
+        min-width: auto; /* Reset min-width when stacked */
+    }
+    
+    .mascot-image img {
+        width: 100%;
+        max-width: 200px;
+        min-width: 120px; /* Keep minimum size even when stacked */
+    }
+    
+    .mascot-text {
+        text-align: center;
+    }
+}
+
+/* Very thin screens - ensure image stays visible */
+@media (max-width: 400px) {
+    .mascot-image img {
+        min-width: 100px; /* Smaller but still visible on very thin screens */
+    }
 }