feat(secondary): apply hero design language to secondary school detail view

- Bump school name to clamp(2rem,5vw,3.25rem) Playfair Display
- Add hero signal chips strip (framework-aware Ofsted + coral Oversubscribed)
- Add at-a-glance stats row: Att8 with delta vs national, Ofsted serif tile, first-choice rate
- Active section highlighting in sticky nav via IntersectionObserver
- Collapse OEIF Ofsted section to prose when all sub-grades match overall
- Pass nationalAtt8Avg reference line to PerformanceChart

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

nextjs-app/components/SecondarySchoolDetailView.module.css

@@ -26,11 +26,11 @@
 }
 
 .schoolName {
-  font-size: 1.5rem;
+  font-size: clamp(2rem, 5vw, 3.25rem);
   font-weight: 700;
   color: var(--text-primary, #1a1612);
   margin-bottom: 0.5rem;
-  line-height: 1.2;
+  line-height: 1.15;
   font-family: var(--font-playfair), 'Playfair Display', serif;
   overflow-wrap: break-word;
 }
@@ -207,6 +207,17 @@
   color: var(--text-primary, #1a1612);
 }
 
+.tabBtnActive {
+  background: var(--accent-coral, #e07256);
+  color: white;
+  font-weight: 600;
+}
+
+.tabBtnActive:hover {
+  background: var(--accent-coral-dark, #c45a3f);
+  color: white;
+}
+
 /* ── Card ────────────────────────────────────────────── */
 .card {
   background: var(--bg-card, white);
@@ -652,6 +663,145 @@
   margin-top: 0.25rem;
 }
 
+/* ── Ofsted all-same collapse ────────────────────────── */
+.ofstedAllSame {
+  font-size: 0.9375rem;
+  color: var(--text-secondary, #5c564d);
+  margin: 0.5rem 0 0;
+  line-height: 1.5;
+}
+
+.ofstedAllSame strong {
+  color: var(--text-primary, #1a1612);
+}
+
+/* ── Hero chips strip ────────────────────────────────── */
+.heroChips {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.75rem;
+  margin-top: 1.25rem;
+}
+
+.heroChip {
+  flex: 0 0 240px;
+  padding: 0.75rem 1rem;
+  border-radius: 8px;
+  border-left: 3px solid var(--border-color, #e5dfd5);
+  background: var(--bg-secondary, #f3ede4);
+  color: var(--text-primary, #1a1612);
+  display: flex;
+  flex-direction: column;
+  gap: 0.15rem;
+}
+
+.heroChipTitle {
+  font-size: 0.9375rem;
+  font-weight: 700;
+  line-height: 1.3;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.heroChipSub {
+  font-size: 0.75rem;
+  color: var(--text-secondary, #5c564d);
+  line-height: 1.4;
+}
+
+.heroChipDetail {
+  font-size: 0.75rem;
+  font-weight: 600;
+  line-height: 1.4;
+  margin-top: 0.1rem;
+}
+
+/* Hero tone system */
+.tone-teal   { --hero-tone: var(--accent-teal, #2d7d7d); }
+.tone-green  { --hero-tone: #3c8c3c; }
+.tone-gold   { --hero-tone: var(--accent-gold, #c9a227); }
+.tone-coral  { --hero-tone: var(--accent-coral, #e07256); }
+.tone-neutral { --hero-tone: var(--text-muted, #8a847a); }
+
+.heroChip.tone-teal,
+.heroChip.tone-green,
+.heroChip.tone-gold,
+.heroChip.tone-coral,
+.heroChip.tone-neutral {
+  border-left-color: var(--hero-tone);
+  background: color-mix(in srgb, var(--hero-tone) 10%, var(--bg-card, white));
+}
+
+.heroChip.tone-neutral {
+  background: var(--bg-secondary, #f3ede4);
+}
+
+/* ── Hero at-a-glance stats ──────────────────────────── */
+.heroStats {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 1.25rem 3rem;
+  margin-top: 1.5rem;
+  padding-top: 1.5rem;
+  border-top: 1px solid var(--border-color, #e5dfd5);
+}
+
+.heroStat {
+  display: flex;
+  flex-direction: column;
+  gap: 0.35rem;
+  min-width: 0;
+  flex: 0 0 auto;
+}
+
+.heroStatNumber,
+.heroStatNumberSerif {
+  font-family: var(--font-playfair), 'Playfair Display', serif;
+  font-weight: 700;
+  line-height: 1;
+  color: var(--text-primary, #1a1612);
+  min-height: clamp(2rem, 4vw, 2.75rem);
+  display: flex;
+  align-items: flex-end;
+}
+
+.heroStatNumber {
+  font-size: clamp(2rem, 4vw, 2.75rem);
+  font-variant-numeric: tabular-nums;
+}
+
+.heroStatNumberSerif {
+  font-size: clamp(1.75rem, 3.5vw, 2.25rem);
+}
+
+.heroStatNumberSerif.tone-teal,
+.heroStatNumberSerif.tone-green,
+.heroStatNumberSerif.tone-gold,
+.heroStatNumberSerif.tone-coral,
+.heroStatNumberSerif.tone-neutral {
+  color: var(--hero-tone);
+}
+
+.heroStatLabel {
+  font-size: 0.6875rem;
+  font-weight: 600;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: var(--text-secondary, #5c564d);
+}
+
+.heroStatFoot {
+  font-size: 0.75rem;
+  color: var(--text-muted, #8a847a);
+}
+
+.heroDataNote {
+  margin: 0.5rem 0 0;
+  font-size: 0.75rem;
+  color: var(--text-muted, #8a847a);
+}
+
 /* ── Responsive ──────────────────────────────────────── */
 @media (max-width: 768px) {
   .header {
@@ -673,7 +823,6 @@
   }
 
   .schoolName {
-    font-size: 1.25rem;
     word-break: break-word;
   }
 
@@ -733,6 +882,19 @@
   .admissionsTypeBadge {
     font-size: 0.75rem;
   }
+
+  .heroChips {
+    gap: 0.5rem;
+    margin-top: 1rem;
+  }
+
+  .heroChip {
+    min-width: 100%;
+  }
+
+  .heroStats {
+    gap: 1rem 1.5rem;
+  }
 }
 
 @media (max-width: 480px) {