Content Rewrite

src/lib/styles/base.css

@@ -8,6 +8,7 @@
 
 html {
   scroll-behavior: smooth;
+  overflow-x: clip;
 }
 
 body {
@@ -16,6 +17,7 @@ body {
   line-height: 1.6;
   color: var(--text);
   background: var(--off-white);
+  overflow-x: clip;
 }
 
 img {

src/lib/styles/buttons.css

@@ -34,7 +34,7 @@
 }
 
 .btn-green {
-  background: var(--green);
+  background: var(--gw-green);
   color: #fff;
 }
 
@@ -59,15 +59,15 @@
 
 .btn-outline:hover {
   background: #fff;
-  color: var(--green);
+  color: var(--gw-green);
 }
 
 .btn-outline-green {
-  color: var(--green);
-  border-color: var(--green);
+  color: var(--gw-green);
+  border-color: var(--gw-green);
 }
 
 .btn-outline-green:hover {
-  background: var(--green);
+  background: var(--gw-green);
   color: #fff;
 }

src/lib/styles/forms.css

@@ -7,6 +7,20 @@
   margin-bottom: 44px;
 }
 
+.booking-eyebrow {
+  display: inline-block;
+  margin-bottom: 14px;
+  padding: 7px 12px;
+  border-radius: 999px;
+  background: rgba(33, 48, 33, 0.08);
+  color: var(--gw-green);
+  font-size: 12px;
+  font-weight: 800;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  box-shadow: inset 0 0 0 1px rgba(17, 20, 24, 0.05);
+}
+
 .booking-title {
   display: block;
   text-align: center;
@@ -28,6 +42,39 @@
   color: var(--yellow);
 }
 
