fix(ui): move back button into sticky nav, fix sticky nav offset

- Remove standalone back button div (looked out of place)
- Back button now lives in the sticky section nav bar, styled as a
  bordered pill with coral accent — consistent with page design
- Fix sticky nav top offset from 0 to 3rem so it sticks below the
  site-wide header instead of sliding behind it
- Increase scroll-margin-top on cards to 6rem to account for both
  site header and section nav height

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

nextjs-app/components/SchoolDetailView.module.css

@@ -120,7 +120,7 @@
 /* ── Sticky Section Navigation ──────────────────────── */
 .sectionNav {
   position: sticky;
-  top: 0;
+  top: 3rem;
   z-index: 10;
   background: var(--bg-card, white);
   border: 1px solid var(--border-color, #e5dfd5);
@@ -142,6 +142,36 @@
 .sectionNavInner {
   display: inline-flex;
   gap: 0.375rem;
+  align-items: center;
+}
+
+.sectionNavBack {
+  display: inline-flex;
+  align-items: center;
+  padding: 0.3rem 0.625rem;
+  font-size: 0.75rem;
+  font-weight: 600;
+  color: var(--accent-coral, #e07256);
+  background: none;
+  border: 1px solid var(--border-color, #e5dfd5);
+  border-radius: 4px;
+  cursor: pointer;
+  white-space: nowrap;
+  transition: all 0.15s ease;
+  margin-right: 0.25rem;
+}
+
+.sectionNavBack:hover {
+  background: var(--bg-secondary, #f3ede4);
+  border-color: var(--accent-coral, #e07256);
+}
+
+.sectionNavDivider {
+  width: 1px;
+  height: 1rem;
+  background: var(--border-color, #e5dfd5);
+  margin: 0 0.25rem;
+  flex-shrink: 0;
 }
 
 .sectionNavLink {
@@ -169,7 +199,7 @@
   padding: 1.25rem 1.5rem;
   margin-bottom: 1rem;
   box-shadow: var(--shadow-soft);
-  scroll-margin-top: 3.5rem;
+  scroll-margin-top: 6rem;
 }
 
 /* Section Title */
@@ -565,28 +595,6 @@
   font-style: italic;
 }
 
-/* Back navigation */
-.backNav {
-  padding: 1rem var(--page-padding, 2rem);
-  padding-bottom: 0;
-}
-
-.backButton {
-  background: none;
-  border: none;
-  color: var(--text-secondary);
-  font-size: 0.875rem;
-  cursor: pointer;
-  padding: 0.375rem 0;
-  display: inline-flex;
-  align-items: center;
-  gap: 0.25rem;
-  transition: color var(--transition);
-}
-
-.backButton:hover {
-  color: var(--text-primary);
-}
 
 /* ── Responsive ──────────────────────────────────────── */
 @media (max-width: 768px) {

nextjs-app/components/SchoolDetailView.tsx

@@ -110,11 +110,6 @@ export function SchoolDetailView({
 
   return (
     <div className={styles.container}>
-      {/* Back Navigation */}
-      <div className={styles.backNav}>
-        <button onClick={() => router.back()} className={styles.backButton}>← Back</button>
-      </div>
-
       {/* Header */}
       <header className={styles.header}>
         <div className={styles.headerContent}>
@@ -174,15 +169,15 @@ export function SchoolDetailView({
       </header>
 
       {/* Sticky Section Navigation */}
-      {navItems.length > 0 && (
+      <nav className={styles.sectionNav} aria-label="Page sections">
-        <nav className={styles.sectionNav} aria-label="Page sections">
+        <div className={styles.sectionNavInner}>
-          <div className={styles.sectionNavInner}>
+          <button onClick={() => router.back()} className={styles.sectionNavBack}>← Back</button>
-            {navItems.map(({ id, label }) => (
+          {navItems.length > 0 && <div className={styles.sectionNavDivider} />}
-              <a key={id} href={`#${id}`} className={styles.sectionNavLink}>{label}</a>
+          {navItems.map(({ id, label }) => (
-            ))}
+            <a key={id} href={`#${id}`} className={styles.sectionNavLink}>{label}</a>
-          </div>
+          ))}
-        </nav>
+        </div>
-      )}
+      </nav>
 
       {/* Ofsted Rating */}
       {ofsted && (