fix(home): art-direct the hero's fallback path, and declare sharp

Two findings from review on #93, both verified before fixing. <img src> cannot vary by viewport, so it was always the wide desktop crop. A browser taking neither AVIF nor WebP therefore fell through to the desktop frame on a phone and lost the schoolhouse — the exact failure the two-crop <picture> exists to prevent, surviving in the one path nobody looks at. The band JPEG the build script already emitted was never referenced, which was the tell. It now backs a <source media> placed after the modern formats, so they still win wherever they are supported. Verified by stripping the AVIF and WebP <source>s at runtime and letting <picture> re-resolve, which is what an old browser actually sees: phone hero-band-500.avif → hero-band-700.jpg (band crop, school kept) desktop hero-wide-1672.avif → hero-wide-1200.jpg sharp was not declared: it arrives transitively from next@16.1.6, so the documented regeneration command works today and breaks on a Next upgrade or a clean install that resolves differently. Declared in devDependencies for the same reason next.config.js already declares its traced font files rather than trusting the tracer to keep finding them. The third finding — that the hero's licence is marked unconfirmed in CREDITS.md while the artwork ships — is accurate and deliberate. It is the owner's to answer; recording it as unknown is the point of the file. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
feat(home): use the supplied hero artwork instead of a drawn one
2026-08-14 21:46:04 +01:00 · 2026-08-14 21:36:40 +01:00 · 2026-08-14 18:18:53 +00:00 · 2026-08-14 18:08:38 +01:00 · 2026-08-14 17:29:47 +01:00 · 2026-08-08 21:41:47 +00:00
31 changed files with 1021 additions and 652 deletions
@@ -69,6 +69,146 @@ test('home hero offers a "use my location" shortcut beside the search box', asyn
  await expect(nearMe).toBeVisible();
 });

