4.2.1 polish

src/lib/styles/responsive.css

@@ -35,6 +35,18 @@
 }
 
 @media (max-width: 768px) {
+  /*
+   * Mobile body type bumps to 16px — modern legibility standard, and
+   * matches the iOS-Safari zoom-on-focus threshold. Reserve room at
+   * the bottom of the page for the sticky MobileBookBar so the footer
+   * never sits behind it; the bar adds its own safe-area-inset
+   * padding on top of this.
+   */
+  body {
+    font-size: 16px;
+    padding-bottom: 64px;
+  }
+
   @keyframes mobileMenuBounceIn {
     0% {
       opacity: 0;
@@ -89,14 +101,16 @@
     display: inline-flex;
     justify-self: center;
     align-self: center;
-    padding: 9px 12px;
-    background: rgba(33, 48, 33, 0.06);
+    min-height: 44px;
+    padding: 11px 14px;
+    background: rgba(33, 48, 33, 0.1);
     color: var(--green);
     font-size: 13px;
+    font-weight: 600;
   }
 
   .mobile-phone .icon {
-    font-size: 13px;
+    font-size: 14px;
   }
 
   .nav-links {
@@ -453,7 +467,13 @@
   .booking-field-card input,
   .booking-field-card textarea {
     padding: 14px 18px;
-    font-size: 15px;
+    /*
+     * 16px is the iOS-Safari threshold for triggering auto-zoom on
+     * focus. Anything smaller and the page jolts every time a field
+     * is tapped — kills the form's perceived quality at the most
+     * critical conversion step.
+     */
+    font-size: 16px;
     border-width: 2px;
     border-radius: 18px;
   }
@@ -554,11 +574,34 @@
 @media (max-width: 480px) {
   .mobile-phone {
     gap: 6px;
-    padding: 9px 10px;
+    padding: 10px 12px;
     font-size: 12px;
   }
 
   .mobile-phone span {
     letter-spacing: -0.01em;
   }
+
+  .hero-text h1,
+  .hero-heading {
+    font-size: 32px;
+    line-height: 1.12;
+  }
+
+  .hero-text h1 .hero-heading-mobile {
+    font-size: 30px;
+    line-height: 1.12;
+  }
+
+  .hero-buttons {
+    flex-direction: column;
+    gap: 12px;
+    padding-right: 0;
+  }
+
+  .hero-buttons .btn {
+    width: 100%;
+    margin-right: 0 !important;
+    padding: 16px 24px;
+  }
 }