+.booking-intro {
+  max-width: 720px;
+  margin: -8px auto 0;
+  color: #4c5056;
+  font-size: 17px;
+  line-height: 1.65;
+}
+
+.booking-trust-row {
+  display: flex;
+  justify-content: center;
+  gap: 12px;
+  flex-wrap: wrap;
+  margin-top: 18px;
+}
+
+.booking-trust-chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  min-height: 40px;
+  padding: 8px 14px;
+  border-radius: 999px;
+  background: #fff;
+  box-shadow:
+    inset 0 0 0 1px rgba(17, 20, 24, 0.06),
+    0 10px 24px rgba(17, 20, 24, 0.04);
+  color: var(--gw-green);
+  font-size: 14px;
+  font-weight: 600;
+  line-height: 1.2;
+}
+
 .booking-title-highlight::after {
   content: '';
   position: absolute;
@@ -37,6 +84,31 @@
   height: 28px;
   background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 34' fill='none'%3E%3Cpath d='M4 24C67 10 131 4 198 5c43 1 82 6 118 18' stroke='%23192419' stroke-width='8' stroke-linecap='round'/%3E%3C/svg%3E")
     center/contain no-repeat;
+  transform-origin: left center;
+  animation: booking-underline-draw 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.2s both;
+}
+
+@keyframes booking-underline-draw {
+  0% {
+    opacity: 0;
+    transform: scaleX(0.2) translateY(6px) rotate(-1.5deg);
+  }
+
+  65% {
+    opacity: 1;
+    transform: scaleX(1.04) translateY(0) rotate(0deg);
+  }
+
+  100% {
+    opacity: 1;
+    transform: scaleX(1) translateY(0) rotate(0deg);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .booking-title-highlight::after {
+    animation: none;
+  }
 }
 
 .booking-stepper {
@@ -44,6 +116,7 @@
   align-items: center;
   justify-content: center;
   gap: 28px;
+  margin-top: 24px;
 }
 
 .booking-step {
@@ -63,7 +136,7 @@
 .booking-step-number {
   width: 56px;
   height: 56px;
-  border: 3px solid #111;
+  border: 2px solid rgba(33, 48, 33, 0.18);
   border-radius: 50%;
   display: inline-flex;
   align-items: center;
@@ -80,7 +153,8 @@
 }
 
 .booking-step.active .booking-step-number {
-  background: #eadbbf;
+  background: rgba(33, 48, 33, 0.1);
+  border-color: var(--gw-green);
 }
 
 @media (hover: hover) {
@@ -119,14 +193,15 @@
 }
 
 .booking-panel-banner {
-  background: #eadbbf;
+  background: linear-gradient(180deg, #f6f2ea 0%, #f1ece3 100%);
   color: #34363a;
-  border-radius: 30px 30px 0 0;
-  padding: 28px 32px 42px;
+  border-radius: 30px;
+  padding: 24px 28px 34px;
   text-align: center;
   font-family: var(--font-body);
   font-size: 15px;
-  line-height: 1.35;
+  line-height: 1.55;
+  box-shadow: inset 0 0 0 1px rgba(17, 20, 24, 0.05);
 }
 
 .booking-card-grid {
@@ -135,7 +210,7 @@
 }
 
 .booking-card-grid-with-banner {
-  margin-top: -30px;
+  margin-top: -18px;
 }
 
 .booking-card-grid-owner {
@@ -150,7 +225,9 @@
   background: #fff;
   border-radius: 28px;
   padding: 32px 38px 30px;
-  box-shadow: 0 10px 30px rgba(17, 20, 24, 0.04);
+  box-shadow:
+    inset 0 0 0 1px rgba(17, 20, 24, 0.05),
+    0 10px 30px rgba(17, 20, 24, 0.04);
 }
 
 .booking-field-card-group {
@@ -175,10 +252,18 @@
   grid-template-columns: repeat(3, minmax(0, 1fr));
 }
 
+.booking-field-group-dog {
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+}
+
 .booking-field-stack {
   min-width: 0;
 }
 
+.booking-field-stack-full {
+  grid-column: 1 / -1;
+}
+
 .booking-field-card label,
 .booking-service-label {
   display: inline-flex;
@@ -198,6 +283,10 @@
   color: #666;
 }
 
+.booking-field-stack .booking-service-label {
+  margin-bottom: 14px;
+}
+
 .booking-required {
   color: var(--yellow);
 }
@@ -205,7 +294,7 @@
 .booking-field-card input,
 .booking-field-card textarea {
   width: 100%;
-  border: 3px solid #111;
+  border: 2px solid rgba(33, 48, 33, 0.18);
   border-radius: 20px;
   background: #fff;
   padding: 16px 28px;
@@ -219,14 +308,14 @@
 
 .booking-field-card input:hover,
 .booking-field-card textarea:hover {
-  background: #f6f0e5;
+  background: #f8f5ef;
 }
 
 .booking-field-card input:focus,
 .booking-field-card textarea:focus {
   outline: none;
-  border-color: var(--green);
-  background: #f6f0e5;
+  border-color: var(--gw-green);
+  background: #f8f5ef;
 }
 
 .booking-field-card textarea {
@@ -243,6 +332,9 @@
   border-radius: 28px;
   padding: 22px 28px;
   box-shadow: 0 10px 30px rgba(17, 20, 24, 0.04);
+  box-shadow:
+    inset 0 0 0 1px rgba(17, 20, 24, 0.05),
+    0 10px 30px rgba(17, 20, 24, 0.04);
 }
 
 .booking-toggle-group {
@@ -257,7 +349,7 @@
   gap: 12px;
   min-height: 56px;
   padding: 14px 18px;
-  border: 3px solid #111;
+  border: 2px solid rgba(33, 48, 33, 0.18);
   border-radius: 18px;
   font-family: var(--font-head);
   font-size: 15px;
@@ -271,7 +363,7 @@
 }
 
 .booking-toggle-option:hover {
-  background: #f6f0e5;
+  background: #f8f5ef;
 }
 
 .booking-toggle-option input {
@@ -283,7 +375,7 @@
 .booking-toggle-indicator {
   width: 24px;
   height: 24px;
-  border: 3px solid #111;
+  border: 2px solid rgba(33, 48, 33, 0.28);
   border-radius: 50%;
   display: inline-flex;
   align-items: center;
@@ -295,8 +387,8 @@
 }
 
 .booking-toggle-option input:checked + .booking-toggle-indicator {
-  border-color: #111;
-  background: var(--yellow);
+  border-color: var(--gw-green);
+  background: rgba(33, 48, 33, 0.12);
 }
 
 .booking-toggle-option input:checked + .booking-toggle-indicator::after {
@@ -304,7 +396,7 @@
   width: 10px;
   height: 10px;
   border-radius: 50%;
-  background: #111;
+  background: var(--gw-green);
 }
 
 
@@ -334,7 +426,7 @@
 .booking-check-box {
   width: 30px;
   height: 30px;
-  border: 3px solid #111;
+  border: 2px solid rgba(33, 48, 33, 0.28);
   border-radius: 8px;
   display: inline-flex;
   align-items: center;
@@ -346,16 +438,16 @@
 }
 
 .booking-check-option input:checked + .booking-check-box {
-  background: var(--yellow);
-  border-color: #111;
+  background: rgba(33, 48, 33, 0.12);
+  border-color: var(--gw-green);
 }
 
 .booking-check-option input:checked + .booking-check-box::after {
   content: '';
   width: 10px;
   height: 16px;
-  border-right: 3px solid #111;
-  border-bottom: 3px solid #111;
+  border-right: 3px solid var(--gw-green);
+  border-bottom: 3px solid var(--gw-green);
   transform: rotate(40deg) translate(-1px, -2px);
 }
 
@@ -379,7 +471,7 @@
   text-align: center;
   font-size: 13px;
   line-height: 1.45;
-  color: #666;
+  color: #6a6d72;
 }
 
 .booking-next-button,

src/lib/styles/layout.css

@@ -3,7 +3,7 @@ header {
   z-index: 100;
   isolation: isolate;
   overflow: visible;
-  background: var(--green);
+  background: var(--gw-green);
 }
 
 nav,
@@ -54,12 +54,12 @@ nav {
 
 .nav-links > li > a:hover {
   background: #fff;
-  color: var(--green);
+  color: var(--gw-green);
 }
 
 .nav-links > li > a.nav-link-active {
   background: #fff;
-  color: var(--green);
+  color: var(--gw-green);
 }
 
 .mega-chevron {
@@ -113,7 +113,7 @@ nav {
   padding: 12px 14px;
   border-radius: 12px;
   background: rgba(33, 48, 33, 0.04);
-  color: var(--green);
+  color: var(--gw-green);
   font-size: 13px;
   font-weight: 700;
   text-decoration: none;
@@ -158,7 +158,7 @@ nav {
 .mega-icon {
   width: 64px;
   height: 64px;
-  background: var(--green);
+  background: var(--gw-green);
   border-radius: 16px;
   display: flex;
   align-items: center;

src/lib/styles/responsive.css

@@ -44,6 +44,9 @@
    */
   body {
     font-size: 16px;
+  }
+
+  body.mobile-cta-enabled {
     padding-bottom: 64px;
   }
 
@@ -104,7 +107,7 @@
     min-height: 44px;
     padding: 11px 14px;
     background: rgba(33, 48, 33, 0.1);
-    color: var(--green);
+    color: var(--gw-green);
     font-size: 13px;
     font-weight: 600;
   }
@@ -400,12 +403,34 @@
     margin-bottom: 34px;
   }
 
+  .booking-eyebrow {
+    margin-bottom: 12px;
+    padding: 6px 10px;
+    font-size: 11px;
+  }
+
   .booking-title {
     font-size: 34px;
     line-height: 1.02;
     margin-bottom: 24px;
   }
 
+  .booking-intro {
+    margin-top: -4px;
+    font-size: 15px;
+    line-height: 1.55;
+  }
+
+  .booking-trust-row {
+    gap: 10px;
+    margin-top: 16px;
+  }
+
+  .booking-trust-chip {
+    padding: 8px 12px;
+    font-size: 13px;
+  }
+
   .booking-title-highlight::after {
     left: 12px;
     right: 12px;
@@ -453,7 +478,8 @@
     grid-template-columns: 1fr;
   }
 
-  .booking-field-group-owner {
+  .booking-field-group-owner,
+  .booking-field-group-dog {
     grid-template-columns: 1fr;
     gap: 18px;
   }
@@ -566,10 +592,6 @@
     border-radius: 24px;
   }
 
-  .footer-nav {
-    columns: 1;
-  }
-
   .footer-action-title {
     font-size: 22px;
   }
@@ -602,6 +624,10 @@
 }
 
 @media (max-width: 480px) {
+  .footer-nav {
+    gap: 2px 16px;
+  }
+
   .mobile-phone {
     gap: 6px;
     padding: 10px 12px;

src/lib/styles/sections.css

@@ -3,7 +3,7 @@ section {
 }
 
 #hero {
-  background: var(--green);
+  background: var(--gw-green);
   color: #fff;
   padding: 44px 50px 0;
   display: flex;
@@ -207,7 +207,7 @@ section {
   padding: 9px 16px;
   border-radius: 999px;
   background: rgba(255, 255, 255, 0.92);
-  color: var(--green);
+  color: var(--gw-green);
   font-size: 16px;
   font-weight: 700;
   text-decoration: none;
@@ -282,9 +282,35 @@ section {
   align-items: flex-end;
 }
 
+.promise-img-frame {
+  position: relative;
+  width: min(100%, 520px);
+  padding: 18px 18px 32px 32px;
+  border-radius: 32px;
+  background: linear-gradient(180deg, #faf8f3 0%, #f2eee6 100%);
+  box-shadow: 0 18px 34px rgba(17, 20, 24, 0.08);
+}
+
+.promise-img-frame::before {
+  content: '';
+  position: absolute;
+  left: 0;
+  right: 46px;
+  bottom: 0;
+  height: 18px;
+  border-radius: 999px;
+  background: var(--gw-green);
+  opacity: 0.14;
+  pointer-events: none;
+}
+
 .promise-img img {
   width: 100%;
   max-width: 560px;
+  display: block;
+  border-radius: 28px 28px 88px 28px;
+  box-shadow: 0 10px 24px rgba(17, 20, 24, 0.1);
+  object-fit: cover;
 }
 
 .service-card {
@@ -344,7 +370,7 @@ section {
 
 .service-card .service-card-icon {
   font-size: 34px;
-  color: var(--green);
+  color: var(--gw-green);
   margin-bottom: 0;
 }
 
@@ -355,7 +381,7 @@ section {
   padding: 6px 14px;
   border-radius: 999px;
   background: rgba(33, 48, 33, 0.06);
-  color: var(--green);
+  color: var(--gw-green);
   font-family: var(--font-head);
   font-size: 14px;
   font-weight: 700;
@@ -372,7 +398,7 @@ section {
 
 #values,
 footer {
-  background: var(--green);
+  background: var(--gw-green);
   color: #fff;
 }
 
@@ -470,7 +496,7 @@ footer {
 }
 
 .info-copy a {
-  color: var(--green);
+  color: var(--gw-green);
   font-weight: 600;
 }
 
@@ -495,7 +521,7 @@ footer {
 .faq summary::after {
   content: '+';
   font-size: 20px;
-  color: var(--green);
+  color: var(--gw-green);
 }
 
 .faq details[open] summary::after {
@@ -520,7 +546,7 @@ footer {
 }
 
 #instagram .btn {
-  background: var(--green);
+  background: var(--gw-green);
   color: #fff;
 }
 
@@ -594,13 +620,14 @@ footer {
 
 .footer-nav {
   list-style: none;
-  columns: 2;
-  column-gap: 24px;
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 2px 24px;
 }
 
 .footer-nav li {
   margin: 0;
-  break-inside: avoid;
+  min-width: 0;
 }
 
 .footer-nav a {

src/lib/styles/typography.css

@@ -53,7 +53,7 @@
   font-weight: 700;
   letter-spacing: 0.08em;
   text-transform: uppercase;
-  color: var(--green);
+  color: var(--gw-green);
   margin: 0 0 14px;
 }
 

src/lib/styles/variables.css

@@ -1,5 +1,5 @@
 :root {
-  --green: #213021;
+  --gw-green: #213021;
   --yellow: #ffd100;
   --gray: #59606d;
   --beige: #e5d6c2;
@@ -8,9 +8,6 @@
   --max-w: 1280px;
   --font-body: 'Readex Pro', sans-serif;
   --font-head: 'Unbounded', sans-serif;
-
-  /* Legacy "navy" tokens now intentionally render as Goodwalk green. */
-  --navy: var(--green);
 }
 
 @media (min-width: 1800px) {