diff --git a/Ralph/IMPLEMENTATION_PLAN.md b/Ralph/IMPLEMENTATION_PLAN.md
index 92fbc90..c43385f 100644
--- a/Ralph/IMPLEMENTATION_PLAN.md
+++ b/Ralph/IMPLEMENTATION_PLAN.md
@@ -119,7 +119,7 @@ src/
 
   Create `src/components/LoginScreen.tsx`. Dark blue-gray background (#1E293B). Centered white login card (320px wide, 12px radius, subtle shadow). NHS-blue shield icon at top. Username field: types "A.CHARLWOOD" character-by-character (30ms per char, Geist Mono font). Password field: fills with 8 dots (20ms per dot). "Log In" button: NHS blue (#005EB8), full width. After 150ms pause, button shows pressed state (darkens, 100ms), then emits `onComplete` callback. Total login animation: ~1.2s. Respect `prefers-reduced-motion`: with reduced motion, username appears instantly and login completes in ~500ms.
 
-- [ ] **Task 4: Build PatientBanner component (full and condensed)**
+- [x] **Task 4: Build PatientBanner component (full and condensed)**
 
   Create `src/components/PatientBanner.tsx` with two modes. Full banner (80px): patient name "CHARLWOOD, Andrew (Mr)", DOB "14/02/1993", NHS No "221 181 0" (GPhC number formatted), address "Norwich, NR1", phone, email, status "Active" (green dot), badge "Open to opportunities". Action buttons: Download CV, Email, LinkedIn. Condensed banner (48px, sticky after 100px scroll): name, NHS No, status dot, action buttons only. Use `useScrollCondensation` hook with IntersectionObserver. Smooth height transition (200ms). Banner spans full viewport width.
 
diff --git a/Ralph/progress.txt b/Ralph/progress.txt
index e931ee0..712da96 100644
--- a/Ralph/progress.txt
+++ b/Ralph/progress.txt
@@ -129,3 +129,27 @@ This is a complete redesign of the CV presentation, moving from the ECG animatio
 - **Learnings**:
   - Geist Mono not available via Google Fonts, using Fira Code as fallback
   - Total login animation timing: ~1.2s (350ms username + 150ms pause + 160ms password + 150ms pause + 100ms button + 200ms hold)
+
+### Iteration 4 — Task 4: Build PatientBanner component with full and condensed modes
+- **Completed**: Task 4 - Created PatientBanner component with scroll-based condensation
+- **Files created**:
+  - `src/hooks/useScrollCondensation.ts` - IntersectionObserver hook for scroll detection
+  - `src/components/PatientBanner.tsx` - Full (80px) and condensed (48px) banner modes
+- **Design decisions**:
+  - IntersectionObserver with rootMargin -100px to detect scroll past threshold
+  - Smooth height transition using CSS `transition-all duration-200 ease-out`
+  - Sticky positioning with z-40 for persistent visibility
+  - Status dot: 8px circle, green for Active
+  - Badge: NHS blue background, white text, small pill shape
+  - Action buttons: outlined with NHS blue, fill on hover
+  - GPhC number formatted with spaces like NHS number (221 181 0)
+  - Tooltip on NHS No field explaining it's GPhC Registration Number
+- **Accessibility**:
+  - `role="banner"` on header element
+  - `aria-label` on status dot
+  - Proper link semantics for phone and email
+- **Quality checks**: `npm run typecheck` ✓, `npm run lint` ✓, `npm run build` ✓
+- **Learnings**:
+  - IntersectionObserver with rootMargin provides cleaner scroll detection than scroll event listeners
+  - Sentinel element at top of viewport triggers condensation when it leaves view
+  - Sticky positioning requires no JavaScript for the sticky behavior itself