feat(compare): lay mobile chart chips two per row

The mobile chart legend stacked one school chip per line, so up to five
schools pushed the chart down and left the plot cramped. Switch the chip
row to a two-column grid; each chip fills its column and truncates its
name with an ellipsis (full names remain on the school cards and in the
tooltip). Five schools now take three rows instead of five, giving the
chart noticeably more height.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

.gitea/workflows/deploy.yml

@@ -1,12 +1,9 @@
-name: Build and Push Docker Images
+name: Deploy (staging -> E2E gate -> production)
 
 on:
   push:
     branches:
       - main
-  pull_request:
-    branches:
-      - main
 
 env:
   REGISTRY: privaterepo.sitaru.org
@@ -45,17 +42,15 @@ jobs:
         with:
           images: ${{ env.REGISTRY }}/${{ env.BACKEND_IMAGE_NAME }}
           tags: |
-            type=ref,event=branch
+            type=sha
-            type=ref,event=pr
+            type=raw,value=staging
-            type=sha,prefix=backend-
-            type=raw,value=latest,enable=${{ gitea.ref == 'refs/heads/main' }}
 
       - name: Build and push Backend Docker image
         uses: docker/build-push-action@v5
         with:
           context: .
           file: ./Dockerfile
-          push: ${{ gitea.event_name != 'pull_request' }}
+          push: true
           tags: ${{ steps.meta-backend.outputs.tags }}
           labels: ${{ steps.meta-backend.outputs.labels }}
           cache-from: type=registry,ref=${{ env.REGISTRY }}/${{ env.BACKEND_IMAGE_NAME }}:buildcache
@@ -91,24 +86,20 @@ jobs:
         with:
           images: ${{ env.REGISTRY }}/${{ env.FRONTEND_IMAGE_NAME }}
           tags: |
-            type=ref,event=branch
+            type=sha
-            type=ref,event=pr
+            type=raw,value=staging
-            type=sha,prefix=frontend-
-            type=raw,value=latest,enable=${{ gitea.ref == 'refs/heads/main' }}
 
       - name: Build and push Frontend Docker image
         uses: docker/build-push-action@v5
         with:
           context: ./nextjs-app
           file: ./nextjs-app/Dockerfile
-          push: ${{ gitea.event_name != 'pull_request' }}
+          push: true
           tags: ${{ steps.meta-frontend.outputs.tags }}
           labels: ${{ steps.meta-frontend.outputs.labels }}
           build-args: |
             FASTAPI_URL=http://backend:80/api
           # Cache disabled due to registry size limits
-          # cache-from: type=registry,ref=${{ env.REGISTRY }}/${{ env.FRONTEND_IMAGE_NAME }}:buildcache
-          # cache-to: type=registry,ref=${{ env.REGISTRY }}/${{ env.FRONTEND_IMAGE_NAME }}:buildcache,mode=max
 
   build-pipeline:
     name: Build Pipeline (Meltano + dbt + Airflow)
@@ -140,28 +131,110 @@ jobs:
         with:
           images: ${{ env.REGISTRY }}/${{ env.PIPELINE_IMAGE_NAME }}
           tags: |
-            type=ref,event=branch
+            type=sha
-            type=ref,event=pr
+            type=raw,value=staging
-            type=sha,prefix=pipeline-
-            type=raw,value=latest,enable=${{ gitea.ref == 'refs/heads/main' }}
 
       - name: Build and push Pipeline Docker image
         uses: docker/build-push-action@v5
         with:
           context: ./pipeline
           file: ./pipeline/Dockerfile
-          push: ${{ gitea.event_name != 'pull_request' }}
+          push: true
           tags: ${{ steps.meta-pipeline.outputs.tags }}
           labels: ${{ steps.meta-pipeline.outputs.labels }}
           cache-from: type=registry,ref=${{ env.REGISTRY }}/${{ env.PIPELINE_IMAGE_NAME }}:buildcache
           cache-to: type=registry,ref=${{ env.REGISTRY }}/${{ env.PIPELINE_IMAGE_NAME }}:buildcache,mode=max
 
-  trigger-deployment:
+  deploy-staging:
-    name: Trigger Portainer Update
+    name: Deploy to Staging
     runs-on: ubuntu-latest
     needs: [build-backend, build-frontend, build-pipeline]
-    if: gitea.event_name != 'pull_request'
     steps:
-      - name: Trigger Portainer stack update
+      - name: Trigger staging stack update
+        run: curl -fsSk -X POST "${{ secrets.PORTAINER_STAGING_WEBHOOK }}"
+
+      - name: Wait for staging to become healthy
         run: |
-          curl -X POST -k "https://10.0.1.224:9443/api/stacks/webhooks/863fc57c-bf24-4c63-9001-bdf9912fba73"
+          echo "Polling ${STAGING_BASE_URL} for up to 5 minutes..."
+          for i in $(seq 1 60); do
+            if curl -fsS -o /dev/null --max-time 10 "${STAGING_BASE_URL}/"; then
+              echo "Staging is up (attempt $i)"
+              exit 0
+            fi
+            sleep 5
+          done
+          echo "Staging did not become healthy in time" >&2
+          exit 1
+        env:
+          STAGING_BASE_URL: ${{ secrets.STAGING_BASE_URL }}
+
+  e2e-staging:
+    name: E2E Journeys against Staging
+    runs-on: ubuntu-latest
+    needs: [deploy-staging]
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+
+      - name: Set up Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: 22
+
+      - name: Install Playwright
+        working-directory: e2e
+        run: |
+          npm ci
+          npx playwright install --with-deps chromium
+
+      - name: Run E2E journeys
+        working-directory: e2e
+        run: npx playwright test
+        env:
+          BASE_URL: ${{ secrets.STAGING_BASE_URL }}
+
+  promote-prod:
+    name: Promote to Production
+    runs-on: ubuntu-latest
+    needs: [e2e-staging]
+    steps:
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v3
+
+      - name: Log in to Gitea Container Registry
+        uses: docker/login-action@v3
+        with:
+          registry: ${{ env.REGISTRY }}
+          username: ${{ gitea.actor }}
+          password: ${{ secrets.REGISTRY_TOKEN }}
+
+      - name: Retag verified images as prod
+        run: |
+          SHORT_SHA="sha-$(echo "${{ gitea.sha }}" | cut -c1-7)"
+          for IMAGE in \
+            "${REGISTRY}/${BACKEND_IMAGE_NAME}" \
+            "${REGISTRY}/${FRONTEND_IMAGE_NAME}" \
+            "${REGISTRY}/${PIPELINE_IMAGE_NAME}"; do
+            # Keep a rollback pointer before moving :prod
+            docker buildx imagetools create -t "${IMAGE}:prod-previous" "${IMAGE}:prod" || true
+            docker buildx imagetools create -t "${IMAGE}:prod" "${IMAGE}:${SHORT_SHA}"
+            echo "Promoted ${IMAGE}:${SHORT_SHA} -> :prod"
+          done
+
+      - name: Trigger production stack update
+        run: curl -fsSk -X POST "${{ secrets.PORTAINER_PROD_WEBHOOK }}"
+
+      - name: Wait for production to become healthy
+        run: |
+          echo "Polling ${PROD_BASE_URL} for up to 5 minutes..."
+          for i in $(seq 1 60); do
+            if curl -fsS -o /dev/null --max-time 10 "${PROD_BASE_URL}/"; then
+              echo "Production is up (attempt $i)"
+              exit 0
+            fi
+            sleep 5
+          done
+          echo "Production did not become healthy in time" >&2
+          exit 1
+        env:
+          PROD_BASE_URL: ${{ secrets.PROD_BASE_URL }}

.gitea/workflows/pr-checks.yml

@@ -0,0 +1,188 @@
+name: PR Checks
+
+on:
+  pull_request:
+    branches:
+      - main
+
+env:
+  REGISTRY: privaterepo.sitaru.org
+  BACKEND_IMAGE_NAME: ${{ gitea.repository }}-backend
+  FRONTEND_IMAGE_NAME: ${{ gitea.repository }}-frontend
+  PIPELINE_IMAGE_NAME: ${{ gitea.repository }}-pipeline
+
+jobs:
+  frontend-checks:
+    name: Frontend Typecheck + Tests
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+
+      - name: Set up Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: 22
+          cache: npm
+          cache-dependency-path: nextjs-app/package-lock.json
+
+      - name: Install dependencies
+        working-directory: nextjs-app
+        run: npm ci
+
+      - name: Typecheck
+        working-directory: nextjs-app
+        run: npm run typecheck
+
+      - name: Unit tests
+        working-directory: nextjs-app
+        run: npm test
+
+  backend-checks:
+    name: Backend Smoke
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+
+      - name: Set up Python
+        uses: actions/setup-python@v5
+        with:
+          python-version: "3.12"
+
+      - name: Install dependencies
+        run: pip install -r requirements.txt
+
+      - name: Import smoke test
+        run: python -c "from backend.app import app; print('backend imports OK')"
+
+  build-backend:
+    name: Build Backend (no push)
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v3
+        with:
+          buildkitd-config-inline: |
+            [registry."docker.io"]
+              mirrors = ["10.0.1.224:6000"]
+            [registry."10.0.1.224:6000"]
+              http = true
+              insecure = true
+
+      - name: Log in to Gitea Container Registry
+        uses: docker/login-action@v3
+        with:
+          registry: ${{ env.REGISTRY }}
+          username: ${{ gitea.actor }}
+          password: ${{ secrets.REGISTRY_TOKEN }}
+
+      - name: Build Backend Docker image
+        uses: docker/build-push-action@v5
+        with:
+          context: .
+          file: ./Dockerfile
+          push: false
+          cache-from: type=registry,ref=${{ env.REGISTRY }}/${{ env.BACKEND_IMAGE_NAME }}:buildcache
+
+  build-frontend:
+    name: Build Frontend (no push)
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v3
+        with:
+          buildkitd-config-inline: |
+            [registry."docker.io"]
+              mirrors = ["10.0.1.224:6000"]
+            [registry."10.0.1.224:6000"]
+              http = true
+              insecure = true
+
+      - name: Log in to Gitea Container Registry
+        uses: docker/login-action@v3
+        with:
+          registry: ${{ env.REGISTRY }}
+          username: ${{ gitea.actor }}
+          password: ${{ secrets.REGISTRY_TOKEN }}
+
+      - name: Build Frontend Docker image
+        uses: docker/build-push-action@v5
+        with:
+          context: ./nextjs-app
+          file: ./nextjs-app/Dockerfile
+          push: false
+          build-args: |
+            FASTAPI_URL=http://backend:80/api
+
+  build-pipeline:
+    name: Build Pipeline (no push)
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v3
+        with:
+          buildkitd-config-inline: |
+            [registry."docker.io"]
+              mirrors = ["10.0.1.224:6000"]
+            [registry."10.0.1.224:6000"]
+              http = true
+              insecure = true
+
+      - name: Log in to Gitea Container Registry
+        uses: docker/login-action@v3
+        with:
+          registry: ${{ env.REGISTRY }}
+          username: ${{ gitea.actor }}
+          password: ${{ secrets.REGISTRY_TOKEN }}
+
+      - name: Build Pipeline Docker image
+        uses: docker/build-push-action@v5
+        with:
+          context: ./pipeline
+          file: ./pipeline/Dockerfile
+          push: false
+          cache-from: type=registry,ref=${{ env.REGISTRY }}/${{ env.PIPELINE_IMAGE_NAME }}:buildcache
+
+  ai-review:
+    name: AI Code Review (Claude)
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+
+      - name: Set up Python
+        uses: actions/setup-python@v5
+        with:
+          python-version: "3.12"
+
+      - name: Set up Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: 22
+
+      - name: Install Claude Code
+        run: npm install -g @anthropic-ai/claude-code
+
+      - name: Review PR diff with Claude Code
+        env:
+          CLAUDE_CODE_OAUTH_TOKEN: ${{ secrets.CLAUDE_CODE_OAUTH_TOKEN }}
+          # Auto-provided per-run token from Gitea Actions (repo-scoped).
+          # GITHUB_TOKEN is the documented name; GITEA_TOKEN is its alias.
+          GITEA_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          GITEA_SERVER_URL: ${{ gitea.server_url }}
+          GITEA_REPOSITORY: ${{ gitea.repository }}
+          PR_NUMBER: ${{ gitea.event.pull_request.number }}
+          BASE_REF: ${{ gitea.event.pull_request.base.ref }}
+        run: python scripts/ci/ai_review.py

MOBILE.md

@@ -0,0 +1,71 @@
+# Mobile design baseline
+
+Mobile (≥55% of traffic) is the primary target for this app. Any new
+screen or component must be designed at the **360 px** viewport first
+and verified at three reference widths before merge.
+
+## Reference viewports
+
+| Width | Device class | Purpose |
+| --- | --- | --- |
+| 360 px | Low-end Android (Samsung A-series, older Pixels) | Hard floor — if it doesn't fit here it isn't shipping |
+| 390 px | iPhone 14 / 15 / 16 (38% of mobile traffic) | Primary iOS target |
+| 430 px | iPhone 16 Pro Max, large Android | Upper mobile bound |
+
+## Acceptance checks for any screen change
+
+Before raising a PR that touches user-visible UI, confirm at each
+reference width:
+
+1. **No horizontal overflow.** `document.documentElement.scrollWidth ===
+   window.innerWidth`. The most reliable check: in DevTools console run
+   ```js
+   document.documentElement.scrollWidth - innerWidth
+   ```
+   It must read `0`. Any positive number means something is bleeding
+   past the right edge — usually a fixed-width element, an inline-block
+   that didn't wrap, or a flex row missing `flex-wrap: wrap`.
+2. **Tap targets ≥ 44 × 44 px** on every interactive element (iOS Human
+   Interface Guidelines minimum). Probe with:
+   ```js
+   Array.from(document.querySelectorAll('a, button, [role=button], input, select'))
+     .filter(el => el.offsetParent)
+     .map(el => ({ t: el.innerText?.trim().slice(0,30), r: el.getBoundingClientRect() }))
+     .filter(o => o.r.width < 44 || o.r.height < 44)
+   ```
+3. **No text below 11 px** in any visible-by-default block. Decorative
+   demo content (illustrations, mocked previews) should either scale up
+   or be hidden under the `640 px` breakpoint — see `MOB-04` for the
+   pattern used on the home page's "What you'll see" section.
+4. **iOS Chrome bottom-bar parity.** The fixed `Navigation` bottom tab
+   bar already compensates for the auto-hiding URL bar via the Visual
+   Viewport API (`Navigation.tsx`). New fixed-bottom elements must
+   either use the same offset (read `var(--mobile-bar-offset)`) or sit
+   inside the existing tab-bar container.
+5. **Safe-area insets** on any new sticky/fixed chrome:
+   `padding-bottom: env(safe-area-inset-bottom)` for bottom-pinned UI,
+   `padding-inline: env(safe-area-inset-left/right)` for header-class
+   chrome that runs full bleed.
+6. **`dvh`, not `vh`.** iOS Safari's collapsing toolbar makes raw `vh`
+   units jump. Prefer `100dvh` (with a `100vh` fallback if you support
+   older engines) for any height that needs to track the visible
+   viewport.
+
+## Component patterns
+
+- **Hide-on-mobile decoration:** wrap with `@media (max-width: 640px) {
+  .x { display: none; } }` — examples in `HomeView.module.css`
+  (`.hiwVisual`), `MetricTooltip.module.css` (`.wrapper`).
+- **Right-edge scroll-fade for horizontal scrollers:**
+  `mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);`
+  Drop the fade when scrolled to the end with a JS-toggled class — see
+  `SchoolDetailView.tsx`'s `sectionNavAtEnd` state for the pattern.
+
+## Automation (future)
+
+A Playwright regression test that asserts `docW === vw` at the three
+reference widths on `/`, `/rankings`, `/admissions`, `/compare`, and a
+representative `/school/:urn` page would catch overflow regressions
+immediately. Not added yet — Playwright isn't currently in the project
+dependency set, and the existing Jest setup doesn't compute layout.
+Worth adding if mobile overflow regressions recur.

backend/app.py

@@ -4,6 +4,7 @@ Serves primary and secondary school performance data for comparing schools.
 Uses real data from UK Government Compare School Performance downloads.
 """
 
+import hashlib
 import re
 from contextlib import asynccontextmanager
 from typing import Optional
@@ -12,6 +13,7 @@ import numpy as np
 import pandas as pd
 from fastapi import FastAPI, HTTPException, Query, Request, Depends, Header
 from fastapi.middleware.cors import CORSMiddleware
+from fastapi.middleware.gzip import GZipMiddleware
 from fastapi.responses import FileResponse, Response
 from fastapi.staticfiles import StaticFiles
 from slowapi import Limiter, _rate_limit_exceeded_handler
@@ -24,6 +26,7 @@ from .config import settings
 from .data_loader import (
     clear_cache,
     load_school_data,
+    load_latest_school_data,
     geocode_single_postcode,
     get_supplementary_data,
     search_schools_typesense,
@@ -164,6 +167,69 @@ class SecurityHeadersMiddleware(BaseHTTPMiddleware):
         return response
 
 
+# Per-path Cache-Control rules. Keys are matched as path prefixes (longest wins).
+# Values: (max_age, s_maxage, stale_while_revalidate)
+CACHE_RULES: list[tuple[str, tuple[int, int, int]]] = [
+    ("/api/filters",            (300,  86400, 604800)),
+    ("/api/metrics",            (300,  86400, 604800)),
+    ("/api/national-averages",  (300,  86400, 604800)),
+    ("/api/la-averages",        (300,  86400, 604800)),
+    ("/api/data-info",          (300,  86400, 604800)),
+    ("/api/schools/",           (300,  3600,  86400)),  # /api/schools/{urn}
+    ("/api/rankings",           (60,   600,   3600)),
+    ("/api/compare",            (60,   600,   3600)),
+    ("/api/schools",            (30,   300,   1800)),   # search list
+]
+
+
+def _cache_control_for_path(path: str) -> Optional[str]:
+    # Longest-prefix match
+    best: Optional[tuple[int, tuple[int, int, int]]] = None
+    for prefix, vals in CACHE_RULES:
+        if path.startswith(prefix) and (best is None or len(prefix) > best[0]):
+            best = (len(prefix), vals)
+    if best is None:
+        return None
+    max_age, s_maxage, swr = best[1]
+    return f"public, max-age={max_age}, s-maxage={s_maxage}, stale-while-revalidate={swr}"
+
+
+class CacheAndETagMiddleware(BaseHTTPMiddleware):
+    """Set Cache-Control on cacheable API responses and serve 304s via ETag."""
+
+    async def dispatch(self, request: Request, call_next):
+        response = await call_next(request)
+
+        # Only cache GETs that succeeded.
+        if request.method != "GET" or response.status_code != 200:
+            return response
+
+        cache_header = _cache_control_for_path(request.url.path)
+        if cache_header is None:
+            return response
+
+        # Drain body so we can hash it for ETag.
+        body_chunks = []
+        async for chunk in response.body_iterator:
+            body_chunks.append(chunk)
+        body = b"".join(body_chunks)
+
+        etag = '"' + hashlib.md5(body).hexdigest() + '"'
+        headers = dict(response.headers)
+        headers["Cache-Control"] = cache_header
+        headers["ETag"] = etag
+        headers["Vary"] = ", ".join(filter(None, [headers.get("Vary"), "Accept-Encoding"]))
+
+        inm = request.headers.get("if-none-match")
+        if inm and inm == etag:
+            # Strip content headers on 304.
+            for h in ("Content-Length", "content-length", "Content-Type", "content-type"):
+                headers.pop(h, None)
+            return Response(status_code=304, headers=headers)
+
+        return Response(content=body, status_code=200, headers=headers, media_type=response.media_type)
+
+
 class RequestSizeLimitMiddleware(BaseHTTPMiddleware):
     """Limit request body size to prevent DoS attacks."""
 
@@ -223,6 +289,8 @@ async def lifespan(app: FastAPI):
         print("Warning: No data in marts. Run the annual EES pipeline to populate KS2 data.")
     else:
         print(f"Data loaded successfully: {len(df)} records.")
+        # Pre-compute the latest-year snapshot so the first search request is fast
+        await asyncio.to_thread(load_latest_school_data)
     try:
         _sitemap_xml = build_sitemap()
         n = _sitemap_xml.count("<url>")
@@ -250,9 +318,12 @@ app = FastAPI(
 app.state.limiter = limiter
 app.add_exception_handler(RateLimitExceeded, _rate_limit_exceeded_handler)
 
-# Security middleware (order matters - these run in reverse order)
+# Middleware (Starlette runs the last-added middleware first on the way out,
+# so list outermost-last: GZip wraps everything and compresses the final body).
+app.add_middleware(CacheAndETagMiddleware)
 app.add_middleware(SecurityHeadersMiddleware)
 app.add_middleware(RequestSizeLimitMiddleware)
+app.add_middleware(GZipMiddleware, minimum_size=512)
 
 # CORS middleware - restricted for production
 app.add_middleware(
@@ -321,44 +392,17 @@ async def get_schools(
     phase = sanitize_search_input(phase)
     postcode = validate_postcode(postcode)
 
-    df = load_school_data()
+    # Load the pre-computed latest-year snapshot (cached after first request / startup).
+    # This avoids rebuilding the expensive groupby + prev-year merge on every search.
+    df_latest = load_latest_school_data()
 
-    if df.empty:
+    if df_latest.empty:
         return {"schools": [], "total": 0, "page": page, "page_size": 0}
 
     # Use configured default if not specified
     if page_size is None:
         page_size = settings.default_page_size
 
-    # Schools with no performance data (special schools, PRUs, newly opened, etc.)
-    # have NULL year from the LEFT JOIN — keep them but skip the groupby/trend logic.
-    df_no_perf = df[df["year"].isna()].drop_duplicates(subset=["urn"])
-    df = df[df["year"].notna()]
-
-    # Get unique schools (latest year data for each)
-    latest_year = df.groupby("urn")["year"].max().reset_index()
-    df_latest = df.merge(latest_year, on=["urn", "year"])
-
-    # Calculate trend by comparing to previous year
-    # Get second-latest year for each school
-    df_sorted = df.sort_values(["urn", "year"], ascending=[True, False])
-    df_prev = df_sorted.groupby("urn").nth(1).reset_index()
-    if not df_prev.empty and "rwm_expected_pct" in df_prev.columns:
-        prev_rwm = df_prev[["urn", "rwm_expected_pct"]].rename(
-            columns={"rwm_expected_pct": "prev_rwm_expected_pct"}
-        )
-        if "attainment_8_score" in df_prev.columns:
-            prev_rwm = prev_rwm.merge(
-                df_prev[["urn", "attainment_8_score"]].rename(
-                    columns={"attainment_8_score": "prev_attainment_8_score"}
-                ),
-                on="urn", how="outer"
-            )
-        df_latest = df_latest.merge(prev_rwm, on="urn", how="left")
-
-    # Merge back schools with no performance data
-    df_latest = pd.concat([df_latest, df_no_perf], ignore_index=True)
-
     # Phase filter — uses PHASE_GROUPS so all-through/middle schools appear
     # in the correct phase(s) rather than being invisible to both filters.
     if phase:
@@ -404,7 +448,8 @@ async def get_schools(
     # Location-based search (uses pre-geocoded data from database)
     search_coords = None
     if postcode:
-        coords = geocode_single_postcode(postcode)
+        # Offload the synchronous HTTP call to a thread so the event loop stays free
+        coords = await asyncio.to_thread(geocode_single_postcode, postcode)
         if coords:
             search_coords = coords
             schools_df = schools_df.copy()
@@ -527,7 +572,7 @@ async def get_school_details(request: Request, urn: int):
     # Get latest info for the school
     latest = school_data.iloc[-1]
 
-    # Fetch supplementary data (Ofsted, Parent View, admissions, etc.)
+    # Fetch supplementary data (Ofsted, admissions, etc.)
     from .database import SessionLocal
     supplementary = {}
     try:
@@ -560,9 +605,9 @@ async def get_school_details(request: Request, urn: int):
         "yearly_data": clean_for_json(school_data),
         # Supplementary data (null if not yet populated by Kestra)
         "ofsted": supplementary.get("ofsted"),
-        "parent_view": supplementary.get("parent_view"),
         "census": supplementary.get("census"),
         "admissions": supplementary.get("admissions"),
+        "admissions_history": supplementary.get("admissions_history") or [],
         "sen_detail": supplementary.get("sen_detail"),
         "phonics": supplementary.get("phonics"),
         "deprivation": supplementary.get("deprivation"),
@@ -788,7 +833,10 @@ async def get_rankings(
     request: Request,
     metric: str = Query("rwm_expected_pct", description="Metric to rank by", max_length=50),
     year: Optional[int] = Query(
-        None, description="Specific year (defaults to most recent)", ge=2000, le=2100
+        None,
+        description="Academic year code, e.g. 201819 (defaults to most recent)",
+        ge=2000,
+        le=210100,
     ),
     limit: int = Query(20, ge=1, le=100, description="Number of schools to return"),
     local_authority: Optional[str] = Query(
@@ -841,7 +889,12 @@ async def get_rankings(
 
     # Return only relevant fields for rankings
     available_cols = [c for c in RANKING_COLUMNS if c in df.columns]
-    df = df[available_cols]
+    df = df[available_cols].copy()
+
+    # Surface the requested metric under a stable `value` key so the
+    # frontend doesn't need to know each metric's column name. The raw
+    # metric column is also kept in the row for callers that want it.
+    df["value"] = df[metric]
 
     return {
         "metric": metric,
@@ -907,7 +960,8 @@ async def reload_data(
     Requires X-API-Key header with valid admin API key.
     """
     clear_cache()
-    load_school_data()
+    await asyncio.to_thread(load_school_data)
+    await asyncio.to_thread(load_latest_school_data)
     return {"status": "reloaded"}
 
 

backend/data_loader.py

@@ -14,8 +14,8 @@ from .config import settings
 from .database import SessionLocal, engine
 from .models import (
     DimSchool, DimLocation, KS2Performance,
-    FactOfstedInspection, FactParentView, FactAdmissions,
+    FactOfstedInspection, FactAdmissions,
-    FactDeprivation, FactFinance,
+    FactDeprivation, FactFinance, FactPupilCharacteristics,
 )
 from .schemas import SCHOOL_TYPE_MAP
 
@@ -204,7 +204,8 @@ _MAIN_QUERY = text("""
     LEFT JOIN (
         SELECT DISTINCT ON (urn)
             urn,
-            overall_effectiveness AS ofsted_grade,
+            -- Fall back to the ungraded-inspection grade when no graded grade exists.
+            COALESCE(overall_effectiveness, ungraded_grade) AS ofsted_grade,
             inspection_date       AS ofsted_date,
             framework             AS ofsted_framework
         FROM marts.fact_ofsted_inspection
@@ -242,6 +243,8 @@ def load_school_data_as_dataframe() -> pd.DataFrame:
 
 # Cache for DataFrame
 _df_cache: Optional[pd.DataFrame] = None
+# Pre-computed latest-year snapshot (one row per school, with prev-year trend columns)
+_df_latest_cache: Optional[pd.DataFrame] = None
 
 
 def load_school_data() -> pd.DataFrame:
@@ -260,10 +263,60 @@ def load_school_data() -> pd.DataFrame:
     return _df_cache
 
 
+def load_latest_school_data() -> pd.DataFrame:
+    """Return a cached one-row-per-school DataFrame at the latest available year.
+
+    The expensive groupby / merge / prev-year trend computation runs once at
+    startup (or after a cache clear) rather than on every search request.
+    Per-request filters (phase, gender, LA …) should be applied to the returned
+    DataFrame's copy; they must NOT modify the cached object.
+    """
+    global _df_latest_cache
+    if _df_latest_cache is not None:
+        return _df_latest_cache
+
+    df = load_school_data()
+    if df.empty:
+        return df
+
+    # Schools that have no performance rows (PRUs, new schools, etc.)
+    df_no_perf = df[df["year"].isna()].drop_duplicates(subset=["urn"])
+    df_with_perf = df[df["year"].notna()]
+
+    # Reduce to the latest year per school
+    latest_year = df_with_perf.groupby("urn")["year"].max().reset_index()
+    df_latest = df_with_perf.merge(latest_year, on=["urn", "year"])
+
+    # Attach previous-year metrics for trend arrows (second-latest year per school)
+    df_sorted = df_with_perf.sort_values(["urn", "year"], ascending=[True, False])
+    df_prev = df_sorted.groupby("urn").nth(1).reset_index()
+    if not df_prev.empty and "rwm_expected_pct" in df_prev.columns:
+        prev_rwm = df_prev[["urn", "rwm_expected_pct"]].rename(
+            columns={"rwm_expected_pct": "prev_rwm_expected_pct"}
+        )
+        if "attainment_8_score" in df_prev.columns:
+            prev_rwm = prev_rwm.merge(
+                df_prev[["urn", "attainment_8_score"]].rename(
+                    columns={"attainment_8_score": "prev_attainment_8_score"}
+                ),
+                on="urn",
+                how="outer",
+            )
+        df_latest = df_latest.merge(prev_rwm, on="urn", how="left")
+
+    # Merge back schools with no performance data
+    df_latest = pd.concat([df_latest, df_no_perf], ignore_index=True)
+
+    print(f"Latest-snapshot cache built: {len(df_latest)} schools")
+    _df_latest_cache = df_latest
+    return _df_latest_cache
+
+
 def clear_cache():
     """Clear all caches."""
-    global _df_cache
+    global _df_cache, _df_latest_cache
     _df_cache = None
+    _df_latest_cache = None
 
 
 # =============================================================================
@@ -363,7 +416,14 @@ def get_supplementary_data(db: Session, urn: int) -> dict:
             "framework": o.framework,
             "inspection_date": o.inspection_date.isoformat() if o.inspection_date else None,
             "inspection_type": o.inspection_type,
-            "overall_effectiveness": o.overall_effectiveness,
+            # Fall back to the grade parsed from an ungraded (Section 8) outcome
+            # (e.g. "School remains Good") when there's no graded grade, so the
+            # detail page matches the list badge.
+            "overall_effectiveness": (
+                o.overall_effectiveness
+                if o.overall_effectiveness is not None
+                else o.ungraded_grade
+            ),
             "quality_of_education": o.quality_of_education,
             "behaviour_attitudes": o.behaviour_attitudes,
             "personal_development": o.personal_development,
@@ -386,40 +446,27 @@ def get_supplementary_data(db: Session, urn: int) -> dict:
         else None
     )
 
-    # Parent View
+    # Census (latest year of fact_pupil_characteristics)
-    pv = safe_query(FactParentView, "urn")
+    pc = safe_query(FactPupilCharacteristics, "urn", "year")
-    result["parent_view"] = (
+    result["census"] = (
         {
-            "survey_date": pv.survey_date.isoformat() if pv.survey_date else None,
+            "year": pc.year,
-            "total_responses": pv.total_responses,
+            "total_pupils": pc.total_pupils,
-            "q_happy_pct": pv.q_happy_pct,
+            "female_pupils": pc.female_pupils,
-            "q_safe_pct": pv.q_safe_pct,
+            "male_pupils": pc.male_pupils,
-            "q_behaviour_pct": pv.q_behaviour_pct,
+            "fsm_pct": pc.fsm_pct,
-            "q_bullying_pct": pv.q_bullying_pct,
+            "eal_pct": pc.eal_pct,
-            "q_communication_pct": pv.q_communication_pct,
-            "q_progress_pct": pv.q_progress_pct,
-            "q_teaching_pct": pv.q_teaching_pct,
-            "q_information_pct": pv.q_information_pct,
-            "q_curriculum_pct": pv.q_curriculum_pct,
-            "q_future_pct": pv.q_future_pct,
-            "q_leadership_pct": pv.q_leadership_pct,
-            "q_wellbeing_pct": pv.q_wellbeing_pct,
-            "q_recommend_pct": pv.q_recommend_pct,
         }
-        if pv
+        if pc
         else None
     )
 
-    # Census (fact_pupil_characteristics — minimal until census columns are verified)
+    # Admissions — all years, oldest first (for the multi-year trend view).
-    result["census"] = None
+    def _admissions_row(a):
-
+        return {
-    # Admissions (latest year)
-    a = safe_query(FactAdmissions, "urn", "year")
-    result["admissions"] = (
-        {
             "year": a.year,
             "school_phase": a.school_phase,
-            "published_admission_number": a.published_admission_number,
+            "places_offered": a.places_offered,
             "total_applications": a.total_applications,
             "first_preference_applications": a.first_preference_applications,
             "first_preference_offers": a.first_preference_offers,
@@ -427,9 +474,25 @@ def get_supplementary_data(db: Session, urn: int) -> dict:
             "oversubscription_ratio": a.oversubscription_ratio,
             "oversubscribed": a.oversubscribed,
         }
-        if a
+
-        else None
+    try:
-    )
+        admissions_rows = (
+            db.query(FactAdmissions)
+            .filter(FactAdmissions.urn == urn)
+            .order_by(FactAdmissions.year.asc())
+            .all()
+        )
+    except Exception as e:
+        import logging
+        logging.getLogger(__name__).error("admissions history query failed: %s", e)
+        db.rollback()
+        admissions_rows = []
+
+    history = [_admissions_row(a) for a in admissions_rows]
+    result["admissions_history"] = history
+    # Keep the single latest-year object for backwards-compatible consumers
+    # (hero chips, etc.).
+    result["admissions"] = history[-1] if history else None
 
     # SEN detail — not available in current marts
     result["sen_detail"] = None

backend/database.py

@@ -15,6 +15,7 @@ engine = create_engine(
     pool_size=10,
     max_overflow=20,
     pool_pre_ping=True,
+    pool_recycle=1800,  # recycle connections every 30 min to avoid stale TCP
     echo=False,
 )
 
@@ -34,13 +35,9 @@ def get_db():
 
 @contextmanager
 def get_db_session():
-    """Context manager for non-FastAPI contexts."""
+    """Context manager for non-FastAPI contexts (read-only)."""
     db = SessionLocal()
     try:
         yield db
-        db.commit()
-    except Exception:
-        db.rollback()
-        raise
     finally:
         db.close()

backend/migration.py

@@ -433,6 +433,25 @@ def _apply_schema_alterations():
         conn.commit()
 
 
+def _apply_schema_drops():
+    """
+    Drop tables retired from the schema. Idempotent (DROP … IF EXISTS), so it's
+    safe to run on every migration. Add entries here when a model is removed.
+    """
+    drops = [
+        # v6: Ofsted Parent View feature removed
+        "DROP TABLE IF EXISTS marts.fact_parent_view CASCADE",
+    ]
+    from sqlalchemy import text as sa_text
+    with engine.connect() as conn:
+        for stmt in drops:
+            try:
+                conn.execute(sa_text(stmt))
+            except Exception as e:
+                print(f"  Warning: drop skipped ({e})")
+        conn.commit()
+
+
 def run_full_migration(geocode: bool = False) -> bool:
     """
     Run a complete migration: drop all tables and reimport from CSV.
@@ -479,6 +498,9 @@ def run_full_migration(geocode: bool = False) -> bool:
     print("Applying column additions to supplementary tables...")
     _apply_schema_alterations()
 
+    print("Dropping retired tables...")
+    _apply_schema_drops()
+
     print("\nLoading CSV data...")
     df = load_csv_data(settings.data_dir)
 

backend/models.py

@@ -133,6 +133,10 @@ class FactOfstedInspection(Base):
     leadership_management = Column(Integer)
     early_years_provision = Column(Integer)
     sixth_form_provision = Column(Integer)
+    # Ungraded (Section 8) inspection: raw outcome text and the grade parsed from
+    # it (fallback for schools with no graded overall effectiveness).
+    ungraded_outcome = Column(String(100))
+    ungraded_grade = Column(Integer)
     rc_safeguarding_met = Column(Boolean)
     rc_inclusion = Column(Integer)
     rc_curriculum_teaching = Column(Integer)
@@ -145,29 +149,6 @@ class FactOfstedInspection(Base):
     report_url = Column(Text)
 
 
-class FactParentView(Base):
-    """Ofsted Parent View survey — latest per school."""
-    __tablename__ = "fact_parent_view"
-    __table_args__ = MARTS
-
-    urn = Column(Integer, primary_key=True)
-    survey_date = Column(Date)
-    total_responses = Column(Integer)
-    q_happy_pct = Column(Float)
-    q_safe_pct = Column(Float)
-    q_behaviour_pct = Column(Float)
-    q_bullying_pct = Column(Float)
-    q_communication_pct = Column(Float)
-    q_progress_pct = Column(Float)
-    q_teaching_pct = Column(Float)
-    q_information_pct = Column(Float)
-    q_curriculum_pct = Column(Float)
-    q_future_pct = Column(Float)
-    q_leadership_pct = Column(Float)
-    q_wellbeing_pct = Column(Float)
-    q_recommend_pct = Column(Float)
-
-
 class FactAdmissions(Base):
     """School admissions — one row per URN per year."""
     __tablename__ = "fact_admissions"
@@ -179,7 +160,7 @@ class FactAdmissions(Base):
     urn = Column(Integer, primary_key=True)
     year = Column(Integer, primary_key=True)
     school_phase = Column(String(50))
-    published_admission_number = Column(Integer)
+    places_offered = Column(Integer)
     total_applications = Column(Integer)
     first_preference_applications = Column(Integer)
     first_preference_offers = Column(Integer)
@@ -189,6 +170,24 @@ class FactAdmissions(Base):
     admissions_policy = Column(String(100))
 
 
+class FactPupilCharacteristics(Base):
+    """School pupil composition from EES census — one row per URN per year."""
+    __tablename__ = "fact_pupil_characteristics"
+    __table_args__ = (
+        Index("ix_pupil_chars_urn_year", "urn", "year"),
+        MARTS,
+    )
+
+    urn = Column(Integer, primary_key=True)
+    year = Column(Integer, primary_key=True)
+    phase_type_grouping = Column(String(50))
+    total_pupils = Column(Integer)
+    female_pupils = Column(Integer)
+    male_pupils = Column(Integer)
+    fsm_pct = Column(Float)
+    eal_pct = Column(Float)
+
+
 class FactDeprivation(Base):
     """IDACI deprivation index — one row per URN."""
     __tablename__ = "fact_deprivation"

backend/version.py

@@ -13,7 +13,7 @@ WHEN TO BUMP:
 """
 
 # Current schema version - increment when models change
-SCHEMA_VERSION = 5
+SCHEMA_VERSION = 6
 
 # Changelog for documentation
 SCHEMA_CHANGELOG = {
@@ -22,4 +22,5 @@ SCHEMA_CHANGELOG = {
     3: "Added supplementary data tables: ofsted, parent_view, census, admissions, sen_detail, phonics, deprivation, finance; GIAS columns on schools",
     4: "Added Ofsted Report Card columns to ofsted_inspections (new framework from Nov 2025)",
     5: "Apply ALTER TABLE additions for RC columns missed by create_all on existing tables",
+    6: "Removed the Ofsted Parent View feature: dropped fact_parent_view table and model",
 }

claude.md

@@ -105,10 +105,26 @@ This starts:
 - `GET /api/metrics` - Metric definitions (single source of truth)
 - `GET /api/data-info` - Database stats
 
+## SDLC
+
+Full details in `docs/DEPLOY.md`. The short version:
+
+- **Never push to `main` directly.** Work on a feature branch and open a PR;
+  branch protection requires the PR checks (typecheck, tests, builds, AI review)
+  to pass before merge.
+- Merging to `main` deploys automatically: images are built once, deployed to
+  the **staging** Portainer stack, verified by the Playwright journeys in
+  `e2e/`, and only then retagged `:prod` and rolled out to production.
+- If you change user-facing behaviour, update or extend the `e2e/` journey
+  tests in the same PR — they are the promotion gate.
+
 ## Recent Changes
 
+- Added staging environment + automated staging→prod pipeline (Gitea Actions)
 - Migrated from CSV file storage to PostgreSQL database
 - Added location-based search using postcode geocoding
 - Added local authority filter to rankings
 - Improved frontend with featured schools, loading states, API caching
 
+# Important
+- Do not attempt to start a local server to test the application, it does not work

docker-compose.portainer.staging.yml

@@ -0,0 +1,214 @@
+# Portainer Stack Definition for School Compare — STAGING
+#
+# Deploy this as a *separate* Portainer stack (e.g. "schoolcompare-staging")
+# alongside the production stack. Differences from production:
+#   - images pinned to :staging (pushed by every merge to main, before the E2E gate)
+#   - sc_staging_* container names
+#   - own macvlan IPs (STAGING_DB_IP / STAGING_FRONTEND_IP env vars)
+#   - Airflow UI published on 8081 (prod uses 8080)
+#   - volumes are isolated automatically: Portainer prefixes volume names with
+#     the stack name, so this stack gets its own postgres/typesense/airflow data
+#
+# Portainer environment variables (set in Portainer UI -> Stack -> Environment):
+#   DB_USERNAME            — PostgreSQL username
+#   DB_PASSWORD            — PostgreSQL password
+#   DB_DATABASE_NAME       — PostgreSQL database name
+#   ADMIN_API_KEY          — Backend admin API key
+#   TYPESENSE_API_KEY      — Typesense admin API key
+#   TYPESENSE_SEARCH_KEY   — Typesense search-only key (exposed to frontend)
+#   AIRFLOW_ADMIN_USER     — Airflow admin username (password auto-generated, see api-server logs)
+#   STAGING_DB_IP          — macvlan IP for staging Postgres (default 10.0.1.190)
+#   STAGING_FRONTEND_IP    — macvlan IP for staging frontend (default 10.0.1.151)
+
+services:
+
+  # ── PostgreSQL ────────────────────────────────────────────────────────
+  sc_database:
+    container_name: sc_staging_postgres
+    image: postgis/postgis:18-3.6-alpine
+    environment:
+      POSTGRES_PASSWORD: ${DB_PASSWORD}
+      POSTGRES_USER: ${DB_USERNAME}
+      POSTGRES_DB: ${DB_DATABASE_NAME}
+    volumes:
+      - postgres_data:/var/lib/postgresql
+    shm_size: 128mb
+    networks:
+      backend: {}
+      macvlan:
+        ipv4_address: ${STAGING_DB_IP:-10.0.1.190}
+    healthcheck:
+      test: ["CMD-SHELL", "pg_isready -U postgres"]
+      interval: 10s
+      timeout: 5s
+      retries: 5
+      start_period: 10s
+    restart: unless-stopped
+
+  # ── FastAPI Backend ───────────────────────────────────────────────────
+  backend:
+    image: privaterepo.sitaru.org/tudor/school_compare-backend:staging
+    container_name: sc_staging_backend
+    environment:
+      DATABASE_URL: postgresql://${DB_USERNAME}:${DB_PASSWORD}@sc_database:5432/${DB_DATABASE_NAME}
+      PYTHONUNBUFFERED: 1
+      ADMIN_API_KEY: ${ADMIN_API_KEY:-changeme}
+      TYPESENSE_URL: http://typesense:8108
+      TYPESENSE_API_KEY: ${TYPESENSE_API_KEY:-changeme}
+    depends_on:
+      sc_database:
+        condition: service_healthy
+    networks:
+      - backend
+    restart: unless-stopped
+    healthcheck:
+      test: ["CMD", "curl", "-f", "http://localhost:80/api/data-info"]
+      interval: 30s
+      timeout: 10s
+      retries: 3
+      start_period: 30s
+
+  # ── Next.js Frontend ──────────────────────────────────────────────────
+  frontend:
+    image: privaterepo.sitaru.org/tudor/school_compare-frontend:staging
+    container_name: sc_staging_nextjs
+    environment:
+      - NODE_ENV=production
+      - NEXT_PUBLIC_API_URL=http://localhost:8000/api
+      - FASTAPI_URL=http://backend:80/api
+      - TYPESENSE_URL=http://typesense:8108
+      - TYPESENSE_API_KEY=${TYPESENSE_SEARCH_KEY:-changeme}
+    depends_on:
+      backend:
+        condition: service_healthy
+    networks:
+      backend: {}
+      macvlan:
+        ipv4_address: ${STAGING_FRONTEND_IP:-10.0.1.151}
+    restart: unless-stopped
+    healthcheck:
+      test: ["CMD", "node", "-e", "require('http').get('http://localhost:3000/', (r) => {process.exit(r.statusCode === 200 ? 0 : 1)})"]
+      interval: 30s
+      timeout: 10s
+      retries: 3
+      start_period: 40s
+
+  # ── Typesense Search Engine ───────────────────────────────────────────
+  typesense:
+    image: typesense/typesense:30.1
+    container_name: sc_staging_typesense
+    environment:
+      TYPESENSE_API_KEY: ${TYPESENSE_API_KEY:-changeme}
+      TYPESENSE_DATA_DIR: /data
+    volumes:
+      - typesense_data:/data
+    networks:
+      - backend
+    restart: unless-stopped
+    healthcheck:
+      test: ["CMD-SHELL", "cat < /dev/tcp/localhost/8108"]
+      interval: 15s
+      timeout: 5s
+      retries: 5
+      start_period: 10s
+
+  # ── Airflow API Server + UI (staging: http://<host>:8081) ─────────────
+  airflow-api-server:
+    image: privaterepo.sitaru.org/tudor/school_compare-pipeline:staging
+    container_name: sc_staging_airflow_api
+    command: airflow api-server --port 8080
+    ports:
+      - "8081:8080"
+    environment:
+      AIRFLOW__CORE__EXECUTOR: LocalExecutor
+      AIRFLOW__DATABASE__SQL_ALCHEMY_CONN: postgresql+psycopg2://${DB_USERNAME}:${DB_PASSWORD}@sc_database:5432/${DB_DATABASE_NAME}
+      AIRFLOW__CORE__DAGS_FOLDER: /opt/pipeline/dags
+      AIRFLOW__CORE__LOAD_EXAMPLES: "false"
+      AIRFLOW__CORE__EXECUTION_API_SERVER_URL: http://airflow-api-server:8080/execution/
+      AIRFLOW__API_AUTH__JWT_SECRET: "school-compare-staging-airflow-jwt-secret-key-long-enough-for-sha512"
+      AIRFLOW__API_AUTH__JWT_ISSUER: airflow
+      AIRFLOW__CORE__SIMPLE_AUTH_MANAGER_USERS: "${AIRFLOW_ADMIN_USER:-admin}:admin"
+      AIRFLOW__LOGGING__BASE_LOG_FOLDER: /opt/airflow/logs
+      PG_HOST: sc_database
+      PG_PORT: "5432"
+      PG_USER: ${DB_USERNAME}
+      PG_PASSWORD: ${DB_PASSWORD}
+      PG_DATABASE: ${DB_DATABASE_NAME}
+      TYPESENSE_URL: http://typesense:8108
+      TYPESENSE_API_KEY: ${TYPESENSE_API_KEY:-changeme}
+    volumes:
+      - airflow_logs:/opt/airflow/logs
+    depends_on:
+      sc_database:
+        condition: service_healthy
+    networks:
+      - backend
+    restart: unless-stopped
+    healthcheck:
+      test: ["CMD", "curl", "-f", "http://localhost:8080/api/v2/monitor/health"]
+      interval: 30s
+      timeout: 10s
+      retries: 5
+      start_period: 60s
+
+  # ── Airflow Scheduler ──────────────────────────────────────────────
+  airflow-scheduler:
+    image: privaterepo.sitaru.org/tudor/school_compare-pipeline:staging
+    container_name: sc_staging_airflow_scheduler
+    command: airflow scheduler
+    environment:
+      AIRFLOW__CORE__EXECUTOR: LocalExecutor
+      AIRFLOW__DATABASE__SQL_ALCHEMY_CONN: postgresql+psycopg2://${DB_USERNAME}:${DB_PASSWORD}@sc_database:5432/${DB_DATABASE_NAME}
+      AIRFLOW__CORE__DAGS_FOLDER: /opt/pipeline/dags
+      AIRFLOW__CORE__LOAD_EXAMPLES: "false"
+      AIRFLOW__CORE__EXECUTION_API_SERVER_URL: http://airflow-api-server:8080/execution/
+      AIRFLOW__API_AUTH__JWT_SECRET: "school-compare-staging-airflow-jwt-secret-key-long-enough-for-sha512"
+      AIRFLOW__API_AUTH__JWT_ISSUER: airflow
+      AIRFLOW__LOGGING__BASE_LOG_FOLDER: /opt/airflow/logs
+      PG_HOST: sc_database
+      PG_PORT: "5432"
+      PG_USER: ${DB_USERNAME}
+      PG_PASSWORD: ${DB_PASSWORD}
+      PG_DATABASE: ${DB_DATABASE_NAME}
+      TYPESENSE_URL: http://typesense:8108
+      TYPESENSE_API_KEY: ${TYPESENSE_API_KEY:-changeme}
+    volumes:
+      - airflow_logs:/opt/airflow/logs
+    depends_on:
+      sc_database:
+        condition: service_healthy
+    networks:
+      - backend
+    restart: unless-stopped
+
+  # ── Airflow DB Init (one-shot) ───────────────────────────────────────
+  airflow-init:
+    image: privaterepo.sitaru.org/tudor/school_compare-pipeline:staging
+    container_name: sc_staging_airflow_init
+    command: bash -c "airflow db migrate && airflow dags reserialize"
+    environment:
+      AIRFLOW__CORE__EXECUTOR: LocalExecutor
+      AIRFLOW__DATABASE__SQL_ALCHEMY_CONN: postgresql+psycopg2://${DB_USERNAME}:${DB_PASSWORD}@sc_database:5432/${DB_DATABASE_NAME}
+      AIRFLOW__CORE__DAGS_FOLDER: /opt/pipeline/dags
+      AIRFLOW__CORE__LOAD_EXAMPLES: "false"
+      AIRFLOW__CORE__EXECUTION_API_SERVER_URL: http://airflow-api-server:8080/execution/
+      AIRFLOW__API_AUTH__JWT_SECRET: "school-compare-staging-airflow-jwt-secret-key-long-enough-for-sha512"
+      AIRFLOW__API_AUTH__JWT_ISSUER: airflow
+    depends_on:
+      sc_database:
+        condition: service_healthy
+    networks:
+      - backend
+    restart: "no"
+
+networks:
+  backend:
+    driver: bridge
+  macvlan:
+    external:
+      name: macvlan
+
+volumes:
+  postgres_data:
+  typesense_data:
+  airflow_logs:

docker-compose.portainer.yml

@@ -36,7 +36,7 @@ services:
 
   # ── FastAPI Backend ───────────────────────────────────────────────────
   backend:
-    image: privaterepo.sitaru.org/tudor/school_compare-backend:latest
+    image: privaterepo.sitaru.org/tudor/school_compare-backend:prod
     container_name: schoolcompare_backend
     environment:
       DATABASE_URL: postgresql://${DB_USERNAME}:${DB_PASSWORD}@sc_database:5432/${DB_DATABASE_NAME}
@@ -59,7 +59,7 @@ services:
 
   # ── Next.js Frontend ──────────────────────────────────────────────────
   frontend:
-    image: privaterepo.sitaru.org/tudor/school_compare-frontend:latest
+    image: privaterepo.sitaru.org/tudor/school_compare-frontend:prod
     container_name: schoolcompare_nextjs
     environment:
       - NODE_ENV=production
@@ -103,7 +103,7 @@ services:
 
   # ── Airflow API Server + UI ───────────────────────────────────────────
   airflow-api-server:
-    image: privaterepo.sitaru.org/tudor/school_compare-pipeline:latest
+    image: privaterepo.sitaru.org/tudor/school_compare-pipeline:prod
     container_name: schoolcompare_airflow_api
     command: airflow api-server --port 8080
     ports:
@@ -142,7 +142,7 @@ services:
 
   # ── Airflow Scheduler ──────────────────────────────────────────────
   airflow-scheduler:
-    image: privaterepo.sitaru.org/tudor/school_compare-pipeline:latest
+    image: privaterepo.sitaru.org/tudor/school_compare-pipeline:prod
     container_name: schoolcompare_airflow_scheduler
     command: airflow scheduler
     environment:
@@ -172,7 +172,7 @@ services:
 
   # ── Airflow DB Init (one-shot) ───────────────────────────────────────
   airflow-init:
-    image: privaterepo.sitaru.org/tudor/school_compare-pipeline:latest
+    image: privaterepo.sitaru.org/tudor/school_compare-pipeline:prod
     container_name: schoolcompare_airflow_init
     command: bash -c "airflow db migrate && airflow dags delete school_data_daily -y 2>/dev/null; airflow dags delete school_data_monthly_ofsted -y 2>/dev/null; airflow dags delete school_data_annual_ees -y 2>/dev/null; airflow dags reserialize"
     environment:

docs/DEPLOY.md

@@ -0,0 +1,131 @@
+# SDLC & Deployment Pipeline
+
+SchoolCompare uses a fully automated staging → production pipeline on Gitea
+Actions. AI writes the code on feature branches; the pipeline verifies every
+change on a staging environment before promoting the exact same images to
+production. Human input is directional only: feature requests, PR review if
+desired, and intervention when a gate fails.
+
+## The flow
+
+```
+feature branch (AI-authored)
+   │  PR to main
+   ▼
+PR checks (.gitea/workflows/pr-checks.yml)
+   typecheck + unit tests + backend smoke + image builds (no push)
+   + Claude code review posted as a PR comment (severe findings fail the check)
+   │  merge (branch protection requires green checks)
+   ▼
+Deploy pipeline (.gitea/workflows/deploy.yml)
+   1. build & push images        → tags sha-<sha>, staging
+   2. staging Portainer webhook  → wait for staging health
+   3. Playwright E2E journeys against staging
+   4. retag sha-<sha> → :prod    (same bytes — build once, promote the image)
+      previous :prod saved as :prod-previous
+   5. prod Portainer webhook     → wait for prod health
+```
+
+Key principle: **build once, promote the exact image**. Production pins `:prod`,
+which only moves after the E2E gate passes on staging. Nothing tags `:latest`
+anymore.
+
+## Branch & PR workflow
+
+- `main` is protected: no direct pushes, PRs require green status checks.
+- All work (human or AI) happens on feature branches → PR to `main`.
+- Merging to `main` **is** the release action. If staging or the E2E gate
+  fails, production is untouched.
+
+## Environments
+
+| | Production | Staging |
+|---|---|---|
+| Portainer stack file | `docker-compose.portainer.yml` | `docker-compose.portainer.staging.yml` |
+| Image tag | `:prod` | `:staging` |
+| Container prefix | `sc_` / `schoolcompare_` | `sc_staging_` |
+| Frontend macvlan IP | 10.0.1.150 | `STAGING_FRONTEND_IP` (default 10.0.1.151) |
+| Postgres macvlan IP | 10.0.1.189 | `STAGING_DB_IP` (default 10.0.1.190) |
+| Airflow UI port | 8080 | 8081 |
+| Volumes | stack-prefixed | stack-prefixed (fully isolated) |
+
+Staging gets `:staging` images on every merge to main — even ones that later
+fail the E2E gate. That's the point: staging absorbs the risk.
+
+## Gitea repository secrets
+
+| Secret | Purpose |
+|---|---|
+| `REGISTRY_TOKEN` | push images to privaterepo.sitaru.org (already set) |
+| `CLAUDE_CODE_OAUTH_TOKEN` | Claude Code subscription auth for the PR review — generate with `claude setup-token` on your machine |
+| `PORTAINER_STAGING_WEBHOOK` | staging stack redeploy webhook URL |
+| `PORTAINER_PROD_WEBHOOK` | production stack redeploy webhook URL |
+| `STAGING_BASE_URL` | e.g. `http://10.0.1.151:3000` — health poll + E2E target |
+| `PROD_BASE_URL` | e.g. `http://10.0.1.150:3000` — post-promotion health poll |
+
+## One-time setup checklist
+
+1. **Create the staging stack** in Portainer from
+   `docker-compose.portainer.staging.yml` (stack name e.g.
+   `schoolcompare-staging`). Set the same environment variables as prod plus
+   `STAGING_DB_IP` / `STAGING_FRONTEND_IP` if the defaults clash.
+2. **Enable webhooks** on both stacks (Portainer → Stack → Webhook) and store
+   the URLs as `PORTAINER_STAGING_WEBHOOK` / `PORTAINER_PROD_WEBHOOK`. Remove
+   the old hardcoded webhook usage (now gone from the workflows).
+3. **Add the remaining secrets** listed above in Gitea → repo → Settings →
+   Actions → Secrets.
+4. **Protect `main`** in Gitea → Settings → Branches: require PRs, require the
+   pr-checks status checks (frontend, backend, builds, ai-review) to pass.
+5. **Bootstrap staging data via Airflow** (no prod dump — staging populates
+   itself from source, exercising the pipeline image end-to-end):
+   - Open the staging Airflow UI (`http://<host>:8081`) and trigger, in order:
+     `school_data_daily`, `school_data_monthly_ofsted`, then the manual-schedule
+     `school_data_annual_ees` and `school_data_annual_idaci`.
+   - First runs download from government sources (GIAS, Ofsted, EES, IDACI),
+     run dbt, and sync Typesense — expect the initial backfill to take a while.
+   - The scheduled DAGs then keep staging fresh exactly like prod.
+6. **Switch the prod stack to `:prod` tags** — the repo's
+   `docker-compose.portainer.yml` is already updated; redeploy the prod stack
+   from it. Until the first pipeline run promotes an image, tag the current
+   images manually: `docker buildx imagetools create -t <image>:prod <image>:latest`
+   for each of the three images.
+
+## Rollback
+
+Every promotion first re-points `:prod-previous` at the outgoing `:prod`.
+To roll back:
+
+```bash
+for img in backend frontend pipeline; do
+  docker buildx imagetools create \
+    -t privaterepo.sitaru.org/tudor/school_compare-$img:prod \
+    privaterepo.sitaru.org/tudor/school_compare-$img:prod-previous
+done
+curl -fsSk -X POST "$PORTAINER_PROD_WEBHOOK"
+```
+
+Or promote any older build directly: `imagetools create -t <image>:prod <image>:sha-<shortsha>`.
+
+## E2E suite
+
+Lives in `e2e/` (own package — CI installs it without the app's node_modules).
+Journeys: home + name search, postcode search, school detail, two-school
+comparison, rankings table. Run locally against any environment:
+
+```bash
+cd e2e && npm ci
+BASE_URL=http://10.0.1.151:3000 npx playwright test
+```
+
+Tests assert data invariants (results exist, charts render), not exact
+numbers, so scheduled data refreshes don't break the gate.
+
+## AI code review
+
+`scripts/ci/ai_review.py` pipes the PR diff through headless Claude Code
+(`claude -p`, authenticated with the subscription OAuth token — no API
+billing), posts the structured findings as a PR comment using the per-run
+token Gitea Actions provides automatically (`secrets.GITEA_TOKEN` — no setup
+needed), and fails the check only when a finding is rated
+**severe** (would break prod, leak data, or corrupt data). Minor findings are
+informational and never block a merge.

docs/superpowers/plans/2026-07-02-ux-audit.md

@@ -0,0 +1,381 @@
+# SchoolCompare UX/UI Audit Execution Plan
+
+> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking.
+
+**Goal:** Execute the journey-led UX/UI audit of live schoolcompare.co.uk defined in `docs/superpowers/specs/2026-07-02-ux-audit-design.md`, producing a prioritized (P0–P3) audit report at `docs/superpowers/specs/2026-07-02-ux-audit-report.md`.
+
+**Architecture:** Five journey walk-throughs (traffic-ordered) at two viewports using Playwright browser tools against the live site, each producing a committed notes file with friction points, "works well" observations, and axe-core scan results. A cross-cutting cohesion pass compares components across pages. A final synthesis task converts notes into the prioritized report.
+
+**Tech Stack:** Playwright MCP browser tools (`mcp__plugin_playwright_playwright__*`), axe-core 4.x injected from CDN, markdown notes committed to git.
+
+## Global Constraints
+
+- Audit the **live site** `https://schoolcompare.co.uk` — do not start any local server (CLAUDE.md).
+- Viewports: **mobile 390×844 (primary)** and **desktop 1440×900**. Mobile findings weigh more (56% of traffic).
+- A finding is valid only if it cites: a Nielsen/NN-g heuristic violation, a WCAG 2.2 AA failure, a mobile-usability standard, or an observed task-flow obstruction. No taste-only findings.
+- Every finding: **evidence → argument (why it hurts parents) → recommendation → uplift indication** (which analytics number moves, direction, small/moderate/large band with reasoning — never invented percentages).
+- Read-only with respect to the site: browse and inspect only; never submit forms that create/modify data (search and filter interactions are fine).
+- Notes live in `docs/superpowers/specs/2026-07-02-ux-audit-notes/`; screenshots go to the session scratchpad (referenced by filename in notes, not committed).
+- Analytics baseline for weighting (30 days): entries `/` 63%, `/compare` 20%, `/rankings` 6%; exits `/` 46%, `/compare` 32%, `/rankings` 13%; views `/` 52%, `/compare` 27%, `/rankings` 12%, `/admissions` 5%; school pages ~1% each (SEO long tail); 56% mobile.
+
+**Note on tool schemas:** Playwright tools are deferred. Before first use in any task, load them:
+`ToolSearch` with query `select:mcp__plugin_playwright_playwright__browser_navigate,mcp__plugin_playwright_playwright__browser_resize,mcp__plugin_playwright_playwright__browser_snapshot,mcp__plugin_playwright_playwright__browser_take_screenshot,mcp__plugin_playwright_playwright__browser_evaluate,mcp__plugin_playwright_playwright__browser_click,mcp__plugin_playwright_playwright__browser_type,mcp__plugin_playwright_playwright__browser_press_key,mcp__plugin_playwright_playwright__browser_console_messages`
+
+---
+
+### Task 1: Audit scaffolding + axe-core harness verified on the homepage
+
+**Files:**
+- Create: `docs/superpowers/specs/2026-07-02-ux-audit-notes/axe-snippet.js`
+- Create: `docs/superpowers/specs/2026-07-02-ux-audit-notes/TEMPLATE.md`
+
+**Interfaces:**
+- Produces: `axe-snippet.js` — a self-contained async JS function body for `browser_evaluate` that loads axe-core from CDN (idempotent) and returns `{violationCount, violations: [{id, impact, description, nodes: count, sampleTargets}]}` filtered to WCAG 2.2 A/AA rules. All journey tasks run this verbatim on each page state.
+- Produces: `TEMPLATE.md` — the notes-file structure every journey task copies.
+
+- [ ] **Step 1: Write the axe harness snippet**
+
+Create `docs/superpowers/specs/2026-07-02-ux-audit-notes/axe-snippet.js`:
+
+```js
+// Body for playwright browser_evaluate: () => { ...this content... }
+// Loads axe-core 4.x from CDN (skips if already present), runs WCAG A/AA scan.
+return (async () => {
+  if (!window.axe) {
+    await new Promise((resolve, reject) => {
+      const s = document.createElement('script');
+      s.src = 'https://cdn.jsdelivr.net/npm/axe-core@4.10.2/axe.min.js';
+      s.onload = resolve;
+      s.onerror = () => reject(new Error('axe failed to load'));
+      document.head.appendChild(s);
+    });
+  }
+  const results = await window.axe.run(document, {
+    runOnly: { type: 'tag', values: ['wcag2a', 'wcag2aa', 'wcag21a', 'wcag21aa', 'wcag22aa'] }
+  });
+  return {
+    url: location.pathname,
+    violationCount: results.violations.length,
+    violations: results.violations.map(v => ({
+      id: v.id,
+      impact: v.impact,
+      description: v.help,
+      nodes: v.nodes.length,
+      sampleTargets: v.nodes.slice(0, 3).map(n => n.target.join(' '))
+    }))
+  };
+})();
+```
+
+- [ ] **Step 2: Write the notes template**
+
+Create `docs/superpowers/specs/2026-07-02-ux-audit-notes/TEMPLATE.md`:
+
+```markdown
+# Journey N: <name> — audit notes
+
+**Pages visited:** <paths>
+**Viewports:** 390×844, 1440×900
+
+## Task attempt log
+<What was attempted, step by step, and where time/attention went. Note seconds-to-goal where measurable.>
+
+## Friction points
+For each:
+- **F<N>. <short title>**
+  - Evidence: <screenshot filename(s), observed behaviour, axe rule id if applicable>
+  - Criterion violated: <heuristic / WCAG SC / mobile standard / task obstruction>
+  - Argument: <why this hurts a parent completing the task>
+  - Severity guess: <P0/P1/P2/P3 — provisional, finalized in synthesis>
+
+## Works well — keep
+- <observation, with why it works>
+
+## Axe results
+- <path> @ <viewport>: <violationCount> violations — <ids with impact>
+
+## Manual WCAG spot checks
+- Touch targets ≥24px on interactive elements: <pass/fail + examples>
+- Keyboard: tab order, focus visibility (desktop only): <pass/fail + examples>
+- Zoom 200% text reflow (desktop only): <pass/fail>
+
+## Screenshots
+- <filename>: <what it shows>
+```
+
+- [ ] **Step 3: Verify the harness against the live homepage**
+
+Load Playwright tool schemas (see Global Constraints note). Then:
+1. `browser_resize` to 390×844.
+2. `browser_navigate` to `https://schoolcompare.co.uk/`.
+3. `browser_evaluate` with the contents of `axe-snippet.js` as the function body.
+
+Expected: a JSON result with `violationCount` (any number ≥ 0) and no thrown error. If the CDN is blocked, switch the `src` to `https://unpkg.com/axe-core@4.10.2/axe.min.js` in the file and re-verify.
+
+- [ ] **Step 4: Take a baseline screenshot to confirm capture works**
+
+`browser_take_screenshot` with filename `home-mobile-baseline.png`. Expected: file saved, path returned.
+
+- [ ] **Step 5: Commit**
+
+```bash
+git add docs/superpowers/specs/2026-07-02-ux-audit-notes/
+git commit -m "chore(audit): axe harness and notes template for UX audit"
+```
+
+---
+
+### Task 2: Journey 1 — Home → find my school (63% of entries, 46% exits)
+
+**Files:**
+- Create: `docs/superpowers/specs/2026-07-02-ux-audit-notes/journey-1-home-find-school.md` (copy structure from `TEMPLATE.md`)
+
+**Interfaces:**
+- Consumes: `axe-snippet.js` via `browser_evaluate`; `TEMPLATE.md` structure.
+- Produces: `journey-1-home-find-school.md` — notes consumed by Task 8 synthesis.
+
+- [ ] **Step 1: Mobile walk-through (390×844)**
+
+1. `browser_resize` 390×844, `browser_navigate` `https://schoolcompare.co.uk/`.
+2. `browser_snapshot` — record what is above the fold: is the search input visible without scrolling? What competes for attention? Screenshot `j1-home-mobile-fold.png`.
+3. Scroll the full page (`browser_press_key` End or evaluate `window.scrollTo`), screenshot `j1-home-mobile-full.png`. Note content order: does featured/secondary content precede the primary task?
+4. **Task attempt A (school by name):** type a real school name into search, e.g. `Welland Primary` (known from analytics). Record: keystrokes-to-results, result quality (is the right school first?), loading feedback, and taps needed to reach `/school/146678-welland-primary-school`. Screenshot the results state `j1-search-results-mobile.png`.
+5. **Task attempt B (postcode):** return home, search a plausible postcode (e.g. `B91 3` area for Solihull, or any valid UK postcode like `SW1A 1AA`). Record: is postcode search discoverable/labelled? Distance shown? Sensible ordering? Screenshot `j1-postcode-results-mobile.png`.
+6. Record time-to-school-page for both attempts against the spec's ~15s target.
+7. Run axe snippet on: home (initial) and home (results visible). Record results.
+
+- [ ] **Step 2: Desktop walk-through (1440×900)**
+
+Repeat Step 1's navigation and task attempt A at 1440×900 (screenshots `j1-home-desktop-fold.png`, `j1-search-results-desktop.png`). Additionally: tab through the page with keyboard — record focus visibility and whether search → results → school link is keyboard-operable. Test 200% zoom (`browser_evaluate` `document.body.style.zoom` is NOT valid for this — instead resize to 720×450 which approximates 200% reflow at 1440) and note any loss of content/overlap.
+
+- [ ] **Step 3: Write notes file**
+
+Fill `journey-1-home-find-school.md` per template. Every friction point needs evidence + criterion + argument. Explicitly answer: "why do 46% of visitors exit at home?" — list the plausible causes observed.
+
+- [ ] **Step 4: Commit**
+
+```bash
+git add docs/superpowers/specs/2026-07-02-ux-audit-notes/journey-1-home-find-school.md
+git commit -m "docs(audit): journey 1 notes — home to school search"
+```
+
+---
+
+### Task 3: Journey 2 — Cold landing on a school detail page (SEO long tail)
+
+**Files:**
+- Create: `docs/superpowers/specs/2026-07-02-ux-audit-notes/journey-2-school-detail-cold.md`
+
+**Interfaces:**
+- Consumes: `axe-snippet.js`, `TEMPLATE.md`.
+- Produces: `journey-2-school-detail-cold.md` for Task 8.
+
+- [ ] **Step 1: Mobile cold landing (390×844)**
+
+Navigate **directly** (no prior site context — this simulates a Google arrival) to `https://schoolcompare.co.uk/school/136916-the-castle-school`. Then assess in order:
+1. First-screen orientation: within one screen, can a parent tell what site this is, what school this is, and what the site offers? Screenshot `j2-school-mobile-fold.png`.
+2. Scroll the entire page. Screenshots at each major section (`j2-school-mobile-<section>.png`). For each data block (results, Ofsted, characteristics, admissions): is it comprehensible to a non-specialist? Is jargon (RWM, expected standard, progress scores) explained in place?
+3. Next-step paths: is there an obvious "compare this school" and "schools near this one" action? How many taps to a comparison including this school? Record the exact path or its absence.
+4. Repeat the cold landing for a contrasting school `https://schoolcompare.co.uk/school/146678-welland-primary-school` (different data availability) — note any layout breakage or missing-data handling. Screenshot anomalies only.
+5. Run axe snippet on both school pages. Record results.
+
+- [ ] **Step 2: Desktop pass (1440×900)**
+
+Reload `.../136916-the-castle-school` at desktop. Screenshot `j2-school-desktop-fold.png`. Check: hero/map rendering, chart legibility, keyboard focus through interactive elements, link affordance (do school-page links look clickable?).
+
+- [ ] **Step 3: Write notes file**
+
+Fill `journey-2-school-detail-cold.md`. Explicitly answer: "a parent lands here from Google — what would make them stay and use the site rather than bounce back to search results?"
+
+- [ ] **Step 4: Commit**
+
+```bash
+git add docs/superpowers/specs/2026-07-02-ux-audit-notes/journey-2-school-detail-cold.md
+git commit -m "docs(audit): journey 2 notes — cold landing on school detail"
+```
+
+---
+
+### Task 4: Journey 3 — Building a comparison (27% of views, 32% exits)
+
+**Files:**
+- Create: `docs/superpowers/specs/2026-07-02-ux-audit-notes/journey-3-compare.md`
+
+**Interfaces:**
+- Consumes: `axe-snippet.js`, `TEMPLATE.md`.
+- Produces: `journey-3-compare.md` for Task 8.
+
+- [ ] **Step 1: Mobile walk-through (390×844)**
+
+1. Navigate to `https://schoolcompare.co.uk/compare` **directly** (20% of sessions enter here). Screenshot empty state `j3-compare-empty-mobile.png`. Is the empty state instructive — does it tell a parent what to do first?
+2. Add two schools via whatever mechanism the page offers (search within compare, or navigate to school pages and use their compare action — record which paths exist). Count taps from empty state to a two-school comparison. Screenshot `j3-compare-two-schools-mobile.png`.
+3. Assess the comparison output on mobile: are charts/tables legible at 390px? Horizontal scrolling? Can you tell which school is which (colour + label, not colour alone — WCAG 1.4.1)? Are metric names explained?
+4. Remove a school; add a third. Any state loss, confusing controls, or dead ends? Does the selection persist if you navigate away and back?
+5. Run axe snippet on empty state and populated state. Record results.
+
+- [ ] **Step 2: Desktop pass (1440×900)**
+
+Repeat comparison-building at desktop. Screenshot `j3-compare-two-schools-desktop.png`. Keyboard-operate the add/remove flow; record focus behaviour. Check chart tooltips/legends for mouse-only interactions.
+
+- [ ] **Step 3: Write notes file**
+
+Fill `journey-3-compare.md`. Explicitly answer: "compare is 32% of exits — is that task-complete satisfaction (fine) or abandonment (problem)? What observed evidence points either way?"
+
+- [ ] **Step 4: Commit**
+
+```bash
+git add docs/superpowers/specs/2026-07-02-ux-audit-notes/journey-3-compare.md
+git commit -m "docs(audit): journey 3 notes — building a comparison"
+```
+
+---
+
+### Task 5: Journey 4 — Rankings → shortlist (12% of views)
+
+**Files:**
+- Create: `docs/superpowers/specs/2026-07-02-ux-audit-notes/journey-4-rankings.md`
+
+**Interfaces:**
+- Consumes: `axe-snippet.js`, `TEMPLATE.md`.
+- Produces: `journey-4-rankings.md` for Task 8.
+
+- [ ] **Step 1: Mobile walk-through (390×844)**
+
+1. Navigate to `https://schoolcompare.co.uk/rankings`. Screenshot default state `j4-rankings-mobile.png`.
+2. Is the default ranking explained (which metric, which year, what the numbers mean)? Would a parent understand what "top" means here?
+3. Filter to a local authority (e.g. Solihull). Count taps; is the filter discoverable on mobile? Screenshot filtered state `j4-rankings-filtered-mobile.png`.
+4. Change the ranking metric. Is the metric picker comprehensible (plain-language labels vs. jargon)?
+5. Tap through to a school from the list; navigate back — is filter state preserved? (Back-navigation state loss is a classic mobile task-killer.)
+6. Run axe snippet on default and filtered states. Record results.
+
+- [ ] **Step 2: Desktop pass (1440×900)**
+
+Repeat at desktop, screenshot `j4-rankings-desktop.png`. Check table semantics (real `<table>` with headers vs. divs — screen-reader implications), sortability affordances, keyboard operation of filters.
+
+- [ ] **Step 3: Write notes file + commit**
+
+Fill `journey-4-rankings.md`.
+
+```bash
+git add docs/superpowers/specs/2026-07-02-ux-audit-notes/journey-4-rankings.md
+git commit -m "docs(audit): journey 4 notes — rankings"
+```
+
+---
+
+### Task 6: Journey 5 — Admissions content (5% of views, light pass)
+
+**Files:**
+- Create: `docs/superpowers/specs/2026-07-02-ux-audit-notes/journey-5-admissions.md`
+
+**Interfaces:**
+- Consumes: `axe-snippet.js`, `TEMPLATE.md`.
+- Produces: `journey-5-admissions.md` for Task 8.
+
+- [ ] **Step 1: Single mobile pass (390×844)**
+
+1. Navigate to `https://schoolcompare.co.uk/admissions`. Screenshot `j5-admissions-mobile.png`.
+2. Light checks only: readability (line length, heading hierarchy), whether the recently added SchoolCompare tool cross-links are present and useful, whether the page's look matches the rest of the site (this feeds the cohesion pass), and one axe scan.
+3. Check discoverability in reverse: from the home page, how does a parent find this content at all? (5% views may be a discoverability problem rather than a demand problem — note evidence either way.)
+
+- [ ] **Step 2: Write notes file + commit**
+
+Fill `journey-5-admissions.md` (shorter than the others is expected).
+
+```bash
+git add docs/superpowers/specs/2026-07-02-ux-audit-notes/journey-5-admissions.md
+git commit -m "docs(audit): journey 5 notes — admissions"
+```
+
+---
+
+### Task 7: Cross-cutting cohesion pass
+
+**Files:**
+- Create: `docs/superpowers/specs/2026-07-02-ux-audit-notes/cohesion-pass.md`
+
+**Interfaces:**
+- Consumes: all journey screenshots (scratchpad) and notes files; live site; optionally `nextjs-app` source for token verification.
+- Produces: `cohesion-pass.md` for Task 8.
+
+- [ ] **Step 1: Component comparison across pages**
+
+Using the screenshots already captured plus targeted re-visits, compare across `/`, `/compare`, `/rankings`, `/admissions`, and a school page:
+1. **Typography:** collect computed styles via `browser_evaluate` on each page — e.g. `[...document.querySelectorAll('h1,h2,h3,body p, button, a')].slice(0,40).map(e => ({tag: e.tagName, size: getComputedStyle(e).fontSize, weight: getComputedStyle(e).fontWeight, family: getComputedStyle(e).fontFamily.split(',')[0]}))` — and diff the scales page-to-page. Record any page using off-scale sizes.
+2. **Colour:** same technique for `color`, `backgroundColor` on buttons/links/chips; flag near-duplicate colours (e.g. two blues doing the same job) and any accent colour used inconsistently.
+3. **Components:** buttons, chips, cards, empty states, loading states — screenshot side-by-side candidates and note variant drift (different radii, padding, casing, icon usage for the same semantic role).
+4. **Navigation & page furniture:** header/footer consistency, page-title patterns, back-link behaviour, breadcrumbs presence/absence across page types.
+5. **Recent additions check (from spec):** map-blended hero, characteristic chips, admissions cross-links — do they feel native to the rest of the site?
+
+- [ ] **Step 2: Verify against source where ambiguous**
+
+Where a visual inconsistency could be intentional, check `nextjs-app` styles (grep for the relevant component/tokens) to determine whether a design token exists and is being bypassed, or no token exists. Record which — it changes the recommendation (enforce token vs. create token).
+
+- [ ] **Step 3: Write notes file + commit**
+
+Fill `cohesion-pass.md` with the same evidence → criterion → argument structure (criterion here is typically "consistency and standards" heuristic).
+
+```bash
+git add docs/superpowers/specs/2026-07-02-ux-audit-notes/cohesion-pass.md
+git commit -m "docs(audit): cross-cutting cohesion pass notes"
+```
+
+---
+
+### Task 8: Synthesis — prioritized audit report
+
+**Files:**
+- Create: `docs/superpowers/specs/2026-07-02-ux-audit-report.md`
+- Read: all files in `docs/superpowers/specs/2026-07-02-ux-audit-notes/`, spec `docs/superpowers/specs/2026-07-02-ux-audit-design.md`
+
+**Interfaces:**
+- Consumes: journey notes 1–5, cohesion notes.
+- Produces: the final deliverable report.
+
+- [ ] **Step 1: Consolidate and deduplicate findings**
+
+Read all six notes files. Merge duplicate findings (same root cause observed in several journeys becomes one finding listing all occurrences). Discard any finding lacking evidence or a cited criterion — the spec forbids taste-only findings.
+
+- [ ] **Step 2: Assign final priorities and uplift indications**
+
+For each finding assign P0–P3 per the spec's definitions (traffic-weighted impact × severity), and an uplift line: **metric** (one of: home 46% exit rate; share of sessions reaching a school page; compare 32% exit rate; rankings→school click-through; school-page bounce-back-to-Google; accessibility compliance), **direction**, **band** (small/moderate/large) **with one-sentence reasoning**. Sanity rules: a P0/P1 must sit on `/`, `/compare`, `/rankings`, or the school-page template; admissions-only findings cap at P2 unless a WCAG failure.
+
+- [ ] **Step 3: Write the report**
+
+Structure (from spec):
+
+```markdown
+# SchoolCompare UX/UI Audit — 2026-07-02
+
+## Method summary
+<viewports, journeys, tools, analytics baseline — half a page>
+
+## What works today — keep
+<explicit list with why; protects against change-for-change's-sake>
+
+## Findings
+
+### P0 — Urgent
+<each: title, evidence (screenshots/axe ids), criterion, argument, recommendation, uplift>
+
+### P1 — High
+### P2 — Medium
+### P3 — Nice-to-have
+
+## Accessibility summary
+<axe violation table by page/viewport + manual check results; overall WCAG 2.2 AA posture>
+
+## Suggested implementation sequence
+<grouped batches of related fixes, ordered by uplift-per-effort; each batch sized as a plausible follow-up project>
+```
+
+- [ ] **Step 4: Self-check the report against the spec**
+
+Verify: every finding has all four elements (evidence/argument/recommendation/uplift); "works well" section is non-empty; uplift bands never state invented percentages; P0/P1 findings all sit on high-traffic paths; report answers the spec's three goals (a) speed-to-information, (b) end-to-end cohesion, (c) standards compliance. Fix inline.
+
+- [ ] **Step 5: Commit**
+
+```bash
+git add docs/superpowers/specs/2026-07-02-ux-audit-report.md
+git commit -m "docs(audit): prioritized UX/UI audit report"
+```

docs/superpowers/specs/2026-07-02-ux-audit-design.md

@@ -0,0 +1,79 @@
+# UX/UI Audit of SchoolCompare.co.uk — Design
+
+**Date:** 2026-07-02
+**Status:** Approved design, awaiting execution
+**Output of execution:** a prioritized audit report (this spec defines how that report is produced)
+
+## Goal
+
+A comprehensive UX and design audit of the live site (schoolcompare.co.uk) that answers:
+
+- **(a)** Can parents reach the relevant information quickly and intuitively?
+- **(b)** Is the site visually and experientially cohesive end-to-end, not just at component level?
+- **(c)** Does it comply with current design standards and best practices (incl. WCAG 2.2 AA)?
+
+Every recommendation must be argued from evidence — no change for change's sake — and carry an indication of potential uplift. Primary success lens: **engagement and task completion** (parents who land actually reach a school page or comparison); SEO benefits noted secondarily.
+
+## Analytics baseline (30 days, informing all weighting)
+
+- ~2.3k visitors; 87% UK; 83% Google organic.
+- Devices: **56% mobile**, 41% laptop, 2% desktop → mobile is the primary viewport.
+- Page views: `/` 52%, `/compare` 27%, `/rankings` 12%, `/admissions` 5%, school pages a long tail (~1% each).
+- Entries: `/` 63%, `/compare` 20%, `/rankings` 6%, individual school pages a small but real SEO tail.
+- Exits: `/` 46% (biggest leak), `/compare` 32%, `/rankings` 13%.
+
+## Method
+
+**Environment:** live production site via Playwright browser tools. Two viewports: **390×844 (mobile, weighted primary)** and **1440×900 (desktop)**. Chrome engine (matches 41% Chrome + 11% Edge majority); iOS/WebKit-specific rendering is out of scope (cannot be emulated faithfully).
+
+**Journey-led walk-through, in traffic order:**
+
+1. **Home → find my school** (63% of entries; 46% of exits). Can a parent with a school name or postcode reach the right school page in under ~15 seconds? What competes for attention?
+2. **Google → school detail page → next step** (SEO long tail). Landing cold: is site identity obvious, is performance data comprehensible to a non-specialist parent, is there a clear path to "compare with nearby schools"?
+3. **Building a comparison** (27% of views, 32% of exits). Adding/removing schools, chart legibility on mobile, metric comprehension.
+4. **Rankings → shortlist** (12% of views). Filtering by local authority, scanning, jumping to school pages.
+5. **Admissions content** (5% — light pass, mainly cohesion with the rest of the site).
+
+**Per journey, record:** friction points with screenshot evidence; what works well (explicitly kept); axe-core accessibility scan of each page state visited.
+
+**Cross-cutting cohesion pass** (after journeys): typography scale, spacing rhythm, colour usage, component variants (buttons, chips, cards, nav, empty/loading states) compared **across** pages; consistency check of recent additions (map-blended hero, characteristic chips, admissions cross-links).
+
+## Evaluation criteria
+
+A finding is valid only if it cites at least one of:
+
+- a violated usability heuristic (Nielsen/NN-g),
+- a WCAG 2.2 AA failure (axe result or manual check: contrast, touch targets ≥24px, keyboard/focus, labels),
+- a mobile-usability standard,
+- a concrete task-flow obstruction observed in the walk-through.
+
+No "I'd prefer it differently" findings. Each finding: **evidence → argument (why it hurts parents) → recommendation**.
+
+## Prioritization
+
+Scored on traffic-weighted impact × severity:
+
+- **P0 Urgent** — blocks or badly degrades a core task on a high-traffic path, or a clear WCAG failure on a main page.
+- **P1 High** — meaningful friction on a main journey; strong expected funnel uplift.
+- **P2 Medium** — cohesion/polish issues that erode trust but don't block tasks.
+- **P3 Nice-to-have** — low-traffic pages or marginal refinements.
+
+**Uplift indication per finding:** which analytics number it should move (e.g. "home 46% exit rate", "share of sessions reaching a school page"), direction, and a magnitude band (small/moderate/large) with reasoning. Honest bands, not invented percentages — there is no baseline funnel instrumentation.
+
+## Deliverable
+
+One audit report at `docs/superpowers/specs/2026-07-02-ux-audit-report.md` containing:
+
+1. Method summary.
+2. **"What works today — keep"** list.
+3. Findings grouped by tier (P0–P3), each with evidence, argument, recommendation, uplift indication.
+4. Suggested implementation sequence grouping related fixes.
+
+The report is the plan requested. Implementation of any fixes is a separate follow-up with its own plan.
+
+## Out of scope
+
+- Performance/Core Web Vitals auditing (explicitly excluded by choice of scope).
+- iOS/Safari-specific rendering verification.
+- Changes to data content or backend behaviour.
+- Actually implementing fixes.

docs/superpowers/specs/2026-07-02-ux-audit-notes/TEMPLATE.md

@@ -0,0 +1,29 @@
+# Journey N: <name> — audit notes
+
+**Pages visited:** <paths>
+**Viewports:** 390×844, 1440×900
+
+## Task attempt log
+<What was attempted, step by step, and where time/attention went. Note seconds-to-goal where measurable.>
+
+## Friction points
+For each:
+- **F<N>. <short title>**
+  - Evidence: <screenshot filename(s), observed behaviour, axe rule id if applicable>
+  - Criterion violated: <heuristic / WCAG SC / mobile standard / task obstruction>
+  - Argument: <why this hurts a parent completing the task>
+  - Severity guess: <P0/P1/P2/P3 — provisional, finalized in synthesis>
+
+## Works well — keep
+- <observation, with why it works>
+
+## Axe results
+- <path> @ <viewport>: <violationCount> violations — <ids with impact>
+
+## Manual WCAG spot checks
+- Touch targets ≥24px on interactive elements: <pass/fail + examples>
+- Keyboard: tab order, focus visibility (desktop only): <pass/fail + examples>
+- Zoom 200% text reflow (desktop only): <pass/fail>
+
+## Screenshots
+- <filename>: <what it shows>

docs/superpowers/specs/2026-07-02-ux-audit-notes/axe-snippet.js

@@ -0,0 +1,27 @@
+// Body for playwright browser_evaluate: () => { ...this content... }
+// Loads axe-core 4.x from CDN (skips if already present), runs WCAG A/AA scan.
+return (async () => {
+  if (!window.axe) {
+    await new Promise((resolve, reject) => {
+      const s = document.createElement('script');
+      s.src = 'https://cdn.jsdelivr.net/npm/axe-core@4.10.2/axe.min.js';
+      s.onload = resolve;
+      s.onerror = () => reject(new Error('axe failed to load'));
+      document.head.appendChild(s);
+    });
+  }
+  const results = await window.axe.run(document, {
+    runOnly: { type: 'tag', values: ['wcag2a', 'wcag2aa', 'wcag21a', 'wcag21aa', 'wcag22aa'] }
+  });
+  return {
+    url: location.pathname,
+    violationCount: results.violations.length,
+    violations: results.violations.map(v => ({
+      id: v.id,
+      impact: v.impact,
+      description: v.help,
+      nodes: v.nodes.length,
+      sampleTargets: v.nodes.slice(0, 3).map(n => n.target.join(' '))
+    }))
+  };
+})();

docs/superpowers/specs/2026-07-02-ux-audit-notes/cohesion-pass.md

@@ -0,0 +1,148 @@
+# Cross-cutting cohesion pass — audit notes (Task 7)
+
+**Pages compared:** `/`, `/compare`, `/rankings`, `/admissions`, `/school/136916-the-castle-school` (secondary), `/school/146678-welland-primary-school` (primary)
+**Viewport:** 1440×900 default; mobile 390×844 for the /compare 3-school check.
+**Method:** Ran a `browser_evaluate` typography+colour collector on each of the six live pages (headings, body, buttons, links, chips — computed `fontSize/fontWeight/fontFamily`, `color/backgroundColor/borderRadius/padding`). Diffed the results into the tables below. For every ambiguous drift, grepped `nextjs-app/` (`app/globals.css` + `components/*.module.css`) to decide **token exists & bypassed (→ enforce)** vs **no token (→ create)**.
+**Criterion used throughout:** Nielsen #4 "Consistency and standards" unless a WCAG SC is named. No taste-only findings — every claim below carries computed-style and/or source evidence.
+
+---
+
+## Task attempt log
+
+Collected computed styles on all six pages in sequence, then verified against source. The dominant story is **two axes of drift**: (a) the two school-detail pages are *parallel component implementations* (`SchoolDetailView` vs `SecondarySchoolDetailView`) whose tokens have diverged; (b) a rich design-token system exists in `globals.css` (`--radius-*`, `--accent-*`) but is pervasively **bypassed with hardcoded px/hex** in the module CSS.
+
+### OPEN item — /compare with THREE same-phase schools at 390×844
+Loaded `/compare?urns=142161,113105,124613&metric=rwm_expected_pct` at 390×844 — three **primary** schools (St Mary & St Thomas CofE, Ottery St Mary, Trimley St Mary), same phase, confirmed via the "Primary (3) / Secondary (0)" phase tabs. Handling is sound: the three school cards **stack vertically** (each showing name, LA, type, and the selected metric value in its series colour — 77.0% teal, 51.0% coral, 44.0% blue), so no card is squeezed. The "Performance Over Time" chart canvas renders all three series (verified: canvas has drawn content — 9,720 non-white pixel samples in a 324×300 canvas; a full-page screenshot showed it momentarily blank, which is a Chart.js/`fullPage` capture artifact, not a real defect). The "Detailed Comparison" table becomes 4 columns (metric label + 3 schools) at 869px inside a 324px container: it scrolls **horizontally within its own `overflow-x:auto` wrapper**, and the page body itself does **not** overflow (`document.scrollWidth` = 390 = `window.innerWidth`). So a third same-phase school is legible and contained — no layout break. Only nit (already a general finding, not compare-specific): at 390px only the first school's column is visible without scrolling, so a 3-way visual scan of the table requires swiping. Screenshot: `cohesion-compare-3school-mobile.jpeg`.
+
+---
+
+## Typography comparison (per page, desktop 1440)
+
+| Page | Page-title H1 | H1 family | Section H2/H3 | Notable body sizes | Off-scale / cross-page flags |
+|---|---|---|---|---|---|
+| `/` | **48px** /700 Playfair | Playfair | H2 28px & 21.6px; H3 16px & 20px Playfair | 16.8, 14.72, 14, 13.76, 13.12px | Search CTA button **20px** /600 (see F1); many near-dup body sizes |
+| `/rankings` | **36px** /700 Playfair | Playfair | — | table TH 12px, TD 15px/16px | H1 smaller than home; table type 12/15 |
+| `/compare` | **36px** /700 Playfair | Playfair | H2 **18px & 24px** Playfair (mixed) | table TH 12px, TD 15px | 3× **BUTTON 20px Arial** (off-family, F7); mixed H2 |
+| `/admissions` | **44px** /700 Playfair | Playfair | H2 24px & 21.6px Playfair; **H3 15.2px /700 DM Sans** | 14.08, 14.4, 14, 13.12px | H3 rendered in **body font** not Playfair (F7); 3rd distinct H1 size |
+| `/school/…primary` (Welland) | **52px** /700 Playfair | Playfair | H2 18px Playfair ×5; H3 14px DM Sans | table TH **11px**, TD **13px** | largest H1; table type 11/13 (F8) |
+| `/school/…secondary` (Castle) | **52px** /700 Playfair | Playfair | H2 18px Playfair ×4; H3 14px DM Sans | table TH **11px**, TD **13px** | matches Welland (good); table 11/13 (F8) |
+
+**Diff summary:** Four distinct page-title sizes across five pages — **36 / 44 / 48 / 52px**. Tool pages (rankings, compare) agree on 36; the three "hero" pages (home 48, admissions 44, school 52) each pick a different size. Source: each is a **hardcoded `clamp()`** in its own module, not a shared token — home `.hero-title` `clamp(2rem,5vw,3.5rem)`; both school `.schoolName` `clamp(2rem,5vw,3.25rem)`; admissions title `2.75rem`. → **no page-title/hero token exists → CREATE.** Body copy shows a cloud of near-duplicate sizes (0.875/0.88/0.9/0.92rem → 14/14.08/14.4/14.72px) that no single scale explains.
+
+Fonts are otherwise disciplined: **DM Sans** body + **Playfair Display** display everywhere. Exceptions: (a) admissions/school **H3 elements render in DM Sans** while H2 stays Playfair (F7); (b) `Arial`/`Helvetica Neue` buttons+links on chart and map pages are **third-party** (Chart.js legend, Leaflet zoom/attribution) — noted, not a first-party defect.
+
+---
+
+## Colour comparison (buttons / links / chips)
+
+| Role | Colour(s) observed | Token | Verdict |
+|---|---|---|---|
+| Primary CTA bg | `rgb(224,114,86)` `#e07256` everywhere (search, +Add School, active phase tab, btn-primary) | `--accent-coral` | Consistent ✓ |
+| Primary CTA **hover** | `#c45a3f` (`btn-primary`) **vs `#d4654a`** (`.btn-compare:hover`, globals.css:754) | `--accent-coral-dark` = #c45a3f | **Near-dup / same-role different colour (F6)** — #d4654a hardcoded, bypasses token |
+| Secondary / supporting | `rgb(45,125,125)` `#2d7d7d` (teal outline btn, teal chips, "Near me", info) | `--accent-teal` | Consistent ✓ |
+| Nav active | coral text on `rgba(224,114,86,0.12)` tint | `--accent-coral-bg` | Consistent ✓ |
+| Gold accent (admissions cross-link badge on school page) | `rgb(184,146,14)` `#b8920e` | tokens are `--accent-gold #c9a227` / `--accent-gold-text #7a6800` | **Third gold** — matches neither token (F6 family) |
+| Chip series colours (countdown / SATs) | coral `#e07256`, teal `#2d7d7d`, blue chart-5 | `--chart-*` | Consistent ✓ (data encoding) |
+| Map furniture links | `rgb(0,120,168)` `#0078a8` blue | none (Leaflet/OSM) | Third-party — off-palette blue leaks into school hero (see hero verdict) |
+
+**Cluster flags:** coral resolves to **three** values doing hover/pressed work — `#e07256`, `#c45a3f`, `#d4654a`; the middle two are the same semantic role (pressed coral) at different hex. Gold has a third off-token value `#b8920e`. Teal is clean. No different-role/same-colour collisions found (coral=primary, teal=secondary is held consistently).
+
+---
+
+## Component variant table
+
+| Component / role | `/` | `/rankings` | `/compare` | `/admissions` | school (primary) | school (secondary) | Drift |
+|---|---|---|---|---|---|---|---|
+| Segmented / phase switcher | search-mode toggle: **rounded** (container radius-lg, btn radius-md), coral active | phaseTab: **radius 0**, coral fill, bordered | phaseTab: **radius 0** (matches rankings ✓) | sub-nav: **radius 0**, underline, teal active | section-nav pills radius 4/999 | tab btns radius 4 | **F5** — 3+ different treatments for "switch view/phase" |
+| Primary "+Compare/+Add" button | btn-primary radius 8, pad 20×40 (F1) | btn radius 8, pad 12×24 | btn radius 8, pad 12×24 | — | btnAdd **radius 8, pad 12×20** | btnAdd **radius 6, pad 8×16** | **F1 / F2** |
+| Back link | — | — | — | — | topBack coral, radius 0 | topBack coral, radius 0 | consistent ✓ |
+| Data table type | — | TH 12 / TD 15 | TH 12 / TD 15 | — | TH **11** / TD **13** | TH **11** / TD **13** | **F8** |
+| Small badge/pill | ofsted badge radius 4 | rank badge 50% | — | deadline chip radius 12 | SATs natPill radius **4**; nav pill 999 | badge radius **3**; att8 badge radius **3** | **F4** |
+| Nav header / footer | identical | identical | identical | identical | identical | identical | **consistent ✓** |
+
+Radius scale audit across all `*.module.css`: **15 distinct raw-px radius values** in use — 4px(30×), 8px(28×), 999px(21×), 12px(19×), 3px(16×), 6px(14×), 10px(13×), 2px(8×), 16px(4×), 14px(3×), 9999px(2×), 1px(2×), 9px, 5px, 25px — against a token scale of only `--radius-sm/md/lg/xl` = 4/8/16/24. Tokens exist and are widely **bypassed**; there is **no pill token** for the 999/9999 values.
+
+---
+
+## Friction points
+
+- **F1. Duplicate `.btn` rule set in `globals.css` — small-button padding is dead code, sizes drift**
+  - Evidence: `globals.css` defines `.btn` **twice** — line 151 (radius 6px, pad `0.5rem 1rem`, font 0.875rem, 1px border) and again line 1558 (radius `--radius-md`, pad `0.75rem 1.5rem`, font 0.9rem, `border:none`). `.btn-sm` (line 218, pad `0.3rem 0.625rem`) is declared *between* them, so the later `.btn` (equal specificity, source order wins) **overrides** it. Live proof: rankings `.btn.btn-sm` computes to padding **12px 24px**, not the intended 4.8×10px. Meanwhile the home search `.btn.btn-primary` computes to pad **20px 40px** / font 20px (a FilterBar override on top).
+  - Criterion violated: Nielsen #4; touch-target predictability.
+  - Argument: "small" buttons aren't small, and the base button geometry depends on which of two conflicting blocks wins — any future button edit has a 50/50 chance of hitting the dead rule. Silent, repo-wide.
+  - Source verdict: **token/rule conflict → ENFORCE** (dedupe to one `.btn` definition; restore `.btn-sm`).
+  - Severity: **P2**.
+
+- **F2. Two parallel school-detail components have drifted on the same controls**
+  - Evidence: `SchoolDetailView.module.css` vs `SecondarySchoolDetailView.module.css` implement the same UI with divergent hardcoded values: `.btnAdd` **radius 8px / pad 0.75rem 1.25rem** (primary) vs **radius 6px / pad 0.5rem 1rem** (secondary); national-average marker `.natPill` radius **4px** (primary) vs `.badge`/`.att8` radius **3px** (secondary); section-tab padding `4.8px 10px` vs `4.8px 12px`. Both files hardcode px rather than referencing `--radius-md`.
+  - Criterion violated: Nielsen #4.
+  - Argument: a parent moving from a primary school page to a secondary one (the compare flow explicitly mixes phases) meets the "+ Compare" button and nav tabs rendered at subtly different sizes/corners — the classic "two things that should be one" tax, and double the maintenance surface.
+  - Source verdict: token EXISTS (`--radius-md:8px`) but **bypassed → ENFORCE** (both should use the token; ideally share one component).
+  - Severity: **P2**.
+
+- **F3. Page-title (H1) sizing is unsystematic across page types**
+  - Evidence: H1 computes to **36px** (rankings, compare), **44px** (admissions), **48px** (home), **52px** (school). Source: each is a separate hardcoded `clamp()`/rem in its own module (home `clamp(2rem,5vw,3.5rem)`; school `clamp(2rem,5vw,3.25rem)`; admissions `2.75rem`); tool pages fall back to smaller local values.
+  - Criterion violated: Nielsen #4 (visual hierarchy consistency).
+  - Argument: page-to-page the "you are here" title jumps size with no rule a user could infer; hero pages don't even agree with each other.
+  - Source verdict: **no shared page-title/hero token → CREATE** (`--title-hero`, `--title-section`) and apply.
+  - Severity: **P2** (hierarchy), leaning P3 in isolation.
+
+- **F4. Radius scale is bypassed system-wide (15 raw values vs 4 tokens; no pill token)**
+  - Evidence: radius audit above — 3/5/6/9/10/12/14/25px and 999/9999px all appear hardcoded despite `--radius-sm/md/lg/xl`. Same-role badges differ (natPill 4 vs secondary badge 3; ofsted badge 4 vs att8 badge 3).
+  - Criterion violated: Nielsen #4.
+  - Argument: corner rounding is a primary "family resemblance" cue; with 15 values it reads as many hands, not one system.
+  - Source verdict: **mixed** — tokens exist for 4/8/16 (**ENFORCE**); pill radius has **no token → CREATE** `--radius-pill: 999px`.
+  - Severity: **P2**.
+
+- **F5. "Switch view / phase" control has 3+ different treatments**
+  - Evidence: home search-mode toggle is a **rounded** segmented control (container `--radius-lg`, coral active); rankings & compare phase tabs are **square** (radius 0) bordered coral-fill tabs; admissions sub-nav is an **underline** tab strip (radius 0, teal active). Same job, three shapes and two accent colours.
+  - Criterion violated: Nielsen #4.
+  - Argument: the segmented switch is a recurring interaction; users re-learn it on each page. (Rankings↔compare agreeing is the one bright spot.)
+  - Source verdict: **no shared segmented-control component → CREATE/CONSOLIDATE**.
+  - Severity: **P2**.
+
+- **F6. Near-duplicate accent colours for the same role**
+  - Evidence: pressed/hover coral is `--accent-coral-dark #c45a3f` on `.btn-primary` but a **hardcoded `#d4654a`** on `.btn-compare:hover` (globals.css:754); gold appears as `#b8920e` on the school-page admissions cross-link badge, matching neither `--accent-gold #c9a227` nor `--accent-gold-text #7a6800`.
+  - Criterion violated: Nielsen #4.
+  - Argument: two hovers for the same "coral button being pressed" is exactly the "two blues doing the same job" consistency defect.
+  - Source verdict: token EXISTS → **ENFORCE** (`--accent-coral-dark`); the off-token gold → ENFORCE `--accent-gold-text`.
+  - Severity: **P3**.
+
+- **F7. Heading font-family and off-family buttons break the type system locally**
+  - Evidence: on `/admissions` and both school pages, `H3` elements render in **DM Sans /700** while `H2` stays Playfair — an inconsistent semantic-heading treatment. Separately, `/compare` shows 3× `BUTTON` in **Arial 20px** and school pages show Arial/Helvetica-Neue controls.
+  - Criterion violated: Nielsen #4 (the H3 case). The Arial/Helvetica cases are **third-party** (Chart.js legend toggles, Leaflet zoom/attribution) — recorded as environmental, not a first-party fix.
+  - Argument: an H3 in body font reads as a bold paragraph, weakening the Playfair hierarchy the rest of the site sells.
+  - Source verdict: H3 font-family is set locally, no heading-family token discipline → **ENFORCE** Playfair for display headings (or intentionally reclass those H3s as labels).
+  - Severity: **P3**.
+
+- **F8. School-detail data tables use a smaller type scale than the shared data tables**
+  - Evidence: rankings & compare tables compute **TH 12px / TD 15px**; both school-detail tables compute **TH 11px / TD 13px**.
+  - Criterion violated: Nielsen #4; borderline WCAG 1.4.4 (13px data is small but resizable).
+  - Argument: the same kind of KS2 figures appear one size on compare and a size smaller on the school page — inconsistent, and the smaller variant is the one a parent studies most.
+  - Source verdict: table type is set per-component, **no shared table-type token → CREATE** and apply.
+  - Severity: **P3**.
+
+---
+
+## Recent-additions verdicts (native vs bolted-on)
+
+- **Map-blended hero (`SchoolHeroMap` on school pages): mostly native, with a third-party seam.** The framing is on-brand — coral back-link, coral "+ Compare", cream surround, Playfair title over the map. But the embedded Leaflet layer imports **off-palette blue `#0078a8` attribution links and Arial zoom controls** straight into the hero (F7), the one place they're most visible. Verdict: **native design, bolted-on furniture** — worth restyling the Leaflet attribution/controls to the palette.
+- **Characteristic chips (school rows + detail badges): native.** Tints use `--accent-teal-bg`/gold tints that belong to the palette, tone is quiet per the recent commit. Only blemish is radius drift (badge 3px vs natPill 4px, F4) — a token issue, not a stylistic mismatch.
+- **Admissions cross-links: native in colour, inconsistent in treatment.** The teal `stepTool`/`navLink` links match the accent system, but the *same* "go to a tool" intent is a plain underlined **text link** on `/admissions` yet a **gold badge (`#b8920e`)** on the school page (F6) — and journey-5 already logged one such cross-link at a 39px tap target. Verdict: **native palette, slightly bolted-on** because the cross-link component isn't unified.
+
+---
+
+## Works well — keep
+- **Header + footer are pixel-identical on all six pages** (logo Playfair, coral nav-active tint, dark footer with faded links) — the strongest cohesion anchor on the site.
+- **Coral = primary / teal = secondary** is held consistently for button and link roles (no role/colour collisions).
+- **Rankings and compare phase tabs are genuinely shared** (radius 0, pad 10×24, coral active) — the model for what F5 should become everywhere.
+- **Both school-detail H1s agree at 52px**, and the deadline countdown chip is byte-for-byte identical between the homepage widget and `/admissions` (radius 12px, pad 16px 17.6px 14.4px) — a correctly reused component.
+
+## Self-review
+- No taste-only findings: every F cites either a computed-style diff (F1/F2/F3/F4/F6/F7/F8 all carry live px/hex) or a shared-component absence (F5), plus a criterion.
+- Token-vs-no-token recorded for every source-checked finding: **ENFORCE** — F1, F2, F4(4/8/16), F6, F7; **CREATE** — F3 (hero title token), F4 (pill radius token), F5 (segmented-control component), F8 (table-type token).
+- Third-party styling (Chart.js Arial, Leaflet blue/Arial) is explicitly separated from first-party defects rather than filed as findings.
+- Severity spread: **P2 ×5** (F1, F2, F3, F4, F5), **P3 ×3** (F6, F7, F8). No P0/P1 — nothing blocks a task; the journey-5 contrast WCAG failure is already logged there and not re-filed here.
+
+## Screenshots (referenced, not committed)
+- `cohesion-compare-3school-mobile.jpeg`: `/compare` at 390×844 with three same-phase primary schools — cards stack, chart renders, table scrolls within its container.

docs/superpowers/specs/2026-07-02-ux-audit-notes/journey-1-home-find-school.md

@@ -0,0 +1,108 @@
+# Journey 1: Home → find my school — audit notes
+
+**Pages visited:** `/`, `/?search=Welland+Primary` (results), `/?search=B91+3` (postcode results), `/school/146678-welland-primary-school`
+**Viewports:** 390×844 (primary), 1440×900 (+720×450 for 200% reflow)
+**Site:** live https://schoolcompare.co.uk only. Read-only: searched/filtered, submitted no data-modifying forms.
+
+## Task attempt log
+
+**Mobile (390×844) — Attempt A: find a school by name.**
+- Home loads with search input above the fold (input top 176px / bottom 246px of an 844px viewport, 70px tall — comfortable tap target). H1 "Every school in England, *compared.*" at 85px. `Schools near me` button at ~388px. Full page is 3132px tall; content order is search → near-me → admissions-deadline rail → "Start exploring" links → marketing ("What you'll see", "About school data") → footer. **Primary task is first — good.**
+- Typed `Welland Primary` (15 keystrokes). **No live autocomplete/typeahead appeared** while typing.
+- Tapped `Search`. URL → `/?search=Welland+Primary`. Result was instant (no perceptible wait; no spinner needed). "1 school found", correct school ranked first, rich card: `Good · 2023`, Primary, Academy converter, Ages 4–11, 74% RWM with down-trend arrow (prev 76%), +12 pts vs national, 131 pupils, Worcestershire.
+- Tapped `View` → `/school/146678-welland-primary-school`, instant.
+- **Time-to-school-page: 3 taps (searchbox, Search, View) + typing, effectively instant load. Well under the ~15s target.**
+
+**Mobile — Attempt B: find schools by postcode `B91 3` (Solihull).**
+- Same 3-interaction pattern (focus box, type, Enter). URL → `/?search=B91+3`. "8 schools found."
+- **Results show NO distance and are NOT sorted by proximity** (sort = "Relevance"). The list mixes phases and the **top result is a Secondary school** (Tudor Grange Academy), followed by an independent all-through, another secondary, then primaries, and a Sixth Form College last. Behaviour is consistent with a postcode-prefix text match against the postcode column, not a geographic radius search.
+- Screenshot `j1-postcode-results-mobile.png` confirms cards carry only the LA name ("Solihull"), no "X miles away".
+
+**Desktop (1440×900) — Attempt A repeat + keyboard + zoom.**
+- Desktop hero additionally shows a trust badge ("● UPDATED WITH 2026/2027 ADMISSIONS RESULTS") and a value-prop subheading ("24,000+ primary and secondary schools with Key Stage 2 SATs, GCSE results, Ofsted grades, progress scores and admissions data — side by side, in one place"). **Both are absent on the mobile hero** (mobile jumps H1 → search box).
+- Name search identical, correct, instant (`j1-search-results-desktop.png`).
+- Keyboard: tab order is logical — Skip link → logo → Search/Compare/Rankings/Admissions nav → search input → Search button → Schools near me → content. Skip link, logo, nav links and Search button all get a clear **2px solid orange (#E07256) focus outline**. The search input uses an orange border + very faint ring (`box-shadow rgba(224,114,86,0.12) 0 0 0 3px`, `outline:none`) — visible but weaker than the other controls. Search → results → school link is fully keyboard-operable (standard links/buttons).
+- 200% reflow (720×450): **no horizontal scroll** (`scrollWidth == clientWidth == 720`); deadline cards reflow from 1×4 to 2×2, no overlap or clipping. Pass.
+
+## Friction points
+
+- **F1. Search has no autocomplete / typeahead suggestions**
+  - Evidence: Typing `Welland Primary` (mobile & desktop) produced no suggestion dropdown at any keystroke; snapshots show only the raw input until submit. Screenshot `j1-home-mobile-fold.png`.
+  - Criterion violated: Nielsen #6 (Recognition rather than recall) + established site-search usability (NN-g "search suggestions"); WCAG-adjacent error-prevention.
+  - Argument: Parents frequently don't know a school's exact registered name ("Welland" vs "Welland Church of England"). With no suggestions and an exact-ish match required, a misspelling risks a zero-result dead end on the highest-traffic path, and every search costs full typing + a blind submit.
+  - Severity guess: P1
+
+- **F2. Postcode search shows no distance and isn't sorted by proximity** — **⚠ REVISED after recheck, see addendum at end of file: this holds only for PARTIAL postcodes; a full postcode triggers a working proximity search with distances.**
+  - Evidence: `/?search=B91+3` → "8 schools found", sort "Relevance", top result a Secondary school, phases mixed (secondary/independent/primary/sixth-form), zero distance shown on any card. Screenshot `j1-postcode-results-mobile.png`.
+  - Criterion violated: Nielsen #2 (Match between system and the real world) + task-flow obstruction. The placeholder invites a "postcode", which sets an expectation of "nearest schools first"; the delivered value (proximity ordering + distance) is missing.
+  - Argument: On the core "find my school near me" task, a parent who types their postcode expects the closest schools ranked by distance. Instead they get an unordered, distance-less, mixed-phase list led by a secondary school — it reads as broken and gives no way to judge "which is closest," pushing them to abandon. (Name search works, so the overall journey isn't fully blocked → P1 not P0, but this is the weakest link on the primary task.)
+  - Severity guess: P1 (candidate P0 for the postcode sub-path)
+
+- **F3. Filter and Sort dropdowns on the results view have no accessible name**
+  - Evidence: axe `select-name` (impact **critical**, 2 nodes) on `/?search=Welland+Primary`; targets `.FilterBar-module…controlSelect` (phase filter) and `.HomeView-module…sortSelect`.
+  - Criterion violated: WCAG 2.2 **4.1.2 Name, Role, Value (Level A)**.
+  - Argument: These are the exact controls a parent uses to narrow a mixed result set to "Primary" or re-sort — and a screen-reader user hears an unlabelled combobox, so cannot tell what either does. This is on the main journey's results view (same `/` route), a clear Level-A failure.
+  - Severity guess: P1 (candidate P0 — WCAG A failure on the main route)
+
+- **F4. Serious colour-contrast failures on the home page**
+  - Evidence: axe `color-contrast` (impact serious) — 6 nodes on home (`/`), incl. the active nav tab label, `.btn`, and "how-it-works" step text; 3 nodes on results (incl. `.btn-primary`, Ofsted badge).
+  - Criterion violated: WCAG 2.2 **1.4.3 Contrast (Minimum) (AA)**.
+  - Argument: Low-contrast labels and buttons are harder to read for low-vision parents and for everyone on a phone in daylight — the mobile-primary audience. Affects the main CTA styling and the active-tab indicator.
+  - Severity guess: P1
+
+- **F5. Admissions-deadline rail: keyboard-inaccessible scroll region, defaults to the least-urgent card**
+  - Evidence: axe `scrollable-region-focusable` (serious, 1 node) on `.countdownRail`; on mobile the rail's default scroll position lands on the 4th card ("Primary Offer Day · 288 days") rather than the nearest deadline ("Secondary · 121 days"), with only a partial card peeking as the scroll cue. Screenshots `j1-home-mobile-fold.png`, `j1-home-mobile-full.png`.
+  - Criterion violated: WCAG 2.2 **2.1.1 Keyboard (A)** for the scroll region; Nielsen #1 (Visibility of system status) for the ordering.
+  - Argument: Keyboard/switch users can't reach the later cards, and the odd default scroll buries the single most time-critical deadline (121 days) behind less urgent ones — the opposite of what an anxious parent needs surfaced.
+  - Severity guess: P2
+
+- **F6. Mobile hero omits the value proposition shown on desktop**
+  - Evidence: Desktop hero has the "UPDATED WITH 2026/2027…" badge + subheading "24,000+ primary and secondary schools with KS2 SATs, GCSE results, Ofsted grades… side by side, in one place" (`j1-home-desktop-fold.png`). The mobile hero (`j1-home-mobile-fold.png`) drops both — below the poetic-but-vague H1 there is only a search box.
+  - Criterion violated: Nielsen #1 (Visibility of system status) / recognition-over-recall; mobile content-parity best practice (the primary 63%-of-entries viewport should not lose the core "what is this and why trust it" copy).
+  - Argument: A first-time parent landing on mobile sees "Every school in England, compared." + a bare box, with no statement of coverage, data sources, or freshness. Weak/absent value proposition above the fold is a classic driver of immediate exits — directly relevant to the 46% home-exit rate.
+  - Severity guess: P2 (candidate P1 given mobile is the primary, highest-traffic viewport)
+
+## Works well — keep
+- **Name search is genuinely excellent.** `Welland Primary` returned the correct school as the sole top result with an information-rich card (Ofsted grade+year, RWM % with year-over-year trend arrow, "+12 pts vs national", pupil count, LA) — 3 taps + typing, instant load, comfortably under the 15s target. This is the journey's strongest asset.
+- **Search is the unmistakable primary action.** Prominent, above the fold on both viewports, large (70px) tap target, plain-English placeholder "School name or postcode", single clear "Search" CTA; content order puts the task first.
+- **Accessibility fundamentals partly in place:** a working "Skip to main content" link (keyboard-focusable, visible outline), logical tab order, and strong 2px focus outlines on nav/skip/button.
+- **Robust responsive reflow:** 200%/720px shows no horizontal scroll and no overlap; deadline cards reflow cleanly.
+- **Result cards adapt to phase** (Attainment 8 for secondary, RWM % for primary) — good match to the real-world data a parent expects for each phase.
+- **A real proximity path exists** via the "Schools near me" geolocation button (distinct teal styling) — the raw material for good location search is present, just not wired to the postcode text input (see F2).
+
+## Axe results
+- `/` (home, initial) @ 390×844: **2 violations** — `color-contrast` (serious, 6 nodes), `scrollable-region-focusable` (serious, 1 node).
+- `/?search=Welland+Primary` (results) @ 390×844: **2 violations** — `color-contrast` (serious, 3 nodes), `select-name` (**critical**, 2 nodes).
+- Desktop (1440×900) serves the same DOM/CSS; violations above apply equally (not separately re-scanned).
+
+## Manual WCAG spot checks
+- **Touch targets ≥24px:** Pass on the core path — search input 70px tall, Search button large, "Schools near me" 40px, result-card `View`/`+ Compare` full-size. Watch: the small "×" chip on the active-search token is borderline.
+- **Keyboard: tab order, focus visibility (desktop):** Pass with a caveat — order is logical and skip/nav/buttons show a clear 2px orange outline; the search **input** relies on an orange border + a very faint 0.12-alpha ring (visible but the weakest indicator on the page — borderline for 2.4.11 Focus Appearance).
+- **Zoom 200% text reflow (desktop):** Pass — no horizontal scroll at 720px, no clipping/overlap.
+
+## Why do 46% of visitors exit at home? — observed plausible causes
+1. **Postcode expectation mismatch (F2).** Many parents will type their postcode expecting "nearest schools, closest first." They get a distance-less, unsorted, mixed-phase list led by a secondary school — it looks broken, so they leave. This is the biggest task-level leak on the primary journey.
+2. **Weak mobile value proposition (F6).** On the 63%-of-entries mobile hero, the vague H1 + bare search box give a first-time visitor no reason to trust or continue; no coverage/freshness/data statement above the fold. Classic bounce driver.
+3. **No search assistance (F1).** Typing a school name with zero suggestions and requiring a near-exact match means a spelling slip → likely a zero-result dead end → exit.
+4. **Trust/polish erosion (F3, F4).** Critical unlabelled controls and serious contrast failures degrade the "credible data source" impression, especially for the accessibility-dependent and daylight-mobile segments.
+5. **Benign exits (nuance for synthesis).** Some "home exits" are successes, not failures: a user who finds their school card and taps an outbound link, or who reads the answer and leaves satisfied. Not the entire 46% is a usability leak — but causes 1–4 are the addressable share.
+
+## Screenshots
+- `j1-home-mobile-fold.png`: mobile home above the fold — H1 + prominent search box + Search CTA, deadline rail beginning.
+- `j1-home-mobile-full.png`: full mobile home — content order (search → near-me → deadlines → explore → marketing → footer).
+- `j1-search-results-mobile.png`: mobile results for "Welland Primary" — correct single result, rich card.
+- `j1-postcode-results-mobile.png`: mobile results for "B91 3" — no distance, relevance sort, secondary school first.
+- `j1-home-desktop-fold.png`: desktop home — includes trust badge + value-prop subheading absent on mobile.
+- `j1-search-results-desktop.png`: desktop results for "Welland Primary".
+- `j1-focus-searchbox-desktop.png`: keyboard focus state on the search input (orange border + faint ring).
+- `j1-home-zoom200-desktop.png`: full home at 720px (≈200% reflow) — no horizontal scroll, cards reflow to 2×2.
+- `j1-fullpostcode-results-mobile.png` (recheck): mobile results for full postcode "B91 3DL" — "13 schools within 1.0 miles", distance on every card, nearest-first.
+
+## Recheck addendum (2026-07-02) — F2 tested with a FULL postcode
+
+The original Attempt B used the partial postcode `B91 3`. Rechecked with the full postcode **`B91 3DL`** typed into the home search box and submitted:
+
+- The submit handler (`FilterBar.tsx` `isValidPostcode()`, full-postcode regex `/^[A-Z]{1,2}[0-9][A-Z0-9]?\s*[0-9][A-Z]{2}$/i`) recognised it and routed to **`/?postcode=B91+3DL&radius=1`** — the geocoded radius search, not text search.
+- Result: heading **"13 schools within 1.0 miles of B91 3DL"**, **every card shows distance** ("0.1 mi", "0.2 mi" … "1.0 mi"), **sorted nearest-first**, plus a "Within: 0.5/1/3/5 miles" radius selector, a List/Map toggle, and a "Nearest first" sort option. Screenshot `j1-fullpostcode-results-mobile.png`. This is exactly the experience F2 asked for — it exists and works well.
+- **F2 as originally stated is therefore wrong for full postcodes.** The residual, real finding is narrower: input that *looks like* a location but fails the full-postcode regex — outcodes ("B91"), partials ("B91 3"), postcodes with typos — **silently falls back to name/address text search** (`/?search=…`) with no distances, relevance ordering, and no notice that a full postcode would unlock proximity search. The two result pages look similar enough that a parent won't know which mode they're in. Severity re-guessed at P1→P2 (degraded sub-path with a working primary path and a working "Schools near me" alternative; the failure is silent-mode-switching, not a missing capability).
+- Exit-cause list item 1 ("postcode expectation mismatch") should be read with this narrower scope: it applies to partial/malformed postcode input only.

docs/superpowers/specs/2026-07-02-ux-audit-notes/journey-2-school-detail-cold.md

@@ -0,0 +1,115 @@
+# Journey 2: Cold landing on a school detail page (SEO long tail) — audit notes
+
+**Pages visited:** `/school/136916-the-castle-school` (secondary), `/school/146678-welland-primary-school` (primary), `/compare` (reached via the compare CTA)
+**Viewports:** 390×844 (primary), 1440×900 (+720×450 for 200% reflow)
+**Site:** live https://schoolcompare.co.uk only. Read-only: navigated, tapped "Add to Compare", switched chart tabs; submitted no data-modifying forms.
+
+## Task attempt log
+
+**Cold-landing premise:** each school URL was the *first* navigation into the site (simulating a Google arrival), so first-screen orientation is judged with zero prior context.
+
+**Mobile (390×844) — Cold landing A: The Castle School (secondary, Somerset).**
+- Above the fold, top→bottom: header (logo + Search/Compare/Rankings/Admissions), "← Back", a **Leaflet map**, then the school identity block. **The single most important element — the H1 "The Castle School" — is crushed between two overlapping elements:** the map (bbox bottom 280px) sits over the top of the H1 (top 272px) and the floating **"+ Add to Compare"** button (top 286px) sits over its lower half (H1 bottom 309px). Only a ~6px band of the name is unobscured. Screenshot `j2-school-mobile-fold.png` shows the name almost illegible. So the answer to "what school is this?" — the first cold-landing question — is broken on the primary viewport.
+- "What site is this?" is answerable (SchoolCompare logo + bottom tab bar). "What does the site offer?" is *not* stated on the school page — no value proposition or "compare schools" framing above the fold.
+- Scrolled the full 3,748px page. Section order: Ofsted → GCSE Results (2024/25) → Admissions → Historical Results → Wellbeing & Context → footer. Screenshots `j2-school-mobile-full.png`, `j2-school-mobile-gcse.png`, `j2-school-mobile-history.png`.
+  - **Ofsted:** clear ("Outstanding"), dated (Inspected 3 Oct 2023), links to the real Ofsted report, and includes a current-aware note about the post-Sept-2024 grading change. Comprehensible.
+  - **GCSE:** rich and comparison-anchored (Attainment 8 53.4 / National avg 39.1 / "+14 pts"), with a plain caption and a "treat Progress 8 with caution" note. **But the jargon is unexplained in place:** "Attainment 8", "Progress 8", "EBacc average point score 4.72" have no tooltip/expander/definition (0 info affordances found in DOM). The plain-English definition *exists on the site* ("Average grade across a pupil's best 8 GCSEs including English and Maths") but only appears on `/compare`, not where a parent first meets the term.
+  - **Historical chart:** renders on scroll (the blank in the full-page capture was a lazy-render artifact, not a bug). Series = solid teal (school) + grey dashed (national) with **no visible legend**, and a data gap 2018/19→2023/24 is bridged by the line.
+  - **Admissions:** legible; surfaces the decision-critical "⚠ Applications exceeded places last year" and honestly states cut-off data is unavailable.
+- **Next-step paths.** "+ Add to Compare" exists (overlapping the H1). There is **no "schools near this one" / "similar schools" module anywhere on the page** — the page ends at Wellbeing → footer.
+  - **Taps to a comparison including this school:** Tap 1 = "+ Add to Compare" (button → "✓ In Comparison", bottom Compare tab shows a "1" badge; no toast). Tap 2 = Compare tab → `/compare?urns=136916`, "Comparing 1 school". Screenshots `j2-school-mobile-compare-added.png`, `j2-compare-oneschool-mobile.png`. So **2 taps to a compare *view* containing the school, but a real 2-school comparison requires "+ Add School" then a manual name search** — because no nearby/similar list is offered, the parent must already know the competitor's name.
+
+**Mobile — Cold landing B: Welland Primary School (primary, Worcestershire) — contrasting data.**
+- **Same H1-overlap bug recurs** (map bottom 264 > H1 top 256; "+ Add to Compare" top 270 < H1 bottom 278) — confirming it is *systemic to the school template*, not school-specific. Screenshot `j2-welland-mobile-full.png`.
+- Primary (KS2) page handles the same data class **markedly better**: caption "End-of-primary-school tests taken by Year 6 pupils"; a standout in-place explainer — *"Why is combined lower? A pupil is only counted if they met the bar in all three subjects…"* — which answers a real parent question without leaving the page; subject bar charts carry a legend (Expected standard / Exceeding / National average); "Pupil Premium 26.0% — Pupils from disadvantaged backgrounds" is expanded.
+- **Missing-data handling is graceful:** "*No data for 2019/20 or 2020/21 — national assessments were cancelled due to COVID-19*" and "Historical distance cut-off data is not available… Contact the admissions authority." No broken/empty UI. No layout breakage beyond the shared H1 overlap.
+
+**Desktop (1440×900) — reload of The Castle School.**
+- Fold is clean (`j2-school-desktop-fold.png`): H1 large and legible (the map's ~8px overlap is imperceptible with the compare button moved to the top-right), full section-nav pills visible (Top/Ofsted/GCSEs/Admissions/History/Wellbeing), and a persistent **"1 school selected" compare tray** at bottom-centre (a desktop-only affordance mobile lacks).
+- Chart legibility: bars and axis labels are clear; the "Nat avg 39.1" badge overlaps the chart *heading* text (minor).
+- Keyboard: logical order (skip → logo → nav → Back → …), every stop shows a **2px solid orange (#E07256) focus outline**, including the in-`main` "← Back" button.
+- Link affordance: in-content links (School website, Ofsted reports) are teal with **no underline** — distinguished from body text by colour plus an "↗" glyph for external links; "View on map" is an orange button. Clickable-looking to sighted users but colour-dependent.
+
+## Friction points
+
+- **F1. School name (H1) is overlapped/obscured by the map and the "Add to Compare" button on mobile — systemic**
+  - Evidence: Measured bboxes on both schools — Castle: map bottom 280 / H1 top 272 / compare-btn top 286 / H1 bottom 309; Welland: map bottom 264 / H1 top 256 / compare-btn top 270 / H1 bottom 278. Screenshots `j2-school-mobile-fold.png`, `j2-welland-mobile-full.png`.
+  - Criterion violated: Nielsen #1 (Visibility of system status) & #8 (Aesthetic & minimalist design); task-flow obstruction of cold-landing orientation; overlap defeats WCAG 1.4.10 Reflow's intent (content should not be obscured on the primary viewport).
+  - Argument: On a Google cold landing the very first question is "is this the school I searched for?" The H1 that answers it is crushed to a ~6px sliver between the map and a CTA on the 390px viewport — the exact first-screen orientation failure that drives immediate back-to-search bounces, on the site's highest-traffic SEO template.
+  - Severity guess: P1 (candidate P0 — primary content, main template, primary viewport)
+
+- **F2. No "schools near this one" / similar-schools path — the compare value prop has no on-ramp**
+  - Evidence: Full-page snapshots of both schools show sections Ofsted→GCSE/KS2→Admissions→History→Wellbeing→footer with **no nearby/similar-schools module**. Reaching a 2-school comparison requires Compare → "+ Add School" → manual name search (`j2-compare-oneschool-mobile.png`).
+  - Criterion violated: Nielsen #7 (Flexibility & efficiency of use); task-flow obstruction — the site's core differentiator ("compare") is unreachable from the highest-traffic entry point without prior knowledge.
+  - Argument: A parent landing cold on one school has nothing to weigh it against and no way to discover the alternatives they came to compare; the compare tool assumes they already know competitor names. At the moment of maximum intent, the site offers no lateral discovery, so the parent bounces back to Google to find other local schools.
+  - Severity guess: P1
+
+- **F3. GCSE jargon (Attainment 8, Progress 8, EBacc) unexplained in place on the secondary school page**
+  - Evidence: GCSE section shows "Attainment 8 score 53.4", "EBacc average point score 4.72" with national averages but no definitions; 0 tooltip/info affordances in the DOM. The plain-English definition exists only on `/compare` ("Average grade across a pupil's best 8 GCSEs including English and Maths"). Screenshot `j2-school-mobile-gcse.png`.
+  - Criterion violated: Nielsen #2 (Match between system and the real world) & #10 (Help & documentation).
+  - Argument: A non-specialist parent cannot judge whether "53.4" or "4.72" is good without knowing the scale/meaning. The site *has* the explanation but withholds it at first contact, forcing recall or a bounce. The national-average anchoring softens this but does not define the metric. (The primary page does this far better — see Works well.)
+  - Severity guess: P2
+
+- **F4. Serious colour-contrast failures on the school template**
+  - Evidence: axe `color-contrast` (serious, **13 nodes**) on the Castle page — sample targets `…backBtn` ("← Back"), `…mapLink` ("View on map"), `…tabBtnActive` (active metric tab). Recurs from Journey 1 F4 (also seen on home).
+  - Criterion violated: WCAG 2.2 **1.4.3 Contrast (Minimum) (AA)**.
+  - Argument: Low-contrast Back, "View on map" and active-tab text are harder to read for low-vision parents and for everyone on a phone in daylight — the mobile-primary audience — on the main content template.
+  - Severity guess: P1
+
+- **F5. Trend/results charts expose no text alternative to assistive tech**
+  - Evidence: axe `role-img-alt` (serious) on the `<canvas>` chart on **both** pages (Castle GCSE trend; Welland KS2 chart `canvas[height="220"]`). WCAG-mapped tag failure.
+  - Criterion violated: WCAG 2.2 **1.1.1 Non-text Content (A)**.
+  - Argument: The key data visualisation — performance over time — is invisible to a screen-reader parent; they get no equivalent from the chart. A "View raw year-by-year data" expander partially mitigates the trend chart, but the canvas itself still announces nothing. Level-A failure on the main template.
+  - Severity guess: P1
+
+- **F6. Chart interpretation aids are weak: no legend for the national-average series; label overlap**
+  - Evidence: Historical trend chart shows a grey dashed line (national) with no visible legend (`j2-school-mobile-history.png`); the "Nat avg 39.1" badge overlaps the "ATTAINMENT 8 — SCHOOL VS NATIONAL" heading (`j2-school-mobile-gcse.png`).
+  - Criterion violated: Nielsen #1 (Visibility of system status) & #8 (Aesthetic & minimalist); task-flow (data interpretation).
+  - Argument: A non-specialist can't reliably tell what the second (dashed) line represents without a legend, undermining the core "vs national" comparison; the badge/heading overlap erodes the polish that signals a trustworthy data source. (Notably, the *primary* subject charts DO carry a legend — inconsistent.)
+  - Severity guess: P2
+
+- **F7. Sticky in-page section nav clips its last items on mobile with no scroll affordance**
+  - Evidence: On 390px, "History" (right edge 397px) and "Wellbeing" (right 480px) render off-screen; the nav row is 448px wide and is not horizontally scrollable (document scrollWidth stays 390 — clipped, not scrollable). Screenshot `j2-school-mobile-gcse.png` (nav shows "…Admissions  Histo").
+  - Criterion violated: Mobile usability (interactive content must be reachable within the viewport); Nielsen #7 (Flexibility & efficiency).
+  - Argument: 2 of 6 in-page jump links are unreachable via the sticky nav on the primary viewport, so a parent can't quickly jump to the SEN/Wellbeing or History data — they must hunt by scrolling, weakening the nav's purpose. (Content is still reachable by scrolling, so not a hard block.)
+  - Severity guess: P2
+
+- **F8. "Add to Compare" confirmation is easy to miss**
+  - Evidence: After tapping, no toast/live-region message fired (`role=alert`/`role=status` empty); feedback is only the button relabel ("✓ In Comparison") — which sits in the overlapped/obscured H1 zone (F1) — plus a small "1" badge on the bottom Compare tab.
+  - Criterion violated: Nielsen #1 (Visibility of system status).
+  - Argument: The relabel is reasonable feedback, but because it lands in the visually crowded overlap area and there's no explicit confirmation or "view your shortlist" nudge, a parent may not register that the action succeeded or know where the shortlist lives.
+  - Severity guess: P3
+
+## Works well — keep
+- **Strong identity + facts block (when not overlapped).** Both pages lead with a located map plus address, headteacher, official school website, MAT/trust, and pupils-vs-capacity — exactly the orientation facts a cold visitor needs. The raw material is excellent; only the F1 overlap spoils it on mobile.
+- **The primary (KS2) page explains its data in plain English.** Caption "End-of-primary-school tests taken by Year 6 pupils"; the "Why is combined lower?" explainer answers a genuine parent question *in place*; subject charts carry a legend. This is the model the secondary page (F3/F6) should follow.
+- **Everything is anchored to the national average** ("+14 pts", "National avg 39.1", "National avg 62%") — lets a non-specialist judge good/bad without leaving the page.
+- **Graceful, honest missing-data handling.** "No data for 2019/20 or 2020/21 — national assessments cancelled due to COVID-19"; "Historical distance cut-off data is not available… contact the admissions authority." No broken or empty UI where data is absent.
+- **Ofsted section is clear, current, and trustworthy.** Grade + inspection date, the post-Sept-2024 grading-change note, and a link to the actual Ofsted report.
+- **Decision-critical admissions fact is surfaced** ("⚠ Applications exceeded places last year") rather than buried in a table.
+- **Desktop is clean and accessible.** No H1 overlap, full section nav visible, persistent compare tray, legible charts; logical keyboard order with a visible 2px orange focus outline on every control incl. the in-`main` Back button; 200% reflow (720px) has no horizontal scroll.
+- **Compare metric definitions exist** (on `/compare`) and the shortlist persists via localStorage — the explanatory content is written, just not surfaced on the detail page.
+
+## Axe results
+- `/school/136916-the-castle-school` @ 390×844 & 1440×900 (same DOM/CSS): **2 violations** — `color-contrast` (serious, 13 nodes: backBtn, mapLink, tabBtnActive), `role-img-alt` (serious, 1 node: chart `canvas`).
+- `/school/146678-welland-primary-school` @ 390×844: **1 violation** — `role-img-alt` (serious, 1 node: `canvas[height="220"]` KS2 chart). No `color-contrast` violation was reported on this page's rendered DOM.
+
+## Manual WCAG spot checks
+- **Touch targets ≥24px:** Pass (marginal). "← Back" button measures 64×28px (meets the 24px minimum but is the smallest); "+ Add to Compare", metric tabs and section-nav pills are comfortably sized. WCAG 2.5.8 Target Size (Minimum) met.
+- **Keyboard: tab order, focus visibility (desktop):** Pass — order is logical (skip → logo → nav → Back → content), and every stop including the in-`main` Back button shows a clear 2px solid orange (#E07256) outline.
+- **Zoom 200% text reflow (desktop):** Pass — at 720px width the school page has no horizontal scroll (scrollWidth == clientWidth == 720).
+
+## "Parent lands here from Google — what makes them stay vs bounce?"
+**Would stay because:** the page answers the real questions — Ofsted grade (with a link to the source and an up-to-date grading note), results anchored to the national average, admissions pressure ("applications exceeded places"), and — on primary — plain-English explanations and honest COVID/data-gap handling. That is a credible, decision-useful page.
+**Would bounce because:** (1) on the primary mobile viewport the **school name itself is obscured** by the map + compare button (F1), so the first "is this the right school?" glance fails; (2) there is **no way to discover or reach comparable nearby schools** (F2) — the site's whole reason to exist is invisible from its highest-traffic entry point, so a parent leaves to find alternatives elsewhere; (3) on secondary pages the **key numbers are jargon** with no in-place definition (F3/F6), so a non-specialist can't interpret them.
+**Highest-leverage fixes:** un-overlap the H1 (F1); add a "Nearby / similar schools — add to compare" module to the detail page (F2); reuse the existing `/compare` metric definitions as in-place tooltips/captions on the detail page (F3/F6).
+
+## Screenshots
+- `j2-school-mobile-fold.png`: Castle mobile first screen — H1 crushed between map and "+ Add to Compare".
+- `j2-school-mobile-full.png`: full Castle mobile page — section order Ofsted→GCSE→Admissions→History→Wellbeing.
+- `j2-school-mobile-gcse.png`: Castle GCSE section — jargon without definitions; "Nat avg 39.1" badge overlapping the chart heading; section nav clipped ("Histo").
+- `j2-school-mobile-history.png`: Castle trend chart — national series is an unlabelled grey dashed line; data gap bridged.
+- `j2-school-mobile-compare-added.png`: after "Add to Compare" — "✓ In Comparison" + bottom-tab "1" badge, no toast; button still over the H1.
+- `j2-compare-oneschool-mobile.png`: `/compare` with one school — where metric definitions (Attainment 8) actually appear.
+- `j2-welland-mobile-full.png`: Welland (primary) full page — same H1 overlap; strong in-place KS2 explainers and graceful missing-data handling.
+- `j2-school-desktop-fold.png`: Castle desktop fold — clean H1, full section nav, persistent compare tray.

docs/superpowers/specs/2026-07-02-ux-audit-notes/journey-3-compare.md

@@ -0,0 +1,125 @@
+# Journey 3: Building a comparison (`/compare`) — audit notes
+
+**Pages visited:** `/compare` (empty state, direct entry), `/compare?urns=…` (populated, 1–3 schools), add-school modal, `/school/142161-…` (persistence round-trip)
+**Viewports:** 390×844 (primary), 1440×900 (+720×450 proxy for 200% reflow)
+**Site:** live https://schoolcompare.co.uk only. Read-only: searched, added/removed schools in the compare basket (client/localStorage + URL state), opened/closed the modal, hovered the chart. Submitted no data-modifying forms. `selectedSchools` was cleared from localStorage only to reproduce a genuine empty state and to test the share-link defect.
+
+## Task attempt log
+
+**Direct entry premise:** 20% of sessions enter on `/compare`, so the empty state is judged as a cold arrival.
+
+**Mobile (390×844) — empty state.**
+- Navigating to `/compare` directly first showed a *persisted* prior selection (The Castle School, carried in `localStorage.selectedSchools` from an earlier session) — the URL self-rehydrated to `?urns=136916&metric=…`. This is persistence working (see Works well) but means the "empty" state is only seen by first-ever visitors. Cleared storage to capture the true empty state (`j3-compare-empty-mobile.png`).
+- Empty state is **instructive and actionable**: heading "No schools selected", body "Add schools from the home page or search to start comparing", and a primary button **"+ Add Schools to Compare"** that opens an in-page search modal. A cold arrival can start without leaving the page.
+
+**Mobile — building a two-school comparison. Taps counted from empty state:**
+1. Tap **"+ Add Schools to Compare"** → opens modal, auto-focuses the "School name or postcode" search box.
+2. **Type** "St Mary" → live result list appears (name + LA + school type + "+ Compare" per row).
+3. Tap **"+ Compare"** on a result → school added; **modal stays open, field clears** ("Comparing 1 school" behind it).
+4. **Type** "Ottery St Mary" → result list.
+5. Tap **"+ Compare"** → second school added (`?urns=142161,113105`).
+6. Tap **"Close modal"** → reveals the comparison (`j3-compare-two-schools-mobile.png`).
+
+→ **6 distinct interactions (4 taps + 2 text-entry sequences)** to a two-school comparison. Critically, both schools had to be **found by name/postcode** — there is no browse / "schools near this one" / "similar schools" on-ramp inside compare (ties to Journey 2 F2). A parent who knows only one school name cannot build a comparison here.
+
+**Mobile — comparison output assessment.**
+- Per-metric **school cards stack vertically** and are fully legible; each shows name, LA, type, the selected metric value (e.g. 77.0% vs 51.0%), colour-keyed to the chart. Good on 390px.
+- **Chart** ("Performance Over Time"): renders on real scroll (blank in full-page captures = lazy-render artifact, confirmed by element screenshot `j3-compare-chart-mobile.png`). Legend labels each line by **colour + full school name** — colour is not the sole differentiator (WCAG 1.4.1 satisfied). `canvas` has `role="img"` but **`aria-label` = null** (no text alt).
+- **"Detailed Comparison" table**: wrapper 626px inside a 324px column → only **Year + the first school column fit**; the second school is off-screen behind horizontal scroll (`overflow-x:auto`, no visible scroll affordance). The whole point of the table (side-by-side) can't be seen at once on the primary viewport.
+- Metric selector carries a **plain-English caption** ("% meeting expected standard in reading, writing and maths") — jargon defined in place (the thing school-detail pages lacked, Journey 2 F3).
+
+**Mobile — remove / add / persistence.**
+- **Remove (×)** is immediate: no confirm, no toast, no undo; URL updates instantly.
+- **Postcode search works**: "TA1 5AU" → The Castle School (advertised feature, functional).
+- **Add beyond two / phase mixing**: adding a secondary school to a primary comparison keeps the header at "Comparing 2 schools" but renders **only the primary card**; the secondary sits hidden behind a "Secondary (1)" tab with no explanation.
+- **Persistence**: navigated to a school detail page, then back to bare `/compare` — both schools restored and URL rehydrated to `?urns=142161,136916`. State survives real navigation via localStorage; comparisons are URL-encoded / deep-linkable.
+
+**Desktop (1440×900).**
+- Table fits with **both/all school columns visible** (no page overflow). Layout clean (`j3-compare-two-schools-desktop.png`).
+- **Keyboard add/remove**: "+ Add School" reachable and Enter-activatable; modal **opens with focus moved into the search input**; Tab reaches a result's "+ Compare" with a visible **2px solid orange (#E07256)** focus outline; Enter adds it. **But** after adding, focus **drops to `document.body`**; after **Escape** (which does close the modal) focus is again on `body`, **not** returned to the "+ Add School" trigger.
+- Modal has **no `role="dialog"` and no `aria-modal`** — not announced as a dialog.
+- **Chart tooltip** (`j3-compare-chart-tooltip-desktop.png`): hover shows year + per-school values with colour swatch + name — **mouse-only** (no touch/keyboard equivalent), but the same values are present as text in the table below.
+- **200% zoom (720×450 proxy)**: no page-level horizontal overflow — content reflows (WCAG 1.4.10 pass); the detailed table retains its own contained horizontal scroll.
+
+### Is 32% of exits task-complete satisfaction or abandonment?
+**Mixed, with concrete abandonment drivers — it is not safe to read the exits as pure satisfaction.**
+- *Points to satisfaction:* compare is a terminal "results" tool — the natural next step (visit/apply) is off-site, so a high exit share is partly expected; persistence + shareable URLs mean some exits are "saved for later"; the core output (cards + chart + table) renders and metrics are explained.
+- *Points to abandonment:* (a) **20% ENTER on `/compare`**, often via a shared link — and the **localStorage-overrides-URL defect (F4)** silently shows a returning recipient *their own* schools instead of the shared ones, a confusing dead end; (b) a 2-school comparison needs 6 interactions **and prior knowledge of both school names** (no discovery on-ramp) — a parent with one school hits a wall; (c) on mobile the **detailed table hides the second school off-screen** behind an unaffordanced scroll (F1), so the comparison can look incomplete; (d) low-contrast primary buttons (F6) degrade the mobile-daylight path. F1/F4/F6 are each capable of turning an intended task-complete exit into premature abandonment, especially for the 20% arriving on shared links.
+
+## Friction points
+
+- **F1. "Detailed Comparison" table hides the second/third school off-screen on mobile**
+  - Evidence: at 390px the table is 626px inside a 324px `.tableWrapper` (`overflow-x:auto`); only Year + the first school column are visible, second column cut off with no scroll affordance (`j3-compare-two-schools-mobile.png`).
+  - Criterion violated: mobile-usability standard (horizontal scrolling of primary content is a known antipattern) + Nielsen #6 (Recognition rather than recall) — a parent must remember school A's numbers while scrolling to school B; the tool's core "side-by-side" promise is defeated on the primary viewport.
+  - Argument: the whole reason a parent opens compare is to see schools next to each other; on mobile they can't, and with no scroll cue may believe the second school's data is missing and leave.
+  - Severity guess: P2 (the stacked metric cards + chart do show both, softening it)
+
+- **F2. Comparison table scroll region is not keyboard-accessible**
+  - Evidence: axe `scrollable-region-focusable` (serious, 1 node) on `.ComparisonView-module__…tableWrapper`; the overflowing wrapper has no `tabindex`.
+  - Criterion violated: WCAG 2.2 **2.1.1 Keyboard (A)**.
+  - Argument: a keyboard-only parent cannot scroll the detailed table to reveal columns beyond the first school — data is literally unreachable without a mouse/touch.
+  - Severity guess: P2
+
+- **F3. Trend chart exposes no text alternative to assistive tech**
+  - Evidence: axe `role-img-alt` (serious) on `canvas`; `aria-label` = null on both mobile and desktop.
+  - Criterion violated: WCAG 2.2 **1.1.1 Non-text Content (A)**.
+  - Argument: a screen-reader parent gets nothing from "Performance Over Time"; the redundant table softens this but the chart's at-a-glance trend story is lost. Recurs from Journey 2 F5 — systemic to the chart component.
+  - Severity guess: P2
+
+- **F4. Share link is silently overridden by the visitor's own localStorage**
+  - Evidence: navigating to `/compare?urns=142161,113105` while `selectedSchools` held a different set resolved the page (and URL) back to the stored `urns=142161,136916`; only after clearing localStorage did the shared URL load its intended schools.
+  - Criterion violated: Nielsen #1 (Visibility of system status) / consistency; task-flow obstruction of an **advertised primary feature** ("Share" button).
+  - Argument: a parent shares their shortlist with a partner; if the recipient has ever used compare, they silently see *their own* schools with no error or notice — the shared comparison is unreproducible and the collaboration breaks. This directly hits the 20% who enter on `/compare` via links.
+  - Severity guess: P1
+
+- **F5. Add-school modal lacks dialog semantics and loses focus on add/close**
+  - Evidence: modal has no `role="dialog"` and no `aria-modal`; after a keyboard "+ Compare" add, `document.activeElement` = `BODY`; after Escape-close (Escape does dismiss it), focus is again on `BODY`, not the "+ Add School" trigger.
+  - Criterion violated: WCAG 2.2 **4.1.2 Name, Role, Value (A)** + **2.4.3 Focus Order (A)**.
+  - Argument: screen-reader users aren't told a dialog opened; keyboard users lose their place after every add (focus jumps to page top) and after closing, so building a multi-school comparison means re-tabbing from the top repeatedly — friction on the add flow every comparison depends on.
+  - Severity guess: P2 (P1-candidate for keyboard/AT users building 3+ school comparisons)
+
+- **F6. Colour-contrast failures on the primary compare controls**
+  - Evidence: axe `color-contrast` (serious, 5 nodes populated) — sample targets `.btn-primary` (the "+ Add School" / "+ Compare" buttons), `.…phaseTabActive` (active Primary/Secondary tab), `.…tabActive .tabLabel` (active bottom-nav label).
+  - Criterion violated: WCAG 2.2 **1.4.3 Contrast (Minimum) (AA)**.
+  - Argument: the exact orange buttons and active tabs a parent must use to build and read a comparison have insufficient text contrast — hard to read on a phone in daylight (the mobile-primary audience). Recurs site-wide (Journey 1/2).
+  - Severity guess: P1
+
+- **F7. Mixed-phase selection reports "Comparing 2 schools" while showing one**
+  - Evidence: with a primary + a secondary selected, header reads "Comparing 2 schools" but only the primary card/chart/table render; the secondary is hidden behind a "Secondary (1)" tab with no explanatory copy.
+  - Criterion violated: Nielsen #1 (Visibility of system status) & #2 (Match between system and real world).
+  - Argument: a parent who added two schools sees one and may think the second was dropped; nothing explains the phase split. (Separating KS2 vs GCSE metrics is itself correct — see Works well — only the count/label is misleading.)
+  - Severity guess: P3
+
+- **F8. Remove is instant with no undo or confirmation**
+  - Evidence: tapping the × removed a school immediately — no confirm, no toast, no undo; URL updated instantly.
+  - Criterion violated: Nielsen #3 (User control & freedom — support undo).
+  - Argument: an accidental tap on the small (28px) × on mobile silently loses a school the parent may have spent a name-search to add; recovery means re-searching. A one-tap "undo" would prevent the loss.
+  - Severity guess: P3
+
+## Works well — keep
+- **Empty state is instructive *and* actionable**: clear "No schools selected" message plus a "+ Add Schools to Compare" button that opens an in-page search modal — the 20% who enter cold on `/compare` can start immediately (answers Journey 2's "no on-ramp" concern *at the compare page itself*).
+- **Metric selector carries a plain-English caption** for the chosen metric (e.g. "% meeting expected standard in reading, writing and maths") — jargon defined in place, exactly what school-detail pages omitted.
+- **Search accepts name and postcode** (TA1 5AU resolved to the correct school) — the advertised postcode feature works.
+- **Efficient multi-add**: the modal stays open and clears the field after each add, so adding several schools needs no reopen.
+- **Robust persistence + deep-linking**: selection survives real navigation away and back (localStorage), and comparisons are fully URL-encoded/shareable.
+- **Chart accessibility basics done right for sighted users**: legend labels each series by colour **and** full school name (WCAG 1.4.1 satisfied); desktop hover tooltip gives precise per-year values; the table repeats those values as text.
+- **Phase separation** (Primary/Secondary tabs) sensibly prevents nonsensical KS2-vs-GCSE metric comparisons.
+- **Desktop keyboard + reflow**: visible 2px orange focus outlines on controls; modal opens with focus moved into the search field; Escape dismisses it; all columns visible without overflow; content reflows at 200% zoom with no page-level horizontal scroll (WCAG 1.4.10 pass).
+
+## Axe results
+- `/compare` (empty) @ 390×844: **1 violation** — `color-contrast` (serious, 2 nodes: active nav tab label, `.btn-primary`).
+- `/compare?urns=142161,113105` (populated, 2 schools) @ 390×844: **3 violations** — `color-contrast` (serious, 5 nodes: `.btn-primary`, active phase tab, active nav tab), `role-img-alt` (serious, 1 node: `canvas`), `scrollable-region-focusable` (serious, 1 node: `.tableWrapper`).
+- Desktop 1440×900 populated: `canvas` `aria-label` still null (role-img-alt persists); `color-contrast` on `.btn-primary`/active tabs persists (viewport-independent).
+
+## Manual WCAG spot checks
+- Touch targets ≥24px on interactive elements (WCAG 2.5.8): **pass** — "+ Add School" 139×38, Share 110×40, metric select 324×41, phase tabs ~130×40. Smallest is the **× remove at 28×28** — above the 24px minimum but the tightest target and below the 44px comfortable norm.
+- Keyboard: tab order / focus visibility (desktop): **pass with a gap** — logical order and visible 2px orange outlines on controls; modal opens with focus moved into the search box; **fail on focus restoration** — focus drops to `body` after an add and after Escape-close rather than returning to a sensible place (F5).
+- Zoom 200% text reflow (desktop, 720×450 proxy): **pass** — no page-level horizontal scroll; only the detailed table retains its contained scroll.
+
+## Screenshots
+- `j3-compare-empty-mobile.png`: true empty state (localStorage cleared) — "No schools selected" + "+ Add Schools to Compare".
+- `j3-compare-addmodal-mobile.png`: add-school modal with search field.
+- `j3-compare-two-schools-mobile.png`: mobile 2-school comparison (cards stack; detailed table shows only first school column).
+- `j3-compare-chart-mobile.png`: element capture proving the chart renders with a colour+name legend.
+- `j3-compare-two-schools-desktop.png`: desktop 2-school comparison (both columns visible).
+- `j3-compare-chart-tooltip-desktop.png`: mouse-hover tooltip with per-school values (3-school legend, colour + label).

docs/superpowers/specs/2026-07-02-ux-audit-notes/journey-4-rankings.md

@@ -0,0 +1,94 @@
+# Journey 4: Rankings → shortlist — audit notes
+
+**Pages visited:** `/rankings`, `/rankings?local_authority=Solihull`, `/rankings?local_authority=Solihull&metric=rwm_expected_pct`, `/school/{urn}` (drill-in + back)
+**Viewports:** 390×844, 1440×900
+
+## Task attempt log
+
+Parent scenario: "show me the good schools around here" — filter to a local authority, scan, jump to a school (and ideally shortlist a few to compare).
+
+**Mobile (390×844):**
+1. Loaded `/rankings`. The filter controls (Metric / Area / Year) are visible directly above the list — no accordion or hidden panel, so filtering is immediately discoverable (good). Default subtitle: "Top-performing schools by reading, writing & maths combined higher % — showing top 100".
+2. Filtered to Solihull: one interaction on the **Area** native select → picked "Solihull". List updated to 54 schools; URL became `?local_authority=Solihull`. Seconds-to-goal: fast, ~1 select interaction.
+3. Changed **Metric** to "Reading, Writing & Maths Combined %". Subtitle updated dynamically to "% meeting expected standard in reading, writing and maths"; URL gained `&metric=rwm_expected_pct`. Both filter and metric are encoded in the URL.
+4. Drilled into a school by tapping the school-name link; navigated back (browser back). **Filter (Solihull), metric, and vertical scroll position (2500px) were all restored.** This is the strongest result of the journey.
+5. Observed that on mobile the **Type** and **Action** columns are `display:none`, and the metric % column sits past the initial fold requiring horizontal scroll of a nested table wrapper.
+
+**Desktop (1440×900):** Full 6-column table (RANK, SCHOOL, AREA, TYPE, metric %, ACTION with View / +Compare). Table is a real `<table>` with `<thead>`/`<th>`. Ran axe, keyboard/focus checks, and a 200%-zoom reflow proxy (720px width).
+
+## Friction points
+
+- **F1. The ranking numbers themselves are low-contrast teal (fails AA)**
+  - Evidence: `j4-rankings-desktop.png`; axe `color-contrast` (serious) reported **100 nodes** on desktop, sampleTargets include `.valueCell strong` (the teal "63.0%", "60.0%"… values in every row) and the teal "+ Compare" links. Value colour ≈ teal `rgb(45,125,125)` on cream.
+  - Criterion violated: WCAG 2.2 AA 1.4.3 Contrast (Minimum).
+  - Argument: The percentage is the entire reason a parent is on this page — it is the score they are comparing schools by. Rendering the primary data in a colour that fails contrast makes the key number hard to read for low-vision parents (and outdoors on a phone). (Low-contrast text also seen on earlier journeys, but here it degrades the core content, not chrome.)
+  - Severity guess: P1
+
+- **F2. Cannot add a school to the compare shortlist from the ranked list on mobile**
+  - Evidence: computed style — the `td` in the "Action" column (containing "View" and "+ Compare") is `display:none` at 390px; visible only at desktop width. The bottom nav shows a "Compare (3)" feature, so shortlisting is a first-class task.
+  - Criterion violated: Task-flow obstruction; Nielsen "User control & freedom" / "Flexibility & efficiency". The journey is literally rankings → shortlist, and the shortlist action is removed on the primary (mobile) viewport.
+  - Argument: A parent on a phone scanning the good local schools cannot build a comparison set from the rankings — they must open each school page individually and find another route in, adding steps to the core task on the highest-traffic device class.
+  - Severity guess: P2
+
+- **F3. The ranking value is off-screen on mobile — the list shows names but not scores without horizontal scroll**
+  - Evidence: `j4-rankings-mobile.png`, `j4-rankings-filtered-mobile.png`. RANK + SCHOOL + AREA fill the 324px table wrapper; the metric % column (e.g. "86.0%") is present but requires horizontally scrolling the nested `.tableWrapper` (scrollWidth 551 > clientWidth 324) to reveal.
+  - Criterion violated: Mobile usability (primary content not visible in the initial viewport). (Data tables are a recognised 1.4.10 Reflow exception, so noted as usability friction rather than a hard SC failure.)
+  - Argument: A parent sees a ranked list of names but not the numbers that justify the ranking, unless they discover a sideways swipe inside the table. The comparison value — the point of the page — is hidden by default.
+  - Severity guess: P2
+
+- **F4. Horizontally-scrollable table wrapper is keyboard-inaccessible and unlabelled**
+  - Evidence: `.RankingsView…tableWrapper` has `overflow-x:auto` with `scrollWidth > clientWidth`, but no `tabindex="0"`, no `role`, no `aria-label`.
+  - Criterion violated: WCAG 2.2 A 2.1.1 Keyboard (scrollable region not operable by keyboard); also 1.3.1 (unnamed region for screen readers).
+  - Argument: Keyboard-only and switch users cannot scroll the table sideways to reach the off-screen metric/Action columns; screen-reader users get no region name. (Keyboard-inaccessible scrollable regions also seen on earlier journeys.)
+  - Severity guess: P2
+
+- **F5. Default ranking uses unexplained "higher standard" jargon**
+  - Evidence: default metric is "Reading, Writing & Maths Combined **Higher** %"; top school scores 63.0%. Subtitle says "% achieving higher standard in reading, writing & maths combined" — but "higher standard" (greater depth) itself is not explained, and it is not the more familiar "expected standard".
+  - Criterion violated: Nielsen "Match between system and the real world" / "Help & documentation".
+  - Argument: A parent who doesn't know that "higher standard" means the top ~1 in 6 pupils may misread 63% as mediocre, when 63% at the higher standard is exceptional. The default frames every school's headline number in terms the audience is least likely to understand. (The chosen **year** — 2024/25 — is shown in the Year select but not repeated in the results subtitle.)
+  - Severity guess: P2
+
+- **F6. 33-option metric dropdown is a flat list of dataset jargon**
+  - Evidence: metric select has 33 options including "GPS Expected %", "Maths Progress", "Reading Average Score", "Disadvantaged Gap", "% EAL Pupils", "% SEN Support", "% Pupil Stability", "GPS Test Absence %" — one ungrouped list, no plain-language expansion of abbreviations.
+  - Criterion violated: Nielsen "Recognition rather than recall" / "Match with the real world".
+  - Argument: A parent looking for "the good schools" must wade past acronyms (GPS, EAL, SEN) and technical measures (scaled "Average Score", "Progress") with no grouping or help text to find the metric they actually understand.
+  - Severity guess: P3
+
+- **F7. No column-sort affordance; `<th>`s lack `scope`**
+  - Evidence: `<thead>` cells have `cursor:auto`, no `aria-sort`, no button, and are not clickable; no `scope` attribute and no `<caption>`. Ordering is controllable only via the Metric dropdown.
+  - Criterion violated: Nielsen "Consistency & standards" (users expect a ranked data table to sort by clicking a column header); WCAG 1.3.1 best-practice (missing `scope` on header cells).
+  - Argument: Parents who click "READING, WRITING & MATHS…" expecting to re-sort get no response; the only re-order path (a separate dropdown) is less discoverable than the convention they expect.
+  - Severity guess: P3
+
+- **F8. Filter selects remove the focus outline for a subtle border-colour change**
+  - Evidence: CSS `.filter-select:focus { border-color: var(--accent-teal); outline: none; }`. Links and buttons, by contrast, get a strong 2px orange focus ring (`rgb(224,114,86)`).
+  - Criterion violated: WCAG 2.2 AA 2.4.11 Focus Appearance (indicator area/contrast); inconsistent focus treatment.
+  - Argument: A keyboard user tabbing through Metric/Area/Year gets only a faint 1.5px border hue shift — much weaker than the focus ring everywhere else — making it easy to lose track of focus while operating the filters.
+  - Severity guess: P3
+
+## Works well — keep
+
+- **Back-navigation preserves full state.** After drilling into a school and pressing back, the LA filter, the chosen metric, AND the vertical scroll position were all restored (verified scroll 2500px + `area=Solihull` + `metric=rwm_expected_pct`). State lives in the URL, so results are also shareable/bookmarkable. This is the classic mobile task-killer check and the page passes cleanly.
+- **The selected metric is explained in plain language and updates live.** Switching the dropdown changed the subtitle from "% achieving higher standard…" to "% meeting expected standard in reading, writing and maths" — good real-time sensemaking.
+- **Filter selects are properly labelled.** Each select has an associated visible `<label>` (Metric / Area / Year). The unlabelled-select (WCAG 4.1.2 select-name) issue seen on the home results state does NOT recur here.
+- **Semantic table.** Real `<table>` with `<thead>` and `<th>` header cells — screen readers announce it as a table with columns, not a pile of divs.
+- **Skip link + logical tab order.** A "Skip to main content" link is first in the tab order, followed by nav → phase tabs → the three filter selects → table rows, in reading order.
+- **Reflow at 200% / narrow width.** At 720px (200% zoom proxy) the filters stack vertically and there is no page-level horizontal scroll.
+
+## Axe results
+
+- `/rankings` @ 390×844 (default): **1** violation — `color-contrast` (serious, 2 nodes: active nav tab + active "Primary (KS2)" phase tab, white on orange).
+- `/rankings?local_authority=Solihull` @ 390×844 (filtered): **1** violation — `color-contrast` (serious, 2 nodes: same active tabs).
+- `/rankings` @ 1440×900 (default): **1** violation — `color-contrast` (serious, **100 nodes**: active tabs + `.valueCell strong` teal metric numbers across every row, plus teal "+ Compare" links). Node count jumps on desktop because the full 100-row table with visible metric values is rendered.
+
+## Manual WCAG spot checks
+
+- Touch targets ≥24px on interactive elements: **Pass (for visible targets).** School-name link 123×86px, Metric select 324×41px, phase tab 148×40px — all comfortably above 24px. Note: View / +Compare buttons are hidden on mobile (see F2), so no mobile shortlist target exists.
+- Keyboard: tab order, focus visibility (desktop): **Mostly pass, one weakness.** Tab order logical (skip-link → nav → tabs → filters → rows); links and buttons show a strong 2px orange focus ring; filter selects suppress the outline for a faint teal border change (see F8).
+- Zoom 200% text reflow (desktop): **Pass.** Filters reflow to a single column; no horizontal page scroll at 720px effective width.
+
+## Screenshots
+
+- `j4-rankings-mobile.png`: default `/rankings` at 390×844 — filters visible above list; table shows RANK/SCHOOL/AREA with metric % cut off to the right.
+- `j4-rankings-filtered-mobile.png`: `/rankings?local_authority=Solihull` at 390×844 — 54 Solihull schools.
+- `j4-rankings-desktop.png`: `/rankings` at 1440×900 — full 6-column table; teal metric values and teal "+ Compare" links visible (low-contrast, F1).

docs/superpowers/specs/2026-07-02-ux-audit-notes/journey-5-admissions.md

@@ -0,0 +1,55 @@
+# Journey 5: Admissions content — audit notes
+
+**Pages visited:** `/` (reverse-discoverability check), `/admissions`
+**Viewports:** 390×844 (mobile only — light pass per brief)
+
+## Task attempt log
+
+Goal of this pass: light single-viewport review of `/admissions`, plus the open question — is 5% of page views low because parents don't need admissions content, or because they can't find it?
+
+1. Loaded `/` at 390×844 and inspected the full accessibility snapshot for every path into admissions content. Found three independent paths, all one tap from the homepage: (a) a persistent bottom tab bar with a dedicated "Admissions" tab visible on every page without scrolling, (b) a "Key admissions deadlines" widget on the homepage itself (above the fold on most phones, right below the search box and "Schools near me" button) with a "Full admissions guide →" link, and (c) a footer "Admissions guide" link. No hunting required — this is unusually well-exposed for content that gets only 5% of views.
+2. Navigated to `/admissions`. Page loaded a full guide: hero with a live "days until next milestone" countdown strip, a sticky in-page nav ("Primary / Secondary / Tips"), a "Primary school admissions" timeline (6 stages: research criteria → portal opens → deadline → offer day → accept/decline → appeals), an identically structured "Secondary school admissions" timeline, and a "Three things most parents get wrong" section.
+3. Checked heading hierarchy via `document.querySelectorAll('h1,h2,h3,h4')`: H1 "School Admissions Guide" → H2 "Primary school admissions" → H2 "Secondary school admissions" → H2 "Three things most parents get wrong" → H3×3 tip headings → (footer landmark) H3 "SchoolCompare" → H4×2. Clean, no skipped levels.
+4. Checked line length on `main p` elements via `getBoundingClientRect` + `textContent.length`: body copy renders in a ~240px column at ~14px font, roughly 30–32 characters per line. Narrow, but this is a function of the 390px viewport and card padding, not a defect — not flagged as a friction point.
+5. Checked the "recently added" SchoolCompare tool cross-links: every one of the 12 timeline steps (6 primary + 6 secondary) ends with a contextual CTA linking to `/` ("Find schools & view their admissions history", "Look up your allocated school"), `/compare` ("Build and compare your shortlist", "Weigh your offer against your other choices"), or `/rankings` ("Compare performance to order your preferences", "Gather performance evidence for your case"). Copy is tailored to the specific stage (e.g. the deadline step links to rankings framed as "order your preferences", not a generic "see rankings"). These read as genuinely contextual, not bolted on.
+6. Checked touch target sizes on cross-link CTAs via `getBoundingClientRect`: most are 42px tall, well above minimum, but two variants ("Build and compare your shortlist →" and "Look up your allocated school →") measure only 21px tall.
+7. Ran the axe-core snippet (`axe-snippet.js`) verbatim via `browser_evaluate`. 1 violation type, `color-contrast` (serious), 13 nodes, including the active bottom-nav tab label, the "England · Primary & Secondary" eyebrow, and the deadline countdown chip text.
+8. Visual cohesion check (screenshot `j5-admissions-mobile.png`, full page): same cream background, coral/teal accent palette, card styling, and typography as the homepage's "Key admissions deadlines" widget. No visible inconsistency with the rest of the site in this pass.
+
+**Discoverability answer:** Not a discoverability problem on the evidence gathered here. Admissions is reachable in 1 tap from any page (bottom tab bar) and is additionally surfaced unprompted on the homepage itself via the deadlines widget and in the footer. If 5% of views is "low," the more likely explanations are demand-side (most visits are one-off school lookups, not admissions research) or a mismatch between when parents need this content (a narrow autumn/winter window) and when they're on the site — not a findability failure.
+
+## Friction points
+
+- **F1. Color-contrast failures on nav label, eyebrow, and deadline chip text**
+  - Evidence: axe-core `color-contrast` rule, impact `serious`, 13 nodes. Sample targets: `.Navigation-module__Pj2Xoq__tabActive .tabLabel`, `.AdmissionsView-module__HSIWdq__eyebrow`, `.AdmissionsView-module__HSIWdq__chipDeadline .chipTrackDeadline`.
+  - Criterion violated: WCAG 2.2 SC 1.4.3 Contrast (Minimum), AA.
+  - Argument: the affected elements include the deadline countdown chips — the single most load-bearing piece of information on this page (parents are here specifically to check "how many days until the deadline"). Low-vision parents reading this on a phone in poor lighting are the exact audience this feature is for.
+  - Severity guess: P1 (WCAG failure, so not capped at P2; serious axe impact on primary task-critical content).
+
+- **F2. Two cross-link CTA styles fall below the 24px touch-target minimum**
+  - Evidence: `getBoundingClientRect()` on all `main a` elements — "Build and compare your shortlist →" and "Look up your allocated school →" both measure 21px tall (vs. 42px for the other 4 CTA variants on the same page).
+  - Criterion violated: WCAG 2.2 SC 2.5.8 Target Size (Minimum), AA (24×24 CSS px, with only a narrow exception for links inline within a sentence — these render as standalone single-line CTAs, not text wrapped mid-paragraph, so the exception is doubtful).
+  - Argument: these are two of the twelve "recently added" cross-links meant to funnel admissions readers into the Search/Compare/Rankings tools — the exact conversion path this content exists to support. A tap target 3px under spec, inconsistent with sibling CTAs at 42px on the same page, adds avoidable mis-tap friction for a stressed parent thumbing through a countdown page.
+  - Severity guess: P2 (WCAG failure but a small, inconsistent-styling shortfall rather than a missing target).
+
+## Works well — keep
+
+- Admissions is discoverable in one tap from anywhere (bottom tab bar) and is proactively surfaced on the homepage (deadlines widget) and footer — this rules out "parents can't find it" as the likely explanation for low view share.
+- The 12 contextual cross-links from admissions timeline steps into Search/Compare/Rankings are well-targeted to the specific stage of the journey (e.g., "Compare performance to order your preferences" at the deadline step, not a generic link) — a good example of tool cross-linking done with intent rather than bolted on.
+- Heading hierarchy is clean (H1→H2→H3, no skipped levels), which matters for screen-reader users navigating a long timeline page by heading.
+- Visual style is consistent with the rest of the site (palette, card treatment, typography match the homepage) — no cohesion break found in this pass.
+
+## Axe results
+
+- `/admissions` @ 390×844: 1 violation — `color-contrast` (serious, 13 nodes)
+
+## Manual WCAG spot checks
+
+- Touch targets ≥24px on interactive elements: fail — 2 of the 12 cross-link CTAs measure 21px tall (see F2); bottom-nav tabs (56px) and sticky in-page nav links (35px) pass.
+- Keyboard: tab order, focus visibility (desktop only): not checked — mobile-only pass per brief.
+- Zoom 200% text reflow (desktop only): not checked — mobile-only pass per brief.
+
+## Screenshots
+
+- `j5-home-mobile-top.png`: homepage above the fold at 390×844, showing the bottom tab bar with an "Admissions" tab and the "Key admissions deadlines" widget with "Full admissions guide →" link — evidence for the discoverability finding.
+- `j5-admissions-mobile.png`: full-page screenshot of `/admissions` at 390×844, used for the cohesion and layout review.

docs/superpowers/specs/2026-07-02-ux-audit-report.md

@@ -0,0 +1,215 @@
+# SchoolCompare UX/UI Audit — 2026-07-02
+
+## Method summary
+
+Journey-led walk-through of the **live site** (schoolcompare.co.uk) via Playwright browser tools, at two viewports: **390×844 mobile (primary — 56% of traffic)** and **1440×900 desktop** (720×450 used as the 200%-zoom reflow proxy). Five journeys in traffic order — home→find-school (63% of entries), cold landing on a school page (SEO long tail), building a comparison (27% of views), rankings→shortlist (12%), admissions (5%, light pass) — followed by a cross-cutting cohesion pass comparing computed typography, colour, and component styles across all six page types, verified against `nextjs-app` source to distinguish "token exists but bypassed" from "no token exists".
+
+Every page state visited was scanned with **axe-core 4.10.2** (WCAG 2.2 A/AA rule set) plus manual checks: touch targets ≥24px (2.5.8), keyboard order and focus visibility, and 200% reflow. A finding is included only if it cites a Nielsen heuristic, a WCAG 2.2 AA failure, a mobile-usability standard, or an observed task-flow obstruction — no taste-only findings. Priorities are traffic-weighted using the 30-day analytics baseline: entries `/` 63% / `/compare` 20% / `/rankings` 6%; exits `/` 46% / `/compare` 32% / `/rankings` 13%; 56% mobile. Uplift bands are honest small/moderate/large indications — there is no funnel instrumentation to support percentages.
+
+Full evidence trail: `docs/superpowers/specs/2026-07-02-ux-audit-notes/` (six notes files; screenshots referenced by filename live in the session scratchpad, not committed).
+
+## What works today — keep
+
+These are strengths the fixes below must not regress:
+
+- **Name search is genuinely excellent.** "Welland Primary" → the correct school as sole top result, in 3 taps with instant loads — comfortably under the 15s target. Result cards are information-rich (Ofsted grade+year, RWM % with trend arrow, "+12 pts vs national", pupil count, LA) and adapt correctly to phase (Attainment 8 for secondary, RWM for primary).
+- **Full-postcode proximity search works, and works well** *(verified on 2026-07-02 recheck)* — typing a full postcode (e.g. `B91 3DL`) into the home search box yields "13 schools within 1.0 miles of B91 3DL", distance on every card, nearest-first ordering, a 0.5–5 mile radius selector, and a List/Map toggle; the "Schools near me" geolocation button offers the same without typing. Only partial input degrades (see P2.0).
+- **Search is the unmistakable primary action** — above the fold on both viewports, 70px tap target, plain-English placeholder, content order puts the task first.
+- **The primary (KS2) school page explains its data in plain English** — "End-of-primary-school tests taken by Year 6 pupils", the in-place "Why is combined lower?" explainer, legends on subject charts. This is the model the secondary template should copy.
+- **Everything is anchored to the national average** ("+14 pts", "National avg 39.1") — a non-specialist can judge good/bad without leaving the page.
+- **Graceful, honest missing-data handling** — COVID-cancellation notes, "contact the admissions authority" for absent cut-offs; no broken or empty UI anywhere data is missing.
+- **Ofsted sections are clear, current, and sourced** — grade + inspection date, the post-Sept-2024 grading-change note, link to the real Ofsted report.
+- **Compare's empty state is instructive and actionable** — "No schools selected" + "+ Add Schools to Compare" opening an in-page search modal; the 20% who enter cold can start immediately. The modal supports efficient multi-add (stays open, clears field) and accepts postcodes.
+- **State persistence is strong across the site** — compare selections survive navigation (localStorage) and are URL-encoded/deep-linkable; rankings restores filter, metric, *and* scroll position on back-navigation (the classic mobile task-killer check, passed cleanly).
+- **Compare's metric selector carries a plain-English caption** — jargon defined at point of use; the chart legend labels series by colour *and* name (WCAG 1.4.1 satisfied).
+- **Accessibility fundamentals are partly in place** — working skip link, logical tab order everywhere, strong 2px orange focus outlines on links/buttons, real `<table>` semantics on rankings, properly labelled rankings filters, clean heading hierarchy on admissions, no horizontal scroll at 200% reflow on any page tested.
+- **Admissions content is well-integrated** — reachable in one tap from anywhere, surfaced proactively on the homepage, with 12 stage-tailored cross-links into Search/Compare/Rankings that read as genuinely contextual.
+- **Cohesion anchors:** header/footer pixel-identical on all six pages; coral=primary / teal=secondary held without role collisions; rankings and compare share one phase-tab treatment; the deadline chip is byte-for-byte reused between home and admissions.
+
+## Findings
+
+### P0 — Urgent
+
+- **P0.1 — Colour-contrast failures on every main route, including primary data and primary CTAs** *(merges J1-F4, J2-F4, J3-F6, J4-F1, J5-F1)*
+  - Evidence: axe `color-contrast` (serious) on **all five routes**: home 6 nodes (active nav tab, `.btn`, how-it-works text) + 3 on results (`.btn-primary`, Ofsted badge); school template **13 nodes** (Back button, "View on map", active metric tab); compare 5 nodes (`.btn-primary`, active phase/nav tabs); rankings **100 nodes on desktop** — the teal metric values (`.valueCell strong`) in every row plus "+ Compare" links; admissions 13 nodes including the **deadline countdown chips**. Screenshots `j4-rankings-desktop.png`, `j5-admissions-mobile.png`.
+  - Criterion: WCAG 2.2 **1.4.3 Contrast (Minimum), AA** — failing on every main page.
+  - Argument: this is not chrome-only. On rankings the failing text is the ranking score itself — the entire reason a parent is on the page; on admissions it is the days-until-deadline chip — the page's most load-bearing fact; on home/compare it is the primary CTA styling. The mobile-primary audience reads this outdoors on phones, where low contrast bites everyone, not just low-vision users.
+  - Recommendation: adjust the failing token values once (`--accent-coral` on light text pairings, the teal-on-cream value colour, tint-background label colours) and re-run axe on all five routes. This is a token-level fix, not per-page work.
+  - Uplift: **accessibility compliance — large improvement** (clears the single biggest violation class, present on 100% of audited pages); secondary small positive effect on all engagement metrics via legibility for the 56% mobile share.
+
+- **P0.2 — School name (H1) is obscured by the map and the "+ Add to Compare" button on mobile — systemic to the school template** *(J2-F1)*
+  - Evidence: measured bounding boxes on both audited schools — Castle: map bottom 280px / H1 top 272px / compare-button top 286px / H1 bottom 309px; Welland: same pattern — leaving a ~6px legible sliver of the name. Screenshots `j2-school-mobile-fold.png`, `j2-welland-mobile-full.png`. Desktop is unaffected.
+  - Criterion: Nielsen #1 (visibility of system status) and #8; task-flow obstruction of cold-landing orientation; defeats the intent of WCAG 1.4.10 (content obscured at the primary viewport).
+  - Argument: school pages are the SEO landing template. A parent arriving from Google asks one question first — "is this the school I searched for?" — and the element that answers it is illegible on the majority viewport. This is the exact first-screen failure that produces an immediate back-to-Google bounce, on the template whose entire job is converting search traffic.
+  - Recommendation: restack the mobile hero so map, H1, and compare button occupy non-overlapping space (e.g. compare button below the identity block or docked, map height capped above the H1). One template, both school-detail components (see P2.6).
+  - Uplift: **school-page bounce-back-to-Google — decrease, moderate** (fixes the first-glance orientation on every SEO landing; the page content behind it is already strong, so retention should follow).
+
+### P1 — High
+
+- **P1.1 — Filter and Sort selects on home results have no accessible name** *(J1-F3)*
+  - Evidence: axe `select-name` (impact **critical**, 2 nodes) on `/?search=…` — the phase filter and sort selects. (Borderline P0 by the "clear WCAG failure on a main page" rule; held at P1 because it affects one page state and two controls.)
+  - Criterion: WCAG 2.2 **4.1.2 Name, Role, Value, Level A**.
+  - Argument: these are the controls a parent uses to narrow a mixed result set to "Primary" — a screen-reader user hears two anonymous comboboxes on the main journey's results view. Rankings labels its identical selects correctly, so this is an omission, not a pattern.
+  - Recommendation: associate visible `<label>`s (or `aria-label`) exactly as `/rankings` already does.
+  - Uplift: **accessibility compliance — moderate** (removes the only *critical*-impact violation found); minutes of effort.
+
+- **P1.2 — School pages offer no "nearby / similar schools" path — the compare value proposition has no on-ramp** *(J2-F2, corroborated by J3 tap-count)*
+  - Evidence: full-page snapshots of both school pages show no nearby/similar module (sections end Wellbeing → footer). Building a real 2-school comparison from a school page requires Compare → "+ Add School" → **manual name search** — 6 interactions total, and the parent must already know the competitor's name (`j3-compare-two-schools-mobile.png`, `j2-compare-oneschool-mobile.png`).
+  - Criterion: Nielsen #7 (flexibility & efficiency); task-flow obstruction — the site's differentiator is unreachable from its SEO entry template without prior knowledge.
+  - Argument: a parent cold-landing on one school has maximum comparison intent and zero alternatives on screen. The site sends them back to Google to discover the other local schools — Google then keeps them.
+  - Recommendation: add a "Schools nearby" module to the detail template (nearest same-phase schools by lat/long — data already exists) with per-row "+ Compare"; the same list can power an in-modal "nearby" tab on `/compare`.
+  - Uplift: **school-page bounce-back-to-Google — decrease, moderate**, and **compare 32% exit — decrease, small-to-moderate** (creates the missing bridge between the two biggest content surfaces).
+
+- **P1.3 — Shared compare links are silently overridden by the recipient's own localStorage** *(J3-F4)*
+  - Evidence: navigating to `/compare?urns=142161,113105` with a different stored selection resolved the page and URL back to the stored set; the shared schools never appeared. Reproduced; only clearing localStorage restored the link's intent.
+  - Criterion: Nielsen #1 (visibility of system status); task-flow obstruction of an advertised primary feature (the Share button).
+  - Argument: 20% of sessions *enter* on `/compare`, many via shared links. A parent shares a shortlist with a partner; if the partner has ever used compare, they silently see their own old schools with no notice — the collaboration breaks and neither party knows why.
+  - Recommendation: explicit URL params must win over localStorage (persist *after* honouring the URL); optionally prompt "Replace your saved comparison with the shared one?".
+  - Uplift: **compare 32% exit rate — decrease, small-to-moderate** (repairs a confusing dead end at a high-intent entry point; band limited by the shared-link share of entries being unmeasured).
+
+- **P1.4 — Trend/results charts expose no text alternative to assistive tech** *(merges J2-F5, J3-F3)*
+  - Evidence: axe `role-img-alt` (serious) on the `<canvas>` on both school pages and populated `/compare`; `aria-label` is null at both viewports.
+  - Criterion: WCAG 2.2 **1.1.1 Non-text Content, Level A** — on the two main content templates.
+  - Argument: the site's key visualisation — performance over time — announces nothing to a screen-reader parent. Compare's data table partially mitigates; the school-page trend chart has only a collapsed raw-data expander.
+  - Recommendation: generate a descriptive `aria-label` per chart ("Attainment 8, 2019–2025: school 53.4 vs national 39.1, school above national every year") — the data is already in the component; one shared chart wrapper fixes all instances.
+  - Uplift: **accessibility compliance — moderate** (clears a Level-A class on the highest-traffic templates).
+
+- **P1.5 — Horizontally-scrollable regions are keyboard-inaccessible site-wide** *(merges J1-F5(a), J3-F2, J4-F4)*
+  - Evidence: axe `scrollable-region-focusable` (serious) on the home countdown rail, the compare detailed-table wrapper, and (manually confirmed, same pattern) the rankings table wrapper — `overflow-x: auto` with no `tabindex="0"`, no role/label.
+  - Criterion: WCAG 2.2 **2.1.1 Keyboard, Level A**.
+  - Argument: keyboard-only users literally cannot reach the off-screen columns — which on compare and rankings contain the actual comparison data (see P2.1). Three instances of one missing pattern.
+  - Recommendation: `tabindex="0"` + `role="region"` + `aria-label` on every overflow wrapper; one shared wrapper component prevents recurrence.
+  - Uplift: **accessibility compliance — moderate**; unlocks the data for keyboard users wherever P2.1's layout still requires scrolling.
+
+- **P1.6 — Search offers no autocomplete/typeahead** *(J1-F1)*
+  - Evidence: typing "Welland Primary" (both viewports) produced no suggestions at any keystroke — raw input until submit. The compare modal's live-results search proves the capability exists in the codebase.
+  - Criterion: Nielsen #6 (recognition rather than recall); NN-g site-search guidance; error prevention.
+  - Argument: parents rarely know a school's exact registered name ("Welland" vs "Welland Church of England…"). With no suggestions, a misspelling means a zero-result dead end on the 63%-of-entries path, and every search costs full typing plus a blind submit.
+  - Recommendation: reuse the compare modal's live-search behaviour on the home search box (debounced suggestions: school name + LA, and a "search this postcode" row for postcode-shaped input).
+  - Uplift: **home 46% exit rate — decrease, moderate** and **share of sessions reaching a school page — increase, moderate** (assists the majority entry path at its first interaction).
+
+- **P1.7 — The mobile hero omits the value proposition entirely** *(J1-F6)*
+  - Evidence: desktop shows the "UPDATED WITH 2026/2027 ADMISSIONS RESULTS" trust badge and the "24,000+ schools… side by side, in one place" subheading; mobile renders only the poetic H1 ("Every school in England, *compared.*") and a bare search box (`j1-home-desktop-fold.png` vs `j1-home-mobile-fold.png`).
+  - Criterion: mobile content parity; Nielsen #1 — first-visit orientation ("what is this, why trust it") absent on the primary viewport.
+  - Argument: 63% of entries land here and 56% of traffic is mobile; a first-time visitor gets no statement of coverage, data source, or freshness above the fold. Weak value proposition at first glance is a classic bounce driver and plausibly a material slice of the 46% exit rate.
+  - Recommendation: restore a compact version of the badge + one-line value prop under the mobile H1 (one text block; the fold has room above the deadline rail).
+  - Uplift: **home 46% exit rate — decrease, small-to-moderate** (copy-only change aimed squarely at first-impression exits).
+
+### P2 — Medium
+
+- **P2.0 — Partial or malformed postcode input silently falls back to text search with no distances** *(J1-F2, corrected on 2026-07-02 recheck — the original P0 claim that postcode search lacks proximity was wrong: a full postcode works, see "What works today")*
+  - Evidence: the search submit handler routes input through a strict full-postcode regex (`FilterBar.tsx` `isValidPostcode()`). `B91 3DL` → `/?postcode=…&radius=1`: "13 schools within 1.0 miles", distance on every card, nearest-first, radius selector, map toggle (`j1-fullpostcode-results-mobile.png`). But `B91 3` (an outcode+sector a parent plausibly types) → `/?search=B91+3`: text-matched, relevance-ordered, distance-less, mixed-phase results led by a secondary school (`j1-postcode-results-mobile.png`) — with no notice that a different, better mode exists.
+  - Criterion: Nielsen #1 (visibility of system status — silent mode switch) and #9 (help users recognise and recover); error tolerance for the "or postcode" promise in the placeholder.
+  - Argument: the two result pages look near-identical, so a parent who types "B91" or fat-fingers a character never learns that proximity search exists; they just get an apparently arbitrary list on the highest-traffic path.
+  - Recommendation: detect postcode-*shaped* input that fails full validation (outcode/sector patterns, near-miss typos) and either geocode it anyway (postcodes.io supports outcodes) or show an inline nudge — "Enter a full postcode like B91 3DL to see schools by distance."
+  - Uplift: **home 46% exit rate — decrease, small-to-moderate** (recovers the postcode-search subset who type partial input; the full-postcode path already works, which caps the band).
+
+- **P2.1 — Mobile data tables hide the decision-critical columns behind unaffordanced horizontal scroll** *(merges J3-F1, J4-F3)*
+  - Evidence: compare's "Detailed Comparison" table is 626px inside a 324px wrapper — only Year + the first school's column visible, no scroll cue (`j3-compare-two-schools-mobile.png`); rankings shows RANK/SCHOOL/AREA but the metric % (the ranking's justification) sits off-screen (scrollWidth 551 > 324) (`j4-rankings-mobile.png`).
+  - Criterion: mobile-usability standard (primary content hidden off-viewport); Nielsen #6 — the user must memorise school A's numbers while scrolling to school B.
+  - Argument: on compare the side-by-side promise is defeated on the majority viewport (a parent may believe the second school's data is missing); on rankings the list shows names without the scores that rank them. Softened by compare's stacked metric cards, which do show both schools — hence P2 not P1.
+  - Recommendation: on ≤390px, prioritise the metric column next to the school name (rankings) and use a per-metric stacked layout or sticky first column + visible scroll affordance (compare).
+  - Uplift: **compare 32% exit — decrease, small**; **rankings→school click-through — increase, small**.
+
+- **P2.2 — Rankings on mobile removes the View/+Compare actions** *(J4-F2)*
+  - Evidence: the Action column `td` computes `display:none` at 390px; shortlisting from rankings is desktop-only.
+  - Criterion: task-flow obstruction (the journey is rankings → *shortlist*); Nielsen #7.
+  - Argument: a parent on a phone scanning the good local schools cannot build a comparison set from the list — each school needs a page visit and a different route in, on the majority device class.
+  - Recommendation: keep a compact "+" compare affordance per row on mobile (the bottom-tab badge already communicates basket state).
+  - Uplift: **rankings→school click-through / compare usage — increase, small-to-moderate** (restores the journey's intended endpoint on mobile).
+
+- **P2.3 — Metric jargon unexplained at the point of first contact** *(merges J2-F3, J4-F5)*
+  - Evidence: secondary school pages show "Attainment 8 score 53.4", "EBacc average point score 4.72" with zero definitions/tooltips (the plain-English definition exists — but only on `/compare`); rankings *defaults* to "higher standard" (greater depth) without explaining it, so the top school's headline reads "63.0%" in the terms parents least understand (`j2-school-mobile-gcse.png`).
+  - Criterion: Nielsen #2 and #10.
+  - Argument: a non-specialist cannot judge whether 53.4 or 4.72 is good; a parent may misread 63% at higher standard as mediocre when it is exceptional. The site owns the explanations and withholds them at first contact. The primary KS2 page proves in-place explanation works.
+  - Recommendation: surface the existing `/compare` metric definitions on school pages (caption or expander beside each figure); default rankings to "expected standard" with "higher standard" as an explained option.
+  - Uplift: **school-page bounce-back-to-Google — decrease, small-to-moderate** (comprehension is the retention lever for the secondary template).
+
+- **P2.4 — Add-school modal lacks dialog semantics and drops focus** *(J3-F5)*
+  - Evidence: no `role="dialog"`/`aria-modal`; after a keyboard add, focus lands on `document.body`; after Escape-close, focus is on `body`, not the trigger.
+  - Criterion: WCAG 2.2 **4.1.2 (A)** + **2.4.3 Focus Order (A)**.
+  - Argument: screen-reader users aren't told a dialog opened; keyboard users re-tab from the page top after every add — compounding friction on the flow every comparison depends on.
+  - Recommendation: dialog role + focus trap + focus restoration to the trigger on close; keep focus in the search field after an add (the multi-add UX is otherwise good).
+  - Uplift: **accessibility compliance — moderate**.
+
+- **P2.5 — School-page sticky section nav clips its last items on mobile** *(J2-F7)*
+  - Evidence: at 390px, "History" and "Wellbeing" render off-screen; the 448px nav row is clipped, not scrollable (document scrollWidth stays 390) (`j2-school-mobile-gcse.png`).
+  - Criterion: mobile usability — interactive content unreachable in-viewport; Nielsen #7.
+  - Argument: 2 of 6 jump links are dead weight on the primary viewport; parents hunting SEN/Wellbeing data must scroll-hunt instead.
+  - Recommendation: make the nav row horizontally scrollable with an overflow affordance (fade/chevron), or wrap to two lines.
+  - Uplift: **school-page bounce-back-to-Google — decrease, small**.
+
+- **P2.6 — Two parallel school-detail components have drifted; a duplicate `.btn` rule makes button geometry unpredictable** *(merges cohesion F1, F2)*
+  - Evidence: `SchoolDetailView` vs `SecondarySchoolDetailView` hardcode divergent values for the same controls (`.btnAdd` radius 8/pad 12×20 vs radius 6/pad 8×16; badge radii 4 vs 3; tab padding differs). Separately `globals.css` defines `.btn` **twice** (lines 151 and 1558) with `.btn-sm` declared between them — source order makes the second definition override `.btn-sm`, so "small" buttons render at 12×24px padding (live-verified on rankings).
+  - Criterion: Nielsen #4 (consistency & standards); maintenance hazard.
+  - Argument: parents moving between primary and secondary school pages (the compare flow mixes phases) meet the same controls at subtly different sizes/corners; and any future button edit has a 50/50 chance of landing in the dead rule.
+  - Recommendation: dedupe `.btn` to one definition (restoring `.btn-sm`); converge both school-detail modules on shared tokens (`--radius-md`), ideally one shared component.
+  - Uplift: **school-page bounce-back-to-Google — decrease, small** (visual consistency is a trust signal on the template that must convert cold traffic); also removes a recurring source of future drift.
+
+- **P2.7 — Design tokens exist but are bypassed system-wide** *(merges cohesion F3, F4, F5)*
+  - Evidence: **15 distinct raw radius values** in module CSS against a 4-token scale (no pill token for the 21× `999px` uses); **four different H1 sizes** across five pages (36/44/48/52px), each a separate hardcoded `clamp()`; the "switch view/phase" control has **three different treatments** (rounded segmented on home, square tabs on rankings/compare, underline strip on admissions).
+  - Criterion: Nielsen #4.
+  - Argument: corner rounding, title scale, and segmented controls are the primary "one system" cues; the drift reads as many hands and erodes the data-source credibility the site trades on. (Rankings↔compare already share one tab treatment — the model to extend.)
+  - Recommendation: token-enforcement pass (map raw radii to tokens; add `--radius-pill`), create hero/section title tokens, consolidate the segmented control on the rankings/compare pattern.
+  - Uplift: **home 46% exit rate — decrease, small** (a visibly coherent system reads as a credible data source at first glance); primarily protects future velocity.
+
+- **P2.8 — Two admissions cross-link CTA variants are below the 24px touch-target minimum** *(J5-F2)*
+  - Evidence: "Build and compare your shortlist →" and "Look up your allocated school →" measure **21px** tall vs 42px for the other four CTA variants on the same page (getBoundingClientRect).
+  - Criterion: WCAG 2.2 **2.5.8 Target Size (Minimum), AA** (rendered as standalone CTAs, so the inline-text exception is doubtful).
+  - Argument: these are the conversion path the admissions content exists to support; a 3px-under-spec target inconsistent with siblings adds mis-tap friction for a stressed parent. (Admissions-only, but a WCAG failure, so it stays P2 per the prioritisation rules.)
+  - Recommendation: apply the 42px CTA style to all twelve cross-links.
+  - Uplift: **accessibility compliance — small**.
+
+### P3 — Nice-to-have
+
+- **P3.1 — Mixed-phase selection reports "Comparing 2 schools" while rendering one** *(J3-F7)* — the second school hides behind a "Secondary (1)" tab with no explanation (Nielsen #1/#2). Add one line of copy ("Shown separately — KS2 and GCSE metrics differ"). Uplift: compare exit, small.
+- **P3.2 — Compare remove (×) is instant with no undo** *(J3-F8)* — accidental tap on the 28px target silently loses a searched-for school (Nielsen #3). Add a brief undo toast. Uplift: compare exit, small.
+- **P3.3 — "Add to Compare" gives no toast/live-region confirmation** *(J2-F8)* — feedback is only a button relabel in the (currently overlapped) hero zone plus a small tab badge; no `role=status` fires (Nielsen #1). Largely mitigated once P0.2 lands. Uplift: compare usage, small.
+- **P3.4 — Inconsistent focus indicators on form controls** *(merges J1 search-input note, J4-F8)* — filter selects suppress the outline for a faint 1.5px border hue shift; the home search input uses a 0.12-alpha ring — both far weaker than the site's standard 2px orange outline (WCAG 2.4.11 borderline). Apply the standard outline. Uplift: accessibility compliance, small.
+- **P3.5 — Rankings table headers aren't sortable and lack `scope`** *(J4-F7)* — users expect ranked tables to sort on header click (Nielsen #4); `<th>` cells lack `scope`/`aria-sort` (WCAG 1.3.1 best practice). Uplift: rankings→school CTR, small.
+- **P3.6 — 33-option metric dropdown is a flat jargon list** *(J4-F6)* — GPS/EAL/SEN abbreviations, ungrouped (Nielsen #6). Group by theme (Results / Progress / Cohort) with plain-language labels. Uplift: rankings→school CTR, small.
+- **P3.7 — Home deadline rail defaults its scroll to the least-urgent card** *(J1-F5(b))* — the nearest deadline (121 days) hides behind less urgent ones (Nielsen #1). Order/scroll to soonest-first. Uplift: home exit, small.
+- **P3.8 — School trend chart has no legend for the national series; badge overlaps a heading** *(J2-F6)* — the grey dashed line is unexplained (the primary page's charts *do* carry legends — inconsistent); "Nat avg 39.1" overlaps the section heading. Uplift: school-page bounce, small.
+- **P3.9 — Residual colour/type token drift** *(cohesion F6, F7, F8)* — pressed-coral exists as three hexes (`#e07256`/`#c45a3f`/`#d4654a`), an off-token gold `#b8920e` on the school-page cross-link badge, H3s render in body font while H2s are Playfair, and school-detail tables use an 11/13px type scale vs 12/15px on rankings/compare. Fold into the P2.7 token pass. Uplift: school-page bounce-back-to-Google, decrease, small.
+
+## Accessibility summary
+
+Axe-core 4.10.2, WCAG 2.2 A/AA rule set. Desktop serves the same DOM/CSS, so mobile results apply at both viewports unless noted.
+
+| Page / state | Viewport | Violations | Detail |
+|---|---|---|---|
+| `/` (initial) | 390×844 | 2 | `color-contrast` (serious, 6 nodes); `scrollable-region-focusable` (serious, 1) |
+| `/?search=Welland+Primary` | 390×844 | 2 | `color-contrast` (serious, 3); **`select-name` (critical, 2)** |
+| `/school/…castle` (secondary) | both | 2 | `color-contrast` (serious, 13); `role-img-alt` (serious, 1) |
+| `/school/…welland` (primary) | 390×844 | 1 | `role-img-alt` (serious, 1) |
+| `/compare` (empty) | 390×844 | 1 | `color-contrast` (serious, 2) |
+| `/compare?urns=…` (2 schools) | 390×844 | 3 | `color-contrast` (serious, 5); `role-img-alt` (serious, 1); `scrollable-region-focusable` (serious, 1) |
+| `/rankings` (default & filtered) | 390×844 | 1 | `color-contrast` (serious, 2) |
+| `/rankings` | 1440×900 | 1 | `color-contrast` (serious, **100 nodes** — metric values in every row) |
+| `/admissions` | 390×844 | 1 | `color-contrast` (serious, 13 — incl. deadline chips) |
+
+**Manual checks:** Touch targets ≥24px — pass on all core paths (smallest: compare × at 28px, Back at 64×28) **except** two admissions CTAs at 21px (P2.8). Keyboard — order logical everywhere with a strong 2px outline on links/buttons; gaps: unlabelled home-results selects (P1.1), modal focus loss (P2.4), suppressed outlines on filter selects and the faint search-input ring (P3.4), keyboard-unreachable scroll regions (P1.5). 200% reflow — **pass on every page tested** (no horizontal scroll at 720px; tables retain contained scroll, a recognised 1.4.10 exception).
+
+**Overall WCAG 2.2 AA posture:** not currently conformant. Four violation classes account for everything axe found — contrast (every route), missing chart text alternatives (Level A), keyboard-inaccessible scroll regions (Level A), unlabelled selects (Level A, critical) — plus manual findings on target size, focus appearance, and dialog semantics. All are pattern-level fixes; none require redesign. The foundations (skip links, tab order, semantics, reflow, labels on rankings) are solid, which is why the fix list is short relative to the violation node counts.
+
+## Suggested implementation sequence
+
+Batches ordered by uplift-per-effort; each is a plausible standalone follow-up project.
+
+**Batch 1 — WCAG compliance sweep (small effort, large compliance uplift).**
+P0.1 contrast token fixes; P1.1 label the two selects; P1.4 chart `aria-label`s via one shared wrapper; P1.5 `tabindex`/role on the three scroll wrappers; P2.4 dialog semantics + focus restoration; P2.8 42px CTAs on admissions; P3.4 standard focus outlines. Mostly CSS-variable and attribute changes; re-run the axe harness on all five routes as the acceptance check. Clears every axe violation class found.
+
+**Batch 2 — School-template mobile fold (small effort, direct SEO-retention uplift).**
+P0.2 un-overlap the H1/map/compare button; P2.5 scrollable section nav; P3.8 trend-chart legend + badge overlap; P3.3 add-confirmation live region. One template, all SEO landings.
+
+**Batch 3 — Home search assistance (small-moderate effort, home-funnel lever).**
+P1.6 autocomplete on the home search (reuse the compare modal's live search); P2.0 graceful handling of partial/malformed postcodes (geocode outcodes or nudge toward a full postcode — the full-postcode proximity search already works); P1.7 mobile value-prop line. Together these target the 46% home exit rate from three directions.
+
+**Batch 4 — Discovery and sharing bridges (moderate effort, compare-funnel uplift).**
+P1.2 "Schools nearby" module on school pages (feeds compare); P1.3 URL-over-localStorage precedence for shared links; P2.2 mobile +Compare on rankings rows; P3.1/P3.2 compare state-clarity nits.
+
+**Batch 5 — Comprehension pass (small-moderate effort).**
+P2.3 reuse `/compare` metric definitions on school pages and default rankings to "expected standard"; P2.1 mobile table layouts (sticky first column / stacked metrics); P3.5/P3.6 rankings sort affordance + grouped metric picker; P3.7 deadline-rail ordering.
+
+**Batch 6 — Cohesion & token enforcement (housekeeping, protects velocity).**
+P2.6 dedupe `.btn`, converge the two school-detail components; P2.7 radius/title/segmented-control tokenisation; P3.9 residual colour/type drift. Best done after Batches 1–2 so the new token values land once.

e2e/.gitignore

@@ -0,0 +1,3 @@
+node_modules/
+test-results/
+playwright-report/

e2e/package-lock.json

@@ -0,0 +1,78 @@
+{
+  "name": "schoolcompare-e2e",
+  "version": "1.0.0",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {
+    "": {
+      "name": "schoolcompare-e2e",
+      "version": "1.0.0",
+      "devDependencies": {
+        "@playwright/test": "^1.49.0"
+      }
+    },
+    "node_modules/@playwright/test": {
+      "version": "1.61.1",
+      "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.61.1.tgz",
+      "integrity": "sha512-8nKv6+0RJSL9FE4jYOEGXnPeM/Hg12qZpmqzZjRh3qM0Y7c3z1mrOTfFLids72RDQYVh9WpLEfR5WdpNX4fkig==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "playwright": "1.61.1"
+      },
+      "bin": {
+        "playwright": "cli.js"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/fsevents": {
+      "version": "2.3.2",
+      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz",
+      "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==",
+      "dev": true,
+      "hasInstallScript": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
+      }
+    },
+    "node_modules/playwright": {
+      "version": "1.61.1",
+      "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.61.1.tgz",
+      "integrity": "sha512-DWnY5o3YbLWK4GovuAVwpqL+1VwGNdUGrRr++8j8PtQQzvAVZUIMjKQ90fY689sEJZJBbZVw1rXaOKSTitkzPQ==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "playwright-core": "1.61.1"
+      },
+      "bin": {
+        "playwright": "cli.js"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "optionalDependencies": {
+        "fsevents": "2.3.2"
+      }
+    },
+    "node_modules/playwright-core": {
+      "version": "1.61.1",
+      "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.61.1.tgz",
+      "integrity": "sha512-h7Qlt6m4REp25qvIdvbDtVmD4LqVXfpRxhORv9L0jzETM05p4fuPJ3dKyuSXQxDSbXnmS79HAgi9589lGSpLkg==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "bin": {
+        "playwright-core": "cli.js"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    }
+  }
+}

e2e/package.json

@@ -0,0 +1,12 @@
+{
+  "name": "schoolcompare-e2e",
+  "version": "1.0.0",
+  "private": true,
+  "description": "Journey tests run against staging as the production promotion gate",
+  "scripts": {
+    "test": "playwright test"
+  },
+  "devDependencies": {
+    "@playwright/test": "^1.49.0"
+  }
+}

e2e/playwright.config.ts

@@ -0,0 +1,13 @@
+import { defineConfig } from '@playwright/test';
+
+export default defineConfig({
+  testDir: './tests',
+  timeout: 60_000,
+  retries: 1,
+  workers: 2,
+  reporter: process.env.CI ? 'list' : 'html',
+  use: {
+    baseURL: process.env.BASE_URL || 'http://localhost:3000',
+    trace: 'retain-on-failure',
+  },
+});

e2e/tests/journeys.spec.ts

@@ -0,0 +1,147 @@
+import { test, expect, Page } from '@playwright/test';
+
+/**
+ * Journey tests for SchoolCompare, run against the staging environment as the
+ * gate before promotion to production. They assert stable data invariants
+ * (results exist, key UI renders) rather than exact numbers, so routine data
+ * refreshes don't break the pipeline.
+ */
+
+async function searchByName(page: Page, query: string) {
+  await page.goto('/');
+  const searchInput = page.getByPlaceholder('School name or postcode').first();
+  await searchInput.fill(query);
+  await searchInput.press('Enter');
+  await page.waitForURL(/search=|postcode=/);
+}
+
+function schoolLinks(page: Page) {
+  return page.locator('a[href^="/school/"]');
+}
+
+test('home page loads with hero search', async ({ page }) => {
+  await page.goto('/');
+  await expect(page.locator('h1').first()).toBeVisible();
+  await expect(page.getByPlaceholder('School name or postcode').first()).toBeVisible();
+});
+
+test('searching by name returns school results', async ({ page }) => {
+  await searchByName(page, 'primary');
+  await expect(schoolLinks(page).first()).toBeVisible({ timeout: 15_000 });
+  expect(await schoolLinks(page).count()).toBeGreaterThan(1);
+});
+
+test('searching by postcode returns nearby schools', async ({ page }) => {
+  await searchByName(page, 'B1 1BB');
+  await expect(schoolLinks(page).first()).toBeVisible({ timeout: 15_000 });
+});
+
+test('school detail page renders name and performance data', async ({ page }) => {
+  await searchByName(page, 'primary');
+  const firstSchool = schoolLinks(page).first();
+  await expect(firstSchool).toBeVisible({ timeout: 15_000 });
+  await firstSchool.click();
+  await page.waitForURL(/\/school\//);
+  await expect(page.locator('h1').first()).toBeVisible();
+  // The detail page renders at least one *visible* chart canvas. Plain
+  // .first() is wrong here: the admissions card stacks its year/trend views
+  // in one grid cell and keeps the inactive view's canvas visibility:hidden
+  // by design, and that canvas comes first in the DOM.
+  await expect(page.locator('canvas:visible').first()).toBeVisible({ timeout: 15_000 });
+});
+
+test('school hero map opens fullscreen on mobile without the Fullscreen API', async ({ page }) => {
+  // iOS Safari has no Element.requestFullscreen; the map must fall back to a
+  // CSS overlay. Simulate that by removing the API before any page script runs.
+  await page.setViewportSize({ width: 390, height: 844 });
+  await page.addInitScript(() => {
+    // @ts-expect-error deliberate API removal
+    delete Element.prototype.requestFullscreen;
+  });
+
+  await searchByName(page, 'primary');
+  const firstSchool = schoolLinks(page).first();
+  await expect(firstSchool).toBeVisible({ timeout: 15_000 });
+  await firstSchool.click();
+  await page.waitForURL(/\/school\//);
+
+  const openMap = page.getByRole('button', { name: 'Open full map' });
+  await expect(openMap).toBeVisible({ timeout: 15_000 });
+  await openMap.click();
+
+  const closeMap = page.getByRole('button', { name: 'Close map' });
+  await expect(closeMap).toBeVisible();
+  await closeMap.click();
+  await expect(openMap).toBeVisible();
+});
+
+test('comparing two schools shows both side by side', async ({ page }) => {
+  // Collect two school URNs from search results, then load the share URL
+  await searchByName(page, 'primary');
+  await expect(schoolLinks(page).first()).toBeVisible({ timeout: 15_000 });
+  const hrefs = await schoolLinks(page).evaluateAll((links) =>
+    links.map((l) => (l as HTMLAnchorElement).getAttribute('href') || '')
+  );
+  const urns = [...new Set(hrefs.map((h) => h.match(/\/school\/(\d+)/)?.[1]).filter(Boolean))];
+  expect(urns.length).toBeGreaterThanOrEqual(2);
+
+  await page.goto(`/compare?urns=${urns[0]},${urns[1]}`);
+  // Both schools' detail links should render in the comparison view
+  await expect(page.locator(`a[href*="${urns[0]}"]`).first()).toBeVisible({ timeout: 15_000 });
+  await expect(page.locator(`a[href*="${urns[1]}"]`).first()).toBeVisible();
+});
+
+test('compare chart on mobile shows school chips with tap-to-focus', async ({ page }) => {
+  await page.setViewportSize({ width: 390, height: 844 });
+
+  await searchByName(page, 'primary');
+  await expect(schoolLinks(page).first()).toBeVisible({ timeout: 15_000 });
+  const hrefs = await schoolLinks(page).evaluateAll((links) =>
+    links.map((l) => (l as HTMLAnchorElement).getAttribute('href') || '')
+  );
+  const urns = [...new Set(hrefs.map((h) => h.match(/\/school\/(\d+)/)?.[1]).filter(Boolean))];
+  expect(urns.length).toBeGreaterThanOrEqual(2);
+
+  await page.goto(`/compare?urns=${urns[0]},${urns[1]}`);
+  await expect(page.locator('canvas:visible').first()).toBeVisible({ timeout: 15_000 });
+
+  // The mobile chart legend renders one chip per school inside the chart card.
+  const chipGroup = page.getByRole('group', { name: /highlight a school/i });
+  const chips = chipGroup.getByRole('button');
+  await expect(chips).toHaveCount(2);
+
+  // Tapping a chip focuses that school's line; tapping again releases it.
+  await chips.first().click();
+  await expect(chips.first()).toHaveAttribute('aria-pressed', 'true');
+  await chips.first().click();
+  await expect(chips.first()).toHaveAttribute('aria-pressed', 'false');
+});
+
+test('rankings page loads a populated table', async ({ page }) => {
+  await page.goto('/rankings');
+  await expect(page.getByRole('heading', { name: /rankings/i }).first()).toBeVisible();
+  const rows = page.locator('table tbody tr');
+  await expect(rows.first()).toBeVisible({ timeout: 15_000 });
+  expect(await rows.count()).toBeGreaterThan(5);
+});
+
+test('rankings stay populated after picking a specific year', async ({ page }) => {
+  // Years are academic-year codes (e.g. 201819); the API must accept them
+  // as the `year` query param rather than rejecting with a 422.
+  await page.goto('/rankings');
+  const yearSelect = page.locator('#year-select');
+  await expect(yearSelect).toBeVisible({ timeout: 15_000 });
+
+  // Pick the last option — the most recent explicit year. The default view
+  // already proved this year has rows, so an empty table after selecting it
+  // can only mean the year param was rejected. (The oldest year is no good
+  // here: staging doesn't always carry the full data history.)
+  const yearValue = await yearSelect.locator('option').last().getAttribute('value');
+  expect(yearValue).toBeTruthy();
+  await yearSelect.selectOption(yearValue!);
+  await page.waitForURL(/year=/);
+
+  const rows = page.locator('table tbody tr');
+  await expect(rows.first()).toBeVisible({ timeout: 15_000 });
+  expect(await rows.count()).toBeGreaterThan(5);
+});

mockups/admissions-chartjs-check.html

@@ -0,0 +1,74 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>Admissions trend — Chart.js render check</title>
+<script src="https://cdn.jsdelivr.net/npm/chart.js@4.5.1/dist/chart.umd.min.js"></script>
+<link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Playfair+Display:wght@600&display=swap" rel="stylesheet">
+<style>
+  :root{
+    --bg-primary:#faf7f2;--bg-secondary:#f3ede4;--bg-card:#fff;
+    --text-primary:#1a1612;--text-secondary:#5c564d;--text-muted:#6d685f;
+    --accent-coral:#e07256;--border:#e5dfd5;--shadow:0 2px 8px rgba(26,22,18,.06);
+  }
+  *{margin:0;padding:0;box-sizing:border-box}
+  body{font-family:'DM Sans',sans-serif;background:var(--bg-primary);color:var(--text-primary);padding:40px 20px}
+  .wrap{max-width:900px;margin:0 auto}
+  .card{background:#fff;border:1px solid var(--border);border-radius:16px;box-shadow:var(--shadow);padding:28px}
+  .head{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin-bottom:1.25rem}
+  .title{font-family:'Playfair Display',serif;font-weight:600;font-size:22px}
+  .seg{display:inline-flex;background:var(--bg-secondary);border-radius:999px;padding:3px;gap:2px}
+  .seg button{border:none;background:none;cursor:pointer;font:inherit;font-size:13px;font-weight:600;color:var(--text-muted);padding:6px 14px;border-radius:999px}
+  .seg button[aria-pressed="true"]{background:#fff;color:var(--text-primary);box-shadow:var(--shadow)}
+  .cap{font-size:13px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--text-muted);margin-bottom:.5rem}
+  .chartWrap{width:100%;height:200px}
+  .summary{font-size:16px;color:var(--text-secondary);margin-top:1.25rem;padding-top:1.1rem;border-top:1px solid var(--border)}
+  .summary strong{color:var(--text-primary)}
+</style>
+</head>
+<body>
+<div class="wrap">
+  <div class="card">
+    <div class="head">
+      <div class="title">How Hard to Get Into This School</div>
+      <div class="seg"><button aria-pressed="false">This year</button><button aria-pressed="true">13-year trend</button></div>
+    </div>
+    <div class="cap">First-choice offer rate</div>
+    <div class="chartWrap"><canvas id="c"></canvas></div>
+    <p class="summary">This year (2026/27), <strong>30</strong> families put it first for <strong>30</strong> places — 101 applications in total.</p>
+  </div>
+</div>
+<script>
+  const labels = ['2014/15','2015/16','2016/17','2017/18','2018/19','2019/20','2020/21','2021/22','2022/23','2023/24','2024/25','2025/26','2026/27'];
+  const values = [64,74,63,59,45,69,66,93,100,100,90,64,80];
+  const lastIdx = values.length-1;
+  const lo=Math.min(...values),hi=Math.max(...values);
+  const padded=Math.max(5,Math.round((hi-lo)*0.25));
+  const yMin=Math.max(0,Math.floor((lo-padded)/5)*5);
+  const yMax=Math.min(100,Math.ceil((hi+padded)/5)*5);
+  new Chart(document.getElementById('c'),{
+    type:'line',
+    data:{labels,datasets:[{
+      label:'First-choice offer rate',data:values,clip:false,
+      borderColor:'#e07256',backgroundColor:'rgba(224,114,86,0.10)',
+      borderWidth:2.5,tension:0.3,fill:true,
+      pointRadius:values.map((_,i)=>i===lastIdx?5:3),
+      pointBackgroundColor:'#e07256',pointBorderColor:'#fff',
+      pointBorderWidth:values.map((_,i)=>i===lastIdx?2:0),pointHoverRadius:6,
+    }]},
+    options:{
+      responsive:true,maintainAspectRatio:false,
+      layout:{padding:{top:8}},
+      interaction:{mode:'index',intersect:false},
+      plugins:{legend:{display:false},title:{display:false},
+        tooltip:{backgroundColor:'rgba(26,22,18,0.92)',padding:10,callbacks:{label:ctx=>`First-choice offers: ${Math.round(ctx.parsed.y)}%`}}},
+      scales:{
+        y:{min:yMin,max:yMax,grid:{color:'rgba(0,0,0,0.05)'},ticks:{font:{size:11},maxTicksLimit:5,callback:v=>`${v}%`}},
+        x:{grid:{display:false},ticks:{font:{size:11},autoSkip:true,maxRotation:0,autoSkipPadding:16}},
+      },
+    },
+  });
+</script>
+</body>
+</html>

mockups/admissions-history.html

@@ -0,0 +1,312 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>Multi-year admissions — mockups</title>
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link href="https://fonts.googleapis.com/css2?family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,600;9..40,700&family=Playfair+Display:wght@500;600;700&display=swap" rel="stylesheet">
+<style>
+  :root{
+    --bg-primary:#faf7f2; --bg-secondary:#f3ede4; --bg-card:#fff;
+    --text-primary:#1a1612; --text-secondary:#5c564d; --text-muted:#6d685f;
+    --accent-coral:#e07256; --accent-coral-dark:#c45a3f; --accent-teal:#2d7d7d;
+    --accent-gold:#c9a227; --accent-gold-text:#7a6800;
+    --coral-bg:rgba(224,114,86,.12); --teal-bg:rgba(45,125,125,.12); --gold-bg:rgba(201,162,39,.12);
+    --trend-up:#16a34a; --trend-down:#e07256;
+    --border:#e5dfd5; --shadow:0 2px 8px rgba(26,22,18,.06); --shadow-md:0 4px 20px rgba(26,22,18,.1);
+    --radius-sm:4px; --radius-md:8px; --radius-lg:16px;
+    --serif:'Playfair Display',Georgia,serif; --sans:'DM Sans',-apple-system,sans-serif;
+  }
+  *{margin:0;padding:0;box-sizing:border-box}
+  body{font-family:var(--sans);background:var(--bg-primary);color:var(--text-primary);line-height:1.6;padding:48px 20px 96px}
+  .wrap{max-width:760px;margin:0 auto}
+  .pagehead{margin-bottom:40px}
+  .pagehead h1{font-family:var(--serif);font-weight:600;font-size:32px;letter-spacing:-.01em}
+  .pagehead p{color:var(--text-secondary);margin-top:8px;font-size:15px}
+  .optlabel{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--accent-teal);margin:56px 0 6px}
+  .optlabel .rec{background:var(--teal-bg);color:var(--accent-teal);padding:2px 8px;border-radius:999px;letter-spacing:.02em;text-transform:none;font-weight:600}
+  .optdesc{color:var(--text-muted);font-size:14px;margin-bottom:16px;max-width:60ch}
+
+  /* card shell mimicking SchoolDetailView .card */
+  .card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow);padding:28px 28px 26px}
+  .sectionTitle{font-family:var(--serif);font-weight:600;font-size:22px;letter-spacing:-.01em;margin-bottom:18px}
+
+  /* ===== verdict block ===== */
+  .verdict{display:flex;gap:14px;align-items:flex-start;padding:16px 18px;border-radius:var(--radius-md);margin-bottom:22px}
+  .verdict.hard{background:var(--coral-bg)}
+  .verdict.easing{background:var(--teal-bg)}
+  .verdict .vicon{font-size:20px;line-height:1.2}
+  .verdict .vhead{font-weight:700;font-size:17px;letter-spacing:-.01em}
+  .verdict.hard .vhead{color:var(--accent-coral-dark)}
+  .verdict.easing .vhead{color:var(--accent-teal)}
+  .verdict .vsub{color:var(--text-secondary);font-size:14px;margin-top:3px}
+
+  .trendtag{display:inline-flex;align-items:center;gap:5px;font-weight:600}
+  .trendtag.up{color:var(--trend-down)} /* harder = coral */
+  .trendtag.down{color:var(--trend-up)} /* easier = green */
+
+  /* ===== chart ===== */
+  .chartwrap{margin:6px 0 4px}
+  .chartcap{font-size:12px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--text-muted);margin-bottom:8px}
+  .chart{width:100%;height:auto;display:block}
+  .axisyr{font-size:11px;fill:var(--text-muted);font-family:var(--sans)}
+  .ptlbl{font-size:12px;font-weight:700;font-family:var(--sans)}
+
+  /* latest line */
+  .latest{margin-top:18px;padding-top:16px;border-top:1px solid var(--border);font-size:14px;color:var(--text-secondary)}
+  .latest b{color:var(--text-primary)}
+
+  /* ===== Q&A (existing style) ===== */
+  .qa{display:grid;gap:0}
+  .qa .row{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:12px 0;border-bottom:1px solid var(--border)}
+  .qa .row:last-child{border-bottom:none}
+  .qa .q{color:var(--text-secondary);font-size:14px}
+  .qa .a{font-weight:700;font-size:16px;white-space:nowrap}
+  .qa .a .sub{font-weight:400;color:var(--text-muted);font-size:13px;margin-left:6px}
+
+  /* ===== table ===== */
+  table{width:100%;border-collapse:collapse;font-size:14px}
+  thead th{text-align:right;font-size:11px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--text-muted);padding:0 10px 10px;border-bottom:1px solid var(--border)}
+  thead th:first-child{text-align:left}
+  tbody td{text-align:right;padding:12px 10px;border-bottom:1px solid var(--border)}
+  tbody td:first-child{text-align:left;font-weight:600}
+  tbody tr:last-child td{border-bottom:none}
+  tbody tr.latest-row{background:var(--bg-secondary)}
+  .pill{display:inline-block;font-size:11px;font-weight:600;padding:2px 9px;border-radius:999px}
+  .pill.over{background:var(--coral-bg);color:var(--accent-coral-dark)}
+  .pill.ok{background:var(--teal-bg);color:var(--accent-teal)}
+  .note{display:flex;gap:8px;margin-top:16px;font-size:13px;color:var(--text-muted)}
+  .note .i{flex:none;width:16px;height:16px;border-radius:50%;background:var(--bg-secondary);color:var(--text-muted);font-size:11px;font-weight:700;display:grid;place-items:center;margin-top:2px}
+
+  /* ===== disclosure ===== */
+  .disclosure{margin-top:18px;border-top:1px solid var(--border);padding-top:6px}
+  .disclosure>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:8px;padding:10px 0;font-weight:600;font-size:14px;color:var(--accent-teal)}
+  .disclosure>summary::-webkit-details-marker{display:none}
+  .disclosure>summary .chev{transition:transform .2s ease}
+  .disclosure[open]>summary .chev{transform:rotate(90deg)}
+  .disclosure .body{padding-top:8px}
+
+  /* hero chips preview */
+  .heroctx{margin:10px 0 14px;font-size:12px;color:var(--text-muted)}
+  .chips{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:8px}
+  .hchip{border-radius:var(--radius-md);padding:12px 16px;min-width:170px;background:var(--coral-bg)}
+  .hchip .t{font-weight:700;font-size:14px;color:var(--accent-coral-dark)}
+  .hchip .s{font-size:12px;color:var(--text-secondary);margin-top:2px}
+
+  /* ===== card header with segmented toggle ===== */
+  .cardhead{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:18px}
+  .cardhead .sectionTitle{margin-bottom:0}
+  .seg{display:inline-flex;background:var(--bg-secondary);border-radius:999px;padding:3px;gap:2px;flex:none}
+  .seg button{appearance:none;border:none;background:none;cursor:pointer;font:inherit;font-size:13px;font-weight:600;color:var(--text-muted);
+    padding:6px 14px;border-radius:999px;transition:background .15s ease,color .15s ease;white-space:nowrap}
+  .seg button[aria-pressed="true"]{background:var(--bg-card);color:var(--text-primary);box-shadow:var(--shadow)}
+  .seg button:hover[aria-pressed="false"]{color:var(--text-secondary)}
+  /* Stack both views in one grid cell so the card sizes to the taller view —
+     switching modes never shifts layout. */
+  .viewport{display:grid}
+  .viewport > .view{grid-area:1 / 1}
+  .viewport > .view[hidden]{display:block;visibility:hidden;pointer-events:none}
+  /* Default view fills the reserved height: rows spread to consume the slack
+     left by the taller trend view, so there's no empty gap below. */
+  #view-year{display:flex;flex-direction:column}
+  #view-year .qa{flex:1;display:flex;flex-direction:column;justify-content:space-between}
+  /* Larger type in the proposed card so content carries the height
+     instead of empty space between small rows. */
+  #proposed .qa .row{padding:16px 0}
+  #proposed .qa .q{font-size:16px}
+  #proposed .qa .a{font-size:20px}
+  #proposed .qa .a .sub{font-size:14px}
+  #proposed .chartcap{font-size:13px}
+  #proposed .latest{font-size:16px;margin-top:22px;padding-top:18px}
+  #proposed .axisyr{font-size:12.5px}
+  #proposed .ptlbl{font-size:13px}
+
+  @media(max-width:600px){
+    .card{padding:22px 18px}
+    .qa .a{font-size:15px}
+    thead th,tbody td{padding-left:6px;padding-right:6px}
+  }
+</style>
+</head>
+<body>
+<div class="wrap">
+
+  <div class="pagehead">
+    <h1>How Hard to Get In — multi-year</h1>
+    <p>Three ways to surface admissions history on the school detail page. Sample data: an oversubscribed primary where first-choice odds have tightened from 95% → 68% over three years.</p>
+  </div>
+
+  <!-- ============ PROPOSED: current view + header toggle to Option C ============ -->
+  <div class="optlabel">Proposed <span class="rec">Header toggle</span></div>
+  <p class="optdesc">Keeps today's single-year view as the default. A segmented toggle in the card header switches between "This year" and "3-year trend" (Option C). Try it — click the toggle.</p>
+
+  <section class="card" id="proposed">
+    <div class="cardhead">
+      <h2 class="sectionTitle">How Hard to Get Into This School</h2>
+      <div class="seg" role="group" aria-label="Admissions view">
+        <button data-show="year"  aria-pressed="true"  type="button">This year</button>
+        <button data-show="trend" aria-pressed="false" type="button">3-year trend</button>
+      </div>
+    </div>
+
+    <div class="viewport">
+    <!-- DEFAULT: current single-year Q&A -->
+    <div class="view" id="view-year">
+      <div class="qa">
+        <div class="row"><span class="q">How many places were offered?</span><span class="a">60</span></div>
+        <div class="row"><span class="q">How many families wanted this school first?</span><span class="a">88</span></div>
+        <div class="row"><span class="q">How many got their first choice?</span><span class="a">60<span class="sub">of 88 (68%)</span></span></div>
+        <div class="row"><span class="q">How many applied in total?</span><span class="a">241</span></div>
+      </div>
+    </div>
+
+    <!-- SWAPPED: Option C trend view -->
+    <div class="view" id="view-trend" hidden>
+      <div class="chartwrap">
+        <div class="chartcap">First-choice offer rate</div>
+        <svg class="chart" viewBox="0 0 520 118" role="img" aria-label="First-choice offer rate falling from 95% in 2021/22 to 68% in 2023/24">
+          <line x1="44" y1="16" x2="500" y2="16" stroke="#e5dfd5" stroke-width="1"/>
+          <line x1="44" y1="50" x2="500" y2="50" stroke="#e5dfd5" stroke-width="1"/>
+          <line x1="44" y1="84" x2="500" y2="84" stroke="#e5dfd5" stroke-width="1"/>
+          <text x="36" y="20" text-anchor="end" class="axisyr">100%</text>
+          <text x="36" y="54" text-anchor="end" class="axisyr">75%</text>
+          <text x="36" y="88" text-anchor="end" class="axisyr">50%</text>
+          <polyline points="110,21 290,41 470,59" fill="none" stroke="var(--accent-coral)" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
+          <circle cx="110" cy="21" r="5" fill="var(--accent-coral)"/>
+          <circle cx="290" cy="41" r="5" fill="var(--accent-coral)"/>
+          <circle cx="470" cy="59" r="6" fill="var(--accent-coral)" stroke="#fff" stroke-width="2"/>
+          <text x="110" y="13" text-anchor="middle" class="ptlbl" fill="var(--text-primary)">95%</text>
+          <text x="290" y="33" text-anchor="middle" class="ptlbl" fill="var(--text-primary)">81%</text>
+          <text x="470" y="51" text-anchor="middle" class="ptlbl" fill="var(--accent-coral-dark)">68%</text>
+          <text x="110" y="106" text-anchor="middle" class="axisyr">2021/22</text>
+          <text x="290" y="106" text-anchor="middle" class="axisyr">2022/23</text>
+          <text x="470" y="106" text-anchor="middle" class="axisyr">2023/24</text>
+        </svg>
+      </div>
+
+      <div class="latest">This year (2023/24), <b>88 families</b> put it first for <b>60 places</b> — 241 applications in total.</div>
+    </div>
+    </div>
+  </section>
+
+  <p class="optdesc" style="margin-top:14px">Below: the standalone option mockups for reference.</p>
+
+  <!-- ============ OPTION C (RECOMMENDED) ============ -->
+  <div class="optlabel">Option C <span class="rec">Recommended</span></div>
+  <p class="optdesc">Trend verdict + sparkline, with the full year-by-year table behind a disclosure. Answers the parent's question first, rewards the curious second. Collapses to today's single-year view when only one year exists.</p>
+
+  <section class="card">
+    <h2 class="sectionTitle">How Hard to Get Into This School</h2>
+
+    <div class="chartwrap">
+      <div class="chartcap">First-choice offer rate</div>
+      <svg class="chart" viewBox="0 0 520 170" role="img" aria-label="First-choice offer rate falling from 95% in 2021/22 to 68% in 2023/24">
+        <!-- gridlines -->
+        <line x1="40" y1="20"  x2="500" y2="20"  stroke="#e5dfd5" stroke-width="1"/>
+        <line x1="40" y1="70"  x2="500" y2="70"  stroke="#e5dfd5" stroke-width="1"/>
+        <line x1="40" y1="120" x2="500" y2="120" stroke="#e5dfd5" stroke-width="1"/>
+        <text x="32" y="24"  text-anchor="end" class="axisyr">100%</text>
+        <text x="32" y="74"  text-anchor="end" class="axisyr">75%</text>
+        <text x="32" y="124" text-anchor="end" class="axisyr">50%</text>
+        <!-- 95% -> y=30 ; 81% -> y=58 ; 68% -> y=84   (y = 20 + (100-v)*2) -->
+        <polyline points="110,30 290,58 470,84" fill="none" stroke="var(--accent-coral)" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
+        <circle cx="110" cy="30" r="5" fill="var(--accent-coral)"/>
+        <circle cx="290" cy="58" r="5" fill="var(--accent-coral)"/>
+        <circle cx="470" cy="84" r="6" fill="var(--accent-coral)" stroke="#fff" stroke-width="2"/>
+        <text x="110" y="20" text-anchor="middle" class="ptlbl" fill="var(--text-primary)">95%</text>
+        <text x="290" y="48" text-anchor="middle" class="ptlbl" fill="var(--text-primary)">81%</text>
+        <text x="470" y="74" text-anchor="middle" class="ptlbl" fill="var(--accent-coral-dark)">68%</text>
+        <text x="110" y="150" text-anchor="middle" class="axisyr">2021/22</text>
+        <text x="290" y="150" text-anchor="middle" class="axisyr">2022/23</text>
+        <text x="470" y="150" text-anchor="middle" class="axisyr">2023/24</text>
+      </svg>
+    </div>
+
+    <div class="latest">This year (2023/24), <b>88 families</b> put it first for <b>60 places</b> — 241 applications in total.</div>
+
+    <details class="disclosure">
+      <summary><span class="chev">▸</span> See full 3-year breakdown</summary>
+      <div class="body">
+        <table>
+          <thead>
+            <tr><th>Year</th><th>Places</th><th>1st-pref apps</th><th>1st-choice rate</th><th>Total apps</th></tr>
+          </thead>
+          <tbody>
+            <tr class="latest-row"><td>2023/24</td><td>60</td><td>88</td><td>68%</td><td>241</td></tr>
+            <tr><td>2022/23</td><td>60</td><td>74</td><td>81%</td><td>198</td></tr>
+            <tr><td>2021/22</td><td>60</td><td>63</td><td>95%</td><td>150</td></tr>
+          </tbody>
+        </table>
+      </div>
+    </details>
+  </section>
+
+  <!-- ============ OPTION A (LITE) ============ -->
+  <div class="optlabel">Option A <span style="color:var(--text-muted);text-transform:none;letter-spacing:0;font-weight:500">· lite</span></div>
+  <p class="optdesc">Trend-aware headline + sparkline inside the existing card. Smallest change; shows the shape of the trend but not the per-year numbers.</p>
+
+  <section class="card">
+    <h2 class="sectionTitle">How Hard to Get Into This School</h2>
+
+    <div style="font-weight:700;font-size:18px;letter-spacing:-.01em;margin-bottom:4px">
+      Getting harder to get into <span class="trendtag up">↗</span>
+    </div>
+    <div style="color:var(--text-secondary);font-size:14px;margin-bottom:18px">Oversubscribed in each of the last 3 years.</div>
+
+    <div class="chartwrap">
+      <div class="chartcap">First-choice offer rate</div>
+      <svg class="chart" viewBox="0 0 520 150" role="img" aria-label="First-choice offer rate falling from 95% to 68%">
+        <polyline points="60,30 260,58 460,84" fill="none" stroke="var(--accent-coral)" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
+        <circle cx="60"  cy="30" r="5" fill="var(--accent-coral)"/>
+        <circle cx="260" cy="58" r="5" fill="var(--accent-coral)"/>
+        <circle cx="460" cy="84" r="6" fill="var(--accent-coral)" stroke="#fff" stroke-width="2"/>
+        <text x="60"  y="20" text-anchor="middle" class="ptlbl" fill="var(--text-primary)">95%</text>
+        <text x="260" y="48" text-anchor="middle" class="ptlbl" fill="var(--text-primary)">81%</text>
+        <text x="460" y="74" text-anchor="middle" class="ptlbl" fill="var(--accent-coral-dark)">68%</text>
+        <text x="60"  y="120" text-anchor="middle" class="axisyr">2021/22</text>
+        <text x="260" y="120" text-anchor="middle" class="axisyr">2022/23</text>
+        <text x="460" y="120" text-anchor="middle" class="axisyr">2023/24</text>
+      </svg>
+    </div>
+
+    <div class="latest">Latest (2023/24): <b>60 places</b> · <b>88 first-choice</b> · 241 total applications.</div>
+  </section>
+
+  <!-- ============ OPTION B (TABLE) ============ -->
+  <div class="optlabel">Option B <span style="color:var(--text-muted);text-transform:none;letter-spacing:0;font-weight:500">· table</span></div>
+  <p class="optdesc">Compact year-by-year table of every metric. Maximum transparency; leaves the parent to spot the trend themselves and is the densest on mobile.</p>
+
+  <section class="card">
+    <h2 class="sectionTitle">How Hard to Get Into This School</h2>
+    <p style="color:var(--text-secondary);font-size:14px;margin-bottom:18px">Three-year admissions history</p>
+    <table>
+      <thead>
+        <tr><th>Year</th><th>Places</th><th>1st-pref apps</th><th>1st-choice rate</th><th>Total apps</th><th>Status</th></tr>
+      </thead>
+      <tbody>
+        <tr class="latest-row"><td>2023/24</td><td>60</td><td>88</td><td>68%</td><td>241</td><td><span class="pill over">Over</span></td></tr>
+        <tr><td>2022/23</td><td>60</td><td>74</td><td>81%</td><td>198</td><td><span class="pill over">Over</span></td></tr>
+        <tr><td>2021/22</td><td>60</td><td>63</td><td>95%</td><td>150</td><td><span class="pill ok">OK</span></td></tr>
+      </tbody>
+    </table>
+    <div class="note"><span class="i">i</span><span>A falling first-choice rate means competition is rising. “Places” is the number offered this round, roughly the intake size.</span></div>
+  </section>
+
+</div>
+<script>
+  const proposed = document.getElementById('proposed');
+  const views = { year: document.getElementById('view-year'), trend: document.getElementById('view-trend') };
+  const toggles = proposed.querySelectorAll('.seg button');
+  toggles.forEach(btn => {
+    btn.addEventListener('click', () => {
+      const show = btn.dataset.show;
+      views.year.hidden = show !== 'year';
+      views.trend.hidden = show !== 'trend';
+      toggles.forEach(b => b.setAttribute('aria-pressed', String(b.dataset.show === show)));
+    });
+  });
+</script>
+</body>
+</html>

mockups/header-map-hero.html

@@ -0,0 +1,179 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>School header — “Emerge” map hero (desktop + mobile)</title>
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link href="https://fonts.googleapis.com/css2?family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,600;9..40,700&family=Playfair+Display:wght@500;600;700;800&display=swap" rel="stylesheet">
+<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY=" crossorigin="">
+<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js" integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo=" crossorigin=""></script>
+<style>
+  :root{
+    --bg-primary:#faf7f2; --bg-secondary:#f3ede4; --bg-card:#fff;
+    --text-primary:#1a1612; --text-secondary:#5c564d; --text-muted:#6d685f;
+    --accent-coral:#e07256; --accent-coral-dark:#c45a3f; --accent-teal:#2d7d7d;
+    --border:#e5dfd5; --shadow:0 2px 8px rgba(26,22,18,.06);
+    --serif:'Playfair Display',Georgia,serif; --sans:'DM Sans',-apple-system,sans-serif;
+  }
+  *{margin:0;padding:0;box-sizing:border-box}
+  body{font-family:var(--sans);background:var(--bg-primary);color:var(--text-primary);line-height:1.55;padding:40px 20px 120px}
+  .wrap{max-width:1120px;margin:0 auto}
+  .pagehead h1{font-family:var(--serif);font-weight:700;font-size:30px;letter-spacing:-.01em}
+  .pagehead p{color:var(--text-secondary);margin-top:8px;font-size:15px;max-width:74ch}
+  .optlabel{display:flex;align-items:center;gap:10px;font-size:12px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--accent-teal);margin:52px 0 6px}
+  .optdesc{color:var(--text-muted);font-size:14px;margin-bottom:18px;max-width:74ch}
+
+  .stage{display:flex;gap:44px;align-items:flex-start;flex-wrap:wrap}
+  .col-desktop{flex:1 1 560px;min-width:420px}
+  .col-mobile{flex:0 0 auto}
+  .caption{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--text-muted);margin-bottom:12px}
+
+  .topBack{display:inline-flex;align-items:center;gap:.4rem;margin:0 0 12px;font-size:17px;font-weight:600;color:var(--accent-coral)}
+
+  /* ── hero shell ── */
+  .hero{position:relative;background:var(--bg-card);border:1px solid var(--border);border-radius:14px;box-shadow:var(--shadow);overflow:hidden}
+  .map{width:100%;background:#dfe6e2}
+  .map .leaflet-control-attribution{font-size:9px;background:rgba(255,255,255,.55)}
+
+  /* coral teardrop pin */
+  .pin{position:relative;width:26px;height:26px}
+  .pin svg{filter:drop-shadow(0 3px 4px rgba(0,0,0,.35))}
+  .pin .ring{position:absolute;left:50%;top:72%;width:34px;height:34px;transform:translate(-50%,-50%);border-radius:50%;background:rgba(224,114,86,.28);animation:pulse 2.4s ease-out infinite}
+  @keyframes pulse{0%{transform:translate(-50%,-50%) scale(.5);opacity:.9}100%{transform:translate(-50%,-50%) scale(1.6);opacity:0}}
+
+  .compareBtn{position:absolute;z-index:500;top:14px;right:14px;font-size:13px;font-weight:600;padding:9px 15px;border-radius:8px;cursor:pointer;border:none;
+              background:rgba(255,255,255,.88);color:var(--accent-coral);backdrop-filter:blur(6px);box-shadow:0 2px 10px rgba(0,0,0,.16)}
+
+  /* the diffuse blend: tall gradient that reaches solid white well before the title */
+  .fade{position:absolute;left:0;right:0;z-index:400;pointer-events:none;
+        background:linear-gradient(to bottom,
+           rgba(255,255,255,0) 0%,
+           rgba(255,255,255,.35) 35%,
+           rgba(255,255,255,.75) 62%,
+           rgba(255,255,255,.95) 82%,
+           var(--bg-card) 100%)}
+
+  .body{position:relative;z-index:410}
+  .name{font-family:var(--serif);font-weight:700;line-height:1.08;letter-spacing:-.01em}
+  .meta{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
+  .chip{background:var(--bg-secondary);color:var(--text-secondary);font-size:13px;font-weight:500;padding:4px 11px;border-radius:6px}
+  .addr{display:flex;align-items:center;flex-wrap:wrap;gap:7px;color:var(--text-secondary);font-size:15px;margin-top:14px}
+  .addr .maplink{color:var(--accent-coral);font-weight:600;text-decoration:none;white-space:nowrap}
+  .details{display:flex;flex-wrap:wrap;gap:6px 22px;margin-top:14px;font-size:14px;color:var(--text-secondary)}
+  .details a{color:var(--accent-teal);font-weight:600;text-decoration:none}
+  .details b{color:var(--text-primary)}
+  .ofstedStrip{display:inline-block;margin-top:16px;padding:9px 14px;border-radius:8px;background:rgba(45,125,125,.10);border-left:3px solid var(--accent-teal)}
+  .ofstedStrip b{font-size:14px}.ofstedStrip span{display:block;font-size:12px;color:var(--text-muted)}
+
+  /* desktop sizing */
+  .col-desktop .map{height:210px}
+  .col-desktop .fade{top:70px;height:190px}           /* white by ~map bottom (210) */
+  .col-desktop .body{margin-top:-6px;padding:0 26px 22px}
+  .col-desktop .name{font-size:clamp(30px,3.6vw,44px)}
+
+  /* mobile phone frame */
+  .phone{width:390px;border:10px solid #1a1612;border-radius:38px;overflow:hidden;box-shadow:0 18px 50px rgba(26,22,18,.22);background:var(--bg-primary)}
+  .phone .notch{height:26px;background:#1a1612;position:relative}
+  .phone .notch::after{content:"";position:absolute;left:50%;top:7px;transform:translateX(-50%);width:120px;height:20px;background:#1a1612;border-radius:0 0 14px 14px}
+  .phone .globalnav{height:46px;background:#fff;border-bottom:1px solid var(--border);display:flex;align-items:center;padding:0 16px;font-family:var(--serif);font-weight:700;font-size:17px}
+  .phone .screen{padding:14px 12px 26px}
+  .phone .hero .map{height:150px}
+  .phone .hero .fade{top:52px;height:132px}            /* white by ~map bottom (150) */
+  .phone .hero .body{margin-top:-4px;padding:0 18px 18px}
+  .phone .hero .name{font-size:29px}
+  .phone .hero .compareBtn{top:12px;right:12px;padding:8px 12px;font-size:12.5px}
+  .phone .addr{font-size:14px}
+  .phone .details{font-size:13px;gap:4px 16px}
+</style>
+</head>
+<body>
+<div class="wrap">
+  <div class="pagehead">
+    <h1>“Emerge” map hero — refined</h1>
+    <p>Transition made more diffuse: the map dissolves gradually and reaches solid white before the school name, so the title sits cleanly on white with only a soft memory of the map above it. Redundant floating pill removed — the only map CTA is the inline “View on map ↗”. Desktop and mobile shown side by side.</p>
+  </div>
+
+  <div class="optlabel">Option A · “Emerge” (refined)</div>
+  <p class="optdesc">Same school throughout (Our Lady Queen of Heaven, SW19&nbsp;6AD). Live, non-interactive preview maps; the CTA opens the full map.</p>
+
+  <div class="stage">
+    <!-- ── DESKTOP ── -->
+    <div class="col-desktop">
+      <div class="caption">Desktop</div>
+      <a class="topBack">← Back</a>
+      <div class="hero" data-hero>
+        <button class="compareBtn">+ Add to Compare</button>
+        <div class="map" id="mapD"></div>
+        <div class="fade"></div>
+        <div class="body">
+          <h1 class="name">Our Lady Queen of Heaven RC School</h1>
+          <div class="meta"><span class="chip">Wandsworth</span><span class="chip">Voluntary aided school</span></div>
+          <div class="addr">
+            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#e07256" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z"/><circle cx="12" cy="10" r="3"/></svg>
+            Victoria Drive, Southfields, London, SW19 6AD &nbsp;·&nbsp; <a class="maplink" data-open>View on map ↗</a>
+          </div>
+          <div class="details">
+            <span><b>Headteacher:</b> Mr Jeremy Tuke</span>
+            <a>School website ↗</a>
+            <span><b>Pupils:</b> 221 (capacity: 232)</span>
+          </div>
+          <div class="ofstedStrip"><b>Ofsted Outstanding</b><span>Inspected November 2023</span></div>
+        </div>
+      </div>
+    </div>
+
+    <!-- ── MOBILE ── -->
+    <div class="col-mobile">
+      <div class="caption">Mobile</div>
+      <div class="phone">
+        <div class="notch"></div>
+        <div class="globalnav">SchoolCompare</div>
+        <div class="screen">
+          <a class="topBack" style="font-size:16px">← Back</a>
+          <div class="hero" data-hero>
+            <button class="compareBtn">+ Compare</button>
+            <div class="map" id="mapM"></div>
+            <div class="fade"></div>
+            <div class="body">
+              <h1 class="name">Our Lady Queen of Heaven RC School</h1>
+              <div class="meta"><span class="chip">Wandsworth</span><span class="chip">Voluntary aided</span></div>
+              <div class="addr">
+                <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="#e07256" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z"/><circle cx="12" cy="10" r="3"/></svg>
+                Victoria Drive, Southfields, SW19 6AD
+              </div>
+              <div style="margin-top:8px"><a class="maplink" data-open style="color:var(--accent-coral);font-weight:600;text-decoration:none;font-size:14px">View on map ↗</a></div>
+              <div class="details">
+                <span><b>Headteacher:</b> Mr Jeremy Tuke</span>
+                <a>School website ↗</a>
+                <span><b>Pupils:</b> 221 (cap. 232)</span>
+              </div>
+              <div class="ofstedStrip"><b>Ofsted Outstanding</b><span>Inspected November 2023</span></div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <p class="optdesc" style="margin-top:26px"><b style="color:var(--text-secondary)">No-location fallback</b> — schools without lat/long simply render the hero with no map band (title at the top as today), so the component degrades cleanly.</p>
+</div>
+
+<script>
+  const LAT = 51.4459, LNG = -0.2076;
+  const pinIcon = L.divIcon({
+    className:'', iconSize:[26,34], iconAnchor:[13,30],
+    html:'<div class="pin"><span class="ring"></span><svg width="26" height="34" viewBox="0 0 26 34"><path d="M13 0C5.8 0 0 5.8 0 13c0 9.2 13 21 13 21s13-11.8 13-21C26 5.8 20.2 0 13 0Z" fill="#e07256"/><circle cx="13" cy="13" r="5" fill="#fff"/></svg></div>'
+  });
+  function makePreview(id){
+    const m = L.map(id,{zoomControl:false,attributionControl:true,dragging:false,scrollWheelZoom:false,doubleClickZoom:false,boxZoom:false,keyboard:false,touchZoom:false}).setView([LAT,LNG],15);
+    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',{maxZoom:19,attribution:'&copy; OpenStreetMap'}).addTo(m);
+    L.marker([LAT,LNG],{icon:pinIcon}).addTo(m);
+    setTimeout(()=>m.invalidateSize(),60);
+  }
+  ['mapD','mapM'].forEach(makePreview);
+  document.querySelectorAll('[data-open]').forEach(el=>el.addEventListener('click',e=>{e.preventDefault();alert('→ opens the full interactive map');}));
+</script>
+</body>
+</html>

nextjs-app/__tests__/components/SchoolCard.test.tsx

@@ -34,24 +34,24 @@ describe('SchoolCard', () => {
     render(<SchoolCard school={mockSchool} />);
 
     const link = screen.getByRole('link', { name: /test primary school/i });
-    expect(link).toHaveAttribute('href', '/school/100001');
+    expect(link).toHaveAttribute('href', '/school/100001-test-primary-school');
   });
 
-  it('calls onAddToCompare when Add to Compare button is clicked', () => {
+  it('calls onAddToCompare when the Compare button is clicked', () => {
     const mockAddToCompare = jest.fn();
     render(<SchoolCard school={mockSchool} onAddToCompare={mockAddToCompare} />);
 
-    const addButton = screen.getByText('Add to Compare');
+    const addButton = screen.getByText('+ Compare');
     fireEvent.click(addButton);
 
     expect(mockAddToCompare).toHaveBeenCalledWith(mockSchool);
     expect(mockAddToCompare).toHaveBeenCalledTimes(1);
   });
 
-  it('does not render Add to Compare button when handler not provided', () => {
+  it('does not render the Compare button when handler not provided', () => {
     render(<SchoolCard school={mockSchool} />);
 
-    expect(screen.queryByText('Add to Compare')).not.toBeInTheDocument();
+    expect(screen.queryByText('+ Compare')).not.toBeInTheDocument();
   });
 
   it('displays trend indicator for positive change', () => {

nextjs-app/__tests__/lib/utils.test.ts

@@ -9,6 +9,8 @@ import {
   isValidPostcode,
   debounce,
   buildOfstedListBadge,
+  metricKind,
+  computeYBounds,
 } from '@/lib/utils';
 
 describe('formatPercentage', () => {
@@ -19,7 +21,7 @@ describe('formatPercentage', () => {
   });
 
   it('handles null values', () => {
-    expect(formatPercentage(null)).toBe('-');
+    expect(formatPercentage(null)).toBe('N/A');
   });
 });
 
@@ -31,7 +33,7 @@ describe('formatProgress', () => {
   });
 
   it('handles null values', () => {
-    expect(formatProgress(null)).toBe('-');
+    expect(formatProgress(null)).toBe('N/A');
   });
 });
 
@@ -44,16 +46,16 @@ describe('calculateTrend', () => {
     expect(calculateTrend(70, 75)).toBe('down');
   });
 
-  it('calculates same trend', () => {
+  it('calculates stable trend', () => {
-    expect(calculateTrend(75, 75)).toBe('same');
+    expect(calculateTrend(75, 75)).toBe('stable');
   });
 
   it('handles null previous value', () => {
-    expect(calculateTrend(75, null)).toBe('same');
+    expect(calculateTrend(75, null)).toBe('stable');
   });
 
   it('handles null current value', () => {
-    expect(calculateTrend(null, 75)).toBe('same');
+    expect(calculateTrend(null, 75)).toBe('stable');
   });
 });
 
@@ -72,7 +74,13 @@ describe('isValidPostcode', () => {
 });
 
 describe('debounce', () => {
-  jest.useFakeTimers();
+  beforeEach(() => {
+    jest.useFakeTimers();
+  });
+
+  afterEach(() => {
+    jest.useRealTimers();
+  });
 
   it('delays function execution', () => {
     const mockFn = jest.fn();
@@ -100,8 +108,6 @@ describe('debounce', () => {
     expect(mockFn).toHaveBeenCalledWith('third');
     expect(mockFn).toHaveBeenCalledTimes(1);
   });
-
-  jest.useRealTimers();
 });
 
 describe('buildOfstedListBadge', () => {
@@ -129,7 +135,21 @@ describe('buildOfstedListBadge', () => {
     expect(badge.cssClass).toBe('ofstedRc');
   });
 
-  it('returns pending badge when no grade and no ReportCard framework', () => {
+  it('returns an "Inspected" badge for an OEIF inspection with no overall grade (post-Sept-2024)', () => {
+    // Inspected after Sept 2024: inspection on record (date + framework) but
+    // Ofsted no longer issues an overall grade. Must NOT read as "Not yet inspected".
+    const badge = buildOfstedListBadge({ ofsted_grade: null, ofsted_date: '2024-11-01', ofsted_framework: 'OEIF' });
+    expect(badge.label).toBe('Inspected · 2024');
+    expect(badge.cssClass).toBe('ofstedInspected');
+  });
+
+  it('returns an "Inspected" badge without a year when the grade is missing and date is absent but a record exists', () => {
+    const badge = buildOfstedListBadge({ ofsted_grade: null, ofsted_date: null, ofsted_framework: 'OEIF' });
+    expect(badge.label).toBe('Inspected');
+    expect(badge.cssClass).toBe('ofstedInspected');
+  });
+
+  it('returns pending badge when no grade and no inspection on record', () => {
     const badge = buildOfstedListBadge({ ofsted_grade: null, ofsted_date: null, ofsted_framework: null });
     expect(badge.label).toBe('Not yet inspected');
     expect(badge.cssClass).toBe('ofstedPending');
@@ -141,3 +161,54 @@ describe('buildOfstedListBadge', () => {
     expect(badge.cssClass).toBe('ofstedPending');
   });
 });
+
+describe('metricKind', () => {
+  it('classifies metrics by key', () => {
+    expect(metricKind('rwm_expected_pct')).toBe('percentage');
+    expect(metricKind('absence_rate')).toBe('percentage');
+    expect(metricKind('reading_progress')).toBe('progress');
+    expect(metricKind('progress_8_score')).toBe('progress');
+    expect(metricKind('attainment_8_score')).toBe('score');
+    expect(metricKind('reading_avg_score')).toBe('score');
+  });
+});
+
+describe('computeYBounds', () => {
+  it('tightens clustered percentages instead of framing 0-100', () => {
+    const b = computeYBounds([86, 86, 86, 80, 96], 'percentage');
+    expect(b.min).toBeGreaterThanOrEqual(0);
+    expect(b.max).toBeLessThanOrEqual(100);
+    expect(b.min).toBeGreaterThan(50);
+    expect(b.max! - b.min!).toBeGreaterThanOrEqual(10);
+  });
+
+  it('never widens percentages beyond 0-100 for non-negative data', () => {
+    const b = computeYBounds([2, 5, 98], 'percentage');
+    expect(b.min).toBe(0);
+    expect(b.max).toBe(100);
+  });
+
+  it('does not clamp to zero when pct-named trend data is negative', () => {
+    const b = computeYBounds([-12, -3, 4], 'percentage');
+    expect(b.min).toBeLessThan(-12);
+  });
+
+  it('keeps progress bounds symmetric around zero', () => {
+    const b = computeYBounds([-1.2, 0.4, 2.1], 'progress');
+    expect(b.min).toBe(-b.max!);
+    expect(b.min).toBeLessThanOrEqual(-1.2);
+    expect(b.max).toBeGreaterThanOrEqual(2.1);
+  });
+
+  it('fits score metrics without a fixed frame', () => {
+    const b = computeYBounds([42.3, 48.9, 51.2], 'score');
+    expect(b.min).toBeGreaterThanOrEqual(0);
+    expect(b.min).toBeLessThanOrEqual(42.3);
+    expect(b.max).toBeGreaterThanOrEqual(51.2);
+  });
+
+  it('returns empty bounds when there is no numeric data', () => {
+    expect(computeYBounds([null, undefined, NaN], 'percentage')).toEqual({});
+    expect(computeYBounds([], 'progress')).toEqual({});
+  });
+});

nextjs-app/app/admissions/page.tsx

@@ -0,0 +1,14 @@
+import type { Metadata } from 'next';
+import { AdmissionsView } from '@/components/AdmissionsView';
+
+export const dynamic = 'force-static';
+
+export const metadata: Metadata = {
+  title: 'School Admissions Guide',
+  description:
+    'Understand the Primary and Secondary school admissions process in England, with live countdowns to every key deadline and National Offer Day.',
+};
+
+export default function AdmissionsPage() {
+  return <AdmissionsView />;
+}

nextjs-app/app/compare/page.tsx

@@ -20,8 +20,8 @@ export const metadata: Metadata = {
   keywords: 'school comparison, compare schools, KS2 comparison, primary school performance',
 };
 
-// Force dynamic rendering
+// Dynamic via searchParams; remove force-dynamic so internal data fetches
-export const dynamic = 'force-dynamic';
+// can still use Next.js's per-call revalidate cache.
 
 export default async function ComparePage({ searchParams }: ComparePageProps) {
   const { urns: urnsParam, metric: metricParam } = await searchParams;

nextjs-app/app/globals.css

@@ -16,8 +16,9 @@
     --text-inverse: #faf7f2;
     
     --accent-coral: #e07256;
-    --accent-coral-dark: #c45a3f;
+    --accent-coral-dark: #b04a2e;   /* AA: 4.5+ as text on white/cream tints; 5.4:1 under white text */
-    --accent-teal: #2d7d7d;
+    --accent-coral-darker: #9c3f26;  /* hover for coral-dark fills */
+    --accent-teal: #296f6f;         /* AA: 4.8+ as text on the cream/tint backgrounds */
     --accent-teal-light: #3a9e9e;
     --accent-gold: #c9a227;
     --accent-gold-text: #7a6800;  /* WCAG AA safe for text on white/cream */
@@ -92,7 +93,31 @@ body {
     background: var(--bg-primary);
     color: var(--text-primary);
     line-height: 1.6;
+    /* dvh (dynamic viewport) accounts for iOS Safari's collapsing toolbar;
+       fall back to vh on older engines that don't recognise dvh. */
     min-height: 100vh;
+    min-height: 100dvh;
+    /* Suppress the iOS Safari grey tap flash — explicit :active states
+       below carry the press feedback instead. */
+    -webkit-tap-highlight-color: transparent;
+}
+
+/* Provide a baseline press feedback for the most common interactive
+   elements — replaces the suppressed default tap highlight. Buttons and
+   .btn-* classes carry their own :active styles already; this handles
+   plain anchors used as inline links and bare button elements. */
+@media (hover: none) and (pointer: coarse) {
+    a:active,
+    button:active {
+        opacity: 0.7;
+    }
+}
+
+/* Reserve space for the fixed mobile bottom tab bar (56px + safe-area inset). */
+@media (max-width: 640px) {
+    body {
+        padding-bottom: calc(56px + env(safe-area-inset-bottom, 0px));
+    }
 }
 
 /* Skip link — visible only on focus for keyboard users */
@@ -148,13 +173,13 @@ body {
 
 /* Primary: coral background — main CTAs (Search, Compare Now) */
 .btn-primary {
-    background: var(--accent-coral);
+    background: var(--accent-coral-dark);
     color: white;
-    border-color: var(--accent-coral);
+    border-color: var(--accent-coral-dark);
 }
 .btn-primary:hover:not(:disabled) {
-    background: var(--accent-coral-dark);
+    background: var(--accent-coral-darker);
-    border-color: var(--accent-coral-dark);
+    border-color: var(--accent-coral-darker);
 }
 
 /* Secondary: teal outline — supporting actions (+ Compare) */
@@ -186,8 +211,8 @@ body {
 }
 .btn-active:hover:not(:disabled) {
     background: transparent;
-    color: var(--accent-coral);
+    color: var(--accent-coral-dark);
-    border-color: var(--accent-coral);
+    border-color: var(--accent-coral-dark);
 }
 
 /* Small variant */
@@ -721,14 +746,14 @@ body {
 }
 
 .btn-compare {
-    background: var(--accent-coral);
+    background: var(--accent-coral-dark);
     color: white;
-    border: 1px solid var(--accent-coral);
+    border: 1px solid var(--accent-coral-dark);
 }
 
 .btn-compare:hover {
-    background: #d4654a;
+    background: var(--accent-coral-darker);
-    border-color: #d4654a;
+    border-color: var(--accent-coral-darker);
 }
 
 .btn-compare.active {
@@ -892,7 +917,7 @@ body {
 }
 
 .stat-value.negative {
-    color: var(--accent-coral);
+    color: var(--accent-coral-dark);
 }
 
 /* Trend indicators */
@@ -906,7 +931,7 @@ body {
 }
 
 .trend-down {
-    color: var(--accent-coral);
+    color: var(--accent-coral-dark);
 }
 
 .trend-stable {
@@ -994,7 +1019,7 @@ body {
 }
 
 .map-modal-close:hover {
-    color: var(--accent-coral);
+    color: var(--accent-coral-dark);
 }
 
 .map-modal-content {
@@ -1543,12 +1568,12 @@ body {
 }
 
 .btn-primary {
-    background: var(--accent-coral);
+    background: var(--accent-coral-dark);
     color: white;
 }
 
 .btn-primary:hover {
-    background: var(--accent-coral-dark);
+    background: var(--accent-coral-darker);
     transform: translateY(-1px);
 }
 
@@ -1759,7 +1784,7 @@ body {
     
     .modal-content {
         margin: 1rem;
-        max-height: calc(100vh - 2rem);
+        max-height: calc(100dvh - 2rem);
     }
 
     .modal-header {
@@ -1829,7 +1854,7 @@ body {
 @media (max-width: 480px) {
     .modal-content {
         margin: 0.5rem;
-        max-height: calc(100vh - 1rem);
+        max-height: calc(100dvh - 1rem);
     }
 
     .modal-header {

nextjs-app/app/layout.tsx

@@ -1,4 +1,4 @@
-import type { Metadata } from 'next';
+import type { Metadata, Viewport } from 'next';
 import { DM_Sans, Playfair_Display } from 'next/font/google';
 import Script from 'next/script';
 import { Navigation } from '@/components/Navigation';
@@ -21,7 +21,24 @@ const playfairDisplay = Playfair_Display({
   display: 'swap',
 });
 
+export const viewport: Viewport = {
+  width: 'device-width',
+  initialScale: 1,
+  // viewport-fit=cover lets us paint behind the notch / Dynamic Island so
+  // env(safe-area-inset-*) values resolve to real numbers on iPhone.
+  viewportFit: 'cover',
+  themeColor: [
+    { media: '(prefers-color-scheme: light)', color: '#faf7f2' },
+    { media: '(prefers-color-scheme: dark)', color: '#1a1612' },
+  ],
+};
+
 export const metadata: Metadata = {
+  appleWebApp: {
+    capable: true,
+    title: 'SchoolCompare',
+    statusBarStyle: 'default',
+  },
   title: {
     default: 'SchoolCompare | Compare School Performance',
     template: '%s | SchoolCompare',
@@ -57,10 +74,15 @@ export default function RootLayout({
   return (
     <html lang="en">
       <head>
+        <link rel="preconnect" href="https://analytics.schoolcompare.co.uk" />
+        <link rel="preconnect" href="https://api.postcodes.io" />
+        {/* data-domains: the tracker only fires on the production hostnames,
+            so staging (same image, different host) never pollutes Umami */}
         <Script
-          defer
           src="https://analytics.schoolcompare.co.uk/script.js"
           data-website-id="d7fb0c95-bb6c-4336-8209-bd10077e50dd"
+          data-domains="schoolcompare.co.uk,www.schoolcompare.co.uk"
+          data-performance="true"
           strategy="afterInteractive"
         />
       </head>

nextjs-app/app/page.tsx

@@ -5,6 +5,8 @@
 
 import { fetchSchools, fetchFilters, fetchDataInfo } from '@/lib/api';
 import { HomeView } from '@/components/HomeView';
+import { HowItWorksSection } from '@/components/HowItWorksSection';
+import { EditorialSection } from '@/components/EditorialSection';
 
 interface HomePageProps {
   searchParams: Promise<{
@@ -27,8 +29,9 @@ export const metadata = {
   description: 'Search and compare school performance across England',
 };
 
-// Force dynamic rendering (no static generation at build time)
+// The page reads searchParams, which makes rendering dynamic by default.
-export const dynamic = 'force-dynamic';
+// We don't use `force-dynamic` here so the internal filter/data-info fetches
+// can still hit Next.js's data cache (configured per-call in lib/api.ts).
 
 export default async function HomePage({ searchParams }: HomePageProps) {
   // Await search params (Next.js 15 requirement)
@@ -75,22 +78,28 @@ export default async function HomePage({ searchParams }: HomePageProps) {
       schoolsData = { schools: [], page: 1, page_size: 50, total: 0, total_pages: 0 };
     }
 
+    const resolvedFilters = filtersData || { local_authorities: [], school_types: [], years: [], phases: [], genders: [], admissions_policies: [] };
+    const total = dataInfo?.total_schools ?? null;
     return (
       <HomeView
         initialSchools={schoolsData}
-        filters={filtersData || { local_authorities: [], school_types: [], years: [], phases: [], genders: [], admissions_policies: [] }}
+        filters={resolvedFilters}
-        totalSchools={dataInfo?.total_schools ?? null}
+        totalSchools={total}
+        howItWorks={hasSearchParams ? null : <HowItWorksSection />}
+        editorial={hasSearchParams ? null : <EditorialSection totalSchools={total} localAuthorityCount={resolvedFilters.local_authorities.length} />}
       />
     );
   } catch (error) {
     console.error('Error fetching data for home page:', error);
 
-    // Return error state with empty data
+    const emptyFilters = { local_authorities: [], school_types: [], years: [], phases: [], genders: [], admissions_policies: [] };
     return (
       <HomeView
         initialSchools={{ schools: [], page: 1, page_size: 50, total: 0, total_pages: 0 }}
-        filters={{ local_authorities: [], school_types: [], years: [], phases: [], genders: [], admissions_policies: [] }}
+        filters={emptyFilters}
         totalSchools={null}
+        howItWorks={hasSearchParams ? null : <HowItWorksSection />}
+        editorial={hasSearchParams ? null : <EditorialSection totalSchools={null} localAuthorityCount={0} />}
       />
     );
   }

nextjs-app/app/rankings/page.tsx

@@ -22,8 +22,8 @@ export const metadata: Metadata = {
   keywords: 'school rankings, top schools, best schools, KS2 rankings, KS4 rankings, school league tables',
 };
 
-// Force dynamic rendering
+// Dynamic via searchParams; remove force-dynamic so internal data fetches
-export const dynamic = 'force-dynamic';
+// can still use Next.js's per-call revalidate cache.
 
 export default async function RankingsPage({ searchParams }: RankingsPageProps) {
   const { metric: metricParam, local_authority, year: yearParam, phase: phaseParam } = await searchParams;

nextjs-app/app/school/[slug]/page.tsx

@@ -4,13 +4,48 @@
  * URL format: /school/138267-school-name-here
  */
 
-import { fetchSchoolDetails } from '@/lib/api';
+import { fetchSchoolDetails, fetchSchools } from '@/lib/api';
 import { notFound, redirect } from 'next/navigation';
 import { SchoolDetailView } from '@/components/SchoolDetailView';
 import { SecondarySchoolDetailView } from '@/components/SecondarySchoolDetailView';
 import { parseSchoolSlug, schoolUrl } from '@/lib/utils';
 import type { Metadata } from 'next';
 
+/**
+ * Enumerate every school for static generation at build time.
+ *
+ * Set PRERENDER_SCHOOLS=1 in the build environment to enable. When disabled
+ * (or when the API can't be reached), we return an empty list and the route
+ * falls back to ISR on first request — `dynamicParams = true` covers it.
+ */
+export async function generateStaticParams(): Promise<Array<{ slug: string }>> {
+  if (process.env.PRERENDER_SCHOOLS !== '1') return [];
+
+  const params: Array<{ slug: string }> = [];
+  const PAGE_SIZE = 500;
+  let page = 1;
+  let totalPages = 1;
+
+  try {
+    do {
+      const res = await fetchSchools({ page, page_size: PAGE_SIZE });
+      for (const s of res.schools) {
+        const path = schoolUrl(s.urn, s.school_name);
+        const slug = path.replace('/school/', '');
+        params.push({ slug });
+      }
+      totalPages = res.total_pages || 1;
+      page += 1;
+    } while (page <= totalPages);
+  } catch (error) {
+    console.warn('generateStaticParams: API unreachable, falling back to on-demand ISR.', error);
+    return [];
+  }
+
+  console.log(`generateStaticParams: prebuilding ${params.length} school pages.`);
+  return params;
+}
+
 interface SchoolPageProps {
   params: Promise<{ slug: string }>;
 }
@@ -75,8 +110,10 @@ export async function generateMetadata({ params }: SchoolPageProps): Promise<Met
   }
 }
 
-// Force dynamic rendering
+// ISR: regenerate at most once a week per slug. School data updates annually,
-export const dynamic = 'force-dynamic';
+// so a 7-day cache is plenty and gives sub-100ms TTFB on cache hits.
+export const revalidate = 604800;
+export const dynamicParams = true;
 
 export default async function SchoolPage({ params }: SchoolPageProps) {
   const { slug } = await params;
@@ -96,7 +133,7 @@ export default async function SchoolPage({ params }: SchoolPageProps) {
     notFound();
   }
 
-  const { school_info, yearly_data, absence_data, ofsted, parent_view, census, admissions, sen_detail, phonics, deprivation, finance } = data;
+  const { school_info, yearly_data, absence_data, ofsted, census, admissions, admissions_history, sen_detail, phonics, deprivation, finance } = data;
 
   // Redirect bare URN to canonical slug URL
   const canonicalSlug = schoolUrl(urn, school_info.school_name).replace('/school/', '');
@@ -152,7 +189,6 @@ export default async function SchoolPage({ params }: SchoolPageProps) {
           yearlyData={yearly_data}
           absenceData={absence_data}
           ofsted={ofsted ?? null}
-          parentView={parent_view ?? null}
           census={census ?? null}
           admissions={admissions ?? null}
           senDetail={sen_detail ?? null}
@@ -166,9 +202,9 @@ export default async function SchoolPage({ params }: SchoolPageProps) {
           yearlyData={yearly_data}
           absenceData={absence_data}
           ofsted={ofsted ?? null}
-          parentView={parent_view ?? null}
           census={census ?? null}
           admissions={admissions ?? null}
+          admissionsHistory={admissions_history ?? []}
           senDetail={sen_detail ?? null}
           phonics={phonics ?? null}
           deprivation={deprivation ?? null}

nextjs-app/components/AdmissionsTrendChart.module.css

@@ -0,0 +1,10 @@
+.wrapper {
+    width: 100%;
+    height: 200px;
+}
+
+@media (max-width: 640px) {
+    .wrapper {
+        height: 180px;
+    }
+}

nextjs-app/components/AdmissionsTrendChart.tsx

@@ -0,0 +1,91 @@
+'use client';
+
+/**
+ * AdmissionsTrendChart
+ * Compact line chart of the first-choice offer rate across admissions years.
+ * Renders nothing unless at least two years carry an offer-rate value.
+ */
+
+import { Line } from 'react-chartjs-2';
+import { ChartOptions } from 'chart.js';
+import '@/lib/chartSetup';
+import { formatAcademicYear } from '@/lib/utils';
+import type { SchoolAdmissions } from '@/lib/types';
+import styles from './AdmissionsTrendChart.module.css';
+
+export default function AdmissionsTrendChart({ history }: { history: SchoolAdmissions[] }) {
+  const pts = history.filter((h) => h.first_preference_offer_pct != null);
+  if (pts.length < 2) return null;
+
+  const labels = pts.map((p) => formatAcademicYear(p.year));
+  const values = pts.map((p) => p.first_preference_offer_pct as number);
+  const lastIdx = pts.length - 1;
+
+  // Auto-scale with headroom so variation is visible, clamped to 0–100.
+  const lo = Math.min(...values);
+  const hi = Math.max(...values);
+  const padded = Math.max(5, Math.round((hi - lo) * 0.25));
+  const yMin = Math.max(0, Math.floor((lo - padded) / 5) * 5);
+  const yMax = Math.min(100, Math.ceil((hi + padded) / 5) * 5);
+
+  const options: ChartOptions<'line'> = {
+    responsive: true,
+    maintainAspectRatio: false,
+    interaction: { mode: 'index', intersect: false },
+    // Headroom so a point sitting on the y-max ceiling (e.g. 100%) isn't
+    // clipped by the top of the plot area.
+    layout: { padding: { top: 8 } },
+    plugins: {
+      legend: { display: false },
+      title: { display: false },
+      tooltip: {
+        backgroundColor: 'rgba(26,22,18,0.92)',
+        padding: 10,
+        titleFont: { size: 12 },
+        bodyFont: { size: 12 },
+        callbacks: {
+          label: (ctx) => (ctx.parsed.y == null ? '' : `First-choice offers: ${Math.round(ctx.parsed.y)}%`),
+        },
+      },
+    },
+    scales: {
+      y: {
+        min: yMin,
+        max: yMax,
+        grid: { color: 'rgba(0,0,0,0.05)' },
+        ticks: { font: { size: 11 }, maxTicksLimit: 5, callback: (v) => `${v}%` },
+      },
+      x: {
+        grid: { display: false },
+        ticks: { font: { size: 11 }, autoSkip: true, maxRotation: 0, autoSkipPadding: 16 },
+      },
+    },
+  };
+
+  const data = {
+    labels,
+    datasets: [
+      {
+        label: 'First-choice offer rate',
+        data: values,
+        clip: false as const,
+        borderColor: '#e07256',
+        backgroundColor: 'rgba(224,114,86,0.10)',
+        borderWidth: 2.5,
+        tension: 0.3,
+        fill: true,
+        pointRadius: pts.map((_, i) => (i === lastIdx ? 5 : 3)),
+        pointBackgroundColor: '#e07256',
+        pointBorderColor: '#fff',
+        pointBorderWidth: pts.map((_, i) => (i === lastIdx ? 2 : 0)),
+        pointHoverRadius: 6,
+      },
+    ],
+  };
+
+  return (
+    <div className={styles.wrapper}>
+      <Line data={data} options={options} />
+    </div>
+  );
+}

nextjs-app/components/AdmissionsView.module.css

@@ -0,0 +1,578 @@
+.shell {
+  max-width: 1120px;
+  margin: 0 auto;
+  padding: 0 1.25rem 4rem;
+  display: grid;
+  grid-template-columns: 160px minmax(0, 1fr);
+  gap: 2.5rem;
+  align-items: start;
+}
+
+.page {
+  max-width: 900px;
+  width: 100%;
+  justify-self: center;
+}
+
+/* ─── In-page nav rail ────────────────────────────────── */
+
+.nav {
+  position: sticky;
+  top: 1.5rem;
+  padding-top: 3.75rem;
+}
+
+.navLabel {
+  font-size: 0.65rem;
+  font-weight: 700;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+  color: var(--text-muted, #6d685f);
+  margin-bottom: 0.85rem;
+  padding-left: 0.85rem;
+}
+
+.navList {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 0.1rem;
+  border-left: 2px solid var(--border-color, #e5dfd5);
+}
+
+.navLink {
+  display: flex;
+  align-items: center;
+  gap: 0.55rem;
+  padding: 0.45rem 0.85rem;
+  margin-left: -2px;
+  border-left: 2px solid transparent;
+  font-size: 0.88rem;
+  font-weight: 500;
+  color: var(--text-secondary, #5c564d);
+  text-decoration: none;
+  cursor: pointer;
+  transition: color 0.15s ease, border-color 0.15s ease;
+}
+
+.navLink:hover {
+  color: var(--text-primary, #1a1612);
+}
+
+.navLinkActive {
+  color: var(--accent-teal, #2d7d7d);
+  font-weight: 700;
+  border-left-color: var(--accent-teal, #2d7d7d);
+}
+
+.navDot {
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: var(--border-color, #e5dfd5);
+  flex-shrink: 0;
+  transition: background 0.15s ease;
+}
+
+.navLinkActive .navDot {
+  background: var(--accent-teal, #2d7d7d);
+}
+
+/* ─── Hero ───────────────────────────────────────────── */
+
+.hero {
+  text-align: center;
+  padding: 3rem 0 2rem;
+}
+
+.eyebrow {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.4rem;
+  font-size: 0.72rem;
+  font-weight: 600;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: var(--accent-teal, #2d7d7d);
+  background: rgba(45, 125, 125, 0.1);
+  padding: 0.3rem 0.7rem;
+  border-radius: 999px;
+  margin-bottom: 1rem;
+}
+
+.eyebrowDot {
+  display: inline-block;
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: var(--accent-teal, #2d7d7d);
+}
+
+.heroTitle {
+  font-family: var(--font-playfair), 'Playfair Display', serif;
+  font-size: 2.75rem;
+  font-weight: 700;
+  line-height: 1.1;
+  letter-spacing: -0.015em;
+  color: var(--text-primary, #1a1612);
+  margin-bottom: 0.85rem;
+}
+
+.heroSub {
+  font-size: 1.05rem;
+  color: var(--text-secondary, #5c564d);
+  max-width: 640px;
+  margin: 0 auto;
+  line-height: 1.55;
+}
+
+/* ─── Countdown strip ────────────────────────────────── */
+
+.countdownSection {
+  padding: 0 0 2.5rem;
+  border-bottom: 1px solid var(--border-color, #e5dfd5);
+  margin-bottom: 2.5rem;
+}
+
+.stripHeader {
+  margin-bottom: 0.85rem;
+}
+
+.stripLabel {
+  font-size: 0.72rem;
+  font-weight: 700;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: var(--text-muted, #6d685f);
+}
+
+.countdownRail {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 0.75rem;
+}
+
+.chip {
+  background: var(--bg-card, #fff);
+  border: 1px solid var(--border-color, #e5dfd5);
+  border-radius: 12px;
+  padding: 1rem 1.1rem 0.9rem;
+  box-shadow: 0 2px 8px rgba(26, 22, 18, 0.06);
+  display: flex;
+  flex-direction: column;
+  gap: 0.2rem;
+  position: relative;
+  overflow: hidden;
+}
+
+.chip::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 3px;
+  border-radius: 12px 12px 0 0;
+}
+
+.chipDeadline::before { background: var(--accent-coral, #e07256); }
+.chipOffer::before    { background: var(--accent-teal, #2d7d7d); }
+
+.chipUrgent {
+  border-color: rgba(224, 114, 86, 0.4);
+  background: rgba(224, 114, 86, 0.04);
+}
+
+.chipTrack {
+  display: flex;
+  align-items: center;
+  gap: 0.3rem;
+  font-size: 0.6rem;
+  font-weight: 700;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+  margin-bottom: 0.15rem;
+}
+
+.chipTrackDeadline { color: var(--accent-coral-dark, #b04a2e); }
+.chipTrackOffer    { color: var(--accent-teal, #2d7d7d); }
+
+.chipTrackDot {
+  width: 5px;
+  height: 5px;
+  border-radius: 50%;
+  background: currentColor;
+  flex-shrink: 0;
+}
+
+.chipDays {
+  font-family: var(--font-playfair), 'Playfair Display', serif;
+  font-size: 2.6rem;
+  font-weight: 700;
+  line-height: 1;
+  letter-spacing: -0.02em;
+}
+
+.chipDeadline .chipDays,
+.chipUrgent .chipDays {
+  color: var(--accent-coral-dark, #c45a3f);
+}
+
+.chipOffer .chipDays {
+  color: var(--accent-teal, #2d7d7d);
+}
+
+.chipDaysUnit {
+  font-size: 0.78rem;
+  font-weight: 500;
+  color: var(--text-muted, #6d685f);
+  margin-left: 0.2rem;
+  vertical-align: bottom;
+  line-height: 2;
+}
+
+.chipMilestone {
+  font-size: 0.85rem;
+  font-weight: 600;
+  color: var(--text-primary, #1a1612);
+  line-height: 1.25;
+  margin-top: 0.1rem;
+}
+
+.chipDate {
+  font-size: 0.75rem;
+  color: var(--text-muted, #6d685f);
+  margin-top: 0.05rem;
+}
+
+/* ─── Track (Secondary / Primary) ────────────────────── */
+
+.track {
+  margin-bottom: 3rem;
+  background: var(--bg-card, #fff);
+  border: 1px solid var(--border-color, #e5dfd5);
+  border-radius: 14px;
+  overflow: hidden;
+}
+
+.trackHeader {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 1.5rem;
+  padding: 1.75rem 2rem 1.5rem;
+  border-bottom: 1px solid var(--border-color, #e5dfd5);
+  flex-wrap: wrap;
+}
+
+.trackHeaderLeft {
+  flex: 1;
+  min-width: 0;
+}
+
+.trackKicker {
+  display: block;
+  font-size: 0.68rem;
+  font-weight: 700;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+  color: var(--accent-coral-dark, #b04a2e);
+  margin-bottom: 0.35rem;
+}
+
+.trackTitle {
+  font-family: var(--font-playfair), 'Playfair Display', serif;
+  font-size: 1.5rem;
+  font-weight: 700;
+  color: var(--text-primary, #1a1612);
+  margin-bottom: 0.4rem;
+  line-height: 1.2;
+}
+
+.trackSub {
+  font-size: 0.9rem;
+  color: var(--text-secondary, #5c564d);
+  line-height: 1.5;
+  margin: 0;
+}
+
+.trackDates {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  flex-shrink: 0;
+  text-align: right;
+}
+
+.trackDateRow {
+  display: flex;
+  flex-direction: column;
+  gap: 0.05rem;
+}
+
+.trackDateLabel {
+  font-size: 0.62rem;
+  font-weight: 700;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: var(--text-muted, #6d685f);
+}
+
+.trackDateVal {
+  font-size: 0.88rem;
+  font-weight: 600;
+  color: var(--text-primary, #1a1612);
+}
+
+/* ─── Timeline ───────────────────────────────────────── */
+
+.timeline {
+  list-style: none;
+  padding: 1.5rem 2rem 1.75rem;
+  margin: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 0;
+}
+
+.step {
+  display: flex;
+  gap: 1rem;
+  align-items: flex-start;
+}
+
+.stepDotCol {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  flex-shrink: 0;
+  width: 20px;
+  padding-top: 0.15rem;
+}
+
+.stepDot {
+  width: 14px;
+  height: 14px;
+  border-radius: 50%;
+  background: var(--bg-card, #fff);
+  border: 2px solid var(--border-color, #e5dfd5);
+  flex-shrink: 0;
+  transition: border-color 0.2s ease, background 0.2s ease;
+}
+
+.stepDeadline .stepDot {
+  background: rgba(224, 114, 86, 0.15);
+  border-color: var(--accent-coral, #e07256);
+}
+
+.stepOffer .stepDot {
+  background: rgba(45, 125, 125, 0.15);
+  border-color: var(--accent-teal, #2d7d7d);
+}
+
+.stepLine {
+  width: 2px;
+  flex: 1;
+  min-height: 24px;
+  background: var(--border-color, #e5dfd5);
+  margin: 4px 0;
+}
+
+.stepContent {
+  padding-bottom: 1.5rem;
+  flex: 1;
+  min-width: 0;
+}
+
+.step:last-child .stepContent {
+  padding-bottom: 0;
+}
+
+.stepDate {
+  font-size: 0.72rem;
+  font-weight: 700;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  color: var(--text-muted, #6d685f);
+  margin-bottom: 0.2rem;
+}
+
+.stepDeadline .stepDate { color: var(--accent-coral-dark, #b04a2e); }
+.stepOffer    .stepDate { color: var(--accent-teal, #2d7d7d); }
+
+.stepTitle {
+  font-size: 0.95rem;
+  font-weight: 700;
+  color: var(--text-primary, #1a1612);
+  margin-bottom: 0.3rem;
+  line-height: 1.3;
+}
+
+.stepDeadline .stepTitle { color: var(--accent-coral-dark, #c45a3f); }
+.stepOffer    .stepTitle { color: var(--accent-teal, #2d7d7d); }
+
+.stepBody {
+  font-size: 0.88rem;
+  color: var(--text-secondary, #5c564d);
+  line-height: 1.55;
+  margin: 0;
+}
+
+.stepTool {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.35rem;
+  margin-top: 0.6rem;
+  font-size: 0.82rem;
+  font-weight: 600;
+  color: var(--accent-teal, #2d7d7d);
+  text-decoration: none;
+  transition: gap 0.2s ease, color 0.2s ease;
+}
+
+.stepTool:hover {
+  color: var(--accent-coral-dark, #c45a3f);
+  gap: 0.6rem;
+}
+
+.stepToolArrow {
+  font-size: 0.9em;
+  line-height: 1;
+}
+
+/* ─── Tips ───────────────────────────────────────────── */
+
+.tips {
+  margin-top: 1rem;
+}
+
+.tipsHeading {
+  font-family: var(--font-playfair), 'Playfair Display', serif;
+  font-size: 1.35rem;
+  font-weight: 700;
+  color: var(--text-primary, #1a1612);
+  margin-bottom: 1.25rem;
+}
+
+.tipsGrid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 1rem;
+}
+
+.tipCard {
+  background: var(--bg-secondary, #f3ede4);
+  border-radius: 12px;
+  padding: 1.25rem;
+}
+
+.tipNumber {
+  font-family: var(--font-playfair), 'Playfair Display', serif;
+  font-size: 1.75rem;
+  font-weight: 700;
+  color: #7d766b; /* 3.8:1 on cream — AA large-text for this 28px numeral */
+  line-height: 1;
+  margin-bottom: 0.6rem;
+}
+
+.tipHeading {
+  font-size: 0.95rem;
+  font-weight: 700;
+  color: var(--text-primary, #1a1612);
+  margin-bottom: 0.4rem;
+  line-height: 1.3;
+}
+
+.tipBody {
+  font-size: 0.875rem;
+  color: var(--text-secondary, #5c564d);
+  line-height: 1.55;
+  margin: 0;
+}
+
+/* ─── Responsive ─────────────────────────────────────── */
+
+@media (max-width: 960px) {
+  .shell {
+    grid-template-columns: 1fr;
+    gap: 0;
+    padding-top: 0;
+  }
+
+  .nav {
+    position: sticky;
+    top: 0;
+    padding-top: 0;
+    background: var(--bg-primary, #faf8f3);
+    border-bottom: 1px solid var(--border-color, #e5dfd5);
+    margin: 0 -1.25rem 1rem;
+    padding: 0.6rem 1.25rem;
+    z-index: 10;
+  }
+
+  .navLabel {
+    display: none;
+  }
+
+  .navList {
+    flex-direction: row;
+    gap: 0.35rem;
+    border-left: none;
+    overflow-x: auto;
+    -webkit-overflow-scrolling: touch;
+  }
+
+  .navList::-webkit-scrollbar {
+    display: none;
+  }
+
+  .navLink {
+    padding: 0.4rem 0.9rem;
+    margin-left: 0;
+    border-left: none;
+    border-radius: 999px;
+    background: transparent;
+    white-space: nowrap;
+  }
+
+  .navLinkActive {
+    background: var(--text-primary, #1a1612);
+    color: #fff;
+    border-left: none;
+  }
+
+  .navLinkActive .navDot {
+    background: #fff;
+  }
+}
+
+@media (max-width: 768px) {
+  .heroTitle {
+    font-size: 2rem;
+  }
+
+  .countdownRail {
+    grid-template-columns: repeat(2, 1fr);
+  }
+
+  .trackHeader {
+    flex-direction: column;
+    padding: 1.25rem 1.25rem 1rem;
+  }
+
+  .trackDates {
+    text-align: left;
+    flex-direction: row;
+    gap: 1.5rem;
+  }
+
+  .timeline {
+    padding: 1.25rem;
+  }
+
+  .tipsGrid {
+    grid-template-columns: 1fr;
+  }
+}

nextjs-app/components/AdmissionsView.tsx

@@ -0,0 +1,392 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+import styles from './AdmissionsView.module.css';
+
+/* ─── Date helpers ─────────────────────────────────────── */
+
+function daysUntil(month: number, day: number): number {
+  const today = new Date();
+  today.setHours(0, 0, 0, 0);
+  const y = today.getFullYear();
+  let target = new Date(y, month - 1, day);
+  if (target < today) target = new Date(y + 1, month - 1, day);
+  return Math.round((target.getTime() - today.getTime()) / 86_400_000);
+}
+
+function nextDate(month: number, day: number): Date {
+  const today = new Date();
+  today.setHours(0, 0, 0, 0);
+  const y = today.getFullYear();
+  const target = new Date(y, month - 1, day);
+  if (target <= today) return new Date(y + 1, month - 1, day);
+  return target;
+}
+
+function fmtDate(month: number, day: number): string {
+  return nextDate(month, day).toLocaleDateString('en-GB', {
+    weekday: 'short',
+    day: 'numeric',
+    month: 'long',
+    year: 'numeric',
+  });
+}
+
+/* ─── Data ─────────────────────────────────────────────── */
+
+interface Chip {
+  type: 'deadline' | 'offer';
+  track: string;
+  milestone: string;
+  month: number;
+  day: number;
+}
+
+const CHIPS: Chip[] = [
+  { type: 'offer',    track: 'Primary · Offer Day',   milestone: 'Primary National Offer Day',   month: 4,  day: 16 },
+  { type: 'deadline', track: 'Secondary · Deadline',  milestone: 'Secondary applications close', month: 10, day: 31 },
+  { type: 'deadline', track: 'Primary · Deadline',    milestone: 'Primary applications close',   month: 1,  day: 15 },
+  { type: 'offer',    track: 'Secondary · Offer Day', milestone: 'Secondary National Offer Day', month: 3,  day: 1  },
+];
+
+interface Step {
+  date?: string;
+  title: string;
+  body: string;
+  highlight?: 'deadline' | 'offer';
+  /* How SchoolCompare helps at this stage of the journey */
+  tool?: { label: string; href: string };
+}
+
+const SECONDARY_STEPS: Step[] = [
+  {
+    title: 'Check entry criteria',
+    body: 'Look at each school\'s admissions policy — catchment areas, faith criteria, sibling priority, and aptitude tests vary widely.',
+    tool: { label: 'Find schools & view their admissions history', href: '/' },
+  },
+  {
+    date: 'September',
+    title: 'Portal opens',
+    body: 'Your local council opens its online admissions portal. Register early to avoid last-minute technical issues. You apply through your home council even if you prefer schools in neighbouring boroughs.',
+    tool: { label: 'Build and compare your shortlist', href: '/compare' },
+  },
+  {
+    date: '31 October',
+    title: 'Application deadline',
+    body: 'Submit your ranked list of up to six schools. Councils treat all preferences equally — list schools in the genuine order you want them, not strategically.',
+    highlight: 'deadline',
+    tool: { label: 'Compare performance to order your preferences', href: '/rankings' },
+  },
+  {
+    date: '1 March',
+    title: 'National Offer Day',
+    body: 'Results are published online, usually from 12:01 am. You\'ll receive an email or letter with your allocated school.',
+    highlight: 'offer',
+    tool: { label: 'Look up your allocated school', href: '/' },
+  },
+  {
+    date: '~15 March',
+    title: 'Accept or decline',
+    body: 'Respond by the deadline your council gives — typically around 15 March. Accepting does not prevent you from keeping a place on a waiting list for a preferred school.',
+    tool: { label: 'Weigh your offer against your other choices', href: '/compare' },
+  },
+  {
+    title: 'Appeals',
+    body: 'If unsuccessful, you can appeal within 20 school days of the refusal letter. Secondary appeals consider whether prejudice to the school outweighs your case — success rates vary.',
+    tool: { label: 'Gather performance evidence for your case', href: '/rankings' },
+  },
+];
+
+const PRIMARY_STEPS: Step[] = [
+  {
+    title: 'Research entry criteria',
+    body: 'Faith schools, language units, and distance-based catchments differ by school. Start by reading each school\'s admissions policy on their website or the council\'s website.',
+    tool: { label: 'Find schools & view their admissions history', href: '/' },
+  },
+  {
+    date: 'September',
+    title: 'Portal opens',
+    body: 'Apply through your home council\'s portal, even if your preferred school is in another borough. Most councils accept applications from September.',
+    tool: { label: 'Build and compare your shortlist', href: '/compare' },
+  },
+  {
+    date: '15 January',
+    title: 'Application deadline',
+    body: 'List up to 3–6 schools (the number varies by council) in genuine preference order. The equal preference rule means all preferences are considered before any offers are made.',
+    highlight: 'deadline',
+    tool: { label: 'Compare performance to order your preferences', href: '/rankings' },
+  },
+  {
+    date: '16 April',
+    title: 'National Offer Day',
+    body: 'Results are published online. Reception offers are sent on 16 April (or the next working day if that falls on a weekend or bank holiday).',
+    highlight: 'offer',
+    tool: { label: 'Look up your allocated school', href: '/' },
+  },
+  {
+    date: '~1 May',
+    title: 'Accept or decline',
+    body: 'Respond by your council\'s deadline, typically around 1 May. Accepting secures the place while you wait to see if a preferred school\'s waiting list moves.',
+    tool: { label: 'Weigh your offer against your other choices', href: '/compare' },
+  },
+  {
+    title: 'Appeals',
+    body: 'Infant class-size appeals (Reception to Year 2) have a very narrow legal test and a low success rate. For Year 3+, appeals follow the same process as secondary.',
+    tool: { label: 'Gather performance evidence for your case', href: '/rankings' },
+  },
+];
+
+interface Tip {
+  heading: string;
+  body: string;
+}
+
+const TIPS: Tip[] = [
+  {
+    heading: 'Equal preference rule',
+    body: 'Councils rank offers by your eligibility for each school, not by the order you listed them. You cannot game the system — put schools in the order you actually want them.',
+  },
+  {
+    heading: 'Late applications go to the back',
+    body: 'Submit before the deadline even if your child does not turn the required age until later in the year. Late applicants are only considered after all on-time applications.',
+  },
+  {
+    heading: 'Waiting lists',
+    body: 'You can go on waiting lists for multiple schools simultaneously. Lists are ordered by admissions criteria, not when you joined. They can move significantly over the summer.',
+  },
+];
+
+/* ─── Component ────────────────────────────────────────── */
+
+const NAV_ITEMS = [
+  { id: 'primary',   label: 'Primary' },
+  { id: 'secondary', label: 'Secondary' },
+  { id: 'tips',      label: 'Tips' },
+] as const;
+
+type NavId = typeof NAV_ITEMS[number]['id'];
+
+export function AdmissionsView() {
+  const [chipDays, setChipDays] = useState<(number | null)[]>(CHIPS.map(() => null));
+  const [activeId, setActiveId] = useState<NavId>('primary');
+
+  useEffect(() => {
+    setChipDays(CHIPS.map(c => daysUntil(c.month, c.day)));
+  }, []);
+
+  useEffect(() => {
+    const sections = NAV_ITEMS
+      .map(item => document.getElementById(item.id))
+      .filter((el): el is HTMLElement => el !== null);
+
+    if (sections.length === 0) return;
+
+    const observer = new IntersectionObserver(
+      (entries) => {
+        const visible = entries
+          .filter(e => e.isIntersecting)
+          .sort((a, b) => b.intersectionRatio - a.intersectionRatio);
+        if (visible[0]) setActiveId(visible[0].target.id as NavId);
+      },
+      { rootMargin: '-30% 0px -55% 0px', threshold: [0, 0.25, 0.5, 0.75, 1] },
+    );
+
+    sections.forEach(s => observer.observe(s));
+    return () => observer.disconnect();
+  }, []);
+
+  const handleNavClick = (e: React.MouseEvent<HTMLAnchorElement>, id: NavId) => {
+    e.preventDefault();
+    const el = document.getElementById(id);
+    if (!el) return;
+    const top = el.getBoundingClientRect().top + window.scrollY - 16;
+    window.scrollTo({ top, behavior: 'smooth' });
+    setActiveId(id);
+  };
+
+  return (
+    <div className={styles.shell}>
+
+      {/* In-page nav — sticky left rail on desktop, sticky top pills on mobile */}
+      <aside className={styles.nav} aria-label="On this page">
+        <div className={styles.navLabel}>On this page</div>
+        <ul className={styles.navList}>
+          {NAV_ITEMS.map(item => {
+            const isActive = activeId === item.id;
+            return (
+              <li key={item.id}>
+                <a
+                  href={`#${item.id}`}
+                  onClick={(e) => handleNavClick(e, item.id)}
+                  className={[styles.navLink, isActive ? styles.navLinkActive : ''].filter(Boolean).join(' ')}
+                  aria-current={isActive ? 'true' : undefined}
+                >
+                  <span className={styles.navDot} aria-hidden="true" />
+                  <span>{item.label}</span>
+                </a>
+              </li>
+            );
+          })}
+        </ul>
+      </aside>
+
+      <div className={styles.page}>
+
+      {/* Hero */}
+      <section className={styles.hero}>
+        <span className={styles.eyebrow}>
+          <span className={styles.eyebrowDot} aria-hidden="true" />
+          England · Primary &amp; Secondary
+        </span>
+        <h1 className={styles.heroTitle}>School Admissions Guide</h1>
+        <p className={styles.heroSub}>
+          Everything parents need to know about applying for a school place in England — from opening dates to National Offer Day, with live countdowns to every key milestone.
+        </p>
+      </section>
+
+      {/* Countdown strip */}
+      <section className={styles.countdownSection}>
+        <div className={styles.stripHeader}>
+          <span className={styles.stripLabel}>Days until next milestone</span>
+        </div>
+        <div className={styles.countdownRail}>
+          {CHIPS.map((chip, i) => {
+            const days = chipDays[i];
+            const isUrgent = days !== null && days <= 14;
+            const chipClass = [
+              styles.chip,
+              chip.type === 'deadline' ? styles.chipDeadline : styles.chipOffer,
+              isUrgent ? styles.chipUrgent : '',
+            ].filter(Boolean).join(' ');
+            return (
+              <div key={chip.milestone} className={chipClass}>
+                <span className={[styles.chipTrack, chip.type === 'deadline' ? styles.chipTrackDeadline : styles.chipTrackOffer].join(' ')}>
+                  <span className={styles.chipTrackDot} aria-hidden="true" />
+                  {chip.track}
+                </span>
+                <div>
+                  <span className={styles.chipDays}>{days === 0 ? 'Today' : (days ?? '—')}</span>
+                  {days !== null && days > 0 && <span className={styles.chipDaysUnit}>days</span>}
+                </div>
+                <div className={styles.chipMilestone}>{chip.milestone}</div>
+                <div className={styles.chipDate}>{days !== null ? fmtDate(chip.month, chip.day) : ''}</div>
+              </div>
+            );
+          })}
+        </div>
+      </section>
+
+      {/* Primary track */}
+      <section id="primary" className={styles.track} style={{ scrollMarginTop: '1rem' }}>
+        <div className={styles.trackHeader}>
+          <div className={styles.trackHeaderLeft}>
+            <span className={styles.trackKicker}>Reception entry</span>
+            <h2 className={styles.trackTitle}>Primary school admissions</h2>
+            <p className={styles.trackSub}>For children starting Reception (Year R) in September. Applications are submitted in the autumn of the year before entry.</p>
+          </div>
+          <div className={styles.trackDates}>
+            <div className={styles.trackDateRow}>
+              <span className={styles.trackDateLabel}>Deadline</span>
+              <span className={styles.trackDateVal}>{fmtDate(1, 15)}</span>
+            </div>
+            <div className={styles.trackDateRow}>
+              <span className={styles.trackDateLabel}>Offer Day</span>
+              <span className={styles.trackDateVal}>{fmtDate(4, 16)}</span>
+            </div>
+          </div>
+        </div>
+
+        <ol className={styles.timeline}>
+          {PRIMARY_STEPS.map((step, i) => (
+            <li key={i} className={[styles.step, step.highlight === 'deadline' ? styles.stepDeadline : step.highlight === 'offer' ? styles.stepOffer : ''].filter(Boolean).join(' ')}>
+              <div className={styles.stepDotCol}>
+                <div className={styles.stepDot} />
+                {i < PRIMARY_STEPS.length - 1 && <div className={styles.stepLine} />}
+              </div>
+              <div className={styles.stepContent}>
+                {step.date && <div className={styles.stepDate}>{step.date}</div>}
+                <div className={styles.stepTitle}>{step.title}</div>
+                <p className={styles.stepBody}>{step.body}</p>
+                {step.tool && (
+                  <a
+                    href={step.tool.href}
+                    className={styles.stepTool}
+                    data-umami-event="admissions_tool_clicked"
+                    data-umami-event-target={step.tool.href}
+                  >
+                    {step.tool.label}
+                    <span className={styles.stepToolArrow} aria-hidden="true">→</span>
+                  </a>
+                )}
+              </div>
+            </li>
+          ))}
+        </ol>
+      </section>
+
+      {/* Secondary track */}
+      <section id="secondary" className={styles.track} style={{ scrollMarginTop: '1rem' }}>
+        <div className={styles.trackHeader}>
+          <div className={styles.trackHeaderLeft}>
+            <span className={styles.trackKicker}>Year 7 entry</span>
+            <h2 className={styles.trackTitle}>Secondary school admissions</h2>
+            <p className={styles.trackSub}>For children starting secondary school (Year 7) in September. Applications are submitted in the autumn of Year 6.</p>
+          </div>
+          <div className={styles.trackDates}>
+            <div className={styles.trackDateRow}>
+              <span className={styles.trackDateLabel}>Deadline</span>
+              <span className={styles.trackDateVal}>{fmtDate(10, 31)}</span>
+            </div>
+            <div className={styles.trackDateRow}>
+              <span className={styles.trackDateLabel}>Offer Day</span>
+              <span className={styles.trackDateVal}>{fmtDate(3, 1)}</span>
+            </div>
+          </div>
+        </div>
+
+        <ol className={styles.timeline}>
+          {SECONDARY_STEPS.map((step, i) => (
+            <li key={i} className={[styles.step, step.highlight === 'deadline' ? styles.stepDeadline : step.highlight === 'offer' ? styles.stepOffer : ''].filter(Boolean).join(' ')}>
+              <div className={styles.stepDotCol}>
+                <div className={styles.stepDot} />
+                {i < SECONDARY_STEPS.length - 1 && <div className={styles.stepLine} />}
+              </div>
+              <div className={styles.stepContent}>
+                {step.date && <div className={styles.stepDate}>{step.date}</div>}
+                <div className={styles.stepTitle}>{step.title}</div>
+                <p className={styles.stepBody}>{step.body}</p>
+                {step.tool && (
+                  <a
+                    href={step.tool.href}
+                    className={styles.stepTool}
+                    data-umami-event="admissions_tool_clicked"
+                    data-umami-event-target={step.tool.href}
+                  >
+                    {step.tool.label}
+                    <span className={styles.stepToolArrow} aria-hidden="true">→</span>
+                  </a>
+                )}
+              </div>
+            </li>
+          ))}
+        </ol>
+      </section>
+
+      {/* Tips */}
+      <section id="tips" className={styles.tips} style={{ scrollMarginTop: '1rem' }}>
+        <h2 className={styles.tipsHeading}>Three things most parents get wrong</h2>
+        <div className={styles.tipsGrid}>
+          {TIPS.map((tip, i) => (
+            <div key={i} className={styles.tipCard}>
+              <div className={styles.tipNumber}>{String(i + 1).padStart(2, '0')}</div>
+              <h3 className={styles.tipHeading}>{tip.heading}</h3>
+              <p className={styles.tipBody}>{tip.body}</p>
+            </div>
+          ))}
+        </div>
+      </section>
+
+      </div>
+    </div>
+  );
+}

nextjs-app/components/ComparisonChart.module.css

@@ -0,0 +1,67 @@
+/* Chart wrapper: chips (mobile) above, canvas filling the rest of the
+   parent .chartContainer, whose fixed height drives Chart.js sizing via
+   maintainAspectRatio: false. */
+.wrapper {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+}
+
+.canvasBox {
+    position: relative;
+    flex: 1 1 auto;
+    min-height: 0;
+}
+
+/* School chips: mobile-only legend + tap-to-focus control. Desktop keeps
+   Chart.js's built-in legend (with per-school point shapes). */
+.chips {
+    display: none;
+}
+
+@media (max-width: 640px) {
+    .chips {
+        /* Two chips per row so long school names don't crowd into a single
+           line; each chip fills its column and truncates with an ellipsis. */
+        display: grid;
+        grid-template-columns: 1fr 1fr;
+        gap: 6px;
+        padding-bottom: 8px;
+    }
+
+    .chip {
+        display: inline-flex;
+        align-items: center;
+        gap: 6px;
+        min-height: 40px;
+        min-width: 0;
+        padding: 4px 10px;
+        border: 1px solid rgba(0, 0, 0, .12);
+        border-radius: 999px;
+        background: transparent;
+        cursor: pointer;
+        font-size: 12px;
+        font-weight: 600;
+    }
+
+    .chip[aria-pressed="true"] {
+        background: rgba(0, 0, 0, .06);
+        border-color: rgba(0, 0, 0, .35);
+    }
+
+    .chipDot {
+        flex: 0 0 auto;
+        width: 10px;
+        height: 10px;
+        border-radius: 50%;
+    }
+
+    .chipName {
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        /* min-width:0 lets the name shrink inside the grid cell so the
+           ellipsis kicks in instead of overflowing. */
+        min-width: 0;
+    }
+}

nextjs-app/components/ComparisonChart.tsx

@@ -1,67 +1,82 @@
 /**
  * ComparisonChart Component
- * Multi-school comparison chart using Chart.js
+ * Multi-school comparison chart using Chart.js.
+ *
+ * Desktop: built-in legend (point-style markers double as per-school shapes).
+ * Mobile (≤640px): the in-chart legend and axis titles are dropped in favour
+ *   of a chip row above the canvas; tapping a chip highlights that school's
+ *   line and dims the rest. The y-axis auto-fits the data on all viewports so
+ *   clustered schools stay distinguishable.
  */
 
 'use client';
 
+import { useEffect, useState } from 'react';
 import { Line } from 'react-chartjs-2';
-import {
+import { ChartOptions, ChartDataset, PointStyle } from 'chart.js';
-  Chart as ChartJS,
+import '@/lib/chartSetup';
-  CategoryScale,
-  LinearScale,
-  PointElement,
-  LineElement,
-  Title,
-  Tooltip,
-  Legend,
-  ChartOptions,
-} from 'chart.js';
 import type { ComparisonData } from '@/lib/types';
-import { CHART_COLORS, formatAcademicYear } from '@/lib/utils';
+import {
-
+  CHART_COLORS,
-// Register Chart.js components
+  CHART_TEXT_COLORS,
-ChartJS.register(
+  computeYBounds,
-  CategoryScale,
+  formatAcademicYear,
-  LinearScale,
+  metricKind,
-  PointElement,
+  rgbToRgba,
-  LineElement,
+} from '@/lib/utils';
-  Title,
+import { useIsMobile } from '@/hooks/useIsMobile';
-  Tooltip,
+import { track } from '@/lib/analytics';
-  Legend
+import styles from './ComparisonChart.module.css';
-);
 
 interface ComparisonChartProps {
   comparisonData: Record<string, ComparisonData>;
+  /** Ordered as displayed in the school cards, so colours match by index. */
+  schools: Array<{ urn: number; school_name: string }>;
   metric: string;
   metricLabel: string;
 }
 
-export function ComparisonChart({ comparisonData, metric, metricLabel }: ComparisonChartProps) {
+// One shape per basket slot (MAX_SCHOOLS = 5) — secondary encoding so
-  // Get all schools and their data
+// converging lines stay tellable apart without relying on hue alone.
-  const schools = Object.entries(comparisonData);
+const POINT_STYLES: PointStyle[] = ['circle', 'triangle', 'rect', 'rectRot', 'star'];
+
+export function ComparisonChart({ comparisonData, schools, metric, metricLabel }: ComparisonChartProps) {
+  const isMobile = useIsMobile();
+  const [focusedUrn, setFocusedUrn] = useState<number | null>(null);
+
+  // A focused school that leaves the basket must not linger.
+  const urnKey = schools.map((s) => s.urn).join(',');
+  useEffect(() => {
+    setFocusedUrn(null);
+  }, [urnKey]);
 
   if (schools.length === 0) {
     return <div>No data available</div>;
   }
 
-  // Get years from first school (assuming all schools have same years)
+  // Union of years across all schools — coverage differs between them.
-  const years = schools[0][1].yearly_data.map((d) => d.year).sort((a, b) => a - b);
+  const years = [
+    ...new Set(schools.flatMap((s) => comparisonData[String(s.urn)]?.yearly_data.map((d) => d.year) ?? [])),
+  ].sort((a, b) => a - b);
 
-  // Create datasets for each school
+  const datasets: ChartDataset<'line'>[] = schools.map((school, index) => {
-  const datasets = schools.map(([urn, data], index) => {
+    const data = comparisonData[String(school.urn)];
-    const schoolInfo = data.school_info;
     const color = CHART_COLORS[index % CHART_COLORS.length];
+    const dimmed = focusedUrn !== null && focusedUrn !== school.urn;
 
     return {
-      label: schoolInfo.school_name,
+      label: school.school_name,
       data: years.map((year) => {
-        const yearData = data.yearly_data.find((d) => d.year === year);
+        const yearData = data?.yearly_data.find((d) => d.year === year);
         if (!yearData) return null;
         return yearData[metric as keyof typeof yearData] as number | null;
       }),
-      borderColor: color,
+      borderColor: dimmed ? rgbToRgba(color, 0.2) : color,
-      backgroundColor: color.replace('rgb', 'rgba').replace(')', ', 0.1)'),
+      backgroundColor: dimmed ? 'transparent' : rgbToRgba(color, 0.1),
+      borderWidth: focusedUrn === school.urn ? 3 : dimmed ? 1.5 : 2,
+      pointStyle: POINT_STYLES[index % POINT_STYLES.length],
+      pointRadius: dimmed ? 2 : isMobile ? 3 : 4,
+      pointHoverRadius: isMobile ? 5 : 6,
       tension: 0.3,
       spanGaps: true,
     };
@@ -72,9 +87,11 @@ export function ComparisonChart({ comparisonData, metric, metricLabel }: Compari
     datasets,
   };
 
-  // Determine if metric is a progress score or percentage
+  const kind = metricKind(metric);
-  const isProgressScore = metric.includes('progress');
+  const yBounds = computeYBounds(
-  const isPercentage = metric.includes('pct') || metric.includes('rate');
+    datasets.flatMap((ds) => ds.data as Array<number | null>),
+    kind,
+  );
 
   const options: ChartOptions<'line'> = {
     responsive: true,
@@ -85,6 +102,7 @@ export function ComparisonChart({ comparisonData, metric, metricLabel }: Compari
     },
     plugins: {
       legend: {
+        display: !isMobile,
         position: 'top' as const,
         labels: {
           usePointStyle: true,
@@ -94,26 +112,22 @@ export function ComparisonChart({ comparisonData, metric, metricLabel }: Compari
           },
         },
       },
+      // No in-chart title: the section heading and metric selector above the
+      // chart already state the metric.
       title: {
-        display: true,
+        display: false,
-        text: `${metricLabel} - Comparison`,
-        font: {
-          size: 16,
-          weight: 'bold',
-        },
-        padding: {
-          bottom: 20,
-        },
       },
       tooltip: {
         backgroundColor: 'rgba(0, 0, 0, 0.8)',
-        padding: 12,
+        padding: isMobile ? 10 : 12,
         titleFont: {
-          size: 14,
+          size: isMobile ? 12 : 14,
         },
         bodyFont: {
-          size: 13,
+          size: isMobile ? 11 : 13,
         },
+        usePointStyle: true,
+        itemSort: (a, b) => (b.parsed.y ?? -Infinity) - (a.parsed.y ?? -Infinity),
         callbacks: {
           label: function (context) {
             let label = context.dataset.label || '';
@@ -121,13 +135,7 @@ export function ComparisonChart({ comparisonData, metric, metricLabel }: Compari
               label += ': ';
             }
             if (context.parsed.y !== null) {
-              if (isProgressScore) {
+              label += context.parsed.y.toFixed(1) + (kind === 'percentage' ? '%' : '');
-                label += context.parsed.y.toFixed(1);
-              } else if (isPercentage) {
-                label += context.parsed.y.toFixed(1) + '%';
-              } else {
-                label += context.parsed.y.toFixed(1);
-              }
             } else {
               label += 'N/A';
             }
@@ -141,17 +149,18 @@ export function ComparisonChart({ comparisonData, metric, metricLabel }: Compari
         type: 'linear' as const,
         display: true,
         title: {
-          display: true,
+          display: !isMobile,
-          text: isPercentage ? 'Percentage (%)' : isProgressScore ? 'Progress Score' : 'Value',
+          text: kind === 'percentage' ? 'Percentage (%)' : kind === 'progress' ? 'Progress Score' : 'Value',
           font: {
             size: 12,
             weight: 'bold',
           },
         },
-        ...(isPercentage && {
+        ...yBounds,
-          min: 0,
+        ticks: {
-          max: 100,
+          font: { size: isMobile ? 10 : 12 },
-        }),
+          ...(isMobile && { maxTicksLimit: 5 }),
+        },
         grid: {
           color: 'rgba(0, 0, 0, 0.05)',
         },
@@ -161,16 +170,58 @@ export function ComparisonChart({ comparisonData, metric, metricLabel }: Compari
           display: false,
         },
         title: {
-          display: true,
+          display: !isMobile,
           text: 'Year',
           font: {
             size: 12,
             weight: 'bold',
           },
         },
+        ticks: {
+          font: { size: isMobile ? 10 : 12 },
+          ...(isMobile && { maxRotation: 0, autoSkip: true, maxTicksLimit: 4 }),
+        },
       },
     },
   };
 
-  return <Line data={chartData} options={options} />;
+  const toggleFocus = (urn: number) => {
+    const next = focusedUrn === urn ? null : urn;
+    setFocusedUrn(next);
+    if (next !== null) track('compare_focus_school', { urn: next });
+  };
+
+  return (
+    <div className={styles.wrapper}>
+      {/* Mobile legend + focus control; a single series needs no legend. */}
+      {schools.length > 1 && (
+        <div className={styles.chips} role="group" aria-label="Highlight a school on the chart">
+          {schools.map((school, index) => (
+            <button
+              key={school.urn}
+              type="button"
+              className={styles.chip}
+              aria-pressed={focusedUrn === school.urn}
+              onClick={() => toggleFocus(school.urn)}
+            >
+              <span
+                className={styles.chipDot}
+                style={{ background: CHART_COLORS[index % CHART_COLORS.length] }}
+                aria-hidden="true"
+              />
+              <span
+                className={styles.chipName}
+                style={{ color: CHART_TEXT_COLORS[index % CHART_TEXT_COLORS.length] }}
+              >
+                {school.school_name}
+              </span>
+            </button>
+          ))}
+        </div>
+      )}
+      <div className={styles.canvasBox}>
+        <Line data={chartData} options={options} aria-label={`${metricLabel} comparison chart`} />
+      </div>
+    </div>
+  );
 }

nextjs-app/components/ComparisonToast.module.css

@@ -121,7 +121,7 @@
 }
 
 .removeSchoolBtn:hover {
-  color: var(--accent-coral, #e07256);
+  color: var(--accent-coral-dark, #b04a2e);
 }
 
 .toastActions {
@@ -145,7 +145,7 @@
 }
 
 .btnClearAll:hover {
-  color: var(--accent-coral, #e07256);
+  color: var(--accent-coral-dark, #b04a2e);
 }
 
 .btnCompare {
@@ -167,20 +167,12 @@
   background: var(--accent-coral-dark, #c9614a);
 }
 
+/* Hidden on phones — the bottom tab bar's Compare badge already
+   communicates count + destination, so the toast becomes redundant
+   chrome that costs ~70px of permanent vertical space. Per-school
+   removal still lives on the /compare page itself. */
 @media (max-width: 640px) {
   .toastContainer {
-    bottom: 1.5rem;
+    display: none;
-    width: calc(100% - 3rem);
-  }
-
-  .toastContent {
-    gap: 0;
-    border-radius: 16px;
-    padding: 1.25rem;
-  }
-
-  .toastActions {
-    width: 100%;
-    justify-content: space-between;
   }
 }

nextjs-app/components/ComparisonView.module.css

@@ -63,13 +63,13 @@
 }
 
 .phaseTabActive {
-  background: var(--accent-coral, #e07256);
+  background: var(--accent-coral-dark, #b04a2e);
   color: white;
   font-weight: 600;
 }
 
 .phaseTabActive:hover {
-  background: var(--accent-coral, #e07256);
+  background: var(--accent-coral-darker, #9c3f26);
 }
 
 /* Metric Selector */
@@ -198,7 +198,7 @@
 }
 
 .schoolName a:hover {
-  color: var(--accent-coral, #e07256);
+  color: var(--accent-coral-dark, #b04a2e);
 }
 
 .schoolMeta {
@@ -306,6 +306,15 @@
   -webkit-overflow-scrolling: touch;
 }
 
+/* Right-edge fade so phone users see the comparison table scrolls.
+   Otherwise the wider-than-viewport table silently clips. */
+@media (max-width: 640px) {
+  .tableWrapper {
+    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
+            mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
+  }
+}
+
 .comparisonTable {
   width: 100%;
   border-collapse: separate;
@@ -445,7 +454,10 @@
   }
 
   .chartContainer {
-    height: 300px;
+    /* Taller than desktop's proportion would suggest: the chip legend row
+       sits inside, and the in-chart title/legend/axis titles are gone, so
+       nearly all of this is plot area. */
+    height: 340px;
   }
 
   .comparisonTable {

nextjs-app/components/ComparisonView.tsx

@@ -5,16 +5,22 @@
 
 'use client';
 
-import { useEffect, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import { useRouter, usePathname, useSearchParams } from 'next/navigation';
+import dynamic from 'next/dynamic';
 import { useComparison } from '@/hooks/useComparison';
-import { ComparisonChart } from './ComparisonChart';
+
+const ComparisonChart = dynamic(
+  () => import('./ComparisonChart').then((m) => m.ComparisonChart),
+  { ssr: false },
+);
 import { SchoolSearchModal } from './SchoolSearchModal';
 import { EmptyState } from './EmptyState';
 import { LoadingSkeleton } from './LoadingSkeleton';
 import type { ComparisonData, MetricDefinition, School } from '@/lib/types';
-import { formatPercentage, formatProgress, formatAcademicYear, CHART_COLORS, schoolUrl } from '@/lib/utils';
+import { formatPercentage, formatProgress, formatAcademicYear, CHART_COLORS, CHART_TEXT_COLORS, schoolUrl } from '@/lib/utils';
 import { fetchComparison } from '@/lib/api';
+import { track } from '@/lib/analytics';
 import styles from './ComparisonView.module.css';
 
 const PRIMARY_CATEGORIES = ['expected', 'higher', 'progress', 'average', 'gender', 'equity', 'context', 'absence', 'trends'];
@@ -52,24 +58,33 @@ export function ComparisonView({
   const router = useRouter();
   const pathname = usePathname();
   const searchParams = useSearchParams();
-  const { selectedSchools, removeSchool, addSchool, isInitialized } = useComparison();
+  const { selectedSchools, removeSchool, addSchool, replaceSchools, isInitialized } = useComparison();
 
   const [selectedMetric, setSelectedMetric] = useState(initialMetric);
   const [isModalOpen, setIsModalOpen] = useState(false);
   const [comparisonData, setComparisonData] = useState(initialData);
   const [shareConfirm, setShareConfirm] = useState(false);
   const [comparePhase, setComparePhase] = useState<'primary' | 'secondary'>('primary');
+  // Tracks whether the user has explicitly clicked a phase tab.
+  // While true, auto-phase detection is suppressed so manual selections aren't overridden.
+  const phaseLockedByUser = useRef(false);
 
-  // Seed context from initialData when component mounts and localStorage is empty
+  // Seed context from the URL on mount. An explicit ?urns=… (e.g. a link a
+  // parent shared with their partner) always wins over this visitor's stored
+  // selection — otherwise the recipient silently sees their own old schools.
+  // The replacement is then persisted like any other selection change.
   useEffect(() => {
     if (!isInitialized) return;
-    if (selectedSchools.length === 0 && initialUrns.length > 0 && initialData) {
+    if (initialUrns.length > 0 && initialData) {
-      initialUrns.forEach(urn => {
+      const urlSchools = initialUrns
-        const data = initialData[String(urn)];
+        .map(urn => initialData[String(urn)]?.school_info)
-        if (data?.school_info) {
+        .filter((info): info is NonNullable<typeof info> => Boolean(info));
-          addSchool(data.school_info);
+      const sameSet =
-        }
+        urlSchools.length === selectedSchools.length &&
-      });
+        urlSchools.every(s => selectedSchools.some(sel => sel.urn === s.urn));
+      if (urlSchools.length > 0 && !sameSet) {
+        replaceSchools(urlSchools);
+      }
     }
   }, [isInitialized]); // eslint-disable-line react-hooks/exhaustive-deps
 
@@ -96,8 +111,10 @@ export function ComparisonView({
           setComparisonData(data.comparison);
         })
         .catch((err) => {
+          // Keep whatever we already have (SSR data or a previous fetch) rather
+          // than blanking the chart — a transient refetch failure shouldn't
+          // destroy a working comparison the user is looking at.
           console.error('Failed to fetch comparison:', err);
-          setComparisonData(null);
         });
     } else {
       setComparisonData(null);
@@ -118,34 +135,83 @@ export function ComparisonView({
   const primarySchools = selectedSchools.filter(s => classifySchool(s) === 'primary');
   const secondarySchools = selectedSchools.filter(s => classifySchool(s) === 'secondary');
 
-  // Auto-select tab with more schools
+  // Auto-select tab with more schools and sync the metric to match the detected phase.
+  // This fixes the case where the URL carries a primary metric (e.g. rwm_expected_pct)
+  // but the shortlisted schools are secondary — the phase tab switches but the metric
+  // needs to follow, otherwise all secondary cards show "–" for a primary-only field.
   useEffect(() => {
-    if (comparisonData && selectedSchools.length > 0) {
+    if (!comparisonData || selectedSchools.length === 0) return;
-      if (secondarySchools.length > primarySchools.length) {
+    if (phaseLockedByUser.current) return;
-        setComparePhase('secondary');
+    const newPhase = secondarySchools.length > primarySchools.length ? 'secondary' : 'primary';
-      } else {
+    setComparePhase(newPhase);
-        setComparePhase('primary');
+    // Only reset the metric when it doesn't belong to the newly detected phase.
-      }
+    // This preserves a correct metric that came from the URL (e.g. metric=attainment_8_score).
+    const phaseCategories = newPhase === 'secondary' ? SECONDARY_CATEGORIES : PRIMARY_CATEGORIES;
+    const metricFitsPhase = metrics.some(
+      (m) => m.key === selectedMetric && phaseCategories.includes(m.category)
+    );
+    if (!metricFitsPhase) {
+      setSelectedMetric(newPhase === 'secondary' ? 'attainment_8_score' : 'rwm_expected_pct');
     }
   }, [comparisonData]); // eslint-disable-line react-hooks/exhaustive-deps
 
   const handlePhaseChange = (phase: 'primary' | 'secondary') => {
+    phaseLockedByUser.current = true;
     setComparePhase(phase);
     const defaultMetric = phase === 'secondary' ? 'attainment_8_score' : 'rwm_expected_pct';
     setSelectedMetric(defaultMetric);
   };
 
+  // compare_viewed: fire once after the page has its first selection.
+  // We watch `selectedSchools.length` going from 0 → ≥1 so the event is
+  // sent only when there's actual content to view, not for empty arrivals.
+  const compareViewedRef = useRef(false);
+  useEffect(() => {
+    if (compareViewedRef.current) return;
+    if (selectedSchools.length === 0) return;
+    compareViewedRef.current = true;
+    const primaryCount = selectedSchools.filter(s => s.phase?.toLowerCase().includes('primary')).length;
+    const secondaryCount = selectedSchools.length - primaryCount;
+    const phaseMix = primaryCount === 0 ? 'all_secondary' : secondaryCount === 0 ? 'all_primary' : 'mixed';
+    track('compare_viewed', { school_count: selectedSchools.length, phase_mix: phaseMix });
+  }, [selectedSchools]);
+
   const handleMetricChange = (metric: string) => {
+    track('compare_metric_changed', { metric, phase: comparePhase });
     setSelectedMetric(metric);
   };
 
   const handleRemoveSchool = (urn: number) => {
     removeSchool(urn);
+    track('compare_school_removed', { urn, from: 'compare' });
   };
 
   const handleShare = async () => {
+    const url = window.location.href;
+    const count = selectedSchools.length;
+    const shareData = {
+      title: 'School comparison · SchoolCompare',
+      text: count > 0
+        ? `Comparing ${count} school${count === 1 ? '' : 's'} on SchoolCompare`
+        : 'SchoolCompare',
+      url,
+    };
+    // Prefer the native share sheet on platforms that support it (iOS / Android).
+    // canShare is feature-detected because Safari iOS exposes share() but
+    // some configurations refuse the payload.
+    if (typeof navigator !== 'undefined' && navigator.share && (!navigator.canShare || navigator.canShare(shareData))) {
+      try {
+        await navigator.share(shareData);
+        track('compare_shared', { method: 'native', school_count: count });
+        return;
+      } catch (err) {
+        // User cancelled — bail silently. Any other error falls through to clipboard.
+        if ((err as DOMException)?.name === 'AbortError') return;
+      }
+    }
     try {
-      await navigator.clipboard.writeText(window.location.href);
+      await navigator.clipboard.writeText(url);
+      track('compare_shared', { method: 'clipboard', school_count: count });
       setShareConfirm(true);
       setTimeout(() => setShareConfirm(false), 2000);
     } catch { /* fallback: do nothing */ }
@@ -320,7 +386,8 @@ export function ComparisonView({
                   {activeComparisonData[school.urn] && (
                     <div className={styles.latestValue}>
                       <div className={styles.latestLabel}>{metricLabel}</div>
-                      <div className={styles.latestNumber} style={{ color: CHART_COLORS[index % CHART_COLORS.length] }}>
+                      {/* Text uses the AA-dark variant; the swatch dot keeps the true series colour */}
+                      <div className={styles.latestNumber} style={{ color: CHART_TEXT_COLORS[index % CHART_TEXT_COLORS.length] }}>
                         <span
                           style={{
                             display: 'inline-block',
@@ -364,6 +431,7 @@ export function ComparisonView({
               <div className={styles.chartContainer}>
                 <ComparisonChart
                   comparisonData={activeComparisonData}
+                  schools={activeSchools}
                   metric={selectedMetric}
                   metricLabel={metricLabel}
                 />

nextjs-app/components/DeltaChip.module.css

@@ -29,7 +29,7 @@
 
 .bad {
   background: var(--accent-coral-bg, rgba(224, 114, 86, 0.12));
-  color: var(--accent-coral, #e07256);
+  color: var(--accent-coral-dark, #b04a2e);
 }
 
 .neutral {

nextjs-app/components/EditorialSection.tsx

@@ -0,0 +1,59 @@
+// Server component: pure markup, no client state.
+
+import styles from './HomeView.module.css';
+
+interface EditorialSectionProps {
+  totalSchools: number | null;
+  localAuthorityCount: number;
+}
+
+export function EditorialSection({ totalSchools, localAuthorityCount }: EditorialSectionProps) {
+  return (
+    <section className={styles.editorial}>
+      <div className={styles.editorialGrid}>
+        <div className={styles.editorialText}>
+          <div className={styles.editorialKicker}>About school data</div>
+          <h2 className={styles.editorialHeading}>Making UK school performance data actually readable</h2>
+          <p>
+            School performance data in England is rich but fragmented. The Department for Education publishes
+            Key Stage 2 SATs, GCSE attainment, Ofsted outcomes, progress scores, admissions figures and
+            demographics — each in its own table, each with its own jargon.
+          </p>
+          <p>
+            SchoolCompare brings it all into one place. Every school page shows performance against the national
+            average, explains what the numbers mean, and lets you shortlist schools side by side. Built for
+            parents, governors, journalists, and anyone who wants to understand a school without reading a
+            40-page inspection report.
+          </p>
+        </div>
+        <div className={styles.factbox}>
+          <h3 className={styles.factboxHeading}>Coverage at a glance</h3>
+          <div className={styles.factRow}>
+            <span className={styles.factKey}>Schools covered</span>
+            <span className={styles.factVal}>{totalSchools ? `${totalSchools.toLocaleString()}` : '24,000+'}</span>
+          </div>
+          <div className={styles.factRow}>
+            <span className={styles.factKey}>Local authorities</span>
+            <span className={styles.factVal}>{localAuthorityCount > 0 ? localAuthorityCount : 152}</span>
+          </div>
+          <div className={styles.factRow}>
+            <span className={styles.factKey}>Phases</span>
+            <span className={styles.factVal}>Primary &amp; Secondary</span>
+          </div>
+          <div className={styles.factRow}>
+            <span className={styles.factKey}>Latest results year</span>
+            <span className={styles.factVal}>2024/25</span>
+          </div>
+          <div className={styles.factRow}>
+            <span className={styles.factKey}>Historical data</span>
+            <span className={styles.factVal}>2016–2025</span>
+          </div>
+          <div className={styles.factRow}>
+            <span className={styles.factKey}>Metrics per school</span>
+            <span className={styles.factVal}>40+</span>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}

nextjs-app/components/FilterBar.module.css

@@ -261,6 +261,21 @@
   color: var(--text-primary, #1a1612);
 }
 
+/* When filters are applied, promote the toggle to a coral pill so users
+   can see at a glance that the result list is being narrowed. */
+.advancedToggleActive {
+  border-color: var(--accent-coral, #e07256);
+  background: var(--accent-coral-bg, rgba(224, 114, 86, 0.12));
+  color: var(--accent-coral, #e07256);
+  font-weight: 600;
+}
+
+.advancedToggleActive:hover {
+  border-color: var(--accent-coral-dark, #c45a3f);
+  background: var(--accent-coral-bg, rgba(224, 114, 86, 0.18));
+  color: var(--accent-coral-dark, #c45a3f);
+}
+
 .chevronDown,
 .chevronUp {
   display: inline-block;

nextjs-app/components/FilterBar.tsx

@@ -3,6 +3,7 @@
 import { useState, useCallback, useTransition, useRef, useEffect } from "react";
 import { useRouter, useSearchParams, usePathname } from "next/navigation";
 import { isValidPostcode } from "@/lib/utils";
+import { track } from "@/lib/analytics";
 import type { Filters, ResultFilters } from "@/lib/types";
 import styles from "./FilterBar.module.css";
 
@@ -93,14 +94,36 @@ export function FilterBar({ filters, isHero, resultFilters }: FilterBarProps) {
       return;
     }
 
-    if (isValidPostcode(omniValue)) {
+    const isPostcode = isValidPostcode(omniValue);
+    const cleaned = omniValue.trim();
+
+    // Build a comma-separated active-filter list so a single search event
+    // captures the whole intent (vs firing N events as filters are picked).
+    const filters_active = [
+      currentPhase && `phase=${currentPhase}`,
+      currentLA && `la=${currentLA}`,
+      currentType && `type=${currentType}`,
+      currentGender && `gender=${currentGender}`,
+      currentAdmissionsPolicy && `admissions=${currentAdmissionsPolicy}`,
+      currentHasSixthForm && `sixth_form=${currentHasSixthForm}`,
+    ].filter(Boolean).join(',');
+
+    track('search_submitted', {
+      query: isPostcode ? cleaned.toUpperCase() : cleaned.toLowerCase(),
+      via: 'input',
+      has_postcode: isPostcode,
+      filters_active,
+      filters_count: filters_active ? filters_active.split(',').length : 0,
+    });
+
+    if (isPostcode) {
       updateURL({
-        postcode: omniValue.trim().toUpperCase(),
+        postcode: cleaned.toUpperCase(),
         radius: currentRadius || "1",
         search: "",
       });
     } else {
-      updateURL({ search: omniValue.trim(), postcode: "", radius: "" });
+      updateURL({ search: cleaned, postcode: "", radius: "" });
     }
   };
 
@@ -199,10 +222,11 @@ export function FilterBar({ filters, isHero, resultFilters }: FilterBarProps) {
 
             <button
               type="button"
-              className={styles.advancedToggle}
+              className={`${styles.advancedToggle}${hasActiveDropdownFilters ? ` ${styles.advancedToggleActive}` : ''}`}
               onClick={() => setFiltersOpen((v) => !v)}
+              aria-expanded={filtersOpen}
             >
-              Advanced
+              {hasActiveDropdownFilters ? 'Filters' : 'Advanced'}
               {hasActiveDropdownFilters
                 ? ` (${activeDropdownFilters.length})`
                 : ""}

nextjs-app/components/Footer.module.css

@@ -12,8 +12,8 @@
 
 .content {
   display: grid;
-  grid-template-columns: 2fr 1fr;
+  grid-template-columns: 1.5fr 1fr 1fr;
-  gap: 3rem;
+  gap: 2rem;
   margin-bottom: 3rem;
 }
 

nextjs-app/components/Footer.tsx

@@ -17,31 +17,52 @@ export function Footer() {
             <p className={styles.description}>
               Compare primary and secondary schools across England.
             </p>
+            <a
+              href="mailto:contact@schoolcompare.co.uk"
+              className={styles.link}
+              data-umami-event="contact_email_clicked"
+            >
+              contact@schoolcompare.co.uk
+            </a>
+          </div>
+
+          <div className={styles.section}>
+            <h4 className={styles.sectionTitle}>Product</h4>
+            <ul className={styles.links}>
+              <li><a href="/" className={styles.link}>Search schools</a></li>
+              <li><a href="/rankings" className={styles.link}>Rankings</a></li>
+              <li><a href="/compare" className={styles.link}>Compare shortlist</a></li>
+              <li><a href="/admissions" className={styles.link}>Admissions guide</a></li>
+            </ul>
           </div>
 
           <div className={styles.section}>
             <h4 className={styles.sectionTitle}>Resources</h4>
             <ul className={styles.links}>
-              <li>
-                <a
-                  href="https://www.gov.uk/government/organisations/department-for-education"
-                  target="_blank"
-                  rel="noopener noreferrer"
-                  className={styles.link}
-                >
-                  Department for Education
-                </a>
-              </li>
               <li>
                 <a
                   href="https://www.gov.uk/school-performance-tables"
                   target="_blank"
                   rel="noopener noreferrer"
                   className={styles.link}
+                  data-umami-event="external_link_clicked"
+                  data-umami-event-target="dfe"
                 >
                   School Performance Tables
                 </a>
               </li>
+              <li>
+                <a
+                  href="https://reports.ofsted.gov.uk/"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className={styles.link}
+                  data-umami-event="external_link_clicked"
+                  data-umami-event-target="ofsted"
+                >
+                  Ofsted reports
+                </a>
+              </li>
             </ul>
           </div>
         </div>

nextjs-app/components/HomeView.module.css

@@ -4,32 +4,106 @@
 
 .heroSection {
   text-align: center;
-  margin-bottom: 2rem;
+  margin-bottom: 1.5rem;
-  padding-top: 1rem;
+  padding-top: 2.5rem;
+}
+
+.heroEyebrow {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.4rem;
+  font-size: 0.72rem;
+  font-weight: 600;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: var(--accent-teal, #2d7d7d);
+  background: rgba(45, 125, 125, 0.1);
+  padding: 0.3rem 0.7rem;
+  border-radius: 999px;
+  margin-bottom: 1rem;
+}
+
+.heroEyebrowDot {
+  display: inline-block;
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: var(--accent-teal, #2d7d7d);
 }
 
 .heroTitle {
-  font-size: 2.5rem;
+  font-size: 3rem;
   font-weight: 700;
   color: var(--text-primary, #1a1612);
-  margin-bottom: 0.5rem;
+  margin-bottom: 0.85rem;
-  line-height: 1.2;
+  line-height: 1.08;
+  letter-spacing: -0.015em;
   font-family: var(--font-playfair), 'Playfair Display', serif;
+  max-width: 840px;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.heroEmph {
+  color: var(--accent-coral-dark, #c45a3f);
+  font-style: italic;
 }
 
 .heroDescription {
-  font-size: 1.1rem;
+  font-size: 1.05rem;
   color: var(--text-secondary, #5c564d);
-  margin: 0 auto;
+  margin: 0 auto 0.5rem;
-  max-width: 600px;
+  max-width: 680px;
+  line-height: 1.55;
+}
+
+.heroDescription strong {
+  color: var(--text-primary, #1a1612);
+  font-weight: 700;
+}
+
+/* Copy variants: full paragraph ≥641px, compact merged line on phones. */
+.heroDescriptionCompact {
+  display: none;
 }
 
 @media (max-width: 768px) {
+  .heroSection {
+    padding-top: 1.5rem;
+  }
   .heroTitle {
-    font-size: 1.75rem;
+    font-size: 2rem;
   }
   .heroDescription {
-    font-size: 1rem;
+    font-size: 0.95rem;
+  }
+}
+
+/* Above the fold on phones, every line costs. Drop the eyebrow tag and swap
+   the long descriptive paragraph for one compact line that carries coverage
+   ("24,000+ schools") and freshness ("updated for 2026/27") — a first-time
+   visitor otherwise sees only a poetic h1 and a bare box, with no reason to
+   trust the data (audit P1.7, feeds the 46% home exit rate). */
+@media (max-width: 640px) {
+  .heroSection {
+    padding-top: 0.75rem;
+    margin-bottom: 1rem;
+  }
+  .heroEyebrow,
+  .heroDescriptionFull {
+    display: none;
+  }
+  .heroDescriptionCompact {
+    display: block;
+  }
+  .heroDescription {
+    font-size: 0.85rem;
+    line-height: 1.4;
+    max-width: 320px;
+    margin-bottom: 0.25rem;
+  }
+  .heroTitle {
+    font-size: 1.65rem;
   }
 }
 
@@ -63,7 +137,7 @@
 
 .viewToggleBtn.active {
   background: var(--bg-card, white);
-  color: var(--accent-coral, #e07256);
+  color: var(--accent-coral-dark, #b04a2e);
   box-shadow: 0 2px 4px rgba(26, 22, 18, 0.08);
 }
 
@@ -84,7 +158,7 @@
   display: grid;
   grid-template-columns: 1fr 340px;
   gap: 1rem;
-  height: calc(100vh - 280px);
+  height: calc(100dvh - 280px);
   min-height: 520px;
   max-height: 800px;
 }
@@ -164,7 +238,7 @@
 }
 
 .compactItemName:hover {
-  color: var(--accent-coral, #e07256);
+  color: var(--accent-coral-dark, #b04a2e);
 }
 
 .distanceBadge {
@@ -409,7 +483,7 @@
   .mapViewContainer {
     grid-template-columns: 1fr;
     grid-template-rows: 1fr;
-    height: calc(100vh - 280px);
+    height: calc(100dvh - 280px);
     min-height: 400px;
   }
 
@@ -423,26 +497,67 @@
 }
 
 .discoverySection {
-  padding: 2rem var(--page-padding, 2rem);
+  padding: 0.5rem 0 0.5rem;
   text-align: center;
 }
 
-.discoveryCount {
+.nearMeRow {
-  font-size: 1.1rem;
+  display: flex;
-  color: var(--text-secondary);
+  flex-direction: column;
-  margin-bottom: 0.5rem;
+  align-items: center;
-}
+  gap: 0.5rem;
-
-.discoveryCount strong {
-  color: var(--text-primary);
-  font-size: 1.25rem;
-}
-
-.discoveryHints {
-  color: var(--text-muted);
   margin-bottom: 1.25rem;
 }
 
+.nearMeBtn {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.625rem 1.375rem;
+  background: var(--accent-teal, #2d7d7d);
+  color: #fff;
+  border: none;
+  border-radius: 999px;
+  font-size: 0.9375rem;
+  font-weight: 600;
+  cursor: pointer;
+  transition: background 0.2s ease, transform 0.15s ease;
+  font-family: inherit;
+}
+
+.nearMeBtn:hover:not(:disabled) {
+  background: #235f5f;
+  transform: translateY(-1px);
+}
+
+.nearMeBtn:disabled {
+  opacity: 0.7;
+  cursor: not-allowed;
+}
+
+.nearMeBtnSpinner {
+  display: inline-block;
+  width: 14px;
+  height: 14px;
+  border: 2px solid rgba(255, 255, 255, 0.35);
+  border-top-color: #fff;
+  border-radius: 50%;
+  animation: nearMeSpin 0.7s linear infinite;
+  flex-shrink: 0;
+}
+
+@keyframes nearMeSpin {
+  to { transform: rotate(360deg); }
+}
+
+.geoError {
+  font-size: 0.8125rem;
+  color: var(--accent-coral-dark, #b04a2e);
+  margin: 0;
+  max-width: 340px;
+  text-align: center;
+}
+
 .quickSearches {
   display: flex;
   align-items: center;
@@ -468,9 +583,571 @@
 }
 
 .quickSearchChip:hover {
-  background: var(--accent-coral);
+  background: var(--accent-coral-dark);
   color: white;
-  border-color: var(--accent-coral);
+  border-color: var(--accent-coral-dark);
+}
+
+.exploringRow {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.6rem;
+  margin-top: 1rem;
+}
+
+.exploringLabel {
+  font-size: 0.72rem;
+  color: var(--text-muted, #6d685f);
+  font-weight: 500;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+}
+
+.exploringChips {
+  display: flex;
+  gap: 0.5rem;
+  justify-content: center;
+  flex-wrap: wrap;
+}
+
+.exploringChip {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.4rem;
+  padding: 0.5rem 0.95rem;
+  background: var(--bg-card, white);
+  border: 1px solid var(--border-color, #e5dfd5);
+  border-radius: 999px;
+  font-size: 0.82rem;
+  font-weight: 500;
+  color: var(--text-secondary, #5c564d);
+  text-decoration: none;
+  transition: all 0.15s ease;
+}
+
+.exploringChip:hover {
+  border-color: var(--accent-coral, #e07256);
+  color: var(--accent-coral-dark, #c45a3f);
+  transform: translateY(-1px);
+}
+
+.chipDot {
+  display: inline-block;
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: currentColor;
+  opacity: 0.55;
+  flex-shrink: 0;
+}
+
+/* ── How it works section ─────────────────────────────── */
+
+.howItWorks {
+  padding: 3rem 0 1rem;
+}
+
+.hiwHeader {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+  margin-bottom: 1.5rem;
+}
+
+.hiwHeading {
+  font-family: var(--font-playfair), 'Playfair Display', serif;
+  font-size: 1.75rem;
+  font-weight: 700;
+  color: var(--text-primary, #1a1612);
+  margin: 0;
+}
+
+.hiwSub {
+  font-size: 0.875rem;
+  color: var(--text-muted, #6d685f);
+}
+
+.hiwGrid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 1rem;
+}
+
+.hiwCard {
+  background: var(--bg-card, white);
+  border: 1px solid var(--border-color, #e5dfd5);
+  border-radius: 14px;
+  padding: 1.25rem;
+  box-shadow: 0 2px 8px rgba(26, 22, 18, 0.06);
+  display: flex;
+  flex-direction: column;
+  gap: 0.9rem;
+}
+
+.hiwVisual {
+  background: var(--bg-secondary, #f3ede4);
+  border-radius: 10px;
+  padding: 0.9rem;
+  min-height: 180px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  gap: 0.75rem;
+}
+
+.hiwPhaseBlock {
+  display: flex;
+  flex-direction: column;
+  gap: 0.35rem;
+}
+
+.hiwPhaseLabel {
+  font-size: 0.58rem;
+  font-weight: 600;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+  color: var(--text-muted, #6d685f);
+}
+
+.hiwPhaseLabel strong {
+  color: var(--accent-teal, #2d7d7d);
+  font-weight: 700;
+}
+
+.hiwCardBody {
+  display: flex;
+  flex-direction: column;
+  gap: 0.3rem;
+}
+
+.hiwStep {
+  font-size: 0.65rem;
+  font-weight: 700;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+  color: var(--accent-coral-dark, #b04a2e);
+}
+
+.hiwTitle {
+  font-family: var(--font-playfair), 'Playfair Display', serif;
+  font-size: 1.1rem;
+  font-weight: 700;
+  color: var(--text-primary, #1a1612);
+  line-height: 1.25;
+}
+
+.hiwDesc {
+  font-size: 0.86rem;
+  color: var(--text-secondary, #5c564d);
+  line-height: 1.45;
+  margin: 0;
+}
+
+/* Mini cascade (performance card) */
+.miniCascade {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 0.4rem;
+}
+
+.miniCascadeCol {
+  display: flex;
+  flex-direction: column;
+  gap: 0.15rem;
+  min-width: 0;
+}
+
+.miniSubj {
+  font-size: 0.5rem;
+  font-weight: 700;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+  color: var(--text-muted, #6d685f);
+  margin-bottom: 0.1rem;
+}
+
+.miniRowHead {
+  display: flex;
+  justify-content: space-between;
+  font-size: 0.48rem;
+  color: var(--text-muted, #6d685f);
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+}
+
+.miniRowHead strong {
+  font-family: var(--font-playfair), 'Playfair Display', serif;
+  font-size: 0.62rem;
+  color: var(--text-primary, #1a1612);
+  font-weight: 700;
+  letter-spacing: 0;
+  text-transform: none;
+}
+
+.miniTrack {
+  height: 5px;
+  border-radius: 2px;
+  background: rgba(45, 125, 125, 0.08);
+  position: relative;
+  overflow: visible;
+}
+
+.miniBarExp {
+  height: 100%;
+  border-radius: 2px;
+  background: var(--accent-teal-light, #3a9e9e);
+}
+
+.miniBarExc {
+  height: 100%;
+  border-radius: 2px;
+  background: var(--accent-teal, #2d7d7d);
+}
+
+.miniNatPill {
+  position: absolute;
+  top: -9px;
+  transform: translateX(-50%);
+  background: var(--accent-coral, #e07256);
+  color: #fff;
+  font-size: 0.4rem;
+  font-weight: 700;
+  padding: 0.05rem 0.2rem;
+  border-radius: 3px;
+  z-index: 2;
+  white-space: nowrap;
+  pointer-events: none;
+}
+
+/* Attainment 8 mini bar */
+.att8Row {
+  display: grid;
+  grid-template-columns: 1fr auto;
+  gap: 0.6rem;
+  align-items: center;
+}
+
+.att8BarWrap {
+  display: flex;
+  flex-direction: column;
+  gap: 0.2rem;
+}
+
+.att8BarHead {
+  display: flex;
+  justify-content: space-between;
+  font-size: 0.5rem;
+  color: var(--text-muted, #6d685f);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+
+.att8Track {
+  height: 7px;
+  background: rgba(45, 125, 125, 0.08);
+  border-radius: 3px;
+  position: relative;
+}
+
+.att8Fill {
+  height: 100%;
+  background: var(--accent-teal, #2d7d7d);
+  border-radius: 3px;
+}
+
+.att8NatLine {
+  position: absolute;
+  top: -2px;
+  bottom: -2px;
+  width: 1.5px;
+  background: rgba(224, 114, 86, 0.6);
+  z-index: 2;
+}
+
+.att8Score {
+  text-align: right;
+}
+
+.att8Value {
+  font-family: var(--font-playfair), 'Playfair Display', serif;
+  font-size: 1.5rem;
+  font-weight: 700;
+  color: var(--accent-teal, #2d7d7d);
+  line-height: 1;
+}
+
+.att8Delta {
+  font-size: 0.55rem;
+  color: var(--accent-teal, #2d7d7d);
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  margin-top: 0.15rem;
+}
+
+/* Ofsted preview */
+.ofstedPreview {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  width: 100%;
+  padding: 0.4rem 0.2rem;
+}
+
+.ofstedHead {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding-bottom: 0.4rem;
+  border-bottom: 1.5px solid var(--border-color, #e5dfd5);
+}
+
+.ofstedBullet {
+  display: block;
+  width: 3px;
+  height: 1em;
+  background: var(--accent-coral, #e07256);
+  border-radius: 2px;
+  flex-shrink: 0;
+}
+
+.ofstedTitle {
+  font-family: var(--font-playfair), 'Playfair Display', serif;
+  font-size: 0.85rem;
+  font-weight: 600;
+  color: var(--text-primary, #1a1612);
+}
+
+.ofstedBadge {
+  align-self: flex-start;
+  padding: 0.2rem 0.55rem;
+  border-radius: 4px;
+  background: rgba(45, 125, 125, 0.12);
+  color: var(--accent-teal, #2d7d7d);
+  font-size: 0.55rem;
+  font-weight: 700;
+  letter-spacing: 0.05em;
+}
+
+.ofstedVerdict {
+  font-family: var(--font-playfair), 'Playfair Display', serif;
+  font-size: 1.05rem;
+  font-weight: 700;
+  line-height: 1.2;
+  color: var(--text-primary, #1a1612);
+}
+
+.ofstedVerdict em {
+  color: var(--accent-teal, #2d7d7d);
+  font-style: normal;
+}
+
+.ofstedMeta {
+  font-size: 0.6rem;
+  color: var(--text-muted, #6d685f);
+}
+
+/* Compare preview */
+.comparePreview {
+  width: 100%;
+  background: var(--bg-card, white);
+  border: 1px solid var(--border-color, #e5dfd5);
+  border-radius: 8px;
+  overflow: hidden;
+  font-size: 0.6rem;
+}
+
+.compareHead {
+  display: grid;
+  grid-template-columns: 1fr repeat(2, 1fr);
+  background: rgba(45, 125, 125, 0.1);
+  padding: 0.35rem 0.5rem;
+  gap: 0.35rem;
+}
+
+.compareHeadCell {
+  font-family: var(--font-playfair), 'Playfair Display', serif;
+  font-size: 0.62rem;
+  font-weight: 700;
+  color: var(--accent-teal, #2d7d7d);
+  line-height: 1.2;
+}
+
+.compareHeadLabel {
+  font-family: inherit;
+  font-size: 0.48rem;
+  color: var(--text-muted, #6d685f);
+  font-weight: 500;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+
+.compareRow {
+  display: grid;
+  grid-template-columns: 1fr repeat(2, 1fr);
+  padding: 0.3rem 0.5rem;
+  gap: 0.35rem;
+  border-top: 1px solid var(--border-color, #e5dfd5);
+  align-items: baseline;
+}
+
+.compareRowLabel {
+  font-size: 0.55rem;
+  color: var(--text-muted, #6d685f);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+
+.compareRowVal {
+  font-family: var(--font-playfair), 'Playfair Display', serif;
+  font-size: 0.72rem;
+  font-weight: 700;
+  color: var(--text-primary, #1a1612);
+}
+
+.compareRowValHi {
+  color: var(--accent-teal, #2d7d7d);
+}
+
+.compareFoot {
+  font-size: 0.52rem;
+  color: var(--text-muted, #6d685f);
+  padding: 0.35rem 0.5rem;
+  background: var(--bg-secondary, #f3ede4);
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  text-align: center;
+  border-top: 1px solid var(--border-color, #e5dfd5);
+}
+
+@media (max-width: 768px) {
+  .hiwGrid {
+    grid-template-columns: 1fr;
+  }
+  .hiwHeader {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+  .hiwHeading {
+    font-size: 1.4rem;
+  }
+}
+
+/* On phones, hide the scaled-down preview visuals (text becomes illegible
+   at this size) and let the explanatory text carry each card. */
+@media (max-width: 640px) {
+  .hiwVisual {
+    display: none;
+  }
+  .hiwCard {
+    padding: 1rem 1.1rem;
+    gap: 0.45rem;
+  }
+  .hiwTitle {
+    font-size: 1.05rem;
+  }
+  .hiwDesc {
+    font-size: 0.9rem;
+  }
+}
+
+/* ── Editorial section ───────────────────────────────── */
+
+.editorial {
+  padding: 2rem 0 3rem;
+}
+
+.editorialGrid {
+  display: grid;
+  grid-template-columns: 1.4fr 1fr;
+  gap: 2rem;
+  padding: 1.75rem;
+  background: var(--bg-card, white);
+  border: 1px solid var(--border-color, #e5dfd5);
+  border-radius: 14px;
+}
+
+.editorialText {
+  display: flex;
+  flex-direction: column;
+  gap: 0.65rem;
+}
+
+.editorialKicker {
+  font-size: 0.68rem;
+  color: var(--accent-coral-dark, #b04a2e);
+  font-weight: 700;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+}
+
+.editorialHeading {
+  font-family: var(--font-playfair), 'Playfair Display', serif;
+  font-size: 1.35rem;
+  font-weight: 700;
+  color: var(--text-primary, #1a1612);
+  margin: 0;
+  line-height: 1.25;
+}
+
+.editorialText p {
+  font-size: 0.92rem;
+  color: var(--text-secondary, #5c564d);
+  line-height: 1.6;
+  margin: 0;
+}
+
+.factbox {
+  background: var(--bg-secondary, #f3ede4);
+  border-radius: 10px;
+  padding: 1.25rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0;
+}
+
+.factboxHeading {
+  font-family: var(--font-playfair), 'Playfair Display', serif;
+  font-size: 1rem;
+  font-weight: 700;
+  color: var(--text-primary, #1a1612);
+  margin: 0 0 0.85rem;
+}
+
+.factRow {
+  display: flex;
+  justify-content: space-between;
+  align-items: baseline;
+  padding: 0.5rem 0;
+  border-bottom: 1px solid var(--border-color, #e5dfd5);
+  font-size: 0.85rem;
+  gap: 0.5rem;
+}
+
+.factRow:last-child {
+  border-bottom: none;
+}
+
+.factKey {
+  color: var(--text-muted, #6d685f);
+}
+
+.factVal {
+  font-family: var(--font-playfair), 'Playfair Display', serif;
+  font-weight: 700;
+  color: var(--text-primary, #1a1612);
+  text-align: right;
+}
+
+@media (max-width: 768px) {
+  .editorialGrid {
+    grid-template-columns: 1fr;
+    padding: 1.25rem;
+    gap: 1.25rem;
+  }
 }
 
 .resultsHeader {
@@ -547,3 +1224,188 @@
 .loadMoreButton {
   min-width: 160px;
 }
+
+/* =========================================================
+   Admissions Countdown Strip
+   ========================================================= */
+
+.admissionsStrip {
+  padding: 1.5rem 0 2rem;
+  border-top: 1px solid var(--border-color, #e5dfd5);
+}
+
+.stripHeader {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  margin-bottom: 1rem;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+}
+
+.stripLabel {
+  font-size: 0.72rem;
+  font-weight: 700;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: var(--text-muted, #6d685f);
+}
+
+.stripCta {
+  font-size: 0.82rem;
+  color: var(--accent-teal, #2d7d7d);
+  font-weight: 600;
+  text-decoration: none;
+}
+
+.stripCta:hover {
+  text-decoration: underline;
+}
+
+.countdownRail {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 0.75rem;
+}
+
+.countdownChip {
+  background: var(--bg-card, #fff);
+  border: 1px solid var(--border-color, #e5dfd5);
+  border-radius: 12px;
+  padding: 1rem 1.1rem 0.9rem;
+  box-shadow: 0 2px 8px rgba(26, 22, 18, 0.06);
+  display: flex;
+  flex-direction: column;
+  gap: 0.2rem;
+  position: relative;
+  overflow: hidden;
+}
+
+.countdownChip::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 3px;
+  border-radius: 12px 12px 0 0;
+}
+
+.countdownChipDeadline::before {
+  background: var(--accent-coral, #e07256);
+}
+
+.countdownChipOffer::before {
+  background: var(--accent-teal, #2d7d7d);
+}
+
+.countdownChipUrgent {
+  border-color: rgba(224, 114, 86, 0.4);
+  background: rgba(224, 114, 86, 0.04);
+}
+
+.chipTrack {
+  display: flex;
+  align-items: center;
+  gap: 0.3rem;
+  font-size: 0.6rem;
+  font-weight: 700;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+  margin-bottom: 0.15rem;
+}
+
+.chipTrackDeadline {
+  color: var(--accent-coral-dark, #b04a2e);
+}
+
+.chipTrackOffer {
+  color: var(--accent-teal, #2d7d7d);
+}
+
+.chipTrackDot {
+  width: 5px;
+  height: 5px;
+  border-radius: 50%;
+  background: currentColor;
+  flex-shrink: 0;
+}
+
+.chipDays {
+  font-family: var(--font-playfair), 'Playfair Display', serif;
+  font-size: 2.6rem;
+  font-weight: 700;
+  line-height: 1;
+  letter-spacing: -0.02em;
+}
+
+.countdownChipDeadline .chipDays,
+.countdownChipUrgent .chipDays {
+  color: var(--accent-coral-dark, #c45a3f);
+}
+
+.countdownChipOffer .chipDays {
+  color: var(--accent-teal, #2d7d7d);
+}
+
+.chipDaysUnit {
+  font-family: 'DM Sans', sans-serif;
+  font-size: 0.78rem;
+  font-weight: 500;
+  color: var(--text-muted, #6d685f);
+  margin-left: 0.2rem;
+  vertical-align: bottom;
+  line-height: 2;
+}
+
+.chipMilestone {
+  font-size: 0.85rem;
+  font-weight: 600;
+  color: var(--text-primary, #1a1612);
+  line-height: 1.25;
+  margin-top: 0.1rem;
+}
+
+.chipDate {
+  font-size: 0.75rem;
+  color: var(--text-muted, #6d685f);
+  margin-top: 0.05rem;
+}
+
+@media (max-width: 768px) {
+  .countdownRail {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+
+/* On phones the 2×2 grid cramped each chip so badly the "Secondary ·
+   Deadline" track label dropped to 9.6px. Switch to a horizontal
+   snap-scroller — each card is full-width-ish and stays readable,
+   and the rightmost card peeks past the edge to signal there's more. */
+@media (max-width: 640px) {
+  .countdownRail {
+    display: flex;
+    grid-template-columns: none;
+    overflow-x: auto;
+    scroll-snap-type: x mandatory;
+    scrollbar-width: none;
+    gap: 0.75rem;
+    padding-right: 1.25rem;
+    margin-inline: -1rem;
+    padding-inline: 1rem;
+    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
+            mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
+  }
+  .countdownRail::-webkit-scrollbar {
+    display: none;
+  }
+  .countdownChip {
+    flex: 0 0 auto;
+    width: 78%;
+    min-width: 220px;
+    scroll-snap-align: start;
+  }
+  .chipTrack {
+    font-size: 0.7rem;
+  }
+}

nextjs-app/components/HomeView.tsx

@@ -5,7 +5,7 @@
 
 'use client';
 
-import React, { useState, useEffect, useRef } from 'react';
+import React, { useState, useEffect, useRef, useCallback } from 'react';
 import { useSearchParams, useRouter, usePathname } from 'next/navigation';
 import { FilterBar } from './FilterBar';
 import { SchoolRow } from './SchoolRow';
@@ -16,15 +16,54 @@ import { useComparisonContext } from '@/context/ComparisonContext';
 import { fetchSchools, fetchLAaverages, fetchNationalAverages } from '@/lib/api';
 import type { SchoolsResponse, Filters, School } from '@/lib/types';
 import { schoolUrl, buildOfstedListBadge } from '@/lib/utils';
+import { track } from '@/lib/analytics';
 import styles from './HomeView.module.css';
 
 interface HomeViewProps {
   initialSchools: SchoolsResponse;
   filters: Filters;
   totalSchools?: number | null;
+  // Slot props for static markup the server pre-renders so it stays out of
+  // the client bundle. Server passes null when the landing sections shouldn't
+  // show (e.g. an active search).
+  howItWorks?: React.ReactNode;
+  editorial?: React.ReactNode;
 }
 
-export function HomeView({ initialSchools, filters, totalSchools }: HomeViewProps) {
+function daysUntil(month: number, day: number): number {
+  const today = new Date();
+  today.setHours(0, 0, 0, 0);
+  const y = today.getFullYear();
+  let target = new Date(y, month - 1, day);
+  if (target < today) target = new Date(y + 1, month - 1, day);
+  return Math.round((target.getTime() - today.getTime()) / 86_400_000);
+}
+
+function formatCountdownDate(month: number, day: number): string {
+  const today = new Date();
+  today.setHours(0, 0, 0, 0);
+  const y = today.getFullYear();
+  let target = new Date(y, month - 1, day);
+  if (target < today) target = new Date(y + 1, month - 1, day);
+  return target.toLocaleDateString('en-GB', { weekday: 'short', day: 'numeric', month: 'long', year: 'numeric' });
+}
+
+interface CountdownChipData {
+  type: 'deadline' | 'offer';
+  track: string;
+  milestone: string;
+  month: number;
+  day: number;
+}
+
+const ADMISSIONS_CHIPS: CountdownChipData[] = [
+  { type: 'offer',    track: 'Primary · Offer Day',        milestone: 'Primary National Offer Day',     month: 4,  day: 16 },
+  { type: 'deadline', track: 'Secondary · Deadline',       milestone: 'Secondary applications close',   month: 10, day: 31 },
+  { type: 'deadline', track: 'Primary · Deadline',         milestone: 'Primary applications close',     month: 1,  day: 15 },
+  { type: 'offer',    track: 'Secondary · Offer Day',      milestone: 'Secondary National Offer Day',   month: 3,  day: 1  },
+];
+
+export function HomeView({ initialSchools, filters, totalSchools, howItWorks, editorial }: HomeViewProps) {
   const searchParams = useSearchParams();
   const router = useRouter();
   const pathname = usePathname();
@@ -41,6 +80,12 @@ export function HomeView({ initialSchools, filters, totalSchools }: HomeViewProp
   const [mapSchools, setMapSchools] = useState<School[]>([]);
   const [isLoadingMap, setIsLoadingMap] = useState(false);
   const prevSearchParamsRef = useRef(searchParams.toString());
+  const mapParamsRef = useRef<string>('');
+  const [geoState, setGeoState] = useState<'idle' | 'requesting' | 'error'>('idle');
+  const [geoError, setGeoError] = useState<string | null>(null);
+  const [sortedChips, setSortedChips] = useState<Array<{ chip: CountdownChipData; days: number | null }>>(
+    ADMISSIONS_CHIPS.map(c => ({ chip: c, days: null }))
+  );
 
   const hasSearch = searchParams.get('search') || searchParams.get('postcode');
   const isLocationSearch = !!searchParams.get('postcode');
@@ -52,11 +97,12 @@ export function HomeView({ initialSchools, filters, totalSchools }: HomeViewProp
     || (!currentPhase && secondaryCount > primaryCount);
   const isMixedView = primaryCount > 0 && secondaryCount > 0 && !currentPhase;
 
-  // Reset pagination state when search params change
+  // Reset pagination and map cache when search params change
   useEffect(() => {
     const newParamsStr = searchParams.toString();
     if (newParamsStr !== prevSearchParamsRef.current) {
       prevSearchParamsRef.current = newParamsStr;
+      mapParamsRef.current = '';  // allow map to re-fetch for new search
       setAllSchools(initialSchools.schools);
       setCurrentPage(initialSchools.page);
       setHasMore(initialSchools.total_pages > 1);
@@ -69,9 +115,13 @@ export function HomeView({ initialSchools, filters, totalSchools }: HomeViewProp
     setSelectedMapSchool(null);
   }, [resultsView, searchParams]);
 
-  // Fetch all schools within radius when map view is active
+  // Fetch all schools within radius when map view is active.
+  // Guard with a ref so toggling back to map never re-fetches the same params.
   useEffect(() => {
     if (resultsView !== 'map' || !isLocationSearch) return;
+    const paramsKey = searchParams.toString();
+    if (paramsKey === mapParamsRef.current) return;
+    mapParamsRef.current = paramsKey;
     setIsLoadingMap(true);
     const params: Record<string, any> = {};
     searchParams.forEach((value, key) => { params[key] = value; });
@@ -98,8 +148,16 @@ export function HomeView({ initialSchools, filters, totalSchools }: HomeViewProp
       .catch(() => {});
   }, []);
 
+  // Compute admissions countdown days client-side and sort soonest-first to avoid SSR mismatch
+  useEffect(() => {
+    const withDays = ADMISSIONS_CHIPS.map(c => ({ chip: c, days: daysUntil(c.month, c.day) }));
+    withDays.sort((a, b) => (a.days ?? Infinity) - (b.days ?? Infinity));
+    setSortedChips(withDays);
+  }, []);
+
   const handleLoadMore = async () => {
     if (isLoadingMore || !hasMore) return;
+    track('results_load_more', { next_page: currentPage + 1 });
     setIsLoadingMore(true);
     try {
       const params: Record<string, any> = {};
@@ -117,6 +175,54 @@ export function HomeView({ initialSchools, filters, totalSchools }: HomeViewProp
     }
   };
 
+  const handleNearMe = useCallback(() => {
+    if (!navigator.geolocation) {
+      track('near_me_used', { outcome: 'unsupported' });
+      setGeoState('error');
+      setGeoError('Geolocation is not supported by your browser. Enter a postcode instead.');
+      return;
+    }
+    setGeoState('requesting');
+    setGeoError(null);
+    navigator.geolocation.getCurrentPosition(
+      async (position) => {
+        const { latitude, longitude } = position.coords;
+        try {
+          const res = await fetch(
+            `https://api.postcodes.io/postcodes?lon=${longitude}&lat=${latitude}&limit=1`
+          );
+          const data = await res.json();
+          if (data.result && data.result.length > 0) {
+            const postcode = data.result[0].postcode as string;
+            setGeoState('idle');
+            track('near_me_used', { outcome: 'granted' });
+            track('search_submitted', { query: postcode, via: 'near_me', has_postcode: true, filters_active: '', filters_count: 0 });
+            router.push(`/?postcode=${encodeURIComponent(postcode)}&radius=1`);
+          } else {
+            track('near_me_used', { outcome: 'no_postcode' });
+            setGeoState('error');
+            setGeoError('No postcode found near your location. Try entering one above.');
+          }
+        } catch {
+          track('near_me_used', { outcome: 'lookup_error' });
+          setGeoState('error');
+          setGeoError('Could not look up your location. Please try again.');
+        }
+      },
+      (err) => {
+        setGeoState('error');
+        if (err.code === err.PERMISSION_DENIED) {
+          track('near_me_used', { outcome: 'denied' });
+          setGeoError('Location access was denied. Enter a postcode above to find nearby schools.');
+        } else {
+          track('near_me_used', { outcome: 'error' });
+          setGeoError('Could not get your location. Please try again or enter a postcode.');
+        }
+      },
+      { timeout: 10000, maximumAge: 60000 }
+    );
+  }, [router]);
+
   const sortedSchools = [...allSchools].sort((a, b) => {
     if (sortOrder === 'rwm_desc') return (b.rwm_expected_pct ?? -Infinity) - (a.rwm_expected_pct ?? -Infinity);
     if (sortOrder === 'rwm_asc') return (a.rwm_expected_pct ?? Infinity) - (b.rwm_expected_pct ?? Infinity);
@@ -127,13 +233,50 @@ export function HomeView({ initialSchools, filters, totalSchools }: HomeViewProp
     return 0;
   });
 
+  // Empty-results sentinel: track when a search returns nothing.
+  useEffect(() => {
+    if (!isSearchActive) return;
+    if (initialSchools.total !== 0) return;
+    track('empty_results', {
+      query_length: (searchParams.get('search') || '').length,
+      has_postcode: !!searchParams.get('postcode'),
+    });
+  }, [initialSchools.total, isSearchActive, searchParams]);
+
+  // Wrap addSchool with `from: 'search'` attribution so funnel reports can
+  // split which surface drives compare adds.
+  const addSchoolFromSearch = useCallback((school: School) => {
+    addSchool(school);
+    track('compare_school_added', {
+      urn: school.urn,
+      from: 'search',
+      selection_count_after: selectedSchools.length + 1,
+    });
+  }, [addSchool, selectedSchools.length]);
+
   return (
     <div className={styles.homeView}>
       {/* Combined Hero + Search and Filters */}
       {!isSearchActive && (
         <div className={styles.heroSection}>
-          <h1 className={styles.heroTitle}>Find Local Schools</h1>
+          <span className={styles.heroEyebrow}>
-          <p className={styles.heroDescription}>Compare school results (SATs and GCSE), for thousands of schools across England</p>
+            <span className={styles.heroEyebrowDot} aria-hidden="true" />
+            Updated with 2026/2027 admissions results
+          </span>
+          <h1 className={styles.heroTitle}>
+            Every school in England, <em className={styles.heroEmph}>compared.</em>
+          </h1>
+          <p className={styles.heroDescription}>
+            {/* Full copy for larger screens; a compact merged line (coverage +
+                freshness, standing in for the hidden eyebrow too) on phones,
+                where every line above the fold costs. */}
+            <span className={styles.heroDescriptionFull}>
+              <strong>24,000+ primary and secondary schools</strong> with Key Stage 2 SATs, GCSE results, Ofsted grades, progress scores and admissions data — side by side, in one place.
+            </span>
+            <span className={styles.heroDescriptionCompact}>
+              <strong>24,000+ English schools</strong> — SATs, GCSEs, Ofsted &amp; admissions, side by side. Updated for 2026/27.
+            </span>
+          </p>
         </div>
       )}
 
@@ -146,17 +289,104 @@ export function HomeView({ initialSchools, filters, totalSchools }: HomeViewProp
       {/* Discovery section shown on landing page before any search */}
       {!isSearchActive && initialSchools.schools.length === 0 && (
         <div className={styles.discoverySection}>
-          {totalSchools && <p className={styles.discoveryCount}><strong>{totalSchools.toLocaleString()}+</strong> primary and secondary schools across England</p>}
+          <div className={styles.nearMeRow}>
-          <p className={styles.discoveryHints}>Try searching for a school name, or enter a postcode to find schools near you.</p>
+            <button
-          <div className={styles.quickSearches}>
+              className={styles.nearMeBtn}
-            <span className={styles.quickSearchLabel}>Quick searches:</span>
+              onClick={handleNearMe}
-            {['Manchester', 'Bristol', 'Leeds', 'Birmingham'].map(city => (
+              disabled={geoState === 'requesting'}
-              <a key={city} href={`/?search=${city}`} className={styles.quickSearchChip}>{city}</a>
+            >
-            ))}
+              {geoState === 'requesting' ? (
+                <>
+                  <span className={styles.nearMeBtnSpinner} aria-hidden="true" />
+                  Locating you…
+                </>
+              ) : (
+                <>
+                  <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" aria-hidden="true">
+                    <path d="M12 2a7 7 0 0 1 7 7c0 5.25-7 13-7 13S5 14.25 5 9a7 7 0 0 1 7-7z"/>
+                    <circle cx="12" cy="9" r="2.5"/>
+                  </svg>
+                  Schools near me
+                </>
+              )}
+            </button>
+            {geoError && <p className={styles.geoError} role="alert">{geoError}</p>}
           </div>
         </div>
       )}
 
+      {/* Admissions countdown strip — only on landing page */}
+      {!isSearchActive && (
+        <section className={styles.admissionsStrip}>
+          <div className={styles.stripHeader}>
+            <span className={styles.stripLabel}>Key admissions deadlines</span>
+            <a href="/admissions" className={styles.stripCta}>Full admissions guide →</a>
+          </div>
+          <div
+            className={styles.countdownRail}
+            style={{
+              opacity: sortedChips[0]?.days !== null ? 1 : 0,
+              transition: 'opacity 0.2s ease',
+            }}
+          >
+            {sortedChips.map(({ chip, days }) => {
+              const isUrgent = days !== null && days <= 14;
+              const chipClass = [
+                styles.countdownChip,
+                chip.type === 'deadline' ? styles.countdownChipDeadline : styles.countdownChipOffer,
+                isUrgent ? styles.countdownChipUrgent : '',
+              ].filter(Boolean).join(' ');
+              const trackClass = [
+                styles.chipTrack,
+                chip.type === 'deadline' ? styles.chipTrackDeadline : styles.chipTrackOffer,
+              ].join(' ');
+              return (
+                <div key={chip.milestone} className={chipClass}>
+                  <span className={trackClass}>
+                    <span className={styles.chipTrackDot} aria-hidden="true" />
+                    {chip.track}
+                  </span>
+                  <div>
+                    <span className={styles.chipDays}>{days === 0 ? 'Today' : (days ?? '—')}</span>
+                    {days !== null && days > 0 && <span className={styles.chipDaysUnit}>days</span>}
+                  </div>
+                  <div className={styles.chipMilestone}>{chip.milestone}</div>
+                  <div className={styles.chipDate}>
+                    {days !== null ? formatCountdownDate(chip.month, chip.day) : ''}
+                  </div>
+                </div>
+              );
+            })}
+          </div>
+        </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 + Editorial — server-rendered slots, only on landing */}
+      {!isSearchActive && howItWorks}
+      {!isSearchActive && editorial}
+
       {/* Results Section */}
       <section className={`${styles.results} ${resultsView === 'map' && isLocationSearch ? styles.mapViewResults : ''}`}>
         {!hasSearch && initialSchools.schools.length > 0 && (
@@ -272,7 +502,7 @@ export function HomeView({ initialSchools, filters, totalSchools }: HomeViewProp
                 >
                   <CompactSchoolItem
                     school={school}
-                    onAddToCompare={addSchool}
+                    onAddToCompare={addSchoolFromSearch}
                     isInCompare={selectedSchools.some(s => s.urn === school.urn)}
                     nationalAvgRwm={nationalAvgRwm}
                   />
@@ -287,7 +517,7 @@ export function HomeView({ initialSchools, filters, totalSchools }: HomeViewProp
                   <button className={styles.closeSheetBtn} onClick={() => setSelectedMapSchool(null)}>×</button>
                   <CompactSchoolItem
                     school={selectedMapSchool}
-                    onAddToCompare={addSchool}
+                    onAddToCompare={addSchoolFromSearch}
                     isInCompare={selectedSchools.some(s => s.urn === selectedMapSchool.urn)}
                     nationalAvgRwm={nationalAvgRwm}
                   />
@@ -305,7 +535,7 @@ export function HomeView({ initialSchools, filters, totalSchools }: HomeViewProp
                     key={school.urn}
                     school={school}
                     isLocationSearch={isLocationSearch}
-                    onAddToCompare={addSchool}
+                    onAddToCompare={addSchoolFromSearch}
                     onRemoveFromCompare={removeSchool}
                     isInCompare={selectedSchools.some(s => s.urn === school.urn)}
                     laAvgAttainment8={school.local_authority ? laAverages[school.local_authority] ?? null : null}
@@ -315,7 +545,7 @@ export function HomeView({ initialSchools, filters, totalSchools }: HomeViewProp
                     key={school.urn}
                     school={school}
                     isLocationSearch={isLocationSearch}
-                    onAddToCompare={addSchool}
+                    onAddToCompare={addSchoolFromSearch}
                     onRemoveFromCompare={removeSchool}
                     isInCompare={selectedSchools.some(s => s.urn === school.urn)}
                     nationalAvgRwm={nationalAvgRwm}
@@ -398,8 +628,8 @@ function CompactSchoolItem({ school, onAddToCompare, isInCompare, nationalAvgRwm
               borderRadius: '3px',
               whiteSpace: 'nowrap',
               ...(ofstedBadge.cssClass === 'ofsted1' ? { background: 'var(--accent-teal-bg)', color: 'var(--accent-teal, #2d7d7d)' } :
-                  ofstedBadge.cssClass === 'ofsted2' ? { background: 'rgba(60,140,60,0.12)', color: '#3c8c3c' } :
+                  ofstedBadge.cssClass === 'ofsted2' ? { background: 'rgba(60,140,60,0.12)', color: '#2f7a2f' } :
-                  ofstedBadge.cssClass === 'ofsted3' ? { background: 'var(--accent-gold-bg)', color: '#b8920e' } :
+                  ofstedBadge.cssClass === 'ofsted3' ? { background: 'var(--accent-gold-bg)', color: 'var(--accent-gold-text, #7a6800)' } :
                   ofstedBadge.cssClass === 'ofsted4' ? { background: 'var(--accent-coral-bg)', color: 'var(--accent-coral, #e07256)' } :
                   ofstedBadge.cssClass === 'ofstedRc' ? { background: '#5a3a6e', color: '#fff' } :
                   ofstedBadge.cssClass === 'ofstedPending' ? { background: '#e0e0e0', color: '#666' } :

nextjs-app/components/HowItWorksSection.tsx

@@ -0,0 +1,120 @@
+// Server component: pure markup, no client state.
+// Rendered into HomeView via a slot prop so its JSX doesn't bloat the
+// HomeView client bundle.
+
+import styles from './HomeView.module.css';
+
+export function HowItWorksSection() {
+  const miniCascade = [
+    { subj: 'Reading', exp: 96, exc: 73, nat: 75 },
+    { subj: 'Writing', exp: 81, exc: 15, nat: 72 },
+    { subj: 'Maths', exp: 85, exc: 47, nat: 74 },
+  ];
+  const compareRows = [
+    { label: 'Reading, Writing & Maths', a: '70%', b: '64%', aHi: true },
+    { label: 'Ofsted', a: 'Outstanding', b: 'Good', aHi: true },
+    { label: 'Reading progress', a: '+2.1', b: '+0.4', aHi: true },
+  ];
+
+  return (
+    <section className={styles.howItWorks}>
+      <div className={styles.hiwHeader}>
+        <h2 className={styles.hiwHeading}>What you&apos;ll see on every school</h2>
+        <span className={styles.hiwSub}>Primary or secondary — the page adapts to the phase</span>
+      </div>
+      <div className={styles.hiwGrid}>
+        {/* Card 1 — Performance */}
+        <div className={styles.hiwCard}>
+          <div className={styles.hiwVisual}>
+            <div className={styles.hiwPhaseBlock}>
+              <div className={styles.hiwPhaseLabel}>Primary · Year 6 · <strong>Key Stage 2 SATs</strong></div>
+              <div className={styles.miniCascade}>
+                {miniCascade.map(({ subj, exp, exc, nat }) => (
+                  <div key={subj} className={styles.miniCascadeCol}>
+                    <div className={styles.miniSubj}>{subj}</div>
+                    <div className={styles.miniRowHead}><span>Expected</span><strong>{exp}%</strong></div>
+                    <div className={styles.miniTrack}>
+                      <div className={styles.miniNatPill} style={{ left: `${nat}%` }}>{nat}%</div>
+                      <div className={styles.miniBarExp} style={{ width: `${exp}%` }} />
+                    </div>
+                    <div className={styles.miniRowHead}><span>Exceeding</span><strong>{exc}%</strong></div>
+                    <div className={styles.miniTrack}>
+                      <div className={styles.miniBarExc} style={{ width: `${exc}%` }} />
+                    </div>
+                  </div>
+                ))}
+              </div>
+            </div>
+            <div className={styles.hiwPhaseBlock}>
+              <div className={styles.hiwPhaseLabel}>Secondary · Year 11 · <strong>GCSE Attainment 8</strong></div>
+              <div className={styles.att8Row}>
+                <div className={styles.att8BarWrap}>
+                  <div className={styles.att8BarHead}><span>This school</span><span>National avg 50.2</span></div>
+                  <div className={styles.att8Track}>
+                    <div className={styles.att8Fill} style={{ width: '62%' }} />
+                    <div className={styles.att8NatLine} style={{ left: '50%' }} />
+                  </div>
+                </div>
+                <div className={styles.att8Score}>
+                  <div className={styles.att8Value}>62.4</div>
+                  <div className={styles.att8Delta}>+12.2 vs national</div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div className={styles.hiwCardBody}>
+            <div className={styles.hiwStep}>Performance</div>
+            <div className={styles.hiwTitle}>Results against the national average</div>
+            <p className={styles.hiwDesc}>For primary schools, each subject&apos;s Expected and Exceeding percentages side by side. For secondary schools, GCSE Attainment 8 with the national benchmark overlaid.</p>
+          </div>
+        </div>
+
+        {/* Card 2 — Ofsted */}
+        <div className={styles.hiwCard}>
+          <div className={styles.hiwVisual}>
+            <div className={styles.ofstedPreview}>
+              <div className={styles.ofstedHead}>
+                <span className={styles.ofstedBullet} />
+                <span className={styles.ofstedTitle}>Latest Ofsted inspection</span>
+              </div>
+              <span className={styles.ofstedBadge}>OUTSTANDING</span>
+              <div className={styles.ofstedVerdict}>Rated <em>Outstanding</em> at last inspection.</div>
+              <div className={styles.ofstedMeta}>Full inspection · March 2024</div>
+            </div>
+          </div>
+          <div className={styles.hiwCardBody}>
+            <div className={styles.hiwStep}>Judgement</div>
+            <div className={styles.hiwTitle}>Ofsted at a glance</div>
+            <p className={styles.hiwDesc}>Current grade, inspection date, and a plain-English headline — without opening a 40-page report.</p>
+          </div>
+        </div>
+
+        {/* Card 3 — Compare */}
+        <div className={styles.hiwCard}>
+          <div className={styles.hiwVisual}>
+            <div className={styles.comparePreview}>
+              <div className={styles.compareHead}>
+                <div className={`${styles.compareHeadCell} ${styles.compareHeadLabel}`}>Metric</div>
+                <div className={styles.compareHeadCell}>Our Lady<br />Queen of Heaven</div>
+                <div className={styles.compareHeadCell}>St Mary&apos;s<br />Catholic Primary</div>
+              </div>
+              {compareRows.map(({ label, a, b, aHi }) => (
+                <div key={label} className={styles.compareRow}>
+                  <span className={styles.compareRowLabel}>{label}</span>
+                  <span className={`${styles.compareRowVal} ${aHi ? styles.compareRowValHi : ''}`}>{a}</span>
+                  <span className={styles.compareRowVal}>{b}</span>
+                </div>
+              ))}
+              <div className={styles.compareFoot}>+ pin up to 5 schools</div>
+            </div>
+          </div>
+          <div className={styles.hiwCardBody}>
+            <div className={styles.hiwStep}>Compare</div>
+            <div className={styles.hiwTitle}>Side-by-side shortlists</div>
+            <p className={styles.hiwDesc}>Pin up to five schools and every metric aligns in the same columns — works for primary and secondary alike.</p>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}

nextjs-app/components/LeafletHeroMapInner.tsx

@@ -0,0 +1,95 @@
+/**
+ * LeafletHeroMapInner
+ * Minimal single-school map for the detail hero. Renders as a static preview
+ * (all interaction disabled so it never traps page scroll); when `interactive`
+ * flips true — i.e. the hero map has gone fullscreen — pan/zoom are enabled and
+ * a zoom control appears.
+ */
+
+'use client';
+
+import { useEffect, useRef } from 'react';
+import L from 'leaflet';
+import 'leaflet/dist/leaflet.css';
+
+interface LeafletHeroMapInnerProps {
+  lat: number;
+  lng: number;
+  interactive: boolean;
+}
+
+// Coral teardrop pin with a soft halo — inline styles only, so it renders
+// reliably inside Leaflet's divIcon HTML string (no CSS-module dependency).
+const PIN_HTML = `
+<div style="position:relative;width:26px;height:26px">
+  <span style="position:absolute;left:50%;top:74%;width:32px;height:32px;transform:translate(-50%,-50%);border-radius:50%;background:rgba(224,114,86,.25)"></span>
+  <svg width="26" height="34" viewBox="0 0 26 34" style="filter:drop-shadow(0 3px 4px rgba(0,0,0,.35))">
+    <path d="M13 0C5.8 0 0 5.8 0 13c0 9.2 13 21 13 21s13-11.8 13-21C26 5.8 20.2 0 13 0Z" fill="#e07256"/>
+    <circle cx="13" cy="13" r="5" fill="#fff"/>
+  </svg>
+</div>`;
+
+export default function LeafletHeroMapInner({ lat, lng, interactive }: LeafletHeroMapInnerProps) {
+  const elRef = useRef<HTMLDivElement>(null);
+  const mapRef = useRef<L.Map | null>(null);
+  const zoomCtrlRef = useRef<L.Control.Zoom | null>(null);
+
+  // Create the map once.
+  useEffect(() => {
+    if (!elRef.current || mapRef.current) return;
+    const map = L.map(elRef.current, {
+      zoomControl: false,
+      attributionControl: true,
+      dragging: false,
+      scrollWheelZoom: false,
+      doubleClickZoom: false,
+      boxZoom: false,
+      keyboard: false,
+      touchZoom: false,
+    }).setView([lat, lng], 15);
+
+    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
+      attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
+      maxZoom: 19,
+    }).addTo(map);
+
+    L.marker([lat, lng], {
+      icon: L.divIcon({ className: '', iconSize: [26, 34], iconAnchor: [13, 30], html: PIN_HTML }),
+      keyboard: false,
+    }).addTo(map);
+
+    mapRef.current = map;
+    setTimeout(() => map.invalidateSize(), 60);
+
+    return () => {
+      map.remove();
+      mapRef.current = null;
+      zoomCtrlRef.current = null;
+    };
+  }, [lat, lng]);
+
+  // Toggle interaction (and the zoom control) when entering/leaving fullscreen,
+  // and re-measure since the container size changes.
+  useEffect(() => {
+    const map = mapRef.current;
+    if (!map) return;
+
+    const handlers = [
+      map.dragging, map.scrollWheelZoom, map.doubleClickZoom, map.boxZoom, map.keyboard, map.touchZoom,
+    ];
+    handlers.forEach((h) => { if (h) { interactive ? h.enable() : h.disable(); } });
+
+    if (interactive && !zoomCtrlRef.current) {
+      zoomCtrlRef.current = L.control.zoom({ position: 'topleft' });
+      zoomCtrlRef.current.addTo(map);
+    } else if (!interactive && zoomCtrlRef.current) {
+      zoomCtrlRef.current.remove();
+      zoomCtrlRef.current = null;
+    }
+
+    if (!interactive) map.setView([lat, lng], 15);
+    setTimeout(() => map.invalidateSize(), 80);
+  }, [interactive, lat, lng]);
+
+  return <div ref={elRef} style={{ width: '100%', height: '100%' }} />;
+}

nextjs-app/components/LeafletMapInner.tsx

@@ -49,8 +49,8 @@ function buildPopupBadge(school: School): PopupBadge {
     const labels: Record<number, string> = { 1: 'Outstanding', 2: 'Good', 3: 'Req. Improvement', 4: 'Inadequate' };
     const colours: Record<number, string> = {
       1: 'background:#d4f0ea;color:#2d7d7d',
-      2: 'background:rgba(60,140,60,0.12);color:#3c8c3c',
+      2: 'background:rgba(60,140,60,0.12);color:#2f7a2f',
-      3: 'background:#fef3cd;color:#b8920e',
+      3: 'background:#fef3cd;color:#7a6800',
       4: 'background:#fde8e0;color:#e07256',
     };
     return { label: `${labels[school.ofsted_grade]}${yearStr}`, style: colours[school.ofsted_grade] };

nextjs-app/components/MetricTooltip.module.css

@@ -6,7 +6,17 @@
 }
 
 .icon {
-  font-size: 0.85em;
+  /* A real button: 24px tap target (WCAG 2.5.8) drawn as the small glyph. */
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 24px;
+  min-height: 24px;
+  margin: -6px 0;
+  padding: 0;
+  border: none;
+  background: none;
+  font-size: 0.9em;
   color: var(--text-muted, #8a7a72);
   cursor: help;
   line-height: 1;
@@ -14,8 +24,9 @@
   transition: color 0.15s ease;
 }
 
-.wrapper:hover .icon {
+.wrapper:hover .icon,
-  color: var(--accent-coral, #e07256);
+.icon[aria-expanded="true"] {
+  color: var(--accent-coral-dark, #b04a2e);
 }
 
 .tooltip {
@@ -39,12 +50,18 @@
   transition: opacity 0.15s ease, visibility 0.15s ease;
 }
 
-/* Keep tooltip visible when hovering over it */
+/* Reveal on hover (desktop), keyboard focus, or explicit tap/click toggle. */
-.wrapper:hover .tooltip {
+.wrapper:hover .tooltip,
+.wrapper:focus-within .tooltip,
+.tooltipOpen {
   visibility: visible;
   opacity: 1;
 }
 
+.tooltipOpen {
+  pointer-events: auto;
+}
+
 /* Small arrow pointing down */
 .tooltip::after {
   content: '';
@@ -75,9 +92,23 @@
   margin-top: 0.1rem;
 }
 
-/* Flip tooltip below when near top of screen */
 @media (max-width: 480px) {
   .tooltip {
     width: 180px;
   }
 }
+
+/* Anchor the bubble to open rightward on phones — icons follow their labels,
+   which start at the left edge, so centring pushed the bubble off-screen. */
+@media (max-width: 640px) {
+  .tooltip {
+    left: -12px;
+    right: auto;
+    transform: none;
+  }
+
+  .tooltip::after {
+    left: 16px;
+    transform: none;
+  }
+}

nextjs-app/components/MetricTooltip.tsx

@@ -1,5 +1,6 @@
 'use client';
 
+import { useEffect, useRef, useState } from 'react';
 import { METRIC_EXPLANATIONS } from '@/lib/metrics';
 import styles from './MetricTooltip.module.css';
 
@@ -16,12 +17,43 @@ export function MetricTooltip({ metricKey, label, plain, detail }: MetricTooltip
   const tooltipPlain = plain ?? explanation?.plain;
   const tooltipDetail = detail ?? explanation?.detail;
 
+  // Tap/click/keyboard toggle so the definition is reachable on touch devices
+  // and by keyboard, not just mouse hover (hover still works on desktop).
+  const [open, setOpen] = useState(false);
+  const wrapperRef = useRef<HTMLSpanElement>(null);
+
+  useEffect(() => {
+    if (!open) return;
+    const dismiss = (e: Event) => {
+      if (wrapperRef.current && e.target instanceof Node && !wrapperRef.current.contains(e.target)) {
+        setOpen(false);
+      }
+    };
+    const onKey = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') setOpen(false);
+    };
+    document.addEventListener('click', dismiss);
+    document.addEventListener('keydown', onKey);
+    return () => {
+      document.removeEventListener('click', dismiss);
+      document.removeEventListener('keydown', onKey);
+    };
+  }, [open]);
+
   if (!tooltipPlain) return null;
 
   return (
-    <span className={styles.wrapper}>
+    <span className={styles.wrapper} ref={wrapperRef}>
-      <span className={styles.icon} aria-label={tooltipLabel ?? 'More information'} role="img">ⓘ</span>
+      <button
-      <span className={styles.tooltip} role="tooltip">
+        type="button"
+        className={styles.icon}
+        aria-expanded={open}
+        aria-label={`What does ${tooltipLabel ?? 'this metric'} mean?`}
+        onClick={() => setOpen((o) => !o)}
+      >
+        ⓘ
+      </button>
+      <span className={`${styles.tooltip}${open ? ` ${styles.tooltipOpen}` : ''}`} role="tooltip">
         {tooltipLabel && <span className={styles.tooltipLabel}>{tooltipLabel}</span>}
         <span className={styles.tooltipPlain}>{tooltipPlain}</span>
         {tooltipDetail && <span className={styles.tooltipDetail}>{tooltipDetail}</span>}

nextjs-app/components/Navigation.module.css

@@ -10,7 +10,9 @@
 .container {
   max-width: 1400px;
   margin: 0 auto;
-  padding: 0 1.5rem;
+  /* Add the safe-area inset to horizontal padding so the header content
+     clears the notch in landscape on iPhones. */
+  padding-inline: max(1.5rem, env(safe-area-inset-left)) max(1.5rem, env(safe-area-inset-right));
   display: flex;
   justify-content: space-between;
   align-items: center;
@@ -21,23 +23,33 @@
   display: flex;
   align-items: center;
   gap: 0.75rem;
+  /* Padded hit area so the logo link is ≥44×44 on touch */
+  margin: -0.375rem -0.5rem;
+  padding: 0.375rem 0.5rem;
   text-decoration: none;
   color: var(--text-primary, #1a1612);
   font-size: 1.25rem;
   font-weight: 700;
   transition: color 0.2s ease;
+  -webkit-tap-highlight-color: transparent;
 }
 
 .logo:hover {
-  color: var(--accent-coral, #e07256);
+  color: var(--accent-coral-dark, #b04a2e);
 }
 
 .logoIcon {
+  display: inline-flex;
   width: 36px;
   height: 36px;
   color: var(--accent-coral, #e07256);
 }
 
+.logoIcon svg {
+  width: 100%;
+  height: 100%;
+}
+
 .logoText {
   font-family: var(--font-playfair), 'Playfair Display', serif;
   font-weight: 700;
@@ -88,7 +100,7 @@
 }
 
 .navLink.active {
-  color: var(--accent-coral, #e07256);
+  color: var(--accent-coral-dark, #b04a2e);
   background: var(--accent-coral-bg);
 }
 
@@ -126,21 +138,109 @@
   }
 }
 
+/* ─── Bottom tab bar (mobile only) ──────────────────────────────── */
+
+.bottomBar {
+  display: none;
+}
+
+.tab {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 0.2rem;
+  flex: 1;
+  min-height: 56px;
+  padding: 0.375rem 0.25rem;
+  color: var(--text-secondary, #5c564d);
+  text-decoration: none;
+  font-size: 0.6875rem;
+  font-weight: 500;
+  letter-spacing: 0.01em;
+  transition: color 0.15s ease, background-color 0.15s ease;
+  -webkit-tap-highlight-color: transparent;
+}
+
+.tab:active {
+  background: var(--bg-secondary, #f3ede4);
+}
+
+.tabActive {
+  color: var(--accent-coral-dark, #b04a2e);
+}
+
+.tabIconWrap {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+}
+
+.tabIcon {
+  width: 22px;
+  height: 22px;
+}
+
+.tabLabel {
+  line-height: 1;
+}
+
+.tabBadge {
+  position: absolute;
+  top: -6px;
+  right: -10px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 18px;
+  height: 18px;
+  padding: 0 5px;
+  font-size: 0.6875rem;
+  font-weight: 700;
+  color: white;
+  background: var(--accent-coral, #e07256);
+  border: 2px solid var(--bg-card, white);
+  border-radius: 9999px;
+  animation: badgePop 0.3s ease-out;
+}
+
 @media (max-width: 640px) {
   .container {
     padding: 0 1rem;
+    height: 56px;
   }
 
-  .logoText {
+  /* Hide the top text nav; the bottom bar takes over */
+  .nav {
     display: none;
   }
 
-  .nav {
+  .logoIcon {
-    gap: 0.25rem;
+    width: 32px;
+    height: 32px;
   }
 
-  .navLink {
+  .bottomBar {
-    padding: 0.5rem 0.75rem;
+    display: flex;
-    font-size: 0.875rem;
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    z-index: 1000;
+    background: var(--bg-card, white);
+    border-top: 1px solid var(--border-color, #e5dfd5);
+    box-shadow: 0 -2px 12px rgba(26, 22, 18, 0.06);
+    /* Respect iPhone home-indicator (bottom) and notch (left/right in
+       landscape) insets so the tab content never sits under system UI. */
+    padding-bottom: env(safe-area-inset-bottom, 0);
+    padding-inline: env(safe-area-inset-left, 0) env(safe-area-inset-right, 0);
+    /* Compensate for iOS Chrome's auto-hiding URL bar — Navigation.tsx
+       writes the offset based on the Visual Viewport API. translate3d
+       (instead of translateY) forces hardware compositing so the bar
+       doesn't lag/flicker during the toolbar animation. */
+    transform: translate3d(0, var(--mobile-bar-offset, 0px), 0);
   }
 }

nextjs-app/components/Navigation.tsx

@@ -1,66 +1,153 @@
 /**
  * Navigation Component
- * Main navigation header with active link highlighting
+ * Top header nav for desktop; bottom tab bar for mobile (≤640px).
  */
 
 'use client';
 
+import { useEffect } from 'react';
 import Link from 'next/link';
 import { usePathname } from 'next/navigation';
 import { useComparison } from '@/hooks/useComparison';
 import styles from './Navigation.module.css';
 
+type IconProps = { className?: string };
+
+const SearchIcon = ({ className }: IconProps) => (
+  <svg className={className} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
+    <circle cx="11" cy="11" r="7" />
+    <path d="m20 20-3.5-3.5" />
+  </svg>
+);
+
+const CompareIcon = ({ className }: IconProps) => (
+  <svg className={className} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
+    <path d="M4 7h13l-3-3" />
+    <path d="M20 17H7l3 3" />
+  </svg>
+);
+
+const RankingsIcon = ({ className }: IconProps) => (
+  <svg className={className} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
+    <path d="M7 21V11" />
+    <path d="M12 21V4" />
+    <path d="M17 21v-7" />
+  </svg>
+);
+
+const AdmissionsIcon = ({ className }: IconProps) => (
+  <svg className={className} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
+    <rect x="3" y="5" width="18" height="16" rx="2" />
+    <path d="M3 10h18M8 3v4M16 3v4" />
+  </svg>
+);
+
 export function Navigation() {
   const pathname = usePathname();
   const { selectedSchools } = useComparison();
 
   const isActive = (path: string) => {
-    if (path === '/') {
+    if (path === '/') return pathname === '/';
-      return pathname === '/';
-    }
     return pathname.startsWith(path);
   };
 
-  return (
+  /**
-    <header className={styles.header}>
+   * iOS Chrome (and some Android browsers) auto-hide their URL bar on scroll,
-      <div className={styles.container}>
+   * which grows the visual viewport without changing the layout viewport.
-        <Link href="/" className={styles.logo}>
+   * `position: fixed; bottom: 0` sticks to the layout viewport, so our tab
-          <div className={styles.logoIcon}>
+   * bar appears to float mid-screen with a gap beneath it. Track the delta
-            <svg viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+   * via VisualViewport and apply it as a translate so the bar always sits
-              <circle cx="20" cy="20" r="18" stroke="currentColor" strokeWidth="2"/>
+   * flush against the visible bottom edge.
-              <path d="M20 6L20 34M8 14L32 14M6 20L34 20M8 26L32 26" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round"/>
+   */
-              <circle cx="20" cy="20" r="3" fill="currentColor"/>
+  useEffect(() => {
-            </svg>
+    const vv = window.visualViewport;
-          </div>
+    if (!vv) return;
-          <span className={styles.logoText}>SchoolCompare</span>
+    const root = document.documentElement;
-        </Link>
+    const update = () => {
+      const offset = window.innerHeight - (vv.height + vv.offsetTop);
+      // Only positive offsets are meaningful (bar hidden → push down).
+      root.style.setProperty('--mobile-bar-offset', `${Math.max(0, offset)}px`);
+    };
+    update();
+    vv.addEventListener('resize', update);
+    vv.addEventListener('scroll', update);
+    return () => {
+      vv.removeEventListener('resize', update);
+      vv.removeEventListener('scroll', update);
+      root.style.removeProperty('--mobile-bar-offset');
+    };
+  }, []);
 
-        <nav className={styles.nav} aria-label="Main navigation">
+  const items = [
-          <Link
+    { href: '/', label: 'Search', Icon: SearchIcon },
-            href="/"
+    { href: '/compare', label: 'Compare', Icon: CompareIcon },
-            className={isActive('/') ? `${styles.navLink} ${styles.active}` : styles.navLink}
+    { href: '/rankings', label: 'Rankings', Icon: RankingsIcon },
-          >
+    { href: '/admissions', label: 'Admissions', Icon: AdmissionsIcon },
-            Search
+  ] as const;
+
+  return (
+    <>
+      <header className={styles.header}>
+        <div className={styles.container}>
+          <Link href="/" className={styles.logo} aria-label="SchoolCompare home">
+            <span className={styles.logoIcon}>
+              <svg viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
+                <circle cx="20" cy="20" r="18" stroke="currentColor" strokeWidth="2" />
+                <path d="M20 6L20 34M8 14L32 14M6 20L34 20M8 26L32 26" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" />
+                <circle cx="20" cy="20" r="3" fill="currentColor" />
+              </svg>
+            </span>
+            <span className={styles.logoText}>SchoolCompare</span>
           </Link>
-          <Link
+
-            href="/compare"
+          <nav className={styles.nav} aria-label="Main navigation">
-            className={isActive('/compare') ? `${styles.navLink} ${styles.active}` : styles.navLink}
+            {items.map(({ href, label }) => {
-          >
+              const active = isActive(href);
-            Compare
+              const showBadge = href === '/compare' && selectedSchools.length > 0;
-            {selectedSchools.length > 0 && (
+              return (
-              <span key={selectedSchools.length} className={styles.badge}>
+                <Link
-                {selectedSchools.length}
+                  key={href}
+                  href={href}
+                  className={active ? `${styles.navLink} ${styles.active}` : styles.navLink}
+                  aria-current={active ? 'page' : undefined}
+                >
+                  {label}
+                  {showBadge && (
+                    <span key={selectedSchools.length} className={styles.badge}>
+                      {selectedSchools.length}
+                    </span>
+                  )}
+                </Link>
+              );
+            })}
+          </nav>
+        </div>
+      </header>
+
+      <nav className={styles.bottomBar} aria-label="Main navigation">
+        {items.map(({ href, label, Icon }) => {
+          const active = isActive(href);
+          const showBadge = href === '/compare' && selectedSchools.length > 0;
+          return (
+            <Link
+              key={href}
+              href={href}
+              className={active ? `${styles.tab} ${styles.tabActive}` : styles.tab}
+              aria-current={active ? 'page' : undefined}
+            >
+              <span className={styles.tabIconWrap}>
+                <Icon className={styles.tabIcon} />
+                {showBadge && (
+                  <span key={selectedSchools.length} className={styles.tabBadge} aria-label={`${selectedSchools.length} selected`}>
+                    {selectedSchools.length}
+                  </span>
+                )}
               </span>
-            )}
+              <span className={styles.tabLabel}>{label}</span>
-          </Link>
+            </Link>
-          <Link
+          );
-            href="/rankings"
+        })}
-            className={isActive('/rankings') ? `${styles.navLink} ${styles.active}` : styles.navLink}
+      </nav>
-          >
+    </>
-            Rankings
-          </Link>
-        </nav>
-      </div>
-    </header>
   );
 }

nextjs-app/components/PerformanceChart.module.css

@@ -2,6 +2,11 @@
   display: flex;
   flex-direction: column;
   gap: 0.75rem;
+  /* Fill the parent .chartContainer (which carries the height) so the
+     canvas wrapper below can take 100% of a real number. Without this,
+     .chartOuter auto-sizes to content and the canvas falls back to
+     Chart.js's tiny default — leaving empty space below the chart. */
+  height: 100%;
 }
 
 .trendSummary {
@@ -17,7 +22,12 @@
 
 .chartWrapper {
   width: 100%;
-  height: 100%;
+  /* flex:1 instead of height:100% so the trend banner / chip strip
+     above can take their natural size and the canvas fills the rest of
+     the .chartOuter column. min-height:0 keeps flex from refusing to
+     shrink the canvas below its content size. */
+  flex: 1 1 auto;
+  min-height: 0;
   position: relative;
 }
 
@@ -29,8 +39,104 @@
   font-style: italic;
 }
 
+/* ── Mobile chip selector ────────────────────────────────────────────
+   Hidden on desktop. Replaces the in-chart legend on phones — one
+   metric at a time so the line variation is actually readable. */
+
+.mobileChips {
+  display: none;
+}
+
+.mobileSubtitle {
+  font-size: 0.7rem;
+  font-weight: 700;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: var(--text-muted, #6d685f);
+  margin-bottom: 0.4rem;
+}
+
+.chipRow {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.375rem;
+}
+
+.chip {
+  border: 1px solid var(--border-color, #e5dfd5);
+  background: var(--bg-card, #fff);
+  color: var(--text-secondary, #5c564d);
+  padding: 0.4rem 0.75rem;
+  border-radius: 999px;
+  font-size: 0.8125rem;
+  font-weight: 500;
+  font-family: inherit;
+  cursor: pointer;
+  white-space: nowrap;
+  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
+  -webkit-tap-highlight-color: transparent;
+}
+
+.chip:active {
+  background: var(--bg-secondary, #f3ede4);
+}
+
+.chip:disabled {
+  opacity: 0.45;
+  cursor: not-allowed;
+}
+
+.chipActive {
+  background: var(--accent-coral-dark, #b04a2e);
+  color: white;
+  border-color: var(--accent-coral, #e07256);
+  font-weight: 600;
+}
+
+.chipActive:active {
+  background: var(--accent-coral-dark, #c45a3f);
+}
+
+.miniLegend {
+  display: flex;
+  gap: 0.875rem;
+  font-size: 0.75rem;
+  color: var(--text-secondary, #5c564d);
+  margin-top: -0.25rem;
+}
+
+.miniLegend span {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.3rem;
+}
+
+.miniDot {
+  display: inline-block;
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+}
+
 @media (max-width: 768px) {
   .chartWrapper {
     font-size: 0.875rem;
   }
 }
+
+@media (max-width: 640px) {
+  .mobileChips {
+    display: block;
+  }
+  /* Canvas needs an explicit height now that the parent .chartContainer
+     flows naturally (its old fixed 220px was clipping the chip strip and
+     pushing the disclosure link onto the plot area). */
+  .chartWrapper {
+    height: 220px;
+  }
+  /* The desktop "click the legend to show progress" hint is irrelevant
+     once the chip row is the disclosure mechanism. */
+  .chartHint {
+    display: none;
+  }
+}

nextjs-app/components/PerformanceChart.tsx

@@ -1,29 +1,25 @@
 /**
  * PerformanceChart Component
- * Displays school performance data over time using Chart.js
+ * Displays school performance data over time using Chart.js.
+ *
+ * Desktop: full multi-series chart with dual y-axis (percentage + progress).
+ * Mobile (≤640px): a chip selector switches the chart between one focused view
+ *   at a time — no dual axis, no legend, auto-scaled y-axis. Designed so the
+ *   actual variation in the data is visible on a phone instead of a flat line.
  */
 
 'use client';
 
+import { useMemo, useState } from 'react';
 import { Line } from 'react-chartjs-2';
-import {
+import { ChartOptions, ChartDataset } from 'chart.js';
-  Chart as ChartJS,
+import '@/lib/chartSetup';
-  CategoryScale,
-  LinearScale,
-  PointElement,
-  LineElement,
-  Title,
-  Tooltip,
-  Legend,
-  ChartOptions,
-  ChartDataset,
-} from 'chart.js';
 import type { SchoolResult } from '@/lib/types';
 import { formatAcademicYear } from '@/lib/utils';
+import { useIsMobile } from '@/hooks/useIsMobile';
+import { track } from '@/lib/analytics';
 import styles from './PerformanceChart.module.css';
 
-ChartJS.register(CategoryScale, LinearScale, PointElement, LineElement, Title, Tooltip, Legend);
-
 interface NationalByYear {
   year: number;
   primary: Record<string, number>;
@@ -34,17 +30,35 @@ interface PerformanceChartProps {
   data: SchoolResult[];
   schoolName: string;
   isSecondary?: boolean;
-  /** National average RWM expected % for the latest year — fallback if no by_year data */
   nationalRwmAvg?: number | null;
-  /** National average Attainment 8 for the latest year — fallback if no by_year data */
   nationalAtt8Avg?: number | null;
-  /** Per-year national averages — used to draw a changing reference line */
   nationalByYear?: NationalByYear[];
 }
 
-// Academic years when SATs/GCSEs were cancelled due to COVID
 const COVID_YEARS = new Set([201920, 202021]);
 
+// Mobile chip definitions: which datasets render when each chip is active.
+// `series` keys reference the dataset labels so we can filter cleanly.
+type ChipId = 'expected' | 'higher' | 'progress' | 'attainment8' | 'em_pass' | 'progress8';
+interface ChipDef {
+  id: ChipId;
+  label: string;
+  /** Dataset labels (from the desktop dataset list below) this chip surfaces. */
+  series: string[];
+}
+
+const PRIMARY_CHIPS: ChipDef[] = [
+  { id: 'expected', label: 'At expected level',    series: ['Reading, Writing & Maths expected %', 'National average'] },
+  { id: 'higher',   label: 'Above expected level', series: ['Exceeding expected level'] },
+  { id: 'progress', label: 'Pupil progress',       series: ['Reading progress', 'Writing progress', 'Maths progress'] },
+];
+
+const SECONDARY_CHIPS: ChipDef[] = [
+  { id: 'attainment8', label: 'Attainment 8',            series: ['Attainment 8', 'National average'] },
+  { id: 'em_pass',     label: 'English & Maths grade 4+', series: ['English & Maths Grade 4+'] },
+  { id: 'progress8',   label: 'Progress 8',              series: ['Progress 8'] },
+];
+
 export function PerformanceChart({
   data,
   isSecondary = false,
@@ -55,8 +69,9 @@ export function PerformanceChart({
   const sortedData = [...data].sort((a, b) => a.year - b.year);
   const years = sortedData.map(d => formatAcademicYear(d.year));
 
-  // Build per-year national average series aligned to the school's data years.
+  const isMobile = useIsMobile();
-  // Falls back to a flat line using the scalar prop if by_year isn't available.
+
+  // ── Build per-year national averages ─────────────────────────────────
   const natRefRwm: (number | null)[] = sortedData.map(d => {
     if (nationalByYear) {
       const match = nationalByYear.find(n => n.year === d.year);
@@ -74,7 +89,7 @@ export function PerformanceChart({
   const hasNatRwm = natRefRwm.some(v => v != null);
   const hasNatAtt8 = natRefAtt8.some(v => v != null);
 
-  // ── Trend summary (primary only) ──────────────────────────────────────
+  // ── Trend summary (primary only — references headline metric) ────────
   const trendSummary = (() => {
     if (isSecondary) return null;
     const rwm = sortedData.filter(d => d.rwm_expected_pct != null);
@@ -87,18 +102,17 @@ export function PerformanceChart({
     const delta = latest.rwm_expected_pct! - prev.rwm_expected_pct!;
     const arrow = delta > 1 ? '↑' : delta < -1 ? '↓' : '→';
     if (best.year === latest.year) {
-      return `${arrow} Best year on record — ${latestPct}% Reading, Writing & Maths`;
+      return `${arrow} Best year on record — ${latestPct}% met the expected standard in Reading, Writing & Maths`;
     }
-    return `${arrow} Peaked at ${bestPct}% (${formatAcademicYear(best.year)}), currently ${latestPct}%`;
+    return `${arrow} Reading, Writing & Maths peaked at ${bestPct}% (${formatAcademicYear(best.year)}), currently ${latestPct}%`;
   })();
 
-  // ── COVID gap note ─────────────────────────────────────────────────────
   const hasCovidGap = isSecondary
     ? false
     : COVID_YEARS.size > 0 &&
       [...COVID_YEARS].some(y => !sortedData.find(d => d.year === y));
 
-  // ── Datasets ──────────────────────────────────────────────────────────
+  // ── Datasets (full set; mobile filters them via the active chip) ─────
   const refLineStyle = {
     borderColor: 'rgba(90,80,70,0.35)',
     backgroundColor: 'transparent',
@@ -109,7 +123,7 @@ export function PerformanceChart({
     order: 10,
   };
 
-  const datasets: ChartDataset<'line'>[] = isSecondary ? [
+  const allDatasets: ChartDataset<'line'>[] = isSecondary ? [
     {
       label: 'Attainment 8',
       data: sortedData.map(d => d.attainment_8_score),
@@ -211,7 +225,53 @@ export function PerformanceChart({
     },
   ];
 
-  const options: ChartOptions<'line'> = {
+  // ── Mobile chip state + filtered datasets ────────────────────────────
+  const chips = isSecondary ? SECONDARY_CHIPS : PRIMARY_CHIPS;
+
+  // A chip is enabled only if at least one of its series has any real data.
+  const chipHasData = (chip: ChipDef) =>
+    chip.series.some(name => {
+      const ds = allDatasets.find(d => d.label === name);
+      return ds?.data?.some(v => v != null);
+    });
+
+  const firstEnabledChip = chips.find(chipHasData)?.id ?? chips[0].id;
+  const [activeChip, setActiveChip] = useState<ChipId>(firstEnabledChip);
+
+  const activeChipDef = chips.find(c => c.id === activeChip) ?? chips[0];
+
+  const mobileDatasets = useMemo(() => {
+    return allDatasets
+      .filter(ds => activeChipDef.series.includes(ds.label ?? ''))
+      .map(ds => ({ ...ds, hidden: false, yAxisID: 'y' as const }));
+  }, [activeChipDef, allDatasets]);
+
+  // Auto-scale Y axis for the mobile chart so variation is visible.
+  // For percentage chips: clamp to 0–100 but tighten when data sits in a band.
+  // For progress chips: centre on 0 with a small symmetric range.
+  const mobileYBounds = useMemo(() => {
+    const isProgress = activeChip === 'progress' || activeChip === 'progress8';
+    const values: number[] = mobileDatasets.flatMap(ds =>
+      (ds.data as Array<number | null | undefined>).filter((v): v is number => typeof v === 'number')
+    );
+    if (values.length === 0) return { min: 0, max: 100, isProgress };
+    const lo = Math.min(...values);
+    const hi = Math.max(...values);
+    if (isProgress) {
+      const reach = Math.max(2, Math.ceil(Math.max(Math.abs(lo), Math.abs(hi)) + 0.5));
+      return { min: -reach, max: reach, isProgress };
+    }
+    // Percentage: leave headroom but never widen below 0 / above 100.
+    const padded = Math.max(5, Math.round((hi - lo) * 0.2));
+    return {
+      min: Math.max(0, Math.floor((lo - padded) / 5) * 5),
+      max: Math.min(100, Math.ceil((hi + padded) / 5) * 5),
+      isProgress,
+    };
+  }, [activeChip, mobileDatasets]);
+
+  // ── Chart options ────────────────────────────────────────────────────
+  const desktopOptions: ChartOptions<'line'> = {
     responsive: true,
     maintainAspectRatio: false,
     interaction: { mode: 'index', intersect: false },
@@ -222,7 +282,6 @@ export function PerformanceChart({
           usePointStyle: true,
           padding: 14,
           font: { size: 12 },
-          filter: item => item.text !== 'National average' || true,
         },
       },
       title: { display: false },
@@ -237,36 +296,22 @@ export function PerformanceChart({
             if (ctx.parsed.y == null) return label;
             const isProgress = ctx.dataset.yAxisID === 'y1';
             const suffix = isProgress ? '' : '%';
-            const val = ctx.parsed.y.toFixed(1);
+            return `${label}: ${ctx.parsed.y.toFixed(1)}${suffix}`;
-            return `${label}: ${val}${suffix}`;
           },
         },
       },
     },
     scales: {
       y: {
-        type: 'linear',
+        type: 'linear', display: true, position: 'left',
-        display: true,
+        title: { display: true, text: isSecondary ? 'Score / %' : 'Percentage (%)', font: { size: 11 } },
-        position: 'left',
+        min: 0, max: isSecondary ? undefined : 100,
-        title: {
-          display: true,
-          text: isSecondary ? 'Score / %' : 'Percentage (%)',
-          font: { size: 11 },
-        },
-        min: 0,
-        max: isSecondary ? undefined : 100,
         grid: { color: 'rgba(0,0,0,0.05)' },
         ticks: { font: { size: 11 } },
       },
       y1: {
-        type: 'linear',
+        type: 'linear', display: true, position: 'right',
-        display: true,
+        title: { display: true, text: isSecondary ? 'Progress 8' : 'Progress score', font: { size: 11 } },
-        position: 'right',
-        title: {
-          display: true,
-          text: isSecondary ? 'Progress 8' : 'Progress score',
-          font: { size: 11 },
-        },
         grid: { drawOnChartArea: false },
         ticks: { font: { size: 11 } },
       },
@@ -277,19 +322,107 @@ export function PerformanceChart({
     },
   };
 
+  const mobileOptions: ChartOptions<'line'> = {
+    responsive: true,
+    maintainAspectRatio: false,
+    interaction: { mode: 'index', intersect: false },
+    plugins: {
+      legend: { display: false },
+      title: { display: false },
+      tooltip: {
+        backgroundColor: 'rgba(26,22,18,0.92)',
+        padding: 10,
+        titleFont: { size: 12 },
+        bodyFont: { size: 11 },
+        callbacks: {
+          label: ctx => {
+            const label = ctx.dataset.label ?? '';
+            if (ctx.parsed.y == null) return label;
+            const suffix = mobileYBounds.isProgress ? '' : '%';
+            return `${label}: ${ctx.parsed.y.toFixed(1)}${suffix}`;
+          },
+        },
+      },
+    },
+    scales: {
+      y: {
+        type: 'linear', display: true, position: 'left',
+        min: mobileYBounds.min, max: mobileYBounds.max,
+        grid: { color: 'rgba(0,0,0,0.05)' },
+        ticks: { font: { size: 10 }, maxTicksLimit: 5 },
+      },
+      x: {
+        grid: { display: false },
+        ticks: { font: { size: 10 }, autoSkip: false },
+      },
+    },
+  };
+
+  const subtitle = isSecondary
+    ? 'GCSE results · Year 11'
+    : 'KS2 SATs · Reading, Writing & Maths';
+
   return (
     <div className={styles.chartOuter}>
       {trendSummary && (
         <div className={styles.trendSummary}>{trendSummary}</div>
       )}
-      <div className={styles.chartWrapper}>
+
-        <Line data={{ labels: years, datasets }} options={options} />
+      {/* Mobile-only chip selector */}
+      <div className={styles.mobileChips} aria-hidden={!isMobile}>
+        <div className={styles.mobileSubtitle}>{subtitle}</div>
+        <div className={styles.chipRow} role="tablist" aria-label="Select metric">
+          {chips.map(chip => {
+            const enabled = chipHasData(chip);
+            const active = chip.id === activeChip;
+            return (
+              <button
+                key={chip.id}
+                type="button"
+                role="tab"
+                aria-selected={active}
+                disabled={!enabled}
+                onClick={() => {
+                  if (chip.id !== activeChip) {
+                    track('chart_metric_changed', { chip: chip.id, phase: isSecondary ? 'secondary' : 'primary', viewport: 'mobile' });
+                  }
+                  setActiveChip(chip.id);
+                }}
+                className={`${styles.chip}${active ? ` ${styles.chipActive}` : ''}`}
+                title={!enabled ? 'No data for this school' : undefined}
+              >
+                {chip.label}
+              </button>
+            );
+          })}
+        </div>
       </div>
+
+      <div className={styles.chartWrapper}>
+        <Line
+          data={{ labels: years, datasets: isMobile ? mobileDatasets : allDatasets }}
+          options={isMobile ? mobileOptions : desktopOptions}
+        />
+      </div>
+
+      {/* When the Progress chip is active on primary, show a tiny inline legend
+          for the 3 sub-series (reading/writing/maths) — they share a unit and
+          belong together. */}
+      {isMobile && activeChip === 'progress' && (
+        <div className={styles.miniLegend}>
+          <span><span className={styles.miniDot} style={{ background: 'rgb(59,130,246)' }} />Reading</span>
+          <span><span className={styles.miniDot} style={{ background: 'rgb(139,92,246)' }} />Writing</span>
+          <span><span className={styles.miniDot} style={{ background: 'rgb(236,72,153)' }} />Maths</span>
+        </div>
+      )}
+
       {hasCovidGap && (
         <p className={styles.covidNote}>
           * No data for 2019/20 or 2020/21 — national assessments were cancelled due to COVID-19.
         </p>
       )}
+
+      {/* Desktop-only hint about toggling progress in the legend */}
       {!isSecondary && (
         <p className={styles.chartHint}>
           Progress scores (Reading, Writing, Maths) are hidden by default — click them in the legend to show.

nextjs-app/components/RankingsView.module.css

@@ -55,13 +55,13 @@
 }
 
 .phaseTabActive {
-  background: var(--accent-coral, #e07256);
+  background: var(--accent-coral-dark, #b04a2e);
   color: white;
   font-weight: 600;
 }
 
 .phaseTabActive:hover {
-  background: var(--accent-coral, #e07256);
+  background: var(--accent-coral-darker, #9c3f26);
 }
 
 /* Filters */
@@ -187,6 +187,18 @@
   text-align: center;
 }
 
+/* Table auto-layout sizes columns by the unwrapped text, so a long metric
+   label ("Reading, Writing & Maths Combined Higher %") widened the table
+   past the viewport. A block inner span is what actually caps the measured
+   width and forces the label onto multiple lines. */
+.valueHeaderText {
+  display: block;
+  max-width: 110px;
+  margin: 0 auto;
+  white-space: normal;
+  line-height: 1.2;
+}
+
 .actionHeader {
   width: 120px;
   text-align: center;
@@ -290,7 +302,7 @@
 }
 
 .schoolLink:hover {
-  color: var(--accent-coral, #e07256);
+  color: var(--accent-coral-dark, #b04a2e);
 }
 
 .areaCell,
@@ -298,6 +310,14 @@
   color: var(--text-secondary, #5c564d);
 }
 
+/* LA subline under the school name — mobile only (Area column hidden there). */
+.schoolCellArea {
+  display: none;
+  font-size: 0.75rem;
+  font-weight: 400;
+  color: var(--text-muted, #8a847a);
+}
+
 .valueCell {
   text-align: center;
   font-size: 1rem;
@@ -374,20 +394,26 @@
     font-size: 0.875rem;
   }
 
-  /* Hide less-critical columns on mobile so the metric value stays visible */
+  /* Hide less-critical columns on mobile so the metric value stays visible.
+     Area moves to a subline under the school name (.schoolCellArea) — with a
+     four-column layout the value still overflowed a 390px viewport and the
+     whole point of the page (the score) needed a sideways swipe to see. */
   .typeHeader,
   .typeCell,
   .actionHeader,
-  .actionCell {
+  .actionCell,
+  .areaHeader,
+  .areaCell {
     display: none;
   }
 
-  .schoolHeader {
+  .schoolCellArea {
-    min-width: 140px;
+    display: block;
+    margin-top: 0.15rem;
   }
 
-  .areaHeader {
+  .schoolHeader {
-    min-width: 80px;
+    min-width: 0;
   }
 
   .valueHeader,
@@ -396,6 +422,20 @@
     min-width: 60px;
   }
 
+  /* Long metric labels like "Reading, Writing & Maths Combined %" used to
+     force the whole column wide; let them wrap onto short lines with a
+     tighter font so the value cell can stay compact. */
+  .valueHeader {
+    font-size: 0.625rem;
+    white-space: normal;
+    line-height: 1.15;
+    letter-spacing: 0.03em;
+  }
+
+  .valueHeaderText {
+    max-width: 84px;
+  }
+
   .rankHeader {
     width: 40px;
   }

nextjs-app/components/RankingsView.tsx

@@ -9,6 +9,7 @@ import { useRouter, usePathname, useSearchParams } from 'next/navigation';
 import { useComparison } from '@/hooks/useComparison';
 import type { RankingEntry, Filters, MetricDefinition } from '@/lib/types';
 import { formatPercentage, formatProgress, formatAcademicYear, schoolUrl } from '@/lib/utils';
+import { track } from '@/lib/analytics';
 import { EmptyState } from './EmptyState';
 import styles from './RankingsView.module.css';
 
@@ -79,6 +80,7 @@ export function RankingsView({
   };
 
   const handleMetricChange = (metric: string) => {
+    track('metric_compared_in_rankings', { metric, phase: selectedPhase });
     updateFilters({ metric });
   };
 
@@ -98,6 +100,7 @@ export function RankingsView({
       latitude: null,
       longitude: null,
     } as any);
+    track('compare_school_added', { urn: ranking.urn, from: 'rankings' });
   };
 
   // Get metric definition
@@ -230,7 +233,11 @@ export function RankingsView({
                   <th className={styles.schoolHeader}>School</th>
                   <th className={styles.areaHeader}>Area</th>
                   <th className={styles.typeHeader}>Type</th>
-                  <th className={styles.valueHeader}>{metricLabel}</th>
+                  <th className={styles.valueHeader}>
+                    {/* Inner block caps the column's measured width so long
+                        labels wrap instead of widening the table off-screen. */}
+                    <span className={styles.valueHeaderText}>{metricLabel}</span>
+                  </th>
                   <th className={styles.actionHeader}>Action</th>
                 </tr>
               </thead>
@@ -270,6 +277,11 @@ export function RankingsView({
                         <a href={schoolUrl(ranking.urn, ranking.school_name)} className={styles.schoolLink}>
                           {ranking.school_name}
                         </a>
+                        {/* On phones the Area column is hidden; the LA moves here
+                            so the metric value fits on screen without swiping. */}
+                        {ranking.local_authority && (
+                          <span className={styles.schoolCellArea}>{ranking.local_authority}</span>
+                        )}
                       </td>
                       <td className={styles.areaCell}>{ranking.local_authority || '-'}</td>
                       <td className={styles.typeCell}>{ranking.school_type || '-'}</td>

nextjs-app/components/SatsChart.module.css

@@ -3,7 +3,8 @@
 .container {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
-  gap: 2rem;
+  gap: 1.75rem;
+  padding-top: 0.25rem;
 }
 
 /* ── Individual subject column ── */
@@ -12,12 +13,12 @@
 }
 
 .subjectName {
-  font-size: 0.7rem;
+  font-size: 0.65rem;
-  font-weight: 600;
+  font-weight: 700;
   text-transform: uppercase;
-  letter-spacing: 0.08em;
+  letter-spacing: 0.1em;
   color: var(--text-muted, #6d685f);
-  margin-bottom: 0.65rem;
+  margin-bottom: 0.75rem;
 }
 
 .chartArea {
@@ -49,20 +50,20 @@
   top: 0;
   height: calc(100% - 20px);
   width: 1.5px;
-  background: rgba(224, 114, 86, 0.25); /* --accent-coral at 25% */
+  background: rgba(224, 114, 86, 0.35); /* --accent-coral at 35% */
   z-index: 2;
   pointer-events: none;
 }
 
 .natPill {
   position: absolute;
-  top: -8px;
+  top: -10px;
   transform: translateX(-50%);
   background: var(--accent-coral, #e07256);
   color: #fff;
   font-size: 0.55rem;
   font-weight: 700;
-  padding: 0.1rem 0.4rem;
+  padding: 0.1rem 0.35rem;
   border-radius: 4px;
   white-space: nowrap;
   z-index: 3;
@@ -75,19 +76,32 @@
   z-index: 1;
   display: flex;
   flex-direction: column;
-  gap: 0.5rem;
+  gap: 0.35rem;
   padding-top: 0.9rem;
 }
 
 .barRow {
   display: flex;
-  align-items: center;
+  flex-direction: column;
+  gap: 0.18rem;
+}
+
+.barHeader {
+  display: flex;
+  justify-content: space-between;
+  align-items: baseline;
   gap: 0.5rem;
 }
 
+.barTrack {
+  width: 100%;
+  height: 14px;
+  position: relative;
+}
+
 .bar {
-  height: 22px;
+  height: 100%;
-  border-radius: 6px;
+  border-radius: 4px;
   position: relative;
   transition: width 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
 }
@@ -101,26 +115,28 @@
 }
 
 .barLabel {
-  font-size: 0.72rem;
+  font-family: var(--font-playfair), 'Playfair Display', Georgia, serif;
-  font-weight: 600;
+  font-size: 0.78rem;
+  font-weight: 700;
   color: var(--text-primary, #1a1612);
   white-space: nowrap;
-  flex-shrink: 0;
   position: relative;
   z-index: 3;
 }
 
 .barLabelSuffix {
-  font-weight: 400;
+  font-weight: 500;
   color: var(--text-muted, #6d685f);
-  font-size: 0.68rem;
+  font-size: 0.6rem;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
 }
 
 /* ── Ruler ── */
 .ruler {
   position: relative;
-  height: 16px;
+  height: 14px;
-  margin-top: 0.5rem;
+  margin-top: 0.3rem;
   border-top: 1px solid var(--border-color, #e5dfd5);
 }
 
@@ -128,13 +144,13 @@
   position: absolute;
   top: 0;
   width: 1px;
-  height: 4px;
+  height: 3px;
   background: var(--border-color, #e5dfd5);
 }
 
 .rulerLabel {
   position: absolute;
-  top: 6px;
+  top: 5px;
   font-size: 0.5rem;
   font-weight: 500;
   color: var(--text-muted, #6d685f);

nextjs-app/components/SatsChart.tsx

@@ -62,25 +62,31 @@ function SubjectColumn({ subject }: { subject: SubjectData }) {
         <div className={styles.barGroup}>
           {expectedPct != null && (
             <div className={styles.barRow}>
-              <div
+              <div className={styles.barHeader}>
-                ref={expectedRef}
+                <span className={styles.barLabelSuffix}>Expected</span>
-                className={`${styles.bar} ${styles.barExpected}`}
+                <span className={styles.barLabel}>{expectedPct.toFixed(0)}%</span>
-                data-width={expectedPct}
+              </div>
-              />
+              <div className={styles.barTrack}>
-              <div className={styles.barLabel}>
+                <div
-                {expectedPct.toFixed(0)}% <span className={styles.barLabelSuffix}>expected</span>
+                  ref={expectedRef}
+                  className={`${styles.bar} ${styles.barExpected}`}
+                  data-width={expectedPct}
+                />
               </div>
             </div>
           )}
           {exceedingPct != null && (
             <div className={styles.barRow}>
-              <div
+              <div className={styles.barHeader}>
-                ref={exceedingRef}
+                <span className={styles.barLabelSuffix}>Exceeding</span>
-                className={`${styles.bar} ${styles.barExceeding}`}
+                <span className={styles.barLabel}>{exceedingPct.toFixed(0)}%</span>
-                data-width={exceedingPct}
+              </div>
-              />
+              <div className={styles.barTrack}>
-              <div className={styles.barLabel}>
+                <div
-                {exceedingPct.toFixed(0)}% <span className={styles.barLabelSuffix}>exceeding</span>
+                  ref={exceedingRef}
+                  className={`${styles.bar} ${styles.barExceeding}`}
+                  data-width={exceedingPct}
+                />
               </div>
             </div>
           )}

nextjs-app/components/SchoolHeroMap.module.css

@@ -0,0 +1,144 @@
+/* Preview band that blends into the hero title; expands to fullscreen.
+   isolation:isolate contains the map + fade + open-button z-indices (which
+   must beat Leaflet's internal panes) so they don't leak out and outrank the
+   header's Compare button. */
+.wrapper {
+    position: relative;
+    width: 100%;
+    height: 210px;
+    background: #dfe6e2;
+    isolation: isolate;
+}
+
+@media (max-width: 640px) {
+    .wrapper {
+        height: 150px;
+    }
+}
+
+/* Preview: move the OSM attribution off the bottom edge, where the school
+   title slides up under the fade — top-left is the band's only quiet corner
+   (Compare floats top-right). Fullscreen keeps Leaflet's default bottom-right,
+   since the zoom control occupies the top-left there. */
+.wrapper:not([data-fullscreen]) :global(.leaflet-bottom.leaflet-right) {
+    top: 0;
+    left: 0;
+    right: auto;
+    bottom: auto;
+}
+
+/* Fullscreen: the Fullscreen API promotes this element to fill the viewport. */
+.wrapper[data-fullscreen] {
+    height: 100vh;
+    height: 100dvh;
+    background: #fff;
+}
+
+/* Fallback fullscreen (iOS Safari — no Element.requestFullscreen): the API
+   can't promote the element, so pin it over the page ourselves. Above the
+   comparison toast (3000) and everything else except modals (9999+). */
+.wrapper[data-fs-fallback] {
+    position: fixed;
+    inset: 0;
+    z-index: 5000;
+}
+
+.skeleton {
+    width: 100%;
+    height: 100%;
+    background:
+        linear-gradient(100deg, rgba(255, 255, 255, 0) 40%, rgba(255, 255, 255, .5) 50%, rgba(255, 255, 255, 0) 60%) #e7e2da;
+    background-size: 200% 100%;
+    animation: shimmer 1.4s infinite;
+}
+
+@keyframes shimmer {
+    to { background-position: -200% 0; }
+}
+
+/* Full-band click target. Transparent so the map shows through; reveals a
+   hint pill on hover/focus. Sits above the map but below the header's fade
+   and Compare button (which carry higher stacking in the header). */
+.openBtn {
+    position: absolute;
+    inset: 0;
+    /* Above Leaflet's marker pane (600) so the whole band — pin included — is
+       one click target. Transparent, so map + pin still show through. */
+    z-index: 800;
+    width: 100%;
+    height: 100%;
+    padding: 0;
+    border: 0;
+    background: transparent;
+    cursor: pointer;
+    display: flex;
+    align-items: flex-end;
+    justify-content: center;
+}
+
+.openHint {
+    display: inline-flex;
+    align-items: center;
+    gap: 7px;
+    margin-bottom: 16px;
+    padding: 8px 14px;
+    border-radius: 999px;
+    font-size: 13px;
+    font-weight: 600;
+    color: var(--text-primary, #1a1612);
+    background: rgba(255, 255, 255, .85);
+    -webkit-backdrop-filter: blur(6px);
+    backdrop-filter: blur(6px);
+    box-shadow: 0 2px 10px rgba(0, 0, 0, .16);
+    opacity: 0;
+    transform: translateY(4px);
+    transition: opacity .16s ease, transform .16s ease;
+}
+
+.openBtn:hover .openHint,
+.openBtn:focus-visible .openHint {
+    opacity: 1;
+    transform: none;
+}
+
+/* Diffuse fade: map dissolves to the card background before the title. */
+.fade {
+    position: absolute;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    top: 33%;
+    /* Above Leaflet's tile (200) and overlay (400) panes so the gradient is
+       actually visible, but below the marker pane (600) so the pin stays crisp
+       on top of the blend. */
+    z-index: 450;
+    pointer-events: none;
+    background: linear-gradient(to bottom,
+            rgba(255, 255, 255, 0) 0%,
+            rgba(255, 255, 255, .35) 35%,
+            rgba(255, 255, 255, .75) 62%,
+            rgba(255, 255, 255, .95) 82%,
+            var(--bg-card, #fff) 100%);
+}
+
+.closeBtn {
+    position: absolute;
+    top: 0.75rem;
+    right: 0.75rem;
+    z-index: 1000;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 40px;
+    height: 40px;
+    border: none;
+    border-radius: 8px;
+    background: rgba(255, 255, 255, .92);
+    color: var(--text-primary, #1a1612);
+    cursor: pointer;
+    box-shadow: 0 2px 10px rgba(0, 0, 0, .2);
+}
+
+.closeBtn:hover {
+    background: #fff;
+}

nextjs-app/components/SchoolHeroMap.tsx

@@ -0,0 +1,102 @@
+/**
+ * SchoolHeroMap
+ * The location map that sits atop the school-detail hero. Shows a static
+ * preview (pin + tiles) that blends down into the title; the whole band — or
+ * the parent's "View on map" link, via the imperative `open()` handle — expands
+ * it to a fullscreen, interactive map.
+ */
+
+'use client';
+
+import dynamic from 'next/dynamic';
+import { forwardRef, useCallback, useEffect, useImperativeHandle, useRef, useState } from 'react';
+import styles from './SchoolHeroMap.module.css';
+
+const LeafletHeroMap = dynamic(() => import('./LeafletHeroMapInner'), {
+  ssr: false,
+  loading: () => <div className={styles.skeleton} aria-hidden="true" />,
+});
+
+export interface SchoolHeroMapHandle {
+  open: () => void;
+}
+
+interface SchoolHeroMapProps {
+  lat: number;
+  lng: number;
+}
+
+export const SchoolHeroMap = forwardRef<SchoolHeroMapHandle, SchoolHeroMapProps>(
+  function SchoolHeroMap({ lat, lng }, ref) {
+    const wrapperRef = useRef<HTMLDivElement>(null);
+    const [nativeFullscreen, setNativeFullscreen] = useState(false);
+    // iOS Safari has no Element.requestFullscreen — fall back to a
+    // fixed-position overlay driven by state instead of the Fullscreen API.
+    const [fallbackFullscreen, setFallbackFullscreen] = useState(false);
+    const isFullscreen = nativeFullscreen || fallbackFullscreen;
+
+    const open = useCallback(() => {
+      const el = wrapperRef.current;
+      if (!el) return;
+      if (el.requestFullscreen) {
+        el.requestFullscreen().catch(() => setFallbackFullscreen(true));
+      } else {
+        setFallbackFullscreen(true);
+      }
+    }, []);
+    const close = useCallback(() => {
+      if (document.fullscreenElement) document.exitFullscreen().catch(() => {});
+      setFallbackFullscreen(false);
+    }, []);
+
+    useImperativeHandle(ref, () => ({ open }), [open]);
+
+    useEffect(() => {
+      const onChange = () => setNativeFullscreen(!!document.fullscreenElement);
+      document.addEventListener('fullscreenchange', onChange);
+      return () => document.removeEventListener('fullscreenchange', onChange);
+    }, []);
+
+    // The fallback overlay sits on top of the page rather than replacing it,
+    // so lock body scroll while it is up.
+    useEffect(() => {
+      if (!fallbackFullscreen) return;
+      const prev = document.body.style.overflow;
+      document.body.style.overflow = 'hidden';
+      return () => { document.body.style.overflow = prev; };
+    }, [fallbackFullscreen]);
+
+    return (
+      <div
+        ref={wrapperRef}
+        className={styles.wrapper}
+        data-fullscreen={isFullscreen || undefined}
+        data-fs-fallback={fallbackFullscreen || undefined}
+      >
+        <LeafletHeroMap lat={lat} lng={lng} interactive={isFullscreen} />
+
+        {isFullscreen ? (
+          <button type="button" className={styles.closeBtn} onClick={close} aria-label="Close map">
+            <svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+              <path d="M18 6 6 18M6 6l12 12" />
+            </svg>
+          </button>
+        ) : (
+          <>
+            {/* Whole-band click target that opens the full map. */}
+            <button type="button" className={styles.openBtn} onClick={open} aria-label="Open full map">
+              <span className={styles.openHint}>
+                <svg viewBox="0 0 24 24" width="15" height="15" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+                  <path d="M15 3h6v6M9 21H3v-6M21 3l-7 7M3 21l7-7" />
+                </svg>
+                Open full map
+              </span>
+            </button>
+            {/* Diffuse blend into the hero body below. */}
+            <div className={styles.fade} aria-hidden="true" />
+          </>
+        )}
+      </div>
+    );
+  },
+);

nextjs-app/components/SchoolMap.module.css

@@ -7,6 +7,7 @@
 .mapWrapper.fullscreen {
   width: 100vw;
   height: 100vh;
+  height: 100dvh;
 }
 
 .fullscreenBtn {

nextjs-app/components/SchoolRow.module.css

@@ -66,12 +66,12 @@
 /* Phase label pill */
 .phaseLabel {
   display: inline-block;
-  padding: 0.0625rem 0.375rem;
+  padding: 0.0625rem 0.4rem;
-  font-size: 0.6875rem;
+  font-size: 0.75rem;
   font-weight: 600;
-  border-radius: 3px;
+  line-height: 1.4;
+  border-radius: 4px;
   white-space: nowrap;
-  margin-right: 0.25rem;
 }
 
 .phaseLabelPrimary    { background: var(--phase-primary-bg); color: var(--phase-primary-text); }
@@ -83,15 +83,21 @@
   display: flex;
   align-items: center;
   flex-wrap: wrap;
-  gap: 0;
+  gap: 0.35rem;
-  font-size: 0.8rem;
-  color: var(--text-muted, #8a847a);
 }
 
-.line2 span:not(:last-child)::after {
+/* Quiet chip — one shared size/weight for every attribute (Ages, faith, etc.);
-  content: '·';
+   the phase pill keeps its colour but matches this sizing. */
-  margin: 0 0.4rem;
+.attr {
-  color: var(--border-color, #e5dfd5);
+  display: inline-block;
+  padding: 0.0625rem 0.4rem;
+  font-size: 0.75rem;
+  font-weight: 600;
+  line-height: 1.4;
+  border-radius: 4px;
+  white-space: nowrap;
+  background: rgba(26, 22, 18, 0.05);
+  color: var(--text-secondary, #5c564d);
 }
 
 /* Line 3: stats */
@@ -195,13 +201,16 @@
 }
 
 .ofsted1 { background: var(--accent-teal-bg); color: var(--accent-teal, #2d7d7d); }
-.ofsted2 { background: rgba(60, 140, 60, 0.12); color: #3c8c3c; }
+.ofsted2 { background: rgba(60, 140, 60, 0.12); color: #2f7a2f; }
-.ofsted3 { background: var(--accent-gold-bg); color: #b8920e; }
+.ofsted3 { background: var(--accent-gold-bg); color: var(--accent-gold-text, #7a6800); }
 .ofsted4 { background: var(--accent-coral-bg); color: var(--accent-coral, #e07256); }
 
 /* ── Ofsted badge variants ──────────────────────────────────────────────── */
 /* ofsted1–4 already defined above; these cover the two new framework states */
 .ofstedRc      { background: #5a3a6e; color: #fff; }
+/* Inspected but with no overall grade (OEIF post-Sept-2024) — neutral slate,
+   distinct from the grey "Not yet inspected" pending state. */
+.ofstedInspected { background: #e6ecf2; color: #45586b; }
 .ofstedPending { background: #e0e0e0; color: #666; }
 
 /* ── vs-national delta line (under RWM metric) ──────────────────────────── */
@@ -225,8 +234,14 @@
     white-space: normal;
   }
 
+  /* Promote the headline metric onto its own line; secondary stats
+     (delta vs LA, pupils) wrap below with a visible row gap. */
   .line3 {
-    gap: 0 1rem;
+    row-gap: 0.25rem;
+    column-gap: 1rem;
+  }
+  .line3 > .stat:first-child {
+    flex-basis: 100%;
   }
 
   .rowActions {

nextjs-app/components/SchoolRow.tsx

@@ -9,7 +9,7 @@
  */
 
 import type { School } from '@/lib/types';
-import { formatPercentage, calculateTrend, getPhaseStyle, schoolUrl, buildOfstedListBadge } from '@/lib/utils';
+import { formatPercentage, calculateTrend, getPhaseStyle, schoolUrl, buildOfstedListBadge, formatAgeRange } from '@/lib/utils';
 import styles from './SchoolRow.module.css';
 
 interface SchoolRowProps {
@@ -74,10 +74,10 @@ export function SchoolRow({
               {phase.label}
             </span>
           )}
-          {school.school_type && <span>{school.school_type}</span>}
+          {school.school_type && <span className={styles.attr}>{school.school_type}</span>}
-          {school.age_range && <span>{school.age_range}</span>}
+          {school.age_range && <span className={styles.attr}>{formatAgeRange(school.age_range)}</span>}
-          {showDenomination && <span>{school.religious_denomination}</span>}
+          {showDenomination && <span className={styles.attr}>{school.religious_denomination}</span>}
-          {showGender && <span>{school.gender}</span>}
+          {showGender && <span className={styles.attr}>{school.gender}</span>}
         </div>
 
         {/* Line 3: Key stats */}

nextjs-app/components/SchoolSearchModal.tsx

@@ -10,6 +10,7 @@ import { Modal } from "./Modal";
 import { useComparison } from "@/hooks/useComparison";
 import { debounce } from "@/lib/utils";
 import { fetchSchools } from "@/lib/api";
+import { track } from "@/lib/analytics";
 import type { School } from "@/lib/types";
 import styles from "./SchoolSearchModal.module.css";
 
@@ -60,6 +61,11 @@ export function SchoolSearchModal({ isOpen, onClose }: SchoolSearchModalProps) {
 
   const handleAddSchool = (school: School) => {
     addSchool(school);
+    track('compare_school_added', {
+      urn: school.urn,
+      from: 'compare',
+      selection_count_after: selectedSchools.length + 1,
+    });
     // Don't close modal, allow adding multiple schools
   };
 

nextjs-app/components/SecondarySchoolDetailView.tsx

@@ -6,20 +6,26 @@
 
 'use client';
 
-import { useEffect, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import { useRouter } from 'next/navigation';
+import dynamic from 'next/dynamic';
 import { useComparison } from '@/hooks/useComparison';
-import { PerformanceChart } from './PerformanceChart';
 import { MetricTooltip } from './MetricTooltip';
-import { SchoolMap } from './SchoolMap';
+import { SchoolHeroMap, type SchoolHeroMapHandle } from './SchoolHeroMap';
+
+const PerformanceChart = dynamic(
+  () => import('./PerformanceChart').then((m) => m.PerformanceChart),
+  { ssr: false },
+);
 import type {
   School, SchoolResult, AbsenceData,
-  OfstedInspection, OfstedParentView, SchoolCensus,
+  OfstedInspection, SchoolCensus,
   SchoolAdmissions, SenDetail, Phonics,
   SchoolDeprivation, SchoolFinance, NationalAverages,
 } from '@/lib/types';
-import { formatPercentage, formatProgress, formatAcademicYear, buildOfstedHeroChip } from '@/lib/utils';
+import { formatPercentage, formatProgress, formatAcademicYear, formatAgeRange } from '@/lib/utils';
 import { DeltaChip } from './DeltaChip';
+import { track, getNavigationSource } from '@/lib/analytics';
 import styles from './SecondarySchoolDetailView.module.css';
 
 const OFSTED_LABELS: Record<number, string> = {
@@ -59,7 +65,6 @@ interface SecondarySchoolDetailViewProps {
   yearlyData: SchoolResult[];
   absenceData: AbsenceData | null;
   ofsted: OfstedInspection | null;
-  parentView: OfstedParentView | null;
   census: SchoolCensus | null;
   admissions: SchoolAdmissions | null;
   senDetail: SenDetail | null;
@@ -70,9 +75,11 @@ interface SecondarySchoolDetailViewProps {
 
 export function SecondarySchoolDetailView({
   schoolInfo, yearlyData,
-  ofsted, parentView, admissions, senDetail, deprivation, finance, absenceData,
+  ofsted, census, admissions, senDetail, deprivation, finance, absenceData,
 }: SecondarySchoolDetailViewProps) {
   const router = useRouter();
+  // Hero map — the "View on map" link opens its fullscreen view.
+  const heroMapRef = useRef<SchoolHeroMapHandle>(null);
   const { addSchool, removeSchool, isSelected } = useComparison();
   const isInComparison = isSelected(schoolInfo.urn);
 
@@ -93,7 +100,6 @@ export function SecondarySchoolDetailView({
 
   const hasSixthForm = schoolInfo.age_range?.includes('18') ?? false;
   const hasFinance = finance != null && finance.per_pupil_spend != null;
-  const hasParents = parentView != null && parentView.total_responses != null && parentView.total_responses > 0;
   const hasDeprivation = deprivation != null && deprivation.idaci_decile != null;
   const hasLocation = schoolInfo.latitude != null && schoolInfo.longitude != null;
   const hasWellbeing = (latestResults?.sen_support_pct != null || latestResults?.sen_ehcp_pct != null) || hasDeprivation;
@@ -111,21 +117,48 @@ export function SecondarySchoolDetailView({
   const handleComparisonToggle = () => {
     if (isInComparison) {
       removeSchool(schoolInfo.urn);
+      track('compare_school_removed', { urn: schoolInfo.urn, from: 'detail' });
     } else {
       addSchool(schoolInfo);
+      track('compare_school_added', { urn: schoolInfo.urn, from: 'detail' });
     }
   };
 
-  // Build nav items dynamically based on available data
+  // Back returns wherever the user came from; deep-links fall back to search
+  // so the button never dead-ends or leaves the site.
+  const handleBack = () => {
+    if (typeof window !== 'undefined' && window.history.length > 1) {
+      router.back();
+    } else {
+      router.push('/search');
+    }
+  };
+
+  const scrollToTop = () => {
+    if (typeof window !== 'undefined') window.scrollTo({ top: 0, behavior: 'smooth' });
+  };
+
+  useEffect(() => {
+    track('school_viewed', {
+      urn: schoolInfo.urn,
+      phase: schoolInfo.phase || 'secondary',
+      local_authority: schoolInfo.local_authority || 'unknown',
+      from: getNavigationSource(),
+    });
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [schoolInfo.urn]);
+
+  // Build nav items dynamically based on available data.
+  // Engagement-led order (matches the primary page): recognised Ofsted badge,
+  // then the most-sought sections — results, admissions, history — with the
+  // experience and context sections following.
   const navItems: { id: string; label: string }[] = [];
   if (ofsted) navItems.push({ id: 'ofsted', label: 'Ofsted' });
-  if (hasParents) navItems.push({ id: 'parents', label: 'Parents' });
   if (hasResults) navItems.push({ id: 'gcse', label: 'GCSEs' });
   if (admissions) navItems.push({ id: 'admissions', label: 'Admissions' });
-  if (hasWellbeing) navItems.push({ id: 'wellbeing', label: 'Wellbeing' });
-  if (hasLocation) navItems.push({ id: 'location', label: 'Location' });
-  if (hasFinance) navItems.push({ id: 'finances', label: 'Finances' });
   if (yearlyData.length > 1) navItems.push({ id: 'history', label: 'History' });
+  if (hasWellbeing) navItems.push({ id: 'wellbeing', label: 'Wellbeing' });
+  if (hasFinance) navItems.push({ id: 'finances', label: 'Finances' });
 
   // Track active section as user scrolls
   useEffect(() => {
@@ -165,16 +198,22 @@ export function SecondarySchoolDetailView({
     return subs.length >= 3 && subs.every(v => v === ofsted.overall_effectiveness);
   })();
 
-  // ── Hero signal chip & stats ─────────────────────────────────────────
+  // National Attainment 8 baseline for the "Results Over Time" chart.
-  const ofstedHeroChip = buildOfstedHeroChip(ofsted);
-  const heroAtt8 = latestResults?.attainment_8_score ?? null;
   const heroAtt8Nat = secondaryAvg.attainment_8_score ?? null;
-  const heroAcademicYear = latestResults ? formatAcademicYear(latestResults.year) : '';
 
   return (
     <div className={styles.container}>
-      {/* ── Header ─────────────────────────────────────── */}
+      {/* Standalone back link, above the header — returns wherever the user
-      <header className={styles.header}>
+          came from. Scrolls away; the sticky bar keeps a "back to top" control. */}
+      <button type="button" onClick={handleBack} className={styles.topBack}>
+        <span aria-hidden="true">←</span> Back
+      </button>
+
+      {/* ── Header — the location map band blends into the school title ── */}
+      <header className={`${styles.header}${hasLocation ? ` ${styles.headerHasMap}` : ''}`}>
+        {hasLocation && (
+          <SchoolHeroMap ref={heroMapRef} lat={schoolInfo.latitude!} lng={schoolInfo.longitude!} />
+        )}
         <div className={styles.headerContent}>
           <div className={styles.titleSection}>
             <h1 className={styles.schoolName}>{schoolInfo.school_name}</h1>
@@ -186,7 +225,7 @@ export function SecondarySchoolDetailView({
                 <span className={styles.badge}>{schoolInfo.gender}&apos;s school</span>
               )}
               {schoolInfo.age_range && (
-                <span className={styles.badge}>{schoolInfo.age_range}</span>
+                <span className={styles.badge}>{formatAgeRange(schoolInfo.age_range)}</span>
               )}
               {hasSixthForm && (
                 <span className={styles.badge}>Sixth form</span>
@@ -200,6 +239,18 @@ export function SecondarySchoolDetailView({
             {schoolInfo.address && (
               <p className={styles.address}>
                 {schoolInfo.address}{schoolInfo.postcode && `, ${schoolInfo.postcode}`}
+                {hasLocation && (
+                  <>
+                    {' · '}
+                    <button
+                      type="button"
+                      className={styles.mapLink}
+                      onClick={() => { heroMapRef.current?.open(); track('section_nav_used', { section: 'location', via: 'hero_link' }); }}
+                    >
+                      View on map ↗
+                    </button>
+                  </>
+                )}
               </p>
             )}
             <div className={styles.headerDetails}>
@@ -210,7 +261,13 @@ export function SecondarySchoolDetailView({
               )}
               {schoolInfo.website && (
                 <span className={styles.headerDetail}>
-                  <a href={/^https?:\/\//i.test(schoolInfo.website) ? schoolInfo.website : `https://${schoolInfo.website}`} target="_blank" rel="noopener noreferrer">
+                  <a
+                    href={/^https?:\/\//i.test(schoolInfo.website) ? schoolInfo.website : `https://${schoolInfo.website}`}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    data-umami-event="external_link_clicked"
+                    data-umami-event-target="school_website"
+                  >
                     School website ↗
                   </a>
                 </span>
@@ -232,92 +289,31 @@ export function SecondarySchoolDetailView({
             <button
               onClick={handleComparisonToggle}
               className={isInComparison ? styles.btnRemove : styles.btnAdd}
+              aria-label={isInComparison ? 'In comparison' : 'Add to compare'}
             >
-              {isInComparison ? '✓ In Comparison' : '+ Add to Compare'}
+              {/* On phones the map hero shows only the glyph (nav-bar style). */}
+              <span className={styles.btnCompareLabel}>
+                {isInComparison ? '✓ In Comparison' : '+ Add to Compare'}
+              </span>
+              <span className={styles.btnCompareGlyph} aria-hidden="true">
+                {isInComparison ? '✓' : '+'}
+              </span>
             </button>
           </div>
         </div>
-
-        {/* Hero signal chips */}
-        <div className={styles.heroChips}>
-          <div className={`${styles.heroChip} ${styles[`tone-${ofstedHeroChip.tone}`]}`}>
-            <div className={styles.heroChipTitle}>{ofstedHeroChip.title}</div>
-            <div className={styles.heroChipSub}>{ofstedHeroChip.subtitle}</div>
-            {ofstedHeroChip.detail && (
-              <div className={styles.heroChipDetail}>{ofstedHeroChip.detail}</div>
-            )}
-          </div>
-
-          {admissions?.oversubscribed && (
-            <div className={`${styles.heroChip} ${styles['tone-coral']}`}>
-              <div className={styles.heroChipTitle}>Oversubscribed</div>
-              <div className={styles.heroChipSub}>
-                {admissions.first_preference_offer_pct != null
-                  ? `${Math.round(admissions.first_preference_offer_pct)}% of first-choice applicants offered a place`
-                  : 'More applicants than places'}
-              </div>
-            </div>
-          )}
-        </div>
-
-        {/* At-a-glance stats row */}
-        {latestResults && (
-          <div className={styles.heroStats}>
-            {heroAtt8 != null && (
-              <div className={styles.heroStat}>
-                <div className={styles.heroStatNumber}>{heroAtt8.toFixed(1)}</div>
-                <div className={styles.heroStatLabel}>Attainment 8 score</div>
-                {heroAtt8Nat != null && (
-                  <DeltaChip value={heroAtt8} baseline={heroAtt8Nat} unit="pts" suffix="vs national" />
-                )}
-              </div>
-            )}
-
-            {ofsted && (
-              <div className={styles.heroStat}>
-                <div className={`${styles.heroStatNumberSerif} ${styles[`tone-${ofstedHeroChip.tone}`]}`}>
-                  {ofstedHeroChip.state === 'oeif'
-                    ? ofstedHeroChip.title.replace(/^Ofsted\s+/, '')
-                    : ofstedHeroChip.state === 'reportCard'
-                      ? 'Report Card'
-                      : '—'}
-                </div>
-                <div className={styles.heroStatLabel}>{ofstedHeroChip.subtitle}</div>
-                {ofstedHeroChip.detail && (
-                  <div className={styles.heroStatFoot}>{ofstedHeroChip.detail}</div>
-                )}
-              </div>
-            )}
-
-            {admissions?.first_preference_offer_pct != null && (
-              <div className={styles.heroStat}>
-                <div className={styles.heroStatNumber}>
-                  {Math.round(admissions.first_preference_offer_pct)}%
-                </div>
-                <div className={styles.heroStatLabel}>First-choice offer rate</div>
-                {admissions.oversubscribed && (
-                  <div className={styles.heroStatFoot}>Oversubscribed</div>
-                )}
-              </div>
-            )}
-          </div>
-        )}
-
-        {heroAcademicYear && (
-          <p className={styles.heroDataNote}>Latest data: {heroAcademicYear}</p>
-        )}
       </header>
 
       {/* ── Sticky section navigation ─────────────────────── */}
       <nav className={styles.tabNav} aria-label="Page sections">
         <div className={styles.tabNavInner}>
-          <button onClick={() => router.back()} className={styles.backBtn}>← Back</button>
+          <button onClick={scrollToTop} className={styles.backBtn} aria-label="Back to top">↑ Top</button>
           {navItems.length > 0 && <div className={styles.tabNavDivider} />}
           {navItems.map(({ id, label }) => (
             <a
               key={id}
               href={`#${id}`}
               className={`${styles.tabBtn}${activeSection === id ? ` ${styles.tabBtnActive}` : ''}`}
+              onClick={() => track('section_nav_used', { section: id })}
             >
               {label}
             </a>
@@ -336,12 +332,14 @@ export function SecondarySchoolDetailView({
               </span>
             )}
             <a
-              href={`https://reports.ofsted.gov.uk/provider/21/${schoolInfo.urn}`}
+              href={`https://reports.ofsted.gov.uk/inspection-reports/find-inspection-report/provider/ELS/${schoolInfo.urn}`}
               target="_blank"
               rel="noopener noreferrer"
               className={styles.ofstedReportLink}
+              data-umami-event="external_link_clicked"
+              data-umami-event-target="ofsted"
             >
-              Full report ↗
+              Ofsted reports ↗
             </a>
           </h2>
           {ofsted.framework === 'ReportCard' ? (
@@ -434,47 +432,6 @@ export function SecondarySchoolDetailView({
               </div>
             </>
           )}
-          {hasParents && (
-            <p className={styles.parentRecommendLine}>
-              <strong>{Math.round(parentView!.q_recommend_pct!)}%</strong> of parents would recommend this school ({parentView!.total_responses!.toLocaleString()} responses)
-            </p>
-          )}
-        </section>
-      )}
-
-      {/* ── Parent View ────────────────────────────────── */}
-      {hasParents && parentView && (
-        <section id="parents" className={styles.card}>
-          <h2 className={styles.sectionTitle}>
-            What Parents Say
-            <span className={styles.responseBadge}>
-              {parentView.total_responses!.toLocaleString()} responses
-            </span>
-          </h2>
-          <p className={styles.sectionSubtitle}>
-            From the Ofsted Parent View survey — parents share their experience of this school.
-          </p>
-          <div className={styles.parentViewGrid}>
-            {[
-              { label: 'Would recommend this school', pct: parentView.q_recommend_pct },
-              { label: 'My child is happy here', pct: parentView.q_happy_pct },
-              { label: 'My child feels safe here', pct: parentView.q_safe_pct },
-              { label: 'Teaching is good', pct: parentView.q_teaching_pct },
-              { label: 'My child makes good progress', pct: parentView.q_progress_pct },
-              { label: 'School looks after pupils\' wellbeing', pct: parentView.q_wellbeing_pct },
-              { label: 'Behaviour is well managed', pct: parentView.q_behaviour_pct },
-              { label: 'School deals well with bullying', pct: parentView.q_bullying_pct },
-              { label: 'Communicates well with parents', pct: parentView.q_communication_pct },
-            ].filter(q => q.pct != null).map(({ label, pct }) => (
-              <div key={label} className={styles.parentViewRow}>
-                <span className={styles.parentViewLabel}>{label}</span>
-                <div className={styles.parentViewBar}>
-                  <div className={styles.parentViewFill} style={{ width: `${pct}%` }} />
-                </div>
-                <span className={styles.parentViewPct}>{Math.round(pct!)}%</span>
-              </div>
-            ))}
-          </div>
         </section>
       )}
 
@@ -494,61 +451,153 @@ export function SecondarySchoolDetailView({
             </div>
           )}
 
-          <div className={styles.metricsGrid}>
+          {/* Hero stat cards — top GCSE metrics */}
+          <div className={styles.heroStatGrid}>
             {latestResults.attainment_8_score != null && (
-              <div className={styles.metricCard}>
+              <div className={styles.heroStatCard}>
-                <div className={styles.metricLabel}>
+                <div className={styles.heroStatLabel}>
-                  Attainment 8
+                  Attainment 8 score
                   <MetricTooltip metricKey="attainment_8_score" />
                 </div>
-                <div className={styles.metricValue}>{latestResults.attainment_8_score.toFixed(1)}</div>
+                <div className={styles.heroStatValue}>
+                  {latestResults.attainment_8_score.toFixed(1)}
+                  {secondaryAvg.attainment_8_score != null && (
+                    <DeltaChip
+                      value={latestResults.attainment_8_score}
+                      baseline={secondaryAvg.attainment_8_score}
+                      unit="pts"
+                      size="sm"
+                    />
+                  )}
+                </div>
                 {secondaryAvg.attainment_8_score != null && (
-                  <div className={styles.metricHint}>National avg: {secondaryAvg.attainment_8_score.toFixed(1)}</div>
+                  <div className={styles.heroStatHint}>National avg: {secondaryAvg.attainment_8_score.toFixed(1)}</div>
                 )}
               </div>
             )}
             {latestResults.progress_8_score != null && (
-              <div className={styles.metricCard}>
+              <div className={styles.heroStatCard}>
-                <div className={styles.metricLabel}>
+                <div className={styles.heroStatLabel}>
-                  Progress 8
+                  Progress 8 score
                   <MetricTooltip metricKey="progress_8_score" />
                 </div>
-                <div className={`${styles.metricValue} ${progressClass(latestResults.progress_8_score, styles)}`}>
+                <div className={`${styles.heroStatValue} ${progressClass(latestResults.progress_8_score, styles)}`}>
                   {formatProgress(latestResults.progress_8_score)}
                 </div>
-                {(latestResults.progress_8_lower_ci != null || latestResults.progress_8_upper_ci != null) && (
+                {(latestResults.progress_8_lower_ci != null && latestResults.progress_8_upper_ci != null) ? (
-                  <div className={styles.metricHint}>
+                  <div className={styles.heroStatHint}>
-                    CI: {latestResults.progress_8_lower_ci?.toFixed(2) ?? '?'} to {latestResults.progress_8_upper_ci?.toFixed(2) ?? '?'}
+                    CI: {latestResults.progress_8_lower_ci.toFixed(2)} to {latestResults.progress_8_upper_ci.toFixed(2)}
                   </div>
-                )}
+                ) : (
-              </div>
+                  <div className={styles.heroStatHint}>National baseline: 0.0</div>
-            )}
-            {latestResults.english_maths_standard_pass_pct != null && (
-              <div className={styles.metricCard}>
-                <div className={styles.metricLabel}>
-                  English &amp; Maths Grade 4+
-                  <MetricTooltip metricKey="english_maths_standard_pass_pct" />
-                </div>
-                <div className={styles.metricValue}>{formatPercentage(latestResults.english_maths_standard_pass_pct)}</div>
-                {secondaryAvg.english_maths_standard_pass_pct != null && (
-                  <div className={styles.metricHint}>National avg: {secondaryAvg.english_maths_standard_pass_pct.toFixed(0)}%</div>
                 )}
               </div>
             )}
             {latestResults.english_maths_strong_pass_pct != null && (
-              <div className={styles.metricCard}>
+              <div className={styles.heroStatCard}>
-                <div className={styles.metricLabel}>
+                <div className={styles.heroStatLabel}>
                   English &amp; Maths Grade 5+
                   <MetricTooltip metricKey="english_maths_strong_pass_pct" />
                 </div>
-                <div className={styles.metricValue}>{formatPercentage(latestResults.english_maths_strong_pass_pct)}</div>
+                <div className={styles.heroStatValue}>
+                  {formatPercentage(latestResults.english_maths_strong_pass_pct)}
+                  {secondaryAvg.english_maths_strong_pass_pct != null && (
+                    <DeltaChip
+                      value={latestResults.english_maths_strong_pass_pct}
+                      baseline={secondaryAvg.english_maths_strong_pass_pct}
+                      unit="pts"
+                      size="sm"
+                    />
+                  )}
+                </div>
                 {secondaryAvg.english_maths_strong_pass_pct != null && (
-                  <div className={styles.metricHint}>National avg: {secondaryAvg.english_maths_strong_pass_pct.toFixed(0)}%</div>
+                  <div className={styles.heroStatHint}>National avg: {secondaryAvg.english_maths_strong_pass_pct.toFixed(0)}%</div>
+                )}
+              </div>
+            )}
+            {latestResults.english_maths_standard_pass_pct != null && (
+              <div className={styles.heroStatCard}>
+                <div className={styles.heroStatLabel}>
+                  English &amp; Maths Grade 4+
+                  <MetricTooltip metricKey="english_maths_standard_pass_pct" />
+                </div>
+                <div className={styles.heroStatValue}>
+                  {formatPercentage(latestResults.english_maths_standard_pass_pct)}
+                  {secondaryAvg.english_maths_standard_pass_pct != null && (
+                    <DeltaChip
+                      value={latestResults.english_maths_standard_pass_pct}
+                      baseline={secondaryAvg.english_maths_standard_pass_pct}
+                      unit="pts"
+                      size="sm"
+                    />
+                  )}
+                </div>
+                {secondaryAvg.english_maths_standard_pass_pct != null && (
+                  <div className={styles.heroStatHint}>National avg: {secondaryAvg.english_maths_standard_pass_pct.toFixed(0)}%</div>
                 )}
               </div>
             )}
           </div>
 
+          {/* Attainment 8 visual bar (0–80 scale) */}
+          {latestResults.attainment_8_score != null && (
+            <div className={styles.att8Viz}>
+              <div className={styles.att8VizLabel}>Attainment 8 — school vs national</div>
+              <div className={styles.att8VizTrack}>
+                <div
+                  className={styles.att8VizFill}
+                  style={{ width: `${Math.min((latestResults.attainment_8_score / 80) * 100, 100)}%` }}
+                />
+                {secondaryAvg.attainment_8_score != null && (
+                  <div
+                    className={styles.att8VizNatLine}
+                    style={{ left: `${(secondaryAvg.attainment_8_score / 80) * 100}%` }}
+                  >
+                    <div className={styles.att8VizNatPill}>
+                      Nat avg {secondaryAvg.attainment_8_score.toFixed(1)}
+                    </div>
+                  </div>
+                )}
+              </div>
+              <div className={styles.att8VizTicks}>
+                <span>0</span><span>20</span><span>40</span><span>60</span><span>80</span>
+              </div>
+            </div>
+          )}
+
+          {/* Progress 8 number line with CI */}
+          {latestResults.progress_8_score != null && !p8Suspended && (
+            <div className={styles.p8Viz}>
+              <div className={styles.p8VizLabel}>Progress 8 — relative to national baseline (0)</div>
+              {(() => {
+                const p8 = latestResults.progress_8_score!;
+                const lo = latestResults.progress_8_lower_ci ?? p8;
+                const hi = latestResults.progress_8_upper_ci ?? p8;
+                const range = 6; // −3 to +3
+                const toX = (v: number) => `${Math.min(Math.max(((v + 3) / range) * 100, 0), 100)}%`;
+                return (
+                  <div className={styles.p8VizTrack}>
+                    {/* CI band */}
+                    <div
+                      className={styles.p8VizCi}
+                      style={{ left: toX(lo), width: `calc(${toX(hi)} - ${toX(lo)})` }}
+                    />
+                    {/* Zero line */}
+                    <div className={styles.p8VizZero} style={{ left: toX(0) }} />
+                    {/* Score dot */}
+                    <div
+                      className={`${styles.p8VizDot} ${p8 < 0 ? styles.p8VizDotNeg : ''}`}
+                      style={{ left: toX(p8) }}
+                    />
+                  </div>
+                );
+              })()}
+              <div className={styles.p8VizTicks}>
+                <span>−3</span><span>−2</span><span>−1</span><span>0</span><span>+1</span><span>+2</span><span>+3</span>
+              </div>
+            </div>
+          )}
+
           {/* Progress 8 component breakdown */}
           {(latestResults.progress_8_english != null || latestResults.progress_8_maths != null ||
             latestResults.progress_8_ebacc != null || latestResults.progress_8_open != null) && (
@@ -608,21 +657,6 @@ export function SecondarySchoolDetailView({
             </>
           )}
 
-          {/* Performance chart */}
-          {yearlyData.length > 0 && (
-            <>
-              <h3 className={styles.subSectionTitle} style={{ marginTop: '1.25rem' }}>Results Over Time</h3>
-              <div className={styles.chartContainer}>
-                <PerformanceChart
-                  data={yearlyData}
-                  schoolName={schoolInfo.school_name}
-                  isSecondary={true}
-                  nationalAtt8Avg={heroAtt8Nat}
-                  nationalByYear={nationalAvg?.by_year}
-                />
-              </div>
-            </>
-          )}
         </section>
       )}
 
@@ -641,10 +675,10 @@ export function SecondarySchoolDetailView({
           )}
 
           <div className={styles.metricsGrid}>
-            {admissions.published_admission_number != null && (
+            {admissions.places_offered != null && (
               <div className={styles.metricCard}>
-                <div className={styles.metricLabel}>Year 7 places per year (PAN)</div>
+                <div className={styles.metricLabel}>Year 7 places offered</div>
-                <div className={styles.metricValue}>{admissions.published_admission_number}</div>
+                <div className={styles.metricValue}>{admissions.places_offered}</div>
               </div>
             )}
             {admissions.total_applications != null && (
@@ -686,6 +720,53 @@ export function SecondarySchoolDetailView({
         </section>
       )}
 
+      {/* ── History table ──────────────────────────────── */}
+      {yearlyData.length > 1 && (
+        <section id="history" className={styles.card}>
+          <h2 className={styles.sectionTitle}>Historical Results</h2>
+          {yearlyData.length > 0 && (
+            <>
+              <h3 className={styles.subSectionTitle} style={{ marginTop: '1.25rem' }}>Results Over Time</h3>
+              <div className={styles.chartContainer}>
+                <PerformanceChart
+                  data={yearlyData}
+                  schoolName={schoolInfo.school_name}
+                  isSecondary={true}
+                  nationalAtt8Avg={heroAtt8Nat}
+                  nationalByYear={nationalAvg?.by_year}
+                />
+              </div>
+            </>
+          )}
+          <details className={styles.historyDisclosure}>
+            <summary className={styles.historyToggle}>View raw year-by-year data</summary>
+            <div className={styles.tableWrapper}>
+              <table className={styles.dataTable}>
+                <thead>
+                  <tr>
+                    <th>Year</th>
+                    <th>Attainment 8</th>
+                    <th>Progress 8</th>
+                    <th>Eng &amp; Maths 4+</th>
+                    <th>EBacc entry %</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  {yearlyData.map((result) => (
+                    <tr key={result.year}>
+                      <td className={styles.yearCell}>{formatAcademicYear(result.year)}</td>
+                      <td>{result.attainment_8_score != null ? result.attainment_8_score.toFixed(1) : '-'}</td>
+                      <td>{result.progress_8_score != null ? formatProgress(result.progress_8_score) : '-'}</td>
+                      <td>{result.english_maths_standard_pass_pct != null ? formatPercentage(result.english_maths_standard_pass_pct) : '-'}</td>
+                      <td>{result.ebacc_entry_pct != null ? formatPercentage(result.ebacc_entry_pct) : '-'}</td>
+                    </tr>
+                  ))}
+                </tbody>
+              </table>
+            </div>
+          </details>
+        </section>
+      )}
       {/* ── Wellbeing ──────────────────────────────────── */}
       {hasWellbeing && (
         <section id="wellbeing" className={styles.card}>
@@ -695,36 +776,64 @@ export function SecondarySchoolDetailView({
           {(latestResults?.sen_support_pct != null || latestResults?.sen_ehcp_pct != null) && (
             <>
               <h3 className={styles.subSectionTitle}>Special Educational Needs (SEN)</h3>
-              <div className={styles.metricsGrid}>
+              <div className={styles.heroStatGrid}>
                 {latestResults?.sen_support_pct != null && (
-                  <div className={styles.metricCard}>
+                  <div className={styles.heroStatCard}>
-                    <div className={styles.metricLabel}>
+                    <div className={styles.heroStatLabel}>
-                      Pupils receiving SEN support
+                      SEN support
                       <MetricTooltip metricKey="sen_support_pct" />
                     </div>
-                    <div className={styles.metricValue}>{formatPercentage(latestResults.sen_support_pct)}</div>
+                    <div className={styles.heroStatValue}>{formatPercentage(latestResults.sen_support_pct)}</div>
-                    <div className={styles.metricHint}>SEN support without an EHCP</div>
+                    <div className={styles.heroStatHint}>Without an EHCP</div>
                   </div>
                 )}
                 {latestResults?.sen_ehcp_pct != null && (
-                  <div className={styles.metricCard}>
+                  <div className={styles.heroStatCard}>
-                    <div className={styles.metricLabel}>
+                    <div className={styles.heroStatLabel}>
-                      Pupils with an EHCP
+                      Pupils with EHCP
                       <MetricTooltip metricKey="sen_ehcp_pct" />
                     </div>
-                    <div className={styles.metricValue}>{formatPercentage(latestResults.sen_ehcp_pct)}</div>
+                    <div className={styles.heroStatValue}>{formatPercentage(latestResults.sen_ehcp_pct)}</div>
-                    <div className={styles.metricHint}>Education, Health and Care Plan</div>
+                    <div className={styles.heroStatHint}>Education, Health and Care Plan</div>
-                  </div>
-                )}
-                {(schoolInfo.total_pupils != null || latestResults?.total_pupils != null) && (
-                  <div className={styles.metricCard}>
-                    <div className={styles.metricLabel}>Total pupils</div>
-                    <div className={styles.metricValue}>{(schoolInfo.total_pupils ?? latestResults!.total_pupils!).toLocaleString()}</div>
-                    {schoolInfo.capacity != null && (
-                      <div className={styles.metricHint}>Capacity: {schoolInfo.capacity}</div>
-                    )}
                   </div>
                 )}
+                {(() => {
+                  const total = census?.total_pupils ?? schoolInfo.total_pupils ?? latestResults?.total_pupils ?? null;
+                  if (total == null) return null;
+                  const female = census?.female_pupils ?? null;
+                  const male = census?.male_pupils ?? null;
+                  const isMixed = schoolInfo.gender === 'Mixed' || schoolInfo.gender == null;
+                  const hasSplit = isMixed && female != null && male != null && female + male > 0;
+                  const sum = hasSplit ? female! + male! : 0;
+                  const girlsPct = hasSplit ? Math.round((female! / sum) * 100) : 0;
+                  const boysPct = hasSplit ? 100 - girlsPct : 0;
+                  return (
+                    <div className={styles.heroStatCard}>
+                      <div className={styles.heroStatLabel}>Total pupils</div>
+                      <div className={styles.heroStatValue}>{total.toLocaleString()}</div>
+                      {hasSplit && (
+                        <>
+                          <div
+                            className={styles.genderBar}
+                            role="img"
+                            aria-label={`Gender split: ${girlsPct}% girls, ${boysPct}% boys`}
+                          >
+                            <span className={styles.genderBarGirls} style={{ width: `${girlsPct}%` }} />
+                            <span className={styles.genderBarBoys} style={{ width: `${boysPct}%` }} />
+                          </div>
+                          <div className={styles.genderSplitHint}>
+                            <span className={styles.genderSplitGirls}>{girlsPct}% girls</span>
+                            <span className={styles.genderSplitSep}> · </span>
+                            <span className={styles.genderSplitBoys}>{boysPct}% boys</span>
+                          </div>
+                        </>
+                      )}
+                      {schoolInfo.capacity != null && !hasSplit && (
+                        <div className={styles.heroStatHint}>Capacity: {schoolInfo.capacity}</div>
+                      )}
+                    </div>
+                  );
+                })()}
               </div>
             </>
           )}
@@ -755,20 +864,6 @@ export function SecondarySchoolDetailView({
         </section>
       )}
 
-      {/* ── Location ───────────────────────────────────── */}
-      {hasLocation && (
-        <section id="location" className={styles.card}>
-          <h2 className={styles.sectionTitle}>Location</h2>
-          <div className={styles.mapContainer}>
-            <SchoolMap
-              schools={[schoolInfo]}
-              center={[schoolInfo.latitude!, schoolInfo.longitude!]}
-              zoom={15}
-            />
-          </div>
-        </section>
-      )}
-
       {/* ── Finances ───────────────────────────────────── */}
       {hasFinance && finance && (
         <section id="finances" className={styles.card}>
@@ -804,36 +899,6 @@ export function SecondarySchoolDetailView({
         </section>
       )}
 
-      {/* ── History table ──────────────────────────────── */}
-      {yearlyData.length > 1 && (
-        <section id="history" className={styles.card}>
-          <h2 className={styles.sectionTitle}>Historical Results</h2>
-          <div className={styles.tableWrapper}>
-            <table className={styles.dataTable}>
-              <thead>
-                <tr>
-                  <th>Year</th>
-                  <th>Attainment 8</th>
-                  <th>Progress 8</th>
-                  <th>Eng &amp; Maths 4+</th>
-                  <th>EBacc entry %</th>
-                </tr>
-              </thead>
-              <tbody>
-                {yearlyData.map((result) => (
-                  <tr key={result.year}>
-                    <td className={styles.yearCell}>{formatAcademicYear(result.year)}</td>
-                    <td>{result.attainment_8_score != null ? result.attainment_8_score.toFixed(1) : '-'}</td>
-                    <td>{result.progress_8_score != null ? formatProgress(result.progress_8_score) : '-'}</td>
-                    <td>{result.english_maths_standard_pass_pct != null ? formatPercentage(result.english_maths_standard_pass_pct) : '-'}</td>
-                    <td>{result.ebacc_entry_pct != null ? formatPercentage(result.ebacc_entry_pct) : '-'}</td>
-                  </tr>
-                ))}
-              </tbody>
-            </table>
-          </div>
-        </section>
-      )}
     </div>
   );
 }

nextjs-app/components/SecondarySchoolRow.module.css

@@ -68,15 +68,21 @@
   display: flex;
   align-items: center;
   flex-wrap: wrap;
-  gap: 0.25rem 0;
+  gap: 0.35rem;
-  font-size: 0.8rem;
-  color: var(--text-muted, #8a847a);
 }
 
-.line2 > span:not(.provisionTag):not(:last-child)::after {
+/* Quiet chip — one shared size/weight for every attribute (Ages, type, etc.);
-  content: '·';
+   the phase pill keeps its colour but matches this sizing. */
-  margin: 0 0.4rem;
+.attr {
-  color: var(--border-color, #e5dfd5);
+  display: inline-block;
+  padding: 0.0625rem 0.4rem;
+  font-size: 0.75rem;
+  font-weight: 600;
+  line-height: 1.4;
+  border-radius: 4px;
+  white-space: nowrap;
+  background: rgba(26, 22, 18, 0.05);
+  color: var(--text-secondary, #5c564d);
 }
 
 /* Line 3: KS4 stats */
@@ -119,7 +125,7 @@
   white-space: nowrap;
 }
 
-.deltaPositive { color: #3c8c3c; }
+.deltaPositive { color: #2f7a2f; }
 .deltaNegative { color: var(--accent-coral, #e07256); }
 
 /* Line 4: location + distance */
@@ -151,12 +157,12 @@
 /* Phase label pill */
 .phaseLabel {
   display: inline-block;
-  padding: 0.0625rem 0.375rem;
+  padding: 0.0625rem 0.4rem;
-  font-size: 0.6875rem;
+  font-size: 0.75rem;
   font-weight: 600;
-  border-radius: 3px;
+  line-height: 1.4;
+  border-radius: 4px;
   white-space: nowrap;
-  margin-right: 0.25rem;
 }
 
 .phaseLabelSecondary  { background: var(--phase-secondary-bg); color: var(--phase-secondary-text); }
@@ -165,14 +171,14 @@
 
 .provisionTag {
   display: inline-block;
-  padding: 0.0625rem 0.375rem;
+  padding: 0.0625rem 0.4rem;
   font-size: 0.75rem;
-  font-weight: 500;
+  font-weight: 600;
-  background: var(--bg-secondary, #f3ede4);
+  line-height: 1.4;
-  color: var(--text-secondary, #5c5650);
+  background: rgba(26, 22, 18, 0.05);
-  border-radius: 3px;
+  color: var(--text-secondary, #5c564d);
+  border-radius: 4px;
   white-space: nowrap;
-  margin-left: 0.375rem;
 }
 
 .selectiveTag {
@@ -197,12 +203,15 @@
 }
 
 .ofsted1 { background: var(--accent-teal-bg); color: var(--accent-teal, #2d7d7d); }
-.ofsted2 { background: rgba(60, 140, 60, 0.12); color: #3c8c3c; }
+.ofsted2 { background: rgba(60, 140, 60, 0.12); color: #2f7a2f; }
-.ofsted3 { background: var(--accent-gold-bg); color: #b8920e; }
+.ofsted3 { background: var(--accent-gold-bg); color: var(--accent-gold-text, #7a6800); }
 .ofsted4 { background: var(--accent-coral-bg); color: var(--accent-coral, #e07256); }
 
 /* ── Ofsted badge variants ──────────────────────────────────────────────── */
 .ofstedRc      { background: #5a3a6e; color: #fff; }
+/* Inspected but with no overall grade (OEIF post-Sept-2024) — neutral slate,
+   distinct from the grey "Not yet inspected" pending state. */
+.ofstedInspected { background: #e6ecf2; color: #45586b; }
 .ofstedPending { background: #e0e0e0; color: #666; }
 
 /* ── Right actions column ────────────────────────────── */
@@ -236,8 +245,15 @@
     white-space: normal;
   }
 
+  /* Promote the headline metric (Attainment 8) onto its own line so
+     the secondary stats — delta vs LA, pupils — wrap below it with
+     visible row gap instead of crowding the same row. */
   .line3 {
-    gap: 0 1rem;
+    row-gap: 0.25rem;
+    column-gap: 1rem;
+  }
+  .line3 > .stat:first-child {
+    flex-basis: 100%;
   }
 
   .rowActions {

nextjs-app/components/SecondarySchoolRow.tsx

@@ -11,7 +11,7 @@
 'use client';
 
 import type { School } from '@/lib/types';
-import { buildOfstedListBadge, getPhaseStyle, schoolUrl } from '@/lib/utils';
+import { buildOfstedListBadge, getPhaseStyle, schoolUrl, formatAgeRange } from '@/lib/utils';
 import styles from './SecondarySchoolRow.module.css';
 
 function detectAdmissionsTag(school: School): string | null {
@@ -83,8 +83,8 @@ export function SecondarySchoolRow({
               {phase.label}
             </span>
           )}
-          {school.school_type && <span>{school.school_type}</span>}
+          {school.school_type && <span className={styles.attr}>{school.school_type}</span>}
-          {school.age_range && <span>{school.age_range}</span>}
+          {school.age_range && <span className={styles.attr}>{formatAgeRange(school.age_range)}</span>}
           {showGender && (
             <span className={styles.provisionTag}>{school.gender}</span>
           )}

nextjs-app/context/ComparisonContext.tsx

@@ -15,6 +15,7 @@ interface ComparisonContextType {
   error: any;
   addSchool: (school: School) => void;
   removeSchool: (urn: number) => void;
+  replaceSchools: (schools: School[]) => void;
   clearAll: () => void;
   isSelected: (urn: number) => boolean;
   canAddMore: boolean;

nextjs-app/context/ComparisonProvider.tsx

@@ -65,6 +65,12 @@ export function ComparisonProvider({ children }: { children: React.ReactNode })
     setSelectedSchools((prev) => prev.filter((s) => s.urn !== urn));
   }, []);
 
+  // Replace the whole selection — used when a shared /compare?urns=… link
+  // must take precedence over whatever this visitor had stored.
+  const replaceSchools = useCallback((schools: School[]) => {
+    setSelectedSchools(schools.slice(0, MAX_SCHOOLS));
+  }, []);
+
   const clearAll = useCallback(() => {
     setSelectedSchools([]);
   }, []);
@@ -86,6 +92,7 @@ export function ComparisonProvider({ children }: { children: React.ReactNode })
         error: null,
         addSchool,
         removeSchool,
+        replaceSchools,
         clearAll,
         isSelected,
         canAddMore: selectedSchools.length < MAX_SCHOOLS,

nextjs-app/hooks/useComparison.ts

@@ -15,6 +15,7 @@ export function useComparison() {
     selectedSchools,
     addSchool,
     removeSchool,
+    replaceSchools,
     clearAll,
     isSelected,
     canAddMore,
@@ -39,6 +40,7 @@ export function useComparison() {
     error,
     addSchool,
     removeSchool,
+    replaceSchools,
     clearAll,
     isSelected,
     canAddMore,

nextjs-app/hooks/useIsMobile.ts

@@ -0,0 +1,23 @@
+/**
+ * Viewport hook shared by the chart components.
+ * Hydration-safe: SSR and the first client render report desktop; the
+ * media-query subscription flips the value after mount.
+ */
+
+'use client';
+
+import { useEffect, useState } from 'react';
+
+export function useIsMobile(maxWidth = 640): boolean {
+  const [isMobile, setIsMobile] = useState(false);
+
+  useEffect(() => {
+    const mq = window.matchMedia(`(max-width: ${maxWidth}px)`);
+    const update = () => setIsMobile(mq.matches);
+    update();
+    mq.addEventListener('change', update);
+    return () => mq.removeEventListener('change', update);
+  }, [maxWidth]);
+
+  return isMobile;
+}

nextjs-app/lib/analytics.ts

@@ -0,0 +1,79 @@
+/**
+ * Analytics tracking for Umami.
+ *
+ * Single typed wrapper around `window.umami.track()`. All events flow
+ * through `track(name, data?)` — this gives us:
+ *   - Refactor-safe event names (one place to maintain).
+ *   - A schema for properties so we don't ship typos that fragment dashboards.
+ *   - No-op on the server and never-throws semantics, so analytics outages
+ *     can't take the app down.
+ *
+ * Umami is privacy-friendly (no cookies, no IPs, no PII), so it's safe to
+ * include school identifiers and full search query text.
+ */
+
+export type EventName =
+  // Discovery
+  | 'search_submitted'
+  | 'near_me_used'
+  | 'empty_results'
+  // Engagement
+  | 'school_viewed'
+  | 'section_nav_used'
+  | 'chart_metric_changed'
+  | 'metric_compared_in_rankings'
+  | 'external_link_clicked'
+  // Conversion
+  | 'compare_school_added'
+  | 'compare_school_removed'
+  | 'compare_viewed'
+  | 'compare_metric_changed'
+  | 'compare_shared'
+  | 'compare_focus_school'
+  // Operational
+  | 'api_error'
+  | 'results_load_more';
+
+type Primitive = string | number | boolean;
+type Payload = Record<string, Primitive>;
+
+/**
+ * Fire an event. No-ops if Umami isn't loaded yet (the script is `defer`)
+ * or if we're rendering server-side. Never throws.
+ */
+export function track(name: EventName, data?: Payload): void {
+  if (typeof window === 'undefined') return;
+  const umami = (window as unknown as { umami?: { track?: (n: string, d?: Payload) => void } }).umami;
+  if (!umami?.track) return;
+  try {
+    umami.track(name, data);
+  } catch {
+    // Analytics must never crash the app.
+  }
+}
+
+/**
+ * Categorise where the user navigated from, for funnel attribution
+ * (mostly used on school_viewed). Only checks same-origin referrers.
+ */
+export function getNavigationSource(): 'search' | 'rankings' | 'compare' | 'detail' | 'direct' {
+  if (typeof window === 'undefined' || !document.referrer) return 'direct';
+  try {
+    const ref = new URL(document.referrer);
+    if (ref.origin !== window.location.origin) return 'direct';
+    const p = ref.pathname;
+    if (p === '/' || p === '') return 'search';
+    if (p.startsWith('/rankings')) return 'rankings';
+    if (p.startsWith('/compare')) return 'compare';
+    if (p.startsWith('/school/')) return 'detail';
+    return 'direct';
+  } catch {
+    return 'direct';
+  }
+}
+
+/** Split mobile vs desktop on a per-event basis. */
+export function getViewport(): 'mobile' | 'desktop' {
+  if (typeof window === 'undefined') return 'desktop';
+  return window.matchMedia('(max-width: 640px)').matches ? 'mobile' : 'desktop';
+}

nextjs-app/lib/api.ts

@@ -65,6 +65,16 @@ async function handleResponse<T>(response: Response): Promise<T> {
       // If parsing JSON fails, use the default error
     }
 
+    // Client-side: report to analytics so we can spot silent failures.
+    // No-ops on SSR (track guards against missing window).
+    if (typeof window !== 'undefined') {
+      const { track } = await import('./analytics');
+      try {
+        const endpoint = new URL(response.url).pathname;
+        track('api_error', { endpoint, status: response.status, route: window.location.pathname });
+      } catch { /* never */ }
+    }
+
     throw new APIFetchError(
       `API request failed: ${errorDetail}`,
       response.status,

nextjs-app/lib/chartSetup.ts

@@ -0,0 +1,28 @@
+/**
+ * Single Chart.js registration point.
+ * Import this module (side-effect import) in any file that uses react-chartjs-2.
+ * Chart.js is idempotent about duplicate registrations, but importing the
+ * registration from one place ensures every primitive is only bundled once
+ * and the register() call is not duplicated at runtime.
+ */
+
+import {
+  Chart as ChartJS,
+  CategoryScale,
+  LinearScale,
+  PointElement,
+  LineElement,
+  Title,
+  Tooltip,
+  Legend,
+} from 'chart.js';
+
+ChartJS.register(
+  CategoryScale,
+  LinearScale,
+  PointElement,
+  LineElement,
+  Title,
+  Tooltip,
+  Legend,
+);

nextjs-app/lib/types.ts

@@ -99,39 +99,26 @@ export interface OfstedInspection {
   rc_sixth_form: number | null;
 }
 
-export interface OfstedParentView {
-  survey_date: string | null;
-  total_responses: number | null;
-  q_happy_pct: number | null;
-  q_safe_pct: number | null;
-  q_behaviour_pct: number | null;
-  q_bullying_pct: number | null;
-  q_communication_pct: number | null;
-  q_progress_pct: number | null;
-  q_teaching_pct: number | null;
-  q_information_pct: number | null;
-  q_curriculum_pct: number | null;
-  q_future_pct: number | null;
-  q_leadership_pct: number | null;
-  q_wellbeing_pct: number | null;
-  q_recommend_pct: number | null;
-  q_sen_pct: number | null;
-}
-
 export interface SchoolCensus {
   year: number;
-  class_size_avg: number | null;
+  total_pupils: number | null;
-  ethnicity_white_pct: number | null;
+  female_pupils: number | null;
-  ethnicity_asian_pct: number | null;
+  male_pupils: number | null;
-  ethnicity_black_pct: number | null;
+  fsm_pct: number | null;
-  ethnicity_mixed_pct: number | null;
+  eal_pct: number | null;
-  ethnicity_other_pct: number | null;
+  class_size_avg?: number | null;
+  ethnicity_white_pct?: number | null;
+  ethnicity_asian_pct?: number | null;
+  ethnicity_black_pct?: number | null;
+  ethnicity_mixed_pct?: number | null;
+  ethnicity_other_pct?: number | null;
 }
 
 export interface SchoolAdmissions {
   year: number;
   school_phase?: string | null;
-  published_admission_number: number | null;
+  /** Number of places the school offered in this admissions round (not PAN — EES doesn't expose PAN). */
+  places_offered: number | null;
   total_applications: number | null;
   first_preference_applications?: number | null;
   first_preference_offers?: number | null;
@@ -306,9 +293,10 @@ export interface SchoolDetailsResponse {
   absence_data: AbsenceData | null;
   // Supplementary data (null until Kestra populates)
   ofsted: OfstedInspection | null;
-  parent_view: OfstedParentView | null;
   census: SchoolCensus | null;
   admissions: SchoolAdmissions | null;
+  /** All available admissions years, oldest first. Drives the multi-year trend view. */
+  admissions_history: SchoolAdmissions[];
   sen_detail: SenDetail | null;
   phonics: Phonics | null;
   deprivation: SchoolDeprivation | null;

nextjs-app/lib/utils.ts

@@ -59,6 +59,18 @@ export function truncate(text: string, maxLength: number): string {
   return text.slice(0, maxLength).trim() + '...';
 }
 
+/**
+ * Format a school's age range for display, e.g. "3-11" → "Ages 3–11".
+ * Display-only — leaves the raw `age_range` field (used for sixth-form
+ * detection) untouched. Falls back to the raw value if it's not a plain range.
+ */
+export function formatAgeRange(ageRange: string | null | undefined): string {
+  if (!ageRange) return '';
+  const match = ageRange.match(/^\s*(\d+)\s*[-–]\s*(\d+)\s*$/);
+  if (!match) return ageRange;
+  return `Ages ${match[1]}–${match[2]}`;
+}
+
 // ============================================================================
 // Number Formatting
 // ============================================================================
@@ -263,6 +275,27 @@ export function getChartColor(index: number): string {
   return CHART_COLORS[index % CHART_COLORS.length];
 }
 
+/**
+ * Darker counterparts of CHART_COLORS for use as TEXT on the site's light
+ * backgrounds — the raw series colours fail WCAG AA (e.g. 1.9:1 on cream).
+ * Same hue per index so text still keys to its chart line. All ≥4.5:1 on
+ * #f3ede4 and lighter.
+ */
+export const CHART_TEXT_COLORS = [
+  '#256868', // teal
+  '#c2255c', // pink/red
+  '#2069ad', // blue
+  '#8a5a00', // yellow → ochre
+  '#6d43c8', // purple
+  '#8f4e00', // orange → brown
+  '#5f5952', // grey
+  '#a300a3', // magenta
+];
+
+export function getChartTextColor(index: number): string {
+  return CHART_TEXT_COLORS[index % CHART_TEXT_COLORS.length];
+}
+
 /**
  * Convert RGB color to RGBA with opacity
  */
@@ -284,6 +317,57 @@ export function getTrendColor(trend: 'up' | 'down' | 'stable'): string {
   }
 }
 
+/**
+ * Broad shape of a KS2/KS4 metric, used to scale chart axes and format values.
+ */
+export type MetricKind = 'percentage' | 'progress' | 'score';
+
+export function metricKind(metric: string): MetricKind {
+  if (metric.includes('progress')) return 'progress';
+  if (metric.includes('pct') || metric.includes('rate')) return 'percentage';
+  return 'score';
+}
+
+/**
+ * Fit a chart y-axis to the data instead of a fixed frame, so clustered
+ * series remain distinguishable. Padding keeps a minimum span so noise is
+ * not magnified into drama.
+ *
+ * - percentage: pad and snap to 5s; cap at 100; floor at 0 only when the
+ *   data is non-negative (some trend metrics have `pct` in the key but hold
+ *   negative year-over-year deltas).
+ * - progress: symmetric around 0 so the zero line always shows.
+ * - score (Attainment 8, scaled scores): pad and snap to integers; floor at
+ *   0 only when the data is non-negative.
+ */
+export function computeYBounds(
+  values: Array<number | null | undefined>,
+  kind: MetricKind,
+): { min?: number; max?: number } {
+  const nums = values.filter((v): v is number => typeof v === 'number' && Number.isFinite(v));
+  if (nums.length === 0) return {};
+
+  const lo = Math.min(...nums);
+  const hi = Math.max(...nums);
+
+  if (kind === 'progress') {
+    const reach = Math.max(2, Math.ceil(Math.max(Math.abs(lo), Math.abs(hi)) + 0.5));
+    return { min: -reach, max: reach };
+  }
+
+  if (kind === 'percentage') {
+    const pad = Math.max(5, Math.round((hi - lo) * 0.2));
+    const min = Math.floor((lo - pad) / 5) * 5;
+    const max = Math.min(100, Math.ceil((hi + pad) / 5) * 5);
+    return { min: lo >= 0 ? Math.max(0, min) : min, max };
+  }
+
+  // score
+  const pad = Math.max(2, (hi - lo) * 0.2);
+  const min = Math.floor(lo - pad);
+  return { min: lo >= 0 ? Math.max(0, min) : min, max: Math.ceil(hi + pad) };
+}
+
 // ============================================================================
 // Local Storage Utilities
 // ============================================================================
@@ -592,7 +676,11 @@ export interface OfstedListBadge {
  * Three states:
  *   - OEIF school (ofsted_grade set): grade word + year, colour-keyed
  *   - ReportCard school (ofsted_framework === 'ReportCard'): "Report Card · YYYY" in purple
- *   - No inspection: "Not yet inspected" in grey
+ *   - Inspected without an overall grade (OEIF post-Sept-2024, where Ofsted no
+ *     longer issues an overall judgement): "Inspected · YYYY" — mirrors the
+ *     detail page's hero chip so a school never reads as both inspected and
+ *     "Not yet inspected"
+ *   - No inspection on record: "Not yet inspected" in grey
  */
 export function buildOfstedListBadge(school: {
   ofsted_grade?: 1 | 2 | 3 | 4 | null;
@@ -621,5 +709,12 @@ export function buildOfstedListBadge(school: {
     return { label: `Report Card${yearStr}`, cssClass: 'ofstedRc' };
   }
 
+  // An inspection is on record (date or framework present) but carries no
+  // overall grade — a post-Sept-2024 OEIF inspection. Distinct from a school
+  // that has genuinely never been inspected.
+  if (school.ofsted_date != null || school.ofsted_framework != null) {
+    return { label: `Inspected${yearStr}`, cssClass: 'ofstedInspected' };
+  }
+
   return { label: 'Not yet inspected', cssClass: 'ofstedPending' };
 }

nextjs-app/next.config.js

@@ -27,7 +27,7 @@ const nextConfig = {
       { protocol: 'https', hostname: 'cdnjs.cloudflare.com' },
     ],
     formats: ['image/avif', 'image/webp'],
-    minimumCacheTTL: 60,
+    minimumCacheTTL: 31536000,
   },
 
   // Performance optimizations

nextjs-app/package-lock.json

@@ -90,7 +90,6 @@
       "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.29.0.tgz",
       "integrity": "sha512-CGOfOJqWjg2qW/Mb6zNsDm+u5vFQ8DxXfbM09z69p5Z6+mE1ikP2jUXw+j42Pf1XTYED2Rni5f95npYeuwMDQA==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@babel/code-frame": "^7.29.0",
         "@babel/generator": "^7.29.0",
@@ -641,7 +640,6 @@
         }
       ],
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=18"
       },
@@ -665,7 +663,6 @@
         }
       ],
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=18"
       }
@@ -2295,6 +2292,7 @@
       "integrity": "sha512-b0P0sZPKtyu8HkeRAfCq0IfURZK+SuwMjY1UXGBU27wpAiTwQAIlq56IbIO+ytk/JjS1fMR14ee5WBBfKi5J6A==",
       "dev": true,
       "license": "Apache-2.0",
+      "peer": true,
       "dependencies": {
         "dequal": "^2.0.3"
       }
@@ -2383,7 +2381,8 @@
       "resolved": "https://registry.npmjs.org/@types/aria-query/-/aria-query-5.0.4.tgz",
       "integrity": "sha512-rfT93uj5s0PRL7EzccGMs3brplhcrghnDoV26NqKhCAS1hVo+WdNsPvE/yb6ilfr5hi2MEk6d5EWJTKdxg8jVw==",
       "dev": true,
-      "license": "MIT"
+      "license": "MIT",
+      "peer": true
     },
     "node_modules/@types/babel__core": {
       "version": "7.20.5",
@@ -2564,7 +2563,6 @@
       "resolved": "https://registry.npmjs.org/@types/react/-/react-19.2.10.tgz",
       "integrity": "sha512-WPigyYuGhgZ/cTPRXB2EwUw+XvsRA3GqHlsP4qteqrnnjDrApbS7MxcGr/hke5iUoeB7E/gQtrs9I37zAJ0Vjw==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "csstype": "^3.2.2"
       }
@@ -2574,7 +2572,6 @@
       "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-19.2.3.tgz",
       "integrity": "sha512-jp2L/eY6fn+KgVVQAOqYItbF0VY/YApe5Mz2F0aykSO8gx31bYCZyvSeYxCHKvzHG5eZjc+zyaS5BrBWya2+kQ==",
       "license": "MIT",
-      "peer": true,
       "peerDependencies": {
         "@types/react": "^19.2.0"
       }
@@ -2652,7 +2649,6 @@
       "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-8.54.0.tgz",
       "integrity": "sha512-BtE0k6cjwjLZoZixN0t5AKP0kSzlGu7FctRXYuPAm//aaiZhmfq1JwdYpYr1brzEspYyFeF+8XF5j2VK6oalrA==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@typescript-eslint/scope-manager": "8.54.0",
         "@typescript-eslint/types": "8.54.0",
@@ -3128,7 +3124,6 @@
       "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.15.0.tgz",
       "integrity": "sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==",
       "license": "MIT",
-      "peer": true,
       "bin": {
         "acorn": "bin/acorn"
       },
@@ -3596,7 +3591,6 @@
         }
       ],
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "baseline-browser-mapping": "^2.9.0",
         "caniuse-lite": "^1.0.30001759",
@@ -3745,7 +3739,6 @@
       "resolved": "https://registry.npmjs.org/chart.js/-/chart.js-4.5.1.tgz",
       "integrity": "sha512-GIjfiT9dbmHRiYi6Nl2yFCq7kkwdkp1W/lp2J99rX0yo9tgJGn3lKQATztIjb5tVtevcBtIdICNWqlq5+E8/Pw==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@kurkle/color": "^0.3.0"
       },
@@ -4145,7 +4138,8 @@
       "resolved": "https://registry.npmjs.org/dom-accessibility-api/-/dom-accessibility-api-0.5.16.tgz",
       "integrity": "sha512-X7BJ2yElsnOJ30pZF4uIIDfBEVgF4XEBxL9Bxhy6dnrm5hkzqmsWHGTiHqRiITNhMyFLyAiWndIJP7Z1NTteDg==",
       "dev": true,
-      "license": "MIT"
+      "license": "MIT",
+      "peer": true
     },
     "node_modules/dunder-proto": {
       "version": "1.0.1",
@@ -4411,7 +4405,6 @@
       "resolved": "https://registry.npmjs.org/eslint/-/eslint-9.39.2.tgz",
       "integrity": "sha512-LEyamqS7W5HB3ujJyvi0HQK/dtVINZvd5mAAp9eT5S/ujByGjiZLCzPcHVzuXbpJDJF/cxwHlfceVUDZ2lnSTw==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@eslint-community/eslint-utils": "^4.8.0",
         "@eslint-community/regexpp": "^4.12.1",
@@ -4589,7 +4582,6 @@
       "resolved": "https://registry.npmjs.org/eslint-plugin-import/-/eslint-plugin-import-2.32.0.tgz",
       "integrity": "sha512-whOE1HFo/qJDyX4SnXzP4N6zOWn79WhnCUY/iDR0mPfQZO8wcYE4JClzI2oZrhBnnMUCBCHZhO6VQyoBU95mZA==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@rtsao/scc": "^1.1.0",
         "array-includes": "^3.1.9",
@@ -7137,7 +7129,6 @@
       "integrity": "sha512-Cvc9WUhxSMEo4McES3P7oK3QaXldCfNWp7pl2NNeiIFlCoLr3kfq9kb1fxftiwk1FLV7CvpvDfonxtzUDeSOPg==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "cssstyle": "^4.2.1",
         "data-urls": "^5.0.0",
@@ -7267,8 +7258,7 @@
       "version": "1.9.4",
       "resolved": "https://registry.npmjs.org/leaflet/-/leaflet-1.9.4.tgz",
       "integrity": "sha512-nxS1ynzJOmOlHp+iL3FyWqK89GtNL8U8rvlMOsQdTTssxZwCXh8N2NB3GDQOL+YR3XnWyZAxwQixURb+FA74PA==",
-      "license": "BSD-2-Clause",
+      "license": "BSD-2-Clause"
-      "peer": true
     },
     "node_modules/leven": {
       "version": "3.1.0",
@@ -7348,6 +7338,7 @@
       "integrity": "sha512-h5bgJWpxJNswbU7qCrV0tIKQCaS3blPDrqKWx+QxzuzL1zGUzij9XCWLrSLsJPu5t+eWA/ycetzYAO5IOMcWAQ==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "bin": {
         "lz-string": "bin/bin.js"
       }
@@ -8094,6 +8085,7 @@
       "integrity": "sha512-Qb1gy5OrP5+zDf2Bvnzdl3jsTf1qXVMazbvCoKhtKqVs4/YK4ozX4gKQJJVyNe+cajNPn0KoC0MC3FUmaHWEmQ==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "ansi-regex": "^5.0.1",
         "ansi-styles": "^5.0.0",
@@ -8109,6 +8101,7 @@
       "integrity": "sha512-Cxwpt2SfTzTtXcfOlzGEee8O+c+MmUgGrNiBcXnuWxuFJHe6a5Hz7qwhwe5OgaSYI0IJvkLqWX1ASG+cJOkEiA==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "engines": {
         "node": ">=10"
       },
@@ -8121,7 +8114,8 @@
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
       "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==",
       "dev": true,
-      "license": "MIT"
+      "license": "MIT",
+      "peer": true
     },
     "node_modules/prop-types": {
       "version": "15.8.1",
@@ -8185,7 +8179,6 @@
       "resolved": "https://registry.npmjs.org/react/-/react-19.2.4.tgz",
       "integrity": "sha512-9nfp2hYpCwOjAN+8TZFGhtWEwgvWHXqESH8qT89AT/lWklpLON22Lc8pEtnpsZz7VmawabSU0gCjnj8aC0euHQ==",
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -8205,7 +8198,6 @@
       "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.2.4.tgz",
       "integrity": "sha512-AXJdLo8kgMbimY95O2aKQqsz2iWi9jMgKJhRBAxECE4IFxfcazB2LmzloIoibJI3C12IlY20+KFaLv+71bUJeQ==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "scheduler": "^0.27.0"
       },
@@ -9219,7 +9211,6 @@
       "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.3.tgz",
       "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=12"
       },
@@ -9448,7 +9439,6 @@
       "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.9.3.tgz",
       "integrity": "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==",
       "license": "Apache-2.0",
-      "peer": true,
       "bin": {
         "tsc": "bin/tsc",
         "tsserver": "bin/tsserver"
@@ -10023,7 +10013,6 @@
       "resolved": "https://registry.npmjs.org/zod/-/zod-4.3.6.tgz",
       "integrity": "sha512-rftlrkhHZOcjDwkGlnUtZZkvaPHCsDATp4pGpuOOMDaTdDDXF91wuVDJoWoPsKX/3YPQ5fHuF3STjcYyKr+Qhg==",
       "license": "MIT",
-      "peer": true,
       "funding": {
         "url": "https://github.com/sponsors/colinhacks"
       }

nextjs-app/package.json

@@ -7,7 +7,7 @@
     "dev": "next dev",
     "build": "next build",
     "start": "next start",
-    "lint": "next lint",
+    "typecheck": "tsc --noEmit",
     "test": "jest",
     "test:watch": "jest --watch",
     "test:coverage": "jest --coverage"

nextjs-app/public/manifest.json

@@ -1,11 +1,11 @@
 {
   "name": "SchoolCompare",
   "short_name": "SchoolCompare",
-  "description": "Compare primary school KS2 performance across England",
+  "description": "Compare primary and secondary school performance across England",
   "start_url": "/",
   "display": "standalone",
-  "background_color": "#ffffff",
+  "background_color": "#faf7f2",
-  "theme_color": "#3b82f6",
+  "theme_color": "#faf7f2",
   "icons": [
     {
       "src": "/favicon.svg",

pipeline/Dockerfile

@@ -19,7 +19,6 @@ RUN pip install --no-cache-dir \
     ./plugins/extractors/tap-uk-gias \
     ./plugins/extractors/tap-uk-ees \
     ./plugins/extractors/tap-uk-ofsted \
-    ./plugins/extractors/tap-uk-parent-view \
     ./plugins/extractors/tap-uk-fbit \
     ./plugins/extractors/tap-uk-idaci
 
@@ -32,8 +31,9 @@ COPY dags/ dags/
 # Initialize Meltano project (generates catalog, installs target-postgres)
 RUN meltano install
 
-# dbt deps
+# dbt deps — invoke via the Python module so the classic dbt-postgres engine
-RUN cd transform && dbt deps --profiles-dir . 2>/dev/null || true
+# is used, not a standalone dbt Fusion binary that may shadow it on PATH.
+RUN cd transform && python -m dbt.cli.main deps --profiles-dir . 2>/dev/null || true
 
 ENV AIRFLOW_HOME=/opt/airflow
 ENV AIRFLOW__CORE__DAGS_FOLDER=/opt/pipeline/dags

pipeline/dags/school_data_pipeline.py

@@ -24,7 +24,11 @@ except ImportError:
 
 PIPELINE_DIR = "/opt/pipeline"
 MELTANO_BIN = "meltano"
-DBT_BIN = "dbt"
+# Invoke dbt via the Python module rather than a bare `dbt` on PATH. The
+# standalone dbt Fusion binary (dbt-core 2.x) shadows the pip-installed
+# classic engine on some images and rejects the Postgres adapter
+# (dbt1005). The module form always resolves to dbt-postgres ~=1.10.
+DBT_BIN = "python -m dbt.cli.main"
 
 default_args = {
     "owner": "school-compare",
@@ -141,7 +145,7 @@ with DAG(
 
     dbt_build_ees = BashOperator(
         task_id="dbt_build",
-        bash_command=f"cd {PIPELINE_DIR}/transform && {DBT_BIN} build --profiles-dir . --target production --select stg_ees_ks2+ stg_legacy_ks2+ stg_ees_ks4+ stg_ees_census+ stg_ees_admissions+ stg_ees_ks2_national+",
+        bash_command=f"cd {PIPELINE_DIR}/transform && {DBT_BIN} build --profiles-dir . --target production --select stg_ees_ks2+ stg_legacy_ks2+ stg_ees_ks4+ stg_legacy_ks4+ stg_ees_census+ stg_ees_admissions+ stg_ees_ks2_national+",
     )
 
     sync_typesense_ees = BashOperator(
@@ -152,31 +156,6 @@ with DAG(
     extract_ees_group >> dbt_build_ees >> sync_typesense_ees
 
 
-# ── Monthly DAG (Parent View) ──────────────────────────────────────────
-
-with DAG(
-    dag_id="school_data_monthly_parent_view",
-    default_args=default_args,
-    description="Monthly Ofsted Parent View extraction and transform",
-    schedule="0 3 1 * *",
-    start_date=datetime(2025, 1, 1),
-    catchup=False,
-    tags=["school-compare", "monthly"],
-) as monthly_parent_view_dag:
-
-    extract_parent_view = BashOperator(
-        task_id="extract_parent_view",
-        bash_command=f"cd {PIPELINE_DIR} && {MELTANO_BIN} run tap-uk-parent-view target-postgres",
-    )
-
-    dbt_build_parent_view = BashOperator(
-        task_id="dbt_build",
-        bash_command=f"cd {PIPELINE_DIR}/transform && {DBT_BIN} build --profiles-dir . --target production --select stg_parent_view+ fact_parent_view+",
-    )
-
-    extract_parent_view >> dbt_build_parent_view
-
-
 # ── Annual DAG (IDACI Deprivation) ────────────────────────────────────
 
 with DAG(

pipeline/meltano.yml

@@ -26,12 +26,20 @@ plugins:
         - name: legacy_ks2_urls
           kind: object
           description: "Year code → URL mapping for legacy KS2 CSVs"
+        - name: legacy_ks4_urls
+          kind: object
+          description: "Year code → URL mapping for legacy KS4 ZIPs (england_ks4final.csv inside)"
       config:
         legacy_ks2_urls:
-          "201516": "http://10.0.1.224:8081/filebrowser/api/public/dl/R9jjXFWa?inline=true"
+          "201516": "http://10.0.1.224:8081/filebrowser/api/public/dl/iaoSkg1v?inline=true"
-          "201617": "http://10.0.1.224:8081/filebrowser/api/public/dl/tIwJPVQS?inline=true"
+          "201617": "http://10.0.1.224:8081/filebrowser/api/public/dl/bqCMUcIH?inline=true"
-          "201718": "http://10.0.1.224:8081/filebrowser/api/public/dl/GO7SKE0p?inline=true"
+          "201718": "http://10.0.1.224:8081/filebrowser/api/public/dl/0L61fE_a?inline=true"
-          "201819": "http://10.0.1.224:8081/filebrowser/api/public/dl/jchDEHsv?inline=true"
+          "201819": "http://10.0.1.224:8081/filebrowser/api/public/dl/XJGJ5lG1?inline=true"
+        legacy_ks4_urls:
+          "201516": "http://10.0.1.224:8081/filebrowser/api/public/dl/iaoSkg1v?inline=true"
+          "201617": "http://10.0.1.224:8081/filebrowser/api/public/dl/bqCMUcIH?inline=true"
+          "201718": "http://10.0.1.224:8081/filebrowser/api/public/dl/0L61fE_a?inline=true"
+          "201819": "http://10.0.1.224:8081/filebrowser/api/public/dl/XJGJ5lG1?inline=true"
 
     - name: tap-uk-ofsted
       namespace: uk_ofsted
@@ -42,11 +50,6 @@ plugins:
           kind: string
           description: Ofsted Management Information download URL
 
-    - name: tap-uk-parent-view
-      namespace: uk_parent_view
-      pip_url: ./plugins/extractors/tap-uk-parent-view
-      executable: tap-uk-parent-view
-
     - name: tap-uk-fbit
       namespace: uk_fbit
       pip_url: ./plugins/extractors/tap-uk-fbit

pipeline/plugins/extractors/tap-uk-ees/tap_uk_ees/tap.py

@@ -40,17 +40,36 @@ def _slug_to_time_period(slug: str) -> str | None:
 
 
 def get_all_releases(publication_slug: str) -> list[dict]:
-    """Return all releases for a publication as dicts with 'id' and 'time_period'."""
+    """Return all releases for a publication as dicts with 'id' and 'time_period'.
-    url = f"{CONTENT_API_BASE}/publications/{publication_slug}/releases"
+
-    resp = requests.get(url, timeout=TIMEOUT)
+    The EES content API paginates with a 'paging' envelope when there are many
-    resp.raise_for_status()
+    releases. This function follows all pages so no historical release is missed.
-    data = resp.json()
+    """
-    # API returns either a plain list or a paginated object with a "results" key
-    releases = data if isinstance(data, list) else data.get("results", [])
     result = []
-    for r in releases:
+    page = 1
-        time_period = _slug_to_time_period(r.get("slug", ""))
+    while True:
-        result.append({"id": r["id"], "time_period": time_period})
+        url = f"{CONTENT_API_BASE}/publications/{publication_slug}/releases?page={page}&pageSize=20"
+        resp = requests.get(url, timeout=TIMEOUT)
+        resp.raise_for_status()
+        data = resp.json()
+
+        # API returns either a plain list or a paginated object with a "results" key
+        if isinstance(data, list):
+            releases = data
+            total_pages = 1
+        else:
+            releases = data.get("results", [])
+            paging = data.get("paging", {})
+            total_pages = paging.get("totalPages", 1)
+
+        for r in releases:
+            time_period = _slug_to_time_period(r.get("slug", ""))
+            result.append({"id": r["id"], "time_period": time_period})
+
+        if page >= total_pages:
+            break
+        page += 1
+
     return result
 
 
@@ -663,8 +682,31 @@ class LegacyKS2Stream(Stream):
                 self.logger.warning("Failed to download %s: %s", url, e)
                 continue
 
+            content = resp.content
+
+            # Auto-detect ZIP — the DfE annual archives contain both KS2 and KS4
+            # CSVs in one ZIP. If the download is a ZIP, extract england_ks2final.csv;
+            # otherwise treat the content as a bare CSV (legacy individual-file URLs).
+            csv_bytes = None
+            try:
+                zf = zipfile.ZipFile(io.BytesIO(content))
+                target = next(
+                    (n for n in zf.namelist() if "ks2final" in n.lower() and n.endswith(".csv")),
+                    None,
+                )
+                if target:
+                    with zf.open(target) as f:
+                        csv_bytes = f.read()
+                    self.logger.info("Extracted %s from ZIP for %s", target, year_code)
+                else:
+                    self.logger.warning("No ks2final CSV found in ZIP for %s", year_code)
+                    continue
+            except zipfile.BadZipFile:
+                # Not a ZIP — treat as a bare CSV file
+                csv_bytes = content
+
             df = pd.read_csv(
-                io.BytesIO(resp.content),
+                io.BytesIO(csv_bytes),
                 dtype=str,
                 keep_default_na=False,
                 encoding="latin-1",
@@ -693,6 +735,138 @@ class LegacyKS2Stream(Stream):
                 yield record
 
 
+# ── Legacy KS4 (pre-EES wide format from DfE performance tables) ──────────────
+# The DfE "Compare School Performance" ZIPs include england_ks4final.csv in a
+# wide format (one row per school, ~416 columns, uppercase abbreviated names).
+# EES only hosts 2 years of KS4 data; this stream backfills 2015-16 to 2018-19.
+# Column mapping: old DfE CSV column → Singer field name (matches stg output).
+
+_LEGACY_KS4_COLUMN_MAP = {
+    "URN":              "urn",
+    "TPUP":             "total_pupils",
+    # Attainment 8
+    "ATT8SCR":          "attainment_8_score",
+    # Progress 8
+    "P8MEA":            "progress_8_score",
+    "P8CILOW":          "progress_8_lower_ci",
+    "P8CIUPP":          "progress_8_upper_ci",
+    "P8MEAENG":         "progress_8_english",
+    "P8MEAMAT":         "progress_8_maths",
+    "P8MEAEBAC":        "progress_8_ebacc",
+    "P8MEAOPEN":        "progress_8_open",
+    # English & Maths pass rates (% suffix stripped at extract time)
+    "PTL2BASICS_95":    "english_maths_strong_pass_pct",
+    "PTL2BASICS_94":    "english_maths_standard_pass_pct",
+    # EBacc
+    "PTEBACC_E_PTQ_EE": "ebacc_entry_pct",
+    "PTEBACC_95":       "ebacc_strong_pass_pct",
+    "PTEBACC_94":       "ebacc_standard_pass_pct",
+    # Context
+    "PSENSE4":          "sen_ehcp_pct",
+    "PSENAPK4":         "sen_support_pct",
+}
+
+
+class LegacyKS4Stream(Stream):
+    """Stream for pre-EES KS4 data from DfE 'Compare School Performance' ZIPs.
+
+    Downloads ZIPs from URLs configured in legacy_ks4_urls (a mapping of
+    6-digit year code → download URL), extracts england_ks4final.csv from each,
+    maps old DfE column names to match stg_ees_ks4 output schema, and emits
+    one record per school per year.  The % suffix present on percentage columns
+    (e.g. "39.60%") is stripped here so safe_numeric in dbt can cast cleanly.
+    """
+
+    name = "legacy_ks4"
+    primary_keys = ["urn", "year"]
+    replication_key = None
+
+    schema = th.PropertiesList(
+        th.Property("urn",                            th.StringType, required=True),
+        th.Property("year",                           th.StringType, required=True),
+        th.Property("total_pupils",                   th.StringType),
+        th.Property("attainment_8_score",             th.StringType),
+        th.Property("progress_8_score",               th.StringType),
+        th.Property("progress_8_lower_ci",            th.StringType),
+        th.Property("progress_8_upper_ci",            th.StringType),
+        th.Property("progress_8_english",             th.StringType),
+        th.Property("progress_8_maths",               th.StringType),
+        th.Property("progress_8_ebacc",               th.StringType),
+        th.Property("progress_8_open",                th.StringType),
+        th.Property("english_maths_strong_pass_pct",  th.StringType),
+        th.Property("english_maths_standard_pass_pct", th.StringType),
+        th.Property("ebacc_entry_pct",                th.StringType),
+        th.Property("ebacc_strong_pass_pct",          th.StringType),
+        th.Property("ebacc_standard_pass_pct",        th.StringType),
+        th.Property("sen_ehcp_pct",                   th.StringType),
+        th.Property("sen_support_pct",                th.StringType),
+    ).to_dict()
+
+    def get_records(self, context):
+        import pandas as pd
+
+        url_map = self.config.get("legacy_ks4_urls", {})
+        if not url_map:
+            self.logger.warning("legacy_ks4_urls not configured, skipping legacy KS4")
+            return
+
+        self.logger.info("Loading legacy KS4 for %d year(s)", len(url_map))
+
+        for year_code, url in url_map.items():
+            self.logger.info("Downloading %s for %s", url, year_code)
+            try:
+                resp = requests.get(url, timeout=120)
+                resp.raise_for_status()
+            except Exception as e:
+                self.logger.warning("Failed to download %s: %s", url, e)
+                continue
+
+            try:
+                zf = zipfile.ZipFile(io.BytesIO(resp.content))
+            except zipfile.BadZipFile as e:
+                self.logger.warning("Not a ZIP for %s: %s", year_code, e)
+                continue
+
+            # Find england_ks4final.csv inside the ZIP
+            target = next(
+                (n for n in zf.namelist() if "ks4final" in n.lower() and n.endswith(".csv")),
+                None,
+            )
+            if not target:
+                self.logger.warning("england_ks4final.csv not found in ZIP for %s", year_code)
+                continue
+
+            with zf.open(target) as f:
+                df = pd.read_csv(
+                    f,
+                    dtype=str,
+                    keep_default_na=False,
+                    encoding="latin-1",
+                )
+
+            # Strip BOM from first column name
+            cols = list(df.columns)
+            if cols:
+                cols[0] = cols[0].lstrip("\ufeff").lstrip("")
+                df.columns = cols
+
+            # Filter to school-level rows: URN must be a plain integer
+            if "URN" in df.columns:
+                df = df[df["URN"].str.match(r"^\d+$", na=False)]
+
+            self.logger.info("Emitting %d schools for %s", len(df), year_code)
+
+            for _, row in df.iterrows():
+                record = {"year": year_code}
+                for old_col, new_col in _LEGACY_KS4_COLUMN_MAP.items():
+                    val = row.get(old_col, "")
+                    # Strip % suffix — legacy DfE CSVs use "39.60%" not "39.60"
+                    if isinstance(val, str) and val.endswith("%"):
+                        val = val[:-1]
+                    record[new_col] = val
+                yield record
+
+
 class TapUKEES(Tap):
     """Singer tap for UK Explore Education Statistics."""
 
@@ -711,6 +885,11 @@ class TapUKEES(Tap):
             th.ObjectType(),
             description="Mapping of 6-digit year code to download URL for legacy KS2 CSVs (e.g. {\"201819\": \"https://...\"})",
         ),
+        th.Property(
+            "legacy_ks4_urls",
+            th.ObjectType(),
+            description="Mapping of 6-digit year code to download URL for legacy KS4 ZIPs (e.g. {\"201819\": \"https://...\"})",
+        ),
     ).to_dict()
 
     def discover_streams(self):
@@ -722,6 +901,7 @@ class TapUKEES(Tap):
             EESCensusStream(self),
             EESAdmissionsStream(self),
             LegacyKS2Stream(self),
+            LegacyKS4Stream(self),
             EESKs2NationalStream(self),
         ]