feat(mobile): trim home hero and school-detail hero above the fold

MOB-06: On phones the home hero stacked eyebrow tag, h1, description
paragraph, search input, button, "Schools near me" and three explore
chips before the user could see the deadlines strip. Hide the eyebrow
and the descriptive paragraph at ≤640px (the h1 already names the
product; the search input is the primary action) and move the
"Start exploring" chips to render after the admissions deadlines —
time-sensitive info now leads, generic discovery follows. Result on
390×844: heading → search → Schools near me → first deadline chip
all fit above the fold.

MOB-11: The school-detail hero took ~2 viewports before the first real
metric. At ≤768px, switch .meta back to row+wrap so the short pills
("Manchester" / "Voluntary aided") flow 2-per-row instead of stacking
3 full rows, and hide the .headerDetails block (headteacher / website /
pupil count / trust) — secondary info that lives in the Pupils &
Inclusion section anyway. Reclaims ~70px of hero so the Ofsted card
and the headline metric surface within a single viewport.

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

nextjs-app/components/HomeView.module.css

@@ -74,6 +74,23 @@
   }
 }
 
+/* Above the fold on phones, every line costs. Drop the eyebrow tag and the
+   long descriptive paragraph — the h1 already names the product, and the
+   search input is the primary action users came to perform. */
+@media (max-width: 640px) {
+  .heroSection {
+    padding-top: 0.75rem;
+    margin-bottom: 1rem;
+  }
+  .heroEyebrow,
+  .heroDescription {
+    display: none;
+  }
+  .heroTitle {
+    font-size: 1.65rem;
+  }
+}
+
 /* View Toggle */
 .viewToggle {
   display: flex;

nextjs-app/components/HomeView.tsx

@@ -269,23 +269,6 @@ export function HomeView({ initialSchools, filters, totalSchools }: HomeViewProp
             </button>
             {geoError && <p className={styles.geoError} role="alert">{geoError}</p>}
           </div>
-          <div className={styles.exploringRow}>
-            <span className={styles.exploringLabel}>Start exploring</span>
-            <div className={styles.exploringChips}>
-              <a href="/rankings" className={styles.exploringChip}>
-                <span className={styles.chipDot} aria-hidden="true" />
-                Top-rated primary schools
-              </a>
-              <a href="/rankings" className={styles.exploringChip}>
-                <span className={styles.chipDot} aria-hidden="true" />
-                Top-rated secondary schools
-              </a>
-              <a href="/compare" className={styles.exploringChip}>
-                <span className={styles.chipDot} aria-hidden="true" />
-                Start a comparison
-              </a>
-            </div>
-          </div>
         </div>
       )}
 
@@ -335,6 +318,28 @@ export function HomeView({ initialSchools, filters, totalSchools }: HomeViewProp
         </section>
       )}
 
+      {/* Secondary discovery — moved below deadlines so the admissions
+          countdown (time-sensitive) shows ahead of generic "explore" links. */}
+      {!isSearchActive && initialSchools.schools.length === 0 && (
+        <div className={styles.exploringRow}>
+          <span className={styles.exploringLabel}>Start exploring</span>
+          <div className={styles.exploringChips}>
+            <a href="/rankings" className={styles.exploringChip}>
+              <span className={styles.chipDot} aria-hidden="true" />
+              Top-rated primary schools
+            </a>
+            <a href="/rankings" className={styles.exploringChip}>
+              <span className={styles.chipDot} aria-hidden="true" />
+              Top-rated secondary schools
+            </a>
+            <a href="/compare" className={styles.exploringChip}>
+              <span className={styles.chipDot} aria-hidden="true" />
+              Start a comparison
+            </a>
+          </div>
+        </div>
+      )}
+
       {/* How it works — only on landing page */}
       {!isSearchActive && (
         <section className={styles.howItWorks}>

nextjs-app/components/SchoolDetailView.module.css

@@ -855,11 +855,23 @@
         font-size: 1.25rem;
     }
 
+    /* Pills wrap horizontally instead of stacking — short tokens like
+       "Manchester" / "Voluntary aided" fit 2 per row instead of 3 full
+       rows of empty horizontal space. */
     .meta {
-        flex-direction: column;
+        flex-direction: row;
+        flex-wrap: wrap;
         gap: 0.375rem;
     }
 
+    /* Secondary header info (headteacher, website, pupil count, trust)
+       isn't needed above the fold on phones — pupil count lives in the
+       Pupils & Inclusion section, website is one scroll away. Reclaim
+       the ~3 vertical lines so the actual metrics surface sooner. */
+    .headerDetails {
+        display: none;
+    }
+
     .metricsGrid {
         grid-template-columns: repeat(2, 1fr);
     }