improved site header, added contact form, content card carousel, footer, and more photos

components/content-card-carousel.css

@@ -0,0 +1,62 @@
+/* Slide width is driven by CSS breakpoints (not JS innerWidth) so real phones match devtools */
+
+.carousel-viewport {
+  width: 100%;
+}
+
+.carousel-slide {
+  flex: 0 0 100%;
+  min-width: 0;
+  box-sizing: border-box;
+}
+
+@media (min-width: 640px) {
+  .carousel-slide {
+    flex: 0 0 50%;
+  }
+}
+
+@media (min-width: 1024px) {
+  .carousel-slide {
+    flex: 0 0 33.333%;
+  }
+}
+
+.carousel-controls {
+  position: relative;
+  z-index: 20;
+  isolation: isolate;
+}
+
+.carousel-control-btn {
+  display: inline-flex;
+  min-height: 44px;
+  min-width: 44px;
+  align-items: center;
+  justify-content: center;
+  touch-action: manipulation;
+  -webkit-tap-highlight-color: transparent;
+  cursor: pointer;
+  border-radius: 9999px;
+  border: 1px solid var(--color-default-medium, rgba(60, 60, 60, 0.35));
+  background-color: var(--color-neutral-secondary-medium, rgba(60, 60, 60, 0.25));
+  padding: 0.5rem 1rem;
+  font-size: 1.125rem;
+  line-height: 1;
+  color: inherit;
+  transition: background-color 0.2s ease, color 0.2s ease;
+}
+
+.carousel-control-btn:hover:not(:disabled) {
+  background-color: rgba(255, 255, 255, 0.9);
+  color: #000;
+}
+
+.carousel-control-btn:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+.carousel-control-btn:active:not(:disabled) {
+  transform: scale(0.96);
+}