Content Rewrite

src/lib/components/ValuesSection.svelte

@@ -21,7 +21,11 @@
 
 <section id="values">
   <div class="values-inner">
-    <h2 class="section-heading">Where dogs come first</h2>
+    <span class="values-eyebrow">Why owners stay</span>
+    <h2 class="section-heading">Calmer dogs. Clearer routines. Less worry.</h2>
+    <p class="values-intro">
+      Everything is designed to make life easier for busy Auckland dog owners and safer, happier for the dogs in our care.
+    </p>
 
     <div class="values-grid">
       {#each orderedValues as value}
@@ -34,3 +38,43 @@
     </div>
   </div>
 </section>
+
+<style>
+  .values-eyebrow {
+    display: block;
+    width: fit-content;
+    margin: 0 auto 10px;
+    padding: 7px 12px;
+    border-radius: 999px;
+    background: rgba(255, 255, 255, 0.08);
+    color: var(--yellow);
+    font-size: 12px;
+    font-weight: 800;
+    letter-spacing: 0.08em;
+    text-transform: uppercase;
+    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
+  }
+
+  .values-intro {
+    max-width: 760px;
+    margin: 18px auto 0;
+    text-align: center;
+    color: rgba(255, 255, 255, 0.82);
+    font-size: 17px;
+    line-height: 1.65;
+  }
+
+  @media (max-width: 768px) {
+    .values-eyebrow {
+      margin-bottom: 8px;
+      padding: 6px 10px;
+      font-size: 11px;
+    }
+
+    .values-intro {
+      margin-top: 14px;
+      font-size: 15px;
+      line-height: 1.55;
+    }
+  }
+</style>