UI: unify H1 size, eyebrow style, card radius and hover transform

Visual consistency pass so every page feels familiar.

H1 token (clamp(34px, 4vw, 56px) / line-height 1.05 / letter-spacing
-0.04em):
- typography.css: hero H1 was 50.2px fixed (with 40px/38px breakpoints).
- BookingPage: was clamp(32px, 4vw, 52px).
Service-, About-, Pricing-, Legal-page H1s already matched.

Shared .eyebrow utility (typography.css):
- 13px, green, uppercase, 700, 0.08em letter-spacing.
- Replaces the bespoke .service-eyebrow (14px) and .instagram-kicker
  (11px green pill).
- The yellow 28px .service-highlight-eyebrow now inherits the same
  utility — the eyebrow line is no longer competing with the H2
  underneath. Local rule kept only for the bottom-margin override.

Card border-radius unified to 28px:
- sections.css .service-card: 20px → 28px
- sections.css .value-card: 16px → 28px
- sections.css .testimonial-card: 20px → 28px
- TestimonialsSection .testimonial-stage: 24px → 28px
- AboutPage .about-section-gradient + .about-contact-card: 36px → 28px
- LegalPage .legal-card: 32px → 28px (mobile 24px → 28px)
- InstagramSection .instagram-panel: 24px → 28px
- PricingPage .meet-greet-prompt: 24px → 28px (mobile 20px → 28px)
Modal dialogs left at 24px (different visual class — overlay, not
inline content card).

Card hover transform unified to translateY(-6px) scale(1.012):
- sections.css .service-card: -6px / 1.01 → 1.012
- sections.css .value-card: -5px (no scale) → -6px / 1.012
- sections.css .testimonial-card: -4px (no scale) → -6px / 1.012
- ServiceLandingPage .service-plan-card / .service-benefit-card:
  -8px → -6px
- PricingPage .pricing-plan-card: -8px → -6px
- ServiceLandingPage .service-related-card already -6px / 1.012.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>

src/lib/components/AboutPage.svelte

