Merge pull request 'fix(home): correct what the landing page claims, and give it one rhythm' (#91) from fix/homepage-truth-and-rhythm into feat/brand-logo-artwork

Reviewed-on: #91

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 });
@@ -722,9 +848,15 @@ test('the brand typefaces actually load and apply', async ({ page }) => {
 
   const fonts = await page.evaluate(() => {
     const root = getComputedStyle(document.documentElement);
+    // Only the FIRST family in the stack is the one actually asked for; the
+    // 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 headings = [...document.querySelectorAll('h1, h2')].map(first);
     return {
-      body: getComputedStyle(document.body).fontFamily,
-      heading: getComputedStyle(document.querySelector('h1')!).fontFamily,
+      body: first(document.body),
+      headings,
+      bodyStack: getComputedStyle(document.body).fontFamily,
       displayToken: root.getPropertyValue('--font-display').trim(),
       uiToken: root.getPropertyValue('--font-ui').trim(),
       proseToken: root.getPropertyValue('--font-prose').trim(),
@@ -732,15 +864,42 @@ test('the brand typefaces actually load and apply', async ({ page }) => {
   });
 
   // An empty token means the var() chain broke, which is the exact failure
-  // mode above — the computed font-family would look plausible either way.
+  // mode this guards — the computed font-family would look plausible either
+  // way, because an invalid font-family just inherits.
   expect(fonts.displayToken, '--font-display resolved').not.toBe('');
   expect(fonts.uiToken, '--font-ui resolved').not.toBe('');
   expect(fonts.proseToken, '--font-prose resolved').not.toBe('');
 
-  expect(fonts.body).toContain('Schibsted');
-  expect(fonts.heading).toContain('Schibsted');
-  // Times/serif anywhere in the interface means we fell back.
-  expect(fonts.body).not.toMatch(/Times|serif$/);
+  // 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 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 }) => {
@@ -754,7 +913,7 @@ test('no visible text falls back to the browser default black', async ({ page })
       .filter((el) => {
         const r = el.getBoundingClientRect();
         if (r.width < 2 || r.height < 2) return false;
-        if (el.closest('.leaflet-container')) return false;
+        if (el.closest('.leaflet-tile-pane')) return false;
         return getComputedStyle(el).color === 'rgb(0, 0, 0)';
       })
       .map((el) => el.tagName.toLowerCase() + '.' + (el.getAttribute('class') || '').split(' ')[0])
@@ -801,7 +960,7 @@ test('rendered colours all come from the token palette', async ({ page }) => {
     for (const el of document.querySelectorAll('body *')) {
       const box = el.getBoundingClientRect();
       if (box.width < 2 || box.height < 2) continue;
-      if (el.closest('.leaflet-container')) continue; // OSM tiles are imagery
+      if (el.closest('.leaflet-tile-pane')) continue; // OSM tiles are imagery, not palette
       const s = getComputedStyle(el);
       const checks: Array<[string, string]> = [['color', s.color]];
       if (s.backgroundColor !== 'rgba(0, 0, 0, 0)') checks.push(['background', s.backgroundColor]);
@@ -817,3 +976,68 @@ test('rendered colours all come from the token palette', async ({ page }) => {
 
   expect(strays, `off-palette colours: ${strays.join('; ')}`).toEqual([]);
 });
+
+/**
+ * Contrast, in both themes.
+ *
+ * The status hues were originally specced against --bg-primary, but they are
+ * used as chip text on their own tint, which sits on darker surfaces — so the
+ * real ratios were 3.85–4.44:1, under AA, on every school row and result card.
+ * The page ground is the easy case; the tinted chip is the one that fails.
+ *
+ * Waits for transitions to settle before measuring: several components carry
+ * `transition: color`, and reading mid-transition reports colours that were
+ * never on screen at rest.
+ */
+const CONTRAST_PROBE = `(() => {
+  const ps = c => { const m=(c||'').match(/[\\d.]+/g); if(!m) return null;
+    const a=m.map(Number); return {r:a[0],g:a[1],b:a[2],a:m.length>3?a[3]:1}; };
+  const ov = (f,b) => ({r:f.r*f.a+b.r*(1-f.a), g:f.g*f.a+b.g*(1-f.a), b:f.b*f.a+b.b*(1-f.a), a:1});
+  const L = c => { const f=v=>{v/=255; return v<=0.03928?v/12.92:Math.pow((v+.055)/1.055,2.4);};
+    return .2126*f(c.r)+.7152*f(c.g)+.0722*f(c.b); };
+  const RT = (a,b) => { const x=L(a),y=L(b); return (Math.max(x,y)+.05)/(Math.min(x,y)+.05); };
+  const BG = el => { const ls=[]; let n=el;
+    while(n && n!==document.documentElement){ const c=ps(getComputedStyle(n).backgroundColor);
+      if(c && c.a>0){ ls.push(c); if(c.a===1) break; } n=n.parentElement; }
+    const base = ps(getComputedStyle(document.documentElement).backgroundColor)||{r:255,g:255,b:255,a:1};
+    let acc = ls.length && ls[ls.length-1].a===1 ? ls.pop() : base;
+    for(let i=ls.length-1;i>=0;i--) acc=ov(ls[i],acc); return acc; };
+  const out=[], seen=new Set();
+  for (const el of document.querySelectorAll('body *')) {
+    if (el.closest('.leaflet-container')) continue;
+    const r=el.getBoundingClientRect(), s=getComputedStyle(el);
+    if (r.width<2 || r.height<2 || s.visibility==='hidden' || s.opacity==='0') continue;
+    if (![...el.childNodes].some(n=>n.nodeType===3 && n.textContent.trim().length>1)) continue;
+    const fc=ps(s.color), bc=BG(el); if(!fc||!bc) continue;
+    const fg = fc.a<1?ov(fc,bc):fc, ratio=RT(fg,bc);
+    const px=parseFloat(s.fontSize), bold=parseInt(s.fontWeight,10)>=700;
+    const need=(px>=24||(px>=18.66&&bold))?3:4.5;
+    if (ratio >= need) continue;
+    const key=(el.getAttribute('class')||'')+s.color;
+    if (seen.has(key)) continue; seen.add(key);
+    out.push(((el.getAttribute('class')||'?').split(' ')[0])+' '+ratio.toFixed(2)+':1 (needs '+need+
+      ') '+s.color+' on rgb('+Math.round(bc.r)+','+Math.round(bc.g)+','+Math.round(bc.b)+') "'+
+      el.textContent.trim().slice(0,28)+'"');
+  }
+  return out.slice(0, 12);
+})()`;
+
+for (const scheme of ['light', 'dark'] as const) {
+  test(`text meets WCAG AA in the ${scheme} theme`, async ({ browser }) => {
+    const context = await browser.newContext({ colorScheme: scheme });
+    const page = await context.newPage();
+    const failures: string[] = [];
+
+    for (const path of ['/', '/rankings', '/admissions']) {
+      await page.goto(path);
+      await expect(page.locator('h1, h2').first()).toBeVisible({ timeout: 15_000 });
+      // Let `transition: color` settle — the longest in the app is 0.4s.
+      await page.waitForTimeout(700);
+      const found = (await page.evaluate(CONTRAST_PROBE)) as string[];
+      failures.push(...found.map((f) => `${path} → ${f}`));
+    }
+
+    await context.close();
+    expect(failures, `AA failures in ${scheme}:\n  ${failures.join('\n  ')}`).toEqual([]);
+  });
+}

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,156 +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: #0e6e66;    /* 5.2:1 on --bg-primary */
-    --status-above-bg: rgba(14, 110, 102, 0.10);
-    --status-below: #9a5b00;    /* 4.8:1 on --bg-primary */
-    --status-below-bg: rgba(154, 91, 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: #0e6e66;
-    --chart-3: #9a5b00;
-    --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: #0e6e66;
-    --series-3: #9a5b00;
-    --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;
 
-    /* ── 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;
+    /* ── 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 ────────────────────────────────────── */
+    --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: 14, 110, 102;
-    --status-below-rgb: 154, 91, 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 ───────────────────────────────────────────────────────── */
-    --font-display: var(--font-schibsted), 'Schibsted Grotesk', -apple-system, BlinkMacSystemFont, sans-serif;
-    --font-ui: var(--font-schibsted), 'Schibsted Grotesk', -apple-system, BlinkMacSystemFont, sans-serif;
-    --font-data: var(--font-schibsted), 'Schibsted Grotesk', -apple-system, BlinkMacSystemFont, sans-serif;
-    --font-prose: var(--font-literata), '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.
@@ -159,84 +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: #3fb3a4;    /* 7.2:1 */
-        --status-above-bg: rgba(63, 179, 164, 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: #3fb3a4;
-        --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: #3fb3a4;
-        --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;
 
-        --medal-gold: #d4a72c;
-        --medal-silver: #a8b0bb;
-        --medal-bronze: #c08552;
+        --series-1: #5FC7BB;
+        --series-2: #7FCB8A;
+        --series-3: #EFC658;
+        --series-4: #EFA184;
+        --series-5: #8FB4D9;
+        --series-6: #B6A9DD;
+        --series-7: #6FD0DC;
+        --series-8: #D99BB8;
 
-        --brand-rgb: 156, 140, 232;
-        --status-above-rgb: 63, 179, 164;
-        --status-below-rgb: 217, 155, 46;
-        --ink-rgb: 228, 233, 238;
-        --text-inverse-rgb: 16, 21, 27;
+        --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;
+
+        --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);
     }
 }
 
@@ -278,6 +410,10 @@ button {
 
 /* Every digit that could line up in a column does. This is a data product;
    proportional numerals in a results table read as amateur. */
+/* The interface is mostly figures, so tabular is the default here rather
+   than something each component has to remember. Running prose opts back out
+   below — proportional figures read better in a sentence. */
+.main,
 table,
 [data-numeric] {
     font-variant-numeric: tabular-nums;
@@ -286,6 +422,7 @@ table,
 /* Prose gets the serif; the interface never does. */
 .prose {
     font-family: var(--font-prose);
+    font-variant-numeric: normal;
     font-size: var(--step-0);
     line-height: 1.65;
 }
@@ -374,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);
@@ -395,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);
@@ -421,28 +582,33 @@ table,
  * bar would otherwise sit on a near-black page.
  *
  * The tiles themselves stay as OSM renders them; only the chrome is ours.
+ *
+ * Every selector here is prefixed with `html` on purpose. leaflet.css is
+ * imported from a client component, so its chunk loads AFTER globals.css; at
+ * equal specificity the later sheet wins and these overrides lose silently.
+ * The `html` prefix takes them to 0,1,1 so load order stops mattering.
  */
-.leaflet-container {
+html .leaflet-container {
     background: var(--bg-secondary);
     font-family: var(--font-ui);
 }
 
-.leaflet-control-attribution {
+html .leaflet-control-attribution {
     background: rgba(var(--text-inverse-rgb), 0.82);
     color: var(--text-muted);
 }
 
-.leaflet-control-attribution a {
+html .leaflet-control-attribution a {
     color: var(--brand);
 }
 
-.leaflet-bar a {
+html .leaflet-bar a {
     background: var(--bg-card);
     color: var(--text-primary);
     border-bottom-color: var(--border);
 }
 
-.leaflet-bar a:hover {
+html .leaflet-bar a:hover {
     background: var(--bg-secondary);
     color: var(--text-primary);
 }
@@ -460,6 +626,12 @@ table,
     .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,6 +1,16 @@
+/*
+ * 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(--text-primary);
-  color: var(--bg-secondary);
+  background: var(--surface-sunken);
+  color: var(--on-sunken);
   margin-top: auto;
 }
 
@@ -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(--bg-primary);
+}
+
+.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: rgba(var(--text-inverse-rgb), 0.7);
+  color: var(--on-sunken-muted);
+  max-width: 34ch;
 }
 
 .sectionTitle {
   margin: 0;
-  font-size: 0.875rem;
-  font-weight: 600;
-  color: var(--status-below);
+  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,43 +113,64 @@
 }
 
 .link {
-  font-size: 0.875rem;
-  color: rgba(var(--text-inverse-rgb), 0.7);
+  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 {
-  color: var(--status-below);
+  color: var(--on-sunken);
 }
 
 .linkDisabled {
-  font-size: 0.875rem;
-  color: rgba(var(--text-inverse-rgb), 0.4);
+  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(var(--text-inverse-rgb), 0.15);
   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;
-  color: rgba(var(--text-inverse-rgb), 0.6);
+  font-size: var(--step--1);
+  color: var(--on-sunken-muted);
 }
 
 .disclaimer .link {
-  color: var(--brand);
+  color: var(--on-sunken-link);
 }
 
 .disclaimer .link:hover {
-  color: var(--status-below);
+  color: var(--on-sunken);
 }
 
 @media (max-width: 768px) {

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/components/school/SchoolDetailShell.module.css

@@ -88,8 +88,7 @@
 
 
 .headerHasMap .actions .btnAdd {
-    /* Sits on the map hero, which renders light in both themes. */
-    background: rgba(255, 255, 255, 0.9);
+    background: var(--bg-card);
     color: var(--brand-strong);
     border-color: transparent;
     -webkit-backdrop-filter: blur(6px);

nextjs-app/components/school/schoolSections.module.css

@@ -75,8 +75,7 @@
 }
 
 .headerHasMap .actions .btnAdd {
-    /* Sits on the map hero, which renders light in both themes. */
-    background: rgba(255, 255, 255, 0.9);
+    background: var(--bg-card);
     color: var(--brand-strong);
     border-color: transparent;
     -webkit-backdrop-filter: blur(6px);

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",