Fix mobile responsiveness with dynamic viewport units and fluid typography

- Implement dynamic viewport units (dvh) for proper mobile scaling
- Add fluid typography using clamp() functions
- Fix iOS-specific viewport issues with -webkit-fill-available
- Add scroll-margin-top to prevent section overlaps
- Improve touch targets to 50px minimum for mobile UX
- Add CSS custom properties for consistent responsive spacing
- Fix hero section to properly fill mobile viewport
- Update service cards for better mobile layout

website-mockups/css/voyage-layout.css

@@ -495,6 +495,16 @@ html {
 .stars {
     color: var(--warm-yellow);
     font-size: 1rem;
+    display: inline-flex;
+    gap: 2px;
+}
+
+/* Ensure stars icons display horizontally */
+.stars i,
+.story-content .stars i,
+.testimonial-highlight .stars i {
+    display: inline-block;
+    margin-right: 2px;
 }
 
 .hero-headline {
@@ -1341,18 +1351,22 @@ html {
 .btn-booking {
     width: 100%;
     padding: 0.75rem 1.5rem;
-    background: rgba(255, 255, 255, 0.2);
-    color: var(--white);
+    background: var(--white);
+    color: var(--primary-blue);
     border: 2px solid var(--white);
     border-radius: 50px;
     font-weight: 600;
     cursor: pointer;
     transition: var(--transition);
+    opacity: 1;
+    visibility: visible;
 }
 
 .btn-booking:hover {
-    background: var(--white);
-    color: var(--primary-blue);
+    background: var(--gradient-warm);
+    color: var(--white);
+    transform: translateY(-2px);
+    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
 }
 
 .btn-booking.primary {
@@ -1380,12 +1394,22 @@ html {
 }
 
 .footer-content {
-    display: grid;
-    grid-template-columns: 2fr 1fr 1fr;
+    display: flex;
+    justify-content: space-between;
     gap: var(--space-2xl);
     margin-bottom: var(--space-lg);
 }
 
+.footer-brand {
+    flex: 1;
+    max-width: 500px;
+}
+
+.footer-contact {
+    flex: 0 0 auto;
+    margin-left: auto;
+}
+
 .footer-brand h3 {
     font-family: var(--font-display);
     font-size: 2rem;