+/*
+ * The landing page's claims must match the product and the data.
+ *
+ * Every failure this group guards against is silent: a hardcoded fallback that
+ * renders as if it were live, a number that contradicts a constant elsewhere in
+ * the codebase, illustrative copy that reads as fact. None of them throw, none
+ * fail a build, and none show up in a unit test.
+ */
+test('the coverage figure is live, not the hardcoded fallback', async ({ page }) => {
+  const info = await (await page.request.get('/api/data-info')).json();
+  test.skip(info.status !== 'loaded', 'environment has no data loaded');
+  const expected: number = info.unique_schools;
+  expect(expected).toBeGreaterThan(0);
+
+  await page.goto('/');
+  const body = await page.locator('body').innerText();
+
+  // The real count, formatted as the page formats it.
+  expect(body).toContain(expected.toLocaleString('en-GB'));
+  // The fallback that used to render in its place. `total_schools` is not a
+  // field this API returns, so reading it yielded undefined and the "24,000+"
+  // floor was shown on every request while the database held far more.
+  expect(body).not.toContain('24,000+');
+});
+
+test('the landing page states the real comparison limit', async ({ page }) => {
+  await page.goto('/');
+  const body = await page.locator('body').innerText();
+  // MAX_SCHOOLS in context/ComparisonProvider.tsx is 5. The hero used to
+  // promise three while a card lower on the same page promised five.
+  expect(body).toMatch(/five schools/i);
+  expect(body).not.toMatch(/three schools/i);
+});
+
+test('the landing page invents no data about real schools', async ({ page }) => {
+  await page.goto('/');
+  const preview = page.locator('table, [class*="comparePreview"]').first();
+  const body = await page.locator('body').innerText();
+  // The compare preview's columns carried two real school names beside
+  // invented results and invented Ofsted grades.
+  expect(body).not.toMatch(/Our Lady Queen of Heaven|St Mary's Catholic Primary/i);
+  await expect(preview).toContainText(/School A/);
+});
+
+test('the home page has a real title', async ({ page }) => {
+  await page.goto('/');
+  // It was the bare string "Home" — the browser tab, the bookmark and the
+  // search result all read that.
+  expect(await page.title()).not.toBe('Home');
+  expect(await page.title()).toMatch(/schoolcompare/i);
+});
+
+test('the landing bands share one vertical rhythm', async ({ page }) => {
+  await page.goto('/');
+  const gaps = await page.evaluate(() => {
+    const landing = document.querySelector('main div[class*="landing"]');
+    if (!landing) return null;
+    const kids = [...landing.children].map(el => el.getBoundingClientRect());
+    const out: number[] = [];
+    for (let i = 1; i < kids.length; i++) out.push(Math.round(kids[i].top - kids[i - 1].bottom));
+    return out;
+  });
+  expect(gaps).not.toBeNull();
+  expect(gaps!.length).toBeGreaterThan(1);
+  // Every band gap comes from the page container's single `gap`, so they are
+  // identical. They used to be 24 / 32 / 24 / 16 / 48 / 32px — each band set
+  // its own margin, and the page read as a stack of unrelated strips.
+  expect(new Set(gaps!).size).toBe(1);
+});
+
+/*
+ * The hero artwork. Every assertion here covers a failure that renders as a
+ * perfectly valid page: a path that 404s leaves an empty box, a crop that
+ * stops switching silently decapitates the subject, and a format negotiation
+ * that regresses just serves a bigger file.
+ */
+function heroImageState(page: Page) {
+  return page.evaluate(() => {
+    const img = document.querySelector('[class*="heroArt"] img') as HTMLImageElement | null;
+    if (!img) return null;
+    return {
+      // naturalWidth is 0 for an image that failed to load, whatever the src says.
+      loaded: img.complete && img.naturalWidth > 0,
+      file: img.currentSrc.split('/').pop() ?? '',
+    };
+  });
+}
+
+test('the hero artwork loads, and switches crop rather than cropping its subject', async ({ page }) => {
+  await page.setViewportSize({ width: 1440, height: 900 });
+  await page.goto('/');
+  const wide = await heroImageState(page);
+  expect(wide).not.toBeNull();
+  expect(wide!.loaded).toBe(true);
+  expect(wide!.file).toContain('hero-wide');
+
+  /*
+   * Below the one-column breakpoint the slot becomes a band up to 4.9:1. The
+   * desktop frame centre-cropped to that shape loses the schoolhouse, which is
+   * how the previous hero failed on phones — so <picture> must switch to the
+   * pre-cropped band file, not merely to a smaller version of the same frame.
+   */
+  await page.setViewportSize({ width: 390, height: 844 });
+  await page.goto('/');
+  const band = await heroImageState(page);
+  expect(band!.loaded).toBe(true);
+  expect(band!.file).toContain('hero-band');
+});
+
+test('the hero artwork is served in a modern format', async ({ page }) => {
+  await page.setViewportSize({ width: 1440, height: 900 });
+  await page.goto('/');
+  const state = await heroImageState(page);
+  // The JPEG exists only as the <img> fallback. Chromium takes AVIF, so seeing
+  // the fallback here means the <source> negotiation broke — which costs about
+  // 24kB extra on the LCP element and nothing visible.
+  expect(state!.file).toMatch(/\.(avif|webp)$/);
+});
+
+test('the hero artwork is dimmed for the dark theme', async ({ browser }) => {
+  const filterFor = async (colorScheme: 'light' | 'dark') => {
+    const ctx = await browser.newContext({ colorScheme });
+    const p = await ctx.newPage();
+    await p.goto('/');
+    const value = await p.evaluate(() => {
+      const img = document.querySelector('[class*="heroArt"] img');
+      return img ? getComputedStyle(img).filter : 'missing';
+    });
+    await ctx.close();
+    return value;
+  };
+
+  // The artwork is a fixed raster, so it cannot be re-graded per theme the way
+  // the drawn hero was. Undimmed it is the brightest object on a near-black
+  // page and out-shouts the H1 and the search box — the exact regression the
+  // drawn version shipped with.
+  expect(await filterFor('light')).toBe('none');
+  expect(await filterFor('dark')).toMatch(/brightness/);
+});
+
 test('searching by name returns school results', async ({ page }) => {
  await searchByName(page, 'primary');
  await expect(schoolLinks(page).first()).toBeVisible({ timeout: 15_000 });
@@ -178,6 +178,29 @@
    --step-4: 2.5rem;
    --step-5: 3rem;

+    /* ── Section rhythm ─────────────────────────────────────────────────
+       The vertical gap between the bands of a page, and the gap between a
+       band's header and its content. Two values, not seven: the landing page
+       previously set its own margin on every band (24 / 32 / 16 / 48px, no
+       scale), which is what made a designed page read as a stack of unrelated
+       strips. Bands must not set their own vertical margins — the page
+       container owns the gap. */
+    --section-gap: 4rem;
+    --section-head-gap: 1.5rem;
+
+    /* ── Hero artwork ───────────────────────────────────────────────────
+       The landing hero is now a supplied raster illustration rather than a
+       drawn SVG, so its colours are in the file, not here. What is left is the
+       ground the artwork sits on and fades into.
+
+       --hero-ground is sampled from the artwork's own copy area (#FDF9F3),
+       not from Sand. The artwork reserves an empty cream region on the left
+       for the headline, and the scrim that guarantees text contrast fades from
+       this colour into it — a scrim in Sand (#F5EFE6, eight to thirteen points
+       darker per channel) leaves a visible seam straight down the hero. */
+    --hero-ground: #FDF9F3;
+    --hero-ground-rgb: 253, 249, 243;
+
    /* ── Geometry & motion ──────────────────────────────────────────────
       "Soft shapes, rounded corners" — the guideline's geometry is markedly
       rounder than the old system's 3/6/10/16. */
@@ -302,6 +325,13 @@
        --medal-silver-rgb: 169, 182, 188;
        --medal-bronze-rgb: 201, 144, 112;

+        /* The artwork is a fixed, bright raster — it cannot be re-graded by
+           token the way the drawn version was. The dark theme instead dims it
+           in CSS (see .heroArt in HomeView.module.css) and fades it into this
+           ground, which is the panel colour rather than the artwork's cream. */
+        --hero-ground: #16222A;
+        --hero-ground-rgb: 22, 34, 42;
+
        --shadow-soft: 0 1px 2px rgba(0, 0, 0, 0.4), 0 2px 8px rgba(0, 0, 0, 0.3);
        --shadow-medium: 0 4px 18px rgba(0, 0, 0, 0.45);
        --shadow-strong: 0 10px 34px rgba(0, 0, 0, 0.55);
@@ -472,7 +502,7 @@ table,
    border-color: var(--action-stronger);
 }

-/* Secondary: brand outline — supporting actions (Add to shortlist) */
+/* Secondary: brand outline — supporting actions (Add to compare) */
 .btn-secondary {
    background: transparent;
    color: var(--brand);
@@ -493,7 +523,7 @@ table,
    color: var(--text-primary);
 }

-/* Active toggle state — the shortlist button once a school is on the list */
+/* Active toggle state — the compare button once a school is on the list */
 .btn-active {
    background: var(--brand-bg);
    color: var(--brand);
@@ -563,6 +593,12 @@ html .leaflet-bar a:hover {
    .main {
        padding: 1rem;
    }
+    /* Tighten the rhythm rather than abandon it — the ratio between the
+       section gap and the header gap stays the same. */
+    :root {
+        --section-gap: 2.75rem;
+        --section-head-gap: 1.15rem;
+    }
 }

 /* Honour the OS setting. Transitions collapse to near-instant rather than
@@ -3,7 +3,9 @@
 * Main landing page with school search and browsing
 */

+import type { Metadata } from 'next';
 import { fetchSchools, fetchFilters, fetchDataInfo } from '@/lib/api';
+import { formatAcademicYear } from '@/lib/utils';
 import { HomeView } from '@/components/HomeView';
 import { HowItWorksSection } from '@/components/HowItWorksSection';
 import { EditorialSection } from '@/components/EditorialSection';
@@ -24,8 +26,14 @@ interface HomePageProps {
  }>;
 }

-export const metadata = {
-  title: 'Home',
+/*
+ * `title` was the bare string 'Home', which is what the browser tab, the
+ * bookmark and the search result all read. `absolute` opts out of the root
+ * layout's "%s | schoolcompare" template so the homepage doesn't end up
+ * saying the brand twice.
+ */
+export const metadata: Metadata = {
+  title: { absolute: 'schoolcompare | Compare every school in England' },
  description: 'Search and compare school performance across England',
 };

@@ -79,14 +87,24 @@ export default async function HomePage({ searchParams }: HomePageProps) {
    }

    const resolvedFilters = filtersData || { local_authorities: [], school_types: [], years: [], phases: [], genders: [], admissions_policies: [] };
-    const total = dataInfo?.total_schools ?? null;
+    // `unique_schools`, not `total_schools` — the latter is not a field this
+    // endpoint returns, and reading it silently yielded null on every request.
+    const total = dataInfo?.unique_schools ?? null;
+    const years = dataInfo?.years_available ?? [];
    return (
      <HomeView
        initialSchools={schoolsData}
        filters={resolvedFilters}
        totalSchools={total}
        howItWorks={hasSearchParams ? null : <HowItWorksSection />}
-        editorial={hasSearchParams ? null : <EditorialSection totalSchools={total} localAuthorityCount={resolvedFilters.local_authorities.length} />}
+        editorial={hasSearchParams ? null : (
+          <EditorialSection
+            totalSchools={total}
+            localAuthorityCount={resolvedFilters.local_authorities.length}
+            earliestYearLabel={years.length ? formatAcademicYear(years[0]) : null}
+            latestYearLabel={years.length ? formatAcademicYear(years[years.length - 1]) : null}
+          />
+        )}
      />
    );
  } catch (error) {
@@ -99,7 +117,14 @@ export default async function HomePage({ searchParams }: HomePageProps) {
        filters={emptyFilters}
        totalSchools={null}
        howItWorks={hasSearchParams ? null : <HowItWorksSection />}
-        editorial={hasSearchParams ? null : <EditorialSection totalSchools={null} localAuthorityCount={0} />}
+        editorial={hasSearchParams ? null : (
+          <EditorialSection
+            totalSchools={null}
+            localAuthorityCount={0}
+            earliestYearLabel={null}
+            latestYearLabel={null}
+          />
+        )}
      />
    );
  }
@@ -81,7 +81,7 @@ const SECONDARY_STEPS: Step[] = [
    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' },
+    tool: { label: 'Compare schools side by side', href: '/compare' },
  },
  {
    date: '31 October',
@@ -126,7 +126,7 @@ const PRIMARY_STEPS: Step[] = [
    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' },
+    tool: { label: 'Compare schools side by side', href: '/compare' },
  },
  {
    date: '15 January',
@@ -5,15 +5,45 @@ import styles from './HomeView.module.css';
 interface EditorialSectionProps {
  totalSchools: number | null;
  localAuthorityCount: number;
+  latestYearLabel: string | null;
+  earliestYearLabel: string | null;
 }

-export function EditorialSection({ totalSchools, localAuthorityCount }: EditorialSectionProps) {
+export function EditorialSection({
+  totalSchools,
+  localAuthorityCount,
+  latestYearLabel,
+  earliestYearLabel,
+}: EditorialSectionProps) {
+  /*
+   * The coverage line replaces a six-row "Coverage at a glance" table.
+   *
+   * That table put six numbers on the page to say one thing, and the headline
+   * row was wrong: it read "24,000+" — its own hardcoded fallback — because
+   * DataInfoResponse declared a `total_schools` field the API does not send
+   * (it sends `unique_schools`). The fetch had succeeded; only that field was
+   * undefined, so the fallback rendered and nothing failed. Every figure here
+   * is now live, and any figure that isn't available is dropped rather than
+   * replaced with a guess.
+   */
+  const coverage = [
+    totalSchools ? `${totalSchools.toLocaleString('en-GB')} schools` : null,
+    localAuthorityCount > 0 ? `${localAuthorityCount} local authorities` : null,
+    earliestYearLabel && latestYearLabel ? `${earliestYearLabel}–${latestYearLabel}` : null,
+  ].filter(Boolean);
+
  return (
-    <section className={styles.editorial}>
-      <div className={styles.editorialGrid}>
+    // No class on the section: the page container owns the vertical rhythm
+    // now, and this band carries its own ground on the card inside it.
+    <section>
+      <div className={styles.editorialCard}>
+        <div className={styles.sectionHead}>
+          <p className={styles.sectionKicker}>About school data</p>
+          <h2 className={styles.sectionHeading}>
+            Making England&apos;s school performance data actually readable
+          </h2>
+        </div>
        <div className={styles.editorialText}>
-          <div className={styles.editorialKicker}>About school data</div>
-          <h2 className={styles.editorialHeading}>Making England&apos;s school performance data actually readable</h2>
          <p>
            School performance data in England is rich but fragmented. The Department for Education and Ofsted
            publish Key Stage 2 SATs, GCSE attainment, inspection outcomes, progress scores, admissions figures
@@ -21,38 +51,14 @@ export function EditorialSection({ totalSchools, localAuthorityCount }: Editoria
          </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
+            average, explains what the numbers mean, and lets you compare schools side by side. Built for
            parents, governors, journalists, and anyone who wants to understand a school without reading a
            full 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>
+        {coverage.length > 0 && (
+          <p className={styles.coverageLine}>{coverage.join(' · ')}</p>
+        )}
      </div>
    </section>
  );
@@ -98,7 +98,11 @@
  font-size: var(--step--1);
  font-weight: 700;
  line-height: 1;
-  color: var(--sage);
+  /* --sage flips with the theme; this band does not (it is teal in both), so
+     the pairing only held in one of them — the dark sage measured 4.08:1 here
+     against a 4.5 floor, on every page. The --on-sunken-* family exists
+     precisely because this surface is theme-invariant. */
+  color: var(--on-sunken-muted);
  text-transform: uppercase;
  letter-spacing: 0.1em;
 }
@@ -49,7 +49,9 @@ export function Footer() {
            <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>
+              {/* "Compare", not "shortlist" — the nav, this link and the
+                  landing page all name the same feature the same way. */}
+              <li><a href="/compare" className={styles.link}>Compare schools</a></li>
              <li><a href="/admissions" className={styles.link}>Admissions guide</a></li>
            </ul>
          </div>
@@ -2,67 +2,180 @@
  width: 100%;
 }

-/* ── Hero ──────────────────────────────────────────────────────────────────
-   A Sand panel: proposition and search on the left, the brand landscape
-   bleeding to the panel's right edge. The illustration is decorative, so on
-   phones it drops to a short band under the content rather than competing
-   with the search for the fold. */
-.heroPanel {
+/* ── Page rhythm ───────────────────────────────────────────────────────────
+   The landing page owns the vertical gap between its bands; no band sets its
+   own top or bottom margin. Previously each one did, and the gaps came out as
+   24 / 32 / 24 / 16 / 48 / 32 / 16px — no scale, which is most of the reason a
+   designed page read as a stack of unrelated strips. If you add a band here,
+   give it padding and a ground, never a margin. */
+.landing {
+  display: flex;
+  flex-direction: column;
+  gap: var(--section-gap);
+}
+
+/* The hero and the four reasons under it are one thought, so they sit closer
+   to each other than to the next band. This is the only place that overrides
+   the page gap, and it does it by grouping rather than by re-spacing. */
+.heroGroup {
+  display: flex;
+  flex-direction: column;
+  gap: 2rem;
+}
+
+/* ── Section header ────────────────────────────────────────────────────────
+   One pattern for every band: kicker, heading, optional aside. */
+.sectionHead {
  display: grid;
-  grid-template-columns: 1.12fr 0.88fr;
-  align-items: stretch;
-  background: var(--bg-secondary);
+  grid-template-columns: 1fr auto;
+  align-items: baseline;
+  column-gap: 1.5rem;
+  margin-bottom: var(--section-head-gap);
+}
+
+.sectionKicker {
+  grid-column: 1 / -1;
+  font-size: var(--step--2);
+  font-weight: 700;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+  color: var(--brand-strong);
+  margin: 0 0 0.35rem;
+}
+
+.sectionHeading {
+  font-family: var(--font-display);
+  font-size: var(--step-3);
+  font-weight: 700;
+  line-height: 1.2;
+  letter-spacing: -0.02em;
+  color: var(--text-primary);
+  margin: 0;
+  max-width: 24ch;
+  text-wrap: balance;
+}
+
+.sectionAside {
+  font-size: var(--step--1);
+  color: var(--text-muted);
+  margin: 0;
+  text-align: right;
+}
+
+@media (max-width: 768px) {
+  .sectionHead {
+    grid-template-columns: 1fr;
+  }
+  .sectionHeading {
+    font-size: var(--step-2);
+    max-width: none;
+  }
+  .sectionAside {
+    text-align: left;
+    margin-top: 0.4rem;
+  }
+}
+
+/* ── Hero ──────────────────────────────────────────────────────────────────
+   The artwork fills the panel and the proposition sits on top of it, in the
+   empty cream area the illustration reserves on its left. It is not a
+   two-column grid: splitting the panel would crop that reserved area off and
+   shrink the scene into a thumbnail, which is the one thing the artwork is
+   composed not to be.
+
+   Below the one-column breakpoint the artwork leaves the background and
+   becomes a band under the search — see the 860px block. */
+.heroPanel {
+  position: relative;
+  isolation: isolate;
+  background: var(--hero-ground);
  border-radius: var(--radius-xl);
  overflow: hidden;
-  margin-bottom: 1.5rem;
 }

 .heroContent {
-  align-self: center;
-  padding: 3rem 1.5rem 3rem 3rem;
+  position: relative;
+  z-index: 2;
+  padding: 3.5rem 1.5rem 3.5rem 3rem;
+  /* Held inside the artwork's cream area. Beyond roughly this width the text
+     runs onto the hillside, where the scrim below is doing all the work. */
+  max-width: min(56%, 40rem);
  min-width: 0;
 }

 .heroArt {
-  position: relative;
-  min-width: 0;
-  /* The scene needs height to read; without a floor it collapses to the
-     content column's height on short viewports. */
-  min-height: 24rem;
-}
-
-.heroArt svg {
  position: absolute;
  inset: 0;
+  z-index: 0;
+}
+
+.heroArt picture,
+.heroArt img {
+  display: block;
  width: 100%;
  height: 100%;
-  display: block;
 }

-.heroTrust {
-  display: flex;
-  align-items: center;
-  gap: 0.7rem;
-  margin-top: 1.4rem;
-  font-size: var(--step--1);
-  color: var(--text-secondary);
+.heroArt img {
+  object-fit: cover;
+  /* Centre keeps the schoolhouse in frame at every desktop panel ratio: the
+     panel runs about 2.1:1 to 2.7:1 against a 1.78:1 image, so cover crops
+     height only, and the school sits well inside the surviving band. */
+  object-position: center;
 }

-.heroTrustDots {
-  display: inline-flex;
-  flex: 0 0 auto;
+/*
+ * Contrast guarantee.
+ *
+ * The artwork's cream area is generous but it is a fixed image on a fluid
+ * panel — as the panel widens the text block and the cream drift apart, and at
+ * some width the headline would sit on hillside green. Rather than tune the
+ * text width per breakpoint and hope, the panel fades its own ground across
+ * the left of the artwork, so the copy always has a known surface under it.
+ *
+ * The gradient starts from --hero-ground, which is sampled from the artwork
+ * itself, so in the light theme this is invisible — it reads as the
+ * illustration, not as an overlay on it.
+ */
+.heroPanel::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  z-index: 1;
+  pointer-events: none;
+  background: linear-gradient(
+    to right,
+    var(--hero-ground) 0%,
+    rgba(var(--hero-ground-rgb), 0.97) 26%,
+    rgba(var(--hero-ground-rgb), 0.72) 44%,
+    rgba(var(--hero-ground-rgb), 0) 62%
+  );
 }

-.heroTrustDot {
-  width: 1.6rem;
-  height: 1.6rem;
-  border-radius: 50%;
-  border: 2px solid var(--bg-secondary);
-  margin-right: -0.55rem;
+/*
+ * Dark theme.
+ *
+ * The artwork is a fixed raster, so unlike the drawn hero it cannot be
+ * re-graded token by token — but the failure it would otherwise reproduce is
+ * the same one: a bright illustration is the brightest object on a near-black
+ * page and out-shouts the H1 and the search box. Dimming it in CSS is the
+ * whole treatment, and the scrim then fades it into the dark panel instead of
+ * into cream.
+ */
+@media (prefers-color-scheme: dark) {
+  .heroArt img {
+    filter: brightness(0.52) saturate(0.72) contrast(1.02);
+  }
+  .heroPanel::before {
+    background: linear-gradient(
+      to right,
+      var(--hero-ground) 0%,
+      rgba(var(--hero-ground-rgb), 0.96) 30%,
+      rgba(var(--hero-ground-rgb), 0.66) 50%,
+      rgba(var(--hero-ground-rgb), 0.15) 78%
+    );
+  }
 }
-.heroTrustDot:nth-child(1) { background: var(--sage); }
-.heroTrustDot:nth-child(2) { background: var(--mustard); }
-.heroTrustDot:nth-child(3) { background: var(--sky); }

 .heroEyebrow {
  display: inline-flex;
@@ -72,7 +185,10 @@
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
-  color: var(--brand);
+  /* --brand on its own 10% tint over Sand measures 4.19:1 — the tint darkens
+     the ground under the label, and the token was specced against the ground,
+     not against the tint. --brand-strong on the same composite is 5.85:1. */
+  color: var(--brand-strong);
  background: rgba(var(--brand-rgb), 0.1);
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
@@ -120,24 +236,40 @@

@media (max-width: 1024px) {
  .heroContent {
-    padding: 2.25rem 1.5rem 2.25rem 2rem;
-  }
-  .heroArt {
-    min-height: 20rem;
+    padding: 2.75rem 1.5rem 2.75rem 2rem;
+    max-width: min(64%, 34rem);
  }
 }

-/* One column: content first, then a short band of landscape. */
+/*
+ * One column: the artwork stops being a background and becomes a band under
+ * the search.
+ *
+ * Overlaying at this width does not work — the panel is too narrow for the
+ * copy to stay inside the artwork's cream area, so the scrim would have to
+ * cover nearly the whole image, which is just a tinted rectangle with a
+ * picture faintly behind it. Below the band, <picture> has already switched
+ * to the pre-cropped file (see Illustration.tsx); this is the layout half of
+ * the same decision.
+ */
@media (max-width: 860px) {
-  .heroPanel {
-    grid-template-columns: 1fr;
-  }
  .heroContent {
    padding: 2rem 1.5rem 1.75rem;
+    max-width: none;
  }
  .heroArt {
-    min-height: 11rem;
-    order: 2;
+    position: static;
+    height: 11rem;
+  }
+  /* The band crop centres the schoolhouse at about 65% across, so squeezing
+     toward 4.9:1 crops the empty sides rather than the subject. */
+  .heroArt img {
+    object-position: 65% center;
+  }
+  /* The scrim exists to protect text sitting on the artwork. Nothing sits on
+     it here, and leaving it would wash the band out. */
+  .heroPanel::before {
+    display: none;
  }
  .heroTitle {
    font-size: var(--step-3);
@@ -150,13 +282,11 @@
 }

 /* Above the fold on phones, every line costs. Drop the eyebrow tag and the
-   long coverage sentence, leaving the proposition and the search — a
-   first-time visitor still gets the trust line beneath the box, which carries
-   the data provenance the coverage sentence used to (audit P1.7, feeds the
-   46% home exit rate). */
+   long coverage sentence, leaving the proposition and the search — the data
+   provenance is carried by the "Official & trusted" prop immediately below
+   the hero (audit P1.7, feeds the 46% home exit rate). */
@media (max-width: 640px) {
  .heroPanel {
-    margin-bottom: 1rem;
    border-radius: var(--radius-lg);
  }
  .heroContent {
@@ -175,12 +305,8 @@
    font-size: 1.75rem;
    margin-bottom: 0.5rem;
  }
-  .heroTrust {
-    margin-top: 1rem;
-    font-size: var(--step--2);
-  }
  .heroArt {
-    min-height: 8.5rem;
+    height: 8.5rem;
  }
 }

@@ -193,7 +319,7 @@
  gap: 1.25rem;
  list-style: none;
  padding: 0;
-  margin: 0 0 2rem;
+  margin: 0;
 }

 .valueProp {
@@ -256,7 +382,6 @@
  .valueProps {
    grid-template-columns: 1fr;
    gap: 0.85rem;
-    margin-bottom: 1.5rem;
  }
 }

@@ -689,86 +814,15 @@
  border-color: var(--brand-strong);
 }

-.exploringRow {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 0.6rem;
-  margin-top: 1rem;
-}
-
-.exploringLabel {
-  font-size: 0.72rem;
-  color: var(--text-muted);
-  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);
-  border: 1px solid var(--border);
-  border-radius: 999px;
-  font-size: 0.82rem;
-  font-weight: 500;
-  color: var(--text-secondary);
-  text-decoration: none;
-  transition: all 0.15s ease;
-}
-
-.exploringChip:hover {
-  border-color: var(--brand);
-  color: var(--brand-strong);
-  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 ─────────────────────────────── */
+/* ── How it works section ─────────────────────────────────────────────────
+   A Sand band, borrowing the hero panel's ground and radius so the page has
+   two anchored bands rather than one designed element and a long tail of
+   unstyled strips. */

 .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-display);
-  font-size: 1.75rem;
-  font-weight: 700;
-  color: var(--text-primary);
-  margin: 0;
-}
-
-.hiwSub {
-  font-size: 0.875rem;
-  color: var(--text-muted);
+  background: var(--bg-secondary);
+  border-radius: var(--radius-xl);
+  padding: 2.5rem 2rem;
 }

 .hiwGrid {
@@ -788,8 +842,19 @@
  gap: 0.9rem;
 }

+/*
+ * The preview panel sits on the card surface, not on Sand.
+ *
+ * Everything inside it is a translucent status or brand tint, and those tokens
+ * are specced to clear AA over --bg-card. Over Sand the same tints composite
+ * darker, which put the report-card chips at 4.22:1 and 4.29:1 against a 4.5
+ * floor — the ratio depended on a ground two levels up. On the card surface
+ * they are 5.69:1 and 5.81:1. The border keeps it reading as an inset frame
+ * now that panel and card share a colour.
+ */
 .hiwVisual {
-  background: var(--bg-secondary);
+  background: var(--bg-card);
+  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 0.9rem;
  min-height: 180px;
@@ -1135,7 +1200,10 @@
 .compareHeadLabel {
  font-family: inherit;
  font-size: 0.48rem;
-  color: var(--text-muted);
+  /* --text-muted on the header row's tint is 4.45:1 in the dark theme —
+     under the floor by a hair, because the tint darkens the ground beneath
+     the label. --text-secondary clears it on both grounds. */
+  color: var(--text-secondary);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
@@ -1183,12 +1251,9 @@
  .hiwGrid {
    grid-template-columns: 1fr;
  }
-  .hiwHeader {
-    flex-direction: column;
-    align-items: flex-start;
-  }
-  .hiwHeading {
-    font-size: 1.4rem;
+  .howItWorks {
+    padding: 1.75rem 1.25rem;
+    border-radius: var(--radius-lg);
  }
 }

@@ -1212,18 +1277,29 @@

 /* ── Editorial section ───────────────────────────────── */

-.editorial {
-  padding: 2rem 0 3rem;
-}
-
-.editorialGrid {
+/* Heading beside the prose rather than above it. The fact box used to occupy
+   the right-hand column; with it gone, a single column left the card half
+   empty, because the prose is capped at a 62ch reading measure and the card
+   is not. */
+.editorialCard {
  display: grid;
-  grid-template-columns: 1.4fr 1fr;
-  gap: 2rem;
-  padding: 1.75rem;
+  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
+  column-gap: 3rem;
+  padding: 2rem 2.25rem;
  background: var(--bg-card);
  border: 1px solid var(--border);
-  border-radius: 14px;
+  border-radius: var(--radius-lg);
+}
+
+/* The shared header pattern spaces itself for a header sitting above its
+   content; here it sits beside it. */
+.editorialCard .sectionHead {
+  margin-bottom: 0;
+  display: block;
+}
+
+.editorialCard .coverageLine {
+  grid-column: 1 / -1;
 }

 .editorialText {
@@ -1232,23 +1308,6 @@
  gap: 0.65rem;
 }

-.editorialKicker {
-  font-size: 0.68rem;
-  color: var(--brand-strong);
-  font-weight: 700;
-  letter-spacing: 0.1em;
-  text-transform: uppercase;
-}
-
-.editorialHeading {
-  font-family: var(--font-display);
-  font-size: 1.35rem;
-  font-weight: 700;
-  color: var(--text-primary);
-  margin: 0;
-  line-height: 1.25;
-}
-
 /* Running prose is the one place the serif appears. Slightly larger than the
   UI around it because Literata's x-height sits lower than the grotesque's. */
 .editorialText p {
@@ -1260,53 +1319,25 @@
  max-width: 62ch;
 }

-.factbox {
-  background: var(--bg-secondary);
-  border-radius: 10px;
-  padding: 1.25rem;
-  display: flex;
-  flex-direction: column;
-  gap: 0;
-}
-
-.factboxHeading {
-  font-family: var(--font-display);
-  font-size: 1rem;
-  font-weight: 700;
-  color: var(--text-primary);
-  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);
-  font-size: 0.85rem;
-  gap: 0.5rem;
-}
-
-.factRow:last-child {
-  border-bottom: none;
-}
-
-.factKey {
+/* One line of live coverage figures, replacing a six-row table whose headline
+   number was its own hardcoded fallback. Quiet by design: it is provenance,
+   not a claim. */
+.coverageLine {
+  margin: 1.25rem 0 0;
+  padding-top: 1rem;
+  border-top: 1px solid var(--border);
+  font-size: var(--step--1);
+  font-variant-numeric: tabular-nums;
  color: var(--text-muted);
 }

-.factVal {
-  font-family: var(--font-display);
-  font-weight: 700;
-  color: var(--text-primary);
-  text-align: right;
-}
-
@media (max-width: 768px) {
-  .editorialGrid {
+  .editorialCard {
    grid-template-columns: 1fr;
    padding: 1.25rem;
-    gap: 1.25rem;
+  }
+  .editorialCard .sectionHead {
+    margin-bottom: var(--section-head-gap);
  }
 }

@@ -1385,189 +1416,137 @@
 .loadMoreButton {
  min-width: 160px;
 }
-
 /* =========================================================
-   Admissions Countdown Strip
+   Next admissions deadline
+
+   One bar, replacing four equally-weighted countdown cards. Those gave the
+   page's largest numeral to things up to 245 days away, and two of the four
+   counted down to offer days — dates you receive something on, which cannot
+   be missed. The headline is the next real deadline; the rest stay on the
+   page as one supporting line, so no fact was lost, only its weight.
   ========================================================= */

-.admissionsStrip {
-  padding: 1.5rem 0 2rem;
-  border-top: 1px solid var(--border);
-}
-
-.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);
-}
-
-.stripCta {
-  font-size: 0.82rem;
-  color: var(--brand);
-  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);
-  border: 1px solid var(--border);
-  border-radius: 12px;
-  padding: 1rem 1.1rem 0.9rem;
-  box-shadow: 0 2px 8px rgba(var(--shadow-rgb), 0.06);
+.admissions {
  display: flex;
  flex-direction: column;
-  gap: 0.2rem;
+  gap: 0.85rem;
+}
+
+.nextDeadline {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 1.5rem;
  position: relative;
  overflow: hidden;
+  padding: 1.15rem 1.5rem 1.15rem 1.75rem;
+  background: var(--bg-card);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-lg);
+  box-shadow: var(--shadow-soft);
+  color: inherit;
+  text-decoration: none;
+  transition: border-color var(--transition), box-shadow var(--transition);
 }

-.countdownChip::before {
+/* A brand rule down the leading edge — the same device the countdown cards
+   used along their top edge, kept so the band still reads as admissions. */
+.nextDeadline::before {
  content: '';
  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  height: 3px;
-  border-radius: 12px 12px 0 0;
-}
-
-.countdownChipDeadline::before {
+  inset: 0 auto 0 0;
+  width: 5px;
  background: var(--brand);
 }

-.countdownChipOffer::before {
-  background: var(--status-above);
+.nextDeadline:hover {
+  border-color: var(--border-strong);
+  box-shadow: var(--shadow-medium);
 }

-.countdownChipUrgent {
-  border-color: rgba(var(--status-below-rgb), 0.4);
-  background: rgba(var(--status-below-rgb), 0.04);
-}
-
-.chipTrack {
+.nextDeadlineBody {
  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;
+  flex-direction: column;
+  gap: 0.15rem;
+  min-width: 0;
 }

-.chipTrackDeadline {
+.nextDeadlineKicker {
+  font-size: var(--step--2);
+  font-weight: 700;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
  color: var(--brand-strong);
 }

-.chipTrackOffer {
-  color: var(--status-above);
+.nextDeadlineTitle {
+  font-family: var(--font-display);
+  font-size: var(--step-1);
+  font-weight: 700;
+  color: var(--text-primary);
+  line-height: 1.25;
 }

-.chipTrackDot {
-  width: 5px;
-  height: 5px;
-  border-radius: 50%;
-  background: currentColor;
+.nextDeadlineDate {
+  font-size: var(--step--1);
+  color: var(--text-muted);
+}
+
+.nextDeadlineCount {
+  display: flex;
+  align-items: baseline;
+  gap: 0.35rem;
  flex-shrink: 0;
 }

-.chipDays {
-  font-variant-numeric: tabular-nums;
+.nextDeadlineDays {
  font-family: var(--font-display);
-  font-size: 2.6rem;
+  font-size: var(--step-3);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
+  font-variant-numeric: tabular-nums;
+  color: var(--brand-strong);
 }

-.countdownChipDeadline .chipDays,
-.countdownChipUrgent .chipDays {
+.nextDeadlineUnit {
+  font-size: var(--step--1);
+  color: var(--text-muted);
+}
+
+/* Inside a fortnight the count changes hue rather than size, so urgency is
+   legible without the bar growing. Terracotta is the status hue, not the
+   action hue — this is a state, not a button. */
+.nextDeadlineUrgent .nextDeadlineDays {
  color: var(--status-below);
 }

-.countdownChipOffer .chipDays {
-  color: var(--status-above);
-}
-
-.chipDaysUnit {
-  font-family: var(--font-ui);
-  font-size: 0.78rem;
-  font-weight: 500;
+.laterDates {
+  font-size: var(--step--1);
  color: var(--text-muted);
-  margin-left: 0.2rem;
-  vertical-align: bottom;
-  line-height: 2;
+  line-height: 1.6;
+  margin: 0;
 }

-.chipMilestone {
-  font-size: 0.85rem;
+.laterDatesLink {
+  color: var(--brand);
  font-weight: 600;
-  color: var(--text-primary);
-  line-height: 1.25;
-  margin-top: 0.1rem;
+  text-decoration: none;
+  white-space: nowrap;
 }

-.chipDate {
-  font-size: 0.75rem;
-  color: var(--text-muted);
-  margin-top: 0.05rem;
+.laterDatesLink:hover {
+  text-decoration: underline;
 }

-@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;
+  .nextDeadline {
+    align-items: flex-start;
+    flex-direction: column;
    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);
+    padding: 1rem 1.1rem 1rem 1.35rem;
  }
-  .countdownRail::-webkit-scrollbar {
-    display: none;
-  }
-  .countdownChip {
-    flex: 0 0 auto;
-    width: 78%;
-    min-width: 220px;
-    scroll-snap-align: start;
-  }
-  .chipTrack {
-    font-size: 0.7rem;
+  .nextDeadlineCount {
+    align-items: baseline;
  }
 }
@@ -40,13 +40,22 @@ function daysUntil(month: number, day: number): number {
  return Math.round((target.getTime() - today.getTime()) / 86_400_000);
 }

-function formatCountdownDate(month: number, day: number): string {
+function nextOccurrence(month: number, day: number): Date {
  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' });
+  const target = new Date(y, month - 1, day);
+  return target < today ? new Date(y + 1, month - 1, day) : target;
+}
+
+function formatCountdownDate(month: number, day: number): string {
+  return nextOccurrence(month, day)
+    .toLocaleDateString('en-GB', { weekday: 'short', day: 'numeric', month: 'long', year: 'numeric' });
+}
+
+function formatShortDate(month: number, day: number): string {
+  return nextOccurrence(month, day)
+    .toLocaleDateString('en-GB', { day: 'numeric', month: 'short', year: 'numeric' });
 }

 interface CountdownChipData {
@@ -57,6 +66,16 @@ interface CountdownChipData {
  day: number;
 }

+interface AdmissionsMilestone {
+  chip: CountdownChipData;
+  /** Whole days from today. Always present — computed during render. */
+  days: number;
+  /** "Sat, 31 October 2026" — for the headline bar. */
+  dateLabel: string;
+  /** "31 Oct 2026" — for the supporting line, where four dates share a row. */
+  shortDate: string;
+}
+
 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 },
@@ -125,7 +144,14 @@ interface ValueProp {
 * The brand guideline's fourth value prop is "Save & revisit" (shortlisting /
 * favourites). That feature does not exist in this product, so it is
 * deliberately replaced by the admissions-deadline prop below — which is real,
- * and is backed by the countdown strip further down this page.
+ * and is backed by the next-deadline bar further down this page.
+ *
+ * Every claim here must name something the product actually does. Two of the
+ * four previously did not: "up to three schools" contradicted MAX_SCHOOLS = 5
+ * in context/ComparisonProvider.tsx (and the card further down the page, which
+ * correctly said five), and "class sizes" described data the codebase has never
+ * held — grep for it and this line was the only hit. Both are corrected below
+ * against the real fields, which live in components/school/InclusionSection.tsx.
 */
 const VALUE_PROPS: ValueProp[] = [
  {
@@ -138,13 +164,13 @@ const VALUE_PROPS: ValueProp[] = [
    icon: <BarsIcon />,
    tintClass: styles.propIconCompare,
    title: 'Easy to compare',
-    body: 'Up to three schools side by side, on the measures that matter.',
+    body: 'Up to five schools side by side, on the measures that matter.',
  },
  {
    icon: <HeartIcon />,
    tintClass: styles.propIconContext,
    title: 'Beyond the numbers',
-    body: 'Class sizes, SEN support and local context, not just results.',
+    body: 'SEN support, pupil premium and attendance — not just results.',
  },
  {
    icon: <CalendarIcon />,
@@ -174,9 +200,30 @@ export function HomeView({ initialSchools, filters, totalSchools, howItWorks, ed
  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 }))
-  );
+  /*
+   * Computed during render, on the server as well as the client, so the
+   * deadline bar is in the first HTML rather than appearing on hydrate.
+   *
+   * The previous version deferred this to an effect to dodge a hydration
+   * mismatch, which meant the section had to reserve its own height — and the
+   * reservation was a single guessed number for a block whose supporting line
+   * wraps to a different height at every width. Measured, it was short at
+   * every breakpoint, shifting the page by up to 108px on a phone.
+   *
+   * The mismatch it was dodging is real but tiny: a server rendering at
+   * 23:59:59 and a client hydrating at 00:00:01 disagree by one day. That is
+   * confined to two text nodes, which carry suppressHydrationWarning below.
+   */
+  const [milestones] = useState<AdmissionsMilestone[]>(() => {
+    const measured = ADMISSIONS_CHIPS.map(chip => ({
+      chip,
+      days: daysUntil(chip.month, chip.day),
+      dateLabel: formatCountdownDate(chip.month, chip.day),
+      shortDate: formatShortDate(chip.month, chip.day),
+    }));
+    measured.sort((a, b) => a.days - b.days);
+    return measured;
+  });

  const hasSearch = searchParams.get('search') || searchParams.get('postcode');
  const isLocationSearch = !!searchParams.get('postcode');
@@ -239,13 +286,6 @@ export function HomeView({ initialSchools, filters, totalSchools, howItWorks, ed
      .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 });
@@ -334,6 +374,28 @@ export function HomeView({ initialSchools, filters, totalSchools, howItWorks, ed
    });
  }, [initialSchools.total, isSearchActive, searchParams]);

+  /*
+   * The coverage figure, or nothing at all.
+   *
+   * This used to be the string "24,000+", hardcoded in three places while the
+   * database held 27,230 — and the fact box that was meant to show the live
+   * number silently rendered its fallback, because DataInfoResponse declared a
+   * `total_schools` field the API has never sent. Now there is one source: if
+   * the real count is unavailable the sentence simply omits it rather than
+   * inventing a floor.
+   */
+  const coverageLabel = totalSchools ? totalSchools.toLocaleString('en-GB') : null;
+
+  /*
+   * The headline milestone is the next thing a parent can actually miss — an
+   * application deadline. Offer days are dates you receive something on, so
+   * they belong in the supporting line, not in the page's largest numeral.
+   * Four equally-sized cards counting down to things 245 days away was the
+   * loudest element on the page and asked nothing of anyone.
+   */
+  const nextDeadline = milestones.find(m => m.chip.type === 'deadline') ?? null;
+  const laterMilestones = milestones.filter(m => m !== nextDeadline);
+
  // Wrap addSchool with `from: 'search'` attribution so funnel reports can
  // split which surface drives compare adds.
  const addSchoolFromSearch = useCallback((school: School) => {
@@ -346,12 +408,18 @@ export function HomeView({ initialSchools, filters, totalSchools, howItWorks, ed
  }, [addSchool, selectedSchools.length]);

  return (
-    <div className={styles.homeView}>
+    /* The landing arrangement owns its own vertical rhythm (one gap, set in
+       CSS); the search arrangement is a filter bar directly above its results
+       and wants none of it. */
+    <div className={isSearchActive ? styles.homeView : `${styles.homeView} ${styles.landing}`}>
      {/* Hero: a Sand panel with the proposition and the search on the left and
          the brand landscape bleeding to the panel edge on the right. The
          search lives inside the panel here and above the results elsewhere,
-          which is why FilterBar is rendered in two places rather than moved. */}
+          which is why FilterBar is rendered in two places rather than moved.
+          The hero and the four value props are one group, so they sit closer
+          together than the page's section gap. */}
      {!isSearchActive ? (
+        <div className={styles.heroGroup}>
        <section className={styles.heroPanel}>
          <div className={styles.heroContent}>
            <span className={styles.heroEyebrow}>
@@ -369,7 +437,7 @@ export function HomeView({ initialSchools, filters, totalSchools, howItWorks, ed
                  every line above the fold costs. */}
              <span className={styles.heroDescriptionFull}>
                {' '}Key Stage 2 SATs, GCSE results, Ofsted grades, progress scores
-                and admissions data for <strong>24,000+ schools</strong> — side by
+                and admissions data{coverageLabel && <> for <strong>{coverageLabel} schools</strong></>} — side by
                side, in one place.
              </span>
            </p>
@@ -383,20 +451,35 @@ export function HomeView({ initialSchools, filters, totalSchools, howItWorks, ed
              geoError={geoError}
            />

-            <p className={styles.heroTrust}>
-              <span className={styles.heroTrustDots} aria-hidden="true">
-                <span className={styles.heroTrustDot} />
-                <span className={styles.heroTrustDot} />
-                <span className={styles.heroTrustDot} />
-              </span>
-              Built on official DfE and Ofsted data — 24,000+ schools
-            </p>
          </div>

+          {/*
+            Rendered after the content on purpose. On desktop it is absolutely
+            positioned behind the panel, so order does not matter; below the
+            one-column breakpoint it returns to normal flow, where DOM order is
+            what puts the band under the search rather than above the headline.
+          */}
          <div className={styles.heroArt}>
            <HeroIllustration />
          </div>
        </section>
+
+        {/* Why this site, in four lines. These titles are labels on a list,
+            not section headings — as <h2> they outranked the page's real
+            headings in the document outline and gave a screen-reader user
+            four false landmarks before any content. */}
+        <ul className={styles.valueProps}>
+          {VALUE_PROPS.map(({ icon, tintClass, title, body }) => (
+            <li key={title} className={styles.valueProp}>
+              <span className={`${styles.propIcon} ${tintClass}`}>{icon}</span>
+              <div>
+                <p className={styles.propTitle}>{title}</p>
+                <p className={styles.propBody}>{body}</p>
+              </div>
+            </li>
+          ))}
+        </ul>
+        </div>
      ) : (
        <FilterBar
          filters={filters}
@@ -408,94 +491,55 @@ export function HomeView({ initialSchools, filters, totalSchools, howItWorks, ed
        />
      )}

-      {/* Why this site, in four lines. Only on the landing page. */}
+      {/* Next admissions deadline — one bar, not four cards. */}
      {!isSearchActive && (
-        <ul className={styles.valueProps}>
-          {VALUE_PROPS.map(({ icon, tintClass, title, body }) => (
-            <li key={title} className={styles.valueProp}>
-              <span className={`${styles.propIcon} ${tintClass}`}>{icon}</span>
-              <div>
-                <h2 className={styles.propTitle}>{title}</h2>
-                <p className={styles.propBody}>{body}</p>
-              </div>
-            </li>
-          ))}
-        </ul>
-      )}
-
-      {/* 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}
+        <section className={styles.admissions} aria-label="Admissions deadlines">
+          {nextDeadline && (
+            <>
+              <a
+                href="/admissions"
+                className={
+                  nextDeadline.days <= 14
+                    ? `${styles.nextDeadline} ${styles.nextDeadlineUrgent}`
+                    : styles.nextDeadline
+                }
+              >
+                <span className={styles.nextDeadlineBody}>
+                  <span className={styles.nextDeadlineKicker}>
+                    Next admissions deadline · {nextDeadline.chip.track.split(' · ')[0]}
                  </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>
+                  <span className={styles.nextDeadlineTitle}>{nextDeadline.chip.milestone}</span>
+                  <span className={styles.nextDeadlineDate} suppressHydrationWarning>
+                    {nextDeadline.dateLabel}
+                  </span>
+                </span>
+                <span className={styles.nextDeadlineCount}>
+                  <span className={styles.nextDeadlineDays} suppressHydrationWarning>
+                    {nextDeadline.days === 0 ? 'Today' : nextDeadline.days}
+                  </span>
+                  {nextDeadline.days !== 0 && (
+                    <span className={styles.nextDeadlineUnit}>days left</span>
+                  )}
+                </span>
+              </a>
+              <p className={styles.laterDates} suppressHydrationWarning>
+                {laterMilestones.map(m => `${m.chip.milestone} ${m.shortDate}`).join(' · ')}
+                {' '}
+                <a href="/admissions" className={styles.laterDatesLink}>Full admissions guide →</a>
+              </p>
+            </>
+          )}
        </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 */}
+      {/* Results Section. Skipped entirely on the landing page when there is
+          nothing to list — an empty <section> is still a flex child, so it was
+          contributing a full section gap of blank space above the footer. */}
+      {(isSearchActive || initialSchools.schools.length > 0) && (
      <section className={`${styles.results} ${resultsView === 'map' && isLocationSearch ? styles.mapViewResults : ''}`}>
        {!hasSearch && initialSchools.schools.length > 0 && (
          <div className={styles.sectionHeader}>
@@ -681,6 +725,7 @@ export function HomeView({ initialSchools, filters, totalSchools, howItWorks, ed
          </>
        )}
      </section>
+      )}
    </div>
  );
 }
@@ -13,6 +13,16 @@ export function HowItWorksSection() {
    { subj: 'Writing', exp: 81, exc: 26, nat: 72, excLabel: 'Greater depth' },
    { subj: 'Maths', exp: 85, exc: 41, nat: 74, excLabel: 'Higher std' },
  ];
+  /*
+   * The columns are deliberately unnamed.
+   *
+   * They previously carried two real school names — "Our Lady Queen of Heaven"
+   * and "St Mary's Catholic Primary" — beside invented results and invented
+   * Ofsted grades. On a site whose entire proposition is official DfE and
+   * Ofsted data, publishing made-up figures against identifiable schools is
+   * the one thing it cannot do, and no illustrative intent survives being
+   * screenshotted. Generic labels make the layout point just as well.
+   */
  const compareRows = [
    { label: 'Reading, Writing & Maths', a: '70%', b: '64%', aHi: true },
    { label: 'Higher standard (RWM)', a: '13%', b: '6%', aHi: true },
@@ -29,9 +39,15 @@ export function HowItWorksSection() {

  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>
+      {/* One header pattern across every band on this page: kicker, heading,
+          optional aside. The page previously ran four different treatments
+          (two uppercase micro-labels — one left, one centred — a large heading
+          with right-aligned grey text, and a kicker-plus-heading), which is
+          most of why a designed page read as a stack of unrelated strips. */}
+      <div className={styles.sectionHead}>
+        <p className={styles.sectionKicker}>Every school page</p>
+        <h2 className={styles.sectionHeading}>What you&apos;ll see on every school</h2>
+        <p className={styles.sectionAside}>Primary or secondary — the page adapts to the phase</p>
      </div>
      <div className={styles.hiwGrid}>
        {/* Card 1 — Performance */}
@@ -117,8 +133,8 @@ export function HowItWorksSection() {
            <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 className={styles.compareHeadCell}>School A</div>
+                <div className={styles.compareHeadCell}>School B</div>
              </div>
              {compareRows.map(({ label, a, b, aHi }) => (
                <div key={label} className={styles.compareRow}>
@@ -127,13 +143,16 @@ export function HowItWorksSection() {
                  <span className={styles.compareRowVal}>{b}</span>
                </div>
              ))}
-              <div className={styles.compareFoot}>+ pin up to 5 schools</div>
+              <div className={styles.compareFoot}>+ compare 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 className={styles.hiwTitle}>Side by side</div>
+            {/* One verb for one feature. The site previously called this
+                "compare" in the nav, "shortlist" in the footer and "pin" here,
+                which reads as three separate things it does not have. */}
+            <p className={styles.hiwDesc}>Compare up to five schools and every metric aligns in the same columns — works for primary and secondary alike.</p>
          </div>
        </div>
      </div>
@@ -1,146 +1,103 @@
 /**
- * Brand illustration — the landing hero's landscape.
+ * The landing hero artwork.
 *
- * Guideline rules for illustration: no people or faces, soft shapes, rounded
- * corners, minimal detail, maximum clarity. The scene reads as "the journey to
- * a school" — a winding path up through layered hills to a small schoolhouse,
- * with a pin marking where you are.
+ * This is the supplied illustration, not a drawing of one — see
+ * assets/hero-source.png and scripts/build-hero-images.js, which produces
+ * everything under public/brand/hero-*. Regenerate rather than hand-editing.
 *
- * Deliberately server-safe: no 'use client', no hooks, no event handlers, so
- * it renders in the RSC pass and never reaches the client bundle.
+ * Server-safe by construction: no 'use client', no hooks, no handlers, so it
+ * renders in the RSC pass and never reaches the client bundle.
+ *
+ * TWO CROPS, ONE <picture>
+ * ------------------------
+ * The slot is two different shapes. On desktop the artwork sits behind the
+ * whole panel at roughly 2.1:1 → 2.7:1, with the headline over the empty cream
+ * area the illustration reserves on its left. Below the one-column breakpoint
+ * it becomes a band between 2.6:1 and 4.9:1, under the search rather than
+ * behind it.
+ *
+ * A single file under `object-fit: cover` centre-crops, and at the band's
+ * extreme that slices a strip through the middle of the scene and loses the
+ * schoolhouse — exactly how the previous SVG hero failed on phones. So the
+ * <source media> switches crop, not just resolution: `band` is pre-cropped
+ * around the school and is already near 2.6:1, so the narrow band barely
+ * crops it further.
+ *
+ * `object-position` is set in CSS per breakpoint and is load-bearing — see
+ * .heroArt in HomeView.module.css.
+ *
+ * The artwork is decorative: the proposition beside it carries the meaning, so
+ * alt is empty and it is hidden from assistive tech rather than described.
 */

 /*
- * These hex values mirror the brand palette in app/globals.css — --sky,
- * --sage, --brand, --coral, --sand and the tints/shades the scene needs
- * around them. They are written literally on purpose: an illustration is
- * artwork, not themed UI. Recolouring it per theme would break the picture,
- * so it keeps one fixed, light palette in both themes (it sits on a Sand
- * panel in light mode and reads as a framed image in dark mode).
+ * The panel is not the viewport. `.main` is capped at 1400px with 1.5rem of
+ * padding (1rem under 768px), so the artwork's box is that minus the padding —
+ * describing it as 100vw over-requests by ~48px worth of candidate at every
+ * width, which on a slow connection is a larger file than needed for the LCP
+ * element.
 */
-const SKY_HIGH = '#DAEDF8';
-const SKY_LOW = '#EFF8FB';
-const CLOUD = '#FFFFFF';
+const SIZES = '(min-width: 1400px) 1352px, (min-width: 769px) calc(100vw - 3rem), calc(100vw - 2rem)';

-const HILL_FAR = '#D6EDE2'; // --sage, lightened
-const HILL_MID = '#A7D7C5'; // --sage, exact
-const HILL_NEAR = '#7FC3AC';
-const HILL_FRONT = '#5BA88F'; // --sage darkened toward --brand
-
-const PATH_FILL = '#FAF6EE'; // --sand, lightened
-const PATH_EDGE = '#E6DAC2'; // --sand, darkened
-
-const SCHOOL_WALL = '#FCE8C3'; // cream
-const SCHOOL_ROOF = '#F0A868'; // warm orange
-const SCHOOL_DOOR = '#0F766E'; // --brand, exact
-const SCHOOL_WINDOW = '#C7EBF5'; // --sky, exact
-const SCHOOL_CLOCK = '#FAFAF8'; // --bg-primary (Warm White)
-const FLAGPOLE = '#8FA3AE';
-const PENNANT = '#F97360'; // --coral, exact
-
-const TREE_DARK = '#2E7D6B';
-const TREE_MID = '#3E8C74';
-const TREE_LIGHT = '#4A9E85';
-const TREE_PALE = '#7FC3AC';
-
-const PIN = '#F97360'; // --coral, exact
-const PIN_EYE = '#FFFFFF';
-
-/** Scoped so the gradient id can't collide with another inline SVG. */
-const SKY_GRADIENT_ID = 'sc-hero-sky';
+/** Intrinsic size of the wide crop — the aspect hint that prevents reflow. */
+const WIDE_W = 1672;
+const WIDE_H = 941;

 export function HeroIllustration() {
  return (
-    <svg viewBox="0 0 540 520" preserveAspectRatio="xMidYMax slice" aria-hidden="true" focusable="false">
-      <defs>
-        <linearGradient id={SKY_GRADIENT_ID} x1="0" y1="0" x2="0" y2="1">
-          <stop offset="0" stopColor={SKY_HIGH} />
-          <stop offset="1" stopColor={SKY_LOW} />
-        </linearGradient>
-      </defs>
-
-      {/* Sky */}
-      <rect width="540" height="520" fill={`url(#${SKY_GRADIENT_ID})`} />
-
-      {/* Two soft clouds, each a pair of overlapping ellipses */}
-      <g fill={CLOUD} opacity="0.85">
-        <ellipse cx="96" cy="86" rx="32" ry="15" />
-        <ellipse cx="122" cy="79" rx="23" ry="18" />
-        <ellipse cx="418" cy="58" rx="27" ry="13" />
-        <ellipse cx="439" cy="52" rx="19" ry="14" />
-      </g>
-
-      {/* Four layered rolling hills, palest and furthest first */}
-      <path d="M0 300 C 90 264 168 294 246 276 C 330 256 410 282 540 254 L540 520 L0 520 Z" fill={HILL_FAR} />
-      <path d="M0 344 C 104 308 186 340 268 324 C 356 306 452 332 540 306 L540 520 L0 520 Z" fill={HILL_MID} />
-      <path d="M0 408 C 118 378 214 410 306 392 C 400 374 470 398 540 382 L540 520 L0 520 Z" fill={HILL_NEAR} />
-      <path d="M0 468 C 130 446 236 474 340 458 C 432 444 486 462 540 452 L540 520 L0 520 Z" fill={HILL_FRONT} />
-
-      {/* Winding cream path, with a dotted edge for a little texture */}
-      <path
-        d="M214 520 C 202 466 254 448 276 424 C 298 400 274 378 254 366 C 230 352 244 328 276 316"
-        stroke={PATH_FILL}
-        strokeWidth="18"
-        fill="none"
-        strokeLinecap="round"
+    <picture>
+      {/* Band crop first: <source> is first-match-wins, so the narrow-viewport
+          rules have to precede the unconstrained desktop ones. */}
+      <source
+        media="(max-width: 860px)"
+        type="image/avif"
+        srcSet="/brand/hero-band-500.avif 500w, /brand/hero-band-700.avif 700w, /brand/hero-band-972.avif 972w"
+        sizes={SIZES}
      />
-      <path
-        d="M214 520 C 202 466 254 448 276 424 C 298 400 274 378 254 366 C 230 352 244 328 276 316"
-        stroke={PATH_EDGE}
-        strokeWidth="18"
-        fill="none"
-        strokeLinecap="butt"
-        strokeLinejoin="round"
-        strokeDasharray="0.5 26"
-        opacity="0.5"
+      <source
+        media="(max-width: 860px)"
+        type="image/webp"
+        srcSet="/brand/hero-band-500.webp 500w, /brand/hero-band-700.webp 700w, /brand/hero-band-972.webp 972w"
+        sizes={SIZES}
      />
+      {/*
+        The band's JPEG, and the reason it exists.

-      {/* The school at the top of the path */}
-      <g transform="translate(276 232)">
-        <rect x="12" y="34" width="98" height="58" rx="4" fill={SCHOOL_WALL} />
-        <path d="M2 36 L61 6 L120 36 Z" fill={SCHOOL_ROOF} />
-        <rect x="54" y="62" width="20" height="30" rx="2" fill={SCHOOL_DOOR} />
-        <g fill={SCHOOL_WINDOW}>
-          <rect x="24" y="46" width="16" height="14" rx="2" />
-          <rect x="86" y="46" width="16" height="14" rx="2" />
-          <rect x="24" y="70" width="16" height="12" rx="2" />
-          <rect x="86" y="70" width="16" height="12" rx="2" />
-        </g>
-        {/* Flagpole and coral pennant */}
-        <rect x="59.5" y="-14" width="2.5" height="20" fill={FLAGPOLE} />
-        <path d="M62 -13 L78 -8.5 L62 -4 Z" fill={PENNANT} />
-        {/* Clock in the gable */}
-        <circle cx="61" cy="24" r="6.5" fill={SCHOOL_CLOCK} />
-        <path d="M61 20.5 v7 M57.5 24 h7" stroke={SCHOOL_DOOR} strokeWidth="1.5" strokeLinecap="round" />
-      </g>
-
-      {/* Scattered rounded trees */}
-      <g fill={TREE_DARK}>
-        <circle cx="104" cy="372" r="27" />
-        <circle cx="136" cy="386" r="19" />
-        <circle cx="470" cy="336" r="23" />
-      </g>
-      <g fill={TREE_LIGHT}>
-        <circle cx="78" cy="394" r="21" />
-        <circle cx="492" cy="358" r="17" />
-        <circle cx="176" cy="420" r="18" />
-      </g>
-      <g fill={TREE_MID}>
-        <ellipse cx="44" cy="336" rx="15" ry="22" />
-        <ellipse cx="508" cy="296" rx="13" ry="18" />
-        <ellipse cx="150" cy="342" rx="12" ry="17" />
-      </g>
-      <g fill={TREE_PALE} opacity="0.9">
-        <circle cx="410" cy="420" r="16" />
-        <circle cx="438" cy="430" r="12" />
-        <circle cx="120" cy="470" r="14" />
-      </g>
-
-      {/* Location pin — you are here, the path leads up to the school */}
-      <g transform="translate(196 372)">
-        <path d="M21 48 C21 48 42 26 42 15.5 A21 21 0 1 0 0 15.5 C0 26 21 48 21 48 Z" fill={PIN} />
-        <circle cx="21" cy="15.5" r="8" fill={PIN_EYE} />
-      </g>
-    </svg>
+        <img src> cannot vary by viewport, so it is always the wide crop. A
+        browser that takes neither AVIF nor WebP would therefore fall through
+        to the desktop frame on a phone and lose the schoolhouse — the exact
+        failure this whole component is arranged to prevent, surviving in the
+        one path nobody looks at. No `type` here, so it matches anywhere the
+        media query does, and it sits after the modern formats so they still
+        win where supported.
+      */}
+      <source media="(max-width: 860px)" srcSet="/brand/hero-band-700.jpg" />
+      <source
+        type="image/avif"
+        srcSet="/brand/hero-wide-900.avif 900w, /brand/hero-wide-1200.avif 1200w, /brand/hero-wide-1672.avif 1672w"
+        sizes={SIZES}
+      />
+      <source
+        type="image/webp"
+        srcSet="/brand/hero-wide-900.webp 900w, /brand/hero-wide-1200.webp 1200w, /brand/hero-wide-1672.webp 1672w"
+        sizes={SIZES}
+      />
+      {/*
+        The hero is the largest thing above the fold, so it is almost certainly
+        the LCP element: fetchPriority high, and never lazy. eslint's
+        no-img-element wants next/image, which cannot art-direct between two
+        different crops — that is the whole point of the <picture> above.
+      */}
+      {/* eslint-disable-next-line @next/next/no-img-element */}
+      <img
+        src="/brand/hero-wide-1200.jpg"
+        alt=""
+        aria-hidden="true"
+        width={WIDE_W}
+        height={WIDE_H}
+        decoding="async"
+        fetchPriority="high"
+      />
+    </picture>
  );
 }
@@ -444,11 +444,27 @@ export interface MetricsResponse {
  metrics: MetricDefinition[];
 }

+/**
+ * GET /api/data-info.
+ *
+ * The school count field is `unique_schools`. This interface declared
+ * `total_schools` instead — a field the API has never sent — so every read of
+ * it was `undefined` at runtime while type-checking cleanly, and the landing
+ * page silently fell back to a hardcoded "24,000+" against a real 27,230.
+ * Nothing threw and no test failed, because the interface, not the code, was
+ * the thing that was wrong. Keep these names matched to backend/app.py.
+ */
 export interface DataInfoResponse {
-  total_schools: number;
-  years_available: number[];
-  latest_year: number;
-  total_records: number;
+  status: 'loaded' | 'no_data';
+  data_source: string;
+  /** Absent on the `no_data` branch — see backend/app.py:1015. Optional here
+   *  so callers are forced to handle the case instead of reading undefined. */
+  unique_schools?: number;
+  years_available?: number[];
+  total_records?: number;
+  schools_per_year?: Record<string, number>;
+  local_authorities?: Record<string, number>;
+  message?: string;
 }

 // ============================================================================
@@ -31,7 +31,8 @@
        "@types/jest": "^30.0.0",
        "@types/leaflet": "^1.9.21",
        "jest": "^30.2.0",
-        "jest-environment-jsdom": "^30.2.0"
+        "jest-environment-jsdom": "^30.2.0",
+        "sharp": "^0.34.5"
      }
    },
    "node_modules/@adobe/css-tools": {
@@ -937,8 +938,8 @@
      "version": "1.0.0",
      "resolved": "https://registry.npmjs.org/@img/colour/-/colour-1.0.0.tgz",
      "integrity": "sha512-A5P/LfWGFSl6nsckYtjw9da+19jB8hkJ6ACTGcDfEJ0aE+l2n2El7dsVM7UVHZQ9s2lmYMWlrS21YLy2IR1LUw==",
+      "devOptional": true,
      "license": "MIT",
-      "optional": true,
      "engines": {
        "node": ">=18"
      }
@@ -4160,8 +4161,8 @@
      "version": "2.1.2",
      "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-2.1.2.tgz",
      "integrity": "sha512-Btj2BOOO83o3WyH59e8MgXsxEQVcarkUOpEYrubB0urwnN10yQ364rsiByU11nZlqWYZm05i/of7io4mzihBtQ==",
+      "devOptional": true,
      "license": "Apache-2.0",
-      "optional": true,
      "engines": {
        "node": ">=8"
      }
@@ -8584,9 +8585,9 @@
      "version": "0.34.5",
      "resolved": "https://registry.npmjs.org/sharp/-/sharp-0.34.5.tgz",
      "integrity": "sha512-Ou9I5Ft9WNcCbXrU9cMgPBcCK8LiwLqcbywW3t4oDV37n1pzpuNLsYiAV8eODnjbtQlSDwZ2cUEeQz4E54Hltg==",
+      "devOptional": true,
      "hasInstallScript": true,
      "license": "Apache-2.0",
-      "optional": true,
      "dependencies": {
        "@img/colour": "^1.0.0",
        "detect-libc": "^2.1.2",
@@ -8629,8 +8630,8 @@
      "version": "7.7.3",
      "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.3.tgz",
      "integrity": "sha512-SdsKMrI9TdgjdweUSR9MweHA4EJ8YxHn8DFaDisvhVlUOe4BF1tLD7GAj0lIqWVl+dPb/rExr0Btby5loQm20Q==",
+      "devOptional": true,
      "license": "ISC",
-      "optional": true,
      "bin": {
        "semver": "bin/semver.js"
      },
@@ -36,6 +36,7 @@
    "@types/jest": "^30.0.0",
    "@types/leaflet": "^1.9.21",
    "jest": "^30.2.0",
-    "jest-environment-jsdom": "^30.2.0"
+    "jest-environment-jsdom": "^30.2.0",
+    "sharp": "^0.34.5"
  }
 }
@@ -0,0 +1,35 @@
+# Brand asset provenance
+
+Every image shipped in this folder, where it came from, and what we are allowed
+to do with it. Add a row before adding a file — in two years nobody will
+remember, and "we think it was fine" is not a licence.
+
+## `mark.png`, `mark-on-dark.png`
+
+The schoolcompare mark, extracted from the logo sheet supplied by the project
+owner. Two colourways on one 176×208 canvas — see `components/Logo.tsx` for why
+they must share a canvas.
+
+- **Source:** supplied by the project owner
+- **Licence:** owned by the project
+
+> Only a 153×189 instance exists on the supplied sheet, so the 512px PWA icon is
+> upscaled and slightly soft. A vector (SVG/AI/EPS) dropped in here and
+> regenerated fixes it; every consumer goes through `components/Logo.tsx` or
+> this folder, so it is one swap.
+
+## `hero-wide-*`, `hero-band-*`
+
+The landing hero illustration: a path climbing through hills to a schoolhouse,
+with an empty cream area on the left reserved for the headline.
+
+- **Source:** supplied by the project owner
+- **Master:** `nextjs-app/assets/hero-source.png` (1672×941 PNG), committed so
+  the derivatives can be regenerated
+- **Derivatives:** `node scripts/build-hero-images.js` — never hand-edit these
+- **Licence:** **to be confirmed by the project owner**
+
+> ⚠️ The licence line above is the one thing here that is not verified. If this
+> artwork was bought, generated, or commissioned, record which — and keep the
+> receipt or licence key alongside it. It is the most prominent image on the
+> site.
@@ -0,0 +1,103 @@
+#!/usr/bin/env node
+/**
+ * Derivatives for the landing hero artwork.
+ *
+ *   node scripts/build-hero-images.js
+ *
+ * Source of truth is assets/hero-source.png (1672×941). It is committed so
+ * these can be regenerated: never hand-edit anything in public/brand/hero-*,
+ * change the source or the numbers here and re-run.
+ *
+ * TWO CROPS, ON PURPOSE
+ * ---------------------
+ * The hero slot is not one shape. On desktop the artwork sits behind the whole
+ * panel at roughly 2.1:1 → 2.7:1; below the one-column breakpoint it collapses
+ * to a band between 2.6:1 and 4.9:1. A single file under `object-fit: cover`
+ * centre-crops, which at the extremes slices a strip through the middle of the
+ * scene and loses the schoolhouse — the same failure the previous SVG hero had.
+ *
+ * So:
+ *   wide  the full frame, including the empty cream area the artwork reserves
+ *         on the left for the headline. Used behind the desktop panel.
+ *   band  a crop around the schoolhouse and the path, already near 2.6:1, so
+ *         the narrow band barely crops it at all. The school sits at ~65%
+ *         across, which is why the CSS pairs this with object-position: 65%:
+ *         squeezing further toward 4.9:1 crops the empty sides, not the subject.
+ *
+ * AVIF and WebP are both emitted. This is flat-shaded vector-style artwork, so
+ * AVIF lands roughly an order of magnitude under the source PNG. Both crops
+ * also get a JPEG: the wide one backs the <img src>, and the band one backs a
+ * <source media> — without it a browser taking neither modern format would
+ * fall through to the desktop frame on a phone, since <img src> cannot vary by
+ * viewport.
+ *
+ * sharp is declared in devDependencies rather than leaned on as a transitive
+ * dependency of next. It does currently arrive that way, but relying on that
+ * means a Next upgrade can silently break this script — the same reasoning as
+ * the outputFileTracingIncludes note in next.config.js.
+ */
+
+const path = require('path');
+const fs = require('fs');
+const sharp = require('sharp');
+
+const SRC = path.join(__dirname, '..', 'assets', 'hero-source.png');
+const OUT = path.join(__dirname, '..', 'public', 'brand');
+
+/*
+ * Band crop, in source pixels. The schoolhouse occupies roughly x 1180–1540,
+ * y 300–520, so this keeps it whole with headroom above the flag and enough
+ * hillside below to read as landscape rather than as a cutout.
+ */
+const BAND = { left: 700, top: 260, width: 972, height: 380 };
+
+const WIDE_WIDTHS = [1672, 1200, 900];
+const BAND_WIDTHS = [972, 700, 500];
+
+async function emit(pipeline, name, width) {
+  const base = pipeline.clone().resize({ width, withoutEnlargement: true });
+  await base.clone().avif({ quality: 62, effort: 6 }).toFile(path.join(OUT, `${name}-${width}.avif`));
+  await base.clone().webp({ quality: 80, effort: 6 }).toFile(path.join(OUT, `${name}-${width}.webp`));
+  return width;
+}
+
+async function main() {
+  if (!fs.existsSync(SRC)) throw new Error(`missing source: ${SRC}`);
+  fs.mkdirSync(OUT, { recursive: true });
+
+  const meta = await sharp(SRC).metadata();
+  console.log(`source ${meta.width}×${meta.height}`);
+
+  const wide = sharp(SRC);
+  for (const w of WIDE_WIDTHS) await emit(wide, 'hero-wide', w);
+  // Fallback for the <img> itself. Flattened onto the artwork's own cream so a
+  // JPEG (no alpha) can never composite against black.
+  await sharp(SRC)
+    .resize({ width: 1200 })
+    .flatten({ background: '#FDF9F3' })
+    .jpeg({ quality: 82, mozjpeg: true })
+    .toFile(path.join(OUT, 'hero-wide-1200.jpg'));
+
+  const band = sharp(SRC).extract(BAND);
+  for (const w of BAND_WIDTHS) await emit(band, 'hero-band', w);
+  await sharp(SRC)
+    .extract(BAND)
+    .resize({ width: 700 })
+    .flatten({ background: '#FDF9F3' })
+    .jpeg({ quality: 82, mozjpeg: true })
+    .toFile(path.join(OUT, 'hero-band-700.jpg'));
+
+  const files = fs.readdirSync(OUT).filter(f => f.startsWith('hero-')).sort();
+  let total = 0;
+  for (const f of files) {
+    const { size } = fs.statSync(path.join(OUT, f));
+    total += size;
+    console.log(`  ${f.padEnd(24)} ${(size / 1024).toFixed(1)} kB`);
+  }
+  console.log(`total ${(total / 1024).toFixed(1)} kB across ${files.length} files`);
+}
+
+main().catch(err => {
+  console.error(err);
+  process.exit(1);
+});
Author	SHA1	Message	Date
TudorandClaude Opus 5	914b429a28	fix(home): art-direct the hero's fallback path, and declare sharp Two findings from review on #93, both verified before fixing. <img src> cannot vary by viewport, so it was always the wide desktop crop. A browser taking neither AVIF nor WebP therefore fell through to the desktop frame on a phone and lost the schoolhouse — the exact failure the two-crop <picture> exists to prevent, surviving in the one path nobody looks at. The band JPEG the build script already emitted was never referenced, which was the tell. It now backs a <source media> placed after the modern formats, so they still win wherever they are supported. Verified by stripping the AVIF and WebP <source>s at runtime and letting <picture> re-resolve, which is what an old browser actually sees: phone hero-band-500.avif → hero-band-700.jpg (band crop, school kept) desktop hero-wide-1672.avif → hero-wide-1200.jpg sharp was not declared: it arrives transitively from next@16.1.6, so the documented regeneration command works today and breaks on a Next upgrade or a clean install that resolves differently. Declared in devDependencies for the same reason next.config.js already declares its traced font files rather than trusting the tracer to keep finding them. The third finding — that the hero's licence is marked unconfirmed in CREDITS.md while the artwork ships — is accurate and deliberate. It is the owner's to answer; recording it as unknown is the point of the file. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>	2026-08-14 21:46:04 +01:00
TudorandClaude Opus 5	3f0e05cc99	feat(home): use the supplied hero artwork instead of a drawn one PR Checks / Frontend Typecheck + Tests (pull_request) Successful in 1m3s Details PR Checks / Backend Smoke (pull_request) Successful in 7s Details PR Checks / Build Backend (no push) (pull_request) Successful in 11s Details PR Checks / Build Frontend (no push) (pull_request) Successful in 46s Details PR Checks / Build Pipeline (no push) (pull_request) Successful in 10s Details PR Checks / AI Code Review (Claude) (pull_request) Successful in 2m29s Details Replaces the hand-drawn SVG landscape with the illustration supplied by the project owner. Master is assets/hero-source.png; everything under public/brand/hero-* comes from scripts/build-hero-images.js and should never be hand-edited. LAYOUT The artwork is composed as a full-bleed hero: it reserves an empty cream area down its left side for the headline. The old hero was a two-column grid with art in the right 0.88fr, which would have cropped that reserved area off and shrunk the scene into a thumbnail — the one thing the picture is built not to be. So the panel is now a single layered block: artwork behind, copy on top, and below the one-column breakpoint the artwork leaves the background and becomes a band under the search. Overlaying does not survive down to phone widths — the panel gets too narrow for the copy to stay inside the cream, so the scrim would have to cover nearly the whole image and you would be left with a tinted rectangle. Hence the switch at 860px rather than a single treatment stretched across every width. CONTRAST The copy sits on a gradient of --hero-ground, a new token sampled from the artwork's own cream (#FDF9F3) rather than from Sand. Sand is eight to thirteen points darker per channel, which leaves a visible seam straight down the hero. The scrim exists because the artwork is a fixed image on a fluid panel: past some width the headline would otherwise land on hillside green. Measured on rendered pixels, sampling background up to 120px beyond the right edge of each line, so a longer line still has margin: light title 14.36:1 body 6.52:1 dark title 11.01:1 body 6.44:1 The worst light case is hillside green showing through the scrim at 6.52:1. TWO CROPS The slot is two shapes: roughly 2.1:1–2.7:1 behind the desktop panel, and 2.6:1–4.9:1 as the band. A single file under object-fit: cover centre-crops, and at the band's extreme that slices a strip through the scene and loses the schoolhouse — exactly how the drawn hero failed on phones. <picture> switches crop, not just resolution: the band file is pre-cropped around the school and is already near 2.6:1, with the subject at ~65% across so squeezing toward 4.9:1 crops the empty sides instead. WEIGHT 1.6 MB PNG in, AVIF and WebP out; a browser fetches exactly one file — about 23–33 kB on desktop, 9–18 kB on a phone. The JPEG is only the <img> fallback. `sizes` describes the real panel box (max-width 1400 minus padding) rather than 100vw, which over-requested a candidate at every width on the LCP element. DARK THEME A raster cannot be re-graded token by token the way the drawing was, but it would reproduce the same failure — a bright illustration is the brightest object on a near-black page. It is dimmed in CSS to read as dusk, and the scrim fades it into the dark panel rather than into cream. TESTS The two illustration journeys are replaced by three, each covering a failure that still renders a valid-looking page: the artwork actually loading (naturalWidth, not src), the crop switching at the breakpoint, a modern format winning negotiation, and the dark theme dimming it. public/brand/CREDITS.md records provenance for every asset in that folder. The hero's licence line is marked unconfirmed — that one needs the owner. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>	2026-08-14 21:36:40 +01:00
tudor	f1819e9c4d	Merge pull request 'fix(home): correct what the landing page claims, and give it one rhythm' (#92 ) from fix/homepage-truth-and-rhythm-main into main Stage (build -> staging -> E2E gate) / Build Backend (FastAPI) (push) Successful in 13s Details Stage (build -> staging -> E2E gate) / Build Frontend (Next.js) (push) Successful in 51s Details Stage (build -> staging -> E2E gate) / Build Pipeline (Meltano + dbt + Airflow) (push) Successful in 12s Details Stage (build -> staging -> E2E gate) / Deploy to Staging (push) Successful in 0s Details Stage (build -> staging -> E2E gate) / E2E Journeys against Staging (push) Failing after 1m13s Details Reviewed-on: #92	2026-08-14 18:18:53 +00:00
TudorandClaude Opus 5	97ac5c9cef	fix(a11y): clear the four AA failures blocking the staging E2E gate PR Checks / Frontend Typecheck + Tests (pull_request) Successful in 1m3s Details PR Checks / Backend Smoke (pull_request) Successful in 7s Details PR Checks / Build Backend (no push) (pull_request) Successful in 11s Details PR Checks / Build Frontend (no push) (pull_request) Successful in 49s Details PR Checks / Build Pipeline (no push) (pull_request) Successful in 10s Details PR Checks / AI Code Review (Claude) (pull_request) Successful in 5m29s Details Main's staging E2E has been red since #90. Two of the four failures were the staging container serving a stale image at the moment the gate ran — apple-icon and the header lockup both check out against staging now. The other two were real, and both are the same mistake: a colour pairing verified against one ground while the element sits on another. * .heroEyebrow --brand on its own 10% tint over Sand is 4.19:1. The token clears AA on Sand, but the tint darkens the ground under the label, and that composite was never the thing measured. --brand-strong is 5.85:1. * .hiwVisual The preview panel was grounded in Sand while everything inside it is a translucent status tint — and those tints are specced to clear AA over --bg-card. Over Sand the report-card chips landed at 4.22:1 and 4.29:1. The ratio depended on a background two levels up. Moving the panel to the card surface puts them at 5.69:1 and 5.81:1; a border keeps it reading as an inset frame now that panel and card share a colour. * Footer .sectionTitle --sage flips with the theme; the footer band does not (it is teal in both). So the pairing only held in one of them — the dark sage measured 4.08:1, on every page. Now --on-sunken-muted, which is what the --on-sunken-* family exists for, as Footer.tsx's own header comment already says. * .compareHeadLabel --text-muted on the header row's tint is 4.45:1 in the dark theme. Under by a hair, same cause. Now --text-secondary. The harness gained the footer, because it had no footer and so could not have caught the one failure that appeared on all three pages. Rewriting fragments now uses each CSS module's own hash — the footer rewritten with HomeView's prefix renders unstyled, which would have made any contrast measured on it meaningless while still reporting a number. Verified: 0 AA failures in both themes across the assembled page, measured with the same probe the e2e test uses, against the real compiled CSS. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>	2026-08-14 18:08:38 +01:00
TudorandClaude Opus 5	dc22fd2853	fix(home): correct what the landing page claims, and give it one rhythm PR Checks / Frontend Typecheck + Tests (pull_request) Successful in 1m5s Details PR Checks / Backend Smoke (pull_request) Successful in 7s Details PR Checks / Build Backend (no push) (pull_request) Successful in 11s Details PR Checks / Build Frontend (no push) (pull_request) Successful in 46s Details PR Checks / Build Pipeline (no push) (pull_request) Successful in 10s Details PR Checks / AI Code Review (Claude) (pull_request) Successful in 2m25s Details The homepage made four statements that were not true, carried elements that asked nothing of anyone, and had a hero illustration that broke in both the places it had to work. Claims, all verified against the code or the API: * "24,000+ schools" (three places) against a real 27,230. The fact box meant to show the live figure rendered its own fallback on every request, because DataInfoResponse declared a `total_schools` field the API has never sent — it sends `unique_schools`. The fetch succeeded; only that field was undefined, so nothing threw and nothing failed. The interface, not the code, was the thing that was wrong. * "Up to three schools side by side" against MAX_SCHOOLS = 5, contradicting a card 400px below it that correctly said five. * "Class sizes" — data the codebase has never held. That copy line was the only hit in a full-repo grep. * Invented results and Ofsted grades attributed to two real, named schools in the compare preview. Also one feature, three words: Compare (nav), shortlist (footer), pin (cards). Settled on Compare everywhere. And <title> was the bare string "Home". Cut: the trust line (repeated the coverage figure one paragraph after the hero gave it, behind three decorative dots), the "Start exploring" row (three links to two destinations already in the nav), the six-row coverage table, and three of the four countdown cards — which gave the page's largest numeral to dates up to 245 days away, two of them offer days, which cannot be missed. All four dates remain, at proportionate weight. Value-prop titles drop from <h2> to <p>; they were outranking the page's real headings in the document outline. Rhythm: the gaps between the seven landing bands were 24/32/24/16/48/32/16px, each band setting its own margin, with four different section-header treatments between them. The page container now owns one gap, and there is one header pattern. An e2e test asserts the gaps are identical. Illustration: it kept a fixed light palette in both themes, which left a pale sky slab as the brightest object on a near-black page, out-shouting the H1 and the search box. It now reads from --ill-* tokens with a dark re-grade. And the hero slot ranges from 1.34:1 to 4.9:1 across breakpoints, which no single composition survives under `slice` — at 860x176 a 540x520 scene shows only its bottom 110 units, so the schoolhouse was cropped away entirely on phones, leaving hills and a pin pointing at nothing. There are now two compositions, each drawn against the crop window its own breakpoint produces, with CSS showing one. Both are static server-rendered SVG. The deadline bar renders on the server rather than on hydrate. The effect-based version needed a reserved height, and one guessed number cannot cover a block whose supporting line wraps differently at every width — measured, it was short at all four, shifting the page up to 108px on a phone. Verified on the built output through an offline render harness (no local server): real compiled CSS, real rendered markup, four widths, both themes. tsc clean, 159/159 unit tests, build green. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>	2026-08-14 17:29:47 +01:00
tudor	6b117dd26c	Merge pull request 'feat(brand): use the supplied logo artwork instead of a reconstruction' (#90 ) from feat/brand-logo-artwork into main Stage (build -> staging -> E2E gate) / Build Backend (FastAPI) (push) Successful in 42s Details Stage (build -> staging -> E2E gate) / Build Frontend (Next.js) (push) Successful in 53s Details Stage (build -> staging -> E2E gate) / Build Pipeline (Meltano + dbt + Airflow) (push) Successful in 2m0s Details Stage (build -> staging -> E2E gate) / Deploy to Staging (push) Successful in 1s Details Stage (build -> staging -> E2E gate) / E2E Journeys against Staging (push) Failing after 1m42s Details Reviewed-on: #90	2026-08-08 21:41:47 +00:00