fix(home): correct what the landing page claims, and give it one rhythm

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>

e2e/tests/journeys.spec.ts

@@ -69,6 +69,132 @@ 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 illustration. Two separate regressions are guarded here, both of
+ * which shipped: the drawing being cropped past its own subject on phones, and
+ * the drawing keeping a fixed light palette on a near-black page.
+ */
+test('the hero illustration swaps composition rather than cropping its subject', async ({ page }) => {
+  const visible = () => page.evaluate(() => {
+    const wide = document.querySelector('[class*="heroArtWide"]');
+    const band = document.querySelector('[class*="heroArtBand"]');
+    return {
+      wide: wide ? getComputedStyle(wide).display : 'missing',
+      band: band ? getComputedStyle(band).display : 'missing',
+    };
+  });
+
+  await page.setViewportSize({ width: 1440, height: 900 });
+  await page.goto('/');
+  expect(await visible()).toEqual({ wide: 'block', band: 'none' });
+
+  // Below the one-column breakpoint the slot becomes a wide, short band. The
+  // tall composition sliced to that shape cropped the schoolhouse away
+  // entirely, leaving hills and a pin pointing at nothing.
+  await page.setViewportSize({ width: 390, height: 844 });
+  await page.goto('/');
+  expect(await visible()).toEqual({ wide: 'none', band: 'block' });
+});
+
+test('the hero illustration is re-graded for the dark theme', async ({ browser }) => {
+  const read = async (colorScheme: 'light' | 'dark') => {
+    const ctx = await browser.newContext({ colorScheme });
+    const p = await ctx.newPage();
+    await p.goto('/');
+    const value = await p.evaluate(() =>
+      getComputedStyle(document.documentElement).getPropertyValue('--ill-sky-high').trim()
+    );
+    await ctx.close();
+    return value;
+  };
+
+  const toLuminance = (hex: string) => {
+    const m = hex.replace('#', '');
+    const [r, g, b] = [0, 2, 4].map(i => parseInt(m.slice(i, i + 2), 16) / 255);
+    const lin = (c: number) => (c <= 0.03928 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4);
+    return 0.2126 * lin(r) + 0.7152 * lin(g) + 0.0722 * lin(b);
+  };
+
+  const light = await read('light');
+  const dark = await read('dark');
+  expect(light).toMatch(/^#[0-9a-f]{6}$/i);
+  expect(dark).toMatch(/^#[0-9a-f]{6}$/i);
+  // The sky used to be the same pale blue in both themes, which made it the
+  // brightest object on the page in dark mode — it out-shouted the H1 and the
+  // search box. It must now be substantially darker than its light value.
+  expect(toLuminance(dark)).toBeLessThan(toLuminance(light) / 4);
+});
+
 test('searching by name returns school results', async ({ page }) => {
   await searchByName(page, 'primary');
   await expect(schoolLinks(page).first()).toBeVisible({ timeout: 15_000 });
@@ -726,11 +852,10 @@ test('the brand typefaces actually load and apply', async ({ page }) => {
     // rest are fallbacks and always end in a generic like sans-serif.
     const first = (el: Element) =>
       getComputedStyle(el).fontFamily.split(',')[0].replace(/["']/g, '').trim();
-    const prose = document.querySelector('[class*="editorialText"] p');
+    const headings = [...document.querySelectorAll('h1, h2')].map(first);
     return {
       body: first(document.body),
-      heading: first(document.querySelector('h1')!),
-      prose: prose ? first(prose) : null,
+      headings,
       bodyStack: getComputedStyle(document.body).fontFamily,
       displayToken: root.getPropertyValue('--font-display').trim(),
       uiToken: root.getPropertyValue('--font-ui').trim(),
@@ -745,18 +870,38 @@ test('the brand typefaces actually load and apply', async ({ page }) => {
   expect(fonts.uiToken, '--font-ui resolved').not.toBe('');
   expect(fonts.proseToken, '--font-prose resolved').not.toBe('');
 
-  expect(fonts.body, 'body uses the UI face').toBe('Schibsted Grotesk');
-  expect(fonts.heading, 'headings use the display face').toBe('Schibsted Grotesk');
-  if (fonts.prose) {
-    expect(fonts.prose, 'running prose uses the serif').toBe('Literata');
-  }
+  // Inter carries body copy, every control and every figure; Manrope carries
+  // headings and key messaging. Both must actually resolve, not merely be
+  // named in a stack that never loads.
+  expect(fonts.body, 'body uses Inter').toBe('Inter');
+  expect(fonts.headings.length, 'the page has headings to check').toBeGreaterThan(0);
+  expect(fonts.headings, 'at least one heading uses Manrope').toContain('Manrope');
 
-  // The Times fallback is the specific failure that shipped. Match the family
-  // name only — a stack legitimately ends in sans-serif, so anchoring on
-  // /serif$/ would flag a perfectly healthy page.
+  // The Times fallback is the specific failure that shipped once. Match the
+  // family name only — a stack legitimately ends in sans-serif, so anchoring
+  // on /serif$/ would flag a perfectly healthy page.
   expect(fonts.bodyStack).not.toMatch(/\bTimes\b/);
 });
 
+/**
+ * The wordmark is the one piece of brand chrome a user reads on every page,
+ * and it is set as two spans so "compare" can take the brand colour. A
+ * refactor that drops the second span, or reverts the lowercase styling,
+ * changes the brand without failing anything else.
+ */
+test('the header carries the schoolcompare lockup', async ({ page }) => {
+  await page.goto('/');
+  const home = page.getByRole('banner').getByRole('link', { name: /schoolcompare home/i });
+  await expect(home).toBeVisible({ timeout: 15_000 });
+
+  // Assert on rendered text rather than CSS-module class names, which are
+  // hashed at build time and change on any unrelated edit.
+  await expect(home).toHaveText(/^\s*schoolcompare\s*$/);
+
+  const mark = home.locator('svg').first();
+  await expect(mark).toBeVisible();
+});
+
 test('no visible text falls back to the browser default black', async ({ page }) => {
   // Form controls don't inherit colour from their parent, so a missing
   // declaration renders pure black — subtle in light mode, invisible in dark.

nextjs-app/app/apple-icon.tsx

@@ -1,46 +0,0 @@
-import { ImageResponse } from 'next/og';
-import { BARS } from '@/components/Logo';
-
-// iOS ignores SVG touch icons — it needs a real raster, on an opaque ground,
-// with no transparency (it composites its own rounded mask). Previously this
-// pointed at favicon.svg, so add-to-home-screen produced a blank tile.
-export const size = { width: 180, height: 180 };
-export const contentType = 'image/png';
-
-const COHORT = ['rgba(22,32,42,0.22)', 'rgba(22,32,42,0.38)', 'rgba(22,32,42,0.55)', '', 'rgba(22,32,42,0.22)'];
-const SCALE = 3.6; // 40 → 144, leaving a 18px margin inside 180
-
-export default function AppleIcon() {
-  return new ImageResponse(
-    (
-      <div
-        style={{
-          width: '100%',
-          height: '100%',
-          display: 'flex',
-          alignItems: 'center',
-          justifyContent: 'center',
-          background: '#f2f1ed',
-        }}
-      >
-        <div style={{ position: 'relative', width: 40 * SCALE, height: 40 * SCALE, display: 'flex' }}>
-          {BARS.map(([x, y, w, h, isSchool], i) => (
-            <div
-              key={x}
-              style={{
-                position: 'absolute',
-                left: x * SCALE,
-                top: y * SCALE,
-                width: w * SCALE,
-                height: h * SCALE,
-                borderRadius: 3,
-                background: isSchool ? '#584a9b' : COHORT[i],
-              }}
-            />
-          ))}
-        </div>
-      </div>
-    ),
-    size
-  );
-}

nextjs-app/app/globals.css

@@ -1,173 +1,239 @@
 /*
- * SchoolCompare.co.uk — "Cohort"
+ * schoolcompare — "Find the right school. For their future."
  *
- * A school's number means nothing on its own; its position in the national
- * distribution does. That idea drives the identity: the logo is the same
- * five-bar spread that appears inside every school row.
+ * Implements the schoolcompare brand guideline. Colour has four jobs and they
+ * never borrow each other's hues:
+ *   brand   (deep teal)  identity, navigation, headings, links, primary buttons
+ *   action  (coral)      the one decisive action on a page — search, submit
+ *   status  (green /     valence against the England average. Never a CTA.
+ *            terracotta)
+ *   phase   (desaturated) category chips, deliberately subordinate.
  *
- * Colour has exactly three jobs and they never borrow each other's hues:
- *   brand   (iris)          interactive + identity. Never carries valence.
- *   status  (teal / amber)  valence — teal is above/good, amber is
- *                           below/needs-attention. Never a CTA.
- *   phase   (desaturated)   category chips, deliberately subordinate.
+ * Two deviations from the supplied swatches, both forced by contrast, both
+ * confined to text and fills. Coral #F97360 carrying a white label measures
+ * 2.75:1 where 4.5 is the floor, so --action is a darkened #BE3C27; the
+ * original coral survives as --coral for tints, borders and illustration.
+ * Mustard #F2C94C is 1.5:1 as text, so --mustard-ink carries any label while
+ * --mustard stays exact for fills, rings and badges.
  *
- * Escalate within status by weight, not by reaching for a new hue: a tinted
- * amber chip for "requires improvement", a solid amber one for "inadequate".
- *
- * Teal/amber rather than green/red so the above/below signal survives every
- * form of colour blindness — the audience includes parents reading closely.
+ * Every value below clears WCAG AA on all three light grounds — Warm White,
+ * white cards and Sand. Sand is the binding one; several values are a step
+ * darker than they would need to be on white alone.
  */
 
 :root {
     color-scheme: light;
 
     /* ── Ground ─────────────────────────────────────────────────────── */
-    --bg-primary: #f2f1ed;      /* paper, not cream — warm enough to read as a document */
-    --bg-secondary: #e9e8e2;
-    --bg-card: #fcfcfa;
-    --surface-inverse: #16202a; /* dark fills: skip link, active nav, tooltips */
+    --bg-primary: #FAFAF8;      /* Warm White */
+    --bg-secondary: #F5EFE6;    /* Sand — hero panels, sunken rows */
+    --bg-card: #FFFFFF;
+    --surface-inverse: #0F766E;
 
     /* ── Ink ────────────────────────────────────────────────────────── */
-    --text-primary: #16202a;
-    --text-secondary: #4a545f;
-    --text-muted: #5c6570;      /* 5.3:1 on --bg-primary */
-    --text-inverse: #f7f7f4;
+    --text-primary: #1C2731;    /* Ink */
+    --text-secondary: #4A5560;
+    --text-muted: #5F6A75;      /* 4.8:1 on Sand, the worst ground */
+    --text-inverse: #FFFFFF;
 
     /* ── Line ───────────────────────────────────────────────────────── */
-    --border: #dedcd5;
-    --border-strong: #cdcac1;
+    --border: #E5E7EB;          /* Light Grey */
+    --border-strong: #D3D7DD;
 
-    /* ── Brand: iris ────────────────────────────────────────────────── */
-    --brand: #584a9b;           /* 6.9:1 on --bg-primary */
-    --brand-strong: #473c80;    /* hover on brand fills */
-    --brand-stronger: #3a3069;  /* active/pressed */
-    --brand-bg: rgba(88, 74, 155, 0.10);
-    --brand-on: #fcfcfa;        /* text/icon sitting on a brand fill */
+    /* ── Brand: deep teal ───────────────────────────────────────────── */
+    --brand: #0F766E;           /* exact brand value; 4.8:1 on Sand */
+    --brand-strong: #0C5F58;
+    --brand-stronger: #0A4D47;
+    --brand-bg: rgba(15, 118, 110, 0.10);
+    --brand-on: #FFFFFF;
 
-    /* ── Status: above / at / below the comparison point ────────────── */
-    --status-above: #0b625a;    /* 6.6:1 on --bg-primary, 5.1:1 on its own tint */
-    --status-above-bg: rgba(11, 98, 90, 0.10);
-    --status-below: #7f4a00;    /* 6.3:1 on --bg-primary, 5.1:1 on its own tint */
-    --status-below-bg: rgba(127, 74, 0, 0.11);
-    --status-at: var(--text-muted);
-    --status-at-bg: rgba(92, 101, 112, 0.10);
+    /* ── Action: coral. One per screen, and only for the decisive one. ── */
+    --action: #BE3C27;          /* darkened coral — 5.4:1 under a white label */
+    --action-strong: #A33320;
+    --action-stronger: #8C2B1B;
+    /* Tint of --action, not of --coral, so a coral ghost button's label and
+       ground share a hue. Unused today; the dark value was already correct. */
+    --action-bg: rgba(190, 60, 39, 0.14);
+    --action-on: #FFFFFF;
 
-    /* ── Charts: the same three hues, extended by lightness only ────── */
-    --chart-1: #584a9b;
-    --chart-2: #0b625a;
-    --chart-3: #7f4a00;
-    --chart-4: #8a7cc9;
-    --chart-5: #3e9c92;
-    --chart-6: #c9903d;
-    --chart-grid: #dedcd5;
-    --chart-reference: #5c6570; /* national/LA reference lines */
+    /* ── Palette accents: exact brand values, for fills and tints only ── */
+    --coral: #F97360;
+    --mustard: #F2C94C;
+    --mustard-ink: #806200;     /* any label that has to sit on or beside mustard */
+    --sage: #A7D7C5;
+    --sky: #C7EBF5;
+    --lavender: #DDD8F5;
+    --sand: #F5EFE6;
+
+    /* ── Status: above / at / below the England average ─────────────── */
+    --status-above: #36743F;
+    --status-above-bg: rgba(54, 116, 63, 0.12);
+    --status-below: #A9481F;
+    /* The tint is the solid hue at low alpha, exactly as every other pair in
+       this file is. It briefly carried the raw --coral tuple instead, which
+       put a coral-pink wash behind terracotta text — the one mismatched pair
+       in the palette. Alpha matches --status-above-bg so the two chips read
+       as equal weight; at 0.15 the darker terracotta tint drops the label to
+       4.45:1 on Warm White. */
+    --status-below-bg: rgba(169, 72, 31, 0.12);
+    --status-at: #5F6A75;
+    --status-at-bg: rgba(95, 106, 117, 0.10);
+
+    /* ── Charts ─────────────────────────────────────────────────────── */
+    --chart-1: #0F766E;
+    --chart-2: #36743F;
+    --chart-3: #806200;
+    --chart-4: #A9481F;
+    --chart-5: #2F6F8F;
+    --chart-6: #5F4FA8;
+    --chart-grid: #E5E7EB;
+    --chart-reference: #5F6A75;
 
     /* ── Series: up to 8 schools compared at once ───────────────────────
-       Categorical needs distinguishable hues, so this ramp is wider than the
-       three-hue rule — but every step is held to the same mid-dark tone and
-       moderate saturation, and every one clears AA on --bg-primary, so they
-       read as one family and work as legend text as well as chart lines. */
-    --series-1: #584a9b;
-    --series-2: #0b625a;
-    --series-3: #7f4a00;
-    --series-4: #a03a5e;
-    --series-5: #2f5f8f;
-    --series-6: #4a6b2f;
-    --series-7: #7a3f7a;
-    --series-8: #97442a;
+       Categorical, so wider than the four-hue rule — but every step is held
+       to the same mid-dark tone and clears AA on the card, so they read as
+       one family and work as legend text as well as chart lines. */
+    --series-1: #0F766E;
+    --series-2: #36743F;
+    --series-3: #806200;
+    --series-4: #A9481F;
+    --series-5: #2F6F8F;
+    --series-6: #5F4FA8;
+    --series-7: #0E7A86;
+    --series-8: #8A4A6B;
 
     /* ── Phase: category, desaturated so it stays under the status hues ── */
-    --phase-primary: #4a6072;
-    --phase-primary-bg: rgba(74, 96, 114, 0.10);
-    --phase-primary-text: #3b4e5e;
-    --phase-secondary: #5f5480;
-    --phase-secondary-bg: rgba(95, 84, 128, 0.10);
-    --phase-secondary-text: #4e4570;
-    --phase-all-through: #4b6b57;
-    --phase-all-through-bg: rgba(75, 107, 87, 0.10);
-    --phase-all-through-text: #3d5847;
-    --phase-post16: #7a6242;
-    --phase-post16-bg: rgba(122, 98, 66, 0.10);
-    --phase-post16-text: #645036;
-    --phase-nursery: #7a5560;
-    --phase-nursery-bg: rgba(122, 85, 96, 0.10);
-    --phase-nursery-text: #64454f;
+    --phase-primary: #0F766E;
+    --phase-primary-bg: rgba(167, 215, 197, 0.40);
+    --phase-primary-text: #0C5F58;
+    --phase-secondary: #2F6F8F;
+    --phase-secondary-bg: rgba(199, 235, 245, 0.55);
+    --phase-secondary-text: #2A6180;
+    --phase-all-through: #36743F;
+    --phase-all-through-bg: rgba(54, 116, 63, 0.12);
+    --phase-all-through-text: #2F6738;
+    --phase-post16: #806200;
+    --phase-post16-bg: rgba(242, 201, 76, 0.26);
+    --phase-post16-text: #6E5500;
+    --phase-nursery: #5F4FA8;
+    --phase-nursery-bg: rgba(221, 216, 245, 0.55);
+    --phase-nursery-text: #544396;
 
-    /* ── Sunken surface: the footer, and anything meant to read as a dark
-          anchor band. Deliberately NOT --surface-inverse: "inverse" flips
-          with the theme, which turned the footer into a light slab at the
-          bottom of a dark page. This stays dark in both. ──────────────── */
-    --surface-sunken: #16202a;
-    --on-sunken: #e4e2dc;
-    --on-sunken-muted: #b3b8bd;
-    --on-sunken-faint: #7f878f;
-    --on-sunken-link: #b9aeef;
+    /* ── Sunken surface: the footer, and anything meant to read as a deep
+          teal anchor band. Stays teal in both themes on purpose — it is the
+          "brand in action" card from the guideline. ─────────────────── */
+    --surface-sunken: #0C5F58;
+    --on-sunken: #FFFFFF;
+    --on-sunken-muted: #C9E4DB;
+    --on-sunken-faint: #A9D6CA;
+    --on-sunken-link: #C7EBF5;
 
-    /* ── Medals: rankings podium. Metal, not palette — kept legible on
-          both grounds rather than literally gold/silver/bronze. ───────── */
-    --medal-gold: #a67c00;
-    --medal-silver: #6f7580;
-    --medal-bronze: #8a5a2b;
+    /* ── Medals: rankings podium ────────────────────────────────────── */
+    --medal-gold: #806200;
+    --medal-silver: #6B7580;
+    --medal-bronze: #8A5A2B;
 
     /* ── Channels ───────────────────────────────────────────────────────
        CSS can't interpolate a hex token into rgba(), so any tint that needs
        an arbitrary alpha reads the raw channels from here. Keep these in
        sync with the hex tokens above — they are the same colours. */
-    --brand-rgb: 88, 74, 155;
-    --status-above-rgb: 11, 98, 90;
-    --status-below-rgb: 127, 74, 0;
-    --ink-rgb: 22, 32, 42;
-    --text-inverse-rgb: 247, 247, 244;
-    --shadow-rgb: 22, 32, 42;
-    --muted-rgb: 92, 101, 112;
-    --phase-secondary-rgb: 95, 84, 128;
-    --medal-silver-rgb: 111, 117, 128;
+    --brand-rgb: 15, 118, 110;
+    --action-rgb: 190, 60, 39;
+    --coral-rgb: 249, 115, 96;
+    --sage-rgb: 167, 215, 197;
+    --status-above-rgb: 54, 116, 63;
+    --status-below-rgb: 169, 72, 31;
+    --ink-rgb: 28, 39, 49;
+    --text-inverse-rgb: 255, 255, 255;
+    --shadow-rgb: 28, 39, 49;
+    --muted-rgb: 95, 106, 117;
+    --phase-secondary-rgb: 47, 111, 143;
+    --medal-silver-rgb: 107, 117, 128;
     --medal-bronze-rgb: 138, 90, 43;
 
     /* ── Elevation ──────────────────────────────────────────────────── */
-    --shadow-soft: 0 1px 2px rgba(22, 32, 42, 0.04), 0 2px 8px rgba(22, 32, 42, 0.05);
-    --shadow-medium: 0 4px 20px rgba(22, 32, 42, 0.09);
-    --shadow-strong: 0 8px 40px rgba(22, 32, 42, 0.14);
-    --scrim: rgba(22, 32, 42, 0.55);
+    --shadow-soft: 0 1px 2px rgba(28, 39, 49, 0.04), 0 2px 8px rgba(28, 39, 49, 0.05);
+    --shadow-medium: 0 4px 18px rgba(28, 39, 49, 0.09);
+    --shadow-strong: 0 10px 34px rgba(28, 39, 49, 0.13);
+    --scrim: rgba(28, 39, 49, 0.5);
 
-    /* ── Type ───────────────────────────────────────────────────────── */
-    /* next/font already expands --font-schibsted to the family plus its
-       metric-matched fallback, so naming the family again here only made the
-       stack say it twice. It read like a safety net but wasn't one: a var()
-       with no fallback that resolves to nothing invalidates the whole
-       declaration, so the literal after it never gets a turn. The real
-       safeguard is that these classes sit on <html>, where :root can see
-       them — see app/layout.tsx. */
-    --font-display: var(--font-schibsted), -apple-system, BlinkMacSystemFont, sans-serif;
-    --font-ui: var(--font-schibsted), -apple-system, BlinkMacSystemFont, sans-serif;
-    --font-data: var(--font-schibsted), -apple-system, BlinkMacSystemFont, sans-serif;
-    --font-prose: var(--font-literata), Georgia, serif;
+    /* ── Type ───────────────────────────────────────────────────────────
+       Manrope for headings and key messaging; Inter for body copy, every
+       control and every figure. next/font expands each variable to the
+       family plus its metric-matched fallback, and the classes sit on
+       <html> so :root can see them — see app/layout.tsx. */
+    --font-display: var(--font-manrope), -apple-system, BlinkMacSystemFont, sans-serif;
+    --font-ui: var(--font-inter), -apple-system, BlinkMacSystemFont, sans-serif;
+    --font-data: var(--font-inter), -apple-system, BlinkMacSystemFont, sans-serif;
+    --font-prose: var(--font-inter), -apple-system, BlinkMacSystemFont, sans-serif;
 
-    /* Type scale, 1.2 ratio off a 1rem base. New work should use these
-       rather than inventing another font-size. */
-    --step--2: 0.694rem;
-    --step--1: 0.833rem;
+    /* Type scale, straight from the guideline: H1 40/48, H2 32/40, H3 24/32,
+       body large 16/24, body 14/20, small 12/16. */
+    --step--2: 0.75rem;
+    --step--1: 0.875rem;
     --step-0: 1rem;
-    --step-1: 1.2rem;
-    --step-2: 1.44rem;
-    --step-3: 1.728rem;
-    --step-4: 2.074rem;
-    --step-5: 2.488rem;
+    --step-1: 1.125rem;
+    --step-2: 1.5rem;
+    --step-3: 2rem;
+    --step-4: 2.5rem;
+    --step-5: 3rem;
 
-    /* ── Geometry & motion ──────────────────────────────────────────── */
-    --radius-sm: 3px;
-    --radius-md: 6px;
-    --radius-lg: 10px;
-    --radius-xl: 16px;
+    /* ── 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;
+
+    /* ── Illustration ───────────────────────────────────────────────────
+       The hero landscape's palette. These are tokens rather than literals in
+       the SVG for one reason: the drawing previously kept a fixed light
+       palette in both themes, which left a pale sky slab as the brightest
+       object on a near-black page — it out-shouted the H1 and the search box.
+       Artwork still shouldn't invert (that breaks the picture), so the dark
+       values below are a re-grade, not an inversion: the same scene, lit at
+       dusk, sitting a step above the panel it lives on. */
+    --ill-sky-high: #DAEDF8;
+    --ill-sky-low: #EFF8FB;
+    --ill-cloud: #FFFFFF;
+    --ill-hill-far: #D6EDE2;
+    --ill-hill-mid: #A7D7C5;
+    --ill-hill-near: #7FC3AC;
+    --ill-hill-front: #5BA88F;
+    --ill-path: #FAF6EE;
+    --ill-path-edge: #E6DAC2;
+    --ill-wall: #FCE8C3;
+    --ill-roof: #F0A868;
+    --ill-door: #0F766E;
+    --ill-window: #C7EBF5;
+    --ill-tree-dark: #2E7D6B;
+    --ill-tree-mid: #3E8C74;
+    --ill-tree-light: #4A9E85;
+    --ill-tree-pale: #7FC3AC;
+    --ill-pin: #F97360;
+    --ill-pin-eye: #FFFFFF;
+
+    /* ── Geometry & motion ──────────────────────────────────────────────
+       "Soft shapes, rounded corners" — the guideline's geometry is markedly
+       rounder than the old system's 3/6/10/16. */
+    --radius-sm: 8px;
+    --radius-md: 12px;
+    --radius-lg: 16px;
+    --radius-xl: 22px;
 
     --transition: 0.2s ease;
     --transition-slow: 0.4s ease;
 }
 
 /*
- * Dark theme. Not an inversion — the accent and both status hues are lifted
- * independently so each still clears AA on the dark ground, and --brand-on
- * flips to dark because the brand fill is now the lighter of the pair.
+ * Dark theme. Not in the guideline, which is light-only — but the site already
+ * ships one, so removing it would be a visible regression. Built from the same
+ * tokens: teal and coral are lifted independently so each still clears AA on
+ * the dark ground, and the ground itself keeps the Ink hue rather than going
+ * to black.
  *
  * Tokens only. Never style a component from inside this block, or the two
  * themes drift apart the first time someone edits one of them.
@@ -176,90 +242,133 @@
     :root {
         color-scheme: dark;
 
-        --bg-primary: #10151b;
-        --bg-secondary: #161c24;
-        --bg-card: #171d25;
-        --surface-inverse: #e4e9ee;
+        --bg-primary: #111A20;
+        --bg-secondary: #16222A;
+        --bg-card: #18242C;
+        --surface-inverse: #E9EEF0;
 
-        --text-primary: #e4e9ee;
-        --text-secondary: #b4bec8;
-        --text-muted: #8d99a6;      /* 6.4:1 on --bg-primary */
-        --text-inverse: #10151b;
+        --text-primary: #E9EEF0;
+        --text-secondary: #B4C2C7;
+        --text-muted: #8B9AA1;      /* 5.5:1 on the card */
+        --text-inverse: #111A20;
 
-        --border: #28313b;
-        --border-strong: #38434f;
+        --border: #26343D;
+        --border-strong: #35454F;
 
-        --brand: #9c8ce8;           /* 6.5:1 on --bg-primary */
-        --brand-strong: #b0a3ee;
-        --brand-stronger: #c2b8f3;
-        --brand-bg: rgba(156, 140, 232, 0.14);
-        --brand-on: #10151b;
+        --brand: #5FC7BB;
+        --brand-strong: #7BD6CC;
+        --brand-stronger: #9BE3DB;
+        --brand-bg: rgba(95, 199, 187, 0.14);
+        --brand-on: #0A1418;
 
-        --status-above: #4fc0b0;    /* 8.4:1 on --bg-primary, 4.8:1 on its own tint */
-        --status-above-bg: rgba(79, 192, 176, 0.14);
-        --status-below: #d99b2e;    /* 7.7:1 */
-        --status-below-bg: rgba(217, 155, 46, 0.14);
-        --status-at-bg: rgba(141, 153, 166, 0.14);
+        --action: #F08A72;
+        --action-strong: #F5A492;
+        --action-stronger: #F8BFB1;
+        --action-bg: rgba(240, 138, 114, 0.16);
+        --action-on: #241009;
 
-        --chart-1: #9c8ce8;
-        --chart-2: #4fc0b0;
-        --chart-3: #d99b2e;
-        --chart-4: #6f5fc4;
-        --chart-5: #2b8a7e;
-        --chart-6: #a97420;
-        --chart-grid: #28313b;
-        --chart-reference: #8d99a6;
+        --coral: #F08A72;
+        --mustard: #F2C94C;
+        --mustard-ink: #EFC658;
+        --sage: #8FCBB7;
+        --sky: #9CD4E6;
+        --lavender: #C2BBEA;
+        --sand: #1B2730;
 
-        --series-1: #9c8ce8;
-        --series-2: #4fc0b0;
-        --series-3: #d99b2e;
-        --series-4: #e07a9d;
-        --series-5: #6fa8dc;
-        --series-6: #94c46b;
-        --series-7: #c48bc4;
-        --series-8: #e08a6b;
+        --status-above: #7FCB8A;
+        --status-above-bg: rgba(127, 203, 138, 0.14);
+        --status-below: #EFA184;
+        --status-below-bg: rgba(239, 161, 132, 0.14);
+        --status-at: #8B9AA1;
+        --status-at-bg: rgba(139, 154, 161, 0.14);
 
-        --phase-primary: #8aa4b8;
-        --phase-primary-bg: rgba(138, 164, 184, 0.14);
-        --phase-primary-text: #a3bacd;
-        --phase-secondary: #a294c4;
-        --phase-secondary-bg: rgba(162, 148, 196, 0.14);
-        --phase-secondary-text: #b7abd6;
-        --phase-all-through: #8bb098;
-        --phase-all-through-bg: rgba(139, 176, 152, 0.14);
-        --phase-all-through-text: #a2c2ad;
-        --phase-post16: #bfa27c;
-        --phase-post16-bg: rgba(191, 162, 124, 0.14);
-        --phase-post16-text: #d0b795;
-        --phase-nursery: #bf98a3;
-        --phase-nursery-bg: rgba(191, 152, 163, 0.14);
-        --phase-nursery-text: #d1aeb8;
+        --chart-1: #5FC7BB;
+        --chart-2: #7FCB8A;
+        --chart-3: #EFC658;
+        --chart-4: #EFA184;
+        --chart-5: #8FB4D9;
+        --chart-6: #B6A9DD;
+        --chart-grid: #26343D;
+        --chart-reference: #8B9AA1;
 
-        --surface-sunken: #0a0e13;
-        --on-sunken: #d8dde2;
-        --on-sunken-muted: #9aa4ae;
-        --on-sunken-faint: #6d777f;
-        --on-sunken-link: #b0a3ee;
+        --series-1: #5FC7BB;
+        --series-2: #7FCB8A;
+        --series-3: #EFC658;
+        --series-4: #EFA184;
+        --series-5: #8FB4D9;
+        --series-6: #B6A9DD;
+        --series-7: #6FD0DC;
+        --series-8: #D99BB8;
 
-        --medal-gold: #d4a72c;
-        --medal-silver: #a8b0bb;
-        --medal-bronze: #c08552;
+        --phase-primary: #5FC7BB;
+        --phase-primary-bg: rgba(95, 199, 187, 0.16);
+        --phase-primary-text: #8ADACF;
+        --phase-secondary: #8FB4D9;
+        --phase-secondary-bg: rgba(143, 180, 217, 0.16);
+        --phase-secondary-text: #AAC8E4;
+        --phase-all-through: #7FCB8A;
+        --phase-all-through-bg: rgba(127, 203, 138, 0.16);
+        --phase-all-through-text: #9AD8A3;
+        --phase-post16: #EFC658;
+        --phase-post16-bg: rgba(242, 201, 76, 0.16);
+        --phase-post16-text: #F2D179;
+        --phase-nursery: #B6A9DD;
+        --phase-nursery-bg: rgba(182, 169, 221, 0.16);
+        --phase-nursery-text: #C8BEE6;
 
-        --brand-rgb: 156, 140, 232;
-        --status-above-rgb: 79, 192, 176;
-        --status-below-rgb: 217, 155, 46;
-        --ink-rgb: 228, 233, 238;
-        --text-inverse-rgb: 16, 21, 27;
+        --surface-sunken: #0C5F58;
+        --on-sunken: #FFFFFF;
+        --on-sunken-muted: #C9E4DB;
+        --on-sunken-faint: #A9D6CA;
+        --on-sunken-link: #C7EBF5;
+
+        --medal-gold: #EFC658;
+        --medal-silver: #A9B6BC;
+        --medal-bronze: #C99070;
+
+        --brand-rgb: 95, 199, 187;
+        --action-rgb: 240, 138, 114;
+        --coral-rgb: 240, 138, 114;
+        --sage-rgb: 143, 203, 183;
+        --status-above-rgb: 127, 203, 138;
+        --status-below-rgb: 239, 161, 132;
+        --ink-rgb: 233, 238, 240;
+        --text-inverse-rgb: 17, 26, 32;
         --shadow-rgb: 0, 0, 0;
-        --muted-rgb: 141, 153, 166;
-        --phase-secondary-rgb: 162, 148, 196;
-        --medal-silver-rgb: 168, 176, 187;
-        --medal-bronze-rgb: 192, 133, 82;
+        --muted-rgb: 139, 154, 161;
+        --phase-secondary-rgb: 143, 180, 217;
+        --medal-silver-rgb: 169, 182, 188;
+        --medal-bronze-rgb: 201, 144, 112;
+
+        /* Dusk re-grade of the hero landscape. The sky sits one step above the
+           Sand panel (#16222A) rather than 60 points above it, so the picture
+           reads as a framed vignette instead of a light leak. The pin keeps
+           the theme's coral and is the only bright thing left in the scene —
+           which is the point, since it marks "you are here". */
+        --ill-sky-high: #1B2C36;
+        --ill-sky-low: #16242C;
+        --ill-cloud: #2A3F4A;
+        --ill-hill-far: #1E3A38;
+        --ill-hill-mid: #234944;
+        --ill-hill-near: #2A5A51;
+        --ill-hill-front: #326B5E;
+        --ill-path: #4A5A52;
+        --ill-path-edge: #3A4842;
+        --ill-wall: #45423A;
+        --ill-roof: #8A5A3E;
+        --ill-door: #5FC7BB;
+        --ill-window: #2F5966;
+        --ill-tree-dark: #16302C;
+        --ill-tree-mid: #1B3A34;
+        --ill-tree-light: #21453D;
+        --ill-tree-pale: #2A5A51;
+        --ill-pin: #F08A72;
+        --ill-pin-eye: #16242C;
 
         --shadow-soft: 0 1px 2px rgba(0, 0, 0, 0.4), 0 2px 8px rgba(0, 0, 0, 0.3);
-        --shadow-medium: 0 4px 20px rgba(0, 0, 0, 0.45);
-        --shadow-strong: 0 8px 40px rgba(0, 0, 0, 0.6);
-        --scrim: rgba(4, 7, 10, 0.7);
+        --shadow-medium: 0 4px 18px rgba(0, 0, 0, 0.45);
+        --shadow-strong: 0 10px 34px rgba(0, 0, 0, 0.55);
+        --scrim: rgba(4, 8, 10, 0.65);
     }
 }
 
@@ -402,7 +511,31 @@ table,
     border-color: var(--brand-stronger);
 }
 
-/* Secondary: brand outline — supporting actions (Add to shortlist) */
+/*
+ * Action: coral fill — the one decisive action on a page, and only that.
+ *
+ * The guideline gives coral to "calls to action, highlights, important
+ * buttons" while its own UI-components sheet draws the primary button in
+ * teal. Both are honoured by making this a scarce, separate class: teal is
+ * the default primary, coral marks the single action a page exists for —
+ * the search submit. Use it more than once per screen and it stops meaning
+ * anything.
+ */
+.btn-action {
+    background: var(--action);
+    color: var(--action-on);
+    border-color: var(--action);
+}
+.btn-action:hover:not(:disabled) {
+    background: var(--action-strong);
+    border-color: var(--action-strong);
+}
+.btn-action:active:not(:disabled) {
+    background: var(--action-stronger);
+    border-color: var(--action-stronger);
+}
+
+/* Secondary: brand outline — supporting actions (Add to compare) */
 .btn-secondary {
     background: transparent;
     color: var(--brand);
@@ -423,7 +556,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);
@@ -493,6 +626,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

nextjs-app/app/icon.svg

@@ -1,7 +0,0 @@
-<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
-  <rect x="2" y="26" width="6" height="12" rx="1" fill="#16202a" fill-opacity="0.22"/>
-  <rect x="10" y="16" width="6" height="22" rx="1" fill="#16202a" fill-opacity="0.38"/>
-  <rect x="18" y="8" width="6" height="30" rx="1" fill="#16202a" fill-opacity="0.55"/>
-  <rect x="26" y="14" width="6" height="24" rx="1" fill="#584a9b"/>
-  <rect x="34" y="28" width="4" height="10" rx="1" fill="#16202a" fill-opacity="0.22"/>
-</svg>

nextjs-app/app/layout.tsx

@@ -1,5 +1,5 @@
 import type { Metadata, Viewport } from 'next';
-import { Schibsted_Grotesk, Literata } from 'next/font/google';
+import { Manrope, Inter } from 'next/font/google';
 import Script from 'next/script';
 import { Navigation } from '@/components/Navigation';
 import { Footer } from '@/components/Footer';
@@ -7,23 +7,22 @@ import { ComparisonToast } from '@/components/ComparisonToast';
 import { ComparisonProvider } from '@/context/ComparisonProvider';
 import './globals.css';
 
-// Schibsted Grotesk carries the whole interface — headings, labels, and every
-// figure. It was drawn for news brands, so its tabular numerals hold a column
-// properly, which matters on a page that is mostly percentages.
-const schibsted = Schibsted_Grotesk({
+// Manrope carries headings and key messaging — the guideline's "friendly,
+// modern personality". It never sets body copy or a control.
+const manrope = Manrope({
   subsets: ['latin'],
-  weight: ['400', '500', '600', '700'],
-  variable: '--font-schibsted',
+  weight: ['500', '600', '700'],
+  variable: '--font-manrope',
   display: 'swap',
 });
 
-// Literata is for prose only — the admissions guide, methodology notes, the
-// editorial sections. It never touches a number or a control.
-const literata = Literata({
+// Inter carries body copy, every control and every figure — chosen in the
+// guideline for clarity and legibility. Its tabular numerals hold a column
+// properly, which matters on a page that is mostly percentages.
+const inter = Inter({
   subsets: ['latin'],
-  weight: ['400', '600'],
-  style: ['normal', 'italic'],
-  variable: '--font-literata',
+  weight: ['400', '500', '600', '700'],
+  variable: '--font-inter',
   display: 'swap',
 });
 
@@ -36,24 +35,24 @@ export const viewport: Viewport = {
   // These must match --bg-primary in globals.css for each theme, or the
   // browser chrome and the page disagree at the top edge of the screen.
   themeColor: [
-    { media: '(prefers-color-scheme: light)', color: '#f2f1ed' },
-    { media: '(prefers-color-scheme: dark)', color: '#10151b' },
+    { media: '(prefers-color-scheme: light)', color: '#FAFAF8' },
+    { media: '(prefers-color-scheme: dark)', color: '#111A20' },
   ],
 };
 
 export const metadata: Metadata = {
   appleWebApp: {
     capable: true,
-    title: 'SchoolCompare',
+    title: 'schoolcompare',
     statusBarStyle: 'default',
   },
   title: {
-    default: 'SchoolCompare | Compare School Performance',
-    template: '%s | SchoolCompare',
+    default: 'schoolcompare | Compare School Performance',
+    template: '%s | schoolcompare',
   },
   description: 'Compare primary and secondary school SATs and GCSE performance across England',
   keywords: 'school comparison, KS2 results, KS4 results, primary school, secondary school, England schools, SATs results, GCSE results',
-  authors: [{ name: 'SchoolCompare' }],
+  authors: [{ name: 'schoolcompare' }],
   manifest: '/manifest.json',
   // No `icons` key on purpose: setting it here would override the file
   // conventions. app/icon.svg and app/apple-icon.tsx are the source, and
@@ -61,15 +60,15 @@ export const metadata: Metadata = {
   metadataBase: new URL('https://schoolcompare.co.uk'),
   openGraph: {
     type: 'website',
-    title: 'SchoolCompare | Compare School Performance',
+    title: 'schoolcompare | Compare School Performance',
     description: 'Compare primary and secondary school SATs and GCSE performance across England',
     url: 'https://schoolcompare.co.uk',
-    siteName: 'SchoolCompare',
+    siteName: 'schoolcompare',
   },
   twitter: {
     // summary_large_image now that there is an image worth showing.
     card: 'summary_large_image',
-    title: 'SchoolCompare | Compare School Performance',
+    title: 'schoolcompare | Compare School Performance',
     description: 'Compare primary and secondary school SATs and GCSE performance across England',
   },
 };
@@ -81,13 +80,14 @@ export default function RootLayout({
 }>) {
   return (
     // The font variable classes must sit on <html>, not <body>. globals.css
-    // declares --font-display/--font-ui on :root as var(--font-schibsted),
-    // and a custom property's var() references resolve on the element that
-    // declares it. With the classes on <body>, --font-schibsted was undefined
-    // at :root, so --font-display computed to the guaranteed-invalid value and
-    // every font-family that referenced it silently fell back — the whole site
-    // rendered in Times.
-    <html lang="en" className={`${schibsted.variable} ${literata.variable}`}>
+    // declares --font-display on :root as var(--font-manrope) and --font-ui as
+    // var(--font-inter), and a custom property's var() references resolve on
+    // the element that declares it. With the classes on <body>, those two are
+    // undefined at :root, so --font-display computes to the guaranteed-invalid
+    // value and every font-family referencing it silently falls back — which
+    // once shipped the whole site in Times. Nothing throws and no unit test
+    // fails, so the e2e typeface assertion is the only guard.
+    <html lang="en" className={`${manrope.variable} ${inter.variable}`}>
       <head>
         <link rel="preconnect" href="https://analytics.schoolcompare.co.uk" />
         <link rel="preconnect" href="https://api.postcodes.io" />

nextjs-app/app/opengraph-image.tsx

@@ -1,41 +1,49 @@
 import { readFile } from 'node:fs/promises';
 import { join } from 'node:path';
 import { ImageResponse } from 'next/og';
-import { BARS } from '@/components/Logo';
 
 /**
  * The site had no og:image at all, so every link pasted into a class WhatsApp
  * group or a Slack channel rendered as a bare grey text card — on the highest
  * intent channel this product has.
  *
- * The card is the mark at poster scale: the cohort as a wide distribution with
- * one school lit up. It states the proposition rather than decorating it.
+ * The card is the brand's own proposition on the Sand ground, with the mark
+ * and a suggestion of the illustration's rolling landscape along the bottom.
+ * It states the promise rather than decorating it.
  */
-export const alt = 'SchoolCompare — compare every school in England against the national picture';
+export const alt = 'schoolcompare — find the school where your child will flourish';
 export const size = { width: 1200, height: 630 };
 export const contentType = 'image/png';
 
-const PAPER = '#f2f1ed';
-const INK = '#16202a';
-const MUTED = '#5c6570';
-const BRAND = '#584a9b';
-
-// A plausible national distribution, drawn once at poster scale. The lit bar
-// is the same position the mark uses.
-const SPREAD = [8, 12, 17, 24, 33, 44, 57, 70, 82, 92, 98, 100, 96, 88, 77, 65, 53, 41, 31, 22, 15, 10, 7, 5];
-// Right of the peak: score runs left to right, so the lit school reads as
-// above the national average. At index 9 it sat on the low side, which quietly
-// said the opposite.
-const LIT = 14;
+const SAND = '#F5EFE6';
+const INK = '#1C2731';
+const MUTED = '#5F6A75';
+const TEAL = '#0F766E';
+const SAGE = '#A7D7C5';
+const SAGE_DEEP = '#7FC3AC';
+const SAGE_PALE = '#D6EDE2';
 
 async function font(file: string) {
   return readFile(join(process.cwd(), 'assets', file));
 }
 
+/**
+ * The mark, as a data URI. Satori has no access to the public/ URL space, so
+ * the artwork is read off disk and inlined. This is the same file the header
+ * serves — public/brand/mark.png — so the card can never drift from the site.
+ * The 47×56 box below is that file's 176:208 ratio; re-crop the artwork and
+ * this has to move with it, or Satori will stretch it.
+ */
+async function markDataUri() {
+  const png = await readFile(join(process.cwd(), 'public', 'brand', 'mark.png'));
+  return `data:image/png;base64,${png.toString('base64')}`;
+}
+
 export default async function OpengraphImage() {
-  const [regular, bold] = await Promise.all([
-    font('SchibstedGrotesk-Regular.ttf'),
-    font('SchibstedGrotesk-Bold.ttf'),
+  const [regular, bold, mark] = await Promise.all([
+    font('Manrope-Regular.ttf'),
+    font('Manrope-Bold.ttf'),
+    markDataUri(),
   ]);
 
   return new ImageResponse(
@@ -47,85 +55,62 @@ export default async function OpengraphImage() {
           display: 'flex',
           flexDirection: 'column',
           justifyContent: 'space-between',
-          background: PAPER,
-          padding: '58px 72px 52px',
-          fontFamily: 'Schibsted',
+          background: SAND,
+          padding: '58px 72px 0',
+          fontFamily: 'Manrope',
+          position: 'relative',
         }}
       >
+        {/* Rolling hills along the bottom edge — the illustration style,
+            reduced to the one gesture that survives at thumbnail size. */}
+        <div style={{ position: 'absolute', left: 0, right: 0, bottom: 0, height: 210, display: 'flex' }}>
+          <svg width="1200" height="210" viewBox="0 0 1200 210">
+            <path d="M0 92 C 200 56 380 100 560 78 C 760 54 940 92 1200 62 L1200 210 L0 210 Z" fill={SAGE_PALE} />
+            <path d="M0 132 C 230 96 420 140 620 118 C 830 94 1000 130 1200 106 L1200 210 L0 210 Z" fill={SAGE} />
+            <path d="M0 176 C 260 146 470 186 690 166 C 900 146 1040 174 1200 158 L1200 210 L0 210 Z" fill={SAGE_DEEP} />
+          </svg>
+        </div>
+
         {/* Lockup */}
         <div style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
-          <div style={{ position: 'relative', width: 40, height: 40, display: 'flex' }}>
-            {BARS.map(([x, y, w, h, isSchool], i) => (
-              <div
-                key={x}
-                style={{
-                  position: 'absolute',
-                  left: x,
-                  top: y,
-                  width: w,
-                  height: h,
-                  borderRadius: 1.5,
-                  background: isSchool ? BRAND : INK,
-                  opacity: isSchool ? 1 : [0.22, 0.38, 0.55, 1, 0.22][i],
-                }}
-              />
-            ))}
-          </div>
-          <div style={{ display: 'flex', fontSize: 29, fontWeight: 700, letterSpacing: '-0.028em' }}>
-            <span style={{ color: INK }}>School</span>
-            <span style={{ color: BRAND }}>Compare</span>
+          {/* eslint-disable-next-line @next/next/no-img-element */}
+          <img src={mark} width={47} height={56} alt="" />
+          <div style={{ display: 'flex', fontSize: 34, fontWeight: 700, letterSpacing: '-0.04em' }}>
+            <span style={{ color: INK }}>school</span>
+            <span style={{ color: TEAL }}>compare</span>
           </div>
         </div>
 
         {/* Proposition. Sized so the headline holds two lines and the subhead
             one — an orphaned word reads as an accident at this size. */}
-        <div style={{ display: 'flex', flexDirection: 'column', gap: 20 }}>
+        <div style={{ display: 'flex', flexDirection: 'column', gap: 18, paddingBottom: 236 }}>
           <div
             style={{
               display: 'flex',
-              fontSize: 66,
+              flexWrap: 'wrap',
+              fontSize: 72,
               fontWeight: 700,
-              letterSpacing: '-0.036em',
-              lineHeight: 1.03,
+              letterSpacing: '-0.035em',
+              lineHeight: 1.05,
               color: INK,
-              maxWidth: 1010,
+              maxWidth: 900,
             }}
           >
-            A score means nothing until you see the spread.
+            <span style={{ marginRight: 18 }}>Find the school where</span>
+            <span style={{ marginRight: 18 }}>your child will</span>
+            <span style={{ color: TEAL }}>flourish.</span>
           </div>
-          <div style={{ display: 'flex', fontSize: 26, color: MUTED, letterSpacing: '-0.005em' }}>
+          <div style={{ display: 'flex', fontSize: 27, color: MUTED, letterSpacing: '-0.005em' }}>
             24,000+ schools in England · SATs, GCSEs, Ofsted and admissions
           </div>
         </div>
-
-        {/* The device, at poster scale. Same object as the mark above. */}
-        <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
-          <div style={{ display: 'flex', alignItems: 'flex-end', gap: 7, height: 120 }}>
-            {SPREAD.map((h, i) => (
-              <div
-                key={i}
-                style={{
-                  flex: 1,
-                  height: `${h}%`,
-                  borderRadius: 2,
-                  background: i === LIT ? BRAND : INK,
-                  opacity: i === LIT ? 1 : 0.15,
-                }}
-              />
-            ))}
-          </div>
-          <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 18, color: MUTED, letterSpacing: '0.09em' }}>
-            <span>NATIONAL SPREAD</span>
-            <span style={{ letterSpacing: '-0.005em' }}>schoolcompare.co.uk</span>
-          </div>
-        </div>
       </div>
     ),
     {
       ...size,
       fonts: [
-        { name: 'Schibsted', data: regular, weight: 400, style: 'normal' },
-        { name: 'Schibsted', data: bold, weight: 700, style: 'normal' },
+        { name: 'Manrope', data: regular, weight: 400, style: 'normal' },
+        { name: 'Manrope', data: bold, weight: 700, style: 'normal' },
       ],
     }
   );

nextjs-app/app/page.tsx

@@ -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}
+          />
+        )}
       />
     );
   }

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

@@ -98,7 +98,7 @@ export async function generateMetadata({ params }: SchoolPageProps): Promise<Met
         description,
         type: 'website',
         url: `https://schoolcompare.co.uk${canonicalPath}`,
-        siteName: 'SchoolCompare',
+        siteName: 'schoolcompare',
       },
       twitter: {
         card: 'summary',

nextjs-app/components/AdmissionsView.tsx

@@ -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',

nextjs-app/components/ComparisonView.tsx

@@ -224,11 +224,11 @@ export function ComparisonView({
     const url = window.location.href;
     const count = selectedSchools.length;
     const shareData = {
-      title: 'School comparison · SchoolCompare',
+      title: 'School comparison · schoolcompare',
       text:
         count > 0
-          ? `Comparing ${count} school${count === 1 ? '' : 's'} on SchoolCompare`
-          : 'SchoolCompare',
+          ? `Comparing ${count} school${count === 1 ? '' : 's'} on schoolcompare`
+          : 'schoolcompare',
       url,
     };
     if (

nextjs-app/components/EditorialSection.tsx

@@ -5,54 +5,60 @@ 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
             and demographics — each in its own table, each with its own jargon.
           </p>
           <p>
-            SchoolCompare brings it all into one place. Every school page shows performance against the national
-            average, explains what the numbers mean, and lets you shortlist schools side by side. Built for
+            schoolcompare brings it all into one place. Every school page shows performance against the national
+            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>
   );

nextjs-app/components/FilterBar.module.css

@@ -1,11 +1,26 @@
+/*
+ * FilterBar — one component, two shapes.
+ *
+ *   hero     a single white pill on the Sand hero panel, carrying the one
+ *            coral action the page exists for. No card of its own: the panel
+ *            behind it belongs to the page, so the pill reads as the object.
+ *   compact  the filter rail above the results — a white card of quiet
+ *            controls, brand for what is active, sage for what is selected.
+ *
+ * Colour comes from the token layer only; the disclosure arrows are drawn
+ * from currentColor rather than a background image so they follow the theme.
+ */
+
+/* ── Shell ────────────────────────────────────────────────────────── */
+
 .filterBar {
   background: var(--bg-card);
   border: 1px solid var(--border);
-  border-radius: 10px;
-  padding: 1.5rem;
-  margin-bottom: 2rem;
-  box-shadow: var(--shadow-soft, 0 2px 8px rgba(var(--shadow-rgb), 0.06));
-  transition: opacity 0.2s ease;
+  border-radius: var(--radius-lg);
+  padding: 1rem 1.125rem;
+  margin-bottom: 1.5rem;
+  box-shadow: var(--shadow-soft);
+  transition: opacity var(--transition);
 }
 
 .filterBar.isLoading {
@@ -14,112 +29,16 @@
 }
 
 .heroMode {
-  padding: 2.5rem;
-  max-width: 800px;
-  margin: 0 auto 3rem auto;
-  box-shadow: 0 8px 24px rgba(var(--shadow-rgb), 0.08);
-  border-width: 2px;
-  border-color: var(--brand);
+  background: none;
+  border: 0;
+  border-radius: 0;
+  box-shadow: none;
+  padding: 0;
+  max-width: 640px;
+  margin: 0 auto 1.5rem;
 }
 
-.heroMode .omniInput {
-  font-size: 1.25rem;
-  padding: 1.25rem 1.5rem;
-}
-
-.heroMode .searchButton {
-  font-size: 1.25rem;
-  padding: 1.25rem 2.5rem;
-}
-
-.heroMode .searchSection {
-  margin-bottom: 0;
-}
-
-.searchHint {
-  margin: 0.875rem 0 0;
-  font-size: 0.95rem;
-  color: var(--text-secondary);
-  text-align: center;
-}
-
-.searchHint strong {
-  color: var(--text-primary);
-  font-weight: 600;
-}
-
-@media (max-width: 600px) {
-  .searchHint {
-    font-size: 0.85rem;
-    text-align: left;
-  }
-}
-
-.nearMeRow {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 0.5rem;
-  margin-top: 0.75rem;
-}
-
-.nearMeBtn {
-  display: inline-flex;
-  align-items: center;
-  gap: 0.5rem;
-  padding: 0.625rem 1.375rem;
-  background: var(--brand);
-  color: var(--brand-on);
-  border: none;
-  border-radius: 999px;
-  font-size: 0.9375rem;
-  font-weight: 600;
-  cursor: pointer;
-  transition: background 0.2s ease, transform 0.15s ease;
-  font-family: inherit;
-}
-
-.nearMeBtn:hover:not(:disabled) {
-  background: var(--status-above);
-  transform: translateY(-1px);
-}
-
-.nearMeBtn:disabled {
-  opacity: 0.7;
-  cursor: not-allowed;
-}
-
-.nearMeSpinner {
-  display: inline-block;
-  width: 14px;
-  height: 14px;
-  border: 2px solid rgba(var(--text-inverse-rgb), 0.35);
-  border-top-color: var(--brand-on);
-  border-radius: 50%;
-  animation: nearMeSpin 0.7s linear infinite;
-  flex-shrink: 0;
-}
-
-@keyframes nearMeSpin {
-  to {
-    transform: rotate(360deg);
-  }
-}
-
-.geoError {
-  font-size: 0.8125rem;
-  color: var(--brand-strong);
-  margin: 0;
-  max-width: 340px;
-  text-align: center;
-}
-
-@media (max-width: 600px) {
-  .nearMeBtn {
-    width: 100%;
-    justify-content: center;
-  }
-}
+/* ── Search ───────────────────────────────────────────────────────── */
 
 .searchSection {
   margin-bottom: 0;
@@ -127,43 +46,90 @@
 
 .omniBoxContainer {
   display: flex;
+  align-items: center;
   gap: 0.5rem;
 }
 
+/* The hero pill: hairline, soft corner, everything else sits inside it. */
+.heroMode .omniBoxContainer {
+  gap: 0.375rem;
+  padding: 0.3125rem;
+  background: var(--bg-card);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-md);
+  box-shadow: var(--shadow-soft);
+  transition: border-color var(--transition), box-shadow var(--transition);
+}
+
+.heroMode .omniBoxContainer:focus-within {
+  border-color: var(--brand);
+  box-shadow: 0 0 0 3px rgba(var(--brand-rgb), 0.16);
+}
+
+.omniIcon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex: 0 0 auto;
+  padding-left: 0.625rem;
+  color: var(--text-muted);
+}
+
 .omniInput {
   flex: 1;
-  padding: 0.875rem 1.25rem;
-  font-size: 1.05rem;
-  border: 2px solid var(--border);
-  border-radius: 8px;
-  outline: none;
-  transition: all 0.2s ease;
+  min-width: 0;
+  padding: 0.6875rem 0.875rem;
+  font-family: var(--font-ui);
+  /* 1rem, not smaller: iOS Safari zooms the viewport on any control under
+     16px, which throws the user out of the hero on first tap. */
+  font-size: var(--step-0);
+  color: var(--text-primary);
   background: var(--bg-card);
-  font-family: inherit;
-}
-
-.omniInput:focus {
-  border-color: var(--brand);
-  box-shadow: 0 0 0 3px var(--brand-bg);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
+  outline: none;
+  transition: border-color var(--transition), box-shadow var(--transition);
 }
 
 .omniInput::placeholder {
   color: var(--text-muted);
 }
 
+.omniInput:focus {
+  border-color: var(--brand);
+  box-shadow: 0 0 0 3px rgba(var(--brand-rgb), 0.16);
+}
+
+/* Inside the pill the input carries no chrome — the pill holds the border
+   and the focus ring, so the two never double up. */
+.heroMode .omniInput {
+  background: none;
+  border-color: transparent;
+  padding-left: 0.5rem;
+}
+
+.heroMode .omniInput:focus {
+  border-color: transparent;
+  box-shadow: none;
+}
+
 .searchButton {
-  padding: 0.875rem 2rem;
-  font-size: 1.05rem;
-  border-radius: 8px;
-  min-width: 120px;
+  flex: 0 0 auto;
+  padding: 0.6875rem 1.25rem;
+  font-size: var(--step--1);
+  border-radius: var(--radius-sm);
+}
+
+.heroMode .searchButton {
+  padding: 0.75rem 1.375rem;
 }
 
 .spinner {
-  width: 20px;
-  height: 20px;
-  border: 2px solid rgba(var(--text-inverse-rgb), 0.3);
+  width: 1.0625rem;
+  height: 1.0625rem;
+  border: 2px solid rgba(var(--text-inverse-rgb), 0.35);
+  border-top-color: currentColor;
   border-radius: 50%;
-  border-top-color: var(--brand-on);
   animation: spin 0.8s linear infinite;
 }
 
@@ -171,103 +137,86 @@
   to { transform: rotate(360deg); }
 }
 
-.filters {
-  display: flex;
-  gap: 0.625rem;
-  flex-wrap: wrap;
-  margin-top: 0.625rem;
-  padding-top: 0.625rem;
-  border-top: 1px solid var(--border);
+/* ── Hero supporting copy ─────────────────────────────────────────── */
+
+.searchHint {
+  margin: 0.75rem 0 0;
+  font-family: var(--font-ui);
+  font-size: var(--step--1);
+  line-height: 1.5;
+  color: var(--text-muted);
+  text-align: center;
 }
 
-.filterSelect {
-  appearance: none;
-  -webkit-appearance: none;
-  flex: 1;
-  min-width: 180px;
-  padding: 0.625rem 2.25rem 0.625rem 1rem;
-  font-size: 0.875rem;
-  font-weight: 500;
-  font-family: inherit;
-  border: 1.5px solid var(--border);
-  border-radius: 8px;
-  background-color: var(--bg-card);
-  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%238a847a' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
-  background-repeat: no-repeat;
-  background-position: right 0.875rem center;
-  background-size: 10px 6px;
-  cursor: pointer;
-  outline: none;
-  color: var(--text-primary);
-  transition: border-color 0.15s ease, box-shadow 0.15s ease;
-}
-
-.filterSelect:hover {
-  border-color: var(--text-muted);
-}
-
-.filterSelect:focus {
-  border-color: var(--brand);
-  box-shadow: 0 0 0 3px rgba(var(--brand-rgb), 0.12);
-}
-
-.clearButton {
-  padding: 0.4rem 1rem;
-  font-size: 0.8125rem;
-  font-weight: 500;
-  border-radius: 999px;
-}
-
-@media (max-width: 768px) {
-  .filterBar {
-    padding: 1rem;
-  }
-
-  .omniBoxContainer {
-    flex-direction: column;
-  }
-
-  .searchButton {
-    width: 100%;
-  }
-
-  .filters {
-    flex-direction: column;
-  }
-
-  .filterSelect {
-    min-width: 100%;
-  }
-
-  .controlsRow {
-    gap: 0.5rem;
-  }
-
-  .controlsRow .advancedToggle {
-    margin-left: 0;
-  }
-
-  .controlSelect {
-    flex: 1;
-    min-width: 140px;
-  }
-}
-
-.radiusWrapper {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  margin-top: 0.5rem;
-}
-
-.radiusLabel {
-  font-size: 0.8125rem;
-  font-weight: 500;
+.searchHint strong {
   color: var(--text-secondary);
-  white-space: nowrap;
+  font-weight: 600;
 }
 
-/* ── Controls row (radius + phase + advanced toggle) ─── */
+.nearMeRow {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.375rem;
+  margin-top: 0.25rem;
+}
+
+/* Quiet text link, not a second button: the coral submit is the decisive
+   action and nothing beside it may compete for the same weight. */
+.nearMeBtn {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.375rem;
+  padding: 0.25rem 0.375rem;
+  background: none;
+  border: 0;
+  border-radius: var(--radius-sm);
+  font-family: var(--font-ui);
+  font-size: var(--step--1);
+  font-weight: 600;
+  line-height: 1.4;
+  color: var(--brand);
+  cursor: pointer;
+  transition: color var(--transition);
+}
+
+.nearMeBtn:hover:not(:disabled) {
+  color: var(--brand-strong);
+  text-decoration: underline;
+  text-underline-offset: 3px;
+}
+
+.nearMeBtn:disabled {
+  opacity: 0.65;
+  cursor: not-allowed;
+}
+
+.nearMeSpinner {
+  display: inline-block;
+  width: 13px;
+  height: 13px;
+  border: 2px solid rgba(var(--brand-rgb), 0.3);
+  border-top-color: var(--brand);
+  border-radius: 50%;
+  animation: nearMeSpin 0.7s linear infinite;
+  flex-shrink: 0;
+}
+
+@keyframes nearMeSpin {
+  to { transform: rotate(360deg); }
+}
+
+.geoError {
+  margin: 0;
+  max-width: 340px;
+  font-size: var(--step--1);
+  line-height: 1.45;
+  color: var(--brand-strong);
+  text-align: center;
+}
+
+/* ── Controls row (radius + phase + advanced toggle) ──────────────── */
+
 .controlsRow {
   display: flex;
   align-items: center;
@@ -289,65 +238,139 @@
   flex-shrink: 0;
 }
 
-/* Pill-style inline filter controls (radius + phase) */
-.controlSelect {
-  appearance: none;
-  -webkit-appearance: none;
-  padding: 0.4rem 2rem 0.4rem 0.875rem;
-  font-size: 0.8125rem;
-  font-weight: 500;
-  font-family: inherit;
-  border: 1.5px solid var(--border);
-  border-radius: 999px;
-  background-color: var(--bg-card);
-  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%238a847a' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
-  background-repeat: no-repeat;
-  background-position: right 0.65rem center;
-  background-size: 10px 6px;
-  color: var(--text-primary);
-  cursor: pointer;
-  outline: none;
-  transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
+.radiusLabel {
+  font-size: var(--step--2);
+  font-weight: 600;
+  color: var(--text-secondary);
   white-space: nowrap;
 }
 
-.controlSelect:hover {
-  border-color: var(--text-muted);
+/* ── Selects ──────────────────────────────────────────────────────── */
+
+.selectShell {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  min-width: 0;
+}
+
+.selectShellWide {
+  flex: 1;
+  min-width: 180px;
+}
+
+.selectShell select {
+  width: 100%;
+}
+
+/* Drawn, not imaged: a background-image arrow has to hardcode its own
+   colour, and would stay light-mode grey on the dark ground. */
+.selectChevron {
+  position: absolute;
+  right: 0.75rem;
+  top: 50%;
+  width: 0;
+  height: 0;
+  margin-top: -2px;
+  pointer-events: none;
+  color: var(--text-muted);
+  border-left: 4px solid transparent;
+  border-right: 4px solid transparent;
+  border-top: 5px solid currentColor;
+}
+
+.filterSelect,
+.controlSelect {
+  appearance: none;
+  -webkit-appearance: none;
+  font-family: var(--font-ui);
+  color: var(--text-primary);
+  background-color: var(--bg-card);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
+  cursor: pointer;
+  outline: none;
+  transition: border-color var(--transition), background-color var(--transition),
+    box-shadow var(--transition), color var(--transition);
+}
+
+.filterSelect {
+  padding: 0.5625rem 2rem 0.5625rem 0.75rem;
+  font-size: var(--step--1);
+  font-weight: 500;
+}
+
+.controlSelect {
+  padding: 0.4375rem 1.875rem 0.4375rem 0.75rem;
+  font-size: var(--step--1);
+  font-weight: 500;
+  white-space: nowrap;
+}
+
+.filterSelect:hover:not(:disabled),
+.controlSelect:hover:not(:disabled) {
+  border-color: var(--border-strong);
   background-color: var(--bg-secondary);
 }
 
+.filterSelect:focus,
 .controlSelect:focus {
   border-color: var(--brand);
-  box-shadow: 0 0 0 3px rgba(var(--brand-rgb), 0.12);
+  box-shadow: 0 0 0 3px rgba(var(--brand-rgb), 0.16);
 }
 
-/* ── Advanced filters toggle ─────────────────────────── */
+/* Selected — i.e. this control is narrowing the list. Sage tint, brand
+   line: the same pairing the results use for "on". */
+.selectActive {
+  background-color: rgba(var(--sage-rgb), 0.38);
+  border-color: var(--brand);
+  color: var(--brand-strong);
+  font-weight: 600;
+}
+
+.selectActive:hover:not(:disabled) {
+  background-color: rgba(var(--sage-rgb), 0.5);
+  border-color: var(--brand);
+}
+
+.filters {
+  display: flex;
+  gap: 0.625rem;
+  flex-wrap: wrap;
+  margin-top: 0.75rem;
+  padding-top: 0.75rem;
+  border-top: 1px solid var(--border);
+}
+
+/* ── Advanced filters toggle ──────────────────────────────────────── */
 
 .advancedToggle {
   display: inline-flex;
   align-items: center;
   gap: 0.375rem;
+  padding: 0.4375rem 0.75rem;
   background: none;
-  border: 1.5px solid var(--border);
-  border-radius: 999px;
-  padding: 0.4rem 0.875rem;
-  font-size: 0.8125rem;
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
+  font-family: var(--font-ui);
+  font-size: var(--step--1);
   font-weight: 500;
+  line-height: 1;
   color: var(--text-secondary);
   cursor: pointer;
-  font-family: inherit;
-  transition: all 0.15s ease;
   white-space: nowrap;
+  transition: border-color var(--transition), background-color var(--transition),
+    color var(--transition);
 }
 
 .advancedToggle:hover {
-  border-color: var(--text-muted);
+  border-color: var(--border-strong);
   background-color: var(--bg-secondary);
   color: var(--text-primary);
 }
 
-/* When filters are applied, promote the toggle to a coral pill so users
-   can see at a glance that the result list is being narrowed. */
+/* Applied filters read as a brand chip, so it's obvious at a glance that
+   the list below is being narrowed. */
 .advancedToggleActive {
   border-color: var(--brand);
   background: var(--brand-bg);
@@ -356,11 +379,18 @@
 }
 
 .advancedToggleActive:hover {
-  border-color: var(--brand-strong);
+  border-color: var(--brand);
   background: var(--brand-bg);
   color: var(--brand-strong);
 }
 
+.clearButton {
+  padding: 0.4375rem 0.875rem;
+  font-size: var(--step--1);
+  font-weight: 500;
+  border-radius: var(--radius-sm);
+}
+
 .chevronDown,
 .chevronUp {
   display: inline-block;
@@ -377,3 +407,70 @@
 .chevronUp {
   border-bottom: 4.5px solid currentColor;
 }
+
+/* ── Narrow ───────────────────────────────────────────────────────── */
+
+@media (max-width: 768px) {
+  .filterBar {
+    padding: 0.875rem;
+  }
+
+  /* The hero pill stays a pill at every width — stacking it would lose the
+     one shape the page is built around. Only the results bar stacks. */
+  .filterBar:not(.heroMode) .omniBoxContainer {
+    flex-direction: column;
+    align-items: stretch;
+  }
+
+  .filterBar:not(.heroMode) .searchButton {
+    width: 100%;
+  }
+
+  .filters {
+    flex-direction: column;
+  }
+
+  .selectShellWide {
+    min-width: 100%;
+  }
+
+  .controlsRow {
+    gap: 0.5rem;
+  }
+
+  .controlsRow .advancedToggle {
+    margin-left: 0;
+  }
+
+  .controlSelect {
+    flex: 1;
+    min-width: 140px;
+  }
+
+  .searchHint {
+    text-align: left;
+  }
+
+  .nearMeRow {
+    align-items: flex-start;
+  }
+
+  .geoError {
+    text-align: left;
+  }
+}
+
+@media (max-width: 420px) {
+  /* Below this the pin costs more room than it earns. */
+  .heroMode .omniIcon {
+    display: none;
+  }
+
+  .heroMode .omniInput {
+    padding-left: 0.75rem;
+  }
+
+  .heroMode .searchButton {
+    padding: 0.75rem 0.875rem;
+  }
+}

nextjs-app/components/FilterBar.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import { useState, useCallback, useTransition, useRef, useEffect } from "react";
+import type { ReactNode } from "react";
 import { useRouter, useSearchParams, usePathname } from "next/navigation";
 import { isValidPostcode } from "@/lib/utils";
 import { track } from "@/lib/analytics";
@@ -18,6 +19,28 @@ interface FilterBarProps {
   geoError?: string | null;
 }
 
+/**
+ * Wraps a native <select> so the disclosure arrow can be drawn in CSS from
+ * currentColor rather than baked into a background image — a hardcoded arrow
+ * colour is the one thing in a select that can't follow the theme.
+ */
+function SelectShell({
+  children,
+  wide,
+}: {
+  children: ReactNode;
+  wide?: boolean;
+}) {
+  return (
+    <span
+      className={`${styles.selectShell}${wide ? ` ${styles.selectShellWide}` : ""}`}
+    >
+      {children}
+      <span className={styles.selectChevron} aria-hidden="true" />
+    </span>
+  );
+}
+
 export function FilterBar({
   filters,
   isHero,
@@ -172,12 +195,33 @@ export function FilterBar({
   const isSecondaryMode =
     currentPhase === "secondary" || genderOptions.length > 0;
 
+  // A select that is narrowing the results carries a sage tint; the class is
+  // only ever additive, so the control's behaviour is untouched.
+  const activeIf = (value: string) => (value ? ` ${styles.selectActive}` : "");
+
   return (
     <div
       className={`${styles.filterBar} ${isPending ? styles.isLoading : ""} ${isHero ? styles.heroMode : ""}`}
     >
       <form onSubmit={handleSearchSubmit} className={styles.searchSection}>
         <div className={styles.omniBoxContainer}>
+          {isHero && (
+            <span className={styles.omniIcon} aria-hidden="true">
+              <svg
+                width="18"
+                height="18"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                strokeWidth="2"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+              >
+                <path d="M12 21s7-5.6 7-11a7 7 0 1 0-14 0c0 5.4 7 11 7 11Z" />
+                <circle cx="12" cy="10" r="2.6" />
+              </svg>
+            </span>
+          )}
           <input
             ref={inputRef}
             type="search"
@@ -188,10 +232,10 @@ export function FilterBar({
           />
           <button
             type="submit"
-            className={`btn btn-primary ${styles.searchButton}`}
+            className={`btn btn-action ${styles.searchButton}`}
             disabled={isPending}
           >
-            {isPending ? <div className={styles.spinner}></div> : "Search"}
+            {isPending ? <div className={styles.spinner}></div> : isHero ? "Search schools" : "Search"}
           </button>
         </div>
         {isHero && (
@@ -248,34 +292,38 @@ export function FilterBar({
             {currentPostcode && (
               <div className={styles.radiusControl}>
                 <label className={styles.radiusLabel}>Within:</label>
-                <select
-                  value={currentRadius}
-                  onChange={(e) => updateURL({ radius: e.target.value })}
-                  className={styles.controlSelect}
-                  disabled={isPending}
-                >
-                  <option value="0.5">0.5 miles</option>
-                  <option value="1">1 mile</option>
-                  <option value="3">3 miles</option>
-                  <option value="5">5 miles</option>
-                </select>
+                <SelectShell>
+                  <select
+                    value={currentRadius}
+                    onChange={(e) => updateURL({ radius: e.target.value })}
+                    className={styles.controlSelect}
+                    disabled={isPending}
+                  >
+                    <option value="0.5">0.5 miles</option>
+                    <option value="1">1 mile</option>
+                    <option value="3">3 miles</option>
+                    <option value="5">5 miles</option>
+                  </select>
+                </SelectShell>
               </div>
             )}
 
             {phaseOptions.length > 0 && (
-              <select
-                value={currentPhase}
-                onChange={(e) => handleFilterChange("phase", e.target.value)}
-                className={styles.controlSelect}
-                disabled={isPending}
-              >
-                <option value="">All Phases</option>
-                {phaseOptions.map((p) => (
-                  <option key={p} value={p.toLowerCase()}>
-                    {p}
-                  </option>
-                ))}
-              </select>
+              <SelectShell>
+                <select
+                  value={currentPhase}
+                  onChange={(e) => handleFilterChange("phase", e.target.value)}
+                  className={`${styles.controlSelect}${activeIf(currentPhase)}`}
+                  disabled={isPending}
+                >
+                  <option value="">All Phases</option>
+                  {phaseOptions.map((p) => (
+                    <option key={p} value={p.toLowerCase()}>
+                      {p}
+                    </option>
+                  ))}
+                </select>
+              </SelectShell>
             )}
 
             <button
@@ -307,87 +355,97 @@ export function FilterBar({
 
           {filtersOpen && (
             <div className={styles.filters}>
-              <select
-                value={currentLA}
-                onChange={(e) =>
-                  handleFilterChange("local_authority", e.target.value)
-                }
-                className={styles.filterSelect}
-                disabled={isPending}
-              >
-                <option value="">All Local Authorities</option>
-                {laOptions.map((la) => (
-                  <option key={la} value={la}>
-                    {la}
-                  </option>
-                ))}
-              </select>
+              <SelectShell wide>
+                <select
+                  value={currentLA}
+                  onChange={(e) =>
+                    handleFilterChange("local_authority", e.target.value)
+                  }
+                  className={`${styles.filterSelect}${activeIf(currentLA)}`}
+                  disabled={isPending}
+                >
+                  <option value="">All Local Authorities</option>
+                  {laOptions.map((la) => (
+                    <option key={la} value={la}>
+                      {la}
+                    </option>
+                  ))}
+                </select>
+              </SelectShell>
 
-              <select
-                value={currentType}
-                onChange={(e) =>
-                  handleFilterChange("school_type", e.target.value)
-                }
-                className={styles.filterSelect}
-                disabled={isPending}
-              >
-                <option value="">All School Types</option>
-                {typeOptions.map((type) => (
-                  <option key={type} value={type}>
-                    {type}
-                  </option>
-                ))}
-              </select>
+              <SelectShell wide>
+                <select
+                  value={currentType}
+                  onChange={(e) =>
+                    handleFilterChange("school_type", e.target.value)
+                  }
+                  className={`${styles.filterSelect}${activeIf(currentType)}`}
+                  disabled={isPending}
+                >
+                  <option value="">All School Types</option>
+                  {typeOptions.map((type) => (
+                    <option key={type} value={type}>
+                      {type}
+                    </option>
+                  ))}
+                </select>
+              </SelectShell>
 
               {isSecondaryMode && (
                 <>
                   {genderOptions.length > 0 && (
-                    <select
-                      value={currentGender}
-                      onChange={(e) =>
-                        handleFilterChange("gender", e.target.value)
-                      }
-                      className={styles.filterSelect}
-                      disabled={isPending}
-                    >
-                      <option value="">Boys, Girls &amp; Mixed</option>
-                      {genderOptions.map((g) => (
-                        <option key={g} value={g.toLowerCase()}>
-                          {g}
-                        </option>
-                      ))}
-                    </select>
+                    <SelectShell wide>
+                      <select
+                        value={currentGender}
+                        onChange={(e) =>
+                          handleFilterChange("gender", e.target.value)
+                        }
+                        className={`${styles.filterSelect}${activeIf(currentGender)}`}
+                        disabled={isPending}
+                      >
+                        <option value="">Boys, Girls &amp; Mixed</option>
+                        {genderOptions.map((g) => (
+                          <option key={g} value={g.toLowerCase()}>
+                            {g}
+                          </option>
+                        ))}
+                      </select>
+                    </SelectShell>
                   )}
 
-                  <select
-                    value={currentHasSixthForm}
-                    onChange={(e) =>
-                      handleFilterChange("has_sixth_form", e.target.value)
-                    }
-                    className={styles.filterSelect}
-                    disabled={isPending}
-                  >
-                    <option value="">With or without sixth form</option>
-                    <option value="yes">With sixth form</option>
-                    <option value="no">Without sixth form</option>
-                  </select>
-
-                  {admissionsPolicyOptions.length > 0 && (
+                  <SelectShell wide>
                     <select
-                      value={currentAdmissionsPolicy}
+                      value={currentHasSixthForm}
                       onChange={(e) =>
-                        handleFilterChange("admissions_policy", e.target.value)
+                        handleFilterChange("has_sixth_form", e.target.value)
                       }
-                      className={styles.filterSelect}
+                      className={`${styles.filterSelect}${activeIf(currentHasSixthForm)}`}
                       disabled={isPending}
                     >
-                      <option value="">All admissions types</option>
-                      {admissionsPolicyOptions.map((p) => (
-                        <option key={p} value={p.toLowerCase()}>
-                          {p}
-                        </option>
-                      ))}
+                      <option value="">With or without sixth form</option>
+                      <option value="yes">With sixth form</option>
+                      <option value="no">Without sixth form</option>
                     </select>
+                  </SelectShell>
+
+                  {admissionsPolicyOptions.length > 0 && (
+                    <SelectShell wide>
+                      <select
+                        value={currentAdmissionsPolicy}
+                        onChange={(e) =>
+                          handleFilterChange("admissions_policy", e.target.value)
+                        }
+                        className={`${styles.filterSelect}${activeIf(currentAdmissionsPolicy)}`}
+                        disabled={isPending}
+                      >
+                        <option value="">All admissions types</option>
+                        {admissionsPolicyOptions.map((p) => (
+                          <option key={p} value={p.toLowerCase()}>
+                            {p}
+                          </option>
+                        ))}
+                      </select>
+                    </SelectShell>
                   )}
                 </>
               )}

nextjs-app/components/Footer.module.css

@@ -1,3 +1,13 @@
+/*
+ * The footer band.
+ *
+ * --surface-sunken is deep teal in BOTH themes on purpose, so nothing in here
+ * may read a --text-* or --bg-* token: those invert with the theme and would
+ * put dark ink on the teal (or teal on teal) in one of the two. Every
+ * foreground below comes from the --on-sunken-* family, which is pinned to the
+ * band rather than to the page.
+ */
+
 .footer {
   background: var(--surface-sunken);
   color: var(--on-sunken);
@@ -12,7 +22,7 @@
 
 .content {
   display: grid;
-  grid-template-columns: 1.5fr 1fr 1fr;
+  grid-template-columns: 1.6fr 1fr 1fr;
   gap: 2rem;
   margin-bottom: 3rem;
 }
@@ -20,31 +30,77 @@
 .section {
   display: flex;
   flex-direction: column;
+  align-items: flex-start;
   gap: 1rem;
 }
 
-.title {
+/* ─── Brand lockup ──────────────────────────────────────────────── */
+
+.lockup {
+  display: flex;
+  align-items: center;
+  gap: 0.625rem;
   margin: 0;
-  font-size: 1.25rem;
   font-weight: 700;
-  color: var(--on-sunken);
+}
+
+.lockupMark {
+  display: inline-flex;
+  flex: 0 0 auto;
+  /* Height drives; the artwork is taller than it is wide. */
+  height: 34px;
+}
+
+.lockupMark img {
+  display: block;
+  height: 100%;
+  width: auto;
+}
+
+/* Same wordmark as the header, inverted: "school" in the band's foreground,
+   "compare" in sage — the one accent that reads cleanly on deep teal. */
+.wordmark {
   font-family: var(--font-display);
+  font-size: var(--step-2);
+  font-weight: 700;
+  line-height: 1;
+  letter-spacing: -0.035em;
+  color: var(--on-sunken);
+}
+
+.wordmarkAccent {
+  color: var(--sage);
+}
+
+/* Key messaging, so this is the one place in the footer that takes Manrope
+   for a full sentence. */
+.tagline {
+  margin: 0;
+  font-family: var(--font-display);
+  font-size: var(--step-1);
+  font-weight: 600;
+  line-height: 1.35;
+  letter-spacing: -0.015em;
+  color: var(--on-sunken);
 }
 
 .description {
-  margin: 0;
-  font-size: 0.875rem;
+  margin: -0.5rem 0 0;
+  font-size: var(--step--1);
   line-height: 1.6;
   color: var(--on-sunken-muted);
+  max-width: 34ch;
 }
 
 .sectionTitle {
   margin: 0;
-  font-size: 0.875rem;
-  font-weight: 600;
-  color: var(--on-sunken-muted);
+  font-family: var(--font-display);
+  font-size: var(--step--1);
+  font-weight: 700;
+  line-height: 1;
+  color: var(--sage);
   text-transform: uppercase;
-  letter-spacing: 0.05em;
+  letter-spacing: 0.1em;
 }
 
 .links {
@@ -57,10 +113,12 @@
 }
 
 .link {
-  font-size: 0.875rem;
+  font-family: var(--font-ui);
+  font-size: var(--step--1);
   color: var(--on-sunken-muted);
   text-decoration: none;
-  transition: color 0.2s ease;
+  border-radius: var(--radius-sm);
+  transition: color var(--transition);
 }
 
 .link:hover {
@@ -68,23 +126,42 @@
 }
 
 .linkDisabled {
-  font-size: 0.875rem;
+  font-size: var(--step--1);
   color: var(--on-sunken-faint);
   cursor: not-allowed;
 }
 
+/* ─── Bottom rule ───────────────────────────────────────────────── */
+
+/*
+ * The divider is drawn as a pseudo-element at low opacity rather than as an
+ * rgba() border: there is no channel token for --on-sunken, and every literal
+ * that would work here (rgba(255,255,255,…)) is exactly the kind of hardcoded
+ * colour the token layer exists to remove.
+ */
 .bottom {
+  position: relative;
   padding-top: 2rem;
-  border-top: 1px solid rgba(255, 255, 255, 0.12);
   display: flex;
   flex-direction: column;
   gap: 0.5rem;
 }
 
+.bottom::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 1px;
+  background: var(--on-sunken);
+  opacity: 0.16;
+}
+
 .copyright,
 .disclaimer {
   margin: 0;
-  font-size: 0.875rem;
+  font-size: var(--step--1);
   color: var(--on-sunken-muted);
 }
 

nextjs-app/components/Footer.tsx

@@ -1,8 +1,13 @@
 /**
  * Footer Component
- * Site footer with links and info
+ *
+ * The footer is the guideline's "brand in action" band: a deep teal anchor
+ * that stays teal in both themes. Everything inside it therefore reads from
+ * the --on-sunken-* family rather than the page's --text-* tokens, which
+ * invert and would go dark against the teal in one theme or the other.
  */
 
+import { LogoMark } from './Logo';
 import styles from './Footer.module.css';
 
 export function Footer() {
@@ -13,7 +18,20 @@ export function Footer() {
       <div className={styles.container}>
         <div className={styles.content}>
           <div className={styles.section}>
-            <h3 className={styles.title}>SchoolCompare</h3>
+            {/*
+              On the sunken band the mark inverts: the pin takes the band's
+              foreground and the leaf is knocked out in the band itself. The
+              header's defaults (brand pin, card leaf) would disappear here.
+            */}
+            <h3 className={styles.lockup}>
+              <span className={styles.lockupMark}>
+                <LogoMark variant="onDark" size={34} />
+              </span>
+              <span className={styles.wordmark}>
+                school<span className={styles.wordmarkAccent}>compare</span>
+              </span>
+            </h3>
+            <p className={styles.tagline}>Find the right school. For their future.</p>
             <p className={styles.description}>
               Compare primary and secondary schools across England.
             </p>
@@ -31,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>
@@ -69,7 +89,7 @@ export function Footer() {
 
         <div className={styles.bottom}>
           <p className={styles.copyright}>
-            © {currentYear} SchoolCompare.co.uk
+            © {currentYear} schoolcompare.co.uk
           </p>
         </div>
       </div>

nextjs-app/components/HomeView.module.css

@@ -2,10 +2,127 @@
   width: 100%;
 }
 
-.heroSection {
-  text-align: center;
-  margin-bottom: 1.5rem;
-  padding-top: 2.5rem;
+/* ── 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: 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 ──────────────────────────────────────────────────────────────────
+   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 {
+  display: grid;
+  grid-template-columns: 1.12fr 0.88fr;
+  align-items: stretch;
+  background: var(--bg-secondary);
+  border-radius: var(--radius-xl);
+  overflow: hidden;
+}
+
+.heroContent {
+  align-self: center;
+  padding: 3rem 1.5rem 3rem 3rem;
+  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;
+}
+
+/* Both compositions fill the slot; the breakpoint below picks one. */
+.heroArtWide,
+.heroArtBand {
+  position: absolute;
+  inset: 0;
+}
+
+.heroArt svg {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  display: block;
+}
+
+/* The band composition only exists below the one-column breakpoint — above
+   it the slot is tall and the wide drawing is the right picture. */
+.heroArtBand {
+  display: none;
 }
 
 .heroEyebrow {
@@ -32,78 +149,176 @@
 }
 
 .heroTitle {
-  font-size: 3rem;
+  font-size: var(--step-4);
   font-weight: 700;
   color: var(--text-primary);
-  margin-bottom: 0.85rem;
-  line-height: 1.08;
-  letter-spacing: -0.015em;
+  margin-bottom: 0.75rem;
+  line-height: 1.12;
+  letter-spacing: -0.03em;
   font-family: var(--font-display);
-  max-width: 840px;
-  margin-left: auto;
-  margin-right: auto;
+  max-width: 18ch;
 }
 
+/* The em is a colour change, not an emphasis change — Manrope has no italic
+   in the loaded weights, so leaving font-style alone would synthesise a slant. */
 .heroEmph {
-  color: var(--brand-strong);
-  font-style: italic;
+  color: var(--brand);
+  font-style: normal;
 }
 
 .heroDescription {
-  font-size: 1.05rem;
+  font-size: var(--step-1);
   color: var(--text-secondary);
-  margin: 0 auto 0.5rem;
-  max-width: 680px;
+  margin: 0 0 1.5rem;
+  max-width: 46ch;
   line-height: 1.55;
 }
 
 .heroDescription strong {
   color: var(--text-primary);
-  font-weight: 700;
+  font-weight: 600;
 }
 
-/* Copy variants: full paragraph ≥641px, compact merged line on phones. */
-.heroDescriptionCompact {
-  display: none;
+@media (max-width: 1024px) {
+  .heroContent {
+    padding: 2.25rem 1.5rem 2.25rem 2rem;
+  }
+  .heroArt {
+    min-height: 20rem;
+  }
 }
 
-@media (max-width: 768px) {
-  .heroSection {
-    padding-top: 1.5rem;
+/* One column: content first, then a short band of landscape. */
+@media (max-width: 860px) {
+  .heroPanel {
+    grid-template-columns: 1fr;
+  }
+  .heroContent {
+    padding: 2rem 1.5rem 1.75rem;
+  }
+  /* One column: the slot becomes a wide, short band, so swap in the drawing
+     composed for that crop. See the note at the top of Illustration.tsx. */
+  .heroArt {
+    min-height: 11rem;
+    order: 2;
+  }
+  .heroArtWide {
+    display: none;
+  }
+  .heroArtBand {
+    display: block;
   }
   .heroTitle {
-    font-size: 2rem;
+    font-size: var(--step-3);
+    max-width: none;
   }
   .heroDescription {
-    font-size: 0.95rem;
+    font-size: var(--step-0);
+    max-width: none;
   }
 }
 
-/* Above the fold on phones, every line costs. Drop the eyebrow tag and swap
-   the long descriptive paragraph for one compact line that carries coverage
-   ("24,000+ schools") and freshness ("updated for 2026/27") — a first-time
-   visitor otherwise sees only a poetic h1 and a bare box, with no reason to
-   trust the data (audit P1.7, feeds the 46% home exit rate). */
+/* Above the fold on phones, every line costs. Drop the eyebrow tag and the
+   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) {
-  .heroSection {
-    padding-top: 0.75rem;
-    margin-bottom: 1rem;
+  .heroPanel {
+    border-radius: var(--radius-lg);
+  }
+  .heroContent {
+    padding: 1.25rem 1.1rem 1.5rem;
   }
   .heroEyebrow,
   .heroDescriptionFull {
     display: none;
   }
-  .heroDescriptionCompact {
-    display: block;
-  }
   .heroDescription {
-    font-size: 0.85rem;
-    line-height: 1.4;
-    max-width: 320px;
-    margin-bottom: 0.25rem;
+    font-size: 0.9rem;
+    line-height: 1.45;
+    margin-bottom: 1rem;
   }
   .heroTitle {
-    font-size: 1.65rem;
+    font-size: 1.75rem;
+    margin-bottom: 0.5rem;
+  }
+  .heroArt {
+    min-height: 8.5rem;
+  }
+}
+
+/* ── Value props ───────────────────────────────────────────────────────────
+   Four reasons, straight from the guideline. The fourth is ours rather than
+   theirs — see the comment on VALUE_PROPS in HomeView.tsx. */
+.valueProps {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 1.25rem;
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+.valueProp {
+  display: flex;
+  gap: 0.8rem;
+  align-items: flex-start;
+}
+
+.propIcon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex: 0 0 2.6rem;
+  width: 2.6rem;
+  height: 2.6rem;
+  border-radius: var(--radius-md);
+}
+
+.propIconTrust {
+  background: var(--brand-bg);
+  color: var(--brand);
+}
+.propIconCompare {
+  background: rgba(var(--sage-rgb), 0.42);
+  color: var(--status-above);
+}
+.propIconContext {
+  background: rgba(242, 201, 76, 0.26);
+  color: var(--mustard-ink);
+}
+.propIconDeadline {
+  background: rgba(221, 216, 245, 0.6);
+  color: var(--phase-nursery);
+}
+
+.propTitle {
+  font-family: var(--font-display);
+  font-size: var(--step-0);
+  font-weight: 700;
+  color: var(--text-primary);
+  margin: 0 0 0.15rem;
+  letter-spacing: -0.01em;
+}
+
+.propBody {
+  font-size: var(--step--1);
+  color: var(--text-muted);
+  line-height: 1.5;
+  margin: 0;
+}
+
+@media (max-width: 900px) {
+  .valueProps {
+    grid-template-columns: repeat(2, 1fr);
+    gap: 1rem 1.25rem;
+  }
+}
+
+@media (max-width: 560px) {
+  .valueProps {
+    grid-template-columns: 1fr;
+    gap: 0.85rem;
   }
 }
 
@@ -536,86 +751,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 {
@@ -1030,12 +1174,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);
   }
 }
 
@@ -1059,18 +1200,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 {
@@ -1079,23 +1231,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 {
@@ -1107,53 +1242,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);
   }
 }
 
@@ -1232,189 +1339,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;
   }
 }

nextjs-app/components/HomeView.tsx

@@ -12,6 +12,7 @@ import { SchoolRow } from './SchoolRow';
 import { SecondarySchoolRow } from './SecondarySchoolRow';
 import { SchoolMap } from './SchoolMap';
 import { EmptyState } from './EmptyState';
+import { HeroIllustration, HeroIllustrationBand } from './Illustration';
 import { useComparisonContext } from '@/context/ComparisonContext';
 import { fetchSchools, fetchLAaverages, fetchNationalAverages } from '@/lib/api';
 import type { SchoolsResponse, Filters, School } from '@/lib/types';
@@ -39,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 {
@@ -56,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 },
@@ -63,6 +83,103 @@ const ADMISSIONS_CHIPS: CountdownChipData[] = [
   { type: 'offer',    track: 'Secondary · Offer Day',      milestone: 'Secondary National Offer Day',   month: 3,  day: 1  },
 ];
 
+/* ── Value-prop icons ──────────────────────────────────────────────────────
+   Rounded 2px line icons on a 24px grid, inheriting the chip's colour. Kept
+   local because they exist for this one row and nothing else. */
+
+const ICON_PROPS = {
+  viewBox: '0 0 24 24',
+  width: 21,
+  height: 21,
+  fill: 'none',
+  stroke: 'currentColor',
+  strokeWidth: 2,
+  strokeLinecap: 'round',
+  strokeLinejoin: 'round',
+  'aria-hidden': true,
+} as const;
+
+function ShieldCheckIcon() {
+  return (
+    <svg {...ICON_PROPS}>
+      <path d="M12 3 4 6v6c0 4.5 3.2 8.2 8 9 4.8-.8 8-4.5 8-9V6l-8-3Z" />
+      <path d="m9 12 2 2 4-4" />
+    </svg>
+  );
+}
+
+function BarsIcon() {
+  return (
+    <svg {...ICON_PROPS}>
+      <path d="M4 20V10M10 20V4M16 20v-7M22 20H2" />
+    </svg>
+  );
+}
+
+function HeartIcon() {
+  return (
+    <svg {...ICON_PROPS}>
+      <path d="M12 20s-7-4.4-7-9.2A3.9 3.9 0 0 1 12 8a3.9 3.9 0 0 1 7 2.8C19 15.6 12 20 12 20Z" />
+    </svg>
+  );
+}
+
+function CalendarIcon() {
+  return (
+    <svg {...ICON_PROPS}>
+      <rect x="3" y="5" width="18" height="16" rx="2" />
+      <path d="M3 10h18M8 3v4M16 3v4" />
+    </svg>
+  );
+}
+
+interface ValueProp {
+  icon: React.ReactNode;
+  tintClass: string;
+  title: string;
+  body: string;
+}
+
+/*
+ * 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 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[] = [
+  {
+    icon: <ShieldCheckIcon />,
+    tintClass: styles.propIconTrust,
+    title: 'Official & trusted',
+    body: 'Every figure comes from DfE performance tables and Ofsted.',
+  },
+  {
+    icon: <BarsIcon />,
+    tintClass: styles.propIconCompare,
+    title: 'Easy to compare',
+    body: 'Up to five schools side by side, on the measures that matter.',
+  },
+  {
+    icon: <HeartIcon />,
+    tintClass: styles.propIconContext,
+    title: 'Beyond the numbers',
+    body: 'SEN support, pupil premium and attendance — not just results.',
+  },
+  {
+    icon: <CalendarIcon />,
+    tintClass: styles.propIconDeadline,
+    title: 'Never miss a deadline',
+    body: 'Application and offer dates for both primary and secondary.',
+  },
+];
+
 export function HomeView({ initialSchools, filters, totalSchools, howItWorks, editorial }: HomeViewProps) {
   const searchParams = useSearchParams();
   const router = useRouter();
@@ -83,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');
@@ -148,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 });
@@ -243,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) => {
@@ -255,113 +408,142 @@ export function HomeView({ initialSchools, filters, totalSchools, howItWorks, ed
   }, [addSchool, selectedSchools.length]);
 
   return (
-    <div className={styles.homeView}>
-      {/* Combined Hero + Search and Filters */}
-      {!isSearchActive && (
-        <div className={styles.heroSection}>
-          <span className={styles.heroEyebrow}>
-            <span className={styles.heroEyebrowDot} aria-hidden="true" />
-            Updated for the 2026/27 admissions round
-          </span>
-          <h1 className={styles.heroTitle}>
-            Every school in England, <em className={styles.heroEmph}>compared.</em>
-          </h1>
-          <p className={styles.heroDescription}>
-            {/* Full copy for larger screens; a compact merged line (coverage +
-                freshness, standing in for the hidden eyebrow too) on phones,
-                where every line above the fold costs. */}
-            <span className={styles.heroDescriptionFull}>
-              <strong>24,000+ primary and secondary schools</strong> with Key Stage 2 SATs, GCSE results, Ofsted grades, progress scores and admissions data — side by side, in one place.
+    /* 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.
+          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}>
+              <span className={styles.heroEyebrowDot} aria-hidden="true" />
+              Updated for the 2026/27 admissions round
             </span>
-            <span className={styles.heroDescriptionCompact}>
-              <strong>24,000+ English schools</strong> — SATs, GCSEs, Ofsted &amp; admissions, side by side. Updated for 2026/27.
-            </span>
-          </p>
-        </div>
-      )}
+            <h1 className={styles.heroTitle}>
+              Find the school where your child will{' '}
+              <em className={styles.heroEmph}>flourish.</em>
+            </h1>
+            <p className={styles.heroDescription}>
+              Compare every school in England with clarity and confidence.
+              {/* The coverage sentence is the detail a first-time visitor needs
+                  but a returning one does not, so it drops away on phones where
+                  every line above the fold costs. */}
+              <span className={styles.heroDescriptionFull}>
+                {' '}Key Stage 2 SATs, GCSE results, Ofsted grades, progress scores
+                and admissions data{coverageLabel && <> for <strong>{coverageLabel} schools</strong></>} — side by
+                side, in one place.
+              </span>
+            </p>
 
-      <FilterBar
-        filters={filters}
-        isHero={!isSearchActive}
-        resultFilters={initialSchools.result_filters}
-        onNearMe={handleNearMe}
-        geoState={geoState}
-        geoError={geoError}
-      />
+            <FilterBar
+              filters={filters}
+              isHero
+              resultFilters={initialSchools.result_filters}
+              onNearMe={handleNearMe}
+              geoState={geoState}
+              geoError={geoError}
+            />
 
-      {/* Admissions countdown strip — only on landing page */}
-      {!isSearchActive && (
-        <section className={styles.admissionsStrip}>
-          <div className={styles.stripHeader}>
-            <span className={styles.stripLabel}>Key admissions deadlines</span>
-            <a href="/admissions" className={styles.stripCta}>Full admissions guide →</a>
           </div>
-          <div
-            className={styles.countdownRail}
-            style={{
-              opacity: sortedChips[0]?.days !== null ? 1 : 0,
-              transition: 'opacity 0.2s ease',
-            }}
-          >
-            {sortedChips.map(({ chip, days }) => {
-              const isUrgent = days !== null && days <= 14;
-              const chipClass = [
-                styles.countdownChip,
-                chip.type === 'deadline' ? styles.countdownChipDeadline : styles.countdownChipOffer,
-                isUrgent ? styles.countdownChipUrgent : '',
-              ].filter(Boolean).join(' ');
-              const trackClass = [
-                styles.chipTrack,
-                chip.type === 'deadline' ? styles.chipTrackDeadline : styles.chipTrackOffer,
-              ].join(' ');
-              return (
-                <div key={chip.milestone} className={chipClass}>
-                  <span className={trackClass}>
-                    <span className={styles.chipTrackDot} aria-hidden="true" />
-                    {chip.track}
-                  </span>
-                  <div>
-                    <span className={styles.chipDays}>{days === 0 ? 'Today' : (days ?? '—')}</span>
-                    {days !== null && days > 0 && <span className={styles.chipDaysUnit}>days</span>}
-                  </div>
-                  <div className={styles.chipMilestone}>{chip.milestone}</div>
-                  <div className={styles.chipDate}>
-                    {days !== null ? formatCountdownDate(chip.month, chip.day) : ''}
-                  </div>
-                </div>
-              );
-            })}
+
+          {/*
+            Two drawings, one visible — see the note at the top of
+            Illustration.tsx. The hero art slot ranges from about 1.34:1 to
+            4.9:1 across the breakpoints, which no single composition survives.
+          */}
+          <div className={styles.heroArt}>
+            <div className={styles.heroArtWide}>
+              <HeroIllustration />
+            </div>
+            <div className={styles.heroArtBand}>
+              <HeroIllustrationBand />
+            </div>
           </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}
+          isHero={false}
+          resultFilters={initialSchools.result_filters}
+          onNearMe={handleNearMe}
+          geoState={geoState}
+          geoError={geoError}
+        />
       )}
 
-      {/* 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>
+      {/* Next admissions deadline — one bar, not four cards. */}
+      {!isSearchActive && (
+        <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>
+                  <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>
       )}
 
       {/* 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}>
@@ -547,6 +729,7 @@ export function HomeView({ initialSchools, filters, totalSchools, howItWorks, ed
           </>
         )}
       </section>
+      )}
     </div>
   );
 }

nextjs-app/components/HowItWorksSection.tsx

@@ -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>

nextjs-app/components/Illustration.tsx

@@ -0,0 +1,212 @@
+/**
+ * Brand illustration — the landing hero's landscape.
+ *
+ * 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 path climbing through layered hills to a small schoolhouse,
+ * with a pin marking where you are.
+ *
+ * Deliberately server-safe: no 'use client', no hooks, no event handlers, so
+ * it renders in the RSC pass and never reaches the client bundle.
+ *
+ * TWO COMPOSITIONS, ON PURPOSE
+ * ----------------------------
+ * The hero art slot is not one shape. On a wide desktop it is roughly 1.5:1;
+ * at the 1024px breakpoint about 1.34:1; on a phone it collapses to a band
+ * near 2.6:1, and just above the one-column breakpoint it is nearly 5:1.
+ *
+ * A single drawing cannot cover 1.34:1 → 4.9:1. With `slice`, the SVG scales
+ * to cover and crops the overflow, anchored here to the bottom edge — so at
+ * 860×176 a 540×520 scene shows only its bottom 110 user units. That is what
+ * used to happen: the schoolhouse sat at y 218–324 and was cropped away
+ * entirely on phones, leaving bare hills and a pin pointing at nothing.
+ *
+ * So there are two drawings and CSS shows exactly one. They are both static
+ * server-rendered SVG, so this costs markup and nothing else — no JS, no
+ * second request, no layout shift. Each is composed against the crop window
+ * its own breakpoint actually produces; see the safe-zone note on each.
+ *
+ * Colour comes from the --ill-* tokens in globals.css, which are re-graded for
+ * the dark theme. Everything else about the scene is identical in both themes.
+ */
+
+/** Scoped so the gradient ids can't collide with another inline SVG. */
+const SKY_TALL_ID = 'sc-hero-sky-tall';
+const SKY_BAND_ID = 'sc-hero-sky-band';
+
+function SkyGradient({ id }: { id: string }) {
+  return (
+    <linearGradient id={id} x1="0" y1="0" x2="0" y2="1">
+      <stop offset="0" stopColor="var(--ill-sky-high)" />
+      <stop offset="1" stopColor="var(--ill-sky-low)" />
+    </linearGradient>
+  );
+}
+
+/**
+ * The schoolhouse. Drawn once, placed by each composition.
+ *
+ * Detail deliberately below what it was: the gable clock, the flagpole
+ * pennant and the four-window grid are gone. At the sizes this actually
+ * renders they read as noise, and they were what tipped the drawing from
+ * "soft brand illustration" into clip art.
+ */
+function Schoolhouse({ x, y, scale = 1 }: { x: number; y: number; scale?: number }) {
+  return (
+    <g transform={`translate(${x} ${y}) scale(${scale})`}>
+      <rect x="12" y="34" width="98" height="58" rx="6" fill="var(--ill-wall)" />
+      <path d="M2 36 L61 6 L120 36 Z" fill="var(--ill-roof)" />
+      <rect x="52" y="60" width="20" height="32" rx="3" fill="var(--ill-door)" />
+      <rect x="26" y="48" width="18" height="16" rx="4" fill="var(--ill-window)" />
+      <rect x="80" y="48" width="18" height="16" rx="4" fill="var(--ill-window)" />
+    </g>
+  );
+}
+
+/** The "you are here" pin. The only saturated thing in either composition. */
+function Pin({ x, y, scale = 1 }: { x: number; y: number; scale?: number }) {
+  return (
+    <g transform={`translate(${x} ${y}) scale(${scale})`}>
+      <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="var(--ill-pin)"
+      />
+      <circle cx="21" cy="15.5" r="8" fill="var(--ill-pin-eye)" />
+    </g>
+  );
+}
+
+/**
+ * Desktop composition — the two-column hero panel.
+ *
+ * Crop window: `slice` anchored to the bottom, so the widest slot (about
+ * 590×384) reveals y ∈ [169, 520] and the narrowest (about 430×320) reveals
+ * y ∈ [118, 520]. Everything that carries meaning is therefore kept at
+ * y ≥ 200; the sky above it exists only to be cropped.
+ */
+export function HeroIllustration() {
+  return (
+    <svg viewBox="0 0 540 520" preserveAspectRatio="xMidYMax slice" aria-hidden="true" focusable="false">
+      <defs>
+        <SkyGradient id={SKY_TALL_ID} />
+      </defs>
+
+      <rect width="540" height="520" fill={`url(#${SKY_TALL_ID})`} />
+
+      {/* Two soft clouds. Low opacity so they never compete with the pin. */}
+      <g fill="var(--ill-cloud)" opacity="0.7">
+        <ellipse cx="96" cy="196" rx="34" ry="14" />
+        <ellipse cx="124" cy="189" rx="24" ry="17" />
+        <ellipse cx="424" cy="168" rx="28" ry="12" />
+        <ellipse cx="445" cy="162" 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="var(--ill-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="var(--ill-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="var(--ill-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="var(--ill-hill-front)" />
+
+      {/* The path climbs from the near edge up to the school */}
+      <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="var(--ill-path)"
+        strokeWidth="18"
+        fill="none"
+        strokeLinecap="round"
+      />
+      <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="var(--ill-path-edge)"
+        strokeWidth="18"
+        fill="none"
+        strokeLinecap="butt"
+        strokeLinejoin="round"
+        strokeDasharray="0.5 26"
+        opacity="0.5"
+      />
+
+      <Schoolhouse x={276} y={232} />
+
+      {/* Scattered rounded trees */}
+      <g fill="var(--ill-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="var(--ill-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="var(--ill-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="var(--ill-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>
+
+      <Pin x={196} y={372} />
+    </svg>
+  );
+}
+
+/**
+ * Band composition — the one-column hero, where the art becomes a short strip
+ * beneath the search.
+ *
+ * Crop window: at 358×136 (a phone) `slice` reveals x ∈ [42, 358] of the
+ * 400-unit width; at 860×176 (just under the one-column breakpoint) it reveals
+ * the full width but only y ∈ [38, 120]. The intersection — x ∈ [70, 330],
+ * y ∈ [38, 120] — is where the school and the pin sit. Hills and trees run to
+ * the edges precisely because they are the parts that may be cropped.
+ */
+export function HeroIllustrationBand() {
+  return (
+    <svg viewBox="0 0 400 120" preserveAspectRatio="xMidYMax slice" aria-hidden="true" focusable="false">
+      <defs>
+        <SkyGradient id={SKY_BAND_ID} />
+      </defs>
+
+      <rect width="400" height="120" fill={`url(#${SKY_BAND_ID})`} />
+
+      {/* Hills sit low so the safe zone stays clear for the building */}
+      <path d="M0 74 C 70 62 120 76 176 70 C 244 62 318 74 400 62 L400 120 L0 120 Z" fill="var(--ill-hill-far)" />
+      <path d="M0 92 C 84 82 140 94 208 88 C 286 80 340 92 400 84 L400 120 L0 120 Z" fill="var(--ill-hill-mid)" />
+      <path d="M0 108 C 96 100 168 110 248 104 C 322 98 356 106 400 102 L400 120 L0 120 Z" fill="var(--ill-hill-near)" />
+
+      {/* A shorter path — the same idea at band scale, without the switchback,
+          which turns to mush below about 40 user units of height. */}
+      <path
+        d="M150 120 C 156 104 186 100 202 92 C 216 84 210 76 216 70"
+        stroke="var(--ill-path)"
+        strokeWidth="9"
+        fill="none"
+        strokeLinecap="round"
+      />
+
+      <Schoolhouse x={186} y={30} scale={0.52} />
+
+      <g fill="var(--ill-tree-dark)">
+        <circle cx="58" cy="86" r="15" />
+        <circle cx="78" cy="94" r="11" />
+        <circle cx="342" cy="80" r="13" />
+      </g>
+      <g fill="var(--ill-tree-light)">
+        <circle cx="40" cy="98" r="12" />
+        <circle cx="360" cy="92" r="10" />
+        <circle cx="300" cy="100" r="11" />
+      </g>
+      <g fill="var(--ill-tree-pale)" opacity="0.9">
+        <circle cx="112" cy="104" r="9" />
+        <circle cx="266" cy="108" r="8" />
+      </g>
+
+      <Pin x={124} y={70} scale={0.62} />
+    </svg>
+  );
+}

nextjs-app/components/Logo.tsx

@@ -1,65 +1,102 @@
 /**
- * The SchoolCompare mark.
+ * The schoolcompare mark.
  *
- * Five bars: a cohort, with one school picked out. It is the same object as
- * the distribution strip inside a school row, at a different size — the logo
- * teaches the chart and the chart reinforces the logo.
+ * This is the supplied brand artwork, not a reconstruction of it. Two
+ * colourways were extracted from the logo sheet and live in public/brand:
  *
- * Built from opacity steps over `currentColor` rather than fixed greys, so it
- * inverts cleanly on any ground without a second artwork. The highlighted bar
- * is the only element that takes the brand hue.
+ *   mark.png          the primary lockup's mark — teal pin, white window and
+ *                     path, green leaves. Reads correctly on Warm White,
+ *                     white cards and Sand, and on both dark-theme grounds.
+ *   mark-on-dark.png  the on-dark colourway — white pin with the counter
+ *                     knocked through to the ground. Required wherever the
+ *                     ground is teal, because there the teal pin's silhouette
+ *                     disappears and only the white window survives.
  *
- * This is the single source for the mark. The favicon and the generated icons
- * derive from the same geometry (see BARS) — previously the header and the
- * favicon had drifted into two different logos.
+ * Both are written onto one 176×208 canvas with the artwork at the same
+ * height, so they are drop-in swappable — see ASPECT below for why that
+ * matters rather than merely being neat.
+ *
+ * `variant="auto"` serves the on-dark artwork to dark-theme viewers via a
+ * <picture> source, so this needs no JavaScript and no client boundary.
+ *
+ * The wordmark beside it is live text in Manrope rather than the sheet's
+ * raster: the written style guide specifies Manrope, and live text stays
+ * selectable, scales cleanly and recolours with the theme.
+ *
+ * RESOLUTION CAVEAT: the largest instance on the supplied sheet is 153×189,
+ * which is ample for the header (36px), the favicon and the share card, but
+ * short of a 512px PWA icon — that one is upscaled and is slightly soft. Drop
+ * a vector (SVG/AI/EPS) into public/brand and regenerate to fix it; every
+ * consumer goes through this component or public/brand, so it is one swap.
  */
 
-/** x, y, width, height, and whether this bar is the highlighted school. */
-export const BARS: ReadonlyArray<[number, number, number, number, boolean]> = [
-  [2, 26, 6, 12, false],
-  [10, 16, 6, 22, false],
-  [18, 8, 6, 30, false],
-  [26, 14, 6, 24, true],
-  [34, 28, 4, 10, false],
-];
+const MARK_LIGHT = '/brand/mark.png';
+const MARK_ON_DARK = '/brand/mark-on-dark.png';
 
-const COHORT_OPACITY = [0.22, 0.38, 0.55, 1, 0.22];
+/**
+ * Intrinsic size of the artwork files, used to derive width from height.
+ *
+ * Both colourways are deliberately written onto the SAME canvas at the same
+ * artwork height, so this one ratio is correct for either of them. That is not
+ * tidiness — it is required. `variant="auto"` renders a single <img> whose
+ * srcset swaps the file underneath it, so the width/height attributes are
+ * shared by both colourways and cannot be varied per file. When the two were
+ * tightly cropped they had different ratios (0.810 and 0.875) and different
+ * padding, which meant a wrong aspect hint before load — a reflow on load
+ * under `width: auto` — and a visible jump in logo size whenever the OS theme
+ * flipped. Re-crop or replace one file and you must re-normalise both.
+ */
+const ART_WIDTH = 176;
+const ART_HEIGHT = 208;
+const ASPECT = ART_WIDTH / ART_HEIGHT;
 
 interface LogoMarkProps {
   className?: string;
-  /** Rendered size in px. Defaults to inheriting via CSS. */
+  /** Rendered height in px. Width follows the artwork's aspect ratio. */
   size?: number;
-  /** Colour of the highlighted bar. Defaults to the brand token. */
-  accent?: string;
+  /**
+   * Which colourway to serve.
+   *  - `auto`   teal pin, swapping to the on-dark artwork in the dark theme
+   *  - `onDark` always the white pin — for teal grounds, which are teal in
+   *             both themes (the footer band)
+   */
+  variant?: 'auto' | 'onDark';
   title?: string;
 }
 
-export function LogoMark({ className, size, accent = 'var(--brand)', title }: LogoMarkProps) {
+export function LogoMark({ className, size = 36, variant = 'auto', title }: LogoMarkProps) {
+  const height = size;
+  const width = Math.round(size * ASPECT);
+  const alt = title ?? '';
+
+  if (variant === 'onDark') {
+    return (
+      // eslint-disable-next-line @next/next/no-img-element
+      <img
+        className={className}
+        src={MARK_ON_DARK}
+        width={width}
+        height={height}
+        alt={alt}
+        aria-hidden={title ? undefined : true}
+        decoding="async"
+      />
+    );
+  }
+
   return (
-    <svg
-      className={className}
-      width={size}
-      height={size}
-      viewBox="0 0 40 40"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-      role={title ? 'img' : undefined}
-      aria-hidden={title ? undefined : true}
-      aria-label={title}
-    >
-      {title ? <title>{title}</title> : null}
-      {BARS.map(([x, y, w, h, isSchool], i) => (
-        <rect
-          key={x}
-          x={x}
-          y={y}
-          width={w}
-          height={h}
-          rx={1}
-          fill={isSchool ? accent : 'currentColor'}
-          opacity={isSchool ? 1 : COHORT_OPACITY[i]}
-        />
-      ))}
-    </svg>
+    <picture>
+      <source media="(prefers-color-scheme: dark)" srcSet={MARK_ON_DARK} />
+      {/* eslint-disable-next-line @next/next/no-img-element */}
+      <img
+        className={className}
+        src={MARK_LIGHT}
+        width={width}
+        height={height}
+        alt={alt}
+        aria-hidden={title ? undefined : true}
+        decoding="async"
+      />
+    </picture>
   );
 }

nextjs-app/components/Navigation.module.css

@@ -1,10 +1,17 @@
+/*
+ * Header and mobile tab bar, on the schoolcompare brand.
+ *
+ * The header is a white card band closed by a single hairline rule — no
+ * shadow. The guideline's chrome is quiet; the colour on this surface is the
+ * wordmark and the one active nav item, and nothing else.
+ */
+
 .header {
   position: sticky;
   top: 0;
   z-index: 1000;
   background: var(--bg-card);
   border-bottom: 1px solid var(--border);
-  box-shadow: 0 2px 8px rgba(var(--shadow-rgb), 0.06);
 }
 
 .container {
@@ -16,46 +23,62 @@
   display: flex;
   justify-content: space-between;
   align-items: center;
+  gap: 2rem;
+  /* 64px desktop / 56px mobile is load-bearing: the school detail page's
+     sticky section nav docks against it with a hardcoded `top` in
+     SchoolDetailShell.module.css and schoolSections.module.css, and the
+     scroll-spy observers use it as a rootMargin. Change it in all four
+     places or not at all. */
   height: 64px;
 }
 
 .logo {
   display: flex;
   align-items: center;
-  gap: 0.75rem;
+  gap: 0.625rem;
   /* Padded hit area so the logo link is ≥44×44 on touch */
   margin: -0.375rem -0.5rem;
   padding: 0.375rem 0.5rem;
   text-decoration: none;
   color: var(--text-primary);
-  font-size: 1.25rem;
-  font-weight: 700;
-  transition: color 0.2s ease;
+  transition: color var(--transition);
   -webkit-tap-highlight-color: transparent;
 }
 
 .logo:hover {
-  color: var(--brand-strong);
+  color: var(--brand-stronger);
 }
 
-/* currentColor paints the four cohort bars; the mark supplies the brand hue
-   for the highlighted one itself. So this is ink, not brand. */
+/*
+ * The mark colours itself — pin in var(--brand), leaf knocked out in
+ * var(--bg-card), which is this header's own ground. It takes no colour from
+ * currentColor, so there is deliberately no `color` here.
+ */
 .logoIcon {
   display: inline-flex;
-  width: 32px;
-  height: 32px;
-  color: var(--text-primary);
+  flex: 0 0 auto;
+  /* The artwork is taller than it is wide (153:189), so height drives the box
+     and width follows. Constraining both would squash the pin. */
+  height: 38px;
 }
 
-.logoIcon svg {
-  width: 100%;
+.logoIcon img {
+  display: block;
   height: 100%;
+  width: auto;
 }
 
+/*
+ * "schoolcompare", one word, lower case. Manrope 700 pulled tight — the
+ * negative tracking is what makes the two halves read as a single word rather
+ * than as two.
+ */
 .logoText {
   font-family: var(--font-display);
+  font-size: var(--step-2);
   font-weight: 700;
-  letter-spacing: -0.022em;
+  line-height: 1;
+  letter-spacing: -0.035em;
 }
 
 .logoTextAccent {
@@ -63,41 +86,28 @@
 }
 
 .logo:hover .logoTextAccent {
-  color: var(--brand-strong);
+  color: var(--brand-stronger);
 }
 
 .nav {
   display: flex;
-  gap: 0.5rem;
+  align-items: center;
+  gap: 0.125rem;
 }
 
 .navLink {
   position: relative;
   display: flex;
   align-items: center;
-  gap: 0.5rem;
-  padding: 0.625rem 1rem;
-  font-size: 0.9375rem;
+  gap: 0.4375rem;
+  padding: 0.5rem 0.875rem;
+  font-family: var(--font-ui);
+  font-size: var(--step--1);
   font-weight: 500;
   color: var(--text-secondary);
   text-decoration: none;
-  border-radius: 6px;
-  transition: all 0.2s ease;
-}
-
-/* Sliding underline effect */
-.navLink::after {
-  content: '';
-  position: absolute;
-  bottom: 4px;
-  left: 1rem;
-  right: 1rem;
-  height: 2px;
-  background: var(--brand);
-  transform: scaleX(0);
-  transform-origin: left;
-  transition: transform 0.25s ease;
-  border-radius: 1px;
+  border-radius: var(--radius-md);
+  transition: color var(--transition), background-color var(--transition);
 }
 
 .navLink:hover {
@@ -105,33 +115,29 @@
   background: var(--bg-secondary);
 }
 
-.navLink:hover::after {
-  transform: scaleX(1);
-}
-
+/* The current page is marked twice — brand hue and a heavier weight — so the
+   state never rests on colour alone. */
 .navLink.active {
-  color: var(--brand-strong);
+  color: var(--brand);
   background: var(--brand-bg);
-}
-
-.navLink.active::after {
-  transform: scaleX(1);
+  font-weight: 600;
 }
 
 .badge {
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  min-width: 1.25rem;
-  height: 1.25rem;
+  min-width: 1.125rem;
+  height: 1.125rem;
   padding: 0 0.375rem;
-  font-size: 0.75rem;
-  font-weight: 600;
+  font-family: var(--font-ui);
+  font-size: var(--step--2);
+  font-weight: 700;
+  line-height: 1;
   color: var(--brand-on);
   background: var(--brand);
   border-radius: 9999px;
   animation: badgePop 0.3s ease-out;
-  box-shadow: 0 2px 6px rgba(var(--brand-rgb), 0.4);
 }
 
 @keyframes badgePop {
@@ -159,25 +165,23 @@
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  gap: 0.2rem;
+  gap: 0.25rem;
   flex: 1;
   min-height: 56px;
   padding: 0.375rem 0.25rem;
+  font-family: var(--font-ui);
   color: var(--text-secondary);
   text-decoration: none;
   font-size: 0.6875rem;
   font-weight: 500;
   letter-spacing: 0.01em;
-  transition: color 0.15s ease, background-color 0.15s ease;
+  transition: color var(--transition);
   -webkit-tap-highlight-color: transparent;
 }
 
-.tab:active {
-  background: var(--bg-secondary);
-}
-
 .tabActive {
-  color: var(--brand-strong);
+  color: var(--brand);
+  font-weight: 600;
 }
 
 .tabIconWrap {
@@ -189,7 +193,29 @@
   height: 24px;
 }
 
+/* The active tab's icon sits in a brand-tinted stadium — the same rounded
+   geometry as the rest of the system, and a second cue beyond hue. Drawn as a
+   pseudo-element so it can bleed wider than the 24px icon box without moving
+   the badge's anchor. */
+.tabIconWrap::before {
+  content: '';
+  position: absolute;
+  inset: -2px -9px;
+  border-radius: var(--radius-xl);
+  background: transparent;
+  transition: background-color var(--transition);
+}
+
+.tabActive .tabIconWrap::before {
+  background: var(--brand-bg);
+}
+
+.tab:active .tabIconWrap::before {
+  background: var(--brand-bg);
+}
+
 .tabIcon {
+  position: relative;
   width: 22px;
   height: 22px;
 }
@@ -200,16 +226,18 @@
 
 .tabBadge {
   position: absolute;
-  top: -6px;
-  right: -10px;
+  top: -7px;
+  right: -7px;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   min-width: 18px;
   height: 18px;
   padding: 0 5px;
+  font-family: var(--font-ui);
   font-size: 0.6875rem;
   font-weight: 700;
+  line-height: 1;
   color: var(--brand-on);
   background: var(--brand);
   border: 2px solid var(--bg-card);
@@ -229,8 +257,12 @@
   }
 
   .logoIcon {
-    width: 32px;
-    height: 32px;
+    width: 34px;
+    height: 34px;
+  }
+
+  .logoText {
+    font-size: var(--step-1);
   }
 
   .bottomBar {

nextjs-app/components/Navigation.tsx

@@ -79,6 +79,16 @@ export function Navigation() {
     };
   }, []);
 
+  /*
+   * The brand guideline's nav also carries Guides, About, Favourites and a
+   * "Sign in" button. None of the four is added here, deliberately: there are
+   * no Guides or About pages, and Favourites and Sign in both need an accounts
+   * system that does not exist. Drawing chrome for features we do not have
+   * would be a promise the product cannot keep. Rankings and Admissions —
+   * which the guideline omits — take their place, because they are real.
+   *
+   * If accounts ever ship, this is the list to extend.
+   */
   const items = [
     { href: '/', label: 'Search', Icon: SearchIcon },
     { href: '/compare', label: 'Compare', Icon: CompareIcon },
@@ -90,12 +100,18 @@ export function Navigation() {
     <>
       <header className={styles.header}>
         <div className={styles.container}>
-          <Link href="/" className={styles.logo} aria-label="SchoolCompare home">
+          <Link href="/" className={styles.logo} aria-label="schoolcompare home">
+            {/*
+              variant="auto": the teal pin on the white header, swapping to the
+              on-dark artwork for dark-theme viewers. The footer has to force
+              onDark instead, because its band is teal in both themes and the
+              teal pin has no silhouette against it.
+            */}
             <span className={styles.logoIcon}>
-              <LogoMark />
+              <LogoMark size={38} />
             </span>
             <span className={styles.logoText}>
-              School<span className={styles.logoTextAccent}>Compare</span>
+              school<span className={styles.logoTextAccent}>compare</span>
             </span>
           </Link>
 

nextjs-app/lib/theme.ts

@@ -45,35 +45,35 @@ export type ThemeToken =
 
 /** Values used before hydration and in any non-DOM context (SSR, tests). */
 const FALLBACK: Record<string, string> = {
-  '--brand': '#584a9b',
-  '--brand-strong': '#473c80',
-  '--brand-bg': 'rgba(88, 74, 155, 0.10)',
-  '--status-above': '#0e6e66',
-  '--status-above-bg': 'rgba(14, 110, 102, 0.10)',
-  '--status-below': '#9a5b00',
-  '--status-below-bg': 'rgba(154, 91, 0, 0.11)',
-  '--text-primary': '#16202a',
-  '--text-secondary': '#4a545f',
-  '--text-muted': '#5c6570',
-  '--text-inverse': '#f7f7f4',
-  '--bg-card': '#fcfcfa',
-  '--bg-secondary': '#e9e8e2',
-  '--border': '#dedcd5',
-  '--border-strong': '#cdcac1',
-  '--surface-inverse': '#16202a',
-  '--chart-1': '#584a9b',
-  '--chart-2': '#0e6e66',
-  '--chart-3': '#9a5b00',
-  '--chart-4': '#8a7cc9',
-  '--chart-5': '#3e9c92',
-  '--chart-6': '#c9903d',
-  '--chart-grid': '#dedcd5',
-  '--chart-reference': '#5c6570',
-  '--phase-primary': '#4a6072',
-  '--phase-secondary-text': '#4e4570',
-  '--medal-gold': '#a67c00',
-  '--medal-silver': '#6f7580',
-  '--medal-bronze': '#8a5a2b',
+  '--brand': '#0F766E',
+  '--brand-strong': '#0C5F58',
+  '--brand-bg': 'rgba(15, 118, 110, 0.10)',
+  '--status-above': '#36743F',
+  '--status-above-bg': 'rgba(54, 116, 63, 0.12)',
+  '--status-below': '#A9481F',
+  '--status-below-bg': 'rgba(249, 115, 96, 0.15)',
+  '--text-primary': '#1C2731',
+  '--text-secondary': '#4A5560',
+  '--text-muted': '#5F6A75',
+  '--text-inverse': '#FFFFFF',
+  '--bg-card': '#FFFFFF',
+  '--bg-secondary': '#F5EFE6',
+  '--border': '#E5E7EB',
+  '--border-strong': '#D3D7DD',
+  '--surface-inverse': '#0F766E',
+  '--chart-1': '#0F766E',
+  '--chart-2': '#36743F',
+  '--chart-3': '#806200',
+  '--chart-4': '#A9481F',
+  '--chart-5': '#2F6F8F',
+  '--chart-6': '#5F4FA8',
+  '--chart-grid': '#E5E7EB',
+  '--chart-reference': '#5F6A75',
+  '--phase-primary': '#0F766E',
+  '--phase-secondary-text': '#2A6180',
+  '--medal-gold': '#806200',
+  '--medal-silver': '#6B7580',
+  '--medal-bronze': '#8A5A2B',
 };
 
 /** Read one token. Safe to call during SSR — returns the light-theme value. */
@@ -120,8 +120,8 @@ const SERIES = [
 ] as const;
 
 const SERIES_FALLBACK = [
-  '#584a9b', '#0e6e66', '#9a5b00', '#a03a5e',
-  '#2f5f8f', '#4a6b2f', '#7a3f7a', '#97442a',
+  '#0F766E', '#36743F', '#806200', '#A9481F',
+  '#2F6F8F', '#5F4FA8', '#0E7A86', '#8A4A6B',
 ];
 
 /**

nextjs-app/lib/types.ts

@@ -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;
 }
 
 // ============================================================================

nextjs-app/next.config.js

@@ -81,9 +81,10 @@ const nextConfig = {
         ],
       },
       {
-        // favicon.svg was replaced by app/icon.svg (the mark now has one
-        // source in components/Logo.tsx); this rule was caching a 404.
-        source: '/icon.svg',
+        // The mark is now the supplied raster artwork, so the favicon is
+        // app/icon.png rather than an SVG. Pointing this at the old path was
+        // caching a 404.
+        source: '/icon.png',
         headers: [
           {
             key: 'Cache-Control',

nextjs-app/public/manifest.json

@@ -1,16 +1,17 @@
 {
-  "name": "SchoolCompare",
-  "short_name": "SchoolCompare",
+  "name": "schoolcompare",
+  "short_name": "schoolcompare",
   "description": "Compare primary and secondary school performance across England",
   "start_url": "/",
   "display": "standalone",
-  "background_color": "#f2f1ed",
-  "theme_color": "#f2f1ed",
+  "background_color": "#FAFAF8",
+  "theme_color": "#0F766E",
   "icons": [
     {
-      "src": "/icon.svg",
-      "sizes": "any",
-      "type": "image/svg+xml"
+      "src": "/icon.png",
+      "sizes": "96x96",
+      "type": "image/png",
+      "purpose": "any"
     },
     {
       "src": "/icon-192.png",