diff --git a/nextjs-app/components/SchoolRow.module.css b/nextjs-app/components/SchoolRow.module.css
index 939b2a5..0aea318 100644
--- a/nextjs-app/components/SchoolRow.module.css
+++ b/nextjs-app/components/SchoolRow.module.css
@@ -199,6 +199,16 @@
 .ofsted3 { background: var(--accent-gold-bg); color: #b8920e; }
 .ofsted4 { background: var(--accent-coral-bg); color: var(--accent-coral, #e07256); }
 
+/* ── Ofsted badge variants ──────────────────────────────────────────────── */
+/* ofsted1–4 already defined above; these cover the two new framework states */
+.ofstedRc      { background: #5a3a6e; color: #fff; }
+.ofstedPending { background: #e0e0e0; color: #666; }
+
+/* ── vs-national delta line (under RWM metric) ──────────────────────────── */
+.vsNational    { font-size: 0.7rem; color: var(--accent-teal, #2d7d7d);  font-weight: 600; }
+.vsNationalNeg { font-size: 0.7rem; color: var(--accent-coral, #e07256); font-weight: 600; }
+.vsNationalFlat{ font-size: 0.7rem; color: var(--text-muted, #8a847a); }
+
 /* ── Mobile ──────────────────────────────────────────── */
 @media (max-width: 640px) {
   .row {
diff --git a/nextjs-app/components/SecondarySchoolRow.module.css b/nextjs-app/components/SecondarySchoolRow.module.css
index 64a234a..dccf6c7 100644
--- a/nextjs-app/components/SecondarySchoolRow.module.css
+++ b/nextjs-app/components/SecondarySchoolRow.module.css
@@ -201,6 +201,10 @@
 .ofsted3 { background: var(--accent-gold-bg); color: #b8920e; }
 .ofsted4 { background: var(--accent-coral-bg); color: var(--accent-coral, #e07256); }
 
+/* ── Ofsted badge variants ──────────────────────────────────────────────── */
+.ofstedRc      { background: #5a3a6e; color: #fff; }
+.ofstedPending { background: #e0e0e0; color: #666; }
+
 /* ── Right actions column ────────────────────────────── */
 .rowActions {
   display: flex;