@@ -102,7 +102,7 @@
   .about-section-gradient {
     margin: 0 24px 88px;
     padding: 40px 0;
-    border-radius: 36px;
+    border-radius: 28px;
     background: linear-gradient(180deg, #f5efe6 0%, #f9f6ef 100%);
   }
 
@@ -168,7 +168,7 @@
   }
 
   .about-contact-card {
-    border-radius: 36px;
+    border-radius: 28px;
     background: #fff;
     padding: 42px 48px;
     box-shadow: 0 14px 34px rgba(17, 20, 24, 0.05);

src/lib/components/BookingPage.svelte

@@ -58,7 +58,7 @@
   .booking-page-hero h1 {
     margin: 0 0 14px;
     font-family: var(--font-head);
-    font-size: clamp(32px, 4vw, 52px);
+    font-size: clamp(34px, 4vw, 56px);
     line-height: 1.05;
     letter-spacing: -0.04em;
     color: #fff;

src/lib/components/InstagramSection.svelte

@@ -11,7 +11,7 @@
   <div class="instagram-stage">
     <div class="instagram-panel">
       <div class="instagram-copy">
-        <span class="instagram-kicker">Daily walks, happy dogs</span>
+        <span class="eyebrow instagram-kicker">Daily walks, happy dogs</span>
         <h2>{instagram.title}</h2>
         <p class="instagram-blurb">See our dogs in action — walks, play, and happy pups</p>
         <a href={instagram.href} target="_blank" rel="noopener" class="btn btn-green instagram-button">
@@ -43,7 +43,7 @@
     position: relative;
     min-height: 150px;
     padding: 24px 320px 24px 44px;
-    border-radius: 24px;
+    border-radius: 28px;
     background:
       radial-gradient(circle at top left, rgba(255, 255, 255, 0.52), transparent 42%),
       linear-gradient(135deg, rgba(255, 252, 242, 0.98), rgba(255, 243, 198, 0.96));
@@ -63,16 +63,9 @@
   }
 
   .instagram-kicker {
-    display: inline-flex;
-    margin-bottom: 10px;
-    padding: 6px 12px;
-    border-radius: 999px;
-    background: rgba(33, 48, 33, 0.08);
-    color: var(--green);
-    font-size: 11px;
-    font-weight: 700;
-    letter-spacing: 0.08em;
-    text-transform: uppercase;
+    /* All visual styling comes from the shared .eyebrow utility. */
+    display: inline-block;
+    margin: 0 0 10px;
   }
 
   .instagram-copy :global(h2) {

src/lib/components/LegalPage.svelte

@@ -83,7 +83,7 @@
 
   .legal-card {
     padding: 40px 44px;
-    border-radius: 32px;
+    border-radius: 28px;
     background: #fff;
     box-shadow: 0 14px 34px rgba(17, 20, 24, 0.05);
   }
@@ -172,7 +172,7 @@
 
     .legal-card {
       padding: 28px 22px;
-      border-radius: 24px;
+      border-radius: 28px;
     }
 
     .legal-section + .legal-section {

src/lib/components/PricingPage.svelte

@@ -349,7 +349,7 @@
     gap: 18px;
     width: min(420px, calc(100vw - 32px));
     padding: 18px 18px 18px 20px;
-    border-radius: 24px;
+    border-radius: 28px;
     background:
       linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(247, 243, 232, 0.98));
     box-shadow:
@@ -460,7 +460,7 @@
 
   @media (hover: hover) {
     .pricing-plan-card:hover {
-      transform: translateY(-8px) scale(1.012);
+      transform: translateY(-6px) scale(1.012);
       box-shadow: 0 22px 44px rgba(17, 20, 24, 0.1);
     }
   }
@@ -547,7 +547,7 @@
       align-items: stretch;
       gap: 14px;
       padding: 18px 18px 16px;
-      border-radius: 20px;
+      border-radius: 28px;
     }
 
     .meet-greet-copy p {

src/lib/components/ServiceLandingPage.svelte

@@ -38,7 +38,7 @@
   <section class="service-hero">
     <div class="service-inner service-hero-grid">
       <div class="service-hero-copy">
-        <p class="service-eyebrow">{pageContent.hero.eyebrow}</p>
+        <p class="eyebrow">{pageContent.hero.eyebrow}</p>
         <h1>{pageContent.hero.title}</h1>
 
         {#each pageContent.hero.paragraphs as paragraph}
@@ -63,7 +63,7 @@
   {#if pageContent.highlight}
     <section use:reveal class="service-highlight reveal-block">
       <div class="service-inner service-highlight-copy">
-        <p class="service-highlight-eyebrow">{pageContent.highlight.eyebrow}</p>
+        <p class="eyebrow service-highlight-eyebrow">{pageContent.highlight.eyebrow}</p>
         <h2>{pageContent.highlight.title}</h2>
       </div>
 
@@ -351,16 +351,6 @@
     align-items: center;
   }
 
-  .service-eyebrow {
-    margin: 0 0 18px;
-    color: var(--green);
-    font-family: var(--font-head);
-    font-size: 14px;
-    font-weight: 700;
-    letter-spacing: 0.08em;
-    text-transform: uppercase;
-  }
-
   .service-hero-copy h1,
   .service-section-heading h2,
   .service-highlight-copy h2 {
@@ -405,12 +395,13 @@
     margin-bottom: 34px;
   }
 
+  /*
+   * Decorative dingbat eyebrow on the highlight section. Inherits sizing /
+   * colour from the shared .eyebrow utility; this rule only adjusts the
+   * downward spacing relative to the H2 underneath.
+   */
   .service-highlight-eyebrow {
     margin: 0 0 16px;
-    color: var(--yellow);
-    font-family: var(--font-head);
-    font-size: 28px;
-    line-height: 1;
   }
 
   .service-highlight-image img {
@@ -478,7 +469,7 @@
   @media (hover: hover) {
     .service-plan-card:hover,
     .service-benefit-card:hover {
-      transform: translateY(-8px) scale(1.012);
+      transform: translateY(-6px) scale(1.012);
       box-shadow: 0 22px 44px rgba(17, 20, 24, 0.1);
     }
   }
@@ -688,10 +679,6 @@
       padding-bottom: 72px;
     }
 
-    .service-highlight-eyebrow {
-      font-size: 24px;
-    }
-
     .service-extra-row {
       flex-direction: column;
       align-items: flex-start;

src/lib/components/TestimonialsSection.svelte

@@ -326,7 +326,7 @@
   .testimonial-stage {
     position: relative;
     overflow: hidden;
-    border-radius: 24px;
+    border-radius: 28px;
     background: #fff;
     box-shadow: 0 10px 30px rgba(20, 24, 20, 0.06);
     min-height: 620px;

src/lib/styles/sections.css

@@ -249,7 +249,7 @@ section {
 
 .service-card {
   background: var(--off-white);
-  border-radius: 20px;
+  border-radius: 28px;
   padding: 40px 32px;
   text-align: center;
   transition:
@@ -280,7 +280,7 @@ section {
 
 @media (hover: hover) {
   .service-card:hover {
-    transform: translateY(-6px) scale(1.01);
+    transform: translateY(-6px) scale(1.012);
     box-shadow: 0 18px 38px rgba(0, 0, 0, 0.1);
   }
 }
@@ -355,7 +355,7 @@ footer {
 
 .value-card {
   background: rgba(255, 255, 255, 0.07);
-  border-radius: 16px;
+  border-radius: 28px;
   padding: 32px 28px;
   border: 1px solid rgba(255, 255, 255, 0.12);
   transition:
@@ -366,7 +366,7 @@ footer {
 
 @media (hover: hover) {
   .value-card:hover {
-    transform: translateY(-5px);
+    transform: translateY(-6px) scale(1.012);
     box-shadow: 0 18px 34px rgba(0, 0, 0, 0.14);
     border-color: rgba(255, 255, 255, 0.18);
   }
@@ -390,7 +390,7 @@ footer {
 
 .testimonial-card {
   background: #fff;
-  border-radius: 20px;
+  border-radius: 28px;
   padding: 36px 32px;
   box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
   transition:
@@ -400,7 +400,7 @@ footer {
 
 @media (hover: hover) {
   .testimonial-card:hover {
-    transform: translateY(-4px);
+    transform: translateY(-6px) scale(1.012);
     box-shadow: 0 18px 34px rgba(0, 0, 0, 0.09);
   }
 }

src/lib/styles/typography.css

@@ -35,13 +35,28 @@
 
 .hero-text h1 {
   font-family: var(--font-head);
-  font-size: 50.2px;
+  font-size: clamp(34px, 4vw, 56px);
   font-weight: 800;
-  line-height: 1.1;
+  line-height: 1.05;
+  letter-spacing: -0.04em;
   margin-bottom: 28px;
   color: #fff;
 }
 
+/*
+ * Shared eyebrow utility for the small uppercase label that introduces a
+ * heading. Use this instead of bespoke per-section kickers.
+ */
+.eyebrow {
+  font-family: var(--font-head);
+  font-size: 13px;
+  font-weight: 700;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: var(--green);
+  margin: 0 0 14px;
+}
+
 .hero-text h1 .hero-heading-mobile {
   display: none;
 }